mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 02:52:27 +08:00
Rework css for new design
This commit is contained in:
Zack Rauen
parent
124fd480b7
commit
1a40658345
@ -1,48 +0,0 @@
|
||||
#breadcrumbs {
|
||||
margin: 0 0 30px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
padding: 16px 0 0 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#breadcrumbs li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#breadcrumbs a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
transition: color 200ms ease, transform 200ms ease, background-color 200ms ease;
|
||||
}
|
||||
|
||||
#breadcrumbs img {
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
#breadcrumbs li:not(:last-child)::after {
|
||||
background: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 256 256\"><g><g><polygon points=\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>") center;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
filter: invert(0.64) sepia(0.11) saturate(0) hue-rotate(149deg) brightness(0.99) contrast(0.95);
|
||||
height: 8px;
|
||||
margin: 0 8px;
|
||||
opacity: .5;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#breadcrumbs li:last-child a,
|
||||
#breadcrumbs li a:hover {
|
||||
background: #202127;
|
||||
}
|
||||
|
||||
#breadcrumbs li a:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
53
src/styles/childlinks.css
Normal file
53
src/styles/childlinks.css
Normal file
@ -0,0 +1,53 @@
|
||||
#childLinks,
|
||||
#childLinks ul,
|
||||
#childLinks li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#childLinks {
|
||||
padding-top: 10px;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
justify-content: center;
|
||||
border-top: 1px solid var(--background-highlight);
|
||||
}
|
||||
|
||||
#childLinks ul {
|
||||
padding: 0;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#childLinks li {
|
||||
background: var(--background-highlight);
|
||||
padding: 2px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
|
||||
.no-content + #childLinks {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#childLinks.grid li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#childLinks.grid li a {
|
||||
padding: 50px;
|
||||
border-radius: 12px;
|
||||
background: var(--background-highlight);
|
||||
color: var(--text-primary);
|
||||
transform: translateY(0);
|
||||
transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
|
||||
}
|
||||
|
||||
#childLinks.grid li a:hover {
|
||||
background: var(--background-active);
|
||||
color: var(--background-secondary);
|
||||
text-decoration: none;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
@ -1,291 +1,103 @@
|
||||
@import "./breadcrumbs.css";
|
||||
@import "./childlinks.css";
|
||||
@import "./externallinks.css";
|
||||
@import "./navbar.css";
|
||||
@import "./sidebar.css";
|
||||
@import "./swagger.css";
|
||||
@import "./toc.css";
|
||||
|
||||
@import "./navbar/index.css";
|
||||
@import "./popouts/index.css";
|
||||
|
||||
@import "./mobile.css";
|
||||
|
||||
|
||||
* {box-sizing: border-box;}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
|
||||
--blue: #3E82E5;
|
||||
--blue-strong: #008CBD;
|
||||
--gray: gray;
|
||||
--ck-color-table-caption-text: gray;
|
||||
--bg-primary: #1E1E1E;
|
||||
--bg-secondary: #3C3C3C;
|
||||
--text-muted: #777;
|
||||
--text-primary: #ddd;
|
||||
--text-heading: #fff;
|
||||
--background-primary: #333333;
|
||||
--background-secondary: #1F1F1F;
|
||||
--background-highlight: #484848;
|
||||
--background-active: #777777;
|
||||
--text-primary: #cccccc;
|
||||
--text-heading: #cccccc;
|
||||
--text-menu: #AAAAAA;
|
||||
--text-link: #87CEFA;
|
||||
--text-menu-active: #000000;
|
||||
}
|
||||
|
||||
--bottom-layer: #040405;
|
||||
--middle-layer: #0C0D10;
|
||||
--top-layer: #14151B;
|
||||
--accent-layer: #20212B;
|
||||
--accent-color: #3E82E5;
|
||||
|
||||
--container-width: 1400px /*calc(100% - 10%)*/;
|
||||
--pane-size: 20%;
|
||||
|
||||
|
||||
scroll-padding-top: calc(72px + 1rem);
|
||||
color-scheme: dark;
|
||||
body.theme-light {
|
||||
--background-primary: #FFFFFF;
|
||||
--background-secondary: #F3F3F3;
|
||||
--background-highlight: #DDDDDD;
|
||||
--background-active: #777777;
|
||||
--text-primary: #000000;
|
||||
--text-heading: #000000;
|
||||
--text-menu: #333333;
|
||||
--text-link: #0000ff;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background: var(--middle-layer);
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: var(--background-primary);
|
||||
font-family: 'Montserrat', 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-link);
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
transition: color 200ms ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#content {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
#main h1,
|
||||
#main h2,
|
||||
#main h3,
|
||||
#main h4,
|
||||
#main h5,
|
||||
#main h6 {
|
||||
color: var(--text-heading);
|
||||
line-height: 36px;
|
||||
padding: 5px 0px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 800;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #content h2::before,
|
||||
#content h3::before,
|
||||
#content h4::before{
|
||||
content: '#';
|
||||
color: var(--blue);
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
} */
|
||||
|
||||
#main h1 a,
|
||||
#main h2 a,
|
||||
#main h3 a,
|
||||
#main h4 a,
|
||||
#main h5 a,
|
||||
#main h6 a {
|
||||
color: var(--blue);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#content h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#content h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#content p {
|
||||
margin-block-start: 12px;
|
||||
margin-block-end: 12px;
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#content hr {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#content blockquote {
|
||||
margin-block-start: 12px;
|
||||
margin-block-end: 24px;
|
||||
margin-inline-start: 32px;
|
||||
margin-inline-end: 32px;
|
||||
padding-block-start: 12px;
|
||||
padding-block-end: 12px;
|
||||
padding-inline-start: 16px;
|
||||
padding-inline-end: 16px;
|
||||
background-color: hsla(0deg, 0%, 0%, 0.054);
|
||||
}
|
||||
|
||||
#noteClippedFrom {
|
||||
color: var(--gray);
|
||||
margin-bottom: 0.5rem;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.table {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.pdf-view {
|
||||
width: 100%;
|
||||
min-height: 40rem;
|
||||
}
|
||||
|
||||
.type-file > button {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
background-color: var(--blue);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.mermaid {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
||||
#toggleMenuButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#layout {
|
||||
#split-pane {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: var(--container-width);
|
||||
max-width: var(--container-width);
|
||||
margin-top: calc(72px + 1rem);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
#layout {
|
||||
width: 1300px;
|
||||
max-width: 1300px;
|
||||
}
|
||||
#left-pane {
|
||||
display: flex;
|
||||
width: calc((100vw - 900px) / 2);
|
||||
min-width: fit-content;
|
||||
height: calc(100vh);
|
||||
background: var(--background-secondary);
|
||||
border-right: 5px solid var(--background-highlight);
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
#layout {
|
||||
width: 1100px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#main {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
#layout.toc #main,
|
||||
#sidebar + #main {
|
||||
flex: calc(100% - var(--pane-size));
|
||||
}
|
||||
|
||||
#layout.toc #sidebar + #main {
|
||||
flex: calc(100% - (2 * var(--pane-size)));
|
||||
#right-pane {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
gap: 40px;
|
||||
flex: 1;
|
||||
padding-bottom: 500px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
#main {
|
||||
contain: content;
|
||||
background-color: var(--top-layer);
|
||||
padding: 1rem 3rem 2rem 3rem;
|
||||
box-shadow: 0 2px 10px #00000040;
|
||||
border-radius: 6px;
|
||||
order: 2;
|
||||
max-width: 900px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.ck-content code {
|
||||
background-color: var(--accent-layer);
|
||||
border-radius: 6px;
|
||||
padding: 3px;
|
||||
}
|
||||
.ck-content pre {
|
||||
background: var(--accent-layer);
|
||||
border-radius: 6px;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 4px #0003;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
#childLinks.list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#parentLink {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#childLinks.grid ul li a {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#childLinks.grid ul li a:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
#content h1,
|
||||
#content h2,
|
||||
#content h3,
|
||||
#content h4,
|
||||
#content h5,
|
||||
#content h6 {
|
||||
color: var(--text-heading);
|
||||
border-bottom: 1px solid var(--background-highlight);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
@ -1,157 +1,95 @@
|
||||
.expand {
|
||||
display: none
|
||||
#mobile-header {
|
||||
display: none;
|
||||
background: var(--background-secondary);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
button.expand {
|
||||
position: relative;
|
||||
padding: 9px;
|
||||
margin: 9.5px 0;
|
||||
border: 0 solid #000;
|
||||
border-radius: 4px;
|
||||
background: 0 0;
|
||||
color: #fff;
|
||||
-webkit-transition: -webkit-transform .5s;
|
||||
-moz-transition: transform .5s;
|
||||
-o-transition: transform .5s;
|
||||
transition: transform .5s
|
||||
#mobile-header a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.expanded button.expand {
|
||||
background-color: #000;
|
||||
-webkit-transition: -webkit-transform .5s, background-color .5s;
|
||||
-moz-transition: transform .5s, background-color .5s;
|
||||
-o-transition: transform .5s, background-color .5s;
|
||||
transition: transform .5s, background-color .5s;
|
||||
-ms-transform: rotate(90deg);
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg)
|
||||
#mobile-header a img {
|
||||
max-width: 32px;
|
||||
}
|
||||
|
||||
.expanded .rectangle {
|
||||
background: #fff;
|
||||
#mobile-header button {
|
||||
color: var(--text-menu);
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transform: rotate(0);
|
||||
transition: background-color 200ms ease, transform 200ms ease;
|
||||
}
|
||||
|
||||
.rectangle {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
border-radius: 1px;
|
||||
background: var(--text-heading);
|
||||
transition: transform .5s, background-color .5s;
|
||||
}
|
||||
|
||||
.rectangle + .rectangle {
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#toc {
|
||||
display: none;
|
||||
@media (max-width: 48em) {
|
||||
|
||||
#right-pane, #main {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#layout {
|
||||
overflow: hidden;
|
||||
|
||||
#mobile-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: auto;
|
||||
#mobile-header button svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.expand {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
#menu::after {
|
||||
content: "";
|
||||
#left-pane {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: background-color 200ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#menu.expanded::after {
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#menu > ul {
|
||||
position: fixed;
|
||||
width: auto;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 200ms ease;
|
||||
transform-origin: 0 0;
|
||||
z-index: 1;
|
||||
background: #040405;
|
||||
display: initial;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
width: 70%;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#menu #go-back {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#menu.expanded > ul.active {
|
||||
.menu-open #left-pane {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#menu #sidebar .category > p > a {
|
||||
font-weight: 400;
|
||||
body::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,0);
|
||||
pointer-events: none;
|
||||
transition: background-color 200ms ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#menu > ul > li > p > a {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
#menu > ul > li > ul {
|
||||
background: none;
|
||||
opacity: 1;
|
||||
position: initial;
|
||||
transform: none;
|
||||
margin-top: 0;
|
||||
pointer-events: initial;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#menu > ul > li.submenu-item > p > a::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu > ul > li > ul > li > ul {
|
||||
display: initial;
|
||||
body.menu-open::before {
|
||||
background: rgba(0,0,0, 0.6);
|
||||
}
|
||||
|
||||
|
||||
#menu > ul:not(#sidebar) > li > ul > li > ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu > ul:not(#sidebar) ul {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#menu > ul:not(#sidebar) ul {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#menu > ul:not(#sidebar) a.active {
|
||||
background: var(--accent-color);
|
||||
border-radius: 6px;
|
||||
body.menu-open #show-menu-button {
|
||||
background: var(--background-highlight);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@ -1,152 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
141
src/styles/navbar/header.css
Normal file
141
src/styles/navbar/header.css
Normal file
@ -0,0 +1,141 @@
|
||||
#site-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#site-header > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 27px; /* 32 */
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--text-primary);;
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 19px; /* 26px */
|
||||
width: 19px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--background-highlight);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px var(--background-highlight);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(33px); /* whole width - slider width - 8px padding*/
|
||||
}
|
||||
|
||||
|
||||
.theme-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.theme-selection label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dark-icon, .light-icon {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transition: opacity 400ms ease, color 400ms ease;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* input ~ .dark-icon {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
input:not(:checked) ~ .light-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:checked ~ .dark-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* input:checked ~ .light-icon {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
|
||||
.dark-icon {
|
||||
left: 5px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.light-icon {
|
||||
right: 5px;
|
||||
color: var(--background-highlight);
|
||||
}
|
||||
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: var(--text-primary);
|
||||
background: var(--background-highlight);
|
||||
outline: 0;
|
||||
border: 0;
|
||||
flex: 1;
|
||||
padding: 5px 5px 5px 32px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
display: flex;
|
||||
color: var(--text-primary);
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
left: 5px;
|
||||
}
|
||||
2
src/styles/navbar/index.css
Normal file
2
src/styles/navbar/index.css
Normal file
@ -0,0 +1,2 @@
|
||||
@import "./header.css";
|
||||
@import "./navbar.css";
|
||||
141
src/styles/navbar/navbar.css
Normal file
141
src/styles/navbar/navbar.css
Normal file
@ -0,0 +1,141 @@
|
||||
#navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
order: 1;
|
||||
/* margin-left: auto; */
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
flex: 0;
|
||||
/* padding: 25px; */
|
||||
}
|
||||
|
||||
#menu > ul {
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
padding-left: 0!important;
|
||||
}
|
||||
|
||||
/* #menu > ul, #menu > div {
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
} */
|
||||
|
||||
#menu ul {
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
/* overflow-y: hidden; */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#menu li .collapsible-label {
|
||||
display: flex;
|
||||
flex: 1
|
||||
}
|
||||
|
||||
#menu li > ul {
|
||||
transition: height 1000ms ease;
|
||||
}
|
||||
|
||||
#menu li:not(.expanded) > ul {
|
||||
height: 0!important;
|
||||
/* transition: height 1000ms ease; */
|
||||
}
|
||||
|
||||
#menu li.expanded > ul {
|
||||
/* max-height: 500px; */
|
||||
}
|
||||
|
||||
#menu p {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#menu li.item > a {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 5px;
|
||||
color: var(--text-menu);
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
padding: 2px 6px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#menu a:hover {
|
||||
border-color: var(--text-menu);
|
||||
}
|
||||
|
||||
#menu a.active {
|
||||
background: var(--background-active);
|
||||
color: var(--background-secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#menu li ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#menu li ul::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
left: 10px;
|
||||
width: 2px;
|
||||
background: var(--background-highlight);
|
||||
}
|
||||
|
||||
.active .collapse-button {
|
||||
background: none;
|
||||
color: var(--background-secondary);
|
||||
}
|
||||
|
||||
|
||||
.collapse-button {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: var(--background-secondary);
|
||||
border: 0;
|
||||
color: var(--text-menu);
|
||||
/* position: absolute; */
|
||||
/* top: 2px; */
|
||||
/* left: -18px; */
|
||||
transform: rotate(-90deg);
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
.expanded > .collapse-button,
|
||||
.expanded > a > .collapse-button {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.collapse-button svg {
|
||||
width: 14px;
|
||||
}
|
||||
1
src/styles/popouts/index.css
Normal file
1
src/styles/popouts/index.css
Normal file
@ -0,0 +1 @@
|
||||
@import "./search.css";
|
||||
34
src/styles/popouts/search.css
Normal file
34
src/styles/popouts/search.css
Normal file
@ -0,0 +1,34 @@
|
||||
.search-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
background: var(--background-highlight);
|
||||
margin-top: 10px;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.search-result-item:hover {
|
||||
cursor: pointer;
|
||||
background: var(--background-active);
|
||||
color: var(--text-menu-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.search-result-item:hover .search-result-note {
|
||||
color: var(--text-menu-active);
|
||||
}
|
||||
|
||||
.search-result-note {
|
||||
font-size: 12px;
|
||||
color: var(--text-menu);
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
#sidebar {
|
||||
flex: var(--pane-size);
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: calc(72px + 1rem);
|
||||
}
|
||||
|
||||
#sidebar, #sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
/* padding-right: 20px; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* #sidebar .title {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
color: #777;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid #777;
|
||||
} */
|
||||
|
||||
#sidebar p {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
flex: 1;
|
||||
padding: 6px 6px 6px 12px;
|
||||
border-radius: 6px;
|
||||
transition: color 200ms ease, background-color 200ms ease;
|
||||
}
|
||||
|
||||
#sidebar a:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
#sidebar > li > ul > li.submenu-item > p > a {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#sidebar li > ul {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#sidebar > li > ul.hasSubmenu,
|
||||
#sidebar > li > ul > li.submenu-item + li.submenu-item {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#sidebar a.active,
|
||||
#sidebar > li > ul > li.submenu-item > p > a.active {
|
||||
background: var(--accent-color);
|
||||
/* background: rgba(255, 255, 255, 0.1); */
|
||||
color: var(--text-heading);
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
#main .swagger-ui .scheme-container {
|
||||
background: #20212B;
|
||||
background: var(--background-secondary);
|
||||
}
|
||||
|
||||
#main .swagger-ui .opblock .opblock-section-header {
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
#main .swagger-ui .opblock-body pre.microlight {
|
||||
background: #20212B!important;
|
||||
background: var(--background-secondary) !important;
|
||||
}
|
||||
|
||||
#main .swagger-ui,
|
||||
@ -22,6 +22,10 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
#main .swagger-ui .opblock .opblock-summary-operation-id,
|
||||
#main .swagger-ui .opblock .opblock-summary-path,
|
||||
#main .swagger-ui .opblock .opblock-summary-path__deprecated,
|
||||
#main .swagger-ui .btn,
|
||||
#main .swagger-ui .model,
|
||||
#main .swagger-ui .tab li,
|
||||
@ -35,11 +39,11 @@
|
||||
}
|
||||
|
||||
#main .swagger-ui .model .property.primitive {
|
||||
color: var(--text-muted);
|
||||
color: var(--text-menu);
|
||||
}
|
||||
|
||||
#main .swagger-ui .prop-type {
|
||||
color: var(--accent-color);
|
||||
color: var(--text-link);
|
||||
}
|
||||
|
||||
#main .swagger-ui svg {
|
||||
@ -83,3 +87,31 @@
|
||||
#main .swagger-ui .authorization__btn {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.swagger-ui .info .title small {
|
||||
top: 0;
|
||||
padding: 4px 8px;
|
||||
background: var(--background-highlight);
|
||||
}
|
||||
|
||||
#main .swagger-ui .info .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#main .swagger-ui .info .title small pre {
|
||||
color: var(--text-heading);
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#main .swagger-ui .info .title > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swagger-ui .info .title small.version-stamp {
|
||||
background: var(--background-highlight);
|
||||
}
|
||||
@ -1,12 +1,23 @@
|
||||
#toc {
|
||||
flex: var(--pane-size);
|
||||
position: sticky;
|
||||
top: calc(72px + 1rem);
|
||||
#toc-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
order: 3;
|
||||
/* padding: 16px 16px 16px 32px; */
|
||||
}
|
||||
|
||||
#toc-pane h3 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#toc {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
background: var(--top-layer);
|
||||
margin: 0;
|
||||
padding: 16px 16px 16px 32px;
|
||||
border-radius: 6px;
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
|
||||
#toc, #toc ul {
|
||||
@ -18,22 +29,59 @@
|
||||
}
|
||||
|
||||
#toc li a {
|
||||
/* position: relative; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text-heading);
|
||||
transition: color 200ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#toc li a:hover,
|
||||
#toc li a.active {
|
||||
color: var(--accent-color);
|
||||
color: var(--text-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#toc li a::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
left: 0;
|
||||
transition: background-color 200ms ease;
|
||||
}
|
||||
|
||||
#toc li a.active::before {
|
||||
background: var(--text-link);
|
||||
}
|
||||
|
||||
#toc::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
top: 4px;
|
||||
width: 2px;
|
||||
height: calc(100% - 40px);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
height: calc(100% - 8px);
|
||||
background: var(--background-highlight);
|
||||
}
|
||||
|
||||
#content h1 a.toc-anchor,
|
||||
#content h2 a.toc-anchor,
|
||||
#content h3 a.toc-anchor,
|
||||
#content h4 a.toc-anchor,
|
||||
#content h5 a.toc-anchor,
|
||||
#content h6 a.toc-anchor {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#toc-pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user