From c87415cd700f6d3bce70beeba31a3a37b34ce69f Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 20 Sep 2022 12:30:24 +0200 Subject: [PATCH] wip #5467 @1 --- resources/linkeditor/style/links.sass | 2 + resources/linkeditor/style/rulers.sass | 2 + resources/linkeditor/style/style.sass | 127 +--------------------- resources/linkeditor/style/toolbar.sass | 103 ++++++++++++++++++ resources/linkeditor/style/variables.sass | 4 + 5 files changed, 112 insertions(+), 126 deletions(-) create mode 100644 resources/linkeditor/style/toolbar.sass diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass index e825fec1a..7829cc61c 100644 --- a/resources/linkeditor/style/links.sass +++ b/resources/linkeditor/style/links.sass @@ -1,3 +1,5 @@ +@import "variables" + #linkeditor-links .link position: absolute diff --git a/resources/linkeditor/style/rulers.sass b/resources/linkeditor/style/rulers.sass index 53de94866..b00e2553a 100644 --- a/resources/linkeditor/style/rulers.sass +++ b/resources/linkeditor/style/rulers.sass @@ -1,3 +1,5 @@ +@import "variables" + .ruler position: absolute top: 0 diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass index 447ae9413..14f9f347c 100644 --- a/resources/linkeditor/style/style.sass +++ b/resources/linkeditor/style/style.sass @@ -5,9 +5,6 @@ padding: 0 box-sizing: border-box - - - body background-color: #ebecee @media (prefers-color-scheme: dark) @@ -17,13 +14,11 @@ img, .division, .info user-select: none user-drag: none - body, #linkeditor, html height: 100% width: 100% overflow: hidden - #linkeditor white-space: nowrap font-size: 0 @@ -35,134 +30,21 @@ body, #linkeditor, html vertical-align: top text-align: left - aside width: $sidebar-width background-color: #EBECEE @media (prefers-color-scheme: dark) background-color: #333 - #linkeditor-main - $toolbar-height: 40px - width: calc(100% - $sidebar-width - $sidebar-width) &.grab cursor: grab - &.grabbing cursor: grabbing - - #linkeditor-toolbar - - $toolbar-color: #5d5d5d - $toolbar-color-dark: #bbb - background-color: #dbdddf - - @media (prefers-color-scheme: dark) - background-color: #444 - - color: $toolbar-color - @media (prefers-color-scheme: dark) - color: $toolbar-color-dark - - height: $toolbar-height - padding: 5px - - nav - padding: 2px - display: inline-block - height: 26px - vertical-align: top - width: 33% - - &#linkeditor-toolbar-center - text-align: center - - div - display: inline-block - font-size: $font-size - - .separator - width: 0 - height: 26px - margin: 0 2px - border-left: 1px solid $toolbar-color - - #linkeditor-page-field - padding: 2px 10px - background-color: #fff - @media (prefers-color-scheme: dark) - background-color: #000 - border-color: #333 - - border: 1px solid #ccc - border-radius: 5px - cursor: text - font-size: 13px - position: relative - top: -9px - user-select: none - margin: 0 8px - font-weight: 600 - - input - vertical-align: top - text-align: right - border: 0 - background-color: transparent - width: 20px - color: $toolbar-color - @media (prefers-color-scheme: dark) - color: $toolbar-color-dark - - font-size: 13px - appearance: textfield - - &::-webkit-outer-adjust-hue-button, &::-webkit-inner-adjust-hue-button - -webkit-appearance: none - margin: 0 - - font-weight: 600 - position: relative - - &:hover, &:focus - outline: 0 - border: 0 - - [data-icon] - display: inline-block - vertical-align: top - height: 26px - min-width: 26px - padding: 3px - border-radius: 5px - margin: 0 3px - text-align: center - color: $toolbar-color - @media (prefers-color-scheme: dark) - color: $toolbar-color-dark - - &:hover, &.hover - background-color: #fff - @media (prefers-color-scheme: dark) - background-color: #000 - - &.arrow - padding: 1px - - svg - height: 16px - - svg - position: relative - top: 1px - height: 18px - width: auto - #linkeditor-editor position: relative height: calc(100% - $toolbar-height) @@ -179,13 +61,11 @@ body, #linkeditor, html transform-origin: 0 0 overflow: hidden - #linkeditor-canvas background-color: #505050 @media (prefers-color-scheme: dark) background-color: #222 - position: relative z-index: 1 top: $rulers-size @@ -200,20 +80,17 @@ body, #linkeditor, html width: 6px height: 6px - &::-webkit-scrollbar-track background: transparent &:hover background-color: #000 - &::-webkit-scrollbar-thumb background-color: #aaa border: 1px solid #333 border-radius: 20px - #linkeditor-fluidbook transform-origin: 0 0 position: absolute @@ -228,7 +105,6 @@ body, #linkeditor, html @media (prefers-color-scheme: dark) background-color: rgba(0, 0, 0, 0.2) - .contents background-color: #fff position: absolute @@ -249,14 +125,13 @@ body, #linkeditor, html &.texts z-index: 2 - &#linkeditor-page-right .simple & display: none - #linkeditor-preload display: none +@import "toolbar" @import "rulers" @import "links" diff --git a/resources/linkeditor/style/toolbar.sass b/resources/linkeditor/style/toolbar.sass new file mode 100644 index 000000000..00a9aa3d6 --- /dev/null +++ b/resources/linkeditor/style/toolbar.sass @@ -0,0 +1,103 @@ +#linkeditor-toolbar + background-color: #dbdddf + + @media (prefers-color-scheme: dark) + background-color: #444 + + color: $toolbar-color + @media (prefers-color-scheme: dark) + color: $toolbar-color-dark + + height: $toolbar-height + padding: 5px + + nav + padding: 2px + display: inline-block + height: 26px + vertical-align: top + width: 33% + + &#linkeditor-toolbar-center + text-align: center + + div + display: inline-block + font-size: $font-size + + .separator + width: 0 + height: 26px + margin: 0 2px + border-left: 1px solid $toolbar-color + + #linkeditor-page-field + padding: 2px 10px + background-color: #fff + @media (prefers-color-scheme: dark) + background-color: #000 + border-color: #333 + + border: 1px solid #ccc + border-radius: 5px + cursor: text + font-size: 13px + position: relative + top: -9px + user-select: none + margin: 0 8px + font-weight: 600 + + input + vertical-align: top + text-align: right + border: 0 + background-color: transparent + width: 20px + color: $toolbar-color + @media (prefers-color-scheme: dark) + color: $toolbar-color-dark + + font-size: 13px + appearance: textfield + + &::-webkit-outer-adjust-hue-button, &::-webkit-inner-adjust-hue-button + -webkit-appearance: none + margin: 0 + + font-weight: 600 + position: relative + + &:hover, &:focus + outline: 0 + border: 0 + + [data-icon] + display: inline-block + vertical-align: top + height: 26px + min-width: 26px + padding: 3px + border-radius: 5px + margin: 0 3px + text-align: center + color: $toolbar-color + @media (prefers-color-scheme: dark) + color: $toolbar-color-dark + + &:hover, &.hover + background-color: #fff + @media (prefers-color-scheme: dark) + background-color: #000 + + &.arrow + padding: 1px + + svg + height: 16px + + svg + position: relative + top: 1px + height: 18px + width: auto diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass index 235ba8cc2..06908ce24 100644 --- a/resources/linkeditor/style/variables.sass +++ b/resources/linkeditor/style/variables.sass @@ -2,3 +2,7 @@ $font-size: 16px $sidebar-width: 40px $rulers-size: 16px $ruler-margin: 2px + +$toolbar-height: 40px +$toolbar-color: #5d5d5d +$toolbar-color-dark: #bbb -- 2.39.5