mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-10-09 01:08:34 -07:00
Fixed issues
This commit is contained in:
vinceliuice
@@ -121,11 +121,11 @@ FIXME this is really an API */
|
||||
// Budgie-desktop specific indicator colours
|
||||
|
||||
// unfocused window 'dot(s)'
|
||||
@define-color budgie_tasklist_indicator_color #{"" + white};
|
||||
@define-color budgie_tasklist_indicator_color #{"" + $track};
|
||||
// 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)'
|
||||
@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'
|
||||
// FIXME: we can't fill whole widget backgrounds with our suggestion colour
|
||||
// because of lacking specific style-class on 'needs_attention' state,
|
||||
|
||||
@@ -190,11 +190,18 @@ flowbox {
|
||||
rubberband { @extend rubberband; }
|
||||
|
||||
flowboxchild {
|
||||
padding: 4px;
|
||||
padding: $space-size / 2;
|
||||
border-radius: $corner-radius;
|
||||
color: $text;
|
||||
|
||||
&: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 {
|
||||
min-width: 24px;
|
||||
padding: ($medium-size - 24px) / 2;
|
||||
|
||||
// @extend %circular-button;
|
||||
|
||||
// &.destructive-action { border-radius: $corner-radius; }
|
||||
}
|
||||
|
||||
// NOTE: Some image-only buttons use this as well
|
||||
@@ -576,7 +579,7 @@ button {
|
||||
&:not(:only-child) { // specificity bump
|
||||
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; }
|
||||
@@ -586,18 +589,29 @@ button {
|
||||
&.osd {
|
||||
min-width: $small-size;
|
||||
min-width: $small-size;
|
||||
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
|
||||
background-color: $primary;
|
||||
color: on($primary);
|
||||
padding: ($medium-size - 24px) / 2;
|
||||
box-shadow: none;
|
||||
background-color: rgba(black, 0.35);
|
||||
color: white;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px rgba(black, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: mix(on($primary), $primary, 12%);
|
||||
color: on($primary);
|
||||
background-color: rgba(black, 0.45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix(on($primary), $primary, 26%);
|
||||
color: on($primary);
|
||||
background-color: rgba(black, 0.65);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: rgba(black, 0.15);
|
||||
color: rgba(white, 0.35);
|
||||
}
|
||||
|
||||
&.image-button, &.circular {
|
||||
@@ -605,8 +619,6 @@ button {
|
||||
|
||||
> image { padding: 0; }
|
||||
}
|
||||
|
||||
&:disabled { opacity: 0; }
|
||||
}
|
||||
|
||||
// overlay / OSD style
|
||||
@@ -822,7 +834,6 @@ spinbutton {
|
||||
&:disabled { color: $text-disabled; }
|
||||
|
||||
entry {
|
||||
// @extend %entry_raised;
|
||||
margin: 0;
|
||||
border-image: none;
|
||||
border-radius: 0;
|
||||
|
||||
@@ -94,8 +94,8 @@ gridview {
|
||||
}
|
||||
|
||||
box { //cells
|
||||
border-spacing: 8px; //label separation
|
||||
margin: 12px;
|
||||
border-spacing: $space-size + 2px; //label separation
|
||||
margin: $space-size * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,13 +114,17 @@ label {
|
||||
> selection { @extend %selected_items_primary; }
|
||||
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
color: $text-disabled;
|
||||
|
||||
// selection { color: $text-disabled; }
|
||||
|
||||
headerbar &,
|
||||
tab &,
|
||||
button & { color: inherit; }
|
||||
button & {
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.osd {
|
||||
@@ -143,7 +147,7 @@ window.assistant {
|
||||
|
||||
.sidebar label {
|
||||
min-height: $medium-size;
|
||||
padding: 0 12px;
|
||||
padding: 0 $space-size * 2;
|
||||
color: $text-disabled;
|
||||
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 *
|
||||
*********************/
|
||||
@@ -277,7 +257,7 @@ entry {
|
||||
|
||||
&:focus-within { @include entry(checked); }
|
||||
|
||||
&:drop(active) { @include entry(hover); }
|
||||
&:drop(active), &:hover:not(:focus-within) { @include entry(hover); }
|
||||
|
||||
&:disabled { @include entry(disabled); }
|
||||
|
||||
@@ -318,13 +298,39 @@ entry {
|
||||
|
||||
// entry error and warning style
|
||||
@each $e_type, $e_color in (error, $error),
|
||||
(warning, $warning) {
|
||||
(warning, $warning),
|
||||
(success, $success) {
|
||||
&.#{$e_type} {
|
||||
@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; }
|
||||
}
|
||||
|
||||
%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 {
|
||||
&.flat, & {
|
||||
background-color: $base;
|
||||
@@ -647,21 +621,34 @@ button {
|
||||
|
||||
// big standalone buttons like in Documents pager
|
||||
&.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;
|
||||
@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; }
|
||||
|
||||
&:disabled { opacity: 0; }
|
||||
// &.image-button { padding: ($large-size - 24px) / 2; }
|
||||
}
|
||||
|
||||
// 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 {
|
||||
min-height: $small-size;
|
||||
min-width: $small-size;
|
||||
@@ -1317,9 +1287,8 @@ button.combo:only-child {
|
||||
/************
|
||||
* Toolbars *
|
||||
************/
|
||||
.toolbar,
|
||||
toolbar {
|
||||
padding: $space-size / 2 $space-size;
|
||||
.toolbar {
|
||||
padding: $space-size;
|
||||
background-color: $background;
|
||||
border-spacing: $space-size;
|
||||
|
||||
@@ -1332,7 +1301,7 @@ toolbar {
|
||||
@at-root %toolbar_osd, &.osd {
|
||||
transition: $transition-shadow;
|
||||
padding: $space-size;
|
||||
border-radius: $corner-radius;
|
||||
border-radius: $corner-radius + $space-size;
|
||||
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
|
||||
background-color: $surface;
|
||||
color: $text;
|
||||
@@ -1359,17 +1328,31 @@ toolbar {
|
||||
&.horizontal > separator { margin: 2px; }
|
||||
&.vertical > separator { margin: 2px; }
|
||||
|
||||
&:not(.inline-toolbar):not(.osd) {
|
||||
scale,
|
||||
// add vertical margins to common widgets on toolbars to avoid them spanning
|
||||
// the whole height
|
||||
entry,
|
||||
spinbutton,
|
||||
button { margin: 2px; }
|
||||
splitbutton,
|
||||
separator:not(.sidebar),
|
||||
button,
|
||||
menubutton,
|
||||
scalebutton {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.linked entry,
|
||||
.linked spinbutton,
|
||||
.linked button {
|
||||
&:not(:first-child) { margin-left: 0; }
|
||||
&:not(:last-child) { margin-right: 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 {
|
||||
@@ -1377,7 +1360,12 @@ toolbar {
|
||||
button { margin: 0; }
|
||||
}
|
||||
|
||||
switch { margin: 2px + $space-size 2px; }
|
||||
// Reset styles for popovers
|
||||
popover {
|
||||
&.menu separator:not(.sidebar) {
|
||||
margin-top: $space-size;
|
||||
margin-bottom: $space-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1469,6 +1457,12 @@ headerbar {
|
||||
&:disabled { color: $titlebar-text-secondary-disabled; }
|
||||
}
|
||||
|
||||
&.flat, &.flat:backdrop {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 $space-size * 2;
|
||||
font-weight: bold;
|
||||
@@ -1498,10 +1492,6 @@ headerbar {
|
||||
background-color: $titlebar-divider;
|
||||
}
|
||||
|
||||
box.vertical & {
|
||||
background-color: $titlebar;
|
||||
}
|
||||
|
||||
> windowhandle > box {
|
||||
padding: 0 $space-size / 2;
|
||||
|
||||
@@ -1558,6 +1548,7 @@ headerbar {
|
||||
&:disabled {
|
||||
background-color: $titlebar-fill;
|
||||
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 *
|
||||
@@ -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 *
|
||||
@@ -1994,16 +1926,21 @@ popover.menu {
|
||||
padding: $space-size / 2 $space-size * 1.5;
|
||||
color: $text;
|
||||
font: initial;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border-radius: $corner-radius;
|
||||
@extend %button-flat-simple;
|
||||
|
||||
&:hover {
|
||||
&:focus:not(:hover) {
|
||||
transition: none;
|
||||
background-color: $overlay-hover;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&: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 {
|
||||
@@ -2083,16 +2020,6 @@ popover.background {
|
||||
.view:not(:selected),
|
||||
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,
|
||||
button.model {
|
||||
@extend %button-flat;
|
||||
@@ -2134,7 +2061,6 @@ magnifier {
|
||||
min-height: $small-size;
|
||||
min-width: $small-size;
|
||||
padding: $space-size / 2 $space-size;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-clip: padding-box;
|
||||
@@ -2144,7 +2070,7 @@ magnifier {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
&:hover:not(:checked):not(:selected) {
|
||||
background-color: $fill;
|
||||
background-image: none;
|
||||
color: $text;
|
||||
@@ -2436,21 +2362,23 @@ tabbar {
|
||||
}
|
||||
|
||||
tabbox {
|
||||
background-color: rgba($text, if($variant == 'light', 0.08, 0.04));
|
||||
background-color: $fill;
|
||||
background-image: none;
|
||||
padding: $space-size / 2 0;
|
||||
margin: $space-size / 2;
|
||||
border-radius: $modal-radius + $space-size / 2;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid $border;
|
||||
|
||||
> background {
|
||||
background: none;
|
||||
}
|
||||
|
||||
> tabboxchild {
|
||||
margin: 0;
|
||||
margin: 0 -3px;
|
||||
|
||||
> tab {
|
||||
@extend %tabs_tab;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3319,16 +3247,6 @@ actionbar > revealer > box {
|
||||
background-color: $base;
|
||||
background-clip: border-box;
|
||||
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 {
|
||||
@@ -3416,7 +3334,7 @@ separator {
|
||||
border-top-right-radius: $corner-radius;
|
||||
}
|
||||
|
||||
&:last-child { // Not use ?
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $corner-radius;
|
||||
border-bottom-right-radius: $corner-radius;
|
||||
}
|
||||
@@ -3430,7 +3348,7 @@ separator {
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1000px $overlay-focus;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3517,27 +3435,43 @@ row {
|
||||
}
|
||||
|
||||
@at-root %row_activatable, &.activatable {
|
||||
transition: $transition;
|
||||
transition: $transition,
|
||||
background-color $ripple-fade-in-duration $ease-out;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 9999px transparent;
|
||||
|
||||
&:focus {
|
||||
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;
|
||||
transition: $transition,
|
||||
box-shadow 0ms;
|
||||
box-shadow: inset 0 0 0 9999px $overlay-hover;
|
||||
transition: $transition;
|
||||
background-color: $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 {
|
||||
color: $text;
|
||||
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 {
|
||||
@@ -3553,9 +3487,10 @@ row {
|
||||
color: on($primary);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
&:selected, &:selected:focus {
|
||||
background-color: $overlay-selected;
|
||||
color: inherit; // for overlays
|
||||
box-shadow: none;
|
||||
|
||||
image,
|
||||
label { color: $text; }
|
||||
@@ -3634,9 +3569,9 @@ columnview {
|
||||
*********************/
|
||||
.app-notification {
|
||||
@extend %toolbar_osd;
|
||||
margin: 8px;
|
||||
border-spacing: $space-size * 1.5;
|
||||
padding: $space-size * 1.5;
|
||||
margin: $space-size;
|
||||
border-spacing: $space-size;
|
||||
padding: $space-size;
|
||||
border: none;
|
||||
background-image: none;
|
||||
|
||||
@@ -3647,7 +3582,7 @@ columnview {
|
||||
}
|
||||
|
||||
&.frame,
|
||||
border { border-style: none; }
|
||||
border { border: none; }
|
||||
}
|
||||
|
||||
|
||||
@@ -3723,7 +3658,7 @@ calendar {
|
||||
margin: $space-size / 2;
|
||||
|
||||
> label {
|
||||
border-radius: $circular-radius;
|
||||
border-radius: $corner-radius;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -3741,7 +3676,7 @@ calendar {
|
||||
}
|
||||
|
||||
> label.day-number {
|
||||
padding: $space-size*1.5;
|
||||
padding: $space-size;
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
@@ -3763,16 +3698,14 @@ calendar {
|
||||
border-radius: 0;
|
||||
min-height: $menuitem-size;
|
||||
padding: $space-size $space-size * 2;
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
||||
&:first-child { border-radius: 0 0 0 $window-radius; }
|
||||
|
||||
&:last-child { border-radius: 0 0 $window-radius 0; }
|
||||
|
||||
&: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
|
||||
@@ -3816,11 +3749,13 @@ window.dialog.message { // Message Dialog styling
|
||||
@extend %button-flat;
|
||||
@extend %dialog_action_button;
|
||||
|
||||
&.suggested-action {
|
||||
&:not(:last-child) { border-right: 1px solid $border; }
|
||||
|
||||
&.suggested-action:not(:disabled) {
|
||||
color: $suggested;
|
||||
}
|
||||
|
||||
&.destructive-action {
|
||||
&.destructive-action:not(:disabled) {
|
||||
color: $destructive;
|
||||
}
|
||||
}
|
||||
@@ -3841,6 +3776,7 @@ window.messagedialog {
|
||||
}
|
||||
|
||||
.response-area > box > button {
|
||||
@extend %button-flat;
|
||||
@extend %dialog_action_button;
|
||||
|
||||
&.suggested {
|
||||
@@ -3857,24 +3793,20 @@ window.messagedialog {
|
||||
|
||||
.response-area {
|
||||
> box.horizontal > button {
|
||||
margin-top: -1px;
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $window-radius;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $window-radius;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> box.vertical > button {
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $window-radius;
|
||||
@@ -3964,8 +3896,6 @@ stacksidebar {
|
||||
border-radius: $corner-radius;
|
||||
|
||||
&:selected {
|
||||
background-color: $overlay-selected;
|
||||
color: $text;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -4015,29 +3945,6 @@ separator.sidebar {
|
||||
padding: $space-size;
|
||||
border-radius: $corner-radius;
|
||||
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 {
|
||||
&:selected {
|
||||
background-color: $divider;
|
||||
font-weight: 500;
|
||||
|
||||
// &, image.sidebar-icon, button.sidebar-button { color: $text; }
|
||||
}
|
||||
|
||||
&:disabled { color: $text-disabled; }
|
||||
|
||||
image.sidebar-icon {
|
||||
&:dir(ltr) { padding-right: 8px; }
|
||||
&:dir(rtl) { padding-left: 8px; }
|
||||
@@ -4093,7 +3995,7 @@ placessidebar {
|
||||
}
|
||||
|
||||
&: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; }
|
||||
|
||||
&:hover { @include button(hover); }
|
||||
|
||||
&:active { @include button(active); }
|
||||
|
||||
&:checked {
|
||||
transition: $transition;
|
||||
background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15));
|
||||
color: $text;
|
||||
box-shadow: 0 1px 3px rgba(black, 0.06);
|
||||
box-shadow: 0 1px 3px rgba(black, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,29 +11,32 @@
|
||||
@if $t == normal {
|
||||
transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
|
||||
box-shadow: inset 0 0 0 2px transparent;
|
||||
background-color: $entry;
|
||||
color: $text;
|
||||
background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
|
||||
color: if($fc == $primary, $text-secondary, rgba($fc, 0.75));
|
||||
}
|
||||
|
||||
@if $t == hover {
|
||||
background-color: $overlay-hover;
|
||||
box-shadow: inset 0 0 0 2px $overlay-hover;
|
||||
color: if($fc == $primary, $text, $fc);
|
||||
}
|
||||
|
||||
@if $t == focus {
|
||||
background-color: $overlay-focus;
|
||||
box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
|
||||
color: if($fc == $primary, $text, $fc);
|
||||
}
|
||||
|
||||
@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);
|
||||
color: if($fc == $primary, $text, $fc);
|
||||
}
|
||||
|
||||
@if $t == disabled {
|
||||
box-shadow: inset 0 0 0 2px transparent;
|
||||
background-color: $fill;
|
||||
color: $text-disabled;
|
||||
background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
|
||||
color: if($fc == $primary, $text-disabled, rgba($fc, 0.35));
|
||||
}
|
||||
|
||||
@if $t == raised-normal {
|
||||
@@ -70,15 +73,14 @@
|
||||
|
||||
@if $t == normal {
|
||||
transition: $transition,
|
||||
box-shadow $ripple-fade-in-duration $ease-out;
|
||||
background-color $ripple-fade-in-duration $ease-out;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 9999px transparent;
|
||||
background-color: $button;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@if $t == hover {
|
||||
box-shadow: inset 0 0 0 9999px $overlay-hover;
|
||||
background-color: $overlay-hover;
|
||||
}
|
||||
|
||||
@if $t == focus {
|
||||
@@ -86,9 +88,9 @@
|
||||
}
|
||||
|
||||
@if $t == active {
|
||||
transition: box-shadow $ripple-fade-in-duration $ease-out,
|
||||
transition: $transition,
|
||||
background-color $ripple-fade-in-duration $ease-out;
|
||||
box-shadow: inset 0 0 0 9999px $overlay-active;
|
||||
background-color: $overlay-active;
|
||||
}
|
||||
|
||||
@if $t == disabled {
|
||||
@@ -103,42 +105,42 @@
|
||||
}
|
||||
|
||||
@if $t == checked-hover {
|
||||
box-shadow: inset 0 0 0 9999px transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@if $t == checked-disabled {
|
||||
box-shadow: inset 0 0 0 9999px $overlay-checked;
|
||||
background-color: $fill;
|
||||
color: $text-disabled;
|
||||
box-shadow: none;
|
||||
background-color: rgba($primary, 0.35);
|
||||
color: on($primary, disabled);
|
||||
}
|
||||
|
||||
@if $t == flat-normal {
|
||||
transition: $transition;
|
||||
transition: $transition,
|
||||
background-color $ripple-fade-in-duration $ease-out;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 9999px transparent;
|
||||
background-color: transparent;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
@if $t == flat-hover {
|
||||
box-shadow: inset 0 0 0 9999px $overlay-hover;
|
||||
background-color: $overlay-hover;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@if $t == flat-focus {
|
||||
box-shadow: inset 0 0 0 2px $overlay-focus;
|
||||
background-color: $overlay-focus;
|
||||
color: $text;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@if $t == flat-active {
|
||||
transition: $transition;
|
||||
box-shadow: inset 0 0 0 9999px $overlay-active;
|
||||
transition: $transition,
|
||||
background-color $ripple-fade-in-duration $ease-out;
|
||||
background-color: $overlay-active;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@if $t == flat-disabled {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: $text-secondary-disabled;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
// Budgie setting
|
||||
.budgie-settings-window {
|
||||
list.sidebar {
|
||||
background: none;
|
||||
border-radius: 0 0 0 $window-radius;
|
||||
}
|
||||
|
||||
@@ -43,7 +44,7 @@
|
||||
background-color: $popover;
|
||||
border-radius: $menu-radius;
|
||||
|
||||
.container { padding: 0; }
|
||||
.container, list, row { padding: 0; }
|
||||
|
||||
separator { margin: $space-size / 2 0; }
|
||||
|
||||
@@ -141,7 +142,7 @@
|
||||
|
||||
// top-row (user-name and avatar)
|
||||
> frame.container > box.vertical row.activatable:first-child {
|
||||
margin-bottom: $space-size / 2;
|
||||
margin-bottom: 0;
|
||||
outline-width: 0;
|
||||
border-radius: $corner-radius;
|
||||
|
||||
@@ -152,8 +153,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.sound-popover {
|
||||
// &.sound-popover {
|
||||
// separator { margin: $space-size / 2 0; }
|
||||
// }
|
||||
|
||||
&.caffeine-popover {
|
||||
frame > .container {
|
||||
padding: $space-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.night-light-indicator {
|
||||
|
||||
@@ -703,13 +703,6 @@ window#gnome-system-monitor.background.csd {
|
||||
border-radius: 0 0 $window-radius $window-radius;
|
||||
|
||||
> box.vertical {
|
||||
// > scrolledwindow {
|
||||
// treeview.view:not(.progressbar):not(.trough) {
|
||||
// background: none;
|
||||
// @extend .view;
|
||||
// }
|
||||
// }
|
||||
|
||||
> revealer > actionbar > revealer > box {
|
||||
border-radius: 0 0 $window-radius $window-radius;
|
||||
}
|
||||
@@ -774,6 +767,7 @@ tabbox { // Gnome 40.0
|
||||
border-radius: $circular-radius;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-right: -6px;
|
||||
@extend %button-flat-simple;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,6 +107,18 @@ leaflet {
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Calendar
|
||||
//
|
||||
|
||||
datechooser.view {
|
||||
button.flat.pill, button.circular.day {
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
padding: $space-size;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Contacts
|
||||
//
|
||||
|
||||
@@ -42,24 +42,149 @@ avatar {
|
||||
&.image { background: none; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.card {
|
||||
@at-root %card, & {
|
||||
@include button(normal);
|
||||
border-radius: $corner-radius;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border;
|
||||
background-clip: border-box;
|
||||
background-color: $button;
|
||||
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 > scrolledwindow > viewport > clamp > box {
|
||||
margin: 24px 12px;
|
||||
border-spacing: 24px;
|
||||
margin: $space-size * 4 $space-size * 2;
|
||||
border-spacing: $space-size *4;
|
||||
}
|
||||
|
||||
preferencesgroup > box {
|
||||
@@ -104,14 +229,52 @@ preferencesgroup > box {
|
||||
.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
|
||||
//
|
||||
|
||||
statuspage {
|
||||
> scrolledwindow > viewport > box {
|
||||
margin: 36px $space-size * 2;
|
||||
border-spacing: 36px;
|
||||
margin: $space-size * 6 $space-size * 2;
|
||||
border-spacing: $space-size * 6;
|
||||
|
||||
> clamp > box {
|
||||
border-spacing: $space-size * 2;
|
||||
@@ -126,15 +289,15 @@ statuspage {
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: $space-size * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.compact > scrolledwindow > viewport > box {
|
||||
margin: 24px 12px;
|
||||
border-spacing: 24px;
|
||||
margin: $space-size * 4 $space-size * 2;
|
||||
border-spacing: $space-size * 4;
|
||||
|
||||
> clamp > box {
|
||||
> .icon {
|
||||
|
||||
@@ -53,7 +53,6 @@ button.flat.tilix-small-button {
|
||||
/*********
|
||||
* Meld *
|
||||
********/
|
||||
|
||||
.meld-notebook {
|
||||
&, > stack {
|
||||
background: none;
|
||||
|
||||
Reference in New Issue
Block a user