mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-10-07 00:24:40 -07:00
5126 lines
104 KiB
SCSS
5126 lines
104 KiB
SCSS
|
|
/***************
|
|
* Base States *
|
|
***************/
|
|
.background {
|
|
background-color: $background;
|
|
color: $text;
|
|
}
|
|
|
|
dnd {
|
|
color: on($background);
|
|
}
|
|
|
|
.normal-icons {
|
|
-gtk-icon-size: 16px;
|
|
}
|
|
|
|
.large-icons {
|
|
-gtk-icon-size: 32px;
|
|
|
|
.aboutdialog & {
|
|
-gtk-icon-size: 128px;
|
|
}
|
|
}
|
|
|
|
spinner:disabled,
|
|
arrow:disabled,
|
|
scrollbar:disabled,
|
|
check:disabled,
|
|
radio:disabled,
|
|
treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
|
|
|
|
%view, .view {
|
|
background-color: $base;
|
|
color: $text;
|
|
|
|
// &:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary, 0.08); }
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
&:selected {
|
|
color: $text;
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
textview {
|
|
// FIXME: we need to override background-color to ensure text rendering
|
|
|
|
text {
|
|
background-color: $base;
|
|
selection { &:focus, & { @extend %selected_items_primary; }}
|
|
}
|
|
|
|
border {
|
|
background-color: $base-alt;
|
|
color: $text-secondary; // FIXME: not working
|
|
}
|
|
}
|
|
|
|
iconview {
|
|
@extend %view;
|
|
&:hover, &:selected { border-radius: $corner-radius / 2; }
|
|
}
|
|
|
|
rubberband {
|
|
border: 1px solid $primary;
|
|
background-color: rgba($primary, 0.3);
|
|
}
|
|
|
|
flowbox {
|
|
> rubberband { @extend rubberband; }
|
|
|
|
> flowboxchild {
|
|
padding: 4px;
|
|
border-radius: $corner-radius;
|
|
|
|
&:selected { @extend %selected_items_color; }
|
|
}
|
|
}
|
|
|
|
.content-view .tile {
|
|
&:selected {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
gridview {
|
|
> rubberband { @extend rubberband; }
|
|
|
|
> child {
|
|
padding: 3px;
|
|
|
|
&:selected {
|
|
outline-color: $overlay-selected;
|
|
|
|
@extend %selected_items;
|
|
}
|
|
|
|
box { //cells
|
|
border-spacing: $space-size + 2px; //label separation
|
|
margin: $space-size * 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
coverflow cover {
|
|
color: $text;
|
|
background-color: $base;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
label {
|
|
&.separator {
|
|
color: $text-secondary;
|
|
}
|
|
|
|
> selection { @extend %selected_items_primary; }
|
|
|
|
&:disabled {
|
|
opacity: 1;
|
|
color: $text-disabled;
|
|
|
|
// selection { color: $text-disabled; }
|
|
|
|
headerbar &,
|
|
tab &,
|
|
button & {
|
|
color: inherit;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.osd {
|
|
border-radius: $corner-radius;
|
|
background-color: $tooltip;
|
|
color: on($tooltip);
|
|
}
|
|
}
|
|
|
|
%dim-label, .dim-label {
|
|
color: $text-secondary;
|
|
opacity: 1;
|
|
}
|
|
|
|
.accent {
|
|
color: $primary;
|
|
}
|
|
|
|
.success {
|
|
color: $success;
|
|
}
|
|
|
|
.warning {
|
|
color: $warning;
|
|
}
|
|
|
|
.error {
|
|
color: $error;
|
|
}
|
|
|
|
// General Typography
|
|
.large-title {
|
|
font-weight: 300;
|
|
font-size: 24pt;
|
|
}
|
|
|
|
.title {
|
|
&-1 {
|
|
font-weight: 800;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
&-2 {
|
|
font-weight: 800;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
&-3 {
|
|
font-weight: 700;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
&-4 {
|
|
font-weight: 700;
|
|
font-size: 13pt;
|
|
}
|
|
}
|
|
|
|
.heading {
|
|
font-weight: 700;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.body {
|
|
font-weight: 400;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.caption {
|
|
font-weight: 400;
|
|
font-size: 9pt;
|
|
|
|
&-heading {
|
|
font-weight: 700;
|
|
font-size: 9pt;
|
|
}
|
|
}
|
|
|
|
window.assistant {
|
|
.sidebar {
|
|
padding: 4px 0;
|
|
// background-color: $base;
|
|
// border-top: 1px solid $divider;
|
|
}
|
|
|
|
// &.csd .sidebar { border-top-style: none; }
|
|
|
|
.sidebar label {
|
|
min-height: $medium-size;
|
|
padding: 0 $space-size * 2;
|
|
color: $text-disabled;
|
|
font-weight: 500;
|
|
|
|
&.highlight { color: $text; }
|
|
}
|
|
}
|
|
|
|
%osd {
|
|
color: on($base);
|
|
background-color: $base;
|
|
background-clip: padding-box;
|
|
border-radius: $corner-radius;
|
|
border: none;
|
|
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
|
|
}
|
|
|
|
.osd {
|
|
@extend %osd;
|
|
padding: $space-size;
|
|
margin: $space-size;
|
|
|
|
&.circular { border-radius: $circular-radius; }
|
|
}
|
|
|
|
|
|
/*********************
|
|
* Spinner Animation *
|
|
*********************/
|
|
@keyframes spin {
|
|
to { transform: rotate(1turn); }
|
|
}
|
|
|
|
spinner {
|
|
background: none;
|
|
opacity: 0; // non spinning spinner makes no sense
|
|
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
|
|
|
&:checked {
|
|
opacity: 1;
|
|
animation: spin 1s linear infinite;
|
|
|
|
&:disabled { opacity: 0.5; }
|
|
}
|
|
}
|
|
|
|
/****************
|
|
* Text Entries *
|
|
****************/
|
|
%entry,
|
|
entry {
|
|
%entry-basic, & {
|
|
min-height: $medium-size;
|
|
padding: 0 8px;
|
|
border-spacing: $space-size;
|
|
border-radius: $corner-radius;
|
|
caret-color: currentColor; // this shouldn't be needed.
|
|
|
|
@include entry(normal);
|
|
|
|
&:focus-within { @include entry(checked); }
|
|
|
|
&:drop(active), &:hover:not(:focus-within) { @include entry(hover); }
|
|
|
|
&:disabled { @include entry(disabled); }
|
|
|
|
// &.search { border-radius: $circular-radius; }
|
|
|
|
&.flat {
|
|
&:focus-within, &:disabled, &:hover, & {
|
|
min-height: 0;
|
|
padding: 2px;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
image { // icons inside the entry
|
|
color: $text-secondary;
|
|
|
|
&:hover, &:active { color: $text; }
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
&.left {
|
|
margin: 0 6px 0 ($medium-size - 16px) / 2 - 8px;
|
|
}
|
|
|
|
&.right {
|
|
margin: 0 ($medium-size - 16px) / 2 - 8px 0 6px;
|
|
}
|
|
}
|
|
|
|
undershoot {
|
|
&.left { @include undershoot(left); }
|
|
|
|
&.right { @include undershoot(right); }
|
|
}
|
|
|
|
> text > selection { @extend %selected_items_primary; }
|
|
|
|
// entry error and warning style
|
|
@each $e_type, $e_color in (error, $error),
|
|
(warning, $warning),
|
|
(success, $success) {
|
|
&.#{$e_type} {
|
|
@include entry(normal, $e_color);
|
|
outline: none;
|
|
|
|
&:focus-within {
|
|
@include entry(checked, $e_color);
|
|
outline: none;
|
|
}
|
|
|
|
&: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); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> progress,
|
|
progress > trough > progress {
|
|
margin: 0 -4px;
|
|
border-bottom: 2px solid $primary;
|
|
background-color: transparent;
|
|
}
|
|
|
|
button.image-button {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
padding: 0;
|
|
}
|
|
|
|
// linked entries
|
|
.linked:not(.vertical) > & { @extend %linked; }
|
|
|
|
// Vertically linked entries
|
|
.linked.vertical > & { @extend %linked-vertical; }
|
|
}
|
|
|
|
treeview entry {
|
|
&.flat, & {
|
|
background-color: $base;
|
|
|
|
&, &:focus-within {
|
|
border-image: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.entry-tag {
|
|
margin: 2px;
|
|
border-radius: $circular-radius;
|
|
box-shadow: none;
|
|
background-color: $track-disabled;
|
|
color: $text;
|
|
|
|
&:hover { background-image: image($overlay-hover); }
|
|
|
|
// side margins: compensate the entry padding with a negative margin
|
|
// then the negative margin itself
|
|
:dir(ltr) & {
|
|
margin-left: 4px;
|
|
margin-right: 0;
|
|
padding-left: 12px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
:dir(rtl) & {
|
|
margin-left: 0;
|
|
margin-right: 4px;
|
|
padding-left: 8px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
// seems any sizing doesn't work
|
|
&.button {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
|
|
&:not(:hover):not(:active) { color: $text-secondary; }
|
|
}
|
|
}
|
|
|
|
// Editable Labels
|
|
editablelabel > stack > text {
|
|
@include entry(normal);
|
|
}
|
|
|
|
/***********
|
|
* Buttons *
|
|
***********/
|
|
// stuff for .needs-attention
|
|
@keyframes needs-attention {
|
|
from { background-image: radial-gradient(farthest-side, $primary 0%, transparentize($primary, 1) 0%); }
|
|
to { background-image: radial-gradient(farthest-side, $primary 95%, transparentize($primary, 1)); }
|
|
}
|
|
|
|
%button-on-dark {
|
|
color: on(dark, secondary);
|
|
|
|
&:focus, &:hover, &:active, &:checked { color: on(dark); }
|
|
&:disabled { color: on(dark, secondary-disabled); }
|
|
&:checked:disabled { color: on(dark, disabled); }
|
|
}
|
|
|
|
%button-basic {
|
|
@include button(normal);
|
|
|
|
&:focus { @include button(focus); }
|
|
|
|
&:hover { @include button(hover); -gtk-icon-filter: brightness(1.2); }
|
|
|
|
&.keyboard-activating, &:active { @include button(active); }
|
|
|
|
&:disabled { @include button(disabled); }
|
|
|
|
&:checked { @include button(checked); }
|
|
|
|
&:checked:hover { @include button(checked-hover); }
|
|
|
|
&:checked:disabled { @include button(checked-disabled); }
|
|
}
|
|
|
|
%button-flat-simple {
|
|
@include button(flat-normal);
|
|
|
|
&:focus:not(:hover):not(:active) { @include button(flat-focus); }
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
|
|
&:active { @include button(flat-active); }
|
|
|
|
&:disabled { @include button(flat-disabled); }
|
|
}
|
|
|
|
%button-flat {
|
|
@include button(flat-normal);
|
|
|
|
&:focus:not(:hover):not(:active) { @include button(flat-focus); }
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
|
|
&:active { @include button(flat-active); }
|
|
|
|
&:disabled { @include button(flat-disabled); }
|
|
|
|
&:checked, &:checked:hover { @include button(flat-checked); }
|
|
|
|
&:checked:disabled { @include button(flat-checked-disabled); }
|
|
}
|
|
|
|
%opaque_button {
|
|
box-shadow: none;
|
|
|
|
.osd &:focus:focus-visible {
|
|
outline-color: rgba(white, 0.15)
|
|
}
|
|
|
|
&:hover {
|
|
background-image: image(gtkalpha(currentColor, .1));
|
|
}
|
|
|
|
&.keyboard-activating,
|
|
&:active {
|
|
background-image: image(transparentize(black, .8));
|
|
}
|
|
|
|
&:checked {
|
|
background-image: image(transparentize(black, .85));
|
|
|
|
&:hover {
|
|
background-image: image(transparentize(black, .95));
|
|
}
|
|
|
|
&.keyboard-activating,
|
|
&:active {
|
|
background-image: image(transparentize(black, .7));
|
|
}
|
|
}
|
|
}
|
|
|
|
%small-button {
|
|
min-height: $small-size;
|
|
min-width: $small-size;
|
|
padding: 0;
|
|
border-radius: $circular-radius;
|
|
}
|
|
|
|
button {
|
|
min-height: 24px;
|
|
min-width: 16px;
|
|
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
|
|
border-radius: $corner-radius;
|
|
font-weight: 500;
|
|
@extend %button-basic;
|
|
|
|
&:drop(active) { @include button(hover); }
|
|
|
|
&.flat { @extend %button-flat; }
|
|
|
|
separator { margin: 4px 1px; }
|
|
|
|
&.opaque {
|
|
@extend %opaque_button;
|
|
|
|
background-color: mix($background, $text, 80%);
|
|
color: $text;
|
|
}
|
|
|
|
&.text-button {
|
|
min-width: 32px;
|
|
padding-left: $space-size * 2 + 4px;
|
|
padding-right: $space-size * 2 + 4px;
|
|
}
|
|
|
|
&.image-button {
|
|
min-width: 24px;
|
|
padding: ($medium-size - 24px) / 2;
|
|
|
|
// @extend %circular-button;
|
|
}
|
|
|
|
// NOTE: Some image-only buttons use this as well
|
|
&.text-button.image-button, &.image-text-button {
|
|
min-width: 24px;
|
|
padding: ($medium-size - 24px) / 2;
|
|
border-radius: $corner-radius;
|
|
|
|
> box,
|
|
> box > box {
|
|
border-spacing: $space-size - 2px;
|
|
|
|
> label {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
}
|
|
|
|
label {
|
|
&:first-child { margin-left: 16px - ($medium-size - 24px) / 2; }
|
|
|
|
&:last-child { margin-right: 16px - ($medium-size - 24px) / 2; }
|
|
}
|
|
|
|
&.flat label {
|
|
&:first-child { margin-left: 12px - ($medium-size - 24px) / 2; }
|
|
|
|
&:last-child { margin-right: 12px - ($medium-size - 24px) / 2; }
|
|
}
|
|
|
|
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
|
|
}
|
|
|
|
&.arrow-button {
|
|
padding-left: $space-size * 1.5;
|
|
padding-right: $space-size * 1.5;
|
|
|
|
> box { border-spacing: $space-size - 2px; }
|
|
|
|
&.text-button {
|
|
padding-left: $space-size * 2 + 4px;
|
|
padding-right: $space-size * 2 + 4px;
|
|
|
|
> box { border-spacing: $space-size; }
|
|
}
|
|
}
|
|
|
|
@at-root %pill-button,
|
|
&.pill {
|
|
padding: $space-size * 1.5 $space-size * 5;
|
|
border-radius: $circular-radius;
|
|
}
|
|
|
|
&.card {
|
|
background-color: $fill;
|
|
background-clip: padding-box;
|
|
font-weight: inherit;
|
|
border: 1px solid $border;
|
|
background-clip: border-box;
|
|
|
|
&:hover {
|
|
background-image: none;
|
|
@include button(hover);
|
|
}
|
|
|
|
&.keyboard-activating,
|
|
&:active {
|
|
background-image: none;
|
|
@include button(active);
|
|
}
|
|
|
|
&:checked {
|
|
background-image: none;
|
|
@include button(checked);
|
|
border-color: $primary;
|
|
|
|
&:hover {
|
|
background-image: none;
|
|
@include button(checked-hover);
|
|
}
|
|
|
|
&:disabled { @include button(checked-disabled); }
|
|
|
|
|
|
&.keyboard-activating,
|
|
&:active { background-image: none; }
|
|
|
|
&.has-open-popup {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
&:drop(active) {
|
|
color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
}
|
|
|
|
.linked:not(.vertical) > &:focus,
|
|
.linked.vertical > &:focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
.linked:not(.vertical) > &,
|
|
.linked:not(.vertical) > &.image-button {
|
|
@extend %linked;
|
|
}
|
|
|
|
.linked.vertical > &,
|
|
.linked.vertical > &.image-button {
|
|
@extend %linked-vertical;
|
|
}
|
|
|
|
.linked:not(.vertical) > &.flat,
|
|
.linked.vertical > &.flat {
|
|
&:not(:only-child) { // specificity bump
|
|
background-color: $overlay-normal;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.linked:not(.vertical) > menubutton > & {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
min-width: $small-size;
|
|
min-width: $small-size;
|
|
padding: ($medium-size - 24px) / 2;
|
|
box-shadow: none;
|
|
background-color: rgba(black, 0.35);
|
|
color: white;
|
|
|
|
> image {
|
|
padding: 0;
|
|
}
|
|
|
|
&.remove-button {
|
|
padding: 0;
|
|
}
|
|
|
|
&:focus {
|
|
outline-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(black, 0.45);
|
|
color: white;
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba(black, 0.65);
|
|
color: white;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: rgba(black, 0.15);
|
|
color: rgba(white, 0.35);
|
|
}
|
|
|
|
// &.image-button { padding: ($large-size - 24px) / 2; }
|
|
}
|
|
|
|
// Suggested and Destructive Action buttons
|
|
@each $b_type, $b_color in (suggested-action, $suggested),
|
|
(destructive-action, $destructive) {
|
|
&.#{$b_type} {
|
|
background-color: $b_color;
|
|
color: on($b_color);
|
|
box-shadow: none;
|
|
|
|
&:disabled { @include button(disabled); }
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 9999px transparent,
|
|
0 2px (4px * .6) -1px rgba($b_color, 0.2),
|
|
0 4px (5px * .6) 0 rgba($b_color, 0.14),
|
|
0 1px (10px * .6) 0 rgba($b_color, 0.12);
|
|
}
|
|
|
|
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
|
|
|
|
&:checked:hover {
|
|
box-shadow: inset 0 0 0 9999px transparent,
|
|
0 3px 3px -3px rgba($b_color, 0.3),
|
|
0 2px 3px -1px rgba($b_color, 0.24),
|
|
0 2px 5px 0 rgba($b_color, 0.12);
|
|
}
|
|
|
|
&:focus { box-shadow: 0 0 0 2px rgba($b_color, 0.35); }
|
|
|
|
&.flat {
|
|
background-color: transparent;
|
|
color: $b_color;
|
|
|
|
&:disabled { @include button(flat-disabled); }
|
|
|
|
&:checked { background-color: rgba($b_color, 0.3); }
|
|
}
|
|
}
|
|
}
|
|
|
|
stackswitcher > & {
|
|
// to position the needs attention dot, padding is added to the button
|
|
// child, a label needs just lateral padding while an icon needs vertical
|
|
// padding added too.
|
|
|
|
> label {
|
|
margin: 0 -6px;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
> image {
|
|
margin: -3px -6px;
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
&.needs-attention {
|
|
> label,
|
|
> image { @extend %needs-attention; }
|
|
|
|
&:checked {
|
|
> label,
|
|
> image {
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hide separators
|
|
&.font,
|
|
&.file {
|
|
separator { @extend %hide_separators; }
|
|
|
|
> box { border-spacing: $space-size; }
|
|
> box > box > label { font-weight: bold; }
|
|
}
|
|
|
|
@at-root %circular-button,
|
|
&.close,
|
|
&.circular { // The Bloody Circul Button
|
|
border-radius: $circular-radius;
|
|
|
|
label { padding: 0; }
|
|
}
|
|
}
|
|
|
|
menubutton {
|
|
&.osd {
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
|
|
&.circular > button { @extend %circular-button; }
|
|
&.flat > button { @extend %button-flat; }
|
|
&.pill > button { @extend %pill-button; }
|
|
|
|
&.suggested-action {
|
|
background-color: $suggested;
|
|
color: white;
|
|
}
|
|
|
|
&.destructive-action {
|
|
background-color: $destructive;
|
|
color: white;
|
|
}
|
|
|
|
&.opaque {
|
|
background-color: mix($background, $text, 80%);
|
|
color: $text;
|
|
}
|
|
|
|
&.suggested-action,
|
|
&.destructive-action,
|
|
&.opaque {
|
|
border-radius: $corner-radius;
|
|
|
|
&.circular, &.pill {
|
|
border-radius: $circular-radius;
|
|
}
|
|
|
|
> button {
|
|
@extend %button-flat;
|
|
|
|
&, &:checked {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.image-button > button {
|
|
min-width: 24px;
|
|
padding-left: $space-size;
|
|
padding-right: $space-size;
|
|
}
|
|
|
|
arrow {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
&.none {
|
|
-gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
|
|
}
|
|
&.down {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
&.up {
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
}
|
|
&.left {
|
|
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
|
}
|
|
&.right {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
}
|
|
}
|
|
}
|
|
|
|
splitbutton {
|
|
border-radius: $corner-radius;
|
|
|
|
&, & > separator {
|
|
transition: $transition;
|
|
transition-property: background;
|
|
}
|
|
|
|
> separator {
|
|
margin-top: $space-size;
|
|
margin-bottom: $space-size;
|
|
background: none;
|
|
}
|
|
|
|
> menubutton > button {
|
|
padding-left: $space-size - 2px;
|
|
padding-right: $space-size - 2px;
|
|
}
|
|
|
|
// Since the inner button doesn't have any style classes on it,
|
|
// we have to add them manually
|
|
&.image-button > button {
|
|
min-width: 24px;
|
|
padding-left: $space-size;
|
|
padding-right: $space-size;
|
|
}
|
|
|
|
&.text-button.image-button > button,
|
|
&.image-text-button > button {
|
|
padding-left: $space-size * 1.5;
|
|
padding-right: $space-size * 1.5;
|
|
|
|
> box {
|
|
border-spacing: $space-size;
|
|
}
|
|
}
|
|
|
|
// Reimplementing linked so we don't blow up css
|
|
> button:dir(ltr),
|
|
> menubutton > button:dir(rtl) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
> button:dir(rtl),
|
|
> menubutton > button:dir(ltr) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
@at-root %flat_split_button,
|
|
&.flat {
|
|
> separator {
|
|
background: $border;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:checked {
|
|
background: gtkalpha(currentColor, 0.07);
|
|
|
|
> separator {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
&:focus-within:focus-visible > separator {
|
|
background: none;
|
|
}
|
|
|
|
> button,
|
|
> menubutton > button {
|
|
@extend %button-flat-simple;
|
|
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
&.suggested-action {
|
|
background-color: $suggested;
|
|
color: white;
|
|
}
|
|
|
|
&.destructive-action {
|
|
background-color: $destructive;
|
|
color: white;
|
|
}
|
|
|
|
&.opaque {
|
|
background-color: mix($background, $text, 80%);
|
|
color: $text;
|
|
}
|
|
|
|
&.suggested-action,
|
|
&.destructive-action,
|
|
&.opaque {
|
|
> button, > menubutton > button {
|
|
@extend %button-flat;
|
|
|
|
&, &:checked {
|
|
color: inherit;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
> menubutton > button {
|
|
&:dir(ltr) { box-shadow: inset 1px 0 $border; }
|
|
&:dir(rtl) { box-shadow: inset -1px 0 $border; }
|
|
}
|
|
}
|
|
|
|
> menubutton > button > arrow.none {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
}
|
|
|
|
buttoncontent {
|
|
border-spacing: $space-size;
|
|
|
|
> label {
|
|
font-weight: bold;
|
|
|
|
&:dir(ltr) { padding-right: 2px; }
|
|
&:dir(rtl) { padding-left: 2px; }
|
|
}
|
|
|
|
.arrow-button > box > &,
|
|
splitbutton > button > & {
|
|
> label {
|
|
&:dir(ltr) { padding-right: 0; }
|
|
&:dir(rtl) { padding-left: 0; }
|
|
}
|
|
}
|
|
}
|
|
|
|
%needs-attention {
|
|
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
|
|
background-repeat: no-repeat;
|
|
background-position: right 3px;
|
|
background-size: 6px 6px;
|
|
|
|
&:dir(rtl) { background-position: left 3px; }
|
|
}
|
|
|
|
%linked {
|
|
border-radius: 0;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: $corner-radius;
|
|
border-bottom-left-radius: $corner-radius;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
%linked-vertical {
|
|
border-radius: 0;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: $corner-radius;
|
|
border-top-right-radius: $corner-radius;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-left-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
button.color {
|
|
min-height: $small-size;
|
|
min-width: $small-size;
|
|
padding: $space-size;
|
|
|
|
// colorswatch:only-child {
|
|
// &, overlay { border-radius: 0; }
|
|
// }
|
|
}
|
|
|
|
%list_button,
|
|
list > row button.image-button:not(.flat) {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
border: none;
|
|
&:hover { @include button(hover); }
|
|
&:active,
|
|
&:checked { @include button(active); }
|
|
|
|
@each $b_type, $b_color in (suggested-action, $suggested),
|
|
(destructive-action, $destructive) {
|
|
&.#{$b_type} { // allow colored buttons in lists #3643
|
|
background-color: $b_color;
|
|
color: on($b_color);
|
|
}
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Links *
|
|
*********/
|
|
link, %links {
|
|
color: $link;
|
|
|
|
&:visited {
|
|
color: $link-visited;
|
|
}
|
|
}
|
|
|
|
button.link {
|
|
&:link {
|
|
&, &:focus, &:hover, &:active { color: $link; }
|
|
}
|
|
|
|
&:visited {
|
|
&, &:focus, &:hover, &:active { color: $link-visited; }
|
|
}
|
|
|
|
> label { text-decoration-line: underline; }
|
|
}
|
|
|
|
/*****************
|
|
* GtkSpinButton *
|
|
*****************/
|
|
spinbutton {
|
|
border-radius: $corner-radius;
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
@include entry(normal);
|
|
|
|
&:focus-within { @include entry(checked); }
|
|
|
|
&:disabled { @include entry(disabled); }
|
|
|
|
> text {
|
|
border-image: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
|
|
> selection { @extend %selected_items_primary; }
|
|
}
|
|
|
|
> button {
|
|
@extend %button-flat-simple;
|
|
@extend %small-button;
|
|
border: none;
|
|
|
|
// Remove unwanted focus indicator
|
|
&:focus:not(:hover):not(:active):not(:disabled) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&:not(.vertical) {
|
|
// in this horizontal configuration, the whole spinbutton
|
|
// behaves as the entry, so we extend the entry styling
|
|
// and nuke the style on the internal entry
|
|
|
|
> text {
|
|
min-width: $large-size - 16px;
|
|
// reset all the other props since the spinbutton node is styled here
|
|
padding-left: $space-size * 2;
|
|
}
|
|
|
|
> button {
|
|
padding: 0;
|
|
margin: $space-size;
|
|
|
|
&.up:dir(ltr),
|
|
&.down:dir(rtl) { margin-left: $space-size / 2; }
|
|
|
|
&.up:dir(rtl),
|
|
&.down:dir(ltr) { margin-right: $space-size / 2; }
|
|
}
|
|
}
|
|
|
|
cell.activatable &:not(.vertical) {
|
|
margin: $space-size / 2 0;
|
|
|
|
> button {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: $small-size;
|
|
border-radius: 0;
|
|
|
|
&:last-child {
|
|
border-radius: 0 $corner-radius $corner-radius 0;
|
|
}
|
|
|
|
&.up:dir(ltr),
|
|
&.down:dir(rtl) { margin-left: 0; }
|
|
|
|
&.up:dir(rtl),
|
|
&.down:dir(ltr) { margin-right: 0; }
|
|
}
|
|
}
|
|
|
|
// Vertical
|
|
&.vertical {
|
|
> text {
|
|
min-height: $medium-size;
|
|
min-width: $large-size - $space-size;
|
|
padding: 0;
|
|
}
|
|
|
|
> button {
|
|
padding: 0;
|
|
margin: $space-size ($large-size - $space-size - $small-size) / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* ComboBoxes *
|
|
**************/
|
|
// dropdown > popover.menu.background > contents { padding: 0; }
|
|
|
|
dropdown > button > box {
|
|
border-spacing: $space-size;
|
|
}
|
|
|
|
dropdown,
|
|
combobox {
|
|
arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
// align menu labels with the button label
|
|
> popover.menu > contents modelbutton {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
button.combo cellview {
|
|
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
|
|
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
|
|
}
|
|
|
|
// newstyle
|
|
popover {
|
|
margin-top: $space-size - 2px;
|
|
padding: 0;
|
|
|
|
listview {
|
|
margin: 0;
|
|
|
|
& > row {
|
|
padding: $space-size;
|
|
|
|
&:selected {
|
|
color: $text;
|
|
background-color: $overlay-selected;
|
|
}
|
|
}
|
|
}
|
|
|
|
// drodowns with searchboxes on top
|
|
.dropdown-searchbar {
|
|
padding: $space-size;
|
|
}
|
|
}
|
|
|
|
&.linked {
|
|
button:nth-child(2) {
|
|
&:dir(ltr) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
&:dir(rtl) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .linked:not(.vertical) > entry:not(:only-child) {
|
|
border-radius: $corner-radius;
|
|
|
|
&:first-child {
|
|
margin-right: -$medium-size;
|
|
padding-right: $medium-size;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: -$medium-size;
|
|
padding-left: $medium-size;
|
|
}
|
|
}
|
|
|
|
> .linked:not(.vertical) > button:not(:only-child) {
|
|
@extend %button-flat;
|
|
// @extend %small-button;
|
|
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
margin: ($medium-size - $small-size) / 2;
|
|
padding: ($small-size - 16px) / 2;
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
// the combo is a composite widget so the way we do button linking doesn't
|
|
// work, special case needed. See
|
|
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
|
|
|
|
.linked:not(.vertical) > combobox {
|
|
&:not(:first-child) > box > button.combo {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) > box > button.combo {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.linked.vertical > combobox {
|
|
&:not(:first-child) > box > button.combo {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) > box > button.combo {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
button.combo:only-child {
|
|
border-radius: $corner-radius;
|
|
font-weight: normal;
|
|
|
|
@include entry(normal);
|
|
|
|
&:focus { @include button(flat-focus); }
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
|
|
&:active { @include button(flat-active); }
|
|
|
|
&:checked { @include button(flat-checked); }
|
|
|
|
&:disabled { @include button(disabled); }
|
|
}
|
|
|
|
|
|
/************
|
|
* Toolbars *
|
|
************/
|
|
.toolbar {
|
|
padding: $space-size;
|
|
background-color: $background;
|
|
border-spacing: $space-size;
|
|
|
|
button { @extend %button-flat; }
|
|
|
|
// on OSD
|
|
.osd & { background-color: transparent; }
|
|
|
|
// stand-alone OSD toolbars
|
|
@at-root %toolbar_osd, &.osd {
|
|
transition: $transition-shadow;
|
|
padding: $space-size;
|
|
border-radius: $corner-radius + $space-size;
|
|
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
|
|
background-color: $surface;
|
|
color: $text;
|
|
|
|
&:backdrop { box-shadow: $shadow-z2, inset 0 1px highlight($surface); }
|
|
|
|
&.left,
|
|
&.right,
|
|
&.top,
|
|
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
|
|
|
|
&.bottom {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
background-image: linear-gradient(to bottom,
|
|
transparent,
|
|
rgba(black, 0.1) 30%,
|
|
rgba(black, 0.2) 50%,
|
|
rgba(black, 0.4));
|
|
}
|
|
}
|
|
|
|
// toolbar separators
|
|
&.horizontal > separator { margin: 2px; }
|
|
&.vertical > separator { margin: 2px; }
|
|
|
|
// add vertical margins to common widgets on toolbars to avoid them spanning
|
|
// 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,
|
|
button { margin: 0; }
|
|
}
|
|
|
|
// Reset styles for popovers
|
|
popover {
|
|
&.menu separator:not(.sidebar) {
|
|
margin-top: $space-size;
|
|
margin-bottom: $space-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
// searchbar
|
|
searchbar > revealer > box {
|
|
padding: $space-size;
|
|
border-spacing: $space-size;
|
|
border-style: solid;
|
|
border-width: 0 0 1px;
|
|
border-color: $divider;
|
|
background-color: $background;
|
|
background-clip: border-box;
|
|
box-shadow: none;
|
|
|
|
entry, button, menubutton { margin: 0; }
|
|
}
|
|
|
|
/***************
|
|
* Header bars *
|
|
***************/
|
|
|
|
%titlebar-button {
|
|
@extend %button-flat;
|
|
color: $titlebar-text-secondary;
|
|
border: none;
|
|
|
|
&:hover, &:active, &:checked { color: $titlebar-text; }
|
|
|
|
&:disabled { color: $titlebar-text-secondary-disabled; }
|
|
|
|
&:checked {
|
|
&:disabled {
|
|
background-color: transparent;
|
|
color: $titlebar-text-disabled;
|
|
}
|
|
}
|
|
|
|
&:backdrop {
|
|
color: $titlebar-text-disabled;
|
|
|
|
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
|
|
|
|
&:disabled { color: $titlebar-text-secondary-disabled; }
|
|
|
|
&:checked {
|
|
color: $titlebar-text-secondary;
|
|
|
|
&:disabled { color: $titlebar-text-secondary-disabled; }
|
|
}
|
|
}
|
|
}
|
|
|
|
%titlebar-entry {
|
|
background-color: $titlebar-fill;
|
|
color: $titlebar-text;
|
|
|
|
&:disabled {
|
|
background-color: $titlebar-fill;
|
|
color: $titlebar-text-disabled;
|
|
}
|
|
|
|
image {
|
|
color: $titlebar-text-secondary;
|
|
|
|
&:hover, &:active { color: $titlebar-text; }
|
|
|
|
&:disabled { color: $titlebar-text-disabled; }
|
|
}
|
|
}
|
|
|
|
headerbar {
|
|
transition: background-color $duration $ease-out, color $duration $ease-out;
|
|
box-shadow: inset 0 -1px $divider;
|
|
background-color: $titlebar;
|
|
color: $titlebar-text;
|
|
min-height: $large-size;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
&:disabled { color: $titlebar-text-disabled; }
|
|
|
|
&:backdrop {
|
|
background-color: $titlebar-backdrop;
|
|
color: $titlebar-text-secondary;
|
|
|
|
&: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;
|
|
}
|
|
|
|
.subtitle {
|
|
padding: 0 $space-size * 2;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.subtitle,
|
|
.dim-label {
|
|
transition: color $duration $ease-out;
|
|
color: $titlebar-text-secondary;
|
|
|
|
&:backdrop { color: $titlebar-text-disabled; }
|
|
}
|
|
|
|
// Don't draw titlebar above titlebar
|
|
.titlebar {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// The separator for split headerbars
|
|
headerbar + separator {
|
|
background-color: $titlebar-divider;
|
|
}
|
|
|
|
> windowhandle > box {
|
|
padding: 0 $space-size;
|
|
|
|
&,
|
|
> box.start,
|
|
> box.end {
|
|
border-spacing: $space-size;
|
|
}
|
|
}
|
|
|
|
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
|
entry,
|
|
spinbutton,
|
|
button,
|
|
menubutton,
|
|
stackswitcher,
|
|
separator:not(.sidebar) {
|
|
margin-top: $space-size;
|
|
margin-bottom: $space-size;
|
|
}
|
|
|
|
menubutton > button,
|
|
spinbutton > button,
|
|
splitbutton > button,
|
|
splitbutton > menubutton,
|
|
.linked > menubutton,
|
|
entry > menubutton {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
button:not(.suggested-action):not(.destructive-action) {
|
|
@extend %titlebar-button;
|
|
}
|
|
|
|
button.suggested-action,
|
|
button.destructive-action {
|
|
&:disabled {
|
|
background-color: $titlebar-fill;
|
|
color: $titlebar-text-disabled;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
entry { @extend %titlebar-entry; }
|
|
|
|
.linked:not(.vertical) > entry:not(:only-child) { border-radius: $corner-radius; }
|
|
|
|
// FIXME: This is a hacky workaround.
|
|
.entry-tag {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
@if $variant == 'light' and $topbar == 'dark' {
|
|
stackswitcher { // reset
|
|
background-color: on($titlebar, fill);
|
|
|
|
&.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
|
|
&:checked {
|
|
background-color: rgba(white, 0.15);
|
|
color: $titlebar-text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
popover.background { // reset popovers
|
|
button:not(.suggested-action):not(.destructive-action):not(.flat) {
|
|
@extend %button-basic;
|
|
}
|
|
|
|
button.suggested-action,
|
|
button.destructive-action {
|
|
&:disabled {
|
|
background-color: $titlebar-fill;
|
|
color: $titlebar-text-disabled;
|
|
}
|
|
}
|
|
|
|
entry { @extend %entry-basic; }
|
|
|
|
entry,
|
|
spinbutton,
|
|
button,
|
|
menubutton,
|
|
stackswitcher {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
separator:not(.sidebar) {
|
|
// margin-top: $large-size / 4;
|
|
// margin-bottom: $large-size / 4;
|
|
background-color: $titlebar-divider;
|
|
}
|
|
|
|
switch {
|
|
margin-top: ($large-size - 24px) / 2;
|
|
margin-bottom: ($large-size - 24px) / 2;
|
|
}
|
|
|
|
&.selection-mode {
|
|
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
|
|
// but let's keep it for backwards compatibility.
|
|
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
|
|
background-color: $primary;
|
|
color: on($primary);
|
|
|
|
&:backdrop {
|
|
color: on($primary, secondary);
|
|
}
|
|
|
|
.subtitle:link { color: on($primary); }
|
|
|
|
button:not(.suggested-action):not(.destructive-action) {
|
|
@extend %button-on-dark;
|
|
}
|
|
|
|
.selection-menu {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
}
|
|
|
|
&.default-decoration {
|
|
min-height: $small-size;
|
|
padding: $space-size;
|
|
box-shadow: inset 0 1px highlight($titlebar);
|
|
|
|
windowcontrols {
|
|
button,
|
|
menubutton {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
menubutton button {
|
|
min-height: 20px;
|
|
min-width: 20px;
|
|
margin: 0;
|
|
padding: $space-size - 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.solid-csd & {
|
|
&:dir(rtl), &:dir(ltr) { // specificity bump
|
|
border-radius: 0;
|
|
box-shadow: none; // just remove the highlight
|
|
}
|
|
}
|
|
}
|
|
|
|
window.devel {
|
|
headerbar {
|
|
$c: $titlebar;
|
|
$gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
|
|
linear-gradient(to right, transparent 65%, transparentize($primary, 0.8)),
|
|
linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
|
|
@if $variant == 'dark' {
|
|
$gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
|
|
linear-gradient(to right, transparent 65%, transparentize($primary, 0.9)),
|
|
linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
|
|
}
|
|
|
|
background: $titlebar $gradient;
|
|
|
|
&:backdrop {
|
|
background: $titlebar cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
|
|
image($titlebar); /* background-color would flash */
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Pathbars *
|
|
************/
|
|
%pathbar_button,
|
|
pathbar > button {
|
|
padding-left: ($medium-size - 24px) / 2;
|
|
padding-right: ($medium-size - 24px) / 2;
|
|
border-radius: $corner-radius;
|
|
background-color: $overlay-focus;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:disabled { background-color: $overlay-normal; }
|
|
|
|
&:checked {
|
|
background-color: $overlay-checked;
|
|
color: $text;
|
|
|
|
&:hover {
|
|
background-color: $overlay-focus-hover;
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
label, image {
|
|
margin-left: $space-size / 2;
|
|
margin-right: $space-size / 2;
|
|
}
|
|
|
|
&.slider-button {
|
|
padding-left: (24px - 16px) / 2;
|
|
padding-right: (24px - 16px) / 2;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:last-child {
|
|
@include button(flat-checked);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* Tree Views *
|
|
**************/
|
|
columnview.view,
|
|
treeview.view {
|
|
border-left-color: $solid-border; // this is actually the tree lines color,
|
|
border-top-color: $solid-border; // while this is the grid lines color, better then nothing
|
|
|
|
// FIXME: Avoid transparency background-color being slightly darker
|
|
&:selected {
|
|
@extend %selected_items;
|
|
}
|
|
|
|
> rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
|
|
|
|
&:hover, &:selected {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
&.separator {
|
|
min-height: 1px + 2px * 2;
|
|
color: $divider;
|
|
}
|
|
|
|
// FIXME: box-shadow, background-color and background-image are not available here.
|
|
&:drop(active) {
|
|
box-shadow: none;
|
|
|
|
&.after { border-top-style: none; }
|
|
|
|
&.before { border-bottom-style: none; }
|
|
}
|
|
|
|
> dndtarget:drop(active) {
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
border-color: $overlay-selected;
|
|
|
|
&.after { border-top-style: none; }
|
|
|
|
&.before { border-bottom-style: none; }
|
|
}
|
|
|
|
&.expander {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
|
color: $text-secondary;
|
|
|
|
&:hover { color: $text; }
|
|
|
|
&:selected {
|
|
color: $text;
|
|
|
|
&:hover { color: $text; }
|
|
}
|
|
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
&.progressbar { // progress bar in treeviews
|
|
border-bottom: $space-size solid $primary;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
|
|
&:selected:hover { box-shadow: none; }
|
|
}
|
|
|
|
&.trough { // progress bar trough in treeviews
|
|
border-bottom: $space-size solid $track-disabled;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
|
|
&:selected:hover { box-shadow: none; }
|
|
}
|
|
|
|
> header {
|
|
> button {
|
|
@extend %row_activatable;
|
|
|
|
padding: 2px 6px;
|
|
border-style: none solid solid none;
|
|
border-width: 1px;
|
|
border-color: $divider;
|
|
border-radius: 0;
|
|
background-clip: border-box;
|
|
|
|
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
|
|
|
|
&, &:disabled { background-color: $base; }
|
|
|
|
&:last-child { border-right-style: none; }
|
|
}
|
|
}
|
|
|
|
button.dnd,
|
|
header.button.dnd { // for treeview-like derive widgets
|
|
padding: 2px 6px;
|
|
border-style: none solid solid;
|
|
border-width: 1px;
|
|
border-color: $divider;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background-color: $base;
|
|
background-clip: border-box;
|
|
color: $primary;
|
|
}
|
|
|
|
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
|
|
}
|
|
|
|
stack.view treeview.view {
|
|
min-height: $medium-size;
|
|
}
|
|
|
|
/*********
|
|
* Menus *
|
|
*********/
|
|
menubar {
|
|
padding: 0;
|
|
// box-shadow: inset 0 -1px $divider;
|
|
background-color: $titlebar;
|
|
color: $titlebar-text;
|
|
|
|
&:backdrop {
|
|
background-color: $titlebar-backdrop;
|
|
color: $titlebar-text-secondary;
|
|
}
|
|
|
|
.csd & { transition: $transition; }
|
|
|
|
> item {
|
|
transition: $transition;
|
|
min-height: 20px;
|
|
padding: $space-size - 2px $space-size + 2px;
|
|
color: $titlebar-text-secondary;
|
|
|
|
&:selected { // Seems like it :hover even with keyboard focus
|
|
transition: none;
|
|
background-color: $overlay-checked;
|
|
color: $titlebar-text;
|
|
}
|
|
|
|
&:disabled { color: $titlebar-text-secondary-disabled; }
|
|
|
|
label:disabled { color: inherit; } // to inherit the above color
|
|
}
|
|
|
|
//nested submenus
|
|
& > item popover.menu popover.menu {
|
|
margin-left: $space-size * 1.5;
|
|
}
|
|
|
|
& > item popover.menu.background popover.menu.background > contents {
|
|
margin: 0;
|
|
border-radius: $menu-radius; //including top
|
|
}
|
|
}
|
|
|
|
|
|
/**********************
|
|
* Popover Base Menus *
|
|
**********************/
|
|
popover.menu {
|
|
box.inline-buttons {
|
|
color: $text;
|
|
padding: 0 $space-size;
|
|
|
|
button.image-button.model {
|
|
min-height: $menuitem-size;
|
|
min-width: $menuitem-size;
|
|
padding: 0;
|
|
border: none;
|
|
outline: none;
|
|
transition: none;
|
|
|
|
&:selected { background: image($overlay-selected); }
|
|
}
|
|
}
|
|
|
|
box.circular-buttons {
|
|
padding: $space-size;
|
|
|
|
button.circular.image-button.model {
|
|
@extend %small-button;
|
|
padding: $space-size;
|
|
|
|
&:focus {
|
|
background-color: $overlay-selected;
|
|
}
|
|
}
|
|
}
|
|
|
|
arrow.left,
|
|
radio.left,
|
|
check.left {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
arrow.right,
|
|
radio.right,
|
|
check.right {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
label.title {
|
|
font-weight: bold;
|
|
padding: 4px ($space-size + 20px); //this will fall apart with font sizing
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Popovers *
|
|
************/
|
|
popover {
|
|
&.background {
|
|
font: initial;
|
|
|
|
&, &:backdrop {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
> arrow,
|
|
> contents {
|
|
transition: $transition-shadow;
|
|
padding: $space-size;
|
|
background-color: $surface;
|
|
border-radius: $menu-radius;
|
|
color: $text;
|
|
|
|
@if $rimless == 'true' {
|
|
border: none;
|
|
box-shadow: $shadow-z4;
|
|
} @else {
|
|
border: 1px solid highlight($surface);
|
|
background-clip: border-box;
|
|
box-shadow: 0 0 0 1px $window-border, $shadow-z5;
|
|
}
|
|
}
|
|
|
|
@if $rimless == 'false' and $variant == 'light' {
|
|
> arrow {
|
|
border: 1px solid $window-border;
|
|
}
|
|
|
|
> contents {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
> contents {
|
|
> list,
|
|
> .view,
|
|
> toolbar {
|
|
border-style: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
separator {
|
|
background-color: $divider;
|
|
margin: $space-size / 2 0;
|
|
}
|
|
|
|
list {
|
|
separator { margin: 0; }
|
|
|
|
> row {
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
stack > box { padding: 0; }
|
|
|
|
> box > button { margin: 0; }
|
|
}
|
|
|
|
// FIXME: Use the popover color instead of transparent as a workaround for .view
|
|
.view:not(:selected),
|
|
toolbar { background-color: $surface; }
|
|
|
|
&.menu button,
|
|
button.model {
|
|
min-height: 32px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
modelbutton {
|
|
transition: background-color $duration $ease-out;
|
|
min-height: $menuitem-size - $space-size;
|
|
min-width: $menuitem-size * 2;
|
|
padding: $space-size / 2 $space-size * 1.5;
|
|
color: $text;
|
|
font: initial;
|
|
border-radius: $corner-radius;
|
|
@extend %button-flat-simple;
|
|
|
|
&:focus:not(:hover) {
|
|
transition: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
accelerator {
|
|
color: $text-disabled;
|
|
margin-left: $space-size * 5;
|
|
|
|
&:disabled {
|
|
color: $divider;
|
|
}
|
|
}
|
|
|
|
arrow {
|
|
&.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
|
|
&.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
|
|
}
|
|
}
|
|
|
|
.osd &,
|
|
&.touch-selection,
|
|
&.magnifier {
|
|
background-color: transparent;
|
|
|
|
> arrow,
|
|
> contents {
|
|
@extend %osd;
|
|
}
|
|
}
|
|
|
|
&.touch-selection,
|
|
&.magnifier {
|
|
button { @extend %button-on-dark; }
|
|
}
|
|
}
|
|
|
|
magnifier {
|
|
background-color: $base;
|
|
}
|
|
|
|
/*************
|
|
* Notebooks *
|
|
*************/
|
|
|
|
%tabs_tab {
|
|
min-height: $small-size;
|
|
min-width: $small-size;
|
|
padding: $space-size / 2 $space-size;
|
|
border: none;
|
|
background-clip: padding-box;
|
|
font-weight: 500;
|
|
border-radius: $modal-radius;
|
|
@include button(flat-normal);
|
|
|
|
&:hover:not(:checked):not(:selected) {
|
|
@include button(flat-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(flat-disabled);
|
|
}
|
|
|
|
&:active {
|
|
@include button(flat-active);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:checked:not(:active), &:selected:not(:active) {
|
|
transition: $transition,
|
|
border-image $ripple-fade-in-duration $ease-out,
|
|
background-size 0ms,
|
|
background-image 0ms,
|
|
background-color 0ms;
|
|
background-color: if($variant == 'light', $base, rgba(white, 0.15));
|
|
color: $text;
|
|
box-shadow: 0 1px 3px rgba(black, 0.1);
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
}
|
|
}
|
|
|
|
notebook {
|
|
frame > paned > & > header,
|
|
&.frame > header { background-color: $fill; }
|
|
|
|
&, &.frame {
|
|
background-color: $base;
|
|
border-radius: $modal-radius + $space-size;
|
|
}
|
|
|
|
&.frame frame {
|
|
> border {
|
|
border: none;
|
|
border-radius: $modal-radius;
|
|
}
|
|
|
|
> list {
|
|
// @extend %circular_list;
|
|
|
|
row.activatable { border-radius: $corner-radius; }
|
|
}
|
|
}
|
|
|
|
> header {
|
|
border: none;
|
|
background-color: $fill;
|
|
// padding: $space-size / 2;
|
|
margin: $space-size / 2;
|
|
border-radius: $modal-radius + $space-size / 2;
|
|
// background-clip: border-box;
|
|
|
|
&.top > tabs > arrow {
|
|
@extend %notebook_vert_arrows;
|
|
|
|
border-top-style: none;
|
|
}
|
|
|
|
&.bottom > tabs > arrow {
|
|
@extend %notebook_vert_arrows;
|
|
|
|
border-bottom-style: none;
|
|
}
|
|
|
|
@at-root %notebook_vert_arrows {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
|
|
&.down {
|
|
margin-left: 0;
|
|
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
|
}
|
|
|
|
&.up {
|
|
margin-right: 0;
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
}
|
|
}
|
|
|
|
&.left > tabs > arrow {
|
|
@extend %notebook_horz_arrows;
|
|
|
|
border-left-style: none;
|
|
}
|
|
|
|
&.right > tabs > arrow {
|
|
@extend %notebook_horz_arrows;
|
|
|
|
border-right-style: none;
|
|
}
|
|
|
|
@at-root %notebook_horz_arrows {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
&.down {
|
|
margin-top: 0;
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
}
|
|
|
|
&.up {
|
|
margin-bottom: 0;
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
}
|
|
|
|
> tabs {
|
|
> arrow {
|
|
@extend %button-flat-simple;
|
|
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
> tab {
|
|
@extend %tabs_tab;
|
|
margin: $space-size / 2;
|
|
|
|
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
|
|
> box {
|
|
transition: background-color $duration $ease-out;
|
|
margin: -$space-size -12px;
|
|
padding: $space-size 12px;
|
|
|
|
&:drop(active) {
|
|
background-color: $divider;
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
// colors the button like the label, overridden otherwise
|
|
button.flat {
|
|
@extend %small-button;
|
|
|
|
&:last-child {
|
|
margin-left: $space-size;
|
|
margin-right: -$space-size / 2;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: -$space-size / 2;
|
|
margin-right: $space-size;
|
|
}
|
|
}
|
|
|
|
button.close-button {
|
|
min-width: $small-size;
|
|
min-height: $small-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
> tabs {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
&:not(:only-child) {
|
|
&:first-child { margin-left: 0; }
|
|
|
|
&:last-child { margin-right: 0; }
|
|
}
|
|
|
|
> tab {
|
|
&:not(:last-child) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
tab.reorderable-page { border-style: solid; }
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&.right {
|
|
> tabs {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
|
|
&:not(:only-child) {
|
|
&:first-child { margin-top: 0; }
|
|
|
|
&:last-child { margin-bottom: 0; }
|
|
}
|
|
|
|
> tab {
|
|
&:not(:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
tab.reorderable-page { border-style: solid; }
|
|
}
|
|
}
|
|
|
|
> menubutton > button.image-button {
|
|
padding: $space-size / 2;
|
|
min-width: $small-size;
|
|
min-height: $small-size;
|
|
margin: 0 $space-size / 2;
|
|
}
|
|
}
|
|
|
|
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
|
background-color: transparent;
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
|
|
transparentize(white, .2),
|
|
gtkalpha($primary, .4) 10%,
|
|
gtkalpha($primary, 0) 30%);
|
|
|
|
|
|
@mixin undershoot-gradient($dir, $color) {
|
|
background: linear-gradient(to #{$dir},
|
|
$color,
|
|
transparentize(black, 1) 20px);
|
|
}
|
|
|
|
@mixin need-attention-gradient($dir) {
|
|
background: linear-gradient(to #{$dir},
|
|
gtkalpha($primary, .5),
|
|
gtkalpha($primary, .3) 1px,
|
|
gtkalpha($primary, 0) 20px);
|
|
}
|
|
|
|
$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
|
|
transparentize(white, .2),
|
|
gtkalpha($primary, .4) 10%,
|
|
gtkalpha($primary, 0) 30%);
|
|
|
|
|
|
@mixin undershoot-gradient($dir, $color) {
|
|
background: linear-gradient(to #{$dir},
|
|
$color,
|
|
transparentize(black, 1) 20px);
|
|
}
|
|
|
|
@mixin need-attention-gradient($dir) {
|
|
background: linear-gradient(to #{$dir},
|
|
gtkalpha($primary, .5),
|
|
gtkalpha($primary, .3) 1px,
|
|
gtkalpha($primary, 0) 20px);
|
|
}
|
|
|
|
tabbar {
|
|
> revealer > box {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.box {
|
|
min-height: $medium-size;
|
|
border-bottom: none;
|
|
background: none;
|
|
}
|
|
|
|
scrolledwindow.pinned {
|
|
undershoot {
|
|
border: 0 solid $border;
|
|
}
|
|
|
|
&:dir(rtl) undershoot.left {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
&:dir(ltr) undershoot.right {
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
tabbox {
|
|
> background {
|
|
&:dir(ltr) {
|
|
box-shadow: inset -1px 0 $border;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
box-shadow: inset 1px 0 $border;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
undershoot {
|
|
transition: background 150ms ease-in-out;
|
|
|
|
&.left {
|
|
@include undershoot-gradient("right", $base);
|
|
}
|
|
|
|
&.right {
|
|
@include undershoot-gradient("left", $base);
|
|
}
|
|
}
|
|
|
|
.needs-attention-left undershoot.left {
|
|
@include need-attention-gradient("right");
|
|
}
|
|
|
|
.needs-attention-right undershoot.right {
|
|
@include need-attention-gradient("left");
|
|
}
|
|
|
|
tabbox {
|
|
background-color: $fill;
|
|
background-image: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid $border;
|
|
|
|
> background {
|
|
background: none;
|
|
}
|
|
|
|
> separator {
|
|
margin: 9px 0;
|
|
min-width: 1px;
|
|
transition: opacity 150ms ease-in-out;
|
|
|
|
&.hidden {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
> tabboxchild {
|
|
margin: 0 -3px;
|
|
padding: 0;
|
|
|
|
> tab {
|
|
@extend %tabs_tab;
|
|
margin: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
tab {
|
|
@extend %tabs_tab;
|
|
|
|
&.needs-attention {
|
|
background-image: $tab_needs_attention_gradient;
|
|
|
|
&:hover {
|
|
background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
|
|
}
|
|
}
|
|
}
|
|
|
|
.start-action,
|
|
.end-action {
|
|
background-color: $fill;
|
|
background-clip: padding-box;
|
|
border-color: $border;
|
|
border-style: solid;
|
|
transition: background 150ms ease-in-out;
|
|
|
|
button {
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.start-action:dir(ltr),
|
|
.end-action:dir(rtl) {
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.start-action:dir(rtl),
|
|
.end-action:dir(ltr) {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
&:not(.inline) {
|
|
scrolledwindow.pinned {
|
|
undershoot {
|
|
border-color: $border;
|
|
}
|
|
}
|
|
|
|
undershoot {
|
|
&.left {
|
|
@include undershoot-gradient("right", $titlebar);
|
|
}
|
|
|
|
&.right {
|
|
@include undershoot-gradient("left", $titlebar);
|
|
}
|
|
}
|
|
|
|
.needs-attention-left undershoot.left {
|
|
@include need-attention-gradient("right");
|
|
}
|
|
|
|
.needs-attention-right undershoot.right {
|
|
@include need-attention-gradient("left");
|
|
}
|
|
|
|
tabbox > background {
|
|
background-color: $titlebar;
|
|
}
|
|
|
|
.start-action,
|
|
.end-action {
|
|
background-color: gtkalpha($titlebar, .6);
|
|
border-color: $border;
|
|
}
|
|
|
|
&:backdrop .box {
|
|
background-color: $titlebar-backdrop;
|
|
transition: $transition;
|
|
}
|
|
}
|
|
}
|
|
|
|
dnd tab {
|
|
min-height: $small-size;
|
|
background-color: $titlebar;
|
|
color: $titlebar-text;
|
|
|
|
&.needs-attention {
|
|
background-image: $tab_needs_attention_gradient;
|
|
}
|
|
|
|
box-shadow: 0 1px 5px 1px transparentize(black, .91),
|
|
0 2px 14px 3px transparentize(black, .95),
|
|
0 0 0 1px transparentize(black, .95);
|
|
|
|
outline: 1px solid $window-border;
|
|
outline-offset: -1px;
|
|
|
|
margin: $small-size;
|
|
}
|
|
|
|
tabbar,
|
|
dnd {
|
|
tab {
|
|
padding: $space-size;
|
|
|
|
button.image-button {
|
|
padding: 0;
|
|
margin: 0;
|
|
min-width: $small-size;
|
|
min-height: $small-size;
|
|
border-radius: $circular-radius;
|
|
|
|
&.tab-close-button {
|
|
margin-right: -$space-size / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tabview:drop(active),
|
|
tabbox:drop(active) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
/**************
|
|
* Scrollbars *
|
|
**************/
|
|
scrollbar {
|
|
$_slider_min_length: 24px;
|
|
|
|
transition: $transition;
|
|
background-color: $base;
|
|
box-shadow: none;
|
|
outline: none;
|
|
|
|
// scrollbar border
|
|
&.top { border-bottom: 1px solid $divider; }
|
|
&.bottom { border-top: 1px solid $divider; }
|
|
&.left { border-right: 1px solid $divider; }
|
|
&.right { border-left: 1px solid $divider; }
|
|
|
|
// slider
|
|
> range > trough {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
outline: none;
|
|
|
|
> slider {
|
|
transition: background-color $duration $ease-out;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
border: 4px solid transparent;
|
|
border-radius: $circular-radius;
|
|
background-clip: padding-box;
|
|
background-color: $text-disabled;
|
|
box-shadow: none;
|
|
outline: none;
|
|
|
|
&:hover { background-color: $text-secondary; }
|
|
|
|
&:active { background-color: $text; }
|
|
|
|
&:disabled { background-color: $text-secondary-disabled; }
|
|
}
|
|
}
|
|
|
|
> range.fine-tune {
|
|
> trough > slider {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
&.horizontal > trough > slider { margin: 2px 0; }
|
|
|
|
&.vertical > trough > slider { margin: 0 2px; }
|
|
}
|
|
|
|
&.overlay-indicator {
|
|
&:not(.fine-tune) > range > trough > slider {
|
|
transition-property: background-color, min-height, min-width;
|
|
}
|
|
|
|
&:not(.dragging):not(.hovering) {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
|
|
> range > trough > slider {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
margin: 4px - 1px;
|
|
border: 1px solid rgba($base, 0.3);
|
|
}
|
|
|
|
button {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
margin: 4px - 1px;
|
|
border: 1px solid rgba($base, 0.3);
|
|
border-radius: $circular-radius;
|
|
background-color: $text-disabled;
|
|
background-clip: padding-box;
|
|
-gtk-icon-source: none;
|
|
|
|
&:disabled { background-color: $text-secondary-disabled; }
|
|
}
|
|
|
|
&.horizontal {
|
|
> range > trough > slider { min-width: $_slider_min_length; }
|
|
|
|
button { min-width: 8px; }
|
|
}
|
|
|
|
&.vertical {
|
|
> range > trough > slider { min-height: $_slider_min_length; }
|
|
|
|
button { min-height: 8px; }
|
|
}
|
|
}
|
|
|
|
&.dragging,
|
|
&.hovering { background-color: rgba($surface, 0.9); }
|
|
}
|
|
|
|
&.horizontal > range > trough > slider { min-width: $_slider_min_length; }
|
|
|
|
&.vertical > range > trough > slider { min-height: $_slider_min_length; }
|
|
|
|
// button styling
|
|
button {
|
|
@extend %button-flat-simple;
|
|
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
// button icons
|
|
&.vertical {
|
|
button {
|
|
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
|
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
button {
|
|
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
|
|
|
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**********
|
|
* Switch *
|
|
**********/
|
|
switch {
|
|
transition: all $duration $ease-out;
|
|
margin: $space-size 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: $circular-radius;
|
|
background-color: $text-disabled;
|
|
background-clip: border-box;
|
|
font-size: 0;
|
|
color: transparent;
|
|
|
|
&:checked {
|
|
background-color: $assets-color;
|
|
}
|
|
|
|
&:disabled { opacity: 0.5; }
|
|
|
|
// hide on/off icons for >=3.24.5
|
|
image {
|
|
margin: -8px;
|
|
}
|
|
|
|
> slider {
|
|
transition: all $duration $ease-out;
|
|
min-width: $small-size - 6px;
|
|
min-height: $small-size - 6px;
|
|
margin: $space-size / 2;
|
|
border-radius: $circular-radius;
|
|
outline: none;
|
|
box-shadow: $shadow-z3;
|
|
background-color: white;
|
|
border: none;
|
|
}
|
|
|
|
&:focus slider,
|
|
&:hover slider,
|
|
&:focus:hover slider { box-shadow: 0 0 0 6px $divider; }
|
|
}
|
|
|
|
|
|
/*************************
|
|
* Check and Radio items *
|
|
*************************/
|
|
// draw regular check and radio items using our PNG assets
|
|
// all assets are rendered from assets.svg. never add pngs directly
|
|
|
|
// selection-mode
|
|
.view.content-view.check:not(list),
|
|
.content-view .tile check:not(list) {
|
|
min-height: 40px;
|
|
min-width: 40px;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
|
|
&:hover, &:active { box-shadow: 0 0 0 10px $divider; }
|
|
|
|
@each $s, $as in ('', '-unchecked'),
|
|
(':checked', '-checked') {
|
|
&#{$s} {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
|
|
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
|
|
}
|
|
}
|
|
}
|
|
|
|
checkbutton,
|
|
radiobutton {
|
|
outline: none;
|
|
border-spacing: $space-size / 2;
|
|
}
|
|
|
|
check,
|
|
radio {
|
|
min-height: 20px;
|
|
min-width: 20px;
|
|
margin: $space-size / 2;
|
|
padding: 0;
|
|
border-radius: $circular-radius;
|
|
border: none;
|
|
color: transparent;
|
|
background-color: $divider;
|
|
transition: $transition,
|
|
box-shadow $ripple-fade-out-duration / 2 $ease-out;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 0 6px $fill;
|
|
background-color: rgba($text, 0.15);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 0 6px $divider;
|
|
background-color: rgba($text, 0.20);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: $fill;
|
|
}
|
|
|
|
&:checked, &:indeterminate {
|
|
color: on($assets-color);
|
|
background-color: $assets-color;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 0 6px rgba($assets-color, 0.15);
|
|
background-color: lighten($assets-color, 10%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 0 6px rgba($assets-color, 0.20);
|
|
background-color: $assets-color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: on($assets-color, secondary);
|
|
background-color: rgba($assets-color, 0.35);
|
|
}
|
|
}
|
|
|
|
popover modelbutton.flat & {
|
|
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
|
|
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
|
|
box-shadow: none;
|
|
background-image: none;
|
|
}
|
|
|
|
&.left:dir(rtl) {
|
|
margin-left: -$space-size / 2;
|
|
margin-right: $space-size;
|
|
}
|
|
|
|
&.right:dir(ltr) {
|
|
margin-left: $space-size;
|
|
margin-right: -$space-size / 2;
|
|
}
|
|
}
|
|
|
|
popover.menu & {
|
|
transition: none;
|
|
margin: 0; // this is a workaround for a menu check/radio size allocation issue
|
|
padding: 0;
|
|
|
|
&:dir(ltr) {
|
|
margin-right: $space-size;
|
|
margin-left: -$space-size / 2;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
margin-left: $space-size;
|
|
margin-right: -$space-size / 2;
|
|
}
|
|
|
|
&, &:hover, &:disabled, &:checked:hover, &:indeterminate:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
%check,
|
|
check {
|
|
-gtk-icon-size: 20px;
|
|
|
|
&:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic@2.svg"))); }
|
|
&:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic@2.svg"))); }
|
|
}
|
|
|
|
%radio,
|
|
radio {
|
|
-gtk-icon-size: 20px;
|
|
|
|
&:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/radio-checked-symbolic@2.svg"))); }
|
|
&:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/radio-mixed-symbolic@2.svg"))); }
|
|
}
|
|
|
|
%small_check,
|
|
// treeview.view check,
|
|
// columnview.view check,
|
|
popover.menu check {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
-gtk-icon-size: 16px;
|
|
|
|
&:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic@2.svg"))); }
|
|
&:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic@2.svg"))); }
|
|
}
|
|
|
|
%small_radio,
|
|
// treeview.view radio,
|
|
// columnview.view radio,
|
|
popover.menu radio {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
-gtk-icon-size: 16px;
|
|
|
|
&:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic@2.svg"))); }
|
|
&:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic@2.svg"))); }
|
|
}
|
|
|
|
// ANIMATION:
|
|
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
|
|
// the transformation is set on the active state and it get reset on the checked state.
|
|
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
|
|
|
|
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
|
|
|
|
treeview.view,
|
|
columnview.view {
|
|
radio, check {
|
|
padding: 0;
|
|
margin: 0;
|
|
transition: none;
|
|
|
|
&, &:hover, &:disabled, &:checked:hover, &:indeterminate:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&:hover, &:selected, &:focus {
|
|
check, radio {
|
|
box-shadow: none;
|
|
|
|
&:checked {
|
|
color: on($assets-color);
|
|
background-color: $assets-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* GtkScale *
|
|
************/
|
|
|
|
scale {
|
|
// sizing
|
|
$_marks_length: 8px;
|
|
$_marks_distance: 7px;
|
|
|
|
$trough_size: 2px;
|
|
$finetune_trough_size: 4px;
|
|
|
|
$slider_size: 18px;
|
|
|
|
$slider_margin: -($slider_size - $trough_size) / 2;
|
|
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
|
|
|
|
$color_slider_margin: -($slider_size) * 3 / 4;
|
|
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
|
|
|
|
min-height: $trough_size;
|
|
min-width: $trough_size;
|
|
|
|
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
|
|
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
|
|
|
|
> trough {
|
|
transition: background-color $duration $ease-out;
|
|
outline: none;
|
|
background-color: $track;
|
|
|
|
&:disabled { background-color: $track-disabled; }
|
|
|
|
// the colored part of the backing bit
|
|
> highlight {
|
|
transition: background-image $duration $ease-out;
|
|
background-image: image($primary);
|
|
|
|
&:disabled {
|
|
background-color: $background;
|
|
background-image: image($text-secondary-disabled);
|
|
}
|
|
}
|
|
|
|
// this is another differently styled part of the backing bit, the most relevant use case is for example
|
|
// in media player to indicate how much video stream as been cached
|
|
> fill {
|
|
transition: background-color $duration $ease-out;
|
|
background-color: $track;
|
|
|
|
&:disabled { background-color: transparent; }
|
|
}
|
|
|
|
// the slider is inside the trough, so to have make it bigger there's a negative margin
|
|
> slider {
|
|
min-height: $slider_size;
|
|
min-width: $slider_size;
|
|
margin: $slider_margin;
|
|
transition: all $duration $ease-out;
|
|
border-radius: $circular-radius;
|
|
color: $primary;
|
|
background-color: $base;
|
|
box-shadow: inset 0 0 0 2px $primary;
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 2px $primary, 0 0 0 8px $divider;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: inset 0 0 0 4px $primary, 0 0 0 8px $divider;
|
|
}
|
|
|
|
&:disabled {
|
|
box-shadow: inset 0 0 0 2px $text-secondary-disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
// click-and-hold the slider to activate
|
|
&.fine-tune {
|
|
&.horizontal {
|
|
min-height: $finetune_trough_size;
|
|
padding-top: ($medium-size - $finetune_trough_size) / 2;
|
|
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
|
|
}
|
|
|
|
&.vertical {
|
|
min-width: $finetune_trough_size;
|
|
padding-left: ($medium-size - $finetune_trough_size) / 2;
|
|
padding-right: ($medium-size - $finetune_trough_size) / 2;
|
|
}
|
|
|
|
// to make the trough grow in fine-tune mode
|
|
> trough > slider { margin: $finetune_slider_margin; }
|
|
}
|
|
|
|
> marks,
|
|
> value { color: $text-secondary; }
|
|
|
|
indicator {
|
|
background-color: $track;
|
|
color: transparent;
|
|
}
|
|
|
|
&.marks-before:not(.marks-after),
|
|
&.marks-after:not(.marks-before) {
|
|
> trough > slider {
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
|
|
//marks margins
|
|
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
|
|
(horizontal, bottom, bottom, top),
|
|
(vertical, top, left, right),
|
|
(vertical, bottom, right, left) {
|
|
&.#{$scale_orient} > marks {
|
|
&.#{$marks_class} {
|
|
margin-#{$marks_margin}: $_marks_distance;
|
|
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
|
|
}
|
|
}
|
|
|
|
&.#{$scale_orient}.fine-tune > marks {
|
|
&.#{$marks_class} {
|
|
margin-#{$marks_margin}: $_marks_distance - 1px;
|
|
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
indicator {
|
|
min-height: $_marks_length;
|
|
min-width: 1px;
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
indicator {
|
|
min-height: 1px;
|
|
min-width: $_marks_length;
|
|
}
|
|
}
|
|
|
|
// *WARNING* scale with marks madness following
|
|
|
|
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
|
|
('vertical', 'vert') {
|
|
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
|
|
('marks-after', 'marks-after:not(.marks-before)') {
|
|
&.#{$dir_class}.#{$marks_class} {
|
|
> trough > slider {
|
|
transition: background-color $duration $ease-out,
|
|
background-size $ripple-fade-out-duration $ease-out,
|
|
background-image $ripple-fade-out-opacity-duration $ease-out;
|
|
min-height: 32px;
|
|
min-width: 32px;
|
|
margin: -15px;
|
|
border-radius: 50%;
|
|
background-size: auto, 1000% 1000%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-color: transparent;
|
|
|
|
&, &:hover, &:active, &:disabled {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:focus { background-color: $overlay-focus; }
|
|
|
|
&:hover { background-color: $overlay-hover; }
|
|
|
|
&:focus:hover { background-color: $overlay-focus-hover; }
|
|
|
|
&:active {
|
|
background-size: auto, 0% 0%;
|
|
background-color: $overlay-hover;
|
|
}
|
|
|
|
@each $state, $state_infix in ('', ''),
|
|
(':disabled', '-disabled') {
|
|
&#{$state} {
|
|
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
|
|
|
|
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
|
|
|
|
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.color {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
|
|
&.horizontal {
|
|
padding: 0 0 12px 0;
|
|
|
|
> trough > slider {
|
|
&:dir(ltr), &:dir(rtl) { // specificity bump
|
|
margin-bottom: $color_slider_margin;
|
|
margin-top: $color_marks_slider_margin;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
&:dir(ltr) {
|
|
padding: 0 0 0 12px;
|
|
|
|
slider {
|
|
margin-left: $color_slider_margin;
|
|
margin-right: $color_marks_slider_margin;
|
|
}
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
padding: 0 12px 0 0;
|
|
|
|
> trough > slider {
|
|
margin-right: $color_slider_margin;
|
|
margin-left: $color_marks_slider_margin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*****************
|
|
* Progress bars *
|
|
*****************/
|
|
progressbar {
|
|
// sizing
|
|
&.horizontal {
|
|
trough,
|
|
progress { min-height: $space-size; }
|
|
}
|
|
|
|
&.vertical {
|
|
trough,
|
|
progress { min-width: $space-size; }
|
|
}
|
|
|
|
// FIXME: insensitive state missing and some other state should be set probably
|
|
color: $text-secondary;
|
|
font-size: smaller;
|
|
|
|
trough {
|
|
border-radius: $corner-radius;
|
|
background-color: $track-disabled;
|
|
}
|
|
|
|
progress {
|
|
border-radius: $corner-radius;
|
|
background-color: $primary;
|
|
}
|
|
|
|
&.osd { // progressbar.osd used for epiphany page loading progress
|
|
min-width: $space-size;
|
|
min-height: $space-size;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
trough { background-color: transparent; }
|
|
|
|
progress { background-color: $primary; }
|
|
}
|
|
|
|
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
|
|
}
|
|
|
|
|
|
/*************
|
|
* Level Bar *
|
|
*************/
|
|
levelbar {
|
|
&.horizontal {
|
|
block { min-height: $space-size; }
|
|
|
|
&.discrete block {
|
|
min-width: $medium-size;
|
|
|
|
&:not(:last-child) { margin-right: 2px; }
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
block { min-width: $space-size; }
|
|
|
|
&.discrete block {
|
|
min-height: $medium-size;
|
|
|
|
&:not(:last-child) { margin-bottom: 2px; }
|
|
}
|
|
}
|
|
|
|
// imitate the entry style
|
|
trough {
|
|
// padding: 2px;
|
|
border-radius: $corner-radius;
|
|
// box-shadow: $shadow-z1;
|
|
// background-color: $base;
|
|
|
|
// &:disabled { background-color: $base-alt; }
|
|
}
|
|
|
|
block {
|
|
&.low { background-color: $warning; }
|
|
|
|
&.high,
|
|
&:not(.empty) { background-color: $primary; }
|
|
|
|
&.full { background-color: $success; }
|
|
|
|
&.empty { background-color: $track-disabled; }
|
|
}
|
|
}
|
|
|
|
|
|
/****************
|
|
* Print dialog *
|
|
*****************/
|
|
window.dialog.print {
|
|
drawing {
|
|
color: $text;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
paper {
|
|
padding: 0;
|
|
border: 1px solid $divider;
|
|
background-color: $base;
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
.dialog-action-box { margin: 12px; }
|
|
}
|
|
|
|
|
|
/**********
|
|
* Frames *
|
|
**********/
|
|
|
|
frame,
|
|
.frame {
|
|
border: 1px solid $divider;
|
|
|
|
> list { border: none; }
|
|
|
|
&.view { border-radius: $corner-radius; }
|
|
|
|
&.flat { border-style: none; }
|
|
}
|
|
|
|
frame {
|
|
border-radius: $corner-radius;
|
|
|
|
> label {
|
|
margin: 4px;
|
|
}
|
|
|
|
&.flat > border,
|
|
statusbar & > border { border: none; } // for backward compatibility
|
|
}
|
|
|
|
actionbar > revealer > box {
|
|
padding: $space-size;
|
|
border-spacing: $space-size;
|
|
box-shadow: inset 0 1px $border;
|
|
background-color: $base;
|
|
background-clip: border-box;
|
|
border: none;
|
|
|
|
button, entry,
|
|
menubutton, menubutton > button,
|
|
splitbutton, splitbutton > button,
|
|
spinbutton {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
statusbar {
|
|
padding: $space-size $space-size * 3;
|
|
}
|
|
|
|
scrolledwindow {
|
|
viewport.frame { // avoid double borders when viewport inside scrolled window
|
|
border: none;
|
|
}
|
|
|
|
stack &.frame {
|
|
// border-radius: $corner-radius;
|
|
|
|
viewport.frame list { border: none; }
|
|
}
|
|
|
|
// This is used when content is touch-dragged past boundaries.
|
|
// draws a box on top of the content, the size changes programmatically.
|
|
@at-root overshoot {
|
|
&.top { @include overshoot(top); }
|
|
|
|
&.bottom { @include overshoot(bottom); }
|
|
|
|
&.left { @include overshoot(left); }
|
|
|
|
&.right { @include overshoot(right); }
|
|
}
|
|
|
|
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
|
// @at-root undershoot {
|
|
// &.top { @include undershoot(top); }
|
|
//
|
|
// &.bottom { @include undershoot(bottom); }
|
|
//
|
|
// &.left { @include undershoot(left); }
|
|
//
|
|
// &.right { @include undershoot(right); }
|
|
// }
|
|
|
|
@at-root junction { // the small square between two scrollbars
|
|
border: none;
|
|
// background-color: $base;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
// vbox and hbox separators
|
|
separator {
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
background-color: $divider;
|
|
|
|
&.spacer {
|
|
@extend %hide_separators;
|
|
}
|
|
}
|
|
|
|
%hide_separators {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
|
|
/*********
|
|
* Lists *
|
|
*********/
|
|
|
|
%circular_list {
|
|
border-radius: $corner-radius + 1px;
|
|
box-shadow: none;
|
|
border: 1px solid $border;
|
|
}
|
|
|
|
%circular_row {
|
|
border-radius: 0;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: $corner-radius;
|
|
border-top-right-radius: $corner-radius;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-left-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid $border;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
listview,
|
|
list {
|
|
border-color: $border;
|
|
background-color: $base;
|
|
background-clip: padding-box;
|
|
|
|
> row {
|
|
padding: $space-size;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
> row.expander { padding: 0px; }
|
|
> row.expander .row-header { padding: 2px; }
|
|
|
|
&.horizontal row.separator:not(:last-child),
|
|
&.separators.horizontal > row:not(.separator):not(:last-child) {
|
|
border-left: 1px solid $border;
|
|
}
|
|
|
|
&:not(.horizontal) row.separator:not(:last-child),
|
|
&.separators:not(.horizontal) > row:not(.separator):not(:last-child) {
|
|
border-bottom: 1px solid $border;
|
|
}
|
|
}
|
|
|
|
list.frame { border-radius: $corner-radius; }
|
|
|
|
listview.view {
|
|
color: $text;
|
|
background-color: transparent;
|
|
|
|
popover.menu & {
|
|
padding: 0;
|
|
border-radius: $corner-radius;
|
|
|
|
> row {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
row {
|
|
color: $text-secondary;
|
|
background-clip: padding-box;
|
|
|
|
label.subtitle {
|
|
font-size: smaller;
|
|
@extend .dim-label;
|
|
}
|
|
|
|
> box.header {
|
|
margin-left: $space-size * 2;
|
|
margin-right: $space-size * 2;
|
|
min-height: $large-size;
|
|
|
|
> .icon:disabled {
|
|
filter: opacity(0.35);
|
|
}
|
|
|
|
> box.title {
|
|
margin-top: $space-size;
|
|
margin-bottom: $space-size;
|
|
border-spacing: $space-size / 2;
|
|
}
|
|
}
|
|
|
|
@at-root %row_activatable, &.activatable {
|
|
transition: $transition,
|
|
background-size $ripple-fade-out-duration $ease-out,
|
|
background-image $ripple-fade-out-opacity-duration $ease-out,
|
|
font-weight 0;
|
|
outline: none;
|
|
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%;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
color: $text;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
&:hover, &.has-open-popup {
|
|
color: $text;
|
|
background-color: $overlay-normal;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&: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, $overlay-normal 10%, transparent 0%);
|
|
background-size: 0% 0%;
|
|
background-color: $overlay-normal;
|
|
color: $text;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:selected {
|
|
background-color: $overlay-selected;
|
|
|
|
&:hover {
|
|
background-color: $overlay-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
button &.activatable {
|
|
&:focus, &:hover, &:active {
|
|
box-shadow: none;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
button:checked &.activatable {
|
|
color: on($primary);
|
|
}
|
|
|
|
&:selected {
|
|
background-color: $overlay-selected;
|
|
color: inherit; // for overlays
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
background-color: $overlay-hover;
|
|
}
|
|
|
|
&:focus,
|
|
&:focus-visible:focus-within {
|
|
outline: none;
|
|
background-color: $overlay-focus;
|
|
|
|
&:hover { background-color: $overlay-focus-hover; }
|
|
}
|
|
|
|
image,
|
|
label { color: $text; }
|
|
|
|
button image,
|
|
button label { color: inherit; }
|
|
|
|
&:disabled {
|
|
image,
|
|
label { color: $text-disabled; }
|
|
}
|
|
}
|
|
}
|
|
|
|
.rich-list { /* rich lists usually containing other widgets than just labels/text */
|
|
& > row {
|
|
padding: $space-size * 1.5 $space-size * 2;
|
|
min-height: 32px; /* should be tall even when only containing a label */
|
|
|
|
&:last-child { border-bottom: none; }
|
|
|
|
& > box {
|
|
border-spacing: $space-size * 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// AdwActionRow
|
|
row {
|
|
label.subtitle {
|
|
font-size: smaller;
|
|
@extend .dim-label;
|
|
}
|
|
|
|
> box.header {
|
|
margin-left: $space-size * 2;
|
|
margin-right: $space-size * 2;
|
|
border-spacing: $space-size;
|
|
min-height: 50px;
|
|
|
|
> .icon:disabled {
|
|
filter: opacity(0.45);
|
|
}
|
|
|
|
> box.title {
|
|
margin-top: $space-size;
|
|
margin-bottom: $space-size;
|
|
border-spacing: $space-size / 2;
|
|
padding: 0;
|
|
|
|
// Specificity bump for header bar
|
|
&,
|
|
> .title,
|
|
> .subtitle {
|
|
padding: 0;
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
> .prefixes,
|
|
> .suffixes {
|
|
border-spacing: $space-size;
|
|
}
|
|
|
|
> .icon,
|
|
> .prefixes {
|
|
&:dir(ltr) { margin-right: $space-size; }
|
|
&:dir(rtl) { margin-left: $space-size; }
|
|
}
|
|
}
|
|
}
|
|
|
|
// AdwEntryRow
|
|
row.entry {
|
|
&:not(:selected).activatable.focused:hover,
|
|
&:not(:selected).activatable.focused:active {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.edit-icon, .indicator {
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.edit-icon:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.indicator {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
&.monospace {
|
|
font-family: inherit;
|
|
|
|
text {
|
|
font-family: monospace;
|
|
}
|
|
}
|
|
|
|
@each $e_type, $e_color in (error, $error),
|
|
(warning, $warning),
|
|
(success, $success) {
|
|
&.#{$e_type} {
|
|
@include entry($e_color);
|
|
|
|
text {
|
|
> selection:focus-within { background-color: gtkalpha($e_color, .2); }
|
|
|
|
> cursor-handle > contents { background-color: currentColor; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// AdwComboRow
|
|
row.combo {
|
|
image.dropdown-arrow:disabled {
|
|
filter: opacity(0.45);
|
|
}
|
|
|
|
listview.inline {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
|
|
&, &:disabled {
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
popover > contents {
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
// AdwExpanderRow
|
|
@mixin margin-start($margin) {
|
|
&:dir(ltr) {
|
|
margin-left: $margin;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
margin-right: $margin;
|
|
}
|
|
}
|
|
|
|
%boxed_list_row {
|
|
border-bottom: 1px solid $border;
|
|
|
|
&:not(:selected).activatable {
|
|
&:hover {
|
|
background-color: $overlay-hover;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $overlay-active;
|
|
}
|
|
|
|
&.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 {
|
|
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;
|
|
@include margin-start($space-size);
|
|
|
|
&:dir(ltr) {
|
|
-gtk-icon-transform: rotate(0.5turn);
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
-gtk-icon-transform: rotate(-0.5turn);
|
|
}
|
|
|
|
&:disabled {
|
|
filter: opacity(0.45);
|
|
}
|
|
}
|
|
|
|
&:checked image.expander-row-arrow {
|
|
-gtk-icon-transform: rotate(0turn);
|
|
opacity: 1;
|
|
|
|
&:not(:disabled) {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.osd &:checked image.expander-row-arrow:not(:disabled) {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// Boxed Lists
|
|
|
|
// Deprecated: use .boxed-list instead
|
|
list.content,
|
|
list.boxed-list {
|
|
@extend %circular_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: $corner-radius;
|
|
border-top-right-radius: $corner-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: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
columnview {
|
|
// move padding to child cells
|
|
> listview > row {
|
|
padding: 0;
|
|
|
|
// align horizontal sizing with header buttons
|
|
> cell {
|
|
padding: $space-size + 2px $space-size;
|
|
|
|
&:not(:first-child) {
|
|
border-left: 1px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// make column separators visible when :show-column-separators is true
|
|
&.column-separators > listview > row > cell {
|
|
border-left-color: $border;
|
|
}
|
|
|
|
// shrink vertically for .data-table
|
|
&.data-table > listview > row > cell {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
treeexpander {
|
|
border-spacing: $space-size;
|
|
}
|
|
|
|
columnview {
|
|
row:not(:selected) cell editablelabel {
|
|
&:not(.editing):focus-within {
|
|
outline: 2px solid $overlay-selected;
|
|
}
|
|
|
|
&.editing:focus-within {
|
|
outline: 2px solid $primary;
|
|
}
|
|
|
|
&.editing text selection {
|
|
color: on($primary);
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*********************
|
|
* App Notifications *
|
|
*********************/
|
|
.app-notification {
|
|
@extend %toolbar_osd;
|
|
margin: $space-size;
|
|
border-spacing: $space-size;
|
|
padding: $space-size;
|
|
border: none;
|
|
background-image: none;
|
|
|
|
button {
|
|
@extend %button-flat;
|
|
|
|
&.text-button:not(:disabled) { color: $primary; }
|
|
}
|
|
|
|
&.frame,
|
|
border { border: none; }
|
|
}
|
|
|
|
|
|
/*************
|
|
* Expanders *
|
|
*************/
|
|
expander {
|
|
transition: all $duration $ease-out;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
color: $text-secondary;
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
|
&:hover, &:active { color: $text; }
|
|
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
expander-widget {
|
|
> box > title {
|
|
border-radius: $corner-radius;
|
|
|
|
&:hover > expander {
|
|
color: $text-secondary; //only lightens the icon
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation-sidebar,
|
|
placessidebar,
|
|
stackswitcher,
|
|
expander-widget {
|
|
&:not(decoration):not(window):drop(active):focus,
|
|
&:not(decoration):not(window):drop(active) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Calendar *
|
|
************/
|
|
calendar {
|
|
padding: 0;
|
|
border: 1px solid $divider;
|
|
border-radius: $corner-radius;
|
|
color: $text;
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
> header {
|
|
padding: $space-size / 2;
|
|
border-bottom: 1px solid $divider;
|
|
|
|
> button {
|
|
min-height: $small-size;
|
|
|
|
@extend %button-flat-simple;
|
|
}
|
|
}
|
|
|
|
> grid {
|
|
margin: $space-size / 2;
|
|
|
|
> label {
|
|
border-radius: $corner-radius;
|
|
margin: 0;
|
|
}
|
|
|
|
> label.today {
|
|
@extend %selected_items_color;
|
|
|
|
&:selected {
|
|
box-shadow: none;
|
|
@extend %selected_items_primary;
|
|
}
|
|
}
|
|
|
|
> label:focus {
|
|
outline-style: none;
|
|
}
|
|
|
|
> label.day-number {
|
|
padding: $space-size;
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
> label.day-number.other-month {
|
|
color: gtkalpha(currentColor, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/***********
|
|
* Dialogs *
|
|
***********/
|
|
|
|
%dialog_action_button {
|
|
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; }
|
|
}
|
|
|
|
window.dialog.message { // Message Dialog styling
|
|
&.background { background-color: $surface; }
|
|
|
|
box.dialog-vbox.vertical {
|
|
margin-top: $space-size;
|
|
border-spacing: $space-size * 4;
|
|
|
|
> box.vertical {
|
|
margin-bottom: $space-size;
|
|
}
|
|
|
|
> box > box > box > label.title {
|
|
font-weight: 800;
|
|
font-size: 15pt;
|
|
}
|
|
}
|
|
|
|
.titlebar {
|
|
min-height: $small-size;
|
|
border-style: none;
|
|
box-shadow: inset 0 1px highlight($surface);
|
|
background-color: $surface;
|
|
color: $text;
|
|
|
|
&:backdrop {
|
|
background-color: $surface;
|
|
color: $text-secondary;
|
|
}
|
|
}
|
|
|
|
.dialog-action-area {
|
|
// margin-top: $space-size;
|
|
border-top: 1px solid $border;
|
|
margin: 0;
|
|
border-spacing: 0;
|
|
|
|
> button {
|
|
border: none;
|
|
@extend %button-flat;
|
|
@extend %dialog_action_button;
|
|
|
|
&:not(:last-child) { border-right: 1px solid $border; }
|
|
|
|
&.suggested-action:not(:disabled) {
|
|
color: $suggested;
|
|
}
|
|
|
|
&.destructive-action:not(:disabled) {
|
|
color: $destructive;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// About dialog
|
|
window.aboutdialog {
|
|
&.background.csd {
|
|
scrolledwindow.frame {
|
|
&, > viewport.view, > textview.view, > textview.view > text {
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/********************
|
|
* AdwMessageDialog *
|
|
********************/
|
|
|
|
window.messagedialog {
|
|
background-color: $surface;
|
|
color: $text;
|
|
|
|
.message-area {
|
|
padding: 24px 30px;
|
|
border-spacing: 10px;
|
|
}
|
|
|
|
.response-area > box > button {
|
|
@extend %button-flat;
|
|
@extend %dialog_action_button;
|
|
|
|
&.suggested {
|
|
color: $primary;
|
|
}
|
|
|
|
&.destructive {
|
|
color: $destructive;
|
|
}
|
|
}
|
|
|
|
&.csd:not(.solid-csd) {
|
|
border-radius: $window-radius;
|
|
|
|
.response-area {
|
|
> box.horizontal > button {
|
|
margin: 0;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
> box.vertical > button {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
|
|
&:last-child {
|
|
border-bottom-left-radius: $window-radius;
|
|
border-bottom-right-radius: $window-radius;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
filechooser {
|
|
.dialog-action-box { border-top: 1px solid $divider; }
|
|
|
|
#pathbarbox {
|
|
border-bottom: 1px solid $divider;
|
|
background-color: $background;
|
|
|
|
> stack > box > button { // The new folder button
|
|
@extend %button-flat;
|
|
@extend %circular-button;
|
|
}
|
|
}
|
|
|
|
stack.view {
|
|
frame > border { border: none; }
|
|
}
|
|
}
|
|
|
|
filechooserbutton > button > box {
|
|
border-spacing: $space-size;
|
|
}
|
|
|
|
filechooserbutton:drop(active) {
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
|
|
/***********
|
|
* Sidebar *
|
|
***********/
|
|
.sidebar {
|
|
border-style: none;
|
|
background-color: $base-alt;
|
|
|
|
&:not(separator) {
|
|
&:dir(ltr),
|
|
&.left,
|
|
&.left:dir(rtl) {
|
|
border-right: 1px solid $border;
|
|
border-left-style: none;
|
|
}
|
|
|
|
&:dir(rtl),
|
|
&.right {
|
|
border-left: 1px solid $border;
|
|
border-right-style: none;
|
|
}
|
|
}
|
|
|
|
listview.view,
|
|
list {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
|
|
}
|
|
|
|
stacksidebar {
|
|
+ separator.vertical,
|
|
separator.horizontal { @extend %hide_separators; }
|
|
|
|
leaflet.unfolded > box > &.sidebar {
|
|
border: none;
|
|
}
|
|
|
|
list {
|
|
padding: $space-size;
|
|
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
|
|
}
|
|
|
|
row {
|
|
min-height: $small-size;
|
|
padding: $space-size;
|
|
border-radius: $corner-radius;
|
|
|
|
&:selected {
|
|
font-weight: 500;
|
|
}
|
|
|
|
+ row { margin-top: 4px; }
|
|
|
|
> label {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
color: inherit;
|
|
}
|
|
|
|
&.needs-attention > label { @extend %needs-attention; }
|
|
}
|
|
}
|
|
|
|
separator.sidebar {
|
|
background-color: $border;
|
|
border-right: none;
|
|
|
|
&.selection-mode,
|
|
.selection-mode & {
|
|
background-color: rgba(white, 0.12);
|
|
}
|
|
}
|
|
|
|
|
|
/**********************
|
|
* Navigation Sidebar *
|
|
**********************/
|
|
|
|
.navigation-sidebar {
|
|
padding: $space-size * 0.75 0; //only vertical padding. horizontal row size would clip
|
|
border-right: none;
|
|
|
|
&, &.view {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
&.background {
|
|
background-color: $base-alt;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
> separator {
|
|
margin: $space-size * 0.75 0;
|
|
}
|
|
|
|
> row {
|
|
min-height: $small-size;
|
|
padding: $space-size;
|
|
border-radius: $corner-radius;
|
|
margin: $space-size / 4 $space-size;
|
|
}
|
|
}
|
|
|
|
/****************
|
|
* File chooser *
|
|
****************/
|
|
// dim the sidebar icons, see bug #786613 for details on this oddity
|
|
row image.sidebar-icon {
|
|
transition: color $duration $ease-out;
|
|
color: $text-secondary;
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
placessidebar {
|
|
> viewport.frame { border-style: none; }
|
|
|
|
list > separator { margin: $space-size / 2 0; }
|
|
|
|
row {
|
|
&:selected {
|
|
font-weight: 500;
|
|
}
|
|
|
|
image.sidebar-icon {
|
|
&:dir(ltr) { padding-right: 8px; }
|
|
&:dir(rtl) { padding-left: 8px; }
|
|
}
|
|
|
|
label.sidebar-label {
|
|
color: inherit;
|
|
|
|
&:dir(ltr) { padding-right: 2px; }
|
|
&:dir(rtl) { padding-left: 2px; }
|
|
}
|
|
|
|
button.sidebar-button {
|
|
@extend %button-flat-simple;
|
|
@extend %small-button;
|
|
}
|
|
|
|
&.sidebar-placeholder-row { background-color: $overlay-hover; }
|
|
|
|
&.sidebar-new-bookmark-row {
|
|
color: $primary;
|
|
|
|
image.sidebar-icon { color: $primary; }
|
|
}
|
|
|
|
&:drop(active) {
|
|
background-color: $overlay-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
placesview {
|
|
.server-list-button > image {
|
|
transition: 200ms $ease-out;
|
|
-gtk-icon-transform: rotate(0turn);
|
|
}
|
|
|
|
.server-list-button:checked > image {
|
|
transition: 200ms $ease-out;
|
|
-gtk-icon-transform: rotate(-0.5turn);
|
|
}
|
|
|
|
// this selects the "connect to server" label
|
|
> actionbar > revealer > box > label {
|
|
border-spacing: $space-size;
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Paned *
|
|
*********/
|
|
paned {
|
|
> separator {
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
-gtk-icon-source: none; // defeats the ugly default handle decoration
|
|
border-style: none; // just to be sure
|
|
background-color: transparent;
|
|
// workaround, using background istead of a border since the border will get rendered twice (?)
|
|
background-image: image($solid-border);
|
|
background-size: 1px 1px;
|
|
background-clip: content-box; // avoids borders image being rendered twice (?)
|
|
box-shadow: none;
|
|
|
|
&.wide {
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
background-color: $background;
|
|
background-image: image($solid-border), image($solid-border);
|
|
background-size: 1px 1px, 1px 1px;
|
|
}
|
|
}
|
|
|
|
&.horizontal > separator {
|
|
background-repeat: repeat-y;
|
|
|
|
&:dir(ltr) {
|
|
margin: 0 -8px 0 0;
|
|
padding: 0 8px 0 0;
|
|
background-position: left;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
margin: 0 0 0 -8px;
|
|
padding: 0 0 0 8px;
|
|
background-position: right;
|
|
}
|
|
|
|
&.wide {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-repeat: repeat-y, repeat-y;
|
|
background-position: left, right;
|
|
}
|
|
}
|
|
|
|
&.vertical > separator {
|
|
margin: 0 0 -8px 0;
|
|
padding: 0 0 8px 0;
|
|
background-repeat: repeat-x;
|
|
background-position: top;
|
|
|
|
&.wide {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-repeat: repeat-x, repeat-x;
|
|
background-position: bottom, top;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* GtkVideo *
|
|
************/
|
|
|
|
video {
|
|
& image.osd {
|
|
min-width: 64px;
|
|
min-height: 64px;
|
|
border-radius: $circular-radius;
|
|
border: none;
|
|
}
|
|
|
|
background: black;
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
/**************
|
|
* GtkInfoBar *
|
|
**************/
|
|
infobar {
|
|
> revealer > box {
|
|
padding: $space-size;
|
|
border-spacing: $space-size * 2;
|
|
border-bottom: 1px solid $border;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.info {
|
|
& > revealer > box,
|
|
&:hover > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $base;
|
|
color: $text;
|
|
|
|
button {
|
|
&.text-button:not(:disabled):not(.suggested-action):not(.destructive-action) { color: $primary; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.action,
|
|
&.question {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $primary;
|
|
color: on($primary);
|
|
|
|
button {
|
|
&, &:hover, &:focus, &:active, &:checked, &.text-button:not(:disabled) { color: on($primary); }
|
|
}
|
|
|
|
*:link { color: on($primary); }
|
|
}
|
|
|
|
&:hover > revealer > box {
|
|
background-color: if($variant == 'light', lighten($primary, 5%), darken($primary, 5%));
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $warning;
|
|
color: on($warning);
|
|
|
|
button {
|
|
@extend %button-on-dark;
|
|
|
|
&, &:hover, &:focus, &:active, &:checked, &.text-button:not(:disabled) { color: on($warning); }
|
|
}
|
|
|
|
*:link { color: on($warning); }
|
|
}
|
|
|
|
&:hover > revealer > box {
|
|
background-color: if($variant == 'light', lighten($warning, 5%), darken($warning, 5%));
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $error;
|
|
color: on($error);
|
|
|
|
button {
|
|
&, &:hover, &:focus, &:active, &:checked, &.text-button:not(:disabled) { color: on($error); }
|
|
}
|
|
|
|
*:link { color: on($error); }
|
|
}
|
|
|
|
&:hover > revealer > box {
|
|
background-color: if($variant == 'light', lighten($error, 5%), darken($error, 5%));
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Tooltips *
|
|
************/
|
|
tooltip {
|
|
&.background {
|
|
// background-color needs to be set this way otherwise it gets drawn twice
|
|
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
|
|
background-color: $tooltip;
|
|
color: on($tooltip);
|
|
box-shadow: $shadow-z3;
|
|
border-radius: $corner-radius;
|
|
margin: 2px 6px 8px 6px;
|
|
}
|
|
|
|
padding: $space-size $space-size * 2;
|
|
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
|
border: none;
|
|
|
|
> box {
|
|
border-spacing: $space-size;
|
|
}
|
|
}
|
|
|
|
|
|
/*****************
|
|
* Color Chooser *
|
|
*****************/
|
|
colorswatch {
|
|
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
|
|
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
|
|
// applied to the overlay box.
|
|
|
|
// base color corners rounding
|
|
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
|
// sports a bigger radius.
|
|
// nth-child is needed by the custom color strip.
|
|
|
|
&.top {
|
|
border-top-left-radius: $corner-radius;
|
|
border-top-right-radius: $corner-radius;
|
|
|
|
overlay {
|
|
border-top-left-radius: $corner-radius;
|
|
border-top-right-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-left-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
|
|
overlay {
|
|
border-bottom-left-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&:first-child:not(.top) {
|
|
border-top-left-radius: $corner-radius;
|
|
border-bottom-left-radius: $corner-radius;
|
|
|
|
overlay {
|
|
border-top-left-radius: $corner-radius;
|
|
border-bottom-left-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
&.right,
|
|
&:last-child:not(.bottom) {
|
|
border-top-right-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
|
|
overlay {
|
|
border-top-right-radius: $corner-radius;
|
|
border-bottom-right-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
&.dark { color: on(dark); }
|
|
|
|
&.light { color: on(light); }
|
|
|
|
colorchooser &:hover {
|
|
transition: $transition-shadow;
|
|
box-shadow: 0 0 0 2px $primary;
|
|
}
|
|
|
|
&#add-color-button {
|
|
border-radius: $corner-radius 0 0 $corner-radius;
|
|
color: $text;
|
|
|
|
&:only-child { border-radius: $corner-radius; }
|
|
|
|
overlay {
|
|
background-color: $fill;
|
|
|
|
&:hover { background-color: $divider; box-shadow: none; }
|
|
|
|
&:active { background-color: $track; }
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
|
|
overlay { box-shadow: none; }
|
|
}
|
|
|
|
&#editor-color-sample {
|
|
border-radius: $corner-radius;
|
|
|
|
overlay { border-radius: $corner-radius; }
|
|
|
|
overlay:hover { box-shadow: $shadow-z1; }
|
|
}
|
|
}
|
|
|
|
// colorscale popup
|
|
colorchooser .popover.osd {
|
|
transition: $transition-shadow;
|
|
border-radius: $corner-radius;
|
|
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
|
|
background-color: $surface;
|
|
|
|
&:backdrop { box-shadow: $shadow-z2, inset 0 1px highlight($surface); }
|
|
}
|
|
|
|
|
|
/********
|
|
* Misc *
|
|
********/
|
|
// content view (grid/list)
|
|
.content-view {
|
|
background-color: $background;
|
|
|
|
// &:hover { -gtk-icon-effect: highlight; }
|
|
|
|
rubberband, .rubberband { @extend rubberband; }
|
|
}
|
|
|
|
.scale-popup {
|
|
.osd & {
|
|
> arrow,
|
|
> contents {
|
|
@extend %osd;
|
|
}
|
|
}
|
|
|
|
// .osd & button.flat { // FIXME: quick hack, redo properly
|
|
// }
|
|
//
|
|
// button { // +/- buttons on GtkVolumeButton popup
|
|
// }
|
|
}
|
|
|
|
|
|
/**********************
|
|
* Window Decorations *
|
|
**********************/
|
|
window {
|
|
border: none;
|
|
|
|
&.csd {
|
|
border-radius: $window-radius;
|
|
outline-offset: -1px;
|
|
outline: 1px solid highlight($background);
|
|
margin: 0;
|
|
|
|
@if $rimless == 'true' {
|
|
box-shadow: $shadow-z16, 0 0 36px transparent;
|
|
} @else {
|
|
box-shadow: $shadow-z16, 0 0 0 1px $window-border, 0 0 36px transparent;
|
|
}
|
|
|
|
&:backdrop {
|
|
// the transparent shadow here is to enforce that the shadow extents don't
|
|
// change when we go to backdrop, to prevent jumping windows.
|
|
// The biggest shadow should be in the same order then in the active state
|
|
// or the jumping will happen during the transition.
|
|
transition: $transition-shadow;
|
|
|
|
@if $rimless == 'true' {
|
|
box-shadow: $shadow-z4, 0 0 36px transparent;
|
|
} @else {
|
|
box-shadow: $shadow-z4, 0 0 0 1px $window-border, 0 0 36px transparent;
|
|
}
|
|
}
|
|
|
|
&.maximized,
|
|
&.fullscreen,
|
|
&.tiled,
|
|
&.tiled-top,
|
|
&.tiled-right,
|
|
&.tiled-bottom,
|
|
&.tiled-left {
|
|
border-radius: 0;
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
&.solid-csd {
|
|
margin: 0;
|
|
padding: 2px;
|
|
border-radius: 0;
|
|
background-color: $titlebar;
|
|
border: 1px solid $solid-border;
|
|
|
|
&:backdrop { background-color: $titlebar-backdrop; }
|
|
}
|
|
|
|
&.ssd {
|
|
// just doing borders, wm draws actual shadows
|
|
box-shadow: 0 0 0 1px $border;
|
|
}
|
|
}
|
|
|
|
// Windows button
|
|
|
|
%mac_window_button {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
padding: 0;
|
|
margin: 0 $space-size - 2px;
|
|
|
|
&.minimize, &.maximize, &.close {
|
|
color: transparent;
|
|
|
|
image { padding: 0; }
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: inset 0 0 0 9999px rgba(black, if($topbar == 'dark', 0.25, 0.12));
|
|
}
|
|
|
|
&:hover, &:active {
|
|
color: if($colorscheme != 'dracula', white, rgba(black, 0.5));
|
|
}
|
|
|
|
&:backdrop {
|
|
background-color: $titlebar-track;
|
|
|
|
&:hover, &:active {
|
|
color: $titlebar-text-disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.minimize { // Window minimize button
|
|
background-color: $titlebutton-min;
|
|
|
|
&:active {
|
|
background-color: mix($titlebar-text, $titlebutton-min, 25%);
|
|
}
|
|
}
|
|
|
|
&.maximize { // Window maximize button
|
|
background-color: $titlebutton-max;
|
|
|
|
&:active {
|
|
background-color: mix($titlebar-text, $titlebutton-max, 25%);
|
|
}
|
|
}
|
|
|
|
&.close { // Window close button
|
|
background-color: $titlebutton-close;
|
|
|
|
&:active {
|
|
background-color: mix($titlebar-text, $titlebutton-close, 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
%normal_window_button {
|
|
min-height: 22px;
|
|
min-width: 22px;
|
|
padding: 0;
|
|
margin: 0 $space-size - 2px;
|
|
|
|
&.minimize, &.maximize, &.close {
|
|
color: $titlebar-text-secondary;
|
|
background-color: gtkalpha(currentColor, 0.1);
|
|
|
|
image { padding: 0; }
|
|
|
|
&:hover {
|
|
color: $titlebar-text;
|
|
background-color: gtkalpha(currentColor, 0.15);
|
|
}
|
|
|
|
&:active {
|
|
color: $titlebar-text;
|
|
background-color: gtkalpha(currentColor, 0.2);
|
|
}
|
|
|
|
&:backdrop {
|
|
opacity: 0.65;
|
|
}
|
|
}
|
|
}
|
|
|
|
$window-space: if($window_button == 'mac', $space-size * 1.5, $space-size);
|
|
|
|
windowcontrols {
|
|
border-spacing: $space-size;
|
|
|
|
&:not(.empty) {
|
|
&.start:dir(ltr),
|
|
&.end:dir(rtl) {
|
|
margin-right: $window-space;
|
|
margin-left: $window-space;
|
|
}
|
|
|
|
&.start:dir(rtl),
|
|
&.end:dir(ltr) {
|
|
margin-left: $window-space;
|
|
margin-right: $window-space;
|
|
}
|
|
}
|
|
|
|
button:not(.suggested-action):not(.destructive-action) {
|
|
@extend %circular-button;
|
|
|
|
@if $window_button == 'mac' {
|
|
@extend %mac_window_button;
|
|
} @else {
|
|
@extend %normal_window_button;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// catch all extend :)
|
|
|
|
%selected_items {
|
|
background-color: $overlay-selected;
|
|
}
|
|
|
|
%selected_items_color {
|
|
color: $primary;
|
|
background-color: rgba($primary, 0.2);
|
|
}
|
|
|
|
%selected_items_primary {
|
|
color: on($primary);
|
|
background-color: $primary;
|
|
}
|
|
|
|
// .monospace { font-family: monospace; }
|
|
|
|
|
|
/**********************
|
|
* Touch Copy & Paste *
|
|
**********************/
|
|
// touch selection handlebars for the Popover.osd above
|
|
cursor-handle {
|
|
color: $primary;
|
|
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
|
|
|
|
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
|
|
// shortcut window keys
|
|
shortcuts-section {
|
|
margin: 20px;
|
|
}
|
|
|
|
.shortcuts-search-results {
|
|
margin: 20px;
|
|
border-spacing: 24px;
|
|
}
|
|
|
|
shortcut {
|
|
border-spacing: 6px;
|
|
}
|
|
|
|
shortcut > .keycap {
|
|
min-width: 28px - 8px * 2;
|
|
min-height: 28px - 2px;
|
|
margin-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
|
|
border: solid 1px $divider;
|
|
border-radius: $corner-radius + 1px;
|
|
box-shadow: inset 0 -2px $divider;
|
|
background-color: $surface;
|
|
color: $text;
|
|
font-size: smaller;
|
|
}
|
|
|
|
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
|
|
caret-color: $primary;
|
|
}
|
|
|
|
stackswitcher {
|
|
min-height: 0;
|
|
padding: $space-size / 2;
|
|
margin: $space-size 0;
|
|
border-radius: $corner-radius + $space-size / 2;
|
|
background-color: $fill;
|
|
border: none;
|
|
|
|
&.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
|
|
margin: 0 0;
|
|
background-color: transparent;
|
|
border-radius: $corner-radius;
|
|
padding: ($medium-size - 24px - $space-size) / 2 ($medium-size - 16px) / 2;
|
|
|
|
&.text-button { min-width: 100px; }
|
|
|
|
&:focus:not(:hover):not(:checked) { box-shadow: none; }
|
|
|
|
&:hover { @include button(hover); }
|
|
|
|
&:active { @include button(active); }
|
|
|
|
&:checked {
|
|
transition: $transition,
|
|
border-image $ripple-fade-in-duration $ease-out,
|
|
background-size 0ms,
|
|
background-image 0ms,
|
|
background-color 0ms;
|
|
background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15));
|
|
color: $text;
|
|
box-shadow: 0 1px 3px rgba(black, 0.1);
|
|
}
|
|
}
|
|
|
|
button.text-button { min-width: 100px; } // FIXME aggregate with buttons
|
|
|
|
button.circular,
|
|
button.text-button.circular { // FIXME aggregate with buttons
|
|
min-width: $medium-size;
|
|
min-height: $medium-size;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*************
|
|
* App Icons *
|
|
*************/
|
|
// Outline for low res icons
|
|
.lowres-icon {
|
|
-gtk-icon-shadow: 0 1px 2px rgba(black, 0.1);
|
|
}
|
|
|
|
// Drapshadow for large icons
|
|
.icon-dropshadow {
|
|
-gtk-icon-shadow: 0 1px 12px rgba(black, 0.05),
|
|
0 1px 6px rgba(black, 0.1)
|
|
}
|
|
|
|
|
|
/*********
|
|
* Emoji *
|
|
*********/
|
|
popover.emoji-picker {
|
|
padding: 0;
|
|
|
|
> contents {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.emoji-searchbar {
|
|
padding: $space-size;
|
|
border-spacing: $space-size;
|
|
border-bottom: 1px solid $divider;
|
|
background: none;
|
|
|
|
entry {
|
|
text {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.emoji-toolbar {
|
|
padding: 0;
|
|
border-spacing: $space-size / 2;
|
|
border-top: 1px solid $divider;
|
|
background: none;
|
|
}
|
|
|
|
button.emoji-section {
|
|
margin: 0;
|
|
padding: $space-size;
|
|
border-radius: $corner-radius;
|
|
|
|
&:checked {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
popover.emoji-picker emoji {
|
|
font-size: x-large;
|
|
padding: $space-size;
|
|
transition: $transition;
|
|
border-radius: $corner-radius;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background: $overlay-hover;
|
|
}
|
|
}
|
|
|
|
emoji-completion-row {
|
|
min-height: $menuitem-size;
|
|
padding: 0 $space-size * 2;
|
|
|
|
> box {
|
|
border-spacing: $space-size;
|
|
padding: 2px $space-size;
|
|
}
|
|
|
|
&:focus, &:hover,
|
|
emoji:hover, emoji:focus {
|
|
background-color: $overlay-hover;
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
popover.entry-completion > contents {
|
|
padding: 0;
|
|
}
|