diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/doodle.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/doodle.scss | 22 |
1 files changed, 13 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss index a4a1cfc84..52c7cd54a 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.scss @@ -1,15 +1,17 @@ -$doodleBg: #d9e1e8; +$doodle-background: #d9e1e8; + .doodle-modal { @extend .boost-modal; + width: unset; } .doodle-modal__container { - background: $doodleBg; + background: $doodle-background; text-align: center; line-height: 0; // remove weird gap under canvas canvas { - border: 5px solid $doodleBg; + border: 5px solid $doodle-background; } } @@ -24,7 +26,6 @@ $doodleBg: #d9e1e8; .doodle-toolbar { line-height: 1; - display: flex; flex-direction: column; flex-grow: 0; @@ -38,9 +39,11 @@ $doodleBg: #d9e1e8; margin-right: 2px; } - input[type="number"],input[type="text"] { + input[type='number'], + input[type='text'] { width: 40px; } + span.val { display: inline-block; text-align: left; @@ -52,7 +55,7 @@ $doodleBg: #d9e1e8; .doodle-palette { padding-right: 0 !important; border: 1px solid black; - line-height: .2rem; + line-height: 0.2rem; flex-grow: 0; background: white; @@ -60,14 +63,15 @@ $doodleBg: #d9e1e8; appearance: none; width: 1rem; height: 1rem; - margin: 0; padding: 0; + margin: 0; + padding: 0; text-align: center; color: black; text-shadow: 0 0 1px white; cursor: pointer; - box-shadow: inset 0 0 1px rgba(white, .5); + box-shadow: inset 0 0 1px rgba(white, 0.5); border: 1px solid black; - outline-offset:-1px; + outline-offset: -1px; &.foreground { outline: 1px dashed white; |