update styles
This commit is contained in:
4 files changed
+207
-115
No files matched your search
+101
-62
@@ -1,10 +1,26 @@
|
||||
#bar {
|
||||
background-color: @surface;
|
||||
padding: 3px;
|
||||
padding: 0px 7px 0px 7px;
|
||||
}
|
||||
|
||||
#bar label {
|
||||
font-weight: bold;
|
||||
#bar.start-container {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
#bar.end-container {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#center-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#bar,
|
||||
#bar-corner * {
|
||||
background-color: lighter(@background);
|
||||
}
|
||||
|
||||
#bar.hidden {
|
||||
@@ -27,15 +43,19 @@
|
||||
|
||||
#button-bar {
|
||||
background-color: @surfaceContainer;
|
||||
min-width: 38px;
|
||||
border-radius: 100px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 1px 0px 1px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#button-bar-label {
|
||||
color: @primary;
|
||||
font-size: 24px;
|
||||
border-radius: 100px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@@ -49,28 +69,19 @@
|
||||
background-color: @primary;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── bar modules ───────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#start-container,
|
||||
#center-container,
|
||||
#end-container {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── workspace ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#workspaces {
|
||||
border-radius: 100px;
|
||||
font-style: normal;
|
||||
background: @surfaceContainer;
|
||||
padding: 0px 10px 0px 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -80,8 +91,7 @@
|
||||
#update-icon {
|
||||
color: @primary;
|
||||
font-size: 22px;
|
||||
margin-right: 1px;
|
||||
padding: 2px;
|
||||
padding: 1px;
|
||||
border-radius: 11px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
@@ -99,6 +109,7 @@
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 0px;
|
||||
margin-right: 4px;
|
||||
border-radius: 11px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
@@ -109,8 +120,12 @@
|
||||
|
||||
#datetime {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 100px;
|
||||
padding: 8px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -119,8 +134,12 @@
|
||||
|
||||
#battery {
|
||||
background-color: @surfaceContainer;
|
||||
padding: 2px 10px 2px 10px;
|
||||
border-radius: 100px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#battery-circle {
|
||||
@@ -188,23 +207,52 @@
|
||||
}
|
||||
|
||||
/*
|
||||
* ── systeminfo ────────────────────────────────────────────────────────
|
||||
* ── metric ────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#system-info {
|
||||
#metrics {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 100px;
|
||||
padding: 2px 10px 0px 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#metric-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#metric-circle {
|
||||
color: @surfaceBright;
|
||||
border: 3px solid @primary;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── tray ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#tray-revealer {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 2px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#tray {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 100px;
|
||||
padding: 2px 10px 0px 10px;
|
||||
margin-top: 5px;
|
||||
margin-left: 4px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#tray > button {
|
||||
@@ -237,8 +285,12 @@ menu > menuitem:hover > label {
|
||||
*/
|
||||
#logo {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 100px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#logo-name {
|
||||
@@ -251,33 +303,23 @@ menu > menuitem:hover > label {
|
||||
}
|
||||
|
||||
/*
|
||||
* ── applets ───────────────────────────────────────────────────────────
|
||||
* ── status indicator ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#applets {
|
||||
#system-indicators {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 100px;
|
||||
padding: 2px 10px 2px 10px;
|
||||
margin: 0px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#indicator-icon {
|
||||
#system-indicator-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── stats i.e cpu,ram,swap,temp ───────────────────────────────────────
|
||||
*/
|
||||
|
||||
#stats-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#stats-progress {
|
||||
color: @surfaceBright;
|
||||
border: 3px solid @primary;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── taskbar ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
@@ -314,15 +356,12 @@ menu > menuitem:hover > label {
|
||||
* ── recording indicator ───────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#recording-indicator {
|
||||
min-width: 38px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
#recorder {
|
||||
color: @error;
|
||||
border-radius: 100px;
|
||||
min-width: 25px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 6px 0px;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
animation: error 2s infinite;
|
||||
}
|
||||
|
||||
+50
-11
@@ -8,7 +8,7 @@
|
||||
#launcher {
|
||||
margin: 18px;
|
||||
border: 1px solid @outlineVariant;
|
||||
background-color: @surface;
|
||||
background-color: lighter(@background);
|
||||
border-radius: 24px;
|
||||
padding: 18px;
|
||||
transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
@@ -33,8 +33,8 @@
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.applauncher {
|
||||
min-height: 464px;
|
||||
.applauncher-scrolled-window {
|
||||
transition: min-height 0.2s ease;
|
||||
}
|
||||
|
||||
#launcher-content.bluetooth {
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
#scrolled-window scrollbar {
|
||||
border-radius: 10px;
|
||||
background-color: @surface;
|
||||
background-color: lighter(@background);
|
||||
padding: 4px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
@@ -91,6 +91,7 @@
|
||||
#launcher-app {
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
min-height: 0;
|
||||
transition: padding 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
@@ -121,6 +122,10 @@
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#entry-custom-color {
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
#wallpaper-icons:selected {
|
||||
background-color: @surfaceBright;
|
||||
border-radius: 8px;
|
||||
@@ -132,7 +137,7 @@
|
||||
}
|
||||
|
||||
#dropdown-box {
|
||||
background-color: @surface;
|
||||
background-color: lighter(@background);
|
||||
box-shadow: inset 0 0 0 1px @outlineVariant;
|
||||
border-radius: 11px;
|
||||
padding: 10px;
|
||||
@@ -143,6 +148,42 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Customize the overall switch appearance */
|
||||
#materialyoucolor-switcher {
|
||||
min-width: 40px;
|
||||
min-height: 20px;
|
||||
background-color: @surface;
|
||||
border-radius: 15px;
|
||||
padding: 2px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Style the switch's slider */
|
||||
#materialyoucolor-switcher slider {
|
||||
background-color: var(--primary);
|
||||
border-radius: 16px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
transition:
|
||||
background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25),
|
||||
transform 0.25s cubic-bezier(0.5, 0.25, 0, 1.25);
|
||||
}
|
||||
|
||||
/* When the switch is active (checked) */
|
||||
#materialyoucolor-switcher:checked {
|
||||
background-color: @primary;
|
||||
}
|
||||
|
||||
/* Optional: additional styling for the slider when active */
|
||||
#materialyoucolor-switcher:checked slider {
|
||||
background-color: @shadow;
|
||||
}
|
||||
|
||||
#mat-label {
|
||||
font-size: 24px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── emoji ─────────────────────────────────────────────────────────────
|
||||
*/
|
||||
@@ -253,7 +294,6 @@ button#clip-item:focus {
|
||||
* ── todo ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#todo-launcher {
|
||||
background-color: @surface;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -261,7 +301,7 @@ button#clip-item:focus {
|
||||
#todo-item {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: alpha(@surface, 0.8);
|
||||
background-color: alpha(@background, 0.3);
|
||||
}
|
||||
|
||||
#todo-label {
|
||||
@@ -269,7 +309,7 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#todo-label-completed {
|
||||
color: alpha(@outlineVariant, 0.5);
|
||||
color: alpha(@outlineVariant, 1);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@@ -379,7 +419,7 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#bluetooth-connect {
|
||||
background-color: @surface;
|
||||
background-color: lighter(@background);
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
@@ -449,7 +489,7 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#wifi-connect {
|
||||
background-color: @surface;
|
||||
background-color: lighter(@background);
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
@@ -546,6 +586,5 @@ button#clip-item:focus {
|
||||
|
||||
#prev-month-day,
|
||||
#next-month-day {
|
||||
/*color: lighter(@surfaceBright);*/
|
||||
color: mix(@onSurfaceVariant, transparent, 0.6);
|
||||
}
|
||||
+55
-41
@@ -6,24 +6,10 @@
|
||||
@import "./dashboard.css";
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
color: @foreground;
|
||||
font-size: 16px;
|
||||
font-family: "Product Sans", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── corner ────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#corner {
|
||||
background-color: @surface;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#corner-container {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
all: unset;
|
||||
color: @foreground;
|
||||
font-size: 16px;
|
||||
font-family: "Product Sans", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -31,38 +17,66 @@
|
||||
*/
|
||||
|
||||
tooltip {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
color: @onSurface;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-weight: normal;
|
||||
color: @onSurface;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@keyframes tooltipShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* ── icon ──────────────────────────────────────────────────────────────
|
||||
* ── dock ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#material-icon,
|
||||
#material-icon * {
|
||||
all: unset;
|
||||
font-family: "Material Symbols Outlined", "Material Symbols Sharp";
|
||||
#dock-icon {
|
||||
padding: 0px 2px 0px 2px;
|
||||
}
|
||||
|
||||
#dock {
|
||||
padding: 10px;
|
||||
background-color: alpha(@background, 0.8);
|
||||
box-shadow: inset 0 -0.5px 0 0.5px alpha(@outlineVariant, 0.4);
|
||||
border: 0.5px solid alpha(@outlineVariant, 0.4);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#dock-separator {
|
||||
border-right: 1px solid alpha(@foreground, 0.3);
|
||||
}
|
||||
|
||||
#dock-app-button {
|
||||
padding: 2px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.show-dock {
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hide-dock {
|
||||
opacity: 1;
|
||||
margin: -80px;
|
||||
}
|
||||
+1
-1
@@ -35,7 +35,7 @@
|
||||
#control-section {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: @surface;
|
||||
background-color: lighter(@background);
|
||||
}
|
||||
|
||||
.osd-hidden {
|
||||
|
||||
Reference in new issue
Block a user