Compare commits

...

2 Commits

Author SHA1 Message Date
Jan-Christoph Borchardt 19c8bf5a65
Change instances of --color-text-lighter to -maxcontrast, -light to -main-text
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
2020-05-12 20:14:57 +02:00
Jan-Christoph Borchardt f73d207441
Simplify text variables from 4 to 2, map -lighter to -maxcontrast
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
2020-05-12 16:30:12 +02:00
37 changed files with 70 additions and 77 deletions

View File

@ -791,7 +791,7 @@ table.dragshadow td.size {
.notCreatable {
padding-left: 12px;
padding-top: 12px;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
#quota {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1577,7 +1577,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
> form {
grid-row: 1;
display: inline-flex;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
flex-grow: 1;
> input:not(:focus):not(:active) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3308,7 +3308,7 @@ module.exports = exports;
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, "#editor-container[data-v-782c4aaa] {\n display: block;\n width: 100%;\n max-width: 100%;\n height: 100%;\n left: 0;\n margin: 0 auto;\n position: relative;\n background-color: var(--color-main-background);\n}\n#editor-wrapper[data-v-782c4aaa] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: absolute;\n}\n#editor-wrapper .ProseMirror[data-v-782c4aaa] {\n margin-top: 0 !important;\n}\n#editor-wrapper.icon-loading #editor[data-v-782c4aaa] {\n opacity: 0.3;\n}\n#editor[data-v-782c4aaa], .editor[data-v-782c4aaa] {\n background: var(--color-main-background);\n color: var(--color-main-text);\n background-clip: padding-box;\n border-radius: var(--border-radius);\n padding: 0;\n position: relative;\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n}\n.msg.icon-error[data-v-782c4aaa] {\n padding: 12px;\n border-bottom: 1px solid var(--color-border);\n padding-left: 30px;\n background-position: 8px center;\n}\n.save-status[data-v-782c4aaa] {\n padding: 9px;\n text-overflow: ellipsis;\n color: var(--color-text-lighter);\n}\n.save-status.error[data-v-782c4aaa] {\n background-color: var(--color-error);\n color: var(--color-main-background);\n border-radius: 3px;\n}\n#editor-container #editor-wrapper.has-conflicts[data-v-782c4aaa] {\n height: calc(100% - 50px);\n}\n#editor-container #editor-wrapper.has-conflicts #editor[data-v-782c4aaa], #editor-container #editor-wrapper.has-conflicts #read-only-editor[data-v-782c4aaa] {\n width: 50%;\n height: 100%;\n}\n#editor-session-list[data-v-782c4aaa] {\n padding: 4px 16px 4px 4px;\n display: flex;\n}\n#editor-session-list input[data-v-782c4aaa], #editor-session-list div[data-v-782c4aaa] {\n vertical-align: middle;\n margin-left: 3px;\n}\n.editor__content[data-v-782c4aaa] {\n max-width: 670px;\n margin: auto;\n position: relative;\n}\n#body-public[data-v-782c4aaa] {\n height: auto;\n}\n#files-public-content[data-v-782c4aaa] {\n height: auto;\n}\n#files-public-content #editor-wrapper[data-v-782c4aaa] {\n position: relative;\n}\n#files-public-content #editor-container[data-v-782c4aaa] {\n top: 0;\n width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] .menubar {\n position: fixed;\n top: 50px;\n width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] {\n padding-top: 50px;\n overflow: auto;\n}\n#files-public-content #editor-container .has-conflicts #editor[data-v-782c4aaa] {\n padding-top: 0px;\n}\n.ie #editor[data-v-782c4aaa] .menubar {\n position: fixed;\n top: 50px;\n width: 100%;\n}\n.ie .editor__content[data-v-782c4aaa] .ProseMirror {\n padding-top: 50px;\n}\n", ""]);
exports.push([module.i, "#editor-container[data-v-782c4aaa] {\n display: block;\n width: 100%;\n max-width: 100%;\n height: 100%;\n left: 0;\n margin: 0 auto;\n position: relative;\n background-color: var(--color-main-background);\n}\n#editor-wrapper[data-v-782c4aaa] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: absolute;\n}\n#editor-wrapper .ProseMirror[data-v-782c4aaa] {\n margin-top: 0 !important;\n}\n#editor-wrapper.icon-loading #editor[data-v-782c4aaa] {\n opacity: 0.3;\n}\n#editor[data-v-782c4aaa], .editor[data-v-782c4aaa] {\n background: var(--color-main-background);\n color: var(--color-main-text);\n background-clip: padding-box;\n border-radius: var(--border-radius);\n padding: 0;\n position: relative;\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n}\n.msg.icon-error[data-v-782c4aaa] {\n padding: 12px;\n border-bottom: 1px solid var(--color-border);\n padding-left: 30px;\n background-position: 8px center;\n}\n.save-status[data-v-782c4aaa] {\n padding: 9px;\n text-overflow: ellipsis;\n color: var(--color-text-maxcontrast);\n}\n.save-status.error[data-v-782c4aaa] {\n background-color: var(--color-error);\n color: var(--color-main-background);\n border-radius: 3px;\n}\n#editor-container #editor-wrapper.has-conflicts[data-v-782c4aaa] {\n height: calc(100% - 50px);\n}\n#editor-container #editor-wrapper.has-conflicts #editor[data-v-782c4aaa], #editor-container #editor-wrapper.has-conflicts #read-only-editor[data-v-782c4aaa] {\n width: 50%;\n height: 100%;\n}\n#editor-session-list[data-v-782c4aaa] {\n padding: 4px 16px 4px 4px;\n display: flex;\n}\n#editor-session-list input[data-v-782c4aaa], #editor-session-list div[data-v-782c4aaa] {\n vertical-align: middle;\n margin-left: 3px;\n}\n.editor__content[data-v-782c4aaa] {\n max-width: 670px;\n margin: auto;\n position: relative;\n}\n#body-public[data-v-782c4aaa] {\n height: auto;\n}\n#files-public-content[data-v-782c4aaa] {\n height: auto;\n}\n#files-public-content #editor-wrapper[data-v-782c4aaa] {\n position: relative;\n}\n#files-public-content #editor-container[data-v-782c4aaa] {\n top: 0;\n width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] .menubar {\n position: fixed;\n top: 50px;\n width: 100%;\n}\n#files-public-content #editor-container #editor[data-v-782c4aaa] {\n padding-top: 50px;\n overflow: auto;\n}\n#files-public-content #editor-container .has-conflicts #editor[data-v-782c4aaa] {\n padding-top: 0px;\n}\n.ie #editor[data-v-782c4aaa] .menubar {\n position: fixed;\n top: 50px;\n width: 100%;\n}\n.ie .editor__content[data-v-782c4aaa] .ProseMirror {\n padding-top: 50px;\n}\n", ""]);
// Exports
module.exports = exports;
@ -3380,7 +3380,7 @@ module.exports = exports;
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, ".image[data-v-38673bf4] {\n margin: 0;\n padding: 0;\n}\n.image__caption[data-v-38673bf4] {\n text-align: center;\n color: var(--color-text-lighter);\n}\n.image__caption input[type='text'][data-v-38673bf4] {\n width: 100%;\n border: none;\n text-align: center;\n}\n.icon-image[data-v-38673bf4] {\n margin-top: 10px;\n height: 32px;\n padding: 20px;\n background-size: contain;\n}\n.image__loading[data-v-38673bf4] {\n height: 100px;\n}\n.image__placeholder .image__main[data-v-38673bf4] {\n background-color: var(--color-background-dark);\n text-align: center;\n padding: 20px;\n border-radius: var(--border-radius);\n}\n.image__placeholder .image__main .icon-image[data-v-38673bf4] {\n opacity: 0.7;\n}\n.fade-enter-active[data-v-38673bf4] {\n transition: opacity .3s ease-in-out;\n}\n.fade-enter-to[data-v-38673bf4] {\n opacity: 1;\n}\n.fade-enter[data-v-38673bf4] {\n opacity: 0;\n}\n", ""]);
exports.push([module.i, ".image[data-v-38673bf4] {\n margin: 0;\n padding: 0;\n}\n.image__caption[data-v-38673bf4] {\n text-align: center;\n color: var(--color-text-maxcontrast);\n}\n.image__caption input[type='text'][data-v-38673bf4] {\n width: 100%;\n border: none;\n text-align: center;\n}\n.icon-image[data-v-38673bf4] {\n margin-top: 10px;\n height: 32px;\n padding: 20px;\n background-size: contain;\n}\n.image__loading[data-v-38673bf4] {\n height: 100px;\n}\n.image__placeholder .image__main[data-v-38673bf4] {\n background-color: var(--color-background-dark);\n text-align: center;\n padding: 20px;\n border-radius: var(--border-radius);\n}\n.image__placeholder .image__main .icon-image[data-v-38673bf4] {\n opacity: 0.7;\n}\n.fade-enter-active[data-v-38673bf4] {\n transition: opacity .3s ease-in-out;\n}\n.fade-enter-to[data-v-38673bf4] {\n opacity: 1;\n}\n.fade-enter[data-v-38673bf4] {\n opacity: 0;\n}\n", ""]);
// Exports
module.exports = exports;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -285,7 +285,7 @@ export default {
}
}
&.token-name .wiping-warning {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
&.more {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
cursor: pointer;
padding: 13px 0;
display: flex;
color: var(--color-text-light);
color: var(--color-main-text);
position: relative;
margin-top: -20px;
}

View File

@ -257,7 +257,7 @@ input.primary,
&.primary:not(:disabled) {
background-color: var(--color-background-dark);
color: var(--color-main-text);
border-color: var(--color-text-lighter);
border-color: var(--color-text-maxcontrast);
&:hover, &:focus, &:active {
background-color: var(--color-background-darker);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -23,13 +23,12 @@ h2 {
font-size: 20px;
margin-bottom: 12px;
line-height: 30px;
color: var(--color-text-light);
}
h3 {
font-weight: bold;
font-size: 16px;
margin: 12px 0;
color: var(--color-text-light);
}
h4 {
@ -39,7 +38,7 @@ h4 {
/* do not use italic typeface style, instead lighter color */
em {
font-style: normal;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
dl {
@ -688,7 +687,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
.info-text {
padding: 5px 0 7px 22px;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
input {
&[type='checkbox'],
@ -794,7 +793,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
margin-bottom: 1px;
padding: 5px;
@ -823,7 +822,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
}
a {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
margin-bottom: 1px;
overflow: hidden;
text-overflow: ellipsis;
@ -836,7 +835,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
&:focus {
margin-bottom: 0px;
color: var(--color-main-text);
border-bottom: 1px solid var(--color-text-lighter);
border-bottom: 1px solid var(--color-text-maxcontrast);
}
}
}

View File

@ -23,8 +23,8 @@
--color-success: $color-success;
--color-text-maxcontrast: $color-text-maxcontrast;
--color-text-light: $color-text-light;
--color-text-lighter: $color-text-lighter;
--color-text-light: $color-main-text;
--color-text-lighter: $color-text-maxcontrast;
--image-logo: $image-logo;
--image-login-background: $image-login-background;

View File

@ -34,12 +34,6 @@ div[contenteditable=false] {
box-sizing: border-box;
}
/**
* color-text-lighter normal state
* color-text-lighter active state
* color-text-maxcontrast disabled state
*/
/* Default global values */
div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
select,
@ -68,7 +62,7 @@ div[contenteditable=true],
&:active {
outline: none;
background-color: var(--color-main-background);
color: var(--color-text-light);
color: var(--color-main-text);
}
}
&:disabled {
@ -122,13 +116,13 @@ div[contenteditable=false] {
padding: 7px 6px;
font-size: 13px;
background-color: var(--color-main-background);
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
border: 1px solid var(--color-background-darker);
outline: none;
border-radius: var(--border-radius);
background-color: var(--color-background-dark);
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
cursor: default;
opacity: 0.5;
}
@ -243,7 +237,7 @@ textarea, div[contenteditable=true] {
}
div[contenteditable=false] {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
font-family: inherit;
height: auto;
}
@ -489,7 +483,7 @@ div.select2-drop {
padding: 12px;
background-color: transparent;
cursor: pointer;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
.select2-result {
&.select2-selected {
@ -516,7 +510,7 @@ div.select2-container-multi {
white-space: nowrap;
text-overflow: ellipsis;
background: var(--color-main-background);
color: var(--color-text-lighter) !important;
color: var(--color-text-maxcontrast) !important;
box-sizing: content-box;
border-radius: var(--border-radius);
border: 1px solid var(--color-border-dark);
@ -532,7 +526,7 @@ div.select2-container-multi {
& {
background-image: none;
background-color: var(--color-main-background);
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
border: 1px solid var(--color-border-dark);
}
.select2-search-choice-close {
@ -561,7 +555,7 @@ div.select2-container {
white-space: nowrap;
text-overflow: ellipsis;
background: var(--color-main-background);
color: var(--color-text-lighter) !important;
color: var(--color-text-maxcontrast) !important;
box-sizing: content-box;
border-radius: var(--border-radius);
border: 1px solid var(--color-border-dark);
@ -616,7 +610,7 @@ div.select2-container {
padding-left: 5px;
background-image: none;
background-color: var(--color-main-background);
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
@ -633,7 +627,7 @@ div.select2-container {
display: list-item;
background-color: transparent;
cursor: pointer;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
a {
white-space: nowrap;
overflow: hidden;
@ -735,7 +729,7 @@ div.select2-container {
line-height: 20px;
padding: 1px 5px;
background-image: none;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
@ -777,7 +771,7 @@ div.select2-container {
.multiselect__limit {
flex: 0 0 auto;
line-height: 20px;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
display: inline-flex;
align-items: center;
opacity: .7;
@ -839,7 +833,7 @@ div.select2-container {
display: inline-flex;
align-items: center;
background-color: transparent !important;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
width: 100%;
/* selected checkmark icon */
&::before {

View File

@ -76,9 +76,9 @@ $footer-height: 65px;
flex-direction: column;
p {
text-align: center;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
a {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
font-weight: bold;
white-space: nowrap;
/* increasing clickability to more than the text height */

View File

@ -111,7 +111,7 @@ body {
.two-factor-link {
display: inline-block;
padding: 12px;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
.float-spinner {
@ -355,7 +355,7 @@ body {
color: var(--color-primary-text) !important;
font-weight: bold !important;
&.button {
color: var(--color-text-lighter) !important;
color: var(--color-text-maxcontrast) !important;
display: inline-block;
text-align: center;
}
@ -579,7 +579,7 @@ code {
.ui-datepicker-calendar {
th {
font-weight: normal;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
opacity: .8;
width: 26px;
padding: 2px;
@ -602,7 +602,7 @@ code {
&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
.ui-priority-secondary:not(.ui-state-hover) {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
opacity: .8;
}
}
@ -651,7 +651,7 @@ code {
.ui-timepicker-table {
th {
font-weight: normal;
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
opacity: .8;
&.periods {
padding: 0;
@ -673,7 +673,7 @@ code {
}
&.ui-timepicker-minutes:not(.ui-state-hover) {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
&.ui-timepicker-hours {

View File

@ -61,8 +61,8 @@ $color-yellow: #FC0;
// min. color contrast for normal text on white background according to WCAG AA
// (Works as well: color: #000; opacity: 0.57;)
$color-text-maxcontrast: nc-lighten($color-main-text, 33%) !default;
$color-text-light: nc-lighten($color-main-text, 15%) !default;
$color-text-lighter: nc-lighten($color-main-text, 30%) !default;
$color-text-light: $color-main-text !default;
$color-text-lighter: $color-text-maxcontrast !default;
$image-logo: url('../img/logo/logo.svg?v=1') !default;
$image-login-background: url('../img/background.png?v=2') !default;

View File

@ -70,13 +70,13 @@
.ui-widget-header .ui-state-highlight {
border: 1px solid var(--color-main-background);
background: var(--color-main-background) none;
color: var(--color-text-light);
color: var(--color-main-text);
font-weight: 600;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
}
.ui-state-error,
.ui-widget-content .ui-state-error,
@ -183,7 +183,7 @@
}
.ui-menu-item a {
color: var(--color-text-lighter);
color: var(--color-text-maxcontrast);
display: block;
padding: 4px 4px 4px 14px;

View File

@ -1,6 +1,6 @@
.oc-dialog {
background: var(--color-main-background);
color: var(--color-text-light);
color: var(--color-main-text);
border-radius: var(--border-radius-large);
box-shadow: 0 0 30px var(--color-box-shadow);
padding: 15px;