feature/menuandfonts: new menu styles and fonts

dd-sso/docker/api/src/api/static/_templates/apps_menu.html

@@ -23,16 +23,8 @@
 <div id="navbar-menu-apps">
     <div id="menu-apps-btn">
         <div id="dropdownMenuAppsButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <svg id="menu-apps-icon" data-name="Menú Apps" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
-                <rect id="Rectángulo_2" data-name="Rectángulo 2" width="6" height="6" fill="#262626"/>
+                <path d="M33.95 24.1q-.3 0-.55-.1-.25-.1-.5-.35l-8.55-8.55q-.25-.25-.35-.5-.1-.25-.1-.55 0-.3.1-.55.1-.25.35-.5l8.55-8.55q.25-.25.5-.35.25-.1.55-.1.3 0 .55.1.25.1.5.35L43.55 13q.25.25.35.5.1.25.1.55 0 .3-.1.55-.1.25-.35.5L35 23.65q-.25.25-.5.35-.25.1-.55.1Zm-26.45-3q-.65 0-1.075-.425Q6 20.25 6 19.6V7.55q0-.65.425-1.075Q6.85 6.05 7.5 6.05h12.05q.65 0 1.075.425.425.425.425 1.075V19.6q0 .65-.425 1.075-.425.425-1.075.425ZM28.4 42q-.65 0-1.075-.425-.425-.425-.425-1.075V28.45q0-.65.425-1.075.425-.425 1.075-.425h12.05q.65 0 1.075.425.425.425.425 1.075V40.5q0 .65-.425 1.075Q41.1 42 40.45 42ZM7.5 42q-.65 0-1.075-.425Q6 41.15 6 40.5V28.45q0-.65.425-1.075.425-.425 1.075-.425h12.05q.65 0 1.075.425.425.425.425 1.075V40.5q0 .65-.425 1.075Q20.2 42 19.55 42Z"/>
-                <rect id="Rectángulo_1447" data-name="Rectángulo 1447" width="6" height="6" transform="translate(0 10)" fill="#262626"/>
-                <rect id="Rectángulo_1450" data-name="Rectángulo 1450" width="6" height="6" transform="translate(0 20)" fill="#262626"/>
-                <rect id="Rectángulo_1440" data-name="Rectángulo 1440" width="6" height="6" transform="translate(10)" fill="#262626"/>
-                <rect id="Rectángulo_1446" data-name="Rectángulo 1446" width="6" height="6" transform="translate(10 10)" fill="#262626"/>
-                <rect id="Rectángulo_1449" data-name="Rectángulo 1449" width="6" height="6" transform="translate(10 20)" fill="#262626"/>
-                <rect id="Rectángulo_1441" data-name="Rectángulo 1441" width="6" height="6" transform="translate(20)" fill="#262626"/>
-                <rect id="Rectángulo_1445" data-name="Rectángulo 1445" width="6" height="6" transform="translate(20 10)" fill="#262626"/>
-                <rect id="Rectángulo_1448" data-name="Rectángulo 1448" width="6" height="6" transform="translate(20 20)" fill="#262626"/>
             </svg>
         </div>
         <div id="dropdownMenuApps" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" >

dd-sso/docker/api/src/api/static/_templates/dd.css

@@ -20,9 +20,29 @@
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
 #}
+@font-face {
+    font-family: 'LeagueSpartan';
+    src: url('../fonts/LeagueSpartan-Regular.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'LeagueSpartan Bold';
+    src: url('../fonts/LeagueSpartan-Bold.ttf');
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'LeagueSpartan Light';
+    src: url('../fonts/LeagueSpartan-Light.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
 
 #body-user, #body-settings, #body-public {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'LeagueSpartan', sans-serif;
     color:  #262626;
 }
 
@@ -34,12 +54,13 @@
 #body-user header#header, #body-settings header#header, #body-public header#header {
     background-color: white !important;
     box-shadow: 0 2px 4px #00000014;
-    border-bottom: 1px solid #262626;
+    border-bottom: none;
     background-image: inherit;
 }
 
 #theming-preview-logo, #header #nextcloud {
-    padding-left: 64px;
+    padding-left: 82px;
+    bottom: 1px;
 }
 
 #navbar-nextcloud #unified-search {
@@ -58,7 +79,13 @@
 }
 
 #navbar-nextcloud #unified-search.header-menu.unified-search a.header-menu__trigger {
-    width: auto;
+    background-color: #F0F0F0;
+    width: 36px;
+    height: 36px;
+    border-radius: 5px;
+    position: relative;
+    top: 8px;
+    left: 9px;
 }
 
 #navbar-nextcloud #unified-search a.header-menu__trigger {
@@ -78,14 +105,27 @@
 
 #navbar-nextcloud .notifications .notifications-button.menutoggle {
     margin-right: 16px;
-    width: auto;
+    width: 36px;
+    height: 36px;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    position: relative;
+    top: 8px;
+    left: 1px;
+    opacity: 1 !important;
 }
 
 #navbar-nextcloud #contactsmenu .icon-contacts {
     background-image: var(--icon-contacts-000);
     opacity: 1;
     margin-right: 16px;
-    width: auto;
+    width: 36px;
+    height: 36px;
+    background-color: #f0f0f0;
+    position: relative;
+    top: 8px;
+    border-radius: 5px;
+    left: -7px;
 }
 
 #navbar-nextcloud #settings #expand {
@@ -120,8 +160,16 @@
 #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
     cursor: pointer;
     height: 16px;
-    margin-right: 16px;
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
+#header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton>svg {
+    transform: scale(.5);
+}
+
 #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton #menu-apps-icon {
     height: 16px;
     width: 16px;
@@ -134,7 +182,16 @@
 
 #header #navbar-menu-apps #menu-apps-btn {
     cursor: pointer;
+    width: 36px;
+    height: 36px;
+    border-radius: 5px;
+    background-color: #f0f0f0;
     position: relative;
+    left: -15px;
+    top: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #header #navbar-menu-apps .dropdown-menu {
@@ -143,7 +200,7 @@
     border: 1px solid rgba(0,0,0,.15);
     border-radius: 5px;
     box-shadow: rgb(0 0 0 / 20%) 0 3px 8px;
-    margin-top: -2px;
+    margin-top: 11px;
     padding: 10px;
     max-height: 500px;
     overflow-y: scroll;
@@ -158,9 +215,9 @@
     list-style: none;
     display: grid;
     flex-wrap: wrap;
-    padding: 15px 2px 0 0;
+    padding: 2px 2px 10px 0;
     margin-bottom: 0;
-    grid-template-columns: 82px 82px 82px;
+    grid-template-columns: 133px 133px;
     grid-gap: 12px 2px;
 }
 
@@ -178,39 +235,55 @@
 
 #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     justify-content: start;
     text-align: center;
     color: #262626;
     text-decoration: none;
+    background-color: #F0F0F0;
+    margin-right: 8px;
+    border-radius: 5px;
+    padding: 5px;
+}
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link:hover {
+    background-color: {{ data.colours.primary }};
 }
-
 #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon {
     width: 40px;
     height: 40px;
-    background-color: {{ data.colours.primary }};
-    border-radius: .25rem;
     margin-right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: transparent;
+    border-radius: 0.25rem;
 }
 
 #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .text {
-    text-align: center;
+    text-align: left;
-    margin-top: 4px;
+    margin-left: 0;
     height: 26px;
+    max-width: 71px;
     font-size: 13px;
     line-height: 15px;
     overflow-wrap: anywhere;
+    display: flex;
+    align-items: center;
+    position: relative;
+    top: 1px;
 }
 
 #header #navbar-menu-apps .dropdown-menu ul li.app a.app-link .icon i {
-    color: #fff;
+    color: {{ data.colours.primary }};
-    font-size: 19px;
+    font-size: 19px;    
+}
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link:hover .icon i {
+    color: #FFF;
+}
+#header #navbar-menu-apps .dropdown-menu ul li.app a.app-link:hover .text {
+    color: #FFF;
 }
-
 div#content-vue {
     padding-top: 75px;
 }
@@ -219,6 +292,12 @@ div#content-vue {
   display: none !important;
 }
 
+#product-logo>a>img {
+    height: 26px !important;
+    margin-right: 30px !important;
+    margin-top: 12px !important;
+}
+
 {% if data.custom_css %}
 /* Add custom CSS from operator */
 {{ data.custom_css }}

dd-sso/docker/api/src/api/static/css/dd.css

@@ -20,7 +20,7 @@
 */
 
 #body-user, #body-settings, #body-public {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'LeagueSpartan', sans-serif;
     color:  #262626;
 }