trilium/src/public/stylesheets/style.css

522 lines
9.5 KiB
CSS
Raw Normal View History

2018-09-07 19:47:26 +08:00
/* We change h5 and h6 because by default (bootstrap) they are smaller than normal text */
h5 {
font-size: 16px;
font-weight: 500;
}
h6 {
font-size: 14px;
font-weight: 600;
}
2018-10-12 19:40:06 +08:00
body {
/* Fix for CKEditor block gutter icon "stretching" body and causing scrollbar to appear after pressing enter
on the last line of the editor. */
position: fixed;
}
#container {
margin: 0 auto; /* center */
height: 100vh;
display: grid;
2017-10-07 10:46:30 +08:00
grid-template-areas: "header header"
"left-pane title"
"left-pane note-detail";
grid-template-rows: auto
2017-10-07 10:46:30 +08:00
auto
1fr;
justify-content: center;
grid-gap: 10px;
}
2017-10-11 08:37:45 +08:00
#header {
grid-area: header;
background-color: #f1f1f1;
display: flex;
align-items: center;
padding: 4px;
2017-10-11 08:37:45 +08:00
}
2018-11-06 04:12:03 +08:00
#header button {
padding: 1px 5px 1px 5px;
font-size: small;
}
2018-09-06 15:33:38 +08:00
#left-pane {
grid-area: left-pane;
display: flex;
flex-direction: column;
}
#global-buttons {
display: flex;
justify-content: space-around;
padding: 10px 0 10px 0;
margin: 0 10px 0 16px;
border: 1px solid #ccc;
}
#search-box {
display: none;
padding: 10px;
margin-top: 10px;
}
#title-container {
grid-area: title;
}
.tdialog {
display: none;
2018-09-06 15:33:38 +08:00
}
#note-detail-wrapper {
position: relative;
overflow: hidden;
grid-area: note-detail;
padding-left: 10px;
padding-top: 10px;
display: flex;
flex-direction: column;
}
#note-detail-component-wrapper {
flex-grow: 100;
position: relative;
overflow: auto;
flex-basis: content;
}
.note-detail-component {
display: none;
}
#note-detail-text {
2017-12-02 23:37:12 +08:00
border: 0 !important;
box-shadow: none !important;
2017-06-12 09:04:04 +08:00
/* This is because with empty content height of editor is 0 and it's impossible to click into it */
min-height: 200px;
overflow: auto;
2017-06-12 09:04:04 +08:00
}
#note-detail-wrapper.protected {
background: url('/images/shield.svg') no-repeat;
background-size: contain;
background-position: center;
}
2017-08-24 11:36:16 +08:00
ul.fancytree-container {
outline: none !important;
2017-08-24 11:36:16 +08:00
}
2017-08-28 02:39:26 +08:00
/* icons from https://feathericons.com */
span.fancytree-node > span.fancytree-icon {
background: url("../images/icons/file-16.png") 0 0;
}
span.fancytree-node.fancytree-folder > span.fancytree-icon {
background: url("../images/icons/folder-16.png") 0 0;
}
span.fancytree-node.code > span.fancytree-icon {
background: url("../images/icons/code-16.png") 0 0;
}
span.fancytree-node.fancytree-folder.code > span.fancytree-icon {
background: url("../images/icons/code-folder-16.png") 0 0;
}
2018-03-11 22:49:22 +08:00
span.fancytree-node.file > span.fancytree-icon {
background: url("../images/icons/paperclip-16.png") 0 0;
}
2018-10-31 03:26:31 +08:00
span.fancytree-node.relation-map > span.fancytree-icon {
background: url("../images/icons/relation-map-16.png") 0 0;
}
span.fancytree-node.render > span.fancytree-icon {
background: url("../images/icons/play-16.png") 0 0;
}
2018-03-11 22:53:10 +08:00
span.fancytree-node.search > span.fancytree-icon {
background: url("../images/icons/search-small-16.png") 0 0;
2018-03-11 22:53:10 +08:00
}
span.fancytree-node.protected > span.fancytree-icon {
filter: drop-shadow(2px 2px 2px black);
}
span.fancytree-node.multiple-parents .fancytree-title {
text-decoration: underline dotted;
}
span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-title {
font-weight: bold;
}
2018-05-27 04:16:34 +08:00
span.fancytree-node.tree-root > span.fancytree-icon {
background: url("../images/icons/tree-root-16.png") 0 0;
2018-05-27 04:16:34 +08:00
}
/* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
.ui-fancytree > li > ul {
padding-left: 5px;
}
/* By default not focused active tree item is not easily visible, this makes it more visible */
span.fancytree-active:not(.fancytree-focused) .fancytree-title {
background-color: #ddd !important;
border-color: #555 !important;
}
2017-09-04 06:53:28 +08:00
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
2017-09-06 10:01:22 +08:00
}
.icon-action:hover {
text-decoration: none;
2017-09-06 10:01:22 +08:00
}
.icon-action {
cursor: pointer;
display: block;
height: 24px;
width: 24px;
}
2017-12-16 11:35:42 +08:00
.ui-widget-content a:not(.ui-tabs-anchor) {
2017-10-06 08:15:45 +08:00
color: #337ab7 !important;
2017-10-07 10:46:30 +08:00
}
#header-title {
2018-02-04 01:44:22 +08:00
padding: 5px 20px 5px 10px;
2017-10-07 10:46:30 +08:00
font-size: large;
font-weight: bold;
2017-10-09 23:28:56 +08:00
}
2018-11-06 04:12:03 +08:00
#header .btn-sm {
2017-10-09 23:28:56 +08:00
margin-bottom: 2px;
margin-right: 8px;
2017-10-12 08:37:27 +08:00
}
div.ui-tooltip {
max-width: 600px;
max-height: 600px;
overflow: auto;
}
.alert {
padding: 5px;
width: auto;
}
2018-04-18 08:04:27 +08:00
#tree {
overflow: auto;
2018-06-05 08:22:41 +08:00
flex-grow: 1;
flex-shrink: 1;
flex-basis: 60%;
margin-top: 10px;
}
#search-results {
padding: 0 5px 5px 15px;
flex-basis: 40%;
flex-grow: 1;
flex-shrink: 1;
2018-04-18 08:04:27 +08:00
margin-top: 10px;
2018-06-05 08:22:41 +08:00
display: none;
overflow: auto;
border-bottom: 2px solid #ddd;
}
#search-results ul {
padding: 5px 5px 5px 15px;
2018-04-18 08:04:27 +08:00
}
/*
* .electron-in-page-search-window is a class specified to default
* <webview> element for search window.
*/
.electron-in-page-search-window {
position: fixed;
top: 50px;
right: 0;
border: solid grey 1px;
background-color: white;
width: 300px;
height: 36px;
}
/*
* .search-inactive is added to search window <webview> when the window
* is inactive.
*/
.search-inactive {
visibility: hidden;
}
/*
* .search-inactive is added to search window <webview> when the window
* is active.
*/
.search-active {
visibility: visible;
}
.electronSearchText-box {
display: none;
}
.electronSearchText-visible {
display: block;
}
/* Allow to use <kbd> elements inside the title to define shortcut hints. */
2017-12-27 08:54:43 +08:00
.ui-menu kbd, button kbd {
color: black;
border: none;
background-color: transparent;
box-shadow: none;
}
2017-12-27 08:54:43 +08:00
.ui-menu kbd {
margin-left: 30px;
float: right;
2017-12-27 08:54:43 +08:00
}
#note-source {
height: 98%;
width: 100%;
overflow: scroll;
}
.suppressed {
display: none;
}
.dropdown-menu a:hover:not(.disabled) {
background-color: #eee !important;
cursor: pointer;
}
2018-11-06 04:12:03 +08:00
.dropdown-menu a:not(.selected) .check {
2018-01-22 12:06:25 +08:00
visibility: hidden;
}
.dropdown-menu kbd
{
color: black;
border: none;
background-color: transparent;
box-shadow: none;
}
.dropdown-menu kbd {
float: right;
}
.dropdown-item.disabled, .dropdown-item.disabled kbd {
color: #aaa !important;
}
#note-detail-code {
min-height: 200px;
2018-05-27 07:58:08 +08:00
overflow: auto;
}
#note-detail-render {
min-height: 200px;
}
.CodeMirror {
font-family: "Liberation Mono", "Lucida Console", monospace;
2018-05-27 03:28:36 +08:00
height: auto;
background: inherit;
2018-01-22 09:15:42 +08:00
}
2018-05-27 07:58:08 +08:00
.CodeMirror-scroll {
min-height: 200px;
}
2018-01-22 09:15:42 +08:00
#note-id-display {
position: absolute;
right: 10px;
2018-02-05 09:23:30 +08:00
bottom: 8px;
2018-01-22 09:15:42 +08:00
z-index: 1000;
2018-02-03 23:37:57 +08:00
color: lightgrey;
2018-01-22 12:06:25 +08:00
}
#note-type-dropdown {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
2018-02-05 09:23:30 +08:00
.cm-matchhighlight {background-color: #eeeeee}
#label-list, #relation-list, #attribute-list {
2018-02-05 09:23:30 +08:00
color: #777777;
padding: 5px;
display: none;
2018-02-05 09:23:30 +08:00
}
#label-list button, #relation-list button, #attribute-list button {
2018-02-05 09:23:30 +08:00
padding: 2px;
margin-right: 5px;
}
#file-table th, #file-table td {
padding: 10px;
font-size: large;
}
#children-overview {
flex-grow: 1000;
flex-shrink: 1000;
flex-basis: 0px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 100px;
overflow: auto;
}
.child-overview {
font-weight: bold;
font-size: large;
padding: 10px;
2018-04-11 09:08:00 +08:00
background: #f4f4f4;
width: 150px;
height: 90px;
line-height: 2em;
margin-right: 20px;
border-radius: 15px;
overflow: hidden;
2018-04-11 09:08:00 +08:00
text-align: center;
margin-top: 15px;
text-overflow: ellipsis;
word-wrap: break-word;
2018-04-11 09:08:00 +08:00
}
.child-overview a {
color: #444;
2018-05-22 08:12:46 +08:00
}
#sql-console-query {
height: 150px;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#sql-console-query .CodeMirror {
height: 150px;
}
#history-navigation {
margin: 0 20px 0 5px;
display: flex;
}
2018-06-09 22:34:51 +08:00
.btn:not(.btn-primary):not(.btn-danger) {
border-color: #bbb;
background-color: #eee;
}
2018-06-06 11:28:10 +08:00
.btn.active:not(.btn-primary) {
background-color: #ccc;
2018-06-01 11:21:47 +08:00
}
#note-path-list .current a {
font-weight: bold;
2018-06-09 10:17:00 +08:00
}
button.icon-button {
height: 28px;
width: 28px;
background: no-repeat center;
}
2018-10-31 03:22:05 +08:00
button.icon-button24 {
height: 32px;
width: 32px;
background: no-repeat center;
}
2018-06-09 21:44:40 +08:00
#note-actions {
margin-left: 10px;
margin-right: 10px;
}
#note-actions .dropdown-menu {
width: 15em;
}
/* Themes */
html.theme-black, html.theme-black img, html.theme-black video {
filter: invert(100%) hue-rotate(180deg);
}
html.theme-black body {
background: black;
}
html.theme-dark {
filter: invert(90%) hue-rotate(180deg);
}
html.theme-dark img, html.theme-dark video {
filter: invert(100%) hue-rotate(180deg);
}
html.theme-dark body {
background: #191819;
}
.ck.ck-block-toolbar-button {
transform: translateX(10px);
}
#note-detail-promoted-attributes {
max-width: 70%;
margin: auto;
}
#note-detail-promoted-attributes td, #note-detail-promoted-attributes th {
padding: 5px;
2018-08-06 23:53:13 +08:00
}
.pointer {
cursor: pointer;
}
.show-recent-notes-button {
background: url('/images/icons/clock-16.png') no-repeat center;
cursor: pointer;
}
table.promoted-attributes-in-tooltip {
margin: auto;
}
table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th {
padding: 10px;
}
#note-detail-render-help {
margin: 50px;
padding: 20px;
}
.context-menu {
font-size: small;
}
.context-menu .dropdown-item {
padding: 2px 10px 2px 10px;
2018-02-05 09:23:30 +08:00
}