0f92664d4a
+ use manual focus highlighting on editing-area
114 lines
1.9 KiB
SCSS
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;
|
|
}
|