style.css (5063B)
1 /* main body styling */ 2 body,button{background:#1a1a1a;color:#cfcfcf;font-family:sans-serif;margin:0} 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}