feature/menuandfonts: new menu styles and fonts
elena
parent
0994ea6bed
commit
c7b032ec2e
|
|
@ -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">
|
||||
<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"/>
|
||||
<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 xmlns="http://www.w3.org/2000/svg" height="48" width="48">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="dropdownMenuApps" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" >
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
margin-top: 4px;
|
||||
text-align: left;
|
||||
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;
|
||||
}
|
||||
|
||||
#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 }}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
*/
|
||||
|
||||
#body-user, #body-settings, #body-public {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-family: 'LeagueSpartan', sans-serif;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue