By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.
Based on Material Design guidelines, this tries not to change the background colors when widgets are at the same elevation. For example, sidebar-specific and view-specific background colors no longer exist; they will have different background colors depending on the elevation.
To make it easier to achieve, this does the following:
Treat frames as cards and add background-color to them.
Remove background-color from elevation-less widgets as much as possible.
roundabout,
created on Saturday, 6 March 2021, 23:28:30 (1615073310),
received on Sunday, 11 May 2025, 13:22:56 (1746969776)
Author identity: nana-4 <hnmaigo@gmail.com>
abc8df7210abeb6f635103da38299bc9ff606a65
// FIXME this is really an API
/* content view background such as thumbnails view in Photos or Boxes */
@define-color content_view_bg #{"" + $base};
@define-color content_view_bg #{"" + $background};
/* Very contrasty background for text views (@theme_text_color foreground) */
@define-color text_view_bg #{"" + $base};
@define-color text_view_bg #{"" + $background};
/* placeholder for entries */
// NOTE: @placeholder_text_color doesn't allow translucent colors.
}
.view {
background-color: $base;
color: $on-surface;
// background-color: $background;
// color: $on-surface;
&:hover {
box-shadow: inset 0 0 0 9999px overlay("hover", $on-surface);
textview {
// FIXME: we need to override background-color to ensure text rendering
text {
background-color: $base;
background-color: $background;
caret-color: $primary;
}
border {
background-color: $base-alt;
// background-color: $background;
color: hint($on-surface); // FIXME: not working
}
}
assistant {
.sidebar {
padding: 4px 0;
// background-color: $base;
}
.sidebar label {
toolbar {
-GtkWidget-window-dragging: true;
padding: 2px;
background-color: $background;
button {
@extend %button-flat;
// on OSD
.osd & {
background-color: transparent;
}
// stand-alone OSD toolbars
border-style: solid;
border-width: 0 0 1px;
border-color: divider($on-surface);
background-color: $background;
}
searchbar > revealer > box {
border-left-color: stroke($on-surface); // this is actually the tree lines color,
border-top-color: divider($on-surface); // while this is the grid lines color, better then nothing
// FIXME: Avoid transparency background-color being slightly darker
&:selected {
background-color: $base;
background-image: image($overlay-selected);
}
// to avoid borders being overridden by the previously set props
rubberband {
@extend %rubberband;
&,
&:disabled {
background-color: $base;
background-color: transparent;
}
&:last-child {
border-color: divider($on-surface);
border-radius: 0;
box-shadow: none;
background-color: $base;
background-clip: border-box;
background-color: $surface;
color: $primary;
}
background-color: transparent;
}
// FIXME: Use the popover color instead of transparent as a workaround for .view
list,
.view:not(:selected),
toolbar {
background-color: $surface;
}
&.touch-selection,
&.magnifier,
&.osd {
*/
notebook {
frame > paned > & > header,
&.frame > header {
background-color: $base;
}
&:focus tab:checked {
box-shadow: inset 0 0 0 9999px rgba($primary, .12);
}
> header {
border-width: 1px;
border-color: divider($on-surface);
background-color: $background;
&.top {
border-bottom-style: solid;
}
}
}
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
background-color: $base;
}
}
/**
}
transition: $transition;
background-color: $base;
// background-color: $background;
background-clip: padding-box;
// scrollbar border
border-radius: 0;
box-shadow: none;
background-clip: padding-box;
background-color: $base;
&.flat {
border-style: none;
background-color: transparent;
}
}
// for backward compatibility
frame.flat > border {
border-style: none;
background-color: transparent;
}
actionbar > revealer > box {
padding: $container-padding;
border-top: 1px solid divider($on-surface);
background-color: $base;
// background-color: $base;
button:not(.suggested-action):not(.destructive-action) {
@extend %button-flat;
scrolledwindow {
viewport.frame { // avoid double borders when viewport inside scrolled window
border-style: none;
background-color: transparent;
}
// This is used when content is touch-dragged past boundaries.
border-style: solid none none solid;
border-width: 1px;
border-color: divider($on-surface);
background-color: $base;
// background-color: $background;
&:dir(rtl) {
border-style: solid solid none none;
list {
border-color: divider($on-surface);
background-color: $base;
// background-color: $base;
row {
padding: 2px;
}
}
&.frame,
&.frame {
border-style: none;
}
border {
border-style: none;
background-color: transparent;
}
}
padding: 1px;
border: 1px solid divider($on-surface);
background-clip: padding-box;
background-color: $base;
color: $on-surface;
&:disabled {
#pathbarbox {
border-bottom: 1px solid divider($on-surface);
background-color: $background;
// background-color: $background;
// The new folder button
> stack > box > button {
.sidebar {
border-style: none;
background-color: $base-alt;
background-color: transparent;
&:not(separator) {
@at-root %sidebar_left,
}
list {
background-color: transparent;
// background-color: transparent;
}
paned & {
list {
padding: 4px;
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
// background-color: $background; // This should not be necessary, but the parent stacksidebar ignores background-color.
}
row {
placessidebar.sidebar {
> viewport.frame {
border-style: none;
background-color: transparent;
}
list {
&.wide {
min-width: 6px;
min-height: 6px;
background-color: $background;
// background-color: $background;
background-image: image(divider($on-surface)), image(divider($on-surface));
background-size: 1px 1px, 1px 1px;
}
&.info > revealer > box,
&.question > revealer > box {
border-bottom: 1px solid divider($on-surface);
background-color: $base;
// background-color: $base;
button {
@extend %button-flat;
// content view (grid/list)
.content-view {
background-color: $background;
// background-color: $background;
&:hover {
// -gtk-icon-effect: highlight;
border {
border: none;
background-color: transparent;
}
list {
background-color: transparent;
// background-color: transparent;
}
row {
padding: 0;
}
.sidebar,
// .sidebar,
scrollbar,
entry.search {
background-color: transparent;
background-color: $surface;
list {
background-color: transparent;
// background-color: transparent;
}
// remove extra space between box and .raven-header.bottom
list {
padding: 4px 0;
background-color: transparent;
// background-color: transparent;
.dim-label {
color: inherit;
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
background-color: $base;
// background-color: $background;
}
.nautilus-canvas-item {
.search-information {
padding: 2px;
border-bottom: 1px solid divider($on-surface);
background-color: $base;
color: $on-surface;
}
.documents-entry-tag {
// Ensure paned separator rendering. See issue #84 for details.
.nautilus-window paned > separator {
background-color: $base-alt;
background-color: $background;
}
}
.gedit-document-panel {
background-color: $base-alt;
// Try to look as the notebook tab close button
row button.flat {
margin-top: 8px;
.tweak-categories {
// padding: 4px 0;
// background-color: shade(@theme_bg_color, 0.99);
background-image: image($base-alt);
background-image: image($background);
separator {
@extend %hide_separators;
row#workspaces-only-on-primary {
padding: 0;
border: 1px solid divider($on-surface);
background-clip: padding-box;
background-image: image($base);
row:not(:last-child) {
border-bottom: 1px solid divider($on-surface);
entry.preferences-search {
border-bottom: 1px solid divider($on-surface);
box-shadow: none;
background-color: $base;
background-color: transparent;
// doesn't work properly
&:dir(ltr) {
preferences stacksidebar.sidebar {
list {
background-color: $base-alt;
// background-color: $background;
}
&:dir(ltr),
.documents-scrolledwin.frame {
border-style: none;
background-color: transparent;
frame.content-view > border {
border-style: none;
background-color: transparent;
}
}
}
overlay grid.horizontal > revealer > scrolledwindow.frame {
border-style: none;
background-color: transparent;
&:dir(ltr) {
border-style: none none none solid;
border-left-style: solid;
}
&:dir(rtl) {
border-style: none solid none none;
border-right-style: solid;
}
}
.side-panel .view {
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
background-image: image($base-alt);
background-image: image($background);
&:hover {
background-image: image(mix($on-surface, $base-alt, percentage(.08)));
background-image: image(mix($on-surface, $background, percentage(.08)));
}
}
box.dialog-vbox scrolledwindow.related {
border: 1px solid divider($on-surface);
background-clip: padding-box;
background-color: $base;
}
list.categories {
background-image: image($base-alt);
background-image: image($background);
}
/**
list.content {
border: 1px solid divider($on-surface);
background-clip: padding-box;
background-color: $base;
&,
list {
frame > border {
border-style: none;
background-color: transparent;
}
calendar {
frame > border {
border-style: none;
background-color: transparent;
}
}
.frame {
border-style: none;
background-color: transparent;
}
.apps-list {
// .caja-side-pane notebook textview.view text,
.caja-side-pane notebook viewport.frame,
.caja-side-pane notebook widget .vertical {
background-color: $base;
// background-color: $base;
}
// treeview rows
.frame {
border-style: none;
background-color: transparent;
}
}
.caja-notebook frame > border {
border-style: none;
background-color: transparent;
}
#caja-extra-view-widget {
border-bottom: 1px solid divider($on-surface);
background-color: $base;
// background-color: $base;
> box > box > label {
font-weight: bold;
frame {
> border {
border-style: none;
background-color: transparent;
}
button.flat {
.frame {
border-style: none;
background-color: transparent;
}
notebook.frame {
.atril-window paned.horizontal box.vertical {
.frame {
border-style: none;
background-color: transparent;
}
notebook .frame {
frame > border {
border-style: none;
background-color: transparent;
}
button {
// this should be fixed by the upstream
notebook.frame {
border-style: none;
background-color: transparent;
}
}
#Canvas_and_Dock {
frame > border {
border: none;
background-color: transparent;
}
// each canvases' titlebar
scrolledwindow.frame {
border-style: none;
background-color: transparent;
.view:not(:selected) {
background-color: transparent;
// background-color: transparent;
}
}
// Inactive F3 pane shading
.nemo-inactive-pane .view:not(:selected) {
background-color: $base-alt;
// background-color: $background;
}
// Rename entry styling in the icon view.
// For Places Sidebar diskfull indicators
.places-treeview {
-NemoPlacesTreeView-disk-full-bg-color: opacify(disabled-stroke($on-surface), $base-alt); // Can't use translucent colors
-NemoPlacesTreeView-disk-full-bg-color: opacify(disabled-stroke($on-surface), $background); // Can't use translucent colors
-NemoPlacesTreeView-disk-full-fg-color: $primary;
-NemoPlacesTreeView-disk-full-bar-width: 2px;
-NemoPlacesTreeView-disk-full-bar-radius: 0;
*/
.XfceHeading {
background-color: $base;
// background-color: $base;
}
/**
frame > border {
border-style: none;
background-color: transparent;
}
progressbar {
XfdesktopIconView.view {
border-radius: $corner-radius;
background-color: transparent;
// background-color: transparent;
color: $on-dark;
text-shadow: $text-shadow;
.shortcuts-pane.frame,
.standard-view.frame {
border-width: 0;
background-color: transparent;
}
.sidebar .view:not(:selected) {
background-color: transparent;
// background-color: transparent;
}
statusbar {