Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 ags(style): changed styles for dialogs(ask-popup,entry-popup), removed default-styles mixin

Browse Source
This commit is contained in:
retrozinndev
2025-04-21 17:44:05 -03:00
parent 9b473a6a5d
commit c34ab51999
6 changed files with 185 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/style.scss
+78 -11
View File
@@ -2,6 +2,7 @@
@use "./style/wal";
@use "./style/mixins";
@use "./style/functions";
@use "./style/colors";
@use "./style/bar";
@@ -17,15 +18,11 @@
* {
@include mixins.reset-props;
/*&:selected {
/*&:focus {
box-shadow: inset 0 0 0 2px colors.$fg-primary;
}*/
}
window * {
@include mixins.default-styles;
}
entry {
background: colors.$bg-primary;
padding: 10px 9px;
@@ -40,19 +37,23 @@ entry {
}
}
.ask-popup-box, .entry-popup-box {
.custom-dialog-container {
background: colors.$bg-translucent;
padding: 18px;
border-radius: 24px;
& .title {
font-size: 20px;
font-size: 21px;
font-weight: 700;
margin-bottom: 10px;
}
& .buttons {
margin-top: 20px;
& .text {
font-size: 16px;
font-weight: 400;
}
& .options {
& button {
background: colors.$bg-primary;
border-radius: 12px;
@@ -74,8 +75,14 @@ entry {
}
}
&.entry-popup-box entry.password {
font-size: 16px;
&.entry-popup-box entry {
margin-bottom: 10px;
&.password {
font-size: 14px;
font-family: "Adwaita Mono", "Cantarell Mono", "Noto Sans Mono", monospace;
font-weight: 400;
}
}
}
@@ -206,6 +213,66 @@ menu {
}
}
.button-row {
& > button {
background: colors.$bg-secondary;
margin: 0 1px;
padding: 4px 6px;
border-radius: 2px;
&:hover {
background: colors.$bg-tertiary;
}
&:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: 0;
}
&:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-right: 0;
}
}
}
selection {
background: colors.$bg-tertiary;
}
label.nf,
button.nf label {
font-size: 12px;
font-family: "Symbols Nerd Font Mono", "Noto Sans Nerd Font Mono",
"0xProto Nerd Font Mono", "Fira Code Nerd Font Mono",
"Symbols Nerd Font", "Noto Sans Nerd Font", "Fira Code Nerd Font",
"Font Awesome";
}
trough {
background: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
border-radius: 8px;
margin: 2px 0;
}
trough highlight {
background: wal.$color1;
min-height: .9em;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
trough slider {
border-radius: 50%;
margin: -2px 0;
background: wal.$foreground;
margin-left: -1px;
min-width: 1.2em;
min-height: 1.2em;
}
scrollbar trough {
@include mixins.reset-props;
ags/style/_bar.scss
+1 -4
View File
@@ -4,7 +4,6 @@
.bar-container {
@include mixins.reset-props;
@include mixins.default-styles;
padding: 6px;
padding-bottom: 0px;
@@ -18,7 +17,7 @@
// Style widget groups
& > .bar-centerbox > * {
background: colors.$bg-translucent;
background: rgba(colors.$bg-translucent, .6);
padding: 5px;
border-radius: 18px;
@@ -54,8 +53,6 @@
padding: 1px 1px;
& button {
@include mixins.reset-props;
border-radius: 16px;
transition: 80ms linear;
min-width: 12px;
ags/style/_colors.scss
+7 -7
View File
@@ -1,13 +1,13 @@
@use "sass:color";
@use "./wal";
@use "./functions" as funs;
@use "./functions";
$bg-primary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -34%));
$bg-secondary: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -16%));
$bg-tertiary: funs.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%));
$bg-primary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -34%));
$bg-secondary: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -16%));
$bg-tertiary: functions.toRGB(color.adjust($color: $bg-secondary, $lightness: 10%));
$bg-light: wal.$foreground;
$bg-translucent: funs.toRGB(color.change($color: $bg-primary, $alpha: 75%));
$bg-translucent-secondary: funs.toRGB(color.change($color: $bg-translucent, $alpha: 78%));
$bg-translucent: functions.toRGB(color.change($color: $bg-primary, $alpha: 75%));
$bg-translucent-secondary: functions.toRGB(color.change($color: $bg-translucent, $alpha: 78%));
$fg-primary: wal.$foreground;
$fg-light: $bg-primary;
$fg-disabled: funs.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%));
$fg-disabled: functions.toRGB(color.adjust($color: wal.$foreground, $lightness: -11%));
ags/style/_control-center.scss
+41 -22
View File
@@ -6,7 +6,6 @@
.control-center-container {
@include mixins.reset-props;
@include mixins.default-styles;
background: colors.$bg-translucent;
border-radius: 24px;
@@ -104,24 +103,33 @@ box.history {
@include mixins.reset-props;
& > flowbox {
& > flowboxchild .tile-eventbox {
&:hover:not(.toggled) > .tile {
& > flowboxchild .tile {
$radius: 16px;
&:not(.toggled) > .toggle-button {
@include mixins.hover-shadow;
}
&.toggled .toggle-button:hover,
&.toggled button.more:hover {
background: colors.$bg-tertiary;
}
&.toggled > .toggle-button,
&.toggled > button.more {
background: colors.$bg-secondary;
}
&.toggled:hover > .tile {
box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
&.has-more > .toggle-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.toggled > .tile {
background: colors.$bg-secondary;
}
& > .tile {
& > .toggle-button {
background: colors.$bg-primary;
border-radius: 16px;
border-radius: $radius;
& > .content {
& .content {
padding: 8px;
& > .icon {
@@ -141,25 +149,24 @@ box.history {
}
}
}
}
& > .more {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
& > button.more {
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
& label {
font-size: 16px;
}
&:hover {
box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-disabled, $alpha: .4);
}
}
}
}
}
}
.pages > .page {
.tile-pages {
transition: 120ms linear;
& > .page {
background: colors.$bg-secondary;
padding: 14px;
border-radius: 24px;
@@ -167,7 +174,7 @@ box.history {
& .header {
margin-bottom: 12px;
& > .title:first-child {
& .top > .title {
font-size: 20px;
font-weight: 600;
}
@@ -196,6 +203,13 @@ box.history {
border-radius: 12px;
}
& .extra-buttons {
margin-left: 2px;
& > button {
border-radius: 12px;
}
}
&.bluetooth {
button.connected {
background: colors.$bg-tertiary;
@@ -205,4 +219,9 @@ box.history {
margin-bottom: 20px;
}
}
}
&.revealed {
padding-top: 12px;
}
}
ags/style/_mixins.scss
-62
View File
@@ -19,65 +19,3 @@
box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1);
}
}
@mixin default-styles {
.button-row {
& > button {
background: colors.$bg-secondary;
margin: 0 1px;
padding: 4px 6px;
border-radius: 2px;
&:hover {
background: colors.$bg-tertiary;
}
&:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: 0;
}
&:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-right: 0;
}
}
}
selection {
background: colors.$bg-tertiary;
}
label.nf,
button.nf label {
font-size: 12px;
font-family: "Symbols Nerd Font Mono", "Noto Sans Nerd Font Mono",
"0xProto Nerd Font Mono", "Fira Code Nerd Font Mono",
"Symbols Nerd Font", "Noto Sans Nerd Font", "Fira Code Nerd Font",
"Font Awesome";
}
& trough {
background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
border-radius: 8px;
margin: 2px 0;
}
& trough highlight {
background: wal.$color1;
min-height: .9em;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
& trough slider {
border-radius: 50%;
margin: -2px 0;
background: wal.$foreground;
margin-left: -1px;
min-width: 1.2em;
min-height: 1.2em;
}
}
ags/style/_wal.scss
+20 -20
View File
@@ -1,26 +1,26 @@
// SCSS Variables
// Generated by 'wal'
$wallpaper: "/home/joaov/wallpapers/Frieren Underwater.jpg";
$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg";
// Special
$background: #0a1d30;
$foreground: #c1c6cb;
$cursor: #c1c6cb;
$background: #0d101f;
$foreground: #c2c3c7;
$cursor: #c2c3c7;
// Colors
$color0: #0a1d30;
$color1: #13A9D8;
$color2: #4EAED3;
$color3: #2AC9EB;
$color4: #97A0AB;
$color5: #D1B8B5;
$color6: #9CB6CD;
$color7: #93989d;
$color8: #606b76;
$color9: #6eadc0;
$color10: #8abacd;
$color11: #84bdca;
$color12: #9cb2d4;
$color13: #e3c2bf;
$color14: #afc8dd;
$color15: #c1c6cb;
$color0: #0d101f;
$color1: #586C8C;
$color2: #649D93;
$color3: #60AFB7;
$color4: #96ABA0;
$color5: #A3CCA4;
$color6: #CFD8B4;
$color7: #90929b;
$color8: #5c6071;
$color9: #698abf;
$color10: #79c5b9;
$color11: #85c4ca;
$color12: #9bd4b4;
$color13: #b3deb3;
$color14: #dde4c2;
$color15: #c2c3c7;