adding some more stuff for mobile navbar exception
This commit is contained in:
parent
79441cf69a
commit
d13eeea588
|
|
@ -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-child(2), .pagination a:nth-child(3) {
|
||||
.pagination a:nth-last-child(2),
|
||||
.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); }
|
||||
40% { box-shadow: 0px 2px var(--accent); }
|
||||
60% { box-shadow: 0px 2px var(--accent); }
|
||||
100% { box-shadow: 0px 2px var(--white); }
|
||||
0% {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user