diff options
| author | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2023-09-21 09:51:25 +0000 |
|---|---|---|
| committer | Jan-Hendrik Willms <tleilax+studip@gmail.com> | 2023-09-21 09:51:25 +0000 |
| commit | 6ca4936ef960ecb116e5dc3c19d76abbd45fdbe9 (patch) | |
| tree | 55e372331f5cc5c3b452c2420c9916b43a104ee6 /resources | |
| parent | 6e9d6257806b232083fffd42c6b6779a02066bf0 (diff) | |
convert color variables to css variables, fixes #2125
Closes #2125
Merge request studip/studip!1634
Diffstat (limited to 'resources')
100 files changed, 1169 insertions, 1222 deletions
diff --git a/resources/assets/stylesheets/fullcalendar.scss b/resources/assets/stylesheets/fullcalendar.scss index f5b21f1..a879e8f 100644 --- a/resources/assets/stylesheets/fullcalendar.scss +++ b/resources/assets/stylesheets/fullcalendar.scss @@ -35,8 +35,8 @@ a.fc-event, td.fc-event { .fc button.fc-button.fc-state-active { box-shadow: none; - background-color: $base-color !important; - color: $white; + background-color: var(--base-color) !important; + color: var(--white); } /* adjust height: */ @@ -48,7 +48,7 @@ a.fc-event, td.fc-event { .studip-fullcalendar-header { /* This shall look like a table caption. */ background-color: transparent; - color: $base-gray; + color: var(--base-gray); font-size: 1.4em; text-align: left; @@ -75,15 +75,15 @@ a.fc-event, td.fc-event { .fullcalendar-dialogwidget-widget { - background: $white; - border: 1px solid $content-color-40; + background: var(--white); + border: 1px solid var(--content-color-40); margin: 15px 0px 0; } .fullcalendar-dialogwidget-widget-header { @include clearfix(); - background: $content-color-20; - color: $base-color; + background: var(--content-color-20); + color: var(--base-color); font-weight: bold; padding: 4px; } @@ -94,7 +94,7 @@ a.fc-event, td.fc-event { } .fullcalendar-dialogwidget-widget-content { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); padding: 4px; transition: all 0.5s; } @@ -108,8 +108,8 @@ a.fc-event, td.fc-event { td.fc-event { border-radius: 0; margin: 2px 0px; - background-color: $content-color; - border: 1px solid $brand-color-light; + background-color: var(--content-color); + border: 1px solid var(--brand-color-light); } } @@ -119,14 +119,14 @@ a.fc-event, td.fc-event { } th.fc-day-header, .fc-axis, th.fc-resource-cell { - background-color: $content-color-10; + background-color: var(--content-color-10); } } .calendar-caption { background-color: transparent; padding-top: 0; - color: $base-gray; + color: var(--base-gray); font-size: 1.4em; text-align: left; margin-bottom: -10px; @@ -200,7 +200,7 @@ a.fc-event, td.fc-event { display: none; } th span a { - color: $black; + color: var(--black); } td.fc-today { diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss index 5f88cf2..f771619 100644 --- a/resources/assets/stylesheets/highcontrast.scss +++ b/resources/assets/stylesheets/highcontrast.scss @@ -1049,8 +1049,8 @@ a:hover.tree { /* Text formatting */ .cke_button_on { - background-color: $base-color !important; - border: 1px solid $white; + background-color: var(--base-color) !important; + border: 1px solid var(--white); .cke_button_icon { filter: brightness(10) !important; @@ -1060,8 +1060,8 @@ a:hover.tree { /* Blubber */ .blubber_thread, .blubber_sideinfo { - background-color: $white; - border: 2px solid $black; + background-color: var(--white); + border: 2px solid var(--black); } .blubber_thread .empty_blubber_background { @@ -1214,14 +1214,14 @@ table.course-search { padding-top: -2px; .content-item-title { - color: $base-color; + color: var(--base-color); } } } &:hover { - background-color: $black; + background-color: var(--black); color: unset; .content-item-img-wrapper > img { @@ -1370,12 +1370,12 @@ table.course-search { /* Everything else */ /* Selections */ .select2-container--default .select2-results__option--highlighted[aria-selected] { - background-color: $base-color; + background-color: var(--base-color); } /* tile view Veranstaltungen */ .tiles-grid-element-header { - background-color: $white !important; + background-color: var(--white) !important; } .tiles-grid-element-options .action-menu-icon { @@ -1384,12 +1384,12 @@ table.course-search { /* Veranstaltungskategorien */ fieldset.attribute_table div[container] > div.droparea > div.plugin { - border: 1px solid $black; - background-color: $white; + border: 1px solid var(--black); + background-color: var(--white); } .helpbar { - background-color: $black; + background-color: var(--black); } .fc-unthemed td { diff --git a/resources/assets/stylesheets/less/buttons.less b/resources/assets/stylesheets/less/buttons.less index d11ac0d..688682e 100644 --- a/resources/assets/stylesheets/less/buttons.less +++ b/resources/assets/stylesheets/less/buttons.less @@ -1,10 +1,10 @@ /* Stud.IP button styles */ .button() { background: white; - border: 1px solid @base-color; + border: 1px solid var(--base-color); border-radius: 0; box-sizing: border-box; - color: @base-color; + color: var(--base-color); cursor: pointer; display: inline-block; font-family: @font-family-base; @@ -22,18 +22,18 @@ width: auto; &:hover, &:active { - background: @base-color; + background: var(--base-color); color: white; } &.disabled, &[disabled] { box-shadow: none; - background: @light-gray-color-20; + background: var(--light-gray-color-20); cursor: default; opacity: 0.65; &:hover { - color: @base-color; + color: var(--base-color); } } @@ -148,13 +148,13 @@ button, cursor: pointer; &[formaction] { - color: @base-color; + color: var(--base-color); transition: color 0.3s; &:hover, &:active { - color: @active-color; + color: var(--active-color); text-decoration: none; } diff --git a/resources/assets/stylesheets/less/calendar.less b/resources/assets/stylesheets/less/calendar.less index 8af7a3a..edb2e57 100644 --- a/resources/assets/stylesheets/less/calendar.less +++ b/resources/assets/stylesheets/less/calendar.less @@ -6,27 +6,27 @@ a.day { } a.sday { - color: @red; + color: var(--red); font-weight: bold; } a.hday { - color: @red-80; + color: var(--red-80); font-weight: bold; } span.kwmin { - color: @dark-gray-color-80; + color: var(--dark-gray-color-80); font-weight: bold; } a.lightday { - color: @base-color-40; + color: var(--base-color-40); font-weight: bold; } a.lightsday { - color: @red-40; + color: var(--red-40); font-weight: bold; } @@ -37,7 +37,7 @@ a.lightsday { .precol1w { font-size: 12pt; font-weight: bold; - color: @light-gray-color; + color: var(--light-gray-color); text-align: center; vertical-align: top; } @@ -45,31 +45,31 @@ a.lightsday { .precol2w { font-size: 8pt; font-weight: bold; - color: @light-gray-color; + color: var(--light-gray-color); text-align: center; } td.calhead, div.calhead { font-size: 18pt; font-weight: bold; - color: @light-gray-color; + color: var(--light-gray-color); text-align: center; } a:link.calhead { - color: @base-color-60; + color: var(--base-color-60); white-space: nowrap; font-weight: bold; } a:hover.calhead { - color: @red-60; + color: var(--red-60); } .calhead label { cursor: pointer; &:hover { - color: @base-color-40; + color: var(--base-color-40); } .media-breakpoint-small-down({ @@ -83,20 +83,20 @@ a:hover.calhead { } .celltoday { - background-color: @red-20; + background-color: var(--red-20); } td.weekend { - background-color: @dark-gray-color-15; + background-color: var(--dark-gray-color-15); } td.weekday { - background-color: @dark-gray-color-5; + background-color: var(--dark-gray-color-5); } td.current { padding: 2px; - border: 2px solid @red; + border: 2px solid var(--red); } table.calendar-week, table.calendar-day { @@ -159,7 +159,7 @@ nav.calendar-nav { } .calhead { - color: @base-color; + color: var(--base-color); } } @@ -175,7 +175,7 @@ nav.calendar-nav { } & td { padding: 3px; - border-bottom: 1px solid @dark-gray-color-5; + border-bottom: 1px solid var(--dark-gray-color-5); } } @@ -183,14 +183,14 @@ nav.calendar-nav { overflow: hidden; text-overflow: ellipsis; a { - color: @dark-gray-color; + color: var(--dark-gray-color); } } .calendar-category-mixin(@color-bg) { vertical-align: top; font-size: 11px; - color: @white; + color: var(--white); padding: 0; /* necessary for All-day Events */ a { @@ -511,8 +511,8 @@ a.Calendar-course-event-text255 { } .calendar-group-events { - background: linear-gradient(to right, #8E8EB2, #BABAD4) repeat-x #8E8EB2; - border: solid 1px #505064; + background: linear-gradient(to right, var(--base-color-60), var(--content-color-60)) repeat-x var(--base-color-60); + border: solid 1px var(--base-gray); } #exc-dates { @@ -522,7 +522,7 @@ a.Calendar-course-event-text255 { min-height: 5em; max-height: 10em; overflow: auto; - border: 1px solid #888; + border: 1px solid var(--dark-gray-color-60); img { vertical-align: text-top; @@ -539,18 +539,18 @@ table.tabdaterow { } td.tddaterowp { - border: 1px solid #FFFFFF; - background-color: #f0f0f0; + border: 1px solid var(--white); + background-color: var(--dark-gray-color-10); font-weight: bold; - color: #009900; + color: var(--dark-green); font-size: 8pt; } td.tddaterowpx { - border: 1px solid #D00000; - background-color: #f0f0f0; + border: 1px solid var(--active-color); + background-color: var(--dark-gray-color-10); font-weight: bold; - color: #009900; + color: var(--dark-green); font-size: 8pt; } diff --git a/resources/assets/stylesheets/less/files.less b/resources/assets/stylesheets/less/files.less index 0b40c0b..b604da9 100644 --- a/resources/assets/stylesheets/less/files.less +++ b/resources/assets/stylesheets/less/files.less @@ -27,7 +27,7 @@ } &.uploadbar-outer { - border: @base-color solid 1px; + border: var(--base-color) solid 1px; } &.uploadbar-inner { position: absolute; @@ -35,7 +35,7 @@ right: 100%; bottom: 0; left: 0; - background-color: @base-color; + background-color: var(--base-color); overflow: hidden; white-space: nowrap; @@ -45,9 +45,9 @@ transition: right 200ms; img { - background-color: @base-color; + background-color: var(--base-color); flex: 0; - outline: 10px solid @base-color; + outline: 10px solid var(--base-color); } .ufo { animation: ufoflight 1.5s linear infinite; @@ -69,14 +69,6 @@ color: (#fff - @base-color); font-size: large; - //text-shadow: 0 1px 0 @base-color, - // 1px 1px 0 @base-color, - // 1px 0 0 @base-color, - // 1px -1px 0 @base-color, - // 0 -1px 0 @base-color, - // -1px 1px 0 @base-color, - // 0 1px 0 @base-color, - // -1px -1px 0 @base-color; } } @@ -112,7 +104,7 @@ div.file_select_possibilities, .folder_type_select_possibilities { cursor: pointer; background-color: transparent; margin: 10px; - border: thin solid @content-color-20; + border: thin solid var(--content-color-20); padding: 10px; width: @width; min-width: @width; @@ -134,8 +126,8 @@ div.file_select_possibilities, .folder_type_select_possibilities { > .important-item { min-width: calc(100% - 1.5em); - background-color: #E7EBF1; - border-color: @base-color-60; + background-color: var(--content-color-20); + border-color: var(--base-color-60); display: flex; flex-direction: row; height: initial; @@ -149,7 +141,7 @@ div.file_select_possibilities, .folder_type_select_possibilities { width: 100%; text-align: left; margin-left: 1em; - color: @black; + color: var(--black); } } } @@ -200,8 +192,8 @@ div.file_select_possibilities, .folder_type_select_possibilities { input[name=content_terms_of_use_id]:checked + label, input[name=oer_upload]:checked + label { - background-color: @brand-color-darker; - color: @contrast-content-white; + background-color: var(--brand-color-darker); + color: var(--contrast-content-white); img { filter: invert(100%) brightness(200%); @@ -216,8 +208,8 @@ div.file_select_possibilities, .folder_type_select_possibilities { } input[name=folder_type]:checked + label { - background-color: @brand-color-darker; - color: @contrast-content-white; + background-color: var(--brand-color-darker); + color: var(--contrast-content-white); img { filter: invert(100%) brightness(200%); @@ -428,7 +420,7 @@ form.default { } > label { cursor: pointer; - border: 1px solid @content-color-40; + border: 1px solid var(--content-color-40); transition: background-color 200ms; display: flex; justify-content: space-between; @@ -449,17 +441,17 @@ form.default { } } > label:first-of-type { - border-top: 1px solid @content-color-40; + border-top: 1px solid var(--content-color-40); } > div { - border: 1px solid @content-color-40; + border: 1px solid var(--content-color-40); border-top: none; display: none; padding: 10px; } > input[type=radio]:checked + label { - background-color: @content-color-20; + background-color: var(--content-color-20); transition: background-color 200ms; > .arrow { display: none; @@ -490,7 +482,7 @@ form.default { table.documents { tr:target { - background-color: @activity-color-20; + background-color: var(--activity-color-20); } } @@ -500,7 +492,7 @@ table.documents { h2.search-result-info { font-weight: normal; font-size: 1.4em; - color: @base-gray; + color: var(--base-gray); border-bottom: none; margin-top: 0; } diff --git a/resources/assets/stylesheets/less/jquery-ui/studip.less b/resources/assets/stylesheets/less/jquery-ui/studip.less index 3285062..1bd0fbf 100644 --- a/resources/assets/stylesheets/less/jquery-ui/studip.less +++ b/resources/assets/stylesheets/less/jquery-ui/studip.less @@ -20,11 +20,11 @@ } .ui-widget-content { - background: #fff; + background: var(--white); } .ui-widget-header { - background-color: @brand-color-lighter; + background-color: var(--brand-color-lighter); background-image: none; } .ui-widget_columnl { @@ -42,7 +42,7 @@ } .ui-widget_head { - background-color: @brand-color-lighter; + background-color: var(--brand-color-lighter); color: white; font-size: 1.3em; line-height: 30px; @@ -80,7 +80,7 @@ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { - background-color: @brand-color-light; + background-color: var(--brand-color-light); color: white; } @@ -89,12 +89,12 @@ .ui-state-default, .ui-state-active, .ui-state-hover { - background: @content-color-20; + background: var(--content-color-20); border-radius: 0; border: none; - border-top: 1px solid @light-gray-color-20; - border-bottom: 1px solid @light-gray-color-20; - color: #000; + border-top: 1px solid var(--light-gray-color-20); + border-bottom: 1px solid var(--light-gray-color-20); + color: var(--black); font-size: 10pt; margin: 0; padding: 5px 5px 5px 30px; @@ -103,11 +103,11 @@ } .ui-accordion .ui-accordion-content { - background: #ffffff; + background: var(--white); margin: 0; padding: 0; border: 0; - border-bottom: 1px solid @light-gray-color-20; + border-bottom: 1px solid var(--light-gray-color-20); } .ui-state-hover, .ui-widget-content .ui-state-hover, @@ -117,7 +117,7 @@ } .ui-autocomplete { - border: 1px solid @dark-gray-color-45; + border: 1px solid var(--dark-gray-color-45); padding: 1px; .ui-menu-item { @@ -127,7 +127,7 @@ text-overflow: ellipsis; &.ui-state-active { - background: @base-color; + background: var(--base-color); border: 0; margin: 0; } @@ -146,7 +146,7 @@ /* --- textarea resizer ----------------------------------------------------- */ textarea.ui-resizable-handle.ui-resizable-s { - background: #eee url("@{image-path}/vendor/handle_background.png") no-repeat center; + background: var(--dark-gray-color-10) url("@{image-path}/vendor/handle_background.png") no-repeat center; bottom: 0; cursor: s-resize; height: 12px; @@ -154,7 +154,7 @@ textarea.ui-resizable-handle.ui-resizable-s { // Date picker .ui-datepicker-header { - background-color: @brand-color-light; + background-color: var(--brand-color-light); } .ui-datepicker-header .ui-icon { @@ -162,14 +162,14 @@ textarea.ui-resizable-handle.ui-resizable-s { } .ui-datepicker-calendar .ui-state-active { - background-color: @white; - color: @brand-color-darker; - border: 1px solid @base-gray; + background-color: var(--white); + color: var(--brand-color-darker); + border: 1px solid var(--base-gray); } .ui-datepicker-calendar .ui-state-active.ui-state-hover { - background-color: @brand-color-light; - color: @white; + background-color: var(--brand-color-light); + color: var(--white); } .hasDatepicker, @@ -181,9 +181,9 @@ textarea.ui-resizable-handle.ui-resizable-s { background-position: right 3px center; background-repeat: no-repeat; min-width: 12ex; - border: 1px solid @light-gray-color-40; + border: 1px solid var(--light-gray-color-40); &:focus { - border-color: @brand-color-dark; + border-color: var(--brand-color-dark); } } .hasTimepicker, @@ -193,9 +193,9 @@ textarea.ui-resizable-handle.ui-resizable-s { background-position: right 3px center; background-repeat: no-repeat; min-width: 10ex; - border: 1px solid @light-gray-color-40; + border: 1px solid var(--light-gray-color-40); &:focus { - border-color: @brand-color-dark; + border-color: var(--brand-color-dark); } } [data-datetime-picker], @@ -205,6 +205,6 @@ textarea.ui-resizable-handle.ui-resizable-s { .ui-slider { .ui-slider-range { - background-color: @base-color; + background-color: var(--base-color); } } diff --git a/resources/assets/stylesheets/less/messagebox.less b/resources/assets/stylesheets/less/messagebox.less index c1c2609..ce29b28 100644 --- a/resources/assets/stylesheets/less/messagebox.less +++ b/resources/assets/stylesheets/less/messagebox.less @@ -72,11 +72,11 @@ div.messagebox_details { } } -.messagebox(info, #000, white, @base-color); -.messagebox(success, #000, white, @dark-green); -.messagebox(error, #000, white, @red); -.messagebox(exception, @red, @red-20, @red); -.messagebox(warning, #000, white, @yellow-60, 'advice'); +.messagebox(info, var(--black), var(--white), var(--base-color)); +.messagebox(success, var(--black), var(--white), var(--dark-green)); +.messagebox(error, var(--black), var(--white), var(--red)); +.messagebox(exception, var(--red), var(--red-20), var(--red)); +.messagebox(warning, var(--black), var(--white), var(--yellow-60), 'advice'); // Define modal messagebox .modaloverlay { @@ -109,7 +109,7 @@ div.messagebox_details { width: auto; color: #000; - border-color: @yellow; + border-color: var(--yellow); background-color: white; background-image: url("@{image-path}/messagebox/question.png"); background-size: 32px 32px; diff --git a/resources/assets/stylesheets/less/schedule.less b/resources/assets/stylesheets/less/schedule.less index 6f57e2b..bdb9b25 100644 --- a/resources/assets/stylesheets/less/schedule.less +++ b/resources/assets/stylesheets/less/schedule.less @@ -1,10 +1,10 @@ /* --- ablaufplan / dates --------------------------------------------------- */ .dates_items th, .dates_items td { - border-bottom: 3px solid @white; + border-bottom: 3px solid var(--white); } .dates_opened td { - border-bottom: 3px solid #f3f5f8; + border-bottom: 3px solid var(--content-color-10); } .dates_content td { @@ -18,27 +18,27 @@ #schedule_headings { margin-left: 41px; - background-color: #e8eef7; + background-color: var(--content-color-20); } table.schedule_headings td { - background-color: #e8eef7; + background-color: var(--content-color-20); } div.schedule_day { - border-right: 3px double #ddd; + border-right: 3px double var(--dark-gray-color-20); position: relative; } div.schedule_marker { - border-bottom: 1px dotted #ddd; - border-top: 1px solid #ddd; + border-bottom: 1px dotted var(--dark-gray-color-20); + border-top: 1px solid var(--dark-gray-color-20); padding: 0; } div.schedule_hours { - border-top: 1px solid #ddd; - border-right: 1px solid #ddd; + border-top: 1px solid var(--dark-gray-color-20); + border-right: 1px solid var(--dark-gray-color-20); color: black; padding-bottom: 1px; padding-right: 3px; @@ -93,8 +93,8 @@ div.snatch { } #schedule_new_entry { - background-color: #e8eef7; - border: 2px solid #e0e0f0; + background-color: var(--content-color-20); + border: 2px solid var(--dark-gray-color-15); height: 230px; position: absolute; width: 400px; @@ -102,15 +102,15 @@ div.snatch { } #schedule_entry_new { dl { - border: 1px solid #5c2d64; - background-color: #7c5783; + border: 1px solid var(--dark-violet); + background-color: var(--dark-violet-80); } - dt { background-color: #5c2d64; } + dt { background-color: var(--dark-violet); } } div.schedule_edit_entry, #schedule_settings { - background-color: #E8EEF7; - border: 2px solid #E0E0F0; + background-color: var(--content-color-20); + border: 2px solid var(--dark-gray-color-15); height: auto; left: 50%; margin-left: -25%; @@ -150,7 +150,7 @@ div.invisible_entry { } span.invisible_entry { - background-color: #600; + background-color: var(--red); font-style: italic; } @@ -200,7 +200,7 @@ td.schedule-adminbind { display: none; &:checked + label { - outline: 1px solid @black; + outline: 1px solid var(--black); position: relative; .icon('before', 'accept', 'info', 24px); @@ -209,13 +209,13 @@ td.schedule-adminbind { left: 50%; top: 50%; transform: translate(-50%, -50%); - filter: drop-shadow(0 0 2px @white); + filter: drop-shadow(0 0 2px var(--white)); } } } label { - border: 1px solid @white; + border: 1px solid var(--white); display: inline-block; height: 32px; width: 32px; diff --git a/resources/assets/stylesheets/less/tables.less b/resources/assets/stylesheets/less/tables.less index eb576dd..ba5004e 100644 --- a/resources/assets/stylesheets/less/tables.less +++ b/resources/assets/stylesheets/less/tables.less @@ -1,18 +1,18 @@ /* --- Tabellen ------------------------------------------------------------- */ table.header, .table_header { //normale Tabellenheader - background-color: @table-header-color; - border-bottom: 1px solid #575757; - color: #000; + background-color: var(--table-header-color); + border-bottom: 1px solid var(--dark-gray-color-80); + color: var(--black); padding: 4px; } .table_header_bold { //formerly known as topic(-header) - background-color: @brand-color-lighter; - border-color: @brand-color-darker; + background-color: var(--brand-color-lighter); + border-color: var(--brand-color-darker); border-style: solid; border-width: 0 0 1px 0; - color: @white; + color: var(--white); font-size: 12pt; padding: 3px 5px; @@ -20,7 +20,7 @@ table.header, .table_header { //normale Tabellenheader } -table.links1 { background-color: @white; } +table.links1 { background-color: var(--white); } table.logintable { background-image: url("@{image-path}/login.jpg"); background-size: 750px 350px; @@ -33,7 +33,7 @@ table.logintable { .gradient-bar(@flow-content: true) { #gradient > .vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6); - border-top: 1px solid @brand-color-lighter; + border-top: 1px solid var(--brand-color-lighter); line-height: 17pt; height: 25px; } @@ -54,36 +54,36 @@ td.toolbar, td.printhead { } td { - &.aufklapp { background-color: #fffaee; } - &.angemeldet { border: 1px solid #000; } + &.aufklapp { background-color: var(--dark-gray-color-5); } + &.angemeldet { border: 1px solid var(--black); } &.nix { background-color: transparent; } &.quote { - border: 1px solid #000; + border: 1px solid var(--black); font-size: 8px; } &.rahmen_steel { - background-color: #f3f5f8; - border: 1px solid #000; + background-color: var(--content-color-10); + border: 1px solid var(--black); } &.rahmen_table_row_odd { - background-color: @content-color-20; - border: 1px solid #000; + background-color: var(--content-color-20); + border: 1px solid var(--black); } &.rahmen_white { - background: #fff; - border: 1px solid #000; + background: var(--white); + border: 1px solid var(--black); } &.table_header_bold_red { border: none; - background-color: #fdc6c6; - border-bottom: 1px solid #990000; - color: #000; + background-color: var(--red-20); + border-bottom: 1px solid var(--red); + color: var(--red); height: 20px; } } table.blank, td.blank, td.onlineinfo, td.blanksmall { - background-color: #fff; + background-color: var(--white); } td.tree-indent { @@ -120,13 +120,13 @@ td.tree-elbow-line, td.tree-elbow-end { } .toggle-indicator { - color: #000; + color: var(--black); font-weight: bold; a { background: left center no-repeat; .background-icon('arr_1down', 'clickable'); - color: #000; + color: var(--black); cursor: pointer; display: block; } @@ -162,15 +162,15 @@ td.tree-elbow-line, td.tree-elbow-end { } /* --- Sonstige ------------------------------------------------------------- */ -.gruppe0 { background-color: @group-color-0 !important; } -.gruppe1 { background-color: @group-color-1 !important; } -.gruppe2 { background-color: @group-color-2 !important; } -.gruppe3 { background-color: @group-color-3 !important; } -.gruppe4 { background-color: @group-color-4 !important; } -.gruppe5 { background-color: @group-color-5 !important; } -.gruppe6 { background-color: @group-color-6 !important; } -.gruppe7 { background-color: @group-color-7 !important; } -.gruppe8 { background-color: @group-color-8 !important; } +.gruppe0 { background-color: var(--group-color-0) !important; } +.gruppe1 { background-color: var(--group-color-1) !important; } +.gruppe2 { background-color: var(--group-color-2) !important; } +.gruppe3 { background-color: var(--group-color-3) !important; } +.gruppe4 { background-color: var(--group-color-4) !important; } +.gruppe5 { background-color: var(--group-color-5) !important; } +.gruppe6 { background-color: var(--group-color-6) !important; } +.gruppe7 { background-color: var(--group-color-7) !important; } +.gruppe8 { background-color: var(--group-color-8) !important; } #my_seminars, #settings-notifications { .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4, @@ -185,31 +185,31 @@ td.tree-elbow-line, td.tree-elbow-end { } } -.grey { background: #bbb none; } -.white { background: #fff none; } +.grey { background: var(--dark-gray-color-40) none; } +.white { background: var(--white) none; } .red_gradient { #gradient > .vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9); - border-top: 2px solid #b35357; + border-top: 2px solid var(--brown); } /* --- Styles fuer printhead und printcontent ------------------------------- */ table { td.printcontent { - background-color: @dark-gray-color-5; + background-color: var(--dark-gray-color-5); text-align: left; } td.printcontent:hover { - background-color: @dark-gray-color-5; + background-color: var(--dark-gray-color-5); } td.printhead2 { background-image: url("@{image-path}/content_object_arr-right.png"); - border-top: 1px solid @brand-color-lighter; + border-top: 1px solid var(--brand-color-lighter); padding: 0; } td.printhead3 { background-image: url("@{image-path}/content_object_arr-down.png"); - border-top: 1px solid @brand-color-lighter; + border-top: 1px solid var(--brand-color-lighter); padding: 0; } } @@ -279,9 +279,9 @@ tr.sortable { } td:first-child[colspan], .divider > th, .divider > td { background-color: lighten(@brand-color-lighter, 20%); - border-bottom: 1px solid #444; - border-top: 1px solid #444; - color: #000; + border-bottom: 1px solid var(--base-gray); + border-top: 1px solid var(--base-gray); + color: var(--black); font-weight: bold; text-align: center; } @@ -297,15 +297,15 @@ tr.sortable { } tfoot { td { - background: @table-footer-color; + background: var(--table-footer-color); text-align: center; } tr:first-child td { - border-top: 1px solid #575757; + border-top: 1px solid var(--dark-gray-color-80); } } label.required:after { - color: red; + color: var(--red); content:'*'; font-size: 1.5em; padding-left: 5px; @@ -317,8 +317,8 @@ tr.sortable { &:nth-child(-n+2) { text-align: left; } } .bordered { - &.left { border-left: 1px solid @brand-color-lighter; } - &.right { border-right: 1px solid @brand-color-lighter; } + &.left { border-left: 1px solid var(--brand-color-lighter); } + &.right { border-right: 1px solid var(--brand-color-lighter); } } } @@ -343,19 +343,19 @@ table.tree { } } td.blank { - background: #fff; + background: var(--white); border: 0; } td.in-between { - background: #fff url("@{image-path}/tree-line.gif") center repeat-y; + background: var(--white) url("@{image-path}/tree-line.gif") center repeat-y; border: 0; } td.leaf { - background: #fff url("@{image-path}/tree-leaf.gif") center no-repeat; + background: var(--white) url("@{image-path}/tree-leaf.gif") center no-repeat; border: 0; } td.end { - background: #fff url("@{image-path}/tree-end.gif") center no-repeat; + background: var(--white) url("@{image-path}/tree-end.gif") center no-repeat; border: 0; } .centered { @@ -365,8 +365,8 @@ table.tree { } .table_footer, .table_footer td { - background-color: #e9e9e9; - border-top: 1px solid #c8c8c8; + background-color: var(--dark-gray-color-10); + border-top: 1px solid var(--dark-gray-color-30); } // New table definition @@ -393,7 +393,7 @@ table.default { > caption { background-color: transparent; padding-top: 0px; - color: @headings-color; + color: var(--headings-color); font-size: 1.4em; text-align: left; @@ -415,26 +415,26 @@ table.default { } > thead { > tr > th { - background-color: @content-color-20; + background-color: var(--content-color-20); border-bottom: 1px solid fadeout(@brand-color-lighter, 80%); - border-top: 1px solid @brand-color-darker; + border-top: 1px solid var(--brand-color-darker); font-size: 1.0em; } } > tbody { > tr { > th { - background-color: @content-color-20; - border-top: 1px solid @brand-color-darker; + background-color: var(--content-color-20); + border-top: 1px solid var(--brand-color-darker); border-bottom: 1px solid fadeout(@brand-color-lighter, 80%); text-align: left; } > td { - border-bottom: 1px solid @table-header-color; + border-bottom: 1px solid var(--table-header-color); transition: background-color 0.3s; } &.dragover > td { - background-color: @yellow-20; + background-color: var(--yellow-20); } } } @@ -468,7 +468,7 @@ table.default { bottom: 0; left: 0; width: 2px; - background-color: @red; + background-color: var(--red); } } .action-menu { @@ -476,7 +476,7 @@ table.default { } } > tbody:last-of-type > tr:last-child > td { - border-bottom: 1px solid @brand-color-darker; + border-bottom: 1px solid var(--brand-color-darker); } // Hover effect &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) { @@ -487,8 +487,8 @@ table.default { } > tfoot { > tr > td { - background-color: @content-color-20; - border-top: 1px solid @brand-color-darker; + background-color: var(--content-color-20); + border-top: 1px solid var(--brand-color-darker); padding-left: 10px; padding-right: 10px; } @@ -506,7 +506,7 @@ table.default { } > caption .actions { font-size: @font-size-base; - border-left: 1px solid @brand-color-darker; + border-left: 1px solid var(--brand-color-darker); margin-bottom: -5px; min-height: 26px; padding-bottom: 3px; @@ -526,7 +526,7 @@ table.default { } .caption-content { flex-grow: 1; - border-right: 1px solid @brand-color-darker; + border-right: 1px solid var(--brand-color-darker); padding-bottom: 5px; padding-right: 0.5em; margin-right: 0.5em; @@ -647,7 +647,7 @@ table.withdetails { padding-bottom: 10px; > .detailscontainer { padding: 5px; - border: 1px solid @table-header-color; + border: 1px solid var(--table-header-color); margin-top: -1px; border-top-color: white; } @@ -676,9 +676,9 @@ table.withdetails { .tablesorter-header:not(.sorter-false) { white-space: nowrap; - color: @base-color; + color: var(--base-color); &:hover { - color: @active-color; + color: var(--active-color); cursor: pointer; } &.tablesorter-headerDesc:hover .tablesorter-header-inner::after { @@ -710,7 +710,7 @@ table#schedule_data { td { text-align: center; vertical-align: top; - background-color: @content-color-20; + background-color: var(--content-color-20); padding-right: 2px; padding: 0px; &:first-child { @@ -728,7 +728,7 @@ table#schedule_data { td:first-child { text-align: right; vertical-align: top; - background-color: @content-color-20; + background-color: var(--content-color-20); padding-right: 2px; padding: 0px; } @@ -745,15 +745,15 @@ table.course-search{ @max-width-s: 8em; @max-width-m: 48em; @max-width-l: 100%; - border: 1px solid @content-color-40; + border: 1px solid var(--content-color-40); padding: 0px; border-top: 0; caption.legend { box-sizing: border-box; background-color: @fieldset-header; - border: 1px solid @content-color-40; + border: 1px solid var(--content-color-40); border-bottom: 0; - color: @brand-color-dark; + color: var(--brand-color-dark); font-size: 12pt; font-weight: bold; line-height: 2em; @@ -768,7 +768,7 @@ table.show-tree { width:100%; padding: 0px 10px 10px 10px; td.b-top-va-center { - border-top: 1px solid @content-color-40; + border-top: 1px solid var(--content-color-40); padding-top: 10px; vertical-align:middle; } @@ -815,7 +815,7 @@ table.show-tree { } a:hover{ background-color: @fieldset-header !important; - color: @base-color !important; + color: var(--base-color) !important; } } diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss index 56b1317..a25beed 100644 --- a/resources/assets/stylesheets/scss/actionmenu.scss +++ b/resources/assets/stylesheets/scss/actionmenu.scss @@ -1,5 +1,5 @@ $action-menu-icon-size: 20px; -$action-menu-shadow: 1px 1px 1px $dark-gray-color-60; +$action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60); .action-menu { display: inline-block; @@ -31,8 +31,8 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60; padding: 4px 8px; - background: $white; - border: thin solid $dark-gray-color-45; + background: var(--white); + border: thin solid var(--dark-gray-color-45); box-shadow: $action-menu-shadow; font-weight: normal; text-align: left; @@ -60,7 +60,7 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60; display: block; position: absolute; - background: $base-color; + background: var(--base-color); border-radius: 50%; opacity: 1; left: 50%; @@ -107,7 +107,7 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60; > label { &, &:hover { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); cursor: default; } } @@ -135,10 +135,10 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60; > label, > button { - color: $base-color; + color: var(--base-color); cursor: pointer; &:hover { - color: $active-color; + color: var(--active-color); } } diff --git a/resources/assets/stylesheets/scss/activityfeed.scss b/resources/assets/stylesheets/scss/activityfeed.scss index e1cb6aa..507262e 100644 --- a/resources/assets/stylesheets/scss/activityfeed.scss +++ b/resources/assets/stylesheets/scss/activityfeed.scss @@ -5,14 +5,14 @@ overflow-y: auto; .activity { - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); width: 95%; margin: 30px auto; } .activity header { - color: $base-color; + color: var(--base-color); padding: 5px; display: flex; position: relative; @@ -22,10 +22,10 @@ border-radius: 50%; width: 42px; height: 42px; - background: $base-color; + background: var(--base-color); position: absolute; top: -20px; - border: 3px solid $white; + border: 3px solid var(--white); cursor: pointer; &.left { @@ -51,7 +51,7 @@ } h3 { display: inline; - color: $base-color; + color: var(--base-color); border-bottom: none; font-size: 14px; vertical-align: 6px; @@ -62,7 +62,7 @@ max-width: 25px; } .activity-date{ - color: $base-gray; + color: var(--base-gray); font-size: 0.75em ; margin: 0 0 0 30px; display: block; @@ -73,7 +73,7 @@ .activity-content{ padding: 5px; - background-color: $white; + background-color: var(--white); margin-left: 30px; display: none; } @@ -117,7 +117,7 @@ .activity-day { - color: $base-gray; + color: var(--base-gray); font-size: 0.75em ; margin: 0 45%; } @@ -129,7 +129,7 @@ } .loading-indicator span { - background-color: $light-gray-color; + background-color: var(--light-gray-color); border-radius: 50%; height: 10px; position: relative; diff --git a/resources/assets/stylesheets/scss/admin.scss b/resources/assets/stylesheets/scss/admin.scss index d8ac4d3..67b8792 100644 --- a/resources/assets/stylesheets/scss/admin.scss +++ b/resources/assets/stylesheets/scss/admin.scss @@ -7,12 +7,12 @@ padding-left: 0px; position: relative; text-align: center; - background-color: $content-color-20; + background-color: var(--content-color-20); @include background-icon(upload, clickable, 50); background-repeat: no-repeat; background-position: center 10px; padding-top: 70px; - color: $base-color; + color: var(--base-color); cursor: pointer; input[type=file] { @@ -27,9 +27,9 @@ } &.hovered { - background-color: $base-color; + background-color: var(--base-color); @include background-icon(upload, info_alt, 50); - color: $white; + color: var(--white); } } .js .widget-links .drag-and-drop { @@ -62,7 +62,7 @@ fieldset.attribute_table { width: 150px; max-width: 150px; overflow: hidden; - border: thin solid #cccccc; + border: thin solid var(--dark-gray-color-30); vertical-align: top; margin-top: 3px; margin-bottom: 3px; @@ -70,7 +70,7 @@ fieldset.attribute_table { div[container] > h2 { display: block; width: 100%; - background-color: #dddddd; + background-color: var(--dark-gray-color-20); font-size: 12px; text-align: center; margin: 0; @@ -81,12 +81,10 @@ fieldset.attribute_table { } div[container] > div.droparea > div.plugin { cursor: move; - border: thin solid #cccccc; + border: thin solid var(--dark-gray-color-30); border-radius: 5px; - background-color: #dddddd; - margin: 5px; - margin-left: 7px; - margin-right: 7px; + background-color: var(--dark-gray-color-20); + margin: 5px 7px; display: inline-block; min-width: 132px; max-width: 132px; @@ -94,10 +92,10 @@ fieldset.attribute_table { div[container] > div.droparea > div > h2 { display: block; width: 100%; - background-color: #cccccc; + background-color: var(--dark-gray-color-30); font-size: 12px; text-align: center; - margin: 0px; + margin: 0; } div[container] > div.droparea > div.deactivated { opacity: 0.5; @@ -110,8 +108,8 @@ fieldset.attribute_table { } hr { height: 1px; - color: #aaaaaa; - background-color: #aaaaaa; + color: var(--dark-gray-color-45); + background-color: var(--dark-gray-color-45); border: none; } div[container]#deactivated_modules { diff --git a/resources/assets/stylesheets/scss/ajax.scss b/resources/assets/stylesheets/scss/ajax.scss index 053395f..98e8e4f 100644 --- a/resources/assets/stylesheets/scss/ajax.scss +++ b/resources/assets/stylesheets/scss/ajax.scss @@ -1,8 +1,8 @@ /* --- AJAX indicator ------------------------------------------------------- */ #ajax_notification { - background-color: #7387ac; + background-color: var(--base-color-60); bottom: 0; - color: $white; + color: var(--white); display: none; font-size: 1.3em; font-weight: bold; @@ -21,7 +21,7 @@ .notification { background: rgba(255, 255, 255, 0.5) url("#{$image-path}/loading-indicator.svg") center center no-repeat; - border: 1px solid #ccc; + border: 1px solid var(--dark-gray-color-30); border-radius: 8px; display: inline-block; height: 16px; diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss index 1b70ae7..64ccff8 100644 --- a/resources/assets/stylesheets/scss/article.scss +++ b/resources/assets/stylesheets/scss/article.scss @@ -1,7 +1,7 @@ $article-padding: 10px; article.studip { - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); margin-bottom: $article-padding; padding: $article-padding; @@ -18,7 +18,7 @@ article.studip { flex-wrap: wrap; padding: 2px; - background-color: $content-color-20; + background-color: var(--content-color-20); margin: -$article-padding; margin-bottom: $article-padding; @@ -35,7 +35,7 @@ article.studip { h1 { padding: 5px; margin: 0; - color: $base-color; + color: var(--base-color); border-bottom: none; font-size: medium; @@ -60,7 +60,7 @@ article.studip { padding: 2px; > * { - border-right: 1px solid $content-color; + border-right: 1px solid var(--content-color); padding-right: 4px; margin-right: 4px; @@ -120,7 +120,7 @@ article.studip { > footer { text-align: center; - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); margin: -$article-padding; margin-top: $article-padding; diff --git a/resources/assets/stylesheets/scss/avatar.scss b/resources/assets/stylesheets/scss/avatar.scss index f8629e9..e71e199 100644 --- a/resources/assets/stylesheets/scss/avatar.scss +++ b/resources/assets/stylesheets/scss/avatar.scss @@ -3,7 +3,7 @@ div.avatar-widget { display: block; margin: 5px; padding: 0; - color: $white; + color: var(--white); width: $avatar-normal; height: $avatar-normal; @@ -38,7 +38,7 @@ div.avatar-widget { left: -2px; top: -2px; background-color: fade-out($base-color-40, 0.333); - border: 2px dashed $base-color; + border: 2px dashed var(--base-color); opacity: 1; } } @@ -142,11 +142,11 @@ form.settings-avatar { margin-right: auto; .cropper-view-box { - outline: 1px solid $base-color-80; + outline: 1px solid var(--base-color-80); } .cropper-line, .cropper-point { - background-color: $base-color-80; + background-color: var(--base-color-80); } } diff --git a/resources/assets/stylesheets/scss/badges.scss b/resources/assets/stylesheets/scss/badges.scss index 90095ca..1cd5cc3 100644 --- a/resources/assets/stylesheets/scss/badges.scss +++ b/resources/assets/stylesheets/scss/badges.scss @@ -16,8 +16,8 @@ margin: 0; padding: 1px 5px; - background-color: $red; - color: $white; + background-color: var(--red); + color: var(--white); font-size: 10px; font-weight: bold; @@ -28,6 +28,6 @@ text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px; border-radius: 9px; - box-shadow: $black 0 1px 3px; + box-shadow: var(--black) 0 1px 3px; } } diff --git a/resources/assets/stylesheets/scss/big-image-handler.scss b/resources/assets/stylesheets/scss/big-image-handler.scss index 863ab34..517ad97 100644 --- a/resources/assets/stylesheets/scss/big-image-handler.scss +++ b/resources/assets/stylesheets/scss/big-image-handler.scss @@ -30,7 +30,7 @@ $bg-big-image-handler: fade-out($black, 0.3); background-position: center; background-repeat: no-repeat; background-size: contain; - border: 1px solid $white; + border: 1px solid var(--white); box-shadow: 0 0 20px fade-out($white, 0.5); display: block; max-width: 98%; diff --git a/resources/assets/stylesheets/scss/blockquote.scss b/resources/assets/stylesheets/scss/blockquote.scss index 40643ba..612e650 100644 --- a/resources/assets/stylesheets/scss/blockquote.scss +++ b/resources/assets/stylesheets/scss/blockquote.scss @@ -1,6 +1,6 @@ blockquote { - background-color: $dark-gray-color-5; - border-left: 3px solid $base-color; + background-color: var(--dark-gray-color-5); + border-left: 3px solid var(--base-color); padding: 4px 10px; margin: 0 0 8px; color: black; @@ -12,10 +12,10 @@ blockquote { blockquote { background-color: white; blockquote { - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); blockquote { background-color: white; } } } -}
\ No newline at end of file +} diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss index 6c9e7ff..4f1fb0a 100644 --- a/resources/assets/stylesheets/scss/blubber.scss +++ b/resources/assets/stylesheets/scss/blubber.scss @@ -29,8 +29,8 @@ } .blubber_thread { - border: 1px solid $content-color-40; - background-color: $dark-gray-color-5; + border: 1px solid var(--content-color-40); + background-color: var(--dark-gray-color-5); width: 100%; max-width: 100%; @@ -67,22 +67,22 @@ } &.dragover { - background-color: $yellow-40; + background-color: var(--yellow-40); .writer > textarea { - background-color: $yellow-40; + background-color: var(--yellow-40); } ol.comments > li.mine > .content::after, ol.comments > li.theirs > .content::after { - background-color: $yellow-40; + background-color: var(--yellow-40); } } .context_info { - border-bottom: 1px solid $content-color-40; + border-bottom: 1px solid var(--content-color-40); text-align: center; } .writer { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); } @@ -142,12 +142,12 @@ display: flex; flex-direction: row-reverse; > .content { - background-color: $base-color; - color: $white; + background-color: var(--base-color); + color: var(--white); .opengraph { - background-color: $base-color-80; - border-color: $base-color-60; + background-color: var(--base-color-80); + border-color: var(--base-color-60); } a.link-extern { @@ -170,7 +170,7 @@ a, a:link, a:visited { - color: $white; + color: var(--white); opacity: 0.8; transition: opacity 200ms; } @@ -179,7 +179,7 @@ a:hover.index, a:active.index, a:hover.tree { - color: $white; + color: var(--white); opacity: 1; transition: opacity 200ms; } @@ -198,7 +198,7 @@ content: ''; height: 10px; width: 10px; - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); position: absolute; pointer-events: none; left: 100%; @@ -218,7 +218,7 @@ &.theirs { display: flex; > .content { - background-color: $content-color-20; + background-color: var(--content-color-20); @include arrow-left(10px, $content-color-20); &::before { top: 100%; @@ -227,19 +227,19 @@ content: ''; height: 10px; width: 10px; - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); position: absolute; pointer-events: none; left: -10px; top: 100%; } > .name { - color: $base-color; + color: var(--base-color); font-size: 0.8em; display: block; &:hover { - color: $red; + color: var(--red); } } } @@ -264,7 +264,7 @@ } > .time { font-size: 0.8em; - color: $black; + color: var(--black); time { @media screen and (max-width: $major-breakpoint-small) { display: none; @@ -276,8 +276,8 @@ } .writer { - background-color: $white; - background-image: linear-gradient(to left, $content-color-60, $content-color-60); + background-color: var(--white); + background-image: linear-gradient(to left, var(--content-color-60), var(--content-color-60)); background-size: 0% 100%; background-repeat: no-repeat; padding: 5px; @@ -289,8 +289,8 @@ transition: all 0.5s ease-out; > textarea { - border: 1px solid $content-color-40; - background-color: $white; + border: 1px solid var(--content-color-40); + background-color: var(--white); width: calc(100% - 140px); height: 34px; resize: none; @@ -316,18 +316,18 @@ } .thread_posting { - border-bottom: 1px solid $content-color-40; - background-color: $white; + border-bottom: 1px solid var(--content-color-40); + background-color: var(--white); .contextinfo { - background-color: $content-color-20; - border-bottom: 1px solid $content-color-40; - color: $dark-gray-color-60; + background-color: var(--content-color-20); + border-bottom: 1px solid var(--content-color-40); + color: var(--dark-gray-color-60); font-size: 0.8em; padding: 7px 5px 5px 75px; position: relative; a { - color: $dark-gray-color-60; + color: var(--dark-gray-color-60); } time { float: right; @@ -386,7 +386,7 @@ max-width: 270px; margin-left: 5px; - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); box-sizing: border-box; max-height: calc(100vh - 140px); @@ -396,7 +396,7 @@ padding: 10px; } .new_section { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); } .members { @@ -404,9 +404,9 @@ li { padding-top: 10px; padding-bottom: 10px; - border-bottom: 1px solid $content-color-40; + border-bottom: 1px solid var(--content-color-40); &:first-child { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); } } &.topless li:first-child { @@ -447,7 +447,7 @@ } .context_info { - border-bottom: 1px solid $content-color-40; + border-bottom: 1px solid var(--content-color-40); .blubber_course_info { @@ -473,7 +473,7 @@ } .lowprio_info { - color: $black; + color: var(--black); } .studip-dialog { @@ -536,21 +536,21 @@ padding-left: 0px; li { - border-bottom: thin solid $content-color-40; + border-bottom: thin solid var(--content-color-40); height: 50px; max-height: 50px; overflow: hidden; padding: 10px; cursor: pointer; - color: $base-color; + color: var(--base-color); font-weight: bold; &:last-child { border-bottom: none; } &.unseen { - border-left: 3px solid $active-color; + border-left: 3px solid var(--active-color); padding-left: 7px; } @@ -566,7 +566,7 @@ } &.active { - background-color: $yellow-40; + background-color: var(--yellow-40); &::before { content: ''; @@ -575,7 +575,7 @@ width: 0px; border-top: 35px transparent solid; border-bottom: 35px transparent solid; - border-left: 10px $content-color-40 solid; + border-left: 10px var(--content-color-40) solid; right: -2px; margin-top: -10px; } @@ -586,7 +586,7 @@ width: 0px; border-top: 35px transparent solid; border-bottom: 35px transparent solid; - border-left: 10px $yellow-40 solid; + border-left: 10px var(--yellow-40) solid; right: -1px; margin-top: -70px; } @@ -617,7 +617,7 @@ time { font-size: 0.8em; font-weight: normal; - color: $black; + color: var(--black); } } diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss index 539a2a3..1f55244 100644 --- a/resources/assets/stylesheets/scss/buttons.scss +++ b/resources/assets/stylesheets/scss/buttons.scss @@ -2,10 +2,10 @@ @mixin button() { background: white; - border: 1px solid $base-color; + border: 1px solid var(--base-color); border-radius: 0; box-sizing: border-box; - color: $base-color; + color: var(--base-color); cursor: pointer; display: inline-block; font-family: $font-family-base; @@ -24,19 +24,19 @@ &:hover, &:active { - background: $base-color; + background: var(--base-color); color: white; } &.disabled, &[disabled] { box-shadow: none; - background: $light-gray-color-20; + background: var(--light-gray-color-20); cursor: default; opacity: 0.65; &:hover { - color: $base-color; + color: var(--base-color); } } @@ -144,11 +144,11 @@ button.styleless { button.as-link { background-color: transparent; border: none; - color: $base-color; + color: var(--base-color); cursor: pointer; margin: 0px; padding: 0px; &:hover { - color: $active-color; + color: var(--active-color); } } diff --git a/resources/assets/stylesheets/scss/clipboard.scss b/resources/assets/stylesheets/scss/clipboard.scss index 2aea86a..21415a8 100644 --- a/resources/assets/stylesheets/scss/clipboard.scss +++ b/resources/assets/stylesheets/scss/clipboard.scss @@ -20,17 +20,17 @@ position: fixed; z-index: $drag_and_drop_z_index; border: $drag_and_drop_border; - color: $base-color; + color: var(--base-color); font-weight: bold; font-size: $font-size-large; - background-color: $white; + background-color: var(--white); } div.clipboard-area-container { margin-bottom: 0.5em; overflow-y: scroll; max-height: 15em; - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); } table.clipboard-area { @@ -81,10 +81,10 @@ table.clipboard-area tr.empty-clipboard-message > td { @keyframes drop-animation { 0% { - background-color: $yellow-60; + background-color: var(--yellow-60); } 100% { - background-color: $white; + background-color: var(--white); } } diff --git a/resources/assets/stylesheets/scss/comments.scss b/resources/assets/stylesheets/scss/comments.scss index 44bd4dc..b569db3 100644 --- a/resources/assets/stylesheets/scss/comments.scss +++ b/resources/assets/stylesheets/scss/comments.scss @@ -1,9 +1,9 @@ section.comments { text-align: left; - border-color: $content-color-40; + border-color: var(--content-color-40); border-top-style: none; border-width: 1px; - background-color: $white; + background-color: var(--white); padding: 5px; h1 { @@ -14,7 +14,7 @@ section.comments { } article.comment { border: 0; - border-top: 1px solid $light-gray-color-40; + border-top: 1px solid var(--light-gray-color-40); max-width: 1260px; margin-bottom: 4px; @@ -25,7 +25,7 @@ section.comments { time { float: right; font-size: 0.8em; - color: $light-gray-color-40; + color: var(--light-gray-color-40); } } } diff --git a/resources/assets/stylesheets/scss/consultation.scss b/resources/assets/stylesheets/scss/consultation.scss index 246838d..eca4838 100644 --- a/resources/assets/stylesheets/scss/consultation.scss +++ b/resources/assets/stylesheets/scss/consultation.scss @@ -1,5 +1,5 @@ .consultation-note { - border-bottom: 1px solid $light-gray-color-40; + border-bottom: 1px solid var(--light-gray-color-40); font-size: $font-size-small; margin-bottom: 2px; padding-bottom: 2px; @@ -9,7 +9,7 @@ margin-bottom: 0; padding-bottom: 0; - border-top: 1px solid $light-gray-color-40; + border-top: 1px solid var(--light-gray-color-40); margin-top: 2px; padding-top: 2px; } @@ -37,6 +37,6 @@ font-style: italic; } .slot-is-expired td { - background-color: $dark-gray-color-10; + background-color: var(--dark-gray-color-10); } } diff --git a/resources/assets/stylesheets/scss/contacts.scss b/resources/assets/stylesheets/scss/contacts.scss index 95effd4..8d74a94 100644 --- a/resources/assets/stylesheets/scss/contacts.scss +++ b/resources/assets/stylesheets/scss/contacts.scss @@ -1,6 +1,6 @@ // Turns a vertical list into a horizontal one spaced with separators .contact-legend { - color: #555; + color: var(--base-gray); text-align: center; ul, li { @@ -10,7 +10,7 @@ } ul { display: inline; } li { - border-left: 1px solid #333; + border-left: 1px solid var(--base-gray); display: inline-block; padding: 0 0.5em; @@ -26,25 +26,25 @@ table.contact-header { img { vertical-align: text-top; } td { - background-color: #f2f2f2; + background-color: var(--content-color-10); padding: 3px 0.5em; text-align: center; vertical-align: middle; - &:hover { background-color: #ced8f2; } + &:hover { background-color: var(--base-color-20); } // Active state &.active { - background-color: #e2e2e2; - border: 1px solid #888; + background-color: var(--dark-gray-color-15); + border: 1px solid var(--dark-gray-color-60); - &:hover { background-color: #b7c2e2; } + &:hover { background-color: var(--content-color-60); } a { - color: $red; + color: var(--red); font-weight: bold; } } - &.empty a { color: #999; } + &.empty a { color: var(--dark-gray-color-60); } } } diff --git a/resources/assets/stylesheets/scss/content.scss b/resources/assets/stylesheets/scss/content.scss index e04851b..5a91585 100644 --- a/resources/assets/stylesheets/scss/content.scss +++ b/resources/assets/stylesheets/scss/content.scss @@ -1,27 +1,27 @@ .content_title { - background-color: #e3eaf6; - background-image: linear-gradient(#cdd9ed, #e3eaf6 40%, #e3eaf6); + background-color: var(--content-color-20); + background-image: linear-gradient(var(--content-color-40), var(--content-color-20) 40%, var(--content-color-20)); background-repeat: no-repeat; - border-top: 1px solid $content-color; + border-top: 1px solid var(--content-color); line-height: 17pt; height: 25px; } .content_body { - background-color: #f8f8f8; + background-color: var(--dark-gray-color-5); } .content_body_panel { - background-color: #dfe2e9; - border-left: 1px solid #ccc; + background-color: var(--dark-gray-color-15); + border-left: 1px solid var(--dark-gray-color-30); } .content_seperator, .content_seperator td { - background-color: #adadad; - background-image: linear-gradient(#e0e0e0, #bcbcbc 15%, #adadad); + background-color: var(--dark-gray-color-45); + background-image: linear-gradient(var(--dark-gray-color-15), var(--dark-gray-color-40) 15%, var(--dark-gray-color-45)); background-repeat: no-repeat; - border-top: 1px solid #c7c7c7; + border-top: 1px solid var(--dark-gray-color-30); height: 15px; } diff --git a/resources/assets/stylesheets/scss/content_box.scss b/resources/assets/stylesheets/scss/content_box.scss index 3d88ff6..c8e1a2a 100644 --- a/resources/assets/stylesheets/scss/content_box.scss +++ b/resources/assets/stylesheets/scss/content_box.scss @@ -1,5 +1,5 @@ section.contentbox { - border-color: $content-color-40; + border-color: var(--content-color-40); border-style: solid; border-width: 1px; margin-bottom: 10px; @@ -12,11 +12,11 @@ section.contentbox { justify-content: space-between; padding: 2px; - background-color: $content-color-20; + background-color: var(--content-color-20); span.title { font-size: medium; - color: $base-color; + color: var(--base-color); &.no-overflow { width: calc(100% - 1.5em); @@ -26,7 +26,7 @@ section.contentbox { &:after { content: ""; width: 4em; - background: linear-gradient(to right, transparent, $content-color-20); + background: linear-gradient(to right, transparent, var(--content-color-20)); position: absolute; height: 1.5em; right: 2.5em; @@ -38,7 +38,7 @@ section.contentbox { flex: 1 0 0; padding: 5px; margin: 0; - color: $base-color; + color: var(--base-color); border-bottom: none; font-size: medium; @@ -69,10 +69,10 @@ section.contentbox { footer { text-align: center; - border-color: $content-color-40; + border-color: var(--content-color-40); border-top-style: solid; border-width: 1px; - background-color: $white; + background-color: var(--white); } section { @@ -89,7 +89,7 @@ section.contentbox { } > article { - border-color: $content-color-40; + border-color: var(--content-color-40); border-style: solid; border-width: 1px; margin: 10px; @@ -128,7 +128,7 @@ section.contentbox { font-size: small; width: 100%; font-weight: bold; - color: $black; + color: var(--black); } } @@ -169,7 +169,7 @@ section.contentbox { } display: inline-block; - border-right: 1px solid $content-color; + border-right: 1px solid var(--content-color); padding: 0 5px; } @@ -183,10 +183,10 @@ section.contentbox { footer { text-align: center; - border-color: $content-color-40; + border-color: var(--content-color-40); border-top-style: none; border-width: 1px; - background-color: $white; + background-color: var(--white); h1 { font-size: 1em; @@ -197,7 +197,7 @@ section.contentbox { article.comment { border: 0; - border-top: 1px solid $light-gray-color-40; + border-top: 1px solid var(--light-gray-color-40); max-width: 1260px; margin: auto auto 4px; text-align: left; @@ -209,7 +209,7 @@ section.contentbox { time { float: right; font-size: 0.8em; - color: $light-gray-color-40; + color: var(--light-gray-color-40); } } } diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss index e371be2..1322097 100644 --- a/resources/assets/stylesheets/scss/contentbar.scss +++ b/resources/assets/stylesheets/scss/contentbar.scss @@ -1,6 +1,6 @@ .contentbar { - background-color: $dark-gray-color-5; - border: solid thin $dark-gray-color-30; + background-color: var(--dark-gray-color-5); + border: solid thin var(--dark-gray-color-30); display: flex; flex-wrap: wrap; height: auto; @@ -54,10 +54,10 @@ white-space: nowrap; a { - color: $base-color; + color: var(--base-color); text-decoration: none; &:hover { - color: $active-color; + color: var(--active-color); } } diff --git a/resources/assets/stylesheets/scss/copyable-links.scss b/resources/assets/stylesheets/scss/copyable-links.scss index c919586..f5ff73a 100644 --- a/resources/assets/stylesheets/scss/copyable-links.scss +++ b/resources/assets/stylesheets/scss/copyable-links.scss @@ -6,12 +6,12 @@ line-height: 60px; max-width: calc(100% - 140px); z-index: 42000; - border: solid thin $content-color-40; - background-color: $white; + border: solid thin var(--content-color-40); + background-color: var(--white); background-repeat: no-repeat; background-position: 1em center; background-size: 100px; - box-shadow: 5px 5px #ececed; + box-shadow: 5px 5px var(--dark-gray-color-10); padding: 5px 100px; transition: transform .5s ease; diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index b743c63..8c158f8 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -146,7 +146,7 @@ c o n t e n t s .cw-contents-overview-teaser { max-width: 782px; - background-color: $content-color-20; + background-color: var(--content-color-20); background-image: url("#{$image-path}/courseware-keyvisual-negative.svg"); background-repeat: no-repeat; background-size: 196px; @@ -198,7 +198,7 @@ c o n t e n t s } .loading-indicator span { - background-color: #CCCCDD; + background-color: var(--content-color-40); border-radius: 50%; height: 10px; position: relative; @@ -279,7 +279,7 @@ $consum_ribbon_width: calc(100% - 58px); .cw-ribbon-wrapper-consume { position: fixed; padding: 15px; - background-color: $white; + background-color: var(--white); width: $consum_ribbon_width; height: 46px; z-index: 42; @@ -290,7 +290,7 @@ $consum_ribbon_width: calc(100% - 58px); height: 15px; left: 0; width: calc(100% - 1em); - background-color: $white; + background-color: var(--white); z-index: 40; } @@ -299,7 +299,7 @@ $consum_ribbon_width: calc(100% - 58px); top: 40px; height: 20px; width: calc(100% - 314px); - background-color: $white; + background-color: var(--white); z-index: 39; } .cw-ribbon-sticky-bottom { @@ -307,7 +307,7 @@ $consum_ribbon_width: calc(100% - 58px); top: 110px; height: 16px; width: calc(100% - 314px); - background-color: $white; + background-color: var(--white); z-index: 39; } .cw-ribbon-sticky-spacer { @@ -318,11 +318,11 @@ $consum_ribbon_width: calc(100% - 58px); flex-wrap: wrap; height: auto; min-height: 30px; - border: solid thin $dark-gray-color-30; + border: solid thin var(--dark-gray-color-30); margin-bottom: 15px; padding: 1em; justify-content: space-between; - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); &.cw-ribbon-sticky { position: fixed; @@ -377,10 +377,10 @@ $consum_ribbon_width: calc(100% - 58px); white-space: nowrap; a { - color: $base-color; + color: var(--base-color); text-decoration: none; &:hover { - color: $active-color; + color: var(--active-color); } } @@ -455,9 +455,9 @@ $consum_ribbon_width: calc(100% - 58px); } .cw-ribbon-tools { - background-color: $white; - border: solid thin $content-color-40; - box-shadow: 2px 2px #ccc; + background-color: var(--white); + border: solid thin var(--content-color-40); + box-shadow: 2px 2px var(--dark-gray-color-30); position: absolute; right: -570px; top: 15px; @@ -489,7 +489,7 @@ $consum_ribbon_width: calc(100% - 58px); .cw-ribbon-tool-content { height: 100%; width: 540px; - background-color:$white; + background-color: var(--white); padding: 0; overflow: hidden; @@ -498,10 +498,10 @@ $consum_ribbon_width: calc(100% - 58px); position: sticky; height: 100%; top: 0; - background-color: $white; + background-color: var(--white); margin: 0; padding: 0; - color: $base-color; + color: var(--base-color); display: flex; z-index: 43; @@ -521,7 +521,7 @@ $consum_ribbon_width: calc(100% - 58px); background-repeat: no-repeat; background-size: 24px; background-position: center right; - background-color: #fff; + background-color: var(--white); } >.cw-ribbon-tool-content-tablist { @@ -544,7 +544,7 @@ $consum_ribbon_width: calc(100% - 58px); } >.cw-tabs-content { border: none; - border-top: solid thin $content-color-40; + border-top: solid thin var(--content-color-40); padding: 0; height: calc(100% - 58px); @@ -555,7 +555,7 @@ $consum_ribbon_width: calc(100% - 58px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: $base-color $white; + scrollbar-color: var(--base-color) var(--white); &.cw-ribbon-tool-blockadder-tab { height: 100%; @@ -573,7 +573,7 @@ $consum_ribbon_width: calc(100% - 58px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: $base-color $white; + scrollbar-color: var(--base-color) var(--white); } } } @@ -633,12 +633,12 @@ ribbon end height: 100%; width: 100%; padding: 0; - background-color: $white; + background-color: var(--white); z-index: 1004; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: $base-color #f5f5f5; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); } .cw-welcome-screen { @@ -646,7 +646,7 @@ ribbon end margin: 14px 0 42px 0; width: 100%; height: 400px; - background-image: url('../../assets/images/courseware-keyvisual.svg'); + background-image: url('#{$image-path}/courseware-keyvisual.svg'); background-repeat: no-repeat; background-position: center center; } @@ -695,7 +695,7 @@ ribbon end resize: none; } .cw-structural-element-color { - color: $white; + color: var(--white); &.black { background-color: map-get($tile-colors, "black"); } @@ -855,7 +855,7 @@ ribbon end } .cw-container-header { - background-color: $content-color-20; + background-color: var(--content-color-20); padding: 4px 10px 4px 22px; .cw-container-header-toggle { @@ -864,7 +864,7 @@ ribbon end } span { - color: $base-color; + color: var(--base-color); font-weight: 700; line-height: 2em; font-size: 1.1em; @@ -900,7 +900,7 @@ ribbon end } } .cw-container-content { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); } } @@ -997,7 +997,7 @@ form.cw-container-dialog-edit-form { } } .cw-content-wrapper-active { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); .cw-block-content { padding: $cw-wrapper-gap; } @@ -1016,7 +1016,7 @@ form.cw-container-dialog-edit-form { } } .cw-block-header { - background-color: $content-color-20; + background-color: var(--content-color-20); padding: 4px 10px 4px 22px; .cw-block-header-toggle { @@ -1025,7 +1025,7 @@ form.cw-container-dialog-edit-form { } span { - color: $base-color; + color: var(--base-color); font-weight: 700; line-height: 2em; font-size: 1.1em; @@ -1054,8 +1054,8 @@ form.cw-container-dialog-edit-form { .cw-block-features { header{ - background-color: $content-color-20; - color: $base-color; + background-color: var(--content-color-20); + color: var(--base-color); font-weight: 600; padding: 0.5em; } @@ -1198,7 +1198,7 @@ label[for="cw-keypoint-color"] { display: inline-block !important; } .cw-keypoint-icons { - background-color: $white; + background-color: var(--white); } .cw-keypoint-bg-red { background-color: map-get($icon-colors, 'icon-red'); @@ -1233,7 +1233,7 @@ label[for="cw-keypoint-color"] { width: -moz-available; height: -moz-available; min-height: 8em; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); resize: none; } @@ -1366,7 +1366,7 @@ label[for="cw-keypoint-color"] { padding-left: 0; > li.cw-tree-item { > .cw-tree-item-wrapper { - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); display: block; > a.cw-tree-item-link { display: block; @@ -1384,7 +1384,7 @@ label[for="cw-keypoint-color"] { margin: 28px 0 0 0; > .cw-tree-item-wrapper { display: block; - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); margin-bottom: 12px; > a.cw-tree-item-link { display: inline-block; @@ -1444,15 +1444,15 @@ label[for="cw-keypoint-color"] { } .cw-tree-item-link { &:hover { - background-color: $light-gray-color-20; - color: $active-color; + background-color: var(--light-gray-color-20); + color: var(--active-color); } &.cw-tree-item-link-current { - color: $black; + color: var(--black); font-weight: 600; cursor: default; &::before { - color: $black; + color: var(--black); } } &.cw-tree-item-link-selected { @@ -1489,7 +1489,7 @@ label[for="cw-keypoint-color"] { @include background-icon(accept, info, 16); } &.cw-tree-item-sequential-percentage { - color: $black; + color: var(--black); font-size: 14px; } } @@ -1508,18 +1508,18 @@ c o l l a p s i b l e b o x * * * * * * * * * * * * * * */ .cw-collapsible { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); margin-bottom: -1px; .cw-collapsible-title { @include background-icon(arr_1right, clickable); background-position: 6px center; background-repeat: no-repeat; - background-color: $content-color-20; + background-color: var(--content-color-20); padding: 0.5em 2em; margin: 0; font-weight: 600; - color: $base-color; + color: var(--base-color); cursor: pointer; &.cw-collapsible-open { @@ -1673,15 +1673,15 @@ $icons: ( list-style: none; padding: 0; margin: 0; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); border-bottom: none; button { - background-color: $white; + background-color: var(--white); border: none; padding: 1em 0 4px 0; margin: 0 7px 0 21px; - color: $base-color; + color: var(--base-color); cursor: pointer; text-align: center; flex-grow: 1; @@ -1694,14 +1694,14 @@ $icons: ( margin-left: -14px; width: calc(100% + 28px); content: ''; - border-bottom: solid 3px $dark-gray-color-75; + border-bottom: solid 3px var(--dark-gray-color-75); transform: scaleX(0); transition: transform 300ms ease-in-out; } &.is-active, &:hover { - color: $black; + color: var(--black); &:after { transform: scaleX(1); } @@ -1763,7 +1763,7 @@ $icons: ( } } .cw-tabs-content { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 4px; } .cw-block-wrapper-active { @@ -1778,7 +1778,7 @@ $icons: ( .cw-tab-in-dialog { .cw-tabs-nav { border: none; - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); margin-bottom: 4px; } .cw-tabs-content { @@ -1787,7 +1787,7 @@ $icons: ( min-height: 400px; overflow-y: auto; scrollbar-width: thin; - scrollbar-color: $base-color #f5f5f5; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); } } } @@ -1831,7 +1831,7 @@ b l o c k a d d e r .cw-tabs-nav { margin-top: 4px; border: none; - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); button { max-width: unset; @@ -1844,7 +1844,7 @@ b l o c k a d d e r overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; - scrollbar-color: $base-color #f5f5f5; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); .input-group.files-search { &.search { @@ -1894,7 +1894,7 @@ b l o c k a d d e r padding: 2px; border: thin solid var(--dark-gray-color-30); border-top: none; - background-color: #fff; + background-color: var(--white); .button { min-width: inherit; @@ -1971,23 +1971,23 @@ b l o c k a d d e r } .cw-block-adder-area { - background-color: $white; - border: solid thin $content-color-40; + background-color: var(--white); + border: solid thin var(--content-color-40); padding: 1em 0; - color: $base-color; + color: var(--base-color); text-align: center; width: 100%; font-weight: 600; cursor: pointer; &:hover { - border-color: $base-color; + border-color: var(--base-color); } &.cw-block-adder-active { - border: solid thin $base-color; - background-color: $base-color; - color: $white; + border: solid thin var(--base-color); + background-color: var(--base-color); + color: var(--white); } img { @@ -2023,11 +2023,11 @@ b l o c k a d d e r @include background-icon(unit-test, clickable, 48); background-position: 12px center; background-repeat: no-repeat; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); cursor: pointer; &:hover { - border-color: $base-color; + border-color: var(--base-color); } @each $item, $icon in $containeradder-items { @@ -2163,12 +2163,12 @@ c o m p a n i o n o v e r l a y max-width: calc(100% - 140px); height: 120px; z-index: 42000; - border: solid thin $content-color-40; - background-color: $white; + border: solid thin var(--content-color-40); + background-color: var(--white); background-repeat: no-repeat; background-position: 1em center; background-size: 100px; - box-shadow: 5px 5px #ececed; + box-shadow: 5px 5px var(--dark-gray-color-10); padding-left: 120px; transform: translateX(100%); transition: transform .5s ease; @@ -2193,7 +2193,7 @@ c o m p a n i o n o v e r l a y .cw-compantion-overlay-close { @include background-icon(decline); - background-color: $white; + background-color: var(--white); background-repeat: no-repeat; position: absolute; @@ -2209,8 +2209,8 @@ c o m p a n i o n o v e r l a y .cw-companion-box { display: flex; height: 120px; - border: solid thin $content-color-40; - background-color: $white; + border: solid thin var(--content-color-40); + background-color: var(--white); background-repeat: no-repeat; background-position: 1em center; background-size: 100px; @@ -2398,14 +2398,14 @@ c o m m e n t s & f e e d b a c k .cw-structural-element-comment-create, .cw-block-feedback-create, .cw-block-comment-create { - border-top: solid thin $content-color-40; + border-top: solid thin var(--content-color-40); padding-top: 1em; textarea { width: calc(100% - 6px); resize: none; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); &:active { - border: solid thin $content-color-80; + border: solid thin var(--content-color-80); } } } @@ -2513,7 +2513,7 @@ d a s h b o a r d padding: 0; .cw-activity-item { - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); padding: 0.5em; &:last-child { @@ -2609,7 +2609,7 @@ d a s h b o a r d e n d } .cw-unit-progress-subchapter-list { - border-top: solid thin $content-color-40; + border-top: solid thin var(--content-color-40); padding: 0 1em 0 1em; .cw-unit-empty-info { @@ -2620,7 +2620,7 @@ d a s h b o a r d e n d .cw-unit-progress-item { display: block; - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); padding: 10px 0; &:hover{ @@ -2639,7 +2639,7 @@ d a s h b o a r d e n d .cw-unit-progress-item-value { width: 70px; - color: $base-color; + color: var(--base-color); font-size: xx-large; .cw-progress-circle { @@ -2648,11 +2648,7 @@ d a s h b o a r d e n d } } .cw-unit-progress-item-description { - color: $base-color; - padding-left: 14px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + color: var(--base-color); padding: 0.5em 0 0 1em; text-overflow: ellipsis; overflow: hidden; @@ -2674,7 +2670,7 @@ p r o g r e s s c i r c l e padding: 0; width: 5em; height: 5em; - background-color: $dark-gray-color-10; + background-color: var(--dark-gray-color-10); border-radius: 50%; line-height: 5em; @@ -2698,7 +2694,7 @@ p r o g r e s s c i r c l e width: 5em; text-align: center; display: block; - color: $base-color; + color: var(--base-color); z-index: 2; } @@ -2720,14 +2716,14 @@ p r o g r e s s c i r c l e width: 5em; height: 5em; border-radius: 50%; - border: 0.45em solid $base-color; + border: 0.45em solid var(--base-color); box-sizing: border-box; } &.over50 .first50-bar { position: absolute; clip: rect(0, 5em, 5em, 2.5em); - background-color: $base-color; + background-color: var(--base-color); border-radius: 50%; width: 5em; height: 5em; @@ -2761,7 +2757,7 @@ p r o g r e s s c i r c l e e n d } .progress-bar-wrapper { width: 100%; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); .progress-bar { display: flex; @@ -2770,7 +2766,7 @@ p r o g r e s s c i r c l e e n d color: white; text-align: center; white-space: nowrap; - background-color: $base-color; + background-color: var(--base-color); } } } @@ -2781,11 +2777,11 @@ b l o c k s .cw-block-title { padding: 4px; - background-color: $content-color-20; - color: $base-color; + background-color: var(--content-color-20); + color: var(--base-color); font-weight: 700; text-align: center; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); border-bottom: none; } /* * * * * * * * * @@ -2797,7 +2793,7 @@ a u d i o b l o c k * * * * * * * * * * */ .cw-block-audio { .cw-audio-container { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding-top: 1em; } .cw-audio-controls { @@ -2810,25 +2806,25 @@ a u d i o b l o c k border: 0; } &.ui-widget-content { - background-color: $base-color; + background-color: var(--base-color); } .ui-widget-header { - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); } .ui-slider-handle { border-radius: 20px; width: 1em; height: 1.7em; top: -0.5em; - background-color: $dark-gray-color-20; - border-color: $content-color-40; + background-color: var(--dark-gray-color-20); + border-color: var(--content-color-40); cursor: pointer; margin-left: -2px; } } .cw-audio-button { - border: solid thin $content-color-40; - background-color: $white; + border: solid thin var(--content-color-40); + background-color: var(--white); background-repeat: no-repeat; background-position: center center; background-size: 24px; @@ -2849,7 +2845,7 @@ a u d i o b l o c k display: inline-block; &:hover { - background-color: $base-color; + background-color: var(--base-color); } @each $button, $icon in $media-buttons { @@ -2866,7 +2862,7 @@ a u d i o b l o c k .cw-audio-time { position: relative; top: -1em; - color: $base-gray; + color: var(--base-gray); } .cw-audio-range { @@ -2882,40 +2878,40 @@ a u d i o b l o c k } .cw-audio-range::-webkit-slider-runnable-track { - background: $dark-gray-color-20; + background: var(--dark-gray-color-20); } .cw-audio-range::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; /* 1 */ height: 18px; - background: $white; - box-shadow: -100vw 0 0 100vw $base-color; - border: solid thin $content-color-40; + background: var(--white); + box-shadow: -100vw 0 0 100vw var(--base-color); + border: solid thin var(--content-color-40); } .cw-audio-range::-moz-range-track { height: 18px; - background: $dark-gray-color-10; + background: var(--dark-gray-color-10); } .cw-audio-range::-moz-range-thumb { - background: $white; + background: var(--white); height: 18px; width: 9px; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); border-radius: 0 !important; - box-shadow: -100vw 0 0 100vw $base-color; + box-shadow: -100vw 0 0 100vw var(--base-color); box-sizing: border-box; } .cw-audio-range::-ms-fill-lower { - background: $base-color; + background: var(--base-color); } .cw-audio-range::-ms-thumb { - background: $white; - border: solid thin $content-color-40; + background: var(--white); + border: solid thin var(--content-color-40); height: 18px; width: 9px; box-sizing: border-box; @@ -2930,7 +2926,7 @@ a u d i o b l o c k } .cw-audio-range::-ms-track { - background: $dark-gray-color-20; + background: var(--dark-gray-color-20); color: transparent; height: 18px; border: none; @@ -2942,7 +2938,7 @@ a u d i o b l o c k .cw-audio-playlist-wrapper { margin-top: -1em; padding-top: 1em; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); border-top: none; &.empty { @@ -2955,13 +2951,13 @@ a u d i o b l o c k cursor: pointer; &.with-recorder { - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); } li { margin: 0 1em; &:not(:last-child) { - border-bottom: solid thin $dark-gray-color-30; + border-bottom: solid thin var(--dark-gray-color-30); } .cw-playlist-item { @@ -2973,9 +2969,9 @@ a u d i o b l o c k margin: 1em 0; padding: 1em; padding-left: 4em; - color: $base-color; + color: var(--base-color); &:hover { - color: $active-color; + color: var(--active-color); } &.current-item { @include background-icon(play, clickable, 24); @@ -3007,7 +3003,7 @@ a u d i o b l o c k } .cw-audio-empty { @include background-icon(file, info, 96); - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); background-position: center 1em; background-repeat: no-repeat; min-height: 140px; @@ -3027,7 +3023,7 @@ f o r m u l t i m e d i a b l o c k s * * * * * * * * * * * * * * * * * * * */ .cw-file-empty { @include background-icon(file, info, 96); - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); background-position: center 1em; background-repeat: no-repeat; min-height: 140px; @@ -3089,15 +3085,15 @@ c o d e b l o c k display: block; overflow-x: auto; padding: 0.5em; - background: $dark-gray-color-5; + background: var(--dark-gray-color-5); color: black; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); } .hljs-comment, .hljs-quote, .hljs-variable { - color: $dark-green; + color: var(--dark-green); } .hljs-keyword, @@ -3106,7 +3102,7 @@ c o d e b l o c k .hljs-built_in, .hljs-name, .hljs-tag { - color: $base-color; + color: var(--base-color); font-weight: 600; } @@ -3119,7 +3115,7 @@ c o d e b l o c k .hljs-template-variable, .hljs-type, .hljs-addition { - color: $orange-80; + color: var(--orange-80); font-weight: 400; } @@ -3127,24 +3123,24 @@ c o d e b l o c k .hljs-selector-attr, .hljs-selector-pseudo, .hljs-meta { - color: $petrol; + color: var(--petrol); font-weight: 400; } .hljs-doctag { - color: $dark-gray-color-75; + color: var(--dark-gray-color-75); font-weight: 400; } .hljs-attr { - color: $active-color; + color: var(--active-color); font-weight: 400; } .hljs-symbol, .hljs-bullet, .hljs-link { - color: $petrol; + color: var(--petrol); font-weight: 400; } @@ -3158,12 +3154,12 @@ c o d e b l o c k } .code-lang { - background: $dark-gray-color-5; - border: solid thin $content-color-40; + background: var(--dark-gray-color-5); + border: solid thin var(--content-color-40); border-top: none; padding: 5px 10px; text-align: right; - color: $dark-gray-color-45; + color: var(--dark-gray-color-45); font-family: monospace; text-transform: full-width; } @@ -3178,7 +3174,7 @@ c o n f i r m b l o c k * * * * * * * * * * * * */ .cw-block-confirm { .cw-block-confirm-content{ - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 1em; margin: 0; @@ -3288,7 +3284,7 @@ c a n v a s b l o c k .cw-block-canvas { .cw-canvasblock-canvas { max-width: 100%; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); } .cw-canvasblock-upload-message{ @@ -3631,12 +3627,12 @@ i f r a m e b l o c k .cw-block-iframe { .cw-block-content { iframe { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); width: calc(100% - 2px); } .cw-block-iframe-cc-data { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); border-top: none; margin-top: -6px; padding-top: 10px; @@ -3692,7 +3688,7 @@ l t i b l o c k .cw-block-lti { .cw-block-content { .cw-block-lti-content { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); box-sizing: border-box; } .cw-block-lti-icon-tool { @@ -3715,13 +3711,13 @@ l t i b l o c k e n d f o l d e r b l o c k * * * * * * * * * * * */ .cw-block-folder-info { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 10px 10px 0 10px; overflow: hidden; border-bottom: none; } .cw-block-folder-list { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 0; list-style: none; @@ -3729,7 +3725,7 @@ f o l d e r b l o c k list-style: none; &:not(:last-child) { - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); } a { display: block; @@ -3749,7 +3745,7 @@ f o l d e r b l o c k } } .cw-block-folder-upload { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 1em 10px; border-top: none; @@ -3771,11 +3767,11 @@ f o l d e r b l o c k text-overflow: ellipsis; &.cw-block-file-icon-empty { - color: $black; + color: var(--black); @include background-icon(folder-empty, info, 24); } &.cw-block-file-icon-none { - color: $black; + color: var(--black); @include background-icon(file, info, 24); } &.cw-block-file-icon-audio { @@ -3843,7 +3839,7 @@ f o l d e r b l o c k margin-top: -16px; padding-left: 40px; padding-bottom: 16px; - color: $dark-gray-color; + color: var(--dark-gray-color); } .cw-block-file-owner, .cw-block-file-mkdate { @@ -3862,7 +3858,7 @@ d o w n l o a d b l o c k * * * * * * * * * * * * * */ .cw-block-download { .cw-block-download-content { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); .cw-block-download-file-item { a { display: block; @@ -3929,7 +3925,7 @@ g a l l e r y b l o c k border: none; &:hover { - background-color: $base-color; + background-color: var(--base-color); } } @@ -4070,7 +4066,7 @@ b i o g r a p h y b l o c k min-height: 200px; flex-direction: row; padding: 2em 2em 2em 1em; - border: 2px solid $base-color; + border: 2px solid var(--base-color); .cw-block-biography-type { margin: auto 1em auto 0; @@ -4167,8 +4163,8 @@ l i n k b l o c k text-decoration: none; } .cw-link { - border: solid thin $content-color-40; - color: $base-color; + border: solid thin var(--content-color-40); + color: var(--base-color); height: 20px; padding: 1em; @@ -4177,9 +4173,9 @@ l i n k b l o c k } &:hover { - background-color: $base-color; - border: solid thin $base-color; - color: $white; + background-color: var(--base-color); + border: solid thin var(--base-color); + color: var(--white); } &.internal { @@ -4219,7 +4215,7 @@ l i n k b l o c k font-weight: 600; } .cw-link-og-description { - color: $base-color-80; + color: var(--base-color-80); text-align: justify; } } @@ -4271,7 +4267,7 @@ dialog cards block position: absolute; width: 100%; height: 100%; - color: $black; + color: var(--black); text-align: center; font-weight: bold; font-size: 1.2em; @@ -4312,14 +4308,14 @@ dialog cards block .card__face--front { @include background-icon(arr_1right, clickable); - background-color: $white; + background-color: var(--white); background-repeat: no-repeat; background-position: 95% 95%; } .card__face--back { @include background-icon(arr_1left, clickable); - background-color: $white; + background-color: var(--white); background-repeat: no-repeat; background-position: 5% 95%; transform: rotateY(180deg); @@ -4330,11 +4326,10 @@ dialog cards block color: transparent; width: 35px; height: 35px; - background-color: #bbb; border-radius: 2px; background-position: 50%; background-repeat: no-repeat; - background-color: $base-color; + background-color: var(--base-color); border: none; display: block; z-index: 4; @@ -4354,7 +4349,7 @@ dialog cards block &.cw-dialogcards-prev-disabled, &.cw-dialogcards-next-disabled { - background-color: $light-gray-color-40; + background-color: var(--light-gray-color-40); } } @@ -4807,7 +4802,6 @@ $large-icon-size-px: $large-icon-size + px; } .cw-block-headline-textbox { width: calc(100% - 64px); - margin-bottom: 64px; min-height: 350px; margin: 0 auto; border-bottom: solid 4px; @@ -5052,10 +5046,10 @@ toc block .cw-block-table-of-contents-list { padding: 0; list-style: none; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); li { &:not(:last-child) { - border-bottom: solid thin $dark-gray-color-30; + border-bottom: solid thin var(--dark-gray-color-30); } a { display: block; @@ -5070,10 +5064,10 @@ toc block .cw-block-table-of-contents-list-details { padding: 0; list-style: none; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); li { &:not(:last-child) { - border-bottom: solid thin $dark-gray-color-30; + border-bottom: solid thin var(--dark-gray-color-30); } &:hover { @@ -5099,7 +5093,7 @@ toc block }; p, p:hover { - color: $black; + color: var(--black); } } @@ -5162,7 +5156,7 @@ text block end content:""; width: 3px; height: 100%; - background: $content-color-40; + background: var(--content-color-40); left: 50%; top: 0; position: absolute; @@ -5181,7 +5175,7 @@ text block end @extend %clearfix; .cw-timeline-item-icon { - background: $white; + background: var(--white); width: 50px; height: 50px; position: absolute; @@ -5252,13 +5246,13 @@ text block end .cw-timeline-item-content { width: 40%; - background: $white; + background: var(--white); padding: 20px; transition: all $transition-duration ease; h3 { padding: 15px; - color: #fff; + color: var(--white); margin: -20px -20px 0 -20px; font-weight: 700; min-height: 1.1em; @@ -5266,7 +5260,7 @@ text block end article { min-height: 2em; - border: solid thin $content-color-20; + border: solid thin var(--content-color-20); border-top: none; margin: 0 -20px; padding: 15px; @@ -5310,18 +5304,18 @@ text block end @each $name, $color in $tile-colors { &.cw-timeline-item-content-color-#{"" + $name} { - border-color: $color; + border-color: var(--color); h3 { - background-color: $color; + background-color: var(--color); } &.left { &:before { - border-left: 7px solid $color; + border-left: 7px solid var(--color); } } &.right { &:before { - border-right: 7px solid $color; + border-right: 7px solid var(--color); } } } @@ -5404,7 +5398,7 @@ cw tiles height: 420px; width: 270px; margin: 0; - background-color: $base-color; + background-color: var(--base-color); &:last-child { margin-right: 0; } @@ -5457,14 +5451,14 @@ cw tiles .description { height: 220px; padding: 14px; - color: $white; + color: var(--white); position: relative; display: block; header { font-size: 20px; line-height: 22px; - color: $white; + color: var(--white); border: none; width: 240px; overflow: hidden; @@ -5524,7 +5518,7 @@ cw tiles footer { width: 242px; text-align: right; - color: $white; + color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -5544,7 +5538,7 @@ cw tiles a.description:visited, a.description:hover { height: 210px; - color: $white; + color: var(--white); text-decoration: unset; } } @@ -5577,21 +5571,21 @@ cw tiles end } .cw-template-preview-container-content { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); } .cw-template-preview-container-title { font-weight: 700; padding: 4px 4px 4px 8px; - color: $base-color; - background-color: $content-color-20; + color: var(--base-color); + background-color: var(--content-color-20); } .cw-template-preview-blocks { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 1em; margin: 5px; - background-color: $white; + background-color: var(--white); } } @@ -5603,34 +5597,34 @@ cw tiles end * * * * * * * * * */ .cw-file-input { width: stretch; - border: solid thin $base-color; + border: solid thin var(--base-color); font-size: 14px; cursor: pointer; &::file-selector-button { font-family: inherit; border: none; - border-right: solid thin $base-color; - background-color: $white; + border-right: solid thin var(--base-color); + background-color: var(--white); padding: 6px 15px; margin-right: 10px; - color: $base-color; + color: var(--base-color); &:hover { - background-color: $base-color; - color: $white; + background-color: var(--base-color); + color: var(--white); } } } .cw-file-input-change { - border: solid thin $base-color; + border: solid thin var(--base-color); button.button { padding: 0.5em 1.5em; margin: 0 0 0 -1px; line-height: 100%; border: none; - border-right: solid thin $base-color; + border-right: solid thin var(--base-color); } span { padding: 0.5em 1.5em 0.5em 0.5em; @@ -5685,17 +5679,17 @@ w i z a r d e l e m e n t s .cw-element-selector-item { display: block; width: 100%; - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding: 0.5em; margin-bottom: 5px; - background-color: $white; - color: $base-color; + background-color: var(--white); + color: var(--base-color); text-align: left; cursor: pointer; &:hover { - color: $white; - background-color: $base-color; + color: var(--white); + background-color: var(--base-color); } } } diff --git a/resources/assets/stylesheets/scss/coursewizard.scss b/resources/assets/stylesheets/scss/coursewizard.scss index 12993f2..2fe1783 100644 --- a/resources/assets/stylesheets/scss/coursewizard.scss +++ b/resources/assets/stylesheets/scss/coursewizard.scss @@ -21,7 +21,7 @@ div { width: calc(50% - 10px); } &#studyareas { - border-left: 1px solid $base-gray; + border-left: 1px solid var(--base-gray); float: left; padding-left: 10px; width: calc(50% - 20px); diff --git a/resources/assets/stylesheets/scss/cronjobs.scss b/resources/assets/stylesheets/scss/cronjobs.scss index a022898..4e45baf 100644 --- a/resources/assets/stylesheets/scss/cronjobs.scss +++ b/resources/assets/stylesheets/scss/cronjobs.scss @@ -13,11 +13,11 @@ display: none; } .selected { - td { background-color: $red-40; } + td { background-color: var(--red-40); } tr ~ tr { display: table-row; td { - background-color: $white; + background-color: var(--white); } td[colspan] { background-color: inherit; @@ -26,7 +26,7 @@ } } .parameters { - border: 1px solid $dark-gray-color; + border: 1px solid var(--dark-gray-color); border-bottom: 0; border-top: 0; padding: 0.5em; @@ -49,7 +49,7 @@ } } tbody:last-child .parameters { - border-bottom: 1px solid $white; + border-bottom: 1px solid var(--white); border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } @@ -81,7 +81,7 @@ } .inactivatible td { - color: $dark-gray-color; + color: var(--dark-gray-color); } .cronjobs-edit { diff --git a/resources/assets/stylesheets/scss/css_tree.scss b/resources/assets/stylesheets/scss/css_tree.scss index 3689488..39d9073 100644 --- a/resources/assets/stylesheets/scss/css_tree.scss +++ b/resources/assets/stylesheets/scss/css_tree.scss @@ -1,6 +1,6 @@ $css-tree-delay: 300ms; $css-tree-distance: 8px; -$css-tree-border: 1px solid $light-gray-color-80; +$css-tree-border: 1px solid var(--light-gray-color-80); .css-tree { &, ul { @@ -43,7 +43,7 @@ $css-tree-border: 1px solid $light-gray-color-80; top: $css-tree-distance; } ul li:last-child:before { - background: $white; + background: var(--white); height: auto; top: 10px; bottom: 0; @@ -96,7 +96,7 @@ $css-tree-border: 1px solid $light-gray-color-80; display: none; + label { - color: $brand-color-dark; + color: var(--brand-color-dark); border-radius: 2px; cursor: pointer; padding: 0 3px; @@ -105,11 +105,11 @@ $css-tree-border: 1px solid $light-gray-color-80; &:checked + label { font-weight: bold; - background: $content-color-40; + background: var(--content-color-40); } &[disabled] + label { - color: $dark-gray-color-20; + color: var(--dark-gray-color-20); } } } diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss index 8349799..6020d6e 100644 --- a/resources/assets/stylesheets/scss/dashboard.scss +++ b/resources/assets/stylesheets/scss/dashboard.scss @@ -8,7 +8,7 @@ } > li:nth-child(n+2) { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); } } @@ -23,13 +23,13 @@ flex-wrap: wrap; span { - border-right: 1px solid $content-color-40; + border-right: 1px solid var(--content-color-40); margin-right: 0.3em; padding-right: 0.4em; } span:not(.document-name) { - color: $dark-gray-color-75; + color: var(--dark-gray-color-75); } .document-name, span:last-child { @@ -85,7 +85,7 @@ } .files-search-active-filter { - background-color: $light-gray-color-20; + background-color: var(--light-gray-color-20); padding: 0.25em 0.25em 0.25em 0.6em; font-size: 0.9em; margin-bottom: 1px; @@ -143,10 +143,10 @@ form div.files-search { .button { margin: 0; line-height: 1.5; - background-color: $content-color-20; - color: $brand-color-dark; + background-color: var(--content-color-20); + color: var(--brand-color-dark); min-width: auto; - border: 1px solid $light-gray-color-40; + border: 1px solid var(--light-gray-color-40); border-left: none; } diff --git a/resources/assets/stylesheets/scss/dates.scss b/resources/assets/stylesheets/scss/dates.scss index cf89cda..f5e83a2 100644 --- a/resources/assets/stylesheets/scss/dates.scss +++ b/resources/assets/stylesheets/scss/dates.scss @@ -12,15 +12,15 @@ table.dates { } } .nextdate { - background-color: $content-color-40; + background-color: var(--content-color-40); } .topic-droppable { &.active { - background-color: $activity-color-40; + background-color: var(--activity-color-40); } &.hovered { - background-color: $activity-color-80; + background-color: var(--activity-color-80); } } .drag-handle { diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss index e80ff99..98df968 100644 --- a/resources/assets/stylesheets/scss/dialog.scss +++ b/resources/assets/stylesheets/scss/dialog.scss @@ -14,9 +14,9 @@ } .ui-dialog-titlebar { - background: $brand-color-darker; + background: var(--brand-color-darker); border: 0; - color: $contrast-content-white; + color: var(--contrast-content-white); font-size:1.3em; font-weight: normal; } @@ -60,7 +60,7 @@ .ui-dialog-buttonpane { padding: 0.5em 0.4em; margin: 0 1em; - border-color: $base-color-20; + border-color: var(--base-color-20); .ui-dialog-buttonset { text-align: center; @@ -93,12 +93,12 @@ &.disabled, &[disabled] { - background: $light-gray-color-20; + background: var(--light-gray-color-20); cursor: default; opacity: 0.65; &:hover { - color: $base-color; + color: var(--base-color); } } @@ -144,7 +144,7 @@ min-width: 30em; .ui-dialog-titlebar { - background-color: $yellow; + background-color: var(--yellow); color: text-contrast($yellow, $black, $white); text-align: left; } @@ -234,7 +234,7 @@ top: 50%; transform: translate(0, -50%); - background-color: $white; + background-color: var(--white); content: ''; display: block; @@ -262,7 +262,7 @@ top: 50%; transform: translate(0, -50%); - background-color: $white; + background-color: var(--white); content: ''; display: block; @@ -326,7 +326,7 @@ v u e d i a l o g } .studip-dialog-body { position: absolute; - background: $white; + background: var(--white); box-shadow: 0 0 8px fade-out($black, 0.5); overflow-x: auto; display: flex; @@ -341,9 +341,9 @@ v u e d i a l o g display: flex; } .studip-dialog-header { - background: $base-color none repeat scroll 0 0; - border-bottom: 1px solid $dark-gray-color-10; - color: $white; + background: var(--base-color) none repeat scroll 0 0; + border-bottom: 1px solid var(--dark-gray-color-10); + color: var(--white); justify-content: space-between; font-size: 1.3em; padding: 0.5em 1em; @@ -367,7 +367,7 @@ v u e d i a l o g cursor: pointer; } .studip-dialog-content { - color: $black; + color: var(--black); position: relative; padding: 15px; overflow-y: auto; @@ -375,7 +375,7 @@ v u e d i a l o g box-sizing: border-box; } .studip-dialog-footer { - border-top: 1px solid $dark-gray-color-10; + border-top: 1px solid var(--dark-gray-color-10); justify-content: space-between; } @@ -393,7 +393,7 @@ v u e d i a l o g &.studip-dialog-alert { .studip-dialog-header { - background: $active-color none repeat scroll 0 0; + background: var(--active-color) none repeat scroll 0 0; } .studip-dialog-content { @include background-icon(question-circle-full, attention, 32); @@ -401,8 +401,8 @@ v u e d i a l o g } &.studip-dialog-warning { .studip-dialog-header { - color: $black; - background: $activity-color none repeat scroll 0 0; + color: var(--black); + background: var(--activity-color) none repeat scroll 0 0; } .studip-dialog-close-button { @include background-icon(decline, clickable); diff --git a/resources/assets/stylesheets/scss/documents.scss b/resources/assets/stylesheets/scss/documents.scss index 3d34fd4..936efcf 100644 --- a/resources/assets/stylesheets/scss/documents.scss +++ b/resources/assets/stylesheets/scss/documents.scss @@ -12,7 +12,7 @@ z-index: 1; > a, ul { - background-color: $white; + background-color: var(--white); padding: 5px; } > a { @@ -21,7 +21,7 @@ &.extendable:hover { > a, > ul { - box-shadow: 0 4px 3px $base-gray; + box-shadow: 0 4px 3px var(--base-gray); } ul { display: flex; @@ -63,7 +63,7 @@ text-align: center; } > div { - border-left: 1px dashed $dark-gray-color; + border-left: 1px dashed var(--dark-gray-color); margin-left: $info-width; min-height: 100%; max-height: 100%; @@ -85,18 +85,18 @@ .documents.dragging { [data-file]:not([data-folder]) { - background-color: $light-gray-color-40; + background-color: var(--light-gray-color-40); opacity: 0.6; } } .documents { [data-folder].dropping { - background-color: $red-40; + background-color: var(--red-40); } } .document-draggable-helper { - background-color: $activity-color-40 !important; + background-color: var(--activity-color-40) !important; opacity: 1 !important; td { border-bottom: 0 !important; diff --git a/resources/assets/stylesheets/scss/enrolment.scss b/resources/assets/stylesheets/scss/enrolment.scss index 417cd55..41a08d3 100644 --- a/resources/assets/stylesheets/scss/enrolment.scss +++ b/resources/assets/stylesheets/scss/enrolment.scss @@ -1,6 +1,6 @@ #enrollment { ul { - border-top: 1px solid $base-color; + border-top: 1px solid var(--base-color); list-style: none inside; margin: 0; overflow-x: auto; @@ -10,7 +10,7 @@ max-height: 200px; } li { - border-bottom: 1px solid $base-color; + border-bottom: 1px solid var(--base-color); padding: 5px; &.ui-draggable.ui-draggable-handle { @@ -42,14 +42,14 @@ #available-courses li.visible, #selected-courses li { &:hover { - background-color: $base-color-20; + background-color: var(--base-color-20); } } #available-courses li.ui-draggable.ui-draggable-dragging, #selected-courses li.ui-sortable-helper { - background-color: $base-color-20; - border: 1px solid $base-color; + background-color: var(--base-color-20); + border: 1px solid var(--base-color); list-style: none inside; padding: 5px; width: auto; @@ -68,7 +68,7 @@ } &.ui-sortable-placeholder { - background-color: $yellow-20; + background-color: var(--yellow-20); } } @@ -81,7 +81,7 @@ } .ui-state-highlight { - background: $red; + background: var(--red); border: 0; height: 30px; padding: 10px; diff --git a/resources/assets/stylesheets/scss/evaluation.scss b/resources/assets/stylesheets/scss/evaluation.scss index 864b8cc..63fcef6 100644 --- a/resources/assets/stylesheets/scss/evaluation.scss +++ b/resources/assets/stylesheets/scss/evaluation.scss @@ -2,19 +2,19 @@ .eval_title { font-size: 1.2em; font-weight: bold; - color: $base-color; + color: var(--base-color); } .eval_error { - color: $red; + color: var(--red); } .eval_success { - color: $green; + color: var(--green); } .eval_info { - color: #333333; + color: var(--base-gray); } .eval_metainfo { @@ -22,11 +22,11 @@ } .eval_highlight { - background-color: #b8c3e8; + background-color: var(--content-color-60); } .eval_gray { - background: #d5d5dd none; + background: var(--dark-gray-color-20) none; } .evaluation_item { box-sizing: border-box; @@ -35,6 +35,6 @@ h3.eval { font-size: 1.3em; - color: $black; + color: var(--black); font-weight: bold; } diff --git a/resources/assets/stylesheets/scss/feedback.scss b/resources/assets/stylesheets/scss/feedback.scss index 14fdb40..a9c34e6 100644 --- a/resources/assets/stylesheets/scss/feedback.scss +++ b/resources/assets/stylesheets/scss/feedback.scss @@ -44,8 +44,8 @@ article.studip.feedback-stream { .feedback-entry { margin-top: 10px; padding: 5px; - background-color: $content-color-10; - border: 1px solid $content-color-40; + background-color: var(--content-color-10); + border: 1px solid var(--content-color-40); header { background: transparent; @@ -70,7 +70,7 @@ article.studip.feedback-stream { } } .date { - color: $base-gray; + color: var(--base-gray); text-align: right; font-size: 12px; } @@ -98,7 +98,7 @@ table.feedback { .percentage-bar { margin-left: -5px; padding: 0 5px; - color: $content-color-10; - background-color: $base-color; + color: var(--content-color-10); + background-color: var(--base-color); min-width: 20px; } diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss index 71c4f1c..1f94d1f 100644 --- a/resources/assets/stylesheets/scss/forms.scss +++ b/resources/assets/stylesheets/scss/forms.scss @@ -33,7 +33,7 @@ form.default { } span.empty { - color: $light-gray-color-40; + color: var(--light-gray-color-40); font-style: italic; } @@ -42,8 +42,8 @@ form.default { textarea, select { box-sizing: border-box; - border: 1px solid $light-gray-color-40; - color: $dark-gray-color; + border: 1px solid var(--light-gray-color-40); + color: var(--dark-gray-color); max-width: $max-width-m; padding: 5px; vertical-align: middle; @@ -51,7 +51,7 @@ form.default { transition: all $transition-duration ease-out; &:focus { - border-color: $brand-color-dark; + border-color: var(--brand-color-dark); } &.size-s { @@ -66,7 +66,7 @@ form.default { } &[readonly] { - background-color: $light-gray-color-20; + background-color: var(--light-gray-color-20); } } @@ -170,17 +170,17 @@ form.default { fieldset { box-sizing: border-box; - border: solid 1px $content-color-40; + border: solid 1px var(--content-color-40); margin: 0 0 10px; min-width: auto; padding: $gap 10px 10px; > legend { box-sizing: border-box; - background-color: $fieldset-header; - border: 1px solid $content-color-40; + background-color: var(--fieldset-header); + border: 1px solid var(--content-color-40); border-bottom: 0; - color: $brand-color-dark; + color: var(--brand-color-dark); font-size: 12pt; font-weight: bold; line-height: 2em; @@ -215,13 +215,13 @@ form.default { font-weight: bold; &::after { content: "*"; - color: $red; + color: var(--red); } } .studiprequired { font-weight: bold; .asterisk { - color: $red; + color: var(--red); } } @@ -230,7 +230,7 @@ form.default { } select[disabled] { - background-color: $dark-gray-color-15; + background-color: var(--dark-gray-color-15); } .tooltip.tooltip-icon::before { @@ -238,8 +238,8 @@ form.default { } footer { - background-color: $content-color-20; - border-top: 1px solid $brand-color-darker; + background-color: var(--content-color-20); + border-top: 1px solid var(--brand-color-darker); clear: both; margin-left: 0; padding: 5px 10px; @@ -260,14 +260,14 @@ form.default { background-size: 20px 20px; cursor: pointer; padding-left: 30px; - color: $base-color; + color: var(--base-color); input[type=file] { display: none; } .filename { padding-left: 0.5em; - color: $light-gray-color-80; + color: var(--light-gray-color-80); } } @@ -291,7 +291,7 @@ form.default { transition: all $transition-duration ease-out; &:focus { - border-color: $brand-color-dark; + border-color: var(--brand-color-dark); } &.size-s { @@ -402,7 +402,7 @@ form.default { bottom: 100%; right: 0; - color: $light-gray-color; + color: var(--light-gray-color); font-size: 0.8em; } @@ -433,13 +433,13 @@ form.default { } .invalid { - border: 2px dotted $red ! important; + border: 2px dotted var(--red) ! important; } // an invalid form entry .invalid_message { display: none; font-weight: bold; - color: $red; + color: var(--red); } .select2-container { @@ -490,7 +490,7 @@ form.default { display: inline-block; } textarea:invalid, input[type=text]:invalid { - border-left: 4px solid $red; + border-left: 4px solid var(--red); } } @@ -509,11 +509,11 @@ form.default { input[type=range] { &::-moz-range-track { height: 11px; - border: 1px solid $content-color; + border: 1px solid var(--content-color); background-color: transparent; } &::-moz-range-progress { - background-color: $base-color; + background-color: var(--base-color); height: 11px; } &::-moz-range-thumb { @@ -522,7 +522,7 @@ form.default { height: 1.2em; } &::-moz-range-thumb:hover { - background-color: $content-color; + background-color: var(--content-color); } } output { @@ -556,7 +556,7 @@ form.narrow { .content-title { background-color: transparent; padding-top: 0; - color: $base-gray; + color: var(--base-gray); font-size: 1.4em; text-align: left; } @@ -598,5 +598,3 @@ form.inline { } } } - - diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss index 583a7fb..91af8e2 100644 --- a/resources/assets/stylesheets/scss/forum.scss +++ b/resources/assets/stylesheets/scss/forum.scss @@ -7,10 +7,8 @@ -webkit-border-radius: $radius; } -$forum_light: #e7ebf1; -$forum_dark: #d0d7e3; -$forum_header: #899ab9; -$forum_highlight: #ffe4ad; + + $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); @media print { @@ -22,7 +20,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); div.title { p.author { - margin-bottom: 0px; + margin-bottom: 0; } } @@ -46,8 +44,8 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } span.highlight { - background-color: #ffe4ad; - border: 1px solid #ffe4ad; + background-color: var(--activity-color-40); + border: 1px solid var(--activity-color-40); @include rounded; } @@ -60,12 +58,12 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } .forum_header { - background-color: $forum_header; - color: #ffffff; - margin: 0pt; - padding: 0pt; + background-color: var(--content-color); + color: var(--white); + margin: 0; + padding: 0; .button { - margin: 0px; + margin: 0; } } @@ -78,7 +76,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); table.forum { td.selected { - background-color: $forum_highlight + background-color: var(--activity-color-40); } } @@ -129,7 +127,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; span { - color: #FF3333; + color: var(--red-80); } } @@ -152,7 +150,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); height: 100%; margin: 0 0 0.75em 0; padding: 0; - background-color: $forum_light; + background-color: var(--content-color-20); a { word-break: break-all; @@ -178,7 +176,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } div.highlight { - border: 4px solid #ffe4ad; + border: 4px solid var(--activity-color-40); animation: border-pulsate 2s 5; } @@ -233,7 +231,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); @media only screen and (max-width: 768px) { display: none !important; } - border-left: 1px solid #ffffff; + border-left: 1px solid var(--white); margin: 0; padding: 4px; height: 100%; @@ -308,10 +306,8 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); text-decoration: none; span { - position: relative; display: inline-block; margin-bottom: 9px; - background-color: rgba(255, 255, 255, 0.3); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); @@ -319,15 +315,11 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=0); - background-color: #ddd; - border: 2px solid #ccc; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; + background-color: var(--dark-gray-color-20); + border: 2px solid var(--dark-gray-color-30); border-radius: 4px; top: 20%; - bottom: none; - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset; - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset; + bottom: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset; font-size: 10pt; font-weight: normal; @@ -350,7 +342,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } li.selected { - background-color: #DDDDFF; + background-color: var(--base-color-20); } div.posting.bg2 { diff --git a/resources/assets/stylesheets/scss/fullscreen.scss b/resources/assets/stylesheets/scss/fullscreen.scss index ae1e542..256540c 100644 --- a/resources/assets/stylesheets/scss/fullscreen.scss +++ b/resources/assets/stylesheets/scss/fullscreen.scss @@ -1,5 +1,3 @@ -$transition-duration: 300ms; - .fullscreen-container { flex-grow: 1; margin-right: 12px; @@ -9,7 +7,6 @@ $transition-duration: 300ms; background: none; border: none; cursor: pointer; - float: right; height: 28px; @include background-icon(zoom-in2, clickable, 20); @@ -26,8 +23,6 @@ $transition-duration: 300ms; top: 1px; right: 12px; - cursor: pointer; - z-index: 100; } @@ -62,8 +57,8 @@ html.is-fullscreen { #main-footer { opacity: 0; - max-height: 0px; - padding: 0px; + max-height: 0; + padding: 0; } .fullscreen-toggle.unfullscreen { diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss index d1a5db1..7c0b33b 100644 --- a/resources/assets/stylesheets/scss/globalsearch.scss +++ b/resources/assets/stylesheets/scss/globalsearch.scss @@ -73,9 +73,9 @@ // List display #globalsearch-list { - background-color: $white; - box-shadow: 1px 1px 1px $light-gray-color-80; - color: $text-color; + background-color: var(--white); + box-shadow: 1px 1px 1px var(--light-gray-color-80); + color: var(--text-color); display: none; max-height: 90vh; overflow: auto; @@ -84,18 +84,18 @@ width: $width; a { - color: $base-color; + color: var(--base-color); &:hover { - color: $active-color; + color: var(--active-color); } } section { - color: $text-color; + color: var(--text-color); header { - color: $base-color; + color: var(--base-color); margin: 5px; margin-bottom: 0; } @@ -115,7 +115,7 @@ #globalsearch-searching { $icon-size: 32px; - color: $dark-gray-color-45; + color: var(--dark-gray-color-45); display: none; text-align: center; @@ -141,14 +141,14 @@ } article { - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); margin: 3px; margin-bottom: 8px; margin-top: 8px; > header { - background-color: $content-color-20; - color: $base-color; + background-color: var(--content-color-20); + color: var(--base-color); display: flex; flex-direction: row; @@ -179,11 +179,11 @@ padding: 6px 6px 6px 0; - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); transition: background-color $transition-duration; &:hover { - background-color: $dark-gray-color-20; + background-color: var(--dark-gray-color-20); } &.globalsearch-extended-result { @@ -222,13 +222,13 @@ } .globalsearch-result-details { - color: $black; + color: var(--black); font-size: $font-size-small; } } .globalsearch-result-time { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); flex: 0; font-size: $font-size-small; text-align: right; diff --git a/resources/assets/stylesheets/scss/gradebook.scss b/resources/assets/stylesheets/scss/gradebook.scss index bf0a93b..2f4c0a7 100644 --- a/resources/assets/stylesheets/scss/gradebook.scss +++ b/resources/assets/stylesheets/scss/gradebook.scss @@ -5,7 +5,7 @@ height: 20px; overflow: hidden; font-size: 15px; - background-color: $light-gray-color-20; + background-color: var(--light-gray-color-20); margin: 0.5em 0; } @@ -13,10 +13,10 @@ display: flex; flex-direction: column; justify-content: center; - color: $white; + color: var(--white); text-align: center; white-space: nowrap; - background-color: $base-color; + background-color: var(--base-color); } } @@ -26,7 +26,7 @@ .gradebook-lecturer-overview .gradebook-column-total, .gradebook-lecturer-overview .gradebook-column-category { - border-left: 1px solid $light-gray-color-20; + border-left: 1px solid var(--light-gray-color-20); } .gradebook-lecturer-overview .gradebook-column-category { @@ -50,7 +50,7 @@ form.gradebook-lecturer-weights label.gradebook-weight { } output { - color: $light-gray-color; + color: var(--light-gray-color); } output:before { @@ -104,8 +104,6 @@ section.gradebook-student-category { .gradebook-lecturer-custom-definitions .gradebook-lecturer-blank-slate { text-align: center; - // border-left: 1px solid $dark-gray-color-15; - // border-bottom: 1px solid $brand-color-darker; } table.default .gradebook-grade-input, diff --git a/resources/assets/stylesheets/scss/grid.scss b/resources/assets/stylesheets/scss/grid.scss index 67cf047..2174863 100644 --- a/resources/assets/stylesheets/scss/grid.scss +++ b/resources/assets/stylesheets/scss/grid.scss @@ -14,7 +14,7 @@ $grid-element-width: 270px; } .studip-grid-element { - border: 1px solid $light-gray-color; + border: 1px solid var(--light-gray-color); } // Responsive displays diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss index d4abb2e..5c95b4d 100644 --- a/resources/assets/stylesheets/scss/header.scss +++ b/resources/assets/stylesheets/scss/header.scss @@ -5,9 +5,9 @@ } #top-bar { - background-color: $base-color; - border: 1px $brand-color-darker; - color: $contrast-content-white; + background-color: var(--base-color); + border: 1px var(--brand-color-darker); + color: var(--contrast-content-white); border-bottom-style: solid; height: $bar-bottom-container-height; width: 100%; @@ -43,7 +43,7 @@ html { #header-links { > ul > li > a { - color: $white; + color: var(--white); margin: 0 6px; text-decoration: none; &:hover { @@ -81,7 +81,7 @@ html { .action-menu-icon { border: 1px solid var(--dark-gray-color-40); - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); height: 28px; margin: 0 32px 0 0; position: relative; @@ -123,22 +123,22 @@ html { right: 0; /*padding: 4px 28px 4px 8px;*/ - background: $white; - box-shadow: 1px 1px 1px $dark-gray-color-60; + background: var(--white); + box-shadow: 1px 1px 1px var(--dark-gray-color-60); text-align: left; white-space: nowrap; a:link, a:visited { - color: $base-color; + color: var(--base-color); } a:hover, a:active { - color: $active-color; + color: var(--active-color); } div { - color: $black; + color: var(--black); } } } @@ -150,7 +150,7 @@ html { #site-title { flex: 1; - color: $white; + color: var(--white); margin-left: 0; z-index: 1002; line-height: $bar-bottom-container-height; @@ -176,7 +176,7 @@ html { } #navigation-level-1 { - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); height: $header-height; z-index: 3; } diff --git a/resources/assets/stylesheets/scss/helpbar.scss b/resources/assets/stylesheets/scss/helpbar.scss index ccb0333..f2a3a1b 100644 --- a/resources/assets/stylesheets/scss/helpbar.scss +++ b/resources/assets/stylesheets/scss/helpbar.scss @@ -21,7 +21,7 @@ $border-width: 4px; h2, h3 { border-bottom: 0; - color: $white; + color: var(--white); font-size: 1em; font-weight: normal; margin: 0; @@ -33,7 +33,7 @@ $border-width: 4px; } h3 { - border-bottom: 1px dotted $base-color-80; + border-bottom: 1px dotted var(--base-color-80); font-size: 1.1em; margin-bottom: 2px; padding-bottom: 2px; @@ -46,7 +46,7 @@ $border-width: 4px; } .helpbar { - background-color: $base-color; + background-color: var(--base-color); padding: 8px; box-sizing: border-box; position: absolute; @@ -57,7 +57,7 @@ $border-width: 4px; z-index: 1000; &::before { - border-bottom: 2px solid $base-color-80; + border-bottom: 2px solid var(--base-color-80); border-left: $border-width solid transparent; border-right: $border-width solid transparent; content: ''; @@ -79,7 +79,7 @@ $border-width: 4px; } .helpbar-widgets { - color: $white; + color: var(--white); list-style: none; padding: 0; @@ -88,16 +88,16 @@ $border-width: 4px; } a:link, a:visited { - color: $white; + color: var(--white); } a:hover, a:active { - color: $white; + color: var(--white); text-decoration: underline; } > li { - border-top: 1px solid $content-color; + border-top: 1px solid var(--content-color); padding: 3px 0; margin: 0 .25em; } @@ -135,8 +135,8 @@ $border-width: 4px; } section.big-help-box { - background-color: $content-color-40; - border: 1px solid $content-color-80; + background-color: var(--content-color-40); + border: 1px solid var(--content-color-80); padding: 0.5em; margin-top: 0.5em; text-align: center; diff --git a/resources/assets/stylesheets/scss/i18n.scss b/resources/assets/stylesheets/scss/i18n.scss index 9a2a0bf..1692a7a 100644 --- a/resources/assets/stylesheets/scss/i18n.scss +++ b/resources/assets/stylesheets/scss/i18n.scss @@ -3,7 +3,7 @@ div.i18n_group { position: relative; > select.i18n { - border: 1px solid $light-gray-color-40; + border: 1px solid var(--light-gray-color-40); border-radius: 0; box-sizing: border-box; margin: 0 !important; diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss index a1b55c4..996697b 100644 --- a/resources/assets/stylesheets/scss/index.scss +++ b/resources/assets/stylesheets/scss/index.scss @@ -69,7 +69,7 @@ $gap-between-boxes: calc($login-page-margin / 2); p { font-size: 0.5em; - color: $black; + color: var(--black); } } } @@ -83,7 +83,7 @@ $gap-between-boxes: calc($login-page-margin / 2); display: flex; align-items: center; gap: 5px; - border-top: 1px solid $light-gray-color; + border-top: 1px solid var(--light-gray-color); font-size: 0.9em; padding: 10px; @@ -93,7 +93,7 @@ $gap-between-boxes: calc($login-page-margin / 2); } div.login_info { - border-top: 1px solid $light-gray-color; + border-top: 1px solid var(--light-gray-color); font-size: 0.8em; div { text-align: right; diff --git a/resources/assets/stylesheets/scss/installer.scss b/resources/assets/stylesheets/scss/installer.scss index c201a57..916d746 100644 --- a/resources/assets/stylesheets/scss/installer.scss +++ b/resources/assets/stylesheets/scss/installer.scss @@ -101,19 +101,19 @@ body#install { &::before { content: url('#{$icon-path}red/decline.svg') ' '; } - color: $red; + color: var(--red); } &.success { &::before { content: url('#{$icon-path}green/accept.svg') ' '; } - color: $green; + color: var(--green); } &.notice { &::before { content: url('#{$icon-path}blue/info-circle.svg') ' '; } - color: black; + color: var(--black); } code { @@ -163,15 +163,15 @@ body#install { -moz-appearance: none; appearance: none; - border: 1px solid #000; - color: $base-color-60; + border: 1px solid var(--black); + color: var(--base-color-60); margin-left: 1em; width: 550px; height: 20px; &::-moz-progress-bar, &::-webkit-progress-bar { - background-color: $base-color-60; + background-color: var(--base-color-60); } + div { @@ -202,15 +202,15 @@ body#install { } code { - background-color: $dark-gray-color; - color: $white; + background-color: var(--dark-gray-color); + color: var(--white); padding: 2px 4px; } div.type-text { &.required { label::after { - color: $red; + color: var(--red); content: '*'; } } @@ -244,7 +244,7 @@ body#install { } strong.required::after { - color: $red; + color: var(--red); content: '*'; } @@ -255,14 +255,14 @@ body#install { -moz-appearance: none; appearance: none; - color: $base-color-60; + color: var(--base-color-60); margin: 0 1em -4px; width: calc(100% - 2em); height: 4px; &::-moz-progress-bar, &::-webkit-progress-bar { - background-color: $base-color-60; + background-color: var(--base-color-60); } } } diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss index 59046b4..7dfda47 100644 --- a/resources/assets/stylesheets/scss/layouts.scss +++ b/resources/assets/stylesheets/scss/layouts.scss @@ -22,7 +22,7 @@ html { } body { - background-color: $white; + background-color: var(--white); display: grid; grid-column-gap: 5px; grid-row-gap: $grid-gap; @@ -30,7 +30,7 @@ body { grid-template-rows: auto 1fr auto; &::backdrop { - background: $white; + background: var(--white); } } @@ -48,7 +48,7 @@ body { #navigation-level-1 { align-content: stretch; align-items: stretch; - background-color: $white; + background-color: var(--white); border-radius: 0 0 2px 2px; box-sizing: border-box; display: flex; @@ -70,7 +70,7 @@ body { /* --- Layouts -------------------------------------------------------------- */ #current-page-structure { - background-color: #fff; + background-color: var(--white); border-radius: 0 0 2px 2px; position: relative; width: 100%; @@ -102,7 +102,7 @@ body { max-height: 30px; overflow: hidden; - background: linear-gradient(to bottom, $dark-gray-color-5, $dark-gray-color-10); + background: linear-gradient(to bottom, var(--dark-gray-color-5), var(--dark-gray-color-10)); > .context_icon { margin: 7px 1px 0 9px; @@ -112,8 +112,8 @@ body { .tabs_wrapper { align-items: stretch; - background-color: $dark-gray-color-10; - border-bottom: 1px solid $dark-gray-color-40; + background-color: var(--dark-gray-color-10); + border-bottom: 1px solid var(--dark-gray-color-40); display: flex; flex-direction: row; flex-wrap: nowrap; @@ -143,15 +143,15 @@ body { } #sidebar { - border-left: 1px dashed $brand-color-darker; + border-left: 1px dashed var(--brand-color-darker); grid-column: 1 / 2; grid-row: 2 / 3; } #content-wrapper { background: - linear-gradient(90deg, #fff 30%, hsla(0, 0%, 100%, 0)), - linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 70%) 100% 0, + linear-gradient(90deg, var(--white) 30%, hsla(0, 0%, 100%, 0)), + linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--white) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), transparent) 100% 0; background-attachment: local, local, scroll, scroll; @@ -182,8 +182,8 @@ body { // for old pages without template layout #layout_table { - background-color: $light-gray-color-60; - border: 20px solid #fff; + background-color: var(--light-gray-color-60); + border: 20px solid var(--white); margin: 0; padding: 0; width: 100%; @@ -193,7 +193,7 @@ body { #page-title-container { float: left; - background-color: #fff; + background-color: var(--white); line-height: 20px; margin-left: 15px; margin-right: 15px; @@ -207,7 +207,7 @@ body { max-height: 30px; overflow: hidden; - background: linear-gradient(to bottom, $dark-gray-color-5, $dark-gray-color-10); + background: linear-gradient(to bottom, var(--dark-gray-color-5), var(--dark-gray-color-10)); > .context_icon { margin: 7px 1px 0 9px; @@ -223,8 +223,8 @@ body { } #main-footer { - background-color: $base-color; - color: $white; + background-color: var(--base-color); + color: var(--white); display: flex; padding: 2px 0; grid-column: 1 / 3; @@ -251,7 +251,7 @@ body { margin-right: 2px; a { - color: $white; + color: var(--white); margin: 0 6px; text-decoration: none; &:hover { @@ -273,7 +273,7 @@ body { width: 100%; min-width: $site-width; - border-bottom: 1px solid $light-gray-color-40; + border-bottom: 1px solid var(--light-gray-color-40); } #top-bar { // second row of flex-main @@ -301,10 +301,10 @@ body { flex-direction: row; align-items: stretch; justify-content: space-between; - background-color: $dark-gray-color-10; + background-color: var(--dark-gray-color-10); font-size: 0.9em; min-height: 2.3em; - border-bottom: 1px solid $dark-gray-color-40; + border-bottom: 1px solid var(--dark-gray-color-40); } #tabs { // row 1 of layout_page diff --git a/resources/assets/stylesheets/scss/links.scss b/resources/assets/stylesheets/scss/links.scss index f97ac74..f239ed9 100644 --- a/resources/assets/stylesheets/scss/links.scss +++ b/resources/assets/stylesheets/scss/links.scss @@ -1,13 +1,13 @@ /* --- Links ---------------------------------------------------------------- */ a, a:link, a:visited { - color: $base-color; + color: var(--base-color); text-decoration: none; - &.index { color: #444; } - &.printhead { color: #339; } - &.tree { color: #000; } + &.index { color: var(--base-gray); } + &.printhead { color: var(--base-color); } + &.tree { color: var(--black); } &.toolbar { - color: #91a2b6; + color: var(--brand-color-lighter); font-size: 9px; } } @@ -21,12 +21,12 @@ a[disabled] { } a:hover, a:active, a:hover.index, a:active.index, a:hover.tree { - color: $active-color; + color: var(--active-color); text-decoration: none; } a:hover.toolbar { - color: #eee; + color: var(--dark-gray-color-10); } a.link-intern { diff --git a/resources/assets/stylesheets/scss/lists.scss b/resources/assets/stylesheets/scss/lists.scss index ee7dd4f..8ef1eb7 100644 --- a/resources/assets/stylesheets/scss/lists.scss +++ b/resources/assets/stylesheets/scss/lists.scss @@ -39,7 +39,7 @@ ol { display: flex; // Prevents the mystery gap between elements > li { - border-right: 1px solid $dark-gray-color; + border-right: 1px solid var(--dark-gray-color); &:last-child { border-right: 0; diff --git a/resources/assets/stylesheets/scss/messages.scss b/resources/assets/stylesheets/scss/messages.scss index 453987b..d9f3683 100644 --- a/resources/assets/stylesheets/scss/messages.scss +++ b/resources/assets/stylesheets/scss/messages.scss @@ -13,13 +13,13 @@ a.message-tag { #statusbar_container { > .statusbar { - border: thin solid $light-gray-color; + border: thin solid var(--light-gray-color); min-width: 100%; max-width: 100%; - background-color: $content-color-40; + background-color: var(--content-color-40); > .progress { - background-color: $content-color; + background-color: var(--content-color); width: 100%; min-width: 0; max-width: 0; @@ -27,14 +27,14 @@ a.message-tag { line-height: 20px; &.progress-error { - background-color: $red; + background-color: var(--red); } } > .progresstext { margin-top: -20px; text-align: center; - color: $white; + color: var(--white); height: 20px; line-height: 20px; } @@ -55,7 +55,7 @@ a.message-tag { } .message_body { - background-color: $content-color-20; + background-color: var(--content-color-20); margin: 3px; padding: 10px; } @@ -63,7 +63,7 @@ a.message-tag { .responsive_author { margin: 0; font-size: 0.8em; - color: $base-gray; + color: var(--base-gray); } form.default { diff --git a/resources/assets/stylesheets/scss/mvv.scss b/resources/assets/stylesheets/scss/mvv.scss index 4be1580..c93b214 100644 --- a/resources/assets/stylesheets/scss/mvv.scss +++ b/resources/assets/stylesheets/scss/mvv.scss @@ -3,7 +3,7 @@ display: block; input[type="text"] { box-sizing: border-box; - border: 1px solid $base-color-60; + border: 1px solid var(--base-color-60); border-right-width: 30px; float: left; height: 22px; @@ -42,7 +42,7 @@ dl { dd { padding: 10px 10px 10px 30px; - border-bottom: 1px solid $dark-gray-color-20; + border-bottom: 1px solid var(--dark-gray-color-20); label { display: inline-block; @@ -65,15 +65,15 @@ dl { } blockquote { - border: 1px dashed $dark-gray-color-80; + border: 1px dashed var(--dark-gray-color-80); margin: 3px; padding: 3px; font-size: 0.9em; flex: 1 0 auto; &:hover { - background-color: $yellow-20; - border-color: $red; + background-color: var(--yellow-20); + border-color: var(--red); } } @@ -110,7 +110,7 @@ table { > tbody { &.collapsed > tr > td { - border-bottom: 1px solid $dark-gray-color-20; + border-bottom: 1px solid var(--dark-gray-color-20); padding: 5px; &:first-child { padding-left: 0; @@ -119,7 +119,7 @@ table { &.not-collapsed { > tr > td { - border-bottom: 1px solid $dark-gray-color-20; + border-bottom: 1px solid var(--dark-gray-color-20); padding: 5px; &:first-child { padding-left: 0; @@ -131,7 +131,7 @@ table { } &:last-of-type > tr.last-child > td { - border-bottom: 1px solid $dark-gray-color-20; + border-bottom: 1px solid var(--dark-gray-color-20); } &.ui-sortable-helper { @@ -208,7 +208,7 @@ table { td { border: none; - border-right:1px solid $dark-gray-color-20; + border-right:1px solid var(--dark-gray-color-20); text-align: center; margin: 0; padding:0; @@ -216,17 +216,17 @@ table { &.type{ font-size: 0.5em; &.soll{ - color:$red; + color:var(--red); } &.kann{ - color:$dark-green; + color:var(--dark-green); } } } th { border: none; - border-right:1px solid $dark-gray-color-20; + border-right:1px solid var(--dark-gray-color-20); text-align: center; margin: 0; padding:0; @@ -255,18 +255,18 @@ ul { } &.even { - background-color: $dark-gray-color-10; + background-color: var(--dark-gray-color-10); &:hover { - background-color: $content-color-60; + background-color: var(--content-color-60); } } &.odd { - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); &:hover { - background-color: $content-color-40; + background-color: var(--content-color-40); } } } @@ -314,7 +314,7 @@ ul { padding: 0; li { - border-bottom: solid $dark-gray-color-45 1px; + border-bottom: solid var(--dark-gray-color-45) 1px; padding-top: 5px; padding-left: 12px; margin-bottom: 5px; @@ -402,12 +402,12 @@ select.mvv-search-select-list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - border-top: 1px solid $dark-gray-color-60; + border-top: 1px solid var(--dark-gray-color-60); padding: 3px 20px 3px 2px; height: 1.3em; &:hover { - background:$dark-gray-color-10; + background:var(--dark-gray-color-10); cursor: pointer; font-weight: bold; } @@ -544,11 +544,11 @@ form.default .mvv-inst-chooser select { .mvv-orig-lang { display: none; - border: 1px solid $light-gray-color-40; + border: 1px solid var(--light-gray-color-40); margin: 3px; padding: 3px; font-size: 0.9em; - background-color: $white; + background-color: var(--white); max-height: 10em; overflow: auto; } @@ -561,11 +561,11 @@ form.default .mvv-inst-chooser select { } &.odd { - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); } &.even { - background-color: $content-color-20; + background-color: var(--content-color-20); } } @@ -631,7 +631,7 @@ form.default .mvv-inst-chooser select { .mvv-content-overlay { width: 1100px; position: absolute; - background-color: $white; + background-color: var(--white); height: 80%; } @@ -653,7 +653,7 @@ form.default .mvv-inst-chooser select { } .difflog { - color: $brown; + color: var(--brown); font-size: smaller; vertical-align: text-top; text-decoration: none; diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss index 89125b2..b82ec2b 100644 --- a/resources/assets/stylesheets/scss/my_courses.scss +++ b/resources/assets/stylesheets/scss/my_courses.scss @@ -2,11 +2,11 @@ .content { font-weight: bold; } - border: 2px solid $red; + border: 2px solid var(--red); display: inline-block; padding: 5px; margin: 5px 0; - background: $white; + background: var(--white); } .mycourses-group-selector { diff --git a/resources/assets/stylesheets/scss/navigation-hoverborder.scss b/resources/assets/stylesheets/scss/navigation-hoverborder.scss index 85621e3..2a4b6b3 100644 --- a/resources/assets/stylesheets/scss/navigation-hoverborder.scss +++ b/resources/assets/stylesheets/scss/navigation-hoverborder.scss @@ -1,5 +1,3 @@ -$transition-duration: 300ms; - @mixin border-beneath($color, $margin: 2px, $height: 3px) { border-bottom: 0; padding-bottom: 0; @@ -32,10 +30,10 @@ $transition-duration: 300ms; body:not(.fixed) #navigation-level-1-items { > li.active { - @include border-beneath($dark-gray-color-80); + @include border-beneath(var(--dark-gray-color-80)); } > li:not(.active) { - @include border-beneath($dark-gray-color-40); + @include border-beneath(var(--dark-gray-color-40)); &:not(:hover)::after { @include border-shrink(); } @@ -50,7 +48,7 @@ body:not(.fixed) #navigation-level-1-items { } .overflow li:hover { - @include border-beneath($dark-gray-color-40, 2px, 3px); + @include border-beneath(var(--dark-gray-color-40), 2px, 3px); &::after { transform: translate(0, -4px); } @@ -63,10 +61,10 @@ body:not(.fixed) #navigation-level-1-items { line-height: 25px; } &.current { - @include border-beneath($dark-gray-color-80, -2px, 3px); + @include border-beneath(var(--dark-gray-color-80), -2px, 3px); } &:not(.current) { - @include border-beneath($dark-gray-color-40, -2px, 3px); + @include border-beneath(var(--dark-gray-color-40), -2px, 3px); &:not(:hover)::after { @include border-shrink(); } diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss index 5d0c83d..4e5a46f 100644 --- a/resources/assets/stylesheets/scss/navigation.scss +++ b/resources/assets/stylesheets/scss/navigation.scss @@ -16,7 +16,7 @@ body:not(.fixed) #navigation-level-1-items { font-size: $font-size-base; } a { - color: $base-color; + color: var(--base-color); display: block; padding: 0 0; text-align: center; @@ -50,10 +50,10 @@ body:not(.fixed) #navigation-level-1-items { @include square(16px); background-clip: content-box; - background-color: $red; - border: 3px solid $dark-gray-color-5; + background-color: var(--red); + border: 3px solid var(--dark-gray-color-5); border-radius: 50%; - color: $white; + color: var(--white); content: attr(data-badge); display: inline-block; font-size: 10px; @@ -169,8 +169,8 @@ body:not(.fixed) #navigation-level-1-items { margin: 5px 0 0; padding: 4px 4px; - background-color: $dark-gray-color-5; - border: 1px solid $dark-gray-color-40; + background-color: var(--dark-gray-color-5); + border: 1px solid var(--dark-gray-color-40); border-top: 0; min-width: 150px; @@ -221,7 +221,7 @@ body.fixed { } #navigation-level-1-items { - background-color: $base-color; + background-color: var(--base-color); list-style: none; margin: 0 0 0px -15px; @@ -248,11 +248,11 @@ body.fixed { flex-wrap: nowrap; align-items: center; - color: $white; + color: var(--white); } &:hover { - background-color: $base-color-80; + background-color: var(--base-color-80); } &.overflow { diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss index f91ed7d..27919f4 100644 --- a/resources/assets/stylesheets/scss/oer.scss +++ b/resources/assets/stylesheets/scss/oer.scss @@ -17,7 +17,7 @@ padding-right: 5px; li { padding: 5px; - border-top: thin solid $table-header-color; + border-top: thin solid var(--table-header-color); padding-right: 0px; } li.folder { @@ -29,7 +29,7 @@ list-style-type: none; } > li:last-child { - border-bottom: thin solid $table-header-color; + border-bottom: thin solid var(--table-header-color); } } @@ -54,7 +54,7 @@ .author_host { font-size: 0.8em; display: inline; - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); } .description { margin-top: 5px; @@ -67,7 +67,7 @@ ul.reviews, ol.reviews { margin: 0px; > li.review { margin-bottom: 10px; - border: thin solid $base-color-60; + border: thin solid var(--base-color-60); padding: 10px; display: flex; > .avatar { @@ -82,12 +82,12 @@ ul.reviews, ol.reviews { margin-bottom: 5px; } .origin { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); font-size: 0.8em; } .timestamp { float: right; - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); font-size: 0.8em; } } @@ -101,7 +101,7 @@ ul.reviews, ol.reviews { } .maininfo { - border: thin solid $brand-color-light; + border: thin solid var(--brand-color-light); padding: 10px; } @@ -112,7 +112,7 @@ ul.reviews, ol.reviews { width: 100%; height: calc((100vw - 270px) * 2 / 3); max-height: 666px; - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); background: black; &.image { background-repeat: no-repeat; @@ -168,7 +168,7 @@ ul.reviews, ol.reviews { display: flex; justify-content: space-between; font-size: 0.8em; - color: $black; + color: var(--black); margin-top: 20px; } @@ -177,15 +177,12 @@ ul.reviews, ol.reviews { .oercampus_editmaterial, .oer_material_overview { article.contentbox { display: inline-block; - margin-right: 15px; - margin-bottom: 15px; - margin-top: 0px; - margin-left: 0px; + margin: 0 15px 15px 0; width: 270px; max-width: 270px; box-sizing: border-box; - border: solid 1px $base-color-60; + border: solid 1px var(--base-color-60); transition: all 300ms ease 0s; position: relative; @@ -195,8 +192,8 @@ ul.reviews, ol.reviews { padding-left: 5px; width: 100%; - background-color: $content-color-20; - color: $brand-color-dark; + background-color: var(--content-color-20); + color: var(--brand-color-dark); font-size: 12pt; font-weight: bold; text-align: left; @@ -209,7 +206,7 @@ ul.reviews, ol.reviews { h1 { padding: 5px; margin: 0px; - color: $base-color; + color: var(--base-color); border-bottom: medium none; font-size: medium; display: flex; @@ -230,7 +227,7 @@ ul.reviews, ol.reviews { .image { display: block; - margin: 0px; + margin: 0; height: 180px; background-position: center center; background-size: cover; @@ -254,7 +251,7 @@ ul.reviews, ol.reviews { display: flex; .frame { - border: thin solid $content-color-40; + border: thin solid var(--content-color-40); display: flex; justify-content: space-between; align-items: stretch; @@ -266,7 +263,7 @@ ul.reviews, ol.reviews { align-items: center; justify-content: space-between; border: solid thin black; - background-color: $content-color-20; + background-color: var(--content-color-20); margin: 3px; padding: 5px; } @@ -284,7 +281,7 @@ ul.reviews, ol.reviews { border-top: none; height: 35px; &.active { - background-color: $base-color; + background-color: var(--base-color); } &.erase { background-color: white; @@ -300,8 +297,8 @@ ul.reviews, ol.reviews { } button { - border: thin solid $content-color-40; - background-color: $content-color-20; + border: thin solid var(--content-color-40); + background-color: var(--content-color-20); display: flex; align-items: center; justify-content: center; @@ -321,9 +318,8 @@ ul.reviews, ol.reviews { width: 819px; max-width: calc(100% - 50px); animation: oer-filter-panel-appears 200ms ease-out; - border: thin solid $content-color-40; - margin: 0px; - margin-top: 46px; + border: thin solid var(--content-color-40); + margin: 46px 0 0; height: 183px; display: flex; justify-content: space-around; @@ -350,7 +346,7 @@ ul.reviews, ol.reviews { display: flex; justify-content: space-between; font-size: 0.8em; - color: $black; + color: var(--black); margin-top: 20px; } .level_numbers { @@ -368,14 +364,12 @@ ul.reviews, ol.reviews { .filterpanel_shadow { position: absolute; z-index: 0; - background-color: $dark-gray-color-45; + background-color: var(--dark-gray-color-45); padding: 10px; width: 819px; max-width: calc(100% - 50px); animation: oer-filter-panel-appears 200ms ease-out; - margin: 0px; - margin-top: 49px; - margin-left: 3px; + margin: 49px 0 0 3px; height: 183px; } @@ -388,7 +382,7 @@ ul.reviews, ol.reviews { .browser { margin-top: 15px; padding: 10px; - background-color: $content-color-20; + background-color: var(--content-color-20); width: 840px; max-width: 100%; box-sizing: border-box; @@ -455,15 +449,15 @@ ul.reviews, ol.reviews { display: flex; justify-content: space-between; font-size: 0.8em; - color: $black; + color: var(--black); margin-top: 20px; } } @keyframes oer-filter-panel-appears { from { - max-height: 0px; - border-bottom-width: 0px; + max-height: 0; + border-bottom-width: 0; overflow: hidden; } 99% { diff --git a/resources/assets/stylesheets/scss/opengraph.scss b/resources/assets/stylesheets/scss/opengraph.scss index 6249496..fbd3e31 100644 --- a/resources/assets/stylesheets/scss/opengraph.scss +++ b/resources/assets/stylesheets/scss/opengraph.scss @@ -7,15 +7,15 @@ text-align: right; li { - border-top: thin solid $dark-gray-color-20; + border-top: thin solid var(--dark-gray-color-20); display: inline-block; padding: 5px; &:first-child { - border-left: thin solid $dark-gray-color-20; + border-left: thin solid var(--dark-gray-color-20); } &:last-child { - border-right: thin solid $dark-gray-color-20; + border-right: thin solid var(--dark-gray-color-20); } } .switch-left, .switch-right { @@ -58,7 +58,7 @@ @include clearfix(); font-size: 0.8em; - border: 1px solid $dark-gray-color-20; + border: 1px solid var(--dark-gray-color-20); padding: $padding; min-height: $height; @@ -87,11 +87,11 @@ a.info { box-sizing: border-box; - color: $black; + color: var(--black); display: block; word-break: normal !important; &:hover { - color: $black; + color: var(--black); } } .image { diff --git a/resources/assets/stylesheets/scss/overlapping.scss b/resources/assets/stylesheets/scss/overlapping.scss index 05520b8..d8f6d52 100644 --- a/resources/assets/stylesheets/scss/overlapping.scss +++ b/resources/assets/stylesheets/scss/overlapping.scss @@ -7,10 +7,10 @@ width: 100%; height: 30px; margin-bottom: 5px; - color: $dark-gray-color; + color: var(--dark-gray-color); font-weight: 700; font-size: 16px; - border-bottom: 1px solid $light-gray-color-40; + border-bottom: 1px solid var(--light-gray-color-40); h2 { position: absolute; @@ -41,13 +41,13 @@ ul.mvv-ovl-conflict { top: 0; right: 0; text-align: right; - border-bottom: solid 1px $light-gray-color-40; + border-bottom: solid 1px var(--light-gray-color-40); &:first-of-type { left: 30px; width: auto; text-align: left; - border-bottom: solid 1px $light-gray-color-40; + border-bottom: solid 1px var(--light-gray-color-40); } & > div { @@ -66,7 +66,7 @@ ul.mvv-ovl-conflict { .mvv-ovl-base-course { position: absolute; width: 5px; - color: $red; + color: var(--red); left: 10px; ~ label { diff --git a/resources/assets/stylesheets/scss/pagination.scss b/resources/assets/stylesheets/scss/pagination.scss index c03c410..7a921e0 100644 --- a/resources/assets/stylesheets/scss/pagination.scss +++ b/resources/assets/stylesheets/scss/pagination.scss @@ -30,14 +30,14 @@ .pagination--link { background-color: transparent; border: 0; - color: $base-color; + color: var(--base-color); cursor: pointer; padding: 0; } .current .pagination--link { font-weight: bold; - color: $black; + color: var(--black); } .prev, @@ -68,4 +68,3 @@ margin-left: auto; } } - diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss index 74e6084..a832f46 100644 --- a/resources/assets/stylesheets/scss/personal-notifications.scss +++ b/resources/assets/stylesheets/scss/personal-notifications.scss @@ -6,15 +6,15 @@ width: 100%; height: 100%; font-size: 0.8em; - color: $base-color; + color: var(--base-color); text-align: center; line-height: 24px; - background-color: $dark-gray-color-10; - border: 1px solid $dark-gray-color-40; + background-color: var(--dark-gray-color-10); + border: 1px solid var(--dark-gray-color-40); &.alert { - background-color: $red; - color: $white; + background-color: var(--red); + color: var(--white); } } @@ -25,10 +25,9 @@ width: 49px; height: 30px; - /*border: thin solid $dark-gray-color-20;*/ - color: $base-color; + color: var(--base-color); vertical-align: text-bottom; - background-color: $base-color; + background-color: var(--base-color); position: relative; // Insert invisible padding on top of the arrow in order to try to @@ -90,17 +89,17 @@ // Creates an arrow pointing from the list to the triggering element @include arrow-top-border(10px, $white, 1px, $light-gray-color-80); - background-color: $white; - border-left: thin solid $light-gray-color-60; - border-top: thin solid $light-gray-color-60; + background-color: var(--white); + border-left: thin solid var(--light-gray-color-60); + border-top: thin solid var(--light-gray-color-60); border-collapse: collapse; - color: $black; + color: var(--black); display: none; font-size: 1em; position: absolute; width: $list-width; max-width: $list-width; - box-shadow: 1px 1px 1px $light-gray-color-80; + box-shadow: 1px 1px 1px var(--light-gray-color-80); // Without this, buttons or message boxes would appear on top of the list z-index: 2; @@ -128,14 +127,14 @@ // List item .item { $padding: 5px; - border-top: thin solid $light-gray-color-60; + border-top: thin solid var(--light-gray-color-60); line-height: 20px; height: auto; padding: $padding; white-space: normal; &:hover { - background-color: $light-gray-color-20 + background-color: var(--light-gray-color-20) } &:only-child:hover { @@ -178,10 +177,10 @@ } a:not(.mark-all-as-read) { - color: $brand-color-dark; + color: var(--brand-color-dark); display: block; padding: 0; - &:hover { color: $active-color; } + &:hover { color: var(--active-color); } } .options { @@ -201,8 +200,8 @@ a.mark-all-as-read:not(.invisible), a.enable-desktop-notifications { - background-color: $dark-gray-color-15; - border-bottom: thin solid $dark-gray-color-45; + background-color: var(--dark-gray-color-15); + border-bottom: thin solid var(--dark-gray-color-45); display: block; max-height: 31px; padding: 5px 5px 5px 14px; diff --git a/resources/assets/stylesheets/scss/plugins.scss b/resources/assets/stylesheets/scss/plugins.scss index 2bcc6fa..1673ad7 100644 --- a/resources/assets/stylesheets/scss/plugins.scss +++ b/resources/assets/stylesheets/scss/plugins.scss @@ -31,7 +31,7 @@ width: 100%; height: 4em; margin: 0; - background-image: linear-gradient(to bottom, rgba(255,0,0,0), $white) + background-image: linear-gradient(to bottom, rgba(255,0,0,0), var(--white)) } } diff --git a/resources/assets/stylesheets/scss/profile.scss b/resources/assets/stylesheets/scss/profile.scss index d6c621f..ef7e75a 100644 --- a/resources/assets/stylesheets/scss/profile.scss +++ b/resources/assets/stylesheets/scss/profile.scss @@ -77,7 +77,7 @@ } #select_fach_abschluss > tbody > tr:last-child > td { - border-bottom: 1px solid $table-header-color; + border-bottom: 1px solid var(--table-header-color); } @include media-breakpoint-small-up(){ diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss index 3346d66..55358f4 100644 --- a/resources/assets/stylesheets/scss/progress_indicator.scss +++ b/resources/assets/stylesheets/scss/progress_indicator.scss @@ -11,7 +11,7 @@ } .progress-indicator-description, .progress-indicator-description-default { - color: $dark-gray-color-45; + color: var(--dark-gray-color-45); text-align: center; margin-top: 10px; } diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss index 15aa062..9da55b7 100644 --- a/resources/assets/stylesheets/scss/questionnaire.scss +++ b/resources/assets/stylesheets/scss/questionnaire.scss @@ -9,8 +9,8 @@ $width: 270px; align-items: stretch; width: 100%; aside { - background: $white; - border: 1px solid $content-color-40; + background: var(--white); + border: 1px solid var(--content-color-40); min-width: $width; width: $width; .questions_container { @@ -24,7 +24,7 @@ $width: 270px; > .admin, > .add_question, .questions > * { width: calc(100% - 8px); padding: 4px; - border-bottom: 1px solid $content-color-40; + border-bottom: 1px solid var(--content-color-40); min-height: 40px; display: flex; justify-content: start; @@ -37,7 +37,7 @@ $width: 270px; margin-left: 15px; } &.active { - background-color: $yellow-40; + background-color: var(--yellow-40); &::before { content: ''; @@ -46,7 +46,7 @@ $width: 270px; width: 0px; border-top: 25px transparent solid; border-bottom: 25px transparent solid; - border-left: 7px $content-color-40 solid; + border-left: 7px var(--content-color-40) solid; right: -8px; } &::after { @@ -56,7 +56,7 @@ $width: 270px; width: 0px; border-top: 25px transparent solid; border-bottom: 25px transparent solid; - border-left: 7px $yellow-40 solid; + border-left: 7px var(--yellow-40) solid; right: -7px; } } @@ -90,7 +90,7 @@ $width: 270px; } .rightside { - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); border-left: none; width: 100%; padding: 10px; @@ -134,10 +134,10 @@ $width: 270px; align-items: center; input { width: calc(100% - 74px); - border: 1px solid $light-gray-color-40; + border: 1px solid var(--light-gray-color-40); } button { - border: 1px solid $light-gray-color-40; + border: 1px solid var(--light-gray-color-40); width: 32px; height: 32px; padding: 6px; @@ -158,7 +158,7 @@ $width: 270px; /* ab hier der alte kram */ section { - border: thin solid $black; + border: thin solid var(--black); margin: 3px; } @@ -227,12 +227,12 @@ $width: 270px; flex-wrap: wrap; justify-content: center; align-items: stretch; - border: thin dashed $content-color-40; + border: thin dashed var(--content-color-40); > a { background-color: transparent; margin: 10px; - border: thin solid $content-color-20; + border: thin solid var(--content-color-20); padding: 5px; width: 100px; min-width: 100px; @@ -270,35 +270,35 @@ $width: 270px; .ct-label { color: rgba(0, 0, 0, 0.8); - text-shadow: -1px 0px $white, 0px 1px $white, 1px 0px $white, 0px -1px $white; + text-shadow: -1px 0px var(--white), 0px 1px var(--white), 1px 0px var(--white), 0px -1px var(--white); font-size: x-small; - fill: $black; + fill: var(--black); } .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut { //Balkenfarbe - stroke: $red; + stroke: var(--red); } //Tortenstücke: .ct-series-a .ct-area, .ct-series-a .ct-slice-pie { - fill: $red; + fill: var(--red); } .ct-series-b .ct-area, .ct-series-b .ct-slice-pie { - fill: $brand-color-dark; + fill: var(--brand-color-dark); } .ct-series-c .ct-area, .ct-series-c .ct-slice-pie { - fill: $activity-color; + fill: var(--activity-color); } .ct-series-d .ct-area, .ct-series-d .ct-slice-pie { - fill: $content-color; + fill: var(--content-color); } .ct-series-e .ct-area, .ct-series-e .ct-slice-pie { - fill: $orange; + fill: var(--orange); } table tbody tr:last-child td { @@ -338,7 +338,7 @@ $width: 270px; } .invalidation_notice { - color: $red; + color: var(--red); } } } @@ -357,20 +357,20 @@ $width: 270px; .questionnaire .terms, .questionnaire_results .terms { text-align: center; - border-top: thin solid $content-color-40; - color: $light-gray-color; + border-top: thin solid var(--content-color-40); + color: var(--light-gray-color); margin: 0 -10px; } #qr_code { display: none; - background-color: $white; + background-color: var(--white); width: 100%; height: 100%; flex-direction: column; justify-content: space-around; align-items: center; - color: $dark-gray-color; + color: var(--dark-gray-color); .code > div { margin-left: auto; diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss index b82690e..ef6c372 100644 --- a/resources/assets/stylesheets/scss/quicksearch.scss +++ b/resources/assets/stylesheets/scss/quicksearch.scss @@ -5,9 +5,9 @@ form#search_sem_quick_search_frame { } input.quicksearchbox { - background-color: $dark-gray-color-10; - border: 1px solid $dark-gray-color-40; - color: $base-color; + background-color: var(--dark-gray-color-10); + border: 1px solid var(--dark-gray-color-40); + color: var(--base-color); font-size: 14px; width: 250px; height: 19px; @@ -21,7 +21,7 @@ div.quicksearch_frame { box-sizing: border-box; border-width: 1px 30px 1px 1px; border-style: solid; - border-color: $base-color-60; + border-color: var(--base-color-60); border-image: none; display: inline-block !important; } @@ -85,7 +85,7 @@ div.quicksearch_frame { float: none; margin-left: 0; height: 30px; - background-color: $base-color-60; + background-color: var(--base-color-60); background-position: center center; } } @@ -106,8 +106,8 @@ div.quicksearch_frame { .autocomplete__results { list-style-type: none; padding: 1px; - border: 1px solid $light-gray-color-40; - background-color: $white; + border: 1px solid var(--light-gray-color-40); + background-color: var(--white); max-height: 275px; width: 600px; overflow-x: auto; @@ -120,8 +120,8 @@ div.quicksearch_frame { align-items: flex-start; &:hover, &.autocomplete__result--selected { - background-color: $base-color; - color: $white; + background-color: var(--base-color); + color: var(--white); } img { diff --git a/resources/assets/stylesheets/scss/raumzeit.scss b/resources/assets/stylesheets/scss/raumzeit.scss index f5e904e..8db05f0 100644 --- a/resources/assets/stylesheets/scss/raumzeit.scss +++ b/resources/assets/stylesheets/scss/raumzeit.scss @@ -15,14 +15,14 @@ div.at_least_one_teacher { } .is_ex_termin { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); text-decoration: line-through; } .contentbox.timesrooms { > form { article { - border-color: $content-color-40; + border-color: var(--content-color-40); border-style: solid; border-width: 1px; margin: 10px; @@ -76,13 +76,13 @@ div.at_least_one_teacher { } article header { &.red { - border-left: 3px solid $red; + border-left: 3px solid var(--red); } &.yellow { - border-left: 3px solid $activity-color; + border-left: 3px solid var(--activity-color); } &.green { - border-left: 3px solid $green; + border-left: 3px solid var(--green); } &.red .tooltip-icon { @include icon(before, radiobutton-checked, status-red); diff --git a/resources/assets/stylesheets/scss/report.scss b/resources/assets/stylesheets/scss/report.scss index d221b71..3e89af6 100644 --- a/resources/assets/stylesheets/scss/report.scss +++ b/resources/assets/stylesheets/scss/report.scss @@ -34,8 +34,8 @@ &-info { .ui-dialog-titlebar { - background-color: $base-color; - color: white; + background-color: var(--base-color); + color: var(--white); } .ui-dialog-content { background-image: url("#{$image-path}/messagebox/info.png"); @@ -44,8 +44,8 @@ &-success { .ui-dialog-titlebar { - background-color: $dark-green; - color: white; + background-color: var(--dark-green); + color: var(--white); } .ui-dialog-content { @@ -55,7 +55,7 @@ &-warning { .ui-dialog-titlebar { - background-color: $yellow; + background-color: var(--yellow); color: black; } @@ -84,8 +84,8 @@ &-error { .ui-dialog-titlebar { - background-color: $red; - color: white; + background-color: var(--red); + color: var(--white); } .ui-dialog-content { background-image: url("#{$image-path}/messagebox/error.png"); diff --git a/resources/assets/stylesheets/scss/resources.scss b/resources/assets/stylesheets/scss/resources.scss index 95d7217..1d792a3 100644 --- a/resources/assets/stylesheets/scss/resources.scss +++ b/resources/assets/stylesheets/scss/resources.scss @@ -30,7 +30,7 @@ tr.resource-planning-selected-request { td { - background: $yellow-40; + background: var(--yellow-40); } } @@ -66,8 +66,8 @@ ul.resource-tree { .resource-tree { .selected-resource { - background-color: $origin-base-color; - color: $white; + background-color: var(--origin-base-color); + color: var(--white); padding: 2px; width: calc(100% - 21px); } @@ -212,15 +212,15 @@ ul.resource-tree { .resource-request { .overlapping-requests { - color: $yellow-60; + color: var(--yellow-60); } .overlapping-bookings { - color: $red-60; + color: var(--red-60); } .resource-available { - color: $green-60; + color: var(--green-60); } } @@ -262,7 +262,7 @@ ul.resource-tree { .booking-list-interval-date { &.not-taking-place { text-decoration: line-through; - color: $light-gray-color; + color: var(--light-gray-color); } margin-right: 1.2em; @@ -354,7 +354,7 @@ ul.resource-tree { } .fc-time, .fc-widget-header { - background-color: $content-color-20; + background-color: var(--content-color-20); } .request-list { @@ -450,7 +450,7 @@ form#resolve-request, form#decline-request { > th { &:first-child { z-index: 2; - background-color: $content-color-20; + background-color: var(--content-color-20); min-width: 180px; left: 0; } @@ -460,7 +460,7 @@ form#resolve-request, form#decline-request { z-index: 1; border-top: none; border-bottom: none !important; - box-shadow: inset 0 1px 0 $brand-color-darker; + box-shadow: inset 0 1px 0 var(--brand-color-darker); } } } @@ -472,7 +472,7 @@ form#resolve-request, form#decline-request { position: sticky; left: 0; z-index: 1; - background: $white; + background: var(--white); } } } diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss index 27e279e..1c2d2f1 100644 --- a/resources/assets/stylesheets/scss/responsive.scss +++ b/resources/assets/stylesheets/scss/responsive.scss @@ -71,7 +71,7 @@ $sidebarOut: -330px; } #responsive-navigation-items { - background-color: $base-color; + background-color: var(--base-color); left: 0; max-height: calc(100vh - $header-bar-container-height - 5px); max-width: $responsive-menu-width; @@ -132,7 +132,7 @@ $sidebarOut: -330px; background-color: transparent; &:hover { - background-color: $base-color-80; + background-color: var(--base-color-80); } } } @@ -154,14 +154,14 @@ $sidebarOut: -330px; } .navigation-item { - background-color: $base-color; + background-color: var(--base-color); display: flex; flex-wrap: wrap; list-style-type: none; margin: 0px; &:not(:last-child) { - border-bottom: 1px solid $white; + border-bottom: 1px solid var(--white); } &.navigation-up, @@ -177,22 +177,22 @@ $sidebarOut: -330px; } &:hover { - background-color: $base-color-80; + background-color: var(--base-color-80); } } &.navigation-item-active { - background-color: $base-color-80; + background-color: var(--base-color-80); } a { - color: $white; + color: var(--white); cursor: pointer; } button { - color: $white; + color: var(--white); cursor: pointer; display: flex; flex: 0; @@ -205,20 +205,20 @@ $sidebarOut: -330px; } &.navigation-in { - border-left: 1px solid $base-color-60; + border-left: 1px solid var(--base-color-60); } } &:not(.navigation-current):not(.navigation-up) { button:hover { - background-color: $base-color-80; + background-color: var(--base-color-80); } } } .navigation-title { - color: $white; + color: var(--white); flex: 1; > a { @@ -255,7 +255,7 @@ $sidebarOut: -330px; flex: 0; &:hover { - background-color: $base-color-80; + background-color: var(--base-color-80); } } @@ -318,7 +318,7 @@ $sidebarOut: -330px; } #sidebar { - background-color: $white; + background-color: var(--white); max-height: calc(100vh - 100px); left: 15px; position: absolute; @@ -722,8 +722,8 @@ html:not(.responsive-display):not(.fullscreen-mode) { flex-direction: row; flex-wrap: nowrap; - background-color: $dark-gray-color-10; - border-bottom: 1px solid $dark-gray-color-40; + background-color: var(--dark-gray-color-10); + border-bottom: 1px solid var(--dark-gray-color-40); .colorblock, #context-title, diff --git a/resources/assets/stylesheets/scss/scroll-to-top.scss b/resources/assets/stylesheets/scss/scroll-to-top.scss index aad5cd2..531c1ca 100644 --- a/resources/assets/stylesheets/scss/scroll-to-top.scss +++ b/resources/assets/stylesheets/scss/scroll-to-top.scss @@ -8,7 +8,7 @@ body #scroll-to-top { margin-right: $scroll-to-top-margin; margin-bottom: $scroll-to-top-margin; padding: 10px; - background: $base-color; + background: var(--base-color); border: 1px solid transparent; background-clip: padding-box; cursor: pointer; @@ -19,7 +19,7 @@ body #scroll-to-top { transition: all 250ms ease-in-out; z-index: 1; &:hover { - background: $brand-color-darker; + background: var(--brand-color-darker); border-radius: 2px; } &.hide { diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss index 8ba202a..7cc1474 100644 --- a/resources/assets/stylesheets/scss/search.scss +++ b/resources/assets/stylesheets/scss/search.scss @@ -1,12 +1,12 @@ $icon-size: 32px; label.inactive-settings-category { - color: $red; + color: var(--red); } #search { // "Searching..." info #searching-gif { - color: $dark-gray-color-45; + color: var(--dark-gray-color-45); display: none; text-align: center; @@ -42,13 +42,13 @@ label.inactive-settings-category { } article { - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); margin-bottom: 8px; margin-top: 8px; > header { - background-color: $content-color-20; - color: $base-color; + background-color: var(--content-color-20); + color: var(--base-color); display: flex; flex-direction: row; @@ -85,11 +85,11 @@ label.inactive-settings-category { } &:not(:first-child) { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); } &:hover { - background-color: $light-gray-color-20; + background-color: var(--light-gray-color-20); } &.search-extended-result { @@ -131,7 +131,7 @@ label.inactive-settings-category { } .search-result-details { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); font-size: $font-size-small; } } @@ -145,7 +145,7 @@ label.inactive-settings-category { .search-result-time { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); flex: 1; font-size: $font-size-small; text-align: right; @@ -153,7 +153,7 @@ label.inactive-settings-category { } .search-result-additional { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); font-size: $font-size-small; text-align: right; } @@ -180,7 +180,7 @@ label.inactive-settings-category { } a.no-result { - color: $base-gray; + color: var(--base-gray); pointer-events: none; cursor: default; } @@ -191,9 +191,9 @@ div#div-search-input { // visual adjustments for the reset button button#reset-search { - background-color: $white; - border-bottom: 1px solid $light-gray-color-40; - border-top: 1px solid $light-gray-color-40; + background-color: var(--white); + border-bottom: 1px solid var(--light-gray-color-40); + border-top: 1px solid var(--light-gray-color-40); margin-left: -1px; padding-left: 10px; } @@ -212,8 +212,8 @@ div#div-search-input { .filter-items { .button { - background-color: $content-color-20; - color: $brand-color-dark; + background-color: var(--content-color-20); + color: var(--brand-color-dark); min-width: auto; border: 0; white-space: nowrap; diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss index ff30ef5..f963fd0 100644 --- a/resources/assets/stylesheets/scss/select.scss +++ b/resources/assets/stylesheets/scss/select.scss @@ -7,7 +7,7 @@ } .vs__option-color { - border: solid thin $content-color-40; + border: solid thin var(--content-color-40); padding-left: 20px; height: 16px; margin-right: 4px; @@ -27,13 +27,13 @@ } &.studip-v-select-drop-up { - border-bottom: solid thin $content-color-40; + border-bottom: solid thin var(--content-color-40); border-top: none; } &.studip-v-select-ul-drop-up { border-bottom: none; - border-top: solid thin $content-color-40; + border-top: solid thin var(--content-color-40); box-shadow: 0px -3px 6px 0 rgba(0, 0, 0, 0.15); } @@ -45,4 +45,4 @@ form.default .studip-v-select .vs__selected { padding: 0; margin: 2px 2px 0; -}
\ No newline at end of file +} diff --git a/resources/assets/stylesheets/scss/selects.scss b/resources/assets/stylesheets/scss/selects.scss index 22e152a..d525654 100644 --- a/resources/assets/stylesheets/scss/selects.scss +++ b/resources/assets/stylesheets/scss/selects.scss @@ -1,5 +1,5 @@ -$select-border: 1px solid $light-gray-color-40; -$select-border-focus: 1px solid $brand-color-dark; +$select-border: 1px solid var(--light-gray-color-40); +$select-border-focus: 1px solid var(--brand-color-dark); $select-border-radius: 0; $select-height-default: 30px; $select-arrow-size: 10; @@ -8,7 +8,7 @@ select { // Reset appearance box-sizing: border-box; appearance: none; - background-color: $white; + background-color: var(--white); font-size: 1em; vertical-align: baseline; &::-ms-expand { diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss index b67a49e..9a556a4 100644 --- a/resources/assets/stylesheets/scss/sidebar.scss +++ b/resources/assets/stylesheets/scss/sidebar.scss @@ -1,5 +1,5 @@ #sidebar { - background: $white; + background: var(--white); border-left: 0; display: inline-block; height: max-content; @@ -33,7 +33,7 @@ flex: 0; background-color: rgba(255, 255, 255, 1); - border: 0px solid $base-color-20; + border: 0px solid var(--base-color-20); padding: 0px; max-height: 60px; } @@ -46,7 +46,7 @@ padding: 12px 15px 0; border-bottom: 12px solid transparent; - color: $white; + color: var(--white); font-size: 1.2em; overflow: hidden; word-break: break-word; @@ -85,15 +85,15 @@ } .sidebar-widget, .sidebar-widget-placeholder { - background: $white; - border: 1px solid $content-color-40; + background: var(--white); + border: 1px solid var(--content-color-40); margin: 15px 0 0; width: $sidebar-width - 5px; } .sidebar-widget-header, .sidebar-widget-extra { - background: $content-color-20; - color: $base-color; + background: var(--content-color-20); + color: var(--base-color); font-weight: bold; padding: 4px; } @@ -152,27 +152,27 @@ div#sidebar-navigation { } span[disabled], a[disabled] { - color: $dark-gray-color-80; + color: var(--dark-gray-color-80); cursor: not-allowed; font-weight: lighter; } &.sidebar-navigation > li.active { - background-color: $base-color; + background-color: var(--base-color); margin-left: -4px; //#arrow > .right-border(14px, $content-color-20, 1px, $content-color-40, -5px); @include arrow-right-border(14px, $base-color, 1px, $base-color, -5px); a { - color: $white; + color: var(--white); padding-left: 4px; } } &.sidebar-views > li.active { - background: $activity-color-40; + background: var(--activity-color-40); margin-left: -5px; - box-shadow: inset 0 0 0 1px $activity-color; + box-shadow: inset 0 0 0 1px var(--activity-color); @include arrow-right-border(14px, $activity-color-40, 1px, $activity-color, -5px); a, button { - color: $base-color; + color: var(--base-color); padding-left: 5px; } } @@ -218,7 +218,7 @@ div#sidebar-navigation { } .sidebar-widget { - background: $white; + background: var(--white); .widget-options { list-style: none; @@ -261,7 +261,7 @@ div#sidebar-navigation { } } .sidebar-widget-content { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); overflow-wrap: break-word; padding: 4px; transition: all 0.5s; @@ -301,7 +301,7 @@ select.sidebar-selectlist { input[type=text] { box-sizing: border-box; - border: 1px solid $dark-gray-color-30; + border: 1px solid var(--dark-gray-color-30); border-right: none; flex: 1; padding: .25em .5em; @@ -309,9 +309,9 @@ select.sidebar-selectlist { } .submit-search { - background-color: $content-color-20; - border: 1px solid $dark-gray-color-30; - border-left-color: $light-gray-color-40; + background-color: var(--content-color-20); + border: 1px solid var(--dark-gray-color-30); + border-left-color: var(--light-gray-color-40); border-radius: 0; color: transparent; cursor: pointer; diff --git a/resources/assets/stylesheets/scss/skiplinks.scss b/resources/assets/stylesheets/scss/skiplinks.scss index 3d49222..40c5126 100644 --- a/resources/assets/stylesheets/scss/skiplinks.scss +++ b/resources/assets/stylesheets/scss/skiplinks.scss @@ -1,7 +1,7 @@ /* skiplink-area highlighting -------------------------------------------- */ #skip_link_navigation { - background-color: $white; - border: 2px solid $orange; + background-color: var(--white); + border: 2px solid var(--orange); left: 50vw; margin: 0; padding: 10px; @@ -30,15 +30,15 @@ button.skiplink { border: 0; - background-color: $white; - color: $base-color; + background-color: var(--white); + color: var(--base-color); cursor: pointer; line-height: 1em; margin-bottom: 0.1em; &:hover, &:active { - color: $active-color; + color: var(--active-color); } @media not prefers-reduced-motion { diff --git a/resources/assets/stylesheets/scss/start.scss b/resources/assets/stylesheets/scss/start.scss index d3539f5..43bde3a 100644 --- a/resources/assets/stylesheets/scss/start.scss +++ b/resources/assets/stylesheets/scss/start.scss @@ -8,7 +8,7 @@ #main, #choices { width: 99%; - border: 1px solid $dark-gray-color-60; + border: 1px solid var(--dark-gray-color-60); } .studip-widget-wrapper { @@ -17,13 +17,13 @@ } .studip-widget { - border: 1px solid $base-color-20; + border: 1px solid var(--base-color-20); transition: border-color 300ms ease-in-out; .widget-header { box-sizing: border-box; - background-color: $content-color-20; - color: $brand-color-dark; + background-color: var(--content-color-20); + color: var(--brand-color-dark); font-size: 1.1em; font-weight: bold; line-height: 2em; @@ -54,12 +54,12 @@ } .studip-widget:hover { - border: 1px solid $brand-color-darker; + border: 1px solid var(--brand-color-darker); transition: border-color 300ms ease-in-out; } #widget_choices{ - border-right: 1px dashed $brand-color-darker; + border-right: 1px dashed var(--brand-color-darker); margin-right: 25px; } .start-widgetcontainer { @@ -80,7 +80,7 @@ width: 100%; } .ui-widgetContainer { - color: $white; + color: var(--white); background-image: none; } @@ -92,9 +92,9 @@ line-height: 30px; text-align: center; - color: $white; + color: var(--white); font-size: 1.3em; - background-color: $content-color; + background-color: var(--content-color); } .ui-widget_head:hover { @@ -104,24 +104,24 @@ .ui-widget_head h1 { line-height: 100px; text-align: center; - color: $black; + color: var(--black); } .addclip-widgets { - color: $black; + color: var(--black); list-style: none; margin: 0; padding: 0; a:link, a:visited { - color: $black; + color: var(--black); } a:hover, a:active { - color: $active-color; + color: var(--active-color); } li { - border-top: 1px solid $content-color; + border-top: 1px solid var(--content-color); padding: 4px 0; &:first-child { @@ -163,7 +163,7 @@ div.start-widgetcontainer { display: none; } &.move { - border: $base-color-80 dashed 1px; + border: var(--base-color-80) dashed 1px; } } } @@ -192,7 +192,7 @@ div.available-widgets { } &.move { - border: $base-color-80 dashed 1px; + border: var(--base-color-80) dashed 1px; } } diff --git a/resources/assets/stylesheets/scss/statusgroups.scss b/resources/assets/stylesheets/scss/statusgroups.scss index c49bea6..f5bfaee 100644 --- a/resources/assets/stylesheets/scss/statusgroups.scss +++ b/resources/assets/stylesheets/scss/statusgroups.scss @@ -19,8 +19,8 @@ section.course-statusgroups { } section { - border-left: 1px solid $content-color-20; - border-right: 1px solid $content-color-20; + border-left: 1px solid var(--content-color-20); + border-right: 1px solid var(--content-color-20); table { td.memberactions { @@ -29,7 +29,7 @@ section.course-statusgroups { thead { tr th { - background-color: $content-color-20; + background-color: var(--content-color-20); } } @@ -37,14 +37,14 @@ section.course-statusgroups { tr td { span.member-invisible { font-style: italic; - color: $light-gray-color; + color: var(--light-gray-color); } } } tfoot { tr td { - background-color: $content-color-20; + background-color: var(--content-color-20); padding-left: 5px; padding-right: 0; } @@ -58,17 +58,16 @@ section.course-statusgroups { } &.draggable.open { - background-color: $white; + background-color: var(--white); } } footer { - background-color: $content-color-20; - border-top: 1px solid $black; + background-color: var(--content-color-20); + border-top: 1px solid var(--black); font-size: medium; - padding: 5px; - padding-left: 18px; + padding: 5px 5px 5px 18px; text-align: left; } diff --git a/resources/assets/stylesheets/scss/studip-overlay.scss b/resources/assets/stylesheets/scss/studip-overlay.scss index a3dd66a..519ed8f 100644 --- a/resources/assets/stylesheets/scss/studip-overlay.scss +++ b/resources/assets/stylesheets/scss/studip-overlay.scss @@ -42,7 +42,7 @@ margin-bottom: 0; padding-bottom: 100px; - color: $white; + color: var(--white); border-bottom: 0; } @@ -59,13 +59,14 @@ border: none; border-radius: 2px; - box-shadow: 0 0 3px $light-gray-color-20; + box-shadow: 0 0 3px var(--light-gray-color-20); - background-color: $light-gray-color; + background-color: var(--light-gray-color); - &::-moz-progress-bar, &::-webkit-progress-value { - background-color: $yellow-40; - transition: all 300ms; + &::-moz-progress-bar, + &::-webkit-progress-value { + background-color: var(--yellow-40); + transition: all $transition-duration; } } @@ -79,7 +80,7 @@ margin: 60px 0 0; padding: 0; text-align: center; - color: $white; + color: var(--white); max-height: 120px; overflow: hidden; } diff --git a/resources/assets/stylesheets/scss/studip-selection.scss b/resources/assets/stylesheets/scss/studip-selection.scss index db539f1..83282da 100644 --- a/resources/assets/stylesheets/scss/studip-selection.scss +++ b/resources/assets/stylesheets/scss/studip-selection.scss @@ -24,7 +24,7 @@ } li:not(.empty-placeholder) { - color: $base-color; + color: var(--base-color); cursor: pointer; margin: 1px 0; padding-right: 0.5em; @@ -39,7 +39,7 @@ } .studip-selection-selectable li.empty-placeholder { - color: $text-color; + color: var(--text-color); padding-left: 20px; position: relative; @@ -106,7 +106,7 @@ } .studip-selection-label { - color: $active-color; + color: var(--active-color); } } } diff --git a/resources/assets/stylesheets/scss/study-area-selection.scss b/resources/assets/stylesheets/scss/study-area-selection.scss index 44a314e..2d77ba5 100644 --- a/resources/assets/stylesheets/scss/study-area-selection.scss +++ b/resources/assets/stylesheets/scss/study-area-selection.scss @@ -3,8 +3,8 @@ padding: 1em; h3 { margin-top: 1em; } - .odd { background-color: #f3f5f8; } - .even { background-color: $content-color-20; } + .odd { background-color: var(--content-color-10); } + .even { background-color: var(--content-color-20); } } #study_area_selection_none, diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss index cfc0e3b..63b0b96 100644 --- a/resources/assets/stylesheets/scss/table_of_contents.scss +++ b/resources/assets/stylesheets/scss/table_of_contents.scss @@ -33,11 +33,10 @@ ul.numberedchapters { position: absolute; right: -22px; top: -25px; - background-color: $white; - border: 1px solid #d0d7e3; + background-color: var(--white); + border: 1px solid var(--content-color-40); margin-bottom: 10px; - -webkit-box-shadow: 2px 2px #ccc; - box-shadow: 2px 2px #ccc; + box-shadow: 2px 2px var(--dark-gray-color-30); > section { @@ -56,10 +55,10 @@ ul.numberedchapters { #toc_header { height: 58px; overflow: hidden; - background-color: $white; - color: $black; + background-color: var(--white); + color: var(--black); margin-bottom: -0.5em; - border-bottom: thin solid #d0d7e3; + border-bottom: thin solid var(--content-color-40); display: flex; justify-content: space-between; align-items: center; @@ -72,7 +71,7 @@ ul.numberedchapters { } #toc_h1 { - color: $black; + color: var(--black); font-weight: 500; margin-left: 10px; margin-bottom: unset; @@ -93,7 +92,7 @@ ul.numberedchapters { #toc_nav { height: 40px; position: fixed; - background-color: $brand-color-darker; + background-color: var(--brand-color-darker); } #toc_icon { @@ -131,7 +130,7 @@ section > .toc { font-size: 1em; > div { - border-bottom: 1px solid #E9E9E9; + border-bottom: 1px solid var(--dark-gray-color-10); margin-bottom: 5px; } } @@ -147,21 +146,21 @@ section > .toc { } li div:hover { - background-color: $light-gray-color-20; - color: $base-color; + background-color: var(--light-gray-color-20); + color: var(--base-color); } li.active > div { - color: $black; + color: var(--black); } li.active > div:hover { - color: $white; + color: var(--white); } li.active > div a { - color: $black; + color: var(--black); } .toc > li { @@ -176,14 +175,14 @@ section > .toc { .toc >li .selected { font-weight: 700; - background-color: $light-gray-color-20; + background-color: var(--light-gray-color-20); } } #wikifooter { - background-color: $content-color-20; - border-top: 1px solid $brand-color-darker; + background-color: var(--content-color-20); + border-top: 1px solid var(--brand-color-darker); clear: both; padding: 0; height: 58px; @@ -234,8 +233,7 @@ section > .toc { #toc-button { - background-image: url(../images/icons/blue/table-of-contents.svg); - background-size: 24px; + background-image: url('#{$icon-path}blue/table-of-contents.svg'); height: 24px; width: 24px; diff --git a/resources/assets/stylesheets/scss/tabs.scss b/resources/assets/stylesheets/scss/tabs.scss index 21731db..b37005e 100644 --- a/resources/assets/stylesheets/scss/tabs.scss +++ b/resources/assets/stylesheets/scss/tabs.scss @@ -19,7 +19,7 @@ div.clear } li { float: left; } a { - color: $black; + color: var(--black); } } @@ -31,16 +31,16 @@ div.clear .quiet img { opacity: 0.25; } li { - background-color: $dark-gray-color-10; + background-color: var(--dark-gray-color-10); &:last-child { border-right: none; } &.current { - color: $base-color; + color: var(--base-color); } &:hover { - color: $base-color; + color: var(--base-color); padding-top: 0; } @@ -48,12 +48,12 @@ div.clear padding-top: 0; line-height: 25px; a, span.quiet { - color: $base-color; + color: var(--base-color); } } } a, span.quiet { - color: $black; + color: var(--black); float: left; display: block; @@ -92,8 +92,8 @@ div.clear right: inherit; padding: 0 0 10px 0; margin-top: 10px; - background: $content-color-20; - box-shadow: 1px 1px 1px $dark-gray-color-60; + background: var(--content-color-20); + box-shadow: 1px 1px 1px var(--dark-gray-color-60); text-align: left; white-space: nowrap; @@ -103,7 +103,7 @@ div.clear } a:hover { - color: $red !important; + color: var(--red) !important; } } @@ -122,13 +122,13 @@ div.clear .action-menu-content:before { border-color: rgba(194, 225, 245, 0); - border-bottom-color: $dark-gray-color-60; + border-bottom-color: var(--dark-gray-color-60); border-width: 9px; margin-left: -8px; } .action-menu-content:after { border-color: rgba(194, 225, 245, 0); - border-bottom-color: $content-color-20; + border-bottom-color: var(--content-color-20); border-width: 8px; margin-left: -8px; } diff --git a/resources/assets/stylesheets/scss/tfa.scss b/resources/assets/stylesheets/scss/tfa.scss index 178eb7a..643b4ed 100644 --- a/resources/assets/stylesheets/scss/tfa.scss +++ b/resources/assets/stylesheets/scss/tfa.scss @@ -20,7 +20,7 @@ form.default { .tfa-code-input { text-align: center; .tfa-code-wrapper { - border: 1px solid $base-gray; + border: 1px solid var(--base-gray); display: inline-block; font-size: 2em; line-height: 2em; @@ -28,7 +28,7 @@ form.default { } input[type="number"] { - background: $dark-gray-color-10; + background: var(--dark-gray-color-10); border: 0; box-sizing: unset; font-family: monospace; @@ -40,15 +40,15 @@ form.default { text-align: center; vertical-align: top; - color: $base-gray; + color: var(--base-gray); &:focus { - background-color: $activity-color-20; - color:$black; + background-color: var(--activity-color-20); + color:var(--black); outline: 0; } &:invalid { box-shadow: none; - color: $base-gray; + color: var(--base-gray); outline: 0; } diff --git a/resources/assets/stylesheets/scss/tooltip.scss b/resources/assets/stylesheets/scss/tooltip.scss index a2f07e3..4b7b36b 100644 --- a/resources/assets/stylesheets/scss/tooltip.scss +++ b/resources/assets/stylesheets/scss/tooltip.scss @@ -2,16 +2,16 @@ %tooltip { @include arrow-bottom-border(9px, $dark-gray-color-5, 1px, $dark-gray-color-30, 5px); - background-color: $dark-gray-color-5; - border: 1px solid $dark-gray-color-30; - box-shadow: 0 1px 0 fade-out(#fff, 0.5) inset; - font-size: $font-size-base; + background-color: var(--dark-gray-color-5); + border: 1px solid var(--dark-gray-color-30); + box-shadow: 0 1px 0 fade-out($white, 0.5) inset; + font-size: var(--font-size-base); margin-bottom: 8px; max-width: 230px; padding: 10px; position: absolute; text-align: left; - text-shadow: 0 1px 0 fade-out(#fff, 0.5); + text-shadow: 0 1px 0 fade-out($white, 0.5); white-space: normal; z-index: 10000; diff --git a/resources/assets/stylesheets/scss/tour.scss b/resources/assets/stylesheets/scss/tour.scss index 006a732..cfe6fc9 100644 --- a/resources/assets/stylesheets/scss/tour.scss +++ b/resources/assets/stylesheets/scss/tour.scss @@ -17,8 +17,8 @@ bottom: 20px; right: 20px; z-index:20001; - border: solid 1px $base-color; - background-color: $white; + border: solid 1px var(--base-color); + background-color: var(--white); padding: 10px 10px; font-family: $font-family-base; overflow-y: auto; @@ -30,7 +30,7 @@ } .tour_focus_box { - border: 2px dashed $yellow; + border: 2px dashed var(--yellow); } #tour_tip { @@ -41,9 +41,9 @@ font-family: $font-family-base; font-size: 16px; box-sizing: border-box; - background-color: $base-color; - color: $white; - border: solid 1px $dark-gray-color-80; + background-color: var(--base-color); + color: var(--white); + border: solid 1px var(--dark-gray-color-80); box-shadow: 0px 0px 8px rgba(0,0,0,0.5); a.link-extern { @@ -53,11 +53,11 @@ @include icon(before, link-intern, info-alt); } a, a:link, a:visited { - color: $white; + color: var(--white); text-decoration: none; } a:hover, a:active, a:hover.index, a:active.index, a:hover.tree { - color: $white; + color: var(--white); text-decoration: underline; } } @@ -70,9 +70,9 @@ font-family: $font-family-base; font-size: 16px; box-sizing: border-box; - background-color: $yellow; - color: $black; - border: solid 1px $dark-gray-color-10; + background-color: var(--yellow); + color: var(--black); + border: solid 1px var(--dark-gray-color-10); box-shadow: 0px 0px 8px rgba(0,0,0,0.5); } @@ -88,7 +88,7 @@ } #tour_overlay { - background-color: $white; + background-color: var(--white); opacity: 0.4; position: fixed; z-index: 10000; @@ -97,7 +97,7 @@ } #tour_selector_overlay { - background-color: $white; + background-color: var(--white); opacity: 0.5; position: absolute; } diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss index 1c2efac..f801eb8 100644 --- a/resources/assets/stylesheets/scss/variables.scss +++ b/resources/assets/stylesheets/scss/variables.scss @@ -45,6 +45,7 @@ $transition-duration: .3s; :root { // The special handling for -- as #{"--"} seems to be neccessary to make // scss evaluate the color variables + #{"--"}text-color: $text-color; #{"--"}active-color: $active-color; #{"--"}activity-color: $activity-color; #{"--"}activity-color-20: $activity-color-20; diff --git a/resources/assets/stylesheets/scss/wiki.scss b/resources/assets/stylesheets/scss/wiki.scss index f428410..4290f1f 100644 --- a/resources/assets/stylesheets/scss/wiki.scss +++ b/resources/assets/stylesheets/scss/wiki.scss @@ -3,7 +3,7 @@ div.wikitoc { margin-bottom: 5px; h1, h2, h3, h4 { - color: black; + color: var(--black); font-size: 1em; margin: 0 0 0 -10px; } @@ -94,36 +94,36 @@ a.wiki-restricted { } $authors: ( - 0: $dark-gray-color-20, - 1: $red-20, - 2: $green-20, - 3: $brown-20, - 4: $dark-violet-20, - 5: $orange-20, - 6: $dark-green-20, - 7: $violet-20, - 8: $yellow-20, - 9: $petrol-20, - 10: $dark-gray-color-40, - 11: $red-40, - 12: $green-40, - 13: $brown-40, - 14: $dark-violet-40, - 15: $orange-40, - 16: $dark-green-40, - 17: $violet-40, - 18: $yellow-40, - 19: $petrol-40, - 20: $dark-gray-color-60, - 21: $red-60, - 22: $green-60, - 23: $brown-60, - 24: $dark-violet-60, - 25: $orange-60, - 26: $dark-green-60, - 27: $violet-60, - 28: $yellow-60, - 29: $petrol-60 + 0: var(--dark-gray-color-20), + 1: var(--red-20), + 2: var(--green-20), + 3: var(--brown-20), + 4: var(--dark-violet-20), + 5: var(--orange-20), + 6: var(--dark-green-20), + 7: var(--violet-20), + 8: var(--yellow-20), + 9: var(--petrol-20), + 10: var(--dark-gray-color-40), + 11: var(--red-40), + 12: var(--green-40), + 13: var(--brown-40), + 14: var(--dark-violet-40), + 15: var(--orange-40), + 16: var(--dark-green-40), + 17: var(--violet-40), + 18: var(--yellow-40), + 19: var(--petrol-40), + 20: var(--dark-gray-color-60), + 21: var(--red-60), + 22: var(--green-60), + 23: var(--brown-60), + 24: var(--dark-violet-60), + 25: var(--orange-60), + 26: var(--dark-green-60), + 27: var(--violet-60), + 28: var(--yellow-60), + 29: var(--petrol-60) ); @each $index, $bgcolor in $authors { diff --git a/resources/assets/stylesheets/scss/wizard.scss b/resources/assets/stylesheets/scss/wizard.scss index 3ad3650..b1fabf4 100644 --- a/resources/assets/stylesheets/scss/wizard.scss +++ b/resources/assets/stylesheets/scss/wizard.scss @@ -27,10 +27,10 @@ padding: 2px 0; background-color: transparent; border: none; - color: $base-color; + color: var(--base-color); cursor: pointer; &:hover { - color: $red; + color: var(--red); } } img { @@ -47,7 +47,7 @@ margin-left: 15px; h2 span.required { - color: $red; + color: var(--red); } .wizard-progress { @@ -59,7 +59,7 @@ display: inline-block; position: relative; margin-right: 60px; - border: solid 2px $base-color; + border: solid 2px var(--base-color); button { padding: 6px 0; height: 36px; @@ -69,25 +69,21 @@ border: none; } &.valid { - background-color: $base-color; + background-color: var(--base-color); } &.invalid { background-color: white; } &.optional { - border: dashed thin $base-color; + border: dashed thin var(--base-color); } &::before { position: absolute; content: ""; width: 62px; - border: solid thin $base-color; + border: solid thin var(--base-color); top: 50%; transform: translateY(-50%); - -o-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -webkit-transform: translateY(-50%); left: 100%; } &.active::after { @@ -95,7 +91,7 @@ content: ""; width: 38px; height: 3px; - background: $base-color; + background: var(--base-color); top: 44px; left: -1px; } @@ -118,10 +114,10 @@ max-height: 475px; overflow-y: auto; scrollbar-width: thin; - scrollbar-color: $base-color #f5f5f5; + scrollbar-color: var(--base-color) var(--dark-gray-color-5); .wizard-required { - color: $red; + color: var(--red); } textarea { @@ -130,7 +126,7 @@ input[type="text"]::placeholder, textarea::placeholder { - color: $dark-gray-color-60; + color: var(--dark-gray-color-60); } } } @@ -158,7 +154,7 @@ form.default fieldset.radiobutton-set { } > label { cursor: pointer; - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); transition: background-color 200ms; display: flex; justify-content: space-between; @@ -182,20 +178,20 @@ form.default fieldset.radiobutton-set { } } > label:first-of-type { - border-top: 1px solid $content-color-40; + border-top: 1px solid var(--content-color-40); } > label:last-child::after { content: none; } > div { - border: 1px solid $content-color-40; + border: 1px solid var(--content-color-40); border-top: none; display: none; padding: 10px; } > input[type=radio]:checked + label { - background-color: $content-color-20; + background-color: var(--content-color-20); transition: background-color 200ms; > .unchecked { display: none; @@ -211,4 +207,4 @@ form.default fieldset.radiobutton-set { animation-name: terms_of_use_fadein; } } -}
\ No newline at end of file +} diff --git a/resources/assets/stylesheets/studip-jquery-ui.less b/resources/assets/stylesheets/studip-jquery-ui.less index 2303779..4da59c9 100644 --- a/resources/assets/stylesheets/studip-jquery-ui.less +++ b/resources/assets/stylesheets/studip-jquery-ui.less @@ -20,14 +20,14 @@ .ms-selectable, .ms-selection { - color: @dark-gray-color; + color: var(--dark-gray-color); width: 47%; li.ms-elem-selectable, li.ms-elem-selection { - background: #fff; - border-bottom-color: @content-color-20; - color: @dark-gray-color; + background: var(--white); + border-bottom-color: var(--content-color-20); + color: var(--dark-gray-color); padding: @element-padding; } li { @@ -38,12 +38,12 @@ } &.ms-hover, &:hover { - background: @brand-color-dark; - color: #fff; + background: var(--brand-color-dark); + color: var(--white); } &.disabled { - background-color: @content-color-20; - color: @dark-gray-color; + background-color: var(--content-color-20); + color: var(--dark-gray-color); cursor: not-allowed; } &[style*="background-image"] { @@ -68,7 +68,7 @@ visibility: hidden; } &:hover { - background-color: @brand-color-dark; + background-color: var(--brand-color-dark); &::after { visibility: visible; } @@ -92,7 +92,7 @@ visibility: hidden; } &:hover { - background-color: @brand-color-dark; + background-color: var(--brand-color-dark); &::before { visibility: visible; } @@ -101,12 +101,12 @@ .ms-list { border-radius: 0; - border-color: @light-gray-color-40; + border-color: var(--light-gray-color-40); position: relative; } .ms-optgroup-label { - color: @dark-gray-color-60; + color: var(--dark-gray-color-60); } // Default multi select with STUDIP.MultiSelect.create() @@ -132,8 +132,8 @@ align-items: center; justify-content: space-between; - background: @dark-gray-color-10; - border: 1px solid @dark-gray-color-30; + background: var(--dark-gray-color-10); + border: 1px solid var(--dark-gray-color-30); border-bottom: 0; padding-left: 0.5em; @@ -144,7 +144,7 @@ } .ms-focus { - border-color: @brand-color-dark; + border-color: var(--brand-color-dark); box-shadow: none; } diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less index 6c6cd33..1a2c794 100644 --- a/resources/assets/stylesheets/studip.less +++ b/resources/assets/stylesheets/studip.less @@ -20,7 +20,7 @@ /* --- Standardvorgaben ----------------------------------------------------- */ //TODO: the Body-Background color should be similar to A:link.toolbar and A:visited.toolbar for best effect!! body { - background-color: #d8dadc; + background-color: var(--dark-gray-color-20); background-repeat: repeat-x; margin: 0; } @@ -42,7 +42,7 @@ table.content { border-collapse: collapse; td { - border: thin solid #666; + border: thin solid var(--dark-gray-color-80); padding: 3px; } @@ -125,7 +125,7 @@ ul.clean, ol.clean { .nodisplay { display: none; } .bordered { - border: 1px solid @content-color-40; + border: 1px solid var(--content-color-40); padding: 10px; } .bordered + .bordered { @@ -140,13 +140,13 @@ table.index_box { } td.index_box_cell { - background-color: @content-color-20; + background-color: var(--content-color-20); padding: 4px; } /* overdiv */ div.overdiv { - background-color: @content-color-20; + background-color: var(--content-color-20); margin: 0; padding: 0; position: absolute; @@ -159,12 +159,12 @@ div.overdiv { float: right; } div.title { - background: @brand-color-lighter; + background: var(--brand-color-lighter); height: 1.4em; padding: 0; } h4.title { - color: #fff; + color: var(--white); float: left; font-size: 1em; overflow: hidden; @@ -173,7 +173,7 @@ div.overdiv { } div.content { - background-color: @content-color-20; + background-color: var(--content-color-20); clear: both; margin: 0; overflow: hidden; @@ -201,7 +201,7 @@ div.overdiv { .right { float: right; } .ui-button { - background: @dark-gray-color-15; + background: var(--dark-gray-color-15); display: inline-block; height: 1.4em; line-height: 1.4; @@ -209,8 +209,8 @@ div.overdiv { padding-bottom: 6px; &:hover { - background-color: @base-color-60; - color: @contrast-content-white; + background-color: var(--base-color-60); + color: var(--contrast-content-white); } } } @@ -283,8 +283,8 @@ div.overdiv { a { box-sizing: border-box; - background-color: @content-color-20; - border: 1px solid #D0D0D0; + background-color: var(--content-color-20); + border: 1px solid var(--dark-gray-color-30); display: block; height: 11em; margin: 0 0 1em; @@ -293,10 +293,12 @@ div.overdiv { position: relative; &:hover { - background-color: #F2F2F2; - border-color: #A4A4A4; + background-color: var(--content-color-10); + border-color: var(--dark-gray-color-45); - p { color: #000; } + p { + color: var(--black); + } } } img { @@ -317,7 +319,7 @@ div.overdiv { padding: 0; } p { - color: #666; + color: var(--dark-gray-color-80); } } @@ -353,9 +355,9 @@ h1:hover, h2:hover, h3:hover, h4:hover { /* error message */ .error { - background-color: #fcc; - border: 1px solid #fcc; - color: #000; + background-color: var(--red-20); + border: 1px solid var(--red-20); + color: var(--black); display: none; font-size: 11px; padding: 4px 10px; @@ -363,7 +365,7 @@ h1:hover, h2:hover, h3:hover, h4:hover { p { margin: 0; } div.arrow { border: 10px solid; - border-color: transparent transparent #FCC transparent; + border-color: transparent transparent var(--red-20) transparent; height: 0; left: 60px; position: absolute; @@ -376,7 +378,7 @@ h1:hover, h2:hover, h3:hover, h4:hover { font-size: 0.9em; font-style: italic; text-align: right; - color: #444; + color: var(--base-gray); } pre.usercode { @@ -535,5 +537,5 @@ details.studip { } mark { - background-color: @activity-color-60; + background-color: var(--activity-color-60); } diff --git a/resources/vue/components/ContentModules.vue b/resources/vue/components/ContentModules.vue index 0a9d54b..a48dd9d 100644 --- a/resources/vue/components/ContentModules.vue +++ b/resources/vue/components/ContentModules.vue @@ -191,7 +191,7 @@ export default { display: flex; flex-direction: row; .iconwrapper { - background-color: white; + background-color: var(--white); border-radius: 50px; display: flex; align-items: center; diff --git a/resources/vue/components/ContentmodulesEditTable.vue b/resources/vue/components/ContentmodulesEditTable.vue index 144f920..28e2843 100644 --- a/resources/vue/components/ContentmodulesEditTable.vue +++ b/resources/vue/components/ContentmodulesEditTable.vue @@ -77,21 +77,19 @@ export default { } </script> <style lang="scss"> -@use '../../assets/stylesheets/mixins/colors.scss'; - table.admin_contentmodules > tbody > tr { > td:first-child { - background-image: linear-gradient(colors.$dark-gray-color-60, colors.$dark-gray-color-60); + background-image: linear-gradient(var(--dark-gray-color-60), var(--dark-gray-color-60)); background-repeat: no-repeat; background-position: left; background-size: 10px auto; padding-left: 15px; } &.visibility-visible > td:first-child { - background-image: linear-gradient(colors.$green, colors.$green); + background-image: linear-gradient(var(--green), var(--green)); } &.visibility-invisible > td:first-child { - background-image: linear-gradient(colors.$yellow, colors.$yellow); + background-image: linear-gradient(var(--yellow), var(--yellow)); } > td { height: 31px; //to make all rows equally high diff --git a/resources/vue/components/MyCoursesNavigation.vue b/resources/vue/components/MyCoursesNavigation.vue index 739668c..aa36499 100644 --- a/resources/vue/components/MyCoursesNavigation.vue +++ b/resources/vue/components/MyCoursesNavigation.vue @@ -29,7 +29,6 @@ export default { </script> <style lang="scss"> -@use '../../assets/stylesheets/mixins.scss'; $icon-padding: 3px; .my-courses-navigation { @@ -65,7 +64,7 @@ $icon-padding: 3px; } .my-courses-navigation-important { $border-width: 1px; - border: $border-width solid mixins.$red; + border: $border-width solid var(--red); a { padding: $icon-padding - $border-width; diff --git a/resources/vue/components/MyCoursesTables.vue b/resources/vue/components/MyCoursesTables.vue index 83e1e41..80d04dd 100644 --- a/resources/vue/components/MyCoursesTables.vue +++ b/resources/vue/components/MyCoursesTables.vue @@ -145,8 +145,6 @@ export default { </script> <style lang="scss"> -@use '../../assets/stylesheets/mixins/colors.scss' as *; - table.mycourses { tbody td { vertical-align: top; @@ -162,10 +160,10 @@ table.mycourses { } tr.has-subcourses td { - border-bottom: 1px solid $dark-gray-color-75; + border-bottom: 1px solid var(--dark-gray-color-75); } tr.subcourses { - background-color: $dark-gray-color-5; + background-color: var(--dark-gray-color-5); td.subcourse-indented { padding-left: 20px; diff --git a/resources/vue/components/MyCoursesTiles.vue b/resources/vue/components/MyCoursesTiles.vue index 071bd76..73f8aad 100644 --- a/resources/vue/components/MyCoursesTiles.vue +++ b/resources/vue/components/MyCoursesTiles.vue @@ -178,7 +178,7 @@ $tile-padding: 10px; flex-direction: column; position: relative; // For color picker - border: $tile-border-width solid mixins.$base-color-20; + border: $tile-border-width solid var(--base-color-20); padding: $tile-padding; } @@ -221,7 +221,7 @@ $tile-padding: 10px; .group-label, .course-group-label { - color: mixins.$base-gray; + color: var(--base-gray); } .group-label { @@ -245,15 +245,15 @@ article.studip.my-courses--group-hidden { // Border below according to selected group $group-colors: ( - 0: mixins.$group-color-0, - 1: mixins.$group-color-1, - 2: mixins.$group-color-2, - 3: mixins.$group-color-3, - 4: mixins.$group-color-4, - 5: mixins.$group-color-5, - 6: mixins.$group-color-6, - 7: mixins.$group-color-7, - 8: mixins.$group-color-8, + 0: var(--group-color-0), + 1: var(--group-color-1), + 2: var(--group-color-2), + 3: var(--group-color-3), + 4: var(--group-color-4), + 5: var(--group-color-5), + 6: var(--group-color-6), + 7: var(--group-color-7), + 8: var(--group-color-8), ); @for $i from 0 through 8 { .studip-grid-element.my-courses-group-#{$i} { @@ -286,7 +286,7 @@ $group-colors: ( left: 0; z-index: 2; - background: mixins.$white; + background: var(--white); grid-gap: $gap; padding: $gap; } diff --git a/resources/vue/components/courseware/CoursewareBlockadderItem.vue b/resources/vue/components/courseware/CoursewareBlockadderItem.vue index 5e4b850..921014a 100644 --- a/resources/vue/components/courseware/CoursewareBlockadderItem.vue +++ b/resources/vue/components/courseware/CoursewareBlockadderItem.vue @@ -113,5 +113,3 @@ export default { }, }; </script> - -<style></style> diff --git a/resources/vue/components/stock-images/SelectableImageCard.vue b/resources/vue/components/stock-images/SelectableImageCard.vue index 777b0f9..e6d4c73 100644 --- a/resources/vue/components/stock-images/SelectableImageCard.vue +++ b/resources/vue/components/stock-images/SelectableImageCard.vue @@ -33,7 +33,7 @@ export default { position: relative; } .stock-images-selectable-image > :last-child { - background: #ffffff; + background: var(--white); overflow: hidden; text-overflow: ellipsis; width: 8rem; |