diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-19 12:49:21 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-19 12:51:11 +0800 |
| commit | 7e1dcca489ecc0489734d4fee12315998fc67c12 (patch) | |
| tree | dd03de39dceca76cc2dd0d8bb2084c9dcd612701 /src | |
| parent | c2de5f11c1f47b528e346bc75ef6c60c355258fe (diff) | |
chore: fix error from stylelint
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/dumbymap.css | 70 |
1 files changed, 36 insertions, 34 deletions
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index 1c6d92b..93e89dd 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css | |||
| @@ -4,10 +4,8 @@ | |||
| 4 | 4 | ||
| 5 | .with-leader-line:not(:has(> *)) { | 5 | .with-leader-line:not(:has(> *)) { |
| 6 | display: inline-block; | 6 | display: inline-block; |
| 7 | |||
| 8 | padding-right: 15px; | 7 | padding-right: 15px; |
| 9 | padding-left: 6px; | 8 | padding-left: 6px; |
| 10 | |||
| 11 | background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cG9seWdvbiBwb2ludHM9IjI0LDAgMCw4IDgsMTEgMCwxOSA1LDI0IDEzLDE2IDE2LDI0IiBmaWxsPSJjb3JhbCIvPjwvc3ZnPg=="); | 9 | background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cG9seWdvbiBwb2ludHM9IjI0LDAgMCw4IDgsMTEgMCwxOSA1LDI0IDEzLDE2IDE2LDI0IiBmaWxsPSJjb3JhbCIvPjwvc3ZnPg=="); |
| 12 | background-size: 12px 12px; | 10 | background-size: 12px 12px; |
| 13 | background-repeat: no-repeat; | 11 | background-repeat: no-repeat; |
| @@ -15,7 +13,7 @@ | |||
| 15 | color: #555; | 13 | color: #555; |
| 16 | 14 | ||
| 17 | &.geolink { | 15 | &.geolink { |
| 18 | background-color: rgb(248, 248, 129); | 16 | background-color: rgb(248 248 129); |
| 19 | } | 17 | } |
| 20 | 18 | ||
| 21 | &.doclink { | 19 | &.doclink { |
| @@ -24,12 +22,36 @@ | |||
| 24 | 22 | ||
| 25 | &:hover { | 23 | &:hover { |
| 26 | background-image: none; | 24 | background-image: none; |
| 27 | |||
| 28 | font-weight: bolder; | 25 | font-weight: bolder; |
| 29 | text-decoration: none; | 26 | text-decoration: none; |
| 30 | } | 27 | } |
| 31 | } | 28 | } |
| 32 | 29 | ||
| 30 | *:has(> nav) { | ||
| 31 | position: absolute; | ||
| 32 | right: 10px; | ||
| 33 | bottom: 10px; | ||
| 34 | |||
| 35 | /* FIXME Hide nav at proper time */ | ||
| 36 | display: none; | ||
| 37 | padding: 0.5rem; | ||
| 38 | min-width: 120px; | ||
| 39 | border: 2px solid gray; | ||
| 40 | border-radius: 0.5rem; | ||
| 41 | background-color: white; | ||
| 42 | z-index: 500; | ||
| 43 | |||
| 44 | &:has(> nav:empty) { | ||
| 45 | display: none; | ||
| 46 | } | ||
| 47 | |||
| 48 | ol { | ||
| 49 | margin-top: 0; | ||
| 50 | margin-bottom: 0.5rem; | ||
| 51 | } | ||
| 52 | } | ||
| 53 | |||
| 54 | |||
| 33 | .DumbyMap { | 55 | .DumbyMap { |
| 34 | position: relative; | 56 | position: relative; |
| 35 | max-width: 60em; | 57 | max-width: 60em; |
| @@ -37,6 +59,7 @@ | |||
| 37 | padding: 0; | 59 | padding: 0; |
| 38 | display: flex; | 60 | display: flex; |
| 39 | overflow-x: scroll; | 61 | overflow-x: scroll; |
| 62 | |||
| 40 | /* height: 100vh; */ | 63 | /* height: 100vh; */ |
| 41 | 64 | ||
| 42 | .Showcase { | 65 | .Showcase { |
| @@ -69,7 +92,8 @@ | |||
| 69 | background: white; | 92 | background: white; |
| 70 | margin: 2px; | 93 | margin: 2px; |
| 71 | border: 3px solid transparent; | 94 | border: 3px solid transparent; |
| 72 | &[data-focus=true] { | 95 | |
| 96 | &[data-focus="true"] { | ||
| 73 | border: 3px solid gray; | 97 | border: 3px solid gray; |
| 74 | } | 98 | } |
| 75 | } | 99 | } |
| @@ -94,7 +118,7 @@ | |||
| 94 | } | 118 | } |
| 95 | 119 | ||
| 96 | /* Left border to indicate there is a block */ | 120 | /* Left border to indicate there is a block */ |
| 97 | .DumbyMap[data-layout]:not([data-layout=overlay]) { | 121 | .DumbyMap[data-layout]:not([data-layout="overlay"]) { |
| 98 | .draggable-block{ | 122 | .draggable-block{ |
| 99 | width: calc(100% + 0.5em); | 123 | width: calc(100% + 0.5em); |
| 100 | border-left: #f0f0f0 0.5em solid; | 124 | border-left: #f0f0f0 0.5em solid; |
| @@ -103,9 +127,8 @@ | |||
| 103 | } | 127 | } |
| 104 | } | 128 | } |
| 105 | 129 | ||
| 106 | .DumbyMap[data-layout]:not([data-layout=none]) { | 130 | .DumbyMap[data-layout]:not([data-layout="none"]) { |
| 107 | margin: 0 auto; | 131 | margin: 0 auto; |
| 108 | |||
| 109 | height: 100vh; | 132 | height: 100vh; |
| 110 | width: 100%; | 133 | width: 100%; |
| 111 | max-width: none; | 134 | max-width: none; |
| @@ -121,7 +144,7 @@ | |||
| 121 | } | 144 | } |
| 122 | } | 145 | } |
| 123 | 146 | ||
| 124 | .DumbyMap[data-layout=side] { | 147 | .DumbyMap[data-layout="side"] { |
| 125 | .Showcase, | 148 | .Showcase, |
| 126 | .SemanticHtml { | 149 | .SemanticHtml { |
| 127 | flex: 50%; | 150 | flex: 50%; |
| @@ -130,7 +153,7 @@ | |||
| 130 | } | 153 | } |
| 131 | } | 154 | } |
| 132 | 155 | ||
| 133 | .DumbyMap[data-layout=overlay] { | 156 | .DumbyMap[data-layout="overlay"] { |
| 134 | .Showcase, | 157 | .Showcase, |
| 135 | .SemanticHtml { | 158 | .SemanticHtml { |
| 136 | position: fixed; | 159 | position: fixed; |
| @@ -175,7 +198,7 @@ | |||
| 175 | top: 0; | 198 | top: 0; |
| 176 | left: 0; | 199 | left: 0; |
| 177 | position: sticky; | 200 | position: sticky; |
| 178 | background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1) 60%); | 201 | background: linear-gradient(0deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 100%) 60%); |
| 179 | margin-bottom: -18px; | 202 | margin-bottom: -18px; |
| 180 | transform: translate(0, -16px); | 203 | transform: translate(0, -16px); |
| 181 | width: 100%; | 204 | width: 100%; |
| @@ -184,9 +207,11 @@ | |||
| 184 | text-align: center; | 207 | text-align: center; |
| 185 | z-index: 9999; | 208 | z-index: 9999; |
| 186 | transition: all 0.3s ease-out; | 209 | transition: all 0.3s ease-out; |
| 210 | |||
| 187 | &:hover { | 211 | &:hover { |
| 188 | background: #e1e1e1; | 212 | background: #e1e1e1; |
| 189 | padding-block: 1em 0.5em; | 213 | padding-block: 1em 0.5em; |
| 214 | |||
| 190 | & ~ * { | 215 | & ~ * { |
| 191 | opacity: 0.7; | 216 | opacity: 0.7; |
| 192 | color: gray; | 217 | color: gray; |
| @@ -205,29 +230,6 @@ | |||
| 205 | } | 230 | } |
| 206 | } | 231 | } |
| 207 | 232 | ||
| 208 | *:has(> nav) { | ||
| 209 | position: absolute; | ||
| 210 | right: 10px; | ||
| 211 | bottom: 10px; | ||
| 212 | /* FIXME Hide nav at proper time */ | ||
| 213 | display: none; | ||
| 214 | |||
| 215 | padding: 0.5rem; | ||
| 216 | min-width: 120px; | ||
| 217 | border: 2px solid gray; | ||
| 218 | border-radius: 0.5rem; | ||
| 219 | background-color: white; | ||
| 220 | z-index: 500; | ||
| 221 | |||
| 222 | &:has(> nav:empty) { | ||
| 223 | display: none; | ||
| 224 | } | ||
| 225 | ol { | ||
| 226 | margin-top: 0; | ||
| 227 | margin-bottom: 0.5rem; | ||
| 228 | } | ||
| 229 | } | ||
| 230 | |||
| 231 | .bold-options { | 233 | .bold-options { |
| 232 | font-weight: bold; | 234 | font-weight: bold; |
| 233 | } | 235 | } |