adding some more stuff for mobile navbar exception

public/s/css/f0ck.css

@@ -48,7 +48,8 @@ html[theme="f0ck"] .admin-search button {
     color: var(--black) !important;
 }
 
-html[theme="f0ck"] .pagination > a, .pagination > span  {
+html[theme="f0ck"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -82,7 +83,8 @@ html[theme='p1nk'] {
     --nav-brand-font: 'VCR';
     --font: 'monospace';
     --pagination-background: #2b2b2b;
-  --pagination-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);;
+    --pagination-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);
+    ;
     --pagination-anchor-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);
     --pagination-background-hover: #333;
     --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
@@ -100,7 +102,8 @@ html[theme='p1nk'] {
     --img-border-color: #363636;
 }
 
-html[theme="p1nk"] .pagination > a, .pagination > span  {
+html[theme="p1nk"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -152,7 +155,8 @@ html[theme='orange'] {
     --img-border-color: #363636;
 }
 
-html[theme="orange"] .pagination > a, .pagination > span  {
+html[theme="orange"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -210,7 +214,8 @@ html[theme="amoled"] .metadata {
     border: none;
 }
 
-html[theme="amoled"] .pagination > a, .pagination > span  {
+html[theme="amoled"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -305,7 +310,8 @@ html[theme="paper"] .iconset#a_delete {
     stroke: var(--white);
 }
 
-html[theme="paper"] .pagination > a, .pagination > span  {
+html[theme="paper"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -394,7 +400,8 @@ html[theme="paper"] .v0ck_player_button svg:hover {
     stroke: var(--white);
 }
 
-html[theme="paper"] .badge-dark, #themeselector {
+html[theme="paper"] .badge-dark,
+#themeselector {
     border: 1px solid var(--white);
 }
 
@@ -463,7 +470,8 @@ html[theme="atmos"] {
     --img-border-color: #363636;
 }
 
-html[theme="atmos"] .pagination > a, .pagination > span  {
+html[theme="atmos"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -517,7 +525,8 @@ html[theme="term"] {
     --img-border-color: #363636;
 }
 
-html[theme="term"] .pagination > a, .pagination > span  {
+html[theme="term"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -536,7 +545,8 @@ html[theme="term"] .metadata {
     text-shadow: 0px 0px 1px var(--accent), 1px 0px 2px var(--accent), 0px 0px 5px var(--black);
 }
 
-html[theme="term"] .metadata > .badge-dark, #themeselector {
+html[theme="term"] .metadata>.badge-dark,
+#themeselector {
     box-shadow: var(--pagination-anchor-box-shadow);
     background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
 }
@@ -598,7 +608,8 @@ html[theme="iced"] svg.iconset:hover {
     background: #1b2f5a;
 }
 
-html[theme="iced"] .pagination > a, .pagination > span  {
+html[theme="iced"] .pagination>a,
+.pagination>span {
     border-radius: 3px;
     border: 1px solid var(--black);
 }
@@ -656,7 +667,8 @@ html[theme='f0ck95'] {
     --img-border-color: #808080;
 }
 
-html[theme="f0ck95"] html, body {
+html[theme="f0ck95"] html,
+body {
     color: var(--black);
 }
 
@@ -672,7 +684,9 @@ html[theme="f0ck95"] .embed-responsive-image {
     border: none;
 }
 
-html[theme="f0ck95"] .nav-link, .pagination > a, .pagination > span {
+html[theme="f0ck95"] .nav-link,
+.pagination>a,
+.pagination>span {
     border-radius: 0;
     border-left: inset 1px silver;
     border-bottom: outset 1px silver;
@@ -682,11 +696,13 @@ html[theme="f0ck95"] .nav-link, .pagination > a, .pagination > span {
     background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
 }
 
-html[theme="f0ck95"] .pagination > a:active, .pagination > span {
+html[theme="f0ck95"] .pagination>a:active,
+.pagination>span {
     color: black;
 }
 
-html[theme="f0ck95"] .pagination > a, .pagination > span {
+html[theme="f0ck95"] .pagination>a,
+.pagination>span {
     border-radius: 0;
     border-left: inset 1px silver;
     border-bottom: outset 1px silver;
@@ -774,7 +790,8 @@ html[theme="f0ck95"] .about {
     color: black;
 }
 
-html[theme="f0ck95"] .badge-dark, #themeselector {
+html[theme="f0ck95"] .badge-dark,
+#themeselector {
     border: inset 1px gray;
     background: #a8a5a5;
 }
@@ -965,7 +982,8 @@ html[theme="f0ck95d"] .embed-responsive-image {
     background: #0000;
 }
 
-html[theme="f0ck95d"] html, body {
+html[theme="f0ck95d"] html,
+body {
     color: var(--white);
 }
 
@@ -980,7 +998,9 @@ html[theme="f0ck95d"] span#favs {
     box-shadow: var(--nav-link-box-shadow);
 }
 
-html[theme="f0ck95d"] .nav-link, .pagination > a, .pagination > span {
+html[theme="f0ck95d"] .nav-link,
+.pagination>a,
+.pagination>span {
     border-radius: 0;
     border-left: inset 1px black;
     border-bottom: outset 1px black;
@@ -1051,7 +1071,8 @@ html[theme="f0ck95d"] .about {
     color: var(--white);
 }
 
-html[theme="f0ck95d"] .badge-dark, #themeselector {
+html[theme="f0ck95d"] .badge-dark,
+#themeselector {
     border: inset 1px gray;
     background: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
     background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
@@ -1083,14 +1104,18 @@ html[theme="f0ck95d"] .admin-search button {
 ::-webkit-scrollbar {
     width: 2px;
 }
+
 ::-webkit-scrollbar-thumb {
     background-color: var(--scrollbar-color);
 }
+
 ::-webkit-scrollbar-track {
     background-color: transparent;
 }
 
-*, ::before, ::after {
+*,
+::before,
+::after {
     box-sizing: border-box;
     outline: 0;
     -webkit-tap-highlight-color: transparent;
@@ -1102,7 +1127,8 @@ html[theme="f0ck95d"] .admin-search button {
     /* https://www.dafont.com/vcr-osd-mono.font */
 }
 
-html, body {
+html,
+body {
     background-color: var(--bg);
     color: var(--white);
     margin: 0;
@@ -1124,13 +1150,16 @@ html, body {
 }
 
 a {
-  color: var(--accent) /* !important */;
+    color: var(--accent)
+        /* !important */
+    ;
     cursor: pointer;
     text-decoration: none;
     display: inline-block;
 }
 
-a.post_source:hover, a.id-link:hover {
+a.post_source:hover,
+a.id-link:hover {
     text-decoration: underline;
 }
 
@@ -1139,7 +1168,8 @@ a.btn.disabled {
     user-select: none;
 }
 
-.btn.disabled, .btn:disabled {
+.btn.disabled,
+.btn:disabled {
     user-select: none;
     font-weight: bold;
     text-shadow: 1px 1px 1px var(--black);
@@ -1178,11 +1208,13 @@ div.posts > a {
     background-size: cover;
     background-position: center;
 }
+
 div.posts>a::before {
     content: "";
     display: block;
     margin-top: 100%;
 }
+
 div.posts>a:hover {
     opacity: 0.8;
     box-shadow: 0 0 0 2px var(--accent);
@@ -1203,6 +1235,7 @@ div.posts > a::after {
     font-family: vcr;
     text-transform: uppercase;
 }
+
 div.posts>a:hover::after {
     visibility: visible;
 }
@@ -1312,23 +1345,28 @@ ul.navbar-nav li.nav-item {
     box-shadow: var(--nav-link-box-shadow);
 }
 
-.navbar-expand-lg .navbar-nav .nav-link, .pagination > a, .pagination > span {
+.navbar-expand-lg .navbar-nav .nav-link,
+.pagination>a,
+.pagination>span {
     padding-right: .5rem;
     padding-left: .5rem;
 }
 
-.pagination > a, .pagination > span {
+.pagination>a,
+.pagination>span {
     margin-right: 5px;
     margin-left: 5px;
 }
 
-.nav-item:hover > a:hover, .dropdown-item:hover > a:hover {
+.nav-item:hover>a:hover,
+.dropdown-item:hover>a:hover {
     background-color: var(--nav-link-hover-bg);
 }
 
 .nav-link[data-toggle="dropdown"].ddcontent::after {
     content: "\00a0("attr(content) ")\00a0\25bc";
 }
+
 .nav-link[data-toggle="dropdown"]:not(.ddcontent)::after {
     content: "\00a0\25bc";
 }
@@ -1419,7 +1457,10 @@ span.placeholder {
     display: none;
 }
 
-.dropup, .dropright, .dropdown, .dropleft {
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
     position: relative;
 }
 
@@ -1433,6 +1474,7 @@ span.placeholder {
     transition: .2s ease;
     background-color: var(--nav-link-hover-bg);
 }
+
 .dropdown:hover .nav-link>img.avatar {
     border-bottom-left-radius: 0;
 }
@@ -1492,12 +1534,15 @@ span.placeholder {
         justify-content: flex-end !important;
     }
 
-  .pagination a:nth-last-child(2), .pagination a:nth-last-child(3),
+    .pagination a:nth-last-child(2),
-  .pagination a:nth-child(2), .pagination a:nth-child(3) {
+    .pagination a:nth-last-child(3),
+    .pagination a:nth-child(2),
+    .pagination a:nth-child(3) {
         display: none;
     }
 
-  html, body {
+    html,
+    body {
         text-align: center;
     }
 }
@@ -1507,7 +1552,9 @@ span.placeholder {
         grid-template-columns: 1fr 1fr !important;
     }
 
-  .by-user, .by-stats, .by-hoster {
+    .by-user,
+    .by-stats,
+    .by-hoster {
         grid-column: unset !important;
         grid-row: unset !important;
     }
@@ -1558,7 +1605,8 @@ span.placeholder {
     color: transparent;
 }
 
-.pagination > a, .pagination > span {
+.pagination>a,
+.pagination>span {
     float: left;
     padding: 0 5px;
     min-width: 17px;
@@ -1588,7 +1636,8 @@ span.placeholder {
     background-color: var(--pagination-background-hover);
 }
 
-.pagination>a:active,.pagination>span {
+.pagination>a:active,
+.pagination>span {
     color: var(--accent);
     text-shadow: 0 -1px var(--black);
     box-shadow: var(--pagination-anchor-box-shadow);
@@ -1740,12 +1789,14 @@ span.placeholder {
 .embed-responsive-16by9::before {
     padding-top: 50%;
 }
+
 .embed-responsive::before {
     display: block;
     content: "";
 }
 
-.embed-responsive .embed-responsive-item, .embed-responsive video {
+.embed-responsive .embed-responsive-item,
+.embed-responsive video {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -1770,7 +1821,8 @@ span.placeholder {
     border-top: none;
 }
 
-.previous-post, .next-post {
+.previous-post,
+.next-post {
     display: flex;
     height: 100%;
     position: relative;
@@ -1800,7 +1852,8 @@ span.placeholder {
     padding: 25px;
 }
 
-#next:hover, #prev:hover {
+#next:hover,
+#prev:hover {
     opacity: 1;
 }
 
@@ -1862,7 +1915,8 @@ a#elfe {
     text-align: center;
 }
 
-.badge-dark, #themeselector {
+.badge-dark,
+#themeselector {
     background-color: var(--badge-bg);
     border: 1px solid var(--black);
     margin: 5px;
@@ -1913,21 +1967,26 @@ span#tags:empty {
     padding-top: 1.5px;
     padding-bottom: 1.5px;
 }
+
 .badge-greentext {
     color: #789922;
     text-shadow: inherit !important;
     background-color: #252525;
 }
+
 .badge-german {
     background: linear-gradient(180deg, black 33.33%, red 33.33%, red 66.66%, yellow 66.66%) !important;
 }
+
 .badge-dutch {
     background: linear-gradient(180deg, #ad1c23 33.33%, white 33.33%, white 66.66%, #26468f 66.66%) !important;
     color: #000 !important;
 }
+
 .badge-ukraine {
     background: linear-gradient(180deg, #005bbc 50%, #ffd600 50%) !important;
 }
+
 .badge-russia {
     background: linear-gradient(180deg, white 33.33%, blue 33.33%, blue 66.66%, red 66.66%) !important;
 }
@@ -1951,11 +2010,23 @@ span#tags:empty {
     animation: pulsate 1s infinite linear;
     box-shadow: 0px 2px var(--accent);
 }
+
 @keyframes pulsate {
-  0%   { box-shadow: 0px 2px var(--white); }
+    0% {
-  40%  { box-shadow: 0px 2px var(--accent); }
+        box-shadow: 0px 2px var(--white);
-  60%  { box-shadow: 0px 2px var(--accent); }
+    }
-  100% { box-shadow: 0px 2px var(--white); }
+
+    40% {
+        box-shadow: 0px 2px var(--accent);
+    }
+
+    60% {
+        box-shadow: 0px 2px var(--accent);
+    }
+
+    100% {
+        box-shadow: 0px 2px var(--white);
+    }
 }
 
 @media(max-height: 768px) {
@@ -2009,7 +2080,8 @@ span#tags:empty {
         grid-column: 1/3;
     }
 
-  a#prev:focus, a#next:focus {
+    a#prev:focus,
+    a#next:focus {
         background: var(--nav-bg);
         border-radius: 350px;
         opacity: 0.6;
@@ -2043,10 +2115,12 @@ div.about > div {
     max-width: 500px;
     margin-left: 5px;
 }
+
 div.about>div img {
     max-width: 99%;
     height: auto;
 }
+
 div.about>div p {
     font-size: 7pt;
     margin-top: 0;
@@ -2059,6 +2133,7 @@ body[type='login'] {
     align-items: center;
     min-height: 100vh;
 }
+
 .login-form {
     display: flex;
     flex-direction: column;
@@ -2068,6 +2143,7 @@ body[type='login'] {
     border-radius: 10px;
     border: 1px solid var(--accent);
 }
+
 .login-form button[type="submit"] {
     width: 100%;
     margin: 18px 0 9px 0;
@@ -2079,10 +2155,12 @@ body[type='login'] {
     border-radius: 0;
     overflow: hidden;
 }
+
 .login-form button[type="submit"]:hover {
     cursor: pointer;
     opacity: 1;
 }
+
 .login-form input {
     background: var(--bg);
     border: 1px solid var(--black);
@@ -2094,7 +2172,8 @@ body[type='login'] {
 /* visualizer */
 canvas {
     position: absolute;
-  top: 1px; /* This removes the ugly 1px line seen at the bottom when you hover over the audio element */
+    top: 1px;
+    /* This removes the ugly 1px line seen at the bottom when you hover over the audio element */
     left: 0;
     bottom: 0;
     right: 0;
@@ -2137,16 +2216,19 @@ div#flash {
     text-align: center;
     font-weight: bold;
 }
+
 div#flash.error {
     background-color: #fddfdf;
     border-bottom: 2px solid #f1a899;
     color: #5f3f3f;
 }
+
 div#flash.success {
     background-color: #4caf50;
     border-bottom: 2px solid #006018;
     color: #001c07;
 }
+
 div#flash.warn {
     background-color: #fffa90;
     border-bottom: 2px solid #dad55e;
@@ -2160,6 +2242,7 @@ div.posts > a > p {
     position: absolute;
     bottom: calc(0px - 12px);
 }
+
 div.posts>a>p:before {
     content: "";
     position: absolute;
@@ -2168,14 +2251,18 @@ div.posts > a > p:before {
     height: 10px;
     width: 10px;
 }
+
 div.posts>a[data-mode="sfw"]>p:before {
     background-color: #5cb85c;
 }
+
 div.posts>a[data-mode="nsfw"]>p:before {
     background-color: #a72828;
 }
+
 div.posts>a[data-mode="null"]>p:before {
-  background-color: #dcd512; /* untagged */
+    background-color: #dcd512;
+    /* untagged */
 }
 
 div#footbar {
@@ -2204,6 +2291,7 @@ div.logwrap {
     height: auto;
     text-align: left;
 }
+
 div.logwrap>p {
     line-height: 0;
 }
@@ -2214,30 +2302,38 @@ table.table {
     margin: 25px 0;
     min-width: max-content;
 }
+
 table.table thead tr {
     font-weight: bolder;
     border-bottom: 1px solid var(--accent);
 }
+
 table.table tr {
     line-height: 12px;
 }
-table.table th, table.table td {
+
+table.table th,
+table.table td {
     padding: 7px 15px;
     text-align: center;
 }
+
 table.table tbody tr:nth-of-type(odd) {
     background-color: var(--badge-tag);
 }
+
 .topf0ckers {
     text-align: center;
     padding: 15px;
     margin: 5px;
 }
+
 .ranking {
     display: grid;
     grid-template-columns: auto;
     justify-content: center;
 }
+
 .ranking div {
     padding: 15px;
     margin: 5px;
@@ -2245,12 +2341,15 @@ table.table tbody tr:nth-of-type(odd) {
     border: 1px solid black;
     border-radius: 3px;
 }
+
 .by-user {
     grid-column: 1;
 }
+
 .by-stats {
     grid-column: 3;
 }
+
 .by-hoster {
     grid-column: 2;
 }
@@ -2265,6 +2364,7 @@ table.table tbody tr:nth-of-type(odd) {
 [tooltip] {
     position: relative;
 }
+
 [tooltip]::before,
 [tooltip]::after {
     text-transform: none;
@@ -2276,11 +2376,13 @@ table.table tbody tr:nth-of-type(odd) {
     display: none;
     opacity: 0;
 }
+
 [tooltip]::before {
     content: '';
     border: 5px solid transparent;
     z-index: 1001;
 }
+
 [tooltip]::after {
     content: attr(tooltip);
     font-family: Helvetica, sans-serif;
@@ -2297,24 +2399,29 @@ table.table tbody tr:nth-of-type(odd) {
     color: #fff;
     z-index: 1000;
 }
+
 [tooltip]:hover::before,
 [tooltip]:hover::after {
     display: block;
 }
+
 [tooltip='']::before,
 [tooltip='']::after {
     display: none !important;
 }
+
 [tooltip]:not([flow])::before,
 [tooltip][flow^="up"]::before {
     bottom: 100%;
     border-bottom-width: 0;
     border-top-color: var(--tooltip-bg, #333);
 }
+
 [tooltip]:not([flow])::after,
 [tooltip][flow^="up"]::after {
     bottom: calc(100% + 5px);
 }
+
 [tooltip]:not([flow])::before,
 [tooltip]:not([flow])::after,
 [tooltip][flow^="up"]::before,
@@ -2322,19 +2429,23 @@ table.table tbody tr:nth-of-type(odd) {
     left: 50%;
     transform: translate(-50%, -.5em);
 }
+
 [tooltip][flow^="down"]::before {
     top: 100%;
     border-top-width: 0;
     border-bottom-color: var(--tooltip-bg, #333);
 }
+
 [tooltip][flow^="down"]::after {
     top: calc(100% + 5px);
 }
+
 [tooltip][flow^="down"]::before,
 [tooltip][flow^="down"]::after {
     left: 50%;
     transform: translate(-50%, .5em);
 }
+
 [tooltip][flow^="left"]::before {
     top: 50%;
     border-right-width: 0;
@@ -2342,11 +2453,13 @@ table.table tbody tr:nth-of-type(odd) {
     left: calc(0em - 5px);
     transform: translate(-.5em, -50%);
 }
+
 [tooltip][flow^="left"]::after {
     top: 50%;
     right: calc(100% + 5px);
     transform: translate(-.5em, -50%);
 }
+
 [tooltip][flow^="right"]::before {
     top: 50%;
     border-left-width: 0;
@@ -2354,11 +2467,13 @@ table.table tbody tr:nth-of-type(odd) {
     right: calc(0em - 5px);
     transform: translate(.5em, -50%);
 }
+
 [tooltip][flow^="right"]::after {
     top: 50%;
     left: calc(100% + 5px);
     transform: translate(.5em, -50%);
 }
+
 [tooltip]:not([flow]):hover::before,
 [tooltip]:not([flow]):hover::after,
 [tooltip][flow^="up"]:hover::before,
@@ -2368,6 +2483,7 @@ table.table tbody tr:nth-of-type(odd) {
     opacity: 1;
     transform: translate(-50%, 0);
 }
+
 [tooltip][flow^="left"]:hover::before,
 [tooltip][flow^="left"]:hover::after,
 [tooltip][flow^="right"]:hover::before,
@@ -2510,33 +2626,42 @@ table img {
     table {
         width: inherit;
     }
+
     thead {
         display: none;
     }
+
     tr:nth-of-type(2n) {
         background-color: inherit;
     }
+
     tr td:first-child {
         float: right;
     }
+
     tbody td {
         display: block;
         box-shadow: 0px 1px 0px var(--accent);
     }
+
     tbody td:before {
         content: attr(data-th);
         display: block;
         text-align: left;
     }
-  table.table th, table.table td {
+
+    table.table th,
+    table.table td {
         padding: 5px;
         margin: 5px;
         display: flex;
     }
+
     table.table td img {
         position: relative;
         width: 100%;
     }
+
     .mview_desc {
         visibility: visible;
     }
@@ -2546,6 +2671,7 @@ table img {
 .iconset#a_delete {
     stroke: var(--accent);
 }
+
 .iconset#a_favo {
     fill: var(--accent);
 }
@@ -2568,4 +2694,14 @@ table img {
         grid-template-columns: 0fr 1fr 1fr;
         grid-gap: 0.25em;
     }
+
+    .placeholder {
+        visibility: hidden;
+    }
+
+    a.nav-link span {
+        /* This is a dirty and temporary hack to hide long usernames on mobile devices when logged in */
+        max-width: 10ch;
+        overflow: auto;
+    }
 }