Updated the margins for the dashboard menu to auto-adjust based on configuration. (#369)
This commit is contained in:
Jas Singh
GitHub
@@ -1,386 +1,592 @@
|
|||||||
.dashboard-menu-content * {
|
.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 {
|
.dashboard-content-items {
|
||||||
margin-left: 0.50em;
|
margin-left: 0.5em;
|
||||||
min-width: 28.5em;
|
min-width: 28.5em;
|
||||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
|
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: $bar-menus-border-size solid
|
||||||
border-radius: $bar-menus-border-radius;
|
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
|
||||||
opacity: $bar-menus-opacity * 0.01;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 0em;
|
border-radius: 0.4em;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.directory-link {
|
.dashboard-card {
|
||||||
padding: 0.5em 0em;
|
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
|
||||||
min-width: 9em;
|
margin: 0em 1.3em;
|
||||||
|
border-radius: $bar-menus-card_radius;
|
||||||
&:last-child {
|
padding: 1.5em;
|
||||||
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 {
|
.profile-picture-container {
|
||||||
margin-bottom: 0.75em;
|
margin-right: 0.65em;
|
||||||
font-size: 0.9em;
|
|
||||||
|
|
||||||
&.cpu {
|
.profile-picture {
|
||||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
|
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 {
|
.profile-name {
|
||||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
|
font-size: 1.5em;
|
||||||
}
|
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
|
||||||
|
margin-top: 0.75em;
|
||||||
&.gpu {
|
}
|
||||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
|
}
|
||||||
}
|
|
||||||
|
.power-menu-container {
|
||||||
&.storage {
|
margin-left: 0em;
|
||||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
|
|
||||||
}
|
.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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user