style.css (10549B)
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"] {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: 110px; 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 35 /* responsive nav bar */ 36 @media (max-width: 600px) { 37 nav ul li a svg {display: inline-block; margin: 0 auto; width: 1.8rem; } 38 nav ul li a {padding: 0.8rem} 39 div#search-container form input {width: 80px} 40 } 41 42 /* fix whitespace in nav */ 43 nav ul { font-size: 0; } 44 nav ul li { font-size: 1rem; } 45 46 /* gallery styling */ 47 div.gallery-item {padding:1rem} 48 div.gallery-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} 49 div.gallery-item a svg{filter: invert(100%);} 50 div.gallery-item,div.gallery-item a,nav ul li,nav>ul>li{display:inline-block} 51 div.gallery-item,div.gallery-item a{display:inline-block} 52 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} 53 div.gallery-video {position: relative; display: inline-block} 54 55 /* descriptions */ 56 div.description-section {margin: 20px 0; padding: 15px;} 57 div#current-description {background: #2a2a2a; padding: 10px; border-radius: 3px; margin-bottom: 10px; white-space: pre-wrap; min-height: 20px;} 58 div#no-description {color: #666; font-style: italic; margin-bottom: 10px; padding: 10px;} 59 textarea#description-textarea {width: 100%; max-width: 600px; padding: 8px; border: 1px solid #ccc; border-radius: 3px; font-family: inherit; resize: vertical;} 60 button.text-button {border:none; background:none; color:#add8e6; cursor:pointer; padding:0; margin-left:2px;cursor: pointer;} 61 button.text-button::before{content:"[ "} 62 button.text-button::after{content:" ]"} 63 div.file-container {display: flex} 64 div.file-sidebar {flex: 0 0 auto; min-width: 15em} 65 div.file-sidebar details {padding: 0.7rem} 66 span.file-tag-category,div.file-sidebar details ul li a {text-transform:capitalize} 67 div.file-sidebar details ul li form {display:inline} 68 button#copy-btn {margin-top: 5px} 69 70 details > summary {list-style: none; cursor: pointer; } 71 details > summary::before {content: "[+]"; display: inline-block; width: 2ch; margin-right: 0.5ch;} 72 details[open] > summary::before {content: "[-]";} 73 74 /* text viewer */ 75 pre#text-viewer{font-family:serif;font-size:25px;line-height:1.8} 76 #text-viewer-container{max-width:800px; margin:1em 0} 77 #text-viewer-container div{display:flex; justify-content:space-between; margin-bottom:5px;} 78 #text-viewer-container:fullscreen{margin:0;max-width:75%;margin:auto;height:100vh;padding:1em;background:#000;display:flex;flex-direction:column} 79 #text-viewer-container:fullscreen #text-viewer{flex:1;max-height:none!important;margin:0;height:100%} 80 #text-viewer-container:fullscreen>div{flex-shrink:0} 81 pre#text-viewer {white-space:pre-wrap; overflow:auto; background:#111; color:#eee; padding:10px; border-radius:8px; max-height:500px;} 82 83 img.file-content-image {max-width:400px} 84 85 /* media containers */ 86 .media-container img, .media-container video { transition: transform 0.2s ease; display: block; margin: auto; } 87 88 /* pagination */ 89 .pagination .disabled,.pagination a{border-radius:4px;padding:.5rem 1rem} 90 .pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0;padding:1rem} 91 .pagination .disabled{color:#666;cursor:not-allowed} 92 .pagination .page-info{font-weight:700;padding:.5rem 1rem} 93 .pagination input#pageInput {width: 60px; text-align: center} 94 95 /* breadcrumb bar */ 96 .breadcrumb a,.breadcrumb span,.breadcrumb-separator{vertical-align:bottom} 97 .breadcrumb{padding:1rem;font-size:1.1rem;text-transform:capitalize} 98 .breadcrumb a:hover{text-decoration:underline} 99 .breadcrumb span{font-weight:500} 100 .breadcrumb-separator{font-size:.8em} 101 102 /* cbz viewer */ 103 .cbz-preview,.thumb-label{text-align:center} 104 .cbz-icon,.cbz-icon::after{position:absolute;transform:translate(-50%,-50%)} 105 .cbz-icon{top:50%;left:50%;width:40px;height:32px;border:3px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.5)} 106 .cbz-icon::before{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border:2px solid #fff} 107 .cbz-icon::after{content:'';top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%} 108 .cbz-viewer{max-width:1200px;margin:0 auto;padding:20px} 109 .cbz-gallery h3,.cbz-navigation{margin-bottom:20px} 110 .cbz-navigation{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f5f5f5;border-radius:8px;flex-wrap:wrap;gap:10px} 111 .nav-btn,.page-counter{padding:8px 16px;border-radius:4px} 112 .nav-buttons{display:flex;gap:10px;align-items:center} 113 .nav-btn{background:#007bff;color:#fff;text-decoration:none;font-size:14px;transition:background .2s} 114 .nav-btn:hover:not(.disabled){background:#0056b3} 115 .nav-btn.disabled{background:#ccc;cursor:not-allowed;color:#666} 116 .nav-btn.back-btn{background:#6c757d} 117 .nav-btn.back-btn:hover{background:#545b62} 118 .page-counter{background:#fff;font-weight:700} 119 .cbz-image-container{display:flex;justify-content:center;align-items:center;margin-bottom:30px;background:#000;border-radius:8px;min-height:600px} 120 .cbz-image{max-width:100%;max-height:800px;object-fit:contain} 121 .cbz-gallery{margin-top:40px;padding-top:20px;border-top:2px solid #ddd} 122 .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px} 123 .gallery-thumb{position:relative;display:block;border:3px solid transparent;border-radius:8px;overflow:hidden;transition:border-color .2s,transform .2s;background:#f5f5f5} 124 .gallery-thumb:hover{border-color:#007bff;transform:scale(1.05)} 125 .gallery-thumb.active{border-color:#28a745} 126 .gallery-thumb img{width:100%;height:150px;object-fit:cover;display:block} 127 .thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;padding:4px;font-size:12px} 128 .cbz-open-button{margin-top:15px} 129 130 /* notes editor */ 131 .btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.2s} 132 .btn-primary:hover{background:#f0f0f0} 133 .btn-primary{background:#fff;color:#2563eb} 134 .btn-secondary:hover{background:#1e3a8a} 135 .btn-secondary{background:#1e40af;color:#fff;border:1px solid rgb(255 255 255 / .2)} 136 .btn-success:hover{background:#059669} 137 .btn-success{background:#10b981;color:#fff} 138 .category-header{font-weight:600;color:#2563eb;margin-bottom:8px;padding-bottom:4px;border-bottom:2px solid #2563eb} 139 .category-item{padding:4px 0;color:#374151} 140 .category-section{margin-bottom:20px} 141 .checkbox-label input{width:auto} 142 .checkbox-label{display:flex;align-items:center;gap:8px;margin-top:10px} 143 .custom-operation{display:flex;gap:10px;align-items:center;margin-top:10px} 144 .custom-sed-input{flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:4px;font-family:'Monaco','Menlo','Consolas',monospace;font-size:13px} 145 .editor-container{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:500px} 146 .editor-pane{display:flex;flex-direction:column} 147 .import-form label{display:block;margin-bottom:8px;font-size:13px} 148 .import-form{margin-top:15px;padding:15px} 149 .message.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} 150 .message.show{display:block} 151 .message.success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7} 152 .message{padding:12px 20px;margin:15px 30px;border-radius:4px;font-size:14px;display:none} 153 .operation-btn:hover{border-color:#2563eb;background:#eff6ff} 154 .operation-btn{padding:10px 15px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;text-align:left;transition:all 0.2s} 155 .operation-desc{font-size:12px} 156 .operation-name{font-weight:600;font-size:13px;margin-bottom:4px} 157 .operations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:15px} 158 .operations-panel{padding:20px 30px} 159 .pane-header{padding:12px 20px;font-weight:600;font-size:14px} 160 .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} 161 .search-box:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgb(37 99 235 / .1)} 162 .search-box{padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;width:250px} 163 .stat{display:flex;align-items:center;gap:8px} 164 .stat-label{font-size:13px} 165 .stats-bar{padding:15px 30px;display:flex;gap:30px;align-items:center} 166 .stat-value{font-weight:600;font-size:16px} 167 .toolbar label{font-size:13px} 168 .toolbar{padding:15px 30px;display:flex;gap:15px;align-items:center;flex-wrap:wrap} 169 .toolbar-actions{display:flex;gap:10px;margin-left:auto} 170 .toolbar-group{display:flex;gap:10px;align-items:center} 171 select:focus{outline:none;border-color:#2563eb} 172 select{padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;cursor:pointer} 173 textarea{flex:1;padding:20px;border:none;font-family:'Monaco','Menlo','Consolas',monospace;font-size:13px;line-height:1.6;resize:none} 174 175 /* admin 50:50 splits */ 176 div.config-container {display: flex} 177 div.config-split {flex: 1}