MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.mods-container { | .mods-container { | ||
max-width: 1100px; | max-width: 1100px; | ||
| Line 5: | Line 4: | ||
} | } | ||
.mods-header { | .mods-header { | ||
background: #0b0f1a; | background: #0b0f1a; | ||
| Line 24: | Line 22: | ||
} | } | ||
.mods-panel { | .mods-panel { | ||
background: #0b0f1a; | background: #0b0f1a; | ||
| Line 32: | Line 29: | ||
} | } | ||
.mod-filter { | .mod-filter { | ||
display: inline-block; | display: inline-block; | ||
| Line 42: | Line 38: | ||
} | } | ||
.mod-group { | .mod-group { | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
| Line 49: | Line 44: | ||
} | } | ||
.mod-group summary { | .mod-group summary { | ||
padding: | padding: 14px; | ||
cursor: pointer; | cursor: pointer; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 57: | Line 51: | ||
border: 2px solid; | border: 2px solid; | ||
border-radius: 10px; | border-radius: 10px; | ||
text-align: center; | |||
font-size: 1.1rem; | |||
letter-spacing: 1px; | |||
} | } | ||
.mod-items { | .mod-items { | ||
padding: 10px 15px; | padding: 10px 15px; | ||
| Line 72: | Line 68: | ||
} | } | ||
.mod-items a { | .mod-items a { | ||
background: #111827; | background: #111827; | ||
| Line 80: | Line 75: | ||
} | } | ||
.mod-items { | |||
padding: 15px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 12px; | |||
justify-content: center; | |||
} | |||
.mod-items { | |||
opacity: 0; | |||
transform: translateY(-10px); | |||
transition: all 0.25s ease; | |||
} | |||
.mod-group[open] .mod-items { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
.mod-card { | |||
background: #111827; | |||
padding: 8px 14px; | |||
border-radius: 8px; | |||
opacity: 0; | |||
transform: translateY(10px); | |||
} | |||
.mod-group[open] .mod-card { | |||
animation: fadeUp 0.3s ease forwards; | |||
} | |||
.mod-group[open] .mod-card:nth-child(1) { animation-delay: 0.05s; } | |||
.mod-group[open] .mod-card:nth-child(2) { animation-delay: 0.1s; } | |||
.mod-group[open] .mod-card:nth-child(3) { animation-delay: 0.15s; } | |||
.mod-group[open] .mod-card:nth-child(4) { animation-delay: 0.2s; } | |||
@keyframes fadeUp { | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | |||
.mod-card:hover { | |||
transform: translateY(-3px); | |||
background: #1f2937; | |||
} | |||
.mod-group[open] summary { | |||
box-shadow: 0 0 12px rgba(59,130,246,0.6); | |||
} | |||
.kosmic summary { | .kosmic summary { | ||
border-color: #a855f7; | border-color: #a855f7; | ||
Revision as of 15:09, 2 April 2026
.mods-container {
max-width: 1100px;
margin: 0 auto;
}
.mods-header {
background: #0b0f1a;
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.mods-header h1 {
margin: 0;
font-size: 2.2rem;
letter-spacing: 1px;
}
.mods-header p {
opacity: 0.8;
}
.mods-panel {
background: #0b0f1a;
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 20px;
}
.mod-filter {
display: inline-block;
border: 2px solid #3b82f6;
padding: 6px 12px;
border-radius: 8px;
margin-bottom: 15px;
font-weight: bold;
}
.mod-group {
margin-bottom: 15px;
border-radius: 10px;
overflow: hidden;
}
.mod-group summary {
padding: 14px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
border: 2px solid;
border-radius: 10px;
text-align: center;
font-size: 1.1rem;
letter-spacing: 1px;
}
.mod-items {
padding: 10px 15px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mod-card {
background: #111827;
padding: 10px;
border-radius: 8px;
}
.mod-items a {
background: #111827;
padding: 6px 10px;
border-radius: 6px;
text-decoration: none;
}
.mod-items {
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.mod-items {
opacity: 0;
transform: translateY(-10px);
transition: all 0.25s ease;
}
.mod-group[open] .mod-items {
opacity: 1;
transform: translateY(0);
}
.mod-card {
background: #111827;
padding: 8px 14px;
border-radius: 8px;
opacity: 0;
transform: translateY(10px);
}
.mod-group[open] .mod-card {
animation: fadeUp 0.3s ease forwards;
}
.mod-group[open] .mod-card:nth-child(1) { animation-delay: 0.05s; }
.mod-group[open] .mod-card:nth-child(2) { animation-delay: 0.1s; }
.mod-group[open] .mod-card:nth-child(3) { animation-delay: 0.15s; }
.mod-group[open] .mod-card:nth-child(4) { animation-delay: 0.2s; }
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.mod-card:hover {
transform: translateY(-3px);
background: #1f2937;
}
.mod-group[open] summary {
box-shadow: 0 0 12px rgba(59,130,246,0.6);
}
.kosmic summary {
border-color: #a855f7;
color: #c084fc;
}
.hubor summary {
border-color: #f97316;
color: #fb923c;
}
.datjanedoe summary {
border-color: #22c55e;
color: #4ade80;
}
.lynx summary {
border-color: #eab308;
color: #facc15;
}
.lerpmcgerk summary {
border-color: #06b6d4;
color: #22d3ee;
}