PIKApp/themes/Default/common.css

536 lines
12 KiB
CSS

/* A set of interface style definitions common to light and dark theme variants for PIKA 3.0
* The specific dark and light interface styles are defined in common-light.css, common-dark.css */
/* The specific dark and light colors are defined in pika-dark.css, pika.css */
/* Do not import this file directly from pika.css or pika-dark.css files, you will miss light/dark theme specific styles.
* Do import matching common-[dark,light].css */
/* Hint for debugging themes:
* first enable the GTK inspector with
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
* then (after restarting PIKA) call it up with ctrl+shift+i
* or from PIKA's UI: File > Debug > Start GtkInspector
*/
@import url("../System/pika.css");
* {
/* Default text color; needed for e.g. the Prefs dialog title area,
* which doesn't have any more specific way to style it.
*/
color: @fg-color;
}
*:disabled {
color: @disabled-fg-color;
}
#image-menubar, GtkImageMenuItem {
background-color: @bg-color;
color: @fg-color;
}
/* TreeViews, e.g. in a file picker or the Prefs dialog */
.view {
background-color: @extreme-bg-color;
color: @fg-color;
}
/* Selected items in a treeview list. */
.view:selected {
background-color: @extreme-selected-color;
color: @fg-color;
}
.view:disabled {
color: @disabled-fg-color;
}
/* Selected text in a treeview cell (e.g. layer name in edition mode). */
.view selection {
background-color: @fg-color;
color: @bg-color;
}
.view header button {
background-color: @bg-color;
border: 1px solid @stronger-border-color;
}
/* Define the mouse-over color for the path
* buttons in the various file dialogs.
*/
#pathbarbox button:hover {
background-color: @hover-color;
}
/* The main image window before it has an image in it,
* and the buttonbar along the bottoms of dialogs.
* Foreground color here is the text color, not the Wilber color.
* background-color and background here are ignored.
*/
PikaDisplayShell, PikaDock, .dialog-action-box, .dialog-vbox {
color: @dimmed-fg-color;
}
/* Foreground color for the big Wilber in the empty image window.
* Again, background-color and background here are ignored.
*/
#pika-canvas {
color: @dimmed-fg-color;
}
/* GtkTextView */
textview text, textview {
background-color: @extreme-bg-color;
color: @fg-color;
}
/* End GtkTextView */
combobox window.popup, combobox window {
background-image: none;
background-color: @widget-bg-color;
color: @fg-color;
}
combobox box, combobox box.linked, combobox button {
color: @fg-color;
background-image: none;
border-color: @stronger-border-color;
}
/* Remove "corners" around the combo boxes */
combobox box, combobox box.linked {
background-color: transparent;
}
combobox button {
background-color: @widget-bg-color;
}
/* Get rid of the outline around all tabs in the pikacolordialog */
PikaColorNotebook .frame {
border-color: @bg-color;
}
/* Color history buttons in the color chooser.
* The selector PikaColorHistory button gets the color buttons
* but not the + button; PikaColorSelection gets both.
*/
PikaColorSelection button {
background: @widget-bg-color;
border: 1px solid @stronger-border-color;
color: @fg-color;
}
PikaColorSelection button:hover {
background: @hover-color;
}
/* The tabs above the color selector */
notebook stack {
background-color: @bg-color;
}
notebook header {
background-color: @bg-color;
border-color: @strong-border-color;
}
/* Use this to make a border or padding around each tab */
notebook header tabs tab {
padding: 1px;
margin-left: 2px;
margin-right: 2px;
border: 1px solid @strong-border-color;
}
/* The underline for selected tabs */
notebook header tabs tab:checked {
background-color: @selected-color;
box-shadow: 0 -4px @stronger-border-color inset;
}
notebook header tabs tab:hover {
background-color: @hover-color;
}
/* Add margin to image tabs so the close button fits */
notebook header tabs tab > box > button
{
margin-right: 5px;
}
/* The Close button on image tabs */
.reorderable-page button {
background-color: transparent;
}
/* The background of many dialogs, e.g. Preferences and pikacolordialog */
.vertical {
color: @fg-color;
background-color: @bg-color;
background-image: none;
}
/* Background for many button bars and dialog titles.
* Also, unexpectedly, controls the prefs "Reload Current Theme" button content.
*
* Warning: setting a background-color here "breaks" the marks added by
* gtk_scale_add_mark() on a GtkScale. I'm still unsure why, but the conclusion
* is probably that it's a bad idea to set too broad background-color rules.
*/
.horizontal {
color: @fg-color;
}
/* Text buttons, e.g. the main buttons at the bottoms of dialogs,
* 0..100 and 0..255 at the top of pikacolordialog,
* where they're inside a PikaColorSelection
*/
.text-button {
color: @fg-color;
background-color: @widget-bg-color;
background-image: none;
font-weight: normal;
}
.text-button:hover {
background-color: @hover-color;
}
/* .flat covers the tool buttons and the buttons at the bottom
* of the Toolbox window.
*/
toolbutton button.flat {
background-color: @bg-color;
color: @fg-color;
}
toolbutton button.flat:hover {
background: @selected-color;
}
toolbutton button.flat:checked,
toolbutton button.flat:checked:hover {
background: @selected-color;
}
/* Visual indication of clicking an already
* selected button
*/
toolbutton button.flat:checked:active:hover {
background-color: @hover-color;
border-color: @hover-color;
}
/* Color the toolbox Wilber icon */
PikaDock frame:first-child:not(label) {
color: @dimmed-fg-color;
}
/* Fix an issue with a few labels in the toolbox
* having their colors overwritten with Wilber's
*/
PikaDock frame:first-child label {
color: @fg-color;
}
scrollbar {
background-color: @bg-color;
}
/*
Worth trying for always-visible scrollbar:
https://stackoverflow.com/questions/52414202/gtkscrolledwindow-how-to-always-show-the-overlay-scrollbar
Doesn't seem to work here, though.
*/
scrollbar trough {
background: @scrollbar-trough-color;
}
scrollbar slider {
background: @scrollbar-slider-color;
border: 2px solid @border-color;
}
/* Removes black border around scrolled windows */
scrolledwindow viewport grid, scrolledwindow viewport box {
border-radius: 1px;
border: 0px solid @bg-color;
}
PikaRuler {
background-color: @ruler-color;
}
entry {
background-color: @extreme-bg-color;
color: @fg-color;
}
entry selection {
background-color: @fg-color;
color: @bg-color;
}
paned separator {
color: @border-color;
background-image: none;
background-color: @border-color;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
padding: 3px;
}
paned menu separator {
padding: 0px;
}
.view button {
background-color: @bg-color;
border-color: @border-color;
color: @fg-color;
}
button {
background-image: none;
background-color: @bg-color;
text-shadow: 0 0;
}
/* Handle both buttons drawn directly and drawn with an icon. */
button:disabled, button:disabled image {
color: @disabled-button-color;
}
/* E.g. the currently active action of a dialog will slightly stand out so that
* people know what action is activated when they will just hit Enter.
*/
button.default {
border: 1px solid shade(@fg-color, 0.7);
}
/* This is the default active action, the somehow "suggested" action. Usually it
* means this is either the expected next step action (e.g. activating a
* filter), or else the less destructive action (e.g. when closing an unsaved
* image, the default is "Cancel").
*/
button.suggested-action {
border: 1px dotted shade(@fg-color, 0.5);
}
button:checked {
background: @selected-color;
}
/* Spinbuttons: there are two kinds:
* spinbutton, spinbutton button
* e.g. the "width" field in the New Image dialog.
* spinbutton button.down, spinbutton button.up can be styled separately,
* as can spinbutton entry.
*
* PikaSpinScale also has button.up, button.down and entry under it,
* plus PikaSpinScale entry progress.
*
* Mostly the inherited values seem pretty good for both of these,
* so they're not overridden.
*/
spinbutton, entry {
/* Borders are a bit darker, but not too dark. */
border-color: @strong-border-color;
}
/* Styling for the +/- buttons */
spinbutton button.up, spinbutton button.down {
background-color: @bg-color;
}
PikaSpinScale entry progress {
background-color: @extreme-selected-color;
border-width: 0px;
border-radius: 3px;
}
/* Checkboxes */
checkbutton, checkbutton.text-button, radiobutton, checkbutton label {
color: @fg-color;
background-color: @bg-color;
}
checkbutton:hover, checkbutton.text-button:hover, checkbutton:hover label, radiobutton:hover, checkbutton label:hover {
color: @fg-color;
background-color: @hover-color;
}
checkbutton check, radiobutton radio, treeview.view check {
background-image: none;
background-color: @extreme-bg-color;
border: 1px solid @stronger-border-color;
}
checkbutton check:checked {
color: @fg-color;
}
checkbutton:checked label, radiobutton:checked label {
font-weight: bold;
}
/* Some plugins have radio buttons, e.g. Fractal Explorer */
radio {
background-image: none;
background-color: @extreme-bg-color;
border: 1px solid @stronger-border-color;
color: @fg-color;
}
/* Removes "blurred" effect from tooltip label */
tooltip {
text-shadow: 0 0;
}
/* The border around a tooltip */
.background {
background-color: @bg-color;
border-color: @border-color;
border-width: 1px;
}
/* The border around a frame */
border {
border: 0px;
}
/* The border around PikaOffsetArea frame in resize dialogs */
.pika-offset-area-frame {
border: solid 2px @stronger-border-color;
background-color: @widget-bg-color;
}
/* For dropdown menus (e.g. "px" when creating a new image */
#gtk-combobox-popup-menu {
background-color: @bg-color;
color: @fg-color;
}
/* Top menu items */
/* give the menu bar a color, fix for the default color being too dark */
menubar {
background-color: @bg-color;
}
/* The top menu item itself: File, Edit ... */
menuitem menuitem {
color: @fg-color;
background: @extreme-bg-color;
}
/* A top (File, Edit) menubar item when its menu is expanded. */
menubar > menuitem:hover {
color: @fg-color;
background: @extreme-selected-color;
}
menuitem *:hover {
color: @fg-color;
background: @extreme-selected-color;
}
menuitem check {
border-color: @fg-color;
}
/* "Add Tab" menu in dockable dialog */
menu {
background-color: @bg-color;
}
/* Fixes issue with top menu label not changing
* colors when highlighted
*/
menu box {
background-color: transparent;
}
/* In some cases, the GtkSeparatorMenuItem-s get very ugly top/bottom margin
* with a different background color. Let's get rid of it.
*/
menu separator {
background-color: @stronger-border-color;
margin: 0;
}
/* Defines the border around the Save Image actionbar options */
actionbar revealer box {
border-width: 0px;
border-top-width: 1px;
border-top-color: @strong-border-color;
}
/* Sidebar in File > Open */
/* The background to either side of the directory buttons.
* The color of the buttons themselves comes from somewhere else.
*/
.sidebar-row, .sidebar-row * {
background-color: @widget-bg-color;
}
.sidebar-row:selected, .sidebar-row:selected * {
background-color: @selected-color;
}
.sidebar-row:hover, .sidebar-row:hover * {
background-color: @bg-color;
}
/* Header bar */
headerbar {
background-color: @bg-color;
background-image: none;
}
headerbar:backdrop * {
color: @disabled-fg-color;
}
/* GtkListBox widgets */
list {
background-color: @widget-bg-color;
}
/* GtkSwitch buttons */
switch {
background-color: @bg-color;
border: 1px solid @stronger-border-color;
}
/* The switch button is hard to understand without color.
* Let's indicate the checked state with foreground color.
*/
switch:checked {
background-color: @fg-color;
}
/* This prevents the 1/0 labels from appearing inside the switch slider */
switch image {
color: transparent;
}
/* XXX: should this actually go in the Compact theme instead?
* I find the headerbar on GNOME default theme (Adwaita) to be kinda huge. But
* maybe the default theme should not try and override this?
*/
headerbar {
min-height: 0px
}