style.css (15473B)
1 /* main body styling */ 2 body,button{background:#1a1a1a;color:#cfcfcf;font-family:sans-serif;margin:0;position: relative;} 3 body details {text-transform: capitalize} 4 body details div.file-item a {text-transform: none} 5 a{color:#add8e6;text-decoration:none} 6 input[type="url"], input[type="text"], .list-filter-input {background:#1a1a1a;color:#cfcfcf;border:1px solid gray;margin: 8px;padding:8px;outline: none; box-sizing: border-box} 7 input[type="url"]:focus, input[type="text"]:focus{border:1px solid white;background-color:#3a3a3a} 8 div#search-container {border-left:1px solid gray; display: flex; align-items: center} 9 span.required {color: red} 10 textarea {background: unset; color: #cfcfcf} 11 textarea:focus {outline: none} 12 13 /* nav menu */ 14 nav ul{flex:1 1 auto;list-style:none} 15 nav {display:flex; border-bottom:0.1rem solid gray;margin:0;padding:0} 16 nav ul {margin: 0; padding: 0} 17 nav ul li{border-right:1px solid gray} 18 nav ul li a,nav ul li strong{padding:1rem;display:inline-block} 19 nav ul li a span {vertical-align: middle; padding-left: 0.3rem} 20 nav ul li a:hover{background-color:#2a2a2a} 21 nav ul li a svg{width:1.4rem; vertical-align:middle} 22 nav ul li a svg path{fill:#cfcfcf} 23 nav ul li ul li a,nav>ul>li>a{display:block} 24 nav ul li ul li ul li a{white-space:nowrap} 25 nav ul li ul li ul{top:0;left:100%;display:none} 26 nav ul li ul li,nav>ul>li{position:relative} 27 nav ul li ul li:hover>ul,nav ul li:hover>ul{display:block} 28 nav ul li ul{display:none;position:absolute;top:100%;left:0;z-index:1000;padding:0} 29 nav ul.sub-menu, nav ul.sub-menu li ul {border: 1px solid gray} 30 nav ul.sub-menu li {border-right: none} 31 nav ul.sub-menu li a{color:#add8e6;background:#1a1a1a; min-width: max-content; text-transform:capitalize} 32 nav ul.sub-menu li ul li a{min-width: 170px} 33 nav ul.sub-menu li a:hover{background:#2a2a2a} 34 nav ul li ul li{display:block} 35 nav ul li ul li ul li a{max-width:320px;overflow:hidden;text-overflow:ellipsis} 36 nav ul.sub-menu li.tag-filter{background:#1a1a1a} 37 nav ul.sub-menu li.tag-filter input{width:calc(100% - 16px)} 38 39 /* responsive nav bar */ 40 @media (max-width: 900px) { 41 nav>ul>li>a span {display:none} 42 nav>ul>li>a svg {display:inline-block; margin:0 auto; width:1.8rem} 43 nav>ul>li>a {padding:0.8rem} 44 div#search-container form input {width:120px} 45 } 46 @media (max-width: 600px) { 47 div#search-container form input {width:80px} 48 } 49 50 /* fix whitespace in nav */ 51 nav ul { font-size: 0; } 52 nav ul li { font-size: 1rem; } 53 54 /* gallery styling */ 55 div.gallery-item {padding:1rem} 56 div.gallery-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} 57 div.gallery-item a svg{filter: invert(100%);} 58 div.gallery-item,div.gallery-item a,nav>ul>li{display:inline-block} 59 div.play-button {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 15px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent} 60 div.gallery-video {position: relative; display: inline-block} 61 62 /* descriptions */ 63 div.description-section {margin: 20px 0; padding: 15px;} 64 div#current-description {background: #2a2a2a; padding: 10px; border-radius: 3px; margin-bottom: 10px; white-space: pre-wrap; min-height: 20px;} 65 div#no-description {color: #666; font-style: italic; margin-bottom: 10px; padding: 10px;} 66 textarea#description-textarea {width: 100%; max-width: 600px; padding: 8px; border: 1px solid #ccc; border-radius: 3px; font-family: inherit; resize: vertical;} 67 button.text-button {border:none; background:none; color:#add8e6; cursor:pointer; padding:0; margin-left:2px;cursor: pointer;} 68 button.text-button::before{content:"[ "} 69 button.text-button::after{content:" ]"} 70 div.file-container {display: flex} 71 div.file-sidebar {flex: 0 0 auto; min-width: 15em} 72 div.file-sidebar details {padding: 0.7rem} 73 span.file-tag-category,div.file-sidebar details ul li a {text-transform:capitalize} 74 div.file-sidebar details ul li form {display:inline} 75 button#copy-btn {margin-top: 5px} 76 77 details > summary {list-style: none; cursor: pointer; } 78 details > summary::before {content: "[+]"; display: inline-block; width: 2ch; margin-right: 0.5ch;} 79 details[open] > summary::before {content: "[-]";} 80 81 /* text viewer */ 82 pre#text-viewer{font-family:serif;font-size:25px;line-height:1.8} 83 #text-viewer-container{max-width:800px; margin:1em 0} 84 #text-viewer-container div{display:flex; justify-content:space-between; margin-bottom:5px;} 85 #text-viewer-container:fullscreen{margin:0;max-width:75%;margin:auto;height:100vh;padding:1em;background:#000;display:flex;flex-direction:column} 86 #text-viewer-container:fullscreen #text-viewer{flex:1;max-height:none!important;margin:0;height:100%} 87 #text-viewer-container:fullscreen>div{flex-shrink:0} 88 pre#text-viewer {white-space:pre-wrap; overflow:auto; background:#111; color:#eee; padding:10px; border-radius:8px; max-height:500px;} 89 90 img.file-content-image {max-width:400px} 91 92 /* media containers */ 93 .media-container img, .media-container video { transition: transform 0.2s ease; display: block; margin: auto; } 94 95 /* pagination */ 96 .pagination .disabled,.pagination a{border-radius:4px;padding:.5rem 1rem} 97 .pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0;padding:1rem} 98 .pagination .disabled{color:#666;cursor:not-allowed} 99 .pagination .page-info{font-weight:700;padding:.5rem 1rem} 100 .pagination input#pageInput {width: 60px; text-align: center} 101 102 /* breadcrumb bar */ 103 .breadcrumb a,.breadcrumb span,.breadcrumb-separator{vertical-align:bottom} 104 .breadcrumb{padding:1rem;font-size:1.1rem;text-transform:capitalize} 105 .breadcrumb a:hover{text-decoration:underline} 106 .breadcrumb span{font-weight:500} 107 .breadcrumb-separator{font-size:.8em} 108 109 /* cbz viewer */ 110 .cbz-preview,.thumb-label{text-align:center} 111 .cbz-icon,.cbz-icon::after{position:absolute;transform:translate(-50%,-50%)} 112 .cbz-icon{top:50%;left:50%;width:40px;height:32px;border:3px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.5)} 113 .cbz-icon::before{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border:2px solid #fff} 114 .cbz-icon::after{content:'';top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%} 115 .cbz-viewer{max-width:1200px;margin:0 auto;padding:20px} 116 .cbz-gallery h3,.cbz-navigation{margin-bottom:20px} 117 .cbz-navigation{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f5f5f5;border-radius:8px;flex-wrap:wrap;gap:10px} 118 .nav-btn,.page-counter{padding:8px 16px;border-radius:4px} 119 .nav-buttons{display:flex;gap:10px;align-items:center} 120 .nav-btn{background:#007bff;color:#fff;text-decoration:none;font-size:14px;transition:background .2s} 121 .nav-btn:hover:not(.disabled){background:#0056b3} 122 .nav-btn.disabled{background:#ccc;cursor:not-allowed;color:#666} 123 .nav-btn.back-btn{background:#6c757d} 124 .nav-btn.back-btn:hover{background:#545b62} 125 .page-counter{background:#fff;font-weight:700} 126 .cbz-image-container{display:flex;justify-content:center;align-items:center;margin-bottom:30px;background:#000;border-radius:8px;min-height:600px} 127 .cbz-image{max-width:100%;max-height:800px;object-fit:contain} 128 .cbz-gallery{margin-top:40px;padding-top:20px;border-top:2px solid #ddd} 129 .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px} 130 .gallery-thumb{position:relative;display:block;border:3px solid transparent;border-radius:8px;overflow:hidden;transition:border-color .2s,transform .2s;background:#f5f5f5} 131 .gallery-thumb:hover{border-color:#007bff;transform:scale(1.05)} 132 .gallery-thumb.active{border-color:#28a745} 133 .gallery-thumb img{width:100%;height:150px;object-fit:cover;display:block} 134 .thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;padding:4px;font-size:12px} 135 .cbz-open-button{margin-top:15px} 136 137 /* notes editor */ 138 .btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.2s} 139 .btn-primary:hover{background:#f0f0f0} 140 .btn-primary{background:#fff;color:#2563eb} 141 .btn-secondary:hover{background:#1e3a8a} 142 .btn-secondary{background:#1e40af;color:#fff;border:1px solid rgb(255 255 255 / .2)} 143 .btn-success:hover{background:#059669} 144 .btn-success{background:#10b981;color:#fff} 145 .category-header{font-weight:600;color:#2563eb;margin-bottom:8px;padding-bottom:4px;border-bottom:2px solid #2563eb} 146 .category-item{padding:4px 0;color:#374151} 147 .category-section{margin-bottom:20px} 148 .checkbox-label input{width:auto} 149 .checkbox-label{display:flex;align-items:center;gap:8px;margin-top:10px} 150 .custom-operation{display:flex;gap:10px;align-items:center;margin-top:10px} 151 .custom-sed-input{flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-family:'Monaco','Menlo','Consolas',monospace;font-size:13px} 152 .editor-container{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:500px} 153 .editor-pane{display:flex;flex-direction:column} 154 .import-form label{display:block;margin-bottom:8px;font-size:13px} 155 .import-form{margin-top:15px;padding:15px} 156 .message.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} 157 .message.show{display:block} 158 .message.success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7} 159 .message{padding:12px 20px;margin:15px 30px;border-radius:4px;font-size:14px;display:none} 160 .operation-btn:hover{border-color:#2563eb;background:#eff6ff} 161 .operation-btn{padding:10px 15px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;text-align:left;transition:all 0.2s} 162 .operation-desc{font-size:12px} 163 .operation-name{font-weight:600;font-size:13px;margin-bottom:4px} 164 .operations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:15px} 165 .operations-panel{padding:20px 30px} 166 .pane-header{padding:12px 20px;font-weight:600;font-size:14px} 167 .preview-content{flex:1;padding:20px;overflow-y:auto;font-family:'Monaco','Menlo','Consolas',monospace;font-size:13px;line-height:1.6;white-space:pre-wrap} 168 .search-box:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgb(37 99 235 / .1)} 169 .search-box{padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;width:250px} 170 .stat{display:flex;align-items:center;gap:8px} 171 .stat-label{font-size:13px} 172 .stats-bar{padding:15px 30px;display:flex;gap:30px;align-items:center} 173 .stat-value{font-weight:600;font-size:16px} 174 .toolbar label{font-size:13px} 175 .toolbar{padding:15px 30px;display:flex;gap:15px;align-items:center;flex-wrap:wrap} 176 .toolbar-actions{display:flex;gap:10px;margin-left:auto} 177 .toolbar-group{display:flex;gap:10px;align-items:center} 178 select:focus{outline:none;border-color:#2563eb} 179 select{padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;cursor:pointer} 180 textarea{flex:1;padding:20px;border:none;font-family:'Monaco','Menlo','Consolas',monospace;font-size:13px;line-height:1.6;resize:none} 181 182 /* admin 50:50 splits */ 183 div.config-container {display: flex} 184 div.config-split {flex: 1} 185 186 /* notes sed dropdown menu */ 187 .dropdown{position:relative;display:inline-block} 188 .dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #ddd;border-radius:6px;min-width:250px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:1000} 189 .dropdown:focus-within .dropdown-menu{display:block} 190 .dropdown:hover .dropdown-menu{display:block} 191 .dropdown-item{display:block;width:100%;padding:10px;text-align:left;background:0 0;border:none;cursor:pointer} 192 .dropdown-item:hover{background-color:#f5f5f5} 193 .dropdown-empty{padding:10px;color:#666;font-size:14px} 194 .operation-name{font-weight:700} 195 .operation-desc{font-size:12px;color:#666} 196 197 /* list filter input box */ 198 .list-filter-input {display: block; margin: 1rem 0; padding: 0.4rem 0.6rem; font-size: 1rem; width: 100%; max-width: 400px} 199 200 /* tag aliases */ 201 .alias-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 4px;border-bottom:1px solid #eee} 202 .alias-row:last-child{border-bottom:none} 203 .alias-input{padding:4px 7px;font-size:13px;border:1px solid #ccc;border-radius:3px;background:#fff} 204 .alias-input:focus{outline:0;border-color:#666} 205 .alias-input--category{width:110px;font-weight:600} 206 .alias-input--value{width:90px} 207 .alias-separator{color:#aaa;font-size:13px;user-select:none} 208 .alias-btn{padding:3px 7px;font-size:12px;border:1px solid #ccc;border-radius:3px;background:#f5f5f5;cursor:pointer;white-space:nowrap;line-height:1.4} 209 .alias-btn:hover{background:#e8e8e8} 210 .alias-btn--remove{color:#c00;border-color:#e0b0b0;background:#fff5f5} 211 .alias-btn--remove:hover{background:#fde8e8} 212 213 /* admin page */ 214 .admin-divider {margin:30px 0;border:none;border-top:1px solid #ddd} 215 .admin-section {max-width:800px} 216 .admin-example-heading {margin-top:0} 217 .admin-example-list {font-family:monospace;font-size:13px} 218 .admin-alert {padding:10px;border-radius:4px;margin-bottom:20px} 219 .admin-alert--error {background:#f8d7da;color:#721c24;border:1px solid #f5c6cb} 220 .admin-alert--success {background:#d4edda;color:#155724;border:1px solid #c3e6cb;padding:20px} 221 .admin-form {max-width:600px} 222 .admin-form-group {margin-bottom:20px} 223 .admin-form-label {display:block;font-weight:bold;margin-bottom:5px} 224 .admin-form-inline {margin-bottom:20px} 225 .admin-form-top {margin-top:20px} 226 .admin-hint {color:#666} 227 .admin-hint--inline {margin-left:10px} 228 /* buttons */ 229 .admin-btn {padding:10px 20px;border:none;border-radius:4px;font-size:16px;cursor:pointer;color:#fff} 230 .admin-btn--sm {padding:8px 16px;font-size:14px} 231 .admin-btn--full {width:100%} 232 .admin-btn--top {margin-top:10px} 233 .admin-btn--primary {background:#007bff} 234 .admin-btn--success {background:#28a745} 235 .admin-btn--purple {background:#6f42c1} 236 .admin-btn--teal {background:#17a2b8} 237 /* tabs */ 238 .admin-tab-nav {margin-bottom:20px;border-bottom:2px solid #ddd} 239 .admin-tab-btn {padding:10px 20px;border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;color:#cfcfcf} 240 .admin-tab-btn--active {border-bottom-color:#007bff;font-weight:bold} 241 .admin-tab-content {display:none} 242 .admin-subtab-nav {margin-bottom:20px;border-bottom:1px solid #ddd} 243 .thumb-subtab-btn {padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#cfcfcf} 244 .thumb-subtab-btn--active {border-bottom-color:#007bff;font-weight:bold} 245 /* orphans */ 246 .admin-orphan-heading {margin-top:24px} 247 .admin-orphan-list {list-style-type:disc;padding-left:20px} 248 .admin-orphan-item {margin-bottom:5px;font-family:monospace} 249 /* thumbnails */ 250 .admin-thumb-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} 251 .admin-thumb-card {border:1px solid #ddd;padding:15px;border-radius:5px;background:#f8f9fa} 252 .admin-thumb-card__title {margin-top:0;font-size:14px;word-break:break-word} 253 .admin-thumb-card__id {color:#666;font-size:12px;margin:5px 0} 254 .admin-thumb-card__video {width:100%;max-height:200px;background:#000;margin:10px 0;cursor:pointer;display:block} 255 .admin-thumb-card__form {margin-top:10px} 256 .admin-thumb-card__timestamp-row {display:flex;gap:5px;align-items:center;margin-bottom:10px} 257 .admin-thumb-card__timestamp-label {font-size:13px;white-space:nowrap} 258 .admin-thumb-card__timestamp-input {flex:1;padding:5px;font-size:13px;font-family:monospace} 259 .admin-regen-layout {display:flex;gap:30px;align-items:flex-start} 260 .admin-regen-form-col {flex:0 0 auto} 261 .admin-tip-box {margin-bottom:20px;padding:10px;background:#e7f3ff;border:1px solid #b3d9ff;border-radius:4px;max-width:500px} 262 .admin-regen-form {max-width:500px;padding:20px;background:#f8f9fa;border:1px solid #ddd;border-radius:5px} 263 .admin-mono-input {width:100%;padding:8px;font-size:14px;font-family:monospace}