MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus kvwmap
(72 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 10: | Zeile 10: | ||
line-height: 1.5em; | line-height: 1.5em; | ||
font-size: 106%; | font-size: 106%; | ||
+ | } | ||
+ | |||
+ | @media screen { | ||
+ | div#mw-panel { | ||
+ | font-size: inherit; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 16em; | ||
+ | margin-top: 2em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 982px) { | ||
+ | #mw-panel { | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 982px) { | ||
+ | #p-logo { | ||
+ | left: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen { | ||
+ | #p-logo { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-content: stretch; | ||
+ | } | ||
} | } | ||
Zeile 17: | Zeile 53: | ||
} | } | ||
− | div# | + | li#ca-view, li#ca-viewsource { |
− | + | display: none; | |
+ | } | ||
+ | |||
+ | @media screen and (min-width: 982px) { | ||
+ | div#content { | ||
+ | margin-left: 16em; | ||
+ | padding: 2em 10em 1.5em 0em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen { | ||
+ | div#content { | ||
+ | border: none; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* -------------- Nicht anzeigen -------------- */ | ||
+ | |||
+ | #p-cactionst { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | li#n-Startseite { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | li#n-Was-ist-kvwmap { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div#p-Dokumentation { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div#p-DownloadVersionen { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div#p-Foren { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div#p-Community { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div#p-Extras { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div#p-tb { | ||
+ | display: none; | ||
} | } | ||
Zeile 32: | Zeile 124: | ||
display: none; | display: none; | ||
} | } | ||
+ | |||
+ | /* -------------- Ende Nicht anzeigen -------------- */ | ||
/* -------------- Startseite -------------- */ | /* -------------- Startseite -------------- */ | ||
− | + | #start-wrapper { | |
− | + | position: relative; | |
− | + | width: 100%; | |
− | + | height: 80vh; | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-size: 1.3em; | ||
+ | cursor: default; | ||
} | } | ||
− | + | #start-block-1, #start-block-2,, #start-huebschesbild { | |
− | + | position: relative; | |
} | } | ||
− | + | .expose { | |
− | + | color: #9d4e4e; | |
} | } | ||
− | @media | + | /* Max. Breite 1099 px */ |
− | + | @media only screen and (max-width: 1099px) { | |
− | .start- | + | |
+ | #start-wrapper { | ||
+ | height: 100%; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | flex-wrap: nowrap; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | #start-block-1 { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | align-content: stretch; | ||
+ | align-items: center; | ||
+ | margin-top: 10%; | ||
+ | } | ||
+ | |||
+ | #start-logo, .start-block-1-1, .start-block-2-1, .start-block-2-2 { | ||
+ | width: 100%; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | align-content: stretch; | ||
+ | align-items: center; | ||
+ | margin-bottom: 10%; | ||
+ | } | ||
+ | |||
+ | .start-block-1-1, .start-block-2-1, .start-block-2-2 { | ||
+ | box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; | ||
+ | } | ||
+ | |||
+ | #start-block-1 { | ||
+ | order: 1; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | #start-block-2 { | ||
+ | order: 2; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | #start-huebschesbild { | ||
+ | order: 3; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Min. Breite 1100 px */ | ||
+ | @media only screen and (min-width: 1100px) { | ||
+ | |||
+ | #start-wrapper { | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | align-content: center; | ||
+ | } | ||
+ | |||
+ | #start-block-1, #start-block-2 { | ||
+ | display: grid; | ||
+ | grid-template-columns: 0.9fr auto 10%; | ||
+ | grid-template-rows: 1fr 1fr; | ||
+ | row-gap: 5%; | ||
+ | } | ||
+ | |||
+ | #start-block-2 { | ||
+ | grid-template-columns: 10% auto; | ||
+ | row-gap: 15%; | ||
+ | } | ||
+ | |||
+ | .start-block-1-1 { | ||
+ | grid-column: 2/4; | ||
+ | grid-row: 2; | ||
+ | border-left: 1px solid #555; | ||
+ | padding: 0 0 0 10%; | ||
+ | } | ||
+ | |||
+ | #start-logo { | ||
+ | grid-column: 2/2; | ||
+ | grid-row: 1; | ||
+ | border-left: 1px solid #555; | ||
+ | padding: 0 0 10% 10%; | ||
+ | } | ||
+ | |||
+ | .start-block-2-1 { | ||
+ | grid-column: 2/2; | ||
+ | grid-row: 1; | ||
+ | border-left: 1px solid #555; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | align-content: center; | ||
+ | justify-content: flex-start; | ||
+ | align-items: flex-start; | ||
+ | padding: 0 0 0 5%; | ||
+ | } | ||
+ | |||
+ | .start-block-2-2 { | ||
+ | grid-column: 2/2; | ||
+ | grid-row: 2; | ||
+ | border-left: 1px solid #555; | ||
+ | padding: 0 0 0 5%; | ||
+ | } | ||
+ | |||
+ | #start-huebschesbild { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Min. Breite 1200 px */ | ||
+ | @media only screen and (min-width: 1200px) { | ||
+ | |||
+ | #start-wrapper { | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | #start-block-1, #start-block-2 { | ||
+ | row-gap: 10%; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Min. Breite 1400 px */ | ||
+ | @media only screen and (min-width: 1400px) { | ||
+ | |||
+ | #start-wrapper { | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | } | ||
+ | #start-block-1, #start-block-2 { | ||
+ | row-gap: 15%; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Min. Breite 1600 px */ | ||
+ | @media only screen and (min-width: 1600px) { | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .start-logo-text { | ||
+ | margin-top: -15px; | ||
+ | margin-left: 30px; | ||
+ | font-size: 80%; | ||
+ | } | ||
+ | |||
+ | #start-huebschesbild img { | ||
+ | width: calc(100% - 20px); | ||
+ | height: auto; | ||
+ | border: 3px solid #3976aa; | ||
+ | border-radius: 100%; | ||
+ | background: linear-gradient(0deg, #fff 20%, #def5ff 100%); | ||
} | } | ||
/* -------------- Startseite Ende -------------- */ | /* -------------- Startseite Ende -------------- */ | ||
+ | |||
+ | |||
+ | /* -------------- Inhaltsverzeichnisse -------------- */ | ||
+ | |||
+ | .dokumentation-wrapper { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100vh; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | flex-wrap: nowrap; | ||
+ | justify-content: center; | ||
+ | align-items: flex-start; | ||
+ | font-size: 1.3em; | ||
+ | } | ||
+ | |||
+ | .dokumentation-content { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | flex-wrap: nowrap; | ||
+ | gap: 1em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Max. Breite 1000 px */ | ||
+ | @media only screen and (max-width: 1000px) { | ||
+ | |||
+ | .dokumentation-content { | ||
+ | width: 100%; | ||
+ | padding: 1em; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Min. Breite 1000 px */ | ||
+ | @media only screen and (min-width: 1000px) { | ||
+ | |||
+ | .dokumentation-content { | ||
+ | align-items: flex-start; | ||
+ | margin-top: 10%; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* -------------- Inhaltsverzeichnisse Ende -------------- */ |
Aktuelle Version vom 24. November 2023, 11:22 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ .noautonum .tocnumber { display: none; } .portlet h3 { font-size: 106%; } .portlet ul { line-height: 1.5em; font-size: 106%; } @media screen { div#mw-panel { font-size: inherit; position: absolute; top: 0; left: 0; width: 16em; margin-top: 2em; } } @media screen and (min-width: 982px) { #mw-panel { padding-left: 0; } } @media screen and (min-width: 982px) { #p-logo { left: 0; } } @media screen { #p-logo { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: flex; justify-content: center; align-content: stretch; } } img.halfwidth { width: 100%; height: auto; } li#ca-view, li#ca-viewsource { display: none; } @media screen and (min-width: 982px) { div#content { margin-left: 16em; padding: 2em 10em 1.5em 0em; } } @media screen { div#content { border: none; background-color: transparent; } } /* -------------- Nicht anzeigen -------------- */ #p-cactionst { visibility: hidden; } li#n-Startseite { display: none; } li#n-Was-ist-kvwmap { display: none; } div#p-Dokumentation { display: none; } div#p-DownloadVersionen { display: none; } div#p-Foren { display: none; } div#p-Community { display: none; } div#p-Extras { display: none; } div#p-tb { display: none; } body.page-kvwmap_-_Open_Source_WebGIS #firstHeading { display: none; } body.page-kvwmap_-_Open_Source_WebGIS .mw-content-ltr > p { display: none; } div#p-namespaces.vectorTabs { display: none; } /* -------------- Ende Nicht anzeigen -------------- */ /* -------------- Startseite -------------- */ #start-wrapper { position: relative; width: 100%; height: 80vh; margin: 0; padding: 0; font-size: 1.3em; cursor: default; } #start-block-1, #start-block-2,, #start-huebschesbild { position: relative; } .expose { color: #9d4e4e; } /* Max. Breite 1099 px */ @media only screen and (max-width: 1099px) { #start-wrapper { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } #start-block-1 { display: flex; flex-direction: column; justify-content: center; align-content: stretch; align-items: center; margin-top: 10%; } #start-logo, .start-block-1-1, .start-block-2-1, .start-block-2-2 { width: 100%; display: flex; flex-direction: column; justify-content: center; align-content: stretch; align-items: center; margin-bottom: 10%; } .start-block-1-1, .start-block-2-1, .start-block-2-2 { box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; } #start-block-1 { order: 1; width: 50%; } #start-block-2 { order: 2; width: 50%; } #start-huebschesbild { order: 3; width: 50%; } } /* Min. Breite 1100 px */ @media only screen and (min-width: 1100px) { #start-wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; align-content: center; } #start-block-1, #start-block-2 { display: grid; grid-template-columns: 0.9fr auto 10%; grid-template-rows: 1fr 1fr; row-gap: 5%; } #start-block-2 { grid-template-columns: 10% auto; row-gap: 15%; } .start-block-1-1 { grid-column: 2/4; grid-row: 2; border-left: 1px solid #555; padding: 0 0 0 10%; } #start-logo { grid-column: 2/2; grid-row: 1; border-left: 1px solid #555; padding: 0 0 10% 10%; } .start-block-2-1 { grid-column: 2/2; grid-row: 1; border-left: 1px solid #555; display: flex; flex-direction: column; align-content: center; justify-content: flex-start; align-items: flex-start; padding: 0 0 0 5%; } .start-block-2-2 { grid-column: 2/2; grid-row: 2; border-left: 1px solid #555; padding: 0 0 0 5%; } #start-huebschesbild { display: flex; flex-direction: column; justify-content: center; align-items: center; } } /* Min. Breite 1200 px */ @media only screen and (min-width: 1200px) { #start-wrapper { grid-template-columns: 1fr 1fr 1fr; } #start-block-1, #start-block-2 { row-gap: 10%; } } /* Min. Breite 1400 px */ @media only screen and (min-width: 1400px) { #start-wrapper { grid-template-columns: 1fr 1fr 1fr; } #start-block-1, #start-block-2 { row-gap: 15%; } } /* Min. Breite 1600 px */ @media only screen and (min-width: 1600px) { } .start-logo-text { margin-top: -15px; margin-left: 30px; font-size: 80%; } #start-huebschesbild img { width: calc(100% - 20px); height: auto; border: 3px solid #3976aa; border-radius: 100%; background: linear-gradient(0deg, #fff 20%, #def5ff 100%); } /* -------------- Startseite Ende -------------- */ /* -------------- Inhaltsverzeichnisse -------------- */ .dokumentation-wrapper { position: relative; width: 100%; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; font-size: 1.3em; } .dokumentation-content { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1em; } /* Max. Breite 1000 px */ @media only screen and (max-width: 1000px) { .dokumentation-content { width: 100%; padding: 1em; } } /* Min. Breite 1000 px */ @media only screen and (min-width: 1000px) { .dokumentation-content { align-items: flex-start; margin-top: 10%; } } /* -------------- Inhaltsverzeichnisse Ende -------------- */