style.css (7151B)
1 /* main body styling */ 2 body,button{background:#1a1a1a;color:#cfcfcf;font-family:sans-serif;margin:0;position: relative;} 3 a{color:#add8e6;text-decoration:none} 4 input[type="url"], input[type="text"] {background:#1a1a1a;color:#cfcfcf;border:1px solid gray;margin: 8px;padding:8px;outline: none; box-sizing: border-box} 5 input[type="url"]:focus, input[type="text"]:focus{border:1px solid white;background-color:#3a3a3a} 6 div#search-container form {border-left:1px solid gray} 7 span.required {color: red} 8 9 /* nav menu */ 10 nav ul{flex:1 1 auto;list-style:none} 11 nav {display:flex; border-bottom:0.1rem solid gray;margin:0;padding:0} 12 nav ul {margin: 0; padding: 0} 13 nav ul li{border-right:1px solid gray} 14 nav ul li a,nav ul li strong{padding:1rem;display:inline-block} 15 nav ul li a span {vertical-align: middle; padding-left: 0.3rem} 16 nav ul li a:hover{background-color:#2a2a2a} 17 nav ul li a svg{width:1.4rem; vertical-align:middle} 18 nav ul li a svg path{fill:#cfcfcf} 19 nav ul li ul li a,nav>ul>li>a{display:block} 20 nav ul li ul li ul li a{white-space:nowrap} 21 nav ul li ul li ul{top:0;left:100%;display:none} 22 nav ul li ul li,nav>ul>li{position:relative} 23 nav ul li ul li:hover>ul,nav ul li:hover>ul{display:block} 24 nav ul li ul{display:none;position:absolute;top:100%;left:0;z-index:1000;padding:0} 25 nav ul.sub-menu, nav ul.sub-menu li ul {border: 1px solid gray} 26 nav ul.sub-menu li {border-right: none} 27 nav ul.sub-menu li a:first-letter{text-transform:capitalize} 28 nav ul.sub-menu li a{color:#add8e6;background:#1a1a1a; min-width: 110px} 29 nav ul.sub-menu li ul li a{min-width: 170px} 30 nav ul.sub-menu li a:hover{background:#2a2a2a} 31 32 /* responsive nav bar */ 33 @media (max-width: 600px) { 34 nav ul li a span, nav ul li strong {display: none;} 35 nav ul li a svg {display: inline-block; margin: 0 auto; width: 1.8rem; } 36 nav ul li a {padding: 0.8rem} 37 div#search-container form input {width: 80px} 38 } 39 40 /* fix whitespace in nav */ 41 nav ul { font-size: 0; } 42 nav ul li { font-size: 1rem; } 43 44 /* gallery styling */ 45 div.gallery-item {padding:1rem} 46 div.gallery-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} 47 div.gallery-item a svg{filter: invert(100%);} 48 div.gallery-item,div.gallery-item a,nav ul li,nav>ul>li{display:inline-block} 49 div.gallery-item,div.gallery-item a{display:inline-block} 50 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} 51 div.gallery-video {position: relative; display: inline-block} 52 53 /* descriptions */ 54 div.description-section {margin: 20px 0; padding: 15px;} 55 div#current-description {background: #2a2a2a; padding: 10px; border-radius: 3px; margin-bottom: 10px; white-space: pre-wrap; min-height: 20px;} 56 div#no-description {color: #666; font-style: italic; margin-bottom: 10px; padding: 10px;} 57 textarea#description-textarea {width: 100%; max-width: 600px; padding: 8px; border: 1px solid #ccc; border-radius: 3px; font-family: inherit; resize: vertical;} 58 button.text-button {border:none; background:none; color:#add8e6; cursor:pointer; padding:0; margin-left:2px;cursor: pointer;} 59 button.text-button::before{content:"[ "} 60 button.text-button::after{content:" ]"} 61 div.file-container {display: flex} 62 div.file-sidebar {flex: 0 0 auto; min-width: 15em} 63 div.file-sidebar details {padding: 0.7rem} 64 span.file-tag-category,div.file-sidebar details ul li a {text-transform:capitalize} 65 div.file-sidebar details ul li form {display:inline} 66 button#copy-btn {margin-top: 5px} 67 68 details > summary {list-style: none; cursor: pointer; } 69 details > summary::before {content: "[+]"; display: inline-block; width: 2ch; margin-right: 0.5ch;} 70 details[open] > summary::before {content: "[-]";} 71 72 /* text viewer */ 73 pre#text-viewer{font-family:serif;font-size:25px;line-height:1.8} 74 #text-viewer-container{max-width:800px; margin:1em 0} 75 #text-viewer-container div{display:flex; justify-content:space-between; margin-bottom:5px;} 76 #text-viewer-container:fullscreen{margin:0;max-width:75%;margin:auto;height:100vh;padding:1em;background:#000;display:flex;flex-direction:column} 77 #text-viewer-container:fullscreen #text-viewer{flex:1;max-height:none!important;margin:0;height:100%} 78 #text-viewer-container:fullscreen>div{flex-shrink:0} 79 pre#text-viewer {white-space:pre-wrap; overflow:auto; background:#111; color:#eee; padding:10px; border-radius:8px; max-height:500px;} 80 81 img.file-content-image {max-width:400px} 82 83 /* pagination */ 84 .pagination .disabled,.pagination a{border-radius:4px;padding:.5rem 1rem} 85 .pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0;padding:1rem} 86 .pagination .disabled{color:#666;cursor:not-allowed} 87 .pagination .page-info{font-weight:700;padding:.5rem 1rem} 88 .pagination input#pageInput {width: 60px; text-align: center} 89 90 /* breadcrumb bar */ 91 .breadcrumb a,.breadcrumb span,.breadcrumb-separator{vertical-align:bottom} 92 .breadcrumb{padding:1rem;font-size:1.1rem} 93 .breadcrumb a:hover{text-decoration:underline} 94 .breadcrumb span{font-weight:500} 95 .breadcrumb-separator{font-size:.8em} 96 97 /* cbz viewer */ 98 .cbz-preview,.thumb-label{text-align:center} 99 .cbz-icon,.cbz-icon::after{position:absolute;transform:translate(-50%,-50%)} 100 .cbz-icon{top:50%;left:50%;width:40px;height:32px;border:3px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.5)} 101 .cbz-icon::before{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border:2px solid #fff} 102 .cbz-icon::after{content:'';top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%} 103 .cbz-viewer{max-width:1200px;margin:0 auto;padding:20px} 104 .cbz-gallery h3,.cbz-navigation{margin-bottom:20px} 105 .cbz-navigation{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f5f5f5;border-radius:8px;flex-wrap:wrap;gap:10px} 106 .nav-btn,.page-counter{padding:8px 16px;border-radius:4px} 107 .nav-buttons{display:flex;gap:10px;align-items:center} 108 .nav-btn{background:#007bff;color:#fff;text-decoration:none;font-size:14px;transition:background .2s} 109 .nav-btn:hover:not(.disabled){background:#0056b3} 110 .nav-btn.disabled{background:#ccc;cursor:not-allowed;color:#666} 111 .nav-btn.back-btn{background:#6c757d} 112 .nav-btn.back-btn:hover{background:#545b62} 113 .page-counter{background:#fff;font-weight:700} 114 .cbz-image-container{display:flex;justify-content:center;align-items:center;margin-bottom:30px;background:#000;border-radius:8px;min-height:600px} 115 .cbz-image{max-width:100%;max-height:800px;object-fit:contain} 116 .cbz-gallery{margin-top:40px;padding-top:20px;border-top:2px solid #ddd} 117 .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px} 118 .gallery-thumb{position:relative;display:block;border:3px solid transparent;border-radius:8px;overflow:hidden;transition:border-color .2s,transform .2s;background:#f5f5f5} 119 .gallery-thumb:hover{border-color:#007bff;transform:scale(1.05)} 120 .gallery-thumb.active{border-color:#28a745} 121 .gallery-thumb img{width:100%;height:150px;object-fit:cover;display:block} 122 .thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;padding:4px;font-size:12px} 123 .cbz-open-button{margin-top:15px}