scaling
This commit is contained in:
@@ -1,10 +1,10 @@
|
|||||||
|
|
||||||
calendar {
|
calendar {
|
||||||
padding: 2pt 1pt;
|
padding: $popup-scale * 1.75pt $popup-scale * 1pt;
|
||||||
font-size: 10pt;
|
font-size: $popup-scale * 8pt;
|
||||||
|
|
||||||
header {
|
header {
|
||||||
padding: 2pt 0;
|
padding: $popup-scale * 2pt 0;
|
||||||
@include color-body;
|
@include color-body;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -13,7 +13,7 @@ calendar {
|
|||||||
:indeterminate { color: $base03; }
|
:indeterminate { color: $base03; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.cal-box .sys-section-header { margin-bottom: 4pt; }
|
.cal-box .sys-section-header { margin-bottom: $popup-scale * 4pt; }
|
||||||
|
|
||||||
|
|
||||||
.hour, .month {
|
.hour, .month {
|
||||||
@@ -21,7 +21,7 @@ calendar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.minute, .month {
|
.minute, .month {
|
||||||
margin-top: -4pt;
|
margin-top: $popup-scale * -4pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -43,19 +43,19 @@ calendar {
|
|||||||
.quick-accent { background-color: $base0E; }
|
.quick-accent { background-color: $base0E; }
|
||||||
|
|
||||||
// Quick actions
|
// Quick actions
|
||||||
.quick-grid { margin-top: 2pt; }
|
.quick-grid { margin-top: $popup-scale * 2pt; }
|
||||||
|
|
||||||
.quick-btn {
|
.quick-btn {
|
||||||
@include background-base2;
|
@include background-base2;
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
padding: 8pt 4pt;
|
padding: $popup-scale * 8pt $popup-scale * 4pt;
|
||||||
margin: 4px;
|
margin: $popup-scale * 4px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include background-active;
|
@include background-active;
|
||||||
.quick-icon, .quick-label {color: $base01;}
|
.quick-icon, .quick-label {color: $base01;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -66,21 +66,21 @@ calendar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.quick-icon { font-size: 1.5em; @include color-body; }
|
.quick-icon { font-size: 1.5em; @include color-body; }
|
||||||
.quick-label { font-size: 0.68em; margin-top: 3pt; @include color-body; }
|
.quick-label { font-size: 0.68em; margin-top: $popup-scale * 3pt; @include color-body; }
|
||||||
|
|
||||||
// Weather section
|
// Weather section
|
||||||
.weather-main { margin-bottom: 8pt; }
|
.weather-main { margin-bottom: $popup-scale * 8pt; }
|
||||||
.weather-icon { font-size: 2.2em; margin-right: 12pt; @include color-accent; }
|
.weather-icon { font-size: 2.2em; margin-right: $popup-scale * 12pt; @include color-accent; }
|
||||||
.weather-temp { font-size: 1.3em; font-weight: bold; @include color-base; }
|
.weather-temp { font-size: 1.3em; font-weight: bold; @include color-base; }
|
||||||
.weather-desc { font-size: 0.78em; @include color-body; }
|
.weather-desc { font-size: 0.78em; @include color-body; }
|
||||||
.weather-stats { margin-top: 4pt; }
|
.weather-stats { margin-top: $popup-scale * 4pt; }
|
||||||
|
|
||||||
// Volume section
|
// Volume section
|
||||||
.ctrl-row { margin-bottom: 4pt; }
|
.ctrl-row { margin-bottom: $popup-scale * 4pt; }
|
||||||
.ctrl-icon { font-size: 1.1em; min-width: 22pt; @include border-radius; @include color-body; }
|
.ctrl-icon { font-size: 1.1em; min-width: $popup-scale * 22pt; @include border-radius; @include color-body; }
|
||||||
.ctrl-icon:hover { @include background-active; }
|
.ctrl-icon:hover { @include background-active; }
|
||||||
.ctrl-muted { @include color-inactive; }
|
.ctrl-muted { @include color-inactive; }
|
||||||
.ctrl-value { font-size: 0.72em; min-width: 28pt; @include color-active; }
|
.ctrl-value { font-size: 0.72em; min-width: $popup-scale * 28pt; @include color-active; }
|
||||||
|
|
||||||
scale.ctrl-slider.ctrl-slider-muted {
|
scale.ctrl-slider.ctrl-slider-muted {
|
||||||
trough {
|
trough {
|
||||||
@@ -90,7 +90,7 @@ scale.ctrl-slider.ctrl-slider-muted {
|
|||||||
}
|
}
|
||||||
|
|
||||||
scale.ctrl-slider {
|
scale.ctrl-slider {
|
||||||
padding: 2pt 4pt;
|
padding: $popup-scale * 2pt $popup-scale * 4pt;
|
||||||
trough {
|
trough {
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
@include background-base2;
|
@include background-base2;
|
||||||
@@ -105,4 +105,4 @@ scale.ctrl-slider {
|
|||||||
margin: -3px;
|
margin: -3px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,4 +28,5 @@ $border-width: 2px;
|
|||||||
$gaps-screen: 8px;
|
$gaps-screen: 8px;
|
||||||
$gaps-window: 4px;
|
$gaps-window: 4px;
|
||||||
|
|
||||||
$panel-font-size: 10pt;
|
$panel-font-size: 10pt;
|
||||||
|
$popup-scale: 1;
|
||||||
@@ -11,23 +11,23 @@
|
|||||||
.usb-accent { background-color: $base09; }
|
.usb-accent { background-color: $base09; }
|
||||||
|
|
||||||
// Netinfo rows
|
// Netinfo rows
|
||||||
.netinfo-row { margin-bottom: 3pt; }
|
.netinfo-row { margin-bottom: $popup-scale * 3pt; }
|
||||||
.netinfo-label, .netinfo-value, .netinfo-dim { font-size: 0.72em; }
|
.netinfo-label, .netinfo-value, .netinfo-dim { font-size: 0.72em; }
|
||||||
.netinfo-label { @include color-active; min-width: 60px; }
|
.netinfo-label { @include color-active; min-width: $popup-scale * 60px; }
|
||||||
.netinfo-value { @include color-body; }
|
.netinfo-value { @include color-body; }
|
||||||
.netinfo-dim { color: $base03; margin-bottom: 4pt; }
|
.netinfo-dim { color: $base03; margin-bottom: $popup-scale * 4pt; }
|
||||||
|
|
||||||
// Section toggle button
|
// Section toggle button
|
||||||
.net-toggle-btn {
|
.net-toggle-btn {
|
||||||
padding: 2pt 4pt;
|
padding: $popup-scale * 2pt $popup-scale * 4pt;
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bluetooth device list
|
// Bluetooth device list
|
||||||
.bt-device-row { margin-bottom: 4pt; }
|
.bt-device-row { margin-bottom: $popup-scale * 4pt; }
|
||||||
.bt-device-name { font-size: 0.78em; @include color-body; }
|
.bt-device-name { font-size: 0.78em; @include color-body; }
|
||||||
.bt-device-btn { padding: 2pt 6pt; @include border-radius; font-size: 1em; }
|
.bt-device-btn { padding: $popup-scale * 2pt $popup-scale * 6pt; @include border-radius; font-size: 1em; }
|
||||||
|
|
||||||
// Shared button states
|
// Shared button states
|
||||||
.net-toggle-btn:hover,
|
.net-toggle-btn:hover,
|
||||||
|
|||||||
@@ -3,15 +3,15 @@
|
|||||||
|
|
||||||
// Now playing
|
// Now playing
|
||||||
.radio-now-playing {
|
.radio-now-playing {
|
||||||
margin-bottom: 8pt;
|
margin-bottom: $popup-scale * 8pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-art {
|
.radio-art {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
@include background-base2;
|
@include background-base2;
|
||||||
min-width: 72px;
|
min-width: $popup-scale * 72px;
|
||||||
min-height: 72px;
|
min-height: $popup-scale * 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-art-icon {
|
.radio-art-icon {
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
font-size: 0.88em;
|
font-size: 0.88em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@include color-base;
|
@include color-base;
|
||||||
margin-bottom: 2pt;
|
margin-bottom: $popup-scale * 2pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-artist {
|
.radio-artist {
|
||||||
@@ -33,12 +33,12 @@
|
|||||||
|
|
||||||
// Controls
|
// Controls
|
||||||
.radio-controls {
|
.radio-controls {
|
||||||
margin-top: 6pt;
|
margin-top: $popup-scale * 6pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-ctrl-btn {
|
.radio-ctrl-btn {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
padding: 4pt 20pt;
|
padding: $popup-scale * 4pt $popup-scale * 20pt;
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
@include color-body;
|
@include color-body;
|
||||||
&:hover { @include background-active; @include color-base; }
|
&:hover { @include background-active; @include color-base; }
|
||||||
@@ -66,7 +66,7 @@ scrollbar slider {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.station-row {
|
.station-row {
|
||||||
padding: 4pt 3pt;
|
padding: $popup-scale * 4pt $popup-scale * 3pt;
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
&:hover { @include background-base2; }
|
&:hover { @include background-base2; }
|
||||||
}
|
}
|
||||||
@@ -79,9 +79,9 @@ scrollbar slider {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
@include background-base2;
|
@include background-base2;
|
||||||
min-width: 28px;
|
min-width: $popup-scale * 28px;
|
||||||
min-height: 28px;
|
min-height: $popup-scale * 28px;
|
||||||
margin-right: 8pt;
|
margin-right: $popup-scale * 8pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.station-name {
|
.station-name {
|
||||||
|
|||||||
@@ -7,9 +7,9 @@
|
|||||||
.cpubar, .gpubar, .membar, .batbar { @include background-base2; margin: $gaps-window 0; }
|
.cpubar, .gpubar, .membar, .batbar { @include background-base2; margin: $gaps-window 0; }
|
||||||
|
|
||||||
// Window chrome
|
// Window chrome
|
||||||
.sys-win { padding: 10pt; font-size: $panel-font-size; }
|
.sys-win { padding: $popup-scale * 10pt; font-size: $popup-scale * $panel-font-size; }
|
||||||
.sys-section { margin-bottom: 0; }
|
.sys-section { margin-bottom: 0; }
|
||||||
.sys-section-header { margin-bottom: 10pt; }
|
.sys-section-header { margin-bottom: $popup-scale * 10pt; }
|
||||||
|
|
||||||
.sys-label {
|
.sys-label {
|
||||||
font-size: 0.72em;
|
font-size: 0.72em;
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
.section-accent {
|
.section-accent {
|
||||||
min-width: 3px;
|
min-width: 3px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-right: 8pt;
|
margin-right: $popup-scale * 8pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cpu-accent { background-color: $base0C; }
|
.cpu-accent { background-color: $base0C; }
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
.section-sep {
|
.section-sep {
|
||||||
background-color: $base03;
|
background-color: $base03;
|
||||||
min-height: 2px;
|
min-height: 2px;
|
||||||
margin: 6pt 0 10pt;
|
margin: $popup-scale * 6pt 0 $popup-scale * 10pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
// All rings and progress tracks share the same background
|
// All rings and progress tracks share the same background
|
||||||
@@ -49,11 +49,11 @@
|
|||||||
.swap-ring { color: $base09; }
|
.swap-ring { color: $base09; }
|
||||||
|
|
||||||
// Ring margins - freq rings use larger margins for concentric overlay effect
|
// Ring margins - freq rings use larger margins for concentric overlay effect
|
||||||
.cpu-usage-ring, .gpu-ring { margin: 3pt; }
|
.cpu-usage-ring, .gpu-ring { margin: $popup-scale * 3pt; }
|
||||||
.ram-ring, .bat-ring { margin: 4pt; }
|
.ram-ring, .bat-ring { margin: $popup-scale * 4pt; }
|
||||||
.swap-ring { margin: 3.5pt; }
|
.swap-ring { margin: $popup-scale * 3.5pt; }
|
||||||
.cpu-freq-ring { margin: 12px; }
|
.cpu-freq-ring { margin: $popup-scale * 12px; }
|
||||||
.gpu-freq-ring { margin: 13px; }
|
.gpu-freq-ring { margin: $popup-scale * 13px; }
|
||||||
|
|
||||||
// Shared label patterns
|
// Shared label patterns
|
||||||
.gpu-ring-value, .gpu-stat-value, .ram-used-label { font-weight: bold; @include color-body; }
|
.gpu-ring-value, .gpu-stat-value, .ram-used-label { font-weight: bold; @include color-body; }
|
||||||
@@ -70,14 +70,14 @@
|
|||||||
.ram-total-label { font-size: 0.72em; @include color-active; }
|
.ram-total-label { font-size: 0.72em; @include color-active; }
|
||||||
|
|
||||||
// GPU stats row
|
// GPU stats row
|
||||||
.gpu-stats-row { margin-top: 6pt; margin-bottom: 2pt; }
|
.gpu-stats-row { margin-top: $popup-scale * 6pt; margin-bottom: $popup-scale * 2pt; }
|
||||||
|
|
||||||
// VRAM
|
// VRAM
|
||||||
.vram-row { margin-top: 6pt; }
|
.vram-row { margin-top: $popup-scale * 6pt; }
|
||||||
|
|
||||||
.vram-bar {
|
.vram-bar {
|
||||||
@include border-radius;
|
@include border-radius;
|
||||||
padding: 2pt;
|
padding: $popup-scale * 2pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vram-bar trough * {
|
.vram-bar trough * {
|
||||||
@@ -89,5 +89,5 @@
|
|||||||
.ram-cached-ring {
|
.ram-cached-ring {
|
||||||
@include color-active;
|
@include color-active;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
margin: 4pt;
|
margin: $popup-scale * 4pt;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -161,7 +161,7 @@
|
|||||||
(box :orientation "v" :space-evenly false :halign "center" :valign "center"
|
(box :orientation "v" :space-evenly false :halign "center" :valign "center"
|
||||||
(overlay
|
(overlay
|
||||||
(circular-progress
|
(circular-progress
|
||||||
:width 60 :height 60
|
:width 72 :height 72
|
||||||
:value {100*swap.used/swap.total}
|
:value {100*swap.used/swap.total}
|
||||||
:start-at 0 :clockwise true :thickness 7
|
:start-at 0 :clockwise true :thickness 7
|
||||||
:class "swap-ring"
|
:class "swap-ring"
|
||||||
|
|||||||
@@ -61,6 +61,7 @@ in {
|
|||||||
$gaps-window: ${config.colorScheme.palette.gaps-window}px;
|
$gaps-window: ${config.colorScheme.palette.gaps-window}px;
|
||||||
|
|
||||||
$panel-font-size: 10pt;
|
$panel-font-size: 10pt;
|
||||||
|
$popup-scale: 1.25;
|
||||||
'';
|
'';
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user