949 lines
17 KiB
CSS
949 lines
17 KiB
CSS
@import "./colors.css";
|
|
|
|
window.bar {
|
|
background-color: @surface;
|
|
padding: 6px;
|
|
}
|
|
|
|
.bar label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
}
|
|
|
|
trough {
|
|
}
|
|
|
|
/* slider {
|
|
background-color: @primary;
|
|
background-image: -gtk-scaled(url("sun-alt-svgrepo-com.png"));
|
|
background-size: 100px 100px;
|
|
color: @primary;
|
|
min-height: 10px;
|
|
min-width: 10px;
|
|
border-radius: 100px;
|
|
} */
|
|
|
|
|
|
highlight {
|
|
border-radius: 100px;
|
|
}
|
|
|
|
* {
|
|
border: none;
|
|
outline: none;
|
|
transition: 0.2s ease-in-out;
|
|
transition-property: border-color, background-color, color;
|
|
font-family: "Product Sans", Roboto, "Font Awesome 6 Free", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.corner {
|
|
background-color: @background;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
tooltip {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 11px;
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
tooltip label {
|
|
color: @onSurface;
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
menu separator {
|
|
color: @outline;
|
|
}
|
|
|
|
separator {
|
|
color: @outline;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Modules
|
|
* ----------------------------------------------------- */
|
|
|
|
.modules-left,
|
|
.modules-center,
|
|
.modules-right {
|
|
/* background-color: @surface; */
|
|
/* border-radius: 25px 25px 25px 25px; */
|
|
padding: 6px;
|
|
/* border: solid 2px; */
|
|
/* color: @outlineVariant; */
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Workspaces
|
|
* ----------------------------------------------------- */
|
|
|
|
.workspaces {
|
|
border-radius: 16px;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: @onSurface;
|
|
background: @surfaceContainer;
|
|
}
|
|
|
|
.workspaces * {
|
|
transition: all 0.35s ease-in-out;
|
|
transition-property: background-color, color, min-width;
|
|
}
|
|
|
|
.workspaces button {
|
|
padding: 0px 5px;
|
|
margin: 4px 3px;
|
|
border-radius: 16px;
|
|
border: 0px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.workspaces button.active {
|
|
color: @onSecondaryContainer;
|
|
background: @secondaryContainer;
|
|
border-radius: 16px;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.workspaces button:hover {
|
|
color: @onSurface;
|
|
background: @surfaceContainerHighest;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.workspaces button.active:hover {
|
|
color: @onPrimaryContainer;
|
|
background: @primaryContainer;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Clock
|
|
* ----------------------------------------------------- */
|
|
|
|
.clock {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 16px;
|
|
padding: 2px 10px 0px 10px;
|
|
}
|
|
|
|
.time {
|
|
color: @onSurface;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.date {
|
|
color: @onSurface;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Tray
|
|
* ----------------------------------------------------- */
|
|
|
|
|
|
.tray {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 16px;
|
|
padding: 2px 10px 0px 10px;
|
|
}
|
|
|
|
.tray button {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.tray image {
|
|
color: @onSurface;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Notifications
|
|
* ----------------------------------------------------- */
|
|
|
|
window.notification-popups box.notifications {
|
|
padding: 14px;
|
|
}
|
|
|
|
|
|
.notification-icon {
|
|
min-width: 68px;
|
|
min-height: 68px;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.notification-icon image {
|
|
font-size: 58px;
|
|
/* to center the icon */
|
|
margin: 5px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.notification-icon box {
|
|
min-width: 68px;
|
|
min-height: 68px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.notification {
|
|
min-width: 350px;
|
|
border-radius: 24px;
|
|
padding: 1em;
|
|
margin: 1px;
|
|
background-color: @surfaceContainerLowest;
|
|
}
|
|
|
|
.notification.critical {
|
|
border: 2px solid @error;
|
|
}
|
|
|
|
.notification-title {
|
|
color: @foreground;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.notification-body {
|
|
color: @foreground;
|
|
}
|
|
|
|
.notification-actions .notification-action-button {
|
|
margin: 0 .4em;
|
|
margin-top: .8em;
|
|
}
|
|
|
|
.notification-action-button {
|
|
background-color: @primary;
|
|
color: @onPrimary;
|
|
}
|
|
|
|
.notification-actions .notification-action-button:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.notification-actions .notification-action-button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.notification-time {
|
|
color: @primary;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Applications
|
|
* ----------------------------------------------------- */
|
|
|
|
.applauncher_box {
|
|
border-radius: 24px;
|
|
background-color: @background;
|
|
border: 2px solid;
|
|
border-color: @outlineVariant;
|
|
}
|
|
|
|
.applauncher_box {
|
|
padding: 11px;
|
|
}
|
|
|
|
.applauncher_entry {
|
|
background-color: @surfaceContainerHigh;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 100px;
|
|
margin-bottom: 16px;
|
|
padding: 5px;
|
|
font-weight: normal;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.application_container label {
|
|
color: @onSurface;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.application_container {
|
|
border-radius: 100px;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.application_container:hover {
|
|
background-color: @surfaceContainerHighest;
|
|
}
|
|
|
|
.application_container:focus label {
|
|
color: @onPrimary;
|
|
}
|
|
|
|
.application_container:focus {
|
|
background-color: @primary;
|
|
border: 0px solid;
|
|
border-radius: 34px;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.application_divider {
|
|
color: @outline;
|
|
margin: 5px 0px 5px 0px;
|
|
}
|
|
|
|
.application_label {
|
|
color: @onSurface
|
|
}
|
|
|
|
.application_icon {
|
|
margin-right: 16px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Clipboard history
|
|
* ----------------------------------------------------- */
|
|
|
|
.cliphistory_box {
|
|
border-radius: 24px;
|
|
background-color: @background;
|
|
border: 2px solid;
|
|
border-color: @outlineVariant;
|
|
}
|
|
|
|
.cliphistory_box {
|
|
padding: 11px;
|
|
}
|
|
|
|
.cliphistory_entry {
|
|
background-color: @surfaceContainerHigh;
|
|
color: @onSurface;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 100px;
|
|
margin-bottom: 16px;
|
|
padding: 5px;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.entry_container {
|
|
border-radius: 100px;
|
|
border: none;
|
|
outline: none;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.entry_container:hover {
|
|
background-color: @surfaceContainerHighest;
|
|
}
|
|
|
|
.entry_container:focus .entry_label {
|
|
color: @onPrimary;
|
|
}
|
|
|
|
.entry_container:focus {
|
|
background-color: @primary;
|
|
border: 0px solid;
|
|
border-radius: 34px;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.entry_divider {
|
|
color: @outline;
|
|
margin: 5px 0px 5px 0px;
|
|
}
|
|
|
|
.entry_label {
|
|
color: @onSurface;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Media player
|
|
* ----------------------------------------------------- */
|
|
|
|
.player {
|
|
background-color: @background;
|
|
padding: 15px;
|
|
min-width: 350px;
|
|
border: 2px solid @outlineVariant;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.player .img {
|
|
min-width: 100px;
|
|
min-height: 100px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 13px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.player .title {
|
|
font-size: 1.2em;
|
|
margin-left: 10px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.player .artist {
|
|
font-size: 1.1em;
|
|
margin-left: 10px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.player .length {
|
|
color: @foreground;
|
|
}
|
|
|
|
.player .position {
|
|
color: @foreground;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.player .icon {
|
|
color: @foreground
|
|
}
|
|
|
|
.player scale.position {
|
|
padding: 0;
|
|
margin-bottom: .3em;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.player scale.position trough {
|
|
background-color: @secondaryContainer;
|
|
min-height: 8px;
|
|
}
|
|
|
|
.player scale.position highlight {
|
|
background-color: @primary;
|
|
}
|
|
|
|
.player scale.position slider {
|
|
all: unset;
|
|
}
|
|
|
|
.player button {
|
|
min-height: 1em;
|
|
min-width: 1em;
|
|
padding: .3em;
|
|
color: @onSecondary;
|
|
}
|
|
|
|
.player button image {
|
|
color: @onSecondary;
|
|
}
|
|
|
|
.player_buttons {
|
|
background-color: @secondary;
|
|
border-radius: 100px;
|
|
padding: 3px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Misc
|
|
* ----------------------------------------------------- */
|
|
|
|
.bold_label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.keyboard {
|
|
background-color: @surfaceContainer;
|
|
color: @onSurface;
|
|
padding: 0px 10px 0px 10px;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.volume_box image {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.awesome_icon {
|
|
font-family: "Font Awesome 6 Free";
|
|
}
|
|
|
|
.battery {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 100px;
|
|
padding: 2px 10px 2px 10px;
|
|
}
|
|
|
|
.battery label {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.battery image {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.bar_applets {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 100px;
|
|
padding: 2px 10px 2px 10px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.bar_applets image {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.bar_applets button {
|
|
color: @onSurface;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Sidebar
|
|
* ----------------------------------------------------- */
|
|
|
|
.sidebar_main_box {
|
|
background: @surfaceContainerLowest;
|
|
}
|
|
|
|
.sidebar_main_box .empty {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.management_box {
|
|
padding: 15px;
|
|
padding-bottom: 0px;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.management_button {
|
|
min-width: 170px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.management_button {
|
|
border-radius: 25px;
|
|
background: @surfaceContainer;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.management_button label {
|
|
color: @onSurface;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ssid {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.management_button .icon {
|
|
color: @onSurface
|
|
}
|
|
|
|
.management_button:hover {
|
|
background-color: @surfaceContainerHigh;
|
|
}
|
|
|
|
.management_button.active label {
|
|
color: @onPrimary
|
|
}
|
|
|
|
.management_button.active .icon {
|
|
color: @onPrimary
|
|
}
|
|
|
|
.management_button.active {
|
|
background-color: @primary;
|
|
border: 0px solid;
|
|
}
|
|
|
|
.management_button.waiting label {
|
|
color: @onError
|
|
}
|
|
|
|
.management_button.waiting .icon {
|
|
color: @onError
|
|
}
|
|
|
|
.management_button.waiting {
|
|
background-color: @error;
|
|
border: 0px solid;
|
|
}
|
|
|
|
.management_button.disabled {
|
|
background: transparent;
|
|
}
|
|
|
|
.sidebar_bottom {
|
|
background-color: @surfaceContainerLow;
|
|
border-radius: 24px 24px 0px 0px;
|
|
transition: all 0.25s ease-in-out;
|
|
/* border-radius: 0px 0px 24px 24px; */
|
|
}
|
|
|
|
.notifications_sidebar_scrollable .notification {
|
|
margin-left: 10px;
|
|
margin-right: 9px;
|
|
border-radius: 14px;
|
|
margin-top: 10px;
|
|
padding: 15px;
|
|
background-color: @background;
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable .notification-time {
|
|
color: @primary;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable {
|
|
padding-right: 1px;
|
|
color: @primary;
|
|
}
|
|
|
|
.system_box {
|
|
padding: 10px;
|
|
}
|
|
|
|
.system_scale slider {
|
|
color: @onPrimary;
|
|
background-color: @primary;
|
|
background-size: 20px 20px;
|
|
min-width: 30px;
|
|
min-height: 23px;
|
|
border-radius: 100px;
|
|
padding: 0px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-top: -16px;
|
|
margin-bottom: -16px;
|
|
|
|
}
|
|
|
|
.system_scale.backlight slider {
|
|
background-image: -gtk-scaled(url("svg/brightness-onPrimary.svg"));
|
|
}
|
|
|
|
.system_scale.backlight {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.system_scale.brightness slider {
|
|
background-image: -gtk-scaled(url("svg/dark-onPrimary.svg"));
|
|
}
|
|
|
|
.system_scale {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.system_scale trough {
|
|
background-color: @secondaryContainer;
|
|
min-height: 6px;
|
|
margin-right: 4px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.system_scale highlight {
|
|
border-radius: 100px 0px 0px 100px;
|
|
|
|
margin-top: -13px;
|
|
margin-bottom: -13px;
|
|
margin-left: -16px;
|
|
background-color: @primary;
|
|
}
|
|
|
|
.system_box .slider_box, .system_box .usage_box, .system_box .info_box {
|
|
background-color: @surfaceContainerLowest;
|
|
padding: 26px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.system_box .usage_box {
|
|
padding: 10px;
|
|
}
|
|
|
|
.system_box .info_box {
|
|
padding: 20px;
|
|
}
|
|
|
|
.usage_bar trough {
|
|
background-color: @secondaryContainer;
|
|
min-height: 6px;
|
|
}
|
|
|
|
.usage_bar progress {
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
background-color: @primary;
|
|
box-shadow: 5px 0px 0px 1px @surfaceContainerLowest;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.usage_box label {
|
|
color: @onSurface
|
|
}
|
|
|
|
.info_box label {
|
|
color: @onSurface
|
|
}
|
|
|
|
.usage_bar_point {
|
|
background-color: @primary;
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.sidebar_buttons {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
padding-bottom: 15px;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.dotbuttons_box {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.dotbutton {
|
|
font-size: 10px;
|
|
margin: 0px;
|
|
padding: 3px;
|
|
transition: none;
|
|
}
|
|
|
|
.dotbutton label {
|
|
color: @surfaceContainerHigh;
|
|
}
|
|
|
|
.dotbutton:hover {
|
|
}
|
|
|
|
.dotbutton.active label {
|
|
color: @secondary;
|
|
}
|
|
|
|
/*
|
|
.notifications_menu {
|
|
padding: 0px;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.notifications_menu_item {
|
|
padding-right: 35px;
|
|
margin: 0px;
|
|
} */
|
|
|
|
/* -----------------------------------------------------
|
|
* Buttons
|
|
* ----------------------------------------------------- */
|
|
|
|
/* outline */
|
|
.outline_button {
|
|
background-color: transparent;
|
|
border: 1.2px solid;
|
|
border-color: @outline;
|
|
border-radius: 100px;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.outline_button label, .outline_button .icon,
|
|
.outline_button .awesome_icon, .outline_button image {
|
|
color: @primary;
|
|
}
|
|
|
|
.outline_button:hover {
|
|
background-color: mix(@primaryFixed, transparent, 0.8);
|
|
}
|
|
|
|
.outline_button:focus {
|
|
background-color: mix(@primaryFixed, transparent, 0.8);
|
|
border-color: @primary;
|
|
}
|
|
|
|
/* filled tonal */
|
|
.filled_tonal_button {
|
|
background-color: @secondaryContainer;
|
|
color: @onSecondaryContainer;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.filled_tonal_button label, .filled_tonal_button .icon,
|
|
.filled_tonal_button .awesome_icon, .filled_tonal_button image {
|
|
color: @onSecondaryContainer;
|
|
}
|
|
|
|
.filled_tonal_button:hover {
|
|
background-color: mix(@secondaryContainer, @onSecondaryContainer, 0.05);
|
|
box-shadow: 00px 3px 3px -2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.filled_tonal_button:active {
|
|
background-color: mix(@secondaryContainer, @onSecondaryContainer, 0.1);
|
|
box-shadow: none;
|
|
}
|
|
/* standard icon button */
|
|
.standard_icon_button {
|
|
border-radius: 100px;
|
|
background-color: transparent;
|
|
color: @onSurfaceVariant;
|
|
}
|
|
|
|
.standard_icon_button label, .standard_icon_button .icon,
|
|
.standard_icon_button .awesome_icon, .standard_icon_button image {
|
|
color: @onSurfaceVariant;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.standard_icon_button:hover {
|
|
background-color: mix(@onSurfaceVariant, transparent, 0.8);
|
|
}
|
|
|
|
.standard_icon_button:active {
|
|
background-color: mix(@onSurfaceVariant, transparent, 0.7);
|
|
}
|
|
|
|
|
|
/* -----------------------------------------------------
|
|
* Navigation bar
|
|
* ----------------------------------------------------- */
|
|
|
|
|
|
.navigation {
|
|
background-color: @surfaceContainer;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.navigation .label {
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
margin-top: 3px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.navigation_button .container {
|
|
border-radius: 16px;
|
|
padding: 5px;
|
|
min-height: 15px;
|
|
min-width: 0px;
|
|
transition-property: min-width, color, background-color, border-color;
|
|
}
|
|
|
|
.navigation_button .icon {
|
|
font-weight: normal;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.navigation_button.active .icon {
|
|
font-weight: bold;
|
|
color: @onSecondaryContainer;
|
|
}
|
|
|
|
.navigation_button .container_outer {
|
|
min-width: 60px;
|
|
}
|
|
|
|
.navigation_button:hover .container {
|
|
background-color: mix(@onSurface, @surfaceContainer, 0.92);
|
|
min-width: 40px;
|
|
}
|
|
|
|
.navigation_button:active .container {
|
|
background-color: mix(@onSurface, @surfaceContainer, 0.9);
|
|
min-width: 40px;
|
|
}
|
|
|
|
.navigation_button.active .container {
|
|
background: @secondaryContainer;
|
|
min-width: 40px;
|
|
}
|
|
|
|
|
|
/* -----------------------------------------------------
|
|
* Switch
|
|
* ----------------------------------------------------- */
|
|
|
|
|
|
switch {
|
|
border: 2px solid;
|
|
border-radius: 100px;
|
|
border-color: @outline;
|
|
background-color: @surfaceContainerHighest;
|
|
min-height: 20px;
|
|
padding: 1px;
|
|
}
|
|
|
|
switch slider {
|
|
border-radius: 100%;
|
|
background-color: @outline;
|
|
min-height: 10px;
|
|
margin: 2px;
|
|
min-height: 8px;
|
|
min-width: 16px;
|
|
transition: all 0.2s ease-in-out;
|
|
transition-property: color, background-color, border-color;
|
|
}
|
|
|
|
switch:disabled {
|
|
background-color: mix(@surfaceContainerHighest, transparent, 0.3);
|
|
border-color: mix(@onSurface, transparent, 0.3);
|
|
}
|
|
|
|
switch:disabled slider {
|
|
background-color: mix(@onSurface, transparent, 0.3);
|
|
}
|
|
|
|
switch:hover, switch:active {
|
|
background-color: mix(@surfaceContainerHighest, @onSurface, 0.08);
|
|
}
|
|
|
|
switch:hover slider, switch:active slider {
|
|
background-color: @onSurfaceVariant;
|
|
}
|
|
|
|
switch:checked {
|
|
background-color: @primary;
|
|
border-color: transparent;
|
|
}
|
|
|
|
switch:checked slider {
|
|
background-color: @onPrimary;
|
|
border-color: transparent;
|
|
margin: 0px;
|
|
min-height: 10px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
switch:checked:disabled {
|
|
background-color: mix(@onSurface, transparent, 0.3);
|
|
border-color: transparent;
|
|
}
|
|
|
|
switch:checked:disabled slider {
|
|
background-color: mix(@surface, transparent, 0.3);
|
|
}
|
|
|
|
switch:checked:hover, switch:checked:active {
|
|
background-color: @primary;
|
|
}
|
|
|
|
switch:checked:hover slider, switch:checked:active slider {
|
|
background-color: @primaryContainer;
|
|
}
|