1148 lines
21 KiB
CSS
1148 lines
21 KiB
CSS
@import "./colors.css";
|
|
|
|
window.bar {
|
|
background-color: @surface;
|
|
padding: 6px;
|
|
}
|
|
|
|
.bar label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
}
|
|
|
|
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", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.corner {
|
|
background-color: @background;
|
|
border-radius: 38px;
|
|
}
|
|
|
|
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: 6px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Workspaces
|
|
* ----------------------------------------------------- */
|
|
|
|
.outer-workspace {
|
|
background-color: @surfaceContainer;
|
|
border-radius: 20px;
|
|
margin: 2px;
|
|
padding: 2px 0px;
|
|
}
|
|
|
|
.workspace {
|
|
background-color: @onSecondary;
|
|
padding: 0;
|
|
}
|
|
|
|
.workspace button {
|
|
padding: 0px 6px;
|
|
}
|
|
|
|
.workspace.first {
|
|
border-radius: 20px 0 0 20px;
|
|
}
|
|
.workspace.last {
|
|
border-radius: 0 20px 20px 0;
|
|
}
|
|
|
|
.workspace.normal,
|
|
.workspace button.normal {
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
.workspace button.normal:hover {
|
|
border-radius: 20px;
|
|
background-color: @onSecondaryContainer;
|
|
color: @primary;
|
|
}
|
|
|
|
.workspace button.focused {
|
|
background-color: @secondary;
|
|
color: @surface;
|
|
font-weight: bold;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.workspace button.focused:hover {
|
|
border-radius: 20px;
|
|
color: @primary;
|
|
background-color: @secondaryContainer;
|
|
}
|
|
|
|
.workspace button.occupied {
|
|
color: @primary;;
|
|
}
|
|
|
|
.workspaces button.occupied:hover {
|
|
border-radius: 20px;
|
|
background-color: @secondaryContainer;;
|
|
color: @primary;
|
|
}
|
|
|
|
.workspace.occupied-single {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.workspace.occupied-start {
|
|
border-radius: 20px 0 0 20px;
|
|
}
|
|
|
|
.workspace.occupied-middle {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.workspace.occupied-end {
|
|
border-radius: 0px 20px 20px 0px;
|
|
}
|
|
|
|
|
|
/* -----------------------------------------------------
|
|
* 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;
|
|
}
|
|
|
|
.notification-close .icon {
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* 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;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* Emoji
|
|
* -----------------------------------------------------*/
|
|
|
|
.emoji_box {
|
|
border-radius: 24px;
|
|
background-color: @background;
|
|
border: 2px solid;
|
|
border-color: @outlineVariant;
|
|
padding: 11px;
|
|
}
|
|
|
|
.emoji_entry {
|
|
background-color: @surfaceContainerHigh;
|
|
color: @onSurface;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 100px;
|
|
margin-bottom: 16px;
|
|
padding: 5px;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* 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;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
color: @onSecondary;
|
|
}
|
|
|
|
.player button .icon {
|
|
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 button {
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.volume_box .icon {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.awesome_icon {
|
|
font-family: "Font Awesome 6 Free";
|
|
}
|
|
|
|
.material_icon {
|
|
font-family: "Material Symbols Outlined", "Material Symbols Sharp";
|
|
}
|
|
|
|
.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 .icon {
|
|
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;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.management_button .arrow {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.management_button:hover {
|
|
background-color: @surfaceContainerHigh;
|
|
}
|
|
|
|
.management_button.active label {
|
|
color: @onPrimary
|
|
}
|
|
|
|
.management_button.active .icon{
|
|
color: @onPrimary;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* -----------------------------------------------------
|
|
* 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;
|
|
}
|
|
|
|
/* filled tonal */
|
|
.filled_tonal_button {
|
|
background-color: @secondaryContainer;
|
|
color: @onSecondaryContainer;
|
|
border-radius: 100px;
|
|
padding: 0px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.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-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);
|
|
}
|
|
|
|
/* 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 {
|
|
background-color: mix(@onSurfaceVariant, @surface, 0.7);
|
|
}
|
|
|
|
.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 {
|
|
background-color: mix(@onPrimary, @primary, 0.8);
|
|
}
|
|
|
|
.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
|
|
* ----------------------------------------------------- */
|
|
|
|
|
|
.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-left: 5px;
|
|
padding-right: 5px;
|
|
min-height: 15px;
|
|
min-width: 0px;
|
|
transition-property: min-width, color, background-color, border-color;
|
|
}
|
|
|
|
.navigation_button .icon {
|
|
font-weight: 400;
|
|
color: @onSurface;
|
|
}
|
|
|
|
.navigation_button.active .icon {
|
|
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;
|
|
}
|
|
|
|
|
|
/* -----------------------------------------------------
|
|
* Cheatsheet
|
|
* ----------------------------------------------------- */
|
|
|
|
.cheatsheet flowbox {
|
|
margin-top: 14px;
|
|
margin-bottom: 14px;
|
|
background-color: @background;
|
|
border-radius: 24px;
|
|
border: 2px solid @outlineVariant;
|
|
padding: 5px;
|
|
}
|
|
|
|
.cheatsheet .category {
|
|
background-color: @surfaceContainerLow;
|
|
border-radius: 17px;
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.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;
|
|
color: @onSurface;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.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 .awesome_icon.key {
|
|
padding: 4px;
|
|
}
|