fixing background visibility and states

This commit is contained in:
x
2026-01-23 18:37:44 +01:00
parent 3ee28fd0b7
commit 224064d0ca
5 changed files with 275 additions and 111 deletions

View File

@@ -1585,14 +1585,10 @@ span.placeholder {
}
@media (max-width: 1056px) {
.navbar {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: 'f0ck f0ck f0ck';
}
/* Navbar grid layout removed for modern-navbar compatibility */
.navbar-brand {
grid-area: f0ck;
/* maintained for potential other uses or reset */
}
.pagination-container-fluid {
@@ -2947,7 +2943,7 @@ div.favs div.posts {
filter: blur(100px);
transform: translate3d(0, 0, 0);
z-index: 0;
transition: 2s ease;
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.2;
}
@@ -3000,11 +2996,11 @@ button#togglebg {
}
.fader-in {
animation: fadeIn .8s steps(100) forwards;
opacity: 0.4 !important;
}
.fader-out {
animation: fadeOut .8s steps(100) forwards
opacity: 0 !important;
}
.settings {
@@ -3052,75 +3048,76 @@ input#s_avatar {
0%,
100% {
opacity: 0.4;
opacity: 0.1;
}
50% {
opacity: 1;
}
/* Modern Tags Layout */
.tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px 0;
}
.tag-card {
display: flex;
flex-direction: column;
background: var(--badge-bg, #171717);
border-radius: 12px;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--nav-border-color, rgba(255,255,255,0.1));
position: relative;
}
/* Modern Tags Layout */
.tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px 0;
}
.tag-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
background: var(--dropdown-bg, #232323);
border-color: var(--accent, #9f0);
}
.tag-card {
display: flex;
flex-direction: column;
background: var(--badge-bg, #171717);
border-radius: 12px;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1));
position: relative;
}
.tag-card-image {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
background: #000;
}
.tag-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
background: var(--dropdown-bg, #232323);
border-color: var(--accent, #9f0);
}
.tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
opacity: 0.8;
}
.tag-card-image {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
background: #000;
}
.tag-card:hover .tag-card-image img {
transform: scale(1.1);
opacity: 1;
}
.tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
opacity: 0.8;
}
.tag-card-content {
padding: 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.tag-card:hover .tag-card-image img {
transform: scale(1.1);
opacity: 1;
}
.tag-name {
color: var(--white, #fff);
font-weight: bold;
font-size: 1.1em;
font-family: var(--font, monospace);
}
.tag-card-content {
padding: 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.tag-count {
color: #888;
font-size: 0.9em;
}
.tag-name {
color: var(--white, #fff);
font-weight: bold;
font-size: 1.1em;
font-family: var(--font, monospace);
}
.tag-count {
color: #888;
font-size: 0.9em;
}