dotfiles/eww/eww.scss

/* --------------------------------------- Kanagawa Colors ------------------------------------*/

$wave_blue1:    #2d4f67;
$autumn_red:    #c34043;
$peach_red:     #ff5d62;
$autumn_green:  #66946a;
$carp_yellow:   #e6c384;
$crystal_blue:  #7e9cd8;
$oni_violet:    #957fb8;
$fuji_white:    #dcd7ba;
$old_white:     #c8c093;
$sumi_ink0:     #16161d;
$sumi_ink1:     #1F1F28;
$sumi_ink4:     #54546d;
$winter_blue:     #252535;

* {
    all: unset;
    font-family: "Arimo Nerd Font";
    font-weight: 400;
    font-size: 16px;
}

/* --------------------------------------- Common Styles -------------------------------------- */

/* Style for module */
.module {
    background: $winter_blue; 
    border-radius: 10px; 
    margin-right: 8px;
    padding: 2px 15px;
}

.main_menu {
    background: $winter_blue;
    border-radius: 15px;
    border: 2px solid $fuji_white;
}

.menu_item {
    min-height: 50px;
    font-size: 30px;
    border-radius: 15px;
}

/* Remove the `margin-right` for the last module */
.last-widget {
    margin-right: 0;
}

.bar_section {
    background: rgba(31, 31, 40, 0.7);
    padding: 5px 10px;
    border-radius: 10px;
}

.main_menu_btn {
    background: transparent;
    border-radius: 10px;
    padding: 0px 5px;
    background-color: $winter_blue;
    border-color: transparent;
    box-shadow: 0px 0px;
}

.main_menu_label {
    background-color: transparent;
    color: $fuji_white;
    font-size: 25;
    text-shadow: 0px 0px;
}

.datetime {
    color: $crystal_blue;
}

.weather {
    color: $crystal_blue;
    padding: 0px 10px;
}

tooltip.background {
    background-color: $sumi_ink0;
    font-size: 18;
    border-radius: 10px;
    color: $fuji_white;
}


.active_workspace {
    background: transparent;
    padding: 0 8px 0px 14px;
    border-radius: 7px;
    margin-top: 3px;
    margin-bottom: 3px;
    color: $crystal_blue;
}

.inactive_workspace {
    background: transparent;
    padding: 0 8px 0px 14px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 7px;
    color: $sumi_ink4;
}

.workspaces {
    padding: 0px 10px;
    border-radius: 10px;
}

.updates {
    color: $carp_yellow;
}

.cpu {
    color: $crystal_blue;
}

.ram {
    color: $autumn_green;
}

.datetime_module {
    border-radius: 10px;
    padding: 0px 15px;
}

.bardate {
    margin-right: 10px;
}

.system_module {
    background: rgba(22, 22, 30, 0.5);
    padding: 0px 10px 0px 15px;
    border-radius: 10px;
}

.volume {
    box-shadow: 0px 0px;
    color: $crystal_blue;
}

.volbar trough highlight {
    border-radius: 10px;
    background-color: $crystal_blue;
    border: transparent;
}

scale trough {
    border-radius: 10px;
    min-height: 7px;
    min-width: 100px;
    border: transparent;
}

.sysinfo {
    color: $crystal_blue;
}

.net_status {
    color: $crystal_blue;
}

.power {
    background-color: transparent;
    border-radius: 10px;
    text-shadow: 0px 0px;
    border-color: transparent;
    box-shadow: 0px 0px;
    font-size: 25px;
}

.shutdown {
    color: $autumn_red;
}

.restart {
    color: $oni_violet;
}

.logout {
    color: $carp_yellow;
}

.lock {
    color: $crystal_blue;
}

.sleep {
    color: $fuji_white;
}

/* -------------------------------------- Desktop Widget -------------------------------------- */

.desktop {
    background-color: transparent;
}

.desktop_clock {
    padding: 40px 35px;
}

.greeting {
    font-size: 36px;
    font-style: italic;
    color: $crystal_blue;
}

.desktop_time {
    font-weight: 700;
    font-size: 96px;
}

.desktop_time_h, .desktop_time_m {
    color: $autumn_red;
}

.desktop_time_colon {
    color: $fuji_white;
}

.desktop_time_p {
    color: $autumn_red;
}

.desktop_date_date {
    margin-left: 10px;
}

.desktop_date {
    font-weight: 700;
    font-size: 32px;
    color: $fuji_white;
}

.desktop_mode_button {
    color: $autumn_red;
    font-size: 96px;
}

/* -------------------------------------Powermenu Widget---------------------------------------*/
.powermenu {
    border-radius: 10px;
    border: 2px solid $fuji_white;
    background: $winter_blue;
}

.powermenu_button {
    background: transparent;
    box-shadow: 0px 0px;
    border: 2px;
    padding: 12px;
    margin: 5px;
}

.powermenu_button:nth-child(1) {
    border-radius: 10px;
    background: $oni_violet;
}

.powermenu_button:nth-child(2) {
    border-radius: 10px;
    background: $peach_red;
}

.powermenu_button:hover {
    background: transparent;
    padding: 10px;
}

.powermenu_button:nth-child(1):hover {
    border: 2px solid $oni_violet;
}

.powermenu_button:nth-child(2):hover {
    border: 2px solid $peach_red;
}

.powermenu_label_restart {
    color: $fuji_white;
    font-size: 32px;
}

.powermenu_label_poweroff {
    color: $fuji_white;
    font-size: 32px;
}