From 3f4f3b63574726ea98861cfea0dd830bedbfb0ac Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Wed, 25 Sep 2024 11:40:31 +0800 Subject: chore(CSS): improve looking --- src/Layout.mjs | 2 +- src/css/dumbymap.css | 123 ++++++++++++++++++++++++++++++++++++++------------- src/css/style.css | 4 ++ 3 files changed, 97 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/Layout.mjs b/src/Layout.mjs index 53b81fe..abefd4d 100644 --- a/src/Layout.mjs +++ b/src/Layout.mjs @@ -65,7 +65,7 @@ export class Overlay extends Layout { element.onmouseover = () => { popTimer = setTimeout(() => { siblings.forEach(e => e.style.removeProperty('z-index')) - element.style.zIndex = '9000' + element.style.zIndex = '9001' }, 200) } element.onmouseout = () => { diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index 3826ffc..985f5ec 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css @@ -14,7 +14,7 @@ @keyframes fade-out { from { opacity: 1; } - to { opacity: 0; visibility: hidden; } + to { visibility: hidden; opacity: 0; } } @keyframes map-fade-in { @@ -28,7 +28,32 @@ } .map-container { + position: relative; transform-origin: top left; + + &.focus::after { + content: "Map-ID: " attr(id); + padding: .3rem .5rem; + + position: absolute; + left: 50%; + top: 50%; + z-index: 9999; + + border: solid transparent; + border-radius: 5px; + + background: gray; + + color: white; + font-size: 1.5rem; + font-weight: bold; + line-height: 1.2; + + transform: translate(-50%, -50%); + opacity: 0; + animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21); + } } .with-leader-line:not(:has(> *)) { @@ -96,30 +121,32 @@ &::before { content: ""; height: calc(100% - 2rem); - position: absolute; + position: absolute; left: 0.8rem; border-left: 0.5em solid #e0e0e0; + transition: border-color .5s linear; } &.focus { + + /* Dress up when block is focus */ + /* background: var(--block-focus-color); */ &::before { border-color: chocolate; } &::after { - z-index: 9999; content: counter(block) "/" attr(data-total); padding: .3rem .5rem; position: absolute; - left: 0; - top: 10px; left: 50%; - transform: translateX(-50%); + top: 50%; + z-index: 9999; border: solid transparent; border-radius: 5px; @@ -130,6 +157,7 @@ font-size: 1.5em; font-weight: bold; + transform: translate(-50%, -50%); opacity: 0; animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21); } @@ -152,36 +180,32 @@ overflow-y: auto; gap: 1rem; - pre { - width: 100%; + justify-content: flex-start; - &:has(.map-container) { - display: flex; - justify-content: flex-start; + :has(.map-container, [data-placeholder]) { + display: flex; + gap: 0.5em; - background-color: inherit; - } + background-color: white; } + /* if Map not in showcase, add border when focused */ .map-container { - margin: 2px; - border: 3px solid transparent; - background: white; - &.focus { border: 3px solid gray; } } [data-placeholder] { - margin: 2px; - border: 3px solid gray; + flex-grow: 0; - opacity: 0.3; - animation: map-fade-out 1s; + & > * { + opacity: 0.3; + } + /* animation: map-fade-out 1s; */ } } @@ -206,13 +230,43 @@ } } + &::after { + content: "Layout: " attr(data-layout); + padding: .3rem .5rem; + + position: absolute; + left: 50%; + top: 50%; + z-index: 9999; + + border: solid transparent; + border-radius: 5px; + + background: gray; + + color: white; + font-size: 1.5rem; + font-weight: bold; + line-height: 1.2; + + transform: translate(-50%, -50%); + opacity: 0; + } } .Dumby[data-layout="normal"] { max-width: 60em; + + &::after { + animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21); + } } .Dumby[data-layout="side-by-side"] { + &::after { + animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21); + } + .SemanticHtml, .Showcase { width: 50%; @@ -273,6 +327,10 @@ } .Dumby[data-layout="overlay"] { + &::after { + animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21); + } + .SemanticHtml, .Showcase { display: block; @@ -357,6 +415,7 @@ pointer-events: auto; &:has(.dumby-block.focus) { + z-index: 9001; outline: solid #505050 1px; border-color: #505050 } @@ -365,19 +424,20 @@ display: none; } + /* Fade out top of contents scrolling */ &::before { content: ''; display: block; height: 1.5rem; position: absolute; - top: 0; left: 0; + top: 0; right: 0; + z-index: 1; - border: none; + border-radius: 5px; - z-index: 1; background: linear-gradient(0deg, rgb(255 255 255 / 0%), white 60%); } @@ -387,8 +447,10 @@ position: relative; - border: solid transparent 3px; + /* Don't make corner overflow! */ + border: solid transparent 2px; border-radius: 0.5rem; + resize: both; min-width: 5rem; max-width: 25vw; @@ -397,6 +459,7 @@ padding-inline: 1rem; padding-block: 1rem 0; + /* Remove indicator when inside draggable-block */ &::before { display: none; } @@ -408,12 +471,6 @@ max-height: unset; } - /* gray out top of content, make draggable part easy to be seen */ - - /* &.focus::before { */ - /* background: linear-gradient(0deg, rgb(255 255 255 / 0%), var(--block-focus-color) 60%); */ - /* } */ - .map-container { min-width: 200px; } @@ -448,6 +505,10 @@ transition: all 0.5s; visibility: hidden; opacity: 0; + + .utils { + visibility: hidden !important; + } } &.drag, &:has(.draggable-part:hover) { diff --git a/src/css/style.css b/src/css/style.css index 122e027..9f15574 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -66,6 +66,10 @@ a:hover { text-decoration: underline; } +pre { + width: 100%; +} + pre:has(code) { display: block; margin: 0 0 10px; -- cgit v1.2.3-70-g09d2