From 5fe538e2b58180fb23040831fe9f62ae1e6cd45f Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Fri, 27 Sep 2024 15:23:21 +0000
Subject: [PATCH] Step 4201
Closes #4201
Merge request studip/studip!3121
---
app/views/admin/cronjobs/logs/index.php | 2 +-
app/views/admin/cronjobs/schedules/index.php | 2 +-
app/views/admin/cronjobs/tasks/index.php | 2 +-
app/views/contact/index.php | 2 +-
app/views/course/details/index.php | 2 +-
app/views/course/members/autor_list.php | 2 +-
app/views/course/members/awaiting_list.php | 2 +-
app/views/course/members/index.php | 3 -
app/views/course/members/tutor_list.php | 2 +-
app/views/course/members/user_list.php | 2 +-
app/views/file/_terms_of_use_select.php | 4 +-
app/views/file/new_edit_folder_form.php | 4 +-
app/views/settings/deputies.php | 3 +
app/views/settings/notification.php | 3 +
app/views/start/_widget.php | 4 +-
lib/modules/ActivityFeed.php | 2 +-
lib/modules/NewsWidget.php | 6 +-
lib/modules/QuickSelection.php | 2 +-
lib/modules/TerminWidget.php | 2 +-
.../assets/stylesheets/mixins/colors.scss | 12 +-
.../assets/stylesheets/mixins/studip.scss | 7 +-
.../assets/stylesheets/scss/article.scss | 30 +++--
.../assets/stylesheets/scss/buttons.scss | 89 ++++++-------
.../assets/stylesheets/scss/content_box.scss | 19 +--
.../assets/stylesheets/scss/contentbar.scss | 7 +-
.../assets/stylesheets/scss/contents.scss | 11 +-
.../scss/courseware/layouts/input-file.scss | 17 ++-
.../scss/courseware/layouts/ribbon.scss | 4 +-
.../stylesheets/scss/courseware/toolbar.scss | 5 -
resources/assets/stylesheets/scss/dialog.scss | 13 +-
resources/assets/stylesheets/scss/files.scss | 8 +-
resources/assets/stylesheets/scss/forms.scss | 29 +++--
resources/assets/stylesheets/scss/forum.scss | 4 +-
.../stylesheets/scss/jquery-ui/studip.scss | 1 -
.../assets/stylesheets/scss/schedule.scss | 8 ++
resources/assets/stylesheets/scss/search.scss | 14 --
.../assets/stylesheets/scss/selects.scss | 7 +
resources/assets/stylesheets/scss/start.scss | 20 +--
.../assets/stylesheets/scss/statusgroups.scss | 16 +--
.../stylesheets/scss/table_of_contents.scss | 5 +-
resources/assets/stylesheets/scss/tables.scss | 123 ++++++++++--------
.../assets/stylesheets/scss/typography.scss | 11 +-
.../assets/stylesheets/scss/variables.scss | 23 ++--
.../vue/components/StudipFileChooser.vue | 1 +
.../vue/components/StudipWizardDialog.vue | 2 +-
.../toolbar/CoursewareToolbarBlocks.vue | 2 +-
templates/start/contents.php | 3 -
47 files changed, 275 insertions(+), 267 deletions(-)
diff --git a/app/views/admin/cronjobs/logs/index.php b/app/views/admin/cronjobs/logs/index.php
index d17a4a52586..f29579c5d8d 100644
--- a/app/views/admin/cronjobs/logs/index.php
+++ b/app/views/admin/cronjobs/logs/index.php
@@ -134,7 +134,7 @@ use Studip\Button, Studip\LinkButton;
</tbody>
<tfoot>
<tr>
- <td colspan="6">
+ <td colspan="6" class="groupactions">
<select name="action" data-activates="button[name=bulk]" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<option value="delete"><?= _('Löschen') ?></option>
diff --git a/app/views/admin/cronjobs/schedules/index.php b/app/views/admin/cronjobs/schedules/index.php
index 79a65be2ed2..6dbf96d2d0e 100644
--- a/app/views/admin/cronjobs/schedules/index.php
+++ b/app/views/admin/cronjobs/schedules/index.php
@@ -131,7 +131,7 @@ use Studip\Button, Studip\LinkButton;
</tbody>
<tfoot>
<tr>
- <td colspan="9">
+ <td colspan="9" class="groupactions">
<select name="action" data-activates=".cronjobs button[name=bulk]" aria-label="<?= _('Aktion auswählen')?>">
<option value="">- <?= _('Aktion auswählen') ?> -</option>
<option value="activate"><?= _('Aktivieren') ?></option>
diff --git a/app/views/admin/cronjobs/tasks/index.php b/app/views/admin/cronjobs/tasks/index.php
index 0edd1919dbc..268c6e983f5 100644
--- a/app/views/admin/cronjobs/tasks/index.php
+++ b/app/views/admin/cronjobs/tasks/index.php
@@ -77,7 +77,7 @@ use Studip\Button;
</tbody>
<tfoot>
<tr>
- <td colspan="6">
+ <td colspan="6" class="groupactions">
<select name="action" data-activates=".cronjobs button[name=bulk]" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<option value="activate"><?= _('Aktivieren') ?></option>
diff --git a/app/views/contact/index.php b/app/views/contact/index.php
index 81f50043f1c..0bcdcd3a6b4 100644
--- a/app/views/contact/index.php
+++ b/app/views/contact/index.php
@@ -105,7 +105,7 @@
</tbody>
<tfoot>
<tr>
- <td colspan="5">
+ <td colspan="5" class="groupactions">
<select name="action_contact" id="contact_action" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<option value="remove"><?= $filter ? _('Kontakte aus Gruppe entfernen') : _('Kontakte entfernen') ?></option>
diff --git a/app/views/course/details/index.php b/app/views/course/details/index.php
index 569a2663e83..34817b0d9d7 100644
--- a/app/views/course/details/index.php
+++ b/app/views/course/details/index.php
@@ -30,7 +30,7 @@
<header>
<h1><?= _('Allgemeine Informationen') ?></h1>
</header>
- <table class="default">
+ <table class="default nohover">
<colgroup>
<col style="width: 40%">
<col style="width: 60%">
diff --git a/app/views/course/members/autor_list.php b/app/views/course/members/autor_list.php
index 31ed8fa5c75..24bebcc2d77 100644
--- a/app/views/course/members/autor_list.php
+++ b/app/views/course/members/autor_list.php
@@ -182,7 +182,7 @@
<? if ($is_tutor && !$is_locked && count($autoren) > 0) : ?>
<tfoot>
<tr>
- <td colspan="<?= $cols_foot ?>">
+ <td colspan="<?= $cols_foot ?>" class="groupactions">
<select name="action_autor" id="action_autor" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<? if($is_dozent) : ?>
diff --git a/app/views/course/members/awaiting_list.php b/app/views/course/members/awaiting_list.php
index c57bd2db118..1981910e37f 100644
--- a/app/views/course/members/awaiting_list.php
+++ b/app/views/course/members/awaiting_list.php
@@ -138,7 +138,7 @@
<? if (!$is_locked) : ?>
<tfoot>
<tr>
- <td colspan="6">
+ <td colspan="6" class="groupactions">
<select name="action_awaiting" id="action_awaiting" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<option value="upgrade_autor">
diff --git a/app/views/course/members/index.php b/app/views/course/members/index.php
index fc77d2e7f81..00bfd89fbb2 100644
--- a/app/views/course/members/index.php
+++ b/app/views/course/members/index.php
@@ -16,7 +16,6 @@
<? endif ?>
<? if (count($tutoren) > 0) : ?>
- <br />
<?= $this->render_partial('course/members/tutor_list') ?>
<? endif ?>
@@ -31,12 +30,10 @@
<? endif ?>
<? if (count($autoren) > 0) : ?>
- <br />
<?= $this->render_partial('course/members/autor_list') ?>
<? endif ?>
<? if (count($users) > 0) : ?>
- <br />
<?= $this->render_partial('course/members/user_list') ?>
<? endif ?>
diff --git a/app/views/course/members/tutor_list.php b/app/views/course/members/tutor_list.php
index 350d83d9428..5c622a3acdf 100644
--- a/app/views/course/members/tutor_list.php
+++ b/app/views/course/members/tutor_list.php
@@ -162,7 +162,7 @@
<? if ($is_dozent && !$tutor_is_locked): ?>
<tfoot>
<tr>
- <td colspan="6">
+ <td colspan="6" class="groupactions">
<select name="action_tutor" id="tutor_action" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<option value="downgrade"><?= sprintf(_('Zu %s herunterstufen'), htmlReady($status_groups['autor'])) ?></option>
diff --git a/app/views/course/members/user_list.php b/app/views/course/members/user_list.php
index 21409b5a2c3..ceb619e5eaa 100644
--- a/app/views/course/members/user_list.php
+++ b/app/views/course/members/user_list.php
@@ -153,7 +153,7 @@
<? if ($is_tutor) : ?>
<tfoot>
<tr>
- <td colspan="6">
+ <td colspan="6" class="groupactions">
<select name="action_user" id="user_action" aria-label="<?= _('Aktion auswählen') ?>">
<option value="">- <?= _('Aktion auswählen') ?></option>
<option value="upgrade">
diff --git a/app/views/file/_terms_of_use_select.php b/app/views/file/_terms_of_use_select.php
index c1aae007f3b..4252b2d0d5b 100644
--- a/app/views/file/_terms_of_use_select.php
+++ b/app/views/file/_terms_of_use_select.php
@@ -24,8 +24,8 @@ if (!$selected_terms_of_use_id) {
aria-description="<?= htmlReady(kill_format($content_terms_of_use_entry->description)) ?>">
<label for="content_terms_of_use-<?= htmlReady($content_terms_of_use_entry->id) ?>">
- <?= Icon::create('radiobutton-unchecked')->asImg(24, ['class' => 'arrow']) ?>
- <?= Icon::create('radiobutton-checked')->asImg(24, ['class' => 'check']) ?>
+ <?= Icon::create('radiobutton-unchecked')->asImg(20, ['class' => 'arrow']) ?>
+ <?= Icon::create('radiobutton-checked')->asImg(20, ['class' => 'check']) ?>
<div class="text">
<?= htmlReady($content_terms_of_use_entry->name) ?>
</div>
diff --git a/app/views/file/new_edit_folder_form.php b/app/views/file/new_edit_folder_form.php
index 32b9800453f..c25a71cde5a 100644
--- a/app/views/file/new_edit_folder_form.php
+++ b/app/views/file/new_edit_folder_form.php
@@ -27,8 +27,8 @@
id="folder-type-<?= htmlReady($folder_type['class']) ?>"
<? if ($folder_type['class'] === get_class($folder)) echo 'checked'; ?>>
<label for="folder-type-<?= htmlReady($folder_type['class']) ?>">
- <?= Icon::create('radiobutton-unchecked')->asImg(24, ['class' => 'arrow']) ?>
- <?= Icon::create('radiobutton-checked')->asImg(24, ['class' => 'check']) ?>
+ <?= Icon::create('radiobutton-unchecked')->asImg(20, ['class' => 'arrow']) ?>
+ <?= Icon::create('radiobutton-checked')->asImg(20, ['class' => 'check']) ?>
<div class="text">
<?= htmlReady($folder_type['name']) ?>
<? if ($template = $folder_type['instance']->getDescriptionTemplate()): ?>
diff --git a/app/views/settings/deputies.php b/app/views/settings/deputies.php
index 606b9fd990a..f32a9a006e2 100644
--- a/app/views/settings/deputies.php
+++ b/app/views/settings/deputies.php
@@ -2,6 +2,9 @@
<form method="post" action="<?= $controller->link_for('settings/deputies/store') ?>" class="default">
<?= CSRFProtection::tokenTag() ?>
<table class="default no-hover">
+ <caption>
+ <?= _('Standardvertretung')?>
+ </caption>
<colgroup>
<col>
<? if ($edit_about_enabled): ?>
diff --git a/app/views/settings/notification.php b/app/views/settings/notification.php
index 2fd4f9cfa9d..54288197133 100644
--- a/app/views/settings/notification.php
+++ b/app/views/settings/notification.php
@@ -4,6 +4,9 @@
<input type="hidden" name="studip_ticket" value="<?= get_ticket() ?>">
<table class="default" id="settings-notifications">
+ <caption>
+ <?= _('Benachrichtigung über neue Inhalte anpassen')?>
+ </caption>
<colgroup>
<col width="7px">
<col width="100%">
diff --git a/app/views/start/_widget.php b/app/views/start/_widget.php
index 62f0bf42ec1..479146e3724 100644
--- a/app/views/start/_widget.php
+++ b/app/views/start/_widget.php
@@ -28,12 +28,12 @@
<? if (isset($admin_url)): ?>
<a href="<?= URLHelper::getLink($admin_url) ?>">
- <?= Icon::create('admin', Icon::ROLE_CLICKABLE, ['title' => $admin_title]) ?>
+ <?= Icon::create('admin', Icon::ROLE_CLICKABLE, ['title' => $admin_title, 'size' => 20]) ?>
</a>
<? endif ?>
<a href="<?= $controller->url_for('start/delete/' . $widget->getPluginId()) ?>">
- <?= Icon::create('decline', Icon::ROLE_CLICKABLE, ['title' => _('Entfernen')]) ?>
+ <?= Icon::create('decline', Icon::ROLE_CLICKABLE, ['title' => _('Entfernen'), 'size' => 20]) ?>
</a>
</span>
<span id="widgetName<?= $widget->getPluginId() ?>" class="widget-title">
diff --git a/lib/modules/ActivityFeed.php b/lib/modules/ActivityFeed.php
index 667c4f9efe9..e3ebe7ae10f 100644
--- a/lib/modules/ActivityFeed.php
+++ b/lib/modules/ActivityFeed.php
@@ -27,7 +27,7 @@ class ActivityFeed extends CorePlugin implements PortalPlugin
$template->config = UserConfig::get($GLOBALS['user']->id)->getValue('ACTIVITY_FEED');
$navigation = new Navigation('', 'dispatch.php/activityfeed/configuration');
- $navigation->setImage(Icon::create('edit', 'clickable', ["title" => _('Konfigurieren')]), ['data-dialog'=>'size=auto']);
+ $navigation->setImage(Icon::create('edit', 'clickable', ["title" => _('Konfigurieren'), 'size' => 20]), ['data-dialog'=>'size=auto']);
$icons[] = $navigation;
$navigation = new Navigation('', '#', ['cid' => null]);
diff --git a/lib/modules/NewsWidget.php b/lib/modules/NewsWidget.php
index ae211f2b7c2..e9151807e1f 100644
--- a/lib/modules/NewsWidget.php
+++ b/lib/modules/NewsWidget.php
@@ -32,21 +32,21 @@ class NewsWidget extends CorePlugin implements PortalPlugin
$icons = [];
if (StudipNews::CountUnread() > 0) {
$navigation = new Navigation('', 'dispatch.php/news/visit_all');
- $navigation->setImage(Icon::create('refresh', Icon::ROLE_CLICKABLE, ['title' => _('Alle als gelesen markieren')]), ['class' => 'visit-all']);
+ $navigation->setImage(Icon::create('refresh', Icon::ROLE_CLICKABLE, ['title' => _('Alle als gelesen markieren'), 'size' => 20]), ['class' => 'visit-all']);
$icons[] = $navigation;
}
if (Config::get()->NEWS_RSS_EXPORT_ENABLE) {
if ($rss_id = StudipNews::GetRssIdFromRangeId('studip')) {
$navigation = new Navigation('', 'rss.php', ['id' => $rss_id]);
- $navigation->setImage(Icon::create('rss', Icon::ROLE_CLICKABLE, ['title' => _('RSS-Feed')]));
+ $navigation->setImage(Icon::create('rss', Icon::ROLE_CLICKABLE, ['title' => _('RSS-Feed'), 'size' => 20]));
$icons[] = $navigation;
}
}
if ($GLOBALS['perm']->have_perm('root')) {
$navigation = new Navigation('', 'dispatch.php/news/edit_news/new/studip');
- $navigation->setImage(Icon::create('add', Icon::ROLE_CLICKABLE, ['title' => _('Ankündigungen bearbeiten')]), ['data-dialog' => '1']);
+ $navigation->setImage(Icon::create('add', Icon::ROLE_CLICKABLE, ['title' => _('Ankündigungen bearbeiten'), 'size' => 20]), ['data-dialog' => '1']);
$icons[] = $navigation;
if (Config::get()->NEWS_RSS_EXPORT_ENABLE) {
$navigation = new Navigation('', 'dispatch.php/news/rss_config/studip');
diff --git a/lib/modules/QuickSelection.php b/lib/modules/QuickSelection.php
index 1d8fd229e9d..3a6c1c89c75 100644
--- a/lib/modules/QuickSelection.php
+++ b/lib/modules/QuickSelection.php
@@ -31,7 +31,7 @@ class QuickSelection extends CorePlugin implements PortalPlugin
$template->navigation = $this->getFilteredNavigation($names);
$navigation = new Navigation('', 'dispatch.php/quickselection/configuration');
- $navigation->setImage(Icon::create('edit', 'clickable', ["title" => _('Konfigurieren')]), ['data-dialog'=>'size=auto']);
+ $navigation->setImage(Icon::create('edit', 'clickable', ["title" => _('Konfigurieren'), 'size' => 20]), ['data-dialog'=>'size=auto']);
$template->icons = [$navigation];
diff --git a/lib/modules/TerminWidget.php b/lib/modules/TerminWidget.php
index 4274ee411c3..9bc8e9df213 100644
--- a/lib/modules/TerminWidget.php
+++ b/lib/modules/TerminWidget.php
@@ -32,7 +32,7 @@ class TerminWidget extends CorePlugin implements PortalPlugin
$template->content = $response->body;
$navigation = new Navigation('', 'dispatch.php/calendar/date/add');
- $navigation->setImage(Icon::create('add', Icon::ROLE_CLICKABLE, ['title' => _('Neuen Termin anlegen')]));
+ $navigation->setImage(Icon::create('add', Icon::ROLE_CLICKABLE, ['title' => _('Neuen Termin anlegen'), 'size' => 20]));
$navigation->setLinkAttributes(['data-dialog' => 'reload-on-close']);
$template->icons = [$navigation];
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 21039f60ffa..88398e78666 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -108,7 +108,7 @@ $dark-green-60: mix($dark-green, #fff, 60%); // #66b570
$dark-green-40: mix($dark-green, #fff, 40%); // #99cea0
$dark-green-20: mix($dark-green, #fff, 20%); // #cce6cf
-$petrol: #129c94;
+$petrol: #0E817B; // old #129c94;
$petrol-80: mix($petrol, #fff, 80%); // #41afaa
$petrol-60: mix($petrol, #fff, 60%); // #70c3bf
$petrol-40: mix($petrol, #fff, 40%); // #a0d7d4
@@ -120,7 +120,8 @@ $brown-60: mix($brown, #fff, 60%); // #ca9eaf
$brown-40: mix($brown, #fff, 40%); // #dcbeb4
$brown-20: mix($brown, #fff, 20%); // #edded9
-$fieldset-header: $content-color-20;
+// $fieldset-header: $content-color-20;
+$fieldset-header: $dark-gray-color-10;
$fieldset-border: $base-color-20;
// contrast colors
@@ -238,7 +239,7 @@ $color--brand-secondary: $color--gray-2;
$color--font-primary: $color--gray-1;
$color--font-secondary: $color--gray-3;
-$color--font-inactive: $color--gray-4;
+$color--font-inactive: $color--gray-3;
$color--font-inverted: $color--white;
$color--main-navigation-background: $color--gray-7;
@@ -262,6 +263,7 @@ $color--tile-background-focus: $color--gray-6;
$color--tile-background-hover: $color--gray-6;
$color--content-box-border: $color--gray-5;
+$color--content-box-header: $color--gray-6;
$color--content-box-background: $color--white;
$color--table-header: $color--gray-6;
@@ -269,10 +271,12 @@ $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-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-border: $color--gray-5;
$color--input-field-border: $color--gray-5;
$color--input-field-background: $color--white;
diff --git a/resources/assets/stylesheets/mixins/studip.scss b/resources/assets/stylesheets/mixins/studip.scss
index a60cb9567fd..713f2fa3a82 100644
--- a/resources/assets/stylesheets/mixins/studip.scss
+++ b/resources/assets/stylesheets/mixins/studip.scss
@@ -120,13 +120,14 @@
img { display: none; }
display: inline-block;
+ vertical-align: bottom;
- @include background-icon($default-icon-name, clickable);
+ @include background-icon($default-icon-name, clickable, 20);
@include hide-text();
- @include square(16px);
+ @include square(20px);
&.toggled {
- @include background-icon($toggled-icon-name, clickable);
+ @include background-icon($toggled-icon-name, clickable, 20);
}
}
diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss
index 9abb0bd80cb..1694475092f 100644
--- a/resources/assets/stylesheets/scss/article.scss
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -1,9 +1,7 @@
$article-padding: 10px;
article.studip {
- border: 1px solid var(--content-color-40);
-
- margin-bottom: $article-padding;
+ margin-bottom: 30px;
padding: $article-padding;
transition: all var(--transition-duration) ease 0s;
@@ -17,8 +15,8 @@ article.studip {
align-items: center;
flex-wrap: wrap;
- padding: 2px;
- background-color: var(--content-color-20);
+ padding: 0 5px;
+ background-color: var(--color--content-box-header);
margin: -$article-padding;
margin-bottom: $article-padding;
@@ -33,15 +31,17 @@ article.studip {
}
h1 {
- padding: 5px;
+ padding: 10px;
margin: 0;
- color: var(--base-color);
+ color: var(--color--font-primary);
border-bottom: none;
- font-size: medium;
+ font-size: $font-size-h3;
+ font-weight: 400;
+ line-height: 24px;
> a {
display: flex;
- align-items: flex-start;
+ align-items: center;
}
&,
@@ -49,7 +49,6 @@ article.studip {
> img,
> svg {
margin-right: 5px;
- margin-top: 2px;
}
}
}
@@ -60,7 +59,7 @@ article.studip {
padding: 2px;
> * {
- border-right: 1px solid var(--content-color);
+ border-right: 1px solid var(--color--content-box-border);
padding-right: 4px;
margin-right: 4px;
@@ -120,7 +119,7 @@ article.studip {
> footer {
text-align: center;
- border-top: 1px solid var(--content-color-40);
+ border-top: 1px solid var(--color--content-box-border);
margin: -$article-padding;
margin-top: $article-padding;
@@ -155,3 +154,10 @@ article.new {
}
}
}
+
+.studip-widget article.studip {
+ margin-bottom: 10px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index c148b72931a..63656205b67 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(--white);
- border: 1px solid var(--base-color);
+ background: var(--color--button-background);
+ border: 1px solid var(--color--button-border);
border-radius: 0;
box-sizing: border-box;
- color: var(--base-color);
+ color: var(--color--button-border);
cursor: pointer;
display: inline-block;
font-family: $font-family-base;
@@ -14,7 +14,7 @@
margin: 0.8em 0.6em 0.8em 0;
min-width: 100px;
overflow: visible;
- padding: 5px 15px;
+ padding: 10px 20px;
position: relative;
text-align: center;
text-decoration: none;
@@ -23,21 +23,19 @@
width: auto;
&:hover,
- &:active {
- background: var(--base-color);
- color: var(--white);
+ &:active,
+ &.active {
+ background: var(--color--button-focus);
+ color: var(--color--font-inverted);
}
&.disabled,
&[disabled] {
box-shadow: none;
- background: var(--light-gray-color-20);
- cursor: default;
- opacity: 0.65;
-
- &:hover {
- color: var(--base-color);
- }
+ color: var(--color--font-inactive);
+ background: var(--color--button-inactive-background);
+ border: 1px solid var(--color--button-inactive-border);
+ cursor: not-allowed;
}
transition: none;
@@ -56,7 +54,7 @@ button.button {
content: " ";
float: left;
height: 16px;
- margin: 1px 5px 0 -8px;
+ margin: 1px 10px 0 -5px;
width: 16px;
}
}
@@ -79,44 +77,35 @@ button.button {
}
}
-.button.accept {
- @include button-with-icon(accept, clickable, info_alt);
-}
-.button.cancel {
- @include button-with-icon(decline, clickable, info_alt);
-}
-.button.edit {
- @include button-with-icon(edit, clickable, info_alt);
-}
-.button.move-up {
- @include button-with-icon(arr_1up, clickable, info_alt);
-}
-.button.move-down {
- @include button-with-icon(arr_1down, clickable, info_alt);
-}
-.button.add {
- @include button-with-icon(add, clickable, info_alt);
-}
-.button.trash {
- @include button-with-icon(trash, clickable, info_alt);
-}
-.button.download {
- @include button-with-icon(download, clickable, info_alt);
-}
-.button.search {
- @include button-with-icon(search, clickable, info_alt);
-}
-.button.arr_left {
- @include button-with-icon(arr_1left, clickable, info_alt);
-}
-.button.refresh {
- @include button-with-icon(refresh, clickable, info_alt);
+$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,
+ refresh: refresh,
+);
+
+@each $class, $icon in $button-icons {
+ .button {
+ &.#{'' + $class} {
+ @include button-with-icon($icon, clickable, info_alt);
+ &.disabled, &[disabled] {
+ @include button-with-icon($icon, info_alt, info_alt);
+ }
+ }
+ }
}
.button.arr_right {
- @include button-with-icon(arr_1right, clickable, info_alt);
&::before {
float: right;
- margin: 1px -8px 0 5px;
+ margin: 1px -10px 0 5px;
}
}
@@ -168,4 +157,4 @@ button,
pointer-events: none;
}
}
-}
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/content_box.scss b/resources/assets/stylesheets/scss/content_box.scss
index 300b91a65f7..a7728f77c2a 100644
--- a/resources/assets/stylesheets/scss/content_box.scss
+++ b/resources/assets/stylesheets/scss/content_box.scss
@@ -1,8 +1,5 @@
section.contentbox {
- border-color: var(--content-color-40);
- border-style: solid;
- border-width: 1px;
- margin-bottom: 10px;
+ margin-bottom: 30px;
transition: all var(--transition-duration) ease 0s;
header {
@@ -12,7 +9,7 @@ section.contentbox {
justify-content: space-between;
padding: 2px;
- background-color: var(--content-color-20);
+ background-color: var(--dark-gray-color-10);
span.title {
font-size: medium;
@@ -36,11 +33,13 @@ section.contentbox {
h1 {
flex: 1 0 0;
- padding: 5px;
+ padding: 10px;
margin: 0;
- color: var(--base-color);
+ color: var(--black);
border-bottom: none;
- font-size: medium;
+ font-size: $font-size-h3;
+ font-weight: 400;
+ line-height: 24px;
> a {
img, svg {
@@ -61,6 +60,10 @@ section.contentbox {
padding-left: 0.25em;
}
}
+
+ > .action-menu {
+ margin: auto 0;
+ }
}
footer:empty {
diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss
index ce1e313325e..3b0aff35370 100644
--- a/resources/assets/stylesheets/scss/contentbar.scss
+++ b/resources/assets/stylesheets/scss/contentbar.scss
@@ -1,6 +1,5 @@
.contentbar {
- background-color: var(--dark-gray-color-5);
- border: solid thin var(--dark-gray-color-30);
+ background-color: var(--dark-gray-color-10);
display: flex;
flex-wrap: nowrap;
height: auto;
@@ -8,7 +7,7 @@
justify-content: flex-start;
margin-bottom: 15px;
min-height: 30px;
- padding: 1em 2em;
+ padding: 1em;
.contentbar-nav {
display: flex;
@@ -23,7 +22,7 @@
.contentbar-breadcrumb {
font-size: 1.25em;
line-height: 1.5em;
- margin-right: 1em;
+ margin: auto 1em;
min-width: 0;
.contentbar-icon {
diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss
index 8e02284fa29..d3d5a33e9c2 100644
--- a/resources/assets/stylesheets/scss/contents.scss
+++ b/resources/assets/stylesheets/scss/contents.scss
@@ -43,14 +43,14 @@
.content-item {
align-items: stretch;
- background-color: var(--dark-gray-color-5);
- border: solid thin var(--light-gray-color-40);
+ background-color: var(--color--tile-background);
+ border: solid thin var(--color--tile-border);
display: flex;
min-height: 150px;
justify-content: stretch;
.content-item-link {
- color: unset;
+ color: var(--color--font-primary);
display: grid;
flex: 1;
grid-template-columns: 74px auto;
@@ -64,7 +64,7 @@
.content-item-text {
.content-item-title {
- color: var(--base-color);
+ color: var(--color--brand-primary);
font-size: 1.3em;
width: 100%;
max-width: 160px;
@@ -77,7 +77,8 @@
}
&:hover {
- background-color: var(--white);
+ background-color: var(--color--tile-background-hover);
+ border: solid thin var(--color--tile-border-hover);
color: unset;
.content-item-link {
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss b/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss
index 91590699f65..99ca6b22f16 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/input-file.scss
@@ -1,36 +1,43 @@
.cw-file-input {
width: stretch;
- border: solid thin var(--base-color);
+ border: solid thin var(--light-gray-color-40);
font-size: 14px;
cursor: pointer;
&::file-selector-button {
font-family: inherit;
border: none;
- border-right: solid thin var(--base-color);
+ border-right: solid thin var(--light-gray-color-40);
background-color: var(--white);
padding: 6px 15px;
margin-right: 10px;
color: var(--base-color);
+ }
- &:hover {
+ &:hover {
+ border-color: var(--base-color);
+ &::file-selector-button {
background-color: var(--base-color);
color: var(--white);
}
}
}
.cw-file-input-change {
- border: solid thin var(--base-color);
+ border: solid thin var(--light-gray-color-40);
button.button {
padding: 0.5em 1.5em;
margin: 0 0 0 -1px;
line-height: 100%;
border: none;
- border-right: solid thin var(--base-color);
+ border-right: solid thin var(--light-gray-color-40);
}
span {
padding: 0.5em 1.5em 0.5em 0.5em;
}
+
+ &:hover {
+ border-color: var(--base-color);
+ }
}
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
index 1f62e1c0223..140317eb773 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
@@ -60,11 +60,10 @@ $consum_ribbon_width: calc(100% - 58px);
flex-wrap: wrap;
height: auto;
min-height: 30px;
- border: solid thin var(--dark-gray-color-30);
margin-bottom: 15px;
padding: 1em;
justify-content: space-between;
- background-color: var(--dark-gray-color-5);
+ background-color: var(--dark-gray-color-10);
&.cw-ribbon-sticky {
position: fixed;
@@ -279,7 +278,6 @@ $consum_ribbon_width: calc(100% - 58px);
> button {
padding: 18px 8px 4px 8px;
- margin-top: 2px;
max-width: unset;
flex-grow: 0.5;
&::after {
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index 69ae2a8c38c..a0f04e50e15 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -96,11 +96,6 @@
.button {
min-width: inherit;
margin: 4px 2px;
-
- &.button-active {
- background-color: var(--base-color);
- color: var(--white);
- }
}
}
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index 0d21773fd8c..8527174bf95 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -93,13 +93,11 @@
&.disabled,
&[disabled] {
- background: var(--light-gray-color-20);
- cursor: default;
- opacity: 0.65;
-
- &:hover {
- color: var(--base-color);
- }
+ box-shadow: none;
+ color: var(--white);
+ background: var(--dark-gray-color-60);
+ border: 1px solid var(--dark-gray-color-60);
+ cursor: not-allowed;
}
&::before {
@@ -377,6 +375,7 @@ v u e d i a l o g
.studip-dialog-footer {
border-top: 1px solid var(--dark-gray-color-10);
justify-content: space-between;
+ margin: 0 5px;
}
&.studip-dialog-warning,
diff --git a/resources/assets/stylesheets/scss/files.scss b/resources/assets/stylesheets/scss/files.scss
index a75f8f3730a..dabd2f99067 100644
--- a/resources/assets/stylesheets/scss/files.scss
+++ b/resources/assets/stylesheets/scss/files.scss
@@ -384,14 +384,18 @@ form.default {
fieldset.select_terms_of_use,
fieldset.select_oer_upload {
> legend {
- margin: 0;
width: 100%;
+ margin: 0;
}
border: none;
padding: 0;
margin-left: 0;
margin-right: 0;
+ > :not(legend) {
+ margin: 0;
+ }
+
> input[type=radio] {
opacity: 0;
position: absolute;
@@ -407,7 +411,7 @@ form.default {
justify-content: space-between;
align-items: center;
padding: 0 10px 0;
- margin-bottom: 0;
+ margin: 0;
border-top: none;
> .text {
width: 100%;
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index d847dbe128e..12dedc836b9 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -200,24 +200,21 @@ form.default {
fieldset {
box-sizing: border-box;
+ border: none;
border: solid 1px var(--content-color-40);
- margin: 0 0 10px;
+ margin: 0 0 15px;
min-width: auto;
- padding: $gap 10px 10px;
+ padding: 0 0 10px 0;
> legend {
box-sizing: border-box;
background-color: var(--fieldset-header);
- border: 1px solid var(--content-color-40);
+ border: solid 1px var(--content-color-40);
border-bottom: 0;
- color: var(--brand-color-dark);
- font-size: 12pt;
- font-weight: bold;
- line-height: 2em;
- margin: 0 -11px;
- padding: 0;
- text-indent: 10px;
- width: calc(100% + 22px);
+ font-size: $font-size-h3;
+ padding: 10px;
+ margin: 0 0 10px -1px;
+ width: calc(100% + 2px);
}
// Insert invisible element that corrects double padding/margin at the
@@ -227,6 +224,11 @@ form.default {
display: block;
margin-top: -$gap;
}
+
+ > :not(legend) {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
}
.selectbox {
@@ -260,8 +262,7 @@ form.default {
}
footer {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--brand-color-darker);
+ background-color: var(--dark-gray-color-10);
clear: both;
margin-left: 0;
padding: 5px 10px;
@@ -399,7 +400,7 @@ form.default {
background-position: 6px center;
background-repeat: no-repeat;
cursor: pointer;
- padding-left: 20px;
+ padding-left: 30px;
}
&.collapsed {
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 01b97c1c46e..00ec7cab1dc 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -148,8 +148,8 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
.posting {
height: 100%;
- margin: 0 0 0.75em 0;
- padding: 0;
+ margin: 0 0 10px 0;
+ padding: 5px;
background-color: var(--content-color-20);
}
diff --git a/resources/assets/stylesheets/scss/jquery-ui/studip.scss b/resources/assets/stylesheets/scss/jquery-ui/studip.scss
index 1f1a0a69c02..7bbd93d2b95 100644
--- a/resources/assets/stylesheets/scss/jquery-ui/studip.scss
+++ b/resources/assets/stylesheets/scss/jquery-ui/studip.scss
@@ -45,7 +45,6 @@
background-color: var(--brand-color-lighter);
color: var(--white);
font-size: 1.3em;
- line-height: 30px;
text-align: center;
&:hover {
diff --git a/resources/assets/stylesheets/scss/schedule.scss b/resources/assets/stylesheets/scss/schedule.scss
index a09e3ad5c5c..c7491ecbe71 100644
--- a/resources/assets/stylesheets/scss/schedule.scss
+++ b/resources/assets/stylesheets/scss/schedule.scss
@@ -480,3 +480,11 @@ div.schedule_entry {
}
}
}
+
+
+.studip-widget {
+ #schedule {
+ margin: 10px;
+ width: unset;
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index cccfdb175c0..e8df176131b 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -42,21 +42,7 @@ label.inactive-settings-category {
}
article {
- border: 1px solid var(--content-color-40);
- margin-bottom: 8px;
- margin-top: 8px;
-
> header {
- background-color: var(--content-color-20);
- color: var(--base-color);
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
-
- font-weight: bold;
- padding: 3px;
-
div.search-category {
flex: auto;
}
diff --git a/resources/assets/stylesheets/scss/selects.scss b/resources/assets/stylesheets/scss/selects.scss
index 19ae4f9693b..45cd6c1df0d 100644
--- a/resources/assets/stylesheets/scss/selects.scss
+++ b/resources/assets/stylesheets/scss/selects.scss
@@ -203,3 +203,10 @@ select {
font-weight: bold;
}
}
+
+.groupactions {
+ select:not([multiple]):not([size]) {
+ vertical-align: middle;
+ height: 40px;
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/start.scss b/resources/assets/stylesheets/scss/start.scss
index bd590564e1c..f052f26de6e 100644
--- a/resources/assets/stylesheets/scss/start.scss
+++ b/resources/assets/stylesheets/scss/start.scss
@@ -17,17 +17,16 @@
}
.studip-widget {
- border: 1px solid var(--base-color-20);
+ border: 1px solid var(--color--content-box-border);
transition: border-color var(--transition-duration) ease-in-out;
.widget-header {
box-sizing: border-box;
- background-color: var(--content-color-20);
- color: var(--brand-color-dark);
- font-size: 1.1em;
- font-weight: bold;
- line-height: 2em;
- padding: 0 1ex;
+ background-color: var(--color--content-box-header);
+ color: var(--color--font-primary);
+ font-size: $font-size-widget-header;
+ line-height: 20px;
+ padding: 10px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
@@ -36,6 +35,10 @@
.header-options {
float: right;
white-space: nowrap;
+
+ img {
+ vertical-align: middle;
+ }
}
section.contentbox {
@@ -103,11 +106,12 @@ div.start-widgetcontainer {
> ul {
box-sizing: border-box;
display: inline-block;
-
+ border: solid thin transparent;
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: top;
+
&:first-child {
flex-grow: 2;
max-width: 65%;
diff --git a/resources/assets/stylesheets/scss/statusgroups.scss b/resources/assets/stylesheets/scss/statusgroups.scss
index f5bfaee6a3b..de4e8e6305f 100644
--- a/resources/assets/stylesheets/scss/statusgroups.scss
+++ b/resources/assets/stylesheets/scss/statusgroups.scss
@@ -11,7 +11,8 @@ section.course-statusgroups {
}
img {
- vertical-align: bottom;
+ vertical-align: middle;
+ margin-bottom: 2px;
}
}
@@ -19,20 +20,11 @@ section.course-statusgroups {
}
section {
- border-left: 1px solid var(--content-color-20);
- border-right: 1px solid var(--content-color-20);
-
table {
td.memberactions {
text-align: right;
}
- thead {
- tr th {
- background-color: var(--content-color-20);
- }
- }
-
tbody {
tr td {
span.member-invisible {
@@ -44,7 +36,6 @@ section.course-statusgroups {
tfoot {
tr td {
- background-color: var(--content-color-20);
padding-left: 5px;
padding-right: 0;
}
@@ -64,8 +55,7 @@ section.course-statusgroups {
}
footer {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--black);
+ background-color: var(--color--table-header);
font-size: medium;
padding: 5px 5px 5px 18px;
text-align: left;
diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss
index ec3049d3211..b361a9033fd 100644
--- a/resources/assets/stylesheets/scss/table_of_contents.scss
+++ b/resources/assets/stylesheets/scss/table_of_contents.scss
@@ -179,11 +179,10 @@ section > .toc {
}
#wikifooter {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--brand-color-darker);
+ background-color: var(--color--table-header);
+ border-top: 1px solid var(--color--table-border);
clear: both;
padding: 0;
- height: 58px;
}
#toc_bc_nav {
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 665a6f36fe4..094a0d6b568 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -1,18 +1,18 @@
/* --- Tabellen ------------------------------------------------------------- */
table.header, .table_header { //normale Tabellenheader
background-color: var(--table-header-color);
- border-bottom: 1px solid var(--dark-gray-color-80);
+ border-bottom: 1px solid var(--color--table-border);
color: var(--black);
padding: 4px;
}
.table_header_bold { //formerly known as topic(-header)
- background-color: var(--brand-color-lighter);
- border-color: var(--brand-color-darker);
+ background-color: var(--color--table-header);
+ border-color: var(--color--table-border);
border-style: solid;
border-width: 0 0 1px 0;
- color: var(--white);
+ color: var(--color--font-inverted);
font-size: 12pt;
padding: 3px 5px;
@@ -29,7 +29,7 @@ table.header, .table_header { //normale Tabellenheader
@include vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
}
- border-top: 1px solid var(--brand-color-lighter);
+ border-top: 1px solid var(--color--table-border);
line-height: 17pt;
height: 25px;
@@ -78,7 +78,7 @@ table.blank,
td.blank,
td.onlineinfo,
td.blanksmall {
- background-color: var(--white);
+ background-color: var(--color--global-background);
}
td.tree-indent {
@@ -222,11 +222,11 @@ td.tree-elbow-line, td.tree-elbow-end {
}
.grey {
- background: var(--dark-gray-color-40) none;
+ background: var(--color--table-header) none;
}
.white {
- background: var(--white) none;
+ background: var(--color--global-background) none;
}
.red_gradient {
@@ -250,13 +250,13 @@ table {
td.printhead2 {
background-image: url("#{$image-path}/content_object_arr-right.png");
- border-top: 1px solid var(--brand-color-lighter);
+ border-top: 1px solid var(--color--table-border);
padding: 0;
}
td.printhead3 {
background-image: url("#{$image-path}/content_object_arr-down.png");
- border-top: 1px solid var(--brand-color-lighter);
+ border-top: 1px solid var(--color--table-border);
padding: 0;
}
}
@@ -333,8 +333,8 @@ tr.sortable {
td:first-child[colspan], .divider > th, .divider > td {
background-color: lighten($brand-color-lighter, 20%);
- border-bottom: 1px solid var(--base-gray);
- border-top: 1px solid var(--base-gray);
+ border-bottom: 1px solid var(--color--table-border);
+ border-top: 1px solid var(--color--table-border);
color: var(--black);
font-weight: bold;
text-align: center;
@@ -386,11 +386,11 @@ tr.sortable {
.bordered {
&.left {
- border-left: 1px solid var(--brand-color-lighter);
+ border-left: 1px solid var(--color--table-border);
}
&.right {
- border-right: 1px solid var(--brand-color-lighter);
+ border-right: 1px solid var(--color--table-border);
}
}
}
@@ -419,22 +419,22 @@ table.tree {
}
td.blank {
- background: var(--white);
+ background: var(--color--global-background);
border: 0;
}
td.in-between {
- background: var(--white) url("#{$image-path}/tree-line.gif") center repeat-y;
+ background: var(--color--global-background) url("#{$image-path}/tree-line.gif") center repeat-y;
border: 0;
}
td.leaf {
- background: var(--white) url("#{$image-path}/tree-leaf.gif") center no-repeat;
+ background: var(--color--global-background) url("#{$image-path}/tree-leaf.gif") center no-repeat;
border: 0;
}
td.end {
- background: var(--white) url("#{$image-path}/tree-end.gif") center no-repeat;
+ background: var(--color--global-background) url("#{$image-path}/tree-end.gif") center no-repeat;
border: 0;
}
@@ -449,14 +449,14 @@ table.tree {
}
.table_footer, .table_footer td {
- background-color: var(--dark-gray-color-10);
- border-top: 1px solid var(--dark-gray-color-30);
+ background-color: var(--color--table-header);
+ border-top: 1px solid var(--color--table-border);
}
// New table definition
table.default {
border-collapse: collapse;
- margin-bottom: 1em;
+ margin-bottom: 2em;
width: 100%;
.wrap-content {
@@ -467,22 +467,33 @@ table.default {
font-size: 1.1em;
}
- th, td, caption {
+ th, td {
&.nowrap {
white-space: nowrap;
}
- padding: 5px;
+ padding: 10px 5px;
text-align: left;
+
+ &:first-child {
+ padding-left: 10px;
+ }
+ &:last-child {
+ padding-right: 10px;
+ }
}
> caption {
background-color: transparent;
- padding-top: 0;
+ padding: 0 5px 5px 5px;
color: var(--headings-color);
- font-size: 1.4em;
+ font-size: $font-size-caption;
text-align: left;
+ &.nowrap {
+ white-space: nowrap;
+ }
+
header {
> h2 {
border: 0;
@@ -503,9 +514,8 @@ table.default {
> thead {
> tr > th {
- background-color: var(--content-color-20);
- border-bottom: 1px solid fade-out($brand-color-lighter, 0.8);
- border-top: 1px solid var(--brand-color-darker);
+ background-color: var(--color--table-header);
+ border-bottom: 2px solid var(--color--global-background);
font-size: 1.0em;
}
}
@@ -513,25 +523,23 @@ table.default {
> tbody {
> tr {
> th {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--brand-color-darker);
- border-bottom: 1px solid fade-out($brand-color-lighter, 0.8);
+ background-color: var(--color--table-header);
text-align: left;
}
> td {
- border-bottom: 1px solid var(--table-header-color);
+ border-bottom: 1px solid var(--color--table-border);
transition: background-color 0.3s;
}
&.dragover > td {
- background-color: var(--yellow-20);
+ background-color: var(--color--table-header);
}
}
}
> tbody > tr.selected > td {
- background-color: var(--yellow-20);
+ background-color: var(--color--table-header);
&:first-child {
position: relative;
@@ -545,7 +553,7 @@ table.default {
bottom: 0;
left: 0;
width: 2px;
- background-color: var(--light-gray-color);
+ background-color: color--table-header;
}
}
}
@@ -575,24 +583,20 @@ table.default {
}
> tbody:last-of-type > tr:last-child > td {
- border-bottom: 1px solid var(--brand-color-darker);
+ border-bottom: 1px solid var(--color--table-border);
}
// Hover effect
&:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
- background-color: fade-out($light-gray-color, 0.8);
- }
-
- &:not(.nohover) > tbody:not(.nohover) > tr.selected:not(.nohover):hover > td:not(.nohover) {
- background-color: var(--yellow-40);
+ background-color: var(--color--table-header);
}
> tfoot {
> tr > td {
- background-color: var(--content-color-20);
- border-top: 1px solid var(--brand-color-darker);
- padding-left: 10px;
- padding-right: 10px;
+ background-color: var(--color--table-header);
+ border-top: 2px solid var(--color--global-background);
+ padding-top: 5px;
+ padding-bottom: 5px;
}
}
@@ -612,8 +616,8 @@ table.default {
> caption .actions {
font-size: $font-size-base;
- border-left: 1px solid var(--brand-color-darker);
- margin-bottom: -5px;
+ border-left: 1px solid var(--color--table-border);
+ margin-bottom: -2px;
min-height: 26px;
padding-bottom: 3px;
padding-left: 0.5em;
@@ -629,12 +633,16 @@ table.default {
display: flex;
align-items: stretch;
justify-content: space-between;
- margin-bottom: -5px;
+ margin-bottom: 5px;
+
+ img.text-bottom {
+ vertical-align: bottom;
+ }
}
.caption-content {
flex-grow: 1;
- border-right: 1px solid var(--brand-color-darker);
+ border-right: 1px solid var(--color--table-border);
padding-bottom: 5px;
padding-right: 0.5em;
margin-right: 0.5em;
@@ -702,6 +710,7 @@ table.default {
// Fix button and select alignment
select {
vertical-align: middle;
+ min-width: 24em;
}
// Adjust button margins
@@ -742,7 +751,7 @@ table.withdetails {
}
> tbody > tr.open > td {
- background-color: fade-out($light-gray-color, 0.8);
+ background-color: var(--color--table-header);
}
> tbody > tr.open > td:first-child {
@@ -769,9 +778,9 @@ table.withdetails {
> .detailscontainer {
padding: 5px;
- border: 1px solid var(--table-header-color);
+ border: 1px solid var(--color--table-border);
margin-top: -1px;
- border-top-color: var(--white);
+ border-top-color: var(--color--global-background);
}
}
}
@@ -840,7 +849,7 @@ table#schedule_data {
td {
text-align: center;
vertical-align: top;
- background-color: var(--content-color-20);
+ background-color: var(--color--table-header);
padding: 0;
&:first-child {
@@ -860,7 +869,7 @@ table#schedule_data {
td:first-child {
text-align: right;
vertical-align: top;
- background-color: var(--content-color-20);
+ background-color: var(--color--table-header);
padding: 0px;
}
}
@@ -876,14 +885,14 @@ table.course-search {
$max-width-s: 8em;
$max-width-m: 48em;
$max-width-l: 100%;
- border: 1px solid var(--content-color-40);
+ border: 1px solid var(--color--table-border);
padding: 0;
border-top: 0;
caption.legend {
box-sizing: border-box;
background-color: $fieldset-header;
- border: 1px solid var(--content-color-40);
+ border: 1px solid var(--color--table-border);
border-bottom: 0;
color: var(--brand-color-dark);
font-size: 12pt;
@@ -901,7 +910,7 @@ table.show-tree {
padding: 0 10px 10px 10px;
td.b-top-va-center {
- border-top: 1px solid var(--content-color-40);
+ border-top: 1px solid var(--color--table-border);
padding-top: 10px;
vertical-align: middle;
}
diff --git a/resources/assets/stylesheets/scss/typography.scss b/resources/assets/stylesheets/scss/typography.scss
index e0ae8657a5f..eaef03570a1 100644
--- a/resources/assets/stylesheets/scss/typography.scss
+++ b/resources/assets/stylesheets/scss/typography.scss
@@ -50,7 +50,7 @@ h3 {
h4,
h5,
-h6, {
+h6 {
margin-top: calc($line-height-computed / 2);
margin-bottom: calc($line-height-computed / 2);
}
@@ -62,15 +62,6 @@ h4 { font-size: $font-size-h4; }
h5 { font-size: $font-size-h5; }
h6 { font-size: $font-size-h6; }
-
-// Headings with borders
-// -------------------------
-
-h1, h2 {
- font-size: 1.3em;
-}
-
-
// Body text
// -------------------------
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index ca0fd9b5dad..5df903d6090 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -7,16 +7,20 @@ $text-color: #000;
$font-family-base: "Lato", sans-serif;
$font-size-base: 14px;
-$font-size-large: ceil($font-size-base * 1.25); // ~18px
-$font-size-small: ceil($font-size-base * 0.85); // ~12px
+$font-size-large: ceil($font-size-base * 1.25); // 18px
+$font-size-small: ceil($font-size-base * 0.85); // 12px
-$font-size-h1: floor($font-size-base * 1.4); // ~36px
-$font-size-h2: floor($font-size-base * 1.2); // ~30px
-$font-size-h3: ceil($font-size-base * 1.1); // ~24px
-$font-size-h4: $font-size-base; // ~18px
+$font-size-h1: floor($font-size-base * 1.6); // 22px
+$font-size-h2: ceil($font-size-base * 1.4); // 20px
+$font-size-h3: ceil($font-size-base * 1.1); // 16px
+$font-size-h4: $font-size-base;
$font-size-h5: $font-size-base;
$font-size-h6: $font-size-base;
+
+$font-size-widget-header: $font-size-large;
+$font-size-caption: $font-size-h1;
+
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@@ -148,8 +152,8 @@ $grid-gap: 0;
#{"--"}red-40: $red-40;
#{"--"}red-60: $red-60;
#{"--"}red-80: $red-80;
- #{"--"}table-footer-color: $table-footer-color;
- #{"--"}table-header-color: $table-header-color;
+ #{"--"}table-footer-color: $color--table-header;
+ #{"--"}table-header-color: $color--table-header;
#{"--"}violet: $violet;
#{"--"}violet-20: $violet-20;
#{"--"}violet-40: $violet-40;
@@ -224,6 +228,7 @@ $grid-gap: 0;
#{"--"}color--tile-background-hover: $color--tile-background-hover;
#{"--"}color--content-box-border: $color--content-box-border;
+ #{"--"}color--content-box-header: $color--content-box-header;
#{"--"}color--content-box-background: $color--content-box-background;
#{"--"}color--table-header: $color--table-header;
@@ -235,6 +240,8 @@ $grid-gap: 0;
#{"--"}color--button-border: $color--button-border;
#{"--"}color--button-focus: $color--button-focus;
#{"--"}color--button-hover: $color--button-hover;
+ #{"--"}color--button-inactive-background: $color--button-inactive-background;
+ #{"--"}color--button-inactive-border: $color--button-inactive-border;
#{"--"}color--input-field-border: $color--input-field-border;
#{"--"}color--input-field-background: $color--input-field-background;
diff --git a/resources/vue/components/StudipFileChooser.vue b/resources/vue/components/StudipFileChooser.vue
index 798d6463396..deb8aabe9e7 100644
--- a/resources/vue/components/StudipFileChooser.vue
+++ b/resources/vue/components/StudipFileChooser.vue
@@ -128,6 +128,7 @@ export default {
max-width: 48em;
button {
margin: 0.5ex 0 0.5ex 0;
+ padding: 5px 15px;
width: 150px;
}
span {
diff --git a/resources/vue/components/StudipWizardDialog.vue b/resources/vue/components/StudipWizardDialog.vue
index e75c1cafac3..073c25f9fd3 100644
--- a/resources/vue/components/StudipWizardDialog.vue
+++ b/resources/vue/components/StudipWizardDialog.vue
@@ -126,7 +126,7 @@ export default {
},
height: {
type: String,
- default: '640'
+ default: '660'
},
width: {
type: String,
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
index 278a5180581..922b8c6ada3 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
@@ -40,7 +40,7 @@
v-for="category in blockCategories"
:key="category.type"
class="button"
- :class="{ 'button-active': category.type === currentFilterCategory }"
+ :class="{ 'active': category.type === currentFilterCategory }"
:aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'"
@click="selectCategory(category.type)"
>
diff --git a/templates/start/contents.php b/templates/start/contents.php
index 2e4490be353..bb5697fd836 100644
--- a/templates/start/contents.php
+++ b/templates/start/contents.php
@@ -1,7 +1,4 @@
<div class="contents-widget">
- <p>
- <?= _('Erstellen und finden Sie persönliche Materialien zum Teilen mit anderen.') ?>
- </p>
<ul class="content-items">
<? foreach ($tiles as $key => $navigation): ?>
<? if ($navigation->isVisible() && $key !== 'overview'): ?>
--
GitLab