From f34ba1815e7dd6394196ab25b32672b94d268862 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 20 Sep 2022 11:52:16 +0200 Subject: [PATCH] wip #5467 @0:20 --- resources/linkeditor/style/links.sass | 69 +++++ resources/linkeditor/style/rulers.sass | 196 +++++++++++++ resources/linkeditor/style/style.sass | 324 +--------------------- resources/linkeditor/style/variables.sass | 4 + 4 files changed, 279 insertions(+), 314 deletions(-) create mode 100644 resources/linkeditor/style/rulers.sass create mode 100644 resources/linkeditor/style/variables.sass diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass index e69de29bb..e825fec1a 100644 --- a/resources/linkeditor/style/links.sass +++ b/resources/linkeditor/style/links.sass @@ -0,0 +1,69 @@ +#linkeditor-links + .link + position: absolute + outline: 1px solid currentColor + cursor: cell + + &.selected + .corners + visibility: visible + + .corners + visibility: hidden + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + + > div + position: absolute + outline: 1px solid currentColor + background-color: #fff + width: 8px + height: 8px + + &.nw + cursor: nw-resize + + &.n + cursor: n-resize + + &.ne + cursor: ne-resize + + &.e + cursor: e-resize + + &.se + cursor: se-resize + + &.s + cursor: s-resize + + &.sw + cursor: sw-resize + + &.w + cursor: w-resize + + &.n, &.nw, &.ne + top: -4px + + &.e, &.w + top: calc(50% - 4px) + + &.sw, &.s, &.se + bottom: -4px + + &.nw, &.w, &.sw + left: -4px + + &.ne, &.e, &.se + right: -4px + + &.n, &.s + left: calc(50% - 4px) + + position: relative + z-index: 500 diff --git a/resources/linkeditor/style/rulers.sass b/resources/linkeditor/style/rulers.sass new file mode 100644 index 000000000..53de94866 --- /dev/null +++ b/resources/linkeditor/style/rulers.sass @@ -0,0 +1,196 @@ +.ruler + position: absolute + top: 0 + left: 0 + z-index: 600 + border-width: 0 + border-color: #0ff + border-style: solid + + &:after + position: absolute + content: "" + display: block + height: 100% + width: 100% + + &.pending-delete + border-color: #f00 !important + z-index: 1100 + + &:hover + border-color: #0f0 + + &[data-axis="x"] + width: 0px + height: calc(100% - $rulers-size) + border-left-width: 1px + cursor: col-resize + top: $rulers-size + + &:after + left: $ruler-margin*-1 + width: $ruler-margin*2 + + &[data-axis="y"] + border-bottom-width: 1px + height: 0px + width: calc(100% - $rulers-size) + left: $rulers-size + + &:after + top: $ruler-margin*-1 + height: $ruler-margin*2 + cursor: row-resize + +#linkeditor-rulers + $rulers-color: #333 + $rulers-color-dark: #eee + + @media (prefers-color-scheme: dark) + color: $rulers-color-dark + + + color: $rulers-color + position: absolute + top: 0px + left: 0px + width: 100% + height: 100% + + #linkeditor-ruler-corner + position: absolute + top: 0px + left: 0px + width: $rulers-size + height: $rulers-size + z-index: 5 + background-color: #aaa + @media (prefers-color-scheme: dark) + background-color: #666 + + + .ruler-bar + overflow: hidden + position: absolute + left: 0 + top: 0 + z-index: 1000 + + .info + position: absolute + top: 0 + left: 0 + z-index: 3 + font-size: 12px + line-height: 8px + display: none + + span + display: block + position: absolute + top: 0 + left: 0 + background-color: #fff + color: #000 + @media (prefers-color-scheme: dark) + background-color: #000 + color: #fff + + padding: 3px + + + .division + pointer-events: none + position: absolute + background: #fff + @media (prefers-color-scheme: dark) + background-color: #000 + + + .value + position: absolute + font-size: 12px + + + .subdivision + position: absolute + + + #linkeditor-ruler-x + height: $rulers-size + width: 100% + + .info + height: $rulers-size + border-left: 1px dotted $rulers-color + @media (prefers-color-scheme: dark) + border-color: $rulers-color-dark + + + .division, .subdivision + width: 0px + border-left: 1px solid $rulers-color + @media (prefers-color-scheme: dark) + border-color: $rulers-color-dark + + + .division + height: $rulers-size + + .value + bottom: 0px + left: 3px + + + .subdivision + bottom: 0 + height: 2px + + &.middle + height: 5px + + + #linkeditor-ruler-y + width: $rulers-size + height: 100% + + .info + width: $rulers-size + border-bottom: 1px dotted $rulers-color + @media (prefers-color-scheme: dark) + border-color: $rulers-color-dark + + + span + transform-origin: 0 0 + transform: rotate(270deg) + + + .division, .subdivision + height: 0px + border-bottom: 1px solid $rulers-color + @media (prefers-color-scheme: dark) + border-color: $rulers-color-dark + + + .division + width: $rulers-size + + .value + text-align: center + max-width: $rulers-size + word-wrap: break-word + white-space: normal + line-height: 10px + letter-spacing: 30px + top: 3px + left: 3px + + + .subdivision + right: 0 + width: 2px + + &.middle + width: 5px diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass index 512a2567f..447ae9413 100644 --- a/resources/linkeditor/style/style.sass +++ b/resources/linkeditor/style/style.sass @@ -1,17 +1,18 @@ +@import "variables" + * margin: 0 padding: 0 box-sizing: border-box -$font-size: 16px + body background-color: #ebecee @media (prefers-color-scheme: dark) background-color: #333 - img, .division, .info user-select: none user-drag: none @@ -24,8 +25,6 @@ body, #linkeditor, html #linkeditor - $sidebar-width: 40px - $rulers-size: 16px white-space: nowrap font-size: 0 overflow: hidden @@ -83,22 +82,16 @@ body, #linkeditor, html &#linkeditor-toolbar-center text-align: center - - &#linkeditor-toolbar-right - - 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 @@ -116,7 +109,6 @@ body, #linkeditor, html margin: 0 8px font-weight: 600 - input vertical-align: top text-align: right @@ -134,16 +126,13 @@ body, #linkeditor, html -webkit-appearance: none margin: 0 - font-weight: 600 position: relative - &:hover, &:focus outline: 0 border: 0 - [data-icon] display: inline-block vertical-align: top @@ -157,324 +146,29 @@ body, #linkeditor, html @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) + height: calc(100% - $toolbar-height) width: 100% overflow: hidden - $ruler-margin: 2px - - #linkeditor-links - .link - position: absolute - outline: 1px solid currentColor - cursor: cell - - &.selected - .corners - visibility: visible - - - .corners - visibility: hidden - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - - > div - position: absolute - outline: 1px solid currentColor - background-color: #fff - width: 8px - height: 8px - - &.nw - cursor: nw-resize - - - &.n - cursor: n-resize - - - &.ne - cursor: ne-resize - - - &.e - cursor: e-resize - - - &.se - cursor: se-resize - - - &.s - cursor: s-resize - - - &.sw - cursor: sw-resize - - - &.w - cursor: w-resize - - - &.n, &.nw, &.ne - top: -4px - - - &.e, &.w - top: calc(50% - 4px) - - - &.sw, &.s, &.se - bottom: -4px - - - &.nw, &.w, &.sw - left: -4px - - - &.ne, &.e, &.se - right: -4px - - - &.n, &.s - left: calc(50% - 4px) - - - position: relative - z-index: 500 - - - .ruler - position: absolute - top: 0 - left: 0 - z-index: 600 - border-width: 0 - border-color: #0f0 - border-style: solid - - &:after - position: absolute - content: "" - display: block - height: 100% - width: 100% - - - &.pending-delete - border-color: #f00 !important - z-index: 1100 - - - &:hover - border-color: #0ff - - - &[data-axis="x"] - width: 0px - height: calc( 100% - $rulers-size) - border-left-width: 1px - cursor: col-resize - top: $rulers-size - - &:after - left: $ruler-margin*-1 - width: $ruler-margin*2 - - - &[data-axis="y"] - border-bottom-width: 1px - height: 0px - width: calc( 100% - $rulers-size) - left: $rulers-size - - &:after - top: $ruler-margin*-1 - height: $ruler-margin*2 - cursor: row-resize - - - #linkeditor-rulers - $rulers-color: #333 - $rulers-color-dark: #eee - - @media (prefers-color-scheme: dark) - color: $rulers-color-dark - - - color: $rulers-color - position: absolute - top: 0px - left: 0px - width: 100% - height: 100% - - #linkeditor-ruler-corner - position: absolute - top: 0px - left: 0px - width: $rulers-size - height: $rulers-size - z-index: 5 - background-color: #aaa - @media (prefers-color-scheme: dark) - background-color: #666 - - - .ruler-bar - overflow: hidden - position: absolute - left: 0 - top: 0 - z-index: 1000 - - .info - position: absolute - top: 0 - left: 0 - z-index: 3 - font-size: 12px - line-height: 8px - display: none - - span - display: block - position: absolute - top: 0 - left: 0 - background-color: #fff - color: #000 - @media (prefers-color-scheme: dark) - background-color: #000 - color: #fff - - padding: 3px - - - .division - pointer-events: none - position: absolute - background: #fff - @media (prefers-color-scheme: dark) - background-color: #000 - - - .value - position: absolute - font-size: 12px - - - .subdivision - position: absolute - - - #linkeditor-ruler-x - height: $rulers-size - width: 100% - - .info - height: $rulers-size - border-left: 1px dotted $rulers-color - @media (prefers-color-scheme: dark) - border-color: $rulers-color-dark - - - .division, .subdivision - width: 0px - border-left: 1px solid $rulers-color - @media (prefers-color-scheme: dark) - border-color: $rulers-color-dark - - - .division - height: $rulers-size - - .value - bottom: 0px - left: 3px - - - .subdivision - bottom: 0 - height: 2px - - &.middle - height: 5px - - - #linkeditor-ruler-y - width: $rulers-size - height: 100% - - .info - width: $rulers-size - border-bottom: 1px dotted $rulers-color - @media (prefers-color-scheme: dark) - border-color: $rulers-color-dark - - - span - transform-origin: 0 0 - transform: rotate(270deg) - - - .division, .subdivision - height: 0px - border-bottom: 1px solid $rulers-color - @media (prefers-color-scheme: dark) - border-color: $rulers-color-dark - - - .division - width: $rulers-size - - .value - text-align: center - max-width: $rulers-size - word-wrap: break-word - white-space: normal - line-height: 10px - letter-spacing: 30px - top: 3px - left: 3px - - - .subdivision - right: 0 - width: 2px - - &.middle - width: 5px - - #linkeditor-zoom width: 100% height: 100% @@ -496,10 +190,10 @@ body, #linkeditor, html z-index: 1 top: $rulers-size left: $rulers-size - height: calc( 100% - $rulers-size) - max-height: calc( 100% - $rulers-size) - width: calc( 100% - $rulers-size) - max-width: calc( 100% - $rulers-size) + height: calc(100% - $rulers-size) + max-height: calc(100% - $rulers-size) + width: calc(100% - $rulers-size) + max-width: calc(100% - $rulers-size) overflow: auto &::-webkit-scrollbar @@ -564,3 +258,5 @@ body, #linkeditor, html #linkeditor-preload display: none +@import "rulers" +@import "links" diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass new file mode 100644 index 000000000..235ba8cc2 --- /dev/null +++ b/resources/linkeditor/style/variables.sass @@ -0,0 +1,4 @@ +$font-size: 16px +$sidebar-width: 40px +$rulers-size: 16px +$ruler-margin: 2px -- 2.39.5