-
Notifications
You must be signed in to change notification settings - Fork 514
/
BrightTheme.css
233 lines (227 loc) · 11.5 KB
/
BrightTheme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
/*
Designed by Hunter Perrin
https://github.com/hperrin
Color Scheme: http://paletton.com/#uid=c1T3n2J040kpEKzpEKzbEPSOEyiNk9W
Icons: https://materialdesignicons.com/
For calculating icon filters, use: https://codepen.io/sosuke/pen/Pjoqqp
*/
[data-pnotify].brighttheme-elem {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
[data-pnotify].brighttheme-elem,
[data-pnotify].brighttheme-elem.pnotify-mode-light {
--notice-background-color: #ffffa2;
--notice-border-color: #ffff00;
--notice-text-color: #4f4f00;
--notice-icon-filter: invert(25%) sepia(12%) saturate(7007%) hue-rotate(38deg)
brightness(99%) contrast(101%);
--info-background-color: #8fcedd;
--info-border-color: #0286a5;
--info-text-color: #012831;
--info-icon-filter: invert(11%) sepia(37%) saturate(1946%) hue-rotate(155deg)
brightness(95%) contrast(99%);
--success-background-color: #aff29a;
--success-border-color: #35db00;
--success-text-color: #104300;
--success-icon-filter: invert(17%) sepia(94%) saturate(1055%)
hue-rotate(70deg) brightness(90%) contrast(103%);
--error-background-color: #ffaba2;
--error-border-color: #ff1800;
--error-text-color: #4f0800;
--error-icon-filter: invert(9%) sepia(27%) saturate(7347%) hue-rotate(359deg)
brightness(96%) contrast(108%);
}
@media (prefers-color-scheme: dark) {
[data-pnotify].brighttheme-elem.pnotify-mode-no-preference {
--notice-background-color: #4f4f00;
--notice-border-color: #282814;
--notice-text-color: #ffffa2;
--notice-icon-filter: invert(92%) sepia(18%) saturate(781%) hue-rotate(6deg)
brightness(106%) contrast(107%);
--info-background-color: #012831;
--info-border-color: #0c1618;
--info-text-color: #8fcedd;
--info-icon-filter: invert(85%) sepia(14%) saturate(933%) hue-rotate(153deg)
brightness(92%) contrast(87%);
--success-background-color: #104300;
--success-border-color: #152111;
--success-text-color: #aff29a;
--success-icon-filter: invert(90%) sepia(9%) saturate(1647%)
hue-rotate(52deg) brightness(103%) contrast(90%);
--error-background-color: #4f0800;
--error-border-color: #281614;
--error-text-color: #ffaba2;
--error-icon-filter: invert(70%) sepia(24%) saturate(717%)
hue-rotate(315deg) brightness(103%) contrast(104%);
}
}
[data-pnotify].brighttheme-elem.pnotify-mode-dark {
--notice-background-color: #4f4f00;
--notice-border-color: #282814;
--notice-text-color: #ffffa2;
--notice-icon-filter: invert(92%) sepia(18%) saturate(781%) hue-rotate(6deg)
brightness(106%) contrast(107%);
--info-background-color: #012831;
--info-border-color: #0c1618;
--info-text-color: #8fcedd;
--info-icon-filter: invert(85%) sepia(14%) saturate(933%) hue-rotate(153deg)
brightness(92%) contrast(87%);
--success-background-color: #104300;
--success-border-color: #152111;
--success-text-color: #aff29a;
--success-icon-filter: invert(90%) sepia(9%) saturate(1647%) hue-rotate(52deg)
brightness(103%) contrast(90%);
--error-background-color: #4f0800;
--error-border-color: #281614;
--error-text-color: #ffaba2;
--error-icon-filter: invert(70%) sepia(24%) saturate(717%) hue-rotate(315deg)
brightness(103%) contrast(104%);
}
[data-pnotify] .brighttheme-notice {
--brighttheme-background-color: var(--notice-background-color);
--brighttheme-border-color: var(--notice-border-color);
--brighttheme-text-color: var(--notice-text-color);
--brighttheme-icon-filter: var(--notice-icon-filter);
--brighttheme-primary-button-background-color: var(--notice-border-color);
--brighttheme-primary-button-text-color: var(--notice-text-color);
}
[data-pnotify] .brighttheme-info {
--brighttheme-background-color: var(--info-background-color);
--brighttheme-border-color: var(--info-border-color);
--brighttheme-text-color: var(--info-text-color);
--brighttheme-icon-filter: var(--info-icon-filter);
--brighttheme-primary-button-background-color: var(--info-border-color);
--brighttheme-primary-button-text-color: var(--info-text-color);
}
[data-pnotify] .brighttheme-success {
--brighttheme-background-color: var(--success-background-color);
--brighttheme-border-color: var(--success-border-color);
--brighttheme-text-color: var(--success-text-color);
--brighttheme-icon-filter: var(--success-icon-filter);
--brighttheme-primary-button-background-color: var(--success-border-color);
--brighttheme-primary-button-text-color: var(--success-text-color);
}
[data-pnotify] .brighttheme-error {
--brighttheme-background-color: var(--error-background-color);
--brighttheme-border-color: var(--error-border-color);
--brighttheme-text-color: var(--error-text-color);
--brighttheme-icon-filter: var(--error-icon-filter);
--brighttheme-primary-button-background-color: var(--error-border-color);
--brighttheme-primary-button-text-color: var(--error-text-color);
}
[data-pnotify] .brighttheme-container {
padding: 1.3rem;
background-color: var(--brighttheme-background-color);
border: 0 solid var(--brighttheme-border-color);
color: var(--brighttheme-text-color);
}
[data-pnotify] .brighttheme-error {
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.3) 35px,
rgba(255, 255, 255, 0.3) 70px
);
}
[data-pnotify].pnotify-with-icon .brighttheme-content {
margin-left: calc(1.3rem + 16px);
}
[dir='rtl'] [data-pnotify].pnotify-with-icon .brighttheme-content {
margin-right: calc(1.3rem + 16px);
margin-left: 0;
}
[data-pnotify] .brighttheme-title {
font-size: 1.2rem;
line-height: 1.4rem;
margin-top: -0.1rem;
margin-bottom: 0;
}
[data-pnotify] .brighttheme-text {
font-size: 1rem;
line-height: 1.2rem;
margin-top: 0;
}
[data-pnotify] .brighttheme-title + .brighttheme-text,
[data-pnotify] .brighttheme-confirm {
margin-top: 1rem;
}
[data-pnotify] .brighttheme-icon,
[data-pnotify] .brighttheme-closer,
[data-pnotify] .brighttheme-sticker {
display: flex;
justify-content: center;
align-items: center;
}
[data-pnotify] .brighttheme-icon,
[data-pnotify] .brighttheme-icon > span,
[data-pnotify] .brighttheme-icon > span:after {
width: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
}
[data-pnotify] .brighttheme-icon-closer,
[data-pnotify] .brighttheme-icon-sticker,
[data-pnotify] .brighttheme-icon-closer:after,
[data-pnotify] .brighttheme-icon-sticker:after {
width: 1rem;
height: 1rem;
line-height: 1rem;
}
[data-pnotify] .brighttheme-icon-notice:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMsMTNIMTFWN0gxM00xMywxN0gxMVYxNUgxM00xMiwyQTEwLDEwIDAgMCwwIDIsMTJBMTAsMTAgMCAwLDAgMTIsMjJBMTAsMTAgMCAwLDAgMjIsMTJBMTAsMTAgMCAwLDAgMTIsMloiLz48L3N2Zz4=);
}
[data-pnotify] .brighttheme-icon-info:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMsOUgxMVY3SDEzTTEzLDE3SDExVjExSDEzTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyWiIvPjwvc3ZnPg==);
}
[data-pnotify] .brighttheme-icon-success:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkM2LjUgMiAyIDYuNSAyIDEyUzYuNSAyMiAxMiAyMiAyMiAxNy41IDIyIDEyIDE3LjUgMiAxMiAyTTEwIDE3TDUgMTJMNi40MSAxMC41OUwxMCAxNC4xN0wxNy41OSA2LjU4TDE5IDhMMTAgMTdaIi8+PC9zdmc+);
}
[data-pnotify] .brighttheme-icon-error:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMsMTRIMTFWMTBIMTNNMTMsMThIMTFWMTZIMTNNMSwyMUgyM0wxMiwyTDEsMjFaIi8+PC9zdmc+);
}
[data-pnotify] .brighttheme-icon-closer:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTksNi40MUwxNy41OSw1TDEyLDEwLjU5TDYuNDEsNUw1LDYuNDFMMTAuNTksMTJMNSwxNy41OUw2LjQxLDE5TDEyLDEzLjQxTDE3LjU5LDE5TDE5LDE3LjU5TDEzLjQxLDEyTDE5LDYuNDFaIi8+PC9zdmc+);
}
[data-pnotify] .brighttheme-icon-sticker:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYsMTJWNEgxN1YySDdWNEg4VjEyTDYsMTRWMTZIMTEuMlYyMkgxMi44VjE2SDE4VjE0TDE2LDEyWiIvPjwvc3ZnPg==);
}
[data-pnotify] .brighttheme-icon-sticker.brighttheme-icon-stuck:after {
filter: var(--brighttheme-icon-filter);
content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiw1LjI3TDMuMjgsNEwyMCwyMC43MkwxOC43MywyMkwxMi44LDE2LjA3VjIySDExLjJWMTZINlYxNEw4LDEyVjExLjI3TDIsNS4yN00xNiwxMkwxOCwxNFYxNkgxNy44Mkw4LDYuMThWNEg3VjJIMTdWNEgxNlYxMloiLz48L3N2Zz4=);
}
[data-pnotify] .brighttheme-prompt-bar {
margin-bottom: 1rem;
}
[data-pnotify] .brighttheme-prompt-bar,
[data-pnotify] .brighttheme-action-bar {
width: 100%;
box-sizing: border-box;
}
[data-pnotify] .brighttheme-btn {
text-transform: uppercase;
font-weight: bold;
padding: 0.4rem 1rem;
border: none;
background: transparent;
cursor: pointer;
color: var(--brighttheme-text-color);
}
[data-pnotify] .brighttheme-btn-primary {
background-color: var(--brighttheme-primary-button-background-color);
color: var(--brighttheme-primary-button-text-color);
}
[data-pnotify] .brighttheme-countdown {
background-color: var(--brighttheme-background-color);
}
[data-pnotify] .brighttheme-countdown-bar {
background-color: var(--brighttheme-border-color);
}