75 lines
1.2 KiB
SCSS
75 lines
1.2 KiB
SCSS
@use 'json-editor';
|
|
|
|
:root {
|
|
--gap: 8px;
|
|
--gap2: calc(var(--gap) * 2);
|
|
--blue-0: #D0EBFF;
|
|
--blue-1: #A5D8FF;
|
|
--red-0: #FFE3E3;
|
|
--red-1: #FFC9C9;
|
|
--yellow-0: #FFF3BF;
|
|
--yellow-1: #FFEC99;
|
|
--green-0: #D3F9D8;
|
|
--green-1: #B2F2BB;
|
|
}
|
|
|
|
|
|
html {
|
|
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#main {
|
|
display: grid;
|
|
grid-template-columns: 150px 1fr 1fr;
|
|
grid-template-rows: 100vh;
|
|
|
|
.sidebar {
|
|
padding: var(--gap);
|
|
}
|
|
.middle {
|
|
padding-right: var(--gap2);
|
|
margin-left: var(--sidebar-width);
|
|
overflow-y: auto;
|
|
}
|
|
.right {
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
|
|
.editor-container {
|
|
[data-schemapath]:target {
|
|
animation: bgFade 1s forwards;
|
|
}
|
|
}
|
|
|
|
.editor-toc {
|
|
ul {
|
|
margin: 0;
|
|
padding: 4px 0 4px 14px;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes bgFade {
|
|
0% {
|
|
background-color: #FFF3BF;
|
|
}
|
|
50% {
|
|
background-color: #FFF9DB;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|