/* written by sirx for f0ck.me */ /* use whatever you like */ ul#posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 1em; list-style: none; padding: 0; margin-top: 10px; } .navbar { background-color: #1b1b1b; position: sticky; top: 0; z-index: 1; font-family: monospace; text-transform: uppercase; text-shadow: 1px 1px black; } body { background-color: black; color: white; } html { background-color: black; } .container.is-fluid { padding-top: 10px; } li.post { position: relative; } span.item-mime { position: absolute; right: 0; top: 0; color: #68da20; text-shadow: 1px 1px black; font-size: 11px; text-transform: uppercase; background: #000000b8; visibility: hidden; } li.post:hover > span.item-mime { visibility: visible; } a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active { background-color: #000000; color: #ffffff; } a#next, a#prev { position: relative; font-weight: normal; top: 0px; bottom: 932px; margin: unset; font-size: 30px; color: #99ff00; padding: 140px 40px 140px 40px; cursor: pointer; align-content: inherit; align-self: center; bottom: 0; } a#next, a#prev { position: sticky; top: 0; } .content { display: grid; justify-content: space-around; grid-template-columns: 0fr 1fr 0fr; } .previous-post, .next-post { display: flex; } img#f0ck-image { max-width: 100%; max-height: 500px; } .metadata { text-align: center; position: sticky; bottom: 0; } a:hover { color: #99ff00; opacity: 0.8; } a { color: #99ff00; cursor: pointer; text-decoration: none; } .navbar-item, .navbar-link { color: white; text-shadow: 1px 1px black; } .media-object { text-align: center; align-self: center; } /*a.id-link { padding-right: 5; }*/ div#my-video { max-height: unset; } .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) { margin-bottom: 0; margin-top: 0; } .video-container { position: relative; padding-bottom: 56.25%; /*16:9*/ padding-top: 30px; height: 0; overflow: hidden; } .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .irc { padding: 10px; color: white; } a#next:hover { box-shadow: -1px 0px #99ff001c; transition: all .2s; } a#prev:hover { box-shadow: 1px 0px #99ff001c; transition: all .2s; } .navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { background-color: black; } .controls { text-align: center; } .content { min-height: 517px; } #themeselector { color: #fff; background-color: #343a40; display: inline-block; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border: 0; outline: 0; } select { font-size: small; } @media (max-width: 600px) { a#next, a#prev { padding: 0; } .content { min-height: 0; } } img#biohaz { width: 28px; } .metadata { background: #1b1b1b; border-top: 1px solid #262626; } .content { border-left: 1px solid #1b1b1b; border-right: 1px solid #1b1b1b; } .controls { border-left: 1px solid #1b1b1b; border-right: 1px solid #1b1b1b; } #themeselector { padding: 0.04em 0.2em; vertical-align: top; font-weight: 560; } span.badge.badge-dark { margin-right: 5px; } .badge-dark, #themeselector { color: #fff; background-color: #000000; border-radius: 0; border-left: 1px solid #262626; border-right: 1px solid #262626; border-top: 1px solid #000; border-bottom: 1px solid #262626; } .video-js .vjs-control-bar { background-color: #1b1b1b !important; } a#rndbtn { color: #fff; background-color: #1b1b1b; border-radius: 0; border-left: 1px solid #262626; border-right: 1px solid #262626; border-top: 1px solid #262626; border-bottom: 1px solid #262626; padding: 0px 5px 0px 5px; text-decoration: none; } .contact { border-left: 1px solid #1b1b1b; border-right: 1px solid #1b1b1b; border-bottom: 1px solid #1b1b1b; padding: 5px; } .irc { border-left: 1px solid #1b1b1b; border-right: 1px solid #1b1b1b; border-bottom: 1px solid #1b1b1b; padding: 5px; } /* Testing Area */ .content { position: relative; } a#next { top: 0; position: absolute; z-index: 1; left: 0; background: transparent; width: 25%; height: 95%; } a#prev { position: absolute; z-index: 1; right: 0; background: transparent; width: 25%; height: 95%; } .vjs-control-bar { z-index: 2; } .arrow-prev { height: 100%; display: flex; width: 100%; align-items: center; justify-content: end; } .arrow-next { height: 100%; display: flex; width: 100%; align-items: center; justify-content: start; } a#next:hover { opacity: 1; box-shadow: none; } a#next { opacity: 0.2; } a#prev:hover { opacity: 1; box-shadow: none; } a#prev { opacity: 0.2; } /* pagination */ .pagination { padding: 8px; background-clip: padding-box; border: 1px solid; border-color: #070809 #0d0e0f #131517; border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.5); border-radius: 3px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.05); box-shadow: 0 1px rgba(255, 255, 255, 0.05); } .pagination > a, .pagination > span { float: left; margin-left: 5px; padding: 0 6px; min-width: 17px; line-height: 27px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #68da20; text-align: center; text-decoration: none; border: 1px solid black; border-radius: 3px; } .pagination :first-child { margin-left: 0; } .pagination > a { text-decoration: none; text-shadow: 0 1px black; background-clip: padding-box; border-color: rgba(0, 0, 0, 0.9); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-transition: 0.1s ease-out; -moz-transition: 0.1s ease-out; -o-transition: 0.1s ease-out; transition: 0.1s ease-out; } .pagination > a:hover { background-color: #333; background-color: rgba(255, 255, 255, 0.05); } .pagination > span, .pagination > a:active { color: #68da20; text-shadow: 0 -1px black; background: #1c1c1c; background: rgba(255, 255, 255, 0.01); border-color: black rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.6); -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); } .pagination .prev, .pagination .next { font-family: Noteworthy, Arial, sans-serif; font-size: 14px; } @font-face { font-family: 'VCR'; src: url('/s/vcr.ttf') format('truetype'); } span#f0ck { font-family: 'VCR'; font-size: xx-large; text-shadow: 1px 1px 1px black, 0px 0px 0px #9f0, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black, 0px 0px 0px #9f0; } .navbar-brand { padding-bottom: 0; } /* nav overhaul */ .nav-item { width: 100%; text-align: center } .navbar-brand { padding-top: 0 } .navbar-nav.mr-auto { flex-flow: row; justify-content: space-between } .navbar.navbar-expand-lg { background: #242424 } .navigation-links { display: flex; background: #232323; background-image: none; border-radius: 3px; border: 1px solid #000; background-image: linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,0)); -webkit-box-shadow: 0 1px rgba(255,255,255,.05); box-shadow: 0 1px rgba(255,255,255,.05); border: 1px solid; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-color: #070809 #0d0e0f #131517; border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); border-radius: 3px } .nav-link { padding: 0; display: flex; border: 1px solid #000; border-radius: 3px; transition: .1s ease-out } .nav-link { min-width: 17px; line-height: 27px; background-image: -webkit-linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0)); background-image: -moz-linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0)); background-image: -o-linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0)); background-image: linear-gradient(to bottom,rgba(255,255,255,.04),rgba(255,255,255,0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1) } .nav-item:hover>a:hover { background-color: #333; background-color: rgba(255,255,255,.05) } .navbar-nav { padding: 5px } .nav-item { width: 100%; text-align: center } #navbarSupportedContent { padding: 5px } .pagination-container-fluid { display: flex; margin-left: 15px } .navbar-expand-lg .navbar-nav .nav-link { padding-right: .5rem; padding-left: .5rem; margin-right: 5px; margin-left: 5px } .pagination { padding: 5px; background-clip: padding-box; border: 1px solid; border-color: #070809 #0d0e0f #131517; border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); border-radius: 3px; display: inline-block; vertical-align: baseline; zoom:1;background-image: -webkit-linear-gradient(top,rgba(0,0,0,.12),rgba(0,0,0,0)); background-image: -moz-linear-gradient(top,rgba(0,0,0,.12),rgba(0,0,0,0)); background-image: -o-linear-gradient(top,rgba(0,0,0,.12),rgba(0,0,0,0)); background-image: linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,0)); -webkit-box-shadow: 0 1px rgba(255,255,255,.05); box-shadow: 0 1px rgba(255,255,255,.05) } .pagination>a,.pagination>span { float: left; margin-left: 5px; padding: 0 10px; min-width: 17px; line-height: 27px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 500; color: #68da20; text-align: center; text-decoration: none; border: 1px solid #000; border-radius: 3px } .pagination :first-child { margin-left: 0 } .pagination>a { text-decoration: none; text-shadow: 0 1px #000; background-clip: padding-box; border-color: rgba(0,0,0,.9); background-image: -webkit-linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0)); background-image: -moz-linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0)); background-image: -o-linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0)); background-image: linear-gradient(to bottom,rgba(255,255,255,.04),rgba(255,255,255,0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1); -webkit-transition: .1s ease-out; -moz-transition: .1s ease-out; -o-transition: .1s ease-out; transition: .1s ease-out } .pagination>a:hover { background-color: #333; background-color: rgba(255,255,255,.05) } .pagination>a:active,.pagination>span { color: #68da20; text-shadow: 0 -1px #000; background: #1c1c1c; background: rgba(255,255,255,.01); border-color: #000 rgba(0,0,0,.65) rgba(0,0,0,.6); -webkit-box-shadow: inset 0 1px rgba(0,0,0,.05),inset 0 2px 2px rgba(0,0,0,.3),0 1px rgba(255,255,255,.06); box-shadow: inset 0 1px rgba(0,0,0,.05),inset 0 2px 2px rgba(0,0,0,.3),0 1px rgba(255,255,255,.06) } .pagination .next,.pagination .prev { font-family: Noteworthy,Arial,sans-serif; font-size: 14px } .navbar-nav { width: 100%; padding: 5px } .nav-link-identifier { text-align: center; width: 100% } @media (max-width: 768px) { ul#posts { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); text-align: center; padding-top: 5px } } @media (max-width: 422px) { ul#posts { grid-column-gap: 0; grid-row-gap: 5px } .container-fluid,.container-lg,.container-md,.container-sm,.container-xl { padding-right: 5px; padding-left: 5px } } @media (max-width: 410px) { ul#posts { grid-column-gap: 15px; grid-row-gap: 10px } .container-fluid,.container-lg,.container-md,.container-sm,.container-xl { padding-right: 15px; padding-left: 15px } } @media (max-width: 991px) { .navbar-nav { width: 100%; padding: 0 } .navbar-expand-lg .navbar-nav .nav-link { margin: 0 } .pagination-container-fluid { display: flex; justify-content: center; padding-top: 5px; margin-bottom: 0 } .navbar { padding: .5rem 1rem 0 } .navigation-links { border-color: transparent transparent transparent } .pagination-container-fluid { margin-left: 0 } }