1793 lines
35 KiB
CSS
1793 lines
35 KiB
CSS
@import "../../.cache/material/colors.css";
|
|
|
|
window.bar {
|
|
background-color: @surface;
|
|
}
|
|
|
|
.bar label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
button,
|
|
box {
|
|
background: transparent;
|
|
transition-timing-function: ease-out;
|
|
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 1000% 1000%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
button:active,
|
|
box:active {
|
|
transition-duration: 0.3s, 0ms, 0ms, 0.2s, 0.2s, 0.2s;
|
|
animation: ripple 0.3s ease-out forwards;
|
|
background-size: 0% 0%;
|
|
}
|
|
|
|
highlight {
|
|
border-radius: 100px;
|
|
}
|
|
|
|
* {
|
|
margin: 0px;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
|
|
transition-property: border-image, background-size, background-image, color, background-color, border-color;
|
|
transition-duration: 0.3s, 0.3s, 0.3s, 0.2s, 0.2s, 0.2s;
|
|
|
|
font-family: "Product Sans", Roboto, "Font Awesome 6 Free", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.corner {
|
|
background-color: @background;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
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 {
|
|
background: @surfaceContainer;
|
|
}
|
|
|
|
menuitem {
|
|
color: @onSurface;
|
|
}
|
|
|
|
menuitem:disabled {
|
|
color: mix(@onSurface, transparent, 0.38);
|
|
}
|
|
|
|
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 {
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Workspaces
|
|
* ----------------------------------------------------- */
|
|
|
|
.workspaces {
|
|
border-radius: 16px;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: @onSurface;
|
|
background: @surfaceContainer;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.workspaces * {
|
|
transition: all 0.35s ease-in-out;
|
|
}
|
|
|
|
.workspaces button {
|
|
padding: 0px 5px;
|
|
margin: 4px 0px;
|
|
margin-right: 3px;
|
|
border-radius: 16px;
|
|
border: 0px;
|
|
}
|
|
|
|
.workspaces button:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.workspaces button label {
|
|
color: @onSurface;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.workspaces button:hover {
|
|
color: @onSurface;
|
|
background-color: mix(@onSurface, @surface, 0.85);
|
|
}
|
|
|
|
.workspaces button:not(.exists) label {
|
|
color: @onSurfaceVariant;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.workspaces button.active {
|
|
background: @secondaryContainer;
|
|
}
|
|
|
|
.workspaces button.active label {
|
|
color: @onSecondaryContainer;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Clock
|
|
* ----------------------------------------------------- */
|
|
|
|
.clock {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 16px;
|
|
padding: 2px 10px 0px 10px;
|
|
}
|
|
|
|
.time {
|
|
color: @onSurface;
|
|
font-size: 14px;
|
|
font-feature-settings: "tnum";
|
|
}
|
|
|
|
.date {
|
|
color: @onSurface;
|
|
font-size: 10px;
|
|
font-feature-settings: "tnum";
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* 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: 20px;
|
|
padding: 1em;
|
|
margin-bottom: 2px;
|
|
background-color: @surfaceContainerLow;
|
|
}
|
|
|
|
.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 0.4em;
|
|
margin-top: 0.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;
|
|
}
|
|
|
|
.notification-close .icon {
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Clipboard history
|
|
* ----------------------------------------------------- */
|
|
|
|
.cliphistory_box {
|
|
border-radius: 20px;
|
|
background-color: @background;
|
|
border: 1px solid;
|
|
border-color: @outlineVariant;
|
|
}
|
|
|
|
.cliphistory_box separator {
|
|
margin: 0px;
|
|
}
|
|
|
|
.cliphistory_entry {
|
|
background-color: @surfaceContainerHigh;
|
|
color: @onSurface;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 100px;
|
|
margin-bottom: 16px;
|
|
padding: 5px;
|
|
padding-left: 25px;
|
|
margin: 11px;
|
|
}
|
|
|
|
.clip_container {
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 0px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.clip_container label {
|
|
margin-left: 11px;
|
|
margin-right: 11px;
|
|
}
|
|
|
|
.clip_container:hover {
|
|
background-color: mix(@onSurface, @surface, 0.92);
|
|
}
|
|
|
|
.clip_container:focus {
|
|
background-color: mix(@onSurface, @surface, 0.8);
|
|
border: 0px solid;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.clip_container:active {
|
|
background-image: radial-gradient(circle, mix(@onSurface, @surface, 0.78) 10%, transparent 0%);
|
|
}
|
|
|
|
.clip_container .clip_id {
|
|
font-weight: 200;
|
|
font-feature-settings: "tnum";
|
|
}
|
|
|
|
.clip_container .preview {
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.clip_container .dot_divider {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
min-width: 0px;
|
|
margin: 0px;
|
|
color: @outlineVariant;
|
|
}
|
|
|
|
.clip_divider {
|
|
color: @outline;
|
|
margin: 0px;
|
|
}
|
|
|
|
.clip_label {
|
|
color: @onSurface;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.clip_container.with_image .clip_label {
|
|
color: @tertiary;
|
|
}
|
|
|
|
.clear_button {
|
|
background-color: @surfaceContainerHigh;
|
|
color: @onSurface;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
margin-top: 11px;
|
|
margin-bottom: 11px;
|
|
}
|
|
|
|
.clear_button:hover {
|
|
background-color: mix(@onSurface, @surface, 0.92);
|
|
}
|
|
|
|
.clear_button:active {
|
|
background-color: mix(@onSurface, @surface, 0.8);
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Misc
|
|
* ----------------------------------------------------- */
|
|
|
|
.bold_label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.keyboard {
|
|
background-color: @surfaceContainer;
|
|
color: @onSurface;
|
|
padding: 0px 10px 0px 10px;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.awesome_icon {
|
|
font-family: "Font Awesome 6 Free";
|
|
}
|
|
|
|
.battery {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 100px;
|
|
padding: 2px 10px 2px 10px;
|
|
}
|
|
|
|
.battery label {
|
|
color: @onSurface;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.battery .icon {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.battery.critical {
|
|
background-color: @error;
|
|
}
|
|
|
|
.battery.critical label,
|
|
.battery.critical .icon {
|
|
color: @onError;
|
|
}
|
|
|
|
.bar_applets {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 100px;
|
|
padding: 2px 10px 2px 10px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.bar_applets .icon {
|
|
color: @onSurface;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bar_applets button {
|
|
color: @onSurface;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Sideright
|
|
* ----------------------------------------------------- */
|
|
|
|
.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;
|
|
|
|
transition-property: border-image, background-size, background-image, color, background-color, border-color;
|
|
transition-duration: 0.3s, 0.3s, 0.3s, 0.2s, 0.2s, 0.2s;
|
|
|
|
transition-timing-function: ease-out;
|
|
outline: none;
|
|
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 1000% 1000%;
|
|
}
|
|
|
|
.management_button label {
|
|
color: @onSurface;
|
|
font-weight: normal;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.ssid {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.management_button .icon {
|
|
color: @onSurface;
|
|
margin-right: 5px;
|
|
transition: color 0.2s;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.management_button .arrow {
|
|
margin-right: 0px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.management_button:hover {
|
|
background-color: mix(@onSurfaceVariant, @surface, 0.9);
|
|
}
|
|
|
|
.management_button:active {
|
|
background-image: radial-gradient(circle, mix(@onSurface, @surface, 0.85) 10%, transparent 0%);
|
|
}
|
|
|
|
.management_button.active label {
|
|
color: @onPrimary;
|
|
}
|
|
|
|
.management_button.active .icon {
|
|
color: @onPrimary;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.management_button.active {
|
|
background-color: @primary;
|
|
transition-duration: 0.3s, 0ms, 0.3s, 0.2s, 0.3s, 0.2s;
|
|
animation: ripple 0.3s ease-out forwards;
|
|
background-size: 0% 0%;
|
|
border: 0px solid;
|
|
background-image: radial-gradient(circle, @primary 10%, mix(@onSurface, @surface, 0.85) 0%);
|
|
}
|
|
|
|
.management_button.active:active {
|
|
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
|
|
}
|
|
|
|
.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: @surface;
|
|
border-radius: 24px 24px 0px 0px;
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable scrollbar {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable .notification {
|
|
margin-left: 10px;
|
|
margin-right: 9px;
|
|
margin-top: 4px;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
background-color: @surfaceContainerLow;
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
|
|
transition: all 0.2s ease-in-out, border-radius 0.1s ease-in-out;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable viewport > box > .first .notification {
|
|
border-radius: 14px 14px 6px 6px;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable viewport > box > .last .notification {
|
|
border-radius: 6px 6px 14px 14px;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable viewport > box > .margin_bottom .notification {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.notifications_sidebar_scrollable viewport > box > .first.last .notification {
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.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("../../.cache/material/svg/brightness-onPrimary.svg"));
|
|
}
|
|
|
|
.system_scale.backlight {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.system_scale.brightness slider {
|
|
background-image: -gtk-scaled(url("../../.cache/material/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: @surfaceContainerLow;
|
|
padding: 26px;
|
|
border-radius: 14px;
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.system_box .usage_box {
|
|
padding: 10px;
|
|
}
|
|
|
|
.system_box .usage_box_inner {
|
|
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 @surfaceContainerLow;
|
|
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;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* 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;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.outline_button:hover {
|
|
background-color: mix(@primaryFixed, transparent, 0.8);
|
|
}
|
|
|
|
.outline_button:focus {
|
|
background-color: mix(@primaryFixed, transparent, 0.8);
|
|
border-color: @primary;
|
|
}
|
|
|
|
.outline_button:active {
|
|
background-image: radial-gradient(circle, mix(@primaryFixed, transparent, 0.7) 10%, transparent 0%);
|
|
|
|
/* background-color: mix(@primaryFixed, transparent, 0.9); */
|
|
/* border-color: @primary; */
|
|
}
|
|
|
|
/* filled tonal */
|
|
.filled_tonal_button {
|
|
background-color: @secondaryContainer;
|
|
color: @onSecondaryContainer;
|
|
border-radius: 100px;
|
|
min-width: 35px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.filled_tonal_button label,
|
|
.filled_tonal_button .icon,
|
|
.filled_tonal_button .awesome_icon,
|
|
.filled_tonal_button image {
|
|
color: @onSecondaryContainer;
|
|
font-weight: 400;
|
|
margin: 0px;
|
|
}
|
|
|
|
.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-image: radial-gradient(circle, mix(@secondaryContainer, @onSecondaryContainer, 0.1) 10%, transparent 0%);
|
|
/* 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-image: radial-gradient(circle, mix(@onSurfaceVariant, transparent, 0.7) 10%, transparent 0%);
|
|
}
|
|
|
|
/* standard button */
|
|
.standard_button {
|
|
border-radius: 100px;
|
|
background-color: transparent;
|
|
color: @onSurfaceVariant;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.standard_button label,
|
|
.standard_button .icon,
|
|
.standard_button .awesome_icon,
|
|
.standard_button image {
|
|
color: @onSurfaceVariant;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.standard_button:hover {
|
|
background-color: mix(@onSurfaceVariant, @surface, 0.8);
|
|
}
|
|
|
|
.standard_button:active:not(.disabled) {
|
|
background-image: radial-gradient(circle, mix(@onSurfaceVariant, @surface, 0.7) 10%, transparent 0%);
|
|
}
|
|
|
|
.standard_button.disabled {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.standard_button.disabled label,
|
|
.standard_button.disabled .icon,
|
|
.standard_button.disabled .awesome_icon,
|
|
.standard_button.disabled image {
|
|
color: mix(@onSurface, transparent, 0.38);
|
|
}
|
|
|
|
/* filled button */
|
|
.filled_button {
|
|
border-radius: 100px;
|
|
background-color: @primary;
|
|
color: @onPrimary;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.filled_button label,
|
|
.filled_button .icon,
|
|
.filled_button .awesome_icon,
|
|
.filled_button image {
|
|
color: @onPrimary;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.filled_button:hover {
|
|
background-color: mix(@onPrimary, @primary, 0.92);
|
|
}
|
|
|
|
.filled_button:active:not(.disabled) {
|
|
background-image: radial-gradient(circle, mix(@onPrimary, @primary, 0.8) 10%, transparent 0%);
|
|
}
|
|
|
|
.filled_button.disabled {
|
|
background-color: mix(@onSurface, @surface, 0.12);
|
|
color: mix(@onSurface, @surface, 0.38);
|
|
}
|
|
|
|
.filled_button.disabled label,
|
|
.filled_button.disabled .icon,
|
|
filled_button.disabled .awesome_icon,
|
|
.filled_button.disabled image {
|
|
color: mix(@onSurface, @surface, 0.38);
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Navigation bar/rail
|
|
* ----------------------------------------------------- */
|
|
|
|
.navigation {
|
|
background-color: @surfaceContainer;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.rail {
|
|
background-color: @surface;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.navigation .label,
|
|
.rail .label {
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
margin-top: 3px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.rail .label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.navigation_button .container {
|
|
transition-property: all, border-image, background-size, background-image;
|
|
transition-duration: 0.3s, 0.3s, 0.3s, 0.3s;
|
|
transition-timing-function: ease-out;
|
|
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 1000% 1000%;
|
|
|
|
border-radius: 16px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
min-height: 25px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.rail .navigation_button .container {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.navigation_button .icon {
|
|
font-weight: 400;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.navigation_button.active .icon {
|
|
color: @onSecondaryContainer;
|
|
}
|
|
|
|
.navigation_button .container_outer {
|
|
min-width: 56px;
|
|
}
|
|
|
|
.rail .navigation_button .container_outer {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.navigation_button:hover .container {
|
|
background-color: mix(@onSurface, @surfaceContainer, 0.92);
|
|
min-width: 40px;
|
|
}
|
|
|
|
.rail .navigation_button:hover .container {
|
|
min-width: 26px;
|
|
}
|
|
|
|
.navigation_button:active .container {
|
|
transition-duration: 0.3s, 0.3s, 0ms, 0ms;
|
|
animation: ripple 0.3s ease-out forwards;
|
|
background-size: 0% 0%;
|
|
|
|
background-image: radial-gradient(circle, mix(@onSurface, @surfaceContainer, 0.87) 10%, transparent 0%);
|
|
min-width: 40px;
|
|
}
|
|
|
|
.navigation_button.active .container {
|
|
background-color: @secondaryContainer;
|
|
background-image: radial-gradient(circle, @secondaryContainer 10%, transparent 0%);
|
|
min-width: 40px;
|
|
}
|
|
|
|
.rail .navigation_button.active .container {
|
|
min-width: 26px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* 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;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Cheatsheet
|
|
* ----------------------------------------------------- */
|
|
|
|
.cheatsheet flowbox {
|
|
margin-top: 14px;
|
|
margin-bottom: 14px;
|
|
background-color: @background;
|
|
border-radius: 20px;
|
|
border: 1px solid @outlineVariant;
|
|
padding: 5px;
|
|
}
|
|
|
|
.cheatsheet .category {
|
|
background-color: @surfaceContainerLow;
|
|
border-radius: 12px;
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.cheatsheet .category separator {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
color: @outline;
|
|
}
|
|
|
|
.cheatsheet .category .row {
|
|
margin-bottom: 2px;
|
|
margin-left: 7px;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.cheatsheet .category .key {
|
|
background-color: @surfaceContainerLowest;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
min-width: 15px;
|
|
font-size: 15px;
|
|
color: @onSurface;
|
|
border-radius: 4px;
|
|
border: 1px solid @outlineVariant;
|
|
}
|
|
|
|
.cheatsheet .category .plus {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
color: @outline;
|
|
}
|
|
|
|
.cheatsheet .category .separator {
|
|
color: @outline;
|
|
}
|
|
|
|
.cheatsheet .category .description {
|
|
color: @onSurfaceVariant;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.cheatsheet .category .title {
|
|
font-weight: bold;
|
|
color: @onSurface;
|
|
margin-left: 7px;
|
|
margin-right: 7px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.cheatsheet .category .material_icon {
|
|
margin-left: 7px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.cheatsheet .category .awesome_icon.key {
|
|
padding: 4px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Sideleft
|
|
* ----------------------------------------------------- */
|
|
|
|
.sideleft {
|
|
background-color: @surface;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.sideleft .page {
|
|
min-width: 320px;
|
|
}
|
|
|
|
.sideleft .card {
|
|
background-color: @surfaceContainerLow;
|
|
padding: 14px;
|
|
border-radius: 12px;
|
|
margin-bottom: 10px;
|
|
margin-right: 12px;
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.sideleft .card {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.sideleft .main_title {
|
|
color: @onSurface;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
margin: 0px;
|
|
margin-left: 2px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* weather */
|
|
.weather .icon {
|
|
margin-right: 8px;
|
|
text-shadow: 0px 0px 2px mix(@shadow, transparent, 0.75);
|
|
}
|
|
|
|
.weather .description {
|
|
color: @onSurface;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.weather .current {
|
|
font-weight: 900;
|
|
font-size: 38px;
|
|
margin: 0px;
|
|
margin-right: 4px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.weather .min,
|
|
.weather .max {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: @onSurfaceVariant;
|
|
}
|
|
|
|
.weather .title {
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: @onSurface;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.weather .primary_label {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: @onSurface;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.weather .label {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: @onSurfaceVariant;
|
|
}
|
|
|
|
.weather separator {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.sideleft .info_box {
|
|
background-color: @surfaceContainerHigh;
|
|
padding: 6px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
border-radius: 100px;
|
|
margin-top: 12px;
|
|
min-width: 75px;
|
|
}
|
|
|
|
.sideleft .info_box .icon {
|
|
color: @primary;
|
|
margin: 0px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* players */
|
|
.sideleft .player {
|
|
min-width: 340px;
|
|
}
|
|
|
|
.sideleft .player .img {
|
|
min-width: 100px;
|
|
min-height: 100px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 4px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.sideleft .player .title {
|
|
font-size: 20px;
|
|
margin-left: 10px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.sideleft .player .artist {
|
|
font-size: 18px;
|
|
margin-left: 10px;
|
|
color: @foreground;
|
|
}
|
|
|
|
.sideleft .player .length {
|
|
color: @foreground;
|
|
}
|
|
|
|
.sideleft .player .position {
|
|
color: @foreground;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sideleft .player .icon {
|
|
color: @foreground;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sideleft .player scale.position {
|
|
padding: 0;
|
|
margin-bottom: 0.3em;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sideleft .player scale.position trough {
|
|
background-color: @secondaryContainer;
|
|
min-height: 6px;
|
|
}
|
|
|
|
.sideleft .player scale.position highlight {
|
|
background-color: @primary;
|
|
box-shadow: 5px 0px 0px 1px @surfaceContainerLow;
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
}
|
|
|
|
.sideleft .player scale.position slider {
|
|
all: unset;
|
|
}
|
|
|
|
.sideleft .player button {
|
|
min-height: 1em;
|
|
min-width: 1em;
|
|
padding: 0.3em;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
color: @onSecondary;
|
|
}
|
|
|
|
.sideleft .player button .icon {
|
|
color: @onSecondary;
|
|
}
|
|
|
|
.sideleft .player_buttons {
|
|
background-color: @secondary;
|
|
border-radius: 100px;
|
|
padding: 3px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* applauncher */
|
|
.sideleft .applauncher_box {
|
|
border-radius: 20px;
|
|
background-color: @background;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.sideleft .applauncher_box separator {
|
|
margin: 0px;
|
|
}
|
|
|
|
.sideleft .applauncher_entry {
|
|
margin: 11px;
|
|
|
|
background-color: @surfaceContainerHigh;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 100px;
|
|
margin-bottom: 16px;
|
|
margin-top: 0px;
|
|
padding: 5px;
|
|
font-weight: normal;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.sideleft .application_container label {
|
|
color: @onSurface;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sideleft .application_container {
|
|
border-radius: 0px;
|
|
border: none;
|
|
outline: none;
|
|
margin: 0px;
|
|
min-height: 47px;
|
|
}
|
|
|
|
.sideleft .application_container image {
|
|
margin-left: 11px;
|
|
}
|
|
|
|
.sideleft .application_container:hover {
|
|
background-color: mix(@onSurface, @surface, 0.92);
|
|
}
|
|
|
|
.sideleft .application_container:focus {
|
|
background-color: mix(@onSurface, @surface, 0.8);
|
|
border: 0px solid;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.sideleft .application_container:active {
|
|
background-image: radial-gradient(circle, mix(@onSurface, @surface, 0.78) 10%, transparent 0%);
|
|
}
|
|
|
|
.sideleft .application_divider {
|
|
color: @outline;
|
|
margin: 0px 0px 0px 0px;
|
|
}
|
|
|
|
.sideleft .application_label {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.sideleft .application_icon {
|
|
margin-right: 16px;
|
|
color: @onSurface;
|
|
}
|
|
/* Chats */
|
|
.sideleft .textbox {
|
|
background-color: transparent;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
margin-right: 12px;
|
|
margin-bottom: 8px;
|
|
box-shadow: inset 0 0 0 1px @outline;
|
|
transition: box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.sideleft .textbox scrollbar {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sideleft .send .icon {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.sideleft .send {
|
|
padding: 5px;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.sideleft .placeholder label {
|
|
color: @onSurfaceVariant;
|
|
}
|
|
|
|
.sideleft .chat_wrapper {
|
|
transition: min-height 0.35s ease-in-out;
|
|
}
|
|
|
|
.sideleft .chat_wrapper scrollbar {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sideleft .chat_wrapper_extended {
|
|
min-height: 5rem;
|
|
}
|
|
|
|
.sideleft .chat_wrapper_extended scrollbar {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.sideleft .textbox.focused {
|
|
box-shadow: inset 0 0 0 2px @primary;
|
|
}
|
|
|
|
.sideleft .chat_wrapper text {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.sideleft .latex * {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.sideleft .message {
|
|
background-color: @surfaceContainerLow;
|
|
padding: 14px;
|
|
border-radius: 12px;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0px 0px 2px mix(@shadow, transparent, 0.75);
|
|
margin-right: 12px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.sideleft .message label {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.sideleft .message.ephemeral {
|
|
background-color: @surface;
|
|
box-shadow: none;
|
|
border: 1px solid @outlineVariant;
|
|
}
|
|
|
|
.codeblock_top_bar {
|
|
border-radius: 12px 12px 0px 0px;
|
|
background-color: @surfaceContainerLowest;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.codeblock_top_bar_text {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.codeblock_top_bar_button {
|
|
border-radius: 12px;
|
|
padding: 0px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.codeblock_code text,
|
|
.codeblock_code {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.codeblock_code textview {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
padding-bottom: 6px;
|
|
border-radius: 0px 0px 12px 12px;
|
|
background-color: @surfaceContainerLowest;
|
|
}
|
|
|
|
.sideleft .divider {
|
|
background-color: @outlineVariant;
|
|
}
|
|
|
|
.sideleft .chat_name {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sideleft .description {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.sideleft .name {
|
|
font-size: 17px;
|
|
}
|
|
|
|
/* Gemini */
|
|
.gemini .command_button {
|
|
padding: 6px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.gemini .command_buttons {
|
|
margin-right: 12px;
|
|
margin-bottom: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.gemini .skeleton_line {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
background-color: transparent;
|
|
animation: pulsate 2s infinite;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
@keyframes pulsate {
|
|
0% {
|
|
background-color: transparent;
|
|
}
|
|
50% {
|
|
background-color: @outline;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Chatrooms */
|
|
.chats .filled_tonal_button {
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.chats .login,
|
|
.chats .room {
|
|
margin-right: 12px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.chats entry {
|
|
background-color: transparent;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
box-shadow: inset 0 0 0 1px @outline;
|
|
transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.chats entry:focus {
|
|
box-shadow: inset 0 0 0 2px @primary;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Popups
|
|
* ----------------------------------------------------- */
|
|
.popups {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.popups .popup {
|
|
background-color: @surfaceContainer;
|
|
margin-top: 14px;
|
|
padding: 4px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.popup_slider {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.popup .icon {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.popup_slider slider {
|
|
color: @onPrimary;
|
|
background-color: @primary;
|
|
background-size: 20px 20px;
|
|
min-width: 5px;
|
|
min-height: 14px;
|
|
border-radius: 100px;
|
|
padding: 0px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-top: -16px;
|
|
margin-bottom: -16px;
|
|
box-shadow: -4px 0px 0px 1px @surfaceContainer, 4px 0px 0px 1px @surfaceContainer;
|
|
}
|
|
|
|
.popup_slider trough {
|
|
background-color: @secondaryContainer;
|
|
min-height: 10px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.popup_slider highlight {
|
|
border-radius: 100px 0px 0px 100px;
|
|
background-color: @primary;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Audio
|
|
* ----------------------------------------------------- */
|
|
|
|
.audio .tabs button {
|
|
border-radius: 0px;
|
|
border-bottom: 1px solid @surfaceVariant;
|
|
}
|
|
|
|
.audio .tabs button:hover {
|
|
background-color: mix(@onSurfaceVariant, transparent, 0.8);
|
|
}
|
|
|
|
.audio .tabs button:active {
|
|
background-image: radial-gradient(circle, mix(@onSurfaceVariant, transparent, 0.7) 10%, transparent 0%);
|
|
}
|
|
|
|
.audio .tabs .active button {
|
|
border-color: @primary;
|
|
}
|
|
|
|
.audio .tabs {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.audio_box {
|
|
background-color: @background;
|
|
border-radius: 20px;
|
|
border: 1px solid @outlineVariant;
|
|
padding: 6px;
|
|
margin-right: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.audio .icon {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.audio scrollbar {
|
|
opacity: 0;
|
|
}
|
|
|
|
.audio scrollbar:hover {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.audio .device {
|
|
background-color: @surfaceContainerLow;
|
|
border-radius: 6px;
|
|
min-width: 300px;
|
|
margin-top: 3px;
|
|
padding: 10px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.audio .device:first-child {
|
|
border-radius: 14px 14px 6px 6px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.audio .device:last-child {
|
|
border-radius: 6px 6px 14px 14px;
|
|
}
|
|
|
|
.audio .device label {
|
|
color: @onSurface;
|
|
}
|
|
|
|
.audio .device button {
|
|
padding: 0px;
|
|
}
|
|
|
|
.audio .device slider {
|
|
color: @onPrimary;
|
|
background-color: @primary;
|
|
background-size: 20px 20px;
|
|
min-width: 5px;
|
|
min-height: 14px;
|
|
border-radius: 100px;
|
|
padding: 0px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-top: -16px;
|
|
margin-bottom: -16px;
|
|
box-shadow: -4px 0px 0px 1px @surfaceContainerLow, 4px 0px 0px 1px @surfaceContainerLow;
|
|
}
|
|
|
|
.audio .device trough {
|
|
background-color: @secondaryContainer;
|
|
min-height: 10px;
|
|
}
|
|
|
|
.audio .device highlight {
|
|
border-radius: 100px 0px 0px 100px;
|
|
background-color: @primary;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Calendar
|
|
* ----------------------------------------------------- */
|
|
|
|
.calendar_widget {
|
|
padding: 4px;
|
|
margin-top: 14px;
|
|
margin-right: 14px;
|
|
background-color: @background;
|
|
border-radius: 20px;
|
|
border: 1px solid @outlineVariant;
|
|
}
|
|
|
|
.calendar_button .overlay_box {
|
|
min-width: 22px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.calendar_button label {
|
|
font-size: 14px;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.calendar_button.today {
|
|
background-color: @primary;
|
|
}
|
|
|
|
.calendar_button.today label {
|
|
color: @onPrimary;
|
|
}
|
|
|
|
.calendar_button.othermonth label {
|
|
color: mix(@onSurfaceVariant, transparent, 0.3);
|
|
}
|
|
|
|
.calendar_monthyear {
|
|
color: @foreground;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Material
|
|
* ----------------------------------------------------- */
|
|
|
|
.material_icon,
|
|
.material_icon * {
|
|
all: unset;
|
|
font-family: "Material Symbols Outlined", "Material Symbols Sharp";
|
|
}
|
|
|
|
@keyframes ripple {
|
|
to {
|
|
background-size: 1000% 1000%;
|
|
}
|
|
}
|