add support for custom color

README.md

@@ -24,6 +24,7 @@ Fork of the experimental KIT theme from kit-ausbildung.de, adapted to Wordpres.
      * Klicken auf Menü erstellen
      * Position im Theme: Footer Menü
     * Suchseite anlegen https://codex.wordpress.org/Creating_a_Search_Page#Using_the_page.php
+    * Custom logo, custom theme color
  * **From the appstore:** The most recent and stable version of the app can be found in the [official appstore](https://apps.nextcloud.com/apps/radio).
  * **Using git:** In your `nextcloud/apps/` directory, run `git clone https://git.project-insanity.org/onny/nextcloud-app-radio.git radio`. Then go to the Apps manager tab in your Nextcloud web interface, and enable the Radio app.
  * **Using the zip archive:** Download the latest [tar.bz2 archive](https://git.project-insanity.org/onny/nextcloud-app-radio/repository/archive.tar.bz2?ref=master), extract the directory inside your `nextcloud/apps/` directory, and rename it to `radio`. For stable releases, you can also download one of the [releases](https://git.project-insanity.org/onny/nextcloud-app-radio/) tar.bz2 archives. Then go to the Apps manager tab in your Nextcloud web interface, and enable the Radio app.

kit/css/header.css

@@ -105,7 +105,6 @@ header:not(.sticky-header) .header-button-container {
   color: #ffffff;
   font-weight: 500;
   white-space: nowrap;
-  background-image: linear-gradient(0deg, #009982, #00c8ad);
   border-radius: 3px;
 }
 

kit/css/menu.css

@@ -33,11 +33,6 @@ nav > ul > li > a {
   line-height: 1;
 }
 
-nav > ul > li:hover > a,
-nav > ul > li:active > a {
-  color: #009982;
-}
-
 nav > ul > li:hover > a::after,
 nav > ul > li:active > a::after {
   content: '';
@@ -46,7 +41,6 @@ nav > ul > li:active > a::after {
   left: 0;
   width: 100%;
   height: 1.55556rem;
-  border-bottom: 4px solid #009982;
 }
 
 nav > ul > li.opened .nav-first-level-opener::after {
@@ -71,7 +65,6 @@ nav > ul > li .nav-first-level-opener span {
 nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
   content: '';
   position: absolute;
-  background-color: #009982;
   transition: transform .3s;
 }
 
@@ -226,7 +219,6 @@ nav > ul > li .nav-first-level-opener::after {
   display: inline-block;
   margin-bottom: 1rem;
   margin-left: 2rem;
-  color: #009982;
   font-weight: 700;
 }
 
@@ -301,7 +293,6 @@ nav > ul > li .nav-first-level-opener::after {
 .nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
   content: '';
   position: absolute;
-  background-color: #009982;
   transition: transform .3s;
 }
 
@@ -399,7 +390,4 @@ nav ul li:hover .nav-second-level {
     margin-top: 0;
     overflow: hidden;
   }
-  .opened > a {
-    color: #009982;
-  }
 }

kit/functions.php

@@ -112,3 +112,64 @@ class kit_custom_main_menu extends Walker_Nav_Menu {
     }
 
 }
+
+function theme_customize_register( $wp_customize ) {
+
+    $wp_customize->add_setting( 'theme_color', array(
+      'default'   => '#009982',
+      'transport' => 'refresh',
+    ) );
+
+    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'theme_color', array(
+      'section' => 'colors',
+      'label'   => esc_html__( 'Theme color', 'theme' ),
+    ) ) );
+
+}
+
+add_action( 'customize_register', 'theme_customize_register' );
+
+function kit_customize_css()
+{
+    ?>
+         <style type="text/css">
+             aside .aside-icon {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             nav > ul > li:hover > a,
+             nav > ul > li:active > a {
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             nav > ul > li:hover > a::after,
+             nav > ul > li:active > a::after {
+               border-bottom: 4px solid <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .header-button {
+               /* background-image: linear-gradient(0deg, <?php echo get_theme_mod('theme_color', '#009982'); ?>, rgb(0,0,0,0.2)); */
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+               box-shadow: inset 0 14px 16px -16px white;
+             }
+
+             .nav-second-level-group-headline {
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .opened > a {
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+         </style>
+    <?php
+}
+add_action( 'wp_head', 'kit_customize_css');

kit/style.css

@@ -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);
 }