636 lines
14 KiB
SCSS
636 lines
14 KiB
SCSS
//
|
|
// Elementary Apps
|
|
//
|
|
|
|
// Wingpanel
|
|
.menubar.panel {
|
|
.panel {
|
|
&, &.color-light, &.color-dark {
|
|
background-color: transparent;
|
|
background-image: image(rgba($panel_bg, 0.1));
|
|
border-bottom: none;
|
|
transition: all 100ms ease-in-out;
|
|
color: $panel_fg;
|
|
}
|
|
|
|
&.maximized {
|
|
background-color: rgba($panel_bg, 0.2);
|
|
background-image: none;
|
|
border: none;
|
|
}
|
|
|
|
&.translucent {
|
|
background-color: rgba($panel_bg, 0.1);
|
|
background-image: none;
|
|
border: none;
|
|
}
|
|
|
|
menubar {
|
|
background: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
popover {
|
|
padding: 2px 4px;
|
|
margin: 0 6px 15px 6px;
|
|
border: 1px solid if($variant == 'light', rgba(black, 0.35), rgba(black, 0.45));
|
|
box-shadow: 0 3px 5px rgba(black, 0.12), 0 5px 8px rgba(black, 0.08);
|
|
|
|
button {
|
|
@include button(undecorated);
|
|
&:hover { @include button(flat-hover); }
|
|
&:active { @include button(flat-active); label { color: white; } }
|
|
&:checked { @include button(flat-checked); label { color: white; } }
|
|
&:disabled { @include button(flat-insensitive); }
|
|
&, &:hover, &:active, &:checked, &:disabled { border-color: transparent; }
|
|
}
|
|
|
|
.linked > button {
|
|
@include button(normal);
|
|
&:hover { @include button(hover); }
|
|
&:active, &:checked { @include button(active); }
|
|
&:disabled { @include button(insensitive); }
|
|
}
|
|
|
|
list {
|
|
background-color: transparent;
|
|
|
|
row.activatable {
|
|
margin: 0;
|
|
|
|
&:not(:selected) {
|
|
background: none;
|
|
}
|
|
|
|
> widget > revealer > deck > overlay > grid {
|
|
background-color: $menu_bg;
|
|
border-radius: $bt_radius;
|
|
box-shadow: 0 2px 3px rgba(black, 0.15), inset 0 1px $header_highlight, $wm_outline;
|
|
}
|
|
}
|
|
}
|
|
|
|
separator.horizontal {
|
|
margin: 0 -4px;
|
|
}
|
|
|
|
separator.vertical {
|
|
background: none;
|
|
}
|
|
|
|
.sidebar {
|
|
border-style: none;
|
|
background: none;
|
|
|
|
.view {
|
|
background: none;
|
|
|
|
&:hover {
|
|
border-radius: $bt_radius;
|
|
background-color: if($variant=='light', rgba(black, 0.1), rgba(white, 0.1));
|
|
}
|
|
|
|
&:selected {
|
|
&, &:focus, &:backdrop {
|
|
text-shadow: none;
|
|
transition: all 200ms $ease-out-quad;
|
|
background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
|
|
border-radius: $bt_radius;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.composited-indicator {
|
|
padding: 0 6px;
|
|
|
|
> revealer label,
|
|
> revealer image,
|
|
> revealer spinner {
|
|
color: $panel_fg;
|
|
font-weight: normal;
|
|
transition: all 200ms ease-in-out;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
|
|
> revealer image,
|
|
> revealer spinner {
|
|
padding: 3px 0;
|
|
}
|
|
|
|
> revealer label {
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
.keyboard {
|
|
background-color: $panel_fg;
|
|
border-radius: 2px;
|
|
color: $panel_bg;
|
|
padding: 0 3px;
|
|
font-weight: normal;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
// Popover switcher dots
|
|
button.flat.toggle.switcher {
|
|
&:hover, &:active, &:checked, &:selected {
|
|
image {
|
|
color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Calendar Popover
|
|
.circular { // Calendar popover date button
|
|
label:disabled { color: $disabled_fg_color; }
|
|
|
|
&.accent { // Today button
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
}
|
|
|
|
label.circular { border-radius: $circular_radius; }
|
|
|
|
// Marlin / Pantheon Files
|
|
MarlinViewWindow {
|
|
*:selected, *:selected:focus {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
outline-color: transparent;
|
|
}
|
|
|
|
GtkIconView.view:selected {
|
|
&, &:focus, &:hover, &:focus:hover { background-color: transparent; }
|
|
}
|
|
|
|
FMListView, FMColumnView { outline-color: transparent; }
|
|
}
|
|
|
|
.marlin-pathbar.pathbar {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
|
|
@include entry(header-normal);
|
|
&:focus { @include entry(header-focus) }
|
|
&:disabled { @include entry(header-insensitive) }
|
|
}
|
|
|
|
// Checkbutton
|
|
checkbutton.color-button {
|
|
border: 1px solid $borders_color;
|
|
border-radius: $circular_radius;
|
|
background-clip: border-box;
|
|
padding: 0;
|
|
|
|
> check {
|
|
-gtk-icon-source: none;
|
|
background: none;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.none {
|
|
> check {
|
|
background-color: transparent;
|
|
border-radius: $circular_radius;
|
|
-gtk-icon-source: -gtk-icontheme("close-symbolic");
|
|
}
|
|
}
|
|
|
|
&.blue {
|
|
background-color: blue;
|
|
}
|
|
|
|
&.mint {
|
|
background-color: mix(blue, green, 35%);
|
|
}
|
|
|
|
&.green {
|
|
background-color: green;
|
|
}
|
|
|
|
&.yellow {
|
|
background-color: yellow;
|
|
}
|
|
|
|
&.blue {
|
|
background-color: blue;
|
|
}
|
|
|
|
&.orange {
|
|
background-color: orange;
|
|
}
|
|
|
|
&.red {
|
|
background-color: red;
|
|
}
|
|
|
|
&.pink {
|
|
background-color: pink;
|
|
}
|
|
|
|
&.purple {
|
|
background-color: purple;
|
|
}
|
|
|
|
&.brown {
|
|
background-color: brown;
|
|
}
|
|
|
|
&.slate {
|
|
background-color: grey;
|
|
}
|
|
}
|
|
|
|
radiobutton.color-button {
|
|
> radio {
|
|
-gtk-icon-source: none;
|
|
margin-right: 0;
|
|
border: 1px solid rgba(black, 0.15);
|
|
border-radius: $circular_radius;
|
|
background-clip: border-box;
|
|
}
|
|
|
|
&:active > radio {
|
|
border: 1px solid rgba(black, 0.35);
|
|
}
|
|
}
|
|
|
|
window.background.csd {
|
|
> paned.horizontal {
|
|
> separator {
|
|
&:dir(ltr) { margin-left: -1px; }
|
|
&:dir(rtl) { margin-right: -1px; }
|
|
}
|
|
|
|
> scrolledwindow {
|
|
> viewport.frame {
|
|
> box.vertical treeview.view {
|
|
border-right: 1px solid $header_border;
|
|
color: $dark_sidebar_fg;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
border-right: 1px solid $header_border;
|
|
|
|
&:not(:hover):not(:selected) {
|
|
border-bottom-left-radius: $wm_radius;
|
|
background: none;
|
|
}
|
|
|
|
&:not(:selected):hover { background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05)); }
|
|
|
|
&:selected, &:selected:hover, &:selected:focus {
|
|
color: $fg_color;
|
|
background-color: $sidebar_theme_color;
|
|
&, label { color: $fg_color; }
|
|
}
|
|
|
|
image {
|
|
color: $dark_sidebar_fg;
|
|
&:selected { color: $selected_fg_color; }
|
|
&:disabled { color: rgba($dark_sidebar_fg, 0.45); }
|
|
}
|
|
|
|
&.trough {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> stack > stack {
|
|
> paned.horizontal {
|
|
> scrolledwindow > viewport.frame {
|
|
list {
|
|
border-bottom-left-radius: $wm_radius;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.unified > deck > grid > paned {
|
|
> separator { background-image: image($header_border); }
|
|
|
|
> .sidebar {
|
|
button.expander { color: $disabled_fg_color; }
|
|
|
|
actionbar button { @extend %flat_button; }
|
|
|
|
list {
|
|
padding: $container_padding;
|
|
|
|
> row.activatable {
|
|
border-radius: $bt_radius;
|
|
padding: ($container_padding - 2px) $container_padding * 1.5;
|
|
margin: 1px 0;
|
|
-gtk-icon-style: symbolic;
|
|
|
|
button {
|
|
@extend %sidebar_button;
|
|
}
|
|
|
|
levelbar {
|
|
block {
|
|
border: none;
|
|
|
|
&.low {
|
|
background-color: $warning_color;
|
|
}
|
|
|
|
&.high {
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
&.full {
|
|
background-color: $error_color;
|
|
}
|
|
|
|
&.empty {
|
|
background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
|
|
}
|
|
}
|
|
|
|
trough {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.maximized, &.tiled, &.fullscreen {
|
|
> stack > stack {
|
|
> paned.horizontal {
|
|
> scrolledwindow > viewport.frame {
|
|
list {
|
|
border-bottom-left-radius: $maximized_radius;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// keycap on menuitem
|
|
label.keycap {
|
|
min-height: 16px;
|
|
padding: 0 $container_padding;
|
|
border-radius: $bt_radius - 2px;
|
|
color: $hint_fg_color;
|
|
font-size: small;
|
|
}
|
|
|
|
// Dynamic-notebook
|
|
.dynamic-notebook {
|
|
> notebook {
|
|
> header {
|
|
border-color: $solid_borders_color;
|
|
|
|
@if $monterey == 'false' {
|
|
background-color: darken($header_bg, 10%);
|
|
} @else {
|
|
background-color: $header_bg;
|
|
}
|
|
|
|
> tabs > tab {
|
|
padding: 0 10px;
|
|
min-height: 0;
|
|
|
|
label, image {
|
|
@if $monterey == 'false' {
|
|
margin-bottom: -$container_padding / 2;
|
|
} @else {
|
|
margin-bottom: -$container_padding * 1.5;
|
|
}
|
|
}
|
|
|
|
> widget > grid > revealer > button.image-button.flat {
|
|
@if $monterey == 'false' {
|
|
margin-top: $container_padding;
|
|
margin-right: $container_padding;
|
|
margin-bottom: 0;
|
|
margin-left: 0;
|
|
} @else {
|
|
margin-top: $container_padding * 1.5;
|
|
margin-right: $container_padding;
|
|
margin-bottom: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
> box > button.flat {
|
|
margin: 0 $container_padding;
|
|
}
|
|
}
|
|
|
|
> stack {
|
|
border-bottom-right-radius: $wm_radius;
|
|
background-color: $base_color;
|
|
|
|
scrolledwindow.view.h2 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
treeview.view,
|
|
iconview.view {
|
|
&:not(:hover):not(:selected) { background: none; }
|
|
&:hover { background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05)); }
|
|
&:selected {
|
|
color: $fg_color;
|
|
background-color: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));
|
|
}
|
|
}
|
|
}
|
|
|
|
treeview.view {
|
|
> frame.cell {
|
|
> entry {
|
|
border-image-width: 0;
|
|
background-color: $bg_color;
|
|
|
|
&:focus { background-color: $base_color; }
|
|
}
|
|
|
|
> border { border: none; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
headerbar.titlebar {
|
|
> box.horizontal > entry.pathbar {
|
|
min-height: 20px;
|
|
padding: 2px 6px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
> button.flat.image-button.toggle:dir(ltr) {
|
|
min-height: 0;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
&:not(:checked):not(:active) {
|
|
background-clip: if($variant=='light', padding-box, padding-box);
|
|
}
|
|
|
|
@if $variant == 'light' {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
}
|
|
|
|
@include button(header-normal);
|
|
&:hover { @include button(header-hover); }
|
|
&:active { @include button(header-active); }
|
|
&:checked { @include button(header-checked); }
|
|
&:disabled { color: transparentize($header_fg, 0.4); }
|
|
&:backdrop { opacity: 0.7; background-image: none;}
|
|
|
|
+ button.flat.image-button.toggle { margin-right: if($variant=='light', -6px, -5px); }
|
|
}
|
|
|
|
> .linked.raised > button.toggle {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
// Hide Code header format-bar
|
|
> grid.linked.horizontal.format-bar {
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
border: none;
|
|
|
|
button.toggle {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:backdrop {
|
|
transition: $backdrop_transition;
|
|
background-image: none;
|
|
background-color: $header_bg_backdrop;
|
|
}
|
|
}
|
|
|
|
&.windowhandle > button {
|
|
-gtk-icon-style: symbolic;
|
|
}
|
|
}
|
|
|
|
// Gala
|
|
.gala-notification,
|
|
window.notification .draw-area {
|
|
border: 1px solid rgba(black, 0.75);
|
|
border-radius: $wm_radius;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
|
|
0 3px 8px 2px rgba(0, 0, 0, 0.1),
|
|
0 5px 5px -3px rgba(0, 0, 0, 0.4),
|
|
0 8px 5px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
|
background-image: _solid($osd_bg_color);
|
|
background-color: transparent;
|
|
|
|
&, .title, .label, image {
|
|
color: $osd_fg_color;
|
|
}
|
|
|
|
.urgent label.title {
|
|
color: $error_color;
|
|
}
|
|
}
|
|
|
|
// Nightlight warmth trough
|
|
scale.warmth trough {
|
|
min-height: 4px;
|
|
border-radius: 3px;
|
|
background-image: linear-gradient(to right, $suggested_color, $destructive_color);
|
|
box-shadow: inset 0 0 0 1px rgba(black, 0.25);
|
|
}
|
|
|
|
// Terminal
|
|
.terminal-window {
|
|
headerbar.titlebar.default-decoration {
|
|
background-color: $header_bg;
|
|
height: 28px;
|
|
border-bottom: 1px solid $header_border;
|
|
box-shadow: inset 0 1px $highlight_color;
|
|
|
|
&:backdrop {
|
|
transition: $backdrop_transition;
|
|
color: transparentize($header_fg, 0.3);
|
|
background-image: none;
|
|
background-color: $header_bg_backdrop;
|
|
border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
|
|
}
|
|
}
|
|
|
|
.search-bar {
|
|
background-color: $bg_color;
|
|
border-bottom: 1px solid $solid_borders_color;
|
|
}
|
|
}
|
|
|
|
// Popovers
|
|
popover.background {
|
|
menuitem.toggle {
|
|
margin: $container_padding $container_padding * 2;
|
|
}
|
|
}
|
|
|
|
// actionbar
|
|
actionbar.inline-toolbar {
|
|
border: none;
|
|
border-top: 1px solid $borders_color;
|
|
|
|
> revealer > box {
|
|
border-top: none;
|
|
}
|
|
|
|
button { // Reset buttons
|
|
border-radius: $bt_radius;
|
|
// border: 1px solid $dark_borders_color;
|
|
|
|
&, &:first-child {
|
|
border-right-style: solid;
|
|
}
|
|
|
|
&:last-child {
|
|
border-left-style: solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
actionbar.bottom-toolbar {
|
|
button { -gtk-icon-style: symbolic; }
|
|
}
|
|
|
|
.sidebar > treeview.view.source-list {
|
|
-gtk-icon-style: symbolic;
|
|
|
|
&:selected {
|
|
background-color: rgba($fg_color, 0.15);
|
|
color: $fg_color;
|
|
}
|
|
}
|