4517 lines
101 KiB
SCSS
4517 lines
101 KiB
SCSS
|
|
%side_headerbar_left {
|
|
background-image: none;
|
|
background-color: rgba($dark_sidebar_bg, 1);
|
|
box-shadow: inset 0 1px $highlight_color;
|
|
border: none;
|
|
}
|
|
|
|
%side_headerbar_right {
|
|
background-image: none;
|
|
background-color: rgba($base_color, 1);
|
|
box-shadow: inset 0 1px $highlight_color;
|
|
border: none;
|
|
}
|
|
|
|
%side_searchbar {
|
|
background-color: rgba($dark_sidebar_bg, 1);
|
|
|
|
> revealer > box {
|
|
border-color: if($variant == 'light', $solid_borders_color, $header_border);
|
|
}
|
|
}
|
|
|
|
%side_separator {
|
|
&, &:backdrop {
|
|
background-image: if($variant == 'light', image($solid_borders_color), image($header_border));
|
|
background-color: transparent;
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
$list_shadow: if($variant == 'light',
|
|
(inset 0 0 8px rgba(black, 0.02), inset 0 0 3px rgba(black, 0.01)),
|
|
(inset 0 0 8px rgba(white, 0.03), inset 0 0 3px rgba(white, 0.02)));
|
|
|
|
%circular_list {
|
|
border-radius: $wm_radius;
|
|
box-shadow: $list_shadow;
|
|
background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05));
|
|
border: none;
|
|
|
|
> separator { background: none; min-height: 0; }
|
|
}
|
|
|
|
%circular_row {
|
|
&:first-child {
|
|
border-top-left-radius: $wm_radius;
|
|
border-top-right-radius: $wm_radius;
|
|
}
|
|
|
|
&:last-child { // Not use ?
|
|
border-bottom-left-radius: $wm_radius;
|
|
border-bottom-right-radius: $wm_radius;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: $wm_radius;
|
|
}
|
|
}
|
|
|
|
%sidebar_row {
|
|
margin: 2px 4px;
|
|
border-radius: $wm_radius - 4px;
|
|
}
|
|
|
|
//
|
|
// Base States
|
|
//
|
|
.background {
|
|
// border-radius: 0 0 $wm_radius $wm_radius;
|
|
color: $fg_color;
|
|
background-color: rgba($bg_color, 1);
|
|
|
|
// > box > stack { background-color: $bg_color; }
|
|
|
|
&.csd {
|
|
border-radius: $wm_radius; // Set csd windows botttom border radius
|
|
|
|
&.maximized, &.tiled, &.fullscreen {
|
|
border-radius: $maximized_radius; // Set csd windows botttom border radius
|
|
}
|
|
}
|
|
|
|
&.solid-csd { border-radius: 0; }
|
|
}
|
|
|
|
dnd {
|
|
color: $fg_color;
|
|
}
|
|
|
|
.normal-icons {
|
|
-gtk-icon-size: 16px;
|
|
}
|
|
|
|
.large-icons {
|
|
-gtk-icon-size: 32px;
|
|
}
|
|
|
|
spinner:disabled,
|
|
arrow:disabled,
|
|
scrollbar:disabled,
|
|
check:disabled,
|
|
radio:disabled,
|
|
treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
|
|
|
|
%view, .view {
|
|
color: $text_color;
|
|
background-color: $base_color;
|
|
transition: all 200ms $ease-out-quad;
|
|
|
|
// &:hover { background-color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 3%)); }
|
|
|
|
&:selected {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
transition: all 350ms $ease-out-quad;
|
|
|
|
&:focus {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
}
|
|
|
|
textview {
|
|
background-color: $base_color; // This will get overridden by .view, needed by gedit line numbers
|
|
|
|
> text {
|
|
background-color: $base_color;
|
|
// @extend %view;
|
|
selection { &:focus, & { @extend %selected_items; }}
|
|
}
|
|
|
|
border {
|
|
background-color: mix($bg_color, $base_color, 50%);
|
|
}
|
|
|
|
&:drop(active) {
|
|
caret-color: $drop_target_color;
|
|
}
|
|
}
|
|
|
|
iconview {
|
|
@extend %view;
|
|
|
|
&, &:hover, &:selected { border-radius: $bt_radius; }
|
|
}
|
|
|
|
%rubberband,
|
|
rubberband {
|
|
border: 1px solid darken($selected_bg_color, 10%);
|
|
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
|
}
|
|
|
|
flowbox {
|
|
> rubberband { @extend %rubberband; }
|
|
|
|
> flowboxchild {
|
|
padding: 3px;
|
|
border-radius: $bt_radius;
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
&.search-bar { border-bottom: 1px solid $header_border; }
|
|
}
|
|
|
|
gridview {
|
|
> rubberband { @extend rubberband; }
|
|
|
|
> child {
|
|
padding: 3px;
|
|
|
|
&:selected {
|
|
outline-color: darken($selected_bg_color, 15%);
|
|
|
|
@extend %selected_items;
|
|
}
|
|
|
|
box { //cells
|
|
border-spacing: 8px; //label separation
|
|
margin: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
coverflow cover {
|
|
color: $text_color;
|
|
background-color: $base_color;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
label {
|
|
&.separator {
|
|
@extend %dim-label;
|
|
|
|
color: $fg_color;
|
|
}
|
|
|
|
row:selected &,
|
|
&:selected { @extend %nobg_selected_items; }
|
|
|
|
> selection {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: $disabled_fg_color;
|
|
selection { @extend %selected_items, :disabled; }
|
|
}
|
|
}
|
|
|
|
%dim-label, .dim-label {
|
|
opacity: 0.55;
|
|
text-shadow: none;
|
|
}
|
|
|
|
window.assistant {
|
|
// min-height: 38px;
|
|
.sidebar {
|
|
background-color: $base_color;
|
|
// border-top: 1px solid $borders_color;
|
|
}
|
|
|
|
&.csd .sidebar { border-top-style: none; }
|
|
|
|
.sidebar > label { padding: 6px 12px; }
|
|
|
|
.sidebar > label.highlight {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
}
|
|
|
|
%osd {
|
|
color: $osd_fg_color;
|
|
border: none;
|
|
background-color: $osd_bg_color;
|
|
background-clip: padding-box;
|
|
border-radius: $bt_radius;
|
|
}
|
|
|
|
.osd {
|
|
@extend %osd;
|
|
padding: $container_padding;
|
|
margin: $container_padding;
|
|
box-shadow: 0 3px 8px rgba(black, 0.35);
|
|
|
|
&.circular { border-radius: 100%; }
|
|
}
|
|
|
|
//
|
|
// Spinner Animations
|
|
//
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Text Entries
|
|
//
|
|
%Linked_entrys {
|
|
@include entry(normal);
|
|
border: none;
|
|
|
|
&:focus {
|
|
@include entry(focus);
|
|
}
|
|
|
|
&:disabled {
|
|
@include entry(insensitive);
|
|
}
|
|
}
|
|
|
|
%entry,
|
|
entry {
|
|
min-height: 24px;
|
|
border: none;
|
|
padding: 2px 8px;
|
|
border-radius: $bt_radius;
|
|
caret-color: currentColor;
|
|
|
|
&.search { border-radius: $bt_radius; }
|
|
|
|
@include entry(normal);
|
|
|
|
> image { // icons inside the entry
|
|
color: mix($fg_color, $base_color, 80%);
|
|
|
|
&.left { padding-left: 0; padding-right: 5px; }
|
|
&.right { padding-right: 0; padding-left: 5px; }
|
|
}
|
|
|
|
> text > placeholder {
|
|
@extend .dim-label;
|
|
}
|
|
|
|
@at-root %flat_entry, &.flat {
|
|
&:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
min-height: 0;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include entry(hover);
|
|
}
|
|
|
|
&:focus-within {
|
|
@include entry(focus);
|
|
|
|
> placeholder {
|
|
opacity: 0; // We hide placeholders on focus
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
@include entry(insensitive);
|
|
}
|
|
|
|
> text > selection { @extend %selected_items; }
|
|
|
|
// error and warning style
|
|
@each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $light_fg_color),
|
|
(error, $error_color, $light_fg_color),
|
|
(search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
|
|
&.#{$e_type} {
|
|
color: $e_fg_color;
|
|
background-color: mix($e_color, $base_color, 60%);
|
|
border-image: none;
|
|
|
|
image { color: $e_fg_color; }
|
|
|
|
&:focus-within {
|
|
color: $e_fg_color;
|
|
background-color: $e_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
> selection {
|
|
background-color: $e_fg_color;
|
|
color: $e_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:drop(active) {
|
|
&:focus, & {
|
|
border-color: $drop_target_color;
|
|
box-shadow: none;
|
|
border-image: none;
|
|
}
|
|
}
|
|
|
|
.osd & {
|
|
@include entry(osd);
|
|
border-image: none;
|
|
&:focus { @include entry(osd-focus); border-image: none; }
|
|
&:disabled { @include entry(osd-insensitive); border-image: none; }
|
|
|
|
selection {
|
|
&:focus, & {
|
|
color: $selected_bg_color;
|
|
background-color: $selected_fg_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
> progress {
|
|
margin: 0 -6px;
|
|
border-radius: 0;
|
|
border-width: 0 0 2px;
|
|
border-color: $progress_color;
|
|
border-style: solid;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
progress > trough > progress {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-radius: 0;
|
|
border-width: 0 0 2px;
|
|
border-color: $progress_color;
|
|
border-style: solid;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// linked entries
|
|
.linked:not(.vertical) > &,
|
|
.linked:not(.vertical) > &:focus-within {
|
|
@extend %linked;
|
|
min-height: 20px;
|
|
}
|
|
|
|
.linked.vertical > &,
|
|
.linked.vertical > &:focus-within {
|
|
@extend %linked_vertical;
|
|
}
|
|
|
|
.linked > &:not(:only-child) {
|
|
@extend %Linked_entrys;
|
|
}
|
|
|
|
.linked:not(.vertical) > & + button.combo { padding-left: 0; }
|
|
.linked.vertical > & + button.combo { padding: 0; }
|
|
}
|
|
|
|
.entry-tag {
|
|
$tag_height: 24px;
|
|
$tag_margin: 8px;
|
|
|
|
margin: $tag_margin; // instead of min-height: $tag_height;
|
|
border-radius: 50px;
|
|
box-shadow: none;
|
|
background-color: $destructive_color;
|
|
color: $light_fg_color;
|
|
border: none;
|
|
|
|
&:hover { box-shadow: 0 0 0 1px $borders_color; }
|
|
|
|
// side margins: compensate the entry padding with a negative margin
|
|
// then the negative margin itself
|
|
:dir(ltr) & {
|
|
margin-left: 8px;
|
|
margin-right: $tag_margin - 8px;
|
|
padding-left: 8px;
|
|
padding-right: ($tag_height - 16px) / 2;
|
|
}
|
|
|
|
:dir(rtl) & {
|
|
margin-left: $tag_margin - 8px;
|
|
margin-right: 8px;
|
|
padding-left: ($tag_height - 16px) / 2;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
// seems any sizing doesn't work
|
|
&.button {
|
|
box-shadow: none;
|
|
border: none;
|
|
background-color: transparent;
|
|
|
|
&:not(:hover):not(:active) { color: $disabled_fg_color; }
|
|
}
|
|
}
|
|
|
|
treeview entry {
|
|
&:focus-within {
|
|
&:dir(rtl), &:dir(ltr) { // specificity bump hack
|
|
background-color: $base_color;
|
|
transition-property: color, background;
|
|
}
|
|
}
|
|
|
|
&.flat, & {
|
|
border-radius: 0;
|
|
background-image: none;
|
|
background-color: $base_color;
|
|
|
|
&:focus-within { border-color: $selected_bg_color; }
|
|
}
|
|
}
|
|
|
|
// Editable Labels
|
|
editablelabel > stack > text {
|
|
@include entry(normal);
|
|
}
|
|
|
|
//
|
|
// Buttons
|
|
//
|
|
// stuff for .needs-attention
|
|
$_dot_color: if($variant=='light', $selected_bg_color,
|
|
lighten($selected_bg_color, 15%));
|
|
@keyframes needs_attention {
|
|
from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
|
|
to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
|
|
}
|
|
|
|
%needs_attention {
|
|
// the dot is drawn by using two radial gradient, the first one is the actual dot, the other
|
|
// simulates the shadow labels and icons normally have in buttons.
|
|
animation: needs_attention 150ms ease-in;
|
|
|
|
background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
|
|
background-size: 6px 6px, 6px 6px;
|
|
background-repeat: no-repeat;
|
|
|
|
@if $variant == 'light' { background-position: right 3px, right 4px; }
|
|
|
|
@else { background-position: right 3px, right 2px; }
|
|
|
|
&:backdrop { background-size: 6px 6px, 0 0;}
|
|
|
|
&:dir(rtl) {
|
|
@if $variant == 'light' { background-position: left 3px, left 4px; }
|
|
|
|
@else { background-position: left 3px, left 2px; }
|
|
}
|
|
}
|
|
|
|
%flat_button {
|
|
@include button(flat-normal);
|
|
&:hover { @include button(flat-hover); }
|
|
&:active { @include button(flat-active); }
|
|
&:checked { @include button(flat-checked); }
|
|
&:disabled { @include button(flat-insensitive); }
|
|
}
|
|
|
|
%button,
|
|
button {
|
|
min-height: 20px;
|
|
min-width: 16px;
|
|
transition: $button_transition;
|
|
border: 1px solid;
|
|
border-radius: $bt_radius;
|
|
padding: 0 8px;
|
|
background-clip: if($variant=='light', border-box, padding-box);
|
|
@include button(normal);
|
|
|
|
separator { margin: 4px 1px; }
|
|
|
|
&.flat {
|
|
@extend %flat_button;
|
|
min-height: if($variant =='light', 24px, 24px);
|
|
transition: none;
|
|
|
|
&:hover {
|
|
transition: $button_transition;
|
|
transition-duration: 350ms;
|
|
|
|
&:active { transition: $button_transition; }
|
|
}
|
|
|
|
&:checked:hover { background-image: none; }
|
|
|
|
&.toggle.popup {
|
|
min-width: 20px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include button(hover);
|
|
background-clip: if($variant=='light', border-box, padding-box);
|
|
-gtk-icon-filter: brightness(1.2);
|
|
}
|
|
|
|
&:active, &:checked {
|
|
@include button(active);
|
|
|
|
background-clip: if($variant=='light', border-box, padding-box);
|
|
transition-duration: 200ms;
|
|
|
|
&:not(:disabled) label:disabled { color: inherit; opacity: 0.6; }
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(insensitive);
|
|
background-clip: if($variant=='light', border-box, padding-box);
|
|
|
|
&:active, &:checked {
|
|
@include button(insensitive-active);
|
|
background-clip: if($variant=='light', border-box, padding-box);
|
|
}
|
|
}
|
|
|
|
&.image-button {
|
|
min-height: 22px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
&.text-button {
|
|
min-height: 22px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
&.text-button.image-button {
|
|
min-height: 22px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
|
|
label {
|
|
&:first-child {
|
|
padding-left: 8px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
&:last-child {
|
|
padding-right: 8px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
&:only-child {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
&.popup { padding-right: 6px; padding-left: 6px; }
|
|
}
|
|
|
|
&.close { // The Bloody Circul Button
|
|
@extend %circular_button;
|
|
}
|
|
|
|
@at-root %button_basic_drop_active,
|
|
&:drop(active) {
|
|
color: $drop_target_color;
|
|
border-color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
color: $osd_fg_color;
|
|
background-color: $osd_bg_color;
|
|
border-color: darken($osd_bg_color, 8%);
|
|
|
|
&.image-button {
|
|
padding: 0;
|
|
min-height: 42px;
|
|
min-width: 42px;
|
|
}
|
|
|
|
&:hover {
|
|
color: $selected_bg_color;
|
|
box-shadow: none;
|
|
background-color: $osd_button_bg;
|
|
}
|
|
|
|
&:active, &:checked {@include button(osd-active); }
|
|
&:disabled { @include button(osd-insensitive); }
|
|
}
|
|
|
|
//overlay / OSD style
|
|
@at-root %osd_button,
|
|
.osd & {
|
|
@include button(osd);
|
|
|
|
&:hover { @include button(osd-hover); }
|
|
&:active, &:checked { @include button(osd-active); }
|
|
&:disabled { @include button(osd-insensitive); }
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
box-shadow: none;
|
|
|
|
&:hover { @include button(osd-hover); }
|
|
|
|
&:disabled {
|
|
@include button(osd-insensitive);
|
|
background-image: none;
|
|
}
|
|
|
|
&:active, &:checked { @include button(osd-active); }
|
|
}
|
|
}
|
|
|
|
.osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child),
|
|
.osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; }
|
|
|
|
// Suggested and Destructive Action buttons
|
|
@each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $light_fg_color),
|
|
(destructive-action, $destructive_color, $light_fg_color) {
|
|
&.#{$b_type} {
|
|
@include button(suggested_destructive, $b_color, $b_fg);
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
color: $b_color;
|
|
}
|
|
|
|
&:hover {
|
|
@include button(suggested_destructive, lighten($b_color, 5%), $b_fg);
|
|
}
|
|
|
|
&:active, &:checked {
|
|
@include button(suggested_destructive, lighten($b_color, 10%), $b_fg);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.flat:disabled {
|
|
@include button(undecorated);
|
|
color: $disabled_fg_color;
|
|
}
|
|
|
|
&:disabled { @include button(insensitive); }
|
|
}
|
|
}
|
|
|
|
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.
|
|
|
|
outline-offset: -3px; // needs to be set or it gets overridden by GtkRadioButton outline-offset
|
|
|
|
> label {
|
|
padding-left: 6px; // label padding
|
|
padding-right: 6px; //
|
|
}
|
|
> image {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
&.text-button {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
&.image-button {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
&.needs-attention {
|
|
> label, > image { @extend %needs_attention; }
|
|
|
|
&:active, &:checked {
|
|
> label, > image {
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hide separators
|
|
&.font,
|
|
&.file { separator { background-color: transparent; }}
|
|
|
|
.linked:not(.vertical) > & { @extend %linked; }
|
|
|
|
.linked.vertical > & { @extend %linked_vertical; }
|
|
}
|
|
|
|
// Some crazy linking stuff
|
|
@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true',
|
|
$e_border:$entry_border, $b_border:$button_border) {
|
|
|
|
$_border: if($vert=='false', left, top);
|
|
|
|
@if $entry_rules=='true' {
|
|
@each $e_type, $e_color in (':focus-within', $entry_highlight),
|
|
(':drop(active)', $drop_target_color),
|
|
('.warning:focus-within', $warning_color),
|
|
('.error:focus-within', $error_color) {
|
|
|
|
> entry#{$e_type}:not(:only-child) {
|
|
box-shadow: inset 0 0 0 2px $e_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $button_rules=='true' {
|
|
$_uncolored_button: 'button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)';
|
|
|
|
> button + button { border-#{$_border}-style: none; }
|
|
}
|
|
}
|
|
|
|
// special case, because path-bars are bugged
|
|
@mixin pathbar_linking_rules ($sep_color: $button_border, $button_rules: 'true') {
|
|
|
|
@if $button_rules == 'true' {
|
|
> button + button {
|
|
border-left-style: none;
|
|
}
|
|
}
|
|
|
|
@if $button_rules == 'header' {
|
|
> button:first-child { border-left-style: if($variant == 'light', solid, none); }
|
|
> button + button { border-left-style: solid; }
|
|
|
|
@if $variant == 'light' {
|
|
> button:active + button {
|
|
border-left-color: mix(black, $header_button_active_bg, 15%);
|
|
}
|
|
|
|
> button:active + button:checked,
|
|
> button:checked + button {
|
|
border-left-color: mix(black, $header_button_checked_bg, 15%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Apply the rules defined above
|
|
.linked:not(.vertical) {
|
|
&:not(.path-bar) { @include linking_rules(); }
|
|
&.path-bar { @include pathbar_linking_rules(); }
|
|
}
|
|
|
|
.linked.vertical { @include linking_rules($vert:'true'); }
|
|
|
|
%linked_middle {
|
|
border-radius: 0;
|
|
border-right-style: none;
|
|
}
|
|
|
|
%linked {
|
|
@extend %linked_middle;
|
|
&:first-child {
|
|
border-top-left-radius: $bt_radius;
|
|
border-bottom-left-radius: $bt_radius;
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: $bt_radius;
|
|
border-bottom-right-radius: $bt_radius;
|
|
border-right-style: solid;
|
|
}
|
|
&:only-child {
|
|
border-radius: $bt_radius;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%linked-flat {
|
|
@extend %linked_middle;
|
|
&:first-child {
|
|
border-top-left-radius: $bt_radius;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: $bt_radius;
|
|
border-bottom-right-radius: 0;
|
|
border-right-style: solid;
|
|
}
|
|
&:only-child {
|
|
border-radius: $bt_radius $bt_radius 0 0;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%linked_vertical_middle {
|
|
border-radius: 0;
|
|
border-bottom-style: none;
|
|
}
|
|
|
|
%linked_vertical{
|
|
@extend %linked_vertical_middle;
|
|
&:first-child {
|
|
border-top-left-radius: $bt_radius;
|
|
border-top-right-radius: $bt_radius;
|
|
}
|
|
&:last-child {
|
|
border-bottom-left-radius: $bt_radius;
|
|
border-bottom-right-radius: $bt_radius;
|
|
border-bottom-style: solid;
|
|
}
|
|
&:only-child {
|
|
border-radius: $bt_radius;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%undecorated_button {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// menu buttons
|
|
modelbutton.flat {
|
|
transition: $shorter_transition;
|
|
min-height: 26px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
outline-offset: -3px;
|
|
border-radius: $bt_radius;
|
|
@extend %undecorated_button;
|
|
|
|
&:hover {
|
|
background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
|
|
transition-duration: 50ms;
|
|
}
|
|
|
|
&:active, &:selected {
|
|
&, arrow {
|
|
@extend %selected_items;
|
|
transition: none;
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
&:checked { color: $fg_color; }
|
|
&:disabled { color: $disabled_fg_color; }
|
|
|
|
// FIXME: temporary workaround
|
|
check:last-child,
|
|
radio:last-child { margin-left: 8px; }
|
|
|
|
check:first-child,
|
|
radio:first-child { margin-right: 8px; }
|
|
}
|
|
|
|
modelbutton.flat arrow {
|
|
background: none;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
opacity: 0.3; //dim icon
|
|
|
|
&:hover, &:selected, &:focus { background: none; }
|
|
|
|
&.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
|
|
|
|
&.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
|
|
}
|
|
|
|
%list_button,
|
|
list > row button.image-button:not(.flat) {
|
|
@extend %undecorated_button;
|
|
border: 1px solid transparentize($borders_color, .5);
|
|
&:hover { @include button(hover); }
|
|
&:active,
|
|
&:checked { @include button(active); }
|
|
|
|
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
(destructive-action, $destructive_color) {
|
|
&.#{$b_type} { // allow colored buttons in lists #3643
|
|
@include button(suggested_destructive, $b_color, white);
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Links
|
|
//
|
|
link, %links {
|
|
color: $link_color;
|
|
|
|
&:visited {
|
|
color: $link_visited_color;
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
|
|
}
|
|
&:hover {
|
|
color: lighten($link_color,10%);
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
|
|
}
|
|
&:active {
|
|
color: $link_color;
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
|
|
@at-root %link_selected,
|
|
&:selected,
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
|
|
button.link {
|
|
@extend %links;
|
|
|
|
&, &:hover, &:active, &:checked {
|
|
@extend %undecorated_button;
|
|
}
|
|
|
|
> label { text-decoration-line: underline; }
|
|
}
|
|
|
|
//
|
|
// Spinbuttons
|
|
//
|
|
spinbutton {
|
|
&:drop(active) { box-shadow: none; }
|
|
|
|
button:active { color: $selected_fg_color; }
|
|
&:disabled { color: $disabled_fg_color; }
|
|
|
|
> text {
|
|
padding: 6px;
|
|
@extend %Linked_entrys;
|
|
border: 1px solid $dark_borders_color;
|
|
|
|
&:focus-within {
|
|
border-color: $entry_highlight;
|
|
@if $variant == 'dark' { box-shadow: inset 0 0 0 1px $entry_highlight; }
|
|
@if $variant == 'light' { box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $entry_highlight; }
|
|
}
|
|
|
|
&:drop(active) {
|
|
border-color: $drop_target_color;
|
|
@if $variant == 'dark' { box-shadow: inset 0 0 0 1px $drop_target_color; }
|
|
@if $variant == 'light' { box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $drop_target_color; }
|
|
}
|
|
}
|
|
|
|
&:not(.vertical) {
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
|
|
> text {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
min-width: 28px;
|
|
}
|
|
|
|
> button, > text { @extend %linked; min-height: 20px; }
|
|
|
|
&:dir(ltr) > text,
|
|
&:dir(rtl) > button.up { border-radius: $bt_radius 0 0 $bt_radius; }
|
|
|
|
> button + button { border-left-style: none; }
|
|
|
|
> button:hover:not(:active),
|
|
> button:hover + button { box-shadow: inset 1px 0 $button_border; }
|
|
|
|
> button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
|
|
> button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); }
|
|
|
|
> button:first-child:hover:not(:active),
|
|
> button.up:dir(rtl):hover:not(:active),
|
|
> text + button:not(:active):hover { box-shadow: none; }
|
|
|
|
> text:focus + button { border-left-color: $entry_highlight; }
|
|
> text:drop(active) + button { border-left-color: $drop_target_color; }
|
|
|
|
.osd & {
|
|
&, &:focus, &:drop(active) { border-image: none; }
|
|
> button:hover:not(:active),
|
|
> button:hover + button { box-shadow: inset 1px 0 $osd_button_border; }
|
|
|
|
> button:first-child:hover:not(:active),
|
|
> button.up:dir(rtl):hover:not(:active),
|
|
> text + button:not(:active):hover { box-shadow: none; }
|
|
|
|
> text:focus + button { border-left-color: $entry_highlight; }
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
> button, > text {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
min-width: 0;
|
|
|
|
@extend %linked_vertical;
|
|
}
|
|
|
|
> button.up { border-radius: $bt_radius $bt_radius 0 0; }
|
|
|
|
> text:focus + button { border-top-color: $entry_highlight; }
|
|
> text:drop(active) + button { border-top-color: $drop_target_color; }
|
|
}
|
|
|
|
// Misc
|
|
treeview &:not(.vertical),
|
|
row &:not(.vertical) {
|
|
min-height: 0;
|
|
padding: 0 3px;
|
|
border-style: none;
|
|
border-radius: $bt_radius;
|
|
background-color: rgba($fg_color, 0.08);
|
|
|
|
&:focus, &:hover, &:selected { background-color: rgba($fg_color, 0.12); }
|
|
|
|
> text {
|
|
&, &:hover, &:focus {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
> button.up,
|
|
> button.down {
|
|
border: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
border-radius: 100px;
|
|
min-height: 22px;
|
|
min-width: 22px;
|
|
padding: 0;
|
|
margin: 4px 2px;
|
|
background-color: transparent;
|
|
|
|
&:hover { background-color: rgba($fg_color, 0.1); }
|
|
&:active { background-color: rgba($fg_color, 0.15); color: $fg_color; }
|
|
}
|
|
|
|
> button:hover:not(:active),
|
|
> button:hover + button { box-shadow: none; }
|
|
|
|
> button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
|
|
> button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: none; }
|
|
|
|
> text:focus + button { border-left-color: transparent; }
|
|
> text:drop(active) + button { border-left-color: transparent; }
|
|
}
|
|
|
|
font-feature-settings: "tnum";
|
|
}
|
|
|
|
//
|
|
// Comboboxes
|
|
//
|
|
|
|
dropdown > popover.menu.background > contents { padding: 0; }
|
|
|
|
dropdown > button > box {
|
|
border-spacing: 6px;
|
|
}
|
|
|
|
dropdown,
|
|
combobox {
|
|
min-height: 24px;
|
|
|
|
button.combo {
|
|
min-width: 0; // otherwise the arrow placement is unsymmetric
|
|
min-height: 20px;
|
|
// margin: 0;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
// align menu labels with the button label
|
|
> popover.menu > contents modelbutton {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
.background & button.combo arrow {
|
|
@include button(active);
|
|
-gtk-icon-source: -gtk-scaled(
|
|
url("assets/combobox-arrow-dark.png"),
|
|
url("assets/combobox-arrow-dark@2.png"));
|
|
min-height: 16px;
|
|
min-width: 18px;
|
|
padding: 0;
|
|
margin: 2px -10px 2px 0;
|
|
border-radius: $bt_radius - 1px;
|
|
border: none;
|
|
|
|
@if $variant == 'dark' {
|
|
box-shadow: inset 0 1px $button_highlight, 0 0 0 1px $dark_borders_color, 0 1px 2px 0 rgba(black, 0.05);
|
|
}
|
|
}
|
|
|
|
button.combo:checked,
|
|
.background & button.combo:checked { transition: none; } // workaround for menuitem selection
|
|
|
|
&:drop(active) button.combo {
|
|
color: $drop_target_color;
|
|
border-color: $drop_target_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// newstyle
|
|
popover {
|
|
margin-top: 4px;
|
|
padding: 0;
|
|
|
|
listview {
|
|
margin: 6px 0;
|
|
|
|
& > row {
|
|
padding: 6px;
|
|
|
|
&:selected {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// drodowns with searchboxes on top
|
|
.dropdown-searchbar {
|
|
padding: 6px;
|
|
border-bottom: 1px solid $borders_color;
|
|
}
|
|
}
|
|
|
|
.linked:not(.vertical) > entry + button.combo,
|
|
.linked:not(.vertical) > & > box > button.combo {
|
|
arrow {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
-gtk-icon-source: -gtk-scaled(
|
|
url("assets/combobox-arrow#{$asset_suffix}.png"),
|
|
url("assets/combobox-arrow#{$asset_suffix}@2.png"));
|
|
}
|
|
}
|
|
|
|
.linked:not(.vertical) > entry + button.combo:checked,
|
|
.linked:not(.vertical) > & > box > button.combo:checked {
|
|
arrow {
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
-gtk-icon-source: -gtk-scaled(
|
|
url("assets/combobox-arrow-dark.png"),
|
|
url("assets/combobox-arrow-dark@2.png"));
|
|
}
|
|
}
|
|
|
|
.linked:not(.vertical) > & > box > button.combo {
|
|
// the combobox is a composite widget so the way we do button linking doesn't
|
|
// work, special case needed.
|
|
&:dir(ltr),
|
|
&:dir(rtl) { @extend %linked_middle; } // specificity bump
|
|
}
|
|
|
|
.linked:not(.vertical) > &:first-child > box > button.combo {
|
|
border-top-left-radius: $bt_radius;
|
|
border-bottom-left-radius: $bt_radius
|
|
}
|
|
|
|
.linked:not(.vertical) > &:last-child > box > button.combo {
|
|
border-top-right-radius: $bt_radius;
|
|
border-bottom-right-radius: $bt_radius;
|
|
border-right: 1px solid $button_borders;
|
|
}
|
|
|
|
.linked:not(.vertical) > &:only-child > box > button.combo {
|
|
border-radius: $bt_radius;
|
|
}
|
|
|
|
// .linked.vertical > & > box > button.combo { @extend %linked_vertical_middle; }
|
|
.linked.vertical > &:first-child > box > button.combo {
|
|
border-top-left-radius: $bt_radius;
|
|
border-top-right-radius: $bt_radius;
|
|
}
|
|
|
|
.linked.vertical > &:last-child > box > button.combo {
|
|
border-bottom-left-radius: $bt_radius;
|
|
border-bottom-right-radius: $bt_radius;
|
|
}
|
|
|
|
.linked.vertical > &:only-child > box > button.combo {
|
|
border-radius: $bt_radius;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Toolbars
|
|
//
|
|
|
|
%toolbar {
|
|
padding: 2px 6px;
|
|
border-spacing: 4px;
|
|
background-color: $header_bg;
|
|
border-bottom: 1px solid $borders_color;
|
|
}
|
|
|
|
.toolbar,
|
|
toolbar {
|
|
@extend %toolbar;
|
|
|
|
&.horizontal { border-bottom: 1px solid $borders_color; }
|
|
|
|
separator { background: none; }
|
|
&.horizontal separator { margin: 0 6px; }
|
|
&.vertical separator { margin: 6px 0; }
|
|
|
|
.osd & { background-color: transparent; }
|
|
|
|
&.osd {
|
|
padding: 8px;
|
|
border: none;
|
|
border-radius: $bt_radius + 4px;
|
|
background-color: $osd_bg_color;
|
|
box-shadow: $shadow_4;
|
|
|
|
&.toolbar {
|
|
padding: 0;
|
|
margin: 6px 8px 10px;
|
|
box-shadow: none;
|
|
background: none;
|
|
|
|
> box.horizontal {
|
|
padding: 8px;
|
|
border-radius: $bt_radius + 4px;
|
|
background-color: $osd_bg_color;
|
|
box-shadow: $shadow_4;
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&.right,
|
|
&.top,
|
|
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
|
|
|
|
&.top { border-width: 0 0 1px 0; }
|
|
&.bottom { border-width: 1px 0 0 0; }
|
|
&.left { border-width: 0 1px 0 0; }
|
|
&.right { border-width: 0 0 0 1px; }
|
|
}
|
|
}
|
|
|
|
// oldstyle toolbar buttons
|
|
.toolbar button {
|
|
margin: 1px;
|
|
@extend %flat_button;
|
|
}
|
|
|
|
searchbar {
|
|
> revealer > box {
|
|
padding: 6px;
|
|
border-spacing: 6px;
|
|
border-style: solid;
|
|
border-color: $solid_borders_color;
|
|
background-color: $bg_color;
|
|
border-width: 0 0 1px;
|
|
}
|
|
|
|
.linked:not(.vertical) {
|
|
> entry {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Close button on searchbar
|
|
button.flat {
|
|
@extend %circular_button;
|
|
}
|
|
}
|
|
|
|
actionbar > revealer > box {
|
|
padding: 6px;
|
|
border-top: 1px solid $borders_color;
|
|
background-color: darken($bg_color, 3%);
|
|
|
|
.background.csd revealer > & {
|
|
border-radius: 0 0 $wm_radius $wm_radius;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Headerbars
|
|
//
|
|
|
|
headerbar {
|
|
min-height: 40px;
|
|
padding: 0 16px;
|
|
color: $header_fg;
|
|
background-color: $header_bg;
|
|
border-bottom: 1px solid $header_border;
|
|
|
|
&:backdrop {
|
|
transition: $backdrop_transition;
|
|
color: transparentize($header_fg, 0.3);
|
|
background-color: $header_bg_backdrop;
|
|
border-color: if($variant=='light', lighten($header_border, 5%), darken($header_border, 3%));
|
|
}
|
|
|
|
.title {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
margin-top: -3px;
|
|
@extend %dim-label;
|
|
}
|
|
|
|
entry { @extend %headerbar_entrys; }
|
|
|
|
button { @extend %headerbar_buttons; }
|
|
|
|
button, spinbutton {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
// button.toggle.popup { margin-right: 3px; } // Nautilus 3.30 popup button
|
|
|
|
// Reset linked buttons
|
|
.linked.raised > & {
|
|
min-width: 16px;
|
|
border-radius: $bt_radius;
|
|
border: none;
|
|
box-shadow: none;
|
|
|
|
&:disabled { background: none; }
|
|
}
|
|
|
|
stackswitcher.linked:not(.vertical) > button {
|
|
min-height: 20px;
|
|
min-width: 24px;
|
|
border-radius: $bt_radius;
|
|
}
|
|
|
|
// Reset linking entrys
|
|
.linked:not(.vertical) > entry {
|
|
@include entry(header-normal);
|
|
margin: 8px 3px;
|
|
padding: 0 8px;
|
|
border-radius: $bt_radius;
|
|
border: none;
|
|
|
|
&:focus {
|
|
border-radius: $bt_radius;
|
|
@include entry(header-focus);
|
|
}
|
|
|
|
&:disabled {
|
|
border-radius: $bt_radius;
|
|
@include entry(header-insensitive);
|
|
}
|
|
|
|
&:backdrop { opacity: 0.65; background-image: none; }
|
|
}
|
|
|
|
stackswitcher {
|
|
box-shadow: inset 0 0 0 1px $light_borders_color;
|
|
border-radius: $bt_radius;
|
|
margin: 8px 0;
|
|
padding: 0;
|
|
|
|
> button {
|
|
min-height: 26px;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
|
|
&:not(:first-child) {
|
|
border-width: 0 0 0 1px;
|
|
border-style: none solid none none;
|
|
border-radius: 0;
|
|
border-image: linear-gradient(to bottom,
|
|
transparent 16%,
|
|
$light_borders_color 16%,
|
|
$light_borders_color 84%,
|
|
transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
|
|
}
|
|
|
|
&:checked {
|
|
border-image: none;
|
|
}
|
|
}
|
|
|
|
button:checked + button { border-image: none; }
|
|
}
|
|
|
|
// Headerbar Switches
|
|
switch {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
&:backdrop { opacity: 0.75; }
|
|
}
|
|
|
|
&.titlebar headerbar:not(.titlebar) {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.windowhandle {
|
|
viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) {
|
|
border-radius: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
> button.popup {
|
|
&:hover {
|
|
@include button(header-hover);
|
|
}
|
|
|
|
&:active {
|
|
@include button(header-active);
|
|
}
|
|
|
|
&:checked {
|
|
@include button(header-checked);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Selectionmode
|
|
.selection-mode &,
|
|
&.selection-mode {
|
|
color: $light_fg_color;
|
|
background-color: $selection_mode_bg;
|
|
border-color: darken($selection_mode_bg, 4%);
|
|
box-shadow: none;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
|
|
&:backdrop {
|
|
background-color: $selection_mode_bg;
|
|
color: transparentize($light_fg_color, 0.4);
|
|
border-color: darken($selection_mode_bg, 4%);
|
|
}
|
|
|
|
button {
|
|
@include button(undecorated);
|
|
@extend %selected-button;
|
|
}
|
|
|
|
.subtitle:link { @extend %link_selected; }
|
|
|
|
.selection-menu {
|
|
box-shadow: none;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
.arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
}
|
|
|
|
.maximized & { background-color: $selection_mode_bg; }
|
|
}
|
|
|
|
.tiled &, .tiled &:backdrop,
|
|
.maximized &, .maximized &:backdrop {
|
|
border-radius: $maximized_radius $maximized_radius 0 0; // squared corners when the window is max'd or tiled
|
|
box-shadow: none;
|
|
}
|
|
|
|
.maximized & {
|
|
background-color: $header_bg;
|
|
border-color: opacify($header_border, 1);
|
|
box-shadow: none;
|
|
|
|
&:backdrop {
|
|
background-color: $header_bg_backdrop;
|
|
border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
|
|
}
|
|
}
|
|
|
|
&.default-decoration {
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
background-color: $header_bg;
|
|
|
|
.tiled &,
|
|
.maximized &,
|
|
.fullscreen & { box-shadow: none; }
|
|
|
|
windowcontrols {
|
|
button,
|
|
menubutton {
|
|
border: none;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
menubutton button {
|
|
min-height: 20px;
|
|
min-width: 20px;
|
|
margin: 0;
|
|
padding: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.default-decoration,
|
|
.csd &.default-decoration, // needed under wayland, since all gtk3 windows are csd windows
|
|
&.default-decoration:backdrop,
|
|
.csd &.default-decoration:backdrop {
|
|
// box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
separator.titlebutton { @extend %header_separator; }
|
|
|
|
// Fixes split headerbars
|
|
separator:first-child + &,
|
|
&:first-child {
|
|
&, &:backdrop {
|
|
border-top-left-radius: $wm_radius;
|
|
|
|
.maximized &,
|
|
.tiled & { border-top-left-radius: $maximized_radius; }
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
&, &:backdrop {
|
|
border-top-right-radius: $wm_radius;
|
|
|
|
.maximized &,
|
|
.tiled & { border-top-right-radius: $maximized_radius; }
|
|
}
|
|
}
|
|
|
|
stack & { // tackles the stacked headerbars case
|
|
&:first-child, &:last-child {
|
|
border-top-left-radius: $wm_radius;
|
|
border-top-right-radius: $wm_radius;
|
|
}
|
|
}
|
|
|
|
window separator:first-child + &,
|
|
window &:first-child { &:backdrop, & { border-top-left-radius: $wm_radius; }}
|
|
window &:last-child { &:backdrop, & { border-top-right-radius: $wm_radius; }}
|
|
|
|
window stack & { // tackles the stacked headerbars case
|
|
&:first-child, &:last-child {
|
|
&:backdrop, & {
|
|
border-top-left-radius: $wm_radius;
|
|
border-top-right-radius: $wm_radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.tiled &,
|
|
window.tiled-top &,
|
|
window.tiled-right &,
|
|
window.tiled-bottom &,
|
|
window.tiled-left &,
|
|
window.maximized & {
|
|
&,
|
|
&:first-child,
|
|
&:last-child,
|
|
&:only-child {
|
|
border-top-left-radius: $maximized_radius;
|
|
border-top-right-radius: $maximized_radius;
|
|
}
|
|
}
|
|
|
|
window.fullscreen &,
|
|
.solid-csd & {
|
|
&,
|
|
&:first-child,
|
|
&:last-child,
|
|
&:only-child {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.titlebar {
|
|
&, &.background {
|
|
border-top-left-radius: $wm_radius;
|
|
border-top-right-radius: $wm_radius;
|
|
}
|
|
|
|
&, & headerbar {
|
|
box-shadow: inset 0 1px $highlight_color;
|
|
|
|
.tiled &,
|
|
.maximized &,
|
|
.fullscreen & {
|
|
box-shadow: none;
|
|
|
|
&, &.background {
|
|
border-top-left-radius: $maximized_radius;
|
|
border-top-right-radius: $maximized_radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
> box.left.horizontal,
|
|
> box.right.horizontal {
|
|
padding: 0 6px;
|
|
}
|
|
}
|
|
|
|
window.background > box.vertical > headerbar:not(.titlebar) { // reset headerbar style for not CSD window
|
|
border-radius: 0 0 0 0;
|
|
box-shadow: none;
|
|
|
|
// Fixes split headerbars
|
|
separator:first-child + &,
|
|
&:first-child {
|
|
&, &:backdrop {
|
|
border-top-left-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
&, &:backdrop {
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fixes split headerbars too
|
|
.titlebar:not(headerbar) {
|
|
window > &,
|
|
window.csd > & {
|
|
&, &:backdrop {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
> separator {
|
|
min-width: 1px;
|
|
@extend %side_separator;
|
|
}
|
|
}
|
|
|
|
headerbar {
|
|
> windowhandle > box {
|
|
&,
|
|
> box.start,
|
|
> box.end {
|
|
border-spacing: 6px;
|
|
}
|
|
}
|
|
|
|
button {
|
|
min-height: 26px;
|
|
min-width: 22px;
|
|
}
|
|
|
|
entry { // Reset entrys
|
|
min-height: 22px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding: 2px 8px;
|
|
}
|
|
}
|
|
|
|
%header_separator {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
&:backdrop { opacity: 0.65; }
|
|
}
|
|
|
|
// Headerbar Entries
|
|
%headerbar_entrys {
|
|
min-height: 22px;
|
|
@include entry(header-normal);
|
|
|
|
&:backdrop { opacity: 0.65; background-image: none; }
|
|
|
|
&:hover {
|
|
@include entry(header-hover);
|
|
}
|
|
|
|
&:focus {
|
|
@include entry(header-focus);
|
|
}
|
|
|
|
&:disabled {
|
|
@include entry(header-insensitive);
|
|
}
|
|
|
|
selection:focus {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
progress {
|
|
border-color: $progress_color;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
@each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $light_fg_color),
|
|
(error, $error_color, $light_fg_color) {
|
|
&.#{$e_type} {
|
|
color: $e_fg_color;
|
|
border-color: if($variant=='light', $e_color, $entry_border);
|
|
background-color: mix($e_color, $header_bg, 60%);
|
|
|
|
&:focus {
|
|
color: $e_fg_color;
|
|
background-color: $e_color;
|
|
}
|
|
|
|
selection, selection:focus {
|
|
background-color: $e_fg_color;
|
|
color: $e_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headerbar Buttons
|
|
%headerbar_buttons {
|
|
min-height: 24px;
|
|
min-width: 16px;
|
|
padding: 2px 6px;
|
|
@include button(header-normal);
|
|
|
|
&:backdrop { opacity: 0.65; background-image: none; }
|
|
|
|
&:hover {
|
|
@include button(header-hover);
|
|
transition: $button_transition;
|
|
}
|
|
|
|
&:active {
|
|
@include button(header-active);
|
|
transition: $button_transition;
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
&:checked {
|
|
@include button(header-checked);
|
|
transition: $button_transition;
|
|
transition-duration: 300ms;
|
|
|
|
&:hover { background-image: none; }
|
|
}
|
|
|
|
&:disabled {
|
|
&, &:checked, &:active { @include button(header-insensitive); }
|
|
}
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Pathbars
|
|
//
|
|
.path-bar > button {
|
|
min-width: 12px;
|
|
min-height: if($variant == 'light', 24px, 26px);
|
|
|
|
&.text-button, &.image-button, & {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
&:hover { box-shadow: none; }
|
|
|
|
&:active, &:checked {
|
|
@include button(header-checked);
|
|
border-color: $button_borders;
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: $button_borders;
|
|
}
|
|
|
|
&.text-button.image-button label { padding-left: 0; padding-right: 0; }
|
|
|
|
&.text-button.image-button, & {
|
|
label:last-child { padding-right: 10px; }
|
|
label:first-child { padding-left: 10px; }
|
|
}
|
|
|
|
&.slider-button,
|
|
&:not(.image-button):not(.text-button) {
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
}
|
|
|
|
image {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Tree Views
|
|
//
|
|
columnview.view,
|
|
treeview.view {
|
|
border-left-color: $solid_borders_color; // this is actually the tree lines color,
|
|
border-top-color: $solid_borders_color; // while this is the grid lines color, better then nothing
|
|
|
|
> rubberband { @extend %rubberband; } // to avoid borders being overridden by the previously set props
|
|
|
|
acceleditor > label { background-color: $selected_bg_color; }
|
|
|
|
&:selected {
|
|
&, &:focus {
|
|
border-radius: 0;
|
|
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
|
|
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
color: $disabled_fg_color;
|
|
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
|
}
|
|
}
|
|
|
|
&.separator {
|
|
min-height: 2px;
|
|
color: $borders_color;
|
|
}
|
|
|
|
&:drop(active) {
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
border-color: mix($fg_color, $selected_bg_color, 50%);
|
|
|
|
&.after { border-top-style: none; }
|
|
&.before { border-bottom-style: none; }
|
|
}
|
|
|
|
> dndtarget:drop(active) {
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
border-color: $selected_borders_color;
|
|
|
|
&.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: mix($fg_color, $base_color, 50%);
|
|
|
|
&:hover { color: $fg_color; }
|
|
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
|
&:hover { color: $selected_fg_color; }
|
|
}
|
|
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
|
|
&.progressbar { // progress bar in treeviews
|
|
color: $selected_fg_color;
|
|
border-radius: $bt_radius;
|
|
background-color: $progress_color;
|
|
|
|
&:selected, &:selected:focus {
|
|
color: $selected_bg_color;
|
|
box-shadow: none;
|
|
background-color: $selected_fg_color;
|
|
}
|
|
}
|
|
|
|
&.trough { // progress bar trough in treeviews
|
|
color: $fg_color;
|
|
background-color: $button_border;
|
|
border-radius: $bt_radius;
|
|
border-width: 0;
|
|
|
|
&:selected, &:selected:focus {
|
|
color: $selected_fg_color;
|
|
background-color: transparentize(black, 0.8);
|
|
border-radius: $bt_radius;
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
> header {
|
|
> button {
|
|
$_column_header_color: mix($fg_color,$base_color,80%);
|
|
|
|
min-height: if($variant =='light', 24px, 26px);
|
|
min-width: 38px;
|
|
padding: 0 6px;
|
|
font-weight: bold;
|
|
|
|
color: $_column_header_color;
|
|
background-color: $base_color;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
border-style: none solid none none;
|
|
border-radius: 0;
|
|
border-image: linear-gradient(to bottom,
|
|
$base_color 20%,
|
|
transparentize(if($variant == 'light', black, white), 0.89) 20%,
|
|
transparentize(if($variant == 'light', black, white), 0.89) 80%,
|
|
$base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch;
|
|
|
|
&:hover { color: $selected_bg_color; }
|
|
&:active { color: $fg_color; }
|
|
|
|
&:active, &:hover { background-color: $base_color; }
|
|
|
|
&:disabled {
|
|
border-color: $bg_color;
|
|
background-image: none;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right-style: none;
|
|
border-image: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.dnd,
|
|
header.button.dnd {
|
|
&, &:selected, &:hover, &:active {
|
|
padding: 0 6px;
|
|
transition: none;
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
border-radius: 0;
|
|
border-style: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Menus
|
|
//
|
|
|
|
menubar {
|
|
padding: 0;
|
|
background-color: $header_bg;
|
|
color: $header_fg;
|
|
box-shadow: inset 0 -1px $borders_color;
|
|
|
|
&:backdrop {
|
|
color: transparentize($header_fg, 0.2);
|
|
// background-image: none;
|
|
// background-color: opacify($header_bg_backdrop, 1);
|
|
}
|
|
|
|
> item {
|
|
transition: all 0.2s cubic-bezier(0.0, 0.0, 0.2, 1);
|
|
padding: 4px 8px;
|
|
border: none;
|
|
border-radius: $bt_radius / 2;
|
|
|
|
&:hover { //Seems like it :hover even with keyboard focus
|
|
transition: none;
|
|
@include button(header-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
color: transparentize($header_fg, 0.6);
|
|
}
|
|
}
|
|
|
|
& > item popover.menu.background > contents {
|
|
padding: 5px;
|
|
border-radius: $mn_radius;
|
|
}
|
|
|
|
//nested submenus
|
|
& > item popover.menu popover.menu {
|
|
padding: 0 0 4px 0;
|
|
}
|
|
|
|
& > item popover.menu.background popover.menu.background > contents {
|
|
margin: 0;
|
|
border-radius: $mn_radius; //including top
|
|
}
|
|
}
|
|
|
|
//
|
|
// Popovers
|
|
//
|
|
popover.background {
|
|
font: initial; // Decouple the font of popovers from their entry/textview
|
|
|
|
> arrow,
|
|
> contents {
|
|
padding: 0;
|
|
background-clip: border-box;
|
|
background-color: $menu_bg;
|
|
box-shadow: 0 3px 6px 0 if($variant=='light', transparentize(black, 0.85), transparentize(black, 0.85)),
|
|
0 0 0 1px if($variant=='light', rgba($borders_color, 0.03), rgba($dark_borders_color, 0.55));
|
|
border-radius: $wm_radius;
|
|
border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
|
|
}
|
|
|
|
&, &:backdrop {
|
|
background-color: transparent;
|
|
}
|
|
|
|
> contents {
|
|
padding: 6px;
|
|
border-radius: $mn_radius;
|
|
|
|
> list,
|
|
> .view,
|
|
> toolbar {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
separator {
|
|
background-color: $menu_bd;
|
|
margin: 3px;
|
|
}
|
|
|
|
list separator { margin: 0; }
|
|
}
|
|
|
|
label.separator {
|
|
@extend %dim-label;
|
|
color: $fg_color;
|
|
}
|
|
|
|
entry {
|
|
background-color: mix($fg_color, $menu_bg, 5%);
|
|
}
|
|
|
|
> list,
|
|
> .view,
|
|
> toolbar,
|
|
> scrolledwindow > viewport > list {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
> scrolledwindow > viewport > list {
|
|
margin: $container_padding;
|
|
|
|
row {
|
|
padding: 6px 12px;
|
|
border-radius: $bt_radius;
|
|
}
|
|
}
|
|
|
|
&, .csd & {
|
|
&.osd, &.magnifier { @extend %osd; }
|
|
&.touch-selection { font: initial; }
|
|
|
|
&.osd { @extend %osd; }
|
|
}
|
|
|
|
&.touch-selection,
|
|
&.magnifier {
|
|
button { @extend %osd_button; }
|
|
}
|
|
}
|
|
|
|
magnifier {
|
|
background-color: $base_color;
|
|
}
|
|
|
|
//touch selection handlebars for the Popover.osd above
|
|
cursor-handle {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
border-style: none;
|
|
&.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
|
|
&.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
|
|
}
|
|
|
|
//
|
|
// Popover Base Menus
|
|
//
|
|
|
|
popover.menu {
|
|
padding: 0;
|
|
|
|
box.inline-buttons {
|
|
padding: 0 $container_padding;
|
|
|
|
button.image-button.model {
|
|
@include button(undecorated);
|
|
min-height: 30px;
|
|
min-width: 30px;
|
|
padding: 0;
|
|
border: none;
|
|
outline: none;
|
|
transition: none;
|
|
|
|
&:selected {
|
|
color: $selected_fg_color;
|
|
background-image: image($selected_bg_color);
|
|
}
|
|
}
|
|
}
|
|
|
|
box.circular-buttons {
|
|
padding: $container_padding;
|
|
|
|
button.circular.image-button.model {
|
|
@extend %list_button;
|
|
padding: 10px;
|
|
border: none;
|
|
|
|
&:focus {
|
|
background-color: $light_borders_color;
|
|
}
|
|
|
|
&:active:focus {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > arrow,
|
|
&.background > contents {
|
|
background-color: $menu_bg;
|
|
padding: 5px;
|
|
}
|
|
|
|
&.background separator {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
accelerator {
|
|
color: gtkalpha(currentColor, 0.55);
|
|
|
|
&:dir(ltr) { margin-left: $container_padding; }
|
|
&:dir(rtl) { margin-right: $container_padding; }
|
|
}
|
|
|
|
arrow.left,
|
|
radio.left,
|
|
check.left {
|
|
margin-left: -2px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
arrow.right,
|
|
radio.right,
|
|
check.right {
|
|
margin-left: 6px;
|
|
margin-right: -2px;
|
|
}
|
|
|
|
modelbutton {
|
|
min-height: $menuitem_size - $container_padding;
|
|
min-width: 38px;
|
|
padding: 0 $container_padding;
|
|
border-radius: $mn_radius - $container_padding / 2;
|
|
|
|
&:selected {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
&:selected:active {
|
|
color: $selected_fg_color;
|
|
background-color: darken($selected_bg_color, 5%); // matching buttons
|
|
}
|
|
}
|
|
|
|
label.title {
|
|
font-weight: bold;
|
|
padding: 4px ($container_padding + 20px); //this will fall apart with font sizing
|
|
}
|
|
}
|
|
|
|
//
|
|
// Notebooks and Tabs
|
|
//
|
|
|
|
%tabs_tab {
|
|
color: $disabled_fg_color;
|
|
background-color: transparentize($base_color, 1);
|
|
border: 1px solid transparent;
|
|
transition: all 150ms ease-out;
|
|
|
|
&:hover:not(:checked) {
|
|
color: mix($fg_color, $disabled_fg_color, 50%);
|
|
background-color: if($variant == 'light', rgba(white, 0.2), rgba(white, 0.05));
|
|
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
|
|
}
|
|
|
|
&:checked {
|
|
color: $fg_color;
|
|
background-color: $header_bg;
|
|
border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
|
|
}
|
|
}
|
|
|
|
notebook {
|
|
padding: 0;
|
|
// margin-top: -1px;
|
|
|
|
&.frame {
|
|
border: 1px solid $solid_borders_color;
|
|
}
|
|
|
|
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
|
background-color: $base_color;
|
|
}
|
|
|
|
.csd &:not(.frame), .csd &:not(.frame) > stack {
|
|
border-radius: 0 0 $wm_radius $wm_radius;
|
|
}
|
|
|
|
> header {
|
|
padding: 0;
|
|
background-color: darken($header_bg, 10%);
|
|
|
|
// Set box-shadow to make the header frame color more easy to see
|
|
// Set margin to hide the ugly borders around the header
|
|
&.top {
|
|
box-shadow: inset 0 1px $solid_borders_color, inset 0 -1px $borders_color;
|
|
@if $variant=='light' {
|
|
box-shadow: inset 0 1px $borders_color,
|
|
inset 0 -1px $borders_color,
|
|
1px 0 $borders_color,
|
|
-1px 0 $borders_color;
|
|
}
|
|
margin-top: -1px;
|
|
}
|
|
|
|
&.bottom {
|
|
box-shadow: inset 0 1px $borders_color, inset 0 -1px $solid_borders_color;
|
|
@if $variant=='light' {
|
|
box-shadow: inset 0 1px $borders_color,
|
|
inset 0 -1px $borders_color,
|
|
1px 0 $borders_color,
|
|
-1px 0 $borders_color;
|
|
}
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
&.right {
|
|
box-shadow: inset 1px 0 $borders_color, inset -1px 0 $solid_borders_color;
|
|
@if $variant=='light' {
|
|
box-shadow: inset 1px 0 $borders_color,
|
|
inset -1px 0 $borders_color,
|
|
0 1px $borders_color,
|
|
0 -1px $borders_color;
|
|
}
|
|
margin-right: -1px;
|
|
}
|
|
|
|
&.left {
|
|
box-shadow: inset 1px 0 $solid_borders_color, inset -1px 0 $borders_color;
|
|
@if $variant=='light' {
|
|
box-shadow: inset 1px 0 $borders_color,
|
|
inset -1px 0 $borders_color,
|
|
0 1px $borders_color,
|
|
0 -1px $borders_color;
|
|
}
|
|
margin-left: -1px;
|
|
}
|
|
|
|
button.flat.toggle.popup {
|
|
min-width: 28px;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
|
|
&:active, &:checked {
|
|
color: $fg_color;
|
|
background-color: if($variant=='light', rgba(black, 0.20), rgba(white, 0.15));
|
|
}
|
|
}
|
|
|
|
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
|
|
// sizing and borders
|
|
&.#{$_pos} {
|
|
padding: 0;
|
|
|
|
tab {
|
|
padding: 2px 10px;
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
border-radius: 0;
|
|
outline-offset: -4px;
|
|
// border-#{$_pos}: none;
|
|
|
|
// tab overlap
|
|
+ tab {
|
|
@if $_pos==top or $_pos==bottom { margin-left: -1px; }
|
|
@else { margin-top: -1px; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// overflow arrows
|
|
&.top, &.bottom {
|
|
> tabs > arrow.up {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
&:last-child { margin-left: 2px; }
|
|
}
|
|
|
|
> tabs > arrow.down {
|
|
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
|
&:first-child { margin-right: 2px; }
|
|
}
|
|
}
|
|
|
|
&.left, &.right {
|
|
> tabs > arrow.up {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
&:last-child { margin-top: 2px; }
|
|
}
|
|
|
|
> tabs > arrow.down {
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
&:first-child { margin-bottom: 2px; }
|
|
}
|
|
}
|
|
|
|
> tabs > arrow {
|
|
color: $disabled_fg_color;
|
|
|
|
&:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
|
|
&:active { color: $fg_color; }
|
|
&:disabled { color: transparentize($disabled_fg_color,0.3); }
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
tabs > tab {
|
|
&:first-child { border-left-style: none; }
|
|
&:last-child { border-right-style: none; }
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&.right {
|
|
tabs > tab {
|
|
&:first-child { border-top-style: none; }
|
|
&:last-child { border-bottom-style: none; }
|
|
}
|
|
}
|
|
|
|
> tabs > tab {
|
|
@extend %tabs_tab;
|
|
|
|
// close button
|
|
button.flat {
|
|
min-height: 20px;
|
|
min-width: 20px;
|
|
border-radius: 3px;
|
|
padding: 0;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
color: mix($bg_color, $fg_color, 35%);
|
|
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
color: $fg_color;
|
|
background-color: rgba($borders_color, 0.1);
|
|
}
|
|
|
|
&:active {
|
|
@extend %undecorated_button;
|
|
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
|
|
background-color: rgba($borders_color, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Scrollbars
|
|
//
|
|
$_scrollbar_bg_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
|
|
|
|
scrollbar {
|
|
$_slider_min_length: 40px;
|
|
|
|
background-color: transparent;
|
|
transition: 300ms $ease-out-quad;
|
|
|
|
// scrollbar border
|
|
// &.top { border-bottom: 1px solid $borders_color; }
|
|
// &.bottom { border-top: 1px solid $borders_color; }
|
|
// &.left { border-right: 1px solid $borders_color; }
|
|
// &.right { border-left: 1px solid $borders_color; }
|
|
|
|
border: none;
|
|
|
|
button { border: none; }
|
|
|
|
&.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-right-symbolic'); }
|
|
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
|
|
}
|
|
|
|
// slider
|
|
> range > trough > slider {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
margin: -1px;
|
|
border: 4px solid transparent;
|
|
border-radius: 8px;
|
|
background-clip: padding-box;
|
|
background-color: mix($fg_color, $bg_color, 40%);
|
|
|
|
&:hover { background-color: mix($fg_color, $bg_color, 30%); }
|
|
&:hover:active { background-color: $header_button_checked_bg; }
|
|
&:disabled { background-color: transparent; }
|
|
}
|
|
|
|
> range.fine-tune {
|
|
> trough > slider {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
&.horizontal > trough > slider { border-width: 5px 4px; }
|
|
&.vertical > trough > slider { border-width: 4px 5px; }
|
|
}
|
|
|
|
&.overlay-indicator {
|
|
&:not(.dragging):not(.hovering) {
|
|
opacity: 0.4;
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
|
|
> range > trough > slider {
|
|
margin: 0;
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
background-color: mix($fg_color, $bg_color, 70%);
|
|
border: 1px solid $borders_color;
|
|
}
|
|
|
|
&.horizontal > range > trough > slider {
|
|
margin: 0 3px;
|
|
min-width: $_slider_min_length;
|
|
}
|
|
|
|
&.vertical > range > trough > slider {
|
|
margin: 3px 0;
|
|
min-height: $_slider_min_length;
|
|
}
|
|
}
|
|
|
|
&.dragging,
|
|
&.hovering { opacity: 0.99; }
|
|
}
|
|
|
|
&.horizontal > range > trough > slider { min-width: $_slider_min_length; }
|
|
&.vertical > range > trough > slider { min-height: $_slider_min_length; }
|
|
}
|
|
|
|
// treeview ~ scrollbar.vertical {
|
|
// border-top: 1px solid $borders_color;
|
|
// margin-top: -1px;
|
|
// }
|
|
|
|
//
|
|
// Switches
|
|
//
|
|
|
|
$switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%);
|
|
$switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%);
|
|
$switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%);
|
|
$switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%);
|
|
$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
|
|
@keyframes switch_ripple_effect {
|
|
from {
|
|
background-image: $switch_image, radial-gradient(circle farthest-corner at center,
|
|
transparent 0%,
|
|
transparent 0%);
|
|
}
|
|
|
|
to {
|
|
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center,
|
|
rgba($selected_bg_color, 0.75) 100%,
|
|
rgba($selected_bg_color, 0.0) 0%);
|
|
}
|
|
}
|
|
|
|
switch {
|
|
transition: $longer_transition;
|
|
border-radius: $circular_radius;
|
|
background-color: transparent;
|
|
background-clip: padding-box;
|
|
color: transparent;
|
|
min-width: 40px;
|
|
min-height: 24px;
|
|
font-size: 0;
|
|
box-shadow: inset 0 1px 2px rgba(black, 0.1);
|
|
background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%);
|
|
|
|
&:disabled {
|
|
color: transparent;
|
|
background-color: transparent;
|
|
background-image: $switch_disabled_image;
|
|
}
|
|
|
|
&:checked {
|
|
animation: $switch_animation;
|
|
background-color: transparent;
|
|
color: transparent;
|
|
box-shadow: inset 0 1px 2px rgba(black, 0.15);
|
|
transition: background-image 0.3s, box-shadow 0;
|
|
background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
|
|
|
|
&:disabled {
|
|
background-color: transparent;
|
|
background-image: $switch_checked_disabled_image;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
> slider {
|
|
transition: $longer_transition, $shadow_transition, margin 0;
|
|
min-width: 22px;
|
|
min-height: 22px;
|
|
margin: 1px 0 1px 1px;
|
|
border-radius: $circular_radius;
|
|
background-color: white;
|
|
box-shadow: 0 1px 2px rgba(black, 0.15);
|
|
}
|
|
|
|
&, > slider {
|
|
outline-color: transparent;
|
|
color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
&:hover > slider { box-shadow: $shadow_5; }
|
|
|
|
&:checked > slider {
|
|
margin: 1px 1px 1px 0;
|
|
background-color: $selected_fg_color;
|
|
}
|
|
|
|
&:disabled > slider { @include entry(disabled); }
|
|
|
|
&:checked:disabled > slider { animation: none; }
|
|
}
|
|
|
|
//
|
|
// Check and Radio items
|
|
//
|
|
@each $w,$a in ('check', 'checkbox'),
|
|
('radio','radio') {
|
|
|
|
//standard checks and radios
|
|
@each $s,$as in ('','-unchecked'),
|
|
(':disabled','-unchecked-insensitive'),
|
|
(':indeterminate', '-mixed'),
|
|
(':indeterminate:disabled', '-mixed-insensitive'),
|
|
(':checked', '-checked'),
|
|
(':checked:disabled','-checked-insensitive') {
|
|
.#{$w}#{$s},
|
|
#{$w}#{$s},
|
|
treeview.#{$w}#{$s} {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
|
|
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
|
|
}
|
|
|
|
.osd,
|
|
%osd_check_radio {
|
|
#{$w}#{$s} {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"),
|
|
url("assets/#{$a}#{$as}-dark@2.png"));
|
|
}
|
|
}
|
|
|
|
// the borders of checks and radios are
|
|
// too similar in luminosity to the selected background color, hence
|
|
// we need special casing.
|
|
|
|
// menuitem #{$w}#{$s}:hover,
|
|
// .view #{$w}#{$s}:selected,
|
|
// treeview.#{$w}#{$s}:selected,
|
|
// row:selected #{$w}#{$s},
|
|
infobar #{$w}#{$s} {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"),
|
|
url("assets/#{$a}#{$as}-selected@2.png"));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Selectionmode
|
|
@each $s,$as in ('','-selectionmode'),
|
|
(':checked', '-checked-selectionmode') {
|
|
.view.content-view.check#{$s}:not(list) {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
|
|
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
checkbutton, radiobutton {
|
|
// this is for a nice focus on check and radios text
|
|
&.text-button {
|
|
padding: 2px 0;
|
|
outline-offset: 0;
|
|
&:hover { color: darken($fg_color, 15%); }
|
|
&:disabled { color: $disabled_fg_color; }
|
|
}
|
|
|
|
label:not(:only-child) {
|
|
&:first-child { margin-left: 4px; }
|
|
&:last-child { margin-right: 4px; }
|
|
}
|
|
}
|
|
|
|
check,
|
|
radio {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin: 0 2px;
|
|
|
|
&:only-child,
|
|
menu menuitem & { margin: 0; }
|
|
}
|
|
|
|
//
|
|
// GtkScale
|
|
//
|
|
scale {
|
|
$_marks_length: 3px;
|
|
$_marks_distance: 1px;
|
|
|
|
min-height: 15px;
|
|
min-width: 15px;
|
|
padding: 3px;
|
|
|
|
&.horizontal {
|
|
trough { padding: 0 4px; }
|
|
highlight, fill { margin: 0 -4px; }
|
|
}
|
|
|
|
&.vertical {
|
|
trough { padding: 4px 0; }
|
|
highlight, fill { margin: -4px 0; }
|
|
}
|
|
|
|
// The slider is inside the trough, negative margin to make it bigger
|
|
slider {
|
|
min-height: 15px;
|
|
min-width: 15px;
|
|
margin: -7px;
|
|
}
|
|
|
|
// Click-and-hold the slider to activate
|
|
&.fine-tune {
|
|
// Make the trough grow in fine-tune mode
|
|
slider { margin: -4px; }
|
|
|
|
fill,
|
|
highlight,
|
|
trough {
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
// Trough
|
|
> trough {
|
|
$_scale_trough_bg: rgba(black, 0.2);
|
|
|
|
outline-offset: 2px;
|
|
|
|
border-radius: $bt_radius;
|
|
background-color: $_scale_trough_bg;
|
|
|
|
&:disabled { background-color: rgba($_scale_trough_bg, 0.12); }
|
|
|
|
//OSD troughs
|
|
.osd & {
|
|
background-color: $_scale_trough_bg;
|
|
|
|
highlight {
|
|
background-color: $selected_bg_color;
|
|
|
|
&:disabled { }
|
|
}
|
|
|
|
&:disabled { }
|
|
}
|
|
|
|
// Troughs in selected list-rows and infobars
|
|
menuitem:hover &,
|
|
row:selected &,
|
|
infobar & {
|
|
background-color: transparentize(black, 0.8);
|
|
|
|
> trough > highlight {
|
|
background-color: $selected_fg_color;
|
|
|
|
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
|
|
}
|
|
|
|
&:disabled { background-color: transparentize(black, 0.9); }
|
|
}
|
|
}
|
|
|
|
// The colored part of trough
|
|
> trough > highlight {
|
|
border-radius: $bt_radius;
|
|
background-color: $selected_bg_color;
|
|
|
|
&:disabled { background-color: transparentize($selected_bg_color, 0.45); }
|
|
}
|
|
|
|
// this is another differently styled part of the trough, the most relevant use case is for example
|
|
// in media player to indicate how much video stream as been cached
|
|
> trough > fill {
|
|
border-radius: $bt_radius;
|
|
background-color: transparentize($selected_bg_color, 0.5);
|
|
|
|
&:disabled { background-color: transparent; }
|
|
}
|
|
|
|
> trough > slider {
|
|
$_slider_border: if($variant=='light', transparentize(darken($button_border, 0%), 0), transparentize($button_border, 0));
|
|
|
|
background-color: $selected_fg_color;
|
|
border: 1px solid $_slider_border;
|
|
border-radius: 100%;
|
|
box-shadow: $shadow_2;
|
|
|
|
transition: $button_transition;
|
|
transition-property: background, border;
|
|
|
|
&:hover {
|
|
background-color: lighten($selected_fg_color, 3%);
|
|
border-color: $_slider_border;
|
|
box-shadow: $shadow_0;
|
|
}
|
|
|
|
&:active {
|
|
background-clip: border-box;
|
|
background-color: $selected_fg_color;
|
|
border-color: $_slider_border;
|
|
box-shadow: $shadow_3;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: darken($selected_fg_color, 5%);
|
|
border-color: darken($_slider_border, 5%);
|
|
}
|
|
|
|
// Selected list-row and infobar sliders
|
|
menuitem:hover &,
|
|
row:selected &,
|
|
infobar & {
|
|
background-clip: border-box;
|
|
background-color: $selected_fg_color;
|
|
border-color: $selected_fg_color;
|
|
|
|
&:hover {
|
|
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
|
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
|
}
|
|
&:active {
|
|
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
}
|
|
&:disabled{
|
|
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
|
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
|
}
|
|
}
|
|
|
|
// OSD sliders
|
|
.osd & {
|
|
background-clip: border-box;
|
|
background-color: $selected_fg_color;
|
|
border-color: $_slider_border;
|
|
|
|
&:hover {
|
|
background-color: lighten($selected_fg_color, 3%);
|
|
border-color: $_slider_border;
|
|
box-shadow: $shadow_0;
|
|
}
|
|
|
|
&:active {
|
|
background-color: darken($selected_fg_color, 3%);
|
|
border-color: $_slider_border;
|
|
box-shadow: $shadow_3;
|
|
}
|
|
|
|
&:disabled { }
|
|
}
|
|
}
|
|
|
|
> value { color: gtkalpha(currentColor, 0.4); }
|
|
|
|
> marks {
|
|
color: gtkalpha(currentColor, 0.4);
|
|
|
|
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
|
|
(bottom, bottom, top),
|
|
(top, left, right),
|
|
(bottom, right, left) {
|
|
&.#{$marks_class} {
|
|
margin-#{$marks_margin}: $_marks_distance;
|
|
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fine-tune > marks {
|
|
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
|
|
(bottom, bottom, top),
|
|
(top, left, right),
|
|
(bottom, right, left) {
|
|
&.#{$marks_class} {
|
|
margin-#{$marks_margin}: ($_marks_distance - 1px);
|
|
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
|
|
}
|
|
}
|
|
}
|
|
&.horizontal {
|
|
indicator {
|
|
min-height: $_marks_length;
|
|
min-width: 1px;
|
|
}
|
|
|
|
&.fine-tune indicator { min-height: ($_marks_length - 1px); }
|
|
}
|
|
&.vertical {
|
|
indicator {
|
|
min-height: 1px;
|
|
min-width: $_marks_length;
|
|
}
|
|
|
|
&.fine-tune indicator { min-width: ($_marks_length - 1px); }
|
|
}
|
|
|
|
// *WARNING* scale with marks madness following
|
|
|
|
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
|
|
// $suffix: if($variant == 'light', '', '-dark');
|
|
|
|
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
|
|
('vertical', 'vert') {
|
|
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
|
|
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
|
|
@each $state, $state_infix in ('', ''),
|
|
(':hover', '-hover'),
|
|
(':active', '-active'),
|
|
(':disabled', '-insensitive') {
|
|
&.#{$dir_class}.#{$marks_class} {
|
|
|
|
slider {
|
|
&#{$state} {
|
|
// an asymmetric slider asset is used here, so the margins are uneven, the smaller
|
|
// margin is set on the point side.
|
|
margin: -10px;
|
|
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}';
|
|
border-style: none;
|
|
border-radius: 0;
|
|
|
|
background-color: transparent;
|
|
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
|
|
|
|
$_scale_slider_bg_pos: bottom;
|
|
|
|
@if $dir_class == 'horizontal' {
|
|
min-height: 26px;
|
|
min-width: 24px;
|
|
|
|
@if $marks_infix == 'scale-has-marks-above' {
|
|
margin-top: -14px;
|
|
|
|
$_scale_slider_bg_pos: top;
|
|
}
|
|
|
|
@else { margin-bottom: -14px; }
|
|
}
|
|
|
|
@else {
|
|
min-height: 24px;
|
|
min-width: 26px;
|
|
|
|
@if $marks_infix == 'scale-has-marks-above' {
|
|
margin-left: -14px;
|
|
|
|
$_scale_slider_bg_pos: left bottom;
|
|
}
|
|
|
|
@else {
|
|
margin-right: -14px;
|
|
|
|
$_scale_slider_bg_pos: right bottom;
|
|
}
|
|
}
|
|
|
|
background-position: $_scale_slider_bg_pos;
|
|
background-repeat: no-repeat;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.fine-tune slider {
|
|
// bigger negative margins to make the trough grow here as well
|
|
margin: -7px;
|
|
|
|
@if $dir_class == 'horizontal' {
|
|
@if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
|
|
|
|
@else { margin-bottom: -11px; }
|
|
}
|
|
|
|
@else {
|
|
@if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
|
|
|
|
@else { margin-right: -11px; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Progress bars
|
|
//
|
|
progressbar {
|
|
padding: 0;
|
|
font-size: smaller;
|
|
color: transparentize($fg_color, 0.3);
|
|
font-feature-settings: "tnum";
|
|
|
|
// sizing
|
|
&.horizontal {
|
|
> trough {
|
|
min-width: 150px;
|
|
&, > progress {
|
|
min-height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
> trough {
|
|
min-height: 80px;
|
|
&, > progress {
|
|
min-width: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal > trough > progress { margin: 0 -1px; } // the progress node is positioned after the trough border
|
|
&.vertical > trough > progress { margin: -1px 0; } // this moves it over it.
|
|
|
|
&.osd {
|
|
min-width: 3px;
|
|
min-height: 3px;
|
|
background-color: transparent;
|
|
|
|
> trough {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
> progress {
|
|
border-style: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
// Moving bit
|
|
> trough > progress {
|
|
min-height: 4px;
|
|
min-width: 4px;
|
|
background-color: $progress_color;
|
|
border: none;
|
|
border-radius: $bt_radius;
|
|
box-shadow: none; //needed for clipping
|
|
|
|
row:selected &,
|
|
infobar & { background-color: $selected_fg_color; }
|
|
}
|
|
|
|
// Trough
|
|
> trough {
|
|
min-height: 4px;
|
|
min-width: 4px;
|
|
border: none;
|
|
border-radius: $bt_radius;
|
|
background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
|
|
|
|
row:selected &,
|
|
infobar & { background-color: transparentize(black, 0.8); }
|
|
}
|
|
}
|
|
|
|
//
|
|
// Level Bar
|
|
//
|
|
levelbar {
|
|
block {
|
|
min-width: 32px;
|
|
min-height: 1px;
|
|
}
|
|
|
|
&.vertical block {
|
|
min-width: 1px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
trough {
|
|
border: none;
|
|
padding: 3px;
|
|
border-radius: $bt_radius;
|
|
background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
|
|
}
|
|
|
|
&.horizontal.discrete block { margin: 0 1px; }
|
|
&.vertical.discrete block { margin: 1px 0; }
|
|
|
|
block:not(.empty) {
|
|
border: 1px solid $selected_bg_color;
|
|
background-color: $selected_bg_color;
|
|
border-radius: $bt_radius;
|
|
}
|
|
block.low {
|
|
border-color: $warning_color;
|
|
background-color: $warning_color;
|
|
}
|
|
block.high {
|
|
border-color: $selected_bg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
block.full {
|
|
border-color: $success_color;
|
|
background-color: $success_color;
|
|
}
|
|
block.empty {
|
|
background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
|
|
border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Print dialog
|
|
//
|
|
window.dialog.print {
|
|
drawing {
|
|
color: $fg_color;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
paper {
|
|
border: 1px solid $borders_color;
|
|
background: $base_color;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.dialog-action-box { margin: 12px; }
|
|
}
|
|
|
|
//
|
|
// Frames
|
|
//
|
|
frame,
|
|
.frame {
|
|
border: 1px solid $borders_color;
|
|
|
|
> list { border: none; }
|
|
}
|
|
|
|
frame {
|
|
border-radius: $wm_radius;
|
|
|
|
> label {
|
|
margin: 4px;
|
|
}
|
|
}
|
|
|
|
scrolledwindow {
|
|
viewport.frame { // avoid double borders when viewport inside scrolled window
|
|
border-style: none;
|
|
}
|
|
|
|
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
|
// This draws a box on top of the content, the size changes programmatically.
|
|
> 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.
|
|
> undershoot {
|
|
&.top { @include undershoot(top); }
|
|
&.bottom { @include undershoot(bottom); }
|
|
&.left { @include undershoot(left); }
|
|
&.right { @include undershoot(right); }
|
|
|
|
padding: $wm_radius/2;
|
|
}
|
|
|
|
> junction { // the small square between two scrollbars
|
|
border-style: solid none none solid;
|
|
border-width: 1px;
|
|
border-color: $borders_color;
|
|
background-color: $_scrollbar_bg_color;
|
|
|
|
&:dir(rtl) { border-style: solid solid none none; }
|
|
}
|
|
}
|
|
|
|
//vbox and hbox separators
|
|
separator {
|
|
background-color: $borders_color;
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
|
|
// &.vertical {
|
|
// background-color: if($variant=='light', $borders_color, $header_border);
|
|
// }
|
|
}
|
|
|
|
//
|
|
// Lists
|
|
//
|
|
listview,
|
|
list {
|
|
background-color: $base_color;
|
|
border-color: $borders_color;
|
|
// border-radius: $wm_radius;
|
|
|
|
> row {
|
|
padding: 2px;
|
|
|
|
// &:first-child { border-radius: $bt_radius $bt_radius 0 0; }
|
|
// &:last-child { border-radius: 0 0 $bt_radius $bt_radius; }
|
|
}
|
|
|
|
// .sidebar & {
|
|
// > row {
|
|
// &:first-child { border-radius: $bt_radius; }
|
|
// &:last-child { border-radius: $bt_radius; }
|
|
// }
|
|
// }
|
|
|
|
> row.expander { padding: 0px; }
|
|
> row.expander .row-header { padding: 2px; }
|
|
}
|
|
|
|
%row_activatable {
|
|
&.has-open-popup,
|
|
&:hover { background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05)); }
|
|
|
|
&:active {
|
|
color: $fg_color;
|
|
background-color: if($variant == 'light', rgba(black, 0.2), rgba(white, 0.2));
|
|
transition-duration: 200ms;
|
|
}
|
|
|
|
&:disabled {
|
|
color: $disabled_fg_color;
|
|
image { color: inherit; }
|
|
}
|
|
|
|
&:selected {
|
|
&, &:active {
|
|
color: $fg_color;
|
|
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
|
|
|
|
label { color: $fg_color; }
|
|
}
|
|
|
|
&.has-open-popup,
|
|
&:hover { background-color: if($variant == 'light', rgba(black, 0.2), rgba(white, 0.2)); }
|
|
}
|
|
}
|
|
|
|
row {
|
|
&:not(:hover) { transition: all 300ms $ease-out-quad; }
|
|
|
|
button.circular { @extend %circular_button; }
|
|
|
|
&:selected {
|
|
color: $fg_color;
|
|
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
|
|
|
|
label { color: $fg_color; }
|
|
|
|
// button { @extend %selected-button; }
|
|
}
|
|
|
|
&.activatable {
|
|
@extend %row_activatable;
|
|
}
|
|
}
|
|
|
|
columnview {
|
|
// move padding to child cells
|
|
> listview > row {
|
|
padding: 0;
|
|
|
|
// align horizontal sizing with header buttons
|
|
> cell {
|
|
padding: 8px 6px;
|
|
|
|
&: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: $borders_color;
|
|
}
|
|
|
|
// shrink vertically for .data-table
|
|
&.data-table > listview > row > cell {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
treeexpander {
|
|
border-spacing: 4px;
|
|
}
|
|
|
|
columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
|
|
outline: 2px solid $borders_color;
|
|
}
|
|
|
|
columnview row:not(:selected) cell editablelabel.editing:focus-within {
|
|
outline: 2px solid $selected_bg_color;
|
|
}
|
|
|
|
columnview row:not(:selected) cell editablelabel.editing text selection {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
.rich-list { /* rich lists usually containing other widgets than just labels/text */
|
|
& > row {
|
|
padding: 8px 12px;
|
|
min-height: 32px; /* should be tall even when only containing a label */
|
|
|
|
& > box {
|
|
border-spacing: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// App Notifications
|
|
//
|
|
.app-notification {
|
|
padding: 8px;
|
|
margin: 6px 16px 16px 16px;
|
|
color: $fg_color;
|
|
background-color: rgba($header_bg, 0.85);
|
|
// background-image: linear-gradient(0deg, $bg_color 0%, $bg_color 85%, darken($bg_color, 5%) 95%, darken($bg_color, 15%) 100%);
|
|
border-radius: $wm_radius;
|
|
border: none;
|
|
box-shadow: 0 5px 15px 0 rgba(black, 0.25),
|
|
inset 0 0 0 1px rgba(white, 0.06),
|
|
0 0 0 1px if($variant=='light', rgba(black, 0.12), rgba(black, 0.75));
|
|
|
|
border { border: none; }
|
|
|
|
button {
|
|
@extend %undecorated_button;
|
|
min-height: 22px;
|
|
padding: 2px 8px;
|
|
|
|
&:not(.text-button).image-button {
|
|
@extend %circular_button;
|
|
}
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
&:active, &:checked { @include button(flat-active); }
|
|
&:disabled { @include button(flat-insensitive); }
|
|
}
|
|
}
|
|
|
|
//
|
|
// Expanders
|
|
//
|
|
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'); }
|
|
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
|
|
expander-widget {
|
|
> box > title {
|
|
border-radius: $bt_radius;
|
|
|
|
&:hover > expander {
|
|
color: lighten($fg_color, 30%); //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,
|
|
calendar {
|
|
color: $fg_color;
|
|
border: 1px solid $borders_color;
|
|
border-radius: $bt_radius;
|
|
padding: 2px 6px;
|
|
margin: 0;
|
|
|
|
> header {
|
|
color: $fg_color;
|
|
border-bottom: 1px solid $borders_color;
|
|
|
|
> button {
|
|
border: none;
|
|
box-shadow: none;
|
|
background: none;
|
|
border-radius: 0;
|
|
|
|
&:hover { background-color: rgba($fg_color, 0.1); }
|
|
&:active { background-color: $selected_bg_color; }
|
|
}
|
|
|
|
> button:backdrop {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
> grid {
|
|
> label.today {
|
|
background-color: rgba($fg_color, 0.15);
|
|
border-radius: 3px;
|
|
|
|
&:selected {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
> label:focus {
|
|
outline-color: $borders_color;
|
|
outline-offset: -2px;
|
|
outline-width: 2px;
|
|
outline-style: solid;
|
|
}
|
|
|
|
> label.day-number {
|
|
padding: 4px;
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
border-radius: $bt_radius;
|
|
}
|
|
}
|
|
|
|
> label.day-number.other-month {
|
|
color: gtkalpha(currentColor, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Dialogs
|
|
//
|
|
|
|
$messagedialog_bg: if($trans == 'true', rgba($bg_color, 0.95), $bg_color);
|
|
|
|
window.dialog.message { // Message Dialog styling
|
|
&.background { background-color: rgba($messagedialog_bg, 1); }
|
|
|
|
.titlebar {
|
|
min-height: 28px;
|
|
background-color: rgba($messagedialog_bg, 1);
|
|
border: none;
|
|
}
|
|
|
|
box.dialog-vbox.vertical {
|
|
border-spacing: 10px;
|
|
}
|
|
|
|
& label.title {
|
|
font-weight: 800;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
.dialog-action-area {
|
|
padding: 6px;
|
|
|
|
> button {
|
|
min-height: 20px;
|
|
padding: 4px 8px;
|
|
box-shadow: none;
|
|
border-radius: $bt_radius;
|
|
margin: 0 3px 3px 3px;
|
|
border: none;
|
|
|
|
&:not(.suggested-action):not(.destructive-action) {
|
|
border-radius: $bt_radius;
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
@include button(flat-hover);
|
|
transition: $button_transition;
|
|
}
|
|
|
|
&:active, &:checked {
|
|
|
|
@if $variant == 'light' {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
@else {
|
|
@include button(active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.suggested-action, &.destructive-action {
|
|
border-radius: $bt_radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.csd { // rounded bottom border styling for csd version
|
|
&.background {
|
|
border-bottom-left-radius: $wm_radius;
|
|
border-bottom-right-radius: $wm_radius;
|
|
border: none;
|
|
}
|
|
|
|
&.background, .titlebar { background-color: $messagedialog_bg; }
|
|
}
|
|
}
|
|
|
|
//
|
|
// Filechooser
|
|
//
|
|
filechooser {
|
|
.csd & {
|
|
background-color: $base_color;
|
|
border-radius: 0 0 $wm_radius $wm_radius;
|
|
|
|
> actionbar {
|
|
border-top: 1px solid $header_border;
|
|
background-color: $dark_sidebar_bg;
|
|
color: $dark_sidebar_fg;
|
|
border-radius: 0 0 $wm_radius $wm_radius;
|
|
|
|
label, combobox { color: $dark_sidebar_fg; }
|
|
}
|
|
|
|
paned {
|
|
stack {
|
|
&:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 }
|
|
&:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) }
|
|
}
|
|
}
|
|
|
|
stack.view {
|
|
background-color: transparent;
|
|
|
|
scrolledwindow {
|
|
background-color: transparent;
|
|
border-radius: 0 0 $wm_radius $wm_radius;
|
|
|
|
list { background-color: transparent; }
|
|
|
|
treeview.view {
|
|
@extend %view;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> box.vertical > paned.horizontal > separator,
|
|
> box.vertical > box.vertical > paned.horizontal > separator {
|
|
border: none;
|
|
min-width: 1px;
|
|
background-image: image(if($variant=='light', $solid_borders_color, $header_border));
|
|
|
|
// &:dir(ltr) { margin-left: -1px; }
|
|
// &:dir(rtl) { margin-right: -1px; }
|
|
}
|
|
|
|
#pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); }
|
|
}
|
|
|
|
// Filechooser, we put this here to give a different style between csd and
|
|
// ssd on certain DE-s
|
|
|
|
filechooserbutton > button > box {
|
|
border-spacing: 6px;
|
|
}
|
|
|
|
filechooserbutton:drop(active) {
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
//
|
|
// Sidebar
|
|
//
|
|
%sidebar_left {
|
|
border-right: 1px solid $dark_sidebar_border;
|
|
border-left-style: none;
|
|
}
|
|
|
|
%sidebar_right {
|
|
border-left: 1px solid $dark_sidebar_border;
|
|
border-right-style: none;
|
|
}
|
|
|
|
.sidebar {
|
|
border-style: none;
|
|
background-color: $bg_color;
|
|
|
|
&:dir(ltr),
|
|
&.left,
|
|
&.left:dir(rtl) { @extend %sidebar_left; }
|
|
|
|
&:dir(rtl),
|
|
&.right { @extend %sidebar_right; }
|
|
|
|
list {
|
|
background-color: transparent;
|
|
|
|
> separator {
|
|
min-height: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border: none; }}
|
|
}
|
|
|
|
stacksidebar {
|
|
list.separators:not(.horizontal) > row:not(.separator) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&.sidebar {
|
|
&:dir(ltr) list,
|
|
&.left list,
|
|
&.left:dir(rtl) list { @extend %sidebar_left; }
|
|
|
|
&:dir(rtl) list,
|
|
&.right list { @extend %sidebar_right; }
|
|
}
|
|
|
|
row {
|
|
padding: 4px 4px;
|
|
|
|
> label {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
&.needs-attention > label {
|
|
@extend %needs_attention;
|
|
background-size: 6px 6px, 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation Sidebar
|
|
.navigation-sidebar {
|
|
padding: 3px 0; //only vertical padding. horizontal row size would clip
|
|
|
|
> separator {
|
|
margin: 3px;
|
|
}
|
|
|
|
> row {
|
|
min-height: 36px;
|
|
padding: 0 8px;
|
|
border-radius: $bt_radius;
|
|
margin: 0 3px 2px;
|
|
|
|
&:hover,
|
|
&:focus-visible:focus-within {
|
|
background-color: rgba($fg_color, 0.1);
|
|
}
|
|
|
|
&:active {
|
|
color: $fg_color;
|
|
background-color: rgba($fg_color, 0.2);
|
|
}
|
|
|
|
&:selected {
|
|
color: $fg_color;
|
|
background-color: rgba($fg_color, 0.15);
|
|
|
|
label { color: $fg_color; }
|
|
|
|
&:hover {
|
|
background-color: rgba($fg_color, 0.2);
|
|
}
|
|
|
|
&:focus-visible:focus-within {
|
|
outline-width: 0;
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
&:hover { background-color: darken($selected_bg_color,10%); }
|
|
}
|
|
}
|
|
|
|
&:disabled { color: $disabled_fg_color; }
|
|
}
|
|
}
|
|
|
|
placessidebar {
|
|
> viewport.frame { border-style: none; }
|
|
|
|
.navigation-sidebar > row {
|
|
// Needs overriding of the GtkListBoxRow padding
|
|
min-height: 24px;
|
|
padding: 2px 10px;
|
|
// Using margins/padding directly in the SidebarRow
|
|
// will make the animation of the new bookmark row jump
|
|
> revealer {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
image.sidebar-icon {
|
|
&:dir(ltr) { padding-right: 6px; }
|
|
&:dir(rtl) { padding-left: 6px; }
|
|
}
|
|
|
|
label.sidebar-label {
|
|
&:dir(ltr) { padding-right: 6px; }
|
|
&:dir(rtl) { padding-left: 6px; }
|
|
}
|
|
|
|
button.sidebar-button {
|
|
min-width: 22px;
|
|
min-height: 22px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
padding: 0;
|
|
border-radius: 100px;
|
|
|
|
> image { opacity: 0.85 };
|
|
|
|
&:active, &:checked {
|
|
@include button(flat-active);
|
|
border-color: if($variant=='light', rgba(black, 0.3), $dark_borders_color);
|
|
}
|
|
|
|
&:not(:hover):not(:active) > image { opacity: 0.65 };
|
|
}
|
|
|
|
&:selected button.sidebar-button {
|
|
@include button(normal);
|
|
|
|
&:active, &:checked {
|
|
@include button(flat-active);
|
|
border-color: if($variant=='light', rgba(black, 0.25), rgba(black, 0.15));
|
|
}
|
|
}
|
|
|
|
&.sidebar-placeholder-row {
|
|
padding: 0 8px;
|
|
min-height: 2px;
|
|
background-image: _solid($drop_target_color);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
&.sidebar-new-bookmark-row { color: $selected_bg_color; }
|
|
|
|
&:drop(active):not(:disabled) {
|
|
&, label, image { color: $drop_target_color; }
|
|
|
|
box-shadow: inset 0 1px $drop_target_color,
|
|
inset 0 -1px $drop_target_color;
|
|
|
|
&:selected {
|
|
&, label, image { color: $dark_sidebar_fg; }
|
|
background-color: $drop_target_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Placesview
|
|
//
|
|
placesview {
|
|
.server-list-button > image {
|
|
-gtk-icon-transform: rotate(0turn);
|
|
}
|
|
|
|
.server-list-button:checked > image {
|
|
transition: 200ms $ease-out-quad;
|
|
-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;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
background-image: _solid($solid_borders_color);
|
|
background-size: 1px 1px;
|
|
|
|
&:selected { background-image: _solid($selected_bg_color); }
|
|
|
|
&.wide {
|
|
min-width: 5px;
|
|
min-height: 5px;
|
|
background-color: $bg_color;
|
|
background-image: _solid($solid_borders_color), _solid($solid_borders_color);
|
|
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: 32px;
|
|
}
|
|
|
|
background: black;
|
|
}
|
|
|
|
//
|
|
// GtkInfoBar
|
|
//
|
|
|
|
infobar {
|
|
border-style: none;
|
|
|
|
&.info {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $selected_bg_color;
|
|
selection { color: $selected_bg_color; }
|
|
}
|
|
}
|
|
|
|
&.question {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $suggested_color;
|
|
selection { color: $suggested_color; }
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $warning_color;
|
|
selection { color: $warning_color; }
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
& > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
background-color: $error_color;
|
|
selection { color: $error_color; }
|
|
}
|
|
}
|
|
|
|
&.info,
|
|
&.question,
|
|
&.warning,
|
|
&.error {
|
|
& > revealer > box,
|
|
&:hover > revealer > box,
|
|
&:backdrop > revealer > box {
|
|
color: $selected_fg_color;
|
|
caret-color: currentColor;
|
|
|
|
button {
|
|
min-height: 28px;
|
|
@extend %selected-button;
|
|
}
|
|
|
|
selection {
|
|
background-color: $selected_fg_color;
|
|
}
|
|
|
|
*:link { @extend %link_selected; }
|
|
}
|
|
}
|
|
}
|
|
|
|
infobar .close,
|
|
searchbar .close {
|
|
@include button(undecorated);
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
padding: 4px;
|
|
border-radius: 1000px;
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
}
|
|
|
|
//
|
|
// Buttons on selected backgrounds
|
|
//
|
|
|
|
%selected-button {
|
|
color: $selected_fg_color;
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
border-color: transparentize($selected_fg_color, 0.5);
|
|
background-image: none;
|
|
box-shadow: none;
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
color: $selected_fg_color;
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
background-image: none;
|
|
}
|
|
|
|
&.flat:disabled {
|
|
&, label { color: transparentize($selected_fg_color, 0.6); }
|
|
}
|
|
|
|
&:hover {
|
|
color: $selected_fg_color;
|
|
background-color: transparentize($selected_fg_color, 0.8);
|
|
border-color: transparentize($selected_fg_color, 0.5);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:active, &:checked {
|
|
color: $selected_fg_color;
|
|
background-color: transparentize($selected_fg_color, 0.6);
|
|
border-color: transparentize($selected_fg_color, 0.5);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled {
|
|
&, label { color: transparentize($selected_fg_color, 0.5); }
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
border-color: transparentize($selected_fg_color, 0.6);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled:active, &:disabled:checked {
|
|
color: $selected_bg_color;
|
|
background-color: transparentize($selected_fg_color, 0.5);
|
|
border-color: transparentize($selected_fg_color, 0.6);
|
|
}
|
|
}
|
|
|
|
%normal_selected_button {
|
|
color: $selected_fg_color;
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
border-color: transparentize($selected_fg_color, 0.5);
|
|
background-image: none;
|
|
}
|
|
|
|
//
|
|
// 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: lighten($osd_bg_color, 10%);
|
|
background-clip: padding-box;
|
|
border-radius: $bt_radius;
|
|
color: $osd_fg_color;
|
|
|
|
label { padding: 4px; }
|
|
}
|
|
|
|
border-radius: $bt_radius;
|
|
box-shadow: none;
|
|
|
|
> box {
|
|
border-spacing: 6px;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Color Chooser
|
|
//
|
|
colorswatch {
|
|
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
|
|
// is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
|
|
// is applied to the overlay box.
|
|
|
|
$_colorswatch-radius: 2px;
|
|
|
|
&, &:drop(active) { border-style: none; }
|
|
|
|
// border rounding
|
|
&.top {
|
|
border-top-left-radius: $_colorswatch-radius + 0.5px;
|
|
border-top-right-radius: $_colorswatch-radius + 0.5;
|
|
|
|
overlay {
|
|
border-top-left-radius: $_colorswatch-radius;
|
|
border-top-right-radius: $_colorswatch-radius;
|
|
}
|
|
}
|
|
&.bottom {
|
|
border-bottom-left-radius: $_colorswatch-radius + 0.5px;
|
|
border-bottom-right-radius: $_colorswatch-radius + 0.5;
|
|
|
|
overlay {
|
|
border-bottom-left-radius: $_colorswatch-radius;
|
|
border-bottom-right-radius: $_colorswatch-radius;
|
|
}
|
|
}
|
|
&.left, &:first-child:not(.top) {
|
|
border-top-left-radius: $_colorswatch_radius + 0.5px;
|
|
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
|
overlay {
|
|
border-top-left-radius: $_colorswatch_radius;
|
|
border-bottom-left-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
&.right, &:last-child:not(.bottom) {
|
|
border-top-right-radius: $_colorswatch_radius + 0.5px;
|
|
border-bottom-right-radius: $_colorswatch_radius + 0.5px;
|
|
overlay {
|
|
border-top-right-radius: $_colorswatch_radius;
|
|
border-bottom-right-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
|
|
&.dark overlay {
|
|
color: transparentize(white, 0.3);
|
|
&:hover {
|
|
border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
|
|
}
|
|
}
|
|
&.light overlay {
|
|
color: transparentize(black, 0.3);
|
|
&:hover {
|
|
border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
}
|
|
}
|
|
|
|
overlay {
|
|
border: 1px solid if($variant == 'light', transparentize(black, 0.85), $borders_color);
|
|
&:hover { background-color: transparentize(white, 0.8) }
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
overlay {
|
|
border-color: transparentize(black, 0.4);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&#add-color-button {
|
|
border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
|
|
border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set
|
|
@include button(normal);
|
|
&:hover { @include button(hover); }
|
|
overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneath
|
|
}
|
|
}
|
|
|
|
button.color {
|
|
padding: 0;
|
|
|
|
colorswatch:first-child:last-child {
|
|
&, overlay {
|
|
margin: 4px;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// colorscale popup
|
|
colorchooser .popover.osd { border-radius: $bt_radius; }
|
|
|
|
//
|
|
// Misc
|
|
//
|
|
//content view (grid/list)
|
|
.content-view {
|
|
background-color: $base_color;
|
|
|
|
&:hover { -gtk-icon-filter: brightness(1.2); }
|
|
|
|
.tile {
|
|
margin: 2px;
|
|
background-color: if($variant=='light', transparent, black);
|
|
border-radius: 0;
|
|
padding: 0;
|
|
|
|
&:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
|
|
&:disabled { background-color: if($variant=='light', transparent, mix($bg_color, $base_color, 60%)); }
|
|
}
|
|
|
|
> rubberband { @extend %rubberband; }
|
|
}
|
|
|
|
.scale-popup {
|
|
// .osd & { @extend %osd; }
|
|
|
|
.osd & button.flat { //FIXME: quick hack, redo properly
|
|
border-style: none;
|
|
border-radius: $bt_radius;
|
|
}
|
|
|
|
button { // +/- buttons on GtkVolumeButton popup
|
|
border: none;
|
|
@extend %flat_button;
|
|
}
|
|
}
|
|
|
|
// Decouple the font of context menus from their entry/textview
|
|
.context-menu { font: initial; }
|
|
.monospace { font-family: Monospace; }
|
|
|
|
//
|
|
// Shortcuts Help
|
|
//
|
|
%circular_button,
|
|
button.circular {
|
|
border-radius: 100px;
|
|
padding: 0 0 0 0;
|
|
min-height: 28px;
|
|
min-width: 28px;
|
|
|
|
&:active, &:checked {
|
|
@if $variant=='light' {
|
|
@include button(flat-active);
|
|
border-color: rgba(black, 0.2);
|
|
}
|
|
}
|
|
|
|
// label { padding: 0; }
|
|
}
|
|
|
|
.keycap {
|
|
min-width: 16px;
|
|
min-height: 20px;
|
|
|
|
padding: 3px 6px 4px 6px;
|
|
|
|
color: $fg_color;
|
|
background-color: $base_color;
|
|
border: 1px solid $borders_color;
|
|
border-radius: $bt_radius;
|
|
box-shadow: inset 0px -2px 0px if($variant=='light', transparentize(black, 0.95), transparentize(black, 0.85));
|
|
}
|
|
|
|
stackswitcher {
|
|
button.text-button { min-width: 80px; }
|
|
button.circular {
|
|
@extend %circular_button;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Dnd
|
|
//
|
|
*:drop(active):focus,
|
|
*:drop(active) {
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
|
|
//
|
|
// Window Decorations
|
|
//
|
|
|
|
window {
|
|
border-width: 0;
|
|
|
|
&.csd {
|
|
transition: $shadow_transition;
|
|
border-radius: $wm_radius;
|
|
box-shadow: 0 3px 3px 0 $wm_shadow,
|
|
0 8px 8px 0 $wm_shadow,
|
|
0 16px 16px 0 $wm_shadow,
|
|
$wm_outline;
|
|
|
|
// this is used for the resize cursor area
|
|
margin: 6px;
|
|
|
|
&:backdrop {
|
|
// the transparent shadow here is to enforce that the shadow extents don't
|
|
// change when we go to backdrop, to prevent jumping windows
|
|
box-shadow: 0 3px 3px 0 $wm_shadow,
|
|
0 8px 8px 0 transparent,
|
|
0 16px 16px 0 transparent,
|
|
$wm_outline;
|
|
}
|
|
|
|
&.popup {
|
|
border-radius: $mn_radius;
|
|
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.08), $wm_outline;
|
|
}
|
|
|
|
&.dialog.message {
|
|
border-radius: $wm_radius;
|
|
}
|
|
|
|
.solid-csd & {
|
|
border: 1px solid $header_border;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
background-color: $header_bg;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.maximized,
|
|
&.fullscreen,
|
|
&.tiled,
|
|
&.tiled-top,
|
|
&.tiled-left,
|
|
&.tiled-right,
|
|
&.tiled-bottom {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.popup { box-shadow: none; }
|
|
|
|
// server-side decorations as used by mutter
|
|
&.ssd { box-shadow: 0 0 0 1px $wm_shadow; } //just doing borders, wm draws actual shadows
|
|
}
|
|
|
|
//
|
|
// Titlebuttons
|
|
//
|
|
windowcontrols {
|
|
border-spacing: 6px;
|
|
|
|
&:not(.empty) {
|
|
&.start:dir(ltr),
|
|
&.end:dir(rtl) {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
&.start:dir(rtl),
|
|
&.end:dir(ltr) {
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
&.close, &.maximize, &.minimize {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px 16px;
|
|
|
|
&, &:hover, &:focus, &:active, &:backdrop {
|
|
@include button(undecorated);
|
|
color: transparent;
|
|
}
|
|
|
|
&:backdrop { opacity: 1; }
|
|
}
|
|
|
|
// Load png assets for each button, Fix the Chrome window restore button bug
|
|
@each $k in ('close', 'maximize', 'minimize') {
|
|
@each $l, $m in ('',''), (':backdrop','-backdrop'), (':backdrop:hover','-backdrop-hover'), (':hover','-hover'), (':active','-active') {
|
|
&.#{$k}#{$l} {
|
|
background-image: -gtk-scaled(url('windows-assets/titlebutton-#{$k}#{$m}#{$asset_suffix}.png'),
|
|
url('windows-assets/titlebutton-#{$k}#{$m}#{$asset_suffix}@2.png'));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fullscreen &,
|
|
.maximized & {
|
|
button {
|
|
@each $l, $m in ('',''), (':backdrop','-backdrop'), (':backdrop:hover','-backdrop-hover'), (':hover','-hover'), (':active','-active') {
|
|
&.maximize#{$l} {
|
|
background-image: -gtk-scaled(url('windows-assets/titlebutton-restore#{$m}#{$asset_suffix}.png'),
|
|
url('windows-assets/titlebutton-restore#{$m}#{$asset_suffix}@2.png'));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// catch all extend
|
|
%selected_items {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
|
|
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
|
}
|
|
|
|
%nobg_selected_items {
|
|
color: $selected_fg_color;
|
|
|
|
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
|
}
|
|
|
|
/*********
|
|
* Emoji *
|
|
*********/
|
|
popover.emoji-picker {
|
|
padding: 0;
|
|
border-radius: $wm_radius;
|
|
|
|
> contents {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.emoji-searchbar {
|
|
padding: 6px;
|
|
border-spacing: 6px;
|
|
border-bottom: 1px solid $borders_color;
|
|
}
|
|
|
|
.emoji-toolbar {
|
|
padding: 6px;
|
|
border-spacing: 6px;
|
|
border-top: 1px solid $borders_color;
|
|
}
|
|
|
|
// mimic tab style
|
|
button.emoji-section {
|
|
margin: 3px 1px;
|
|
padding: 1px 12px;
|
|
border-radius: $bt_radius;
|
|
border: none;
|
|
outline-offset: -2px;
|
|
box-shadow: none;
|
|
transition: none;
|
|
animation: none;
|
|
|
|
&:first-child { margin-left: 6px; }
|
|
&:last-child { margin-right: 6px; }
|
|
}
|
|
|
|
popover.emoji-picker emoji {
|
|
font-size: x-large;
|
|
padding: 6px;
|
|
border-radius: $bt_radius;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
emoji-completion-row > box {
|
|
border-spacing: 10px;
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
emoji-completion-row:focus,
|
|
emoji-completion-row:hover {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
emoji-completion-row emoji:focus,
|
|
emoji-completion-row emoji:hover {
|
|
background-color: $borders_color;
|
|
}
|
|
|
|
popover.entry-completion > contents {
|
|
padding: 0;
|
|
}
|
|
|
|
statusbar {
|
|
padding: 6px 10px 6px 10px;
|
|
}
|