You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3774 lines
83 KiB
SCSS
3774 lines
83 KiB
SCSS
* {
|
|
// padding: 0;
|
|
background-clip: padding-box;
|
|
|
|
-GtkToolButton-icon-spacing: 0;
|
|
-GtkTextView-error-underline-color: $error;
|
|
|
|
// The size for scrollbars. The slider is 2px smaller, but we keep it
|
|
// up so that the whole area is sensitive to button presses for the
|
|
// slider. The stepper button is larger in both directions, the slider
|
|
// only in the width
|
|
|
|
-GtkScrolledWindow-scrollbar-spacing: 0;
|
|
|
|
-GtkToolItemGroup-expander-size: 11;
|
|
|
|
-GtkWidget-text-handle-width: 24;
|
|
-GtkWidget-text-handle-height: 24;
|
|
|
|
-GtkDialog-button-spacing: $container-padding / 1px;
|
|
-GtkDialog-action-area-border: $container-padding / 1px;
|
|
|
|
// We use the outline properties to signal the focus properties
|
|
// to the adwaita engine: using real CSS properties is faster,
|
|
// and we don't use any outlines for now.
|
|
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-color: transparent;
|
|
outline-offset: -4px;
|
|
-gtk-outline-radius: $corner-radius;
|
|
|
|
-gtk-secondary-caret-color: $primary;
|
|
|
|
&:focus { outline-color: $overlay-checked; }
|
|
}
|
|
|
|
%selected_items {
|
|
color: $text;
|
|
background-color: mix($text, $base, 10%);
|
|
}
|
|
|
|
%selected_items_color {
|
|
color: $primary;
|
|
background-color: rgba($primary, 0.2);
|
|
}
|
|
|
|
%selected_items_primary {
|
|
color: on($primary);
|
|
background-color: $primary;
|
|
}
|
|
|
|
%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;
|
|
}
|
|
}
|
|
|
|
/***************
|
|
* Base States *
|
|
***************/
|
|
.background {
|
|
background-color: rgba($background, 0.999);
|
|
color: $text;
|
|
|
|
&.csd { // Set csd windows botttom border radius
|
|
border-radius: 0 0 $window-radius $window-radius;
|
|
}
|
|
|
|
&.maximized, &.solid-csd { // No radius when windows maximized
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
*:disabled { -gtk-icon-effect: dim; }
|
|
|
|
.gtkstyle-fallback {
|
|
background-color: $background;
|
|
color: $text;
|
|
|
|
&:hover {
|
|
background-color: darken($background, 5%);
|
|
color: $text;
|
|
}
|
|
|
|
&:active {
|
|
background-color: darken($background, 10%);
|
|
color: $text;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: $background;
|
|
color: $text-disabled;
|
|
}
|
|
|
|
&:selected {
|
|
background-color: $primary;
|
|
color: on($primary);
|
|
}
|
|
}
|
|
|
|
.view {
|
|
background-color: $base;
|
|
color: $text;
|
|
|
|
&:hover { box-shadow: inset 0 0 0 9999px $overlay-hover; }
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
// &:hover, &:selected { border-radius: $corner-radius; }
|
|
|
|
&:selected {
|
|
@extend %selected_items_primary;
|
|
|
|
&:hover { box-shadow: none; }
|
|
}
|
|
|
|
.background.csd &:selected { @extend %selected_items_color; }
|
|
}
|
|
|
|
widget.view {
|
|
// border-radius: $corner-radius;
|
|
|
|
&:selected {
|
|
@extend %selected_items_primary;
|
|
}
|
|
}
|
|
|
|
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 {
|
|
&:hover, &:selected { border-radius: $corner-radius; }
|
|
}
|
|
|
|
.rubberband,
|
|
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;
|
|
}
|
|
}
|
|
|
|
label {
|
|
caret-color: currentColor; // this shouldn't be needed.
|
|
|
|
&.separator {
|
|
color: $text-secondary;
|
|
}
|
|
|
|
selection { @extend %selected_items_primary; }
|
|
|
|
&:disabled {
|
|
color: $text-disabled;
|
|
|
|
// selection { color: $text-disabled; }
|
|
|
|
headerbar &,
|
|
tab &,
|
|
button & { color: inherit; }
|
|
}
|
|
|
|
&.osd {
|
|
border-radius: $corner-radius;
|
|
background-color: $tooltip;
|
|
color: on($tooltip);
|
|
}
|
|
}
|
|
|
|
.dim-label { color: $text-secondary; }
|
|
|
|
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 12px;
|
|
color: $text-disabled;
|
|
font-weight: 500;
|
|
|
|
&.highlight { color: $text; }
|
|
}
|
|
}
|
|
|
|
// %osd, .osd { opacity: 0.9; }
|
|
|
|
|
|
/*********************
|
|
* Spinner Animation *
|
|
*********************/
|
|
@keyframes spin {
|
|
to { -gtk-icon-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-radius: $corner-radius;
|
|
caret-color: currentColor; // this shouldn't be needed.
|
|
|
|
@include entry(normal);
|
|
|
|
&:focus { @include entry(checked); }
|
|
|
|
&:drop(active) { @include entry(hover); }
|
|
|
|
&:disabled { @include entry(disabled); }
|
|
|
|
&.flat {
|
|
min-height: 0;
|
|
padding: 2px;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
image { // icons inside the entry
|
|
// @extend %button-flat;
|
|
|
|
// min-height: $small-size;
|
|
// min-width: $small-size;
|
|
// border-radius: $circular-radius;
|
|
color: $text-secondary;
|
|
|
|
&:hover, &:active { color: $text; }
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
&.left {
|
|
margin-left: ($medium-size - 16px) / 2 - 8px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
&.right {
|
|
margin-left: 6px;
|
|
margin-right: ($medium-size - 16px) / 2 - 8px;
|
|
}
|
|
}
|
|
|
|
undershoot {
|
|
&.left { @include undershoot(left); }
|
|
|
|
&.right { @include undershoot(right); }
|
|
}
|
|
|
|
selection { @extend %selected_items_primary; }
|
|
|
|
// entry error and warning style
|
|
@each $e_type, $e_color in (error, $error),
|
|
(warning, $warning) {
|
|
&.#{$e_type} {
|
|
@include entry(normal, $e_color);
|
|
|
|
&:focus { @include entry(checked, $e_color); }
|
|
|
|
&:disabled { @include entry(disabled, $e_color); }
|
|
}
|
|
}
|
|
|
|
.osd & {
|
|
}
|
|
}
|
|
|
|
progress {
|
|
margin: 2px -8px;
|
|
border-bottom: 2px solid $primary;
|
|
background-color: transparent;
|
|
}
|
|
|
|
// linked entries
|
|
.linked:not(.vertical) > & { @extend %linked; }
|
|
|
|
// Vertically linked entries
|
|
.linked.vertical > & { @extend %linked-vertical; }
|
|
}
|
|
|
|
%entry_raised {
|
|
border-radius: $corner-radius;
|
|
|
|
@include entry(raised-normal);
|
|
|
|
&:focus { @include entry(raised-focus); }
|
|
|
|
&:drop(active) { @include entry(raised-hover); }
|
|
|
|
&:disabled { @include entry(raised-disabled); }
|
|
|
|
// entry error and warning style
|
|
@each $e_type, $e_color in (error, $error),
|
|
(warning, $warning) {
|
|
&.#{$e_type} {
|
|
@include entry(raised-normal, $e_color);
|
|
|
|
&:focus { @include entry(raised-focus, $e_color); }
|
|
|
|
&:disabled { @include entry(raised-disabled, $e_color); }
|
|
|
|
image {
|
|
color: on($e_color, secondary);
|
|
|
|
&:hover, &:active { color: on($e_color); }
|
|
|
|
&:disabled { color: on($e_color, disabled); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
treeview entry {
|
|
&.flat, & {
|
|
background-color: $base;
|
|
|
|
&, &:focus {
|
|
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; }
|
|
}
|
|
}
|
|
|
|
|
|
/***********
|
|
* Buttons *
|
|
***********/
|
|
// stuff for .needs-attention
|
|
@keyframes needs-attention {
|
|
from {
|
|
background-image: -gtk-gradient(radial,
|
|
center center, 0,
|
|
center center, 0.001,
|
|
to($primary),
|
|
to(transparent));
|
|
}
|
|
|
|
to {
|
|
background-image: -gtk-gradient(radial,
|
|
center center, 0,
|
|
center center, 0.5,
|
|
to($primary),
|
|
to(transparent));
|
|
}
|
|
}
|
|
|
|
%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); }
|
|
|
|
&:active { @include button(active); }
|
|
|
|
&:disabled { @include button(disabled); }
|
|
|
|
&:checked { @include button(checked); }
|
|
|
|
&:checked:hover { @include button(checked-hover); }
|
|
|
|
&:checked:disabled { @include button(checked-disabled); }
|
|
}
|
|
|
|
%circular-button { // The Bloody Circul Button
|
|
border-radius: $circular-radius;
|
|
|
|
label { padding: 0; }
|
|
}
|
|
|
|
%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); }
|
|
|
|
@at-root %button-flat, &.flat {
|
|
@at-root %button-flat-simple, & {
|
|
@include button(flat-normal);
|
|
|
|
&:focus { @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); }
|
|
}
|
|
|
|
&.text-button {
|
|
min-width: 64px - 16px * 2;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
&.flat {
|
|
min-width: 64px - 8px * 2;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
&.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 {
|
|
min-width: 24px;
|
|
padding: ($medium-size - 24px) / 2;
|
|
border-radius: $corner-radius;
|
|
|
|
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; }
|
|
}
|
|
|
|
.linked:not(.vertical) > & {
|
|
@extend %linked;
|
|
|
|
// &:focus { box-shadow: none; }
|
|
}
|
|
|
|
.linked.vertical > & {
|
|
@extend %linked-vertical;
|
|
|
|
// &:focus { box-shadow: none; }
|
|
}
|
|
|
|
.linked:not(.vertical) > &.flat,
|
|
.linked.vertical > &.flat {
|
|
&:not(:only-child) { // specificity bump
|
|
border-radius: $corner-radius;
|
|
|
|
&.image-button:not(.text-button) { border-radius: $circular-radius; }
|
|
}
|
|
|
|
&:focus { box-shadow: inset 0 0 0 9999px $overlay-focus; }
|
|
}
|
|
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
|
|
|
|
&.image-button { padding: ($large-size - 24px) / 2; }
|
|
|
|
&:disabled { opacity: 0; }
|
|
}
|
|
|
|
// overlay / OSD style
|
|
// .osd & { }
|
|
|
|
// 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); }
|
|
}
|
|
|
|
.osd & { }
|
|
}
|
|
}
|
|
|
|
.stack-switcher > & {
|
|
// 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; }}
|
|
|
|
// &.font { > box > box > label { font-weight: bold; }}
|
|
|
|
// inline-toolbar buttons
|
|
.inline-toolbar & {
|
|
// @extend %button-flat;
|
|
|
|
&:not(.text-button) { @extend %circular-button; }
|
|
}
|
|
|
|
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
|
|
|
|
&.close,
|
|
&.circular { @extend %circular-button; }
|
|
}
|
|
|
|
%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; }
|
|
}
|
|
|
|
// menu buttons
|
|
modelbutton.flat,
|
|
.menuitem.button.flat {
|
|
min-height: $menuitem-size;
|
|
padding: 0 8px;
|
|
border-radius: $corner-radius - $container-padding;
|
|
color: $text;
|
|
|
|
@extend %button-flat-simple;
|
|
|
|
&:selected { @extend %selected_items; }
|
|
}
|
|
|
|
modelbutton.flat arrow {
|
|
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
|
|
|
|
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
|
}
|
|
|
|
button.color {
|
|
min-height: $small-size;
|
|
min-width: $small-size;
|
|
padding: $container-padding;
|
|
|
|
colorswatch:only-child {
|
|
// &, overlay { border-radius: 0; }
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* 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 {
|
|
&: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
|
|
@extend %entry;
|
|
|
|
padding: 0;
|
|
|
|
entry {
|
|
min-width: $large-size - 8px * 2;
|
|
// reset all the other props since the spinbutton node is styled here
|
|
margin: 0;
|
|
border-image: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
button {
|
|
@extend %button-flat-simple;
|
|
@extend %small-button;
|
|
|
|
// margin: $container-padding;
|
|
border: solid $container-padding transparent;
|
|
|
|
// Remove unwanted focus indicator
|
|
&:focus:not(:hover):not(:active):not(:disabled) {
|
|
box-shadow: inset 0 0 0 9999px transparent;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
&.up:dir(ltr),
|
|
&.down:dir(rtl) { margin-left: -$container-padding / 2; }
|
|
|
|
&.up:dir(rtl),
|
|
&.down:dir(ltr) { margin-right: -$container-padding / 2; }
|
|
}
|
|
}
|
|
|
|
// OSD horizontal
|
|
// .osd &:not(.vertical) { }
|
|
|
|
// Vertical
|
|
&.vertical {
|
|
// in the vertical configuration, we treat the spinbutton
|
|
// as a box, and tweak the style of the entry in the middle
|
|
// so that it's linked
|
|
|
|
// FIXME: this should not be set at all, but otherwise it gets the wrong
|
|
// color
|
|
@extend %entry;
|
|
|
|
padding: 0;
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
entry {
|
|
// @extend %entry_raised;
|
|
margin: 0;
|
|
border-image: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
|
|
min-height: $medium-size;
|
|
min-width: $large-size - $container-padding;
|
|
padding: 0;
|
|
}
|
|
|
|
button {
|
|
@extend %button-flat-simple;
|
|
@extend %small-button;
|
|
padding: 0;
|
|
|
|
border: solid $container-padding transparent;
|
|
|
|
// Remove unwanted focus indicator
|
|
&:focus:not(:hover):not(:active) {
|
|
box-shadow: inset 0 0 0 9999px transparent;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
&.up { margin: 0 $container-padding/2; }
|
|
|
|
&.down { margin: 0 $container-padding/2; }
|
|
}
|
|
}
|
|
|
|
// OSD vertical
|
|
// .osd &.vertical { }
|
|
|
|
// Misc
|
|
treeview &:not(.vertical) {
|
|
min-height: 0;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
|
|
entry {
|
|
min-height: 0;
|
|
padding: 1px 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* ComboBoxes *
|
|
**************/
|
|
combobox {
|
|
arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
decoration { transition: none; } // workaround for menuitem selection
|
|
|
|
button.combo cellview {
|
|
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
|
|
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
|
|
}
|
|
|
|
menu {
|
|
padding: 2px 0;
|
|
|
|
menuitem {
|
|
min-height: $medium-size - 2px * 2;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
// overflow arrows
|
|
> arrow {
|
|
&.top { margin-top: -2px; }
|
|
|
|
&.bottom {
|
|
margin-top: 2px * 2;
|
|
margin-bottom: -2px * 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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 entry(focus); }
|
|
|
|
&:hover { @include entry(hover); }
|
|
|
|
&:checked { @include entry(checked); }
|
|
|
|
&:disabled { @include entry(disabled); }
|
|
}
|
|
|
|
|
|
/************
|
|
* Toolbars *
|
|
************/
|
|
toolbar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 2px;
|
|
background-color: $background;
|
|
|
|
button { @extend %button-flat; }
|
|
|
|
// on OSD
|
|
.osd & { background-color: transparent; }
|
|
|
|
// stand-alone OSD toolbars
|
|
@at-root %toolbar_osd, &.osd {
|
|
transition: $transition-shadow;
|
|
padding: $container-padding;
|
|
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); }
|
|
|
|
&.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; }
|
|
|
|
&:not(.inline-toolbar):not(.osd) {
|
|
scale,
|
|
entry,
|
|
spinbutton,
|
|
button { margin: 2px; }
|
|
|
|
.linked entry,
|
|
.linked spinbutton,
|
|
.linked button {
|
|
&:not(:first-child) { margin-left: 0; }
|
|
&:not(:last-child) { margin-right: 0; }
|
|
}
|
|
|
|
spinbutton {
|
|
entry,
|
|
button { margin: 0; }
|
|
}
|
|
|
|
switch { margin: 2px + $container-padding 2px; }
|
|
}
|
|
}
|
|
|
|
// searchbar, location-bar & inline-toolbar
|
|
.inline-toolbar {
|
|
padding: $container-padding;
|
|
border-style: solid;
|
|
border-width: 0 1px 1px;
|
|
border-color: $frame;
|
|
background-color: $base-alt;
|
|
}
|
|
|
|
searchbar > revealer > box,
|
|
.location-bar {
|
|
padding: $container-padding;
|
|
border-style: solid;
|
|
border-width: 0 0 1px;
|
|
border-color: $divider;
|
|
background-color: $background;
|
|
background-clip: border-box;
|
|
}
|
|
|
|
searchbar > revealer > box {
|
|
// workaround: undo the GtkContainer:border-width and use CSS padding instead
|
|
margin: -6px;
|
|
padding: $container-padding;
|
|
}
|
|
|
|
|
|
/***************
|
|
* Header bars *
|
|
***************/
|
|
|
|
%titlebar-button {
|
|
@extend %button-flat;
|
|
color: $titlebar-text-secondary;
|
|
|
|
.linked:not(.vertical) > & {
|
|
border-radius: $circular-radius;
|
|
}
|
|
|
|
&:focus, &: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; }
|
|
}
|
|
}
|
|
|
|
.titlebar {
|
|
transition: background-color $duration $ease-out, color $duration $ease-out;
|
|
border-radius: $window-radius $window-radius 0 0;
|
|
box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar);
|
|
background-color: $titlebar;
|
|
color: $titlebar-text;
|
|
|
|
&:disabled { color: $titlebar-text-disabled; }
|
|
|
|
&:backdrop {
|
|
background-color: $titlebar-backdrop;
|
|
color: $titlebar-text-secondary;
|
|
|
|
&:disabled { color: $titlebar-text-secondary-disabled; }
|
|
}
|
|
|
|
.title {
|
|
padding: 0 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.subtitle {
|
|
padding: 0 12px;
|
|
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;
|
|
}
|
|
|
|
entry { @extend %titlebar-entry; }
|
|
|
|
.linked:not(.vertical) > entry:not(:only-child) { border-radius: $corner-radius; }
|
|
|
|
button.suggested-action, button.destructive-action {
|
|
&:disabled {
|
|
background-color: $titlebar-fill;
|
|
color: $titlebar-text-disabled;
|
|
}
|
|
}
|
|
|
|
button.toggle { border-radius: $circular-radius; }
|
|
|
|
stackswitcher { // reset
|
|
border-radius: $circular-radius;
|
|
|
|
&.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
|
|
border-radius: $circular-radius;
|
|
}
|
|
}
|
|
|
|
// FIXME: Ugly overriding
|
|
.path-bar button:not(.suggested-action):not(.destructive-action).text-button {
|
|
min-width: 0;
|
|
padding-left: ($medium-size - 24px) / 2;
|
|
padding-right: ($medium-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;
|
|
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
|
|
box-shadow: inset 0 1px highlight($primary);
|
|
background-color: $primary;
|
|
color: on($primary);
|
|
|
|
&:backdrop {
|
|
color: on($primary, secondary);
|
|
}
|
|
|
|
.subtitle:link { color: on($primary); }
|
|
|
|
button:not(.suggested-action):not(.destructive-action) {
|
|
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
|
|
currentColor 0%,
|
|
transparent 0%)
|
|
0 0 0 / 0 0 0px;
|
|
color: on($primary);
|
|
|
|
&:disabled { color: on($primary, disabled); }
|
|
|
|
&:checked {
|
|
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
|
|
currentColor 100%,
|
|
transparent 0%)
|
|
0 0 2 / 0 0 2px;
|
|
color: on($primary);
|
|
|
|
&:disabled { color: on($primary, disabled); }
|
|
}
|
|
|
|
&:backdrop {
|
|
color: on($primary, secondary);
|
|
|
|
&:disabled { color: on($primary, secondary-disabled); }
|
|
|
|
&:checked {
|
|
color: on($primary, secondary);
|
|
|
|
&:disabled { color: on($primary, secondary-disabled); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.selection-menu {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
arrow { -GtkArrow-arrow-scaling: 1; }
|
|
|
|
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
}
|
|
|
|
.selection-mode {
|
|
box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
|
|
background-color: $primary;
|
|
}
|
|
|
|
// squared corners when the window is maximized, tiled, or fullscreen
|
|
.tiled &,
|
|
.tiled-top &,
|
|
.tiled-right &,
|
|
.tiled-bottom &,
|
|
.tiled-left &,
|
|
.maximized &,
|
|
.fullscreen & {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.default-decoration {
|
|
min-height: $small-size;
|
|
padding: $container-padding;
|
|
box-shadow: inset 0 1px highlight($titlebar);
|
|
border-radius: $corner-radius $corner-radius 0 0;
|
|
|
|
.tiled &,
|
|
.maximized &,
|
|
.fullscreen & {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
button.titlebutton {
|
|
min-height: $small-size;
|
|
min-width: $small-size;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
// workaround for non-animatable buttons
|
|
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
|
|
}
|
|
|
|
.solid-csd & {
|
|
&:dir(rtl), &:dir(ltr) { // specificity bump
|
|
border-radius: 0;
|
|
box-shadow: none; // just remove the highlight
|
|
}
|
|
}
|
|
}
|
|
|
|
headerbar {
|
|
// The sizing factor needs to be defined in the headerbar node for the case of split headerbars
|
|
min-height: $large-size;
|
|
padding: 0 $container-padding;
|
|
|
|
&:not(.titlebar) { box-shadow: none; }
|
|
|
|
box.vertical & {
|
|
background-color: $titlebar;
|
|
}
|
|
|
|
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
|
entry,
|
|
spinbutton,
|
|
button {
|
|
margin-top: $container-padding;
|
|
margin-bottom: $container-padding;
|
|
}
|
|
|
|
button:not(.suggested-action):not(.destructive-action) {
|
|
@extend %titlebar-button;
|
|
}
|
|
|
|
separator.titlebutton {
|
|
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;
|
|
}
|
|
|
|
// reset button margins of the spinbutton
|
|
spinbutton button {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// FIXME: This is a hacky workaround.
|
|
.entry-tag {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
&.windowhandle {
|
|
viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) {
|
|
border-radius: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
min-width: 120px;
|
|
padding: 0;
|
|
|
|
label { margin-right: 12px; }
|
|
image { margin-left: 12px; }
|
|
|
|
&:focus { box-shadow: none; }
|
|
}
|
|
|
|
> button.popup {
|
|
label, image { min-height: 0; }
|
|
}
|
|
|
|
viewswitchertitle > squeezer {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
background: none;
|
|
|
|
> viewswitcher {
|
|
margin: 0 0;
|
|
background: none;
|
|
|
|
> box.horizontal > button.radio {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Pathbars *
|
|
************/
|
|
%pathbar_button,
|
|
.path-bar.linked:not(.vertical) > button {
|
|
@extend %button-flat;
|
|
|
|
padding-left: ($medium-size - 24px) / 2;
|
|
padding-right: ($medium-size - 24px) / 2;
|
|
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
|
|
$primary 0%,
|
|
transparent 0%)
|
|
0 0 0 / 0 0 0px;
|
|
border-radius: $corner-radius;
|
|
|
|
&:checked {
|
|
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
|
|
$primary 100%,
|
|
transparent 0%)
|
|
0 0 2 / 0 0 2px;
|
|
|
|
&, &:disabled { background-color: transparent; }
|
|
}
|
|
|
|
label:not(:only-child) {
|
|
&:first-child { margin-left: 0; }
|
|
|
|
&:last-child { margin-right: 0; }
|
|
}
|
|
|
|
&.text-button {
|
|
min-width: 0;
|
|
}
|
|
|
|
&.slider-button {
|
|
padding-left: (24px - 16px) / 2;
|
|
padding-right: (24px - 16px) / 2;
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* Tree Views *
|
|
**************/
|
|
treeview.view {
|
|
@at-root * {
|
|
-GtkTreeView-horizontal-separator: 4;
|
|
-GtkTreeView-grid-line-width: 1;
|
|
-GtkTreeView-grid-line-pattern: '';
|
|
-GtkTreeView-tree-line-width: 1;
|
|
-GtkTreeView-tree-line-pattern: '';
|
|
-GtkTreeView-expander-size: 16;
|
|
}
|
|
|
|
border-left-color: $track; // this is actually the tree lines color,
|
|
border-top-color: $divider; // while this is the grid lines color, better then nothing
|
|
|
|
// FIXME: Avoid transparency background-color being slightly darker
|
|
&:selected {
|
|
@extend %selected_items;
|
|
background-image: image($overlay-checked);
|
|
}
|
|
|
|
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
|
|
|
|
&:hover, &:selected { border-radius: 0; }
|
|
|
|
&.separator {
|
|
min-height: 1px + 2px * 2;
|
|
color: $divider;
|
|
}
|
|
|
|
// FIXME: box-shadow, background-color and background-image are not available here.
|
|
&:drop(active) {
|
|
border-style: solid none;
|
|
border-width: 9999px;
|
|
border-color: $overlay-hover;
|
|
|
|
&.after { border-top-style: none; }
|
|
|
|
&.before { border-bottom-style: none; }
|
|
}
|
|
|
|
&.expander {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
-gtk-icon-transform: rotate(-90deg);
|
|
|
|
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
|
|
|
|
&:checked { -gtk-icon-transform: unset; }
|
|
|
|
color: $text-secondary;
|
|
|
|
&:hover, &:active { color: $text; }
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
&.progressbar { // progress bar in treeviews
|
|
border-bottom: $bar-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: $bar-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
|
|
}
|
|
|
|
|
|
/*********
|
|
* Menus *
|
|
*********/
|
|
menubar,
|
|
.menubar {
|
|
-GtkWidget-window-dragging: true;
|
|
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; }
|
|
|
|
> menuitem {
|
|
transition: $transition;
|
|
min-height: 20px;
|
|
padding: 4px 8px;
|
|
color: $titlebar-text-secondary;
|
|
|
|
&:hover { // 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
|
|
}
|
|
}
|
|
|
|
// Needed to make the border-radius of menus work
|
|
// otherwise the background bleeds out of the menu edges
|
|
.background.popup { background-color: transparent; }
|
|
|
|
menu,
|
|
.menu,
|
|
.context-menu {
|
|
margin: $menu-radius 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
|
|
padding: $menu-radius 0;
|
|
box-shadow: inset 0 1px highlight($surface);
|
|
background-color: $surface;
|
|
background-clip: border-box;
|
|
border: 1px solid $frame; // adds borders in a non composited env
|
|
|
|
.csd & {
|
|
border: none; // axes borders in a composited env
|
|
border-radius: $menu-radius;
|
|
}
|
|
|
|
menuitem {
|
|
transition: background-color $duration $ease-out;
|
|
min-height: 20px;
|
|
min-width: 40px;
|
|
padding: 4px 8px;
|
|
color: $text;
|
|
font: initial;
|
|
text-shadow: none;
|
|
|
|
&:hover {
|
|
transition: none;
|
|
background-color: $overlay-hover;
|
|
color: $text;
|
|
}
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
// submenu indicators
|
|
arrow {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
|
|
&:dir(ltr) {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
// avoids labels color being overridden, see
|
|
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
|
|
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
|
|
}
|
|
|
|
.view:selected {
|
|
background-color: mix($text, $surface, 10%);
|
|
}
|
|
|
|
// overflow arrows
|
|
> arrow {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
padding: 4px;
|
|
background-color: $surface;
|
|
color: $text-secondary;
|
|
|
|
&.top {
|
|
margin-top: -4px;
|
|
border-bottom: 1px solid $divider;
|
|
border-radius: $corner-radius $corner-radius 0 0;
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
}
|
|
|
|
&.bottom {
|
|
margin-top: 4px * 2;
|
|
margin-bottom: -4px * 3;
|
|
border-top: 1px solid $divider;
|
|
border-radius: 0 0 $corner-radius $corner-radius;
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
|
|
&:hover {
|
|
background-image: image($overlay-hover);
|
|
color: $text;
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
color: transparent;
|
|
// color: $text-secondary-disabled;
|
|
}
|
|
}
|
|
|
|
separator { margin: 4px 0; }
|
|
}
|
|
|
|
menuitem {
|
|
accelerator { color: $text-secondary; }
|
|
|
|
&:disabled accelerator { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
|
|
/************
|
|
* Popovers *
|
|
************/
|
|
popover.background {
|
|
transition: $transition-shadow;
|
|
padding: 2px;
|
|
box-shadow: $shadow-z4; // TODO: this should really have a highlight
|
|
background-color: $surface;
|
|
|
|
&:backdrop { box-shadow: $shadow-z2; }
|
|
|
|
&, .csd & {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.0) rgba(0, 0, 0, 0.0);
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
> stack { margin: -4px; } // remove extra padding from menu style popovers
|
|
|
|
> toolbar { margin: -2px; }
|
|
|
|
> list,
|
|
> .view,
|
|
> toolbar {
|
|
border-style: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
// FIXME: Use the popover color instead of transparent as a workaround for .view
|
|
list,
|
|
.view:not(:selected),
|
|
toolbar { background-color: $surface; }
|
|
|
|
.linked > button:not(.radio) {
|
|
border-radius: $corner-radius;
|
|
&:first-child { border-radius: $corner-radius; }
|
|
&:last-child { border-radius: $corner-radius; }
|
|
&:only-child { border-radius: $corner-radius; }
|
|
}
|
|
|
|
&.menu button,
|
|
button.model {
|
|
@extend %button-flat;
|
|
|
|
min-height: 32px;
|
|
padding: 0 8px;
|
|
border-radius: $corner-radius;
|
|
|
|
// &:checked { color: $primary; }
|
|
}
|
|
|
|
separator { margin: 4px 0; }
|
|
|
|
list separator { margin: 0; }
|
|
}
|
|
|
|
/*************
|
|
* Notebooks *
|
|
*************/
|
|
|
|
%tabs_tab {
|
|
transition: $transition,
|
|
background-size 0ms,
|
|
background-image 0ms;
|
|
min-height: $small-size;
|
|
min-width: $small-size;
|
|
padding: $container-padding 12px;
|
|
|
|
border-width: 1px;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
|
|
outline: none;
|
|
background-clip: padding-box;
|
|
|
|
color: $text-secondary;
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
background-color: $fill;
|
|
color: $text;
|
|
}
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
|
|
&:checked {
|
|
transition: $transition;
|
|
background-color: $base;
|
|
background-clip: padding-box;
|
|
border-color: $solid-border;
|
|
color: $text;
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
&.reorderable-page {
|
|
background-color: $base;
|
|
}
|
|
}
|
|
}
|
|
|
|
notebook {
|
|
frame > paned > & > header,
|
|
&.frame > header { background-color: $base-alt; }
|
|
|
|
&, &.frame {
|
|
background-color: $base;
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
&.frame frame {
|
|
> border {
|
|
border: none;
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
> list {
|
|
// @extend %circular_list;
|
|
|
|
row.activatable { border-radius: $corner-radius; }
|
|
}
|
|
}
|
|
|
|
&:focus tab:checked { box-shadow: none; }
|
|
|
|
> header {
|
|
border-width: 1px;
|
|
border-color: $solid-border;
|
|
background-color: $background;
|
|
background-clip: border-box;
|
|
|
|
&.top {
|
|
border-bottom-style: solid;
|
|
border-radius: $corner-radius $corner-radius 0 0;
|
|
|
|
> tabs {
|
|
margin-bottom: -1px;
|
|
margin-top: 4px;
|
|
|
|
> tab {
|
|
border-radius: $corner-radius $corner-radius 0 0;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-top-style: solid;
|
|
border-radius: 0 0 $corner-radius $corner-radius;
|
|
|
|
> tabs {
|
|
margin-top: -1px;
|
|
margin-bottom: 4px;
|
|
|
|
> tab {
|
|
border-radius: 0 0 $corner-radius $corner-radius;
|
|
border-top: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.left {
|
|
border-right-style: solid;
|
|
border-radius: $corner-radius 0 0 $corner-radius;
|
|
|
|
> tabs {
|
|
margin-left: 4px;
|
|
margin-right: -1px;
|
|
|
|
> tab {
|
|
border-radius: $corner-radius 0 0 $corner-radius;
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
border-left-style: solid;
|
|
border-radius: 0 $corner-radius $corner-radius 0;
|
|
|
|
> tabs {
|
|
margin-left: -1px;
|
|
margin-right: 4px;
|
|
|
|
> tab {
|
|
border-radius: 0 $corner-radius $corner-radius 0;
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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: -8px;
|
|
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
|
}
|
|
|
|
&.up {
|
|
margin-right: -8px;
|
|
-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: -8px;
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
}
|
|
|
|
&.up {
|
|
margin-bottom: -8px;
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
}
|
|
|
|
> tabs > arrow {
|
|
@extend %button-flat-simple;
|
|
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
tab {
|
|
@extend %tabs_tab;
|
|
|
|
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
|
|
> box {
|
|
transition: background-color $duration $ease-out;
|
|
margin: -$container-padding -12px;
|
|
padding: $container-padding 12px;
|
|
|
|
&:drop(active) {
|
|
background-color: $frame;
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
// colors the button like the label, overridden otherwise
|
|
button.flat {
|
|
@extend %small-button;
|
|
|
|
&:last-child {
|
|
margin-left: $container-padding;
|
|
margin-right: $container-padding - 12px;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: $container-padding - 12px;
|
|
margin-right: $container-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
tabs {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
|
|
&:not(:only-child) {
|
|
&:first-child { margin-left: 0; }
|
|
|
|
&:last-child { margin-right: 0; }
|
|
}
|
|
|
|
tab.reorderable-page { border-style: solid; }
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&.right {
|
|
tabs {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
|
|
&:not(:only-child) {
|
|
&:first-child { margin-top: 0; }
|
|
|
|
&:last-child { margin-bottom: 0; }
|
|
}
|
|
|
|
tab.reorderable-page { border-style: solid; }
|
|
}
|
|
}
|
|
}
|
|
|
|
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
|
background-color: transparent;
|
|
border-radius: $corner-radius;
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* Scrollbars *
|
|
**************/
|
|
scrollbar {
|
|
$_slider_min_length: 24px;
|
|
|
|
// disable steppers
|
|
@at-root * {
|
|
-GtkScrollbar-has-backward-stepper: false;
|
|
-GtkScrollbar-has-forward-stepper: false;
|
|
}
|
|
|
|
transition: $transition;
|
|
background-color: $base;
|
|
|
|
// 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
|
|
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;
|
|
|
|
&:hover { background-color: $text-secondary; }
|
|
|
|
&:active { background-color: $text; }
|
|
|
|
&:disabled { background-color: $text-secondary-disabled; }
|
|
}
|
|
|
|
&.fine-tune {
|
|
slider {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
&.horizontal slider { margin: 2px 0; }
|
|
|
|
&.vertical slider { margin: 0 2px; }
|
|
}
|
|
|
|
&.overlay-indicator {
|
|
&:not(.fine-tune) slider {
|
|
transition-property: background-color, min-height, min-width;
|
|
}
|
|
|
|
&:not(.dragging):not(.hovering) {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
|
|
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 {
|
|
slider { min-width: $_slider_min_length; }
|
|
|
|
button { min-width: 8px; }
|
|
}
|
|
|
|
&.vertical {
|
|
slider { min-height: $_slider_min_length; }
|
|
|
|
button { min-height: 8px; }
|
|
}
|
|
}
|
|
|
|
&.dragging,
|
|
&.hovering { background-color: rgba($surface, 0.9); }
|
|
}
|
|
|
|
&.horizontal slider { min-width: $_slider_min_length; }
|
|
|
|
&.vertical 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: $container-padding 0;
|
|
padding: 0 2px;
|
|
border: 5px solid transparent;
|
|
border-radius: $circular-radius;
|
|
background-color: $track;
|
|
background-clip: padding-box;
|
|
font-size: 0;
|
|
|
|
&:checked { background-color: rgba($primary, 0.5); }
|
|
|
|
&:disabled { opacity: 0.5; }
|
|
|
|
// hide on/off icons for >=3.24.5
|
|
image {
|
|
margin: -8px;
|
|
-gtk-icon-transform: scale(0);
|
|
}
|
|
|
|
slider {
|
|
transition: all $duration $ease-out;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
margin: -3px -2px;
|
|
border-radius: $circular-radius;
|
|
outline: none;
|
|
box-shadow: 0 0 0 10px transparent, $shadow-z1;
|
|
background-color: $surface;
|
|
}
|
|
|
|
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-z1; }
|
|
|
|
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-z1; }
|
|
|
|
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-z1; }
|
|
|
|
&:checked slider {
|
|
background-color: $primary;
|
|
color: $primary;
|
|
}
|
|
|
|
row:selected & { }
|
|
}
|
|
|
|
|
|
/*************************
|
|
* 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;
|
|
-gtk-icon-shadow: $icon-shadow-z2;
|
|
|
|
&:hover, &:active { -gtk-icon-shadow: $icon-shadow-z4; }
|
|
|
|
@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;
|
|
}
|
|
|
|
checkbutton.text-button,
|
|
radiobutton.text-button {
|
|
// this is for a nice focus on check and radios text
|
|
padding: 2px;
|
|
|
|
label:not(:only-child) { margin: 0 4px; }
|
|
}
|
|
|
|
$check_radio_size: 40px;
|
|
$check_radio_primary: $success;
|
|
|
|
check,
|
|
radio {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
margin: -($check_radio_size - 24px) / 2;
|
|
padding: ($check_radio_size - 24px) / 2;
|
|
|
|
@extend %button-flat-simple;
|
|
@extend %circular-button;
|
|
|
|
&:checked, &:indeterminate {
|
|
color: $check_radio_primary;
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
&:not(:hover):focus { box-shadow: inset 0 0 0 9999px transparent; }
|
|
|
|
// &:only-child { margin: -12px; }
|
|
|
|
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;
|
|
}
|
|
|
|
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
|
|
|
|
&.left:dir(rtl) {
|
|
margin-left: -12px;
|
|
margin-right: -4px;
|
|
}
|
|
|
|
&.right:dir(ltr) {
|
|
margin-left: -4px;
|
|
margin-right: -12px;
|
|
}
|
|
}
|
|
|
|
menu menuitem & {
|
|
transition: none;
|
|
margin: 0; // this is a workaround for a menu check/radio size allocation issue
|
|
padding: 0;
|
|
|
|
&:dir(ltr) { margin-right: 8px; }
|
|
|
|
&:dir(rtl) { margin-left: 8px; }
|
|
|
|
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
|
|
|
|
&, &:hover, &:disabled {
|
|
box-shadow: none;
|
|
// color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
%check,
|
|
check {
|
|
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
|
|
|
|
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
|
|
|
|
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
|
|
}
|
|
|
|
%radio,
|
|
radio {
|
|
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
|
|
|
|
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
|
|
|
|
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
|
|
}
|
|
|
|
%small_check,
|
|
menu menuitem check {
|
|
& {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
border-radius: $corner-radius;
|
|
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
|
|
}
|
|
|
|
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
|
|
|
|
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
|
|
}
|
|
|
|
%small_radio,
|
|
menu menuitem radio {
|
|
& {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
border-image: none;
|
|
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
|
|
}
|
|
|
|
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
|
|
|
|
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.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.
|
|
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
|
|
|
|
treeview.view check,
|
|
treeview.view radio {
|
|
padding: 0;
|
|
|
|
&:hover, &:selected {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
& {
|
|
color: $text-secondary;
|
|
|
|
&:hover, &:active { color: $text; }
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
|
|
&:checked, &:indeterminate { color: $check_radio_primary; }
|
|
|
|
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
}
|
|
|
|
treeview.view radio:checked {
|
|
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
|
|
border-image: none;
|
|
}
|
|
|
|
|
|
/************
|
|
* GtkScale *
|
|
************/
|
|
scale {
|
|
// sizing
|
|
$_marks_length: 8px;
|
|
$_marks_distance: 7px;
|
|
|
|
$trough_size: 2px;
|
|
$finetune_trough_size: 4px;
|
|
|
|
$slider_size: 32px;
|
|
|
|
$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; }
|
|
|
|
// 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;
|
|
}
|
|
|
|
// 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
|
|
slider { margin: $finetune_slider_margin; }
|
|
}
|
|
|
|
// the backing bit
|
|
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; }
|
|
}
|
|
|
|
slider {
|
|
transition: background-color $duration $ease-out,
|
|
background-size $ripple-fade-out-duration $ease-out,
|
|
background-image $ripple-fade-out-opacity-duration $ease-out;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: auto, 1000% 1000%;
|
|
border-radius: 50%;
|
|
color: $primary;
|
|
|
|
@each $s, $as in ('', ''),
|
|
(':disabled', '-disabled') {
|
|
&#{$s} {
|
|
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
|
|
|
|
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
|
|
radial-gradient(circle, transparent 10%, transparent 0%);
|
|
}
|
|
}
|
|
|
|
&:focus { background-color: $overlay-focus; }
|
|
|
|
&:hover { background-color: $overlay-hover; }
|
|
|
|
&:focus:hover { background-color: $overlay-focus-hover; }
|
|
|
|
&:active {
|
|
$_url: 'assets/scale-slider#{$asset-suffix}';
|
|
|
|
transition: background-color $duration $ease-out,
|
|
background-size 0ms,
|
|
background-image 0ms;
|
|
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
|
|
background-color: $overlay-hover;
|
|
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
|
|
radial-gradient(circle, $overlay-active 10%, transparent 0%);
|
|
background-size: auto, 0% 0%;
|
|
}
|
|
}
|
|
|
|
marks,
|
|
value { color: $text-secondary; }
|
|
|
|
indicator {
|
|
background-color: $track;
|
|
color: transparent;
|
|
}
|
|
|
|
//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} {
|
|
slider {
|
|
@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')),
|
|
radial-gradient(circle, transparent 10%, transparent 0%);
|
|
}
|
|
}
|
|
|
|
&: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')),
|
|
radial-gradient(circle, $overlay-active 10%, transparent 0%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.color {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
|
|
&.horizontal {
|
|
padding: 0 0 12px 0;
|
|
|
|
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;
|
|
|
|
slider {
|
|
margin-right: $color_slider_margin;
|
|
margin-left: $color_marks_slider_margin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*****************
|
|
* Progress bars *
|
|
*****************/
|
|
progressbar {
|
|
// sizing
|
|
&.horizontal {
|
|
trough,
|
|
progress { min-height: $bar-size; }
|
|
}
|
|
|
|
&.vertical {
|
|
trough,
|
|
progress { min-width: $bar-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: $bar-size;
|
|
min-height: $bar-size;
|
|
background-color: transparent;
|
|
|
|
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: $bar-size; }
|
|
|
|
&.discrete block {
|
|
min-width: $medium-size;
|
|
|
|
&:not(:last-child) { margin-right: 2px; }
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
block { min-width: $bar-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 *
|
|
*****************/
|
|
printdialog {
|
|
paper {
|
|
padding: 0;
|
|
border: 1px solid $divider;
|
|
background-color: $base;
|
|
color: $text;
|
|
}
|
|
|
|
.dialog-action-box { margin: 12px; }
|
|
}
|
|
|
|
|
|
/**********
|
|
* Frames *
|
|
**********/
|
|
|
|
%frame {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid $frame;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
frame > border,
|
|
.frame {
|
|
@extend %frame;
|
|
|
|
&.view { border-radius: $corner-radius; }
|
|
|
|
&.flat { border-style: none; }
|
|
}
|
|
|
|
frame {
|
|
// & > border { @extend %frame; }
|
|
|
|
&.flat > border,
|
|
statusbar & > border { border: none; } // for backward compatibility
|
|
}
|
|
|
|
actionbar > revealer > box {
|
|
padding: $container-padding;
|
|
border-top: 1px solid $frame;
|
|
background-color: $base;
|
|
background-clip: border-box;
|
|
|
|
.background.csd box.vertical > & {
|
|
border-radius: 0 0 $window-radius $window-radius;
|
|
}
|
|
|
|
button:not(.suggested-action):not(.destructive-action) { @extend %button-flat; }
|
|
|
|
.linked > button:not(.suggested-action):not(.destructive-action) { @extend %button-basic; }
|
|
|
|
// .linked:not(.vertical) > entry:not(:only-child) { border-radius: $corner-radius; }
|
|
}
|
|
|
|
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-style: solid none none solid;
|
|
border-width: 1px;
|
|
border-color: $divider;
|
|
background-color: $base;
|
|
|
|
&:dir(rtl) { border-style: solid solid none none; }
|
|
}
|
|
}
|
|
|
|
// vbox and hbox separators
|
|
separator {
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
background-color: $divider;
|
|
}
|
|
|
|
%hide_separators {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
/*********
|
|
* Lists *
|
|
*********/
|
|
list {
|
|
border-color: $frame;
|
|
background-color: $base;
|
|
|
|
row { padding: 2px; }
|
|
|
|
&.content:not(.conversation-listbox) {
|
|
@extend %circular_list;
|
|
|
|
> row {
|
|
@extend %circular_row;
|
|
}
|
|
}
|
|
}
|
|
|
|
row {
|
|
@at-root %row_activatable, &.activatable {
|
|
transition: $transition,
|
|
background-size $ripple-fade-out-duration $ease-out,
|
|
background-image $ripple-fade-out-opacity-duration $ease-out;
|
|
outline: none;
|
|
box-shadow: inset 0 0 0 9999px transparent;
|
|
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 1000% 1000%;
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 9999px $overlay-focus;
|
|
}
|
|
|
|
&:hover {
|
|
transition: $transition,
|
|
box-shadow 0ms,
|
|
background-size $ripple-fade-out-duration $ease-out,
|
|
background-image $ripple-fade-out-opacity-duration $ease-out;
|
|
box-shadow: inset 0 0 0 9999px $overlay-hover;
|
|
}
|
|
|
|
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
&:active {
|
|
transition: $transition,
|
|
background-size 0ms,
|
|
background-image 0ms;
|
|
animation: ripple $ripple-fade-in-duration $ease-out forwards;
|
|
box-shadow: inset 0 0 0 9999px $overlay-hover;
|
|
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
|
|
background-size: 0% 0%;
|
|
}
|
|
|
|
button.circular {
|
|
@extend %button-flat-simple;
|
|
}
|
|
}
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
color: inherit; // for overlays
|
|
|
|
image,
|
|
label { color: $text; }
|
|
|
|
button image,
|
|
button label { color: inherit; }
|
|
|
|
&:disabled {
|
|
image,
|
|
label { color: $text-disabled; }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*********************
|
|
* App Notifications *
|
|
*********************/
|
|
.app-notification {
|
|
// @extend %osd;
|
|
@extend %toolbar_osd;
|
|
margin: 8px;
|
|
|
|
button {
|
|
@extend %button-flat;
|
|
|
|
&.text-button:not(:disabled) { color: $primary; }
|
|
}
|
|
|
|
&.frame,
|
|
border { border-style: none; }
|
|
}
|
|
|
|
|
|
/*************
|
|
* Expanders *
|
|
*************/
|
|
expander {
|
|
title > arrow {
|
|
transition: all $duration $ease-out;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
-gtk-icon-transform: rotate(-90deg);
|
|
|
|
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
|
|
|
|
&:checked { -gtk-icon-transform: unset; }
|
|
|
|
color: $text-secondary;
|
|
|
|
&:hover, &:active { color: $text; }
|
|
|
|
&:disabled { color: $text-secondary-disabled; }
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Calendar *
|
|
************/
|
|
calendar {
|
|
padding: 1px;
|
|
border: 1px solid $frame;
|
|
color: $text;
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
|
|
border-radius: $corner-radius + 1px;
|
|
}
|
|
|
|
&.header {
|
|
border-style: none none solid;
|
|
border-color: $divider;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.button { @extend %button-flat-simple; }
|
|
|
|
&.highlight {
|
|
color: $text-secondary;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&:indeterminate { color: $text-secondary-disabled; }
|
|
}
|
|
|
|
|
|
/***********
|
|
* Dialogs *
|
|
***********/
|
|
messagedialog { // Message Dialog styling
|
|
&.background { background-color: $surface; }
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
&.csd { // rounded bottom border styling for csd version
|
|
&.background {
|
|
// bigger radius for better antialiasing
|
|
border-bottom-left-radius: $window-radius;
|
|
border-bottom-right-radius: $window-radius;
|
|
}
|
|
|
|
.dialog-action-box {
|
|
margin-top: -$container-padding;
|
|
// padding: $container-padding;
|
|
|
|
button {
|
|
@extend %button-flat;
|
|
|
|
&, &:first-child, &:last-child { border-radius: $circular-radius; }
|
|
|
|
&:not(:last-child) { margin-right: $container-padding; }
|
|
|
|
&:not(:disabled) { color: $primary; }
|
|
|
|
// &.suggested-action:not(:disabled) { color: $suggested; }
|
|
|
|
&.destructive-action:not(:disabled) { color: $destructive; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
filechooser {
|
|
.csd & {
|
|
background-color: $base;
|
|
border-radius: 0 0 $window-radius $window-radius;
|
|
}
|
|
|
|
.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 {
|
|
background-color: transparent;
|
|
|
|
scrolledwindow {
|
|
background-color: transparent;
|
|
border-radius: 0 0 $window-radius 0;
|
|
|
|
list { background-color: transparent; }
|
|
|
|
treeview.view {
|
|
@extend .view;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
> placesview {
|
|
background-color: transparent;
|
|
// border-bottom-right-radius: $window-radius;
|
|
|
|
> actionbar {
|
|
&, > revealer > box {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
frame > border { border: none; }
|
|
}
|
|
|
|
.csd & placessidebar {
|
|
background: none;
|
|
border-bottom-left-radius: $window-radius;
|
|
}
|
|
|
|
actionbar {
|
|
&, > revealer > box {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// filechooserbutton:drop(active) {
|
|
// box-shadow: none;
|
|
// }
|
|
|
|
|
|
/***********
|
|
* Sidebar *
|
|
***********/
|
|
.sidebar {
|
|
border-style: none;
|
|
background-color: $base-alt;
|
|
|
|
&:not(separator) {
|
|
@at-root %sidebar_left,
|
|
&:dir(ltr),
|
|
&.left,
|
|
&.left:dir(rtl) {
|
|
border-right: 1px solid $divider;
|
|
border-left-style: none;
|
|
}
|
|
|
|
@at-root %sidebar_right,
|
|
&:dir(rtl),
|
|
&.right {
|
|
border-left: 1px solid $divider;
|
|
border-right-style: none;
|
|
}
|
|
}
|
|
|
|
list { background-color: transparent; }
|
|
|
|
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
|
|
}
|
|
|
|
stacksidebar.sidebar {
|
|
& {
|
|
&:dir(ltr),
|
|
&.left,
|
|
&.left:dir(rtl) { list { @extend %sidebar_left; }}
|
|
|
|
&:dir(rtl),
|
|
&.right { list { @extend %sidebar_right; }}
|
|
}
|
|
|
|
+ separator.vertical,
|
|
separator.horizontal { @extend %hide_separators; }
|
|
|
|
list {
|
|
padding: 4px;
|
|
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
|
|
}
|
|
|
|
row {
|
|
min-height: 32px;
|
|
padding: 0 8px - 6px;
|
|
border-radius: $bar-size;
|
|
|
|
&:selected {
|
|
background-color: $overlay-checked;
|
|
color: $primary;
|
|
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: $divider;
|
|
|
|
&.selection-mode,
|
|
.selection-mode & {
|
|
// background-color: $divider;
|
|
}
|
|
}
|
|
|
|
|
|
/****************
|
|
* 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.sidebar {
|
|
> viewport.frame { border-style: none; }
|
|
|
|
list { padding: (4px - 3px) 0 4px; }
|
|
|
|
row {
|
|
// Needs overriding of the GtkListBoxRow padding
|
|
min-height: 32px;
|
|
margin: -1px 4px -1px 0; // Remove unwanted hard-coded vertical margins with -1px
|
|
padding: 0;
|
|
border-radius: 0 $circular_radius $circular_radius 0;
|
|
|
|
// Using margins/padding directly in the SidebarRow
|
|
// will make the animation of the new bookmark row jump
|
|
> revealer { padding: 0 8px 0 16px; }
|
|
|
|
&:selected {
|
|
background-color: $overlay-checked;
|
|
color: $primary;
|
|
font-weight: 500;
|
|
|
|
image.sidebar-icon { color: $primary; }
|
|
}
|
|
|
|
&:disabled { color: $text-disabled; }
|
|
|
|
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) {
|
|
transition: $transition,
|
|
box-shadow 0ms,
|
|
background-size $ripple-fade-out-duration $ease-out,
|
|
background-image $ripple-fade-out-opacity-duration $ease-out;
|
|
box-shadow: inset 0 0 0 9999px $overlay-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
placesview {
|
|
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
|
|
|
|
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
|
|
|
|
// this selects the "connect to server" label
|
|
> actionbar > revealer > box > label {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* 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($divider);
|
|
background-size: 1px 1px;
|
|
background-clip: content-box; // avoids borders image being rendered twice (?)
|
|
|
|
&.wide {
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
background-color: $background;
|
|
background-image: image($divider), image($divider);
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* GtkInfoBar *
|
|
**************/
|
|
infobar {
|
|
border: none;
|
|
margin-bottom: 0;
|
|
|
|
&.info {
|
|
& > revealer > box,
|
|
&:hover > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $base;
|
|
|
|
button {
|
|
&, &.text-button:not(:disabled) { 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);
|
|
}
|
|
|
|
&.background.csd {
|
|
border-radius: $corner-radius;
|
|
}
|
|
|
|
// padding: 4px; /* not working */
|
|
border-radius: $corner-radius/2;
|
|
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
|
|
|
&:not(.csd):not(.unity-csd) {
|
|
// border: 1px solid $frame;
|
|
// border-radius: $corner-radius + 1px;
|
|
// background-clip: $background-clip-extra;
|
|
}
|
|
|
|
// FIXME: we need a border or tooltips vanish on black background.
|
|
decoration { background-color: transparent; }
|
|
|
|
> box {
|
|
margin: -6px; // Remove hard-coded 6px margin
|
|
min-height: 32px - 4px * 2;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
* {
|
|
// workaround for Eclipse.
|
|
// do not include any declaration here.
|
|
}
|
|
}
|
|
|
|
|
|
/*****************
|
|
* 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: $menu-radius;
|
|
border-top-right-radius: $menu-radius;
|
|
|
|
overlay {
|
|
border-top-left-radius: $menu-radius;
|
|
border-top-right-radius: $menu-radius;
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-left-radius: $menu-radius;
|
|
border-bottom-right-radius: $menu-radius;
|
|
|
|
overlay {
|
|
border-bottom-left-radius: $menu-radius;
|
|
border-bottom-right-radius: $menu-radius;
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&:first-child:not(.top) {
|
|
border-top-left-radius: $menu-radius;
|
|
border-bottom-left-radius: $menu-radius;
|
|
|
|
overlay {
|
|
border-top-left-radius: $menu-radius;
|
|
border-bottom-left-radius: $menu-radius;
|
|
}
|
|
}
|
|
|
|
&.right,
|
|
&:last-child:not(.bottom) {
|
|
border-top-right-radius: $menu-radius;
|
|
border-bottom-right-radius: $menu-radius;
|
|
|
|
overlay {
|
|
border-top-right-radius: $menu-radius;
|
|
border-bottom-right-radius: $menu-radius;
|
|
}
|
|
}
|
|
|
|
&.dark { color: on(dark); }
|
|
|
|
&.light { color: on(light); }
|
|
|
|
overlay {
|
|
// transition: $transition-shadow;
|
|
|
|
// &:hover { }
|
|
//
|
|
// &:drop(active) { }
|
|
}
|
|
|
|
&#add-color-button {
|
|
border-radius: $menu-radius $menu-radius 0 0;
|
|
color: $text;
|
|
|
|
&:only-child { border-radius: $menu-radius; }
|
|
|
|
overlay {
|
|
background-color: $surface;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
|
|
overlay { box-shadow: none; }
|
|
}
|
|
|
|
row:selected & {
|
|
}
|
|
|
|
&#editor-color-sample {
|
|
border-radius: $menu-radius;
|
|
|
|
overlay { border-radius: $menu-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 & { @extend %osd; }
|
|
//
|
|
// .osd & button.flat { // FIXME: quick hack, redo properly
|
|
// }
|
|
//
|
|
// button { // +/- buttons on GtkVolumeButton popup
|
|
// }
|
|
// }
|
|
|
|
|
|
/**********************
|
|
* Window Decorations *
|
|
**********************/
|
|
decoration {
|
|
transition: $transition-shadow;
|
|
border-radius: $window-radius;
|
|
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
|
|
|
|
// FIXME rationalize shadows
|
|
|
|
// this is used for the resize cursor area
|
|
margin: 8px;
|
|
|
|
&: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.
|
|
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
|
|
}
|
|
|
|
.maximized &,
|
|
.fullscreen &,
|
|
.tiled &,
|
|
.tiled-top &,
|
|
.tiled-right &,
|
|
.tiled-bottom &,
|
|
.tiled-left & { border-radius: 0; }
|
|
|
|
.popup & { box-shadow: none; }
|
|
|
|
// server-side decorations as used by mutter
|
|
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
|
|
|
|
.csd.popup & {
|
|
border-radius: $corner-radius;
|
|
box-shadow: $shadow-z4;
|
|
}
|
|
|
|
tooltip.csd & {
|
|
border-radius: $corner-radius;
|
|
box-shadow: none;
|
|
}
|
|
|
|
messagedialog.csd & {
|
|
border-radius: $window-radius;
|
|
// box-shadow: $shadow-z24, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent;
|
|
|
|
// &:backdrop { box-shadow: $shadow-z4, 0 24px (38px * .6) 3px transparent, 0 9px (46px * .6) 8px transparent; }
|
|
}
|
|
|
|
.solid-csd & {
|
|
margin: 0;
|
|
padding: 2px;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
box-shadow: inset 0 1px highlight($titlebar);
|
|
background-color: $titlebar;
|
|
|
|
&:backdrop { background-color: $titlebar-backdrop; }
|
|
}
|
|
}
|
|
|
|
// Window Close button
|
|
button.titlebutton {
|
|
// @extend %button-flat-simple;
|
|
|
|
@extend %circular-button;
|
|
|
|
// .selection-mode & { }
|
|
}
|
|
|
|
.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"));
|
|
|
|
&.top:dir(ltr), &.bottom:dir(rtl) {
|
|
-gtk-icon-transform: rotate(90deg);
|
|
}
|
|
|
|
&.bottom:dir(ltr), &.top:dir(rtl) {
|
|
-gtk-icon-transform: unset;
|
|
}
|
|
|
|
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
|
|
padding-top: 6px;
|
|
-gtk-icon-transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
|
|
|
|
// shortcut window keys
|
|
.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 $frame;
|
|
border-radius: $corner-radius + 1px;
|
|
box-shadow: inset 0 -2px $frame;
|
|
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: 0;
|
|
margin: $container-padding 0;
|
|
border-radius: $circular-radius;
|
|
background-color: $overlay-normal;
|
|
|
|
&.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
|
|
margin: 0 0;
|
|
border-radius: $circular-radius;
|
|
background-color: transparent;
|
|
|
|
&.text-button { min-width: 100px; }
|
|
|
|
&:focus { box-shadow: inset 0 0 0 2px $overlay-focus; }
|
|
|
|
&:active {
|
|
box-shadow: inset 0 0 0 9999px gtkalpha($primary, 0.08);
|
|
background-image: radial-gradient(circle, gtkalpha($primary, 0.08) 10%, transparent 0%);
|
|
}
|
|
|
|
&:checked {
|
|
background-color: $primary;
|
|
color: on($primary);
|
|
}
|
|
}
|
|
|
|
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: none;
|
|
}
|
|
|
|
// Drapshadow for large icons
|
|
.icon-dropshadow {
|
|
// -gtk-icon-shadow: none;
|
|
}
|
|
|
|
|
|
/*********
|
|
* Emoji *
|
|
*********/
|
|
popover.emoji-picker {
|
|
padding: 0;
|
|
|
|
entry {
|
|
border-bottom: 1px solid $divider;
|
|
border-image: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
scrolledwindow { border-bottom: 1px solid $divider; }
|
|
}
|
|
|
|
button.emoji-section {
|
|
margin: 4px;
|
|
|
|
&:checked {
|
|
// background-color: transparent;
|
|
color: $primary;
|
|
}
|
|
|
|
&:not(:last-child) { margin-right: 0; }
|
|
}
|
|
|
|
popover.emoji-picker .emoji {
|
|
min-width: 3em;
|
|
min-height: 3em;
|
|
padding: 0 8px;
|
|
// font-size: larger;
|
|
|
|
widget {
|
|
transition: $transition;
|
|
border-radius: $corner-radius;
|
|
|
|
&:hover { background-color: $overlay-hover; }
|
|
}
|
|
}
|
|
|
|
popover.emoji-completion {
|
|
padding: 8px 0;
|
|
|
|
arrow {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.emoji-completion-row {
|
|
min-height: $menuitem-size;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.emoji:hover {
|
|
background-color: $overlay-hover;
|
|
}
|
|
}
|