You are viewing an old version of this page. Return to the latest version.
Difference between revisions of "MediaWiki:Common.css"
m |
m |
/* Korrektur der Darstellung von Tokens-Input-Feldern */ .inputSpan > .pfTokens > ul, .inputSpan > .pfTokens {
margin: 0 0 0 0!important;
}
table.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%;
}
}
organisationsprofil-table{ display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-align: left;
font-size: 13px;
width: 100%;
background: white;
box-shadow: 2px 2px 5px #DEDEDE, -2px -2px 5px #DEDEDE;
} tr.organisationsprofil-row{
width: 50px;
height: 10px;
} tr.organisationsprofil-row > th{ padding-right: 10px; } tr.organisationsprofil-row > td{ padding-right: 10px; } tr.organisationsprofil-row > td + td b{ padding-left: 20px; } tr.organisationsprofil-row > td > div.hw-protokolle-inputbox, tr.organisationsprofil-row > td > div.hw-protokolle-results{ margin-left: 25px; }
/* imagemap hover test */ area:hover {
opacity:0.2;
background-color: yellow;
}
/* 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%;
}
}table.organisationsprofil-table{
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-align: left;
font-size: 13px;
width: 100%;
background: white;
box-shadow: 2px 2px 5px #DEDEDE, -2px -2px 5px #DEDEDE;
}
tr.organisationsprofil-row{
width: 50px;
height: 10px;
}
tr.organisationsprofil-row > th{
padding-right: 10px;
}
tr.organisationsprofil-row > td{
padding-right: 10px;
}
tr.organisationsprofil-row > td + td b{
padding-left: 20px;
}
tr.organisationsprofil-row > td > div.hw-protokolle-inputbox,
tr.organisationsprofil-row > td > div.hw-protokolle-results{
margin-left: 25px;
}
/* imagemap hover test */
area:hover {
opacity:0.2;
background-color: yellow;
}| (35 intermediate revisions by 3 users not shown) | |||
| Line 4: | Line 4: | ||
} | } | ||
| − | . | + | table.organisationsprofil-table{ |
| − | + | display: block; | |
| − | + | padding-top: 20px; | |
| − | + | padding-bottom: 20px; | |
| + | padding-left: 20px; | ||
| + | text-align: left; | ||
| + | font-size: 13px; | ||
| + | width: 100%; | ||
| + | background: white; | ||
| + | box-shadow: 2px 2px 5px #DEDEDE, -2px -2px 5px #DEDEDE; | ||
} | } | ||
| − | + | tr.organisationsprofil-row{ | |
| − | . | + | width: 50px; |
| − | + | height: 10px; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | tr.organisationsprofil-row > th{ | |
| − | . | + | padding-right: 10px; |
| − | |||
} | } | ||
| − | + | tr.organisationsprofil-row > td{ | |
| − | . | + | padding-right: 10px; |
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | tr.organisationsprofil-row > td + td b{ | |
| − | . | + | padding-left: 20px; |
| − | |||
} | } | ||
| − | + | tr.organisationsprofil-row > td > div.hw-protokolle-inputbox, | |
| − | . | + | tr.organisationsprofil-row > td > div.hw-protokolle-results{ |
| − | + | margin-left: 25px; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | /* imagemap hover test */ | |
| − | + | area:hover { | |
| − | + | opacity:0.2; | |
| − | + | background-color: yellow; | |
} | } | ||