wip #5467 @0:20

diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e825fec1a34dbd5268d47cd3e2fc63e24ea660a2 100644 (file)
--- 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 (file)
index 0000000..53de948
--- /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 512a2567fe39cd930926d88f4fc5108afc1a2639..447ae94133abfee8bd3f58d1dd1b1c28fcbe5bde 100644 (file)
--- 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 (file)
index 0000000..235ba8c
--- /dev/null
+++ b/resources/linkeditor/style/variables.sass
@@ -0,0 +1,4 @@
+$font-size: 16px
+$sidebar-width: 40px
+$rulers-size: 16px
+$ruler-margin: 2px