mirror of
https://gitlab.com/sheaf/metabrush.git
synced 2024-11-05 14:53:37 +00:00
put all colours into a separate CSS file
This commit is contained in:
parent
5bd4e7f4cf
commit
cca4558985
|
@ -10,6 +10,7 @@ data-dir:
|
||||||
assets
|
assets
|
||||||
data-files:
|
data-files:
|
||||||
theme.css
|
theme.css
|
||||||
|
colours.css
|
||||||
icons/*
|
icons/*
|
||||||
description:
|
description:
|
||||||
|
|
||||||
|
|
42
assets/colours.css
Normal file
42
assets/colours.css
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
/* Colours */
|
||||||
|
|
||||||
|
@define-color bg rgb( 41, 40, 40);
|
||||||
|
@define-color border rgb( 28, 25, 25);
|
||||||
|
@define-color active rgb( 72, 70, 61);
|
||||||
|
@define-color disabled rgb( 149, 149, 149);
|
||||||
|
@define-color highlight rgb( 234, 223, 204);
|
||||||
|
@define-color contrast rgb( 247, 244, 239);
|
||||||
|
@define-color cursor rgb( 247, 244, 239);
|
||||||
|
@define-color cursorStroke rgb( 0, 0, 0);
|
||||||
|
@define-color cursorIndicator rgba( 199, 40, 29, 0.9);
|
||||||
|
@define-color plain rgb( 212, 190, 152);
|
||||||
|
@define-color base rgb( 234, 223, 204);
|
||||||
|
@define-color splash rgb( 245, 136, 27);
|
||||||
|
@define-color pathPoint rgb( 129, 131, 241);
|
||||||
|
@define-color pathPointStroke rgb( 0, 0, 0);
|
||||||
|
@define-color controlPoint rgb( 161, 221, 233);
|
||||||
|
@define-color controlPointLine rgb( 161, 221, 233);
|
||||||
|
@define-color controlPointStroke rgb( 0, 0, 0);
|
||||||
|
@define-color path rgb( 184, 80, 80);
|
||||||
|
@define-color brush rgb( 106, 63, 222);
|
||||||
|
@define-color brushStroke rgba( 235, 118, 219, 0.66);
|
||||||
|
@define-color brushCenter rgb( 0, 0, 0);
|
||||||
|
@define-color pointHover rgb( 231, 172, 83);
|
||||||
|
@define-color pointSelected rgb( 252, 237, 120);
|
||||||
|
@define-color scrollBar rgba( 45, 39, 39, 0.66);
|
||||||
|
@define-color ruler rgb( 237, 226, 154);
|
||||||
|
@define-color rulerBorder rgb( 0, 0, 0);
|
||||||
|
@define-color rulerTick rgb( 0, 0, 0);
|
||||||
|
@define-color guide rgba( 28, 196, 79, 0.75);
|
||||||
|
@define-color magnifier rgb( 236, 223, 210);
|
||||||
|
@define-color glass rgba( 156, 231, 255, 0.5);
|
||||||
|
@define-color selected rgba( 161, 201, 236, 0.5);
|
||||||
|
@define-color selectedOutline rgb( 74, 150, 218);
|
||||||
|
@define-color shortcutKey rgb( 112, 109, 96 );
|
||||||
|
|
||||||
|
@define-color windowButtonHover rgb( 34, 131, 186);
|
||||||
|
@define-color windowButtonActive rgb( 23, 108, 156);
|
||||||
|
@define-color closeButtonHover rgb( 181, 43, 43);
|
||||||
|
@define-color closeButtonActive rgb( 160, 37, 37);
|
||||||
|
@define-color newFileButton rgb( 72, 70, 61);
|
||||||
|
@define-color newFileButtonActive rgb( 160, 225, 54);
|
206
assets/theme.css
206
assets/theme.css
|
@ -3,111 +3,115 @@
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@import url("colours.css");
|
||||||
|
|
||||||
/* Colors parsed by application */
|
/* Colours parsed by application */
|
||||||
.bg {
|
.bg {
|
||||||
background-color: rgb(41, 40, 40);
|
background-color: @bg;
|
||||||
color: rgb(41, 40, 40);
|
color: @bg;
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
color: rgb(72,70,61);
|
color: @active;
|
||||||
}
|
}
|
||||||
.close {
|
.close {
|
||||||
color: rgb(181,43,43);
|
color: @closeButtonHover;
|
||||||
}
|
}
|
||||||
.highlight {
|
.highlight {
|
||||||
color: rgb(234,223,204);
|
color: @highlight;
|
||||||
}
|
}
|
||||||
.cursor {
|
.cursor {
|
||||||
color:rgb(234,223,204);
|
color: @cursor;
|
||||||
}
|
}
|
||||||
.cursorStroke {
|
.cursorStroke {
|
||||||
color: black;
|
color: @cursorStroke;
|
||||||
}
|
}
|
||||||
.cursorIndicator {
|
.cursorIndicator {
|
||||||
color: rgba(199, 40, 29, 0.9);
|
color: @cursorIndicator;
|
||||||
}
|
}
|
||||||
.plain {
|
.plain {
|
||||||
color: rgb(212, 190, 152);
|
color: @plain;
|
||||||
}
|
}
|
||||||
.base {
|
.base {
|
||||||
color: rgb(234, 223, 204);
|
color: @base;
|
||||||
}
|
}
|
||||||
.splash {
|
.splash {
|
||||||
color: rgb(245, 136, 27);
|
color: @splash;
|
||||||
}
|
}
|
||||||
.pathPoint {
|
.pathPoint {
|
||||||
color: rgb(129, 131, 241);
|
color: @pathPoint;
|
||||||
}
|
}
|
||||||
.pathPointStroke {
|
.pathPointStroke {
|
||||||
color: black;
|
color: @pathPointStroke;
|
||||||
}
|
}
|
||||||
.controlPoint {
|
.controlPoint {
|
||||||
color: rgb(161,221,233);
|
color: @controlPoint;
|
||||||
|
}
|
||||||
|
.controlPointLine {
|
||||||
|
color: @controlPointLine;
|
||||||
}
|
}
|
||||||
.controlPointStroke {
|
.controlPointStroke {
|
||||||
color: black;
|
color: @controlPointStroke;
|
||||||
}
|
}
|
||||||
.path {
|
.path {
|
||||||
color: rgb(184,80,80);
|
color: @path;
|
||||||
}
|
}
|
||||||
.brush {
|
.brush {
|
||||||
color: rgb(106,63,222);
|
color: @brush;
|
||||||
}
|
}
|
||||||
.brushStroke {
|
.brushStroke {
|
||||||
color: rgba(235,118,219,0.66);
|
color: @brushStroke;
|
||||||
}
|
}
|
||||||
.brushCenter {
|
.brushCenter {
|
||||||
color: rgb(0,0,0);
|
color: @brushCenter;
|
||||||
}
|
}
|
||||||
.pointHover {
|
.pointHover {
|
||||||
color: rgb(231, 172, 83);
|
color: @pointHover;
|
||||||
}
|
}
|
||||||
.pointSelected {
|
.pointSelected {
|
||||||
color: rgb(252,237,120);
|
color: @pointSelected;
|
||||||
}
|
}
|
||||||
.viewport {
|
.viewport {
|
||||||
background-color: rgb(236, 223, 210);
|
background-color: @base;
|
||||||
color: rgb(236, 223, 210);
|
color: @base;
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
min-height: 90px;
|
min-height: 90px;
|
||||||
}
|
}
|
||||||
.viewportScrollbar {
|
.viewportScrollbar {
|
||||||
background-color: rgba(45, 39, 39, 0.66);
|
background-color: @scrollbar;
|
||||||
color: rgba(45, 39, 39, 0.66);
|
color: @scrollbar;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
min-width: 8px;
|
min-width: 8px;
|
||||||
min-height: 8px;
|
min-height: 8px;
|
||||||
}
|
}
|
||||||
.tabScrollbar {
|
.tabScrollbar {
|
||||||
background-color: rgba(48, 45, 38, 0.66);
|
background-color: @scrollbar;
|
||||||
color: rgba(48, 45, 38, 0.66);
|
color: @scrollbar;
|
||||||
}
|
}
|
||||||
.ruler {
|
.ruler {
|
||||||
background-color: rgb(237, 226, 154);
|
background-color: @ruler;
|
||||||
color: rgb(237, 226, 154);
|
color: @ruler;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
background-size: 16px 16px;
|
background-size: 16px 16px;
|
||||||
}
|
}
|
||||||
.rulerTick {
|
.rulerTick {
|
||||||
color: black;
|
color: @rulerTick;
|
||||||
}
|
}
|
||||||
.guide {
|
.guide {
|
||||||
color: rgba(28, 196, 79, 0.75);
|
color: @guide;
|
||||||
}
|
}
|
||||||
.magnifier {
|
.magnifier {
|
||||||
color: rgb(236, 223, 210);
|
color: @magnifier;
|
||||||
}
|
}
|
||||||
.glass {
|
.glass {
|
||||||
color: rgba(156, 231, 255, 0.5);
|
color: @glass;
|
||||||
}
|
}
|
||||||
.selected {
|
.selected {
|
||||||
color: rgba(161,201,236,0.5);
|
color: @selected;
|
||||||
}
|
}
|
||||||
.selectedOutline {
|
.selectedOutline {
|
||||||
color: rgb(74,150,218);
|
color: @selectedOutline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -115,15 +119,15 @@
|
||||||
|
|
||||||
/* GTK tooltips */
|
/* GTK tooltips */
|
||||||
tooltip {
|
tooltip {
|
||||||
color: rgb(212, 190, 152);
|
color: @plain;
|
||||||
background-color: rgb(41, 40, 40);
|
background-color: @bg;
|
||||||
border: 1px solid rgb(28,25,25);
|
border: 1px solid @border;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.window, .dialog {
|
.window, .dialog {
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
border-color: rgb(28,25,25);
|
border-color: @border;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0px 3px 9px 1px rgba(0,0,0,0),
|
0px 3px 9px 1px rgba(0,0,0,0),
|
||||||
0px 2px 6px 2px rgba(0,0,0,0.2),
|
0px 2px 6px 2px rgba(0,0,0,0.2),
|
||||||
|
@ -145,12 +149,12 @@ tooltip {
|
||||||
|
|
||||||
/* High-constrast text colour */
|
/* High-constrast text colour */
|
||||||
.contrast {
|
.contrast {
|
||||||
color: rgb(247, 244, 239);
|
color: @contrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active (highlighting) colour */
|
/* Active (highlighting) colour */
|
||||||
.highlight {
|
.highlight {
|
||||||
color: #eadfcc;
|
color: @highlight;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo area */
|
/* Logo area */
|
||||||
|
@ -161,53 +165,53 @@ tooltip {
|
||||||
|
|
||||||
/* Logo base colour */
|
/* Logo base colour */
|
||||||
.logo_base {
|
.logo_base {
|
||||||
color: rgb(234, 223, 204);
|
color: @highlight;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo highlight colour */
|
/* Logo highlight colour */
|
||||||
.logo_highlight {
|
.logo_highlight {
|
||||||
color: rgb(245, 136, 27);
|
color: @splash;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Rulers */
|
/* Rulers */
|
||||||
.leftRuler {
|
.leftRuler {
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid @rulerBorder;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topRuler {
|
.topRuler {
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid @rulerBorder;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rulerCorner {
|
.rulerCorner {
|
||||||
min-width: 8px;
|
min-width: 8px;
|
||||||
min-height: 8px;
|
min-height: 8px;
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid @rulerBorder;
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid @rulerBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cursor colour */
|
/* Cursor colour */
|
||||||
.cursor {
|
.cursor {
|
||||||
color: rgb(247, 244, 239);
|
color: @cursor;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bézier path point colour */
|
/* Bézier path point colour */
|
||||||
.point {
|
.point {
|
||||||
color: rgb(129, 131, 241);
|
color: @pathPoint;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bézier control point colour */
|
/* Bézier control point colour */
|
||||||
.control {
|
.control {
|
||||||
color: rgb(161, 221, 233);
|
color: @controlPoint;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Title bar */
|
/* Title bar */
|
||||||
.titleBar {
|
.titleBar {
|
||||||
min-height: 24px;
|
min-height: 24px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background-color: rgb(41, 40, 40);
|
background-color: @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -217,62 +221,62 @@ tooltip {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
border-top: 2px solid rgb(41, 40, 40);
|
border-top: 2px solid @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog {
|
.dialog {
|
||||||
border: 1px solid black;
|
border: 1px solid @border;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* dialog button */
|
/* dialog button */
|
||||||
.dialogButton {
|
.dialogButton {
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
border: 1px solid black;
|
border: 1px solid @border;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 6px;
|
margin: 6px;
|
||||||
padding: 2px 10px 2px 10px;
|
padding: 2px 10px 2px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogButton:hover {
|
.dialogButton:hover {
|
||||||
border-color:rgb(212, 190, 152);
|
border-color: @plain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogButton:active, .dialogButton:checked {
|
.dialogButton:active, .dialogButton:checked {
|
||||||
color: rgb(72,70,61);
|
color: @active;
|
||||||
border-color: black;
|
border-color: @border;
|
||||||
background-color: #eadfcc;
|
background-color: @highlight;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Menu bar */
|
/* Menu bar */
|
||||||
|
|
||||||
.menu label {
|
.menu label {
|
||||||
color:rgb(212, 190, 152);
|
color:@plain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu :disabled {
|
.menu :disabled {
|
||||||
color:rgb(149,149,149);
|
color: @disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu :focus-within {
|
.menu :focus-within {
|
||||||
border-color: rgb(212, 190, 152);
|
border-color: @plain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu :focus{
|
.menu :focus{
|
||||||
border-color: rgb(72,70,61);
|
border-color: @active;
|
||||||
background-color: rgb(41, 40, 40);
|
background-color: @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu item {
|
.menu item {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
color: rgb(212, 190, 152);
|
color: @plain;
|
||||||
border-top: 2px solid rgb(41, 40, 40);
|
border-top: 2px solid @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu item > * :hover {
|
.menu item > * :hover {
|
||||||
border-color: rgb(212, 190, 152);
|
border-color: @plain;
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Top-level menu items */
|
/* Top-level menu items */
|
||||||
|
@ -290,23 +294,23 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton,
|
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton,
|
||||||
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton
|
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton
|
||||||
{
|
{
|
||||||
background-color: rgb(41, 40, 40);
|
background-color: @bg;
|
||||||
color: rgb(72,70,61);
|
color: @active;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 2px solid rgb(41, 40, 40);
|
border-left: 2px solid @bg;
|
||||||
padding: 6px 10px 6px 10px;
|
padding: 6px 10px 6px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator,
|
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator,
|
||||||
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator :hover {
|
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator :hover {
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
padding: 1px 0px 0px 1px;
|
padding: 1px 0px 0px 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton > accelerator,
|
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton > accelerator,
|
||||||
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton > accelerator {
|
.menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton > accelerator {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: rgb(112, 109, 96);
|
color: @shortcutKey;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -315,19 +319,19 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
}
|
}
|
||||||
|
|
||||||
.windowIcon:hover {
|
.windowIcon:hover {
|
||||||
background-color: rgb(34,131,186);
|
background-color: @windowButtonHover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.windowIcon:active, .windowIcon:checked {
|
.windowIcon:active, .windowIcon:checked {
|
||||||
background-color: rgb(23,108,156);
|
background-color: @windowButtonActive;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeWindowIcon:hover {
|
.closeWindowIcon:hover {
|
||||||
background-color: rgb(181,43,43);
|
background-color: @closeButtonHover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeWindowIcon:active, .closeWindowIcon:checked {
|
.closeWindowIcon:active, .closeWindowIcon:checked {
|
||||||
background-color: rgb(160,37,37);
|
background-color: @closeButtonActive;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tool bar */
|
/* Tool bar */
|
||||||
|
@ -342,11 +346,11 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolItem {
|
.toolItem {
|
||||||
border-left: 2px solid rgb(41, 40, 40);
|
border-left: 2px solid @bg;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
|
@ -356,12 +360,12 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolItem:hover {
|
.toolItem:hover {
|
||||||
border-color: rgb(72,70,61);
|
border-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolItem:active, .toolItem:checked {
|
.toolItem:active, .toolItem:checked {
|
||||||
border-color: rgb(234,223,204);
|
border-color: @base;
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* File bar */
|
/* File bar */
|
||||||
|
@ -372,16 +376,16 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileBarTab {
|
.fileBarTab {
|
||||||
border-top: 2px solid rgb(41, 40, 40);
|
border-top: 2px solid @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileBarTab:hover {
|
.fileBarTab:hover {
|
||||||
border-color: rgb(72,70,61);
|
border-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileBarTab:active, .fileBarTab:checked {
|
.fileBarTab:active, .fileBarTab:checked {
|
||||||
border-color: rgb(234,223,204);
|
border-color: @base;
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileBarTabButton {
|
.fileBarTabButton {
|
||||||
|
@ -396,29 +400,33 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
padding-left: 1px;
|
padding-left: 1px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
color: rgba(212, 190, 152,0.2);
|
color: @plain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileBarCloseButton:hover {
|
.fileBarCloseButton:hover {
|
||||||
color: rgba(213,19,36,0.9);
|
color: @closeButtonHover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fileBarCloseButton:active, .fileBarCloseButton:checked {
|
||||||
|
color: @closeButtonActive;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newFileButton {
|
.newFileButton {
|
||||||
color: rgb(72,70,61);
|
color: @newFileButton;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: "Sans";
|
font-family: "Sans";
|
||||||
padding: 0px 5px 0px 4px;
|
padding: 0px 5px 0px 4px;
|
||||||
margin: 3px 0px 3px 0px;
|
margin: 3px 0px 3px 0px;
|
||||||
border-left: 1px solid rgb(41, 40, 40);
|
border-left: 1px solid @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newFileButton:hover, .newFileButton:active, .newFileButton:checked {
|
.newFileButton:hover, .newFileButton:active, newFileButton:checked {
|
||||||
color: rgb(160,225,54);
|
color: @newFileButtonActive;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newFileButton:active, .newFileButton:checked {
|
.newFileButton:active, .newFileButton:checked {
|
||||||
border-color: rgb(160,225,54);
|
border-color: @newFileButtonActive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -431,20 +439,20 @@ To specify it in CSS, set the box-shadow of the contents node."
|
||||||
.panels tab {
|
.panels tab {
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
padding-right: 6px;
|
padding-right: 6px;
|
||||||
border-top: 2px solid rgb(41, 40, 40);
|
border-top: 2px solid @bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panels tab:hover {
|
.panels tab:hover {
|
||||||
border-color: rgb(72,70,61);
|
border-color: @active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panels tab:active, .panels tab:checked {
|
.panels tab:active, .panels tab:checked {
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
border-color: rgb(234,223,204);
|
border-color: rgb(234,223,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background-color: rgb(72,70,61);
|
background-color: @active;
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,7 +29,8 @@ data ColourRecord a
|
||||||
{ bg, active, close, highlight
|
{ bg, active, close, highlight
|
||||||
, cursor, cursorOutline, cursorIndicator
|
, cursor, cursorOutline, cursorIndicator
|
||||||
, plain, base, splash
|
, plain, base, splash
|
||||||
, pathPoint, pathPointOutline, controlPoint, controlPointOutline
|
, pathPoint, pathPointOutline
|
||||||
|
, controlPoint, controlPointLine, controlPointOutline
|
||||||
, path, brush, brushStroke, brushCenter
|
, path, brush, brushStroke, brushCenter
|
||||||
, pointHover, pointSelected
|
, pointHover, pointSelected
|
||||||
, viewport, viewportScrollbar, tabScrollbar
|
, viewport, viewportScrollbar, tabScrollbar
|
||||||
|
@ -57,6 +58,7 @@ colourNames = Colours
|
||||||
, pathPoint = ColourName "pathPoint"
|
, pathPoint = ColourName "pathPoint"
|
||||||
, pathPointOutline = ColourName "pathPointStroke"
|
, pathPointOutline = ColourName "pathPointStroke"
|
||||||
, controlPoint = ColourName "controlPoint"
|
, controlPoint = ColourName "controlPoint"
|
||||||
|
, controlPointLine = ColourName "controlPointLine"
|
||||||
, controlPointOutline = ColourName "controlPointStroke"
|
, controlPointOutline = ColourName "controlPointStroke"
|
||||||
, path = ColourName "path"
|
, path = ColourName "path"
|
||||||
, brush = ColourName "brush"
|
, brush = ColourName "brush"
|
||||||
|
|
|
@ -113,7 +113,7 @@ import MetaBrush.GTK.Util
|
||||||
|
|
||||||
data Renders a
|
data Renders a
|
||||||
= Renders
|
= Renders
|
||||||
{ renderPath, renderStrokes, renderBrushes
|
{ renderStrokes, renderPath, renderBrushes
|
||||||
, renderCLines, renderCPts, renderPPts :: a
|
, renderCLines, renderCPts, renderPPts :: a
|
||||||
}
|
}
|
||||||
deriving stock ( Show, Functor, Foldable, Traversable, Generic, Generic1 )
|
deriving stock ( Show, Functor, Foldable, Traversable, Generic, Generic1 )
|
||||||
|
@ -490,7 +490,7 @@ drawPoint ( Colours {..} ) mbHover zoom ControlPoint pt
|
||||||
Cairo.restore
|
Cairo.restore
|
||||||
|
|
||||||
drawLine :: Colours -> Double -> PointType -> PointData b -> PointData b -> Cairo.Render ()
|
drawLine :: Colours -> Double -> PointType -> PointData b -> PointData b -> Cairo.Render ()
|
||||||
drawLine ( Colours { path, controlPoint } ) zoom pointType p1 p2 = do
|
drawLine ( Colours { path, controlPointLine } ) zoom pointType p1 p2 = do
|
||||||
let
|
let
|
||||||
x1, y1, x2, y2 :: Double
|
x1, y1, x2, y2 :: Double
|
||||||
Point2D x1 y1 = coords p1
|
Point2D x1 y1 = coords p1
|
||||||
|
@ -506,7 +506,7 @@ drawLine ( Colours { path, controlPoint } ) zoom pointType p1 p2 = do
|
||||||
withRGBA path Cairo.setSourceRGBA
|
withRGBA path Cairo.setSourceRGBA
|
||||||
ControlPoint -> do
|
ControlPoint -> do
|
||||||
Cairo.setLineWidth ( 3 / zoom )
|
Cairo.setLineWidth ( 3 / zoom )
|
||||||
withRGBA controlPoint Cairo.setSourceRGBA
|
withRGBA controlPointLine Cairo.setSourceRGBA
|
||||||
Cairo.stroke
|
Cairo.stroke
|
||||||
|
|
||||||
Cairo.restore
|
Cairo.restore
|
||||||
|
|
Loading…
Reference in a new issue