@import url('colors.css');


/*style*/
body {
    background-image: url(../../images/bg/MonoDark.png);
    color: var(--dark-color);
}

.panel {
    background-color: var(--dark-panel);
}

.control-center-frame:hover,
.lang-dialog-frame:hover,
.calendar-frame:hover,
.activities-frame:hover {
    background-color: var(--dark-fg-color-2);
}

.control-center-frame:active,
.lang-dialog-frame:active,
.calendar-frame:active,
.activities-frame:active {
    background-color: var(--dark-fg-color);
}

#control-center-appear,
#calendar-appear,
#lang-dialog-appear {
    -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
}


/*control center*/
#control-center-appear {
    background-color: rgba(40, 40, 40, 0.7);
    border: 1px solid var(--dark-fg-color-2);
}

.screenshot-frame,
.settings-frame,
.lockscreen-frame,
.poweroff-frame,
.battery-frame,
.bluetooth-frame,
.power-frame,
.airplane-frame {
    color: var(--dark-color);
    background-color: var(--dark-fg-color);
}

.screenshot-frame:hover,
.settings-frame:hover,
.lockscreen-frame:hover,
.poweroff-frame:hover,
.battery-frame:hover,
.arrow-frame:hover,
.bluetooth-frame:hover,
.power-frame:hover,
.airplane-frame:hover {
    background-color: var(--dark-fg-color-2);
}

.screenshot-frame:active,
.settings-frame:active,
.lockscreen-frame:active,
.poweroff-frame:active,
.battery-frame:active,
.arrow-frame:active,
.bluetooth-frame:active,
.power-frame:active,
.airplane-frame:active {
    background-color: var(--dark-fg-color);
}

.wifi-frame,
.nightlight-frame,
.darkmode-frame {
    color: var(--dark-color);
    background-color: var(--accent-blue);
}

.wifi-frame:hover,
.nightlight-frame:hover,
.darkmode-frame:hover {
    background-color: var(--accent-blue-2);
}

.wifi-frame:active,
.nightlight-frame:active,
.darkmode-frame:active {
    background-color: var(--accent-blue);
}

.wifi-frame.clicked,
.nightlight-frame.clicked,
.darkmode-frame.clicked {
    background-color: var(--dark-fg-color);
    color: var(--dark-color);
}

.wifi-frame.clicked:hover,
.nightlight-frame.clicked:hover,
.darkmode-frame.clicked:hover {
    background-color: var(--dark-fg-color-2);
}

.wifi-frame.clicked:active,
.nightlight-frame.clicked:active,
.darkmode-frame.clicked:active {
    background-color: var(--dark-fg-color);
}

.bluetooth-frame.clicked,
.power-frame.clicked,
.airplane-frame.clicked {
    background-color: var(--accent-blue);
    color: var(--dark-color);
}

.bluetooth-frame.clicked:hover,
.power-frame.clicked:hover,
.airplane-frame.clicked:hover {
    background-color: var(--accent-blue-2);
}

.bluetooth-frame.clicked:active,
.power-frame.clicked:active,
.airplane-frame.clicked:active {
    background-color: var(--accent-blue);
}

.wifi-frame.clicked #wifi-icon {
    content: url(../../images/dark/wifi-disabled-icon.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bluetooth-frame.clicked #bluetooth-icon {
    content: url(../../images/dark/bluetooth-enabled-icon.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.power-frame.clicked #power-icon {
    content: url(../../images/dark/power-saver-icon.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


/*slider*/
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
    background: var(--dark-color);
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(var(--dark-color-2), var(--dark-color-2)) 0/var(--sx) 100% no-repeat, var(--dark-fg-color-2);
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
    background: var(--dark-color);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(var(--dark-color-2), var(--dark-color-2)) 0/var(--sx) 100% no-repeat, var(--dark-fg-color-2);
}

/*ms*/
input[type=range].styled-slider::-ms-thumb {
    background: var(--dark-color);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    background: var(--dark-color-2);
}


/*lang dialog*/
#lang-dialog-appear {
    background-color: rgba(40, 40, 40, 0.7);
    border: 1px solid var(--dark-fg-color-2);
}

.first-lang:hover,
.second-lang:hover,
.show-keyboard:hover {
    background-color: var(--dark-fg-color-2);
}

.first-lang:active,
.second-lang:active,
.show-keyboard:active {
    background-color: var(--dark-fg-color);
}


/*calendar*/
#calendar-appear {
    background-color: rgba(40, 40, 40, 0.7);
    border: 1px solid var(--dark-fg-color-2);
}

.player,
.player-image,
.notification-1,
.notification-2,
.clear-button,
.calendar-box,
.event-box,
.weather-box {
    background-color: var(--dark-fg-color);
}

.player:hover,
.player-icons:hover,
.notification-1:hover,
.notification-2:hover,
.clear-button:hover,
.calendar-arrows:hover,
.day-inactive:hover,
.day-inactive:focus,
.event-box:hover,
.weather-box:hover {
    background-color: var(--dark-fg-color-2);
}

.player:active,
.player-icons:active,
.notification-1:active,
.notification-2:active,
.clear-button:active,
.calendar-arrows:active,
.day:hover,
.day-inactive:hover,
.event-box:active,
.weather-box:active {
    background-color: var(--dark-fg-color);
}

.day:focus {
    background-color: var(--dark-fg-color-2);
}

.day {
    color: var(--dark-color);
}

.day-active {
    color: var(--dark-color);
}

.day-active {
    background-color: var(--accent-blue);
}

.day-active:focus {
    background-color: var(--accent-blue-2);
}

.notification-text-time,
.day-inactive,
.event-text-bottom,
.weather-time {
    color: var(--dark-color-2);
}

.notification-close-frame:hover {
    background-color: var(--accent-red-2);
}

.notification-close-frame:active {
    background-color: var(--accent-red);
}

.notification-close-icon {
    content: url(../../images/dark/close-icon.svg);
}

.notification-close-frame:hover .notification-close-icon {
    content: url(../../images/light/close-icon.svg);
}

.notification-close-frame:active .notification-close-icon {
    content: url(../../images/light/close-icon.svg);
}


/*switch*/
.switch-slider {
    background-color: rgba(255, 255, 255, 0.2);
}

.switch-slider:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.switch-slider:active {
    background-color: rgba(255, 255, 255, 0.15);
}

.switch-slider:before {
    background-color: var(--dark-color-2);
}

.switch-slider:hover:before {
    background-color: var(--dark-color);
}

input:checked+.switch-slider {
    background-color: var(--accent-blue);
}

input:checked:hover+.switch-slider {
    background-color: var(--accent-blue-2);
}

input:checked:active+.switch-slider {
    background-color: var(--accent-blue);
}

input:checked+.switch-slider:before {
    background-color: var(--dark-color);
}


/*dash*/
.dash {
    background-color: var(--light-color-2);
}

.launcher:hover,
.app:hover,
.trash:hover,
.separator {
    background-color: var(--dark-fg-color-2);
}

.launcher:active,
.app:active,
.trash:active {
    background-color: var(--dark-fg-color);
}

#firefox-button.clicked,
#files-button.clicked {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--dark-color);
}

#firefox-button.clicked:hover,
#files-button.clicked:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

#firefox-button.clicked:active,
#files-button.clicked:active {
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.2s;
}

#firefox-button.clicked .dot,
#files-button.clicked .dot {
    content: url(../../images/dark/dot-inactive-icon.svg);
    display: block;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


/*page*/
.slide {
    background: transparent;
}

a.slide-prev,
a.slide-next {
    background-color: rgba(255, 255, 255, 0.1);
}

a.slide-prev:hover,
a.slide-next:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

a.slide-prev:active,
a.slide-next:active {
    background-color: rgba(255, 255, 255, 0.1);
}


/*page1*/
.page-1 {
    background-color: rgba(40, 40, 40, 0.1);
}

.mono,
.description-text {
    background-color: rgba(255, 255, 255, 0.1);
}


/*page3*/
.page-3 {
    background-color: rgba(40, 40, 40, 0.1);
}

.link {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.link:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/*loading*/
.loading-page {
    background-color: #252525;
}

.loading-text {
    color: #ffffff;
}