diff --git a/style.css b/style.css new file mode 100644 index 0000000..5e7a9f0 --- /dev/null +++ b/style.css @@ -0,0 +1,1680 @@ +/* +Theme Name: BlueSky MC Theme +Theme URI: https://git.viper.ipv64.net/M_Viper/bluesky-theme +Author: M_Viper +Author URI: https://m-viper.de +Description: Offizielles WordPress Theme für den BlueSky Minecraft Server. Mit vollständigem Backend für Serverkonfiguration, Team-Verwaltung, Wiki, Regeln und FAQ. +Version: 1.0.0 +Requires at least: 6.0 +Tested up to: 6.7 +Requires PHP: 8.0 +License: GNU General Public License v2 or later +License URI: LICENSE +Text Domain: bluesky-mc +Tags: minecraft, gaming, dark, custom-menu, custom-logo +*/ + +/* === IMPORTS === */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); + +/* === CSS VARIABLES === */ +:root { + --main-font: 'Inter', sans-serif; + --main-color: #39BEFF; + --background-color: #24272B; + --white-color: #FFFFFF; + --black-color: #000000; + --description-color: #D2D0D0; + --green-color: #4AFF6B; + --ip-copied-background: rgba(74, 255, 107, 0.17); + --ip-copied-icon-background: rgba(74, 255, 107, 0.5); + --copy-ip-button-background: rgba(57, 190, 255, 0.7); + --how-to-join-button-background: rgba(210, 208, 208, 0.2); + --stats-background: rgba(210, 208, 208, 0.05); + --stat-icon-background-2: rgba(57, 190, 255, 0.5); + --scroll-bar: rgba(210, 208, 208, 0.3); + --scroll-bar-hover: #555555FF; + --red-color: #FF7C7C; + --warning-background: rgba(255, 124, 124, 0.17); + --warning-icon-background: rgba(255, 124, 124, 0.5); + --warning-color: #F5C1C1; + --default-rank-color: rgba(210, 208, 208, 0.3); + --card-background: rgba(255,255,255,0.04); + --border-color: rgba(255,255,255,0.08); +} + +/* === RESET === */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} + +body { + background: var(--background-color); + font-family: var(--main-font); + color: rgba(192, 192, 192, 0.562); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +body > #footer { + margin-top: auto; + flex-shrink: 0; +} + +/* === SCROLLBAR === */ +::-webkit-scrollbar { width: 5px; } +::-webkit-scrollbar-track { background: var(--stats-background); } +::-webkit-scrollbar-thumb { background: var(--scroll-bar); } +::-webkit-scrollbar-thumb:hover { background: var(--scroll-bar-hover); } + +/* === NAVBAR === */ +.navbar { + display: flex; + width: 100%; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 20px 150px; + background: var(--background-color); + transition: 0.3s ease-in-out; + position: sticky; + top: 0; + z-index: 1000; + border-bottom: 1px solid var(--border-color); +} + +.navbar a { text-decoration: none; } + +.navbar .menu-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.navbar .menu-mobile .logo { + display: flex; + flex-direction: row; + justify-content: left; + align-items: center; + gap: 10px; +} + +.navbar .menu-mobile .logo img { max-width: 40px; height: auto; } + +.navbar .menu-mobile .logo h3 { + color: var(--white-color); + font-weight: 900; + font-size: 20px; +} + +.navbar .links { + display: flex; + flex-direction: row; + gap: 25px; + transition: 0.3s ease-in-out; +} + +.navbar .links .link { + color: var(--description-color); + font-size: 18px; + font-weight: 600; + text-decoration: none; + position: relative; + transition: 0.2s; +} + +.navbar .links .link.active { color: var(--white-color); } +.navbar .links .link:not(.active):hover { color: var(--white-color); text-decoration: underline; } + +.navbar .menu-mobile .hamburger { + color: var(--white-color); + font-size: 20px; + cursor: pointer; + transition: 0.5s; + display: none; +} + +.navbar .menu-mobile .hamburger:hover { opacity: 0.8; } +.navbar.active { max-height: 1000px; } +.navbar.active .links { opacity: 1; z-index: 2; } + +/* === HEADER SECTION === */ +#header { + background: url("images/header-background.jpg") no-repeat center center; + min-width: 100%; + min-height: 800px; + height: 80vh; + background-size: cover; + z-index: 0; + display: flex; + align-items: center; +} + +#header .content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 150px; + width: 100%; + height: 620px; + position: relative; +} + +#header .content .left { display: flex; flex-direction: column; gap: 20px; } + +#header .content .left .ip-copied { + color: var(--green-color); + background: var(--ip-copied-background); + padding: 10px 20px; + width: fit-content; + border-radius: 5px; + font-size: 17px; + display: none; +} + +#header .content .left .ip-copied.active { display: flex; } +#header .content .left .ip-copied.error { background: var(--warning-background); color: var(--red-color); } + +#header .content .left .server-name { display: flex; flex-direction: column; } + +#header .content .left .server-name p { + color: var(--white-color); + text-transform: uppercase; + font-size: 18px; + font-weight: 600; +} + +#header .content .left .server-name h1 { + color: var(--main-color); + text-transform: uppercase; + font-size: 65px; + font-weight: 900; +} + +#header .content .left .server-description { + color: var(--description-color); + font-size: 18px; + font-weight: 400; + max-width: 700px; + line-height: 1.6; +} + +#header .content .left .buttons { display: flex; flex-direction: row; gap: 20px; } + +#header .content .left .buttons .copy-ip { + background: var(--copy-ip-button-background); + border: 2px solid var(--main-color); + border-radius: 3px; + padding: 10px 30px; + color: var(--white-color); + font-size: 17px; + font-weight: 600; + cursor: pointer; + transition: 0.2s; +} + +#header .content .left .buttons .copy-ip:hover { opacity: 0.8; } + +#header .content .left .buttons .how-to-join { + background: var(--how-to-join-button-background); + border: 2px solid var(--description-color); + border-radius: 3px; + padding: 10px 30px; + color: var(--description-color); + font-size: 17px; + font-weight: 600; + cursor: pointer; + transition: 0.2s; + width: 100%; +} + +#header .content .left .buttons .how-to-join:hover { opacity: 0.8; } + +#header .content .right { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 150%; +} + +#header .content .right .logo-img { + max-width: 350px; + transform: translatey(0px); + animation: float 4s ease-in-out infinite; +} + +#header .content .right .stats { + display: flex; + flex-direction: row; + gap: 50px; + background: var(--stats-background); + padding: 20px; + border-radius: 5px; +} + +#header .content .right .stats .stat { + display: flex; + flex-direction: row; + gap: 15px; + justify-content: center; + align-items: center; +} + +#header .content .right .stats .stat .icon { + border-radius: 5px; + background: var(--stat-icon-background-2); + padding: 10px; + transition: .2s ease-in-out; +} + +#header .content .right .stats .stat .icon img { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; +} + +#header .content .right .stats .stat:hover .icon { transform: scale(1.1); } + +#header .content .right .stats .stat .texts { height: 100%; display: flex; flex-direction: column; justify-content: center; } +#header .content .right .stats .stat .texts h5 { color: var(--white-color); text-transform: uppercase; font-size: 17px; font-weight: 700; } +#header .content .right .stats .stat .texts p { color: var(--description-color); font-size: 15px; font-weight: 400; } +#header .content .right .stats .stat .texts p span { color: var(--green-color); } + +/* === ABOUT === */ +#about .content { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; +} + +#about .content .left { display: flex; flex-direction: column; height: 100%; justify-content: space-between; gap: 40px; } +#about .content .left .section-title { font-size: 30px; font-weight: 700; color: var(--white-color); position: relative; } +#about .content .left .about-us { color: var(--description-color); font-size: 17px; max-width: 80%; line-height: 1.6; } + +#about .content .right { display: flex; justify-content: end; align-items: center; height: 100%; position: relative; width: 100%; } +#about .content .right img { width: auto; max-height: 220px; position: relative; z-index: 1; right: 200px; } + +/* === MINIGAMES === */ +#minigames { background: var(--stats-background); } +#minigames .content { display: flex; flex-direction: column; gap: 80px; } + +#minigames .content .game { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 60px; + width: 100%; +} + +/* Even = Bild rechts, Text links */ +#minigames .content .game:nth-child(even) .game-img { order: 2; } +#minigames .content .game:nth-child(even) .info { order: 1; } + +.game-img { + position: relative; + overflow: hidden; + border-radius: 16px; + box-shadow: 0 20px 60px rgba(0,0,0,0.5); +} + +.game-img img { + width: 100%; + height: 320px; + object-fit: cover; + display: block; + transition: transform 0.4s ease; +} + +.game-img:hover img { transform: scale(1.04); } + +/* Farbiger Akzent-Streifen oben */ +.game-img::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: var(--main-color); + z-index: 1; +} + +#minigames .content .game .info { + display: flex; + flex-direction: column; + gap: 20px; +} + +#minigames .content .game .info .section-title { + font-size: 32px; + font-weight: 800; + color: var(--white-color); + line-height: 1.2; +} + +#minigames .content .game .info .section-title::after { + content: ''; + display: block; + width: 50px; + height: 3px; + background: var(--main-color); + margin-top: 10px; + border-radius: 2px; +} + +#minigames .content .game .info .game-description { + color: var(--description-color); + font-size: 16px; + line-height: 1.8; +} + +#minigames .content .game .info .game-description p { margin-bottom: 16px; } + +#minigames .content .game .info .services { + list-style: none; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 8px; +} + +#minigames .content .game .info .services .service { + background: rgba(57, 190, 255, 0.12); + border: 1px solid rgba(57, 190, 255, 0.35); + color: var(--main-color); + padding: 5px 16px; + border-radius: 20px; + font-size: 14px; + font-weight: 600; + transition: 0.2s; +} + +#minigames .content .game .info .services .service:hover { + background: rgba(57, 190, 255, 0.25); +} + +/* === DISCORD === */ +#discord { + background: url("images/header-background.jpg") no-repeat center center; + min-width: 100%; + height: 100%; + background-size: cover; + z-index: 0; + display: flex; + align-items: center; +} + +#discord .content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; } +#discord .content .section-title { font-size: 30px; font-weight: 700; color: var(--white-color); text-align: center; } +#discord .content .section-title span { color: var(--main-color); } +#discord .content .join-discord { background: var(--copy-ip-button-background); border: 2px solid var(--main-color); border-radius: 3px; padding: 10px 30px; color: var(--white-color); font-size: 17px; font-weight: 600; cursor: pointer; transition: 0.2s; } +#discord .content .join-discord:hover { opacity: 0.8; } + +/* === VOTE === */ +#vote .content { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } +#vote .content .info { display: flex; flex-direction: column; gap: 40px; flex: 1; } +#vote .content .info .section-title { font-size: 30px; font-weight: 700; color: var(--white-color); } +#vote .content .info .section-description { color: var(--description-color); font-size: 17px; max-width: 80%; line-height: 1.6; } +#vote .content .links { display: flex; flex-direction: row; gap: 30px; align-items: center; } +#vote .content .links .url { text-decoration: none; } +#vote .content .links .url:hover .link .link-description .icon { transform: scale(1.1); } +#vote .content .links .link { display: flex; flex-direction: column; gap: 10px; background: var(--stats-background); padding: 20px; border-radius: 5px; max-width: 400px; } +#vote .content .links .link h5 { color: var(--white-color); text-transform: uppercase; font-size: 17px; font-weight: 700; } +#vote .content .links .link .link-description { display: flex; flex-direction: row; align-items: center; gap: 50px; } +#vote .content .links .link .link-description .description { color: var(--description-color); font-size: 15px; line-height: 1.6; } +#vote .content .links .link .link-description .icon { border-radius: 5px; background: var(--stat-icon-background-2); padding: 10px; transition: 0.2s ease-in-out; } +#vote .content .links .link .link-description .icon img { width: 40px; height: 40px; } + +/* === FAQ === */ +#faq { background: var(--stats-background); } +#faq .content { display: flex; flex-direction: column; gap: 20px; } +#faq .content .info { display: flex; flex-direction: column; gap: 40px; } +#faq .content .info .section-title { font-size: 30px; font-weight: 700; color: var(--white-color); } +#faq .content .info .section-title span { color: var(--main-color); } +#faq .content .info .section-description { color: var(--description-color); font-size: 17px; line-height: 1.6; } +#faq .content .accordion { display: flex; flex-direction: column; gap: 20px; } +#faq .content .accordion .accordion-item { background: var(--stats-background); border-radius: 5px; border: 1px solid var(--border-color); } +#faq .content .accordion .accordion-item .accordion-item-header { padding: 20px 50px 20px 20px; font-weight: 600; display: flex; align-items: center; position: relative; cursor: pointer; color: var(--white-color); font-size: 17px; } +#faq .content .accordion .accordion-item .accordion-item-header::after { content: "\002B"; font-size: 20px; position: absolute; right: 20px; } +#faq .content .accordion .accordion-item .accordion-item-header.active::after { content: "\2212"; } +#faq .content .accordion .accordion-item .accordion-item-body { max-height: 0; overflow: hidden; transition: 0.2s ease-in-out; } +#faq .content .accordion .accordion-item .accordion-item-body .accordion-item-body-content { padding: 20px; line-height: 1.6; border-top: 1px solid var(--border-color); color: var(--description-color); } + +/* === RULES === */ +#rules .content { display: flex; flex-direction: column; gap: 40px; } +.warning { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: var(--warning-background); padding: 20px; border-radius: 5px; border: 1px solid var(--red-color); } +.warning p { color: var(--warning-color); font-size: 16px; line-height: 1.6; } +.warning .icon img { width: 40px; height: 40px; margin-left: 20px; } +.rules-listing { display: flex; flex-direction: column; gap: 14px; } +.rule-card { + border: 1px solid rgba(255,255,255,0.14); + border-left: 4px solid var(--main-color); + border-radius: 10px; + overflow: hidden; + background: rgba(255,255,255,0.02); + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} +.rule-card:hover { + transform: translateY(-1px); + box-shadow: 0 8px 20px rgba(0,0,0,0.18); + border-color: rgba(57,190,255,0.45); +} +.rule-toggle { + width: 100%; + border: none; + background: transparent; + color: inherit; + display: flex; + align-items: center; + gap: 12px; + text-align: left; + cursor: pointer; + padding: 14px 16px; +} +.rule-toggle:hover { background: rgba(255,255,255,0.03); } +.rule-toggle:focus-visible { + outline: 2px solid var(--main-color); + outline-offset: -2px; +} +.rule-toggle-icon { + width: 22px; + height: 22px; + border-radius: 50%; + border: 1px solid rgba(57,190,255,0.55); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--main-color); + font-size: 17px; + font-weight: 700; + flex-shrink: 0; +} +.rule-toggle-icon::before { content: '+'; } +.rule-card.is-open .rule-toggle-icon::before { content: '\2212'; } +.rules-title { + color: var(--white-color); + font-size: 17px; + margin: 0; + line-height: 1.25; +} +.rule-content-panel { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + border-top: 1px solid rgba(255,255,255,0); +} +.rule-card.is-open .rule-content-panel { + border-top-color: rgba(255,255,255,0.1); +} +.rule-items { + list-style: none; + margin: 0; + padding: 10px 16px 14px 50px; + display: flex; + flex-direction: column; + gap: 8px; +} +.rule-item-line { + color: var(--description-color); + font-size: 14px; + line-height: 1.35; + margin: 0; + padding: 6px 10px; + border-radius: 6px; + background: rgba(255,255,255,0.04); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (max-width: 768px) { + .rule-toggle { padding: 12px 14px; } + .rule-items { padding: 8px 14px 12px 42px; } +} + +/* === ADMIN TEAM === */ +#admin-team .content .group { display: flex; flex-direction: column; gap: 25px; margin-bottom: 70px; } + +.rank-title { + font-size: 22px; + font-weight: 800; + color: var(--white-color); + padding-bottom: 12px; + border-bottom: 2px solid var(--main-color); + display: inline-flex; + align-items: center; + gap: 10px; +} + +.users { + display: flex; + flex-direction: row; + gap: 20px; + flex-wrap: wrap; +} + +.user { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; + background: var(--card-background); + border-radius: 14px; + border: 1px solid var(--border-color); + width: 180px; + overflow: hidden; + transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; + cursor: default; +} + +.user:hover { + transform: translateY(-6px); + border-color: var(--main-color); + box-shadow: 0 12px 40px rgba(57,190,255,0.15); +} + +/* Skin-Bereich mit Hintergrund-Gradient */ +.user .skin-wrapper { + width: 100%; + background: linear-gradient(180deg, rgba(57,190,255,0.08) 0%, rgba(57,190,255,0.02) 100%); + display: flex; + justify-content: center; + align-items: flex-end; + padding: 20px 10px 0; + min-height: 160px; +} + +.user .member-skin { + height: 140px; + width: auto; + display: block; + transition: opacity 0.3s, filter 0.3s; + image-rendering: pixelated; /* Minecraft-Pixel-Look */ +} + +/* Info-Bereich unter dem Skin */ +.user .user-info { + width: 100%; + padding: 12px 12px 14px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + background: rgba(0,0,0,0.2); +} + +.user .name { + color: var(--white-color); + font-size: 15px; + font-weight: 700; + text-align: center; + word-break: break-word; +} + +.user .rank { + padding: 3px 14px; + border-radius: 20px; + font-size: 12px; + font-weight: 700; + color: var(--white-color) !important; + text-align: center; + white-space: nowrap; + min-width: 60px; + letter-spacing: 0.3px; +} + +/* === WIKI === */ +.wiki-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 30px; text-align: center; background: var(--card-background); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); } +.wiki-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(80, 80, 80, 0.2); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); transition: 0.2s; } +.wiki-tile:hover { border-color: var(--main-color); transform: translateY(-3px); } +.wiki-tile img { width: 50px; height: 50px; } +.wiki-tile a { display: block; margin-top: 10px; text-decoration: none; color: var(--main-color); font-size: 16px; font-weight: bold; } + +/* === SECTION PAGES HEADER === */ +#page-header { + background: url("images/header-background.jpg") no-repeat center center; + background-size: cover; + display: flex; + align-items: center; + min-height: 300px; + width: 100%; + position: relative; + z-index: 0; +} +#page-header::after { + content: ''; + position: absolute; + inset: 0; + background: rgba(0,0,0,0.45); + z-index: 0; +} +#page-header .content { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: 12px; + padding: 60px 150px; + width: 100%; + align-items: center; + text-align: center; +} +#page-header .content .minecraft-server-ip { + color: var(--main-color); + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 2px; +} +#page-header .content .title { + color: var(--white-color); + font-size: 52px; + font-weight: 900; + line-height: 1.1; + text-shadow: 0 2px 20px rgba(0,0,0,0.6); +} +#page-header .content .title span { color: var(--main-color); } +#page-header .content .description { + color: var(--description-color); + font-size: 17px; + margin-top: 4px; +} + +/* === FOOTER === */ +#footer { + padding: 20px 150px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + min-height: 84px; + border-top: 1px solid var(--border-color); + background: var(--background-color); +} + +#footer p { color: var(--description-color); font-size: 15px; } +#footer p span { color: var(--white-color); } +#footer .link { color: var(--description-color); text-decoration: none; font-size: 15px; transition: 0.2s; } +#footer .link:hover { color: var(--white-color); } +#footer .footer-links { + display: flex; + align-items: center; + gap: 12px; +} +#footer .footer-links .sep { + color: var(--description-color); + opacity: 0.6; + font-size: 15px; +} + +/* === CONTENT SPACING === */ +section:not(#header):not(#page-header) .content { padding: 90px 150px; width: 100%; } + +/* === ANIMATIONS === */ +@keyframes float { + 0% { transform: translatey(0px); } + 50% { transform: translatey(-20px); } + 100% { transform: translatey(0px); } +} + +/* === IMPRESSUM === */ +.impressum-content h2 { color: var(--white-color); font-size: 24px; margin: 30px 0 15px; } +.impressum-content p, .impressum-content a { color: var(--description-color); font-size: 16px; line-height: 1.8; } +.impressum-content a { color: var(--main-color); } + +/* === RESPONSIVE === */ +@media screen and (max-width: 1625px) { + .navbar { padding: 20px 90px; } + section:not(#header):not(#page-header) .content { padding: 90px; } + #footer { padding: 20px 90px; } + #header .content { padding: 150px 90px; align-items: start; justify-content: center; } + #page-header .content { padding: 80px 90px; } +} + +@media screen and (max-width: 1361px) { + #header .content { flex-direction: column; padding: 120px 90px; height: 100%; gap: 60px; } + #header .content .right .logo-img { display: none; } +} + +@media screen and (max-width: 1183px) { + #about .content { flex-direction: column; gap: 50px; } + #about .content .left .about-us { max-width: 100%; } + #about .content .right img { margin: auto; right: 0; } +} + +@media screen and (max-width: 1141px) { + #minigames .content .game { grid-template-columns: 1fr; gap: 30px; } + #minigames .content .game:nth-child(even) .game-img { order: 0; } + #minigames .content .game:nth-child(even) .info { order: 0; } + .game-img img { height: 240px; } +} + +@media screen and (max-width: 867px) { + .navbar { flex-direction: column; gap: 30px; max-height: 90px; padding: 20px 30px; } + .navbar .menu-mobile { width: 100%; } + .navbar .menu-mobile .hamburger { display: flex; } + .navbar .links { flex-direction: column; order: 2; width: 100%; opacity: 0; z-index: -1; } +} + +@media screen and (max-width: 819px) { + section:not(#header):not(#page-header) .content { padding: 50px 30px; } + #footer { padding: 20px 30px; } + #header .content { padding: 150px 30px; } + #header .content .left .server-name h1 { font-size: 40px; } + #page-header .content { padding: 60px 30px; } + #page-header .content .title { font-size: 40px; } +} + +@media screen and (max-width: 909px) { + #vote .content { flex-direction: column; gap: 40px; } + #vote .content .links { flex-wrap: wrap; } +} + +@media screen and (max-width: 564px) { + #footer { flex-direction: column; gap: 30px; align-items: center; justify-content: center; text-align: center; } +} + +@media screen and (max-width: 621px) { + #header .content .right .stats { flex-direction: column; } +} + +@media screen and (max-width: 383px) { + #header .content .left .buttons { flex-direction: column; } +} + +/* ============================================================ + WIKI — Übersichtsseite + ============================================================ */ + +#wiki-overview { + position: relative; + overflow: hidden; +} + +#wiki-overview .content { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: 20px; +} + +.wiki-plugin-container { + max-width: 900px; + margin: 0 auto; + border-radius: 10px; + border: 1px solid rgba(255,255,255,0.14); + background: rgba(255,255,255,0.025); + box-shadow: 0 8px 22px rgba(0,0,0,0.18); + overflow: hidden; +} + +.wiki-tabs-nav { + display: flex; + gap: 4px; + padding: 8px; + background: rgba(255,255,255,0.03); + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +.wiki-tab-button { + flex: 1; + border: none; + border-radius: 6px; + padding: 11px 12px; + background: transparent; + color: var(--description-color); + font-size: 14px; + font-weight: 700; + cursor: pointer; + transition: all 0.2s ease; +} + +.wiki-tab-button:hover { + background: rgba(57,190,255,0.06); + color: var(--white-color); +} + +.wiki-tab-button.active { + background: rgba(255,255,255,0.08); + color: var(--white-color); + box-shadow: inset 0 -3px 0 rgba(57,190,255,0.95); +} + +.wiki-tabs-content { + padding: 16px; +} + +.wiki-tab-panel { + display: none; + animation: wikiFadeIn 0.35s ease; +} + +.wiki-tab-panel.active { + display: block; +} + +.wiki-panel-block { + margin-bottom: 14px; +} + +@keyframes wikiFadeIn { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +} + +.wiki-category-block { + background: rgba(255,255,255,0.02); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 10px; + padding: 16px; + display: flex; + flex-direction: column; + gap: 14px; +} + +.wiki-cat-header { + display: flex; + align-items: center; + gap: 12px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(255,255,255,0.12); +} + +.wiki-cat-icon { + width: 38px; + height: 38px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 21px; + flex-shrink: 0; + background: rgba(57,190,255,0.14); + border: 1px solid rgba(57,190,255,0.32); +} + +.wiki-cat-title { + font-size: 20px; + font-weight: 800; + letter-spacing: 0.2px; + color: var(--white-color); + margin: 0; +} + +.wiki-cat-count { + margin-top: 2px; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 16px; + font-size: 11px; + font-weight: 700; + color: var(--main-color); + background: rgba(57,190,255,0.12); + border: 1px solid rgba(57,190,255,0.28); +} + +.wiki-subcat-block { + display: flex; + flex-direction: column; + gap: 14px; + padding: 10px; + border-radius: 8px; + background: rgba(255,255,255,0.015); + border: 1px solid rgba(255,255,255,0.06); +} + +.wiki-subcat-title { + display: flex; + align-items: center; + gap: 10px; + font-size: 14px; + font-weight: 800; + color: rgba(210,208,208,0.9); + text-transform: uppercase; + letter-spacing: 1.2px; +} + +.wiki-subcat-dot { + width: 8px; + height: 8px; + background: var(--main-color); + border-radius: 50%; + box-shadow: 0 0 0 4px rgba(57,190,255,0.16); + flex-shrink: 0; +} + +.wiki-articles-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); + gap: 10px; +} + +.wiki-article-card { + display: flex; + align-items: center; + gap: 12px; + border-radius: 8px; + padding: 10px; + text-decoration: none; + color: inherit; + border: 1px solid rgba(255,255,255,0.1); + background: rgba(255,255,255,0.02); + transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease; +} + +.wiki-article-card:hover { + transform: translateY(-1px); + border-color: rgba(57,190,255,0.45); + background: rgba(57,190,255,0.05); + box-shadow: 0 6px 14px rgba(0,0,0,0.18); +} + +.wiki-card-icon { + width: 44px; + height: 44px; + flex-shrink: 0; + border-radius: 10px; + overflow: hidden; + border: 1px solid rgba(255,255,255,0.08); + background: rgba(57,190,255,0.08); +} + +.wiki-card-icon img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.wiki-card-body { + min-width: 0; + flex: 1; +} + +.wiki-card-body h3 { + margin: 0 0 4px; + color: var(--white-color); + font-size: 14px; + font-weight: 700; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.wiki-card-body p { + margin: 0; + color: rgba(210,208,208,0.84); + font-size: 12px; + line-height: 1.45; + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.wiki-card-arrow { + color: var(--main-color); + font-size: 15px; + opacity: 0; + transform: translateX(-2px); + transition: transform 0.24s ease, opacity 0.24s ease; +} + +.wiki-article-card:hover .wiki-card-arrow { + opacity: 1; + transform: translateX(3px); +} + +.wiki-empty { + text-align: center; + padding: 72px 30px; + border-radius: 18px; + border: 1px dashed rgba(57,190,255,0.48); + background: linear-gradient(180deg, rgba(57,190,255,0.08) 0%, rgba(57,190,255,0.02) 100%); +} + +.wiki-empty-icon { + font-size: 52px; + margin-bottom: 16px; +} + +.wiki-empty h2 { + color: var(--white-color); + font-size: 26px; + margin-bottom: 10px; +} + +.wiki-empty p { + color: var(--description-color); + font-size: 16px; +} + +.wiki-btn { + display: inline-block; + background: linear-gradient(130deg, rgba(57,190,255,1) 0%, rgba(24,155,224,1) 100%); + color: #052030; + padding: 10px 22px; + border-radius: 999px; + text-decoration: none; + font-weight: 800; + font-size: 14px; + border: 1px solid rgba(57,190,255,0.6); + transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; +} + +.wiki-btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 22px rgba(57,190,255,0.25); +} + +.wiki-btn-secondary { + color: var(--white-color); + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.14); +} + +/* ============================================================ + WIKI — Artikel-Seite (mit Sidebar) + ============================================================ */ + +#wiki-article { background: var(--background-color); } + +#wiki-article .content { + padding-top: 50px !important; + padding-bottom: 80px !important; +} + +.wiki-article-layout { + display: grid; + grid-template-columns: minmax(260px, 300px) 1fr; + gap: 18px; + align-items: start; + position: relative; + z-index: 1; +} + +/* Breadcrumb */ +.wiki-breadcrumb { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 10px; +} +.wiki-breadcrumb a { + color: rgba(255,255,255,0.6); + text-decoration: none; + font-size: 13px; + transition: color 0.2s; +} +.wiki-breadcrumb a:hover { color: var(--main-color); } +.wiki-breadcrumb .sep { color: rgba(255,255,255,0.25); font-size: 13px; } +.wiki-breadcrumb .current { color: var(--main-color); font-size: 13px; font-weight: 600; } + +/* ===== SIDEBAR ===== */ +.wiki-sidebar { + position: sticky; + top: 80px; + max-height: calc(100vh - 92px); + overflow-y: auto; + align-self: start; +} + +.wiki-sidebar::-webkit-scrollbar { width: 4px; } +.wiki-sidebar::-webkit-scrollbar-thumb { background: rgba(57,190,255,0.28); border-radius: 3px; } + +.wiki-sidebar-inner { + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.14); + border-radius: 10px; + overflow: hidden; +} + +.wiki-sidebar-title { + color: var(--white-color); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 1.4px; + padding: 15px 18px; + border-bottom: 1px solid rgba(255,255,255,0.1); + margin: 0; + background: linear-gradient(90deg, rgba(57,190,255,0.18) 0%, rgba(57,190,255,0.03) 100%); + display: flex; + align-items: center; + gap: 8px; +} + +.wiki-nav-cat { border-bottom: 1px solid rgba(255,255,255,0.06); } +.wiki-nav-cat:last-child { border-bottom: none; } + +.wiki-nav-cat-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + cursor: pointer; + color: var(--white-color); + font-size: 12px; + font-weight: 800; + user-select: none; + transition: background 0.2s; + text-transform: uppercase; + letter-spacing: 0.9px; +} +.wiki-nav-cat-header:hover { background: rgba(57,190,255,0.1); } + +.wiki-nav-toggle { + color: var(--main-color); + font-size: 10px; + transition: transform 0.25s; + opacity: 0.85; +} +.wiki-nav-cat.open .wiki-nav-toggle { transform: rotate(180deg); } + +.wiki-nav-cat-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0; } +.wiki-nav-cat.open .wiki-nav-cat-body { max-height: 1200px; padding: 4px 0 10px; } + +.wiki-nav-link { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px 8px 22px; + color: var(--description-color); + text-decoration: none; + font-size: 13px; + line-height: 1.4; + transition: color 0.15s, background 0.15s, padding-left 0.15s; + border-left: 2px solid transparent; + position: relative; +} +.wiki-nav-link::before { + content: ''; + width: 5px; + height: 5px; + border-radius: 50%; + background: currentColor; + opacity: 0.3; + flex-shrink: 0; +} +.wiki-nav-link:hover { + color: var(--white-color); + background: rgba(255,255,255,0.045); + padding-left: 24px; +} +.wiki-nav-link.active { + color: var(--main-color); + border-left-color: var(--main-color); + background: rgba(57,190,255,0.12); + font-weight: 600; + padding-left: 24px; +} +.wiki-nav-link.active::before { opacity: 1; } + +.wiki-nav-subcat { margin: 4px 0; } +.wiki-nav-subcat-label { + display: block; + padding: 8px 16px 3px; + font-size: 9px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 1.25px; + color: rgba(210,208,208,0.35); +} +.wiki-nav-link-sub { padding-left: 28px; font-size: 12px; } +.wiki-nav-link-sub:hover { padding-left: 30px; } +.wiki-nav-link-sub.active { padding-left: 30px; } + +/* ===== ARTIKEL CONTENT ===== */ +.wiki-article-content { + min-width: 0; + background: rgba(255,255,255,0.025); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 10px; + overflow: hidden; + margin-top: 0; + box-shadow: 0 10px 28px rgba(0,0,0,0.22); +} + +.wiki-article-header { + padding: 18px 20px 16px; + border-bottom: 1px solid rgba(255,255,255,0.08); + background: rgba(57,190,255,0.08); +} + +.wiki-article-header h1 { + color: var(--white-color); + font-size: 24px; + font-weight: 800; + line-height: 1.2; + margin: 6px 0 0; + letter-spacing: 0; +} + +.wiki-article-hero { + overflow: hidden; + border-bottom: 1px solid rgba(255,255,255,0.08); +} +.wiki-hero-img { + width: 100%; + max-height: 350px; + object-fit: cover; + display: block; +} + +.wiki-answer-accordion { + border-top: 1px solid rgba(255,255,255,0.08); + background: rgba(255,255,255,0.01); +} + +.wiki-answer-toggle { + width: 100%; + border: none; + background: transparent; + color: inherit; + cursor: pointer; + display: grid; + grid-template-columns: 1fr auto; + gap: 2px 10px; + text-align: left; + align-items: center; + padding: 12px 16px; + transition: background 0.2s ease; +} + +.wiki-answer-toggle:hover { + background: rgba(57,190,255,0.07); +} + +.wiki-answer-toggle:focus-visible { + outline: 2px solid var(--main-color); + outline-offset: -2px; +} + +.wiki-answer-toggle-label { + color: var(--white-color); + font-size: 14px; + font-weight: 700; + letter-spacing: 0; + text-transform: none; +} + +.wiki-answer-toggle-hint { + color: rgba(210,208,208,0.75); + font-size: 12px; + grid-column: 1; +} + +.wiki-answer-toggle-icon { + width: 22px; + height: 22px; + border-radius: 50%; + border: 1px solid rgba(57,190,255,0.55); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--main-color); + font-size: 16px; + font-weight: 700; + transition: opacity 0.2s ease; + grid-column: 2; + grid-row: 1 / span 2; + justify-self: end; + opacity: 0.9; +} + +.wiki-answer-toggle-icon::before { content: '+'; } + +.wiki-answer-accordion.is-open .wiki-answer-toggle-icon::before { content: '\2212'; } + +.wiki-answer-panel { + overflow: hidden; + max-height: 0; + transition: max-height 0.35s ease; +} + +.wiki-answer-accordion.is-open .wiki-answer-panel { + border-top: 1px solid rgba(255,255,255,0.08); +} + +.wiki-article-body { + padding: 20px; + color: var(--description-color); + font-size: 14px; + line-height: 1.75; +} + +.wiki-article-body h1, +.wiki-article-body h2, +.wiki-article-body h3, +.wiki-article-body h4 { + color: var(--white-color); + margin: 36px 0 14px; + line-height: 1.3; +} +.wiki-article-body h2 { + font-size: 24px; + font-weight: 800; + padding-bottom: 12px; + border-bottom: 1px solid var(--border-color); +} +.wiki-article-body h3 { + font-size: 19px; + font-weight: 700; + color: var(--main-color); +} +.wiki-article-body h4 { font-size: 16px; font-weight: 700; } +.wiki-article-body p { margin-bottom: 16px; } +.wiki-article-body ul, +.wiki-article-body ol { padding-left: 24px; margin-bottom: 16px; } +.wiki-article-body li { margin-bottom: 8px; } +.wiki-article-body a { color: var(--main-color); text-decoration: underline; transition: opacity 0.2s; } +.wiki-article-body a:hover { opacity: 0.75; } +.wiki-article-body strong { color: var(--white-color); font-weight: 700; } +.wiki-article-body em { color: rgba(210,208,208,0.8); } +.wiki-article-body hr { border: none; border-top: 1px solid var(--border-color); margin: 30px 0; } + +.wiki-article-body code { + background: rgba(57,190,255,0.1); + border: 1px solid rgba(57,190,255,0.2); + border-radius: 5px; + padding: 2px 8px; + font-family: 'Courier New', monospace; + font-size: 14px; + color: var(--main-color); +} +.wiki-article-body pre { + background: rgba(0,0,0,0.5); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 22px 26px; + overflow-x: auto; + margin: 20px 0; +} +.wiki-article-body pre code { background: none; border: none; padding: 0; color: #e2e8f0; font-size: 14px; } + +.wiki-article-body blockquote { + border-left: 3px solid var(--main-color); + padding: 14px 22px; + margin: 24px 0; + background: rgba(57,190,255,0.05); + border-radius: 0 10px 10px 0; + color: var(--description-color); + font-style: italic; +} + +.wiki-article-body img { + max-width: 100%; + border-radius: 10px; + border: 1px solid var(--border-color); + margin: 20px 0; + display: block; +} + +.wiki-article-body table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; + font-size: 15px; + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--border-color); +} +.wiki-article-body th { + background: rgba(57,190,255,0.12); + color: var(--white-color); + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid var(--border-color); + font-weight: 700; + font-size: 14px; +} +.wiki-article-body td { + padding: 11px 16px; + border-bottom: 1px solid rgba(255,255,255,0.04); + color: var(--description-color); +} +.wiki-article-body tr:last-child td { border-bottom: none; } +.wiki-article-body tr:nth-child(even) td { background: rgba(255,255,255,0.02); } + +/* Vor/Zurück Navigation */ +.wiki-article-nav { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1px; + border-top: 1px solid var(--border-color); + background: var(--border-color); +} +.wiki-nav-prev, +.wiki-nav-next { + display: flex; + flex-direction: column; + gap: 5px; + padding: 18px 24px; + background: var(--background-color); + text-decoration: none; + transition: background 0.2s, transform 0.2s; +} +.wiki-nav-prev:hover, +.wiki-nav-next:hover { + background: rgba(57,190,255,0.08); + transform: translateY(-2px); +} +.wiki-nav-next { text-align: right; border-left: 1px solid var(--border-color); } +.wiki-nav-prev .label, +.wiki-nav-next .label { font-size: 12px; color: var(--main-color); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } +.wiki-nav-prev .title, +.wiki-nav-next .title { font-size: 15px; color: var(--white-color); font-weight: 600; } + +/* Responsive */ +@media screen and (max-width: 1200px) { + .wiki-cat-title { font-size: 22px; } + .wiki-article-header h1 { font-size: 30px; } + .wiki-article-layout { grid-template-columns: 250px 1fr; } +} + +@media screen and (max-width: 900px) { + #wiki-overview .content { gap: 22px; } + .wiki-category-block { padding: 18px; } + .wiki-tabs-nav { flex-wrap: wrap; } + .wiki-tab-button { flex: 1 1 calc(50% - 6px); } + .wiki-article-layout { grid-template-columns: 1fr; gap: 20px; } + .wiki-sidebar { position: static; max-height: none; } + .wiki-article-header { padding: 16px; } + .wiki-article-body { padding: 16px; } + .wiki-answer-toggle { padding: 12px 14px; } +} + +@media screen and (max-width: 600px) { + .wiki-articles-grid { grid-template-columns: 1fr; } + .wiki-article-card { padding: 11px; } + .wiki-cat-title { font-size: 20px; } + .wiki-article-nav { grid-template-columns: 1fr; } + .wiki-nav-next { text-align: left; border-left: none; border-top: 1px solid var(--border-color); } + .wiki-article-header { padding: 18px; } + .wiki-article-header h1 { font-size: 25px; } + .wiki-article-body { padding: 20px; font-size: 15px; } + .wiki-empty { padding: 48px 20px; } +} + +/* ============================================================ + WIKI PRESET B (ultra-minimal) + ============================================================ */ + +#wiki-overview .wiki-plugin-container { + width: min(100%, 1120px); + max-width: 1120px; + border-radius: 8px; + border: 1px solid rgba(255,255,255,0.14); + background: rgba(14, 20, 27, 0.8); + box-shadow: none; +} + +#wiki-overview .wiki-tabs-nav { + padding: 6px; + gap: 4px; + border-bottom: 1px solid rgba(255,255,255,0.12); + background: rgba(255,255,255,0.015); +} + +#wiki-overview .wiki-tab-button { + padding: 9px 10px; + border-radius: 6px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.2px; + color: rgba(210,208,208,0.88); + background: transparent; +} + +#wiki-overview .wiki-tab-button:hover { + color: #fff; + background: rgba(255,255,255,0.05); +} + +#wiki-overview .wiki-tab-button.active { + color: #fff; + background: rgba(57,190,255,0.2); +} + +#wiki-overview .wiki-tabs-content { + padding: 16px; +} + +#wiki-overview .wiki-category-block { + border-radius: 8px; + padding: 12px; + gap: 12px; + border: 1px solid rgba(255,255,255,0.1); + background: rgba(255,255,255,0.015); +} + +#wiki-overview .wiki-panel-block { + margin-bottom: 10px; +} + +#wiki-overview .wiki-panel-block .wiki-subcat-title { + margin-bottom: 8px; + padding: 2px 0 8px; +} + +#wiki-overview .wiki-panel-block .wiki-articles-grid { + margin-top: 4px; +} + +#wiki-overview .wiki-cat-header { + gap: 8px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +#wiki-overview .wiki-cat-title { + font-size: 18px; +} + +#wiki-overview .wiki-cat-count { + display: none; +} + +#wiki-overview .wiki-subcat-block { + padding: 7px; + border-radius: 6px; + background: rgba(255,255,255,0.01); +} + +#wiki-overview .wiki-article-card { + border-radius: 6px; + padding: 12px 14px; + min-height: 66px; + background: rgba(255,255,255,0.015); + border: 1px solid rgba(255,255,255,0.1); +} + +#wiki-overview .wiki-article-card:hover { + transform: none; + background: rgba(57,190,255,0.05); + border-color: rgba(57,190,255,0.4); + box-shadow: none; +} + +#wiki-overview .wiki-card-body h3 { + font-size: 15px; +} + +#wiki-overview .wiki-card-body p { + font-size: 12px; + line-height: 1.45; +} + +#wiki-overview .wiki-articles-grid { + grid-template-columns: 1fr; + gap: 12px; +} + +#wiki-article .wiki-article-content { + border-radius: 8px; + border: 1px solid rgba(255,255,255,0.14); + background: rgba(14, 20, 27, 0.8); + box-shadow: none; +} + +#wiki-article .wiki-article-header { + padding: 14px 16px 12px; + background: rgba(57,190,255,0.06); +} + +#wiki-article .wiki-article-header h1 { + font-size: 20px; + margin-top: 3px; +} + +#wiki-article .wiki-answer-toggle { + padding: 10px 12px; + gap: 2px 8px; +} + +#wiki-article .wiki-answer-toggle-label { + font-size: 13px; + font-weight: 700; +} + +#wiki-article .wiki-answer-toggle-hint { + font-size: 11px; +} + +#wiki-article .wiki-answer-toggle-icon { + display: none; +} + +#wiki-article .wiki-answer-toggle:hover { + background: rgba(255,255,255,0.04); +} + +#wiki-article .wiki-article-body { + padding: 14px; + font-size: 13px; + line-height: 1.65; +} + +@media screen and (max-width: 900px) { + #wiki-overview .wiki-plugin-container { + max-width: 100%; + } + + #wiki-overview .wiki-tab-button { + flex: 1 1 calc(50% - 6px); + } +}