refactoring css

ot_templating/Resources/Private/Partials/Menu.html

@@ -8,7 +8,10 @@
 
 <f:comment><!--Navbar: Menu de premier niveau.
            Si les items ont des sous-pages, on leur donne la classe dropdown--></f:comment>
-<v:menu as="mainMenu" classHasSubpages="dropdown" pageUid="{ot:rootPage.getId()}">
+<v:menu as="mainMenu"
+        classHasSubpages="dropdown"
+        classCurrent="current"
+        pageUid="{ot:rootPage.getId()}">
 
     <ul id="menu">
         <f:for each="{mainMenu}" as="mainMenuItem">
@@ -25,7 +28,10 @@
                 <f:comment><!--Si la page a des sous-pages: menu de second niveau--></f:comment>
                 <f:if condition="{mainMenuItem.hasSubPages}">
                     <ul class="dropdown-menu">
-                        <v:menu as="subMenu" pageUid="{mainMenuItem.uid}" classHasSubpages="dropdown">
+                        <v:menu as="subMenu"
+                                pageUid="{mainMenuItem.uid}"
+                                classHasSubpages="dropdown"
+                                classCurrent="current">
 
                             <f:for each="{subMenu}" as="subMenuItem">
 
@@ -41,7 +47,10 @@
                                     <f:comment><!--Si la page a des sous-pages: menu de troisième niveau--></f:comment>
                                     <f:if condition="{subMenuItem.hasSubPages}">
 
-                                        <v:menu as="thirdmenu" class="dropdown-menu" pageUid="{subMenuItem.uid}" >
+                                        <v:menu as="thirdmenu"
+                                                class="dropdown-menu"
+                                                classCurrent="current"
+                                                pageUid="{subMenuItem.uid}" >
 
                                             <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">
                                                 <li class="{thirdLevelMenuItem.class}">

ot_templating/Resources/Public/assets/style/common/base.scss

@@ -1,21 +1,9 @@
-$font-stack: Liberation Sans, Arial;
-$font-size: 14px;
-
-@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
-$title-font-stack: 'Comfortaa', cursive;
-
 $carousel-height: 380px;
 
 a {
-  color: $a-color;
   text-decoration: none;
 }
 
-a:hover {
-  color: $a-hovered-color;
-  text-decoration: underline;
-}
-
 // Ensures the jquery-ui datepicker is above anything else (even leaflet maps)
 .ui-datepicker {
   z-index:10000 !important;

ot_templating/Resources/Public/assets/style/common/module/breadcrumb.scss

@@ -4,13 +4,17 @@
   display: flex;
   flex-direction: row;
   font-weight: bold;
-  color: #b8b8b9;
+  color: $breadcrumb-a-color;
 }
 
 .breadcrumb li {
   margin: 0 3px;
 }
 
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
 .breadcrumb li::before {
   /*content: "> ";*/
   font-family: "Font Awesome 5 Free";
@@ -22,5 +26,5 @@
 }
 
 .breadcrumb > li:last-child {
-  color: #737373;
+  color: $breadcrumb-current-color;
 }

ot_templating/Resources/Public/assets/style/common/module/content.scss

@@ -12,16 +12,38 @@
 
 .content h1, h2 {
   padding: 5px;
-  color: $titles-color;
-  font-size: 1.6em;
-  font-weight: 700;
+}
+
+.content h1 {
+  color: $content-h1-color;
+  font-size: $content-h1-size;
+  font-weight: $content-h1-weight;
+}
+
+.content h2 {
+  color: $content-h2-color;
+  font-size: $content-h2-size;
+  font-weight: $content-h2-weight;
 }
 
 .content h3 {
-  font-size: 1.2em;
-  font-weight: 600;
+  color: $content-h3-color;
+  font-size: $content-h3-size;
+  font-weight: $content-h3-weight;
 }
 
 .content h4 {
-  font-size: 18px;
+  color: $content-h4-color;
+  font-size: $content-h4-size;
+  font-weight: $content-h4-weight;
+}
+
+.content h5 {
+  color: $content-h5-color;
+  font-size: $content-h5-size;
+  font-weight: $content-h5-weight;
+}
+
+.content a {
+  color: $content-a-color;
 }

ot_templating/Resources/Public/assets/style/common/module/donors-box.scss

@@ -5,15 +5,15 @@
 }
 
 .ot-donors header {
-  background: $secondary-color;
+  background: $widgets-header-background-color;
   padding: 0.5em;
   margin: 1em 0;
 }
 
 .ot-donors header h3 {
-  color: $text-color-on-secondary;
-  font-size: 1.2em;
-  font-weight: 600;
+  color: $widgets-header-font-color;
+  font-size: $widgets-header-font-size;
+  font-weight: $widgets-header-font-weight;
   padding: 0;
   margin: 0;
 }

ot_templating/Resources/Public/assets/style/common/module/events-box.scss

@@ -6,15 +6,15 @@
 }
 
 .ot-events header {
-  background: $secondary-color;
+  background: $widgets-header-background-color;
   padding: 5px;
   margin: 1em 0;
 }
 
 .ot-events header h3 {
-  color: $text-color-on-secondary;
-  font-size: 1.2em;
-  font-weight: 600;
+  color: $widgets-header-font-color;
+  font-size: $widgets-header-font-size;
+  font-weight: $widgets-header-font-weight;
   padding: 0;
   margin: 0;
 }

ot_templating/Resources/Public/assets/style/common/module/events-index.scss

@@ -28,7 +28,6 @@
 }
 
 .ot-all-events h3 {
-  color: $titles-color;
   font-size: 1.2em;
   font-weight: bold;
 }
@@ -48,8 +47,8 @@
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px $a-color;
-  color: $a-color;
+  border: solid 2px $content-a-color;
+  color: $content-a-color;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -66,7 +65,7 @@
 .ot-all-events .event {
   display: flex;
   flex-direction: column;
-  border-bottom: solid 2px $secondary-color;
+  border-bottom: solid 2px $widgets-header-background-color;
   border-radius: 4px;
   height: 200px;
   padding: 1em;

ot_templating/Resources/Public/assets/style/common/module/events-show.scss

@@ -15,16 +15,15 @@
 
 .ot-show-event .event-name {
   font-size: 1.8em;
-  color: $titles-color;
   font-weight: bold;
   flex: 1;
 }
 
 .ot-show-event .go-back {
-  color: $a-color;
+  color: $content-a-color;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px $a-color;
+  border: solid 2px $content-a-color;
   border-radius: 6px;
   margin: auto;
 }

ot_templating/Resources/Public/assets/style/common/module/faq.scss

@@ -1,12 +1,7 @@
 
-.faq-item h3 {
-  color: $titles-color;
-
-}
-
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px $secondary-color;
+  border-left: solid 2px $forms-control-focused-border-color;
 }

ot_templating/Resources/Public/assets/style/common/module/forms.scss

@@ -19,7 +19,7 @@ form .row > div:first-child {
 }
 
 .control-label {
-  color: $titles-color;
+  color: $forms-label-color;
   display: inline-block;
   max-width: 100%;
   margin-bottom: 10px;
@@ -53,7 +53,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid $secondary-color;
+  border: 2px solid $forms-control-focused-border-color;
 }
 
 .form-control:invalid {

ot_templating/Resources/Public/assets/style/common/module/menu.scss

@@ -5,8 +5,7 @@
   flex-wrap: wrap;
   list-style: none;
 
-  background-color: $primary-color;
-  //min-height: 50px;
+  background-color: $menu-background-color;
   padding: 0;
   align-items: center;
 }
@@ -24,18 +23,20 @@
   min-height: 26px;
   padding: 12px;
 
-  color: $text-color-on-primary;
-  font-weight: $text-weight-on-primary;
+  color: $menu-font-color;
+  font-size: 14px;
   text-align: center;
+  text-decoration: none;
 }
 
 #menu li:hover {
   height: 100%;
-  background-color: $secondary-color;
+  background-color: $menu-background-color-hovered;
+  text-decoration: none;
 }
 
 #menu li:hover a {
-  color: $text-color-on-secondary;
+  color: $menu-font-color-hovered;
 }
 
 #menu .caret {
@@ -44,17 +45,30 @@
 
 #menu .dropdown-menu {
   min-width: 180px;
-  background-color: #ffffff;
+  background-color: $menu-dropdown-background-color;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
+#menu .dropdown-menu:hover {
+  background-color: $menu-dropdown-background-color-hovered;
+}
+
+
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
+#menu .dropdown-menu.current {
+  background-color: $menu-dropdown-background-color-current;
+}
 #menu .dropdown-menu a {
-  color: #262626;
+  color: $menu-dropdown-font-color;
+  font-size: 14px;
+}
+
+#menu .dropdown-menu a:hover {
+  color: $menu-dropdown-font-color-hovered;
 }
 
 #menu .dropside-menu {

ot_templating/Resources/Public/assets/style/common/module/sitemap.scss

@@ -4,10 +4,6 @@
 
 }
 
-.frame-type-menu_sitemap a {
-  color: $a-color;
-}
-
 .frame-type-menu_sitemap>ul {
   padding-left: 1.5em;
   list-style: none;

ot_templating/Resources/Public/assets/style/common/module/topbar.scss

@@ -17,7 +17,6 @@ $bar-height: 75px;
 }
 
 .topbar-title {
-  font-family: $title-font-stack;
   margin: 0 0.6em 0 0.6em;
   flex: 1;
 }

ot_templating/Resources/Public/assets/style/common/module/user-toolbar.scss

@@ -1,8 +1,3 @@
-$user-toolbar-color: #666666;
-$user-toolbar-dropdown-bg-color: #ffffff;
-$user-toolbar-dropdown-shadow: true;
-
-
 // ## Login or username
 
 .user-toolbar {
@@ -38,7 +33,7 @@ $user-toolbar-dropdown-shadow: true;
 
 .user-toolbar .dropdown-menu {
   min-width: 240px;
-  background-color: $user-toolbar-dropdown-bg-color;
+  background-color: $user-toolbar-dropdown-background-color;
   @if $user-toolbar-dropdown-shadow {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   }
@@ -53,7 +48,7 @@ $user-toolbar-dropdown-shadow: true;
   }
 
   li:hover {
-    background-color: darken($user-toolbar-dropdown-bg-color, 20%);
+    background-color: darken($user-toolbar-dropdown-background-color, 20%);
   }
 
   a {
@@ -64,7 +59,7 @@ $user-toolbar-dropdown-shadow: true;
 }
 
 .user-toolbar .dropside-menu {
-  background-color: $primary-color;
+  background-color: $user-toolbar-popup-background-color;
   @if $user-toolbar-dropdown-shadow {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   }
@@ -82,7 +77,7 @@ $user-toolbar-dropdown-shadow: true;
 #login-popup .popup-form {
   visibility: hidden;
   width: 240px;
-  background-color: $primary-color;
+  background-color: $user-toolbar-popup-background-color;
   border-radius: 4px;
   padding: 1em 1.6em;
   position: absolute;

ot_templating/Resources/Public/assets/style/theme-base.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=theme-base.css.map */

ot_templating/Resources/Public/assets/style/theme-base.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"theme-base.css"}

ot_templating/Resources/Public/assets/style/theme-base.scss

@@ -0,0 +1,49 @@
+$font-stack: Liberation Sans, Arial;
+$font-size: 14px;
+
+$menu-background-color: #4facc6;
+$menu-background-color-hovered: #e6e6e6;
+$menu-font-color: #ffffff;
+$menu-font-color-hovered: #555;
+
+$menu-dropdown-background-color: #ffffff;
+$menu-dropdown-background-color-hovered: #e6e6e6;
+$menu-dropdown-background-color-current: #4facc6;
+$menu-dropdown-font-color: #555;
+$menu-dropdown-font-color-hovered: #555;
+
+$user-toolbar-color: #666666;
+$user-toolbar-dropdown-background-color: #ffffff;
+$user-toolbar-dropdown-shadow: true;
+$user-toolbar-popup-background-color: #4facc6;
+
+$breadcrumb-current-color: #737373;
+$breadcrumb-a-color: #54acc6;
+
+$widgets-header-background-color: #323232;
+$widgets-header-font-color: #4facc6;
+$widgets-header-font-size: 1.2em;
+$widgets-header-font-weight: bold;
+
+$content-h1-color: #4facc6;
+$content-h1-size: 1.6em;
+$content-h1-weight: 500;
+$content-h2-color: #4facc6;
+$content-h2-size: 1.6em;
+$content-h2-weight: 500;
+$content-h3-color: #4facc6;
+$content-h3-size: 1.2em;
+$content-h3-weight: 500;
+$content-h4-color: #4facc6;
+$content-h4-size: 1.2em;
+$content-h4-weight: 500;
+$content-h5-color: #4facc6;
+$content-h5-size: 1em;
+$content-h5-weight: 500;
+
+$content-a-color: #4facc6;
+
+$forms-label-color: 4facc6;
+$forms-control-focused-border-color: #7db6e2;
+
+$alert-color: #e60000;

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -1,15 +1,8 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Comfortaa&display=swap");
 a {
-  color: #4facc6;
   text-decoration: none;
 }
 
-a:hover {
-  color: #256374;
-  text-decoration: underline;
-}
-
 .ui-datepicker {
   z-index: 10000 !important;
 }
@@ -112,7 +105,6 @@ ul.dropdown-left {
 }
 
 .topbar-title {
-  font-family: "Comfortaa", cursive;
   margin: 0 0.6em 0 0.6em;
   flex: 1;
 }
@@ -131,7 +123,7 @@ ul.dropdown-left {
   flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
-  background-color: #4869d6;
+  background-color: #4facc6;
   padding: 0;
   align-items: center;
 }
@@ -148,17 +140,19 @@ ul.dropdown-left {
   min-height: 26px;
   padding: 12px;
   color: #ffffff;
-  font-weight: 600;
+  font-size: 14px;
   text-align: center;
+  text-decoration: none;
 }
 
 #menu li:hover {
   height: 100%;
-  background-color: #889cdd;
+  background-color: #e6e6e6;
+  text-decoration: none;
 }
 
 #menu li:hover a {
-  color: #091534;
+  color: #555;
 }
 
 #menu .caret {
@@ -171,13 +165,29 @@ ul.dropdown-left {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+#menu .dropdown-menu:hover {
+  background-color: #e6e6e6;
+}
+
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
+#menu .dropdown-menu li.current {
+  background-color: #4facc6;
+}
+
 #menu .dropdown-menu a {
-  color: #262626;
+  color: #555;
+  font-size: 14px;
+  height: 14px;
+  padding: 4px 12px;
+  width: auto;
+}
+
+#menu .dropdown-menu a:hover {
+  color: #555;
 }
 
 #menu .dropside-menu {
@@ -185,6 +195,12 @@ ul.dropdown-left {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+#menu .dropside-menu a {
+  height: 14px;
+  padding: 4px 12px;
+  width: auto;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;
@@ -198,18 +214,40 @@ ul.dropdown-left {
 
 .content h1, h2 {
   padding: 5px;
-  color: #091534;
+}
+
+.content h1 {
+  color: #4facc6;
   font-size: 1.6em;
-  font-weight: 700;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #4facc6;
+  font-size: 1.6em;
+  font-weight: 500;
 }
 
 .content h3 {
+  color: #4facc6;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .content h4 {
-  font-size: 18px;
+  color: #4facc6;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #4facc6;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #4facc6;
 }
 
 #footer {
@@ -312,7 +350,7 @@ footer .logo-ot {
 }
 
 .user-toolbar .dropside-menu {
-  background-color: #4869d6;
+  background-color: #4facc6;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -326,7 +364,7 @@ footer .logo-ot {
 #login-popup .popup-form {
   visibility: hidden;
   width: 240px;
-  background-color: #4869d6;
+  background-color: #4facc6;
   border-radius: 4px;
   padding: 1em 1.6em;
   position: absolute;
@@ -361,13 +399,17 @@ footer .logo-ot {
   display: flex;
   flex-direction: row;
   font-weight: bold;
-  color: #b8b8b9;
+  color: #54acc6;
 }
 
 .breadcrumb li {
   margin: 0 3px;
 }
 
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
 .breadcrumb li::before {
   /*content: "> ";*/
   font-family: "Font Awesome 5 Free";
@@ -406,15 +448,15 @@ footer .logo-ot {
 }
 
 .ot-events header {
-  background: #889cdd;
+  background: #323232;
   padding: 5px;
   margin: 1em 0;
 }
 
 .ot-events header h3 {
-  color: #091534;
+  color: #4facc6;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: bold;
   padding: 0;
   margin: 0;
 }
@@ -494,7 +536,6 @@ footer .logo-ot {
 }
 
 .ot-all-events h3 {
-  color: #091534;
   font-size: 1.2em;
   font-weight: bold;
 }
@@ -532,7 +573,7 @@ footer .logo-ot {
 .ot-all-events .event {
   display: flex;
   flex-direction: column;
-  border-bottom: solid 2px #889cdd;
+  border-bottom: solid 2px #323232;
   border-radius: 4px;
   height: 200px;
   padding: 1em;
@@ -617,7 +658,6 @@ footer .logo-ot {
 
 .ot-show-event .event-name {
   font-size: 1.8em;
-  color: #091534;
   font-weight: bold;
   flex: 1;
 }
@@ -699,15 +739,15 @@ footer .logo-ot {
 }
 
 .ot-donors header {
-  background: #889cdd;
+  background: #323232;
   padding: 0.5em;
   margin: 1em 0;
 }
 
 .ot-donors header h3 {
-  color: #091534;
+  color: #4facc6;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: bold;
   padding: 0;
   margin: 0;
 }
@@ -741,10 +781,6 @@ footer .logo-ot {
   font-weight: bold;
 }
 
-.frame-type-menu_sitemap a {
-  color: #4facc6;
-}
-
 .frame-type-menu_sitemap > ul {
   padding-left: 1.5em;
   list-style: none;
@@ -783,7 +819,7 @@ form .row > div:first-child {
 }
 
 .control-label {
-  color: #091534;
+  color: 4facc6;
   display: inline-block;
   max-width: 100%;
   margin-bottom: 10px;
@@ -813,7 +849,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #889cdd;
+  border: 2px solid #7db6e2;
 }
 
 .form-control:invalid {
@@ -876,15 +912,11 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
-.faq-item h3 {
-  color: #091534;
-}
-
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #889cdd;
+  border-left: solid 2px #7db6e2;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-blue.scss

@@ -1,16 +1,3 @@
-$primary-color: #4869d6;
-$text-color-on-primary: #ffffff;
-$text-weight-on-primary: 600;
-
-$secondary-color: #889cdd;
-$text-color-on-secondary: #091534;
-
-$titles-color: #091534;
-$accent-color: #ffffff;
-$a-color: #4facc6;
-$a-hovered-color: #256374;
-
-$alert-color: #e60000;
-
 @import
+"theme-base",
 "_common";

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -1,15 +1,8 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Comfortaa&display=swap");
 a {
-  color: #0052cc;
   text-decoration: none;
 }
 
-a:hover {
-  color: #6600ff;
-  text-decoration: underline;
-}
-
 .ui-datepicker {
   z-index: 10000 !important;
 }
@@ -112,7 +105,6 @@ ul.dropdown-left {
 }
 
 .topbar-title {
-  font-family: "Comfortaa", cursive;
   margin: 0 0.6em 0 0.6em;
   flex: 1;
 }
@@ -147,18 +139,20 @@ ul.dropdown-left {
   height: 100%;
   min-height: 26px;
   padding: 12px;
-  color: #341109;
-  font-weight: 600;
+  color: #ffffff;
+  font-size: 14px;
   text-align: center;
+  text-decoration: none;
 }
 
 #menu li:hover {
   height: 100%;
-  background-color: #2ab300;
+  background-color: #228d00;
+  text-decoration: none;
 }
 
 #menu li:hover a {
-  color: #341109;
+  color: #555;
 }
 
 #menu .caret {
@@ -171,13 +165,29 @@ ul.dropdown-left {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+#menu .dropdown-menu:hover {
+  background-color: #e6e6e6;
+}
+
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
+#menu .dropdown-menu li.current {
+  background-color: #228d00;
+}
+
 #menu .dropdown-menu a {
-  color: #262626;
+  color: #555;
+  font-size: 14px;
+  height: 14px;
+  padding: 4px 12px;
+  width: auto;
+}
+
+#menu .dropdown-menu a:hover {
+  color: #555;
 }
 
 #menu .dropside-menu {
@@ -185,6 +195,12 @@ ul.dropdown-left {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+#menu .dropside-menu a {
+  height: 14px;
+  padding: 4px 12px;
+  width: auto;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;
@@ -198,18 +214,40 @@ ul.dropdown-left {
 
 .content h1, h2 {
   padding: 5px;
-  color: #341109;
+}
+
+.content h1 {
+  color: #228d00;
   font-size: 1.6em;
-  font-weight: 700;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #228d00;
+  font-size: 1.6em;
+  font-weight: 500;
 }
 
 .content h3 {
+  color: #228d00;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .content h4 {
-  font-size: 18px;
+  color: #228d00;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #228d00;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #228d00;
 }
 
 #footer {
@@ -361,13 +399,17 @@ footer .logo-ot {
   display: flex;
   flex-direction: row;
   font-weight: bold;
-  color: #b8b8b9;
+  color: #228d00;
 }
 
 .breadcrumb li {
   margin: 0 3px;
 }
 
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
 .breadcrumb li::before {
   /*content: "> ";*/
   font-family: "Font Awesome 5 Free";
@@ -406,15 +448,15 @@ footer .logo-ot {
 }
 
 .ot-events header {
-  background: #2ab300;
+  background: #323232;
   padding: 5px;
   margin: 1em 0;
 }
 
 .ot-events header h3 {
-  color: #341109;
+  color: #323232;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: bold;
   padding: 0;
   margin: 0;
 }
@@ -494,7 +536,6 @@ footer .logo-ot {
 }
 
 .ot-all-events h3 {
-  color: #341109;
   font-size: 1.2em;
   font-weight: bold;
 }
@@ -514,8 +555,8 @@ footer .logo-ot {
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px #0052cc;
-  color: #0052cc;
+  border: solid 2px #228d00;
+  color: #228d00;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -532,7 +573,7 @@ footer .logo-ot {
 .ot-all-events .event {
   display: flex;
   flex-direction: column;
-  border-bottom: solid 2px #2ab300;
+  border-bottom: solid 2px #323232;
   border-radius: 4px;
   height: 200px;
   padding: 1em;
@@ -617,16 +658,15 @@ footer .logo-ot {
 
 .ot-show-event .event-name {
   font-size: 1.8em;
-  color: #341109;
   font-weight: bold;
   flex: 1;
 }
 
 .ot-show-event .go-back {
-  color: #0052cc;
+  color: #228d00;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px #0052cc;
+  border: solid 2px #228d00;
   border-radius: 6px;
   margin: auto;
 }
@@ -699,15 +739,15 @@ footer .logo-ot {
 }
 
 .ot-donors header {
-  background: #2ab300;
+  background: #323232;
   padding: 0.5em;
   margin: 1em 0;
 }
 
 .ot-donors header h3 {
-  color: #341109;
+  color: #323232;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: bold;
   padding: 0;
   margin: 0;
 }
@@ -741,10 +781,6 @@ footer .logo-ot {
   font-weight: bold;
 }
 
-.frame-type-menu_sitemap a {
-  color: #0052cc;
-}
-
 .frame-type-menu_sitemap > ul {
   padding-left: 1.5em;
   list-style: none;
@@ -783,7 +819,7 @@ form .row > div:first-child {
 }
 
 .control-label {
-  color: #341109;
+  color: 4facc6;
   display: inline-block;
   max-width: 100%;
   margin-bottom: 10px;
@@ -813,7 +849,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #2ab300;
+  border: 2px solid #228d00;
 }
 
 .form-control:invalid {
@@ -876,15 +912,11 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
-.faq-item h3 {
-  color: #341109;
-}
-
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #2ab300;
+  border-left: solid 2px #228d00;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-green.scss

@@ -1,16 +1,38 @@
-$primary-color: #228d00;
-$text-color-on-primary: #341109;
-$text-weight-on-primary: 600;
+@import
+"theme-base";
+
+$menu-background-color: #228d00;
+$menu-background-color-hovered: #228d00;
+$menu-font-color: #ffffff;
+$menu-font-color-hovered: #555;
+
+$menu-dropdown-background-color: #ffffff;
+$menu-dropdown-background-color-hovered: #e6e6e6;
+$menu-dropdown-background-color-current: #228d00;
+$menu-dropdown-font-color: #555;
+$menu-dropdown-font-color-hovered: #555;
+
+$user-toolbar-color: #666666;
+$user-toolbar-dropdown-background-color: #ffffff;
+$user-toolbar-popup-background-color: #228d00;
 
-$secondary-color: #2ab300;
-$text-color-on-secondary: #341109;
+$breadcrumb-current-color: #737373;
+$breadcrumb-a-color: #228d00;
 
-$titles-color: #341109;
-$accent-color: #ffffff;
-$a-color: #0052cc;
-$a-hovered-color: #6600ff;
+$widgets-header-background-color: #323232;
+$widgets-header-font-color: #323232;
 
-$alert-color: #e60000;
+$content-h1-color: #228d00;
+$content-h2-color: #228d00;
+$content-h3-color: #228d00;
+$content-h4-color: #228d00;
+$content-h5-color: #228d00;
+
+$content-a-color: #228d00;
+
+$forms-label-color: 4facc6;
+$forms-control-focused-border-color: #228d00;
 
 @import
 "_common";
+

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -1,15 +1,8 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Comfortaa&display=swap");
 a {
-  color: #1e786c;
   text-decoration: none;
 }
 
-a:hover {
-  color: #00685a;
-  text-decoration: underline;
-}
-
 .ui-datepicker {
   z-index: 10000 !important;
 }
@@ -112,7 +105,6 @@ ul.dropdown-left {
 }
 
 .topbar-title {
-  font-family: "Comfortaa", cursive;
   margin: 0 0.6em 0 0.6em;
   flex: 1;
 }
@@ -147,18 +139,20 @@ ul.dropdown-left {
   height: 100%;
   min-height: 26px;
   padding: 12px;
-  color: #091534;
-  font-weight: 600;
+  color: #ffffff;
+  font-size: 14px;
   text-align: center;
+  text-decoration: none;
 }
 
 #menu li:hover {
   height: 100%;
-  background-color: #ffa873;
+  background-color: #ff6200;
+  text-decoration: none;
 }
 
 #menu li:hover a {
-  color: #091534;
+  color: #555;
 }
 
 #menu .caret {
@@ -171,13 +165,29 @@ ul.dropdown-left {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+#menu .dropdown-menu:hover {
+  background-color: #e6e6e6;
+}
+
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
+#menu .dropdown-menu li.current {
+  background-color: #ff6200;
+}
+
 #menu .dropdown-menu a {
-  color: #262626;
+  color: #555;
+  font-size: 14px;
+  height: 14px;
+  padding: 4px 12px;
+  width: auto;
+}
+
+#menu .dropdown-menu a:hover {
+  color: #555;
 }
 
 #menu .dropside-menu {
@@ -185,6 +195,12 @@ ul.dropdown-left {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+#menu .dropside-menu a {
+  height: 14px;
+  padding: 4px 12px;
+  width: auto;
+}
+
 .content {
   flex: 1;
   padding: 0 2em;
@@ -198,18 +214,40 @@ ul.dropdown-left {
 
 .content h1, h2 {
   padding: 5px;
-  color: #091534;
+}
+
+.content h1 {
+  color: #ff6200;
   font-size: 1.6em;
-  font-weight: 700;
+  font-weight: 500;
+}
+
+.content h2 {
+  color: #ff6200;
+  font-size: 1.6em;
+  font-weight: 500;
 }
 
 .content h3 {
+  color: #ff6200;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .content h4 {
-  font-size: 18px;
+  color: #ff6200;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.content h5 {
+  color: #ff6200;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+.content a {
+  color: #ff6200;
 }
 
 #footer {
@@ -361,13 +399,17 @@ footer .logo-ot {
   display: flex;
   flex-direction: row;
   font-weight: bold;
-  color: #b8b8b9;
+  color: #ff6200;
 }
 
 .breadcrumb li {
   margin: 0 3px;
 }
 
+.breadcrumb li a {
+  margin: 0 3px;
+}
+
 .breadcrumb li::before {
   /*content: "> ";*/
   font-family: "Font Awesome 5 Free";
@@ -406,15 +448,15 @@ footer .logo-ot {
 }
 
 .ot-events header {
-  background: #ffa873;
+  background: #323232;
   padding: 5px;
   margin: 1em 0;
 }
 
 .ot-events header h3 {
-  color: #091534;
+  color: #323232;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: bold;
   padding: 0;
   margin: 0;
 }
@@ -494,7 +536,6 @@ footer .logo-ot {
 }
 
 .ot-all-events h3 {
-  color: #091534;
   font-size: 1.2em;
   font-weight: bold;
 }
@@ -514,8 +555,8 @@ footer .logo-ot {
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px #1e786c;
-  color: #1e786c;
+  border: solid 2px #ff6200;
+  color: #ff6200;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -532,7 +573,7 @@ footer .logo-ot {
 .ot-all-events .event {
   display: flex;
   flex-direction: column;
-  border-bottom: solid 2px #ffa873;
+  border-bottom: solid 2px #323232;
   border-radius: 4px;
   height: 200px;
   padding: 1em;
@@ -617,16 +658,15 @@ footer .logo-ot {
 
 .ot-show-event .event-name {
   font-size: 1.8em;
-  color: #091534;
   font-weight: bold;
   flex: 1;
 }
 
 .ot-show-event .go-back {
-  color: #1e786c;
+  color: #ff6200;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px #1e786c;
+  border: solid 2px #ff6200;
   border-radius: 6px;
   margin: auto;
 }
@@ -699,15 +739,15 @@ footer .logo-ot {
 }
 
 .ot-donors header {
-  background: #ffa873;
+  background: #323232;
   padding: 0.5em;
   margin: 1em 0;
 }
 
 .ot-donors header h3 {
-  color: #091534;
+  color: #323232;
   font-size: 1.2em;
-  font-weight: 600;
+  font-weight: bold;
   padding: 0;
   margin: 0;
 }
@@ -741,10 +781,6 @@ footer .logo-ot {
   font-weight: bold;
 }
 
-.frame-type-menu_sitemap a {
-  color: #1e786c;
-}
-
 .frame-type-menu_sitemap > ul {
   padding-left: 1.5em;
   list-style: none;
@@ -783,7 +819,7 @@ form .row > div:first-child {
 }
 
 .control-label {
-  color: #091534;
+  color: 4facc6;
   display: inline-block;
   max-width: 100%;
   margin-bottom: 10px;
@@ -813,7 +849,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #ffa873;
+  border: 2px solid #ff6200;
 }
 
 .form-control:invalid {
@@ -876,15 +912,11 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
-.faq-item h3 {
-  color: #091534;
-}
-
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #ffa873;
+  border-left: solid 2px #ff6200;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-orange.scss

@@ -1,16 +1,37 @@
-$primary-color: #ff6200;
-$text-color-on-primary: #091534;
-$text-weight-on-primary: 600;
+@import
+"theme-base";
+
+$menu-background-color: #ff6200;
+$menu-background-color-hovered: #ff6200;
+$menu-font-color: #ffffff;
+$menu-font-color-hovered: #555;
+
+$menu-dropdown-background-color: #ffffff;
+$menu-dropdown-background-color-hovered: #e6e6e6;
+$menu-dropdown-background-color-current: #ff6200;
+$menu-dropdown-font-color: #555;
+$menu-dropdown-font-color-hovered: #555;
+
+$user-toolbar-color: #666666;
+$user-toolbar-dropdown-background-color: #ffffff;
+$user-toolbar-popup-background-color: #ff6200;
+
+$breadcrumb-current-color: #737373;
+$breadcrumb-a-color: #ff6200;
+
+$widgets-header-background-color: #323232;
+$widgets-header-font-color: #323232;
 
-$secondary-color: #ffa873;
-$text-color-on-secondary: #091534;
+$content-h1-color: #ff6200;
+$content-h2-color: #ff6200;
+$content-h3-color: #ff6200;
+$content-h4-color: #ff6200;
+$content-h5-color: #ff6200;
 
-$titles-color: #091534;
-$accent-color: #a64500;
-$a-color: #1e786c;
-$a-hovered-color: #00685a;
+$content-a-color: #ff6200;
 
-$alert-color: #e60000;
+$forms-label-color: 4facc6;
+$forms-control-focused-border-color: #ff6200;
 
 @import
 "_common";