New nextcloud top bar style

Simó Albert i Beltran 2022-01-18 18:03:32 +01:00
parent 02057c14d2
commit 8b4054fef5
2 changed files with 57 additions and 59 deletions

View File

@ -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">
<svg id="Menú_Apps" data-name="Menú Apps" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
<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">
<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 %}

View File

@ -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 {
fill: #262626;
width: 35px;
height: 35px;
#navbar-nextcloud #unified-search {
margin-right: 16px;
}
#header .notifications .notifications-button img.svg {
background-color: #262626;
padding: 5px;
border-radius: 18px;
height: 23px;
width: 23px;
margin-left: 10px;
#navbar-nextcloud #unified-search svg {
fill: black;
width: 16px;
height: 16px;
}
#header #contactsmenu {
display: flex;
align-items: center;
#navbar-nextcloud #unified-search a.header-menu__trigger .magnify-icon {
width: 16px;
height: 16px;
}
#header #contactsmenu .icon-contacts {
background-color: #262626;
padding: 5px;
border-radius: 18px;
height: 23px;
width: 23px;
opacity: 1;
margin-left: 10px;
#navbar-nextcloud #unified-search.header-menu.unified-search a.header-menu__trigger {
width: auto;
}
#header #settings #expand .avatardiv {
height: 35px;
width: 35px;
}
#header #settings #expand .avatardiv img {
height: 35px;
width: 35px;
margin-left: 10px;
}
#header #unified-search a.header-menu__trigger {
#navbar-nextcloud #unified-search a.header-menu__trigger {
opacity: 1;
}
#header #unified-search a.header-menu__trigger .magnify-icon {
width: 35px;
height: 35px;
#navbar-nextcloud #unified-search #header-menu-unified-search div.header-menu__carret {
right: 205px;
}
#body-user div#content, #body-settings div#content, #body-public div#content {
padding-top: 75px;
#navbar-nextcloud .notifications .notifications-button {
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;
background-color: inherit;
padding: 4px;
height: 16px;
margin-right: 16px;
}
#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;