metabrush/assets/theme.css

* {
  all: unset;
}

/* Colors parsed by application */
.bg {
  background-color: rgb(41, 40, 40);
}
.active {
  background-color: rgb(72,70,61);
}
.highlight {
  color: rgb(234,223,204);
}
.cursor {
  color:rgb(234,223,204);
}
.cursorStroke {
  color: black;
}
.plain {
  color: rgb(212, 190, 152);
}
.base {
  color: rgb(234, 223, 204);
}
.splash {
  color: rgb(245, 136, 27);
}
.pathPoint {
  color: rgb(129, 131, 241);
}
.pathPointStroke {
  color: black;
}
.controlPoint {
  color: rgb(161,221,233);
}
.controlPointStroke {
  color: black;
}
.path {
  color: rgb(184,80,80);
}
.brush {
  color: rgb(235,118,219);
}
.brushStroke {
  color: rgba(235,118,219,0.66);
}
.brushCenter {
  color: rgb(0,0,0);
}
.pointHover {
  color: rgb(225,225,225);
}
.pointSelected {
  color: rgb(252,237,120);
}
.viewport {
  background-color: rgb(236, 223, 210);
  -GtkWidget-window-dragging: false;
  min-width: 120px;
  min-height: 90px;
}
.viewportScrollbar {
  background-color: rgba(45, 39, 39, 0.66);
  margin: 4px;
  min-width: 8px;
  min-height: 8px;
}
.tabScrollbar {
  background-color: rgba(48, 45, 38, 0.66);
}
.magnifier {
  color: rgb(236, 223, 210);
}
.glass {
  color: rgba(156, 231, 255, 0.5);
}
.selected {
  color: rgba(161,201,236,0.5)
}
.selectedOutline {
  color: rgb(74,150,218);
}


/* Proper CSS styling */

/* GTK tooltips */
tooltip {
  color: rgb(212, 190, 152);
  background-color: rgb(41, 40, 40);
  border: 1px solid rgb(28,25,25);
}

.window, .dialog {
  -GtkWidget-window-dragging: true;
}

/* Basic text colour */

/* Basic text font */
.text {
  font-family: "Lato", "Roboto", "Helvetica", sans-serif;
}

/* Monospace font */
.monospace {
  font-family: "Fira Code", "Inconsolata", "Courier", "Courier New", monospace;
}

/* High-constrast text colour */
.contrast {
  color: rgb(247, 244, 239);
}

/* Active (highlighting) colour */
.highlight {
  color: #eadfcc;
}

/* Logo area */
.logo {
  margin-left: 4px;
  min-width: 28px;
}

/* Logo base colour */
.logo_base {
  color: rgb(234, 223, 204);
}

/* Logo highlight colour */
.logo_highlight {
  color: rgb(245, 136, 27);
}


/* Rulers */
.ruler {
  background-color: rgb(237, 226, 154);
  min-width:  16px;
  min-height: 16px;
  background-size: 16px 16px;  
}



/* Cursor colour */
.cursor {
  color: rgb(247, 244, 239);
}

/* Bézier path point colour */
.point {
  color: rgb(129, 131, 241);
}

/* Bézier control point colour */
.control {
  color: rgb(161, 221, 233);
}

/* Title bar */
.titleBar {
  min-height: 24px;
  font-size: 12px;
}

/*
.titleBar > * :hover {
  background-color: rgb(72,70,61);
}
*/

.title {
  border-top: 2px solid rgb(41, 40, 40);
}

.dialog {
  border: 1px solid black;
  border-radius: 6px;
}

.dialogButton {
  background-color: rgb(72,70,61);
  border: 1px solid black;
  border-radius: 4px;
  margin: 6px;
  padding: 2px 10px 2px 10px;
}

.dialogButton:hover {
  border-color:rgb(212, 190, 152);
}

.dialogButton:active, .dialogButton:checked {
  color: rgb(72,70,61);
  border-color: black;
  background-color: #eadfcc;
}


.menuBar {
  padding-left: 4px;
}

.menuItem {
  color: rgba(212, 190, 152,0.5);
  background-color: rgb(41, 40, 40);
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 0px;
  border-top: 2px solid rgb(41, 40, 40);
}

/* Menu item hover effect (workaround) */
.menuItem:selected {
  border-color: rgb(72,70,61);
  color: rgb(212, 190, 152);
}

/* Styling for active menu item */
.menuItem:active, .menuItem:checked, .menuItem:hover {
  border-color: rgb(234,223,204);
  background-color: rgb(72,70,61);
  color: rgb(212, 190, 152);
}

.menuItem > * > * {
  box-shadow: 2px 4px 3px -1px rgba(28,25,25,0.5);
  border: 1px solid rgb(28,25,25);
  border-top: 1px solid rgb(72,70,61);
  color: rgb(212, 190, 152);
}

.submenuItem {
  color: rgb(212, 190, 152);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(41, 40, 40);
  border-left: 2px solid rgb(41, 40, 40);
}

.submenuItem:hover{
  background-color: rgb(72,70,61);
}

.submenuItem:disabled {
  color: rgb(149,149,149);
}

.submenuSeparator {
  background-color: rgb(28,25,25);
  padding-top: 1px;
}

.submenuItem:hover {
  border-color: rgb(234,223,204);
}

.accelLabel {
  padding: 2px 8px 2px 0px;
}

.accelLabel accelerator {
  font-size: 10px;
  color: rgb(112, 109, 96);
  padding: 0px;
}

.windowIcon {
  min-width: 24px;
}

.windowIcon:hover {
  background-color: rgb(34,131,186);
}

.windowIcon:active, .windowIcon:checked {
  background-color: rgb(23,108,156);
}

.closeWindowIcon:hover {
  background-color: rgb(181,43,43);
}

.closeWindowIcon:active, .closeWindowIcon:checked {
  background-color: rgb(160,37,37);
}

/* Tool bar */
.toolBar {
  min-width: 32px;
  margin-top: 28px;
}

.toolBarSeparator {
  min-height: 2px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: rgb(72,70,61);
}

.toolItem {
  border-left: 2px solid rgb(41, 40, 40);
  min-height: 40px;
  min-width: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 3px;
  padding-right: 3px;
}

.toolItem:hover {
  border-color: rgb(72,70,61);
}

.toolItem:active, .toolItem:checked {
  border-color: rgb(234,223,204);
  background-color: rgb(72,70,61);
}

/* File bar */
.fileBar {
  min-height: 24px;
  font-size: 12px;
  margin-top: 2px;
}

.fileBarTab {
  border-top: 2px solid rgb(41, 40, 40);
}

.fileBarTab:hover {
  border-color: rgb(72,70,61);
}

.fileBarTab:active, .fileBarTab:checked {
  border-color: rgb(234,223,204);
  background-color: rgb(72,70,61);
}

.fileBarTabButton {
  padding-left: 8px;
  padding-right: 3px;
  margin: 0px;
}

.fileBarCloseButton {
  padding-left: 1px;
  padding-right: 5px;
  margin: 0px;
  color: rgba(212, 190, 152,0.2);
}

.fileBarCloseButton:hover {
  color: rgba(213,19,36,0.9);
}

.newFileButton {
  color: rgb(72,70,61);
  font-size: 16px;
  font-weight: bold;
  font-family: "Sans";
  padding: 0px 5px 0px 4px;
  margin: 3px 0px 3px 0px;
  border-left: 1px solid rgb(41, 40, 40);
}

.newFileButton:hover, .newFileButton:active, .newFileButton:checked {
  color: rgb(160,225,54);
}

.newFileButton:active, .newFileButton:checked {
  border-color: rgb(160,225,54);
}


/* Panels */
.panels {
  min-width: 120px;
  font-size: 12px;
}

.panels tab {
  padding-left: 6px;
  padding-right: 6px;
  border-top: 2px solid rgb(41, 40, 40);
}

.panels tab:hover {
  border-color: rgb(72,70,61);
}

.panels tab:active, .panels tab:checked {
  background-color: rgb(72,70,61);
  border-color: rgb(234,223,204);
}

.panel {
  background-color: rgb(72,70,61);
}

/* Info bar */
.infoBar {
  min-height: 40px;
  font-size:  10px;
  -GtkWidget-window-dragging: true;
}