mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-10-08 16:58:35 -07:00
581 lines
13 KiB
SCSS
581 lines
13 KiB
SCSS
$row_transition: background-color 200ms $ease-out-quad,
|
|
background-image 200ms $ease-out-quad,
|
|
border-radius 200ms $ease-out-quad;
|
|
|
|
listview,
|
|
list {
|
|
color: $view_fg_color;
|
|
background-color: $view_bg_color;
|
|
background-clip: padding-box;
|
|
border-color: $border_color;
|
|
|
|
> row {
|
|
padding: 2px;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
> row.expander { padding: 0px; }
|
|
> row.expander .row-header { padding: 2px; }
|
|
|
|
&.horizontal row.separator,
|
|
&.separators.horizontal > row:not(.separator) {
|
|
border-left: 1px solid $border_color;
|
|
}
|
|
|
|
&:not(.horizontal) row.separator,
|
|
&.separators:not(.horizontal) > row:not(.separator) {
|
|
border-bottom: 1px solid $border_color;
|
|
}
|
|
}
|
|
|
|
button listview.view {
|
|
background: none;
|
|
}
|
|
|
|
list.frame { border-radius: $button_radius; }
|
|
|
|
listview > header {
|
|
@extend .heading;
|
|
padding: 2px;
|
|
padding-top: $base_padding * 3;
|
|
padding-bottom: $base_padding;
|
|
}
|
|
|
|
row {
|
|
@include focus-ring();
|
|
|
|
.osd & {
|
|
&:focus:focus-visible {
|
|
outline-color: $osd_focus_color;
|
|
}
|
|
|
|
&.activatable {
|
|
&:hover { background-color: $hover_color; }
|
|
|
|
&:active { background-color: $active_color; }
|
|
|
|
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
&.has-open-popup { background-color: $hover_color; }
|
|
|
|
&:selected {
|
|
&:hover { background-color: $selected_hover_color; }
|
|
|
|
&:active { background-color: $selected_active_color; }
|
|
|
|
&.has-open-popup { background-color: $selected_hover_color; }
|
|
}
|
|
}
|
|
|
|
&:selected {
|
|
background-color: $selected_color;
|
|
}
|
|
}
|
|
|
|
background-clip: padding-box;
|
|
|
|
&.activatable {
|
|
transition: $transition,
|
|
background-size $ripple_fade_out_duration $ease_out,
|
|
background-image $ripple_fade_out_opacity_duration $ease_out,
|
|
font-weight 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 1000% 1000%;
|
|
|
|
&:hover { background-color: $view_hover_color; }
|
|
|
|
&:active {
|
|
transition: $transition,
|
|
background-size 0ms,
|
|
background-image 0ms,
|
|
font-weight 0ms;
|
|
animation: ripple $ripple_fade_in_duration $ease_out forwards;
|
|
background-image: radial-gradient(circle, $view_hover_color 10%, transparent 0%);
|
|
background-size: 0% 0%;
|
|
background-color: $view_hover_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
&.has-open-popup { background-color: $view_hover_color; }
|
|
|
|
&:selected {
|
|
&:hover { background-color: $view_selected_hover_color; }
|
|
|
|
&:active { background-color: $view_selected_active_color; }
|
|
|
|
&.has-open-popup { background-color: $view_selected_hover_color; }
|
|
}
|
|
}
|
|
|
|
&:selected {
|
|
background-color: $view_selected_color;
|
|
}
|
|
}
|
|
|
|
/*******************************************************
|
|
* Rich Lists *
|
|
* Large list usually containing lots of widgets *
|
|
* https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 *
|
|
*******************************************************/
|
|
|
|
.rich-list { /* rich lists usually containing other widgets than just labels/text */
|
|
> row {
|
|
padding: $base_padding + 2px $base_padding * 2;
|
|
min-height: 32px; /* should be tall even when only containing a label */
|
|
|
|
> box {
|
|
border-spacing: $base_padding * 2;
|
|
}
|
|
}
|
|
|
|
> header {
|
|
padding-left: $base_padding * 2;
|
|
padding-right: $base_padding * 2;
|
|
}
|
|
}
|
|
|
|
/****************
|
|
* AdwActionRow *
|
|
****************/
|
|
|
|
row {
|
|
label.subtitle {
|
|
font-size: smaller;
|
|
@extend .dim-label;
|
|
}
|
|
|
|
> box.header {
|
|
margin-left: $base_padding * 2;
|
|
margin-right: $base_padding * 2;
|
|
border-spacing: $base_padding;
|
|
min-height: $large_size + 2px;
|
|
|
|
> .icon:disabled {
|
|
filter: opacity($disabled_opacity);
|
|
}
|
|
|
|
> box.title {
|
|
margin-top: $base_padding;
|
|
margin-bottom: $base_padding;
|
|
border-spacing: $base_padding / 2;
|
|
padding: 0;
|
|
|
|
// Specificity bump for header bar
|
|
&,
|
|
> .title,
|
|
> .subtitle {
|
|
padding: 0;
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
> .prefixes,
|
|
> .suffixes {
|
|
border-spacing: $base_padding;
|
|
}
|
|
|
|
> .icon,
|
|
> .prefixes {
|
|
&:dir(ltr) { margin-right: $base_padding; }
|
|
&:dir(rtl) { margin-left: $base_padding; }
|
|
}
|
|
}
|
|
|
|
&.property > box.header > box.title > {
|
|
.title {
|
|
font-size: smaller;
|
|
@extend .dim-label;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: inherit;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************
|
|
* AdwEntryRow and AdwSpinRow *
|
|
******************************/
|
|
|
|
row.entry {
|
|
&:disabled {
|
|
text {
|
|
opacity: $disabled_opacity;
|
|
}
|
|
|
|
.dim-label, .subtitle {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.edit-icon, .indicator {
|
|
min-width: 22px;
|
|
min-height: 22px;
|
|
padding: $base_padding;
|
|
}
|
|
|
|
.edit-icon:disabled {
|
|
opacity: $strong_disabled_opacity;
|
|
}
|
|
|
|
.indicator {
|
|
opacity: $dimmer_opacity;
|
|
}
|
|
|
|
&.monospace {
|
|
font-family: inherit;
|
|
|
|
text {
|
|
font-family: monospace;
|
|
}
|
|
}
|
|
}
|
|
|
|
row.spin {
|
|
spinbutton {
|
|
background: none;
|
|
border-spacing: $base_padding;
|
|
box-shadow: none;
|
|
|
|
&, &:focus {
|
|
outline: none;
|
|
}
|
|
|
|
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
|
|
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
|
|
&, &:dir(ltr):last-child, &:dir(rtl):first-child {
|
|
@extend %button_basic;
|
|
@extend %circular_button;
|
|
min-width: $menuitem_size;
|
|
min-height: $menuitem_size;
|
|
margin: 10px 2px;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:disabled spinbutton {
|
|
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
|
|
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
|
|
&, &:dir(ltr):last-child, &:dir(rtl):first-child {
|
|
&:disabled {
|
|
filter: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
row.entry,
|
|
row.spin {
|
|
@include focus-ring($focus-state: '.focused', $offset: -1px, $transition: $row_transition);
|
|
|
|
&:not(:selected).activatable.focused:hover,
|
|
&:not(:selected).activatable.focused:active {
|
|
background-color: transparent;
|
|
}
|
|
|
|
@each $e_type, $e_color, $e_bg_color, $e_fg_color in (error, $error_color, $error_bg_color, $error_fg_color),
|
|
(warning, $warning_color, $warning_bg_color, $warning_fg_color),
|
|
(success, $success_color, $success_bg_color, $success_fg_color) {
|
|
&.#{$e_type} {
|
|
@include focus-ring($focus-state: '.focused', $offset: -1px, $fc: gtkalpha(currentColor, $focus_border_opacity), $transition: $row_transition);
|
|
|
|
text {
|
|
> selection:focus-within { background-color: gtkalpha($e_color, .2); }
|
|
|
|
> cursor-handle > contents { background-color: currentColor; }
|
|
}
|
|
|
|
.dim-label, .subtitle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.suggested-action {
|
|
background-color: $e_bg_color;
|
|
color: $e_fg_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/***************
|
|
* AdwComboRow *
|
|
***************/
|
|
|
|
row.combo {
|
|
image.dropdown-arrow:disabled {
|
|
filter: opacity($disabled_opacity);
|
|
}
|
|
|
|
listview.inline {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
|
|
&, &:disabled {
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
popover > contents {
|
|
min-width: 120px;
|
|
|
|
.combo-searchbar {
|
|
margin: $base_padding;
|
|
|
|
+ scrolledwindow {
|
|
@include undershoot(top, $popover_shade_color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************
|
|
* AdwExpanderRow *
|
|
******************/
|
|
|
|
@mixin margin-start($margin) {
|
|
&:dir(ltr) {
|
|
margin-left: $margin;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
margin-right: $margin;
|
|
}
|
|
}
|
|
|
|
%boxed_list {
|
|
background-color: $card_bg_color;
|
|
color: $card_fg_color;
|
|
border-radius: $button_radius;
|
|
box-shadow: 0 0 0 1px $border_color;
|
|
}
|
|
|
|
%boxed_list_row {
|
|
@include focus-ring($offset: -1px, $transition: $row_transition);
|
|
|
|
.osd &:focus:focus-visible {
|
|
outline-color: $osd_focus_color;
|
|
}
|
|
|
|
border-bottom: 1px solid gtkalpha(currentColor, .08);
|
|
|
|
&:not(:selected).activatable {
|
|
&:hover {
|
|
background-color: gtkalpha(currentColor, .03);
|
|
}
|
|
|
|
&:active {
|
|
background-color: gtkalpha(currentColor, .08);
|
|
}
|
|
|
|
&.has-open-popup {
|
|
background-color: gtkalpha(currentColor, .03);
|
|
}
|
|
}
|
|
}
|
|
|
|
row.expander {
|
|
// Drop transparent background on expander rows to let nested rows handle it,
|
|
// avoiding double highlights.
|
|
background: none;
|
|
padding: 0px;
|
|
|
|
> box > list {
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
|
|
list.nested {
|
|
background-color: gtkalpha($card_shade_color, .5);
|
|
color: inherit;
|
|
}
|
|
|
|
list.nested > row {
|
|
@extend %boxed_list_row;
|
|
}
|
|
|
|
// AdwExpanderRow arrow rotation
|
|
|
|
image.expander-row-arrow {
|
|
@extend .dim-label;
|
|
|
|
transition: -gtk-icon-transform 200ms $ease-out-quad;
|
|
@include margin-start(3px);
|
|
|
|
&:dir(ltr) {
|
|
-gtk-icon-transform: rotate(0.5turn);
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
-gtk-icon-transform: rotate(-0.5turn);
|
|
}
|
|
|
|
&:disabled {
|
|
filter: opacity($disabled_opacity);
|
|
}
|
|
}
|
|
|
|
&:checked image.expander-row-arrow {
|
|
-gtk-icon-transform: rotate(0turn);
|
|
opacity: 1;
|
|
|
|
&:not(:disabled) {
|
|
color: $accent_color;
|
|
}
|
|
}
|
|
|
|
.osd &:checked image.expander-row-arrow:not(:disabled) {
|
|
color: inherit;
|
|
}
|
|
|
|
&.property box > list > row {
|
|
@extend .property;
|
|
}
|
|
}
|
|
|
|
/***************
|
|
* AdwButtonRow *
|
|
***************/
|
|
|
|
row.button {
|
|
> box {
|
|
margin-left: $base_padding * 2;
|
|
margin-right: $base_padding * 2;
|
|
border-spacing: $base_padding;
|
|
min-height: $large_size + 2px;
|
|
}
|
|
|
|
.title {
|
|
@extend .heading;
|
|
}
|
|
|
|
&.suggested-action {
|
|
color: $accent_color;
|
|
}
|
|
|
|
&.destructive-action {
|
|
color: $destructive_color;
|
|
}
|
|
}
|
|
|
|
/*****************
|
|
* Boxed Lists *
|
|
*****************/
|
|
|
|
list.boxed-list {
|
|
@extend %boxed_list;
|
|
|
|
> row {
|
|
// Regular rows and expander header rows background
|
|
&, &.expander row.header {
|
|
@extend %boxed_list_row;
|
|
}
|
|
|
|
&.expander {
|
|
border: none;
|
|
}
|
|
|
|
// Rounded top
|
|
&:first-child {
|
|
&, &.expander row.header {
|
|
border-top-left-radius: $button_radius;
|
|
border-top-right-radius: $button_radius;
|
|
}
|
|
}
|
|
|
|
// Rounded bottom
|
|
&:last-child {
|
|
&,
|
|
&.expander:not(:checked),
|
|
&.expander:not(:checked) row.header,
|
|
&.expander:checked list.nested,
|
|
&.expander:checked list.nested > row:last-child {
|
|
border-bottom-left-radius: $button_radius;
|
|
border-bottom-right-radius: $button_radius;
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
list.boxed-list-separate {
|
|
background: none;
|
|
color: $card_fg_color;
|
|
|
|
> row {
|
|
@extend %boxed_list;
|
|
border: none;
|
|
margin-bottom: $base_padding * 2;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@include focus-ring($offset: -1px, $transition: $row_transition);
|
|
|
|
.osd &:focus:focus-visible {
|
|
outline-color: $osd_focus_color;
|
|
}
|
|
|
|
&:not(.expander) {
|
|
&:not(:selected).activatable {
|
|
&:hover {
|
|
background-color: $card_bg_color;
|
|
background-image: image(gtkalpha(currentColor, .03));
|
|
}
|
|
|
|
&:active {
|
|
background-color: $card_bg_color;
|
|
background-image: image(gtkalpha(currentColor, .08));
|
|
}
|
|
|
|
&.has-open-popup {
|
|
background-color: $card_bg_color;
|
|
background-image: image(gtkalpha(currentColor, .03));
|
|
}
|
|
}
|
|
}
|
|
|
|
&.entry, &.spin {
|
|
&:not(:selected).activatable.focused:hover,
|
|
&:not(:selected).activatable.focused:active {
|
|
background-color: $card_bg_color;
|
|
background-image: none;
|
|
}
|
|
|
|
@each $e_type, $e_color in (error, $error_color),
|
|
(warning, $warning_color),
|
|
(success, $success_color) {
|
|
&.#{$e_type} {
|
|
color: $e_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.expander {
|
|
row.header {
|
|
@extend %boxed_list_row;
|
|
border-top-left-radius: $button_radius;
|
|
border-top-right-radius: $button_radius;
|
|
}
|
|
|
|
&:not(:checked) row.header,
|
|
&.expander:checked list.nested,
|
|
&.expander:checked list.nested > row:last-child {
|
|
border-bottom-left-radius: $button_radius;
|
|
border-bottom-right-radius: $button_radius;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|