Eww: Modularized and improved CSS

This commit is contained in:
soraefir
2023-11-23 20:46:43 +01:00
parent 5e569bbb48
commit afaed60935
12 changed files with 207 additions and 139 deletions

View File

@ -1,20 +1,26 @@
@import 'css/colors';
@mixin rounding {
/* MIXIN */
@mixin border-radius {
border-radius: $border-radius;
}
@mixin window {
border: $border-width solid $base04;
margin: $gaps-screen $gaps-screen $gaps-screen;
@include rounding;
@mixin border-inactive {
border-width: $border-width;
border-style: solid;
border-color: $base03;
}
@import 'css/sys';
@import 'css/net';
@import 'css/clock';
@import 'css/radio';
@import 'css/powermenu';
@mixin border-active {
border-color: $base04;
}
@mixin test {
}
/* GENERAL */
* {
all: unset;
@ -22,14 +28,6 @@
transition: 200ms ease;
}
.bar {
color: $fg;
label {
font-size: 1.2rem;
}
}
tooltip {
background: $base01;
border: $border-width solid $base04;
@ -43,33 +41,6 @@ tooltip {
.icon,
.icon label { font-family: Material Design Icons; }
.ws {
border-radius: $border-radius;
margin: $gaps-window;
}
.focused {
background-color: $bg1;
border-radius: 1rem;
margin: .3rem;
padding: .25rem;
}
.module {
background: $base01;
border-radius: $border-radius;
border-color: $base03;
border-style: solid;
border-width: $border-width;
border-right-style: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding: $gaps-screen $gaps-window;
margin: $gaps-screen 0;
}
.grey {
background-color: $base02;
}
@ -88,4 +59,74 @@ tooltip {
.blue {
background-color: $base0C;
}
}
/* WINDOW WRAPPER CSS */
.winevent {
background-color: $base01;
color: $base07;
@include border-radius;
@include border-inactive;
}
.winevent:hover {
@include border-active;
}
.wininner {
padding: $gaps-window;
}
.winouter {
margin: $gaps-screen;
}
/* MODULE WRAPPER CSS */
.modevent {
background-color: $base01;
color: $base07;
@include border-radius;
@include border-inactive;
border-right-style: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.modevent:hover {
@include border-active;
}
.modinner {
padding: $gaps-screen 0 $gaps-screen $gaps-window;
}
.modouter {
margin: $gaps-screen 0;
}
/* IMPORTS EXTERNAL */
@import 'css/sys';
@import 'css/net';
@import 'css/clock';
@import 'css/radio';
@import 'css/powermenu';
/* BAR */
.bar label {
font-size: 1.2rem;
}
/* WORKSPACE */
.ws {
border-radius: $border-radius;
margin: $gaps-window;
}
.focused {
background-color: $bg1;
border-radius: 1rem;
margin: .3rem;
padding: .25rem;
}