style.css (8926B)
1 /* ===== Fonts & Root ===== */ 2 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"); 3 4 :root { 5 /* Root font and rendering settings */ 6 font-family: "Noto Sans JP", sans-serif; 7 font-optical-sizing: auto; 8 font-weight: 400; 9 font-style: normal; 10 line-height: 1.5; 11 12 color-scheme: light dark; 13 color: rgba(255, 255, 255, 0.87); 14 background-color: #242424; 15 16 font-synthesis: none; 17 text-rendering: optimizeLegibility; 18 -webkit-font-smoothing: antialiased; 19 -moz-osx-font-smoothing: grayscale; 20 } 21 22 /* Light theme overrides */ 23 @media (prefers-color-scheme: light) { 24 :root { 25 color: #213547; 26 background-color: #ffffff; 27 } 28 a:hover { 29 color: #747bff; 30 } 31 button { 32 background-color: #f9f9f9; 33 } 34 } 35 36 /* ===== Reset ===== */ 37 /* Basic reset to normalize box sizing and remove default spacing */ 38 * { 39 box-sizing: border-box; 40 margin: 0; 41 padding: 0; 42 } 43 44 button { 45 font-family: inherit; 46 } 47 48 /* ===== Base / Layout ===== */ 49 /* Base page container and defaults */ 50 html, 51 body, 52 #app { 53 font-family: inherit; 54 background-color: #f4f4f9; 55 color: #333; 56 display: flex; 57 flex-direction: column; 58 height: 100vh; 59 height: -webkit-fill-available; /* iOS Safari */ 60 } 61 62 /* Header */ 63 header { 64 flex-shrink: 0; 65 padding: 8px 20px; 66 background-color: #fff; 67 border-bottom: 1px solid #ddd; 68 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 69 display: flex; 70 justify-content: space-between; 71 align-items: center; 72 position: relative; 73 z-index: 1002; 74 } 75 76 header h1 { 77 font-size: 1.2rem; 78 font-weight: 600; 79 margin: 0; 80 } 81 82 .menu-button { 83 background: none; 84 border: none; 85 cursor: pointer; 86 display: flex; 87 align-items: center; 88 justify-content: center; 89 -webkit-tap-highlight-color: transparent; 90 position: relative; 91 overflow: hidden; 92 width: 26px; 93 height: 26px; 94 } 95 96 .menu-button .material-symbols-rounded { 97 user-select: none; 98 color: #333; 99 font-size: 26px; 100 position: absolute; 101 top: 50%; 102 left: 50%; 103 transition: transform 0.2s ease-out, opacity 0.2s ease-out; 104 transform: translate(-50%, -50%) scale(1) rotate(0deg); 105 } 106 107 .menu-button .icon-close { 108 opacity: 0; 109 transform: translate(-50%, -50%) scale(0.7) rotate(-90deg); 110 } 111 .menu-button .icon-menu { 112 opacity: 1; 113 transform: translate(-50%, -50%) scale(1) rotate(0deg); 114 } 115 116 .menu-button.is-open .icon-close { 117 opacity: 1; 118 transform: translate(-50%, -50%) scale(1) rotate(0deg); 119 } 120 .menu-button.is-open .icon-menu { 121 opacity: 0; 122 transform: translate(-50%, -50%) scale(0.7) rotate(90deg); 123 } 124 125 /* ===== Menu ===== */ 126 .sidebar-overlay { 127 position: fixed; 128 inset: 0; 129 background-color: rgba(0, 0, 0, 0.5); 130 z-index: 1000; 131 } 132 133 .sidebar-menu { 134 position: fixed; 135 top: 0; 136 right: 0; 137 width: 200px; 138 max-width: 60%; 139 height: 100vh; 140 padding: 50px 15px 15px 15px; 141 background-color: #fff; 142 box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); 143 z-index: 1001; 144 display: flex; 145 flex-direction: column; 146 } 147 148 .sidebar-menu h2 { 149 font-size: 1.2rem; 150 font-weight: 600; 151 padding: 6px 6px 6px 6px; 152 margin: 0 0 6px 0; 153 border-bottom: 1px solid #999; 154 } 155 .sidebar-menu ul { 156 list-style: none; 157 padding: 0; 158 margin: 0; 159 } 160 .sidebar-menu li a { 161 display: block; 162 padding: 6px; 163 text-decoration: none; 164 color: #333; 165 border-bottom: 1px solid #f9f9f9; 166 } 167 .sidebar-menu li a:active { 168 background-color: #f0f0f0; 169 } 170 171 .fade-enter-active, 172 .fade-leave-active { 173 transition: opacity 0.25s ease; 174 } 175 .fade-enter-from, 176 .fade-leave-to { 177 opacity: 0; 178 } 179 180 .slide-enter-active, 181 .slide-leave-active { 182 transition: transform 0.25s ease-out; 183 } 184 .slide-enter-from, 185 .slide-leave-to { 186 transform: translateX(100%); 187 } 188 189 /* ===== Main content & columns ===== */ 190 .main-content { 191 flex-grow: 1; 192 display: flex; 193 flex-direction: column; 194 overflow-y: auto; 195 gap: 0; 196 padding-bottom: 16px; 197 padding: 16px; 198 } 199 200 /* Desktop columns */ 201 @media (min-width: 1024px) { 202 .main-content { 203 flex-direction: row; /* side-by-side layout */ 204 gap: 24px; 205 overflow-y: hidden; 206 } 207 208 .main-column-left { 209 flex-grow: 1; 210 min-width: 0; 211 display: flex; 212 flex-direction: column; 213 } 214 215 .main-column-right { 216 flex-shrink: 0; 217 width: 380px; 218 height: 100%; 219 overflow-y: auto; /* only right column scrolls */ 220 scrollbar-width: thin; 221 scrollbar-color: #ccc #f4f4f9; 222 } 223 224 .main-column-right .gallery { 225 margin-bottom: 24px; 226 } 227 } 228 229 /* ===== Canvas area ===== */ 230 /* Canvas container and placeholder */ 231 .canvas-wrapper { 232 flex-grow: 1; 233 flex-shrink: 0; 234 width: 100%; 235 background-color: #eee; 236 border-radius: 8px; 237 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); 238 min-height: 250px; 239 display: flex; 240 align-items: center; 241 justify-content: center; 242 overflow: hidden; 243 } 244 245 .canvas-wrapper.has-image { 246 background-color: transparent; 247 min-height: 0; 248 align-items: flex-start; 249 justify-content: flex-start; 250 } 251 252 .canvas-placeholder { 253 color: #888; 254 font-size: 0.9rem; 255 } 256 257 /* Canvas controls */ 258 .canvas-controls { 259 flex-shrink: 0; 260 display: flex; 261 justify-content: space-between; 262 margin: 12px 4px; 263 flex-wrap: wrap; 264 gap: 12px; 265 } 266 267 /* ===== Buttons ===== */ 268 .btn { 269 border: none; 270 color: white; 271 padding: 8px 12px; 272 border-radius: 6px; 273 font-weight: 500; 274 cursor: pointer; 275 transition: all 0.2s; 276 font-size: 0.9rem; 277 display: inline-flex; 278 flex-direction: row; 279 align-items: center; 280 justify-content: center; 281 gap: 4px; 282 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 283 min-width: 36px; 284 min-height: 36px; 285 } 286 287 .btn-save { 288 background-color: #007aff; 289 } 290 291 .btn:hover { 292 background-color: #0056b3; 293 } 294 295 .btn-del-selected { 296 background-color: #e53935; 297 } 298 299 .btn-del-selected:hover { 300 background-color: #b62323; 301 } 302 303 .button-text { 304 margin-top: -3px; 305 } 306 307 .btn .material-symbols-rounded { 308 font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; 309 font-size: 1.3rem; 310 } 311 312 /* ===== Gallery ===== */ 313 .gallery { 314 flex-shrink: 0; 315 background-color: #fff; 316 border-radius: 8px; 317 padding: 16px; 318 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 319 display: flex; 320 flex-direction: column; 321 margin-bottom: 16px; 322 width: 100%; 323 box-sizing: border-box; 324 overflow: hidden; 325 } 326 327 .gallery-header { 328 display: flex; 329 justify-content: space-between; 330 align-items: center; 331 margin-bottom: 12px; 332 gap: 16px; 333 } 334 .gallery-header-info { 335 flex-grow: 1; 336 display: flex; 337 align-items: baseline; 338 gap: 8px; 339 min-width: 0; 340 } 341 .gallery-input { 342 flex-shrink: 0; 343 position: sticky; 344 right: 0px; 345 background-image: linear-gradient(to right, transparent 0%, #ffffff55 6px, #fff 12px); 346 z-index: 100; 347 padding-left: 12px; 348 } 349 350 .gallery-input .btn { 351 width: 100px; 352 height: 100px; 353 min-width: 100px; 354 min-height: 100px; 355 border-radius: 6px; 356 background-color: transparent; 357 border: 2px dashed #007aff; 358 color: #007aff; 359 transition: all 0.2s; 360 box-shadow: none; 361 flex-direction: column; 362 padding: 8px; 363 gap: 2px; 364 font-weight: 500; 365 cursor: pointer; 366 font-size: 0.9rem; 367 display: inline-flex; 368 align-items: center; 369 justify-content: center; 370 } 371 372 .gallery-input .btn:hover { 373 background-color: rgba(0, 122, 255, 0.05); 374 border-color: #0056b3; 375 color: #0056b3; 376 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); 377 } 378 379 .gallery-input .btn .material-symbols-rounded { 380 font-size: 32px; 381 } 382 383 .gallery h3 { 384 font-size: 1rem; 385 font-weight: 600; 386 margin: 0; 387 flex-shrink: 0; 388 } 389 390 .gallery p { 391 font-size: 0.8rem; 392 color: #666; 393 margin: 0; 394 white-space: nowrap; 395 overflow: hidden; 396 text-overflow: ellipsis; 397 } 398 399 .gallery-container { 400 width: 100%; 401 padding: 0; 402 overflow-x: auto; 403 -webkit-overflow-scrolling: touch; 404 position: relative; 405 } 406 407 .gallery-container::-webkit-scrollbar { 408 height: 6px; 409 } 410 411 .gallery-container::-webkit-scrollbar-track { 412 background: transparent; 413 } 414 415 .gallery-container::-webkit-scrollbar-thumb { 416 background-color: rgba(0, 0, 0, 0.2); 417 border-radius: 3px; 418 } 419 420 .gallery ul { 421 list-style: none; 422 display: flex; 423 margin-left: -12px; 424 padding-bottom: 8px; 425 position: relative; 426 } 427 428 .gallery li { 429 flex-shrink: 0; 430 position: relative; 431 border-radius: 6px; 432 overflow: hidden; 433 margin-left: 12px; 434 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 435 } 436 437 .thumbnail { 438 width: 100px; 439 height: 100px; 440 object-fit: cover; 441 cursor: pointer; 442 display: block; 443 background-color: #eee; 444 } 445 446 .thumbnail:active { 447 filter: brightness(0.8); 448 } 449 450 .delete-btn { 451 position: absolute; 452 top: 4px; 453 right: 4px; 454 width: 24px; 455 height: 24px; 456 border-radius: 50%; 457 background-color: rgba(0, 0, 0, 0.6); 458 color: white; 459 border: none; 460 cursor: pointer; 461 display: flex; 462 align-items: center; 463 justify-content: center; 464 line-height: 1; 465 transition: all 0.2s; 466 } 467 468 .delete-btn .material-symbols-rounded { 469 font-size: 16px; 470 } 471 472 .delete-btn:hover { 473 background-color: #000; 474 } 475 476 /* ===== File input (hidden) ===== */ 477 /* Hide default file input and style label as button */ 478 .file-input { 479 width: 0.1px; 480 height: 0.1px; 481 opacity: 0; 482 overflow: hidden; 483 position: absolute; 484 z-index: -1; 485 }