trilium/public/stylesheets/style.css

205 lines
5.1 KiB
CSS
Raw Normal View History

#container {
margin: 0 auto; /* center */
height: 100vh;
display: grid;
2017-10-07 10:46:30 +08:00
grid-template-areas: "header header"
"tree-actions title"
"tree note-content"
"parent-list note-content";
grid-template-columns: 2fr 5fr;
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;
}
2017-12-02 23:37:12 +08:00
#note-detail {
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: 400px;
overflow: auto;
2017-06-12 09:04:04 +08:00
}
2017-12-17 10:27:42 +08:00
#note-detail-wrapper.protected {
background-color: #eee;
}
2017-12-02 23:37:12 +08:00
#note-detail p {
padding: 0;
margin: 0;
2017-08-24 11:36:16 +08:00
}
ul.fancytree-container {
overflow: auto;
position: relative;
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-position: 0 0;
2017-10-16 07:47:05 +08:00
background-image: url("../images/icons/file.png");
}
span.fancytree-node.fancytree-folder > span.fancytree-icon {
background-position: 0 0;
2017-10-16 07:47:05 +08:00
background-image: url("../images/icons/folder.png");
}
span.fancytree-node.protected > span.fancytree-icon {
background-position: 0 0;
2017-10-16 07:47:05 +08:00
background-image: url("../images/icons/file-shaded.png");
}
span.fancytree-node.protected.fancytree-folder > span.fancytree-icon {
background-position: 0 0;
2017-10-16 07:47:05 +08:00
background-image: url("../images/icons/folder-shaded.png");
}
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;
}
/* 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;
}
#protect-button, #unprotect-button {
display: none;
2017-10-06 08:15:45 +08:00
}
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 {
padding: 5px 50px 5px 10px;
font-size: large;
font-weight: bold;
2017-10-09 23:28:56 +08:00
}
#header .btn-xs {
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;
}
2017-12-07 09:19:41 +08:00
#parent-list {
display: none;
margin-left: 20px;
border-top: 2px solid #eee;
padding-top: 10px;
}
#parent-list ul {
padding-left: 20px;
}
/*
* .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-id-display {
color: lightgrey;
margin-left: 10px;
}
#note-source {
height: 98%;
width: 100%;
overflow: scroll;
}
2017-12-01 12:53:15 +08:00
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}
2017-12-01 12:56:11 +08:00
#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#777;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#aaa;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#ddd;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
2017-12-01 12:53:15 +08:00
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}