diff options
| author | Ron Lucke <lucke@elan-ev.de> | 2025-07-14 09:36:18 +0200 |
|---|---|---|
| committer | Ron Lucke <lucke@elan-ev.de> | 2025-07-14 09:36:18 +0200 |
| commit | 4355ded9bc56e0b06fbceffe61ddc37061cc3bc7 (patch) | |
| tree | 348493b6b0fd1286b86f213e5077413b97cf9747 /resources/assets | |
| parent | 1e59dd2dacc51b3313d7780b66d4bf72e0484f86 (diff) | |
Color-Themes-System, fixes #5361
Closes #5361
Merge request studip/studip!4038
Diffstat (limited to 'resources/assets')
125 files changed, 2035 insertions, 1856 deletions
diff --git a/resources/assets/javascripts/bootstrap/inline-editing.js b/resources/assets/javascripts/bootstrap/inline-editing.js deleted file mode 100644 index 8f96f31..0000000 --- a/resources/assets/javascripts/bootstrap/inline-editing.js +++ /dev/null @@ -1,48 +0,0 @@ -jQuery( - function () { - - jQuery(document).ready( - function() { - var elements = jQuery('[data-inline-editing]'); - for (const element of elements) { - STUDIP.InlineEditing.init(element); - } - } - ); - - jQuery(document).on( - 'dialog-update', - null, - function() { - var elements = jQuery('.ui-dialog [data-inline-editing]'); - for (const element of elements) { - STUDIP.InlineEditing.init(element); - } - } - ); - - jQuery(document).on( - 'click', - '[data-inline-editing] .edit-button', - function (event) { - STUDIP.InlineEditing.activate(event.target); - } - ); - - jQuery(document).on( - 'click', - '[data-inline-editing] .save-button', - function (event) { - STUDIP.InlineEditing.save(event.target); - } - ); - - jQuery(document).on( - 'click', - '[data-inline-editing] .abort-button', - function (event) { - STUDIP.InlineEditing.abort(event.target); - } - ); - } -); diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js index db3d1f6..896189e 100644 --- a/resources/assets/javascripts/entry-base.js +++ b/resources/assets/javascripts/entry-base.js @@ -68,7 +68,6 @@ import "./bootstrap/clipboard.js" import "./bootstrap/resources.js" import "./bootstrap/resource-tree-widget.js" import "./bootstrap/fullcalendar.js" -import "./bootstrap/inline-editing.js" import "./bootstrap/gradebook.js" import "./bootstrap/blubber.js" import "./bootstrap/consultations.js" diff --git a/resources/assets/javascripts/init.js b/resources/assets/javascripts/init.js index 86d1f9e..9fcfbb1 100644 --- a/resources/assets/javascripts/init.js +++ b/resources/assets/javascripts/init.js @@ -35,7 +35,6 @@ import Fullscreen from './lib/fullscreen.js'; import GlobalSearch from './lib/global_search.js'; import HeaderMagic from './lib/header_magic.js'; import i18n from './lib/i18n.js'; -import InlineEditing from './lib/inline-editing.js'; import JSONAPI, { jsonapi } from './lib/jsonapi.ts'; import JSUpdater from './lib/jsupdater.js'; import Lightbox from './lib/lightbox.js'; @@ -116,7 +115,6 @@ window.STUDIP = _.assign(window.STUDIP || {}, { GlobalSearch, HeaderMagic, i18n, - InlineEditing, jsonapi, JSONAPI, JSUpdater, diff --git a/resources/assets/javascripts/lib/course_wizard.js b/resources/assets/javascripts/lib/course_wizard.js index ebd821f..af63737 100644 --- a/resources/assets/javascripts/lib/course_wizard.js +++ b/resources/assets/javascripts/lib/course_wizard.js @@ -13,28 +13,25 @@ const CourseWizard = { addParticipatingInst: function(id, name) { // Check if already set. if ($('input[name="participating[' + id + ']"]').length == 0) { - var wrapper = $('<div>').addClass('institute'); + const wrapper = $('<div>').addClass('institute'); $('#wizard-participating') .children('div.description') .removeClass('hidden-js'); - var input = $('<input>') + const input = $('<input>') .attr('type', 'hidden') .attr('name', 'participating[' + id + ']') .attr('id', id) .attr('value', '1'); - var trash = $('<input>') - .attr('type', 'image') - .attr('src', STUDIP.ASSETS_URL + 'images/icons/blue/trash.svg') - .attr('name', 'remove_participating[' + id + ']') - .attr('value', '1') - .attr('onclick', "return STUDIP.CourseWizard.removeParticipatingInst('" + id + "')") - .addClass('text-bottom') - .css({ - width: 16, - height: 16 - }); + const trash = $('<button>') + .attr('type', 'button') + .attr('name', 'remove_participating[' + id + ']') + .attr('value', '1') + .addClass('btn-icon btn-icon--trash btn-icon--inline') + .on('click', function () { + return STUDIP.CourseWizard.removeParticipatingInst(id); + }); wrapper.append(input); - var nametext = $('<span>') + const nametext = $('<span>') .html(name) .text(); wrapper.append(nametext); @@ -72,27 +69,25 @@ const CourseWizard = { addPerson: function(id, name, inputName, elClass, elId, otherInput) { // Check if already set. if ($('input[name="' + inputName + '[' + id + ']"]').length == 0) { - var wrapper = $('<div>').addClass(elClass); + const wrapper = $('<div>').addClass(elClass); $('#' + elId) .children('div.description') .removeClass('hidden-js'); - var input = $('<input>') + const input = $('<input>') .attr('type', 'hidden') .attr('name', inputName + '[' + id + ']') .attr('id', id) .attr('value', '1'); - var trash = $('<input>') - .attr('type', 'image') - .attr('src', STUDIP.ASSETS_URL + 'images/icons/blue/trash.svg') + const trash = $('<button>') + .attr('type', 'button') .attr('name', 'remove_' + elClass + '[' + id + ']') .attr('value', '1') - .attr('onclick', "return STUDIP.CourseWizard.removePerson('" + id + "')") - .css({ - width: 16, - height: 16 + .addClass('btn-icon btn-icon--trash btn-icon--inline') + .on('click', function () { + return STUDIP.CourseWizard.removePerson(id); }); wrapper.append(input); - var nametext = $('<span>') + const nametext = $('<span>') .html(name) .text(); wrapper.append(nametext); @@ -314,13 +309,14 @@ const CourseWizard = { .attr('name', 'studyareas[]') .attr('value', items[i].id); node.children('ul').before(input); - var unassign = $('<input>') - .attr('type', 'image') + const unassign = $('<button>') + .attr('type', 'button') .attr('name', 'unassign[' + items[i].id + ']') - .attr('src', STUDIP.ASSETS_URL + 'images/icons/blue/trash.svg') - .attr('width', '16') - .height('height', '16') - .attr('onclick', "return STUDIP.CourseWizard.unassignNode('" + items[i].id + "')"); + .attr('value', '1') + .addClass('btn-icon btn-icon--trash btn-icon--inline') + .on('click', function () { + return STUDIP.CourseWizard.unassignNode(items[i].id); + }); node.children('input[name="studyareas[]"]').before(unassign); } } @@ -344,38 +340,37 @@ const CourseWizard = { * @returns {*|jQuery} */ createTreeNode: function(values, assignable, selected) { - let item = $('<li/>'); + const item = $('<li/>'); // Node in "All study areas" tree. if (assignable) { item.addClass('sem-tree-' + values.id); - var assign = $('<input>') - .attr('type', 'image') + const assign = $('<button>') + .attr('type', 'button') .attr('name', 'assign[' + values.id + ']') - .attr('src', STUDIP.ASSETS_URL + 'images/icons/yellow/arr_2left.svg') - .attr('width', '16') - .height('height', '16') + .attr('value', '1') + .addClass('btn-icon btn-icon--add btn-icon--inline') .attr('onclick', "return STUDIP.CourseWizard.assignNode('" + values.id + "')"); if (values.assignable) { item.append(assign); item.append(document.createTextNode(' ')); } if (values.has_children) { - var input = $('<input>') + const input = $('<input>') .attr('type', 'checkbox') .attr('id', values.id); - var label = $('<label>') + const label = $('<label>') .addClass('undecorated') .attr('for', values.id) .attr('onclick', "return STUDIP.CourseWizard.getTreeChildren('" + values.id + "', true)"); // Build link for opening the current node. - var link = $('div#studyareas').data('forward-url'); + let link = $('div#studyareas').data('forward-url'); if (link.indexOf('?') > -1) { link += '&open_node=' + values.id; } else { link += '?open_node=' + values.id; } - var openLink = $('<a>').attr('href', link); + const openLink = $('<a>').attr('href', link); openLink.html( $('<div/>') .text(values.name) @@ -413,17 +408,16 @@ const CourseWizard = { .html() ); if ((!values.has_children || values.assignable) && selected) { - var unassign = $('<input>') - .attr('type', 'image') - .attr('name', 'unassign[' + values.id + ']') - .attr('src', STUDIP.ASSETS_URL + 'images/icons/blue/trash.svg') - .attr('width', '16') - .height('height', '16') + const unassign = $('<button>') + .attr('type', 'button') + .attr('name', 'assiunassigngn[' + values.id + ']') + .attr('value', '1') + .addClass('btn-icon btn-icon--trash btn-icon--inline') .attr('onclick', "return STUDIP.CourseWizard.unassignNode('" + values.id + "')"); item.append(unassign); } if (values.assignable && selected) { - input = $('<input>') + const input = $('<input>') .attr('type', 'hidden') .attr('name', 'studyareas[]') .attr('value', values.id); @@ -452,7 +446,7 @@ const CourseWizard = { var items = $.parseJSON(data); CourseWizard.buildPartialTree(items, false, id); $('.sem-tree-assigned-root').removeClass('hidden-js'); - $('input[name="assign[' + id + ']"]').hide(); + $('button[name="assign[' + id + ']"]').hide(); $('svg[name="assign[' + id + ']"]').hide(); }, error: function(xhr, status, error) { @@ -471,12 +465,12 @@ const CourseWizard = { var target = $('li.sem-tree-assigned-' + id); if (target.children('ul').children('li').length > 0) { target.children('input[name="studyareas[]"]').remove(); - target.children('input[name="unassign[' + id + ']"]').remove(); + target.children('button[name="unassign[' + id + ']"]').remove(); target.children('a').remove(); } else { CourseWizard.cleanupAssignTree(target); } - $('input[name="assign[' + id + ']"]').show(); + $('button[name="assign[' + id + ']"]').show(); $('svg[name="assign[' + id + ']"]').show(); return false; }, diff --git a/resources/assets/javascripts/lib/fullcalendar.js b/resources/assets/javascripts/lib/fullcalendar.js index 350c72f..e1174bd 100644 --- a/resources/assets/javascripts/lib/fullcalendar.js +++ b/resources/assets/javascripts/lib/fullcalendar.js @@ -600,23 +600,17 @@ class Fullcalendar if (event.extendedProps.icon) { //Check if the icon is already an URL or just the name of an icon. - let icon_url = ''; + let iconUrl = ''; if (event.extendedProps.icon.includes('://')) { //The icon already is an URL. - icon_url = event.extendedProps.icon; + iconUrl = event.extendedProps.icon; } else { - //The icon is just referenced by its name. - icon_url = `${STUDIP.ASSETS_URL}images/icons/${iconColor}/${event.extendedProps.icon}.svg` + //The icon is just referenced by its name. We do not need a specific color here, background-color is currentColor. + iconUrl = `${STUDIP.ASSETS_URL}images/icons/black/${event.extendedProps.icon}.svg` } - $(eventElement).find('.fc-title').prepend( - $('<img>').attr('src', icon_url) - .css({ - verticalAlign: 'text-bottom', - marginRight: '3px', - width: 14, - height: 14 - }) - ); + const $title = $(eventElement).find('.fc-title'); + $title.addClass('has-icon'); + $title.css('--icon-url', `url('${iconUrl}')`); } }, eventSourceSuccess: function(content) { @@ -690,7 +684,7 @@ class Fullcalendar $('<a>').attr('href', url).text(renderInfo.resource.title) ); } else if ($("*[data-fullcalendar='1']").hasClass('institute-plan') && renderInfo.resource.id > 0) { - let icon = '<img class="text-bottom icon-role-clickable icon-shape-edit" width="20" height="20" src="' + STUDIP.URLHelper.getURL('assets/images/icons/blue/edit.svg') + '" alt="edit">'; + const icon = '<span class="btn-icon btn-icon--edit icon-role-clickable" aria-label="edit"></span>'; $(renderInfo.el).append( '<a href="' + STUDIP.URLHelper.getURL('dispatch.php/admin/courseplanning/rename_column/' diff --git a/resources/assets/javascripts/lib/icon-loader.ts b/resources/assets/javascripts/lib/icon-loader.ts new file mode 100644 index 0000000..3ccdbd6 --- /dev/null +++ b/resources/assets/javascripts/lib/icon-loader.ts @@ -0,0 +1,97 @@ +type CacheOption = 'off' | 'session' | 'local'; + +class IconLoader +{ + readonly #cacheKey: string = 'studip/svg-icons'; + + #baseUrl: string; + #useCache: CacheOption = 'off'; + + #cache: Map<string, string>; + #promises: Map<string, Promise<string>>; + + constructor(baseUrl: string, useCache: CacheOption = 'off') + { + this.#baseUrl = baseUrl; + this.#useCache = useCache; + + this.#cache = new Map<string, string>(this.#initialState()); + this.#promises = new Map<string, Promise<string>>(); + } + + async load(shape: string): Promise<string> + { + if (this.#cache.has(shape)) { + return this.#cache.get(shape)!; + } + + if (this.#promises.has(shape)) { + return this.#promises.get(shape)!; + } + + const url = `${this.#baseUrl}images/icons/blue/${shape}.svg`; + + const promise = (async () => { + try { + const response = await fetch(url); + if (!response.ok) { + return ''; + } + let svg = await response.text(); + + svg = svg.replace(/fill="(?!none)[^"]+"/g, 'fill="currentColor"'); + svg = svg.replace(/(width|height)="[^"]+"/g, ''); + + this.store(shape, svg); + + return svg; + } catch(error) { + console.error(`IconLoader: Fehler beim Laden von ${shape}`, error); + return ''; + } finally { + this.#promises.delete(shape); + } + })(); + + this.#promises.set(shape, promise); + + return promise; + } + + store(shape: string, svg: string): void + { + this.#cache.set(shape, svg); + + this.#getStorage()?.setItem( + this.#cacheKey, + JSON.stringify([...this.#cache]) + ) + } + + #getStorage(): Storage|null + { + if (this.#useCache === 'off') { + return null; + } + return this.#useCache === 'session' ? sessionStorage : localStorage; + } + + #initialState(): [string, string][] + { + const cached = this.#getStorage()?.getItem(this.#cacheKey); + if (!cached) { + return []; + } + + try { + return JSON.parse(cached); + } catch { + return []; + } + } +} + +const defaultLoader = new IconLoader(window.STUDIP.ASSETS_URL, 'session'); + +export default defaultLoader; +export { IconLoader }; diff --git a/resources/assets/javascripts/lib/inline-editing.js b/resources/assets/javascripts/lib/inline-editing.js deleted file mode 100644 index b1f025f..0000000 --- a/resources/assets/javascripts/lib/inline-editing.js +++ /dev/null @@ -1,138 +0,0 @@ -class InlineEditing -{ - static init(element) { - if (!element) { - return; - } - - var text = jQuery(element).text().trim(); - - var icon_path = STUDIP.ASSETS_URL + '/images/icons/blue/NAME.svg'; - var input_type = jQuery(element).data('input-type').toLowerCase(); - var input_name = jQuery(element).data('input-name'); - var icon_size = jQuery(element).data('icon-size'); - if (!icon_size) { - icon_size = '20px'; - } - - //Build the display container: - var text_container = jQuery('<span class="text"></span>'); - jQuery(text_container).text(text); - var icon_container = jQuery('<div></div>'); - var icon_element = jQuery('<img class="edit-button"></img>'); - jQuery(icon_element).attr('width', icon_size); - jQuery(icon_element).attr('height', icon_size); - jQuery(icon_element).attr('src', icon_path.replace('NAME', 'edit')); - jQuery(icon_container).append(icon_element); - var display_container = jQuery( - '<div class="display-container"></div>' - ); - jQuery(display_container).append(text_container); - jQuery(display_container).append(icon_container); - - var input_field = undefined; - var edit_icons_container = undefined; - var accept_icon = jQuery('<img class="save-button"></img>'); - jQuery(accept_icon).attr('width', icon_size); - jQuery(accept_icon).attr('height', icon_size); - jQuery(accept_icon).attr('src', icon_path.replace('NAME', 'accept')); - var abort_icon = jQuery('<img class="abort-button"></img>'); - jQuery(abort_icon).attr('width', icon_size); - jQuery(abort_icon).attr('height', icon_size); - jQuery(abort_icon).attr('src', icon_path.replace('NAME', 'decline')); - - if (input_type == 'textarea') { - input_field = jQuery('<textarea class="input-field"></textarea>'); - jQuery(input_field).attr('name', input_name); - jQuery(input_field).text(text); - edit_icons_container = jQuery('<div></div>'); - } else { - input_field = jQuery('<input class="input-field">'); - jQuery(input_field).attr('type', input_type); - jQuery(input_field).attr('name', input_name); - jQuery(input_field).val(text); - edit_icons_container = jQuery('<span></span>'); - } - jQuery(edit_icons_container).append(accept_icon); - jQuery(edit_icons_container).append(abort_icon); - - var edit_container = jQuery('<div class="edit-container invisible"></div>'); - jQuery(edit_container).append(input_field); - jQuery(edit_container).append(edit_icons_container); - - jQuery(element).empty(); - jQuery(element).append(display_container); - jQuery(element).append(edit_container); - } - - - static activate(element) { - var container = jQuery(element).parents('[data-inline-editing]'); - if (!container) { - return; - } - - jQuery(container).children('.display-container').addClass('invisible'); - jQuery(container).children('.edit-container').removeClass('invisible'); - } - - - static save(element) { - var container = jQuery(element).parents('[data-inline-editing]'); - if (!container) { - return; - } - var ajax_url = jQuery(container).data('inline-editing'); - - var text_field = jQuery(container).find('.text')[0]; - if (!text_field) { - return; - } - var input_field = jQuery(container).find('.input-field')[0]; - if (!input_field) { - return; - } - var input_name = jQuery(container).data('input-name'); - var input_value = jQuery(input_field).val(); - var data = { - quiet: 1 - }; - data[input_name] = input_value; - - jQuery.ajax( - { - url: ajax_url, - method: 'POST', - data: data - } - ).done( - function() { - jQuery(text_field).text(input_value); - jQuery(container).find('.edit-container').addClass('invisible'); - jQuery(container).find('.display-container').removeClass('invisible'); - } - ).fail( - function(data) { - jQuery(input_field).css('border-color', 'red'); - if (data) { - jQuery(container).find('.error-message').val(data); - } - } - ); - } - - - static abort(element) { - var container = jQuery(element).parents('[data-inline-editing]'); - if (!container) { - return; - } - - jQuery(container).children('.edit-container').addClass('invisible'); - jQuery(container).children('.display-container').removeClass('invisible'); - - } -} - - -export default InlineEditing; diff --git a/resources/assets/javascripts/lib/members.js b/resources/assets/javascripts/lib/members.js index 3fbdfb9..1630c71 100644 --- a/resources/assets/javascripts/lib/members.js +++ b/resources/assets/javascripts/lib/members.js @@ -1,13 +1,18 @@ const Members = { addPersonToSelection: function(userId, name) { - var target = $('#persons-to-add'), - newEl = $('<li>').html( + const target = $('#persons-to-add'); + let newEl = $('<li>').html( $('<span>') .html(name) .text() - ), - input = $('<input type="hidden" name="users[]">').val(userId), - remove = $('<img>').attr('src', STUDIP.ASSETS_URL + 'images/icons/blue/trash.svg'); + ); + let input = $('<input type="hidden" name="users[]">').val(userId); + let remove = $('<button>') + .addClass('btn-icon btn-icon--trash btn-icon--inline') + .attr('type', 'button') + .on('click', function () { + $(this).parent().remove(); + }); remove.on('click', function() { $(this) diff --git a/resources/assets/javascripts/mvv.js b/resources/assets/javascripts/mvv.js index 9191ad7..db3c6b2 100644 --- a/resources/assets/javascripts/mvv.js +++ b/resources/assets/javascripts/mvv.js @@ -177,9 +177,9 @@ STUDIP.MVV.Search = { const qs_name = qs_item.attr('id'); const target_name = qs_name.slice(0, qs_name.lastIndexOf('_')); const item_id = jQuery('#' + qs_name + '_realvalue').val(); - jQuery('<img src="' + STUDIP.ASSETS_URL - + 'images/icons/yellow/arr_2down.svg">') - .attr('alt', $gettext("hinzufügen")) + jQuery('<button>') + .addClass('btn-icon btn-icon--add') + .attr('aria-label', $gettext('hinzufügen')) .appendTo(add_button); if (item_id === '') { qs_item.siblings('.mvv-add-button').find('.mvv-add-item') diff --git a/resources/assets/javascripts/mvv_course_wizard.js b/resources/assets/javascripts/mvv_course_wizard.js index da51c57..4f5a6ee 100644 --- a/resources/assets/javascripts/mvv_course_wizard.js +++ b/resources/assets/javascripts/mvv_course_wizard.js @@ -147,12 +147,10 @@ STUDIP.MVV.CourseWizard = { const mvv_ids = values.id.split('-'); item.addClass('lvgroup-tree-' + values.id); - const assign = $('<input>') - .attr('type', 'image') + const assign = $('<button>') + .attr('type', 'button') .attr('name', 'assign[' + values.id + ']') - .attr('src', STUDIP.ASSETS_URL + 'images/icons/yellow/arr_2left.svg') - .attr('width', '16') - .height('height', '16') + .addClass('btn-icon btn-icon--add btn-icon--inline') .attr('onclick', "return STUDIP.MVV.CourseWizard.assignNode('" + values.id + "')"); if (values.assignable) { item.append(assign); diff --git a/resources/assets/stylesheets/fullcalendar.scss b/resources/assets/stylesheets/fullcalendar.scss index b9d5f40..994d761 100644 --- a/resources/assets/stylesheets/fullcalendar.scss +++ b/resources/assets/stylesheets/fullcalendar.scss @@ -176,8 +176,11 @@ html.responsive-display .fc .fc-view:not(.fc-timeGridDay-view) .fc-day-header { } } - &:checked + label::before { - @include background-icon(checkbox-checked, info_alt, 100%); + &:checked + label { + @include icon(before, checkbox-checked, $size: 100%); + &::before { + background-color: var(--color--font-inverted); + } } } } @@ -196,10 +199,16 @@ html.responsive-display .fc .fc-view:not(.fc-timeGridDay-view) .fc-day-header { right: 0; &.white { - @include background-icon(group4, info_alt, 100%); + @include icon(before, group4, $size: 100%); + &::before { + background-color: var(--color--font-inverted); + } } &.black { - @include background-icon(group4, info, 100%); + @include icon(before, group4, $size: 100%); + &::before { + background-color: var(--color--font-primary); + } } } diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss index 7f25139..15cf554 100644 --- a/resources/assets/stylesheets/highcontrast.scss +++ b/resources/assets/stylesheets/highcontrast.scss @@ -497,11 +497,13 @@ section.course-statusgroups article header h1 a img { .js form.default.collapsable fieldset legend, form.default fieldset.collapsable legend { - @include background-icon(arr_1down, info_alt); + @include icon(before, arr_1down); + color: var(--white); } .js form.default.collapsable fieldset.collapsed legend, form.default fieldset.collapsable.collapsed legend { - @include background-icon(arr_1right, info_alt); + @include icon(before, arr_1right); + color: var(--white); } .sidebar-widget-header > div > a > img { diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss index 1d94aaa..d9f897e 100644 --- a/resources/assets/stylesheets/mixins/colors.scss +++ b/resources/assets/stylesheets/mixins/colors.scss @@ -226,6 +226,7 @@ $calendar-category-255-aux: $light-gray-color-20; $color--black: #000; $color--blue-1: #28497c; $color--blue-2: #36598f; +$color--blue-3: #d0d7e3; $color--gray-1: #101010; $color--gray-2: #3c454e; $color--gray-3: #676767; @@ -234,22 +235,39 @@ $color--gray-5: #d8d8d8; $color--gray-6: #ededed; $color--gray-7: #fbfbfc; $color--green-1: #6ead10; +$color--green-2: #e2efcf; $color--red-1: #d60000; +$color--red-2: #f7cccc; $color--white: #fff; $color--yellow-1: #ffbc33; +$color--yellow-2: #fff2d6; $color--global-background: $color--white; -$color--brand-primary: $color--blue-1; -$color--brand-secondary: $color--gray-2; - $color--font-primary: $color--gray-1; $color--font-secondary: $color--gray-3; $color--font-inactive: $color--gray-3; $color--font-inverted: $color--white; +$color--brand-primary: $color--blue-1; +$color--brand-primary-contrast: $color--font-inverted; +$color--brand-secondary: $color--gray-2; +$color--brand-secondary-contrast: $color--font-inverted; + +$color--highlight: $color--blue-1; +$color--highlight-hover: $color--red-1; +$color--highlight-contrast: $color--font-inverted; + +$color--content-link: $color--blue-1; +$color--content-link-hover: $color--red-1; + +$color--sidebar-item: $color--blue-1; +$color--sidebar-item-hover: $color--gray-1; + $color--main-navigation-background: $color--gray-7; $color--main-navigation-border: $color--gray-5; +$color--main-navigation-item: $color--blue-1; +$color--main-navigation-item-inactive: $color--gray-4; $color--sidebar-marker-active: $color--gray-5; $color--sidebar-marker-active-navigation: $color--blue-1; @@ -283,6 +301,8 @@ $color--tile-title-background: $color--gray-6; $color--scrollbar-thumb: $color--gray-5; +$color--content-bar-background: $color--gray-6; + $color--content-box-border: $color--gray-6; $color--content-box-header: $color--gray-6; $color--content-box-background: $color--white; @@ -290,16 +310,16 @@ $color--content-box-background: $color--white; $color--fieldset-header: $color--gray-6; $color--fieldset-border: $color--gray-6; +$color--tabs-marker-hover: $color--gray-4; +$color--tabs-marker-active: $color--gray-3; + $color--table-header: $color--gray-6; $color--table-border: $color--gray-6; $color--table-focus: $color--gray-6; $color--table-hover: $color--gray-6; -$color--button-background: $color--white; -$color--button-border: $color--blue-1; -$color--button-focus: $color--blue-1; -$color--button-hover: $color--blue-1; $color--button-inactive-background: $color--gray-7; +$color--button-inactive-background-contrast: $color--font-inactive; $color--button-inactive-border: $color--gray-5; $color--radiobuttonset-background: $color--white; @@ -316,15 +336,27 @@ $color--shadow: $color--gray-4; $color--focus: $color--gray-4; $color--warning: $color--red-1; -$color--warning-alternative: mix($color--warning, $color--white, 20%); +$color--warning-secondary: $color--red-2; +$color--warning-contrast: $color--font-primary; +$color--warning-secondary-contrast: $color--font-primary; + $color--attention: $color--yellow-1; -$color--attention-alternative: mix($color--attention, $color--white, 20%); +$color--attention-secondary: $color--yellow-2; +$color--attention-contrast: $color--font-primary; +$color--attention-secondary-contrast: $color--font-primary; + $color--good: $color--green-1; -$color--good-alternative: mix($color--good, $color--white, 20%); +$color--good-secondary: $color--green-2; +$color--good-contrast: $color--font-inverted; +$color--good-secondary-contrast: $color--font-primary; + $color--info: $color--blue-2; -$color--info-alternative: mix($color--info, $color--white, 20%); +$color--info-secondary: $color--blue-3; +$color--info-contrast: $color--font-inverted; +$color--info-secondary-contrast: $color--font-primary; -$color-image-placeholder-background: $color--gray-6; +$color--image-placeholder-background: $color--gray-6; +$color--image-placeholder-icon: $color--gray-4; $color-header-inverted: $color--white; diff --git a/resources/assets/stylesheets/mixins/misc.scss b/resources/assets/stylesheets/mixins/misc.scss index 1fe9d08..1e4d22f 100644 --- a/resources/assets/stylesheets/mixins/misc.scss +++ b/resources/assets/stylesheets/mixins/misc.scss @@ -6,7 +6,7 @@ &::before, &::after { display: table; - content: ""; + content: ''; // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; @@ -16,7 +16,6 @@ } } - @mixin size($height, $width) { width: $width; height: $height; @@ -25,14 +24,54 @@ @include size($size, $size); } -// https://codepen.io/kennyglenn/pen/kxqWjP -@function text-contrast($color, $dark, $light, $threshold: 51) { - @return if(lightness($color) < $threshold, $light, $dark) -} - - @mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { background-color: mix($midColor, $endColor, 80%); background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); background-repeat: no-repeat; } + +@mixin highlight-anchor { + a:not(.button) { + color: var(--color--highlight); + + &:hover { + color: var(--color--highlight-hover); + text-decoration: none; + } + } +} + +@function luminance($value) { + @if $value <= 0.03928 { + @return $value / 12.92; + } @else { + @return (($value + 0.055) / 1.055) * (($value + 0.055) / 1.055); + } +} + +@function relative-luminance($color) { + $rgb: red($color) / 255, green($color) / 255, blue($color) / 255; + + @return luminance(nth($rgb, 1)) * 0.2126 + luminance(nth($rgb, 2)) * 0.7152 + luminance(nth($rgb, 3)) * 0.0722; +} + +@function contrast-ratio($color1, $color2) { + $luminance1: relative-luminance($color1) + 0.05; + $luminance2: relative-luminance($color2) + 0.05; + + @if $luminance1 > $luminance2 { + @return $luminance1 / $luminance2; + } @else { + @return $luminance2 / $luminance1; + } +} + +@function text-contrast($color, $dark, $light, $threshold: 4.5) { + $ratio: contrast-ratio($color, $dark); + + @if $ratio < $threshold { + @return $light; + } @else { + @return $dark; + } +} diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss index d45d9f8..c71d4e3 100644 --- a/resources/assets/stylesheets/mixins/studip.scss +++ b/resources/assets/stylesheets/mixins/studip.scss @@ -85,6 +85,9 @@ @return $size; } +/** + * Deprecated mixin, use `icon` instead + */ @mixin background-icon($icon, $role: clickable, $size: $icon-size-default) { $svg: icon-path($icon, $role); @@ -104,8 +107,9 @@ } } -@mixin icon($position, $icon, $role: clickable, $size: $icon-size-default, $padding: 0, $inline: false) { +@mixin icon($position, $icon, $role: clickable, $size: $icon-size-default, $padding: 0, $inline: false, $align: text-top) { $position: $position; + $svg: icon-path($icon, $role); @if $inline { $size: $icon-size-inline; @@ -113,13 +117,14 @@ @if $position == before or $position == after { &::#{$position} { - @include background-icon($icon, $role, $size); - background-repeat: no-repeat; - content: ' '; + content: ''; display: inline-block; height: icon-size($size); - vertical-align: text-top; width: icon-size($size); + background-color: currentColor; + mask: url("#{$svg}") no-repeat center / contain; + vertical-align: $align; + @if $position == before { margin-right: $padding; @@ -137,12 +142,12 @@ display: inline-block; vertical-align: bottom; - @include background-icon($default-icon-name, $size: $icon-size-default); + @include icon(before, $default-icon-name, $size: $icon-size-default); @include hide-text; @include square($icon-size-default); &.toggled { - @include background-icon($toggled-icon-name, $size: $icon-size-default); + @include icon(before, $toggled-icon-name, $size: $icon-size-default); } } @@ -238,9 +243,8 @@ width: var(--icon-size-default); height: var(--icon-size-default); - @include background-icon($icon, $role); + @include icon(before, $icon, $role); - background-repeat: no-repeat; cursor: pointer; display: block; // vertical-align: middle; diff --git a/resources/assets/stylesheets/print.scss b/resources/assets/stylesheets/print.scss index 070ed4f..fd93a75 100644 --- a/resources/assets/stylesheets/print.scss +++ b/resources/assets/stylesheets/print.scss @@ -181,14 +181,12 @@ td.quote { a.link-intern { padding-left: 18px; - @include background-icon(intern); - background-repeat: no-repeat; + @include icon(before, intern); } a.link-extern { padding-left: 18px; - @include background-icon(link-extern); - background-repeat: no-repeat; + @include icon(before, link-extern); } .formatted-content { diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss index 84183b9..1b86585 100644 --- a/resources/assets/stylesheets/scss/actionmenu.scss +++ b/resources/assets/stylesheets/scss/actionmenu.scss @@ -60,7 +60,7 @@ $action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow); display: block; position: absolute; - background: var(--base-color); + background-color: var(--color--highlight); border-radius: 50%; opacity: 1; left: 50%; @@ -100,14 +100,12 @@ $action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow); > label { margin: 0; padding: 2px 30px 2px 0; - display: block; + display: inline-flex; + align-items: center; } .action-menu-item-icon { - display: inline-block; - margin: 0 0.5em 0.25em 0; - vertical-align: middle; - + margin-right: 0.5em; width: var(--icon-size-action-menu); height: var(--icon-size-action-menu); } @@ -121,11 +119,13 @@ $action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow); } > label, - > button { - color: var(--base-color); + > button, + > a { + color: var(--color--highlight); cursor: pointer; &:hover { - color: var(--active-color); + color: var(--color--highlight-hover); + text-decoration: none; } } @@ -138,11 +138,11 @@ $action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow); &.action-menu-item-disabled { > label, > button { - color: var(--dark-gray-color-80); + color: var(--color--font-inactive); cursor: default; &:hover { - color: var(--dark-gray-color-80); + color: var(--color--font-inactive); } } } diff --git a/resources/assets/stylesheets/scss/admin-courses.scss b/resources/assets/stylesheets/scss/admin-courses.scss index c981579..0202544 100644 --- a/resources/assets/stylesheets/scss/admin-courses.scss +++ b/resources/assets/stylesheets/scss/admin-courses.scss @@ -1,40 +1,10 @@ -.button.has-notice, -.button.has-no-notice { - &::before { - display: inline-block; - height: var(--icon-size-inline); - vertical-align: sub; - width: var(--icon-size-inline); - } - &::before { - margin-right: 0.5ex; - } -} - -.button.has-notice { - &::before { - content: url("#{$image-path}/icons/blue/file-text.svg"); - } - &:hover::before { - content: url("#{$image-path}/icons/white/file-text.svg"); - } - -} -.button.has-no-notice { - &::before { - content: url("#{$image-path}/icons/blue/file.svg"); - } - &:hover::before { - content: url("#{$image-path}/icons/white/file.svg"); - } -} - .action-menu.filter { margin-left: 1em; } .action-menu.filter:not(.is-open) .action-menu-icon { - @include background-icon(settings); + @include icon(before, settings); + color: var(--color--highlight); span { display: none; } diff --git a/resources/assets/stylesheets/scss/admin.scss b/resources/assets/stylesheets/scss/admin.scss index 00f0102..af9aa5e 100644 --- a/resources/assets/stylesheets/scss/admin.scss +++ b/resources/assets/stylesheets/scss/admin.scss @@ -11,21 +11,28 @@ border-color: var(--color--tile-border-hover); } } + +$upload-icon-size: 48px; .js .drag-and-drop { - display: block; + display: flex; + flex-direction: row; + gap: 16px; margin: 0; overflow: hidden; - padding: 15px 15px 15px 80px; + padding: 15px; position: relative; text-align: left; background-color: transparent; border: solid thin transparent; - @include background-icon(upload, $size: 48px); - background-repeat: no-repeat; - background-position: 15px center; color: var(--base-color); cursor: pointer; + @include icon(before, upload, $size: $upload-icon-size); + &::before { + min-height: $upload-icon-size; + min-width: $upload-icon-size; + } + input[type=file] { border: 0; font-size: 5em; @@ -143,17 +150,21 @@ fieldset.attribute_table { } th .course-completion { - @include background-icon(radiobutton-checked); + @include icon(before, radiobutton-checked); + color: var(--color--highlight); } td .course-completion { - @include background-icon(span-empty, status-red); + @include icon(before, span-empty); + color: var(--color--warning); &[data-course-completion="1"] { - @include background-icon(span-2quarter, status-yellow); + @include icon(before, span-2quarter); + color: var(--color--attention); } &[data-course-completion="2"] { - @include background-icon(span-full, status-green); + @include icon(before, span-full); + color: var(--color--good); } &.ajaxing { diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss index e674e41..cf914e3 100644 --- a/resources/assets/stylesheets/scss/article.scss +++ b/resources/assets/stylesheets/scss/article.scss @@ -43,6 +43,12 @@ article.studip { > a { display: flex; align-items: center; + color: var(--color--highlight); + + &:hover { + color: var(--color--highlight-hover); + text-decoration: none; + } } &, @@ -75,6 +81,7 @@ article.studip { } } + @include highlight-anchor; } } diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss index e251512..d996199 100644 --- a/resources/assets/stylesheets/scss/buttons.scss +++ b/resources/assets/stylesheets/scss/buttons.scss @@ -1,11 +1,11 @@ @import '../mixins'; @mixin button() { - background: var(--color--button-background); - border: 1px solid var(--color--button-border); + background: var(--color--global-background); + border: 1px solid var(--color--highlight); border-radius: 4px; box-sizing: border-box; - color: var(--color--button-border); + color: var(--color--highlight); cursor: pointer; display: inline-block; font-family: $font-family-base; @@ -25,8 +25,8 @@ &:hover, &:active, &.active { - background-color: var(--color--button-focus); - color: var(--color--font-inverted); + background-color: var(--color--highlight); + color: var(--color--highlight-contrast); } &.disabled, @@ -59,32 +59,16 @@ button.button { } } -@mixin button-with-icon($icon, $role, $roleOnHover) { +@mixin button-with-icon($icon, $role: clickable, $roleOnHover: clickable) { @extend .button-with-empty-icon; - &::before { - @include background-icon($icon, $role, $icon-size-button); - } - - &:hover::before { - @include background-icon($icon, $roleOnHover, $icon-size-button); - } - - &.disabled, - &[disabled] { - &:hover::before { - @include background-icon($icon, $role, $icon-size-button); - } - } + @include icon(before, $icon, $size: $icon-size-button, $padding: 8px); } // $button-icons is a map of class names and icon names located in resources/assets/stylesheets/scss/_variables.scss @each $class, $icon in $button-icons { .button { &.#{'' + $class} { - padding-right: ($icon-size-button + 4px); - @include button-with-icon($icon, clickable, info_alt); - &.disabled, &[disabled] { - @include button-with-icon($icon, inactive, inactive); - } + padding-right: ($icon-size-button + 8px); + @include button-with-icon($icon); } } } @@ -147,3 +131,73 @@ button, } } } + +label { + &.undecorated.icon-button { + cursor: pointer; + svg { + vertical-align: middle; + } + } +} + +.btn-icon { + all: unset; + cursor: pointer; + display: inline-block; + + // $button-icons is a map of class names and icon names located in resources/assets/stylesheets/scss/_variables.scss + @each $name, $icon in $button-icons { + &--#{$name} { + @include icon(before, $icon, $align: middle); + + &.btn-icon--inline { + @include icon(before, $icon, $align: middle, $inline: true); + } + } + } +} + +button.button.btn-icon--only { + min-width: unset; + padding: 5px; + +} + +.square-button-panel { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + justify-content: center; +} + +$square-button-size: 130px; +.square-button { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + max-height: $square-button-size; + max-width: $square-button-size; + min-width: $square-button-size; + min-height: $square-button-size; + margin: 10px; + padding: 10px; + background-color: transparent; + color: var(--color--highlight); + border: solid thin var(--color--tile-border); + cursor: pointer; + + .studip-icon { + height: 50px; + margin-bottom: 8px; + } + span { + min-width: 110px; + } + &:hover { + color: var(--color--highlight-hover); + border-color: var(--color--highlight); + } +}
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/calendar.scss b/resources/assets/stylesheets/scss/calendar.scss index 17093e2..356cb3e 100644 --- a/resources/assets/stylesheets/scss/calendar.scss +++ b/resources/assets/stylesheets/scss/calendar.scss @@ -2,11 +2,11 @@ .fc-event { background-color: #fff; - color: #000; + color: var(--color--font-primary); border-width: 1px; &:hover { - color: #000; + color: var(--color--font-primary); } &.course-color-0 { @@ -141,6 +141,20 @@ filter: #{"invert()"}; } } + + .fc-title.has-icon::before { + content: ''; + display: inline-block; + vertical-align: text-bottom; + margin-right: 3px; + width: 14px; + height: 14px; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + background-color: currentColor; + mask-image: var(--icon-url); + } } } diff --git a/resources/assets/stylesheets/scss/colorpicker.scss b/resources/assets/stylesheets/scss/colorpicker.scss new file mode 100644 index 0000000..8dde65c --- /dev/null +++ b/resources/assets/stylesheets/scss/colorpicker.scss @@ -0,0 +1,99 @@ +.studip-color-picker { + position: relative; + display: inline-block; + + .studip-color-picker-value { + width: 64px; + height: 24px; + display: inline-block; + vertical-align: middle; + } + + .color-picker-popup { + position: absolute; + z-index: 10; + top: 100%; + left: 0; + background: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 1rem; + border-radius: 8px; + min-width: 180px; + } + + .tabs { + display: flex; + margin-bottom: 1rem; + + button { + flex: 1; + padding: 0.5rem; + background: none; + border: none; + border-bottom: 2px solid transparent; + cursor: pointer; + + &.active { + border-bottom-color: var(--color--tabs-marker-active); + font-weight: bold; + } + } + } + + .palette-grid { + display: grid; + grid-template-columns: repeat(5, 0fr); + gap: 8px; + margin-bottom: 1rem; + + .color-swatch { + width: 30px; + height: 30px; + border: 1px solid transparent; + cursor: pointer; + + &.selected { + &::before { + content: ''; + display: inline-block; + position: relative; + top: -4px; + outline: 2px solid var(--color--font-inverted); + outline-offset: 10px; + } + &.inverted { + &::before { + outline: 2px solid var(--color--font-secondary); + } + } + } + &.inverted { + border: 1px solid var(--color--font-secondary); + } + } + } + + .actions { + text-align: right; + } + + /* vue color */ + .vc-chrome-picker { + background-color: unset; + background: unset; + border-radius: unset; + box-shadow: unset; + width: unset; + font-family: unset; + } + .active-color { + border-radius: unset; + } +} + + +label { + .studip-color-picker { + display: block; + } +}
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss index b582ec5..46ae267 100644 --- a/resources/assets/stylesheets/scss/contentbar.scss +++ b/resources/assets/stylesheets/scss/contentbar.scss @@ -1,5 +1,5 @@ .contentbar { - background-color: var(--dark-gray-color-10); + background-color: var(--color--content-bar-background); display: flex; flex-wrap: nowrap; align-items: center; @@ -51,13 +51,7 @@ text-overflow: ellipsis; white-space: nowrap; - a { - color: var(--base-color); - text-decoration: none; - &:hover { - color: var(--active-color); - } - } + @include highlight-anchor; &.contentbar-breadcrumb-item-current { flex-shrink: 1; @@ -93,7 +87,7 @@ background-position: center; background-repeat: no-repeat; background-size: 24px; - border: solid thin var(--color--button-border); + border: solid thin var(--color--highlight); border-radius: var(--border-radius-default); cursor: pointer; display: inline-block; @@ -102,7 +96,7 @@ &.contentbar-button-menu, &.cw-ribbon-button-menu { - @include background-icon(table-of-contents); + @include icon(before, table-of-contents, $align: middle); } &.contentbar-button-zoom::before { diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss index d3d5a33..148b6e0 100644 --- a/resources/assets/stylesheets/scss/contents.scss +++ b/resources/assets/stylesheets/scss/contents.scss @@ -14,6 +14,10 @@ padding: 5px; grid-template-columns: 42px 135px; + &:hover { + text-decoration: none; + } + .content-item-img-wrapper { margin: 0 10px 5px 5px; width: 32px; @@ -50,7 +54,7 @@ justify-content: stretch; .content-item-link { - color: var(--color--font-primary); + color: var(--color--highlight); display: grid; flex: 1; grid-template-columns: 74px auto; @@ -58,13 +62,16 @@ padding: 25px 10px 10px; transition: 0.5s; + &:hover { + text-decoration: none; + } + .content-item-img-wrapper { width: 64px; } .content-item-text { .content-item-title { - color: var(--color--brand-primary); font-size: 1.3em; width: 100%; max-width: 160px; @@ -72,6 +79,10 @@ overflow: hidden; text-overflow: ellipsis; } + + .content-item-description { + color: var(--color--font-primary); + } } } @@ -82,9 +93,10 @@ color: unset; .content-item-link { + color: var(--color--highlight-hover); .content-item-text { - .content-item-title { - color: var(--red); + .content-item-description { + color: var(--color--font-primary); } } } diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 092a236..b2c83b6 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -8,6 +8,7 @@ @import './courseware/content-courses'; @import './courseware/dashboard'; @import './courseware/sortable'; +@import './courseware/tasks'; @import './courseware/toolbar'; @import './courseware/widgets'; @import './courseware/wizards'; @@ -20,7 +21,6 @@ @import './courseware/containers/tabs'; @import './courseware/blocks/default-block'; - @import './courseware/layouts/call-to-action'; @import './courseware/layouts/collapsible'; @import './courseware/layouts/companion'; @@ -35,3 +35,11 @@ @import './courseware/layouts/tile'; @import './courseware/layouts/tree'; @import './courseware/layouts/tree-units'; + +:root { + --color--courseware-border-default: #{$color--gray-5}; + --color--courseware-border-active: #{$color--gray-4}; + --color--courseware-background-default: #{$color--global-background}; + --color--courseware-background-highlight: #{$color--gray-6}; + --color--courseware-call-to-action-background: #{$petrol-20}; +} diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss index 8086fe7..6f0890a 100644 --- a/resources/assets/stylesheets/scss/courseware/blockadder.scss +++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss @@ -17,7 +17,7 @@ } &:hover { - border-color: var(--base-color); + border-color: var(--color--highlight-hover); .cw-sortable-handle { opacity: 1; @@ -28,24 +28,22 @@ align-items: flex-start; flex-direction: column; text-align: left; - color: var(--base-color); + color: var(--color--highlight); border: none; background-color: var(--white); - padding: 64px 10px 4px 10px; - @include background-icon(unit-test, $size: 48px); - background-position: 16px 10px; - background-repeat: no-repeat; + padding: 8px 16px 8px 16px; + @include icon(before, unit-test, $size: 48px); cursor: pointer; @each $item, $icon in $blockadder-items { &.cw-blockadder-item-#{$item} { - @include background-icon($icon, $size: 48px); + @include icon(before, $icon, $size: 48px); } } .cw-blockadder-item-title { display: inline-block; font-weight: 600; - margin-bottom: 2px; + margin: 4px 0 2px 0; } .cw-blockadder-item-description { display: inline-block; @@ -53,13 +51,14 @@ } &:hover { - color: var(--active-color); + color: var(--color--highlight-hover); } } .cw-blockadder-item-fav { height: 32px; padding: 8px; background-color: transparent; + color: var(--color--highlight); border: none; cursor: pointer; } @@ -75,28 +74,34 @@ } &:hover { - border-color: var(--base-color); + border-color: var(--color--highlight-hover); .cw-sortable-handle { opacity: 1; } } + $containeradder-icon-size: 48px; .cw-containeradder-item { + display: inline-flex; + gap: 16px; border: none; - background-color: var(--white); + background-color: var(--color--global-background); min-height: 5em; - padding: 1em 1em 1em 6em; - @include background-icon(unit-test, $size: 48px); - background-position: 16px center; - background-repeat: no-repeat; + padding: 16px; + @include icon(before, unit-test, $size: $containeradder-icon-size); text-align: left; - color: var(--base-color); + color: var(--color--highlight); cursor: pointer; + @each $item, $icon in $containeradder-items { &.cw-containeradder-item-#{$item} { - @include background-icon($icon, $size: 48px); + @include icon(before, $icon, $size: $containeradder-icon-size); + &::before { + min-width: $containeradder-icon-size; + min-height: $containeradder-icon-size; + } } } @@ -105,13 +110,13 @@ } &:hover { - color: var(--active-color); + color: var(--color--highlight-hover); } } } - +$container-style-selector-icon-size: 32px; .cw-container-style-selector { display: flex; border-bottom: solid thin var(--color--content-box-border); @@ -119,10 +124,14 @@ margin-bottom: 8px; label { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; border: solid thin var(--color--tile-border); border-right: none; - padding: calc(0.5em + 32px) 1em 0.5em 1em; - color: var(--base-color); + padding: 8px 16px; + color: var(--color--highlight); text-align: center; width: 33%; background-position: center 0.5em; @@ -134,20 +143,20 @@ } &.full { - @include background-icon(column-full, $size: 32px); + @include icon(before, column-full, $size: $container-style-selector-icon-size); } &.half { - @include background-icon(column-half, $size: 32px); + @include icon(before, column-half, $size: $container-style-selector-icon-size); } &.half-center { - @include background-icon(column-half-centered, $size: 32px); + @include icon(before, column-half-centered, $size: $container-style-selector-icon-size); } &:hover { - color: var(--active-color); + color: var(--color--highlight-hover); } &.cw-container-style-selector-active { - background-color: var(--content-color-20); - border: solid thin var(--base-color); + background-color: var(--color--tile-background-active); + border: solid thin var(--color--highlight); } } input[type='radio'] { @@ -164,7 +173,7 @@ } &.sortable-ghost { - background-color: var(--active-color); + background-color: var(--color--highlight-hover); } } .cw-element-inserter-wrapper { @@ -186,40 +195,41 @@ } &:hover { - border-color: var(--base-color); + border-color: var(--color--highlight-hover); .cw-sortable-handle { opacity: 1; } } + $clipboard-item-icon-size: 48px; .cw-clipboard-item { + display: inline-flex; + flex-direction: column; width: calc(100% - 36px); - padding: 64px 10px 4px 10px; - @include background-icon(unit-test, $size: 48px); - background-position: 16px 10px; - background-repeat: no-repeat; + padding: 8px 16px; + @include icon(before, unit-test, $size: $clipboard-item-icon-size); cursor: pointer; - background-color: var(--white); + background-color: var(--color--global-background); border: none; text-align: left; - color: var(--base-color); + color: var(--color--highlight); @each $item, $icon in $blockadder-items { &.cw-clipboard-item-#{$item} { - @include background-icon($icon, $size: 48px); + @include icon(before, $icon, $size: $clipboard-item-icon-size); } } @each $item, $icon in $containeradder-items { &.cw-clipboard-item-#{$item} { - @include background-icon($icon, $size: 48px); + @include icon(before, $icon, $size: $clipboard-item-icon-size); } } .cw-clipboard-item-title { display: inline-block; font-weight: 600; - margin-bottom: 2px; + margin: 4px 0 2px 0; } .cw-clipboard-item-description { diff --git a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss index 2ea944b..5b7dd64 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/audio.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/audio.scss @@ -4,7 +4,7 @@ flex-direction: row; flex-wrap: wrap; justify-content: space-between; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); padding: 36px; gap: 64px; } @@ -39,7 +39,7 @@ .default-cover { padding: 64px; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); } &.loading { @@ -86,14 +86,14 @@ cursor: pointer; outline: none; height: 2px; - background: var(--content-color-40); + background: var(--color--courseware-border-default); &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; - background-color: var(--base-color); + background-color: var(--color--highlight); border-radius: 50%; border: none; } @@ -101,7 +101,7 @@ &::-moz-range-thumb { height: 16px; width: 16px; - background-color: var(--base-color); + background-color: var(--color--highlight); border-radius: 50%; border: none; } @@ -122,12 +122,12 @@ height: 28px; margin-bottom: 1em; padding-bottom: 4px; - border-bottom: solid 2px var(--content-color-40); + border-bottom: solid 2px var(--color--courseware-border-default); .cw-recorder-visualization-bar { min-height: 4px; width: calc(100% / 32); - background-color: var(--base-color); + background-color: var(--color--highlight); &.idle-bar { height: 4px !important; @@ -163,7 +163,7 @@ li { &:not(:last-child) { - border-bottom: solid thin var(--dark-gray-color-30); + border-bottom: solid thin var(--color--courseware-border-active); } .cw-playlist-item { @@ -190,7 +190,7 @@ &.default-cover { padding: 32px; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/biography.scss b/resources/assets/stylesheets/scss/courseware/blocks/biography.scss index cdc7a14..3fa874d 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/biography.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/biography.scss @@ -22,16 +22,13 @@ $goals-types: ( min-height: 200px; flex-direction: row; padding: 2em 2em 2em 1em; - border: 2px solid var(--base-color); + border: 2px solid var(--color--tile-border); .cw-block-biography-type { margin: auto 1em auto 0; - padding-top: 96px; min-width: 192px; max-width: 192px; text-align: center; - background-repeat: no-repeat; - background-position: center top; } .cw-block-biography-details { @@ -39,14 +36,13 @@ $goals-types: ( margin-top: 0; } } - } } .cw-block-biography-achievements { @each $type, $icon in $achievement-types { .cw-block-biography-achievements-type-#{$type} { - @include background-icon($icon, $size: 96px); + @include icon(before, $icon, $size: 96px); } } } @@ -54,7 +50,7 @@ $goals-types: ( .cw-block-biography-goals { @each $type, $icon in $goals-types { .cw-block-biography-goals-type-#{$type} { - @include background-icon($icon, $size: 96px); + @include icon(before, $icon, $size: 96px); } } } @@ -64,7 +60,7 @@ $goals-types: ( min-height: 140px; .cw-block-biography-personal-information-type { - @include background-icon(person2, $size: 96px); + @include icon(before, person2, $size: 96px); } .cw-block-biography-personal-information-details { diff --git a/resources/assets/stylesheets/scss/courseware/blocks/blubber.scss b/resources/assets/stylesheets/scss/courseware/blocks/blubber.scss index 385840e..c86f043 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/blubber.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/blubber.scss @@ -1,11 +1,11 @@ @use '../../../mixins.scss' as *; .cw-block-blubber-content { - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); border-top: none; .cw-blubber-thread { - background-color: var(--white); + background-color: var(--color--global-background); border: unset; width: unset; max-width: unset; @@ -19,19 +19,19 @@ overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--content-color-10); + scrollbar-color: var(--color--scrollbar-thumb) var(--color--global-background); } .cw-blubber-thread-add-comment { - border-top: solid thin var(--content-color-40); + border-top: solid thin var(--color--courseware-border-default); padding-top: 1em; margin: 10px; textarea { width: calc(100% - 6px); resize: none; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); &:active { - border: solid thin var(--content-color-80); + border: solid thin var(--color--courseware-border-active); } } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss b/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss index decabf1..a42f96c 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/canvas.scss @@ -3,7 +3,7 @@ .cw-block-canvas { .cw-canvasblock-canvas { max-width: 100%; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); } .cw-canvasblock-upload-message { @@ -23,28 +23,33 @@ } .cw-canvasblock-toolbar { - border: solid thin var(--content-color-40); + display: flex; + border: solid thin var(--color--content-box-border); border-bottom: none; .cw-canvasblock-buttonset { - display: inline-block; + display: inline-flex; padding: 5px; margin-right: 0.5em; button { + display: inline-flex; + justify-content: center; + align-items: center; cursor: pointer; user-select: none; - border: solid thin var(--content-color-40); + border: solid thin var(--color--action-menu-border); height: 32px; width: 32px; - background-color: var(--white); - background-position: center; - background-repeat: no-repeat; - background-size: 24px 24px; + background-color: var(--color--global-background); + + &:not(:last-child) { + border-right: none; + } &.cw-canvasblock-color { $colors: ( - white: var(--white), + white: #ffffff, blue: #3498db, green: #2ecc71, purple: #9b59b6, @@ -53,86 +58,94 @@ orange: #f39c12, grey: #95a5a6, darkgrey: #34495e, - black: var(--black), + black: #000000, ); @each $name, $color in $colors { - &.#{'' + $name} { + &.#{'' + $name}::before { + content: ''; + width: 24px; + height: 24px; background-color: $color; } } &.selected-color { - border: solid 2px var(--black); + border: solid 2px var(--color--highlight); + width: 34px; } } &.cw-canvasblock-reset { - @include background-icon(refresh, $size: 24px); + @include icon(before, refresh, $size: 24px); } &.cw-canvasblock-size { - @include background-icon(stop); - - &.cw-canvasblock-size-small { - background-size: 8px 7px; + &::before { + content: ''; + background-color: var(--color--font-primary); + border-radius: 50%; + } + &.cw-canvasblock-size-small::before { + height: 4px; + width: 4px; } - &.cw-canvasblock-size-normal { - background-size: 16px 14px; + &.cw-canvasblock-size-normal::before { + height: 8px; + width: 8px; } - &.cw-canvasblock-size-large { - background-size: 22px 20px; + &.cw-canvasblock-size-large::before { + height: 12px; + width: 12px; } - &.cw-canvasblock-size-huge { - background-size: 26px 24px; + &.cw-canvasblock-size-huge::before { + height: 16px; + width: 16px; } &.selected-size { - border: solid 2px var(--black); + border: solid 2px var(--color--highlight); } } &.cw-canvasblock-tool { &.cw-canvasblock-tool-pen { - @include background-icon(comment); + @include icon(before, comment); } &.cw-canvasblock-tool-text { - vertical-align: top; - font-size: 22px; - color: var(--base-color); - font-weight: 600; + @include icon(before, block-typewriter); } &.selected-tool { - border: solid 2px var(--black); + border: solid 2px var(--color--highlight); } } &.cw-canvasblock-undo { - @include background-icon(arr_2left, $size: 24px); + @include icon(before, arr_2left, $size: 24px); } &.cw-canvasblock-download { - @include background-icon(download, $size: 24px); + @include icon(before, download, $size: 24px); } &.cw-canvasblock-store { - @include background-icon(upload, $size: 24px); + @include icon(before, upload, $size: 24px); } &.cw-canvasblock-show-all { - @include background-icon(group2, $size: 24px); + @include icon(before, group2, $size: 24px); &.selected-view { - border: solid 2px var(--black); + border: solid 2px var(--color--highlight); } } &.cw-canvasblock-show-own { - @include background-icon(person, $size: 24px); + @include icon(before, person, $size: 24px); &.selected-view { - border: solid 2px var(--black); + border: solid 2px var(--color--highlight); } } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/code.scss b/resources/assets/stylesheets/scss/courseware/blocks/code.scss index ac401cf..b4895a4 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/code.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/code.scss @@ -9,7 +9,7 @@ padding: 0.5em; background: var(--dark-gray-color-5); color: black; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); } .hljs-comment, @@ -24,7 +24,7 @@ .hljs-built_in, .hljs-name, .hljs-tag { - color: var(--base-color); + color: var(--color--blue-1); font-weight: 600; } @@ -55,7 +55,7 @@ } .hljs-attr { - color: var(--active-color); + color: var(--red); font-weight: 400; } @@ -76,12 +76,12 @@ } .code-lang { - background: var(--dark-gray-color-5); - border: solid thin var(--content-color-40); + background: var(--color--courseware-background-highlight); + border: solid thin var(--color--courseware-border-default); border-top: none; padding: 5px 10px; text-align: right; - color: var(--dark-gray-color-45); + color: var(--color--font-secondary); font-family: monospace; text-transform: full-width; } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss b/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss index 0c236fc..9d79fda 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/confirm.scss @@ -1,6 +1,6 @@ .cw-block-confirm { .cw-block-confirm-content { - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); padding: 1em; margin: 0; diff --git a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss index 4b032ae..8935c02 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/default-block.scss @@ -13,14 +13,15 @@ .cw-block-header { background-color: var(--color--content-box-header); padding: 4px 10px 4px 22px; + @include highlight-anchor; .cw-block-header-toggle { - display: inline-block; + display: inline-flex; + align-items: center; width: calc(100% - 50px); } span { - color: var(--base-color); font-weight: 700; line-height: 2em; font-size: 1.1em; @@ -32,11 +33,6 @@ } } - img { - vertical-align: middle; - margin-bottom: 2px; - } - .cw-block-actions { position: relative; float: right; @@ -47,12 +43,9 @@ } } -.cw-discuss-wrapper, .cw-block-features { header{ background-color: var(--color--content-box-header); - color: var(--base-color); - font-weight: 600; padding: 0.5em; } @@ -93,27 +86,12 @@ .cw-block-title { padding: 4px; background-color: var(--color--content-box-header); - color: var(--base-color); font-weight: 700; text-align: center; border: solid thin var(--color--content-box-border); border-bottom: none; } -.cw-file-empty { - @include background-icon(file, info, 96px); - border: solid thin var(--color--content-box-border); - background-position: center 1em; - background-repeat: no-repeat; - min-height: 140px; - padding: 1em; - p { - text-align: center; - padding-top: 106px; - } -} - - .cw-block-item:not(.cw-block-item-sortable):has(.cw-default-block-deactivated) { display: none; } @@ -143,4 +121,4 @@ pointer-events: none; } } -}
\ No newline at end of file +} diff --git a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss index dfc35b4..c0c532d 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss @@ -40,7 +40,7 @@ position: absolute; width: 100%; height: 100%; - color: var(--black); + color: var(--color--font-primary); text-align: center; font-weight: bold; font-size: 1.2em; @@ -54,11 +54,11 @@ } .cw-dialogcards-front-no-image { - @include background-icon(question, navigation, 150px); + @include icon(before, question, navigation, $size: 150px); } .cw-dialogcards-back-no-image { - @include background-icon(exclaim, navigation, 150px); + @include icon(before, exclaim, navigation, $size: 150px); } .cw-dialogcards-front-no-image, @@ -80,29 +80,31 @@ } .card__face--front { - @include background-icon(arr_1right); - background-color: var(--white); - background-repeat: no-repeat; - background-position: 95% 95%; + @include icon(after, arr_1right); } .card__face--back { - @include background-icon(arr_1left); - background-color: var(--white); - background-repeat: no-repeat; - background-position: 5% 95%; + @include icon(after, arr_1left); transform: rotateY(180deg); } + + .card__face--front, + .card__face--back { + background-color: var(--color--global-background); + &::after { + position: absolute; + right: 25px; + bottom: 25px; + } + } } .cw-dialogcards-navbutton { - color: transparent; + background-color: var(--color--highlight); + color: var(--color--highlight-contrast); width: 35px; height: 35px; - border-radius: 2px; - background-position: 50%; - background-repeat: no-repeat; - background-color: var(--base-color); + border-radius: var(--border-radius-default); border: none; display: block; z-index: 4; @@ -111,17 +113,18 @@ cursor: pointer; &.cw-dialogcards-prev { - @include background-icon(arr_1left, info-alt, 24px); + @include icon(before, arr_1left, $size: 24px, $align: middle, $padding: -2px); } &.cw-dialogcards-next { - @include background-icon(arr_1right, info-alt, 24px); - right: 0; + @include icon(before, arr_1right, $size: 24px, $align: middle, $padding: -2px); } &.cw-dialogcards-prev-disabled, &.cw-dialogcards-next-disabled { - background-color: var(--light-gray-color-40); + color: var(--color--button-inactive-background-contrast); + background-color: var(--color--button-inactive-background); + cursor: not-allowed; } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/document.scss b/resources/assets/stylesheets/scss/courseware/blocks/document.scss index 0c69cda..ff6e916 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/document.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/document.scss @@ -1,11 +1,11 @@ .cw-block-document { .cw-pdf-main-container { width: calc(100% - 2px); - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); .cw-block-title { border: none; - border-bottom: solid thin var(--content-color-40); + border-bottom: solid thin var(--color--courseware-border-default); } } .cw-pdf-toolbar { @@ -15,7 +15,7 @@ justify-content: flex-start; align-items: baseline; align-content: space-around; - background-color: var(--content-color-20); + background-color: var(--color--courseware-background-highlight); padding: 4px 8px; button { @@ -24,7 +24,7 @@ padding: 4px; &.active { - background-color: var(--base-color); + background-color: var(--color--highlight); } } @@ -84,7 +84,7 @@ top: 33px; left: 22px; width: auto; - background-color: var(--content-color-20); + background-color: var(--color--courseware-background-highlight); border-top: none; padding: 6px; z-index: 2; @@ -119,8 +119,8 @@ width: 25%; min-width: 270px; align-self: stretch; - background-color: var(--white); - border-right: solid 1px var(--content-color-40); + background-color: var(--color--global-background); + border-right: solid 1px var(--color--courseware-border-default); ul.cw-pdf-toc-list, ul.cw-pdf-toc-sub-list { diff --git a/resources/assets/stylesheets/scss/courseware/blocks/files.scss b/resources/assets/stylesheets/scss/courseware/blocks/files.scss index 77ed00d..89e7884 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/files.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/files.scss @@ -2,14 +2,14 @@ // folder block .cw-block-folder-info { - border: solid thin var(--content-color-40); + border: solid thin var(--color--content-box-border); padding: 10px 10px 0 10px; overflow: hidden; border-bottom: none; } .cw-block-folder-list { - border: solid thin var(--content-color-40); + border: solid thin var(--color--content-box-border); padding: 0; list-style: none; @@ -17,7 +17,7 @@ list-style: none; &:not(:last-child) { - border-bottom: solid thin var(--content-color-40); + border-bottom: solid thin var(--color--content-box-border); } a { @@ -30,8 +30,7 @@ } .cw-block-folder-download-icon { - @include background-icon(download, $size: 24px); - background-repeat: no-repeat; + @include icon(before, download, $size: 24px); float: right; height: 24px; width: 24px; @@ -40,7 +39,7 @@ } .cw-block-folder-upload { - border: solid thin var(--content-color-40); + border: solid thin var(--color--content-box-border); padding: 1em 10px; border-top: none; @@ -52,111 +51,73 @@ // for folder and download block .cw-block-file-info { - @include background-icon(file, $size: 24px); - background-repeat: no-repeat; + @include icon(before, file, $size: 24px, $padding: 4px, $align: middle); display: block; - padding: 16px 16px 16px 40px; - background-position: 10px 16px; + padding: 16px; width: calc(100% - 56px); min-height: 20px; overflow: hidden; text-overflow: ellipsis; &.cw-block-file-icon-empty { - color: var(--black); - @include background-icon(folder-empty, info, 24px); + color: var(--color--font-primary); + @include icon(before, folder-empty, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-none { - color: var(--black); - @include background-icon(file, info, 24px); + color: var(--color--font-primary); + @include icon(before, file, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-audio { - @include background-icon(file-audio, $size: 24px); - - &.download-disabled { - @include background-icon(file-audio, info, 24px); - } + @include icon(before, file-audio, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-pic { - @include background-icon(file-pic, $size: 24px); - - &.download-disabled { - @include background-icon(file-pic, info, 24px); - } + @include icon(before, file-pic, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-video { - @include background-icon(file-video, $size: 24px); - - &.download-disabled { - @include background-icon(file-video, info, 24px); - } + @include icon(before, file-video, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-pdf { - @include background-icon(file-pdf, $size: 24px); - - &.download-disabled { - @include background-icon(file-pdf, info, 24px); - } + @include icon(before, file-pdf, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-word { - @include background-icon(file-word, $size: 24px); - - &.download-disabled { - @include background-icon(file-word, info, 24px); - } + @include icon(before, file-word, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-spreadsheet { - @include background-icon(file-excel, $size: 24px); - - &.download-disabled { - @include background-icon(file-excel, info, 24px); - } + @include icon(before, file-excel, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-text { - @include background-icon(file-text, $size: 24px); - - &.download-disabled { - @include background-icon(file-text, info, 24px); - } + @include icon(before, file-text, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-ppt { - @include background-icon(file-ppt, $size: 24px); - - &.download-disabled { - @include background-icon(file-ppt, info, 24px); - } + @include icon(before, file-ppt, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-archive { - @include background-icon(file-archive, $size: 24px); - - &.download-disabled { - @include background-icon(file-archive, info, 24px); - } + @include icon(before, file-archive, $size: 24px, $padding: 4px, $align: middle); } &.cw-block-file-icon-file { - @include background-icon(file, $size: 24px); + @include icon(before, file, $size: 24px, $padding: 4px, $align: middle); + } - &.download-disabled { - @include background-icon(file, info, 24px); - } + &.download-disabled { + color: var(--color--font-inactive); } } .cw-block-file-details { margin-top: -16px; padding-left: 40px; padding-bottom: 16px; - color: var(--dark-gray-color); + color: var(--color--font-secondar); } .cw-block-file-owner, .cw-block-file-mkdate { @@ -169,7 +130,7 @@ // download block .cw-block-download { .cw-block-download-content { - border: solid thin var(--content-color-40); + border: solid thin var(--color--content-box-border); .cw-block-download-file-item { a { @@ -177,12 +138,11 @@ } &:hover { - background-color: fade-out($dark-gray-color-75, 0.8); + background-color: var(--color--table-hover); } .cw-block-download-download-icon { - @include background-icon(download, $size: 24px); - background-repeat: no-repeat; + @include icon(before, download, $size: 24px); float: right; height: 24px; width: 24px; diff --git a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss index 6bacf7a..0781b87 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/gallery.scss @@ -26,37 +26,29 @@ .cw-block-gallery-next { cursor: pointer; position: absolute; - background-color: fade-out($white, 0.6); + background-color: fade-out($color--global-background, 0.6); + color: var(--color--font-primary); top: 50%; height: 36px; width: 36px; - background-repeat: no-repeat; - background-position: center; margin-top: -22px; transition: 200ms ease; user-select: none; border: none; &:hover { - background-color: var(--base-color); + background-color: var(--color--highlight); + color: var(--color--highlight-contrast); } } .cw-block-gallery-prev { - @include background-icon(arr_1left, $size: 24px); - - &:hover { - @include background-icon(arr_1left, info-alt, 24px); - } + @include icon(before, arr_1left, $size: 24px, $align: middle, $padding: -4px); } .cw-block-gallery-next { right: 0; - @include background-icon(arr_1right, $size: 24px); - - &:hover { - @include background-icon(arr_1right, info-alt, 24px); - } + @include icon(before, arr_1right, $size: 24px, $align: middle, $padding: -4px); } .cw-block-gallery-file-description { diff --git a/resources/assets/stylesheets/scss/courseware/blocks/headline.scss b/resources/assets/stylesheets/scss/courseware/blocks/headline.scss index 2bfaace..5590973 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/headline.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/headline.scss @@ -11,9 +11,6 @@ $large-icon-size-px: $large-icon-size * 1px; .cw-block-headline-content { min-height: 600px; overflow: hidden; - background-position: center; - background-size: $max-content-width; - background-repeat: no-repeat; &.half { min-height: 300px; @@ -57,48 +54,26 @@ $large-icon-size-px: $large-icon-size * 1px; } &.bigicon_top { .icon-layer { - background-repeat: no-repeat; - background-position: center; + display: flex; + flex-direction: column; + align-items: center; margin-top: 8em; margin-bottom: 1em; - background-size: $big-icon-size-px; height: $big-icon-size-px; @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, $big-icon-size-px); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, $big-icon-size-px); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, $size: $big-icon-size-px); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, $big-icon-size-px); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, $big-icon-size-px); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, $big-icon-size-px); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, $big-icon-size-px); + &.icon-name-#{$icon} { + @include icon(before, $icon, $size: $big-icon-size-px); } } &.half { height: 144px; - background-size: 144px; - background-position: center; margin-top: 2em; margin-bottom: 0; } &.quarter { height: 72px; - background-size: 72px; - background-position: center; margin-top: 1em; margin-bottom: 0; } @@ -150,37 +125,16 @@ $large-icon-size-px: $large-icon-size * 1px; min-height: $big-icon-size-px; min-width: $big-icon-size-px; margin: 0 28px 0 28px; - background-repeat: no-repeat; - background-position: left center; @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, $big-icon-size-px); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, $big-icon-size-px); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, $size: $big-icon-size-px); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, $big-icon-size-px); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, $big-icon-size-px); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, $big-icon-size-px); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, $big-icon-size-px); + &.icon-name-#{$icon} { + @include icon(before, $icon, $size: $big-icon-size-px); } } &.quarter { min-height: $large-icon-size-px; min-width: $large-icon-size-px; - background-size: $large-icon-size-px; } } @@ -357,56 +311,29 @@ $large-icon-size-px: $large-icon-size * 1px; width: calc(50% - 96px); height: 64px; display: inline-block; - border-top: solid 4px; + border-top: solid 4px var(--cw-headline-border-color); content: ''; } - @each $name, $hex in $border-colors { - &.border-#{'' + $name}::before, - &.border-#{'' + $name}::after { - border-color: $hex; - } - } .icon-layer { - background-repeat: no-repeat; - background-position: center; - background-size: 128px; + display: inline-flex; + align-items: center; + flex-direction: column; height: 128px; width: 192px; - display: inline-block; margin: auto; @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, 128px); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, 128px); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, $size: 128px); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, 128px); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, 128px); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, 128px); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, 128px); + &.icon-name-#{$icon} { + @include icon(before, $icon, $size: 128px); } } &.half { height: 128px; - background-size: 128px; } &.quarter { height: 64px; width: 96px; - background-size: 64px; } } &.half { @@ -425,12 +352,8 @@ $large-icon-size-px: $large-icon-size * 1px; width: calc(100% - 64px); min-height: 350px; margin: 0 auto; - border-bottom: solid 4px; - @each $name, $hex in $border-colors { - &.border-#{'' + $name} { - border-color: $hex; - } - } + border-bottom: solid 4px var(--cw-headline-border-color); + .cw-block-headline-title { h1 { border: none; @@ -504,39 +427,21 @@ $large-icon-size-px: $large-icon-size * 1px; } &.bigicon_top { .icon-layer { - background-position: center; + display: flex; + flex-direction: column; + align-items: center; height: 98px; margin-top: 2em; margin-bottom: 1em; @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, 98px); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, 98px); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, $size: 98px); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, 98px); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, 98px); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, 98px); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, 98px); + &.icon-name-#{$icon} { + @include icon(before, $icon, $size: 98px); } } &.half { - background-size: 72px; height: 72px; - background-position: center; } } @@ -558,32 +463,16 @@ $large-icon-size-px: $large-icon-size * 1px; } } &.bigicon_before { + display: flex; + align-items: center; min-height: 300px; .icon-layer { min-height: 92px; min-width: 92px; - background-position: 0 center; + @each $icon in $icons { - &.icon-black-#{$icon} { - @include background-icon($icon, info, 92px); - } - &.icon-white-#{$icon} { - @include background-icon($icon, info-alt, 92px); - } - &.icon-studip-blue-#{$icon} { - @include background-icon($icon, $size: 92px); - } - &.icon-studip-red-#{$icon} { - @include background-icon($icon, status-red, 92px); - } - &.icon-studip-yellow-#{$icon} { - @include background-icon($icon, status-yellow, 92px); - } - &.icon-studip-green-#{$icon} { - @include background-icon($icon, status-green, 92px); - } - &.icon-studip-gray-#{$icon} { - @include background-icon($icon, inactive, 92px); + &.icon-name-#{$icon} { + @include icon(before, $icon, $size: 92px); } } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss b/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss index 6bba2ab..bb2c391 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/iframe.scss @@ -3,12 +3,12 @@ .cw-block-iframe { .cw-block-content { iframe { - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); width: calc(100% - 2px); } .cw-block-iframe-cc-data { - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); border-top: none; margin-top: -6px; padding-top: 10px; diff --git a/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss b/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss index 7e1040a..a7b8470 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss @@ -11,8 +11,8 @@ left: 0; height: 48px; width: 48px; - background-color: var(--white); - border: solid 4px var(--black); + background-color: var(--color--global-background); + border: solid 4px transparent; border-radius: 64px; padding: 16px; margin: 1px 0; diff --git a/resources/assets/stylesheets/scss/courseware/blocks/link.scss b/resources/assets/stylesheets/scss/courseware/blocks/link.scss index bfa286d..609c6ed 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/link.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/link.scss @@ -6,13 +6,11 @@ } .cw-link { - border: solid thin var(--content-color-40); - color: var(--base-color); - height: 20px; + border: solid thin var(--color--highlight); + color: var(--color--highlight); padding: 1em; .cw-link-title { - margin-left: 3em; &.unit { header { font-size: 16px; @@ -21,29 +19,16 @@ } &:hover { - background-color: var(--base-color); - border: solid thin var(--base-color); - color: var(--white); + background-color: var(--color--highlight); + color: var(--color--highlight-contrast); } &.internal { - @include background-icon(link-intern, $size: 28px); - background-position: 1em 50%; - background-repeat: no-repeat; - - &:hover { - @include background-icon(link-intern, info-alt, 28px); - } + @include icon(before, link-intern, $size: 28px, $align: middle, $padding: 8px); } &.external { - @include background-icon(link-extern, $size: 28px); - background-position: 1em 50%; - background-repeat: no-repeat; - - &:hover { - @include background-icon(link-extern, info-alt, 28px); - } + @include icon(before, link-extern, $size: 28px, $align: middle, $padding: 8px); .cw-link-og-image { display: inline-block; @@ -69,7 +54,7 @@ } .cw-link-og-description { - color: var(--base-color-80); + color: var(--color--font-secondary); text-align: justify; } } @@ -78,6 +63,7 @@ &.unit { height: unset; display: flex; + gap: 8px; .cw-unit-link { background-repeat: no-repeat; @@ -95,10 +81,10 @@ &:hover { background-color: unset; - border: solid thin var(--base-color); + border: solid thin var(--color--highlight); .cw-link-title { header { - color: var(--active-color); + color: var(--color--content-link-hover); } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/lti.scss b/resources/assets/stylesheets/scss/courseware/blocks/lti.scss index 5f4a82a..9d48a67 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/lti.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/lti.scss @@ -3,16 +3,14 @@ .cw-block-lti { .cw-block-content { .cw-block-lti-content { - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); box-sizing: border-box; } .cw-block-lti-icon-tool { - @include background-icon(plugin, info, 24px); - background-repeat: no-repeat; + @include icon(before, plugin, $size: 24px, $align: middle); display: block; - padding: 16px 16px 16px 40px; - background-position: 10px center; + padding: 16px; overflow: hidden; text-overflow: ellipsis; } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss b/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss index 76bc53c..fac4948 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss @@ -10,17 +10,17 @@ .cw-block-table-of-contents-list { padding: 0; list-style: none; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); li { &:not(:last-child) { - border-bottom: solid thin var(--dark-gray-color-30); + border-bottom: solid thin var(--color--courseware-border-active); } a { display: block; padding: 1em; } &:hover { - background-color: fade-out($dark-gray-color-75, 0.8); + background-color: var(--color--courseware-background-highlight); } } } @@ -28,14 +28,14 @@ .cw-block-table-of-contents-list-details { padding: 0; list-style: none; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); li { &:not(:last-child) { - border-bottom: solid thin var(--dark-gray-color-30); + border-bottom: solid thin var(--color--courseware-border-active); } &:hover { - background-color: fade-out($dark-gray-color-75, 0.8); + background-color: var(--color--courseware-background-highlight); } a { display: block; @@ -58,7 +58,7 @@ p, p:hover { - color: var(--black); + color: var(--color--font-primary); } } diff --git a/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss b/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss index 49256b7..d928786 100644 --- a/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss +++ b/resources/assets/stylesheets/scss/courseware/blocks/timeline.scss @@ -21,7 +21,7 @@ content:""; width: 3px; height: 100%; - background: var(--content-color-40); + background: var(--color--courseware-border-default); left: 50%; top: 0; position: absolute; @@ -40,7 +40,7 @@ @extend %clearfix; .cw-timeline-item-icon { - background: var(--white); + background: var(--color--global-background); width: 50px; height: 50px; position: absolute; @@ -51,73 +51,28 @@ @each $name, $color in $tile-colors { &.cw-timeline-item-icon-color-#{"" + $name} { border: solid 2px $color; + color: $color; } } border-radius: 50%; - img { + .studip-icon { position: relative; top: 9px; left: 9px; - - &.charcoal { - filter: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(364%) hue-rotate(168deg) brightness(87%) contrast(79%); - } - &.royal-purple { - filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(658%) hue-rotate(234deg) brightness(100%) contrast(87%); - } - &.iguana-green { - filter: brightness(0) saturate(100%) invert(74%) sepia(9%) saturate(1885%) hue-rotate(76deg) brightness(86%) contrast(88%); - } - &.queen-blue { - filter: brightness(0) saturate(100%) invert(44%) sepia(10%) saturate(2086%) hue-rotate(178deg) brightness(88%) contrast(80%); - } - &.verdigris { - filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(4959%) hue-rotate(131deg) brightness(103%) contrast(49%); - } - &.mulberry { - filter: brightness(0) saturate(100%) invert(49%) sepia(16%) saturate(1665%) hue-rotate(271deg) brightness(88%) contrast(95%); - } - &.pumpkin { - filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(1993%) hue-rotate(13deg) brightness(104%) contrast(108%); - } - &.sunglow { - filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(6824%) hue-rotate(313deg) brightness(102%) contrast(100%); - } - &.apple-green { - filter: brightness(0) saturate(100%) invert(69%) sepia(5%) saturate(5203%) hue-rotate(42deg) brightness(100%) contrast(84%); - } - &.studip-blue { - filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%); - } - &.studip-lightblue { - filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(190%) hue-rotate(190deg) brightness(104%) contrast(89%); - } - &.studip-red { - filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(6904%) hue-rotate(1deg) brightness(95%) contrast(109%); - } - &.studip-green { - filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1531%) hue-rotate(109deg) brightness(95%) contrast(101%); - } - &.studip-yellow { - filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%); - } - &.studip-gray { - filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(2621%) hue-rotate(169deg) brightness(87%) contrast(87%); - } } } .cw-timeline-item-content { width: 40%; - background: var(--white); + background: var(--color--global-background); padding: 20px; transition: all var(--transition-duration) ease; h3 { padding: 15px; - color: var(--white); + color: var(--color--font-inverted); margin: -20px -20px 0 -20px; font-weight: 700; min-height: 1.1em; @@ -125,7 +80,7 @@ article { min-height: 2em; - border: solid thin var(--content-color-20); + border: solid thin var(--color--courseware-border-active); border-top: none; margin: 0 -20px; padding: 15px; diff --git a/resources/assets/stylesheets/scss/courseware/comments.scss b/resources/assets/stylesheets/scss/courseware/comments.scss index cec94b0..ef989fc 100644 --- a/resources/assets/stylesheets/scss/courseware/comments.scss +++ b/resources/assets/stylesheets/scss/courseware/comments.scss @@ -23,14 +23,14 @@ .cw-structural-element-comment-create, .cw-block-feedback-create, .cw-block-comment-create { - border-top: solid thin var(--content-color-40); + border-top: solid thin var(--color--courseware-border-default); padding: 8px 1em 0 1em; textarea { width: calc(100% - 6px); resize: none; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); &:active { - border: solid thin var(--content-color-80); + border: solid thin var(--color--courseware-border-active); } } } diff --git a/resources/assets/stylesheets/scss/courseware/containers/accordion.scss b/resources/assets/stylesheets/scss/courseware/containers/accordion.scss index 5cbd2df..87e45eb 100644 --- a/resources/assets/stylesheets/scss/courseware/containers/accordion.scss +++ b/resources/assets/stylesheets/scss/courseware/containers/accordion.scss @@ -4,7 +4,7 @@ .cw-block-wrapper-active { .cw-container-accordion-block-list:empty { height: 4em; - border: dashed 2px var(--content-color-40); + border: dashed 2px var(--color--courseware-border-default); } } diff --git a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss index 02317f9..4860b9e 100644 --- a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss +++ b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss @@ -21,13 +21,14 @@ background-color: var(--color--content-box-header); padding: 4px 10px 4px 22px; + @include highlight-anchor; .cw-container-header-toggle { - display: inline-block; + display: inline-flex; + align-items: center; width: calc(100% - 40px); } span { - color: var(--base-color); font-weight: 700; line-height: 2em; font-size: 16px; @@ -37,11 +38,6 @@ } } - img { - vertical-align: middle; - margin-bottom: 2px; - } - .cw-container-actions { position: relative; float: right; diff --git a/resources/assets/stylesheets/scss/courseware/containers/list.scss b/resources/assets/stylesheets/scss/courseware/containers/list.scss index 063adda..0fbf55d 100644 --- a/resources/assets/stylesheets/scss/courseware/containers/list.scss +++ b/resources/assets/stylesheets/scss/courseware/containers/list.scss @@ -8,7 +8,7 @@ .cw-container-list-block-list:empty { height: 4em; - border: dashed 2px var(--content-color-40); + border: dashed 2px var(--color--courseware-border-default); } } diff --git a/resources/assets/stylesheets/scss/courseware/containers/tabs.scss b/resources/assets/stylesheets/scss/courseware/containers/tabs.scss index 5ff8789..384faf7 100644 --- a/resources/assets/stylesheets/scss/courseware/containers/tabs.scss +++ b/resources/assets/stylesheets/scss/courseware/containers/tabs.scss @@ -13,7 +13,7 @@ .cw-container-tabs-block-list:empty { height: 4em; - border: dashed 2px var(--content-color-40); + border: dashed 2px var(--color--courseware-border-default); margin: 5px; } diff --git a/resources/assets/stylesheets/scss/courseware/dashboard.scss b/resources/assets/stylesheets/scss/courseware/dashboard.scss index a3e9dd3..3734fb1 100644 --- a/resources/assets/stylesheets/scss/courseware/dashboard.scss +++ b/resources/assets/stylesheets/scss/courseware/dashboard.scss @@ -72,7 +72,7 @@ padding: 0; .cw-activity-item { - border-bottom: solid thin var(--content-color-40); + border-bottom: solid thin var(--color--courseware-border-default); padding: 0.5em; &:last-child { diff --git a/resources/assets/stylesheets/scss/courseware/layouts/call-to-action.scss b/resources/assets/stylesheets/scss/courseware/layouts/call-to-action.scss index 2e5e3b9..f5ad9ee 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/call-to-action.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/call-to-action.scss @@ -1,19 +1,20 @@ @use '../../../mixins.scss' as *; .cw-call-to-action { - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); .action-button { width: 100%; - background-color: var(--activity-color-20); + background-color: var(--color--global-background); border: none; text-align: left; padding: 1em; cursor: pointer; - img { - margin: 0 1em; + .studip-icon { + display: inline-block; vertical-align: middle; + margin-right: 1em; } } }
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss index e1acb44..15ffaed 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss @@ -5,27 +5,21 @@ margin-bottom: -1px; .cw-collapsible-title { - @include background-icon(arr_1right); - background-position: 6px center; - background-repeat: no-repeat; + @include icon(before, arr_1right, $align: middle, $padding: 4px); background-color: var(--color--content-box-header); - padding: 0.5em 2em; + padding: 0.5em; margin: 0; font-weight: 600; - color: var(--base-color); + color: var(--color--highlight); cursor: pointer; &.cw-collapsible-open { - @include background-icon(arr_1down); + @include icon(before, arr_1down, $align: middle, $padding: 4px); .cw-container-list-sort-mode { margin-top: 8px; } } - - img { - vertical-align: top; - } } .cw-collapsible-content.cw-collapsible-content-open { diff --git a/resources/assets/stylesheets/scss/courseware/layouts/companion.scss b/resources/assets/stylesheets/scss/courseware/layouts/companion.scss index dc80d39..229f436 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/companion.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/companion.scss @@ -19,12 +19,12 @@ $companion-types: ( max-width: calc(100% - 140px); height: 120px; z-index: 42000; - border: solid thin var(--content-color-40); - background-color: var(--white); + border: solid thin var(--color--courseware-border-default); + background-color: var(--color--global-background); background-repeat: no-repeat; background-position: 1em center; background-size: 100px; - box-shadow: 5px 5px var(--dark-gray-color-10); + box-shadow: 5px 5px var(--color--courseware-border-default); padding-left: 120px; transform: translateX(100%); transition: transform .5s ease; @@ -46,27 +46,13 @@ $companion-types: ( top: 25%; padding: 0 1em; } - - .cw-compantion-overlay-close { - @include background-icon(decline); - background-color: var(--white); - background-repeat: no-repeat; - - position: absolute; - top: 7px; - right: 7px; - height: var(--icon-size-default); - width: var(--icon-size-default); - border: none; - cursor: pointer; - } } .cw-companion-box { display: flex; height: 120px; - border: solid thin var(--content-color-40); - background-color: var(--white); + border: solid thin var(--color--courseware-border-default); + background-color: var(--color--global-background); background-repeat: no-repeat; background-position: 1em center; background-size: 100px; @@ -90,6 +76,6 @@ $companion-types: ( .cw-companion-message { margin: 0 1em 10px 0; - color: var(--black); + color: var(--color--font-primary); } } diff --git a/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss b/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss index 5ffd9a2..3b5f1eb 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss @@ -7,7 +7,7 @@ } .progress-bar-wrapper { width: 100%; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); .progress-bar { display: flex; @@ -16,7 +16,7 @@ color: white; text-align: center; white-space: nowrap; - background-color: var(--base-color); + background-color: var(--color--highlight); } } } diff --git a/resources/assets/stylesheets/scss/courseware/layouts/progress.scss b/resources/assets/stylesheets/scss/courseware/layouts/progress.scss index 822294f..5cf7ac6 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/progress.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/progress.scss @@ -30,7 +30,7 @@ } .cw-unit-progress-subchapter-list { - border-top: solid thin var(--content-color-40); + border-top: solid thin var(--color--courseware-border-default); padding: 0 1em 0 1em; .cw-unit-empty-info { @@ -41,7 +41,7 @@ .cw-unit-progress-item { display: block; - border-bottom: solid thin var(--content-color-40); + border-bottom: solid thin var(--color--courseware-border-default); padding: 10px 0; &:hover { @@ -60,7 +60,7 @@ .cw-unit-progress-item-value { width: 70px; - color: var(--base-color); + color: var(--color--highlight); font-size: xx-large; .cw-progress-circle { @@ -70,7 +70,7 @@ } .cw-unit-progress-item-description { - color: var(--base-color); + color: var(--color--highlight); padding: 0.5em 0 0 1em; text-overflow: ellipsis; overflow: hidden; @@ -85,7 +85,7 @@ padding: 0; width: 5em; height: 5em; - background-color: var(--dark-gray-color-10); + background-color: var(--color--courseware-background-highlight); border-radius: 50%; line-height: 5em; @@ -109,7 +109,7 @@ width: 5em; text-align: center; display: block; - color: var(--base-color); + color: var(--color--highlight); z-index: 2; } @@ -131,14 +131,14 @@ width: 5em; height: 5em; border-radius: 50%; - border: 0.45em solid var(--base-color); + border: 0.45em solid var(--color--highlight); box-sizing: border-box; } &.over50 .first50-bar { position: absolute; clip: rect(0, 5em, 5em, 2.5em); - background-color: var(--base-color); + background-color: var(--color--highlight); border-radius: 50%; width: 5em; height: 5em; diff --git a/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss b/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss index 673ed2b..d867fce 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/radioset.scss @@ -27,12 +27,13 @@ form.default .cw-radioset { width: 100%; margin: 0; cursor: pointer; - @include background-icon(radiobutton-unchecked); + @include icon(after, radiobutton-unchecked); background-position: center 104px; background-repeat: no-repeat; + color: var(--color--highlight); .label-text { - height: 48px; + height: 42px; max-width: 80%; overflow: hidden; display: grid; @@ -48,7 +49,7 @@ form.default .cw-radioset { @each $type, $icon in $radio-icons { &.#{$type} { - @include background-icon(#{$icon}, $size: 48px); + @include icon(before, #{$icon}, $size: 48px); } } } @@ -68,14 +69,15 @@ form.default .cw-radioset { } &.selected { - border-color: var(--base-color); + border-color: var(--color--highlight); + color: var(--color--highlight); background-color: var(--color--tile-background-active); label { - @include background-icon(check-circle); + @include icon(after, check-circle); .label-icon { @each $type, $icon in $radio-icons { &.#{$type} { - @include background-icon(#{$icon}, $size: 48px); + @include icon(before, #{$icon}, $size: 48px); } } } diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss index c04407b..c256fe1 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss @@ -16,7 +16,7 @@ $consum_ribbon_width: calc(100% - 58px); .cw-ribbon-wrapper-consume { padding-top: 7px; padding-bottom: 15px; - background-color: var(--white); + background-color: var(--color--global-background); z-index: 42; } @@ -25,7 +25,7 @@ $consum_ribbon_width: calc(100% - 58px); height: 15px; left: 0; width: calc(100% - 1em); - background-color: var(--white); + background-color: var(--color--global-background); z-index: 40; } @@ -34,7 +34,7 @@ $consum_ribbon_width: calc(100% - 58px); top: 40px; height: 20px; width: calc(100% - 314px); - background-color: var(--white); + background-color: var(--color--global-background); z-index: 39; } @@ -43,7 +43,7 @@ $consum_ribbon_width: calc(100% - 58px); top: 108px; height: 16px; width: calc(100% - 314px); - background-color: var(--white); + background-color: var(--color--global-background); z-index: 39; } @@ -61,7 +61,7 @@ $consum_ribbon_width: calc(100% - 58px); margin-bottom: 15px; padding: 0 2em; justify-content: space-between; - background-color: var(--dark-gray-color-10); + background-color: var(--color--content-bar-background); &.cw-ribbon-sticky { position: fixed; @@ -82,33 +82,26 @@ $consum_ribbon_width: calc(100% - 58px); padding: 1px 2px; border: none; background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-size: 24px; + color: var(--color--highlight); cursor: pointer; &.cw-ribbon-button-menu { - @include background-icon(table-of-contents); + @include icon(before, table-of-contents, $align: middle); } &.cw-ribbon-button-prev { - @include background-icon(arr_1left, $size: 24px); + @include icon(before, arr_1left, $size: 24px, $align: middle); margin: 0 0.5em 0 0; } &.cw-ribbon-button-next { - @include background-icon(arr_1right, $size: 24px); - margin: 0 0.5em 0 0; - } - - &.cw-ribbon-button-prev-disabled { - @include background-icon(arr_1left, inactive, 24px); + @include icon(before, arr_1right, $size: 24px, $align: middle); margin: 0 0.5em 0 0; - cursor: default; } - &.cw-ribbon-button-next-disabled { - @include background-icon(arr_1right, inactive, 24px); + &.cw-ribbon-button-prev.disabled, + &.cw-ribbon-button-next.disabled { + color: var(--color--font-inactive); margin: 0 0.5em 0 0; cursor: default; } @@ -125,12 +118,10 @@ $consum_ribbon_width: calc(100% - 58px); display: flex; align-items: center; + @include highlight-anchor; + .contentbar-icon { margin: 0 15px 0 10px; - - img { - vertical-align: middle; - } } } @@ -160,13 +151,7 @@ $consum_ribbon_width: calc(100% - 58px); text-overflow: ellipsis; white-space: nowrap; - a { - color: var(--base-color); - text-decoration: none; - &:hover { - color: var(--active-color); - } - } + @include highlight-anchor; img { vertical-align: text-top; @@ -178,6 +163,10 @@ $consum_ribbon_width: calc(100% - 58px); &.cw-ribbon-breadcrumb-item-current { flex-shrink: 1; + + .studip-icon { + display: inline-block; + } } } } @@ -203,44 +192,43 @@ $consum_ribbon_width: calc(100% - 58px); } } - button:not(.action-menu-icon) { + button:not(.action-menu-icon):not(.button) { height: 32px; width: 32px; border-radius: var(--border-radius-default); - border: solid thin var(--color--button-border); - background-color: var(--color--button-background); + border: solid thin var(--color--highlight); + background-color: var(--color--global-background); cursor: pointer; &:hover, &:active, &.active { - background: var(--color--button-focus); + background: var(--color--highlight); color: var(--color--font-inverted); } &.cw-ribbon-button-menu { - @include background-icon(table-of-contents); - background-repeat: no-repeat; - background-position: center; + color: var(--color--highlight); + @include icon(before, table-of-contents, $align: middle); &:hover, &:active, &.active { - @include background-icon(table-of-contents, info_alt); + color: var(--color--highlight-contrast); } } } .action-menu:not(.is-open) { - border: solid thin var(--color--button-border); + border: solid thin var(--color--highlight); border-radius: var(--border-radius-default); - background-color: var(--color--button-background); + background-color: var(--color--global-background); padding: 5px; &:hover, &:active, &.active { - background: var(--color--button-focus); + background: var(--color--highlight); .action-menu-icon span { background-color: var(--color--font-inverted); @@ -260,9 +248,9 @@ $consum_ribbon_width: calc(100% - 58px); } .cw-ribbon-tools { - background-color: var(--white); - border: solid thin var(--content-color-40); - box-shadow: 2px 2px var(--dark-gray-color-30); + background-color: var(--color--global-background); + border: solid thin var(--color--courseware-border-default); + box-shadow: 2px 2px var(--color--courseware-border-default); position: absolute; right: 0; top: 0; @@ -294,18 +282,22 @@ $consum_ribbon_width: calc(100% - 58px); .cw-ribbon-tool-content { height: 100%; width: 540px; - background-color: var(--white); + background-color: var(--color--global-background); padding: 0; overflow: hidden; + a { + text-decoration: none; + } + .cw-ribbon-tool-content-nav { position: sticky; height: 100%; top: 0; - background-color: var(--white); + background-color: var(--color--global-background); margin: 0; padding: 0; - color: var(--base-color); + color: var(--color--highlight); display: flex; z-index: 43; @@ -320,11 +312,9 @@ $consum_ribbon_width: calc(100% - 58px); right: 0; top: 12px; cursor: pointer; - @include background-icon(decline, $size: 24px); - background-repeat: no-repeat; - background-size: 24px; - background-position: center right; - background-color: var(--white); + @include icon(before, decline, $size: 24px, $align: baseline); + background-color: var(--color--global-background); + color: var(--color--highlight); } > .cw-ribbon-tool-content-tablist { @@ -348,7 +338,7 @@ $consum_ribbon_width: calc(100% - 58px); > .cw-tabs-content { border: none; - border-top: solid thin var(--content-color-40); + border-top: solid thin var(--color--courseware-border-default); padding: 0; height: calc(100% - 58px); @@ -359,7 +349,7 @@ $consum_ribbon_width: calc(100% - 58px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: var(--color--scrollbar-thumb) var(--white); + scrollbar-color: var(--color--scrollbar-thumb) var(--color--global-background); &.cw-ribbon-tool-blockadder-tab { height: 100%; @@ -387,7 +377,7 @@ $consum_ribbon_width: calc(100% - 58px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--white); + scrollbar-color: var(--color--scrollbar-thumb) var(--color--global-background); } } } @@ -453,7 +443,7 @@ $consum_ribbon_width: calc(100% - 58px); &.contentbar-button-menu, &.cw-ribbon-button-menu { - @include background-icon(table-of-contents, $size: 24px); + @include icon(before, table-of-contents, $size: 24px, $align: middle); } &.contentbar-button-zoom::before { diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss index c79f950..3d4d49c 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/tabs.scss @@ -11,11 +11,11 @@ border-bottom: none; button { - background-color: var(--white); + background-color: var(--color--global-background); border: none; padding: 1em 0 4px 0; margin: 0 7px 0 21px; - color: var(--base-color); + color: var(--color--highlight); cursor: pointer; text-align: center; flex-grow: 1; @@ -28,14 +28,20 @@ margin-left: -14px; width: calc(100% + 28px); content: ''; - border-bottom: solid 3px var(--dark-gray-color-75); + border-bottom: solid 3px var(--color--tabs-marker-hover); transform: scaleX(0); transition: transform var(--transition-duration) ease-in-out; } + &.is-active { + &:after { + border-bottom: solid 3px var(--color--tabs-marker-active); + } + } + &.is-active, &:hover { - color: var(--black); + color: var(--color--font-primary); &:after { transform: scaleX(1); } @@ -43,44 +49,22 @@ @each $icon in $icons { &.cw-tabs-nav-icon-text-#{$icon} { - &::before { - @include background-icon($icon); - background-repeat: no-repeat; - background-position: left bottom; - - display: inline-block; - height: var(--icon-size-inline); - width: var(--icon-size-inline); - margin-bottom: -2px; - padding-left: 4px; - content: ''; - } + @include icon(before, $icon, $padding: 4px, $align: middle); } &.is-active.cw-tabs-nav-icon-text-#{$icon}, &.cw-tabs-nav-icon-text-#{$icon}:hover { - &::before { - @include background-icon($icon, info); - } + color: var(--color--font-primary); } } + + $cw-tabs-nav-icon-solo-size: 24px; @each $icon in $icons { &.cw-tabs-nav-icon-solo-#{$icon} { - &::before { - display: inline-block; - height: 24px; - width: 24px; - content: ''; - - @include background-icon($icon, $size: 24px); - background-repeat: no-repeat; - background-position: center; - } + @include icon(before, $icon, $size: $cw-tabs-nav-icon-solo-size); } &.is-active.cw-tabs-nav-icon-solo-#{$icon}, &.cw-tabs-nav-icon-solo-#{$icon}:hover { - &::before { - @include background-icon($icon, info, 24px); - } + color: var(--color--font-primary); } } } diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tile.scss b/resources/assets/stylesheets/scss/courseware/layouts/tile.scss index 022dde9..0796d96 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/tile.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/tile.scss @@ -11,7 +11,7 @@ height: 420px; width: 270px; margin: 0; - background-color: var(--base-color); + background-color: var(--color--blue-1); &:last-child { margin-right: 0; } @@ -27,18 +27,18 @@ width: 100%; background-size: 100% auto; background-repeat: no-repeat; - background-color: var(--content-color-20); + background-color: var(--color--courseware-background-highlight); background-position: center; .overlay-handle { @extend .drag-handle; - background-color: var(--white); + background-color: var(--color--global-background); background-position: center !important; height: 22px; padding: 4px 8px; margin-top: 3px; float: left; - border-left: solid thin var(--content-color-20); + border-left: solid thin var(--color--courseware-background-highlight); } @@ -86,14 +86,14 @@ .description { height: 220px; padding: 14px; - color: var(--white); + color: var(--color--font-inverted); position: relative; display: block; header { font-size: 20px; line-height: 22px; - color: var(--white); + color: var(--color--font-inverted); border: none; width: 240px; overflow: hidden; @@ -148,15 +148,17 @@ footer { display: table-cell; height: 5em; - color: var(--white); + color: var(--color--font-inverted); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; p { + display: inline-flex; margin: 0; + gap: 4px; } - img { + svg { vertical-align: text-bottom; } } @@ -171,7 +173,7 @@ a.description:visited, a.description:hover { height: 210px; - color: var(--white); + color: var(--color--font-inverted); text-decoration: unset; } } diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree-units.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree-units.scss index 63288b7..3e4e5bd 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/tree-units.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/tree-units.scss @@ -1,6 +1,6 @@ .cw-tree-units { .cw-tree-unit-title { - border-bottom: solid thin var(--content-color-40); + border-bottom: solid thin var(--color--courseware-border-default); color: var(--black); font-size: 16px; } @@ -36,7 +36,7 @@ background-size: 100% auto; background-repeat: no-repeat; background-position: center; - background-color: var(--content-color-20); + background-color: var(--color--courseware-background-highlight); } .cw-tree-units-header-details { @@ -53,7 +53,7 @@ } p { margin: 0; - color: var(--black); + color: var(--color--font-primary); } } } diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss index 4708e3a..cff1e4e 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss @@ -23,7 +23,7 @@ > .cw-tree-item-wrapper { display: block; - border-bottom: solid thin var(--content-color-40); + border-bottom: solid thin var(--color--courseware-border-default); margin-bottom: 12px; > .cw-sortable-handle { @@ -67,9 +67,6 @@ border-bottom: none; font-size: 14px; width: calc(100% - 20px); - background-repeat: no-repeat; - background-position-y: center; - padding-left: 18px; margin-left: 4px; margin-bottom: 0; line-height: 28px; @@ -78,7 +75,7 @@ width: calc(100% - 38px); } - @include background-icon(bullet-dot, $size: 18px); + @include icon(before, bullet-dot, $size: 18px, $align: middle, $padding: 4px); } form { display: inline; @@ -86,13 +83,6 @@ } > a.cw-tree-item-link { display: inline-block; - - &:hover { - @include background-icon(bullet-dot, attention, 18px); - } - &.cw-tree-item-link-current { - @include background-icon(bullet-dot, info, 18px); - } } } @@ -126,21 +116,20 @@ .cw-tree-item-edit-button { opacity: 0; padding: 0 4px; - vertical-align: bottom; + vertical-align: text-bottom; border: none; background-color: transparent; cursor: pointer; - img { - vertical-align: middle; - } + color: var(--color--highlight); + &:focus { opacity: 1; } } &:hover { - background-color: var(--light-gray-color-20); - color: var(--active-color); + background-color: var(--color--sidebar-hover); + color: var(--color--content-link-hover); .cw-tree-item-edit-button { opacity: 1; @@ -148,12 +137,12 @@ } &.cw-tree-item-link-current { - color: var(--black); + color: var(--color--font-primary); font-weight: 600; cursor: default; &::before { - color: var(--black); + color: var(--color--font-primary); } } @@ -168,15 +157,15 @@ height: var(--icon-size-inline); vertical-align: top; float: right; - @include background-icon(#{$icon}, $size: $icon-size-inline); + @include icon(after, #{$icon}, $size: $icon-size-inline); } &:hover .cw-tree-item-flag-#{$type} { - @include background-icon(#{$icon}, $size: $icon-size-inline); + @include icon(after, #{$icon}, $size: $icon-size-inline); } &.cw-tree-item-link-current .cw-tree-item-flag-#{$type} { - @include background-icon(#{$icon}, $size: $icon-size-inline); + @include icon(after, #{$icon}, $size: $icon-size-inline); } } } @@ -190,7 +179,7 @@ width: var(--icon-size-inline); height: var(--icon-size-inline); vertical-align: top; - @include background-icon(accept, info, $icon-size-inline); + @include icon(after, accept, $size: $icon-size-inline); } &.cw-tree-item-sequential-percentage { @@ -201,7 +190,7 @@ .cw-tree-item-ghost { opacity: 0.6; - border: dashed 2px var(--content-color-40); + border: dashed 2px var(--color--courseware-border-default); height: 28px; margin-left: 24px !important; @@ -230,4 +219,17 @@ } } } + + .cw-tree-root-list > .cw-tree-item.cw-tree-item-adder > .cw-tree-item-wrapper { + border-bottom: none; + } + .cw-tree-item-adder { + .add-element { + border: none; + cursor: pointer; + background-color: transparent; + color: var(--color--highlight); + height: 28px; + } + } } diff --git a/resources/assets/stylesheets/scss/courseware/shelf.scss b/resources/assets/stylesheets/scss/courseware/shelf.scss index fb339b5..de9796d 100644 --- a/resources/assets/stylesheets/scss/courseware/shelf.scss +++ b/resources/assets/stylesheets/scss/courseware/shelf.scss @@ -2,7 +2,7 @@ .cw-contents-overview-teaser { max-width: 782px; - background-color: var(--content-color-20); + background-color: var(--color--courseware-background-highlight); background-image: url('#{$image-path}/courseware-keyvisual-negative.svg'); background-repeat: no-repeat; background-size: 196px; @@ -54,8 +54,8 @@ .cw-unit-items { .unit-ghost { - background: var(--white); - border: dashed 2px var(--content-color-40); + background: var(--color--global-background); + border: dashed 2px var(--color--courseware-border-default); } .unit-ghost .cw-tile { opacity: 0; diff --git a/resources/assets/stylesheets/scss/courseware/sortable.scss b/resources/assets/stylesheets/scss/courseware/sortable.scss index b0edc5a..989b285 100644 --- a/resources/assets/stylesheets/scss/courseware/sortable.scss +++ b/resources/assets/stylesheets/scss/courseware/sortable.scss @@ -102,8 +102,8 @@ } .container-ghost { - background: var(--white); - border: dashed 2px var(--content-color-40); + background: var(--color--global-background); + border: dashed 2px var(--color--courseware-border-default); margin-top: -5px; margin-bottom: 15px; @@ -128,8 +128,8 @@ } .block-ghost { - background: var(--white); - border: dashed 2px var(--content-color-40); + background: var(--color--global-background); + border: dashed 2px var(--color--courseware-border-default); padding-top: 5px; padding-left: 5px; height: 100px; diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss index 8142aac..278c0db 100644 --- a/resources/assets/stylesheets/scss/courseware/structural-element.scss +++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss @@ -160,16 +160,19 @@ padding-bottom: 1em; } +$cw-placeholder-image-size: 128px; .cw-structural-element-image-preview-placeholder { + display: flex; + flex-direction: row; + justify-content: center; width: 300px; - height: 200px; + height: $cw-placeholder-image-size; margin: 0 auto; - background-color: var(--color-image-placeholder-background); - background-size: 100% auto; - background-repeat: no-repeat; - background-position: center; - @include background-icon(courseware, $size: 128px); + background-color: var(--color--image-placeholder-background); + color: var(--color--image-placeholder-icon); + @include icon(before, courseware, $size: $cw-placeholder-image-size); margin-bottom: 1em; + padding: 36px 0; } .cw-element-permissions { @@ -197,8 +200,7 @@ height: 24px; border: none; background-color: transparent; - @include background-icon(trash); - background-repeat: no-repeat; + @include icon(before, trash, $align: middle); cursor: pointer; } } diff --git a/resources/assets/stylesheets/scss/courseware/tasks.scss b/resources/assets/stylesheets/scss/courseware/tasks.scss new file mode 100644 index 0000000..67658d0 --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/tasks.scss @@ -0,0 +1,12 @@ +.cw-taskgroup-task-item-solver-info { + display: inline-flex; + gap: 8px; +} + +.cw-task-group-peer-review-processes { + margin-block-start: 3rem; +} + +.courseware-dashboard-tasks > * + * { + margin-block-start: 2rem; +}
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss index 78a67e2..927dbb9 100644 --- a/resources/assets/stylesheets/scss/courseware/toolbar.scss +++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss @@ -12,8 +12,8 @@ .cw-toolbar-tools { width: 270px; min-height: 100%; - border: solid thin var(--content-color-40); - background-color: var(--white); + border: solid thin var(--color--courseware-border-default); + background-color: var(--color--global-background); overflow: hidden; position: relative; padding: 0 4px; @@ -40,7 +40,7 @@ .cw-toolbar-tool-content { overflow-y: auto; scrollbar-width: thin; - scrollbar-color: var(--color--scrollbar-thumb) var(--white); + scrollbar-color: var(--color--scrollbar-thumb) var(--color--global-background); padding-right: 6px; } @@ -85,8 +85,8 @@ .cw-toolbar-button-wrapper { position: sticky; top: 0; - background-color: var(--white); - border-bottom: solid thin var(--content-color-40); + background-color: var(--color--global-background); + border-bottom: solid thin var(--color--courseware-border-default); display: flex; z-index: 31; margin: 0 0 8px -4px; @@ -97,26 +97,28 @@ margin: 0 4px 0 4px; padding: 2px 8px 0 8px; border: none; - background-color: var(--white); - background-repeat: no-repeat; - background-position: center center; + background-color: var(--color--global-background); + color: var(--color--highlight); cursor: pointer; border-bottom: solid 2px transparent; &.cw-toolbar-button-toggle { - text-align: end; + display: flex; + flex-direction: row-reverse; + align-items: center; flex-grow: 1; } &.active { - border-bottom: solid 3px var(--dark-gray-color-75); + color: var(--color--font-primary); + border-bottom: solid 3px var(--color--tabs-marker-active); } } .cw-toolbar-spacer-right { z-index: 39; flex-shrink: 0; position: relative; - background-color: var(--white); + background-color: var(--color--global-background); width: 15px; height: calc(100% + 2px); } diff --git a/resources/assets/stylesheets/scss/courseware/variables.scss b/resources/assets/stylesheets/scss/courseware/variables.scss index 248e300..c746708 100644 --- a/resources/assets/stylesheets/scss/courseware/variables.scss +++ b/resources/assets/stylesheets/scss/courseware/variables.scss @@ -33,25 +33,6 @@ $tile-colors: ( studip-gray: #636a71, ); -$icon-colors: ( - icon-white: #ffffff, - icon-black: #000000, - icon-red: #cb1800, - icon-blue: #24437c, - icon-green: #00962d, - icon-gray: #6e6e6e, - icon-yellow: #ffad00 -); -$border-colors: ( - white: #ffffff, - black: #000000, - studip-red: #cb1800, - studip-blue: #24437c, - studip-green: #00962d, - studip-gray: #6e6e6e, - studip-yellow: #ffad00 -); - $blockadder-items: ( before-after: block-comparison, blubber: blubber, diff --git a/resources/assets/stylesheets/scss/courseware/widgets.scss b/resources/assets/stylesheets/scss/courseware/widgets.scss index cef91c5..87584a9 100644 --- a/resources/assets/stylesheets/scss/courseware/widgets.scss +++ b/resources/assets/stylesheets/scss/courseware/widgets.scss @@ -1,59 +1,7 @@ .cw-action-widget { - .cw-action-widget-show-toc { - @include background-icon(table-of-contents); + @each $name, $icon in $button-icons { + &-#{$name} button { + @include icon(before, $icon); + } } - .cw-action-widget-edit { - @include background-icon(edit); - } - .cw-action-widget-sort { - @include background-icon(arr_1sort); - } - .cw-action-widget-add { - @include background-icon(add); - } - .cw-action-widget-export { - @include background-icon(export); - } - .cw-action-widget-info { - @include background-icon(info); - } - .cw-action-widget-star { - @include background-icon(star); - } - .cw-action-widget-trash { - @include background-icon(trash); - } - .cw-action-widget-oer { - @include background-icon(oer-campus); - } - .cw-action-widget-remove-lock { - @include background-icon(lock-unlocked); - } -} - -.cw-export-widget { - .cw-export-widget-export { - @include background-icon(export); - } - .cw-export-widget-export-pdf { - @include background-icon(export); - } - .cw-export-widget-oer { - @include background-icon(share); - } -} - -.cw-import-widget { - .cw-import-widget-archive { - @include background-icon(import); - } - .cw-import-widget-copy { - @include background-icon(copy); - } - .cw-import-widget-import { - @include background-icon(import); - } - .cw-action-widget-link { - @include background-icon(group); - } -} +}
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/wizards.scss b/resources/assets/stylesheets/scss/courseware/wizards.scss index 953f510..21c2ce9 100644 --- a/resources/assets/stylesheets/scss/courseware/wizards.scss +++ b/resources/assets/stylesheets/scss/courseware/wizards.scss @@ -5,17 +5,17 @@ .cw-element-selector-item { display: block; width: 100%; - border: solid thin var(--content-color-40); + border: solid thin var(--color--courseware-border-default); padding: 0.5em; margin-bottom: 5px; - background-color: var(--white); - color: var(--base-color); + background-color: var(--color--global-background); + color: var(--color--highlight); text-align: left; cursor: pointer; &:hover { - color: var(--white); - background-color: var(--base-color); + color: var(--color--global-background); + background-color: var(--color--highlight); } } } @@ -25,7 +25,13 @@ form.default .courseware-structural-element-selector { padding-left: 0; .courseware-structural-element-selector-item { + .studip-icon { + display: inline-block; + } + .radiobutton { + display: inline-block; + height: var(--icon-size-default); background: none; border: none; padding: 0; @@ -39,7 +45,6 @@ form.default .courseware-structural-element-selector { display: inline-block; margin-bottom: 0; text-indent: 0; - vertical-align: middle; } img { diff --git a/resources/assets/stylesheets/scss/css_tree.scss b/resources/assets/stylesheets/scss/css_tree.scss index b30adc2..2785896 100644 --- a/resources/assets/stylesheets/scss/css_tree.scss +++ b/resources/assets/stylesheets/scss/css_tree.scss @@ -52,12 +52,11 @@ $css-tree-border: 1px solid var(--light-gray-color-80); input[type=checkbox] { display: none; + label { - @include icon(before, arr_1right); + @include icon(before, arr_1right, $align: bottom); cursor: pointer; &:before { transition: transform var(--transition-duration); - vertical-align: baseline; } } ~ ul { diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss index ccf9f22..1ef490c 100644 --- a/resources/assets/stylesheets/scss/dashboard.scss +++ b/resources/assets/stylesheets/scss/dashboard.scss @@ -148,8 +148,8 @@ form div.files-search { .button { margin: 0; line-height: 1.5; - background-color: var(--color--button-background); - color: var(--brand-color-dark); + background-color: var(--color--global-background); + color: var(--color--highlight); min-width: auto; border: 1px solid var(--light-gray-color-40); border-left: none; @@ -157,10 +157,6 @@ form div.files-search { border-top-right-radius: var(--border-radius-search); border-bottom-right-radius: var(--border-radius-search); } - - img { - vertical-align: middle; - } } } diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss index efdcc0e..5aa73f2 100644 --- a/resources/assets/stylesheets/scss/dialog.scss +++ b/resources/assets/stylesheets/scss/dialog.scss @@ -14,9 +14,9 @@ } .ui-dialog-titlebar { - background: var(--brand-color-darker); + background: var(--color--info); border: 0; - color: var(--contrast-content-white); + color: var(--color--info-contrast); font-size:1.3em; font-weight: normal; @@ -27,6 +27,7 @@ .ui-dialog-titlebar-close { @include square(32px); + color: var(--color--info-contrast); background: inherit; border: 0; line-height:32px; @@ -42,18 +43,14 @@ padding: 0; } .ui-icon { - @include square($icon-size-default); - @include background-icon(decline, info_alt); - background-position: 0; - display:inline-block; margin: 0; - left: 50%; top: 50%; transform: translate(-50%, -50%); - - &:hover{ - @include background-icon(decline, info_alt); + @include square($icon-size-default); + @include icon(before, decline); + &::before { + display: block; } } } @@ -116,15 +113,15 @@ } } .ui-dialog-titlebar-wiki { - @include background-icon(question-circle, info_alt, 24px); - background-position: center; - background-repeat: no-repeat; - display: inline-block; position: absolute; - @include square(32px); margin-top: -16px; top: 50%; right: 34px; // This is ugly but hard to avoid since the close button's position on a dialog is also hardcoded + @include icon(before, question-circle, $size: 24px); + @include square(32px); + &::before { + color: var(--color--info-contrast); + } } // Centered content in dialog @@ -145,28 +142,31 @@ min-width: 30em; .ui-dialog-titlebar { - background-color: var(--yellow); - color: text-contrast($yellow, $black, $white); + background-color: var(--color--attention); + color: var(--color--attention-contrast); text-align: left; } .ui-dialog-titlebar-close { + color: var(--color--attention-contrast); background: transparent; border: 0; .ui-icon, .ui-icon:hover { - @include background-icon(decline); - background-position: 0; + @include icon(before, decline); + &::before { + display: block; + } } } .ui-dialog-content { box-sizing: border-box; - @include background-icon(question-circle-full, status-yellow); - background-position: 12px 8px; - background-repeat: no-repeat; - background-size: 32px; - padding: 15px 15px 15px 55px; + padding: 15px; max-height: 60vh; + @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px); + &::before { + color: var(--color--attention); + } } .ui-dialog-buttonpane { @@ -343,7 +343,7 @@ v u e d i a l o g display: flex; } .studip-dialog-header { - background: var(--base-color) none repeat scroll 0 0; + background: var(--color--info) none repeat scroll 0 0; border-bottom: 1px solid var(--dark-gray-color-10); color: var(--white); justify-content: space-between; @@ -356,12 +356,10 @@ v u e d i a l o g } } .studip-dialog-close-button { - @include background-icon(decline, info-alt); - background-repeat: no-repeat; - background-position-y: center; - background-color: transparent; + @include icon(before, decline, $align: text-bottom); border: none; - + background-color: transparent; + color: var(--color--info-contrast); width: 22px; height: 22px; margin-right: -10px; @@ -371,7 +369,7 @@ v u e d i a l o g .studip-dialog-content { color: var(--black); position: relative; - padding: 15px; + padding: 10px 15px; overflow-y: auto; min-width: 100%; box-sizing: border-box; @@ -385,9 +383,6 @@ v u e d i a l o g &.studip-dialog-warning, &.studip-dialog-alert { .studip-dialog-content { - padding: 15px 15px 15px 62px; - background-position: 12px center; - background-repeat: no-repeat; box-sizing: border-box; display: flex; align-items: center; @@ -396,24 +391,31 @@ v u e d i a l o g &.studip-dialog-alert { .studip-dialog-header { - background: var(--active-color) none repeat scroll 0 0; + background: var(--color--warning) none repeat scroll 0 0; + .studip-dialog-close-button { + color: var(--color--warning-contrast); + } } .studip-dialog-content { - @include background-icon(question-circle-full, attention, 32px); + @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px); + &::before { + color: var(--color--warning); + } } } &.studip-dialog-warning { .studip-dialog-header { color: var(--black); - background: var(--activity-color) none repeat scroll 0 0; - } - .studip-dialog-close-button { - @include background-icon(decline); - border: none; - background-color: transparent; + background: var(--color--attention) none repeat scroll 0 0; + .studip-dialog-close-button { + color: var(--color--attention-contrast); + } } .studip-dialog-content { - @include background-icon(question-circle-full, status-yellow, 32px); + @include icon(before, question-circle-full, $size: 32px, $align: middle, $padding: 8px); + &::before { + color: var(--color--attention); + } } } &.studip-dialog-with-tab { diff --git a/resources/assets/stylesheets/scss/documents.scss b/resources/assets/stylesheets/scss/documents.scss index ee5f392..07836e1 100644 --- a/resources/assets/stylesheets/scss/documents.scss +++ b/resources/assets/stylesheets/scss/documents.scss @@ -40,13 +40,11 @@ line-height: 1.5em; a { - @include background-icon(folder-parent, $size: 24px); - background-position: left center; - background-repeat: no-repeat; + @include icon(before, folder-parent, $size: 24px); padding-left: 30px; } &:first-child a { - @include background-icon(folder-empty, $size: 24px); + @include icon(before, folder-empty, $size: 24px); } } } diff --git a/resources/assets/stylesheets/scss/files.scss b/resources/assets/stylesheets/scss/files.scss index c69bd2d..d94328a 100644 --- a/resources/assets/stylesheets/scss/files.scss +++ b/resources/assets/stylesheets/scss/files.scss @@ -108,7 +108,7 @@ div.file_select_possibilities, cursor: pointer; background-color: transparent; margin: 10px; - border: thin solid var(--content-color-20); + border: thin solid var(--color--tile-border); padding: 10px; width: $width; min-width: $width; @@ -122,16 +122,24 @@ div.file_select_possibilities, justify-content: space-around; align-items: center; text-align: center; - > img { + color: var(--color--highlight); + > svg { margin-left: auto; margin-right: auto; } - button img { + button svg { display: block; margin-left: auto; margin-right: auto; } + + &:hover { + border-color: var(--color--highlight); + color: var(--color--highlight-hover); + text-decoration: none; + + } } > .important-item { @@ -169,7 +177,7 @@ div.file_select_possibilities, font-size:0.7em; cursor: pointer; - img { + svg { width: 40%; height: 40%; display: block; @@ -190,10 +198,6 @@ div.file_select_possibilities, &:checked + label { background-color: var(--brand-color-darker); color: var(--contrast-content-white); - - img { - filter: invert(100%) brightness(200%); - } } } diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss index dbed895..1a2b9c1 100644 --- a/resources/assets/stylesheets/scss/forms.scss +++ b/resources/assets/stylesheets/scss/forms.scss @@ -43,7 +43,7 @@ form.default { box-sizing: border-box; border: 1px solid var(--light-gray-color-40); border-radius: var(--border-radius-default); - color: var(--dark-gray-color); + color: var(--color--font-primary); max-width: $max-width-m; padding: 5px; vertical-align: middle; @@ -80,11 +80,7 @@ form.default { } input[list] { - @include background-icon(arr_1down); - - background-repeat: no-repeat; - background-position: center right 4px; - padding-right: 24px + @include icon(before, arr_1down, $padding: 4px, $align: middle); } textarea:not(.size-l) + .ck-editor { @@ -216,6 +212,7 @@ form.default { padding: 10px; margin: 0 0 10px -11px; width: calc(100% + 22px); + color: var(--color--font-primary); } // Insert invisible element that corrects double padding/margin at the @@ -286,13 +283,8 @@ form.default { // Special inputs label.file-upload { - @include background-icon(upload); - - background-repeat: no-repeat; - background-position: top left; - background-size: 20px 20px; + @include icon(before, upload, $size: 20px, $padding: 4px, $align: top); cursor: pointer; - padding-left: 30px; color: var(--base-color); input[type=file] { @@ -407,16 +399,13 @@ form.default { fieldset.collapsable { > legend { box-sizing: border-box; - @include background-icon(arr_1down); - background-position: 6px center; - background-repeat: no-repeat; + @include icon(before, arr_1down, $align: middle, $padding: 4px); cursor: pointer; - padding-left: 30px; } &.collapsed { > legend { - @include background-icon(arr_1right); + @include icon(before, arr_1right, $align: middle, $padding: 4px); margin-bottom: 0; } padding-bottom: 0; @@ -570,9 +559,10 @@ form.default { display: inline; width: calc(100% - 24px); } - img.icon { + div.icon { height: 2em; - margin-top: 0.5ex; + margin-top: 1ex; + color: var(--color--highlight); } } .multiquicksearch > li { diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss index 4c7187a6..9c5efc6 100644 --- a/resources/assets/stylesheets/scss/forum.scss +++ b/resources/assets/stylesheets/scss/forum.scss @@ -3,7 +3,7 @@ $card-max-width: 300px; .forum { hr { - border-top: 1px solid $color--divider; + border-top: 1px solid var(--color--divider); border-bottom: none; border-left: none; border-right: none; @@ -115,7 +115,7 @@ $card-max-width: 300px; &::selection, *::selection { background-color: $yellow; - color: $color--font-primary; + color: var(--color--font-primary); } } @@ -144,12 +144,12 @@ $card-max-width: 300px; .card { box-sizing: border-box; - border: solid 1px $color--content-box-border; + border: solid 1px var(--color--content-box-border); margin: 0 0 15px; min-width: auto; &__header { - background-color: $color--fieldset-header; + background-color: var(--color--fieldset-header); font-size: 16px; padding: 10px; @@ -176,7 +176,7 @@ $card-max-width: 300px; .header { display: flex; - background-color: $color--fieldset-header; + background-color: var(--color--fieldset-header); &.--sticky-top { position: sticky; @@ -221,8 +221,8 @@ $card-max-width: 300px; align-items: center; justify-content: center; background: white; - border: 1px solid $base-color; - color: $base-color; + border: 1px solid var(--color--highlight); + color: var(--color--highlight); border-radius: 5px; padding: 7px; cursor: pointer; @@ -237,7 +237,7 @@ $card-max-width: 300px; } &:disabled { - border-color: $color--button-inactive-border; + border-color: var(--color--button-inactive-border); opacity: 0.5; cursor: not-allowed; } @@ -283,7 +283,7 @@ $card-max-width: 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 10px; - color: $color--font-primary; + color: var(--color--font-primary); padding: 0 20px; .forum-illustration { @@ -299,7 +299,7 @@ $card-max-width: 300px; } p { - color: $color--font-secondary; + color: var(--color--font-secondary); } .buttons-container { @@ -337,7 +337,7 @@ $card-max-width: 300px; p { margin-top: 5px; - color: $color--font-secondary; + color: var(--color--font-secondary); } } @@ -349,7 +349,7 @@ $card-max-width: 300px; } p { - color: $color--font-secondary; + color: var(--color--font-secondary); } .discussion-category { @@ -389,9 +389,9 @@ $card-max-width: 300px; display: flex; align-items: center; justify-content: center; - color: $color--font-secondary; + color: var(--color--font-secondary); font-size: 10px; - border: 1px solid $color--action-menu-border; + border: 1px solid var(--color--action-menu-border); padding: 1px 5px; border-radius: 4px; } @@ -413,8 +413,8 @@ $card-max-width: 300px; } .card-group { - background-color: $color--tile-background; - border: 1px solid $color--button-inactive-border; + background-color: var(--color--tile-background); + border: 1px solid var(--color--button-inactive-border); padding-top: 4px; padding-right: 4px; margin-left: 4px; @@ -428,8 +428,8 @@ $card-max-width: 300px; } .topic-card { - background-color: $color--tile-background; - border: 1px solid $color--button-inactive-border; + background-color: var(--color--tile-background); + border: 1px solid var(--color--button-inactive-border); outline: transparent; height: 100%; min-height: 180px; @@ -486,7 +486,7 @@ $card-max-width: 300px; &:hover:not(.--new-topic), &:focus:not(.--new-topic) { - background-color: $color--tile-background-hover; + background-color: var(--color--tile-background-hover); } &.--with-hover-style:hover, @@ -528,7 +528,7 @@ $card-max-width: 300px; &__text { p { - color: $color--font-primary; + color: var(--color--font-primary); } img { @@ -542,7 +542,7 @@ $card-max-width: 300px; justify-content: space-between; align-items: center; margin-bottom: 10px; - color: $color--font-secondary; + color: var(--color--font-secondary); .author-name { font-size: 14px; @@ -588,12 +588,12 @@ $card-max-width: 300px; border: none; position: relative; padding-left: 2rem; - color: $color--font-primary; + color: var(--color--font-primary); white-space: pre-line; - background-color: $color--tile-background !important; + background-color: var(--color--tile-background) !important; &:before { - color: $color--font-secondary; + color: var(--color--font-secondary); position: absolute; font-size: 4rem; width: 2rem; @@ -637,13 +637,13 @@ $card-max-width: 300px; .add-reaction-icon { width: 20px; height: auto; - fill: $color--font-secondary; + fill: var(--color--font-secondary); transition: fill 0.2s; } &:hover { .add-reaction-icon { - fill: $base-color; + fill: var(--color--highlight); } } } @@ -656,7 +656,7 @@ $card-max-width: 300px; z-index: 10; display: flex; background: white; - border: 1px solid $base-color; + border: 1px solid var(--color--highlight); border-radius: 5px; cursor: pointer; overflow: hidden; @@ -689,7 +689,7 @@ $card-max-width: 300px; } .discussion { - background-color: $color--main-navigation-background; + background-color: var(--color--main-navigation-background); &__status, &__body, @@ -708,7 +708,7 @@ $card-max-width: 300px; flex-wrap: wrap; justify-content: space-between; gap: 10px; - color: $color--font-secondary; + color: var(--color--font-secondary); } .post__author-image { @@ -736,7 +736,7 @@ $card-max-width: 300px; } &__author-name { - color: $color--font-secondary; + color: var(--color--font-secondary); font-weight: 600; } @@ -757,15 +757,15 @@ $card-max-width: 300px; padding: 3px; align-items: center; justify-content: center; - background-color: $color--tile-background; - border: 1px solid $color--action-menu-border; + background-color: var(--color--tile-background); + border: 1px solid var(--color--action-menu-border); border-radius: 4px; transition: background-color 1s ease; z-index: 1; &:hover, &:focus { - background-color: $color--tile-background-hover; + background-color: var(--color--tile-background-hover); } } @@ -821,7 +821,7 @@ $card-max-width: 300px; .user-group { &--moderators { img.user-profile { - border-color: $base-color; + border-color: var(--color--highlight); } } @@ -835,7 +835,7 @@ $card-max-width: 300px; &__title { font-size: 14px; font-weight: bold; - color: $color--font-primary; + color: var(--color--font-primary); margin: 0; } @@ -865,7 +865,7 @@ $card-max-width: 300px; &:hover, &:focus { - background-color: $color--tile-background-hover; + background-color: var(--color--tile-background-hover); } &__user { @@ -922,7 +922,7 @@ $card-max-width: 300px; } .moderator img.user-profile { - border: 2px solid $base-color; + border: 2px solid var(--color--highlight); } .remained-users { @@ -936,8 +936,8 @@ $card-max-width: 300px; &__count { cursor: pointer; font-size: 14px; - color: $color--font-secondary; - background-color: $color--fieldset-header; + color: var(--color--font-secondary); + background-color: var(--color--fieldset-header); width: 25px; height: 25px; border-radius: 100%; @@ -976,8 +976,8 @@ $card-max-width: 300px; position: absolute; display: none; background: white; - border: 1px solid $base-color; - color: $base-color; + border: 1px solid var(--color--highlight); + color: var(--color--highlight); border-radius: 5px; gap: 5px; cursor: pointer; @@ -1010,11 +1010,11 @@ $card-max-width: 300px; tr td:first-child { width: 6px; - background-color: $color--tile-title-background; + background-color: var(--color--tile-title-background); } tr:first-child td:first-child { - background-color: $base-color; + background-color: var(--color--highlight); } tr td:nth-child(2) { @@ -1022,7 +1022,7 @@ $card-max-width: 300px; } time, p { - color: $color--font-secondary; + color: var(--color--font-secondary); margin: 0; } @@ -1054,7 +1054,7 @@ $card-max-width: 300px; gap: 15px; padding: 15px; justify-content: space-between; - border: thin solid $color--button-inactive-border; + border: thin solid var(--color--button-inactive-border); max-width: calc(48em - 30px); .icon { @@ -1132,13 +1132,13 @@ $card-max-width: 300px; .option-title { font-size: 14px; - color: $base-color; + color: var(--color--font-primary); font-weight: 400; margin: 0; } p { - color: $color--font-secondary; + color: var(--color--font-secondary); margin-top: 6px; font-size: small; display: -webkit-box; @@ -1322,7 +1322,7 @@ $card-max-width: 300px; z-index: 1; } .color-font-secondary { - color: $color--font-secondary; + color: var(--color--font-secondary); } } @@ -1336,7 +1336,7 @@ $card-max-width: 300px; background: transparent; align-items: center; gap: 5px; - border: thin solid $color--divider; + border: thin solid var(--color--divider); border-radius: 5px; } @@ -1359,7 +1359,7 @@ $card-max-width: 300px; display: inline-flex; align-items: center; gap: 5px; - border: thin solid $color--divider; + border: thin solid var(--color--divider); padding: 1px 5px; border-radius: 5px; font-size: smaller; @@ -1384,7 +1384,7 @@ $card-max-width: 300px; } .search-container { - background-color: $color--tile-background; + background-color: var(--color--tile-background); padding: 30px; h1 { diff --git a/resources/assets/stylesheets/scss/fullscreen.scss b/resources/assets/stylesheets/scss/fullscreen.scss index 6897fd6..c84025f 100644 --- a/resources/assets/stylesheets/scss/fullscreen.scss +++ b/resources/assets/stylesheets/scss/fullscreen.scss @@ -9,9 +9,7 @@ cursor: pointer; height: 28px; - @include background-icon(zoom-in2); - background-position: center; - background-repeat: no-repeat; + @include icon(before, zoom-in2); text-indent: 200%; overflow: hidden; diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss index 69b3b46..1e53c13 100644 --- a/resources/assets/stylesheets/scss/globalsearch.scss +++ b/resources/assets/stylesheets/scss/globalsearch.scss @@ -25,6 +25,11 @@ display: none; } + .icon-button { + margin-left: 4px; + color: var(--color--font-inverted); + } + #globalsearch-input { flex: 1; border: none; @@ -93,12 +98,10 @@ margin-left: -5px; border-radius: var(--border-radius-default); - a { - color: var(--base-color); + @include highlight-anchor; - &:hover { - color: var(--active-color); - } + article a:hover { + text-decoration: none; } section { @@ -120,6 +123,10 @@ width: 400px; background-color: var(--white); + .icon-button { + color: var(--color--highlight); + } + #globalsearch-input { background-color: var(--color--header-inverted); color: var(--color--font-primary); @@ -129,11 +136,6 @@ } } - #globalsearch-clear, - #globalsearch-icon { - filter: brightness(0) saturate(100%) invert(25%) sepia(7%) saturate(6410%) hue-rotate(181deg) brightness(95%) contrast(88%); - } - #globalsearch-list { visibility: visible; opacity: 1; @@ -270,7 +272,7 @@ margin: 20px 0 0 -32px; a { - @include background-icon(arr_1right, $size: 24px); + @include icon(before, arr_1right, $size: 24px, $align: middle); @include square(24px); display: inline-block; } diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss index 7e7f3fa..05e4b68 100644 --- a/resources/assets/stylesheets/scss/header.scss +++ b/resources/assets/stylesheets/scss/header.scss @@ -6,9 +6,8 @@ margin-bottom: 10px; } #top-bar { - background-color: var(--base-color); - color: var(--contrast-content-white); - border-bottom: 1px solid var(--brand-color-darker); + background-color: var(--color--brand-primary); + color: var(--color--brand-primary-contrast); height: $bar-bottom-container-height; width: 100%; min-width: $site-width; @@ -28,7 +27,7 @@ #site-title { flex: 1; - color: var(--white); + color: var(--color--brand-primary-contrast); margin-left: 0; z-index: 1002; line-height: $bar-bottom-container-height; @@ -49,13 +48,16 @@ > li { > a { - color: var(--white); + color: var(--color--brand-primary-contrast); margin: 0 6px; text-decoration: none; &:hover { text-decoration: underline; } } + > button { + color: var(--color--brand-primary-contrast); + } } } } @@ -178,6 +180,13 @@ > ul { flex: 1 1 auto; } + + #fullscreen-on { + color: var(--color--highlight); + svg { + vertical-align: middle; + } + } } #responsive-menu, @@ -223,18 +232,19 @@ position: absolute; top: 40px; right: 0; - background: var(--white); + background: var(--color--global-background); box-shadow: 1px 1px 1px var(--dark-gray-color-60); text-align: left; white-space: nowrap; a:link, a:visited { - color: var(--base-color); + color: var(--color--highlight); } a:hover, a:active { - color: var(--active-color); + color: var(--color--highlight-hover); + text-decoration: none; } div { diff --git a/resources/assets/stylesheets/scss/helpbar.scss b/resources/assets/stylesheets/scss/helpbar.scss index fe5cca3..94f8cfd 100644 --- a/resources/assets/stylesheets/scss/helpbar.scss +++ b/resources/assets/stylesheets/scss/helpbar.scss @@ -16,6 +16,13 @@ $border-width: 4px; min-width: 32px; right: 10px; + #helpbar_icon { + color: var(--color--highlight); + &:hover { + color: var(--color--highlight-hover); + } + } + h2, h3 { border-bottom: 0; color: var(--color--font-inverted); @@ -76,6 +83,7 @@ $border-width: 4px; } .helpbar-toggler { + color: var(--color--font-inverted); margin-top: -5px; margin-right: 5px; } @@ -115,28 +123,27 @@ $border-width: 4px; padding: 0; a { - @include background-icon(play, info_alt); + @include icon(before, play, $padding: 4px, $align: middle); background-position: left; background-repeat: no-repeat; display: block; - padding-left: 24px; &.tour-paused { - @include background-icon(pause, info_alt); + @include icon(before, pause, $padding: 4px, $align: middle); } &.tour-completed { - @include background-icon(accept, info_alt); + @include icon(before, accept, $padding: 4px, $align: middle); } } } a.link-extern { - @include icon(before, link-extern, info_alt); + @include icon(before, link-extern); } a.link-intern { - @include icon(before, link-intern, info_alt); + @include icon(before, link-intern); } } diff --git a/resources/assets/stylesheets/scss/icons.scss b/resources/assets/stylesheets/scss/icons.scss new file mode 100644 index 0000000..c6d3ccc --- /dev/null +++ b/resources/assets/stylesheets/scss/icons.scss @@ -0,0 +1,26 @@ +$icon-colors: ( + accept: good, + attention: warning, + info_alt: white, + inactive: font-inactive, + new: red-1, + status-green: green-1, + status-red: red-1, + status-yellow: yellow-1, + +// This are disabled for now since they should be coloured in a different way +// clickable: blue, +// info: black, +// navigation: blue, +// sort: blue, +); + +.studip-icon { + display: inline-block; + + @each $role, $color in $icon-colors { + &.icon-role-#{$role} { + color: var(--color--#{$color}); + } + } +} diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss index 15a40c4..209eb9b 100644 --- a/resources/assets/stylesheets/scss/index.scss +++ b/resources/assets/stylesheets/scss/index.scss @@ -195,18 +195,17 @@ $gap-between-boxes: calc($login-page-margin / 2); height: 36px; .login-news-nav { + background-color: transparent; + color: var(--color--highlight); margin-left: 8px; width: 48px; height: 48px; border: none; - @include background-icon('bullet-dot', $size: 28px); - background-repeat: no-repeat; - background-color: transparent; - background-position: center; + @include icon(before, 'bullet-dot', $size: 28px, $align: middle); cursor: pointer; &.active-news-bullet { - background-size: 42px; + @include icon(before, 'bullet-dot', $size: 42px, $align: middle); } } } diff --git a/resources/assets/stylesheets/scss/jquery-ui/custom.scss b/resources/assets/stylesheets/scss/jquery-ui/custom.scss index 2a7d639..62d3c73 100644 --- a/resources/assets/stylesheets/scss/jquery-ui/custom.scss +++ b/resources/assets/stylesheets/scss/jquery-ui/custom.scss @@ -38,22 +38,22 @@ .ui-widget-content { border: 1px solid #dddddd; background: var(--white); - color: #333333; + color: var(--color--font-primary); } .ui-widget-content a { - color: #333333; + color: var(--color--content-link); } .ui-widget-header { - border: 1px solid #dddddd; - background: #e9e9e9; - color: #333333; - font-weight: bold; + border: 1px solid var(--color--content-box-border); + background: var(--color--content-box-background); + color: var(--color--font-primary); + font-weight: 700; } .ui-widget-header a { - color: #333333; + color: var(--color--content-link); } /* Interaction states @@ -69,7 +69,7 @@ html .ui-button.ui-state-disabled:active { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; - color: #454545; + color: var(--color--font-primary); } .ui-state-default a, @@ -79,7 +79,7 @@ a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { - color: #454545; + color: var(--color--font-primary); text-decoration: none; } @@ -94,7 +94,7 @@ a:visited.ui-button, border: 1px solid #cccccc; background: #ededed; font-weight: normal; - color: #2b2b2b; + color: var(--color--font-primary); } .ui-state-hover a, @@ -107,7 +107,7 @@ a:visited.ui-button, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { - color: #2b2b2b; + color: var(--color--font-primary); text-decoration: none; } @@ -124,7 +124,7 @@ a.ui-button:active, border: 1px solid #003eff; background: #007fff; font-weight: normal; - color: #ffffff; + color: var(--color--font-inverted); } .ui-icon-background, @@ -136,7 +136,7 @@ a.ui-button:active, .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { - color: #ffffff; + color: var(--color--font-inverted); text-decoration: none; } diff --git a/resources/assets/stylesheets/scss/jquery-ui/studip.scss b/resources/assets/stylesheets/scss/jquery-ui/studip.scss index 002eb17..3d5168d 100644 --- a/resources/assets/stylesheets/scss/jquery-ui/studip.scss +++ b/resources/assets/stylesheets/scss/jquery-ui/studip.scss @@ -172,13 +172,14 @@ textarea.ui-resizable-handle.ui-resizable-s { background-color: var(--brand-color-light); color: var(--white); } - +$schedule-icon-path: icon-path(schedule, info); .hasDatepicker, [data-date-picker], .has-date-picker, [data-datetime-picker], .has-datetime-picker { - @include background-icon(schedule); + background-image: url("#{$schedule-icon-path}"); + background-size: var(--icon-size-default); background-position: right 3px center; background-repeat: no-repeat; min-width: 12ex; @@ -187,10 +188,12 @@ textarea.ui-resizable-handle.ui-resizable-s { border-color: var(--brand-color-dark); } } +$date-icon-path: icon-path(date, info); .hasTimepicker, [data-time-picker], .has-time-picker { - @include background-icon(date); + background-image: url("#{$date-icon-path}"); + background-size: var(--icon-size-default); background-position: right 3px center; background-repeat: no-repeat; min-width: 10ex; diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss index f9cb143..8be21e8 100644 --- a/resources/assets/stylesheets/scss/layouts.scss +++ b/resources/assets/stylesheets/scss/layouts.scss @@ -100,7 +100,7 @@ body#login #content-wrapper { } #main-footer { - background-color: var(--base-color); + background-color: var(--color--brand-primary); color: var(--white); display: flex; padding: 2px 0; diff --git a/resources/assets/stylesheets/scss/links.scss b/resources/assets/stylesheets/scss/links.scss index 03fe33a..bb6e0bc 100644 --- a/resources/assets/stylesheets/scss/links.scss +++ b/resources/assets/stylesheets/scss/links.scss @@ -1,10 +1,10 @@ /* --- Links ---------------------------------------------------------------- */ a, a:link, a:visited { - color: var(--base-color); + color: var(--color--content-link); text-decoration: none; - &.index { color: var(--base-gray); } - &.printhead { color: var(--base-color); } + &.index { color: var(--color--font-secondary); } + &.printhead { color: var(--black); } &.tree { color: var(--black); } &.toolbar { color: var(--brand-color-lighter); @@ -19,8 +19,8 @@ a[disabled] { } a:hover, a:active, a:hover.index, a:active.index, a:hover.tree { - color: var(--active-color); - text-decoration: none; + color: var(--color--content-link-hover); + text-decoration: underline; } a:hover.toolbar { @@ -28,16 +28,16 @@ a:hover.toolbar { } a.link-intern { - @include icon(before, link-intern, $padding: 2px, $inline: true); + @include icon(before, link-intern, $padding: 2px, $inline: true, $align: text-bottom); } a.link-extern { - @include icon(before, link-extern, $padding: 2px, $inline: true); + @include icon(before, link-extern, $padding: 2px, $inline: true, $align: text-bottom); } a.link-add { - @include icon(before, add, $padding: 2px, $inline: true); + @include icon(before, add, $padding: 2px, $inline: true, $align: text-bottom); } a.link-edit { - @include icon(before, edit, $padding: 2px, $inline: true); + @include icon(before, edit, $padding: 2px, $inline: true, $align: text-bottom); } a img { diff --git a/resources/assets/stylesheets/scss/messagebox.scss b/resources/assets/stylesheets/scss/messagebox.scss index 336eb0d..2166d88 100644 --- a/resources/assets/stylesheets/scss/messagebox.scss +++ b/resources/assets/stylesheets/scss/messagebox.scss @@ -9,6 +9,10 @@ div.messagebox { position: relative; text-align: left; + div { + margin-left: 8px; + } + &:first-child { margin-top: 0; } @@ -32,17 +36,17 @@ div.messagebox { span { display: none; } } &.close { - @include background-icon(decline); + @include icon(before, decline); } &.details { - @include background-icon(arr_eol-down); + @include icon(before, arr_eol-down); } } } &.details_hidden { .messagebox_buttons a.details { - @include background-icon(arr_eol-up); + @include icon(before, arr_eol-up); } .messagebox_details { height: 0; } } @@ -61,22 +65,65 @@ section.contentbox { } } +$messagebox-icons: ( + info: 'info', + success: 'accept', + error: 'decline', + exception: 'decline', + warning: 'exclaim', +); + // Messagebox definitions @mixin messagebox($name, $color, $background-color, $border-color: $color, $image: $name) { + $icon-name: map-get($messagebox-icons, $name); + $svg: icon-path($icon-name, clickable); + div.messagebox_#{$name} { - color: $color; - background-color: $background-color; - background-image: url("#{$image-path}/messagebox/#{$image}.png"); - background-size: 32px 32px; - border-color: $border-color; + color: $color; + background-color: $background-color; + border-color: $border-color; + position: relative; + display: flex; + align-items: center; + + // Der Kreis mit ::before + &::before { + content: ""; + width: 32px; // Größe des Kreises + height: 32px; + background-color: $border-color; // Kreisfarbe + border-radius: 50%; // Macht es rund + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + margin-right: 12px; // Platz für den Text, je nach Bedarf anpassen + } + + // Das Icon mit ::after auf dem Kreis + &::after { + content: ""; + width: 20px; // Größe des Icons + height: 20px; + mask: url("#{$svg}") no-repeat center / contain; // Maskierung mit dem Icon + background-color: $background-color; // Farbe des Icons + position: absolute; + top: 50%; + left: 32px; + transform: translate(-50%, -50%); // Zentriert das Icon im Kreis + } } -} + } + -@include messagebox(info, var(--color--black), var(--color--info-alternative), var(--color--info)); -@include messagebox(success, var(--color--black), var(--color--good-alternative), var(--color--good)); -@include messagebox(error, var(--color--black), var(--color--warning-alternative), var(--color--warning)); -@include messagebox(exception, var(--color--black), var(--color--warning-alternative), var(--color--warning)); -@include messagebox(warning, var(--color--black), var(--color--attention-alternative), var(--color--attention), advice); +@include messagebox(info, var(--color--info-secondary-contrast), var(--color--info-secondary), var(--color--info)); +@include messagebox(success, var(--color--good-secondary-contrast), var(--color--good-secondary), var(--color--good)); +@include messagebox(error, var(--color--warning-secondary-contrast), var(--color--warning-secondary), var(--color--warning)); +@include messagebox(exception, var(--color--warning-secondary-contrast), var(--color--warning-secondary), var(--color--warning)); +@include messagebox(warning, var(--color--attention-secondary-contrast), var(--color--attention-secondary), var(--color--attention), advice); // Define modal messagebox .modaloverlay { @@ -108,7 +155,7 @@ section.contentbox { max-width: 50%; width: auto; - color: #000; + color: var(--color--font-primary); border-color: var(--yellow); background-color: white; background-image: url("@{image-path}/messagebox/question.png"); diff --git a/resources/assets/stylesheets/scss/messages.scss b/resources/assets/stylesheets/scss/messages.scss index 8642fc7..7e150cd 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 var(--light-gray-color); + border: thin solid var(--color--input-field-border); min-width: 100%; max-width: 100%; - background-color: var(--content-color-40); + background-color: var(--color--input-field-background); > .progress { - background-color: var(--content-color); + background-color: var(--color--highlight); width: 100%; min-width: 0; max-width: 0; @@ -27,22 +27,27 @@ a.message-tag { line-height: 20px; &.progress-error { - background-color: var(--red); + background-color: var(--color--warning); } } > .progresstext { margin-top: -20px; text-align: center; - color: var(--white); + color: var(--color--font-inverted); height: 20px; line-height: 20px; } } } -#message_metadata tr { - vertical-align: top; +#message_metadata { + svg { + color: var(--color--highlight); + } + tr { + vertical-align: top; + } } #adressees { @@ -55,15 +60,15 @@ a.message-tag { } .message_body { - background-color: var(--content-color-20); margin: 3px; padding: 10px; + background-color: var(--color--tile-background); } .responsive_author { margin: 0; font-size: 0.8em; - color: var(--base-gray); + color: var(--color--font-secondary); } form.default { @@ -89,7 +94,7 @@ form.default { .multi_person_search_link { line-height: 30px; - img { + svg { vertical-align: middle; margin-top: -2px; } @@ -116,7 +121,19 @@ ul.message-options { > div.message-indicators { float: right; margin-right: 5px; + + svg { + vertical-align: bottom; + } } } } } + +.message-attachments { + margin-top: 2em; + + .file-icon svg { + vertical-align: bottom; + } +} diff --git a/resources/assets/stylesheets/scss/mvv.scss b/resources/assets/stylesheets/scss/mvv.scss index a6c7275..69b49fc 100644 --- a/resources/assets/stylesheets/scss/mvv.scss +++ b/resources/assets/stylesheets/scss/mvv.scss @@ -377,14 +377,14 @@ select.mvv-search-select-list { } &.selected { - @include background-icon(arr_2right, inactive); + @include icon(before, arr_2right); background-position: right; background-repeat: no-repeat; cursor: pointer; font-weight: bold; &.last { - @include background-icon(accept, inactive); + @include icon(before, accept); background-position: right; background-repeat: no-repeat; } diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss index 9d34b5c..04655f8 100644 --- a/resources/assets/stylesheets/scss/my_courses.scss +++ b/resources/assets/stylesheets/scss/my_courses.scss @@ -12,6 +12,7 @@ $icon-padding: 3px; .my-courses-navigation { + color: var(--color--highlight); list-style: none; margin: 0 0 -10px; padding: 0; @@ -27,11 +28,13 @@ $icon-padding: 3px; padding: $icon-padding; } + @include highlight-anchor; + &:last-child { margin-right: 0; } - img { + svg { vertical-align: bottom; } @@ -40,12 +43,19 @@ $icon-padding: 3px; padding-left: $icon-padding; padding-right: $icon-padding; } -} -.my-courses-navigation-important { - $border-width: 1px; - border: $border-width solid var(--red); - a { - padding: $icon-padding - $border-width; + &.my-courses-navigation-important { + $border-width: 1px; + border: $border-width solid var(--color--warning); + + a { + padding: $icon-padding - $border-width; + color: var(--color--warning); + + &:hover { + color: var(--color--warning); + } + } } } + diff --git a/resources/assets/stylesheets/scss/navigation-hoverborder.scss b/resources/assets/stylesheets/scss/navigation-hoverborder.scss index 16dc09b..8c5605f 100644 --- a/resources/assets/stylesheets/scss/navigation-hoverborder.scss +++ b/resources/assets/stylesheets/scss/navigation-hoverborder.scss @@ -28,10 +28,10 @@ body:not(.fixed) #navigation-level-1-items { > li.active { - @include border-beneath(var(--dark-gray-color-80)); + @include border-beneath(var(--color--tabs-marker-active)); } > li:not(.active) { - @include border-beneath(var(--dark-gray-color-40)); + @include border-beneath(var(--color--tabs-marker-hover)); &:not(:hover)::after { @include border-shrink; } @@ -46,7 +46,7 @@ body:not(.fixed) #navigation-level-1-items { } .overflow li:hover { - @include border-beneath(var(--dark-gray-color-40), 2px, 3px); + @include border-beneath(var(--color--tabs-marker-hover), 2px, 3px); &::after { transform: translate(0, -4px); } @@ -59,10 +59,10 @@ body:not(.fixed) #navigation-level-1-items { line-height: 25px; } &.current { - @include border-beneath(var(--dark-gray-color-80), -2px, 3px); + @include border-beneath(var(--color--tabs-marker-active), -2px, 3px); } &:not(.current) { - @include border-beneath(var(--dark-gray-color-40), -2px, 3px); + @include border-beneath(var(--color--tabs-marker-hover), -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 3af4f97..d876a22 100644 --- a/resources/assets/stylesheets/scss/navigation.scss +++ b/resources/assets/stylesheets/scss/navigation.scss @@ -17,7 +17,7 @@ body:not(.fixed) #navigation-level-1-items { font-size: $font-size-base; } a { - color: var(--base-color); + color: var(--color--main-navigation-item-inactive); display: block; padding: 0 0; text-align: center; @@ -35,10 +35,13 @@ body:not(.fixed) #navigation-level-1-items { } } - img { + .headericon { margin: 8px 0; - @include square(32px); } + img.headericon:not(:hover) { + filter: hue-rotate(350deg) saturate(8.7%) brightness(177.3%) !important; + } + &[data-badge]:not([data-badge="0"]) { position: relative; @@ -51,8 +54,8 @@ body:not(.fixed) #navigation-level-1-items { @include square(16px); background-clip: content-box; - background-color: var(--red); - border: 3px solid var(--dark-gray-color-5); + background-color: var(--color--warning); + border: 3px solid transparent; border-radius: 50%; color: var(--white); content: attr(data-badge); @@ -78,10 +81,6 @@ body:not(.fixed) #navigation-level-1-items { } } - img { - filter: hue-rotate(350deg) saturate(8.7%) brightness(177.3%) !important; - } - // Hide all navigation item title on hover and display only the currently // hovered one .navtitle { @@ -105,9 +104,7 @@ body:not(.fixed) #navigation-level-1-items { opacity: 1; } > a { - img { - filter: hue-rotate(0deg) saturate(100%) brightness(100%) !important; - } + color: var(--color--main-navigation-item); } // Icon state: hover @@ -215,7 +212,6 @@ body.fixed { #navigation-level-1-items { background-color: var(--base-color); - list-style: none; margin: 0 0 0px -15px; padding: 0; @@ -226,9 +222,7 @@ body.fixed { // Hide menu display: none; - img { - filter: contrast(0) brightness(2); - + svg { @include square(16px); margin-right: 0.8em; } diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss index b8732e7..1ddb46e 100644 --- a/resources/assets/stylesheets/scss/oer.scss +++ b/resources/assets/stylesheets/scss/oer.scss @@ -281,8 +281,11 @@ ul.reviews, ol.reviews { button { border-right: none; height: 35px; + color: var(--color--highlight); + &.active { - background-color: var(--base-color); + background-color: var(--color--highlight); + color: var(--color--highlight-contrast); } &.erase { background-color: white; @@ -302,7 +305,7 @@ ul.reviews, ol.reviews { button { border: thin solid var(--color--input-field-border); - background-color: var(--color--button-background); + background-color: var(--color--global-background); display: flex; align-items: center; justify-content: center; diff --git a/resources/assets/stylesheets/scss/opengraph.scss b/resources/assets/stylesheets/scss/opengraph.scss index 074a5e5..d9094d2 100644 --- a/resources/assets/stylesheets/scss/opengraph.scss +++ b/resources/assets/stylesheets/scss/opengraph.scss @@ -22,25 +22,21 @@ .switch-right { @include hide-text; @include square(var(--icon-size-default)); - background-position: center; - background-repeat: no-repeat; padding: 0; + color: var(--color--highlight); &:not([disabled]) { cursor: pointer; } - } - .switch-left { - @include background-icon(arr_1left); &[disabled] { - @include background-icon(arr_1left); + color: var(--color--font-inactive); } } + .switch-left { + @include icon(before, arr_1left); + } .switch-right { - @include background-icon(arr_1right); - &[disabled] { - @include background-icon(arr_1right); - } + @include icon(before, arr_1right); } } diff --git a/resources/assets/stylesheets/scss/pagination.scss b/resources/assets/stylesheets/scss/pagination.scss index 2f74bcc..9b34e28 100644 --- a/resources/assets/stylesheets/scss/pagination.scss +++ b/resources/assets/stylesheets/scss/pagination.scss @@ -40,19 +40,20 @@ .next { .pagination--link { @include hide-text; - background-position: center; - background-repeat: no-repeat; display: inline-block; height: 16px; width: 16px; vertical-align: top; + &::before { + color: var(--color--highlight); + } } } .prev .pagination--link { - @include background-icon(arr_1left); + @include icon(before, arr_1left, $align: middle); } .next .pagination--link { - @include background-icon(arr_1right); + @include icon(before, arr_1right, $align: middle); } } diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss index 6ce6d27..8d80fbb 100644 --- a/resources/assets/stylesheets/scss/personal-notifications.scss +++ b/resources/assets/stylesheets/scss/personal-notifications.scss @@ -13,19 +13,14 @@ padding: 0 5px; } - img { + svg { vertical-align: middle; margin-top: -3px; - filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%); // #000 to #28497c } &.alert { background-color: var(--color--warning); color: var(--color--font-inverted); - - img { - filter: invert(100); // #000 to #fff - } } } @@ -172,6 +167,7 @@ flex-grow: 1; .avatar { + color: var(--color--highlight); $avatar-size: 36px; margin-right: 10px; margin-left: 0; @@ -187,40 +183,33 @@ } a:not(.mark-all-as-read) { - color: var(--brand-color-dark); + color: var(--color--highlight); display: block; padding: 0; - &:hover { color: var(--active-color); } + &:hover { + color: var(--color--highlight-hover); + text-decoration: none; + } } a.mark-all-as-read:not(.invisible), a.enable-desktop-notifications { + display: flex; + align-items: center; + justify-content: space-between; border-bottom: thin solid var(--color--action-menu-divider); - display: block; max-height: 31px; padding: 7px 7px 7px 9px; z-index: 3; } a.mark-all-as-read { - @include background-icon('accept', 'clickable'); - background-repeat: no-repeat; - background-position: right 8px center; - - &:hover { - @include background-icon('accept', 'attention'); - } - - margin: 0; + @include icon(after, 'accept', $align: middle); + color: var(--color--highlight); } a.enable-desktop-notifications { - @include background-icon('notification', 'clickable'); - background-repeat: no-repeat; - background-position: right 8px center; - - &:hover { - @include background-icon('notification', 'attention'); - } + @include icon(after, 'notification', $align: middle); + color: var(--color--highlight); } .options { @@ -228,9 +217,7 @@ background: none; cursor: pointer; height: 24px; - > img { - vertical-align: top; - } + color: var(--color--highlight); &.hidden { visibility: hidden; } } diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss index 12ea750..cc8ece5 100644 --- a/resources/assets/stylesheets/scss/progress_indicator.scss +++ b/resources/assets/stylesheets/scss/progress_indicator.scss @@ -24,7 +24,8 @@ } @media (prefers-reduced-motion) { .progress-indicator { - @include background-icon(refresh, info, 32px); + @include icon(before, refresh, $size: 32px); + color: var(--color--font-primary); } .progress-indicator-description-default { display: block; diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss index 3870355..9f6f880 100644 --- a/resources/assets/stylesheets/scss/questionnaire.scss +++ b/resources/assets/stylesheets/scss/questionnaire.scss @@ -96,6 +96,10 @@ $width: 270px; padding: 10px 10px 10px 15px; min-height: 150px; min-width: 0; + + .add_question button { + color: var(--color--highlight) + } } .inline_editing { diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss index f91af93..6e8f957 100644 --- a/resources/assets/stylesheets/scss/quicksearch.scss +++ b/resources/assets/stylesheets/scss/quicksearch.scss @@ -33,21 +33,18 @@ div.quicksearch_frame { margin-top: 0 !important; } - input[type=submit] { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; + label.icon-button { + display: inline-block; + color: var(--color--highlight); width: 36px; height: 30px; - @include background-icon(search); - background-position: center; - background-repeat: no-repeat; vertical-align: middle; margin-left: -40px; - margin-top: 1px; border-left: solid thin var(--color--input-field-border); + + svg { + padding: 5px 7px; + } } } @@ -135,4 +132,4 @@ div.quicksearch_frame { } } } -} +}
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/raumzeit.scss b/resources/assets/stylesheets/scss/raumzeit.scss index 982cebc..c680b26 100644 --- a/resources/assets/stylesheets/scss/raumzeit.scss +++ b/resources/assets/stylesheets/scss/raumzeit.scss @@ -64,7 +64,7 @@ div.at_least_one_teacher { // Show visual toggle indicator header h1 a { - @include icon(before, arr_1right); + @include icon(before, arr_1right, $align: text-bottom); } &.open { @@ -77,21 +77,24 @@ div.at_least_one_teacher { article header { &.red { border-left: 3px solid var(--red); + .tooltip { + color: var(--color--warning); + } } &.yellow { border-left: 3px solid var(--activity-color); + .tooltip { + color: var(--color--attention); + } } &.green { border-left: 3px solid var(--green); + .tooltip { + color: var(--color--good); + } } - &.red .tooltip-icon { - @include icon(before, radiobutton-checked, status-red); - } - &.yellow .tooltip-icon { - @include icon(before, radiobutton-checked, status-yellow); - } - &.green .tooltip-icon { - @include icon(before, radiobutton-checked, status-green); + .tooltip-icon { + @include icon(before, radiobutton-checked); } } form.default { diff --git a/resources/assets/stylesheets/scss/report.scss b/resources/assets/stylesheets/scss/report.scss deleted file mode 100644 index d00ce06..0000000 --- a/resources/assets/stylesheets/scss/report.scss +++ /dev/null @@ -1,94 +0,0 @@ -// Alert dialog (like createQuestion) -.ui-dialog.ui-widget.ui-widget-content.report { - &-info, - &-success, - &-warning, - &-error { - min-width: 30em; - - .ui-dialog-titlebar { - font-weight: bold; - text-align: left; - } - - .ui-dialog-content { - background-position: 12px 8px; - background-repeat: no-repeat; - background-size: 32px; - box-sizing: border-box; - max-height: 60vh; - padding: 15px 15px 15px 55px; - } - - .ui-dialog-buttonpane { - text-align: center; - - .ui-dialog-buttonset { - float: none; - > * { - display: inline-block; - } - } - } - } - - &-info { - .ui-dialog-titlebar { - background-color: var(--base-color); - color: var(--white); - } - .ui-dialog-content { - background-image: url("#{$image-path}/messagebox/info.png"); - } - } - - &-success { - .ui-dialog-titlebar { - background-color: var(--dark-green); - color: var(--white); - } - - .ui-dialog-content { - background-image: url("#{$image-path}/messagebox/success.png"); - } - } - - &-warning { - .ui-dialog-titlebar { - background-color: var(--yellow); - color: black; - } - - .ui-button-icon { - .ui-icon { - .ui-icon-closethick { - @include background-icon(decline); - } - } - } - - .ui-dialog-content { - background-image: url("#{$image-path}/messagebox/advice.png"); - } - - .ui-dialog-titlebar-close { - background: transparent; - border: 0; - - .ui-icon, .ui-icon:hover { - @include background-icon(decline, info); - background-position: 0; - } - } - } - - &-error { - .ui-dialog-titlebar { - 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 517ad47..4de6f09 100644 --- a/resources/assets/stylesheets/scss/resources.scss +++ b/resources/assets/stylesheets/scss/resources.scss @@ -181,6 +181,7 @@ ul.resource-tree { select, span.selection, span.select2 { height: 30px; width: calc(100% - 2em) !important; + color: var(--color--font-primary); } } } @@ -359,22 +360,25 @@ ul.resource-tree { .request-list { a.request-marking-icon { - background-repeat: no-repeat; display: block; width: var(--icon-size-default); height: var(--icon-size-default); - @include background-icon(radiobutton-unchecked); + @include icon(before, radiobutton-unchecked); + color: var(--color--font-primary); &[data-marked="1"] { - @include background-icon(radiobutton-checked, status-red); + @include icon(before, radiobutton-checked); + color: var(--color--warning) } &[data-marked="2"] { - @include background-icon(radiobutton-checked, status-yellow); + @include icon(before, radiobutton-checked); + color: var(--color--attention); } &[data-marked="3"] { - @include background-icon(radiobutton-checked, status-green); + @include icon(before, radiobutton-checked); + color: var(--color--good); } } } diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss index 97d9bc5..5c8be5a 100644 --- a/resources/assets/stylesheets/scss/responsive.scss +++ b/resources/assets/stylesheets/scss/responsive.scss @@ -45,8 +45,10 @@ $sidebarOut: -330px; .responsive-navigation-header { display: flex; padding: 2px 0; + color: var(--color--brand-primary-contrast); .menu-closed { + color: var(--color--brand-primary-contrast); cursor: pointer; transform: rotate(0deg); transition: var(--transition-duration) ease-in-out; @@ -54,8 +56,8 @@ $sidebarOut: -330px; .menu-open { cursor: pointer; + color: var(--color--brand-primary-contrast); transform: rotate(90deg); - transition: var(--transition-duration) ease-in-out; } } diff --git a/resources/assets/stylesheets/scss/root.scss b/resources/assets/stylesheets/scss/root.scss index 25521ab..24054e7 100644 --- a/resources/assets/stylesheets/scss/root.scss +++ b/resources/assets/stylesheets/scss/root.scss @@ -1,5 +1,5 @@ :root { - --text-color: #{$text-color}; + --text-color: #{$color--font-primary}; --active-color: #{$active-color}; --activity-color: #{$activity-color}; --activity-color-20: #{$activity-color-20}; @@ -134,7 +134,19 @@ --color--global-background: #{$color--global-background}; --color--brand-primary: #{$color--brand-primary}; + --color--brand-primary-contrast: #{$color--brand-primary-contrast}; --color--brand-secondary: #{$color--brand-secondary}; + --color--brand-secondary-contrast: #{$color--brand-secondary-contrast}; + + --color--highlight: #{$color--highlight}; + --color--highlight-hover: #{$color--highlight-hover}; + --color--highlight-contrast: #{$color--highlight-contrast}; + + --color--sidebar-item: #{$color--sidebar-item}; + --color--sidebar-item-hover: #{$color--sidebar-item-hover}; + + --color--content-link: #{$color--content-link}; + --color--content-link-hover: #{$color--content-link-hover}; --color--font-primary: #{$color--font-primary}; --color--font-secondary: #{$color--font-secondary}; @@ -143,6 +155,8 @@ --color--main-navigation-background: #{$color--main-navigation-background}; --color--main-navigation-border: #{$color--main-navigation-border}; + --color--main-navigation-item: #{$color--main-navigation-item}; + --color--main-navigation-item-inactive: #{$color--main-navigation-item-inactive}; --color--sidebar-marker-active: #{$color--sidebar-marker-active}; --color--sidebar-marker-active-navigation: #{$color--sidebar-marker-active-navigation}; @@ -176,6 +190,8 @@ --color--scrollbar-thumb: #{$color--scrollbar-thumb}; + --color--content-bar-background: #{$color--content-bar-background}; + --color--content-box-border: #{$color--content-box-border}; --color--content-box-header: #{$color--content-box-header}; --color--content-box-background: #{$color--content-box-background}; @@ -188,11 +204,11 @@ --color--fieldset-border: #{$color--fieldset-border}; --color--fieldset-header: #{$color--fieldset-header}; - --color--button-background: #{$color--button-background}; - --color--button-border: #{$color--button-border}; - --color--button-focus: #{$color--button-focus}; - --color--button-hover: #{$color--button-hover}; + --color--tabs-marker-hover: #{$color--tabs-marker-hover}; + --color--tabs-marker-active: #{$color--tabs-marker-active}; + --color--button-inactive-background: #{$color--button-inactive-background}; + --color--button-inactive-background-contrast: #{$color--button-inactive-background-contrast}; --color--button-inactive-border: #{$color--button-inactive-border}; --color--radiobuttonset-background: #{$color--radiobuttonset-background}; @@ -209,15 +225,27 @@ --color--focus: #{$color--focus}; --color--warning: #{$color--warning}; - --color--warning-alternative: #{$color--warning-alternative}; + --color--warning-secondary: #{$color--warning-secondary}; + --color--warning-contrast: #{$color--warning-contrast}; + --color--warning-secondary-contrast: #{$color--warning-secondary-contrast}; + --color--attention: #{$color--attention}; - --color--attention-alternative: #{$color--attention-alternative}; + --color--attention-secondary: #{$color--attention-secondary}; + --color--attention-contrast: #{$color--attention-contrast}; + --color--attention-secondary-contrast: #{$color--attention-secondary-contrast}; + --color--good: #{$color--good}; - --color--good-alternative: #{$color--good-alternative}; + --color--good-secondary: #{$color--good-secondary}; + --color--good-contrast: #{$color--good-contrast}; + --color--good-secondary-contrast: #{$color--good-secondary-contrast}; + --color--info: #{$color--info}; - --color--info-alternative: #{$color--info-alternative}; + --color--info-secondary: #{$color--info-secondary}; + --color--info-contrast: #{$color--info-contrast}; + --color--info-secondary-contrast: #{$color--info-secondary-contrast}; - --color-image-placeholder-background: #{$color-image-placeholder-background}; + --color--image-placeholder-background: #{$color--image-placeholder-background}; + --color--image-placeholder-icon: #{$color--image-placeholder-icon}; --color--header-inverted: #{$color-header-inverted}; diff --git a/resources/assets/stylesheets/scss/scroll-to-top.scss b/resources/assets/stylesheets/scss/scroll-to-top.scss index 531c1ca..1abaaf6 100644 --- a/resources/assets/stylesheets/scss/scroll-to-top.scss +++ b/resources/assets/stylesheets/scss/scroll-to-top.scss @@ -8,7 +8,8 @@ body #scroll-to-top { margin-right: $scroll-to-top-margin; margin-bottom: $scroll-to-top-margin; padding: 10px; - background: var(--base-color); + background: var(--color--highlight); + color: var(--color--highlight-contrast); border: 1px solid transparent; background-clip: padding-box; cursor: pointer; @@ -16,12 +17,9 @@ body #scroll-to-top { position: fixed; right: 0; bottom: 0; - transition: all 250ms ease-in-out; + transition: bottom 250ms ease-in-out; z-index: 1; - &:hover { - background: var(--brand-color-darker); - border-radius: 2px; - } + &.hide { bottom: calc( 0px - #{$scroll-to-top-height + $scroll-to-top-margin}); } diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss index d3231ba..c843ff1 100644 --- a/resources/assets/stylesheets/scss/search.scss +++ b/resources/assets/stylesheets/scss/search.scss @@ -155,7 +155,7 @@ label.inactive-settings-category { margin: 20px 0 0 -32px; a { - @include background-icon(arr_1right, $size: 24px); + @include icon(after, arr_1right, $size: 24px, $align: middle); @include square(24px); display: inline-block; } @@ -186,7 +186,7 @@ div#div-search-input { } -.button.seach-button { +.button.search-button { border-radius: 0; } @@ -209,19 +209,7 @@ div#div-search-input { white-space: nowrap; padding: 8px; margin: 0 5px; - - &::before { - background-repeat: no-repeat; - content: " "; - float: right; - height: var(--icon-size-default); - width: var(--icon-size-default); - @include background-icon(trash); - } - - &:hover::before { - @include background-icon(trash); - } + @include icon(after, trash, $align: middle); } } } diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss index a5f51b7..22c6c20 100644 --- a/resources/assets/stylesheets/scss/select.scss +++ b/resources/assets/stylesheets/scss/select.scss @@ -22,8 +22,13 @@ border-radius: var(--border-radius-default); } - .vs__actions { - align-items: end; + .vs__dropdown-option { + display: flex; + flex-direction: row; + } + + .vs__actions .studip-icon { + line-height: 10px; } &.studip-v-select-drop-up { diff --git a/resources/assets/stylesheets/scss/selects.scss b/resources/assets/stylesheets/scss/selects.scss index 3e46dd6..bba1d6d 100644 --- a/resources/assets/stylesheets/scss/selects.scss +++ b/resources/assets/stylesheets/scss/selects.scss @@ -3,6 +3,7 @@ $select-border-focus: 1px solid var(--brand-color-dark); $select-border-radius: var(--border-radius-default); $select-height-default: 32px; $select-arrow-size: 10px; +$svg: icon-path(arr_1down, info); select { // Reset appearance @@ -25,8 +26,8 @@ select { // Allow all other paddings to be overwritten but the right padding // to ensure the icon is always clearly visible padding-right: 20px; - - @include background-icon(arr_1down, $size: $select-arrow-size); + background-image: url("#{$svg}"); + background-size: icon-size($select-arrow-size); background-position: right 4px center; background-repeat: no-repeat; @@ -91,9 +92,7 @@ select { .select2-selection--single { .select2-selection__clear { - @include background-icon(decline, $size: $select-arrow-size); - background-position: right center; - background-repeat: no-repeat; + @include icon(after, decline, $size: $select-arrow-size, $align: middle); color: transparent; display: inline-block; float: none; @@ -118,16 +117,14 @@ select { .select2-selection--multiple { padding-right: ($select-arrow-size + 5px); - @include background-icon(arr_1down, $size: $select-arrow-size); - $backgroundPosition: calc($select-height-default / 2 - 4px); - background-position: right 4px top $backgroundPosition; - background-repeat: no-repeat; + @include icon(after,arr_1down, $size: $select-arrow-size, $align: super); + + .select2-selection__rendered { + width: calc(100% - $select-arrow-size); + } .select2-selection__choice__remove { - @include background-icon(decline, $size: $select-arrow-size); - background-position: right center; - background-repeat: no-repeat; - color: transparent !important; + @include icon(after, decline, $size: $select-arrow-size , $align: bottom, $padding: 4px); display: inline-block; float: none; width: ($select-arrow-size + 5px); @@ -150,9 +147,7 @@ select { } .select2-selection__arrow { - @include background-icon(arr_1down, $size: $select-arrow-size); - background-position: right 4px center; - background-repeat: no-repeat; + @include icon(after, arr_1down, $role: info, $size: $select-arrow-size , $align: bottom, $padding: 4px); b { visibility: hidden; diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss index 0fcc32a..74f411b 100644 --- a/resources/assets/stylesheets/scss/sidebar.scss +++ b/resources/assets/stylesheets/scss/sidebar.scss @@ -52,36 +52,34 @@ $icon-size: 20px; } .sidebar-widget, .sidebar-widget-placeholder { - background-color: var(--white); + background-color: var(--color--global-background); border: none; margin: 15px 0 0; width: $sidebar-width; } .sidebar-widget-header { - background-color: var(--white); - color: var(--black); + background-color: var(--color--global-background); + color: var(--color--font-primary); font-weight: bold; padding: 4px; word-break: break-word; } .sidebar-widget-extra { - background-color: var(--white); - a { + background-color: var(--color--global-background); + a, a:link, a:visited { display: inline-block; height: $icon-size; width: $icon-size; padding: 4px; - border: solid thin var(--base-color); + color: var(--color--sidebar-item); + border: solid thin var(--color--sidebar-item); border-radius: 5px; margin-bottom: 4px; &:hover { - background-color: var(--base-color); - - img { - filter: brightness(100); - } + background-color: var(--color--sidebar-item); + color: var(--color--global-background); } } } @@ -115,15 +113,19 @@ ul.widget-list { border-left: solid 4px var(--white); > *:not(label):not(.options-radio, .options-checkbox) { - padding: 4px 0 4px 28px; + display: inline-flex; + flex-direction: row; + padding: 4px 0 4px 2px; line-height: $icon-size; + gap: 6px; + width: 100%; } .label-text { text-indent: 0; } - &:has(>button:not(.options-radio, .options-checkbox)), &:has(>a):not(:last-child) { + &:has(>button:not(.options-radio, .options-checkbox)), &:has(>a:not(:last-child, .options-radio, .options-checkbox)) { border-bottom: solid thin var(--color--sidebar-divider); } @@ -133,12 +135,13 @@ ul.widget-list { } } - &:hover:not(:has(>label)):not(:has(button.options-radio)) { + &:hover:not(:has(>label)):not(:has(.options-checkbox, .options-radio)):not(.active):has(button, a) { background-color: var(--color--sidebar-active); border-left-color: var(--color--sidebar-marker-active); a, button { - color: var(--color--font-primary); + color: var(--color--sidebar-item-hover); + text-decoration: none; } } @@ -162,6 +165,11 @@ ul.widget-list { @extend .as-link; text-align: left; width: 100%; + color: var(--color--sidebar-item); + } + + a, a:link, a:visited { + color: var(--color--sidebar-item); } &.sidebar-navigation, @@ -194,26 +202,21 @@ div#sidebar-navigation { cursor: not-allowed; font-weight: lighter; } - &.sidebar-navigation > li.active { - background-color: var(--color--sidebar-active); - border-left: solid 4px var(--color--sidebar-marker-active-navigation); - margin-left: -4px; - padding-left: 1px; - a { - color: var(--black); - padding-left: 4px; - } - } + &.sidebar-navigation > li.active, &.sidebar-views > li.active { background-color: var(--color--sidebar-active); - border-left: solid 4px var(--color--sidebar-marker-active-view); + border-left: solid 4px var(--color--sidebar-item); margin-left: -4px; padding-left: 1px; a, button { - color: var(--base-color); + color: var(--color--font-primary); padding-left: 5px; + + &:hover { + text-decoration: none; + } } } &.sidebar-navigation > li, @@ -241,7 +244,7 @@ div#sidebar-navigation { } .sidebar-widget { - background: var(--white); + background: var(--color--global-background); .widget-options { list-style: none; @@ -266,36 +269,34 @@ div#sidebar-navigation { } .options-checkbox { - background-repeat: no-repeat; - background-position: 2px center; display: block; - padding-left: 28px; + margin-left: 2px; &.options-checked { - @include background-icon(checkbox-checked); + @include icon(before, checkbox-checked, $padding: 6px, $align: middle); } &.options-unchecked { - @include background-icon(checkbox-unchecked); + @include icon(before, checkbox-unchecked, $padding: 6px, $align: middle); } &:hover { - color: var(--color--font-primary); + color: var(--color--sidebar-item-hover); + text-decoration: none; } } .options-radio { - background-repeat: no-repeat; - background-position: 2px center; display: block; - padding-left: 28px; + margin-left: 2px; &.options-checked { - @include background-icon(radiobutton-checked); + @include icon(before, radiobutton-checked, $padding: 6px, $align: middle); } &.options-unchecked { - @include background-icon(radiobutton-unchecked); + @include icon(before, radiobutton-unchecked, $padding: 6px, $align: middle); } &:hover { - color: var(--color--font-primary); + color: var(--color--sidebar-item-hover); + text-decoration: none; } } } @@ -352,10 +353,10 @@ select.sidebar-selectlist { } .submit-search { - background-color: var(--color--button-background); + background-color: var(--color--global-background); border: 1px solid var(--color--input-field-border); border-radius: 0; - color: transparent; + color: var(--color--sidebar-item); cursor: pointer; font: 0/0 a; text-shadow: none; @@ -369,10 +370,9 @@ select.sidebar-selectlist { display: inline-block; cursor: pointer; order: 2; - height: 100%; + height: var(--icon-size); box-sizing: border-box; - margin-right: 2px; - margin-left: -22px; + margin: auto 2px auto -22px; img { padding-top: 4px; diff --git a/resources/assets/stylesheets/scss/start.scss b/resources/assets/stylesheets/scss/start.scss index f052f26..792fc1b 100644 --- a/resources/assets/stylesheets/scss/start.scss +++ b/resources/assets/stylesheets/scss/start.scss @@ -36,7 +36,7 @@ float: right; white-space: nowrap; - img { + svg { vertical-align: middle; } } diff --git a/resources/assets/stylesheets/scss/studip-cke-ui.scss b/resources/assets/stylesheets/scss/studip-cke-ui.scss index 660a2e9..787c6de 100644 --- a/resources/assets/stylesheets/scss/studip-cke-ui.scss +++ b/resources/assets/stylesheets/scss/studip-cke-ui.scss @@ -1,42 +1,42 @@ @use '../mixins.scss' as *; :root { - --ck-color-base-foreground: var(--dark-gray-color-5); - --ck-color-base-background: var(--white); - --ck-color-base-border: var(--content-color-40); - --ck-color-base-action: var(--green); - --ck-color-base-focus: var(--base-color); + --ck-color-base-foreground: var(--color--tile-background); + --ck-color-base-background: var(--color--global-background); + --ck-color-base-border: var(--color--tile-border); + --ck-color-base-action: var(--color--good); + --ck-color-base-focus: var(--color--highlight); --ck-color-base-text: #000; - --ck-color-base-active: var(--base-color); - --ck-color-base-active-focus: var(--base-color); - --ck-color-base-error: var(--red); + --ck-color-base-active: var(--color--highlight); + --ck-color-base-active-focus: var(--color--highlight); + --ck-color-base-error: var(--color--warning); /* -- Buttons ------------------------------------------------------------------------------- */ - --ck-color-button-default-hover-background: var(--base-color); - --ck-color-button-default-active-background: var(--base-color); + --ck-color-button-default-hover-background: var(--color--highlight); + --ck-color-button-default-active-background: var(--color--highlight); --ck-color-button-default-active-shadow: transparent; - --ck-color-button-on-background: var(--base-color); - --ck-color-button-on-hover-background: var(--base-color); - --ck-color-button-on-active-background: var(--base-color); + --ck-color-button-on-background: var(--color--highlight); + --ck-color-button-on-hover-background: var(--color--highlight); + --ck-color-button-on-active-background: var(--color--highlight); --ck-color-button-on-active-shadow: transparent; - --ck-color-button-action-background: var(--white); - --ck-color-switch-button-on-background: var(--base-color); - --ck-color-switch-button-on-hover-background: var(--base-color); + --ck-color-button-action-background: var(--color--font-inverted); + --ck-color-switch-button-on-background: var(--color--highlight); + --ck-color-switch-button-on-hover-background: var(--color--highlight); --ck-color-split-button-hover-border: transparent; --ck-color-split-button-hover-background: transparent; /* -- Generic colors ------------------------------------------------------------------------ */ - --ck-color-focus-border: var(--base-color); + --ck-color-focus-border: var(--color--highlight); --ck-color-text: var(--ck-color-base-text); /* -- Link -------------------------------------------------------------------------------- */ - --ck-color-link-default: var(--base-color); - --ck-color-link-selected-background: var(--base-color); - --ck-color-link-fake-selection: var(--base-color); + --ck-color-link-default: var(--color--content-link); + --ck-color-link-selected-background: var(--color--content-link); + --ck-color-link-fake-selection: var(--color--content-link); /* disable border radius*/ @@ -66,7 +66,7 @@ } .ck.ck-icon, .ck.ck-icon * { - color: var(--base-color); + color: var(--color--font-primary); } .ck.ck-button.ck-on .ck.ck-icon, .ck.ck-button.ck-on .ck.ck-icon *, @@ -78,7 +78,7 @@ /* buttons */ .ck.ck-button, a.ck.ck-button { font-size: 12px; - color: var(--base-color); + color: var(--color--font-primary); } .ck.ck-button:hover { @@ -86,20 +86,16 @@ } .ck.ck-button.ck-off.ck-button-save { - @include background-icon(accept, $size: 24px); - background-position: center; - background-repeat: no-repeat; + @include icon(after, accept, $size: 24px, $align: middle); } .ck.ck-button.ck-off.ck-button-cancel { - @include background-icon(decline, $size: 24px); - background-position: center; - background-repeat: no-repeat; + @include icon(after, decline, $size: 24px, $align: middle); } .ck.ck-button.ck-off.ck-button_with-text:not(.ck-character-grid__tile):not(.ck-source-editing-button) { background-position: 5px 50%; - border: solid thin var(--base-color); + border: solid thin var(--color--font-primary); } .ck-list .ck.ck-button.ck-off.ck-button_with-text:not(.ck-character-grid__tile):not(.ck-source-editing-button) { @@ -107,18 +103,23 @@ } .ck.ck-button.ck-off.ck-button_with-text:hover { - background-color: var(--base-color); + background-color: var(--color--highlight); + color: var(--color--font-inverted); } .ck.ck-button.ck-button_with-text.ck-dropdown__button:not(.ck-disabled, .ck-on):hover { - background-color: var(--white); - color: var(--base-color); + background-color: var(--color--font-inverted); + color: var(--color--highlight); } .ck.ck-button.ck-off.ck-button_with-text.ck-disabled:hover, .ck.ck-button.ck-off.ck-button_with-text.ck-character-grid__tile:hover { background: transparent; - color: var(--black); + color: var(--color--font-primary); +} + +.ck-list__item .ck.ck-button.ck-on.ck-button_with-text { + background-color: var(--color--highlight); } .ck-list__item .ck.ck-button.ck-on.ck-button_with-text { @@ -127,7 +128,12 @@ .ck.ck-button.ck-off.ck-button_with-text:not(.ck-disabled) .ck.ck-button__label { - color: var(--base-color); + color: var(--color--font-primary); +} + +.ck.ck-button.ck-off.ck-button_with-text:not(.ck-disabled):hover .ck.ck-button__label, +.ck.ck-button.ck-on.ck-button_with-text:not(.ck-disabled) .ck.ck-button__label { + color: var(--color--font-inverted); } .ck.ck-button.ck-off.ck-button_with-text:not(.ck-disabled, .ck-dropdown__button):hover .ck.ck-button__label, @@ -146,22 +152,22 @@ } .ck.ck-button.ck-on.ck-button_with-text.ck-switchbutton { - color: var(--base-color); + color: var(--color--font-primary); } .ck.ck-button.ck-on.ck-button_with-text.ck-switchbutton:hover { - color: var(--white); + color: var(-color--font-inverted); } .ck.ck-button.ck-off.ck-button-save:hover:not(.ck-disabled) { - @include background-icon(accept, info_alt, 24px); + color: var(--color--font-inverted); } .ck.ck-button.ck-off.ck-button-save.ck-disabled { - @include background-icon(accept, inactive, 24px); + color: var(--color--font-inactive); } .ck.ck-button.ck-off.ck-button-cancel:hover { - @include background-icon(decline, info_alt, 24px); + color: var(--color--font-inverted); } .ck.ck-button.ck-off.ck-button-save svg, @@ -179,8 +185,8 @@ } .ck.ck-button.ck-button_with-text.ck-switchbutton { - color: var(--base-color); - background-color: var(--white); + color: var(--color--font-primary); + background-color: var(--color--font-inverted); } .ck.ck-button.ck-button_with-text.ck-switchbutton, @@ -194,24 +200,24 @@ .ck.ck-collapsible.ck-collapsible_collapsed .ck.ck-button.ck-button_with-text:hover .ck.ck-button__label, .ck.ck-collapsible .ck.ck-button.ck-on.ck-button_with-text:not(.ck-disabled):not(.ck-switchbutton):not(.ck-dropdown__button) .ck.ck-button__label { - color: var(--base-color); + color: var(--color--highlight); } .ck.ck-collapsible.ck-collapsible_collapsed .ck.ck-button.ck-disabled.ck-button_with-text:hover .ck.ck-button__label { - color: var(--black); + color: var(--color--font-primary); } .ck.ck-collapsible .ck.ck-icon.ck-button__icon *, .ck.ck-collapsible .ck.ck-button:hover .ck.ck-icon.ck-button__icon *, .ck.ck-collapsible .ck.ck-button.ck-on .ck.ck-icon.ck-button__icon * { - color: var(--base-color); + color: var(--color--highlight); } .ck.ck-button.ck-button_with-text.ck-switchbutton.ck-on:hover, .ck.ck-button.ck-button_with-text.ck-switchbutton:hover { - background-color: var(--white); + background-color: var(--color--font-inverted); } .ck.ck-button.ck-button_with-text.ck-switchbutton.ck-on:hover span, @@ -236,7 +242,7 @@ /* links */ .ck .ck-fake-link-selection, .ck .ck-link_selected { - color: var(--white); + color: var(--color--font-inverted); } /* input */ @@ -321,7 +327,7 @@ /* table inserter */ .ck.ck-insert-table-dropdown-grid-box.ck-on { - background: var(--base-color-20); + background: var(--color--highlight); } /* tooltips */ diff --git a/resources/assets/stylesheets/scss/studip-selection.scss b/resources/assets/stylesheets/scss/studip-selection.scss index 6b94041..2000c7d 100644 --- a/resources/assets/stylesheets/scss/studip-selection.scss +++ b/resources/assets/stylesheets/scss/studip-selection.scss @@ -16,14 +16,14 @@ } li:not(.empty-placeholder) { - color: var(--base-color); + color: var(--color--highlight); cursor: pointer; margin: 1px 0; padding-right: 0.5em; } li.empty-placeholder { - color: fade-out($text-color, 0.3); + color: var(--color--font-secondary); &:not(:only-child) { display: none; @@ -50,11 +50,11 @@ } .studip-selection-selected .studip-selection-label { - @include icon(before, radiobutton-checked); + @include icon(before, radiobutton-checked, $align: bottom); } .studip-selection-selectable .studip-selection-label { - @include icon(before, radiobutton-unchecked); + @include icon(before, radiobutton-unchecked, $align: bottom); } .studip-selection-image + .studip-selection-label { @@ -65,15 +65,15 @@ .studip-selection-selected li:hover { .studip-selection-image, - .studip-selection-label::before { - @include background-icon(remove-circle-full); + .studip-selection-label { + @include icon(before, remove-circle-full, $align: bottom); } } .studip-selection-selectable li:hover { .studip-selection-image, - .studip-selection-label::before { - @include background-icon(add-circle-full); + .studip-selection-label { + @include icon(before, add-circle-full, $align: bottom); } } @@ -98,7 +98,7 @@ } .studip-selection-label { - color: var(--active-color); + color: var(--color--highlight-hover); } } } diff --git a/resources/assets/stylesheets/scss/system-notifications.scss b/resources/assets/stylesheets/scss/system-notifications.scss index b17cce5..b1fbed1 100644 --- a/resources/assets/stylesheets/scss/system-notifications.scss +++ b/resources/assets/stylesheets/scss/system-notifications.scss @@ -110,11 +110,8 @@ height: 20px; width: 20px; - img, svg { + svg { cursor: pointer; - position: absolute; - right: 10px; - top: 10px; } } @@ -171,30 +168,31 @@ } -.system-notification-exception { - background-color: var(--color--warning); - color: var(--color--white); - - .system-notification-timeout { - background-color: var(--color--warning-alternative); - } -} +.system-notification-exception, .system-notification-error { background-color: var(--color--warning); - color: var(--color--white); + color: var(--color--warning-contrast); + + .studip-icon { + color: var(--color--warning-contrast); + } .system-notification-timeout { - background-color: var(--color--warning-alternative); + background-color: var(--color--warning-secondary); } } .system-notification-warning { background-color: var(--color--attention); - color: var(--color--black); + color: var(--color--attention-contrast); + + .studip-icon { + color: var(--color--attention-contrast); + } .system-notification-timeout { - background-color: var(--color--attention-alternative); + background-color: var(--color--attention-secondary); } a:not(.system-notification-message) { @@ -211,16 +209,26 @@ .system-notification-success { background-color: var(--color--good); + color: var(--color--good-contrast); + + .studip-icon { + color: var(--color--good-contrast); + } .system-notification-timeout { - background-color: var(--color--good-alternative); + background-color: var(--color--good-secondary); } } .system-notification-info { background-color: var(--color--info); + color: var(--color--info-contrast); + + .studip-icon { + color: var(--color--info-contrast); + } .system-notification-timeout { - background-color: var(--color--info-alternative); + background-color: var(--color--info-secondary); } } diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss index ef8077c..dcb7a30 100644 --- a/resources/assets/stylesheets/scss/table_of_contents.scss +++ b/resources/assets/stylesheets/scss/table_of_contents.scss @@ -21,7 +21,7 @@ ul.numberedchapters { position: absolute; right: -10px; top: -11px; - background-color: var(--white); + background-color: var(--color--global-background); border: 1px solid var(--content-color-40); margin: 11px 11px 10px; box-shadow: 2px 2px var(--dark-gray-color-30); @@ -46,11 +46,9 @@ ul.numberedchapters { right: 0; top: 12px; cursor: pointer; - @include background-icon(decline, $size: 24px); - background-repeat: no-repeat; - background-size: 24px; - background-position: center right; - background-color: var(--white); + color: var(--color--highlight); + background-color: var(--color--global-background); + @include icon(after, decline, $size: 24px, $align: middle, $padding: -4px); } &.cw-ribbon-slide-enter-active, diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss index 9423b50..ec461cd 100644 --- a/resources/assets/stylesheets/scss/tables.scss +++ b/resources/assets/stylesheets/scss/tables.scss @@ -105,28 +105,34 @@ td.tree-indent { } .toggle-indicator { - color: var(--black); + color: var(--color--font-primary); font-weight: bold; a { background: left center no-repeat; - @include background-icon(arr_1down); - color: var(--black); + @include icon(before, arr_1down, $align: middle, $padding: -4px); + color: var(--color--font-primary); cursor: pointer; display: block; + &::before { + color: var(--color--highlight); + } } } .empty .toggle-indicator a { - @include background-icon(arr_1right, inactive); + @include icon(before, arr_1right, $align: middle, $padding: -4px); + ::before { + color: var(--color--font-inactive); + } } .collapsed .toggle-indicator a { - @include background-icon(arr_1right); + @include icon(before, arr_1right, $align: middle, $padding: -4px); } - td.label-cell, .toggle-indicator a, .empty .toggle-indicator { + td.label-cell, .empty .toggle-indicator { padding-left: 20px; } @@ -258,14 +264,21 @@ tr.sortable { .tablesorter-header-inner { display: inline-block; } + &::after { + color: var(--color--highlight); + } } th.sortasc { - @include icon('after', 'arr_1up', 'clickable', $icon-size-inline); + @include icon('after', 'arr_1up', $size: $icon-size-inline, $align: top, $padding: 2px); } th.sortdesc { - @include icon('after', 'arr_1down', 'clickable', $icon-size-inline); + @include icon('after', 'arr_1down', $size: $icon-size-inline, $align: top, $padding: 2px); + } + + th { + @include highlight-anchor; } } @@ -393,17 +406,11 @@ table.tree { padding-left: 5px; &.open { - @include background-icon(arr_1down); - background-position: left center; - background-repeat: no-repeat; - padding-left: 20px; + @include icon(before, arr_1down); } &.closed { - @include background-icon(arr_1right); - background-position: left center; - background-repeat: no-repeat; - padding-left: 20px; + @include icon(before, arr_1right); } } } @@ -609,15 +616,18 @@ table.default { float: right; text-align: right; white-space: nowrap; + color: var(--color--highlight); img, svg, input[type="image"] { vertical-align: middle; } + @include highlight-anchor; } > caption .actions { font-size: $font-size-base; border-left: 1px solid var(--color--table-border); + color: var(--color--font-primary); margin-bottom: -2px; padding-left: 0.5em; input[type=text] { @@ -630,6 +640,16 @@ table.default { float: none; } + th.actions { + color: var(--color--font-primary); + } + + td.actions:has(>svg) { + display: flex; + flex-direction: row-reverse; + gap: 4px; + } + > caption { .caption-container { display: flex; @@ -637,9 +657,17 @@ table.default { justify-content: space-between; margin-bottom: 5px; - img.text-bottom { + .files-home { + display: inline-flex; + gap: 8px; + } + + svg { vertical-align: middle; - margin: -4px 8px 0 0; + margin-top: -4px; + } + span > a { + margin-left: 2px; } } @@ -659,7 +687,7 @@ table.default { > tbody.toggleable { &.toggled { .toggle-switch { - @include background-icon(arr_1right); + @include icon(before, arr_1right); } tr:not(:first-child) { @@ -669,7 +697,7 @@ table.default { .toggle-switch { @include hide-text; - @include background-icon(arr_1down); + @include icon(before, arr_1down); display: inline-block; height: $icon-size-inline; text-align: center; @@ -742,11 +770,10 @@ article.studip > section > table.default:last-child { table.withdetails { > tbody > tr:not(.details) > td:first-child { - @include background-icon(arr_1right); - background-repeat: no-repeat; - background-position: 2px center; - padding-left: 20px; - + @include icon(before, arr_1right, $align: bottom); + &::before { + color: var(--color--highlight); + } > a { margin-left: -20px; padding-left: 20px; @@ -755,10 +782,13 @@ table.withdetails { > tbody > tr.open > td { background-color: var(--color--table-header); + &::before { + color: var(--color--highlight); + } } > tbody > tr.open > td:first-child { - @include background-icon(arr_1down); + @include icon(before, arr_1down, $align: bottom); } tr.details { @@ -794,15 +824,9 @@ table.withdetails { } @mixin sortable-dreieck($direction) { + @include icon(after, 'arr_1#{$direction}', $size: $icon-size-inline); &::after { - background-repeat: no-repeat; - content: ' '; - display: inline-block; - height: $icon-size-inline; - margin-left: 0; - @include background-icon('arr_1#{$direction}', clickable, $icon-size-inline); - vertical-align: text-bottom; - width: $icon-size-inline; + color: var('--color--highlight'); } } @@ -811,19 +835,19 @@ table.withdetails { .tablesorter-header:not(.sorter-false) { white-space: nowrap; - color: var(--base-color); + color: var(--color--highlight); &:hover { - color: var(--active-color); + color: var(--color--highlight-hover); cursor: pointer; } - &.tablesorter-headerDesc:hover .tablesorter-header-inner::after { - @include background-icon(arr_1down, status-red, $icon-size-inline); + &.tablesorter-headerDesc:hover .tablesorter-header-inner { + @include icon(after, arr_1down, $size: $icon-size-inline); } - &.tablesorter-headerAsc:hover .tablesorter-header-inner::after { - @include background-icon(arr_1up, status-red, $icon-size-inline); + &.tablesorter-headerAsc:hover .tablesorter-header-inner { + @include icon(after, arr_1up, $size: $icon-size-inline); } } @@ -930,7 +954,7 @@ table.show-tree { a:hover { background-color: var(--color--table-header) !important; - color: var(--base-color) !important; + color: var(--color--content-link-hover) !important; } } diff --git a/resources/assets/stylesheets/scss/tabs.scss b/resources/assets/stylesheets/scss/tabs.scss index 77179e5..914da5f 100644 --- a/resources/assets/stylesheets/scss/tabs.scss +++ b/resources/assets/stylesheets/scss/tabs.scss @@ -38,10 +38,10 @@ div.clear margin-right: 0; } &.current { - color: var(--base-color); + color: var(--color--main-navigation-item); } &:hover { - color: var(--base-color); + color: var(--color--main-navigation-item); padding-top: 0; } @@ -49,17 +49,25 @@ div.clear padding-top: 0; line-height: 25px; a, span.quiet { - color: var(--base-color); + color: var(--color--main-navigation-item); + + &:hover { + text-decoration: none; + } } } } a, span.quiet { - color: var(--black); + color: var(--color--font-primary); float: left; display: block; padding: 5px 8px; white-space: nowrap; + + &:hover { + text-decoration: none; + } } } diff --git a/resources/assets/stylesheets/scss/themes.scss b/resources/assets/stylesheets/scss/themes.scss new file mode 100644 index 0000000..ba618e1 --- /dev/null +++ b/resources/assets/stylesheets/scss/themes.scss @@ -0,0 +1,249 @@ +.theme-settings-app-wrapper { + .theme-list { + max-width: 1660px; + + h2 { + margin-top: 0; + } + + .theme-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + gap: 15px; + + .theme-category { + .theme-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + gap: 15px; + padding: 0; + margin: 0; + list-style: none; + + li { + display: flex; + flex-direction: column; + justify-content: space-between; + border: 1px solid var(--color--tile-border); + border-left: 8px solid var(--color--tile-marker-inactive); + background: var(--color--tile-background); + padding: 0.5rem; + + &.active { + border-left-color: var(--color--tile-marker-active); + } + + &.theme-add { + border-left: 1px solid var(--color--tile-border); + + button { + width: 100%; + height: 100%; + background: var(--color--tile-background); + border: none; + color: var(--color--font-primary); + font-size: 1.1rem; + cursor: pointer; + color: var(--color--highlight); + + .studip-icon { + display: inline-block; + vertical-align: top; + margin-right: 5px; + } + } + } + + .theme-info { + display: flex; + justify-content: space-between; + align-items: flex-start; + + .theme-meta { + flex: 1; + + .theme-name { + margin: 0; + font-size: 1.1rem; + } + + .theme-description { + margin: 0.25rem 0 0 0; + font-size: 0.9rem; + color: var(--color--text-muted); + } + } + + .theme-colors { + display: flex; + gap: 4px; + + .theme-color { + width: 14px; + height: 48px; + } + } + } + + .theme-actions { + display: flex; + justify-content: flex-end; + gap: 0.5rem; + margin-top: 2rem; + + button.button { + margin: 0; + } + } + } + } + } + + .themes-footer { + grid-column: 1 / -1; + display: flex; + justify-content: center; + margin-top: 2rem; + } + + .json-upload { + margin-top: 2rem; + + input { + margin-bottom: 1rem; + } + + button { + padding: 0.5rem 1rem; + } + } + } + } +} +.theme-editor { + .color-group { + margin-bottom: 2rem; + + .group-title { + font-size: 1.2rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid var(--color--divider); + padding-bottom: 0.2rem; + } + + .color-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1rem; + + .color-entry { + display: flex; + flex-direction: row; + justify-content: flex-start; + min-height: 150px; + background: var(--color--tile-background); + border: 1px solid var(--color--tile-border); + + .color-entry-color { + border: 1px solid var(--color--tile-border); + width: 50px; + margin: 10px; + } + .color-entry-content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0.5rem; + flex-grow: 1; + + .color-entry-text { + .color-entry-hex { + font-weight: 700; + } + } + + .color-entry-buttons { + display: flex; + justify-content: end; + button.button.btn-icon--only { + margin: 0 8px 0 0; + } + } + } + } + } + } + .new-color-entry { + input { + margin-right: 8px; + } + + button { + margin-left: 8px; + } + } +} + +.theme-upload { + display: flex; + flex-direction: column; + width: 540px; + border: solid thin var(--color--tile-border); + background: var(--color--global-background); + margin: 0 auto; + padding: 1em; + .theme-upload-title h3 { + margin: 0; + font-size: 1.1rem; + } +} +.theme-upload-actions { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 30px; + + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; + } + .file-dropzone-wrapper { + width: 100%; + padding: 5px; + border: thin solid var(--color--tile-border); + border-radius: var(--border-radius-default); + background: var(--color--tile-background); + cursor: pointer; + + .file-dropzone { + display: inline-flex; + width: calc(100% - 60px); + gap: 20px; + padding: 30px; + border: thin solid transparent; + color: var(--color--highlight); + border-radius: var(--border-radius-default); + + &:hover { + border: thin dashed var(--color--tile-border); + } + + .studip-icon { + flex-shrink: 0; + } + + span { + max-width: 14em; + padding: 7px 0; + } + } + } +} diff --git a/resources/assets/stylesheets/scss/tree.scss b/resources/assets/stylesheets/scss/tree.scss index 1d700f9..af1c8ec 100644 --- a/resources/assets/stylesheets/scss/tree.scss +++ b/resources/assets/stylesheets/scss/tree.scss @@ -19,6 +19,15 @@ $tree-outline: 1px solid var(--light-gray-color-40); .contentbar-wrapper-right { display: inherit; + button, + a { + color: var(--color--highlight); + + &:hover { + color: var(--color--highlight-hover); + } + } + .action-menu { button { top: -2px; @@ -77,7 +86,7 @@ $tree-outline: 1px solid var(--light-gray-color-40); button { background: transparent; border: 0; - color: var(--base-color); + color: var(--color--highlight); cursor: pointer; padding: 0; diff --git a/resources/assets/stylesheets/scss/typography.scss b/resources/assets/stylesheets/scss/typography.scss index 5268145..d3a70a8 100644 --- a/resources/assets/stylesheets/scss/typography.scss +++ b/resources/assets/stylesheets/scss/typography.scss @@ -8,7 +8,7 @@ body { font-family: $font-family-base; font-size: $font-size-base; line-height: $line-height-base; - color: $text-color; + color: var(--color--font-primary); } // Reset fonts for relevant elements @@ -33,7 +33,7 @@ h1, h2, h3, h4, h5, h6 { font-family: $headings-font-family; font-weight: $headings-font-weight; line-height: $headings-line-height; - color: $headings-color; + color: var(--color--font-primary); } h1 { diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss index 551bb0a..4e7e36f 100644 --- a/resources/assets/stylesheets/scss/variables.scss +++ b/resources/assets/stylesheets/scss/variables.scss @@ -2,7 +2,7 @@ @import '../mixins/colors'; // Typography -$text-color: #000; +$text-color: var(--color--font-primary); $font-family-base: "Lato", sans-serif; @@ -81,15 +81,21 @@ $grid-gap: 0; // Buttons $button-icons: ( accept: accept, - cancel: decline, - edit: edit, - move-up: arr_1up, - move-down: arr_1down, add: add, - trash: trash, - download: download, - search: search, arr_left: arr_1left, arr_right: arr_1right, + cancel: decline, + date: date, + delete: trash, + edit: edit, + move-down: arr_1down, + move-up: arr_1up, + play: play, refresh: refresh, -); + search: search, + sidebar-toggle: sidebar3, + trash: trash, + upload: upload, + has-notice: file-text, + has-no-notice: file, +);
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/vips.scss b/resources/assets/stylesheets/scss/vips.scss index f11afda..ea092af 100644 --- a/resources/assets/stylesheets/scss/vips.scss +++ b/resources/assets/stylesheets/scss/vips.scss @@ -36,18 +36,6 @@ form.default { } } -button.vips_file_upload { - @include background-icon(upload); - background-position: 0.5em center; - background-repeat: no-repeat; - background-size: var(--icon-size-inline); - padding-left: 30px; - - &:hover { - @include background-icon(upload, info_alt); - } -} - progress.assignment { appearance: none; background: var(--light-gray-color-20); @@ -157,6 +145,9 @@ progress.assignment { } .exercise_type { + display: flex; + flex-direction: row; + gap: 16px; background-color: transparent; background-position: 0.5em center; background-repeat: no-repeat; @@ -165,7 +156,7 @@ progress.assignment { cursor: pointer; margin-top: 1.5ex; min-height: 50px; - padding: 4px 4px 4px 56px; + padding: 8px; text-align: left; width: 342px; @@ -173,6 +164,15 @@ progress.assignment { border: 1px solid var(--brand-color-dark); color: var(--active-color); } + + .exercise_type_description { + display: flex; + flex-direction: column; + + .exercise_type_name { + font-weight: bold; + } + } } .exercise .points { diff --git a/resources/assets/stylesheets/scss/wiki.scss b/resources/assets/stylesheets/scss/wiki.scss index 3d1c1ff..f03ce6f 100644 --- a/resources/assets/stylesheets/scss/wiki.scss +++ b/resources/assets/stylesheets/scss/wiki.scss @@ -49,12 +49,7 @@ body#wiki #main_content { } a.wiki-restricted { - $icon-size: 12px; - @include background-icon(lock-locked, info, $icon-size); - background-position: left center; - background-repeat: no-repeat; - - padding-left: $icon-size; + @include icon(before, lock-locked, $size: 12px, $padding: 12px); } .wiki-empty-background { @@ -156,13 +151,19 @@ a.wiki-restricted { .wiki_added { background-color: var(--content-color-20); border: 1px solid var(--content-color-40); - @include background-icon(add, inactive); + @include icon(before, add); + &::before { + color: var(--color--font-inactive); + } } .wiki_erased { background-color: var(--white); border: 1px solid var(--light-gray-color-40); - @include background-icon(remove, inactive); + @include icon(before, remove); + &::before { + color: var(--color--font-inactive); + } } .wiki_added + div, .wiki_erased + div { diff --git a/resources/assets/stylesheets/scss/wizard.scss b/resources/assets/stylesheets/scss/wizard.scss index 9663f98..8c869c2 100644 --- a/resources/assets/stylesheets/scss/wizard.scss +++ b/resources/assets/stylesheets/scss/wizard.scss @@ -9,13 +9,12 @@ margin-top: 38px; flex-shrink: 0; - img { + .studip-icon { margin: auto; - display: block; } p { - margin: 15px; + margin: 15px 0; } .wizard-requirements { @@ -30,14 +29,17 @@ list-style: none; button { + display: inline-flex; + align-items: center; + gap: 4px; padding: 2px 0; background-color: transparent; border: none; - color: var(--base-color); + color: var(--color--highlight); cursor: pointer; &:hover { - color: var(--red); + color: var(--color--highlight--hover); } } @@ -68,34 +70,40 @@ display: inline-block; position: relative; margin-right: 60px; - border: solid 2px var(--base-color); + border: solid 2px var(--color--highlight); button { + display: inline-flex; + justify-content: center; padding: 6px 0; height: 36px; width: 36px; cursor: pointer; background: no-repeat; border: none; + color: var(--color--highlight); } &.valid { - background-color: var(--base-color); + background-color: var(--color--highlight); + button { + color: var(--color--highlight-contrast); + } } &.invalid { - background-color: white; + background-color: var(--color--global-background); } &.optional { - border: dashed thin var(--base-color); + border: dashed thin var(--color--highlight); } &::before { position: absolute; content: ""; width: 62px; - border: solid thin var(--base-color); + border: solid thin var(--color--highlight); top: 50%; transform: translateY(-50%); left: 100%; @@ -106,7 +114,7 @@ content: ""; width: 38px; height: 3px; - background: var(--base-color); + background: var(--color--highlight); top: 44px; left: -1px; } @@ -132,10 +140,10 @@ max-height: 475px; overflow-y: auto; scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--dark-gray-color-5); + scrollbar-color: var(--color--highlight) var(--dark-gray-color-5); .wizard-required { - color: var(--red); + color: var(--color--warning); } textarea { diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss index 97422e1..d923f64 100644 --- a/resources/assets/stylesheets/studip.scss +++ b/resources/assets/stylesheets/studip.scss @@ -53,6 +53,7 @@ @import "scss/headings"; @import "scss/helpbar"; @import "scss/i18n"; +@import "scss/icons"; @import "scss/ilias-interface"; @import "scss/index"; @import "scss/fullscreen"; @@ -80,7 +81,6 @@ @import "scss/questionnaire"; @import "scss/quicksearch"; @import "scss/raumzeit"; -@import "scss/report"; @import "scss/responsive"; @import "scss/resources"; @import "scss/sidebar"; @@ -104,6 +104,7 @@ @import "scss/talk-bubble"; @import "scss/tooltip"; @import "scss/tfa"; +@import "scss/themes"; @import "scss/tour"; @import "scss/tree"; @import "scss/typography"; @@ -380,8 +381,8 @@ td.index_box_cell { a { box-sizing: border-box; - background-color: var(--content-color-20); - border: 1px solid var(--dark-gray-color-30); + background-color: var(--color--tile-background); + border: 1px solid var(--color--tile-border); display: block; height: 11em; margin: 0 0 1em; @@ -390,15 +391,16 @@ td.index_box_cell { position: relative; &:hover { - background-color: var(--content-color-10); - border-color: var(--dark-gray-color-45); + background-color: var(--color--tile-background-hover); + border-color: var(--color--tile-border-hover); + text-decoration: none; p { - color: var(--black); + color: var(--color--font-primary); } } } - img { + svg { height: calc(100% - 20px); position: absolute; top: 10px; @@ -416,25 +418,25 @@ td.index_box_cell { padding: 0; } p { - color: var(--dark-gray-color-80); + color: var(--color--font-secondary); } } /* --- general style classes ------------------------------------------------ */ .arrow_down { background: transparent top left no-repeat !important; - @include background-icon(arr_1down); + @include icon(before, arr_1down); } .arrow_right { background: transparent top left no-repeat !important; - @include background-icon(arr_1right); + @include icon(before, arr_1right); } h1:hover, h2:hover, h3:hover, h4:hover { .arrow_down { - @include background-icon(arr_1down, attention); + @include icon(before, arr_1down, attention); } .arrow_right { - @include background-icon(arr_1right, attention); + @include icon(before, arr_1right, attention); } } @@ -643,10 +645,11 @@ input.allow-plaintext-toggle { position: absolute; transform: translateY(-50%); - @include background-icon(visibility-invisible); + @include icon($position: before, $icon: visibility-invisible, $padding: 6px); + color: var(--color--font-primary); &.password-is-hidden { - @include background-icon(visibility-checked); + @include icon($position: before, $icon: visibility-checked, $padding: 6px); } } } |