44bcef03e1
- Use CSS classes instead of applying the styles to the elements. -- Allows a user to override any of the default styles being applied. - Remove the borders and handles when not hovering over the box. - Increase the opacity for embedded notes to full to avoid conflicts with the text underneath. - Decrease the opacity a little when editing embedded notes. -- Allows for better seeing of the text underneath while still being able to see the translation text above. -- Compensated for by showing full opacity when hovering over the note box.
155 lines
2.8 KiB
SCSS
155 lines
2.8 KiB
SCSS
div#note-container {
|
|
position: absolute;
|
|
z-index: 50;
|
|
|
|
div.note-body {
|
|
position: absolute;
|
|
border: var(--note-body-border);
|
|
background: var(--note-body-background);
|
|
color: var(--note-body-text-color);
|
|
min-width: 140px;
|
|
min-height: 1em;
|
|
line-height: 1.25;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
z-index: 150;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div.note-body, div.note-box.embedded div.note-box-inner-border {
|
|
h1, h2, h3, h4, h5, h6, a, span, div, blockquote, br, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
i, em {
|
|
font-style: italic;
|
|
}
|
|
|
|
small {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
a[rel*="external"] {
|
|
word-break: initial;
|
|
}
|
|
|
|
.tn {
|
|
font-size: 0.8em;
|
|
color: var(--note-tn-color);
|
|
}
|
|
|
|
ruby {
|
|
rt {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin-left: 1em;
|
|
margin-bottom: 1em;
|
|
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li {
|
|
list-style-type: disc;
|
|
|
|
+ br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.note-box {
|
|
position: absolute;
|
|
border: var(--note-box-border);
|
|
min-width: 5px;
|
|
min-height: 5px;
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: move;
|
|
background: var(--note-box-background);
|
|
line-height: 1.25;
|
|
opacity: 0.5;
|
|
|
|
div.note-box-inner-border {
|
|
border: var(--note-box-inner-border);
|
|
background: var(--note-body-background);
|
|
}
|
|
|
|
div.note-box-inner-border.unsaved {
|
|
border: var(--unsaved-note-box-inner-border);
|
|
}
|
|
|
|
&.embedded {
|
|
color: var(--note-body-text-color);
|
|
border: 1px solid transparent;
|
|
opacity: 1;
|
|
|
|
&.hovering {
|
|
border: var(--note-box-border);
|
|
|
|
&.editing {
|
|
opacity: 1;
|
|
}
|
|
|
|
div.ui-resizable-handle {
|
|
display: block;
|
|
}
|
|
|
|
div.note-box-inner-border {
|
|
border: var(--note-box-inner-border);
|
|
}
|
|
}
|
|
|
|
&.editing {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
div.bg {
|
|
height: 100%;
|
|
text-align: center;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div.ui-resizable-handle {
|
|
display: none;
|
|
}
|
|
|
|
div.note-box-inner-border {
|
|
text-align: center;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
border: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
&.note-box-highlighted {
|
|
outline: 2px solid var(--note-highlight-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#note-preview {
|
|
position: absolute;
|
|
border: var(--note-preview-border);
|
|
opacity: 0.6;
|
|
display: none;
|
|
background: var(--note-preview-background);
|
|
}
|
|
|
|
div.note-edit-dialog {
|
|
font-size: 0.8em;
|
|
}
|