You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/editor/src/styles.scss

572 lines
8.3 KiB

4 years ago
@charset "utf-8";
/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/_all";
@import "~bulma/sass/elements/title.sass";
@import "~bulma/sass/elements/content.sass";
@import "~bulma/sass/components/breadcrumb.sass";
@import "~bulma/sass/components/navbar.sass";
5 years ago
@import '~jquery-contextmenu/dist/jquery.contextMenu.css';
//@import '~vis-network/styles/vis-network.css';
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
body {
font-family: 'Inter', sans-serif;
}
.input-line {
font-family: 'Inter', sans-serif;
}
.highlight-links {
.content a.wiki-link::before {
content: "[[";
color: #ccc;
}
.content a.wiki-link::after {
content: "]]";
color: #ccc;
}
}
4 years ago
.metadata-key a {
font-weight: bold;
color: black;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
body {
font-family: 'Inter var', sans-serif;
}
.input-line {
font-family: 'Inter var', sans-serif;
}
}
5 years ago
#editor {
}
#save-indicator {
5 years ago
position: fixed;
top: 0;
left: 0;
background: lightskyblue;
font-weight: bold;
color: white;
padding: 3px;
z-index: 50;
&.error {
background: red;
}
5 years ago
}
5 years ago
#autocomplete.hidden {
5 years ago
display: none;
5 years ago
}
4 years ago
#result-template.hidden {
display: none;
}
4 years ago
.list-item .fold {
visibility: hidden;
}
.list-item:hover .fold {
visibility: visible;
}
.list-item.selected .fold {
visibility: visible;
}
4 years ago
.list-item.editor .fold {
visibility: visible;
}
.list-item .fold {
align-self: flex-start;
font-size: 10px;
margin-top: 4px;
4 years ago
margin-right: 3px;
cursor: pointer;
4 years ago
}
// enable to close multi line content
.list-item:not(.open) .content {
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
4 years ago
.list-item.no-children:hover .fold,
.list-item.no-children.editor .fold,
.list-item.no-children .fold {
//visibility: hidden;
}
4 years ago
.list-item.no-children.fold {
color: #cccccc;
}
4 years ago
.list-item.open .fold {
transform: rotate(90deg);
}
.root .list-item.hidden {
border: none;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
}
5 years ago
.marker {
display: inline-block;
width: 16px;
height: 16px;
align-self: first baseline;
flex-shrink: 0;
margin-right: 4px;
margin-top: 4px;
border-radius: 50%;
4 years ago
border: 5px solid #ccc;
4 years ago
background: rgba(0, 0, 0, 0.8);
}
textarea {
box-sizing: border-box;
min-height: 19px;
overflow-x: hidden;
border: none;
resize: none;
line-height: 24px;
}
.marker:hover {
border-color: #ccc;
}
4 years ago
.list-item.open .marker {
border-color: white;
}
.list-item.no-children .marker {
border-color: white;
}
.list-item {
border: none;
padding: 2px 0px;
}
.list-item.border {
//border-left: 1px solid #ccc;
}
.input-line,
.input-line:active,
.input-line:focus {
width: 100%;
box-shadow: none;
border: none;
min-height: 19px;
word-break: break-word;
}
4 years ago
mark {
background: #ffff99;
outline: 4px solid #ffff99;
4 years ago
}
.root mark::before {
4 years ago
content: "==";
color: #999;
}
.root mark::after {
4 years ago
content: "==";
color: #999;
}
.marker, .fold {
user-select: none;
}
4 years ago
.grid {
display: grid;
3 years ago
grid-template-columns: 300px 1000px auto;
4 years ago
.sidebar {
padding: 0 12px;
width: 100%;
.wiki-link {
&::before, &::after {
content: '';
}
}
3 years ago
}
.sidebar-right {
width: 100%;
padding: 0 12px;
}
}
.calendar-buttons {
width: 257px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
padding: 3px;
.calendar-update {
display: block;
width: 32px;
height: 32px;
text-align: center;
}
.calendar-update:active {
border: 3px solid #aaa;
border-radius: 4px;
}
}
3 years ago
.calendar-grid {
display: grid;
width: 257px;
3 years ago
grid-template-columns: repeat(8, auto);
border-right: 1px solid #444;
border-bottom: 1px solid #444;
.day {
width: 32px;
height: 32px;
3 years ago
border-left: 1px solid #444;
border-top: 1px solid #444;
text-align: center;
vertical-align: middle;
padding: 3px 0 0 0;
position: relative;
&.has-content::after {
font-weight: bold;
content: '\00B7';
display: block;
margin-top: 6px;
}
3 years ago
}
.week {
background: #ebebff;
}
.week a {
color: black;
}
.day a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
3 years ago
color: black;
}
.day .day-text {
font-size: 9pt;
display: block;
margin-top: 3px;
}
.day .day-count {
3 years ago
position: absolute;
width: 100%;
height: 100%;
font-size: 20pt;
color: black;
top: 8px;
left: 0;
right: 0;
bottom: 0;
}
.today {
font-weight: bold;
}
.current {
background: #f0f0f0;
&.has-content::after {
font-weight: bold;
content: '\00B7';
display: block;
margin-top: 6px;
}
4 years ago
}
}
.section {
padding: 0;
}
4 years ago
.footer {
padding: 0 12px;
}
.wiki-list-editor {
max-width: 960px;
}
.wiki-list-editor {
.table-wrapper {
max-width: 960px;
overflow-x: auto;
}
.table-wrapper td {
white-space: pre;
text-wrap: none;
}
}
.column a + a :before {
content: '>';
}
.content {
flex-grow: 1;
min-height: 24px;
}
#autocomplete {
z-index: 1;
width: 640px;
overflow-x: hidden;
overflow-y: auto;
height: 600px;
position: absolute;
background: white;
border: 1px solid #ccc;
}
#autocomplete li > a {
display: block;
}
#autocomplete li div {
font-size: 0.8em;
display: block;
color: black;
}
#autocomplete li {
padding: 4px 16px;
max-height: 5em;
overflow: hidden;
}
#autocomplete li:hover {
background: #fefefe;
}
#autocomplete li.selected {
background: lightblue;
}
#link-complete {
z-index: 1;
width: 280px;
overflow-x: hidden;
overflow-y: auto;
height: 300px;
position: absolute;
background: white;
border: 1px solid #ccc;
outline: none;
}
#link-complete li {
padding: 4px 16px;
white-space: nowrap;
}
#link-complete li.selected {
background: lightblue;
}
.monospace {
font-family: "Fira Code Retina", monospace;
white-space: pre-wrap;
}
.content input[type="checkbox"] {
vertical-align: baseline;
}
.lighter {
color: #ccc;
}
del {
text-decoration: none;
}
ins {
text-decoration: none;
}
.checklist {
margin-bottom: 1em;
}
.checklist--item {
display: flex;
}
.checklist--item-text {
align-self: center;
}
html {
font-family: 'Inter', sans-serif;
}
body {
font-family: 'Inter', sans-serif;
}
input.input-line {
font-family: 'Inter', sans-serif;
}
.root .list-item {
padding: 3px;
padding-left: 12px;
display: flex;
margin-left: 32px;
flex-direction: column;
border: none;
}
.line {
display: flex;
flex-direction: row;
align-items: center;
}
textarea {
border: none;
resize: none;
}
.list-item .content {
white-space: pre-wrap;
}
.hide {
display: none;
}
.selected {
background: lightblue;
}
.fold.closed + .marker {
border-color: lightblue;
}
.selected .marker {
border-color: lightblue;
}
#editor {
width: 750px;
}
.editor.selected .marker {
/*border-color: white;*/
}
.editor.selected {
background: none;
}
.line {
min-height: 24px;
}
input.input-line, input.input-line:active {
border: none;
outline: none;
margin: 0;
padding: 0;
width: 100%;
font-size: 16px;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.backrefs {
padding: 24px;
background: #deeeee;
border-top: 3px solid #acc;
}
.breadcrumb li {
max-width: 200px;
}
.breadcrumb li > a {
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.searchbar {
position: relative;
display: flex;
justify-content: center;
.field > .control {
width: 100%;
}
.search.input {
width: 400px;
}
}
.wiki-table .expression {
display: none;
}
.todo--todo {
}
.todo--done {
text-decoration: line-through;
text-decoration-skip: leading-spaces;
color: #999;
}