hashirama/metabrush
1
0
Fork 0
mirror of https://gitlab.com/sheaf/metabrush.git synced 2024-11-27 17:34:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

put all colours into a separate CSS file

Browse source
This commit is contained in:
sheaf 2023-01-08 21:12:00 +01:00
parent 5bd4e7f4cf
commit cca4558985
5 changed files with 156 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
MetaBrush.cabal
View file

@ -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
View 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
View file

@ -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;
} }

4
src/app/MetaBrush/Asset/Colours.hs
View file

@ -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"

6
src/app/MetaBrush/Render/Document.hs
View file

@ -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