Re-align icon.
[mlpccg.git] / themes.css
1 /* The person who associated a work with this deed has dedicated the
2 work to the public domain by waiving all of his or her rights to
3 the work worldwide under copyright law, including all related and
4 neighboring rights, to the extent allowed by law.
5
6 You can copy, modify, distribute and perform the work, even for
7 commercial purposes, all without asking permission.
8
9 See https://creativecommons.org/publicdomain/zero/1.0/ for details.
10 */
11
12 .luna {
13 background-color: #6265bb;
14 border-color: #140a44;
15 color: #c9d1e7;
16 }
17 .luna h1 { color: #6fa2ff; }
18 .luna a { color: #6fa2ff; }
19 .luna a:active, .twilight a:focus { background-color: #140a44; }
20 .luna .mark:after { content: "🌙"; }
21 .luna .subdue { color: #6ae8d2; }
22
23 .twilight {
24 background-color: #caaad1;
25 border-color: #9660ab;
26 color: #16224a;
27 }
28 .twilight h1 { color: #263675; }
29 .twilight a:active, .twilight a:focus { background-color: #9660ab; }
30 .twilight .subdue { color: #9660ab; }
31 .twilight .mark:after { content: "✶"; }
32
33 .pinkie {
34 border-color: #e02c81;
35 background-color: #efb6d3;
36 color: black;
37 }
38 .pinkie h1 { color: #c01279; }
39 .pinkie a:active, .pinkie a:focus { background-color: #c01279; }
40 .pinkie .subdue { color: #e02c81; }
41 .pinkie .mark:after { content: "🎈"; }
42
43 .celestia {
44 background-color: #fbf9fb;
45 border-color: #00a1cf;
46 color: black;
47 }
48 .celestia body { border-color: #11cab1; }
49 .celestia a { border-color: #dea74c; }
50 .celestia h1 { color: #844d99; }
51 .celestia a:active, .celestia a:focus { background-color: #ffe698; }
52 .celestia .subdue { color: #2bb9da; }
53 .celestia .mark:after { content: "☀"; }
54
55 .rarity {
56 background-color: #ebeff2;
57 border-color: #5d3078;
58 color: black;
59 }
60 .rarity a { border-color: #9367b5; }
61 .rarity h1 { color: #5d3078; }
62 .rarity a:active, .rarity a:focus { background-color: #7268c0; }
63 .rarity .subdue { color: #4585d9; }
64 .rarity .mark:after { content: "♦"; }
65
66 .fluttershy {
67 background-color: #fdf7ab;
68 border-color: #ed7fb4;
69 color: black;
70 }
71 .fluttershy a { border-color: #ed6fb4; }
72 .fluttershy h1 { color: #ed6fb4; }
73 .fluttershy a:active, .fluttershy a:focus { background-color: #f4b4cf; }
74 .fluttershy .subdue { color: #64c8c7; }
75 .fluttershy .mark:after { content: "ஐ"; margin-top: -0.25em; display: block;}
76
77 .dash {
78 background-color: #87caf0;
79 border-color: #5b87c5;
80 color: black;
81 cooler: 20%;
82 }
83 .dash h1 { color: #5a2a78; border-color: #0083c4; }
84 .dash a { border-color: #e73338; }
85 .dash a:active, .dash a:focus { background-color: #ed673a; }
86 .dash .subdue { color: #b80862; }
87 .dash .mark:before {
88 content: "☁";
89 color: white;
90 margin-left: -1em;
91 }
92 .dash .mark:after {
93 width: 0;
94 display: inline-block;
95 content: "⚡";
96 font-size: 0.5em;
97 color: #0083c4;
98 margin-left: -2.25em;
99 text-shadow: 0.1em 0.1em #fbe665, 0.2em 0.2em #e73c38;
100 }
101
102 .applejack {
103 border-color: #f46f23;
104 background-color: #fcbb58;
105 color: black;
106 }
107 .applejack h1 { color: #fdf7ce; }
108 .applejack a:active, .applejack a:focus { background-color: #fdf7ab; }
109 .applejack .subdue { color: #f13e3d; }
110 .applejack .mark:after { content: "🍎"; }
111
112 .pon3 {
113 border-color: #00c1d1;
114 background-color: #fcfdea;
115 color: black;
116 }
117 .pon3 h1 { color: #006ed2; }
118 .pon3 a { color: #00317a; }
119 .pon3 a:active, .pon3 a:focus { background-color: #00c1d1; }
120 .pon3 .subdue { color: #a439a5; }
121 .pon3 .mark:after {
122 content: "♫";
123 transform: scaleX(-1);
124 -webkit-transform: scaleX(-1);
125 display: inline-block;
126 }
127
128 .maud {
129 border-color: #7b7a85;
130 background-color: #adacb3;
131 color: black;
132 }
133 .maud h1 { color: #402f5b; }
134 .maud a { color: #404d5d; }
135 .maud a:active, .maud a:focus { background-color: #8975a9; }
136 .maud .subdue { color: #4d5e70; }
137 .maud .mark:after { content: "💎"; }
138
139 .muffins {
140 border-color: #8e8fad;
141 background-color: #c3d1dd;
142 color: black;
143 }
144 .muffins h1 { color: #e38730; }
145 .muffins a { color: black; }
146 .muffins a:active, .muffins a:focus { background-color: #eada8e; }
147 .muffins .subdue { color: #edf5af; }
148 .muffins .mark:before {
149 content: "●̊";
150 display: inline-block;
151 margin-top: 0.05em;
152 margin-left: -0.35em;
153 }
154 .muffins .mark:after {
155 position: absolute;
156 width: 0;
157 content: "●̥";
158 display: inline-block;
159 margin-left: -0.1em;
160 margin-top: -0.15em;
161 font-size: 0.8em;
162 }
163
164 .spike {
165 border-color: #51c455;
166 background-color: #9a5da1;
167 color: white;
168 }
169 .spike h1, .spike a { color: #d7ebae; }
170 .spike a:active, .spike a:focus { background-color: #51c455; }
171 .spike .subdue { color: #d7ebae; }
172 .spike .mark:after {
173 content: "🐲";
174 }
175 .spike .mark.background {
176 color: #d7ebae;
177 }
178
179 .discord {
180 border-color: #706c5f;
181 background-color: #aca795;
182 color: black;
183 }
184 .discord body { border-color: #401e1e; }
185 .discord h1 { color: #653d3e; }
186 .discord a { color: #401e1e; }
187 .discord a:active, .discord a:focus { background-color: #653d3e; }
188 .discord .subdue { color: #a33b4b; }
189 .discord .mark:after { content: "⁉"; }
190
191 .discord #win { background-color: #ccf8f2; border-color: #95bbc3; color: #20b0d5; }
192 .discord #confirmBack { background-color: #20b0d5; border-color: #1685a1; color: #513476; }
193 .discord #confirmBack h1,.discord #confirmBack a { color: #513476; }
194
195 .discord #confirmBack a:focus, .discord #confirmBack a:active { background-color: #382452; }
196
197 .cadance {
198 border-color: #fd95d9;
199 background-color: #ffc9ec;
200 color: black;
201 }
202 .cadance h1 { color: #f13ab6; }
203 .cadance a { color: #712b96; }
204 .cadance a:active, .cadance a:focus { background-color: #c88dca; }
205 .cadance .subdue { color: #fbf4d7; }
206 .cadance .mark:after {
207 content: "♥";
208 color: #93ffff;
209 text-shadow: 0.1em 0.0em #3cd6dd, -0.1em 0.0em #3cd6dd, 0.0em -0.1em #3cd6dd, 0.0em 0.1em #3cd6dd;
210 }
211
212 .chrysalis {
213 border-color: #1f1f21;
214 background-color: #373537;
215 color: #adcbd2;
216 }
217
218 .chrysalis h1 {
219 color: #1f1f21;
220 text-shadow: 0px 0px 3px #14ff05;
221 }
222
223 .chrysalis a { color: #389fb5; }
224 .chrysalis a:active, .chrysalis a:focus { background-color: #2b6980; }
225 .chrysalis .subdue {
226 text-shadow: 0px 0px 0.05em #bdf46c;
227 color: #61f54e;
228 }
229 .chrysalis .mark:after {
230 content: "♛";
231 }