Skip to content

Commit 0d2464e

Browse files
ArhellArhell
authored
min dark css (#162)
1 parent 94884b1 commit 0d2464e

File tree

2 files changed

+124
-114
lines changed

2 files changed

+124
-114
lines changed

‎phalcon/css/dark.css‎

Lines changed: 123 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,171 @@
1-
:root {
2-
--background-color: #121212;
3-
--primary-color: #eee;
4-
}
5-
6-
[color-scheme="dark"] {
7-
--background-color: #121212;
8-
--primary-color: #eee;
9-
}
10-
11-
[color-scheme="light"] {
12-
--background-color: white;
13-
--primary-color: #1c1c1e;
1+
.switcher button {
2+
border: none;
3+
padding: 0;
4+
cursor: pointer;
5+
display: flex;
6+
border-radius: 100px;
7+
font-size: inherit;
8+
outline: none;
9+
width: 20px;
10+
height: 20px;
11+
margin-left: 8px;
1412
}
1513

16-
[data-color-scheme-option="light"] .light-dark-auto-button:nth-child(1) {
17-
border: 3px solid var(--primary-color);
18-
background-color: var(--primary-color);
19-
color: var(--background-color);
14+
.switcher button:before {
15+
width: 20px;
2016
}
2117

22-
[data-color-scheme-option="dark"] .light-dark-auto-button:nth-child(2) {
23-
border: 3px solid var(--primary-color);
24-
background-color: var(--primary-color);
25-
color: var(--background-color);
18+
.switcher-light button::before {
19+
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'%3E%3C/path%3E%3C/svg%3E");;
20+
width: 17px;
21+
margin-top: 1px;
2622
}
2723

28-
[data-color-scheme-option="auto"] .light-dark-auto-button:nth-child(3) {
29-
border: 3px solid var(--primary-color);
30-
background-color: var(--primary-color);
31-
color: var(--background-color);
24+
.switcher-dark button::before {
25+
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z'%3E%3C/path%3E%3C/svg%3E");
3226
}
3327

34-
.light-dark-auto-switcher {
35-
display: -webkit-box;
36-
display: -webkit-flex;
37-
display: -ms-flexbox;
38-
display: flex;
39-
justify-content: center;
40-
-webkit-box-align: center;
41-
-webkit-align-items: center;
42-
align-items: center;
43-
-ms-flex-align: center;
44-
-webkit-box-pack: center;
45-
-webkit-justify-content: center;
46-
-ms-flex-pack: center;
47-
width: fit-content;
48-
height: 40px;
49-
margin-left: auto;
50-
padding: 1px 2px;
51-
margin-right: 10px;
52-
border: 1px solid #8e8e93;
53-
border-radius: 90px;
54-
background-color: transparent;
55-
border-color: #8e8e93;
56-
user-select: none;
57-
}
58-
59-
@media screen and (max-width: 767px) {
60-
.light-dark-auto-switcher {
61-
display: none;
62-
}
63-
64-
.header-nav--mobile .light-dark-auto-switcher {
65-
display: flex;
66-
margin-left: 0;
67-
margin-bottom: 25px;
68-
margin-top: 5px;
69-
}
70-
}
71-
72-
.light-dark-auto-button {
73-
display: flex;
74-
width: 48px;
75-
height: 24px;
76-
padding: 0 8px;
77-
justify-content: center;
78-
align-items: center;
79-
border: 3px #fff;
80-
border-radius: 20px;
81-
font-size: 14px;
82-
font-weight: 400;
83-
text-decoration: none;
84-
border: 3px solid transparent;
85-
}
86-
87-
[color-scheme="dark"] .phalcon-blog {
28+
html.dark .phalcon-blog,
29+
html.dark body,
30+
html.dark .base-info {
8831
background-color: #1e2129;
8932
}
9033

91-
[color-scheme="dark"] h1,
92-
[color-scheme="dark"] h2,
93-
[color-scheme="dark"] h3,
94-
[color-scheme="dark"] h4,
95-
[color-scheme="dark"] h5,
96-
[color-scheme="dark"] h6,
97-
[color-scheme="dark"] p ,
98-
[color-scheme="dark"] ul li,
99-
[color-scheme="dark"] ol li,
100-
[color-scheme="dark"] .phalcon-blog__title,
101-
[color-scheme="dark"] .phalcon-blog__projects-text {
34+
html.dark h1,
35+
html.dark h2,
36+
html.dark h3,
37+
html.dark h4,
38+
html.dark h5,
39+
html.dark h6,
40+
html.dark p ,
41+
html.dark ul li,
42+
html.dark ol li,
43+
html.dark .phalcon-blog__title,
44+
html.dark .phalcon-blog__projects-text,
45+
html.dark .phalcon-blog__main-title,
46+
html.dark .header-dropdown li a,
47+
html.dark .tag-button,
48+
html.dark .phalcon-blog-detail table th,
49+
html.dark .phalcon-blog-detail table td,
50+
html.dark .base-info-descr__first,
51+
html.dark .base-info-descr__second,
52+
html.dark .watch-demo__title,
53+
html.dark .watch-demo__descr,
54+
html.dark .join__title,
55+
html.dark .join__descr,
56+
html.dark .contributors__top,
57+
html.dark .feature__title,
58+
html.dark .feature__descr,
59+
html.dark .buildwith-nav__list a,
60+
html.dark .features-nav__list li {
10261
color: #e2e4e9d1;
10362
}
10463

105-
[color-scheme="dark"] .phalcon-blog a {
64+
html.dark .phalcon-blog a,
65+
html.dark main a {
10666
color: #00bda4;
10767
}
10868

109-
[color-scheme="dark"] .phalcon-blog__sponsors-item {
69+
html.dark .phalcon-blog__sponsors-item,
70+
html.dark .sponsors__item {
11071
background-color: #ffffffb3;
11172
}
11273

113-
[color-scheme="dark"] .footer {
74+
html.dark .footer {
11475
background-color: #17191e;
11576
}
11677

117-
[color-scheme="dark"] .footer__license,
118-
[color-scheme="dark"] .footer__supported span,
119-
[color-scheme="dark"] .footer-nav li a {
78+
html.dark .footer__license,
79+
html.dark .footer__supported span,
80+
html.dark .footer-nav li a,
81+
html.dark .previous,
82+
html.dark .page_number,
83+
html.dark .next,
84+
html.dark .green-button,
85+
html.dark .features-nav__list li.active,
86+
html.dark .info .buildwith-nav__list li.active a,
87+
html.dark .header-nav--mobile a,
88+
html.dark .alert-warning,
89+
html.dark .info blockquote cite,
90+
html.dark .features-accordion__trigger {
12091
color: #ffffff;
12192
}
12293

123-
[color-scheme="dark"] .footer__supported-logo svg,
124-
[color-scheme="dark"] .footer__supported-logo svg path {
94+
html.dark .footer__supported-logo svg,
95+
html.dark .footer__supported-logo svg path {
12596
stroke: #ffffff;
12697
}
12798

128-
[color-scheme="dark"] .phalcon-blog__sponsors-item:hover,
129-
[color-scheme="dark"] .header-dropdown li a:hover {
99+
html.dark .phalcon-blog__sponsors-item:hover,
100+
html.dark .header-dropdown li a:hover {
130101
border-color: #00bda4;
131102
}
132103

133-
[color-scheme="dark"] .phalcon-blog__sponsors-item span {
104+
html.dark .phalcon-blog__sponsors-item span {
134105
color: #000000;
135106
}
136107

137-
[color-scheme="dark"] .header-dropdown--eco {
108+
html.dark .header-dropdown--eco {
138109
background-color: #1e2129;
139110
border-color: #1e2129;
140111
}
141112

142-
[color-scheme="dark"] .header-dropdown li a {
143-
color: #e2e4e9d1;
144-
}
145-
146-
[color-scheme="dark"] .header-nav>li a,
147-
[color-scheme="dark"] .footer-nav li a {
113+
html.dark .header-nav>li a,
114+
html.dark .footer-nav li a {
148115
opacity: 0.7;
149116
}
150117

151-
[color-scheme="dark"] .header a:hover,
152-
[color-scheme="dark"] .header-nav>li.active>a,
153-
[color-scheme="dark"] .header-nav>li:hover>a,
154-
[color-scheme="dark"] .header-dropdown li a:hover,
155-
[color-scheme="dark"] .footer-nav li a:hover {
118+
html.dark .header a:hover,
119+
html.dark .header-nav>li.active>a,
120+
html.dark .header-nav>li:hover>a,
121+
html.dark .header-dropdown li a:hover,
122+
html.dark .footer-nav li a:hover {
156123
opacity: 1;
157124
color: #ffffff;
158125
}
159126

160-
[color-scheme="dark"] .light-dark-auto-button:hover {
127+
html.dark .light-dark-auto-button:hover {
161128
color: #00bda4 !important;
162129
}
130+
131+
html.dark .phalcon-blog__item-date,
132+
html.dark .phalcon-blog__item-author {
133+
color: #bfbfbfd1;
134+
}
135+
136+
html.dark .phalcon-blog__tags-item span:first-child {
137+
color: #e2e4e98f;
138+
}
139+
140+
html.dark .phalcon-blog__right .phalcon-blog__tags-items .phalcon-blog__tags-item {
141+
border-color: #385b56;
142+
}
143+
144+
html.dark .phalcon-blog-detail table td {
145+
border-color: #e2e4e9d1;
146+
}
147+
148+
html.dark .buildwith-nav__list li.active hr,
149+
html.dark .features-nav__list li.active hr{
150+
background-color: #ffffff;
151+
}
152+
153+
html.dark .buildwith-nav__list li.active:hover hr,
154+
html.dark .features-nav__list li:hover hr,
155+
html.dark .buildwith-nav__list li:hover hr {
156+
background-color: #ffffff;
157+
}
158+
159+
html.dark .info .buildwith-nav__list li:hover a,
160+
html.dark .features-nav__list li span:hover {
161+
color: #ffffff;
162+
}
163+
164+
html.dark .header-dropdown--lang {
165+
background-color: #1e2129;
166+
border-color: #1e2129;
167+
}
168+
169+
html.dark .info-block__img img {
170+
background-color: #ffffff;
171+
}

‎phalcon/css/dark.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)