draw WIP krita dark theme

#+BEGIN_SRC css body { background-color: #474747; display: grid; /* grid-template-rows: [left] [middle] [right]; grid-template-columns: [toolbar] [workspace];*/ height: 100%; } .drawarea { width: calc(100% - 80px); height: calc(100% - 100px); position: absolute; top: 30px; left: 38px; overflow: scroll; background-color: #888; } canvas.draw { margin: 100px; } input[type=color], input[type=number], .controls .actions { position: absolute; top: 0; } input[type=color] { left: 38px; } input[type=number] { left: 98px; } .controls .actions { left: 158px; } .controls .layers { position: absolute; top: 40%; right: 0; width: 30px; transform: scale(-1); } .controls .layers canvas { transform: scale(-1) } .controls .layercontrols button { transform: rotate(90deg); } .controls .toolbox { background-color: #474747; display: inline-block; position: absolute; top: 30; left: 0; width: 30px; margin-right: 8px; resize: horizontal; } button, .toolbox button { border: 2px solid transparent; background: none; color: #CACACA; } button img { padding: 2px !important; filter: invert(.789); } button:hover { border: 2px solid; border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZUlEQVQ4y2NkQAPGxsb/GYgAZ8+eZUTmMzFQCbCgu0RbW5tYvf+RXUY1FzHicsmiRYsYsWmIi4tDCcOrV6/SKIwIuQRdHt1lVHPRqEFkxBosNohNR1R3ESO5eQ2Woqmf1wZdeQQAqNIpPznmqfIAAAAASUVORK5CYII='); border-image-slice: 6 6 6 6; border-image-width: 4px 4px 4px 4px; border-image-repeat: stretch stretch; background-image: linear-gradient(180deg, #797979, #676767); background-clip: content-box; } button[data-selected] { border: 2px solid; border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZklEQVQ4y2NkQAPGxsb/GYgAZ8+eZUTmMzFQCbCgu8Q5IptIrVP/I7uMai5ixOWSrtIkRmwayrrnoYTh3hVTaRRGhFyCLo/uMqq5aNQgMmINFhvEpiOqu4iR3LwGS9HUz2uDrjwCALUPKlkaag+7AAAAAElFTkSuQmCC'); border-image-slice: 6 6 6 6; border-image-width: 4px 4px 4px 4px; border-image-repeat: stretch stretch; background-image: none; background-color: rgb(100,124,145) !important; background-clip: content-box; } .download, .help { position: absolute; color: #CACACA; } .help { bottom: 1rem; left: 45%; } .download { right: calc(60px); top: .5rem; } #canvassettings { position: absolute; bottom: .5rem; } #+END_SRC
nice I like it
#+BEGIN_SRC css body { background-color: #474747; display: grid; /* grid-template-rows: [left] [middle] [right]; grid-template-columns: [toolbar] [workspace];*/ height: 100%; } .drawarea { width: calc(100% - 80px); height: calc(100% - 100px); position: absolute; top: 30px; left: 38px; overflow: scroll; background-color: #888; } canvas.draw { margin: 100px; overflow: hidden; } input:not([type=submit]) { color: #CACACA; background-color: #383838; border: 1px solid #333; border-radius: 2px; padding: .1rem 0 .25rem .25rem; box-shadow: inset 0px 1px #333; } input[type=color], input[type=number], .controls .actions { position: absolute; top: 0; } input[type=color] { left: 38px; padding: .1rem 1.05rem; } input[type=number] { left: 102px; } .controls .actions { left: 166px; } .controls .layers { position: absolute; top: 40%; right: 0; width: 30px; transform: scale(-1); } .controls .layers canvas { transform: scale(-1) } .controls .layers canvas[data-selected] { border: 2px solid rgb(83, 114, 142) !important; border-left-width: 14px !important; filter: brightness(120%); } .controls .layercontrols button { transform: rotate(90deg); font-family: monospace; font-weight: bold; } .controls .toolbox { background-color: #474747; display: inline-block; position: absolute; top: 30; left: 0; width: 30px; margin-right: 8px; resize: horizontal; } button, .toolbox button { border: 2px solid transparent; background: none; color: #CACACA; } button img { padding: 2px !important; filter: invert(.789); } button:hover { border: 2px solid; border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZUlEQVQ4y2NkQAPGxsb/GYgAZ8+eZUTmMzFQCbCgu0RbW5tYvf+RXUY1FzHicsmiRYsYsWmIi4tDCcOrV6/SKIwIuQRdHt1lVHPRqEFkxBosNohNR1R3ESO5eQ2Woqmf1wZdeQQAqNIpPznmqfIAAAAASUVORK5CYII='); border-image-slice: 6 6 6 6; border-image-width: 4px 4px 4px 4px; border-image-repeat: stretch stretch; background-image: linear-gradient(180deg, #4F4F4F, #434343); background-clip: content-box; } button[data-selected] { border: 2px solid; border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZklEQVQ4y2NkQAPGxsb/GYgAZ8+eZUTmMzFQCbCgu8Q5IptIrVP/I7uMai5ixOWSrtIkRmwayrrnoYTh3hVTaRRGhFyCLo/uMqq5aNQgMmINFhvEpiOqu4iR3LwGS9HUz2uDrjwCALUPKlkaag+7AAAAAElFTkSuQmCC'); border-image-slice: 6 6 6 6; border-image-width: 4px 4px 4px 4px; border-image-repeat: stretch stretch; background-image: none; background-color: rgb(100,124,145) !important; background-clip: content-box; } .download, .help { position: absolute; color: #CACACA; } .help { bottom: 3rem; left: 45%; } .download { right: calc(60px); top: .5rem; } #canvassettings { position: absolute; bottom: .5rem; } #canvassettings::before { content: "Canvas:"; color: #CACACA; font-family: Tahoma, sans-serif; font-size: .85rem; } #canvassettings .longinput[name=artistID] { margin-left: 1rem; } #canvassettings input[type=submit] { color: #CACACA; border: 2px solid; border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZUlEQVQ4y2NkQAPGxsb/GYgAZ8+eZUTmMzFQCbCgu0RbW5tYvf+RXUY1FzHicsmiRYsYsWmIi4tDCcOrV6/SKIwIuQRdHt1lVHPRqEFkxBosNohNR1R3ESO5eQ2Woqmf1wZdeQQAqNIpPznmqfIAAAAASUVORK5CYII='); border-image-slice: 6 6 6 6; border-image-width: 4px 4px 4px 4px; border-image-repeat: stretch stretch; background-image: linear-gradient(180deg, #4C4C4C, #404040); background-clip: padding-box; padding: .2rem .25rem; } #+END_SRC
[https://lumage.smilebasicsource.com/draw/]
[[https://lumage.smilebasicsource.com/draw/]] updated again for the layout rewrite and a feature backlog [[https://lumage.smilebasicsource.com/draw/krita-dark-2.css][css source]]