Skip to content

Commit 4e42277

Browse files
NightFurySL2001NightFurySL2001
committed
nest related css blocks for ease of management
1 parent da92843 commit 4e42277

1 file changed

Lines changed: 158 additions & 138 deletions

File tree

‎css/cid-colour.css‎

Lines changed: 158 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -28,146 +28,166 @@
2828
/* colours */
2929
#rows-display {
3030
color: black;
31-
}
32-
#rows-display.dark-mode {
33-
background-color: black;
34-
color: white;
35-
}
36-
#rows-display.coloured-text .cid-JP .cid-char {
37-
color: #d32f2f;
38-
}
39-
#rows-display.coloured-text .cid-KR .cid-char {
40-
color: #6245b2;
41-
}
42-
#rows-display.coloured-text .cid-CN .cid-char {
43-
color: #ffab00;
44-
}
45-
#rows-display.coloured-text .cid-TW .cid-char {
46-
color: #43a047;
47-
}
48-
#rows-display.coloured-text .cid-HK .cid-char {
49-
color: #2a3b93;
50-
}
51-
#rows-display.dark-mode.coloured-text .cid-HK .cid-char {
52-
color: #3552e2;
53-
}
5431

55-
#rows-display.coloured-text .cid-JP1 .cid-char {
56-
color: #10dede;
57-
}
58-
#rows-display.coloured-text .cid-JP2 .cid-char {
59-
color: #0ba4b3;
60-
}
61-
#rows-display.coloured-text .cid-JP3 .cid-char {
62-
color: #078197;
63-
}
64-
#rows-display.coloured-text .cid-JP4 .cid-char {
65-
color: #057089;
66-
}
67-
#rows-display.coloured-text .cid-JP0 .cid-char {
68-
color: #035e7b;
69-
}
32+
&.dark-mode {
33+
background-color: black;
34+
color: white;
35+
}
7036

71-
#rows-display.coloured-text .cid-KR1 .cid-char {
72-
color: #e9ff70;
73-
}
74-
#rows-display.coloured-text .cid-KR2 .cid-char {
75-
color: #d3e368;
76-
}
77-
#rows-display.coloured-text .cid-KR3 .cid-char {
78-
color: #bcc75f;
79-
}
80-
#rows-display.coloured-text .cid-KR4 .cid-char {
81-
color: #8f8f4d;
82-
}
83-
#rows-display.coloured-text .cid-KR0 .cid-char {
84-
color: #525126;
85-
}
37+
&.coloured-text {
38+
.cid-JP .cid-char {
39+
color: #d32f2f;
40+
}
41+
.cid-KR .cid-char {
42+
color: #6245b2;
43+
}
44+
.cid-CN .cid-char {
45+
color: #ffab00;
46+
}
47+
.cid-TW .cid-char {
48+
color: #43a047;
49+
}
50+
.cid-HK .cid-char {
51+
color: #2a3b93;
52+
}
8653

87-
#rows-display.coloured-text .cid-Mix .cid-char {
88-
color: #59344f;
89-
}
90-
#rows-display.dark-mode.coloured-text .cid-Mix .cid-char {
91-
color: #D2B1CA;
92-
}
54+
.cid-JP1 .cid-char {
55+
color: #2DF0F0;
56+
}
57+
.cid-JP2 .cid-char {
58+
color: #10dede;
59+
}
60+
.cid-JP3 .cid-char {
61+
color: #0ba4b3;
62+
}
63+
.cid-JP4 .cid-char {
64+
color: #078197;
65+
}
66+
.cid-JP0 .cid-char {
67+
color: #057089;
68+
}
9369

94-
#rows-display.outline-text .cid-char { /* general */
95-
color: transparent;
96-
-webkit-text-stroke: 1px black;
97-
}
98-
#rows-display.coloured-text.outline-text .cid-JP .cid-char {
99-
color: transparent;
100-
-webkit-text-stroke: 1px #d32f2f;
101-
}
102-
#rows-display.coloured-text.outline-text .cid-JP .cid-char {
103-
color: transparent;
104-
-webkit-text-stroke: 1px #d32f2f;
105-
}
106-
#rows-display.coloured-text.outline-text .cid-KR .cid-char {
107-
color: transparent;
108-
-webkit-text-stroke: 1px #6245b2;
109-
}
110-
#rows-display.coloured-text.outline-text .cid-CN .cid-char {
111-
color: transparent;
112-
-webkit-text-stroke: 1px #ffab00;
113-
}
114-
#rows-display.coloured-text.outline-text .cid-TW .cid-char {
115-
color: transparent;
116-
-webkit-text-stroke: 1px #43a047;
117-
}
118-
#rows-display.coloured-text.outline-text .cid-HK .cid-char {
119-
color: transparent;
120-
-webkit-text-stroke: 1px #2a3b93;
121-
}
122-
#rows-display.dark-mode.coloured-text.outline-text .cid-HK .cid-char {
123-
color: transparent;
124-
-webkit-text-stroke: 1px #3552e2;
125-
}
126-
#rows-display.coloured-text.outline-text .cid-JP1 .cid-char {
127-
color: transparent;
128-
-webkit-text-stroke: 1px #10dede;
129-
}
130-
#rows-display.coloured-text.outline-text .cid-JP2 .cid-char {
131-
color: transparent;
132-
-webkit-text-stroke: 1px #0ba4b3;
133-
}
134-
#rows-display.coloured-text.outline-text .cid-JP3 .cid-char {
135-
color: transparent;
136-
-webkit-text-stroke: 1px #078197;
137-
}
138-
#rows-display.coloured-text.outline-text .cid-JP4 .cid-char {
139-
color: transparent;
140-
-webkit-text-stroke: 1px #057089;
141-
}
142-
#rows-display.coloured-text.outline-text .cid-JP0 .cid-char {
143-
color: transparent;
144-
-webkit-text-stroke: 1px #035e7b;
145-
}
146-
#rows-display.coloured-text.outline-text .cid-KR1 .cid-char {
147-
color: transparent;
148-
-webkit-text-stroke: 1px #e9ff70;
149-
}
150-
#rows-display.coloured-text.outline-text .cid-KR2 .cid-char {
151-
color: transparent;
152-
-webkit-text-stroke: 1px #d3e368;
153-
}
154-
#rows-display.coloured-text.outline-text .cid-KR3 .cid-char {
155-
color: transparent;
156-
-webkit-text-stroke: 1px #bcc75f;
157-
}
158-
#rows-display.coloured-text.outline-text .cid-KR4 .cid-char {
159-
color: transparent;
160-
-webkit-text-stroke: 1px #8f8f4d;
161-
}
162-
#rows-display.coloured-text.outline-text .cid-KR0 .cid-char {
163-
color: transparent;
164-
-webkit-text-stroke: 1px #525126;
165-
}
166-
#rows-display.coloured-text.outline-text .cid-Mix .cid-char {
167-
color: transparent;
168-
-webkit-text-stroke: 1px #59344f;
169-
}
170-
#rows-display.dark-mode.coloured-text.outline-text .cid-Mix .cid-char {
171-
color: transparent;
172-
-webkit-text-stroke: 1px #D2B1CA;
70+
.cid-KR1 .cid-char {
71+
color: #e9ff70;
72+
}
73+
.cid-KR2 .cid-char {
74+
color: #d3e368;
75+
}
76+
.cid-KR3 .cid-char {
77+
color: #bcc75f;
78+
}
79+
.cid-KR4 .cid-char {
80+
color: #8f8f4d;
81+
}
82+
.cid-KR0 .cid-char {
83+
color: #525126;
84+
}
85+
86+
.cid-Mix .cid-char {
87+
color: #59344f;
88+
}
89+
90+
&.dark-mode {
91+
&.coloured-text {
92+
.cid-HK .cid-char {
93+
color: #3552e2;
94+
}
95+
.cid-Mix .cid-char {
96+
color: #d2b1ca;
97+
}
98+
}
99+
}
100+
}
101+
102+
&.outline-text {
103+
.cid-char {
104+
color: transparent;
105+
-webkit-text-stroke: 1px black;
106+
}
107+
108+
&.coloured-text {
109+
.cid-JP .cid-char {
110+
color: transparent;
111+
-webkit-text-stroke: 1px #d32f2f;
112+
}
113+
.cid-KR .cid-char {
114+
color: transparent;
115+
-webkit-text-stroke: 1px #6245b2;
116+
}
117+
.cid-CN .cid-char {
118+
color: transparent;
119+
-webkit-text-stroke: 1px #ffab00;
120+
}
121+
.cid-TW .cid-char {
122+
color: transparent;
123+
-webkit-text-stroke: 1px #43a047;
124+
}
125+
.cid-HK .cid-char {
126+
color: transparent;
127+
-webkit-text-stroke: 1px #2a3b93;
128+
}
129+
.cid-JP1 .cid-char {
130+
color: transparent;
131+
-webkit-text-stroke: 1px #2DF0F0;
132+
}
133+
.cid-JP2 .cid-char {
134+
color: transparent;
135+
-webkit-text-stroke: 1px #10dede;
136+
}
137+
.cid-JP3 .cid-char {
138+
color: transparent;
139+
-webkit-text-stroke: 1px #0ba4b3;
140+
}
141+
.cid-JP4 .cid-char {
142+
color: transparent;
143+
-webkit-text-stroke: 1px #078197;
144+
}
145+
.cid-JP0 .cid-char {
146+
color: transparent;
147+
-webkit-text-stroke: 1px #057089;
148+
}
149+
.cid-KR1 .cid-char {
150+
color: transparent;
151+
-webkit-text-stroke: 1px #e9ff70;
152+
}
153+
.cid-KR2 .cid-char {
154+
color: transparent;
155+
-webkit-text-stroke: 1px #d3e368;
156+
}
157+
.cid-KR3 .cid-char {
158+
color: transparent;
159+
-webkit-text-stroke: 1px #bcc75f;
160+
}
161+
.cid-KR4 .cid-char {
162+
color: transparent;
163+
-webkit-text-stroke: 1px #8f8f4d;
164+
}
165+
.cid-KR0 .cid-char {
166+
color: transparent;
167+
-webkit-text-stroke: 1px #525126;
168+
}
169+
.cid-Mix .cid-char {
170+
color: transparent;
171+
-webkit-text-stroke: 1px #59344f;
172+
}
173+
}
174+
175+
&.dark-mode {
176+
.cid-char {
177+
color: transparent;
178+
-webkit-text-stroke: 1px white ;
179+
}
180+
181+
&.coloured-text {
182+
.cid-HK .cid-char {
183+
color: transparent;
184+
-webkit-text-stroke: 1px #3552e2;
185+
}
186+
.cid-Mix .cid-char {
187+
color: transparent;
188+
-webkit-text-stroke: 1px #d2b1ca;
189+
}
190+
}
191+
}
192+
}
173193
}

0 commit comments

Comments
 (0)