keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

dropped support for browsers without css variables

This commit is contained in:
antelle 2019-09-08 09:31:25 +02:00
parent 82f841fdf9
commit 2181c9aa91
26 changed files with 263 additions and 545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/styles/areas/_app.scss
View File

@ -134,17 +134,13 @@
&__footer {
flex: 0 0 auto;
@include th {
border-top: light-border();
}
border-top: light-border();
}
&__beta {
padding: $base-padding;
text-align: center;
@include th {
background-color: th(error-color);
color: th(text-contrast-error-color);
}
background-color: var(--error-color);
color: var(--text-contrast-error-color);
}
}

4
app/styles/areas/_auto-type.scss
View File

@ -1,9 +1,7 @@
.at-select {
@include position(absolute, 0 null null 0);
@include size(100%);
@include th {
background-color: th(background-color);
}
background-color: var(--background-color);
display: flex;
flex-direction: column;
align-items: stretch;

116
app/styles/areas/_details.scss
View File

@ -43,9 +43,7 @@
top: -2px;
&:hover {
transition: border-color $base-duration $base-timing;
@include th {
border: 1px solid th(light-border-color);
}
border: 1px solid var(--light-border-color);
@include mobile {
border-color: transparent;
}
@ -90,10 +88,8 @@
position: absolute;
z-index: $z-index-no-modal;
border-radius: $base-border-radius;
@include th {
background: th(background-color);
box-shadow: 0 0 3px th(background-color);
}
background: var(--background-color);
box-shadow: 0 0 3px var(--background-color);
top: 13px;
left: 6px;
font-size: $large-header-font-size;
@ -186,9 +182,7 @@
margin-bottom: 0.5em;
&-label {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
width: 7em;
text-align: right;
cursor: pointer;
@ -197,9 +191,7 @@
line-height: $details-field-line-height;
position: relative;
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
.details__field--can-edit-title & {
cursor: text;
@ -210,9 +202,7 @@
line-height: $details-field-line-height;
height: $details-field-line-height;
width: 100%;
@include th {
color: th(text-color);
}
color: var(--text-color);
.chrome & {
padding-bottom: 1px;
} // TODO: find a better cross-browser way to do it
@ -241,14 +231,10 @@
@include nomobile {
transition: border-color $base-duration $base-timing;
border: 1px solid;
@include th {
border-color: th(light-border-color);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
}
border-color: var(--light-border-color);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
.details__field-value-add-label {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
transition: color $base-duration $base-timing;
}
}
@ -286,15 +272,11 @@
border-color $slow-transition-in;
}
.details__field--edit[active-mobile-action='apply'] & {
@include th {
background: th(action-color);
}
background: var(--action-color);
}
.details__field--edit[active-mobile-action='cancel'] & {
@include th {
background: th(error-color);
border-color: th(error-color);
}
background: var(--error-color);
border-color: var(--error-color);
}
@include mobile {
border-color: transparent !important;
@ -322,13 +304,9 @@
text-overflow: ellipsis;
}
.details__body-aside & {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
a {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
width: 13em;
padding-right: 0;
@ -337,14 +315,10 @@
}
&-btn {
@include position(absolute, 0 0 null null);
@include th {
color: th(muted-color);
}
color: var(--muted-color);
cursor: pointer;
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
&:before {
@include position(absolute, 0 0 null null);
@ -377,9 +351,7 @@
&:before {
padding: 0.2em 1.5em;
}
@include th {
background: th(background-color);
}
background: var(--background-color);
}
&-btn-apply {
&:before {
@ -416,9 +388,7 @@
}
@include mobile {
@include th {
border-bottom: light-border();
}
border-bottom: light-border();
padding-bottom: 0.5em;
}
}
@ -443,9 +413,7 @@
@include area-selectable();
align-self: flex-end;
flex: 0 1 auto;
@include th {
border: light-border();
}
border: light-border();
margin-right: $small-spacing;
padding: $base-padding;
text-align: center;
@ -455,9 +423,7 @@
margin-right: 0.4em;
}
&--active {
@include th {
border-bottom: 1px solid th(action-color);
}
border-bottom: 1px solid var(--action-color);
}
}
@ -465,9 +431,7 @@
user-select: none;
align-self: flex-end;
flex: 0 0 auto;
@include th {
color: th(muted-color);
}
color: var(--muted-color);
border: 1px solid transparent;
margin-right: $small-spacing;
padding: $base-padding;
@ -475,9 +439,7 @@
overflow: hidden;
transition: color $base-duration $base-timing;
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
&-title {
display: none;
@ -487,9 +449,7 @@
.details__attachment-add:hover & {
display: inline;
transition: color $slow-transition-in;
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
}
}
@ -559,9 +519,7 @@
}
&-trash-del {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
button ~ button {
@ -597,9 +555,7 @@
width: 100%;
position: absolute;
top: 9px;
@include th {
border-bottom: light-border();
}
border-bottom: light-border();
}
&-item {
position: absolute;
@ -607,17 +563,13 @@
cursor: pointer;
transform: translateX(-48%);
&:hover {
@include th {
color: th(text-semi-muted-color);
}
color: var(--text-semi-muted-color);
}
&--active,
&--active:hover {
z-index: $z-index-no-modal;
cursor: default;
@include th {
color: th(action-color);
}
color: var(--action-color);
}
}
&-label {
@ -625,9 +577,7 @@
top: 16px;
white-space: nowrap;
transform: translateX(-50%);
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
}
&-arrow-prev,
@ -639,9 +589,7 @@
top: 30px;
font-size: 14px;
&:hover {
@include th {
color: th(text-semi-muted-color);
}
color: var(--text-semi-muted-color);
}
}
&-arrow-prev {
@ -694,10 +642,8 @@
word-break: break-all;
@include area-selectable(bottom);
&--selected {
@include th {
background-color: th(secondary-background-color);
border-bottom: selected-hover-border();
}
background-color: var(--secondary-background-color);
border-bottom: selected-hover-border();
}
}
}

24
app/styles/areas/_footer.scss
View File

@ -4,9 +4,7 @@
flex-direction: row;
justify-content: flex-start;
@include mobile {
@include th {
background: th(intermediate-background-color);
}
background: var(--intermediate-background-color);
}
&__db {
@ -19,11 +17,9 @@
overflow: hidden;
text-overflow: ellipsis;
&.footer__db--dimmed {
@include th {
color: th(muted-color);
&:hover {
color: th(medium-color);
}
color: var(--muted-color);
&:hover {
color: var(--medium-color);
}
}
@ -44,13 +40,9 @@
position: absolute;
right: 1em;
top: 1em;
@include th {
color: th(action-color);
}
color: var(--action-color);
&--error {
@include th {
color: th(error-color);
}
color: var(--error-color);
}
}
@ -84,9 +76,7 @@
}
&__update-icon {
@include th {
color: th(action-color);
}
color: var(--action-color);
@include animation(shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s infinite);
}
}

4
app/styles/areas/_generator-presets.scss
View File

@ -22,9 +22,7 @@
&__sample {
font-weight: normal;
user-select: text;
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
&__example {

8
app/styles/areas/_generator.scss
View File

@ -13,11 +13,9 @@
& ~ .gen__top-btn {
margin-right: 0.5em;
}
@include th {
color: th(muted-color);
&:hover {
color: th(text-color);
}
color: var(--muted-color);
&:hover {
color: var(--text-color);
}
}
&__sel-tpl {

8
app/styles/areas/_key-change.scss
View File

@ -35,13 +35,9 @@
margin: $small-spacing 0 0;
}
&__keyfile {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
margin-top: $base-padding-v;
cursor: pointer;

20
app/styles/areas/_list.scss
View File

@ -54,23 +54,17 @@
border-radius: 0.6em !important;
border: none !important;
padding-left: 0.4em;
@include th {
background-color: th(secondary-background-color) !important;
}
background-color: var(--secondary-background-color) !important;
}
}
&-icon-search {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
position: absolute;
top: 0.5em;
right: 0.5em;
cursor: pointer;
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
@include mobile {
top: 0.5em;
@ -146,9 +140,7 @@
}
@include mobile {
margin: 0 $base-padding-h;
@include th {
border-bottom: light-border();
}
border-bottom: light-border();
&:last-of-type {
border-bottom: none;
}
@ -213,9 +205,7 @@
&-descr {
font-size: 0.8em;
@include th {
color: th(muted-color);
}
color: var(--muted-color);
display: block;
text-overflow: ellipsis;
overflow: hidden;

32
app/styles/areas/_menu.scss
View File

@ -8,9 +8,7 @@
&__section {
flex: 0 0 auto;
@include th {
border-bottom: light-border();
}
border-bottom: light-border();
@include scrollbar-on-hover;
position: relative;
overflow: hidden;
@ -78,13 +76,9 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@include th {
border-right: selected-transparent-border();
}
border-right: selected-transparent-border();
.menu__item--hover > & {
@include th {
border-right: selected-hover-border();
}
border-right: selected-hover-border();
}
.menu__item--active > &,
@ -154,9 +148,7 @@
padding-left: 0.4em;
.menu__item-colors & {
display: inline-block;
@include th {
color: th(text-color);
}
color: var(--text-color);
}
.menu__item--with-options:hover & {
display: none;
@ -172,11 +164,9 @@
top: 0.75em;
cursor: pointer;
transition: opacity $base-duration $base-timing, color $base-duration $base-timing;
@include th {
color: th(muted-color);
&:hover {
color: th(medium-color);
}
color: var(--muted-color);
&:hover {
color: var(--medium-color);
}
.menu__item--active > .menu__item-body > & {
display: block;
@ -199,16 +189,12 @@
}
&--drag-top > .menu__item-body > .menu__item-drag-top {
@include th {
background-color: th(action-color);
}
background-color: var(--action-color);
}
&--drag:not(.menu__item--drag-top) {
> .menu__item-body {
@include th {
color: th(action-color);
}
color: var(--action-color);
}
}
}

76
app/styles/areas/_open.scss
View File

@ -5,9 +5,7 @@
align-items: center;
flex-direction: column;
justify-content: center;
@include th {
background: th(background-color);
}
background: var(--background-color);
&__icons {
display: flex;
@ -27,15 +25,11 @@
margin: 20px;
transition: color $base-duration $base-timing;
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
&:focus {
.open--show-focus & {
@include th {
outline: focused-outline();
}
outline: focused-outline();
}
}
&-i,
@ -43,13 +37,9 @@
font-size: 4em;
}
&-text {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
.open__icon:hover > & {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
}
&-svg {
@ -109,9 +99,7 @@
@include mobile {
display: none;
}
@include th {
color: th(muted-color);
}
color: var(--muted-color);
> i {
font-size: 3em;
}
@ -119,18 +107,14 @@
.open--show-focus & {
&-enter-btn:focus,
&-opening-icon:focus {
@include th {
outline: focused-outline();
}
outline: focused-outline();
}
}
&-enter-btn {
.open--file & {
cursor: pointer;
&:hover {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
}
.open--opening & {
@ -210,9 +194,7 @@
cursor: pointer;
}
.open--key-file & {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
&-icon {
width: 2em;
@ -239,23 +221,17 @@
}
&:focus {
.open--show-focus & {
@include th {
outline: focused-outline();
}
outline: focused-outline();
}
}
}
&-key-file,
&-key-file-dropbox {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
&:hover {
.open--file:not(.open--opening) & {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
}
}
@ -276,15 +252,11 @@
.open:not(.open--opening) & {
@include area-selectable;
}
@include th {
color: th(muted-color);
}
color: var(--muted-color);
padding: $base-padding;
&:focus {
.open--show-focus & {
@include th {
outline: focused-outline();
}
outline: focused-outline();
}
}
&-icon {
@ -293,9 +265,7 @@
vertical-align: middle;
@include size(1em);
path {
@include th {
fill: th(muted-color);
}
fill: var(--muted-color);
}
}
}
@ -308,16 +278,12 @@
opacity: 0.3;
cursor: pointer;
}
@include th {
color: th(muted-color);
}
color: var(--muted-color);
&:hover {
.open__last-item:hover & {
opacity: 1;
}
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
}
}
@ -376,17 +342,13 @@
}
}
&:hover {
@include th {
background-color: th(action-background-color-focus-tr);
}
background-color: var(--action-background-color-focus-tr);
}
&-icon {
margin-right: 0.3em;
}
&--another {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
}
&__check-label {

18
app/styles/areas/_settings.scss
View File

@ -20,9 +20,7 @@
}
.shortcut {
@include th {
border: 1px solid th(muted-color);
}
border: 1px solid var(--muted-color);
display: inline-block;
border-radius: $base-border-radius;
width: 40px;
@ -63,10 +61,8 @@
right: $base-padding-h;
padding: $base-padding-v * 2 0 1px 0;
z-index: 1;
@include th {
background: th(background-color);
box-shadow: 0 0 5px 5px th(background-color);
}
background: var(--background-color);
box-shadow: 0 0 5px 5px var(--background-color);
&-post {
display: inline;
}
@ -140,9 +136,7 @@
}
&:hover {
transition: color $base-duration $base-timing;
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
}
@ -210,9 +204,7 @@
position: relative;
width: calc(50% - 40px);
border-radius: $base-border-radius;
@include th {
border: light-border();
}
border: light-border();
padding: $medium-padding;
box-sizing: border-box;
margin: 0 $base-padding-v $base-padding-h 0;

98
app/styles/base/_buttons.scss
View File

@ -17,58 +17,56 @@
outline: none;
min-width: 80px;
@include th {
border: 1px solid th(action-color);
background-color: th(action-color);
color: th(text-contrast-action-color);
border: 1px solid var(--action-color);
background-color: var(--action-color);
color: var(--text-contrast-action-color);
&.btn-error,
&.btn-error,
&.btn-silent {
border-color: var(--base-border-color);
background-color: transparent;
color: var(--text-color);
}
&:hover {
border-color: var(--action-background-color-focus);
background-color: var(--action-background-color-focus);
&.btn-error {
border-color: var(--error-background-color-focus);
background-color: var(--error-background-color-focus-tr);
}
&.btn-silent {
border-color: th(base-border-color);
background-color: transparent;
color: th(text-color);
border-color: var(--action-background-color-focus);
background-color: var(--action-background-color-focus-tr);
}
}
&:active {
border-color: var(--action-background-color-active);
background-color: var(--action-background-color-active);
&.btn-error {
border-color: var(--error-background-color-active);
background-color: var(--error-background-color-active-tr);
}
&.btn-silent {
border-color: var(--action-background-color-active);
background-color: var(--action-background-color-active-tr);
}
}
&:disabled {
cursor: default;
opacity: 0.5;
&:hover {
border-color: th(action-background-color-focus);
background-color: th(action-background-color-focus);
border-color: var(--action-color);
background-color: var(--action-color);
&.btn-error {
border-color: th(error-background-color-focus);
background-color: th(error-background-color-focus-tr);
border-color: var(--error-color);
background-color: transparent;
}
&.btn-silent {
border-color: th(action-background-color-focus);
background-color: th(action-background-color-focus-tr);
}
}
&:active {
border-color: th(action-background-color-active);
background-color: th(action-background-color-active);
&.btn-error {
border-color: th(error-background-color-active);
background-color: th(error-background-color-active-tr);
}
&.btn-silent {
border-color: th(action-background-color-active);
background-color: th(action-background-color-active-tr);
}
}
&:disabled {
cursor: default;
opacity: 0.5;
&:hover {
border-color: th(action-color);
background-color: th(action-color);
&.btn-error {
border-color: th(error-color);
background-color: transparent;
}
&.btn-silent {
border-color: th(action-color);
background-color: transparent;
}
border-color: var(--action-color);
background-color: transparent;
}
}
}
@ -83,9 +81,7 @@
}
@if $error {
&:hover {
@include th {
border-color: th(error-color);
}
border-color: var(--error-color);
}
}
}
@ -93,13 +89,9 @@
.svg-btn {
svg path {
transition: fill $base-duration $base-timing;
@include th {
fill: th(text-color);
}
fill: var(--text-color);
}
&:hover svg path {
@include th {
fill: th(medium-color);
}
fill: var(--medium-color);
}
}

12
app/styles/base/_colors.scss
View File

@ -24,17 +24,11 @@ $all-colors: (
}
}
.muted-color {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
.action-color {
@include th {
color: th(action-color);
}
color: var(--action-color);
}
.error-color {
@include th {
color: th(error-color);
}
color: var(--error-color);
}

138
app/styles/base/_forms.scss
View File

@ -3,10 +3,8 @@
}
fieldset {
@include th {
background-color: th(secondary-background-color);
border: base-border();
}
background-color: var(--secondary-background-color);
border: base-border();
margin: 0 0 $small-spacing;
padding: $base-spacing;
}
@ -63,41 +61,39 @@ input:not([type]) {
right: 0;
}
@include th {
color: th(text-color);
background-color: th(background-color);
border: base-border();
box-shadow: form-box-shadow();
border-radius: th(input-border-radius);
color: var(--text-color);
background-color: var(--background-color);
border: base-border();
box-shadow: form-box-shadow();
border-radius: var(--input-border-radius);
&:hover {
border-color: var(--accent-border-color);
}
&:focus {
border-color: var(--action-color);
box-shadow: form-box-shadow-focus();
outline: none;
}
&:disabled {
background-color: var(--disabled-background-color);
cursor: not-allowed;
&:hover {
border-color: th(accent-border-color);
border: base-border();
}
}
&:focus {
border-color: th(action-color);
box-shadow: form-box-shadow-focus();
outline: none;
}
&:disabled {
background-color: th(disabled-background-color);
cursor: not-allowed;
&:hover {
border: base-border();
}
}
&.input--error,
&.input--error:hover,
&.input--error:focus,
&:invalid {
border-color: th(error-color);
box-shadow: form-box-shadow-focus-error();
@include selection(true) {
background-color: th(text-selection-bg-color-error);
}
&.input--error,
&.input--error:hover,
&.input--error:focus,
&:invalid {
border-color: var(--error-color);
box-shadow: form-box-shadow-focus-error();
@include selection(true) {
background-color: var(--text-selection-bg-color-error);
}
}
@ -106,9 +102,7 @@ input:not([type]) {
}
@include placeholder {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
}
}
@ -150,25 +144,23 @@ select {
background-size: 10px;
background-repeat: no-repeat;
@include th {
background-color: th(background-color);
border: base-border();
color: th(text-color);
box-shadow: form-box-shadow();
background-color: var(--background-color);
border: base-border();
color: var(--text-color);
box-shadow: form-box-shadow();
&:hover {
border-color: var(--accent-border-color);
}
&:focus {
border-color: var(--action-color);
box-shadow: form-box-shadow-focus();
outline: none;
}
&:disabled {
background-color: var(--disabled-background-color);
cursor: not-allowed;
&:hover {
border-color: th(accent-border-color);
}
&:focus {
border-color: th(action-color);
box-shadow: form-box-shadow-focus();
outline: none;
}
&:disabled {
background-color: th(disabled-background-color);
cursor: not-allowed;
&:hover {
border: base-border();
}
border: base-border();
}
}
&::-ms-expand {
@ -177,28 +169,22 @@ select {
}
option {
@include th {
background-color: th(background-color);
color: th(text-color);
}
background-color: var(--background-color);
color: var(--text-color);
}
input[type='checkbox'] {
display: none;
&:not([disabled]) + label:hover:before {
@include th {
color: th(action-color);
}
color: var(--action-color);
}
& + label:before {
@include fa-icon;
content: $fa-var-square-o;
display: inline-block;
width: 1.3em;
@include th {
color: th(text-color);
}
color: var(--text-color);
}
&:checked + label:before {
content: $fa-var-check-square-o;
@ -217,9 +203,7 @@ input[type='range'] {
outline: none;
}
&::-webkit-slider-runnable-track {
@include th {
background: th(text-color);
}
background: var(--text-color);
width: 100%;
height: 1px;
cursor: pointer;
@ -227,9 +211,7 @@ input[type='range'] {
border: none;
}
&::-webkit-slider-thumb {
@include th {
background: th(text-color);
}
background: var(--text-color);
border: none;
height: $thumb-size;
width: $thumb-size;
@ -239,9 +221,7 @@ input[type='range'] {
margin-top: -6.5px;
}
&::-moz-range-track {
@include th {
background: th(text-color);
}
background: var(--text-color);
width: 100%;
height: 1px;
cursor: pointer;
@ -249,9 +229,7 @@ input[type='range'] {
border: none;
}
&::-moz-range-thumb {
@include th {
background: th(text-color);
}
background: var(--text-color);
border: none;
height: $thumb-size;
width: $thumb-size;
@ -278,7 +256,7 @@ input[type='range'] {
&:focus::-ms-fill-lower,
&:focus::-ms-fill-upper {
background: lightgray; // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/
//@include th { background: th(text-color); }
//background: var(--text-color);
}
&::-ms-thumb {
border: none;
@ -287,7 +265,7 @@ input[type='range'] {
border-radius: $thumb-size;
cursor: pointer;
background: lightgray; // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/
//@include th { background: th(text-color); }
//background: var(--text-color);
}
}

29
app/styles/base/_themes.scss
View File

@ -1,35 +1,8 @@
@import 'theme-vars-support';
@import 'theme-vars';
$th: null;
$th-default: null;
@function th($key) {
@if $th {
@if not map-has-key($th, $key) {
@error "Bad theme key: #{$key}";
}
@return map-get($th, $key);
}
@return var(--#{$key});
}
@mixin th {
// TODO: remove it, when we don't have to support browsers without CSS variables, replace with @content
$th: $th-default !global;
@content;
$th: null !global;
@content;
}
@each $theme-name, $theme-vars in $themes {
$theme-vars: set-theme-vars($theme-vars);
$themes: map-merge(
$themes,
(
$theme-name: $theme-vars
)
);
.th-#{$theme-name} {
@each $key, $value in $theme-vars {
@ -37,5 +10,3 @@ $th-default: null;
}
}
}
$th-default: map-get($themes, 'fb');

20
app/styles/base/_typography.scss
View File

@ -5,10 +5,8 @@ html {
body {
@include size(100%);
user-select: none;
@include th {
color: th(text-color);
background-color: th(background-color);
}
color: var(--text-color);
background-color: var(--background-color);
font-family: $base-font-family;
font-feature-settings: 'kern', 'liga 0';
font-size: 1rem;
@ -59,10 +57,8 @@ p {
}
a {
@include th {
color: th(text-color);
border-bottom: 1px dotted;
}
color: var(--text-color);
border-bottom: 1px dotted;
text-decoration: none;
display: inline-block;
transition: color $base-duration $base-timing;
@ -81,9 +77,7 @@ a {
}
hr {
@include th {
border-bottom: base-border();
}
border-bottom: base-border();
border-left: 0;
border-right: 0;
border-top: 0;
@ -102,8 +96,6 @@ img {
body:not(.edge) * {
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/
@include selection(true) {
@include th {
background-color: th(text-selection-bg-color);
}
background-color: var(--text-selection-bg-color);
}
}

16
app/styles/base/_variables.scss
View File

@ -33,25 +33,25 @@ $titlebar-padding-large: 40px;
// Borders
@function base-border() {
@return 1px solid th(base-border-color);
@return 1px solid var(--base-border-color);
}
@function light-border() {
@return 1px solid th(light-border-color);
@return 1px solid var(--light-border-color);
}
@function selected-border-width() {
@return 3px;
}
@function selected-border() {
@return selected-border-width() solid th(action-color);
@return selected-border-width() solid var(--action-color);
}
@function selected-hover-border() {
@return 1px solid th(action-color);
@return 1px solid var(--action-color);
}
@function selected-transparent-border() {
@return 1px solid transparent;
}
@function focused-outline() {
@return 1px solid th(action-color);
@return 1px solid var(--action-color);
}
// Forms
@ -59,15 +59,15 @@ $titlebar-padding-large: 40px;
@return inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
@function form-box-shadow-focus() {
@return form-box-shadow(), 0 0 th(focus-shadow-blur) th(focus-shadow-spread) th(form-box-shadow-color-focus);
@return form-box-shadow(), 0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
}
@function form-box-shadow-focus-error() {
@return form-box-shadow(), 0 0 th(focus-shadow-blur) th(focus-shadow-spread) th(form-box-shadow-color-focus-error);
@return form-box-shadow(), 0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus-error);
}
// Shadows
@function dropdown-box-shadow() {
@return 0 0 50px th(dropdown-box-shadow-color);
@return 0 0 50px var(--dropdown-box-shadow-color);
}
// Animations

52
app/styles/common/_dates.scss
View File

@ -3,10 +3,8 @@
}
.pika-label {
@include th {
background: th(background-color);
color: th(muted-color);
}
background: var(--background-color);
color: var(--muted-color);
}
button.pika-prev,
@ -28,64 +26,46 @@ button.pika-next:after {
}
button.pika-prev:after {
@include th {
@include triangle(14px 7px, th(text-color), left);
}
@include triangle(14px 7px, var(--text-color), left);
}
button.pika-next:after {
@include th {
@include triangle(14px 7px, th(text-color), right);
}
@include triangle(14px 7px, var(--text-color), right);
}
.pika-table th {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
.pika-button,
button.pika-button {
min-width: 0;
border: none;
@include th {
color: th(text-color);
background-color: th(background-color);
border-radius: $base-border-radius;
}
color: var(--text-color);
background-color: var(--background-color);
border-radius: $base-border-radius;
}
.pika-week {
@include th {
color: th(medium-color);
}
color: var(--medium-color);
}
.is-today .pika-button {
@include th {
color: th(action-color);
}
color: var(--action-color);
}
.is-selected .pika-button {
@include th {
color: th(text-color);
background: th(action-color);
box-shadow: inset 0 1px 3px th(action-color); // make darker?
}
color: var(--text-color);
background: var(--action-color);
box-shadow: inset 0 1px 3px var(--action-color); // make darker?
}
.is-disabled .pika-button {
@include th {
color: th(muted-color);
}
color: var(--muted-color);
opacity: 0.3;
}
.pika-button:hover {
@include th {
color: th(text-color) !important;
background: th(action-color) !important;
}
color: var(--text-color) !important;
background: var(--action-color) !important;
}

8
app/styles/common/_dropdown.scss
View File

@ -2,11 +2,9 @@
position: absolute;
z-index: $z-index-no-modal;
border-radius: $base-border-radius;
@include th {
background: th(background-color);
border: light-border();
box-shadow: dropdown-box-shadow();
}
background: var(--background-color);
border: light-border();
box-shadow: dropdown-box-shadow();
&__item {
padding: 8px 12px;
cursor: pointer;

4
app/styles/common/_icon-select.scss
View File

@ -9,9 +9,7 @@
padding-bottom: $base-padding-h;
&--custom {
padding-top: $base-padding-h;
@include th {
border-top: 1px solid th(light-border-color);
}
border-top: 1px solid var(--light-border-color);
}
}
&__icon {

12
app/styles/common/_modal.scss
View File

@ -1,22 +1,16 @@
.modal {
@include position(absolute, 0 null null 0);
@include size(100%);
@include th {
background-color: th(modal-background-color);
}
background-color: var(--modal-background-color);
z-index: $z-index-modal;
transition: background-color $base-duration $base-timing;
&.modal--hidden {
@include th {
background-color: th(modal-background-color-tr);
}
background-color: var(--modal-background-color-tr);
}
&.modal--opaque {
@include th {
background-color: th(background-color);
}
background-color: var(--background-color);
}
&__content {

40
app/styles/common/_tip.scss
View File

@ -43,73 +43,53 @@
&.tip--bottom:after {
@include position(absolute, -(nth($arrow-size-small, 2)) null null 50%);
@include transform(translate(-50%, 0));
@include th {
@include triangle($arrow-size-small, th(background-color), up);
}
@include triangle($arrow-size-small, var(--background-color), up);
}
&.tip--top:after {
@include position(absolute, 100% null null 50%);
@include transform(translate(-50%, 0));
@include th {
@include triangle($arrow-size-small, th(background-color), down);
}
@include triangle($arrow-size-small, var(--background-color), down);
}
&.tip--top-left:after {
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
@include transform(translate(-50%, 0));
@include th {
@include triangle($arrow-size-small, th(background-color), down);
}
@include triangle($arrow-size-small, var(--background-color), down);
}
&.tip--left:after {
@include position(absolute, 50% null null 100%);
@include transform(translate(0, -50%));
@include th {
@include triangle($arrow-size-small, th(background-color), right);
}
@include triangle($arrow-size-small, var(--background-color), right);
}
&.tip--right:after {
@include position(absolute, 50% null null (-(nth($arrow-size-small, 2))));
@include transform(translate(0, -50%));
@include th {
@include triangle($arrow-size-small, th(background-color), left);
}
@include triangle($arrow-size-small, var(--background-color), left);
}
&.tip--bottom:before {
@include position(absolute, (-(nth($arrow-size-large, 2))) null null 50%);
@include transform(translate(-50%, 0));
@include th {
@include triangle($arrow-size-large, th(light-border-color), up);
}
@include triangle($arrow-size-large, var(--light-border-color), up);
}
&.tip--top:before {
@include position(absolute, 100% null null 50%);
@include transform(translate(-50%, 0));
@include th {
@include triangle($arrow-size-large, th(light-border-color), down);
}
@include triangle($arrow-size-large, var(--light-border-color), down);
}
&.tip--top-left:before {
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
@include transform(translate(-50%, 0));
@include th {
@include triangle($arrow-size-large, th(light-border-color), down);
}
@include triangle($arrow-size-large, var(--light-border-color), down);
}
&.tip--left:before {
@include position(absolute, 50% null null 100%);
@include transform(translate(0, -50%));
@include th {
@include triangle($arrow-size-large, th(light-border-color), right);
}
@include triangle($arrow-size-large, var(--light-border-color), right);
}
&.tip--right:before {
@include position(absolute, 50% null null (-(nth($arrow-size-large, 2))));
@include transform(translate(0, -50%));
@include th {
@include triangle($arrow-size-large, th(light-border-color), left);
}
@include triangle($arrow-size-large, var(--light-border-color), left);
}
}

16
app/styles/utils/_common-dropdown.scss
View File

@ -1,12 +1,10 @@
@mixin common-dropdown {
-webkit-app-region: no-drag;
@include th {
color: th(text-color);
background: th(background-color);
border: 1px solid th(light-border-color);
box-shadow: dropdown-box-shadow();
.edge & {
border-width: 1px !important;
} // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/
}
color: var(--text-color);
background: var(--background-color);
border: 1px solid var(--light-border-color);
box-shadow: dropdown-box-shadow();
.edge & {
border-width: 1px !important;
} // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/
}

8
app/styles/utils/_drag.scss
View File

@ -8,16 +8,12 @@
position: relative;
-webkit-app-region: no-drag;
transition: background-color $slow-transition-out;
@include th {
background: th(light-border-color);
}
background: var(--light-border-color);
&:hover,
&.dragging {
@include nomobile {
transition: background-color $slow-transition-in;
@include th {
background: th(accent-border-color);
}
background: var(--accent-border-color);
}
}
}

34
app/styles/utils/_selection.scss
View File

@ -2,34 +2,28 @@
cursor: pointer;
border-radius: 0;
-webkit-app-region: no-drag;
@include th {
@if ($border) {
border-#{$border}: selected-transparent-border();
}
&:hover,
&.sel--active {
background-color: var(--intermediate-background-color);
color: var(--medium-color);
@if ($border) {
border-#{$border}: selected-transparent-border();
}
&:hover,
&.sel--active {
background-color: th(intermediate-background-color);
color: th(medium-color);
@if ($border) {
border-#{$border}: selected-hover-border();
}
}
&:active {
background-color: th(intermediate-pressed-background-color);
border-#{$border}: selected-hover-border();
}
}
&:active {
background-color: var(--intermediate-pressed-background-color);
}
}
@mixin area-selected($border) {
cursor: default;
-webkit-app-region: no-drag;
@include th {
border-#{$border}: selected-border();
background-color: th(secondary-background-color);
}
border-#{$border}: selected-border();
background-color: var(--secondary-background-color);
&:hover {
@include th {
color: th(text-color);
}
color: var(--text-color);
}
}

1
release-notes.md
View File

@ -8,6 +8,7 @@ Release notes
`-` fix #1129: webdav storage error on Unicode filenames
`*` donation link changed
`-` fixed field editing styles
`*` dropped support for browsers without css variables
##### v1.9.3 (2019-09-07)
`-` fixed group settings not being displayed