anki/ts/editor/fields.scss
Henrik Giesel 0f92664d4a First implementation of MathjaxHandleEditor
+ use manual focus highlighting on editing-area
2021-09-15 13:33:17 +02:00

114 lines
1.9 KiB
SCSS

/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use 'base';
@use 'scrollbar';
@use 'button-mixins';
.nightMode {
@include scrollbar.night-mode;
}
#fields {
display: flex;
overflow-x: hidden;
flex-direction: column;
margin: 3px 0;
}
.editor-field {
margin: 3px;
border-radius: 5px;
border: 1px solid var(--border-color);
--border-color: var(--border);
&:focus-within {
box-shadow: 0 0 0 3px var(--focus-shadow);
--border-color: var(--focus-border);
}
}
.editorfield {
margin: 0 2px;
}
/* editing-area */
.field {
position: relative;
background: var(--frame-bg);
border-radius: 0 0 5px 5px;
&.dupe {
// this works around the background colour persisting in copy+paste
// (https://github.com/ankitects/anki/pull/1278)
background-image: linear-gradient(var(--flag1-bg), var(--flag1-bg));
}
&:focus-within {
outline: 2px solid button-mixins.$focus-color;
}
&:focus {
outline: none;
}
}
.fname {
border-width: 0 0 1px;
border-style: dashed;
border-color: var(--border-color);
border-radius: 5px 5px 0 0;
padding: 0px 6px;
}
.fieldname {
user-select: none;
}
#dupes,
#cloze-hint {
position: sticky;
bottom: 0;
text-align: center;
background-color: var(--window-bg);
&.is-inactive {
display: none;
}
a {
color: var(--link);
}
}
.icon > svg {
fill: var(--text-fg);
}
.pin-icon {
cursor: pointer;
&.is-inactive {
opacity: 0.2;
}
&.icon--hover {
opacity: 0.5;
}
}
@import "codemirror/lib/codemirror";
@import "codemirror/theme/monokai";
@import "codemirror/addon/fold/foldgutter";
.CodeMirror {
height: auto;
border-radius: 0 0 5px 5px;
padding: 6px 0;
}