diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index d292038..01eb8e3 100644 --- a/scss/style/menus/dashboard.scss +++ b/scss/style/menus/dashboard.scss @@ -1,386 +1,592 @@ .dashboard-menu-content * { - font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01; + font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01; } .dashboard-content-items { - margin-left: 0.50em; - min-width: 28.5em; - background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); - border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); - border-radius: $bar-menus-border-radius; - opacity: $bar-menus-opacity * 0.01; - - button { - border-radius: 0.4em; - } - - .dashboard-card { - background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color); - margin: 1.3em; - border-radius: $bar-menus-card_radius; - padding: 1.5em; - } - - .profile-picture-container { - margin-right: 0.65em; - margin-bottom: 0.65em; - - .profile-picture { - min-width: $bar-menus-menu-dashboard-profile-size; - min-height: $bar-menus-menu-dashboard-profile-size; - border-radius: $bar-menus-menu-dashboard-profile-radius; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - } - - .profile-name { - font-size: 1.5em; - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name); - margin-top: 0.75em; - } - } - - .power-menu-container { - margin-left: 0em; - margin-bottom: 0.65em; - - .dashboard-button { - min-width: 3em; - min-height: 2.5em; - - &:not(:last-child) { - margin-bottom: 0.75em; - } - - label { - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); - font-size: 1.7em; - } - - &.shutdown { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown); - - label { - font-size: 1.9em; - } - } - - &.restart { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart); - - label { - font-size: 1.9em; - } - } - - &.lock { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout); - } - - &.sleep { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep); - } - - &:hover { - &.shutdown { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5); - } - - &.restart { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5); - } - - &.lock { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5); - } - - &.sleep { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5); - } - } - - - } - } - - .shortcuts-container { - font-size: 1em; - - .dashboard-card { - padding: 1.5em; - - button { - min-height: 2.5em; - min-width: 2.5em; - } - } - - .card-button-section-container.visible { - margin-right: 1.5em; - } - - .top-button.paired { - margin-bottom: 1.5em; - } - - .container { - margin-top: 0em; - margin-bottom: 0.65em; - - &.most-used { - margin-right: 0.65em; - } - - &.utilities.paired { - margin-left: 0em; - } - - button { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background); - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); - min-height: 3em; - - label { - font-size: 1.5em; - } - - &.record.active { - background: $red; - - &:hover { - background: transparentize($red, 0.5); - } - } - - &:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background), 0.5); - } - } - } - } - - .controls-container { - margin-bottom: 0.65em; - - &.dashboard-card { - margin-top: 0em; - } + margin-left: 0.5em; + min-width: 28.5em; + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); + border: $bar-menus-border-size solid + if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); + border-radius: $bar-menus-border-radius; + opacity: $bar-menus-opacity * 0.01; button { - padding: 0em; - min-height: 3em; - min-width: 3.8em; - - label { - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text); - font-size: 1.6em; - } - - &:not(:last-child) { - margin-right: 1em; - } - - &.wifi { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background); - } - - &.bluetooth { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background); - } - - &.notifications { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background); - } - - &.playback { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background); - } - - &.input { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background); - } - - &.wifi:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); - } - - &.bluetooth:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); - } - - &.notifications:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); - } - - &.playback:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); - } - - &.input:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); - } - - &.disabled { - background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled); - - &.wifi:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); - } - - &.bluetooth:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); - } - - &.notifications:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); - } - - &.playback:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); - } - - &.input:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); - } - } - } - } - - .directories-container { - &.dashboard-card { - margin-top: 0em; - margin-bottom: 0.65em; - padding-left: 1.5em; - padding-right: 0em; + border-radius: 0.4em; } - .directory-link { - padding: 0.5em 0em; - min-width: 9em; - - &:last-child { - margin-bottom: 0em; - } - - label { - font-size: 1.3em; - } - - &.right.top { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color); - } - - &.right.middle { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color); - } - - &.right.bottom { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color); - } - - &.left.top { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color); - } - - &.left.middle { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color); - } - - &.left.bottom { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color); - } - - &:hover { - opacity: 0.5; - } - } - } - - .stats-container { - margin-top: 0em; - - .stat { - label { - margin-right: 0.75em; - font-size: 1.3em; - min-width: 1.65em; - } - - &.cpu label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon); - } - - &.ram label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon); - } - - &.gpu label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon); - } - - &.storage label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon); - } - - .stats-bar { - levelbar * { - transition: 200ms; - } - - trough { - min-height: 1.05em; - } - - block { - border-radius: 0.4em; - - &.empty { - background: if($bar-menus-monochrome, $bar-menus-progressbar-background, $bar-menus-menu-dashboard-monitors-bar_background); - } - - &.filled { - padding-left: 0.85em; - } - } - } - - &.cpu .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-cpu-bar); - } - - &.ram .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-ram-bar); - } - - &.gpu .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-gpu-bar); - } - - &.storage .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-disk-bar); - } + .dashboard-card { + background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color); + margin: 0em 1.3em; + border-radius: $bar-menus-card_radius; + padding: 1.5em; } - .stat-value { - margin-bottom: 0.75em; - font-size: 0.9em; + .profile-picture-container { + margin-right: 0.65em; - &.cpu { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label); - } + .profile-picture { + min-width: $bar-menus-menu-dashboard-profile-size; + min-height: $bar-menus-menu-dashboard-profile-size; + border-radius: $bar-menus-menu-dashboard-profile-radius; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } - &.ram { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label); - } - - &.gpu { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label); - } - - &.storage { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label); - } + .profile-name { + font-size: 1.5em; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name); + margin-top: 0.75em; + } + } + + .power-menu-container { + margin-left: 0em; + + .dashboard-button { + min-width: 3em; + min-height: 2.5em; + + &:not(:last-child) { + margin-bottom: 0.75em; + } + + label { + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); + font-size: 1.7em; + } + + &.shutdown { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-shutdown + ); + + label { + font-size: 1.9em; + } + } + + &.restart { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-restart + ); + + label { + font-size: 1.9em; + } + } + + &.lock { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-logout + ); + } + + &.sleep { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-sleep + ); + } + + &:hover { + &.shutdown { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-shutdown + ), + 0.5 + ); + } + + &.restart { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-restart + ), + 0.5 + ); + } + + &.lock { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-logout + ), + 0.5 + ); + } + + &.sleep { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-sleep + ), + 0.5 + ); + } + } + } + } + + .shortcuts-container { + font-size: 1em; + + .dashboard-card { + padding: 1.5em; + + button { + min-height: 2.5em; + min-width: 2.5em; + } + } + + .card-button-section-container.visible { + margin-right: 1.5em; + } + + .top-button.paired { + margin-bottom: 1.5em; + } + + .container { + margin-top: 0em; + + &.most-used { + margin-right: 0.65em; + } + + &.utilities.paired { + margin-left: 0em; + } + + button { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-shortcuts-background + ); + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); + min-height: 3em; + + label { + font-size: 1.5em; + } + + &.record.active { + background: $red; + + &:hover { + background: transparentize($red, 0.5); + } + } + + &:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-shortcuts-background + ), + 0.5 + ); + } + } + } + } + + .controls-container { + &.dashboard-card { + margin-top: 0em; + } + + button { + padding: 0em; + min-height: 3em; + min-width: 3.8em; + + label { + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text); + font-size: 1.6em; + } + + &:not(:last-child) { + margin-right: 1em; + } + + &.wifi { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-wifi-background + ); + } + + &.bluetooth { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-bluetooth-background + ); + } + + &.notifications { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-notifications-background + ); + } + + &.playback { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-volume-background + ); + } + + &.input { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-input-background + ); + } + + &.wifi:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-wifi-background + ), + 0.5 + ); + } + + &.bluetooth:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-bluetooth-background + ), + 0.5 + ); + } + + &.notifications:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-notifications-background + ), + 0.5 + ); + } + + &.playback:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-volume-background + ), + 0.5 + ); + } + + &.input:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-input-background + ), + 0.5 + ); + } + + &.disabled { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-disabled, + $bar-menus-menu-dashboard-controls-disabled + ); + + &.wifi:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-wifi-background + ), + 0.5 + ); + } + + &.bluetooth:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-bluetooth-background + ), + 0.5 + ); + } + + &.notifications:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-notifications-background + ), + 0.5 + ); + } + + &.playback:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-volume-background + ), + 0.5 + ); + } + + &.input:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-input-background + ), + 0.5 + ); + } + } + } + } + + .directories-container { + &.dashboard-card { + margin-top: 0em; + padding-left: 1.5em; + padding-right: 0em; + } + + .directory-link { + padding: 0.5em 0em; + min-width: 9em; + + &:last-child { + margin-bottom: 0em; + } + + label { + font-size: 1.3em; + } + + &.right.top { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-right-top-color + ); + } + + &.right.middle { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-right-middle-color + ); + } + + &.right.bottom { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-right-bottom-color + ); + } + + &.left.top { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-left-top-color + ); + } + + &.left.middle { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-left-middle-color + ); + } + + &.left.bottom { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-left-bottom-color + ); + } + + &:hover { + opacity: 0.5; + } + } + } + + .stats-container { + margin-top: 0em; + + .stat { + label { + margin-right: 0.75em; + font-size: 1.3em; + min-width: 1.65em; + } + + &.cpu label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon); + } + + &.ram label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon); + } + + &.gpu label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon); + } + + &.storage label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon); + } + + .stats-bar { + levelbar * { + transition: 200ms; + } + + trough { + min-height: 1.05em; + } + + block { + border-radius: 0.4em; + + &.empty { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-background, + $bar-menus-menu-dashboard-monitors-bar_background + ); + } + + &.filled { + padding-left: 0.85em; + } + } + } + + &.cpu .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-cpu-bar + ); + } + + &.ram .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-ram-bar + ); + } + + &.gpu .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-gpu-bar + ); + } + + &.storage .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-disk-bar + ); + } + } + + .stat-value { + margin-bottom: 0.5em; + font-size: 0.9em; + + &.cpu { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label); + } + + &.ram { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label); + } + + &.gpu { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label); + } + + &.storage { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label); + } + } } - } +} + +.dashboard-content-items > :not(:first-child):not(:last-child) { + margin-top: 0; + margin-bottom: 0.65em; +} + +.dashboard-content-items > :first-child { + margin-top: 1.3em; + margin-bottom: 0.65em; +} + +.dashboard-content-items > :last-child { + margin-top: 0; + margin-bottom: 1.3em; +} + +.dashboard-content-items > :only-child { + margin-top: 1.3em; + margin-bottom: 1.3em; }