From c9fa07f1a19966ca061849099adf169005f1d585 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 17 Oct 2024 23:49:07 +0800 Subject: style: stylelint --- src/css/dumbymap.css | 273 +++++++++++++++++++++++++-------------------------- 1 file changed, 136 insertions(+), 137 deletions(-) (limited to 'src') diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index f13119a..18ace27 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css @@ -166,7 +166,6 @@ root { } } - .menu { display: block; overflow: visible; @@ -314,6 +313,17 @@ root { } } +.point-by-arrow { + display: none; + padding: 5px; + + position: absolute; + + transform: translate(-50%, -50%); + cursor: crosshair; + pointer-events: none; +} + .Dumby { overflow: visible; width: 100%; @@ -443,127 +453,6 @@ root { } } -.Dumby[data-layout='side-by-side'] { - &::after { - animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); - } - - .SemanticHtml, - .Showcase { - width: 50%; - min-width: 20%; - - position: absolute; - top: 0; - } - - .SemanticHtml { - left: 0; - } - - .Showcase { - display: block; - - right: 0; - } - - .bar { - display: flex; - overflow: visible; - width: 1px; - height: 100%; - - position: absolute; - left: 50%; - top: 0; - z-index: 5; - - border: 2px black solid; - - .bar-handle { - display: inline-block; - width: 60px; - height: 60px; - - position: absolute; - left: -30px; - top: calc(50% - 30px); - - border-radius: 50%; - - background-color: #3887be; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+'); - - transition: transform 0.3s ease-in-out; - transform: scale(0.5, 0.5); - cursor: grab; - box-shadow: inset 0 0 0 4px white; - - &:hover { - transform: unset; - } - } - } -} - -.Dumby[data-layout='overlay'] { - &::after { - animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); - } - - .SemanticHtml, - .Showcase { - display: block; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - - position: fixed; - left: 0; - top: 0; - } - - .Showcase { - z-index: 0; - } - - .SemanticHtml { - pointer-events: none; - - z-index: 1; - } -} - -.Dumby[data-layout='sticky'] { - .SemanticHtml { - max-width: 60em; - margin: 0 auto; - } - - .draggable-block { - position: fixed; - - &::before { - display: none; - } - } - - .Showcase { - display: block; - overflow: hidden; - width: 20vw; - min-width: 10vw; - height: 200px; - min-height: 100px; - resize: both; - - .mapclay { - border-radius: 4px !important; - } - } -} - .utils { display: flex; padding-block: 1rem; @@ -623,8 +512,8 @@ root { font-size: 0.8rem; transition: - opacity .3s linear, - visibility .3s linear; + opacity .3s linear, + visibility .3s linear; visibility: hidden; opacity: 0; pointer-events: auto; @@ -634,11 +523,6 @@ root { opacity: 1; } - /** Hide block with map in focus, which is the only element */ - &:has(pre:only-child [data-placeholder]:only-child) { - display: none; - } - /* Fade out top of contents scrolling */ &::before { content: ''; @@ -737,6 +621,127 @@ root { } } +.Dumby[data-layout='side-by-side'] { + &::after { + animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); + } + + .SemanticHtml, + .Showcase { + width: 50%; + min-width: 20%; + + position: absolute; + top: 0; + } + + .SemanticHtml { + left: 0; + } + + .Showcase { + display: block; + + right: 0; + } + + .bar { + display: flex; + overflow: visible; + width: 1px; + height: 100%; + + position: absolute; + left: 50%; + top: 0; + z-index: 5; + + border: 2px black solid; + + .bar-handle { + display: inline-block; + width: 60px; + height: 60px; + + position: absolute; + left: -30px; + top: calc(50% - 30px); + + border-radius: 50%; + + background-color: #3887be; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+'); + + transition: transform 0.3s ease-in-out; + transform: scale(0.5, 0.5); + cursor: grab; + box-shadow: inset 0 0 0 4px white; + + &:hover { + transform: unset; + } + } + } +} + +.Dumby[data-layout='overlay'] { + &::after { + animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); + } + + .SemanticHtml, + .Showcase { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + + position: fixed; + left: 0; + top: 0; + } + + .Showcase { + z-index: 0; + } + + .SemanticHtml { + pointer-events: none; + + z-index: 1; + } +} + +.Dumby[data-layout='sticky'] { + .SemanticHtml { + max-width: 60em; + margin: 0 auto; + } + + .draggable-block { + position: fixed; + + &::before { + display: none; + } + } + + .Showcase { + display: block; + overflow: hidden; + width: 20vw; + min-width: 10vw; + height: 200px; + min-height: 100px; + resize: both; + + .mapclay { + border-radius: 4px !important; + } + } +} + .dumby-block:has(pre:only-child [data-placeholder]:only-child) { overflow: clip; @@ -770,13 +775,7 @@ root { } } -.point-by-arrow { +/** Hide block with map in focus, which is the only element */ +.draggable-block:has(pre:only-child [data-placeholder]:only-child) { display: none; - padding: 5px; - - position: absolute; - - transform: translate(-50%, -50%); - cursor: crosshair; - pointer-events: none; } -- cgit v1.2.3-70-g09d2