New nextcloud top bar style

docker/api/src/api/static/_templates/apps_menu.html

@@ -1,8 +1,8 @@
 
 <div id="navbar-menu-apps">
     <div id="menu-apps-btn">
-        <button type="button" id="dropdownMenuAppsButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <div id="dropdownMenuAppsButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <svg id="Menú_Apps" data-name="Menú Apps" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+            <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">
                 <rect id="Rectángulo_2" data-name="Rectángulo 2" width="6" height="6" fill="#262626"/>
                 <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"/>
@@ -13,7 +13,7 @@
                 <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>
-        </button>
+        </div>
         <div id="dropdownMenuApps" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" >
             <ul id="app-aapps">
                 {% for item in data.apps_internal %}

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

@@ -10,7 +10,6 @@
 
 #body-user header#header, #body-settings header#header, #body-public header#header {
     background-color: white !important;
-    height: 74px ;
     box-shadow: 0 2px 4px #00000014;
     border-bottom: 1px solid #262626;
     background-image: inherit;
@@ -20,61 +19,67 @@
     padding-left: 10px;
 }
 
-#header #unified-search svg {
+#navbar-nextcloud #unified-search {
-    fill: #262626;
+    margin-right: 16px;
-    width: 35px;
-    height: 35px;
 }
 
-#header .notifications .notifications-button img.svg {
+#navbar-nextcloud #unified-search svg {
-    background-color: #262626;
+    fill: black;
-    padding: 5px;
+    width: 16px;
-    border-radius: 18px;
+    height: 16px;
-    height: 23px;
-    width: 23px;
-    margin-left: 10px;
 }
 
-
+#navbar-nextcloud #unified-search a.header-menu__trigger .magnify-icon {
-#header #contactsmenu {
+    width: 16px;
-    display: flex;
+    height: 16px;
-    align-items: center;
 }
 
-#header #contactsmenu .icon-contacts {
+#navbar-nextcloud #unified-search.header-menu.unified-search a.header-menu__trigger {
-    background-color: #262626;
+    width: auto;
-    padding: 5px;
-    border-radius: 18px;
-    height: 23px;
-    width: 23px;
-    opacity: 1;
-    margin-left: 10px;
 }
 
-#header #settings #expand .avatardiv {
+#navbar-nextcloud #unified-search a.header-menu__trigger {
-    height: 35px;
-    width: 35px;
-}
-
-#header #settings #expand .avatardiv img {
-    height: 35px;
-    width: 35px;
-    margin-left: 10px;
-}
-
-
-#header #unified-search a.header-menu__trigger {
     opacity: 1;
 }
 
-#header #unified-search a.header-menu__trigger .magnify-icon {
+#navbar-nextcloud #unified-search #header-menu-unified-search div.header-menu__carret {
-    width: 35px;
+    right: 205px;
-    height: 35px;
 }
 
-#body-user div#content, #body-settings div#content, #body-public div#content {
+#navbar-nextcloud .notifications .notifications-button {
-    padding-top: 75px;
+    opacity: 1;
 }
+#navbar-nextcloud .notifications .notifications-button img.svg {
+    filter: invert(100%)
+}
+
+#navbar-nextcloud .notifications .notifications-button.menutoggle {
+    margin-right: 16px;
+    width: auto;
+}
+
+#navbar-nextcloud #contactsmenu .icon-contacts {
+    background-image: var(--icon-contacts-000);
+    opacity: 1;
+    margin-right: 16px;
+    width: auto;
+}
+
+#navbar-nextcloud #settings #expand {
+    width: 39px;
+    padding-right: 16px;
+}
+
+#navbar-nextcloud #settings #expand .avatardiv {
+    height: 39px;
+    width: 39px;
+}
+
+#navbar-nextcloud #settings #expand .avatardiv img {
+    height: 39px;
+    width: 39px;
+}
+
 
 #body-user div#content div#app-dashboard, #body-settings div#content div#app-dashboard, #body-public div#content div#app-dashboard {
     background-image: none !important;
@@ -82,8 +87,6 @@
 }
 
 #body-user div#app-navigation, #body-settings div#app-navigation, #body-public div#app-navigation {
-    top: 75px;
-    height: calc(100% - 75px);
     color: #262626 !important;
 }
 
@@ -93,9 +96,12 @@
 
 #header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
     cursor: pointer;
-    border: none;
+    height: 16px;
-    background-color: inherit;
+    margin-right: 16px;
-    padding: 4px;
+}
+#header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton #menu-apps-icon {
+    height: 16px;
+    width: 16px;
 }
 
 #header div#navbar-menu-apps {
@@ -104,25 +110,17 @@
 }
 
 #header #navbar-menu-apps #menu-apps-btn {
-    margin-right: 20px;
     cursor: pointer;
     position: relative;
 }
 
-#header #navbar-menu-apps #menu-apps-btn #dropdownMenuAppsButton {
-    cursor: pointer;
-    border: none;
-    background-color: inherit;
-    padding: 4px;
-}
-
 #header #navbar-menu-apps .dropdown-menu {
     display: none;
     position: absolute;
     border: 1px solid rgba(0,0,0,.15);
     border-radius: 5px;
     box-shadow: rgb(0 0 0 / 20%) 0 3px 8px;
-    margin-top: 15px;
+    margin-top: -2px;
     padding: 10px;
     max-height: 500px;
     overflow-y: scroll;