mirror of
https://github.com/zadam/trilium.git
synced 2025-11-19 23:24:25 +01:00
152 lines
2.7 KiB
CSS
152 lines
2.7 KiB
CSS
#menu {
|
|
display: flex;
|
|
position: fixed;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: inherit;
|
|
margin: 0 auto;
|
|
overflow: visible;
|
|
z-index: 10;
|
|
background: var(--bottom-layer);
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
#menu::before {
|
|
content: "";
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bottom-layer);
|
|
height: 72px;
|
|
z-index: -1;
|
|
}
|
|
|
|
#menu > p > a {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
/* color: var(--text-heading); */
|
|
}
|
|
|
|
#main a {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
#main a:hover {
|
|
color: var(--text-heading);
|
|
}
|
|
|
|
#menu > p > a::before {
|
|
content: "";
|
|
display: flex;
|
|
background: url("https://raw.githubusercontent.com/zadam/trilium/master/images/icon-color.svg");
|
|
height: 40px;
|
|
width: 53px;
|
|
}
|
|
|
|
/* #logo {
|
|
order: 1;
|
|
height: 40px;
|
|
} */
|
|
|
|
/* #menu > p > strong::before {
|
|
content: "";
|
|
display: flex;
|
|
background: url("https://notes.cloud.zerebos.com/assets/v0.60.4/images/icon-black.svg");
|
|
} */
|
|
|
|
#menu ul, #sidebar ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
#menu > ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
#menu > ul > li {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
#menu > ul > li > p > a {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
/* #menu > ul > li > p > a::after {
|
|
content: '';
|
|
border: 4px solid transparent;
|
|
border-top: 4px solid white;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: -8px;
|
|
} */
|
|
|
|
#menu > ul > li.submenu-item > p > a::after {
|
|
content: "";
|
|
border-color: currentcolor #0000;
|
|
border-style: solid;
|
|
border-width: .4em .4em 0;
|
|
position: relative;
|
|
display: flex;
|
|
top: 2px;
|
|
align-items: center;
|
|
/* transform: translateY(-50%); */
|
|
}
|
|
|
|
#menu > ul > li.submenu-item.hidden > ul,
|
|
#menu > ul > li.submenu-item.hidden > p > a::after{
|
|
display: none;
|
|
}
|
|
|
|
#menu > ul > li > ul {
|
|
/* display: none; */
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 40px;
|
|
background: #242526;
|
|
border-radius: 6px;
|
|
min-width: 150px;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
padding: 8px;
|
|
transition: top 200ms ease, opacity 200ms ease;
|
|
}
|
|
|
|
#menu > ul > li > ul > li a {
|
|
display: flex;
|
|
border-radius: 6px;
|
|
padding: 3px 6px;
|
|
transition: background-color 200ms ease;
|
|
}
|
|
|
|
#menu > ul > li > ul > li a:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
#menu > ul > li > ul > li > ul {
|
|
display: none;
|
|
}
|
|
|
|
#menu > ul > li:hover > ul {
|
|
/* display: flex; */
|
|
top: 50px;
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
} |