mirror of
https://gitlab.com/sheaf/metabrush.git
synced 2024-11-05 14:53:37 +00:00
666 lines
12 KiB
CSS
666 lines
12 KiB
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;
|
|
}
|