onny/web-wordpress-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add support for custom color

Browse source
This commit is contained in:
Jonas Heinrich 2020-04-15 20:25:31 +02:00
parent e8f3b2c328
commit cb3b475b9d
5 changed files with 62 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

163
kit/style.css
View file

@ -1343,9 +1343,6 @@ aside .aside-icon {
color: #ffffff;
font-size: 0.88889rem;
line-height: 1rem;
background-color: rgba(0, 153, 130, 0.9);
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
@ -1361,8 +1358,6 @@ aside .aside-icon img {
max-width: 60%;
height: auto;
max-height: 60%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@ -1393,22 +1388,12 @@ aside .aside-icon:hover {
.intro-element .content-wrap {
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
padding: 0 5%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@ -1446,8 +1431,6 @@ aside .aside-icon:hover {
min-height: 200%;
max-height: none;
margin: auto auto;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
@ -1463,9 +1446,6 @@ aside .aside-icon:hover {
bottom: 0;
left: 0;
z-index: 1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none;
}
@ -1498,28 +1478,16 @@ aside .aside-icon:hover {
}
.video-teaser:hover .video-teaser-background-image {
-webkit-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03);
}
.video-teaser .content-wrap {
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@ -1540,11 +1508,8 @@ aside .aside-icon:hover {
background-position: center center;
background-size: cover;
pointer-events: none;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.video-teaser .video-teaser-background-image video,
@ -1561,8 +1526,6 @@ aside .aside-icon:hover {
min-height: 200%;
max-height: none;
margin: auto;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
@ -1586,23 +1549,16 @@ aside .aside-icon:hover {
width: 4.44444rem;
height: 4.44444rem;
margin: 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url(../img/video-teaser-play-button.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain contain;
border-radius: 100%;
-webkit-transition: -webkit-box-shadow .5s;
transition: -webkit-box-shadow .5s;
-o-transition: box-shadow .5s;
transition: box-shadow .5s;
transition: box-shadow .5s, -webkit-box-shadow .5s;
}
.video-teaser .play-button:hover {
-webkit-box-shadow: 0 0 25px #565656;
box-shadow: 0 0 25px #565656;
}
@ -1729,23 +1685,13 @@ body.page-theme-color-quaternary .video-teaser .video-teaser-background-loop::af
}
.tabs-and-triangle .container-2-cols .column + .column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: calc(50% - 172px);
padding-left: 1.66667rem;
margin-left: 14.66667rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #ffffff;
}
@ -1834,9 +1780,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
@media (max-width: 960px) {
.tabs-and-triangle .content-wrap .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tabs-and-triangle .container-2-cols .column {
@ -1849,8 +1792,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
padding-left: 0;
margin-top: 130px;
margin-left: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
@ -1879,7 +1820,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
background-size: 100% 100%;
}
.tabs-and-triangle .text-element {
-webkit-columns: 2;
columns: 2;
}
.tabs-and-triangle::before {
@ -1907,7 +1847,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
top: -5rem;
}
.tabs-and-triangle .text-element {
-webkit-columns: unset;
columns: unset;
}
}
@ -2000,9 +1939,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
right: 0;
bottom: 0;
left: -37.5vw;
background-image: -webkit-gradient(linear, left top, right top, from(#e5e5e5), color-stop(45%, #e5e5e5), color-stop(47%, rgba(229, 229, 229, 0.97)), color-stop(50%, rgba(229, 229, 229, 0.89)), color-stop(75%, rgba(229, 229, 229, 0)), to(rgba(229, 229, 229, 0)));
background-image: -webkit-linear-gradient(left, #e5e5e5 0%, #e5e5e5 45%, rgba(229, 229, 229, 0.97) 47%, rgba(229, 229, 229, 0.89) 50%, rgba(229, 229, 229, 0) 75%, rgba(229, 229, 229, 0) 100%);
background-image: -o-linear-gradient(left, #e5e5e5 0%, #e5e5e5 45%, rgba(229, 229, 229, 0.97) 47%, rgba(229, 229, 229, 0.89) 50%, rgba(229, 229, 229, 0) 75%, rgba(229, 229, 229, 0) 100%);
background-image: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 45%, rgba(229, 229, 229, 0.97) 47%, rgba(229, 229, 229, 0.89) 50%, rgba(229, 229, 229, 0) 75%, rgba(229, 229, 229, 0) 100%);
}
@ -2012,11 +1948,7 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
}
.story-teaser-dark .story-teaser-background-image::after {
-webkit-transform: translateZ(0);
transform: translateZ(0);
background-image: -webkit-gradient(linear, left top, right top, from(#333333), color-stop(45%, #333333), color-stop(47%, rgba(51, 51, 51, 0.97)), color-stop(50%, rgba(51, 51, 51, 0.89)), color-stop(75%, rgba(51, 51, 51, 0)), to(rgba(51, 51, 51, 0)));
background-image: -webkit-linear-gradient(left, #333333 0%, #333333 45%, rgba(51, 51, 51, 0.97) 47%, rgba(51, 51, 51, 0.89) 50%, rgba(51, 51, 51, 0) 75%, rgba(51, 51, 51, 0) 100%);
background-image: -o-linear-gradient(left, #333333 0%, #333333 45%, rgba(51, 51, 51, 0.97) 47%, rgba(51, 51, 51, 0.89) 50%, rgba(51, 51, 51, 0) 75%, rgba(51, 51, 51, 0) 100%);
background-image: linear-gradient(to right, #333333 0%, #333333 45%, rgba(51, 51, 51, 0.97) 47%, rgba(51, 51, 51, 0.89) 50%, rgba(51, 51, 51, 0) 75%, rgba(51, 51, 51, 0) 100%);
}
@ -2107,40 +2039,20 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
}
.location-address-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.location-address-container .location-address {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: calc(50% - 0.83333rem);
margin-top: 1.66667rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow-wrap: break-word;
overflow-wrap: anywhere;
@ -2168,8 +2080,6 @@ body.page-theme-color-quaternary .tabs-and-triangle::after {
.location-address-container .location-address .email a {
color: #ffffff;
text-decoration: none;
-webkit-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
@ -2262,22 +2172,12 @@ body.page-theme-color-quaternary .locations-map {
@media (max-width: 768px) {
.locations-map .location-address {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: calc(50% - 0.83333rem);
margin-top: 1.66667rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow-wrap: break-word;
overflow-wrap: anywhere;
@ -2318,8 +2218,6 @@ body.page-theme-color-quaternary .locations-map {
display: block;
padding-left: 2.5rem;
cursor: pointer;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
.location-address-container .location-address-head-icon {
@ -2335,12 +2233,8 @@ body.page-theme-color-quaternary .locations-map {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #eeeeee;
-webkit-transition: height .3s;
-o-transition: height .3s;
transition: height .3s;
}
.location-address-container .location-address-head-icon::before {
@ -2415,8 +2309,6 @@ body.page-theme-color-quaternary .colored-box {
display: block;
padding: 0.55556rem 1.66667rem 0.55556rem 0;
border-bottom: 1px solid #ffffff;
-webkit-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
@ -2425,8 +2317,6 @@ body.page-theme-color-quaternary .colored-box {
}
.link-list li a:hover::after {
-webkit-transform: translateX(-3px);
-ms-transform: translateX(-3px);
transform: translateX(-3px);
opacity: .6;
}
@ -2439,11 +2329,7 @@ body.page-theme-color-quaternary .colored-box {
display: block;
width: 1.11111rem;
height: 0.77778rem;
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, -webkit-transform .3s;
-o-transition: transform .3s, opacity .3s;
transition: transform .3s, opacity .3s;
transition: transform .3s, opacity .3s, -webkit-transform .3s;
}
.link-list li:nth-of-type(1) a {
@ -2476,8 +2362,6 @@ body.page-theme-color-quaternary .colored-box {
.contact-person .phone a,
.contact-person .email a {
text-decoration: none;
-webkit-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
@ -2518,24 +2402,14 @@ form h3 {
}
form .powermail_fieldset {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
padding: 0;
border: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-weight: 300;
}
@ -2564,8 +2438,6 @@ form select {
color: #333333;
background-color: #eeeeee;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@ -2584,8 +2456,6 @@ form input[type='submit'] {
color: #ffffff;
font-weight: 500;
background-color: #009982;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
transition: background-color .5s;
}
@ -2605,8 +2475,6 @@ form .powermail_select-wrapper::after {
display: block;
width: 0.83333rem;
height: 0.83333rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url(../img/arrow-down-grey.svg);
pointer-events: none;
@ -2648,7 +2516,6 @@ form .powermail_fieldwrap_type_radio .powermail_field label input[type='checkbox
position: absolute;
top: 2px;
left: -1.44444rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 0.83333rem;
height: 0.83333rem;
@ -2676,7 +2543,6 @@ form .powermail_fieldwrap_type_radio .powermail_field label input[type='radio']
position: absolute;
top: 2px;
left: -1.44444rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 0.83333rem;
height: 0.83333rem;
@ -2706,24 +2572,6 @@ form .powermail_fieldwrap_type_text > .powermail_field {
line-height: 35px;
}
form ::-webkit-input-placeholder {
color: #404040;
font-weight: 300;
opacity: 1;
}
form :-ms-input-placeholder {
color: #404040;
font-weight: 300;
opacity: 1;
}
form ::-ms-input-placeholder {
color: #404040;
font-weight: 300;
opacity: 1;
}
form ::placeholder {
color: #404040;
font-weight: 300;
@ -2751,8 +2599,6 @@ form ::placeholder {
}
.container-eq-height form .powermail_fieldwrap.powermail_fieldwrap_type_textarea {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@ -2829,22 +2675,13 @@ body.page-theme-color-quaternary form input[type='submit'] {
width: 100%;
max-width: none;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform .7s;
transition: -webkit-transform .7s;
-o-transition: transform .7s;
transition: transform .7s;
transition: transform .7s, -webkit-transform .7s;
}
.teaser-box-image:hover img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}