notes/style.css

258 lines
3.3 KiB
CSS

/* globals */
:root {
--black: rgb(55, 53, 47);
--accent: rgb(90, 167, 206);
--shadow: 0.75px 0 0;
}
body {
margin-left: 7%;
margin-right: 7%;
background: white;
font-family: helvetica, system-ui;
caret-color: var(--accent);
color: var(--black);
}
a {
color: inherit;
}
input {
outline: none;
border: none;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
/* scrollbars */
:root
{
scrollbar-width: thin;
scrollbar-color: lightgray;
}
body::-webkit-scrollbar {
height: 7px;
width: 7px;
background-color: darkgray;
}
body::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 10px;
}
/* note page and editor */
#unsavedmark {
position: fixed;
top: 0;
left: 5px;
color: lightgrey;
}
#notepage {
width: 100%;
display: table;
}
#md {
outline: none;
border: none;
width: 100%;
color: inherit;
resize: none;
font-family: inherit;
font-size: inherit;
line-height: inherit;
background-color: inherit;
/* coloring */
position: absolute;
top: 0;
left: 0;
padding: 0;
}
#notecontent {
position: relative;
}
#colored {
position: absolute;
white-space: pre-wrap;
top: 0;
left: 0;
z-index: -1;
width: 100%;
word-wrap:break-word;
}
#network {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
}
/* top bar content */
#topbar {
height: 50px;
width: 100%;
}
#title {
width: 100%;
font-size: 20px;
background-color: inherit;
height: 100%;
font-weight: bold;
}
/* preview */
#preview {
font-size: 16px;
line-height: 150%;
}
/* search file dialog */
#filter {
color: black;
width: 100%;
}
#searchdialog {
color: black;
background-color: lightgray;
position: absolute;
top: 0;
left: 10%;
opacity: 1;
width: 80%;
z-index: 2;
font-size: 14px;
min-width: 500px;
}
.searchitem {
cursor: pointer;
margin: 2px 2px 2px 2px;
}
.selected {
cursor: pointer;
background-color: darkgray;
margin: 2px 2px 2px 2px;
}
.searchlistprefix {
color: grey;
}
.searchlistsuffix {
color: grey;
}
/* colors */
.color-code {
color:lightgray;
background-color:var(--black);
}
.color-heading-mark {
color: lightgray;
}
.color-heading {
text-shadow: var(--shadow);
}
.color-bold {
text-shadow: var(--shadow);
}
.color-emphasis {
font-style: italic;
}
.color-list-marker {
color: var(--accent);
}
.color-header {
color: lightgrey;
}
.color-code-language {
color: var(--accent);
text-shadow: var(--shadow);
}
.color-code-comment {
color: grey;
}
.color-code-keyword {
color: var(--accent);
text-shadow: var(--shadow);
}
.color-comment {
color: lightgrey;
}
.color-autocomplete {
color: lightgrey;
}
.color-link {
text-decoration: underline;
}
.color-todo-priority {
color: var(--accent);
text-shadow: var(--shadow);
}
.color-todo-complete {
color: lightgrey;
text-decoration: line-through;
}
.color-todo-project {
text-shadow: var(--shadow);
color: grey;
}
.color-todo-context {
color: grey;
}
/* link dialog */
#linkdialog {
border-radius: 3px;
opacity:1;
color: white;
background-color:var(--black);
position:absolute;
}
#linkelt {
margin: 5px 7px 5px 7px;
}