182 lines
3.3 KiB
SCSS
182 lines
3.3 KiB
SCSS
|
//Import
|
||
|
@import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss";
|
||
|
|
||
|
// Default Style (Dark)
|
||
|
:root {
|
||
|
--primary-color: #888888;
|
||
|
--secondary-color: #666666;
|
||
|
--font-color: #cecece;
|
||
|
--link-color: #e6e6e6;
|
||
|
--bg-color: #0f0f0f;
|
||
|
--heading-color: #454545;
|
||
|
--block-bg-color: #2f3234;
|
||
|
--block-bg-color-secondary: #444444;
|
||
|
--block-bg-color-heading: #333333;
|
||
|
--table-color: #cecece;
|
||
|
--head-nav-bg-color: transparent;
|
||
|
--head-nav-text-color: #d56f2a;
|
||
|
--menu-color: #e1e1e1;
|
||
|
--license-color: #666666;
|
||
|
}
|
||
|
|
||
|
.nojs-toggle {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
// BEGIN theme switcher
|
||
|
#main-theme-switcher {
|
||
|
left: 25px;
|
||
|
top: 35px;
|
||
|
z-index: 999;
|
||
|
display: block !important;
|
||
|
position: absolute !important;
|
||
|
transition: all .3s ease;
|
||
|
}
|
||
|
|
||
|
#theme-switcher:checked~* {
|
||
|
--primary-color: #666666;
|
||
|
--secondary-color: #555555;
|
||
|
--font-color: #555555;
|
||
|
--link-color: #444444;
|
||
|
--bg-color: #f0f0f0;
|
||
|
--heading-color: #666666;
|
||
|
--block-bg-color: #d7d7d7;
|
||
|
--block-bg-color-secondary: #c0c0c0;
|
||
|
--block-bg-color-heading: #a5a5a5;
|
||
|
--table-color: #000000;
|
||
|
--head-nav-bg-color: transparent;
|
||
|
--head-nav-text-color: #d56f2a;
|
||
|
--menu-color: #202225;
|
||
|
--license-color: #666666;
|
||
|
}
|
||
|
|
||
|
#theme-switcher:checked~.switch .slider {
|
||
|
background-color: #d56f2a;
|
||
|
}
|
||
|
|
||
|
#theme-switcher:checked~.switch .slider::before {
|
||
|
-webkit-transform: translateX(26px);
|
||
|
-moz-transform: translateX(26px);
|
||
|
-ms-transform: translateX(26px);
|
||
|
transform: translateX(26px);
|
||
|
}
|
||
|
|
||
|
@media (max-width: 480px) {
|
||
|
#main-theme-switcher {
|
||
|
top: 19px;
|
||
|
right: 10px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// END theme switcher
|
||
|
|
||
|
// BEGIN menu toggle
|
||
|
#menu-toggle:checked~#nav {
|
||
|
-webkit-transform: translateX(-14rem);
|
||
|
-moz-transform: translateX(-14rem);
|
||
|
-ms-transform: translateX(-14rem);
|
||
|
transform: translateX(-14rem);
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
#menu-toggle:checked~.menu-toggle #menu {
|
||
|
background: none;
|
||
|
transition: all 0.1s ease-in;
|
||
|
}
|
||
|
|
||
|
#menu-toggle:checked~.menu-toggle #menu::before {
|
||
|
top: 0;
|
||
|
-webkit-transform: rotate(-45deg);
|
||
|
-moz-transform: rotate(-45deg);
|
||
|
-ms-transform: rotate(-45deg);
|
||
|
transform: rotate(-45deg);
|
||
|
background-color: #0F0F0F;
|
||
|
}
|
||
|
|
||
|
#menu-toggle:checked~.menu-toggle #menu::after {
|
||
|
top: -4px;
|
||
|
-webkit-transform: rotate(45deg);
|
||
|
-moz-transform: rotate(45deg);
|
||
|
-ms-transform: rotate(45deg);
|
||
|
transform: rotate(45deg);
|
||
|
background-color: #0F0F0F;
|
||
|
}
|
||
|
|
||
|
@media (min-width: 940px) {
|
||
|
#menu-toggle:checked~#nav {
|
||
|
width: 30%;
|
||
|
}
|
||
|
|
||
|
/* Sets burger menu for small screens */
|
||
|
#header {
|
||
|
.action-container {
|
||
|
display: flex !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#nav-list {
|
||
|
.nav-actions-flex {
|
||
|
display: none !important;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// END menu toggle
|
||
|
|
||
|
#wrap {
|
||
|
background-color: var(--bg-color);
|
||
|
color: var(--font-color);
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
color: var(--secondary-color);
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: var(--link-color);
|
||
|
}
|
||
|
|
||
|
.moneroversary-table,
|
||
|
.price-table {
|
||
|
color: var(--table-color);
|
||
|
}
|
||
|
|
||
|
time.by-line,
|
||
|
p.by-line-post {
|
||
|
color: var(--table-color);
|
||
|
}
|
||
|
|
||
|
#menu,
|
||
|
#menu::after,
|
||
|
#menu::before {
|
||
|
background-color: var(--menu-color);
|
||
|
}
|
||
|
|
||
|
#header .action-container {
|
||
|
&--left {
|
||
|
left: 25px;
|
||
|
top: 35px;
|
||
|
}
|
||
|
|
||
|
&--right {
|
||
|
right: 80px;
|
||
|
top: 35px;
|
||
|
}
|
||
|
|
||
|
align-items: center;
|
||
|
display: none;
|
||
|
flex-direction: row;
|
||
|
gap: 12px;
|
||
|
height: 36px;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
#header {
|
||
|
|
||
|
a.rss,
|
||
|
a.donate {
|
||
|
display: block;
|
||
|
padding-bottom: 0;
|
||
|
}
|
||
|
}
|