anki/sass/base.scss
Matthias Metelka 2a510fe230
Set same font size for all platforms and make editor UI a bit smaller (#2171)
* Use single base font size for all platforms

* Change 1.6em values to 1.5em in editor
2022-11-02 21:33:35 +10:00

120 lines
2.0 KiB
SCSS

@use "vars" as *;
@use "root-vars";
@use "scrollbar";
@use "button-mixins" as button;
$body-color: color(fg);
$body-bg: color(canvas);
$link-hover-color: color(fg-link);
$link-hover-decoration: none;
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
);
@import "bootstrap/scss/bootstrap-reboot";
@import "bootstrap/scss/bootstrap-utilities";
/* Bootstrap "extensions" */
.flex-basis-100 {
flex-basis: 100%;
}
.flex-basis-75 {
flex-basis: 75%;
}
html,
body {
height: 100%;
}
html {
overflow-x: hidden;
}
body {
--base-font-size: 13px;
overscroll-behavior: none;
&:not(.isMac),
&:not(.isMac) * {
@include scrollbar.custom;
}
}
button {
/* override transition for instant hover response */
transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
border-radius: prop(border-radius);
@include button.base;
}
pre,
code,
kbd,
samp {
unicode-bidi: normal !important;
}
[dir="rtl"] {
.form-select {
/* flip <select>'s arrow */
background-position: left 0.75rem center;
}
}
.form-select:focus {
outline: none;
border: 1px solid color(border-focus);
box-shadow: none !important;
}
.night-mode .form-select:disabled {
background-color: color(fg-disabled);
}
.reduced-motion * {
transition: none !important;
animation: none !important;
}
select {
@include button.background;
@include button.border-radius;
cursor: pointer;
outline: none;
&:focus,
&.focus {
border: 1px solid color(border-focus);
}
option {
background: color(canvas-elevated);
color: color(fg);
}
}
label,
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
input[type="text"] {
border-radius: prop(border-radius);
outline: none;
border: 1px solid color(border);
&:focus {
border-color: color(border-focus);
}
}