MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus kvwmap
| (82 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: | ||
} | } | ||
| − | + | 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 { | body.page-kvwmap_-_Open_Source_WebGIS #firstHeading { | ||
| Zeile 35: | Zeile 125: | ||
} | } | ||
| − | + | /* -------------- Ende Nicht anzeigen -------------- */ | |
| − | + | ||
| + | |||
| + | /* -------------- Startseite -------------- */ | ||
| + | |||
| + | #start-wrapper { | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | height: 80vh; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | font-size: 1.3em; | ||
| + | cursor: default; | ||
} | } | ||
| − | #start- | + | #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-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; | 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%; | width: 100%; | ||
| − | + | display: flex; | |
| − | + | flex-direction: column; | |
| − | + | justify-content: center; | |
| − | margin- | + | 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 -------------- */ | ||
| + | |||
| + | /* -------------- Download kvwmap -------------- */ | ||
| + | |||
| + | #download-wrapper { | ||
| + | position: relative; | ||
| + | display: flex; | ||
| + | flex-flow: column nowrap; | ||
| + | justify-content: flex-start; | ||
| + | align-items: center; | ||
| + | color: #444; | ||
| + | cursor: default; | ||
| + | } | ||
| + | .download_startdiv { | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | margin: 5% 0; | ||
| + | padding: 0; | ||
| + | } | ||
| + | @media screen and (min-width: 982px) { | ||
| + | .download_startdiv { | ||
| + | width: 60%; | ||
| + | } | ||
| + | } | ||
| + | #download-startdiv-wrapper { | ||
| + | display: flex; | ||
| + | flex-wrap: wrap; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | gap: 30px; | ||
| + | } | ||
| + | .download_box_wrapper { | ||
| + | position: relative; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | display: flex; | ||
| + | flex-wrap: nowrap; | ||
| + | flex-direction: column; | ||
| + | } | ||
| + | .download_box { | ||
| + | margin: 0; | ||
| + | padding: 3em; | ||
| + | text-align: center; | ||
| + | display: flex; | ||
| + | flex-wrap: nowrap; | ||
| + | flex-direction: column; | ||
| + | border: 1px solid #ccc; | ||
| + | box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 24px; | ||
| + | } | ||
| + | |||
| + | /* -------------- Download kvwmap Ende -------------- */ | ||
| + | |||
| + | |||
| + | |||
| + | /* -------------- Inhaltsverzeichnisse Ende -------------- */ | ||
Aktuelle Version vom 12. März 2025, 12:50 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 -------------- */
/* -------------- Download kvwmap -------------- */
#download-wrapper {
position: relative;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
color: #444;
cursor: default;
}
.download_startdiv {
position: relative;
width: 100%;
margin: 5% 0;
padding: 0;
}
@media screen and (min-width: 982px) {
.download_startdiv {
width: 60%;
}
}
#download-startdiv-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px;
}
.download_box_wrapper {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
.download_box {
margin: 0;
padding: 3em;
text-align: center;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
border: 1px solid #ccc;
box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 24px;
}
/* -------------- Download kvwmap Ende -------------- */
/* -------------- Inhaltsverzeichnisse Ende -------------- */