style.css
ASCII text
1@import "/static/efficient-ui/MASTER.css"; 2 3:root { 4--gap-navbar: 1rem; 5--width-navbar-button: 0; 6--text-soft: #000000C0; 7--text-softer: #0000009A; 8--text-faint: #00000066; 9--color-shape-label: #0097A7; --color-shape-label-text: #ffffff; 10/*view-transition-name: root;*/ 11} 12 13nav { 14/*view-transition-name: nav;*/ 15} 16 17p { 18color: var(--text-soft); 19} 20 21iconify-icon { 22display: inline-block; 23width: 1em; 24height: 1em; 25} 26 27:is(#shape-selector, #shape-options) > button > iconify-icon { 28font-size: 2rem; 29} 30 31#annotation-zone { 32position: relative; 33user-select: none; 34} 35 36#annotation-image { 37user-drag: none; 38-webkit-user-drag: none; 39image-rendering: pixelated; 40} 41 42#annotation-zone > svg { 43z-index: 1; 44position: absolute; 45top: 0; 46left: 0; 47width: 100%; 48height: 100%; 49} 50 51.annotation-ruler { 52z-index: 2; 53position: absolute; 54top: 0; 55left: 0; 56background: var(--color-accent); 57display: none; 58} 59 60#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary { 61height: 1px; 62width: 100%; 63} 64 65#annotation-ruler-vertical, #annotation-ruler-vertical-secondary { 66width: 1px; 67height: 100%; 68} 69 70.shape { 71stroke: var(--color-accent); 72fill: var(--color-accent); 73fill-opacity: 0.1; 74stroke-width: 2px; 75vector-effect: non-scaling-stroke; 76pointer-events: auto; 77transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1), 78fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1), 79stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1); 80stroke-linecap: square; 81stroke-linejoin: miter; 82} 83 84.shape-polyline { 85fill: none; 86} 87 88.shape-point { 89stroke: var(--color-accent); 90stroke-width: 2px; 91fill-opacity: 1; 92r: 2; 93transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 94stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 95filter 0.25s cubic-bezier(0.61, 1, 0.88, 1); 96} 97 98.shape.selected { 99fill-opacity: 0.2; 100stroke-width: 4px; 101filter: drop-shadow(0 0 2px var(--text-soft)); 102} 103 104.shape-point.selected { 105fill-opacity: 1; 106r: 6; 107stroke-width: 6px; 108} 109 110.shape-container, .shape-container-viewonly { 111pointer-events: none; 112} 113 114#annotation-helper-message { 115min-height: 2lh; 116} 117 118.shape-container-viewonly > .shape { 119fill: var(--color-info); 120stroke: var(--color-info); 121fill-opacity: 0; 122stroke-opacity: 0; 123transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1), 124stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1); 125} 126 127.shape-container-viewonly > .shape-polyline { 128fill: none; 129} 130 131.shape-container-viewonly > .shape-point { 132stroke: var(--color-info); 133} 134 135.shape-label { 136font-size: 1.5rem; 137font-weight: 500; 138color: var(--color-shape-label-text); 139pointer-events: none; 140height: 32px; 141padding-left: 8px; 142padding-right: 8px; 143display: flex; 144align-items: center; 145justify-content: center; 146background: var(--color-shape-label); 147width: max-content; 148box-shadow: var(--shadow-button); 149/* top-left corner is square to point to the shape */ 150border-radius: 0 16px 16px 16px; 151opacity: 0; 152transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1), 153transform 0.375s cubic-bezier(0.16, 1, 0.3, 1); 154transform: scale(0); 155transform-origin: top left; 156z-index: 3; 157} 158 159/* Only show region parts when checkbox is checked */ 160#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label { 161opacity: 1; 162transform: scale(1); 163} 164 165#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape { 166fill-opacity: 0.1; 167stroke-opacity: 1; 168} 169 170/* Disabled for now, until there is more navigation that would benefit from transitions */ 171/* 172@view-transition { 173navigation: auto; 174} 175 176@keyframes move-out { 177from { 178transform: translateX(0%); 179} 180to { 181transform: translateX(-100%); 182} 183} 184 185@keyframes move-in { 186from { 187transform: translateX(100%); 188} 189to { 190transform: translateX(0%); 191} 192} 193 194@media (prefers-reduced-motion: no-preference) { 195::view-transition-old(root), 196::view-transition-new(root) { 197animation-duration: 0.25s; 198animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 199} 200 201::view-transition-old(root) { 202animation-name: move-out; 203} 204 205::view-transition-new(root) { 206animation-name: move-in; 207} 208} 209*/ 210