KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
(18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 32: | Zeile 32: | ||
.tile { | .tile { | ||
/* Äußerer Kasten */ | /* Äußerer Kasten */ | ||
border: | border: 1px solid rgba(0, 0, 0, 0.05); | ||
border-radius: 2px; | border-radius: 2px; | ||
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; | |||
} | |||
.tile:hover .tile-footer { | |||
background: #e74c3c; | |||
} | |||
.tile-icon { | |||
/* Linke Spalte mit Icon */ | |||
padding: 14px; | |||
color: #e74c3c; | |||
display: inline-block; | |||
vertical-align: top; | |||
margin: 10px; | |||
} | } | ||
Zeile 49: | Zeile 63: | ||
/* word-break: break; */ | /* word-break: break; */ | ||
text-align: left; | text-align: left; | ||
padding: 5px; | |||
display: inline-block; | |||
} | |||
.tile-right-header { | |||
color: #e74c3c !important; | |||
font-weight: bold; | |||
} | } | ||
.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: 5px; | padding: 5px; | ||
Zeile 76: | Zeile 97: | ||
.tile-icon { | .tile-icon { | ||
/* Linke Spalte mit Icon */ | /* Linke Spalte mit Icon */ | ||
width: 70px; | width: 70px; | ||
/* font-size: 350%; */ | |||
font-size: | font-size: 130%; | ||
margin: 0 auto; | |||
position: relative; | |||
width: 56.25px; | |||
height: 56.25px; | |||
border: 3.75px solid | |||
hsla(0,0%,100%,.85); | |||
border-radius: 50%; | |||
color: hsla(0,0%,100%,.9); | |||
background: #e74c3c; | |||
} | |||
.tile:hover .tile-icon { | |||
font-size: 170%; | |||
padding: 11px; | |||
} | } | ||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte */ | /* Rechte Spalte */ | ||
width: calc(100% - 70px); | width: calc(100% - 70px); | ||
} | } | ||
Zeile 93: | Zeile 123: | ||
.tile-right-header { | .tile-right-header { | ||
/* Rechte Spalte Header */ | /* Rechte Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
Zeile 116: | Zeile 144: | ||
/*** Mit Menü 2-Spaltig ***/ | /*** Mit Menü 2-Spaltig ***/ | ||
.collapsed-menu > * > .grid-box { | |||
display:grid; | |||
grid-template-columns: 33% 33% 33% !important; | |||
} | |||
.grid-box { | .grid-box { | ||
Zeile 128: | Zeile 161: | ||
.tile-icon { | .tile-icon { | ||
/* Linke Spalte mit Icon */ | /* Linke Spalte mit Icon */ | ||
width: 60px; | width: 60px; | ||
font-size: 250%; | font-size: 250%; | ||
} | } | ||
Zeile 138: | Zeile 167: | ||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte */ | /* Rechte Spalte */ | ||
width: calc(100% - 60px); | width: calc(100% - 60px); | ||
} | } | ||
Zeile 145: | Zeile 172: | ||
.tile-right-header { | .tile-right-header { | ||
/* Rechte Spalte Header */ | /* Rechte Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
Zeile 159: | Zeile 184: | ||
/*** Ohne Menü 3-Spaltig ***/ | /*** Ohne Menü 3-Spaltig ***/ | ||
.logo-made { | .logo-made { | ||
Zeile 173: | Zeile 195: | ||
.tile-icon { | .tile-icon { | ||
/* Linke Spalte mit Icon */ | /* Linke Spalte mit Icon */ | ||
width: 60px; | |||
font-size: 250%; | |||
width: | |||
font-size: | |||
} | } | ||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte */ | /* Rechte Spalte */ | ||
width: calc(100% - 60px); | |||
width: calc(100% - | |||
} | } | ||
.tile-right-header { | .tile-right-header { | ||
/* Rechte Spalte Header */ | /* Rechte Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
Zeile 208: | Zeile 222: | ||
/*** 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 { | ||
Zeile 214: | Zeile 228: | ||
grid-template-columns: 98%; | grid-template-columns: 98%; | ||
} | } | ||
Zeile 223: | Zeile 236: | ||
.tile-icon { | .tile-icon { | ||
/* Linke Spalte mit Icon */ | /* Linke Spalte mit Icon */ | ||
width: 70px; | |||
font-size: 350%; | |||
width: | |||
font-size: | |||
} | } | ||
.tile-right-col { | .tile-right-col { | ||
/* Rechte Spalte */ | /* Rechte Spalte */ | ||
width: calc( 100% - 70px); | |||
width: calc( 100% - | |||
} | } | ||
.tile-right-header { | .tile-right-header { | ||
/* Rechte Spalte Header */ | /* Rechte Spalte Header */ | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
Zeile 253: | Zeile 258: | ||
} /* Ende Formatierungen für Mobil-Geräte bis | } /* Ende Formatierungen für Mobil-Geräte bis 575px*/ |
Version vom 12. Dezember 2019, 16:51 Uhr
/*** Allgemeine Formatierungen ***/ .logo-made { width: 150px; float: right; margin-left: 50px; } .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; } .tile { /* Äußerer Kasten */ border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 2px; max-width: 400px; margin: 5px; display: inline-flex; flex-flow: row wrap; align-content: space-between; background: #fff; } .tile:hover .tile-footer { background: #e74c3c; } .tile-icon { /* Linke Spalte mit Icon */ padding: 14px; 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; } .tile-right-header { color: #e74c3c !important; font-weight: bold; } .tile-footer { /* Fußzeile */ border-top:1px solid rgba(0, 0, 0, 0.05); background: #fff; /* #f5f5f5; */ display: block; padding: 5px; color: #E74C3C; text-align: right; width:100%; } /*** Formatierungen für Monitore min 1105px (3-Spaltig) ***/ @media (min-width: 1105px) { .grid-box { display:grid; grid-template-columns: 33% 33% 33%; } .tile-icon { /* Linke Spalte mit Icon */ width: 70px; /* font-size: 350%; */ font-size: 130%; margin: 0 auto; position: relative; width: 56.25px; height: 56.25px; border: 3.75px solid hsla(0,0%,100%,.85); border-radius: 50%; color: hsla(0,0%,100%,.9); background: #e74c3c; } .tile:hover .tile-icon { font-size: 170%; padding: 11px; } .tile-right-col { /* Rechte Spalte */ width: calc(100% - 70px); } .tile-right-header { /* Rechte Spalte Header */ font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } } /* Ende Formatierungen für min 1105px */ /*** 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 */ width: 60px; font-size: 250%; } .tile-right-col { /* Rechte Spalte */ width: calc(100% - 60px); } .tile-right-header { /* Rechte Spalte Header */ font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } /*** Ohne Menü 3-Spaltig ***/ .logo-made { width: 150px; float: right; margin-left: 50px; } .tile-icon { /* Linke Spalte mit Icon */ width: 60px; font-size: 250%; } .tile-right-col { /* Rechte Spalte */ width: calc(100% - 60px); } .tile-right-header { /* Rechte Spalte Header */ font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } } /* 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: 50%; } .tile-icon { /* Linke Spalte mit Icon */ width: 70px; font-size: 350%; } .tile-right-col { /* Rechte Spalte */ width: calc( 100% - 70px); } .tile-right-header { /* Rechte Spalte Header */ font-size: 120%; } .tile-list { /* Rechte Spalte Liste */ color:#585858; font-size: 90%; margin-left: 20px; } } /* Ende Formatierungen für Mobil-Geräte bis 575px*/