adapt colors to pywal theming
This commit is contained in:
parent
ea1bab1b44
commit
cb220e41be
@ -1,29 +1,29 @@
|
|||||||
// SCSS Variables
|
// SCSS Variables
|
||||||
// Generated by 'wal'
|
// Generated by 'wal'
|
||||||
$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_144.jpg";
|
$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_217.jpg";
|
||||||
|
|
||||||
// Special
|
// Special
|
||||||
$background: #fdf8f5;
|
$background: #0C1325;
|
||||||
$foreground: #151511;
|
$foreground: #e1e7e9;
|
||||||
$cursor: #151511;
|
$cursor: #e1e7e9;
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
$color0: #fdf8f5;
|
$color0: #0C1325;
|
||||||
$color1: #BC766C;
|
$color1: #6C8FAD;
|
||||||
$color2: #C89175;
|
$color2: #76A6C7;
|
||||||
$color3: #787085;
|
$color3: #9CA3AF;
|
||||||
$color4: #A1778A;
|
$color4: #CCBFB5;
|
||||||
$color5: #C57D82;
|
$color5: #95B7CB;
|
||||||
$color6: #A49296;
|
$color6: #AFCDDC;
|
||||||
$color7: #151511;
|
$color7: #e1e7e9;
|
||||||
$color8: #927f73;
|
$color8: #9da1a3;
|
||||||
$color9: #BC766C;
|
$color9: #6C8FAD;
|
||||||
$color10: #C89175;
|
$color10: #76A6C7;
|
||||||
$color11: #787085;
|
$color11: #9CA3AF;
|
||||||
$color12: #A1778A;
|
$color12: #CCBFB5;
|
||||||
$color13: #C57D82;
|
$color13: #95B7CB;
|
||||||
$color14: #A49296;
|
$color14: #AFCDDC;
|
||||||
$color15: #151511;
|
$color15: #e1e7e9;
|
||||||
$primary: lighten($color4, 20%);
|
$primary: lighten($color4, 20%);
|
||||||
$onPrimary: darken($color2, 20%);
|
$onPrimary: darken($color2, 20%);
|
||||||
$primaryContainer: darken($color2, 10%);
|
$primaryContainer: darken($color2, 10%);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@use '../colors' as *;
|
@use '../colors' as *;
|
||||||
|
|
||||||
window.bar {
|
window.bar {
|
||||||
color: $foreground;
|
color: $onPrimary;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
>box {
|
>box {
|
||||||
@ -11,17 +11,17 @@ window.bar {
|
|||||||
>.inner {
|
>.inner {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
background: $background;
|
background: $primary;
|
||||||
padding: 0.25rem 1rem;
|
padding: 0.25rem 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
* { color: $foreground; }
|
* { color: $onPrimary; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray .item {
|
.tray .item {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: $background;
|
background: $primary;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2,26 +2,30 @@
|
|||||||
|
|
||||||
.launcher {
|
.launcher {
|
||||||
entry {
|
entry {
|
||||||
background: $background;
|
background: $primary;
|
||||||
color: $foreground;
|
color: $onPrimary;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 2px solid $background;
|
outline: 2px solid $onPrimary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.application {
|
.application {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: $background;
|
background: $primary;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transition: background 0.2s ease;
|
transition: background 0.2s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $background;
|
background: $onPrimary;
|
||||||
|
|
||||||
|
box>.name, box>.description {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
image {
|
image {
|
||||||
@ -30,21 +34,24 @@
|
|||||||
|
|
||||||
box {
|
box {
|
||||||
.name {
|
.name {
|
||||||
color: $foreground;
|
color: $onPrimary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
color: $foreground;
|
color: $onPrimary;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.not-found {
|
.not-found {
|
||||||
color: $foreground;
|
background: $primary;
|
||||||
|
color: $onPrimary;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
@ -11,11 +11,14 @@ window.quick_settings {
|
|||||||
>.inner {
|
>.inner {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
background: $background;
|
background: $primary;
|
||||||
padding: 0.75rem 3rem;
|
padding: 0.75rem 3rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
* { color: $foreground; }
|
* {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
color: $onPrimary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@ -25,11 +28,11 @@ window.quick_settings {
|
|||||||
|
|
||||||
window.qs_bluetooth {
|
window.qs_bluetooth {
|
||||||
>.inner {
|
>.inner {
|
||||||
background: $background;
|
background: $primary;
|
||||||
padding: 0.75rem 3rem;
|
padding: 0.75rem 3rem;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
* { color: $foreground; }
|
* { color: $onPrimary; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.device {
|
.device {
|
||||||
@ -42,26 +45,25 @@ window.qs_bluetooth {
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.quick_settings button, window.qs_bluetooth button {
|
window.quick_settings button, window.qs_bluetooth button {
|
||||||
background: $background;
|
transition: all 0.2s ease-in-out;
|
||||||
|
background: $onPrimaryContainer;
|
||||||
border: 2px solid $foreground;
|
border: 2px solid $foreground;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
|
|
||||||
transition: 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $foreground;
|
background: $foreground;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
color: $background;
|
color: $onPrimary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background: $foreground;
|
background: $foreground;
|
||||||
border: 0.5px solid $background;
|
border: 0.5px solid $onPrimary;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
color: $background;
|
color: $onPrimary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,14 @@
|
|||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
popover>contents, calendar {
|
||||||
|
background: $onPrimaryContainer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
image {
|
image {
|
||||||
padding: 0 0.25rem;
|
padding: 0 0.25rem;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user