metabrush/assets/theme.css

/*
.metabrush * {
  all: unset;
}
*/

.metabrush .toggle, .metabrush .dialogButton, .metabrush .titlebar,
.metabrush .windowIcon, .metabrush .strokeButton, .metabrush .fileBarCloseButton,
.metabrush .newFileButton, .metabrush .header,
.metabrush .paned, .metabrush .panel, .metabrush .tabs, .metabrush .frame {
  all: unset;
}

.metabrush windowcontrols {
  all: unset;
}

.metabrush .reorderable-page {
  all: unset;
}

.metabrush .headerMenu * {
  all: unset;
}

.metabrush .frame > * {
  all: unset;
}

.metabrush .notebook {
  all: unset;
}

@import url("colours.css");

/* Colours parsed by application */
.bg {
  background-color: @bg;
  color: @bg;
}
.active {
  background-color: @active;
  color: @active;
}
.close {
  color: @closeButtonHover;
}
.highlight {
  color: @highlight;
}
.cursor {
  color: @cursor;
}
.cursorStroke {
  color: @cursorStroke;
}
.cursorIndicator {
  color: @cursorIndicator;
}
.plain {
  color: @plain;
}
.base {
  color: @base;
}
.splash {
  color: @splash;
}
.pathPoint {
  color: @pathPoint;
}
.pathPointStroke {
  color: @pathPointStroke;
}
.controlPoint {
  color: @controlPoint;
}
.controlPointLine {
  color: @controlPointLine;
}
.controlPointStroke {
  color: @controlPointStroke;
}
.path {
  color: @path;
}
.brush {
  color: @brush;
}
.brushStroke {
  color: @brushStroke;
}
.brushCenter {
  color: @brushCenter;
}
.pointHover {
  color: @pointHover;
}
.pointSelected {
  color: @pointSelected;
}
.metabrush .viewport {
  background-color: @base;
  color: @base;
  min-width: 120px;
  min-height: 90px;
}
.metabrush .viewportScrollbar {
  background-color: @scrollbar;
  color: @scrollbar;
  margin: 4px;
  min-width: 8px;
  min-height: 8px;
}
.metabrush .tabScrollbar {
  background-color: @scrollbar;
  color: @scrollbar;
}
.metabrush .ruler {
  background-color: @ruler;
  color: @ruler;
  min-width:  16px;
  min-height: 16px;
  background-size: 16px 16px;
}
.rulerTick {
  color: @rulerTick;
}
.guide {
  color: @guide;
}
.magnifier {
  color: @magnifier;
}
.glass {
  color: @glass;
}
.selected {
  color: @selected;
}
.selectedOutline {
  color: @selectedOutline;
}
.brushWidget {
  color: @brushWidget;
}
.brushWidgetHover {
  color: @brushWidgetHover;
}

/* Proper CSS styling */

/* GTK tooltips */
tooltip {
  color: @plain;
  background-color: @bg;
  border: 1px solid @border;
}


.metabrush .window, .metabrush .dialog {
  border-radius: 0px;
  border-color: @border;
  box-shadow:
    0px 3px 9px 1px rgba(0,0,0,0),
    0px 2px 6px 2px rgba(0,0,0,0.2),
    0px 0px 0px 1px rgba(0,0,0,0.18);
}


/* Basic text colour */

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

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

/* High-constrast text colour */
.metabrush .contrast {
  color: @contrast;
}

/* Active (highlighting) colour */
.metabrush .highlight {
  color: @highlight;
}

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

/* Logo base colour */
.metabrush .logo_base {
  color: @highlight;
}

/* Logo highlight colour */
.metabrush .logo_highlight {
  color: @splash;
}


/* Rulers */
.metabrush .leftRuler {
  border-right: 1px solid @rulerBorder;
  min-width: 16px;
}

.metabrush .topRuler {
  border-bottom: 1px solid @rulerBorder;
  min-height: 16px;
}

.metabrush .rulerCorner {
  min-width: 8px;
  min-height: 8px;
  border-bottom: 1px solid @rulerBorder;
  border-right: 1px solid @rulerBorder;
}

/* Cursor colour */
.metabrush .cursor {
  color: @cursor;
}

/* Bézier path point colour */
.metabrush .point {
  color: @pathPoint;
}

/* Bézier control point colour */
.metabrush .control {
  color: @controlPoint;
}

/* Title bar */
.metabrush .titleBar {
  min-height: 24px;
  font-size: 12px;
  background-color: @bg;
}

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

.metabrush .title {
  border-top: 2px solid @bg;
}

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

/* dialog button */
.metabrush .dialogButton {
  background-color: @active;
  border: 1px solid @border;
  border-radius: 4px;
  margin: 6px;
  padding: 2px 10px 2px 10px;
}

.metabrush .dialogButton:hover {
  border-color: @plain;
}

.metabrush .dialogButton:active, .metabrush .dialogButton:checked {
  color: @active;
  border-color: @border;
  background-color: @highlight;
}

/* Menu bar */

.metabrush .headerMenu label {
  color:@plain;
}

.metabrush .headerMenu :disabled {
  color: @disabled;
}

.metabrush .headerMenu :focus-within {
  border-color: @plain;
}

.metabrush .headerMenu :focus{
  border-color: @active;
  background-color: @bg;
}

.metabrush .headerMenu item {
  padding-left: 8px;
  padding-right: 8px;
  color: @plain;
  border-top: 2px solid @bg;
}

.metabrush .headerMenu item > * :hover {
  border-color: @plain;
  background-color: @active;
}

/* Top-level menu items */
/* GTK documentation:
"The visible part of the popover can have a shadow.
To specify it in CSS, set the box-shadow of the contents node."
*/
.metabrush .headerMenu item > popover > contents {
  box-shadow: 2px 3px 3px rgba(0,0,0,0.5)
           , -2px 3px 3px rgba(0,0,0,0.5)
           ,  0px 4px 3px rgba(0,0,0,0.5);
}

/* Look at the CSS with the GTK inspector to figure this out... */
.metabrush .headerMenu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton,
.metabrush .headerMenu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton
 {
  background-color: @bg;
  color: @active;
  border-top: 0px;
  border-left: 2px solid @bg;
  padding: 6px 10px 6px 10px;
}

.metabrush .headerMenu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator,
.metabrush .headerMenu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator :hover {
  background-color: @active;
  padding: 1px 0px 0px 1px;
}

.metabrush .headerMenu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton > accelerator,
.metabrush .headerMenu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton > accelerator {
  font-size: 10px;
  color: @shortcutKey;
  padding-left: 10px;
}

.metabrush .listViewPane {
  font-size: 12px;
}

.metabrush .listViewPane :selected {
  background-color: unset;
  font-weight: bold;
  color: black;
}

/* Stroke popover menu */
/* TODO: refactor with menu */
.metabrush .strokeMenu > * {
  background-color: @bg;
}

.metabrush .strokeMenu contents, .metabrush .strokeMenu arrow {
  border: unset;
  border-radius: 0px;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
}

.metabrush .strokeMenu .flat {
  border-left: 2px solid @bg;
  border-top: 0px;
}

.metabrush .strokeMenu :selected {
  color: @plain;
  background-color: @active;
  font-weight: normal;
  border-left: 2px solid @plain;
  border-radius: 0px;
}

.metabrush .strokeMenu separator {
  background-color: @contrast;
  margin: 0px;
}

.metabrush .strokeMenu .separator {
  color: black;
  background-color: @contrast;
  font-weight: normal;
  opacity: 1;
  margin: 4px 10px 4px 10px;
  padding: 0px 6px 0px 6px;
  border: 0px solid black;
  border-radius: 2px;
}

.metabrush .windowIcon {
  min-width: 24px;
}

.metabrush .windowIcon:hover {
  background-color: @windowButtonHover;
}

.metabrush .windowIcon:active, .metabrush .windowIcon:checked {
  background-color: @windowButtonActive;
}

.metabrush .closeWindowIcon:hover {
  background-color: @closeButtonHover;
}

.metabrush .closeWindowIcon:active, .metabrush .closeWindowIcon:checked {
  background-color: @closeButtonActive;
}

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

.metabrush .toolBarSeparator {
  min-height: 2px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: @active;
}

.metabrush .toolItem {
  border-left: 2px solid @bg;
  min-height: 40px;
  min-width: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 3px;
  padding-right: 3px;
}

.metabrush .toolItem:hover {
  border-color: @active;
}

.metabrush .toolItem:active, .metabrush .toolItem:checked {
  border-color: @base;
  background-color: @active;
}

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

.metabrush .fileBarTab {
  border-top: 2px solid @bg;
}


.metabrush .fileBarTab:hover {
  border-color: @active;
}

.metabrush .activeTab {
  border-color: @base;
  background-color: @active;
  /* font-weight: bold; */
}

.metabrush .activeTab:hover {
  border-color: @base;
}

.metabrush .fileBarTab label {
  margin-left: 10px;
  margin-top: 2px;
  color: @plain;
}

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

.metabrush .fileBarCloseButton {
  min-width: 10px;
  min-height: 22px;
  padding-left: 1px;
  padding-right: 5px;
  margin: 0px;
  color: @plain;
}

.metabrush .fileBarCloseButton:hover {
  color: @closeButtonHover;
}

.metabrush .fileBarCloseButton:active, .metabrush .fileBarCloseButton:checked {
  color: @closeButtonActive;
}

.metabrush .newFileButton {
  color: @newFileButton;
  font-size: 16px;
  font-weight: bold;
  font-family: "Sans";
  padding: 0px 5px 0px 4px;
  margin: 3px 0px 3px 0px;
  border-left: 1px solid @bg;
}

.metabrush .newFileButton:hover, .metabrush .newFileButton:active, .metabrush newFileButton:checked {
  color: @newFileButtonActive;
}

.metabrush .newFileButton:active, .metabrush .newFileButton:checked {
  border-color: @newFileButtonActive;
}


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

.metabrush .panels tab {
  padding-left: 6px;
  padding-right: 6px;
  border-top: 2px solid @bg;
}

.metabrush .panels tab:hover {
  border-color: @active;
}

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

.metabrush .panel {
  background-color: @active;
  min-height: 20px;
}

/* Info bar */
.metabrush .infoBar {
  min-height: 40px;
  font-size:  10px;
}

.metabrush .infoBarInfo {
  margin-left: -4px;
  padding-right: 16px;
}

/* Stroke hierarchy layers */

.metabrush row {
  border-top: 0px;
  border-bottom: 0px;
  margin-top: -2px;
  margin-bottom: -2px;
}

/* Slightly hacky way to align layers and groups */
.metabrush indent {
  margin-left: 4px;
  margin-right: 4px;
}

/* Stroke visibility and locked button */
.metabrush .strokeButton {
  min-width: 16px;
  min-height: 16px;
  margin-right: 4px;
}

.metabrush .layer-item, .metabrush .brush-item {
  color: @plain;
  background-color: @active;
  border: 0px solid @bg;
  transition: all 0.35s ease-in-out;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1px solid @active;
  border-bottom: 1px solid @active;
  margin-top: -1px;
  margin-bottom: -1px;
  padding-left: 3px;
}

.metabrush :selected .layer-item, .metabrush :selected .brush-item {
  color: black;
  background-color: @contrast;
  border-color: @contrast;
}

/* Add "drop here" areas when a drag has been initiated */
.metabrush .dragging-item .layer-item {
}

/* Style when dragging over an item */
.metabrush .drag-over.layer-item {
}

/* Style when dragging layer item over the top part of an item */
.dragging-item .drag-top.layer-item {
  border-top: 2px solid @highlight;
  margin-top: -2px;
  box-shadow:
    inset 0 8px 6px -6px @highlight;
}

/* Style when dragging layer item over the bottom part of an item */
.dragging-item .drag-bot.layer-item {
  border-bottom: 2px solid @highlight;
  margin-bottom: -2px;
  box-shadow:
    inset 0 -8px 6px -6px @highlight;
}

/* Style when dragging brush over an item */
.dragging-brush .drag-over.layer-item {
  box-shadow: unset;
  box-shadow:
    inset 8px -8px 2px -6px @brushStroke,
    inset -8px 8px 2px -6px @brushStroke;
  background-color: @brushStroke;
}

/* Style for item being dragged */
.metabrush .dragged.layer-item {
  background-color: @bg;
  transition:
    background-color 0.4s ease-in-out;
}

/* Wide separator styling */
.metabrush .wide {
  background-color: @bg;
  background-size: 0px;
  background-image: none;
  min-width: 2px;
  min-height: 2px;
}

/* List view */
.metabrush .view {
  margin-top: 3px;
  border: 0px;
  background-color: @bg;
}