wip #5467 @1

diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass
index e825fec1a34dbd5268d47cd3e2fc63e24ea660a2..7829cc61cd6c7438cd1093a321d6662481e6f385 100644 (file)
--- 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 53de948665744b1795a3d15eeb8f249826b95727..b00e2553add2b110bbbe2497205ffbfa49cf382f 100644 (file)
--- 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 447ae94133abfee8bd3f58d1dd1b1c28fcbe5bde..14f9f347cd44222ec677a936dc9f8af4dc5bc27f 100644 (file)
--- 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 (file)
index 0000000..00a9aa3
--- /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 235ba8cc2a7dcee49e28f5a259494ffd476db3be..06908ce24def761b8a2ec42c1451fb437322ac7b 100644 (file)
--- 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