You are viewing an old version of this page. Return to the latest version.
Difference between revisions of "MediaWiki:Common.css"
m |
m (Replaced content with "→Korrektur der Darstellung von Tokens-Input-Feldern: .inputSpan > .pfTokens > ul, .inputSpan > .pfTokens { margin: 0 0 0 0!important; } .flex-grid { display: fl...") (Tag: Replaced) |
/* Korrektur der Darstellung von Tokens-Input-Feldern */ .inputSpan > .pfTokens > ul, .inputSpan > .pfTokens {
margin: 0 0 0 0!important;
}
.container {
max-width: 1335px;
margin: 0 auto;
border:0;
}
.grid-row flex-grid {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
} .grid-item col {
height: 550px;
flex-basis: 20%;
-ms-flex: auto;
width: 259px;
position: relative;
padding: 10px;
box-sizing: border-box;
}
.grid-row a {
text-decoration: none;
}
.wrapping-link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
color: currentColor;
}
.grid-item-wrapper {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
background: #ececec;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
position: relative;
} .grid-item-container {
height: 100%;
width: 100%;
position: relative;
}
.grid-image-top {
height: 45%;
width: 120%;
background-size: cover;
position: relative;
background-position: 50% 50%;
left: -10.5%;
top: -4.5%;
}
.grid-image-top .centered {
text-align: center;
transform: translate(-50%, -50%);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 54.5%;
left: 50%;
width: 60%;
height: 60%;
background-position: center;
}
.grid-image-top.rex-ray {
background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));
background: -webkit-linear-gradient(#007DB8,#00447C);
background: -o-linear-gradient(#007DB8,#00447C);
background: linear-gradient(#007DB8,#00447C);
}
.rex-ray-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png);
}
.grid-image-top.sputnik {
background: -webkit-gradient(linear,left top, left bottom,from(#1AA9FB),to(#1785C4));
background: -webkit-linear-gradient(#1AA9FB,#1785C4);
background: -o-linear-gradient(#1AA9FB,#1785C4);
background: linear-gradient(#1AA9FB,#1785C4);
}
.sputnik-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/sputnik-1-300x257.png);
}
.grid-image-top.edgex {
background: -webkit-gradient(linear,left top, left bottom,from(#952f4c),to(#3e1a51));
background: -webkit-linear-gradient(#952f4c,#3e1a51);
background: -o-linear-gradient(#952f4c,#3e1a51);
background: linear-gradient(#952f4c,#3e1a51);
}
.edgex-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/edge-x-300x287.png);
}
.grid-image-top.openswitch {
background: -webkit-gradient(linear,left top, left bottom,from(#2db89a),to(#00793d));
background: -webkit-linear-gradient(#2db89a,#00793d);
background: -o-linear-gradient(#2db89a,#00793d);
background: linear-gradient(#2db89a,#00793d);
}
.openswitch-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/open-switch-300x207.png);
}
.grid-image-top.scaleio {
background: -webkit-gradient(linear,left top, left bottom,from(#2e96dd),to(#326de6));
background: -webkit-linear-gradient(#2e96dd,#326de6);
background: -o-linear-gradient(#2e96dd,#326de6);
background: linear-gradient(#2e96dd,#326de6);
}
.scaleio-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/K8s_ScaleIO_Color-white-thumb-221x300.png);
}
.grid-image-top.csi {
background: -webkit-gradient(linear,left top, left bottom,from(#464646),to(#000000));
background: -webkit-linear-gradient(#464646,#000000);
background: -o-linear-gradient(#464646,#000000);
background: linear-gradient(#464646,#000000);
}
.csi-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/csi-1-300x99.png);
}
.grid-image-top.kubernetes {
background: -webkit-gradient(linear,left top, left bottom,from(#09C1D1),to(#326DE6));
background: -webkit-linear-gradient(#09C1D1,#326DE6);
background: -o-linear-gradient(#09C1D1,#326DE6);
background: linear-gradient(#09C1D1,#326DE6);
}
.kubernetes-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/kubernetes-300x293.png);
}
.grid-image-top.grpc {
background: -webkit-gradient(linear,left top, left bottom,from(#0CC1C8),to(#2E838C));
background: -webkit-linear-gradient(#0CC1C8,#2E838C);
background: -o-linear-gradient(#0CC1C8,#2E838C);
background: linear-gradient(#0CC1C8,#2E838C);
}
.grpc-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/grpc-300x105.png);
}
.grid-image-top.envoy {
background: -webkit-gradient(linear,left top, left bottom,from(#290B54),to(#130229));
background: -webkit-linear-gradient(#290B54,#130229);
background: -o-linear-gradient(#290B54,#130229);
background: linear-gradient(#290B54,#130229);
}
.envoy-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/envoy_logo-5028052-300x91.png);
}
.grid-image-top.istio {
background: -webkit-gradient(linear,left top, left bottom,from(#4A73C0),to(#466BB0));
background: -webkit-linear-gradient(#4A73C0,#466BB0);
background: -o-linear-gradient(#4A73C0,#466BB0);
background: linear-gradient(#4A73C0,#466BB0);
}
.istio-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/istio-203x300.png);
}
.grid-item-content {
padding: 0 20px 20px 20px;
}
.item-title {
font-size: 24px;
line-height: 26px;
font-weight: 700;
margin-bottom: 18px;
display: block;
}
.item-category {
text-transform: uppercase;
display: block;
margin-bottom: 20px;
font-size: 14px;
}
.item-excerpt {
margin-bottom: 20px;
display: block;
font-size: 14px;
}
.more-info {
position: absolute;
bottom: 0;
margin-bottom: 25px;
padding-left: 0;
transition-duration: .5s;
font-size: 12px;
display: flex;
}
.more-info i {
padding-left: 5px;
transition-duration: .5s;
}
.grid-item:hover .more-info i {
padding-left: 20px;
transition-duration: .5s;
}
.more-info i::before {
font-size: 16px;
}
.grid-item:hover .grid-item-wrapper {
padding: 2% 2%;
margin: -2% -2%;
}
@media(max-width: 1333px) {
.grid-item { flex-basis: 33.33%; }flex-grid-4 {
display: flex;
justify-content: space-between;
} .flex-grid-4 .col {
width:22%;
}
@media (max-width: 1073px400px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 815px) {
.grid-item {
flex-basisdisplay: 50%block;
}
}
@media(max-width: 555px) {
.grid-item {
flex-basis: 100%;
}
}
/* Korrektur der Darstellung von Tokens-Input-Feldern */
.inputSpan > .pfTokens > ul, .inputSpan > .pfTokens {
margin: 0 0 0 0!important;
}
.container {
max-width: 1335px;
margin: 0 auto;
border:0;
}
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 550px;
flex-basis: 20%;
-ms-flex: auto;
width: 259px;
position: relative;
padding: 10px;
box-sizing: border-box;
}
.grid-row a {
text-decoration: none;
}
.wrapping-link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
color: currentColor;
}
.grid-item-wrapper {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
background: #ececec;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
position: relative;
}
.grid-item-container {
height: 100%;
width: 100%;
position: relative;
}
.grid-image-top {
height: 45%;
width: 120%;
background-size: cover;
position: relative;
background-position: 50% 50%;
left: -10.5%;
top: -4.5%;
}
.grid-image-top .centered {
text-align: center;
transform: translate(-50%, -50%);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 54.5%;
left: 50%;
width: 60%;
height: 60%;
background-position: center;
}
.grid-image-top.rex-ray {
background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));
background: -webkit-linear-gradient(#007DB8,#00447C);
background: -o-linear-gradient(#007DB8,#00447C);
background: linear-gradient(#007DB8,#00447C);
}
.rex-ray-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png);
}
.grid-image-top.sputnik {
background: -webkit-gradient(linear,left top, left bottom,from(#1AA9FB),to(#1785C4));
background: -webkit-linear-gradient(#1AA9FB,#1785C4);
background: -o-linear-gradient(#1AA9FB,#1785C4);
background: linear-gradient(#1AA9FB,#1785C4);
}
.sputnik-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/sputnik-1-300x257.png);
}
.grid-image-top.edgex {
background: -webkit-gradient(linear,left top, left bottom,from(#952f4c),to(#3e1a51));
background: -webkit-linear-gradient(#952f4c,#3e1a51);
background: -o-linear-gradient(#952f4c,#3e1a51);
background: linear-gradient(#952f4c,#3e1a51);
}
.edgex-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/edge-x-300x287.png);
}
.grid-image-top.openswitch {
background: -webkit-gradient(linear,left top, left bottom,from(#2db89a),to(#00793d));
background: -webkit-linear-gradient(#2db89a,#00793d);
background: -o-linear-gradient(#2db89a,#00793d);
background: linear-gradient(#2db89a,#00793d);
}
.openswitch-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/open-switch-300x207.png);
}
.grid-image-top.scaleio {
background: -webkit-gradient(linear,left top, left bottom,from(#2e96dd),to(#326de6));
background: -webkit-linear-gradient(#2e96dd,#326de6);
background: -o-linear-gradient(#2e96dd,#326de6);
background: linear-gradient(#2e96dd,#326de6);
}
.scaleio-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/K8s_ScaleIO_Color-white-thumb-221x300.png);
}
.grid-image-top.csi {
background: -webkit-gradient(linear,left top, left bottom,from(#464646),to(#000000));
background: -webkit-linear-gradient(#464646,#000000);
background: -o-linear-gradient(#464646,#000000);
background: linear-gradient(#464646,#000000);
}
.csi-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/csi-1-300x99.png);
}
.grid-image-top.kubernetes {
background: -webkit-gradient(linear,left top, left bottom,from(#09C1D1),to(#326DE6));
background: -webkit-linear-gradient(#09C1D1,#326DE6);
background: -o-linear-gradient(#09C1D1,#326DE6);
background: linear-gradient(#09C1D1,#326DE6);
}
.kubernetes-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/kubernetes-300x293.png);
}
.grid-image-top.grpc {
background: -webkit-gradient(linear,left top, left bottom,from(#0CC1C8),to(#2E838C));
background: -webkit-linear-gradient(#0CC1C8,#2E838C);
background: -o-linear-gradient(#0CC1C8,#2E838C);
background: linear-gradient(#0CC1C8,#2E838C);
}
.grpc-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/grpc-300x105.png);
}
.grid-image-top.envoy {
background: -webkit-gradient(linear,left top, left bottom,from(#290B54),to(#130229));
background: -webkit-linear-gradient(#290B54,#130229);
background: -o-linear-gradient(#290B54,#130229);
background: linear-gradient(#290B54,#130229);
}
.envoy-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/envoy_logo-5028052-300x91.png);
}
.grid-image-top.istio {
background: -webkit-gradient(linear,left top, left bottom,from(#4A73C0),to(#466BB0));
background: -webkit-linear-gradient(#4A73C0,#466BB0);
background: -o-linear-gradient(#4A73C0,#466BB0);
background: linear-gradient(#4A73C0,#466BB0);
}
.istio-image {
background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/istio-203x300.png);
}
.grid-item-content {
padding: 0 20px 20px 20px;
}
.item-title {
font-size: 24px;
line-height: 26px;
font-weight: 700;
margin-bottom: 18px;
display: block;
}
.item-category {
text-transform: uppercase;
display: block;
margin-bottom: 20px;
font-size: 14px;
}
.item-excerpt {
margin-bottom: 20px;
display: block;
font-size: 14px;
}
.more-info {
position: absolute;
bottom: 0;
margin-bottom: 25px;
padding-left: 0;
transition-duration: .5s;
font-size: 12px;
display: flex;
}
.more-info i {
padding-left: 5px;
transition-duration: .5s;
}
.grid-item:hover .more-info i {
padding-left: 20px;
transition-duration: .5s;
}
.more-info i::before {
font-size: 16px;
}
.grid-item:hover .grid-item-wrapper {
padding: 2% 2%;
margin: -2% -2%;
}
@media(max-width: 1333px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 1073px) {
.grid-item {
flex-basis: 33.33%;
}
}
@media(max-width: 815px) {
.grid-item {
flex-basis: 50%;
}
}
@media(max-width: 555px) {
.grid-item {
flex-basis: 100%flex-grid {
display: flex;
}
.col {
flex: 1;
}
.flex-grid-4 {
display: flex;
justify-content: space-between;
}
.flex-grid-4 .col {
width:22%;
}
@media (max-width: 400px) {
.flex-grid {
display: block;
}
}| Line 4: | Line 4: | ||
} | } | ||
| − | . | + | .flex-grid { |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
display: flex; | display: flex; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | .col { | |
| − | . | + | flex: 1; |
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | .flex-grid-4 { | |
| − | . | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
display: flex; | display: flex; | ||
| + | justify-content: space-between; | ||
} | } | ||
| − | + | .flex-grid-4 .col { | |
| − | . | + | width:22%; |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | @media(max-width: | + | @media (max-width: 400px) { |
| − | .grid | + | .flex-grid { |
| − | + | display: block; | |
} | } | ||
} | } | ||