150 lines
2.9 KiB
CSS
150 lines
2.9 KiB
CSS
/* default for no-preference */
|
|
:root {
|
|
--color: #333;
|
|
--background: #f7f7f7;
|
|
--cardbgcolor: #fff;
|
|
--cardtitlecolor: #333333;
|
|
--navbarcolor: #333333;
|
|
--img-default-filter: none;
|
|
--img-hover-filter: none;
|
|
--btn-bg-color:#f5f5f5;
|
|
--btn-color: #333;
|
|
--btn-hover-color: #eee;
|
|
--link-color: #333;
|
|
}
|
|
/* Light mode */
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color: #333333;
|
|
--background: #f7f7f7;
|
|
--cardbgcolor: #fff;
|
|
--cardcolor: #333;
|
|
--cardtitlecolor: #333333;
|
|
--navbarcolor: #333333;
|
|
--img-default-filter: none;
|
|
--img-hover-filter: none;
|
|
--link-color: #333;
|
|
|
|
}
|
|
}
|
|
|
|
/* Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color: #bcbcbc;
|
|
--background: #2c2a2a !important;
|
|
--cardbgcolor: #454545;
|
|
--cardcolor: #bcbcbc;
|
|
--cardtitlecolor: #bcbcbc;
|
|
--navbarcolor: #bcbcbc;
|
|
--img-default-filter: grayscale(100%);
|
|
--img-hover-filter: none;
|
|
--btn-bg-color:#2c2a2a;
|
|
--btn-color: #bcbcbc;
|
|
--btn-hover-color: #333;
|
|
--link-color: #bcbcbc
|
|
|
|
|
|
}
|
|
}
|
|
|
|
html {
|
|
background: var(--background);
|
|
color: var(--color);
|
|
}
|
|
body > .footer, body > .navbar {
|
|
background-color: var(--cardbgcolor);
|
|
color: var(--cardcolor);
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--cardbgcolor);
|
|
color: var(--cardcolor);
|
|
}
|
|
.card .card-image img,
|
|
img.thumbnail {
|
|
filter: var(--img-default-filter);
|
|
}
|
|
.card .card-image img:hover,
|
|
img.thumbnail:hover{
|
|
filter: var(--img-hover-filter);
|
|
}
|
|
|
|
.card .title {
|
|
color: var(--color) !important;
|
|
}
|
|
.navbar-dropdown {
|
|
background-color: var(--background);
|
|
}
|
|
.card .content,
|
|
/*.card .title a{*/
|
|
/* color: var(--cardtitlecolor) !important;*/
|
|
/*}*/
|
|
.pagination .pagination-link:not(.is-current),
|
|
.pagination .pagination-previous,
|
|
.pagination .pagination-next {
|
|
background-color: var(--cardbgcolor);
|
|
color: var(--cardcolor);
|
|
}
|
|
|
|
.navbar-item, .navbar-link,
|
|
.navbar-main .navbar-item .sub-menu
|
|
{
|
|
color: var(--navbarcolor);
|
|
|
|
}
|
|
.has-link-black-ter {
|
|
color: var(--cardtitlecolor) !important;
|
|
}
|
|
|
|
|
|
|
|
.button {
|
|
background-color: var(--btn-bg-color) !important;
|
|
color: var(--btn-color) !important;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: var(--btn-hover-color) !important;
|
|
}
|
|
.level .level-item.button {
|
|
background-color: var(--cardbgcolor) !important;
|
|
border-color: var(--cardbgcolor) !important;
|
|
color: var(--color) !important;
|
|
}
|
|
|
|
.menu-list .level {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
|
|
|
|
.menu-list a:hover {
|
|
background-color: var(--background);
|
|
opacity: 0.6;
|
|
color: var(--link-color);
|
|
}
|
|
.tag:not(body) {
|
|
background-color: var(--background) !important;
|
|
color: var(--color) !important;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
h7,
|
|
strong {
|
|
color: var(--color) !important;
|
|
}
|
|
|
|
.is-active a{
|
|
color: var(--color) !important;
|
|
}
|
|
|
|
a.navbar-item:hover {
|
|
background-color: var(--cardbgcolor);
|
|
color: #3273dc;
|
|
}
|