first changes for v0.2
This commit is contained in:
parent
50208b0ee8
commit
0140e114cd
8 changed files with 692 additions and 203 deletions
|
|
@ -53,7 +53,7 @@ a:hover { text-decoration: underline; color: #FFC500; }
|
|||
.header-banner {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
background-image: url('${css_banner_image_path}?v=${CACHE_BUSTER}');
|
||||
background-image: url('%%css_banner_image_path%%?v=%%CACHE_BUSTER%%');
|
||||
background-size: cover;
|
||||
background-position: center 45%;
|
||||
border-bottom: 2px solid #4A2E0A;
|
||||
|
|
@ -100,11 +100,13 @@ a.world-preview:hover {
|
|||
.page-nav-buttons { text-align: right; margin-top: 10px; margin-bottom: 15px; }
|
||||
.page-nav-buttons .button { background-color: #555; color: #FFA500; border: 1px solid #666; padding: 5px 10px; margin-left: 5px; margin-bottom: 5px; border-radius: 3px; text-decoration: none; font-size: 0.9em; display: inline-block; }
|
||||
.page-nav-buttons .button:hover { background-color: #666; color: #FFC500; }
|
||||
.leaflet-map { width: 100%; height: 500px; border: 1px solid #666; margin-bottom: 5px; border-radius: 3px;}
|
||||
.leaflet-map { width: 100%; height: 600px; border: 1px solid #666; margin-bottom: 5px; border-radius: 3px; background-color: #111;}
|
||||
.map-sub-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; color: #aaa; margin-bottom: 20px; padding: 5px 0; }
|
||||
.map-sub-info .map-file-link { text-align: left; } .map-sub-info .map-last-update { text-align: right; }
|
||||
.map-sub-info .map-file-link { text-align: left; }
|
||||
.map-sub-info .map-last-update { text-align: right; }
|
||||
.info-box { background-color: #3a3a3a; border: 1px solid #555; padding: 15px; margin-bottom: 20px; border-left: 5px solid #FFD700; border-radius: 3px;}
|
||||
.info-box h3 { margin-top: 0; border-bottom: none; padding-bottom: 0.2em; }
|
||||
|
||||
/* Admin Sektion */
|
||||
.admin-section h3 { margin-top: 2.5em !important; }
|
||||
.admin-grid {
|
||||
|
|
@ -117,7 +119,10 @@ a.world-preview:hover {
|
|||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4a4a4a;
|
||||
flex: 1;
|
||||
flex-grow: 0; /* KORREKTUR: Verhindert das Strecken der letzten Box */
|
||||
flex-shrink: 1;
|
||||
flex-basis: calc(50% - 8px);
|
||||
box-sizing: border-box;
|
||||
min-width: 280px;
|
||||
}
|
||||
.admin-contact-block { display: flex; align-items: center; }
|
||||
|
|
@ -171,7 +176,16 @@ a.world-preview:hover {
|
|||
.copy-button:hover { background: #666; }
|
||||
.player-list-container { margin-top: 1em; }
|
||||
.player-list-grid { display: flex; flex-wrap: wrap; gap: 15px; box-sizing: border-box; }
|
||||
.player-box { background-color: #303030; border: 1px solid #555; border-radius: 5px; padding: 10px; width: calc(33.333% - 10px); box-sizing: border-box; display: flex; flex-direction: column;}
|
||||
.player-box {
|
||||
background-color: #303030;
|
||||
border: 1px solid #555;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
width: calc((100% - 30px) / 3); /* KORREKTUR: Max 3 Boxen pro Zeile */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.player-box.has-server-priv { border-left: 5px solid #FFD700; }
|
||||
.player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.player-identity { display: flex; align-items: center; }
|
||||
|
|
@ -415,8 +429,56 @@ a.read-more-link {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.leaflet-control-fullscreen a { background:#fff url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath d="M4 14h6v6h4v-4h6v-4h-6v-4h-4v4H4zm17 2h12v-2H21zm0 4h12v-2H21zm5 1h7v-2h-7zM10 23h12v4h-4v-4h-4v4H10zm15 0h7v-2h-7z"/%3E%3C/svg%3E') no-repeat 0 0 !important; background-size: 16px 16px !important; }
|
||||
.leaflet-control-fullscreen a.leaflet-fullscreen-on { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath d="M7 13h2V7h6V5H7zm11-2h7v7h-2v-5h-5z"/%3E%3C/svg%3E') no-repeat 0 0 !important; background-size: 16px 16px !important; }
|
||||
/* KORREKTUR: Leaflet Fullscreen Button Icon */
|
||||
.leaflet-control-fullscreen a {
|
||||
background: #fff url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 9H0v7h7v-2H2V9zM0 7h2V2h5V0H0v7zm14 2v5h-5v2h7V9h-2zm0-2V0h-7v2h5v5h2z" fill="%23333"/%3E%3C/svg%3E') no-repeat center center;
|
||||
background-size: 16px 16px;
|
||||
font-size: 0; /* Versteckt fehlerhafte Text-Icons */
|
||||
}
|
||||
.leaflet-control-fullscreen a.leaflet-fullscreen-on {
|
||||
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 11h5v5h2V9H0v2zm11 5h5V9h-2v5h-3v2zM5 0H0v7h2V2h3V0zm9 2V0h-2v7h7V5h-5z" fill="%23333"/%3E%3C/svg%3E');
|
||||
}
|
||||
|
||||
/* KORREKTUR: Stile für Marker-Popup */
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-content {
|
||||
background-color: #303030 !important;
|
||||
color: #ddd !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
color: #ddd;
|
||||
padding: 8px 8px 0 0;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
.popup-player-box {
|
||||
padding: 10px;
|
||||
}
|
||||
.popup-player-box .player-name {
|
||||
font-size: 1.2em; /* Schriftgröße für Namen im Popup erhöht */
|
||||
}
|
||||
.popup-player-vitals {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.popup-player-vitals .vital {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.popup-player-vitals .icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Responsive Stile für Burger-Menü */
|
||||
|
|
@ -449,7 +511,7 @@ a.read-more-link {
|
|||
margin: 5px;
|
||||
width: auto;
|
||||
}
|
||||
.player-box { width: calc(50% - 10px); }
|
||||
.player-box { width: calc((100% - 15px) / 2); } /* 2 Spalten auf Tablets */
|
||||
.page-nav-buttons .button { margin-top: 5px;}
|
||||
|
||||
/* Responsive Stile für Welt-Vorschau */
|
||||
|
|
@ -463,12 +525,13 @@ a.read-more-link {
|
|||
margin-right: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* NEU: Responsive Höhe für Leaflet-Karte */
|
||||
.leaflet-map {
|
||||
height: auto; /* Deaktiviert die feste Höhe von 500px */
|
||||
aspect-ratio: 1 / 1; /* Erzwingt ein quadratisches Seitenverhältnis */
|
||||
max-height: 70vh; /* Stellt sicher, dass die Karte nicht den ganzen Bildschirm füllt */
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) { .player-box { width: 100%; } }
|
||||
@media (max-width: 480px) {
|
||||
.player-box { width: 100%; } /* 1 Spalte auf Handys */
|
||||
.admin-box { flex-basis: 100%; } /* 1 Spalte auf Handys */
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue