mirror of
https://github.com/Theaninova/TheaninovOS.git
synced 2026-02-16 13:32:45 +00:00
refactor: make the whole thing more generic
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
@import "./button";
|
||||
|
||||
@mixin accs-button($flat: false, $reactive: true) {
|
||||
@include button($flat: true, $reactive: false, $focusable: false);
|
||||
color: $fg-color;
|
||||
|
||||
> * {
|
||||
border-radius: $radii;
|
||||
transition: $transition;
|
||||
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
} @else {
|
||||
background-color: $widget-bg;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $reactive {
|
||||
&:focus > *,
|
||||
&.focused > * {
|
||||
@include button-focus;
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
@include button-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
&.on,
|
||||
&:checked {
|
||||
> * {
|
||||
@include button-active;
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
box-shadow:
|
||||
inset 0 0 0 $border-width $border-color,
|
||||
inset 0 0 0 99px $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
@mixin button-focus() {
|
||||
box-shadow: inset 0 0 0 $border-width $accent;
|
||||
background-color: $hover;
|
||||
color: $hover-fg;
|
||||
}
|
||||
|
||||
@mixin button-hover() {
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
background-color: $hover;
|
||||
color: $hover-fg;
|
||||
}
|
||||
|
||||
@mixin button-active() {
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
background-image: $active-gradient;
|
||||
background-color: $accent;
|
||||
color: $accent-fg;
|
||||
}
|
||||
|
||||
@mixin button-disabled() {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: transparentize($fg-color, 0.7);
|
||||
}
|
||||
|
||||
@mixin button($flat: false, $reactive: true, $radii: $radii, $focusable: true) {
|
||||
all: unset;
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
color: $fg-color;
|
||||
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
} @else {
|
||||
background-color: $widget-bg;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
}
|
||||
|
||||
@if $reactive {
|
||||
@if $focusable {
|
||||
&:focus {
|
||||
@include button-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.on,
|
||||
&.active,
|
||||
&:checked {
|
||||
@include button-active;
|
||||
|
||||
&:hover {
|
||||
box-shadow:
|
||||
inset 0 0 0 $border-width $border-color,
|
||||
inset 0 0 0 99px $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include button-disabled;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@mixin floating-widget {
|
||||
@if $drop-shadow {
|
||||
box-shadow: 0 0 5px 0 $shadow;
|
||||
}
|
||||
|
||||
margin: max($spacing, 8px);
|
||||
border: $border-width solid $popover-border-color;
|
||||
background-color: $bg-color;
|
||||
color: $fg-color;
|
||||
border-radius: $popover-radius;
|
||||
padding: $popover-padding;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@mixin hidden {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
-gtk-icon-transform: scale(0);
|
||||
|
||||
* {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
-gtk-icon-transform: scale(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
window.popup {
|
||||
> * {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
menu {
|
||||
border-radius: $popover-radius;
|
||||
background-color: $bg-color;
|
||||
padding: $popover-padding;
|
||||
border: $border-width solid $popover-border-color;
|
||||
|
||||
separator {
|
||||
background-color: $border-color;
|
||||
}
|
||||
|
||||
menuitem {
|
||||
@include button;
|
||||
padding: $spacing/2;
|
||||
margin: $spacing/2 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@mixin scrollable {
|
||||
scrollbar,
|
||||
scrollbar * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
scrollbar.vertical {
|
||||
transition: $transition;
|
||||
background-color: transparentize($bg-color, 0.7);
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($bg-color, 0.3);
|
||||
|
||||
slider {
|
||||
background-color: transparentize($fg-color, 0.3);
|
||||
min-width: 0.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar.vertical slider {
|
||||
background-color: transparentize($fg-color, 0.5);
|
||||
border-radius: $radii;
|
||||
min-width: 0.4em;
|
||||
min-height: 2em;
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
@import "./unset";
|
||||
|
||||
@mixin slider(
|
||||
$width: 0.7em,
|
||||
$slider-width: 0.5em,
|
||||
$gradient: $active-gradient,
|
||||
$slider: true,
|
||||
$focusable: true,
|
||||
$radii: $radii
|
||||
) {
|
||||
@include unset($rec: true);
|
||||
|
||||
trough {
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
border: $border;
|
||||
background-color: $widget-bg;
|
||||
min-height: $width;
|
||||
min-width: $width;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
border-radius: max($radii - $border-width, 0);
|
||||
background-image: $gradient;
|
||||
min-height: $width;
|
||||
min-width: $width;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border: $border-width solid transparent;
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
min-height: $width;
|
||||
min-width: $width;
|
||||
margin: -$slider-width;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background-color: $hover;
|
||||
}
|
||||
|
||||
slider {
|
||||
@if $slider {
|
||||
background-color: $fg-color;
|
||||
border-color: $border-color;
|
||||
|
||||
@if $drop-shadow {
|
||||
box-shadow: 0 0 3px 0 $shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
highlight,
|
||||
progress {
|
||||
background-color: transparentize($fg-color, 0.4);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
@if $focusable {
|
||||
trough:focus {
|
||||
background-color: $hover;
|
||||
box-shadow: inset 0 0 0 $border-width $accent;
|
||||
|
||||
slider {
|
||||
@if $slider {
|
||||
background-color: $fg-color;
|
||||
box-shadow: inset 0 0 0 $border-width $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@mixin spacing($multiplier: 1, $spacing: $spacing, $rec: false) {
|
||||
&.horizontal > * {
|
||||
margin: 0 $spacing * $multiplier / 2;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > * {
|
||||
margin: $spacing * $multiplier / 2 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $rec {
|
||||
box {
|
||||
&.horizontal > * {
|
||||
margin: 0 $spacing * $multiplier / 2;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > * {
|
||||
margin: $spacing * $multiplier / 2 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@import "./button";
|
||||
|
||||
@mixin switch {
|
||||
@include button;
|
||||
|
||||
slider {
|
||||
background-color: $accent-fg;
|
||||
border-radius: $radii;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
image {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@mixin text-border {
|
||||
text-shadow:
|
||||
-1 * $border-width -1 * $border-width 0 $border-color,
|
||||
$border-width $border-width 0 $border-color,
|
||||
-1 * $border-width $border-width 0 $border-color,
|
||||
$border-width -1 * $border-width 0 $border-color;
|
||||
|
||||
-gtk-icon-shadow:
|
||||
-1 * $border-width -1 * $border-width 0 $border-color,
|
||||
$border-width $border-width 0 $border-color,
|
||||
-1 * $border-width $border-width 0 $border-color,
|
||||
$border-width -1 * $border-width 0 $border-color;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
tooltip {
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
> * > * {
|
||||
background-color: $bg-color;
|
||||
border-radius: $radii;
|
||||
border: $border-width solid $popover-border-color;
|
||||
color: $fg-color;
|
||||
padding: 8px;
|
||||
margin: 4px;
|
||||
box-shadow: 0 0 3px 0 $shadow;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@mixin unset($rec: false) {
|
||||
all: unset;
|
||||
|
||||
@if $rec {
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@mixin widget {
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
color: $fg-color;
|
||||
background-color: $widget-bg;
|
||||
border: $border;
|
||||
}
|
||||
36
modules/home-manager/desktops/hyprland/ags/scss/main.scss
Normal file
36
modules/home-manager/desktops/hyprland/ags/scss/main.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
@import "/tmp/ags/scss/options";
|
||||
@import "./variables";
|
||||
|
||||
// common
|
||||
@import "./common/unset";
|
||||
@import "./common/widget";
|
||||
@import "./common/button";
|
||||
@import "./common/a11y-button";
|
||||
@import "./common/floating-widget";
|
||||
@import "./common/slider";
|
||||
@import "./common/scrollable";
|
||||
@import "./common/switch";
|
||||
@import "./common/hidden";
|
||||
@import "./common/text-border";
|
||||
@import "./common/tooltip";
|
||||
@import "./common/menu";
|
||||
@import "./common/spacing";
|
||||
|
||||
// widgets
|
||||
@import "./widgets/about";
|
||||
@import "./widgets/applauncher";
|
||||
@import "./widgets/bar";
|
||||
@import "./widgets/desktop";
|
||||
@import "./widgets/notifications";
|
||||
@import "./widgets/overview";
|
||||
@import "./widgets/osd";
|
||||
@import "./widgets/dashboard";
|
||||
@import "./widgets/dock";
|
||||
@import "./widgets/powermenu";
|
||||
@import "./widgets/lockscreen";
|
||||
@import "./widgets/media";
|
||||
@import "./widgets/quicksettings";
|
||||
@import "./widgets/settings";
|
||||
|
||||
// additional overrides
|
||||
@import "/tmp/ags/scss/additional";
|
||||
@@ -0,0 +1,32 @@
|
||||
// variables are defined in options.js
|
||||
// these ones are derived from those
|
||||
|
||||
$hover: transparentize($_widget-bg, ($widget-opacity * 0.9) / 100);
|
||||
$widget-bg: transparentize($_widget-bg, $widget-opacity / 100);
|
||||
$active-gradient: linear-gradient($accent-gradient);
|
||||
|
||||
$hover-fg: if(
|
||||
$color-scheme == "dark",
|
||||
lighten($fg-color, 10%),
|
||||
darken($fg-color, 8%)
|
||||
);
|
||||
|
||||
$border-color: transparentize($_border-color, $border-opacity / 100);
|
||||
$border: $border-width solid $border-color;
|
||||
|
||||
$text-shadow: 2px 2px 2px $shadow;
|
||||
|
||||
$popover-border-color: transparentize(
|
||||
$_border-color,
|
||||
max(($border-opacity - 1) / 100, 0)
|
||||
);
|
||||
$popover-padding: $padding * $popover-padding-multiplier;
|
||||
$popover-radius: if($radii == 0, 0, $radii + $popover-padding);
|
||||
|
||||
$wm-gaps: floor($spacing * $wm-gaps-multiplier);
|
||||
|
||||
$shader-fg: #fff;
|
||||
|
||||
* {
|
||||
font-size: $font-size;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
window#about {
|
||||
@include unset;
|
||||
|
||||
.window-content {
|
||||
@include floating-widget;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
min-width: 200px;
|
||||
min-height: 200px;
|
||||
background-size: cover;
|
||||
border: $border;
|
||||
margin: $spacing 0;
|
||||
}
|
||||
|
||||
.labels {
|
||||
.title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: $spacing;
|
||||
margin-bottom: $spacing * 2;
|
||||
border-radius: $radii;
|
||||
background-color: $widget-bg;
|
||||
color: $accent;
|
||||
padding: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding-bottom: $popover-padding;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radii $radii 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 $radii $radii;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dont-show {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
|
||||
image {
|
||||
font-size: 1.4em;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
window#applauncher .window-content {
|
||||
@include floating_widget;
|
||||
|
||||
entry {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
margin-bottom: $spacing;
|
||||
|
||||
label,
|
||||
image {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
min-height: 1px;
|
||||
background-color: $hover;
|
||||
}
|
||||
|
||||
scrolledwindow {
|
||||
@include scrollable;
|
||||
min-width: $applauncher-width;
|
||||
min-height: $applauncher-height;
|
||||
}
|
||||
|
||||
button.app-item {
|
||||
@include button($flat: true, $reactive: false);
|
||||
> box {
|
||||
@include spacing(0.5);
|
||||
}
|
||||
transition: $transition;
|
||||
padding: $padding;
|
||||
|
||||
label {
|
||||
transition: $transition;
|
||||
|
||||
&.title {
|
||||
color: $fg-color;
|
||||
}
|
||||
|
||||
&.description {
|
||||
color: transparentize($fg-color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.title {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
image {
|
||||
-gtk-icon-shadow: 2px 2px $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize($accent, 0.5);
|
||||
border-radius: $radii;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
|
||||
.title {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
283
modules/home-manager/desktops/hyprland/ags/scss/widgets/bar.scss
Normal file
283
modules/home-manager/desktops/hyprland/ags/scss/widgets/bar.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
$bar-spacing: $spacing / 2;
|
||||
$button-radius: if(
|
||||
$bar-style == "floating",
|
||||
max(0, $radii - $bar-spacing),
|
||||
$radii
|
||||
);
|
||||
|
||||
@mixin panel-button($flat: $bar-flat-buttons, $reactive: true) {
|
||||
@include unset;
|
||||
|
||||
@if $bar-style == "separated" {
|
||||
transition: $transition;
|
||||
|
||||
> * {
|
||||
@include floating-widget;
|
||||
border-radius: $radii;
|
||||
margin: $wm-gaps $bar-spacing;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
color: $hover-fg;
|
||||
|
||||
@if $drop-shadow {
|
||||
box-shadow:
|
||||
0 0 min(6px, $spacing/2) 0 $shadow,
|
||||
inset 0 0 0 99px $hover;
|
||||
} @else {
|
||||
box-shadow: inset 0 0 0 99px $hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active > *,
|
||||
&.active > * {
|
||||
label,
|
||||
image {
|
||||
color: $accent-fg;
|
||||
}
|
||||
background-image: $active-gradient;
|
||||
background-color: $accent;
|
||||
}
|
||||
} @else {
|
||||
@include accs-button($flat, $reactive);
|
||||
|
||||
> * {
|
||||
border-radius: $button-radius;
|
||||
margin: $bar-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
image {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> * {
|
||||
padding: $padding * 0.4 $padding * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
@if $bar-style == "normal" {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
@if not $screen-corners and $bar-style == "normal" {
|
||||
@if $bar-position == "bottom" {
|
||||
border-top: $border;
|
||||
} @else {
|
||||
border-bottom: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@if $bar-style == "floating" {
|
||||
@include floating-widget;
|
||||
border-radius: $radii;
|
||||
margin: $wm-gaps;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@if $bar-style == "separated" {
|
||||
> .end > button:last-child > * {
|
||||
margin-right: $wm-gaps;
|
||||
}
|
||||
|
||||
> .start > button:first-child > * {
|
||||
margin-left: $wm-gaps;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
@include panel-button;
|
||||
}
|
||||
|
||||
.tray-item,
|
||||
.color-picker {
|
||||
@include panel-button($flat: true);
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: transparentize($fg-color, 0.86);
|
||||
border-radius: $radii;
|
||||
min-height: 5px;
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
label {
|
||||
color: transparentize($accent, 0.2);
|
||||
}
|
||||
&:hover label {
|
||||
color: $accent;
|
||||
}
|
||||
&:active label,
|
||||
&.active label {
|
||||
color: $accent-fg;
|
||||
}
|
||||
}
|
||||
|
||||
.powermenu,
|
||||
.recorder {
|
||||
image {
|
||||
color: transparentize($red, 0.3);
|
||||
}
|
||||
&:hover image {
|
||||
color: transparentize($red, 0.15);
|
||||
}
|
||||
&:active image {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.focused-client > box > box,
|
||||
.quicksettings > box > box {
|
||||
@include spacing(
|
||||
$spacing: if($bar-spacing == 0, $padding / 2, $bar-spacing)
|
||||
);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-not-notation */
|
||||
.quicksettings:not(.active):not(:active) {
|
||||
.bluetooth {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.battery {
|
||||
&.low {
|
||||
color: $red;
|
||||
}
|
||||
&.charged,
|
||||
&.charging {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
&.spotify image {
|
||||
color: $green;
|
||||
}
|
||||
&.firefox image {
|
||||
color: $orange;
|
||||
}
|
||||
&.mpv image {
|
||||
color: $magenta;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications {
|
||||
image {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.battery-bar {
|
||||
.font-icon {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
@if $battery-bar-full {
|
||||
> box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
image,
|
||||
.font-icon {
|
||||
margin-right: $bar-spacing * 0.5;
|
||||
}
|
||||
|
||||
levelbar trough {
|
||||
@include widget;
|
||||
min-width: $battery-bar-width;
|
||||
min-height: $battery-bar-height;
|
||||
|
||||
block.filled {
|
||||
border-radius: max($radii - $border-width, 0);
|
||||
background-image: $active-gradient;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color($color) {
|
||||
image,
|
||||
label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
block.filled {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$color,
|
||||
lighten($color, 6%)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
@include color($yellow);
|
||||
}
|
||||
.low {
|
||||
@include color($red);
|
||||
}
|
||||
.charging {
|
||||
@include color($green);
|
||||
}
|
||||
&:active {
|
||||
@include color($accent-fg);
|
||||
}
|
||||
|
||||
.whole-button {
|
||||
label {
|
||||
color: $fg-color;
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
trough,
|
||||
block.filled {
|
||||
border-radius: $button-radius;
|
||||
}
|
||||
|
||||
@if $bar-style == "separated" {
|
||||
trough {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspaces button {
|
||||
all: unset;
|
||||
|
||||
.indicator {
|
||||
font-size: 0;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
border-radius: $radii * 0.6;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
margin: 0 $padding/2;
|
||||
transition: $transition/2;
|
||||
background-color: transparentize($fg-color, 0.8);
|
||||
}
|
||||
|
||||
&.occupied .indicator {
|
||||
background-color: transparentize($fg-color, 0.2);
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
&:hover .indicator {
|
||||
box-shadow: inset 0 0 0 10px transparentize($fg-color, 0.8);
|
||||
}
|
||||
|
||||
&.active .indicator,
|
||||
&:active .indicator {
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
&.active .indicator {
|
||||
min-width: 24px;
|
||||
min-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
@mixin calendar {
|
||||
@include widget;
|
||||
padding: $padding * 2 $padding * 2 0;
|
||||
|
||||
calendar {
|
||||
all: unset;
|
||||
|
||||
&.button {
|
||||
@include button($flat: true);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
box-shadow:
|
||||
inset 0 -8px 0 0 transparentize($accent, 0.5),
|
||||
inset 0 0 0 1px $accent;
|
||||
border-radius: $radii * 0.6;
|
||||
}
|
||||
|
||||
&.header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: transparentize($fg-color, 0.5);
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background-color: transparent;
|
||||
color: transparentize($accent, 0.5);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
color: transparentize($fg-color, 0.9);
|
||||
}
|
||||
font-size: 1.1em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
window#dashboard .window-content {
|
||||
@include floating-widget;
|
||||
|
||||
.notifications {
|
||||
min-width: $notifications-width;
|
||||
|
||||
.header {
|
||||
margin-bottom: $spacing;
|
||||
margin-right: $spacing;
|
||||
|
||||
> label {
|
||||
margin-left: $radii / 2;
|
||||
}
|
||||
|
||||
button {
|
||||
@include button;
|
||||
padding: $padding/2 $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-scrollable {
|
||||
@include scrollable;
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
.notification {
|
||||
@include notification;
|
||||
|
||||
> box {
|
||||
@include widget;
|
||||
padding: $padding;
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
image {
|
||||
font-size: 7em;
|
||||
}
|
||||
label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: $popover-border-color;
|
||||
min-width: 2px;
|
||||
border-radius: $radii;
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
.datemenu,
|
||||
.system-info {
|
||||
@include spacing;
|
||||
}
|
||||
|
||||
.clock-box {
|
||||
padding: $padding;
|
||||
|
||||
.clock {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.uptime {
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
@include calendar;
|
||||
}
|
||||
|
||||
.circular-progress-box {
|
||||
@include widget;
|
||||
padding: $padding;
|
||||
|
||||
.circular-progress {
|
||||
min-height: $sys-info-size;
|
||||
min-width: $sys-info-size;
|
||||
margin: $padding/2;
|
||||
font-size: $padding;
|
||||
background-color: $bg-color;
|
||||
color: $accent;
|
||||
|
||||
image {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
window.corner .corner {
|
||||
background-color: $bg-color;
|
||||
border-radius: $radii * 2;
|
||||
min-width: 2px;
|
||||
min-height: 2px;
|
||||
}
|
||||
|
||||
window.desktop {
|
||||
@if $bar-style == "normal" {
|
||||
border-radius: if($screen-corners, $radii * 2, 0);
|
||||
box-shadow: inset 0 0 $wm-gaps / 2 0 $shadow;
|
||||
}
|
||||
|
||||
.clock-box-shadow {
|
||||
border: 5px solid $wallpaper-fg;
|
||||
border-radius: $radii;
|
||||
|
||||
.clock-box {
|
||||
border-radius: max($radii - 5px, 0);
|
||||
padding: 0 14px;
|
||||
|
||||
.clock {
|
||||
color: $wallpaper-fg;
|
||||
font-size: 140px;
|
||||
font-family: $mono-font;
|
||||
}
|
||||
|
||||
.separator-box {
|
||||
padding: 24px 12px;
|
||||
|
||||
separator {
|
||||
border-radius: $radii;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background-color: $wallpaper-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
color: $wallpaper-fg;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@if $drop-shadow {
|
||||
.clock-box-shadow,
|
||||
separator {
|
||||
box-shadow: 2px 2px 2px 0 $shadow;
|
||||
}
|
||||
|
||||
.clock-box {
|
||||
box-shadow: inset 2px 2px 2px 0 $shadow;
|
||||
}
|
||||
|
||||
label {
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
} @else {
|
||||
.clock-box-shadow {
|
||||
box-shadow:
|
||||
0 0 0 $border-width $border-color,
|
||||
inset 0 0 0 $border-width $border-color;
|
||||
}
|
||||
|
||||
separator {
|
||||
border: $border;
|
||||
}
|
||||
|
||||
label {
|
||||
@include text-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-menu {
|
||||
image {
|
||||
margin-left: -14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@mixin dock($spacing: $spacing * 0.7) {
|
||||
separator {
|
||||
border-radius: $radii;
|
||||
background-color: transparentize($fg-color, 0.8);
|
||||
margin: 0 $spacing;
|
||||
min-width: 2px;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
@include accs-button($flat: true);
|
||||
|
||||
.box {
|
||||
margin: $spacing / 2;
|
||||
}
|
||||
|
||||
image {
|
||||
margin: $padding;
|
||||
|
||||
@if $color-scheme == "light" {
|
||||
-gtk-icon-shadow: $text-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
background-color: $fg-color;
|
||||
border-radius: $radii;
|
||||
margin-bottom: $padding/2;
|
||||
|
||||
&.focused {
|
||||
background-image: $active-gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.floating-dock .dock {
|
||||
@include dock;
|
||||
@include floating-widget;
|
||||
border-radius: if($radii == 0, 0, $radii + $spacing / 2);
|
||||
padding: $spacing / 2;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
window.lockscreen {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
|
||||
.avatar {
|
||||
@include widget;
|
||||
border-radius: $radii * 2;
|
||||
min-height: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include floating-widget;
|
||||
padding: $spacing * 4;
|
||||
}
|
||||
|
||||
spinner {
|
||||
margin-top: $spacing * 2;
|
||||
}
|
||||
|
||||
entry {
|
||||
@include button;
|
||||
margin-top: $spacing * 2;
|
||||
padding: $spacing;
|
||||
min-height: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
@mixin player-color($color) {
|
||||
button {
|
||||
.shuffle.enabled {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.loop {
|
||||
&.playlist,
|
||||
&.track {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.position-slider:hover trough {
|
||||
background-color: transparentize($color, 0.5);
|
||||
}
|
||||
|
||||
.player-icon {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media() {
|
||||
@include widget;
|
||||
|
||||
label {
|
||||
color: $shader-fg;
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
.blurred-cover,
|
||||
.cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: $radii * 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cover {
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
box-shadow: 2px 2px 2px 0 $shadow;
|
||||
margin: $padding;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.labels {
|
||||
margin-top: $padding;
|
||||
|
||||
label {
|
||||
font-size: 1.1em;
|
||||
text-shadow: $text-shadow;
|
||||
|
||||
&.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.position-slider {
|
||||
@include slider(
|
||||
$width: 0.4em,
|
||||
$slider: false,
|
||||
$gradient: linear-gradient($shader-fg, $shader-fg),
|
||||
$radii: 0
|
||||
);
|
||||
margin-bottom: $padding/2;
|
||||
|
||||
trough {
|
||||
border: none;
|
||||
background-color: transparentize($shader-fg, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
margin: -$padding/2 $padding $padding/2;
|
||||
|
||||
image {
|
||||
-gtk-icon-shadow: $text-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.controls button {
|
||||
@include unset;
|
||||
|
||||
label {
|
||||
font-size: 2em;
|
||||
color: transparentize($shader-fg, 0.2);
|
||||
transition: $transition;
|
||||
|
||||
&.shuffle,
|
||||
&.loop {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover label {
|
||||
color: transparentize($shader-fg, 0.1);
|
||||
}
|
||||
|
||||
&:active label {
|
||||
color: $shader-fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.spotify {
|
||||
@include player-color($green);
|
||||
}
|
||||
&.firefox {
|
||||
@include player-color($orange);
|
||||
}
|
||||
&.mpv {
|
||||
@include player-color($magenta);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
@mixin notification() {
|
||||
&.critical > box {
|
||||
box-shadow: inset 0 0 0.5em 0 $red;
|
||||
}
|
||||
|
||||
&:hover button.close-button {
|
||||
@include button-hover;
|
||||
background-color: transparentize($red, 0.5);
|
||||
}
|
||||
|
||||
.content {
|
||||
.title {
|
||||
margin-right: $spacing;
|
||||
color: $fg-color;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.9em;
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: $radii * 0.8;
|
||||
margin-right: $spacing;
|
||||
|
||||
&.img {
|
||||
border: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
box.actions {
|
||||
@include spacing(0.5);
|
||||
margin-top: $spacing;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
border-radius: $radii * 0.8;
|
||||
font-size: 1.2em;
|
||||
padding: $padding * 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
button.close-button {
|
||||
@include button($flat: true);
|
||||
margin-left: $spacing / 2;
|
||||
border-radius: $radii * 0.8;
|
||||
min-width: 1.2em;
|
||||
min-height: 1.2em;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($red, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-image: linear-gradient($red, $red);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.notifications {
|
||||
@include unset;
|
||||
|
||||
.notification {
|
||||
@include notification;
|
||||
|
||||
> box {
|
||||
@include floating-widget;
|
||||
border-radius: $radii;
|
||||
}
|
||||
|
||||
.description {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
window.indicator .progress {
|
||||
@include floating-widget;
|
||||
padding: $padding / 2;
|
||||
border-radius: if($radii == 0, 0, $radii + $padding / 2);
|
||||
|
||||
.fill {
|
||||
border-radius: $radii;
|
||||
background-color: $accent;
|
||||
color: $accent-fg;
|
||||
|
||||
image {
|
||||
-gtk-icon-transform: scale(0.7);
|
||||
}
|
||||
|
||||
.font-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
window#overview .window-content {
|
||||
@include floating-widget;
|
||||
@include spacing;
|
||||
|
||||
.workspace {
|
||||
&.active > widget {
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
> widget {
|
||||
@include widget;
|
||||
border-radius: if($radii == 0, 0, $radii + $padding);
|
||||
|
||||
&:drop(active) {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client {
|
||||
@include button;
|
||||
border-radius: $radii;
|
||||
margin: $padding;
|
||||
|
||||
&.hidden {
|
||||
@include hidden;
|
||||
transition: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
window#powermenu,
|
||||
window#verification {
|
||||
.shader {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
window#verification .window-content {
|
||||
@include floating-widget;
|
||||
min-width: 300px;
|
||||
min-height: 100px;
|
||||
|
||||
.text-box {
|
||||
.title {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: transparentize($fg-color, 0.1);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@include spacing;
|
||||
margin-top: $padding;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
font-size: 1.5em;
|
||||
padding: $padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window#powermenu .window-content {
|
||||
@include floating-widget;
|
||||
@include spacing(2);
|
||||
padding: $popover-padding + $spacing * 1.5;
|
||||
border-radius: if(
|
||||
$radii == 0,
|
||||
0,
|
||||
$popover-radius + ($popover-padding + $spacing * 1.5)
|
||||
);
|
||||
|
||||
button {
|
||||
@include unset;
|
||||
|
||||
image {
|
||||
@include button;
|
||||
border-radius: $popover-radius;
|
||||
min-width: 1.7em;
|
||||
min-height: 1.7em;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
label,
|
||||
image {
|
||||
color: transparentize($fg-color, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
image {
|
||||
@include button-hover;
|
||||
}
|
||||
label {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
&:focus image {
|
||||
@include button-focus;
|
||||
}
|
||||
&:active image {
|
||||
@include button-active;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
label {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
window#quicksettings .window-content {
|
||||
@include floating-widget;
|
||||
@include spacing;
|
||||
|
||||
.avatar {
|
||||
@include widget;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include spacing($rec: true);
|
||||
|
||||
button,
|
||||
.uptime,
|
||||
.battery {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
font-weight: bold;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
|
||||
image {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.battery {
|
||||
@include spacing($multiplier: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.battery-progress {
|
||||
label {
|
||||
color: $accent-fg;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.charging label {
|
||||
font-size: $padding * 2;
|
||||
}
|
||||
|
||||
&.half label {
|
||||
color: $fg-color;
|
||||
}
|
||||
|
||||
progressbar {
|
||||
@include slider($width: $padding * 3.6);
|
||||
}
|
||||
|
||||
&.low progressbar {
|
||||
@include slider(
|
||||
$width: $padding * 3.6,
|
||||
$gradient: linear-gradient(to right, $red, $red)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.sliders-box {
|
||||
@include widget;
|
||||
@include spacing($rec: true);
|
||||
@include spacing(0);
|
||||
padding: $padding;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2;
|
||||
}
|
||||
|
||||
scale {
|
||||
@include slider;
|
||||
margin-left: $spacing * -0.5;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: $spacing 0;
|
||||
background-color: $bg-color;
|
||||
border: $border-width solid $popover-border-color;
|
||||
border-radius: $radii;
|
||||
}
|
||||
}
|
||||
|
||||
.mixer-item {
|
||||
scale {
|
||||
@include slider($width: 7px);
|
||||
}
|
||||
image {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
@include spacing($rec: true);
|
||||
}
|
||||
|
||||
.menu {
|
||||
@include unset;
|
||||
@include widget;
|
||||
@include spacing($rec: true);
|
||||
padding: $padding;
|
||||
margin-top: $spacing;
|
||||
|
||||
.title {
|
||||
@include spacing(0.5);
|
||||
}
|
||||
|
||||
separator {
|
||||
margin: 0 $radii / 2;
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2;
|
||||
}
|
||||
|
||||
switch {
|
||||
@include switch;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
@include button;
|
||||
font-weight: bold;
|
||||
|
||||
.label-box {
|
||||
@include spacing(0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $accent;
|
||||
|
||||
label,
|
||||
image {
|
||||
color: $accent-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple-toggle {
|
||||
@include button;
|
||||
padding: $padding $padding * 1.1;
|
||||
}
|
||||
|
||||
.media {
|
||||
@include spacing;
|
||||
|
||||
.player {
|
||||
@include media;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
window#settings-dialog {
|
||||
background-color: $bg-color;
|
||||
|
||||
.page {
|
||||
@include scrollable;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin: $spacing;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
@include spacing($rec: true);
|
||||
background-color: $widget-bg;
|
||||
border-right: $border;
|
||||
padding: $spacing / 2;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2 $padding * 2;
|
||||
}
|
||||
|
||||
scrolledwindow {
|
||||
@include scrollable;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background-color: $widget-bg;
|
||||
border-right: $border;
|
||||
border-bottom: $border;
|
||||
padding: $spacing / 2;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2 $padding;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
margin-left: $spacing / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
background-color: $widget-bg;
|
||||
border-right: $border;
|
||||
border-top: $border;
|
||||
padding: $spacing / 2;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2 $padding;
|
||||
}
|
||||
}
|
||||
|
||||
entry.search {
|
||||
@include button;
|
||||
border-radius: 0;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include widget;
|
||||
border-radius: 0;
|
||||
border-bottom-width: 0;
|
||||
padding: $padding;
|
||||
transition: border-radius 0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 $radii $radii;
|
||||
border-bottom-width: $border-width;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radii $radii 0 0;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: $radii;
|
||||
}
|
||||
|
||||
.overlay-padding {
|
||||
min-height: $font-size * 3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $hover;
|
||||
}
|
||||
|
||||
entry,
|
||||
button {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
switch {
|
||||
@include switch;
|
||||
}
|
||||
|
||||
spinbutton {
|
||||
@include unset;
|
||||
|
||||
entry {
|
||||
border-radius: $radii 0 0 $radii;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
border-radius: 0 $radii $radii 0;
|
||||
}
|
||||
}
|
||||
|
||||
.enum-setter {
|
||||
label {
|
||||
background-color: $widget-bg;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
padding: 0 $padding;
|
||||
}
|
||||
|
||||
button:first-child {
|
||||
border-radius: $radii 0 0 $radii;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
border-radius: 0 $radii $radii 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.id,
|
||||
.note {
|
||||
font-size: 0.8em;
|
||||
color: transparentize($fg-color, $amount: 0.5);
|
||||
}
|
||||
|
||||
.id {
|
||||
font-family: $mono-font;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user