MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus kvwmap
| (43 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 -------------- */ | /* -------------- Nicht anzeigen -------------- */ | ||
| + | #p-cactionst { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | |||
| + | li#n-Startseite { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | li#n-Was-ist-kvwmap { | ||
| + | display: none; | ||
| + | } | ||
| − | |||
div#p-Dokumentation { | div#p-Dokumentation { | ||
display: none; | display: none; | ||
} | } | ||
| − | div#p- | + | div#p-DownloadVersionen { |
display: none; | display: none; | ||
} | } | ||
| Zeile 44: | Zeile 108: | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
| + | div#p-tb { | ||
| + | display: none; | ||
| + | } | ||
body.page-kvwmap_-_Open_Source_WebGIS #firstHeading { | body.page-kvwmap_-_Open_Source_WebGIS #firstHeading { | ||
| Zeile 64: | Zeile 130: | ||
/* -------------- Startseite -------------- */ | /* -------------- Startseite -------------- */ | ||
| − | + | #start-wrapper { | |
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
| − | height: | + | height: 80vh; |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
font-size: 1.3em; | font-size: 1.3em; | ||
| + | cursor: default; | ||
} | } | ||
| − | #start-block-1, #start-block-2,, #start-huebschesbild | + | #start-block-1, #start-block-2,, #start-huebschesbild { |
position: relative; | position: relative; | ||
} | } | ||
| − | /* Max. Breite | + | .expose { |
| − | @media only screen and (max-width: | + | color: #9d4e4e; |
| + | } | ||
| + | |||
| + | /* Max. Breite 1099 px */ | ||
| + | @media only screen and (max-width: 1099px) { | ||
| − | + | #start-wrapper { | |
height: 100%; | height: 100%; | ||
display: flex; | display: flex; | ||
| Zeile 87: | Zeile 158: | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
| − | |||
} | } | ||
| − | #start-block-1 | + | #start-block-1 { |
display: flex; | display: flex; | ||
| − | flex-direction: | + | flex-direction: column; |
justify-content: center; | 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; | box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; | ||
} | } | ||
| Zeile 117: | Zeile 200: | ||
} | } | ||
| − | /* Min. Breite | + | /* Min. Breite 1100 px */ |
| − | @media only screen and (min-width: | + | @media only screen and (min-width: 1100px) { |
| − | #start- | + | #start-wrapper { |
| − | + | display: grid; | |
| + | grid-template-columns: 1fr 1fr 1fr; | ||
| + | align-content: center; | ||
} | } | ||
#start-block-1, #start-block-2 { | #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; | display: flex; | ||
| − | + | flex-direction: column; | |
| − | + | align-content: center; | |
justify-content: flex-start; | justify-content: flex-start; | ||
| + | align-items: flex-start; | ||
| + | padding: 0 0 0 5%; | ||
} | } | ||
| − | + | .start-block-2-2 { | |
| − | left: | + | grid-column: 2/2; |
| + | grid-row: 2; | ||
| + | border-left: 1px solid #555; | ||
| + | padding: 0 0 0 5%; | ||
} | } | ||
| − | #start- | + | #start-huebschesbild { |
| − | + | display: flex; | |
| − | + | flex-direction: column; | |
| + | justify-content: center; | ||
| + | align-items: center; | ||
} | } | ||
| − | #start- | + | } |
| − | + | ||
| − | + | /* 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%; | ||
} | } | ||
| Zeile 155: | Zeile 279: | ||
@media only screen and (min-width: 1400px) { | @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 { | .start-logo-text { | ||
| − | margin-top: - | + | margin-top: -15px; |
| − | margin- | + | margin-left: 30px; |
| + | font-size: 80%; | ||
} | } | ||
#start-huebschesbild img { | #start-huebschesbild img { | ||
| − | width: | + | width: calc(100% - 20px); |
height: auto; | height: auto; | ||
| − | border: | + | border: 3px solid #3976aa; |
border-radius: 100%; | border-radius: 100%; | ||
| − | background: # | + | background: linear-gradient(0deg, #fff 20%, #def5ff 100%); |
} | } | ||
| Zeile 221: | Zeile 349: | ||
@media only screen and (min-width: 1000px) { | @media only screen and (min-width: 1000px) { | ||
| − | .dokumentation-content { | + | .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 -------------- */ | /* -------------- 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 -------------- */