KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
(105 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/*** Allgemeine Formatierungen ***/ | /*** Allgemeine Formatierungen ***/ | ||
.logo-made { | .logo-made { | ||
position: absolute; | |||
right: 20px; | |||
top: -4em; | |||
width: 100px; | |||
} | |||
.magnify { | .magnify { | ||
display: none; | |||
} | |||
.thumbinner { | .thumbinner { | ||
border: 0px solid white; | |||
padding: 0px; | |||
background-color: white; | |||
font-size: 94%; | |||
text-align: center; | |||
overflow: hidden; | |||
} | |||
.thumbimage { | .thumbimage { | ||
background-color: #fff; | |||
border: 0px solid white; | |||
} | |||
.tright { | .tright { | ||
margin: 0px; | |||
} | |||
a { | |||
/* Abstand der Links, die die Kacheln umschließen */ | |||
padding: 5px; | |||
} | |||
a:hover { | |||
text-decoration: none; | |||
color: #F1948A; | |||
} | |||
.grid-box { | |||
display:grid; | |||
grid-template-columns: 25% 25% 25% 25%; | |||
max-width: 2000px; | |||
} | |||
.tile { | .tile { | ||
/* Äußerer Kasten */ | /* Äußerer Kasten */ | ||
border: | border: 1px solid rgba(0, 0, 0, 0.05); | ||
border-radius: 2px; | border-radius: 2px; | ||
width: 100%; | |||
max-width: 400px; | |||
margin: 5px; | margin: 5px; | ||
display: inline-flex; | display: inline-flex; | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
align-content: space-between; | align-content: space-between; | ||
} | background: #fff; | ||
height: 95%; | |||
} | |||
.tile:hover .tile-footer { | |||
background: #e74c3c; | |||
color: white; | |||
} | |||
.tile-icon { | |||
/* Icon */ | |||
font-size: 130%; | |||
transition: 0.3s; | |||
} | |||
.tile-iconrow { | |||
/* Linke Spalte mit Icon */ | |||
color: #e74c3c; | |||
display: inline-block; | |||
vertical-align: top; | |||
margin: 10px; | |||
} | |||
.box-top { | .box-top { | ||
width: 100%; | width: 100%; | ||
display: inline-flex; | display: inline-flex; | ||
} | } | ||
.tile-right-col { | |||
/* word-break: break; */ | |||
text-align: left; | |||
padding: 5px; | |||
display: inline-block; | |||
} | |||
.inaktiv .tile-right-header { | |||
color: silver; | |||
} | |||
.inaktiv .tile-list { | |||
color: silver; | |||
} | |||
.inaktiv.tile-footer .Hinweis { | |||
color: white; | |||
} | |||
.inaktiv .tile-iconbox { | |||
background-color: rgba(231, 76, 60, 0.72); | |||
} | |||
a:visited .tile-right-header { | |||
font-weight: bold; | |||
font-size: 3em; | |||
} | |||
a:visited { | |||
color: #e74c3c; | |||
font-weight: bold; | |||
font-size: 1.2em; | |||
} | |||
.tile-footer { | .tile-footer { | ||
/* Fußzeile | /* Fußzeile */ | ||
border-top: | border-top:1px solid rgba(0, 0, 0, 0.05); | ||
background: #f5f5f5; | background: #fff; /* #f5f5f5; */ | ||
display: block; | display: block; | ||
padding: | padding: 10px; | ||
color: #E74C3C; | color: #E74C3C; | ||
text-align: right; | text-align: right; | ||
width:100%; | width:100%; | ||
transition: 500ms; | |||
} | |||
.tile-footer .Hinweis { | |||
float: left; | |||
color: green; | |||
font-weight: bold; | |||
} | } | ||
.tile:hover .Hinweis { | |||
color: white; | |||
} | |||
.collapsed-menu .tile { | |||
background: aquamarine; | |||
. | } | ||
.tile-iconbox { | |||
position: relative; | |||
width: 56.25px; | |||
height: 56.25px; | |||
border: 3.75px solid hsla(0,0%,100%,.85); | |||
border-radius: 50%; | |||
text-align: center; | |||
color: hsla(0,0%,100%,.9); | |||
background-color: #e74c3c; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.tile:hover .tile-icon { | |||
.tile-icon { | transform: scale(1.5); | ||
} | |||
} | |||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte | /* Rechte Spalte */ | ||
width: calc(100% - 80px); | |||
} | |||
width: calc( 100% - | |||
} | |||
.tile-right-header { | .tile-right-header { | ||
/* Rechte Spalte Header */ | /* Rechte Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
.tile-list { | .tile-list { | ||
Zeile 97: | Zeile 179: | ||
color:#585858; | color:#585858; | ||
font-size: 90%; | font-size: 90%; | ||
margin-left: | margin-left: -8px; | ||
} | } | ||
.Hauptseite { | |||
display: grid; | |||
grid-template-columns: 25% 75%; | |||
vertical-align: inherit; | |||
height: 100%; | |||
box-shadow: 0 0 0 1px rgba(0,0,0,0.05); | |||
border-radius: 3px 3px 0px 0px; | |||
} | |||
.Hauptseite ul { | |||
break-inside: avoid; | |||
} | |||
/** | .infotile { | ||
/* Äußerer Kasten */ | |||
border: 1px solid rgba(0, 0, 0, 0.05); | |||
border-radius: 2px; | |||
width: 100%; | |||
max-width: 400px; | |||
margin: 5px; | |||
display: inline-flex; | |||
flex-flow: row wrap; | |||
align-content: space-between; | |||
/* background: #fff; */ | |||
height: 95%; | |||
} | |||
. | .infotile:hover .tile-footer { | ||
background: #e74c3c; | |||
color: white; | |||
} | |||
. | .infotile-icon { | ||
/* Icon */ | |||
font-size: 130%; | |||
transition: 0.3s; | |||
} | |||
. | .infotile-iconrow { | ||
/* | /* Rechte Spalte mit Bild/Icon */ | ||
color: #e74c3c; | |||
color: #e74c3c; | display: block; /* contents; | ||
display: | |||
vertical-align: top; | vertical-align: top; | ||
margin: 10px; */ | |||
} | shape-outside: circle(farthest-side at 50% 50%); | ||
float: right; | |||
padding: 4em; | |||
border-radius: 100%; | |||
} | |||
.box-top { | |||
width: 100%; | |||
display: inline-flex; | |||
} | |||
. | .infotile-left-col { | ||
/* | /* word-break: break; */ | ||
text-align: left; | |||
padding: 5px; | padding: 5px; | ||
display: inline-block; | display: inline-block; | ||
width: | } | ||
} | |||
a:visited .infotile-left-header { | |||
font-weight: bold; | |||
font-size: 3em; | |||
} | |||
a:visited { | |||
color: #e74c3c; | |||
font-weight: bold; | |||
font-size: 1.2em; | |||
} | |||
.collapsed-menu .infotile { | |||
background: aquamarine; | |||
} | |||
.infotile-iconbox { | |||
position: relative; | |||
width: 56.25px; | |||
height: 56.25px; | |||
border: 3.75px solid hsla(0,0%,100%,.85); | |||
border-radius: 50%; | |||
text-align: center; | |||
color: hsla(0,0%,100%,.9); | |||
background-color: #e74c3c; | |||
display: flex; | |||
justify-content:center; | |||
align-items: center; | |||
} | |||
.infotile:hover .tile-icon { | |||
transform: scale(1.5); | |||
} | |||
.infotile-right-col { | |||
/* Rechte Spalte */ | |||
width: 30%; | |||
} | |||
. | .infotile-left-header { | ||
/* | /* Linke Spalte Header */ | ||
font-size: 120%; | |||
font- | } | ||
} | |||
. | .infotile-text { | ||
/* Rechte Spalte Liste */ | /* Rechte Spalte Liste */ | ||
color:#585858; | color: blueviolet; /* #585858; */ | ||
font-size: 90%; | font-size: 90%; | ||
margin-left: 20px; | /* margin-left: 20px; */ | ||
} | margin-top: 5px; | ||
line-height: 1.3em; | |||
} | |||
.infotile-footer { | |||
/* Fußzeile */ | |||
border-top: 1px solid rgba(0, 0, 0, 0.05); | |||
display: block; | |||
padding: 10px; | |||
width: 100%; | |||
transition: 500ms; | |||
box-shadow: 0px 1.4px rgb(2,90,0); | |||
} | |||
.infotile-footer .head{ | |||
display: inline-block; | |||
} | |||
.infotile-footer-icon { | |||
padding-left: 5px; | |||
} | |||
.infotile-footer-subline { | |||
text-align: left; | |||
font-size: 90%; | |||
} | |||
/********************** XXXL ********************/ | |||
@media (min-width: 1601x) { | |||
} /* Ende Formatierungen für min 1105px */ | |||
/*** Formatierungen für Monitore min 1105px (3-Spaltig) ***/ | |||
@media (max-width: 1800px) { | |||
.logo-made { | .logo-made { | ||
position: absolute; | |||
right: 20px; | |||
top: -4em; | |||
width: 100px; | |||
} | |||
.grid-box { | |||
display:grid; | |||
grid-template-columns: 33% 33% 33%; | |||
max-width: 1400px; | |||
} | |||
} | |||
/*** Formatierungen für max 1104px ***/ | |||
@media (max-width: 1104px) { | |||
/*** Mit Menü 2-Spaltig ***/ | |||
.collapsed-menu > * > .grid-box { | |||
display:grid; | |||
grid-template-columns: 33% 33% 33% !important; | |||
} | |||
.grid-box { | |||
display:grid; | |||
grid-template-columns: 50% 50%; | |||
} | |||
.logo-made { | |||
width: 50%; | |||
} | |||
.tile-icon { | .tile-icon { | ||
/* Linke Spalte mit Icon */ | /* Linke Spalte mit Icon */ | ||
font-size: 110%; | |||
transition: 0.3s; | |||
} | |||
.tile:hover .tile-icon { | |||
transform: scale(1.3); | |||
} | } | ||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte | /* Rechte Spalte */ | ||
width: calc(100% - 60px); | |||
} | |||
width: calc( 100% - | |||
} | |||
.tile- | .tile-left-header { | ||
/* | /* Linke Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | color: #E74C3C; | ||
} | |||
.tile-left-subheader { | |||
/* Linke Spalte Header */ | |||
font-size: 100%; | |||
color: rgba(0, 0, 0, 0.6); | |||
} | |||
.tile-list { | .tile-list { | ||
Zeile 195: | Zeile 410: | ||
font-size: 90%; | font-size: 90%; | ||
margin-left: 20px; | margin-left: 20px; | ||
} | } | ||
/*** Ohne Menü 3-Spaltig ***/ | |||
} /* Ende Formatierungen max 1104px */ | } /* Ende Formatierungen max 1104px */ | ||
Zeile 203: | Zeile 423: | ||
/*** Formatierungen für Mobil-Geräte (1-Spaltig) ***/ | /*** Formatierungen für Mobil-Geräte (1-Spaltig) ***/ | ||
@media (max-width: | @media (max-width: 575px) { | ||
.grid-box { | .grid-box { | ||
display:grid; | |||
grid-template-columns: 98%; | |||
} | |||
.logo-made { | .logo-made { | ||
width: 25%; | |||
position: inherit; | |||
} | |||
.tile-icon { | .tile-icon { | ||
/* Linke Spalte mit Icon */ | /* Linke Spalte mit Icon */ | ||
font-size: 130%; | |||
transition: 0.3s; | |||
} | |||
.tile:hover .tile-icon { | |||
transform: scale(1.4); | |||
} | } | ||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte | /* Rechte Spalte */ | ||
width: calc(100% - 80px); | |||
} | |||
width: calc( 100% - | |||
} | |||
.tile- | .tile-left-header { | ||
/* | /* Linke Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
.tile-list { | .tile-list { | ||
/* | /* Linke Spalte Text */ | ||
color:#585858; | color:#585858; | ||
font-size: | font-size: 70%; | ||
margin-left: 20px; | margin-left: 20px; | ||
} | } | ||
.Hauptseite { | |||
grid-template-columns: 100%; | |||
} | |||
} /* Ende Formatierungen für Mobil-Geräte bis | } /* Ende Formatierungen für Mobil-Geräte bis 575px*/ |
Aktuelle Version vom 7. Dezember 2021, 08:16 Uhr
/*** Allgemeine Formatierungen ***/ .logo-made { position: absolute; right: 20px; top: -4em; width: 100px; } .magnify { display: none; } .thumbinner { border: 0px solid white; padding: 0px; background-color: white; font-size: 94%; text-align: center; overflow: hidden; } .thumbimage { background-color: #fff; border: 0px solid white; } .tright { margin: 0px; } a { /* Abstand der Links, die die Kacheln umschließen */ padding: 5px; } a:hover { text-decoration: none; color: #F1948A; } .grid-box { display:grid; grid-template-columns: 25% 25% 25% 25%; max-width: 2000px; } .tile { /* Äußerer Kasten */ border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 2px; width: 100%; max-width: 400px; margin: 5px; display: inline-flex; flex-flow: row wrap; align-content: space-between; background: #fff; height: 95%; } .tile:hover .tile-footer { background: #e74c3c; color: white; } .tile-icon { /* Icon */ font-size: 130%; transition: 0.3s; } .tile-iconrow { /* Linke Spalte mit Icon */ color: #e74c3c; display: inline-block; vertical-align: top; margin: 10px; } .box-top { width: 100%; display: inline-flex; } .tile-right-col { /* word-break: break; */ text-align: left; padding: 5px; display: inline-block; } .inaktiv .tile-right-header { color: silver; } .inaktiv .tile-list { color: silver; } .inaktiv.tile-footer .Hinweis { color: white; } .inaktiv .tile-iconbox { background-color: rgba(231, 76, 60, 0.72); } a:visited .tile-right-header { font-weight: bold; font-size: 3em; } a:visited { color: #e74c3c; font-weight: bold; font-size: 1.2em; } .tile-footer { /* Fußzeile */ border-top:1px solid rgba(0, 0, 0, 0.05); background: #fff; /* #f5f5f5; */ display: block; padding: 10px; color: #E74C3C; text-align: right; width:100%; transition: 500ms; } .tile-footer .Hinweis { float: left; color: green; font-weight: bold; } .tile:hover .Hinweis { color: white; } .collapsed-menu .tile { background: aquamarine; } .tile-iconbox { position: relative; width: 56.25px; height: 56.25px; border: 3.75px solid hsla(0,0%,100%,.85); border-radius: 50%; text-align: center; color: hsla(0,0%,100%,.9); background-color: #e74c3c; display: flex; justify-content: center; align-items: center; } .tile:hover .tile-icon { transform: scale(1.5); } .tile-right-col { /* Rechte Spalte */ width: calc(100% - 80px); } .tile-right-header { /* Rechte Spalte Header */ font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: -8px; } .Hauptseite { display: grid; grid-template-columns: 25% 75%; vertical-align: inherit; height: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 3px 3px 0px 0px; } .Hauptseite ul { break-inside: avoid; } .infotile { /* Äußerer Kasten */ border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 2px; width: 100%; max-width: 400px; margin: 5px; display: inline-flex; flex-flow: row wrap; align-content: space-between; /* background: #fff; */ height: 95%; } .infotile:hover .tile-footer { background: #e74c3c; color: white; } .infotile-icon { /* Icon */ font-size: 130%; transition: 0.3s; } .infotile-iconrow { /* Rechte Spalte mit Bild/Icon */ color: #e74c3c; display: block; /* contents; vertical-align: top; margin: 10px; */ shape-outside: circle(farthest-side at 50% 50%); float: right; padding: 4em; border-radius: 100%; } .box-top { width: 100%; display: inline-flex; } .infotile-left-col { /* word-break: break; */ text-align: left; padding: 5px; display: inline-block; } a:visited .infotile-left-header { font-weight: bold; font-size: 3em; } a:visited { color: #e74c3c; font-weight: bold; font-size: 1.2em; } .collapsed-menu .infotile { background: aquamarine; } .infotile-iconbox { position: relative; width: 56.25px; height: 56.25px; border: 3.75px solid hsla(0,0%,100%,.85); border-radius: 50%; text-align: center; color: hsla(0,0%,100%,.9); background-color: #e74c3c; display: flex; justify-content:center; align-items: center; } .infotile:hover .tile-icon { transform: scale(1.5); } .infotile-right-col { /* Rechte Spalte */ width: 30%; } .infotile-left-header { /* Linke Spalte Header */ font-size: 120%; } .infotile-text { /* Rechte Spalte Liste */ color: blueviolet; /* #585858; */ font-size: 90%; /* margin-left: 20px; */ margin-top: 5px; line-height: 1.3em; } .infotile-footer { /* Fußzeile */ border-top: 1px solid rgba(0, 0, 0, 0.05); display: block; padding: 10px; width: 100%; transition: 500ms; box-shadow: 0px 1.4px rgb(2,90,0); } .infotile-footer .head{ display: inline-block; } .infotile-footer-icon { padding-left: 5px; } .infotile-footer-subline { text-align: left; font-size: 90%; } /********************** XXXL ********************/ @media (min-width: 1601x) { } /* Ende Formatierungen für min 1105px */ /*** Formatierungen für Monitore min 1105px (3-Spaltig) ***/ @media (max-width: 1800px) { .logo-made { position: absolute; right: 20px; top: -4em; width: 100px; } .grid-box { display:grid; grid-template-columns: 33% 33% 33%; max-width: 1400px; } } /*** Formatierungen für max 1104px ***/ @media (max-width: 1104px) { /*** Mit Menü 2-Spaltig ***/ .collapsed-menu > * > .grid-box { display:grid; grid-template-columns: 33% 33% 33% !important; } .grid-box { display:grid; grid-template-columns: 50% 50%; } .logo-made { width: 50%; } .tile-icon { /* Linke Spalte mit Icon */ font-size: 110%; transition: 0.3s; } .tile:hover .tile-icon { transform: scale(1.3); } .tile-right-col { /* Rechte Spalte */ width: calc(100% - 60px); } .tile-left-header { /* Linke Spalte Header */ font-size: 120%; color: #E74C3C; } .tile-left-subheader { /* Linke Spalte Header */ font-size: 100%; color: rgba(0, 0, 0, 0.6); } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } /*** Ohne Menü 3-Spaltig ***/ } /* Ende Formatierungen max 1104px */ /*** Formatierungen für Mobil-Geräte (1-Spaltig) ***/ @media (max-width: 575px) { .grid-box { display:grid; grid-template-columns: 98%; } .logo-made { width: 25%; position: inherit; } .tile-icon { /* Linke Spalte mit Icon */ font-size: 130%; transition: 0.3s; } .tile:hover .tile-icon { transform: scale(1.4); } .tile-right-col { /* Rechte Spalte */ width: calc(100% - 80px); } .tile-left-header { /* Linke Spalte Header */ font-size: 120%; } .tile-list { /* Linke Spalte Text */ color:#585858; font-size: 70%; margin-left: 20px; } .Hauptseite { grid-template-columns: 100%; } } /* Ende Formatierungen für Mobil-Geräte bis 575px*/