forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
Remove css nesting, causes issues with purgecss
+77
-95
+2
-6
Justfile
+2
-6
Justfile
···
33
33
--output {{BUILD_DIR}}/about.css \
34
34
\
35
35
--post-plugin-before postcss-import \
36
-
--post-plugin-after postcss-custom-properties \
37
-
--post-plugin-after postcss-nesting
36
+
--post-plugin-after postcss-custom-properties
38
37
39
38
{{NPM_DIR}}/.bin/etc {{SRC_DIR}}/Css/Application.css \
40
39
--config {{SYSTEM_DIR}}/Css/Tailwind.js \
···
43
42
--output {{BUILD_DIR}}/application.css \
44
43
\
45
44
--post-plugin-before postcss-import \
46
-
--post-plugin-after postcss-custom-properties \
47
-
--post-plugin-after postcss-nesting
45
+
--post-plugin-after postcss-custom-properties
48
46
49
47
50
48
@css-prod:
···
56
54
\
57
55
--post-plugin-before postcss-import \
58
56
--post-plugin-after postcss-custom-properties \
59
-
--post-plugin-after postcss-nesting \
60
57
\
61
58
--purge-content {{BUILD_DIR}}/about/**/*.html
62
59
···
66
63
\
67
64
--post-plugin-before postcss-import \
68
65
--post-plugin-after postcss-custom-properties \
69
-
--post-plugin-after postcss-nesting \
70
66
\
71
67
--purge-content {{BUILD_DIR}}/ui.elm.js \
72
68
--purge-content {{BUILD_DIR}}/index.html \
-1
package.json
-1
package.json
+7
-10
src/Css/About.css
+7
-10
src/Css/About.css
···
97
97
/* Lists
98
98
----- */
99
99
100
-
ul, ol {
101
-
@apply leading-relaxed ml-3;
102
-
103
-
& li { @apply mb-1 }
104
-
}
100
+
ul, ol { @apply leading-relaxed ml-3 }
101
+
ul li, ol li { @apply mb-1 }
105
102
106
103
ol {
107
104
counter-reset: ol;
105
+
}
108
106
109
-
& li::before {
110
-
@apply pr-3 inline-block text-base06;
111
-
counter-increment: ol;
112
-
content: counters(ol, ".") ".";
113
-
}
107
+
ol li::before {
108
+
@apply pr-3 inline-block text-base06;
109
+
counter-increment: ol;
110
+
content: counters(ol, ".") ".";
114
111
}
115
112
116
113
ul li::before {
+4
-14
src/Css/Application.css
+4
-14
src/Css/Application.css
···
24
24
overscroll-behavior: none;
25
25
}
26
26
27
-
28
27
body {
29
28
@apply text-base01;
30
29
···
36
35
text-rendering: optimizeLegibility;
37
36
}
38
37
39
-
40
38
button {
41
39
color: inherit;
42
40
font-family: inherit;
43
41
}
44
-
45
42
46
43
*:active {
47
44
outline: none;
48
45
}
49
46
50
-
51
47
.align-sub { vertical-align: sub }
52
48
.all-small-caps { font-variant-caps: all-small-caps }
53
49
.flex-basis-0 { flex-basis: 0 }
54
50
.smooth-scrolling { scroll-behavior: smooth }
55
-
56
51
57
52
@screen dark {
58
53
body { @apply text-gray-600; }
···
66
61
.dragging-something {
67
62
@apply select-none;
68
63
cursor: grabbing;
69
-
& * { cursor: grabbing !important }
70
64
}
71
65
66
+
.dragging-something * {
67
+
cursor: grabbing !important
68
+
}
72
69
73
70
71
+
74
72
/* Forms
75
73
----- */
76
74
···
80
78
opacity: 1;
81
79
}
82
80
83
-
84
81
input:invalid,
85
82
textarea:invalid {
86
83
box-shadow: none;
87
84
outline: none;
88
85
}
89
-
90
86
91
87
input[changed]:invalid,
92
88
textarea[changed]:invalid {
93
89
@apply border-base08;
94
90
}
95
91
96
-
97
92
select:-moz-focusring {
98
93
color: transparent;
99
94
text-shadow: 0 0 0 rgb(63, 63, 63);
100
95
}
101
-
102
96
103
97
@screen dark {
104
98
input::placeholder,
···
122
116
animation: loading-rotator 2s linear infinite;
123
117
}
124
118
125
-
126
119
.loading-animation__circle {
127
120
animation: loading-dash 1.5s ease-in-out infinite,
128
121
loading-colors 6s ease-in-out infinite;
···
130
123
stroke-dashoffset: 0;
131
124
transform-origin: center;
132
125
}
133
-
134
126
135
127
@keyframes loading-rotator {
136
128
0% { transform: rotate(0deg); }
137
129
100% { transform: rotate(360deg); }
138
130
}
139
131
140
-
141
132
@keyframes loading-colors {
142
133
0% { stroke: rgb(248, 164, 167); }
143
134
25% { stroke: rgb(254, 196, 24); }
···
145
136
75% { stroke: rgb(6, 182, 239); }
146
137
100% { stroke: rgb(248, 164, 167); }
147
138
}
148
-
149
139
150
140
@keyframes loading-dash {
151
141
0% {
+43
-35
src/Css/Equalizer.css
+43
-35
src/Css/Equalizer.css
···
3
3
}
4
4
5
5
6
-
.equalizer {
7
6
8
-
& .knob {
9
-
box-shadow: inset 0 0 5px 1px rgba(119, 119, 119, 0.35);
10
-
height: var(--knob-size);
11
-
width: var(--knob-size);
7
+
/* Knob
8
+
---- */
12
9
13
-
& svg {
14
-
height: calc(100% - 8px);
15
-
margin-top: 4px;
16
-
stroke: rgba(119, 119, 119, 0.7);
17
-
width: calc(100% - 8px);
18
-
}
10
+
.equalizer .knob {
11
+
box-shadow: inset 0 0 5px 1px rgba(119, 119, 119, 0.35);
12
+
height: var(--knob-size);
13
+
width: var(--knob-size);
14
+
}
19
15
20
-
& .layer-a {
21
-
box-shadow: 0 0 6px 1px rgba(119, 119, 119, 1);
22
-
margin: 8px;
23
-
}
16
+
.equalizer .knob svg {
17
+
height: calc(100% - 8px);
18
+
margin-top: 4px;
19
+
stroke: rgba(119, 119, 119, 0.7);
20
+
width: calc(100% - 8px);
21
+
}
24
22
25
-
& .layer-b {
26
-
background-color: rgba(119, 119, 119, 0.8);
27
-
height: 9px;
28
-
width: 2px;
29
-
}
30
-
}
23
+
.equalizer .knob .layer-a {
24
+
box-shadow: 0 0 6px 1px rgba(119, 119, 119, 1);
25
+
margin: 8px;
26
+
}
31
27
28
+
.equalizer .knob .layer-b {
29
+
background-color: rgba(119, 119, 119, 0.8);
30
+
height: 9px;
31
+
width: 2px;
32
+
}
32
33
33
-
& .knob-label {
34
-
font-size: 9.5px;
35
-
}
36
34
37
35
38
-
& .knob-lines {
39
-
top: calc(var(--knob-size) / -4.5);
40
-
width: var(--knob-size);
36
+
/* Knob Label
37
+
---------- */
41
38
42
-
& > div {
43
-
background-color: rgba(119, 119, 119, 0.8);
44
-
height: 9px;
45
-
width: 1px;
46
-
}
39
+
.equalizer .knob-label {
40
+
font-size: 9.5px;
41
+
}
42
+
43
+
44
+
45
+
/* Knob Lines
46
+
---------- */
47
47
48
-
& > div:first-child { transform: rotate(45deg) }
49
-
& > div:last-child { transform: rotate(-45deg) }
50
-
}
48
+
.equalizer .knob-lines {
49
+
top: calc(var(--knob-size) / -4.5);
50
+
width: var(--knob-size);
51
+
}
51
52
53
+
.equalizer .knob-lines > div {
54
+
background-color: rgba(119, 119, 119, 0.8);
55
+
height: 9px;
56
+
width: 1px;
52
57
}
58
+
59
+
.equalizer .knob-lines > div:first-child { transform: rotate(45deg) }
60
+
.equalizer .knob-lines > div:last-child { transform: rotate(-45deg) }
+20
-21
src/Css/Notifications.css
+20
-21
src/Css/Notifications.css
···
1
1
.notifications {
2
2
font-size: 13px;
3
3
line-height: 1.35;
4
+
}
4
5
5
-
& a,
6
-
& em {
7
-
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
8
-
display: inline-block;
9
-
}
6
+
.notifications a,
7
+
.notifications em {
8
+
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
9
+
display: inline-block;
10
+
}
10
11
11
-
& a {
12
-
color: inherit;
13
-
font-weight: 600;
14
-
text-decoration: none;
15
-
}
12
+
.notifications a {
13
+
color: inherit;
14
+
font-weight: 600;
15
+
text-decoration: none;
16
+
}
16
17
17
-
& p {
18
-
margin: 0;
19
-
padding: 0;
20
-
}
21
-
22
-
& em {
23
-
font-weight: inherit;
24
-
}
18
+
.notifications p {
19
+
margin: 0;
20
+
padding: 0;
21
+
}
25
22
26
-
& strong {
27
-
font-weight: 600;
28
-
}
23
+
.notifications em {
24
+
font-weight: inherit;
25
+
}
29
26
27
+
.notifications strong {
28
+
font-weight: 600;
30
29
}
+1
-8
yarn.lock
+1
-8
yarn.lock
···
3788
3788
postcss "^7.0.21"
3789
3789
postcss-selector-parser "^6.0.2"
3790
3790
3791
-
postcss-nesting@^7.0.1:
3792
-
version "7.0.1"
3793
-
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
3794
-
integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
3795
-
dependencies:
3796
-
postcss "^7.0.2"
3797
-
3798
3791
postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
3799
3792
version "6.0.2"
3800
3793
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
···
3847
3840
source-map "^0.6.1"
3848
3841
supports-color "^5.4.0"
3849
3842
3850
-
postcss@^7.0.1, postcss@^7.0.2:
3843
+
postcss@^7.0.1:
3851
3844
version "7.0.21"
3852
3845
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
3853
3846
integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==