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