Chillcraft/Colloid-gtk-theme
3
0
Fork 0
mirror of https://github.com/vinceliuice/Colloid-gtk-theme.git synced 2025-10-09 01:08:34 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fixed issues

Browse Source
This commit is contained in:
vinceliuice
2022-10-10 13:03:51 +08:00
parent afa32746d4
commit cd2ea34ee8
9 changed files with 453 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/sass/gtk/_colors-public.scss
View File

@@ -121,11 +121,11 @@ FIXME this is really an API */
// Budgie-desktop specific indicator colours // Budgie-desktop specific indicator colours
// unfocused window 'dot(s)' // unfocused window 'dot(s)'
@define-color budgie_tasklist_indicator_color #{"" + white}; @define-color budgie_tasklist_indicator_color #{"" + $track};
// focused window 'line' // focused window 'line'
@define-color budgie_tasklist_indicator_color_active #{"" + white}; @define-color budgie_tasklist_indicator_color_active #{"" + $primary};
// group-ed and unfocused window 'line(s)' // group-ed and unfocused window 'line(s)'
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix(white, $panel, 54%)}; @define-color budgie_tasklist_indicator_color_active_window #{"" + mix($primary, $panel, 54%)};
// attention 'dot' // attention 'dot'
// FIXME: we can't fill whole widget backgrounds with our suggestion colour // FIXME: we can't fill whole widget backgrounds with our suggestion colour
// because of lacking specific style-class on 'needs_attention' state, // because of lacking specific style-class on 'needs_attention' state,

43
src/sass/gtk/_common-3.0.scss
View File

@@ -190,11 +190,18 @@ flowbox {
rubberband { @extend rubberband; } rubberband { @extend rubberband; }
flowboxchild { flowboxchild {
padding: 4px; padding: $space-size / 2;
border-radius: $corner-radius; border-radius: $corner-radius;
color: $text; color: $text;
&:selected { @extend %selected_items_color; } &:selected { @extend %selected_items_color; }
button.osd.remove-button {
min-height: 28px;
min-width: 28px;
padding: 0;
margin: $space-size;
}
} }
} }
@@ -532,10 +539,6 @@ button {
&.image-button { &.image-button {
min-width: 24px; min-width: 24px;
padding: ($medium-size - 24px) / 2; padding: ($medium-size - 24px) / 2;
// @extend %circular-button;
// &.destructive-action { border-radius: $corner-radius; }
} }
// NOTE: Some image-only buttons use this as well // NOTE: Some image-only buttons use this as well
@@ -576,7 +579,7 @@ button {
&:not(:only-child) { // specificity bump &:not(:only-child) { // specificity bump
border-radius: $corner-radius; border-radius: $corner-radius;
&.image-button:not(.text-button) { border-radius: $circular-radius; } // &.image-button:not(.text-button) { border-radius: $circular-radius; }
} }
// &:focus { box-shadow: inset 0 0 0 9999px $overlay-focus; } // &:focus { box-shadow: inset 0 0 0 9999px $overlay-focus; }
@@ -586,18 +589,29 @@ button {
&.osd { &.osd {
min-width: $small-size; min-width: $small-size;
min-width: $small-size; min-width: $small-size;
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2; padding: ($medium-size - 24px) / 2;
background-color: $primary; box-shadow: none;
color: on($primary); background-color: rgba(black, 0.35);
color: white;
&:focus {
box-shadow: inset 0 0 0 2px rgba(black, 0.1);
color: white;
}
&:hover { &:hover {
background-color: mix(on($primary), $primary, 12%); background-color: rgba(black, 0.45);
color: on($primary); color: white;
} }
&:active { &:active {
background-color: mix(on($primary), $primary, 26%); background-color: rgba(black, 0.65);
color: on($primary); color: white;
}
&:disabled {
background-color: rgba(black, 0.15);
color: rgba(white, 0.35);
} }
&.image-button, &.circular { &.image-button, &.circular {
@@ -605,8 +619,6 @@ button {
> image { padding: 0; } > image { padding: 0; }
} }
&:disabled { opacity: 0; }
} }
// overlay / OSD style // overlay / OSD style
@@ -822,7 +834,6 @@ spinbutton {
&:disabled { color: $text-disabled; } &:disabled { color: $text-disabled; }
entry { entry {
// @extend %entry_raised;
margin: 0; margin: 0;
border-image: none; border-image: none;
border-radius: 0; border-radius: 0;

498
src/sass/gtk/_common-4.0.scss
View File

@@ -94,8 +94,8 @@ gridview {
} }
box { //cells box { //cells
border-spacing: 8px; //label separation border-spacing: $space-size + 2px; //label separation
margin: 12px; margin: $space-size * 2;
} }
} }
} }
@@ -114,13 +114,17 @@ label {
> selection { @extend %selected_items_primary; } > selection { @extend %selected_items_primary; }
&:disabled { &:disabled {
opacity: 1;
color: $text-disabled; color: $text-disabled;
// selection { color: $text-disabled; } // selection { color: $text-disabled; }
headerbar &, headerbar &,
tab &, tab &,
button & { color: inherit; } button & {
color: inherit;
opacity: 1;
}
} }
&.osd { &.osd {
@@ -143,7 +147,7 @@ window.assistant {
.sidebar label { .sidebar label {
min-height: $medium-size; min-height: $medium-size;
padding: 0 12px; padding: 0 $space-size * 2;
color: $text-disabled; color: $text-disabled;
font-weight: 500; font-weight: 500;
@@ -169,30 +173,6 @@ window.assistant {
} }
/**********
* Toasts *
**********/
toast {
margin: $space-size * 2;
margin-bottom: $space-size * 4;
border-radius: $circular-radius;
border-spacing: $space-size;
padding: $space-size;
box-shadow: $shadow-z6, inset 0 1px highlight($popover);
background-color: $popover;
color: on($popover);
border: none;
&:dir(ltr) { padding-left: $space-size * 2; }
&:dir(rtl) { padding-right: $space-size * 2; }
> label {
margin: 0 $space-size;
}
}
/********************* /*********************
* Spinner Animation * * Spinner Animation *
*********************/ *********************/
@@ -277,7 +257,7 @@ entry {
&:focus-within { @include entry(checked); } &:focus-within { @include entry(checked); }
&:drop(active) { @include entry(hover); } &:drop(active), &:hover:not(:focus-within) { @include entry(hover); }
&:disabled { @include entry(disabled); } &:disabled { @include entry(disabled); }
@@ -318,13 +298,39 @@ entry {
// entry error and warning style // entry error and warning style
@each $e_type, $e_color in (error, $error), @each $e_type, $e_color in (error, $error),
(warning, $warning) { (warning, $warning),
(success, $success) {
&.#{$e_type} { &.#{$e_type} {
@include entry(normal, $e_color); @include entry(normal, $e_color);
outline: none;
&:focus-within { @include entry(checked, $e_color); } &:focus-within {
@include entry(checked, $e_color);
outline: none;
}
&:disabled { @include entry(disabled, $e_color); } &:drop(active), &:hover:not(:focus-within) {
@include entry(hover, $e_color);
outline: none;
}
&:disabled {
@include entry(disabled, $e_color);
outline: none;
}
> text > selection {
background-color: rgba($e_color, 0.25);
color: $e_color;
}
image {
color: rgba($e_color, 0.75);
&:hover, &:active { color: $e_color; }
&:disabled { color: rgba($e_color, 0.35); }
}
} }
} }
} }
@@ -343,38 +349,6 @@ entry {
.linked.vertical > & { @extend %linked-vertical; } .linked.vertical > & { @extend %linked-vertical; }
} }
%entry_raised {
border-radius: $corner-radius;
@include entry(raised-normal);
&:focus-within { @include entry(raised-focus); }
&:drop(active) { @include entry(raised-hover); }
&:disabled { @include entry(raised-disabled); }
// entry error and warning style
@each $e_type, $e_color in (error, $error),
(warning, $warning) {
&.#{$e_type} {
@include entry(raised-normal, $e_color);
&:focus-within { @include entry(raised-focus, $e_color); }
&:disabled { @include entry(raised-disabled, $e_color); }
image {
color: on($e_color, secondary);
&:hover, &:active { color: on($e_color); }
&:disabled { color: on($e_color, disabled); }
}
}
}
}
treeview entry { treeview entry {
&.flat, & { &.flat, & {
background-color: $base; background-color: $base;
@@ -647,21 +621,34 @@ button {
// big standalone buttons like in Documents pager // big standalone buttons like in Documents pager
&.osd { &.osd {
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2; min-width: $small-size;
min-width: $small-size;
padding: ($medium-size - 24px) / 2;
box-shadow: none; box-shadow: none;
@include button(normal); background-color: rgba(black, 0.35);
color: white;
&:focus { @include button(flat-focus); } &:focus {
box-shadow: inset 0 0 0 2px rgba(black, 0.1);
color: white;
}
&:hover { @include button(flat-hover); } &:hover {
background-color: rgba(black, 0.45);
color: white;
}
&:active { @include button(flat-active); } &:active {
background-color: rgba(black, 0.65);
color: white;
}
&:disabled { @include button(flat-disabled); } &:disabled {
background-color: rgba(black, 0.15);
color: rgba(white, 0.35);
}
&.image-button { padding: ($large-size - 24px) / 2; } // &.image-button { padding: ($large-size - 24px) / 2; }
&:disabled { opacity: 0; }
} }
// Suggested and Destructive Action buttons // Suggested and Destructive Action buttons
@@ -1010,23 +997,6 @@ buttoncontent {
} }
} }
/* menu buttons */
modelbutton.flat {
min-height: $menuitem-size;
padding: 0 $space-size * 1.5;
border-radius: $corner-radius;
color: $text;
@extend %button-flat-simple;
&:selected { @extend %selected_items; }
}
modelbutton.flat arrow {
&.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
&.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
}
button.color { button.color {
min-height: $small-size; min-height: $small-size;
min-width: $small-size; min-width: $small-size;
@@ -1317,9 +1287,8 @@ button.combo:only-child {
/************ /************
* Toolbars * * Toolbars *
************/ ************/
.toolbar, .toolbar {
toolbar { padding: $space-size;
padding: $space-size / 2 $space-size;
background-color: $background; background-color: $background;
border-spacing: $space-size; border-spacing: $space-size;
@@ -1332,7 +1301,7 @@ toolbar {
@at-root %toolbar_osd, &.osd { @at-root %toolbar_osd, &.osd {
transition: $transition-shadow; transition: $transition-shadow;
padding: $space-size; padding: $space-size;
border-radius: $corner-radius; border-radius: $corner-radius + $space-size;
box-shadow: $shadow-z4, inset 0 1px highlight($surface); box-shadow: $shadow-z4, inset 0 1px highlight($surface);
background-color: $surface; background-color: $surface;
color: $text; color: $text;
@@ -1359,25 +1328,44 @@ toolbar {
&.horizontal > separator { margin: 2px; } &.horizontal > separator { margin: 2px; }
&.vertical > separator { margin: 2px; } &.vertical > separator { margin: 2px; }
&:not(.inline-toolbar):not(.osd) { // add vertical margins to common widgets on toolbars to avoid them spanning
scale, // the whole height
entry,
spinbutton,
splitbutton,
separator:not(.sidebar),
button,
menubutton,
scalebutton {
margin-top: 0;
margin-bottom: 0;
}
// Reset margins for buttons inside menubutton
menubutton > button,
splitbutton > button,
splitbutton > menubutton,
scalebutton > button {
margin-top: 0;
margin-bottom: 0;
}
switch {
margin-top: 4px;
margin-bottom: 4px;
}
spinbutton {
entry, entry,
spinbutton, button { margin: 0; }
button { margin: 2px; } }
.linked entry, // Reset styles for popovers
.linked spinbutton, popover {
.linked button { &.menu separator:not(.sidebar) {
&:not(:first-child) { margin-left: 0; } margin-top: $space-size;
&:not(:last-child) { margin-right: 0; } margin-bottom: $space-size;
} }
spinbutton {
entry,
button { margin: 0; }
}
switch { margin: 2px + $space-size 2px; }
} }
} }
@@ -1469,6 +1457,12 @@ headerbar {
&:disabled { color: $titlebar-text-secondary-disabled; } &:disabled { color: $titlebar-text-secondary-disabled; }
} }
&.flat, &.flat:backdrop {
background: none;
box-shadow: none;
transition: none;
}
.title { .title {
padding: 0 $space-size * 2; padding: 0 $space-size * 2;
font-weight: bold; font-weight: bold;
@@ -1498,10 +1492,6 @@ headerbar {
background-color: $titlebar-divider; background-color: $titlebar-divider;
} }
box.vertical & {
background-color: $titlebar;
}
> windowhandle > box { > windowhandle > box {
padding: 0 $space-size / 2; padding: 0 $space-size / 2;
@@ -1558,6 +1548,7 @@ headerbar {
&:disabled { &:disabled {
background-color: $titlebar-fill; background-color: $titlebar-fill;
color: $titlebar-text-disabled; color: $titlebar-text-disabled;
label { opacity: 1; }
} }
} }
@@ -1658,87 +1649,6 @@ window.devel {
} }
} }
viewswitcher {
margin: 0;
&.wide {
border-spacing: $space-size / 2;
}
&.narrow button.toggle {
border-radius: 0;
margin: 0;
&:focus-within, &:focus { box-shadow: none; }
}
button.toggle {
font-weight: bold;
padding: 0;
> stack > box {
&.narrow {
font-size: 0.75rem;
padding-top: $space-size;
padding-bottom: $space-size - 2px;
border-spacing: $space-size - 2px;
> stack > label {
padding-left: $space-size;
padding-right: $space-size;
}
}
&.wide {
padding: 2px $space-size * 2;
border-spacing: $space-size;
}
}
}
}
// AdwViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
padding: 0;
}
// AdwViewSwitcherTitle
viewswitchertitle viewswitcher {
margin-left: $space-size * 2;
margin-right: $space-size * 2;
}
// AdwIndicatorBin
indicatorbin {
> indicator, > mask {
min-width: $space-size;
min-height: $space-size;
border-radius: $circular-radius;
}
> indicator {
margin: 1px;
background-color: gtkalpha(currentColor, .4);
> label {
font-size: 0.6rem;
font-weight: bold;
padding: 1px 4px;
color: white;
}
}
> mask {
padding: 1px;
background: black;
}
&.needs-attention > indicator {
background-color: $primary;
> label { color: on($primary); }
}
}
/************ /************
* Pathbars * * Pathbars *
@@ -1768,6 +1678,28 @@ pathbar > button {
} }
} }
.pathbar {
background-color: $fill;
color: $text-secondary;
border: none;
border-radius: $corner-radius;
padding: 2px;
headerbar & {
margin-top: $space-size;
margin-bottom: $space-size;
background-color: on($titlebar, fill);
color: $titlebar-text-secondary;
}
> button {
margin-top: 0;
margin-bottom: 0;
min-height: 20px;
border-radius: $corner-radius - 2px;
}
}
/************** /**************
* Tree Views * * Tree Views *
@@ -1994,16 +1926,21 @@ popover.menu {
padding: $space-size / 2 $space-size * 1.5; padding: $space-size / 2 $space-size * 1.5;
color: $text; color: $text;
font: initial; font: initial;
text-shadow: none; border-radius: $corner-radius;
box-shadow: none; @extend %button-flat-simple;
background: none;
&:hover { &:focus:not(:hover) {
transition: none; transition: none;
background-color: $overlay-hover; box-shadow: none;
outline: none;
} }
&:disabled { color: $text-disabled; } &:disabled { color: $text-disabled; }
arrow {
&.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
&.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
}
} }
label.title { label.title {
@@ -2083,16 +2020,6 @@ popover.background {
.view:not(:selected), .view:not(:selected),
toolbar { background-color: $surface; } toolbar { background-color: $surface; }
// .linked > button:not(.radio) {
// background-color: transparent;
// box-shadow: none;
// border-radius: $corner-radius;
//
// &:first-child { border-radius: $corner-radius; }
// &:last-child { border-radius: $corner-radius; }
// &:only-child { border-radius: $corner-radius; }
// }
&.menu button, &.menu button,
button.model { button.model {
@extend %button-flat; @extend %button-flat;
@@ -2134,7 +2061,6 @@ magnifier {
min-height: $small-size; min-height: $small-size;
min-width: $small-size; min-width: $small-size;
padding: $space-size / 2 $space-size; padding: $space-size / 2 $space-size;
margin: 0;
border: none; border: none;
outline: none; outline: none;
background-clip: padding-box; background-clip: padding-box;
@@ -2144,7 +2070,7 @@ magnifier {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
&:hover { &:hover:not(:checked):not(:selected) {
background-color: $fill; background-color: $fill;
background-image: none; background-image: none;
color: $text; color: $text;
@@ -2436,21 +2362,23 @@ tabbar {
} }
tabbox { tabbox {
background-color: rgba($text, if($variant == 'light', 0.08, 0.04)); background-color: $fill;
background-image: none; background-image: none;
padding: $space-size / 2 0; padding: 0;
margin: $space-size / 2; margin: 0;
border-radius: $modal-radius + $space-size / 2; border-radius: 0;
border-bottom: 1px solid $border;
> background { > background {
background: none; background: none;
} }
> tabboxchild { > tabboxchild {
margin: 0; margin: 0 -3px;
> tab { > tab {
@extend %tabs_tab; @extend %tabs_tab;
margin: 3px;
} }
} }
} }
@@ -3319,16 +3247,6 @@ actionbar > revealer > box {
background-color: $base; background-color: $base;
background-clip: border-box; background-clip: border-box;
border: none; border: none;
.background.csd box.vertical > & {
border-radius: 0 0 $window-radius $window-radius;
}
button:not(.suggested-action):not(.destructive-action) { @extend %button-flat; }
.linked > button:not(.suggested-action):not(.destructive-action) { @extend %button-basic; }
// .linked:not(.vertical) > entry:not(:only-child) { border-radius: $corner-radius; }
} }
statusbar { statusbar {
@@ -3416,7 +3334,7 @@ separator {
border-top-right-radius: $corner-radius; border-top-right-radius: $corner-radius;
} }
&:last-child { // Not use ? &:last-child {
border-bottom-left-radius: $corner-radius; border-bottom-left-radius: $corner-radius;
border-bottom-right-radius: $corner-radius; border-bottom-right-radius: $corner-radius;
} }
@@ -3430,7 +3348,7 @@ separator {
} }
&:focus { &:focus {
box-shadow: inset 0 0 0 1000px $overlay-focus; box-shadow: none;
} }
} }
@@ -3517,27 +3435,43 @@ row {
} }
@at-root %row_activatable, &.activatable { @at-root %row_activatable, &.activatable {
transition: $transition; transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent;
&:focus { &:focus {
color: $text; color: $text;
box-shadow: inset 0 0 0 9999px $overlay-focus; background-color: $overlay-focus;
box-shadow: none;
} }
&:hover { &:hover, &.has-open-popup {
color: $text; color: $text;
transition: $transition, transition: $transition;
box-shadow 0ms; background-color: $overlay-hover;
box-shadow: inset 0 0 0 9999px $overlay-hover; box-shadow: none;
} }
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:active { &:active {
color: $text; color: $text;
transition: $transition; transition: $transition;
box-shadow: inset 0 0 0 9999px $overlay-active; background-color: $overlay-active;
box-shadow: none;
}
&:selected {
background-color: $overlay-selected;
&:hover {
background-color: $overlay-focus-hover;
}
&:focus-visible:focus-within {
outline: none;
background-color: $overlay-focus;
&:hover { background-color: $overlay-focus-hover; }
}
} }
button.circular { button.circular {
@@ -3553,9 +3487,10 @@ row {
color: on($primary); color: on($primary);
} }
&:selected { &:selected, &:selected:focus {
@extend %selected_items; background-color: $overlay-selected;
color: inherit; // for overlays color: inherit; // for overlays
box-shadow: none;
image, image,
label { color: $text; } label { color: $text; }
@@ -3634,9 +3569,9 @@ columnview {
*********************/ *********************/
.app-notification { .app-notification {
@extend %toolbar_osd; @extend %toolbar_osd;
margin: 8px; margin: $space-size;
border-spacing: $space-size * 1.5; border-spacing: $space-size;
padding: $space-size * 1.5; padding: $space-size;
border: none; border: none;
background-image: none; background-image: none;
@@ -3647,7 +3582,7 @@ columnview {
} }
&.frame, &.frame,
border { border-style: none; } border { border: none; }
} }
@@ -3723,7 +3658,7 @@ calendar {
margin: $space-size / 2; margin: $space-size / 2;
> label { > label {
border-radius: $circular-radius; border-radius: $corner-radius;
margin: 0; margin: 0;
} }
@@ -3741,7 +3676,7 @@ calendar {
} }
> label.day-number { > label.day-number {
padding: $space-size*1.5; padding: $space-size;
&:selected { &:selected {
@extend %selected_items; @extend %selected_items;
@@ -3763,16 +3698,14 @@ calendar {
border-radius: 0; border-radius: 0;
min-height: $menuitem-size; min-height: $menuitem-size;
padding: $space-size $space-size * 2; padding: $space-size $space-size * 2;
margin: 0;
border: none;
&:first-child { border-radius: 0 0 0 $window-radius; } &:first-child { border-radius: 0 0 0 $window-radius; }
&:last-child { border-radius: 0 0 $window-radius 0; } &:last-child { border-radius: 0 0 $window-radius 0; }
&:only-child { border-radius: 0 0 $window-radius $window-radius; } &:only-child { border-radius: 0 0 $window-radius $window-radius; }
&:not(:last-child) { border-right: 1px solid $border; }
&.destructive-action:not(:disabled) { color: $destructive; }
} }
window.dialog.message { // Message Dialog styling window.dialog.message { // Message Dialog styling
@@ -3816,11 +3749,13 @@ window.dialog.message { // Message Dialog styling
@extend %button-flat; @extend %button-flat;
@extend %dialog_action_button; @extend %dialog_action_button;
&.suggested-action { &:not(:last-child) { border-right: 1px solid $border; }
&.suggested-action:not(:disabled) {
color: $suggested; color: $suggested;
} }
&.destructive-action { &.destructive-action:not(:disabled) {
color: $destructive; color: $destructive;
} }
} }
@@ -3841,6 +3776,7 @@ window.messagedialog {
} }
.response-area > box > button { .response-area > box > button {
@extend %button-flat;
@extend %dialog_action_button; @extend %dialog_action_button;
&.suggested { &.suggested {
@@ -3857,32 +3793,28 @@ window.messagedialog {
.response-area { .response-area {
> box.horizontal > button { > box.horizontal > button {
margin-top: -1px; margin: 0;
margin-right: -1px;
margin-left: -1px;
&:first-child { &:first-child {
border-bottom-left-radius: $window-radius;
margin-left: 0; margin-left: 0;
} }
&:last-child { &:last-child {
border-bottom-right-radius: $window-radius;
margin-right: 0; margin-right: 0;
} }
} }
> box.vertical > button { > box.vertical > button {
margin-top: -1px; margin-top: 0;
margin-bottom: -1px; margin-bottom: 0;
&:last-child { &:last-child {
border-bottom-left-radius: $window-radius; border-bottom-left-radius: $window-radius;
border-bottom-right-radius: $window-radius; border-bottom-right-radius: $window-radius;
margin-bottom: 0; margin-bottom: 0;
}
} }
} }
}
} }
} }
@@ -3964,8 +3896,6 @@ stacksidebar {
border-radius: $corner-radius; border-radius: $corner-radius;
&:selected { &:selected {
background-color: $overlay-selected;
color: $text;
font-weight: 500; font-weight: 500;
} }
@@ -4015,29 +3945,6 @@ separator.sidebar {
padding: $space-size; padding: $space-size;
border-radius: $corner-radius; border-radius: $corner-radius;
margin: $space-size / 4 $space-size; margin: $space-size / 4 $space-size;
&:hover,
&:focus-visible:focus-within {
background-color: $overlay-hover;
}
&:selected {
background-color: $overlay-selected;
color: $text;
&:hover {
background-color: $overlay-focus-hover;
}
&:focus-visible:focus-within {
outline: none;
background-color: $overlay-focus;
&:hover { background-color: $overlay-focus-hover; }
}
}
&:disabled { color: $text-disabled; }
} }
} }
@@ -4059,14 +3966,9 @@ placessidebar {
row { row {
&:selected { &:selected {
background-color: $divider;
font-weight: 500; font-weight: 500;
// &, image.sidebar-icon, button.sidebar-button { color: $text; }
} }
&:disabled { color: $text-disabled; }
image.sidebar-icon { image.sidebar-icon {
&:dir(ltr) { padding-right: 8px; } &:dir(ltr) { padding-right: 8px; }
&:dir(rtl) { padding-left: 8px; } &:dir(rtl) { padding-left: 8px; }
@@ -4093,7 +3995,7 @@ placessidebar {
} }
&:drop(active) { &:drop(active) {
box-shadow: inset 0 0 0 9999px $overlay-hover; background-color: $overlay-hover;
} }
} }
} }
@@ -4695,11 +4597,15 @@ stackswitcher {
&:focus:not(:hover):not(:checked) { box-shadow: none; } &:focus:not(:hover):not(:checked) { box-shadow: none; }
&:hover { @include button(hover); }
&:active { @include button(active); }
&:checked { &:checked {
transition: $transition; transition: $transition;
background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15)); background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15));
color: $text; color: $text;
box-shadow: 0 1px 3px rgba(black, 0.06); box-shadow: 0 1px 3px rgba(black, 0.1);
} }
} }

46
src/sass/gtk/_drawing-4.0.scss
View File

@@ -11,29 +11,32 @@
@if $t == normal { @if $t == normal {
transition: $transition, box-shadow $ripple-fade-out-duration $ease-out; transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
box-shadow: inset 0 0 0 2px transparent; box-shadow: inset 0 0 0 2px transparent;
background-color: $entry; background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
color: $text; color: if($fc == $primary, $text-secondary, rgba($fc, 0.75));
} }
@if $t == hover { @if $t == hover {
background-color: $overlay-hover; background-color: $overlay-hover;
box-shadow: inset 0 0 0 2px $overlay-hover; box-shadow: inset 0 0 0 2px $overlay-hover;
color: if($fc == $primary, $text, $fc);
} }
@if $t == focus { @if $t == focus {
background-color: $overlay-focus; background-color: $overlay-focus;
box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc); box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
color: if($fc == $primary, $text, $fc);
} }
@if $t == checked { @if $t == checked {
background-color: $entry; background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc); box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
color: if($fc == $primary, $text, $fc);
} }
@if $t == disabled { @if $t == disabled {
box-shadow: inset 0 0 0 2px transparent; box-shadow: inset 0 0 0 2px transparent;
background-color: $fill; background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
color: $text-disabled; color: if($fc == $primary, $text-disabled, rgba($fc, 0.35));
} }
@if $t == raised-normal { @if $t == raised-normal {
@@ -70,15 +73,14 @@
@if $t == normal { @if $t == normal {
transition: $transition, transition: $transition,
box-shadow $ripple-fade-in-duration $ease-out; background-color $ripple-fade-in-duration $ease-out;
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent;
background-color: $button; background-color: $button;
color: $text; color: $text;
} }
@if $t == hover { @if $t == hover {
box-shadow: inset 0 0 0 9999px $overlay-hover; background-color: $overlay-hover;
} }
@if $t == focus { @if $t == focus {
@@ -86,9 +88,9 @@
} }
@if $t == active { @if $t == active {
transition: box-shadow $ripple-fade-in-duration $ease-out, transition: $transition,
background-color $ripple-fade-in-duration $ease-out; background-color $ripple-fade-in-duration $ease-out;
box-shadow: inset 0 0 0 9999px $overlay-active; background-color: $overlay-active;
} }
@if $t == disabled { @if $t == disabled {
@@ -103,42 +105,42 @@
} }
@if $t == checked-hover { @if $t == checked-hover {
box-shadow: inset 0 0 0 9999px transparent; box-shadow: none;
} }
@if $t == checked-disabled { @if $t == checked-disabled {
box-shadow: inset 0 0 0 9999px $overlay-checked; box-shadow: none;
background-color: $fill; background-color: rgba($primary, 0.35);
color: $text-disabled; color: on($primary, disabled);
} }
@if $t == flat-normal { @if $t == flat-normal {
transition: $transition; transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
outline: none; outline: none;
box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent; background-color: transparent;
color: $text-secondary; color: $text-secondary;
} }
@if $t == flat-hover { @if $t == flat-hover {
box-shadow: inset 0 0 0 9999px $overlay-hover; background-color: $overlay-hover;
color: $text; color: $text;
} }
@if $t == flat-focus { @if $t == flat-focus {
box-shadow: inset 0 0 0 2px $overlay-focus; background-color: $overlay-focus;
color: $text; color: $text;
box-shadow: none;
} }
@if $t == flat-active { @if $t == flat-active {
transition: $transition; transition: $transition,
box-shadow: inset 0 0 0 9999px $overlay-active; background-color $ripple-fade-in-duration $ease-out;
background-color: $overlay-active;
color: $text; color: $text;
} }
@if $t == flat-disabled { @if $t == flat-disabled {
box-shadow: none;
background-color: transparent;
color: $text-secondary-disabled; color: $text-secondary-disabled;
} }

17
src/sass/gtk/apps/_budgie.scss
View File

@@ -11,6 +11,7 @@
// Budgie setting // Budgie setting
.budgie-settings-window { .budgie-settings-window {
list.sidebar { list.sidebar {
background: none;
border-radius: 0 0 0 $window-radius; border-radius: 0 0 0 $window-radius;
} }
@@ -43,7 +44,7 @@
background-color: $popover; background-color: $popover;
border-radius: $menu-radius; border-radius: $menu-radius;
.container { padding: 0; } .container, list, row { padding: 0; }
separator { margin: $space-size / 2 0; } separator { margin: $space-size / 2 0; }
@@ -99,7 +100,7 @@
} }
} }
&.budgie-menu { // Budgie AppMenu &.budgie-menu { // Budgie AppMenu
.container { padding: 0; } .container { padding: 0; }
.sidebar, .sidebar,
@@ -141,7 +142,7 @@
// top-row (user-name and avatar) // top-row (user-name and avatar)
> frame.container > box.vertical row.activatable:first-child { > frame.container > box.vertical row.activatable:first-child {
margin-bottom: $space-size / 2; margin-bottom: 0;
outline-width: 0; outline-width: 0;
border-radius: $corner-radius; border-radius: $corner-radius;
@@ -152,8 +153,14 @@
} }
} }
&.sound-popover { // &.sound-popover {
// separator { margin: $space-size / 2 0; } // separator { margin: $space-size / 2 0; }
// }
&.caffeine-popover {
frame > .container {
padding: $space-size;
}
} }
&.night-light-indicator { &.night-light-indicator {

8
src/sass/gtk/apps/_gnome-3.0.scss
View File

@@ -703,13 +703,6 @@ window#gnome-system-monitor.background.csd {
border-radius: 0 0 $window-radius $window-radius; border-radius: 0 0 $window-radius $window-radius;
> box.vertical { > box.vertical {
// > scrolledwindow {
// treeview.view:not(.progressbar):not(.trough) {
// background: none;
// @extend .view;
// }
// }
> revealer > actionbar > revealer > box { > revealer > actionbar > revealer > box {
border-radius: 0 0 $window-radius $window-radius; border-radius: 0 0 $window-radius $window-radius;
} }
@@ -774,6 +767,7 @@ tabbox { // Gnome 40.0
border-radius: $circular-radius; border-radius: $circular-radius;
border: none; border: none;
padding: 0; padding: 0;
margin-right: -6px;
@extend %button-flat-simple; @extend %button-flat-simple;
} }
} }

12
src/sass/gtk/apps/_gnome-4.0.scss
View File

@@ -107,6 +107,18 @@ leaflet {
} }
} }
//
// Calendar
//
datechooser.view {
button.flat.pill, button.circular.day {
min-height: 24px;
min-width: 24px;
padding: $space-size;
}
}
// //
// Contacts // Contacts
// //

181
src/sass/gtk/apps/_libadwaita.scss
View File

@@ -42,24 +42,149 @@ avatar {
&.image { background: none; } &.image { background: none; }
} }
// Card
.card { .card {
@at-root %card, & { @at-root %card, & {
@include button(normal);
border-radius: $corner-radius; border-radius: $corner-radius;
box-shadow: none;
border: 1px solid $border; border: 1px solid $border;
background-clip: border-box; background-clip: border-box;
background-color: $button;
color: $text-secondary; color: $text-secondary;
box-shadow: none;
}
&.activatable {
transition: $transition;
&:hover {
background-image: none;
@include button(hover);
}
&:active {
background-image: none;
@include button(active);
}
} }
} }
//
// Toasts
//
toast {
margin: $space-size * 2;
margin-bottom: $space-size * 4;
border-radius: $circular-radius;
border-spacing: $space-size;
padding: $space-size;
box-shadow: $shadow-z6, inset 0 1px highlight($popover);
background-color: $popover;
color: on($popover);
border: none;
&:dir(ltr) { padding-left: $space-size * 2; }
&:dir(rtl) { padding-right: $space-size * 2; }
> label {
margin: 0 $space-size;
}
}
//
// viewswitcher
//
viewswitcher {
margin: 0;
&.wide {
border-spacing: $space-size / 2;
}
&.narrow button.toggle {
border-radius: 0;
margin: 0;
&:focus-within, &:focus { box-shadow: none; }
}
button.toggle {
font-weight: bold;
padding: 0;
> stack > box {
&.narrow {
font-size: 0.75rem;
padding-top: $space-size;
padding-bottom: $space-size - 2px;
border-spacing: $space-size - 2px;
> stack > label {
padding-left: $space-size;
padding-right: $space-size;
}
}
&.wide {
padding: 2px $space-size * 2;
border-spacing: $space-size;
}
}
}
}
// AdwViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
padding: 0;
}
// AdwViewSwitcherTitle
viewswitchertitle viewswitcher {
margin-left: $space-size * 2;
margin-right: $space-size * 2;
}
// AdwIndicatorBin
indicatorbin {
> indicator, > mask {
min-width: $space-size;
min-height: $space-size;
border-radius: $circular-radius;
}
> indicator {
margin: 1px;
background-color: gtkalpha(currentColor, .4);
> label {
font-size: 0.6rem;
font-weight: bold;
padding: 1px 4px;
color: white;
}
}
> mask {
padding: 1px;
background: black;
}
&.needs-attention > indicator {
background-color: $primary;
> label { color: on($primary); }
}
}
// //
// preferencespage // preferencespage
// //
preferencespage > scrolledwindow > viewport > clamp > box { preferencespage > scrolledwindow > viewport > clamp > box {
margin: 24px 12px; margin: $space-size * 4 $space-size * 2;
border-spacing: 24px; border-spacing: $space-size *4;
} }
preferencesgroup > box { preferencesgroup > box {
@@ -104,14 +229,52 @@ preferencesgroup > box {
.cutout-button { background-color: $base-alt; } .cutout-button { background-color: $base-alt; }
} }
//
// AdwAboutWindow
//
window.about {
.main-page {
> viewport > clamp > box {
margin: $space-size * 2;
border-spacing: $space-size;
> box {
margin-top: $space-size * 3;
border-spacing: $space-size * 3;
margin-bottom: $space-size;
}
}
.app-version {
padding: $space-size / 2 $space-size * 3;
color: $primary;
border-radius: $corner-radius;
margin-top: $space-size / 2;
}
}
.subpage {
> viewport > clamp > box {
margin: $space-size * 3 $space-size * 2;
border-spacing: $space-size * 3;
}
> clamp > textview {
background: none;
color: inherit;
}
}
}
// //
// AdwStatusPage // AdwStatusPage
// //
statuspage { statuspage {
> scrolledwindow > viewport > box { > scrolledwindow > viewport > box {
margin: 36px $space-size * 2; margin: $space-size * 6 $space-size * 2;
border-spacing: 36px; border-spacing: $space-size * 6;
> clamp > box { > clamp > box {
border-spacing: $space-size * 2; border-spacing: $space-size * 2;
@@ -126,15 +289,15 @@ statuspage {
} }
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 24px; margin-bottom: $space-size * 4;
} }
} }
} }
} }
&.compact > scrolledwindow > viewport > box { &.compact > scrolledwindow > viewport > box {
margin: 24px 12px; margin: $space-size * 4 $space-size * 2;
border-spacing: 24px; border-spacing: $space-size * 4;
> clamp > box { > clamp > box {
> .icon { > .icon {

1
src/sass/gtk/apps/_misc.scss
View File

@@ -53,7 +53,6 @@ button.flat.tilix-small-button {
/********* /*********
* Meld * * Meld *
********/ ********/
.meld-notebook { .meld-notebook {
&, > stack { &, > stack {
background: none; background: none;