Skip to content
Snippets Groups Projects
Commit 6ca4936e authored by Jan-Hendrik Willms's avatar Jan-Hendrik Willms
Browse files

convert color variables to css variables, fixes #2125

Closes #2125

Merge request studip/studip!1634
parent 6e9d6257
No related branches found
No related tags found
No related merge requests found
Showing
with 301 additions and 311 deletions
......@@ -35,8 +35,8 @@ a.fc-event, td.fc-event {
.fc button.fc-button.fc-state-active {
box-shadow: none;
background-color: $base-color !important;
color: $white;
background-color: var(--base-color) !important;
color: var(--white);
}
/* adjust height: */
......@@ -48,7 +48,7 @@ a.fc-event, td.fc-event {
.studip-fullcalendar-header {
/* This shall look like a table caption. */
background-color: transparent;
color: $base-gray;
color: var(--base-gray);
font-size: 1.4em;
text-align: left;
......@@ -75,15 +75,15 @@ a.fc-event, td.fc-event {
.fullcalendar-dialogwidget-widget {
background: $white;
border: 1px solid $content-color-40;
background: var(--white);
border: 1px solid var(--content-color-40);
margin: 15px 0px 0;
}
.fullcalendar-dialogwidget-widget-header {
@include clearfix();
background: $content-color-20;
color: $base-color;
background: var(--content-color-20);
color: var(--base-color);
font-weight: bold;
padding: 4px;
}
......@@ -94,7 +94,7 @@ a.fc-event, td.fc-event {
}
.fullcalendar-dialogwidget-widget-content {
border-top: 1px solid $content-color-40;
border-top: 1px solid var(--content-color-40);
padding: 4px;
transition: all 0.5s;
}
......@@ -108,8 +108,8 @@ a.fc-event, td.fc-event {
td.fc-event {
border-radius: 0;
margin: 2px 0px;
background-color: $content-color;
border: 1px solid $brand-color-light;
background-color: var(--content-color);
border: 1px solid var(--brand-color-light);
}
}
......@@ -119,14 +119,14 @@ a.fc-event, td.fc-event {
}
th.fc-day-header, .fc-axis, th.fc-resource-cell {
background-color: $content-color-10;
background-color: var(--content-color-10);
}
}
.calendar-caption {
background-color: transparent;
padding-top: 0;
color: $base-gray;
color: var(--base-gray);
font-size: 1.4em;
text-align: left;
margin-bottom: -10px;
......@@ -200,7 +200,7 @@ a.fc-event, td.fc-event {
display: none;
}
th span a {
color: $black;
color: var(--black);
}
td.fc-today {
......
......@@ -1049,8 +1049,8 @@ a:hover.tree {
/* Text formatting */
.cke_button_on {
background-color: $base-color !important;
border: 1px solid $white;
background-color: var(--base-color) !important;
border: 1px solid var(--white);
.cke_button_icon {
filter: brightness(10) !important;
......@@ -1060,8 +1060,8 @@ a:hover.tree {
/* Blubber */
.blubber_thread,
.blubber_sideinfo {
background-color: $white;
border: 2px solid $black;
background-color: var(--white);
border: 2px solid var(--black);
}
.blubber_thread .empty_blubber_background {
......@@ -1214,14 +1214,14 @@ table.course-search {
padding-top: -2px;
.content-item-title {
color: $base-color;
color: var(--base-color);
}
}
}
&:hover {
background-color: $black;
background-color: var(--black);
color: unset;
.content-item-img-wrapper > img {
......@@ -1370,12 +1370,12 @@ table.course-search {
/* Everything else */
/* Selections */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: $base-color;
background-color: var(--base-color);
}
/* tile view Veranstaltungen */
.tiles-grid-element-header {
background-color: $white !important;
background-color: var(--white) !important;
}
.tiles-grid-element-options .action-menu-icon {
......@@ -1384,12 +1384,12 @@ table.course-search {
/* Veranstaltungskategorien */
fieldset.attribute_table div[container] > div.droparea > div.plugin {
border: 1px solid $black;
background-color: $white;
border: 1px solid var(--black);
background-color: var(--white);
}
.helpbar {
background-color: $black;
background-color: var(--black);
}
.fc-unthemed td {
......
/* Stud.IP button styles */
.button() {
background: white;
border: 1px solid @base-color;
border: 1px solid var(--base-color);
border-radius: 0;
box-sizing: border-box;
color: @base-color;
color: var(--base-color);
cursor: pointer;
display: inline-block;
font-family: @font-family-base;
......@@ -22,18 +22,18 @@
width: auto;
&:hover, &:active {
background: @base-color;
background: var(--base-color);
color: white;
}
&.disabled, &[disabled] {
box-shadow: none;
background: @light-gray-color-20;
background: var(--light-gray-color-20);
cursor: default;
opacity: 0.65;
&:hover {
color: @base-color;
color: var(--base-color);
}
}
......@@ -148,13 +148,13 @@ button,
cursor: pointer;
&[formaction] {
color: @base-color;
color: var(--base-color);
transition: color 0.3s;
&:hover,
&:active {
color: @active-color;
color: var(--active-color);
text-decoration: none;
}
......
......@@ -6,27 +6,27 @@ a.day {
}
a.sday {
color: @red;
color: var(--red);
font-weight: bold;
}
a.hday {
color: @red-80;
color: var(--red-80);
font-weight: bold;
}
span.kwmin {
color: @dark-gray-color-80;
color: var(--dark-gray-color-80);
font-weight: bold;
}
a.lightday {
color: @base-color-40;
color: var(--base-color-40);
font-weight: bold;
}
a.lightsday {
color: @red-40;
color: var(--red-40);
font-weight: bold;
}
......@@ -37,7 +37,7 @@ a.lightsday {
.precol1w {
font-size: 12pt;
font-weight: bold;
color: @light-gray-color;
color: var(--light-gray-color);
text-align: center;
vertical-align: top;
}
......@@ -45,31 +45,31 @@ a.lightsday {
.precol2w {
font-size: 8pt;
font-weight: bold;
color: @light-gray-color;
color: var(--light-gray-color);
text-align: center;
}
td.calhead, div.calhead {
font-size: 18pt;
font-weight: bold;
color: @light-gray-color;
color: var(--light-gray-color);
text-align: center;
}
a:link.calhead {
color: @base-color-60;
color: var(--base-color-60);
white-space: nowrap;
font-weight: bold;
}
a:hover.calhead {
color: @red-60;
color: var(--red-60);
}
.calhead label {
cursor: pointer;
&:hover {
color: @base-color-40;
color: var(--base-color-40);
}
.media-breakpoint-small-down({
......@@ -83,20 +83,20 @@ a:hover.calhead {
}
.celltoday {
background-color: @red-20;
background-color: var(--red-20);
}
td.weekend {
background-color: @dark-gray-color-15;
background-color: var(--dark-gray-color-15);
}
td.weekday {
background-color: @dark-gray-color-5;
background-color: var(--dark-gray-color-5);
}
td.current {
padding: 2px;
border: 2px solid @red;
border: 2px solid var(--red);
}
table.calendar-week, table.calendar-day {
......@@ -159,7 +159,7 @@ nav.calendar-nav {
}
.calhead {
color: @base-color;
color: var(--base-color);
}
}
......@@ -175,7 +175,7 @@ nav.calendar-nav {
}
& td {
padding: 3px;
border-bottom: 1px solid @dark-gray-color-5;
border-bottom: 1px solid var(--dark-gray-color-5);
}
}
......@@ -183,14 +183,14 @@ nav.calendar-nav {
overflow: hidden;
text-overflow: ellipsis;
a {
color: @dark-gray-color;
color: var(--dark-gray-color);
}
}
.calendar-category-mixin(@color-bg) {
vertical-align: top;
font-size: 11px;
color: @white;
color: var(--white);
padding: 0;
/* necessary for All-day Events */
a {
......@@ -511,8 +511,8 @@ a.Calendar-course-event-text255 {
}
.calendar-group-events {
background: linear-gradient(to right, #8E8EB2, #BABAD4) repeat-x #8E8EB2;
border: solid 1px #505064;
background: linear-gradient(to right, var(--base-color-60), var(--content-color-60)) repeat-x var(--base-color-60);
border: solid 1px var(--base-gray);
}
#exc-dates {
......@@ -522,7 +522,7 @@ a.Calendar-course-event-text255 {
min-height: 5em;
max-height: 10em;
overflow: auto;
border: 1px solid #888;
border: 1px solid var(--dark-gray-color-60);
img {
vertical-align: text-top;
......@@ -539,18 +539,18 @@ table.tabdaterow {
}
td.tddaterowp {
border: 1px solid #FFFFFF;
background-color: #f0f0f0;
border: 1px solid var(--white);
background-color: var(--dark-gray-color-10);
font-weight: bold;
color: #009900;
color: var(--dark-green);
font-size: 8pt;
}
td.tddaterowpx {
border: 1px solid #D00000;
background-color: #f0f0f0;
border: 1px solid var(--active-color);
background-color: var(--dark-gray-color-10);
font-weight: bold;
color: #009900;
color: var(--dark-green);
font-size: 8pt;
}
......
......@@ -27,7 +27,7 @@
}
&.uploadbar-outer {
border: @base-color solid 1px;
border: var(--base-color) solid 1px;
}
&.uploadbar-inner {
position: absolute;
......@@ -35,7 +35,7 @@
right: 100%;
bottom: 0;
left: 0;
background-color: @base-color;
background-color: var(--base-color);
overflow: hidden;
white-space: nowrap;
......@@ -45,9 +45,9 @@
transition: right 200ms;
img {
background-color: @base-color;
background-color: var(--base-color);
flex: 0;
outline: 10px solid @base-color;
outline: 10px solid var(--base-color);
}
.ufo {
animation: ufoflight 1.5s linear infinite;
......@@ -69,14 +69,6 @@
color: (#fff - @base-color);
font-size: large;
//text-shadow: 0 1px 0 @base-color,
// 1px 1px 0 @base-color,
// 1px 0 0 @base-color,
// 1px -1px 0 @base-color,
// 0 -1px 0 @base-color,
// -1px 1px 0 @base-color,
// 0 1px 0 @base-color,
// -1px -1px 0 @base-color;
}
}
......@@ -112,7 +104,7 @@ div.file_select_possibilities, .folder_type_select_possibilities {
cursor: pointer;
background-color: transparent;
margin: 10px;
border: thin solid @content-color-20;
border: thin solid var(--content-color-20);
padding: 10px;
width: @width;
min-width: @width;
......@@ -134,8 +126,8 @@ div.file_select_possibilities, .folder_type_select_possibilities {
> .important-item {
min-width: calc(100% - 1.5em);
background-color: #E7EBF1;
border-color: @base-color-60;
background-color: var(--content-color-20);
border-color: var(--base-color-60);
display: flex;
flex-direction: row;
height: initial;
......@@ -149,7 +141,7 @@ div.file_select_possibilities, .folder_type_select_possibilities {
width: 100%;
text-align: left;
margin-left: 1em;
color: @black;
color: var(--black);
}
}
}
......@@ -200,8 +192,8 @@ div.file_select_possibilities, .folder_type_select_possibilities {
input[name=content_terms_of_use_id]:checked + label,
input[name=oer_upload]:checked + label {
background-color: @brand-color-darker;
color: @contrast-content-white;
background-color: var(--brand-color-darker);
color: var(--contrast-content-white);
img {
filter: invert(100%) brightness(200%);
......@@ -216,8 +208,8 @@ div.file_select_possibilities, .folder_type_select_possibilities {
}
input[name=folder_type]:checked + label {
background-color: @brand-color-darker;
color: @contrast-content-white;
background-color: var(--brand-color-darker);
color: var(--contrast-content-white);
img {
filter: invert(100%) brightness(200%);
......@@ -428,7 +420,7 @@ form.default {
}
> label {
cursor: pointer;
border: 1px solid @content-color-40;
border: 1px solid var(--content-color-40);
transition: background-color 200ms;
display: flex;
justify-content: space-between;
......@@ -449,17 +441,17 @@ form.default {
}
}
> label:first-of-type {
border-top: 1px solid @content-color-40;
border-top: 1px solid var(--content-color-40);
}
> div {
border: 1px solid @content-color-40;
border: 1px solid var(--content-color-40);
border-top: none;
display: none;
padding: 10px;
}
> input[type=radio]:checked + label {
background-color: @content-color-20;
background-color: var(--content-color-20);
transition: background-color 200ms;
> .arrow {
display: none;
......@@ -490,7 +482,7 @@ form.default {
table.documents {
tr:target {
background-color: @activity-color-20;
background-color: var(--activity-color-20);
}
}
......@@ -500,7 +492,7 @@ table.documents {
h2.search-result-info {
font-weight: normal;
font-size: 1.4em;
color: @base-gray;
color: var(--base-gray);
border-bottom: none;
margin-top: 0;
}
......@@ -20,11 +20,11 @@
}
.ui-widget-content {
background: #fff;
background: var(--white);
}
.ui-widget-header {
background-color: @brand-color-lighter;
background-color: var(--brand-color-lighter);
background-image: none;
}
.ui-widget_columnl {
......@@ -42,7 +42,7 @@
}
.ui-widget_head {
background-color: @brand-color-lighter;
background-color: var(--brand-color-lighter);
color: white;
font-size: 1.3em;
line-height: 30px;
......@@ -80,7 +80,7 @@
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background-color: @brand-color-light;
background-color: var(--brand-color-light);
color: white;
}
......@@ -89,12 +89,12 @@
.ui-state-default,
.ui-state-active,
.ui-state-hover {
background: @content-color-20;
background: var(--content-color-20);
border-radius: 0;
border: none;
border-top: 1px solid @light-gray-color-20;
border-bottom: 1px solid @light-gray-color-20;
color: #000;
border-top: 1px solid var(--light-gray-color-20);
border-bottom: 1px solid var(--light-gray-color-20);
color: var(--black);
font-size: 10pt;
margin: 0;
padding: 5px 5px 5px 30px;
......@@ -103,11 +103,11 @@
}
.ui-accordion .ui-accordion-content {
background: #ffffff;
background: var(--white);
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid @light-gray-color-20;
border-bottom: 1px solid var(--light-gray-color-20);
}
.ui-state-hover, .ui-widget-content .ui-state-hover,
......@@ -117,7 +117,7 @@
}
.ui-autocomplete {
border: 1px solid @dark-gray-color-45;
border: 1px solid var(--dark-gray-color-45);
padding: 1px;
.ui-menu-item {
......@@ -127,7 +127,7 @@
text-overflow: ellipsis;
&.ui-state-active {
background: @base-color;
background: var(--base-color);
border: 0;
margin: 0;
}
......@@ -146,7 +146,7 @@
/* --- textarea resizer ----------------------------------------------------- */
textarea.ui-resizable-handle.ui-resizable-s {
background: #eee url("@{image-path}/vendor/handle_background.png") no-repeat center;
background: var(--dark-gray-color-10) url("@{image-path}/vendor/handle_background.png") no-repeat center;
bottom: 0;
cursor: s-resize;
height: 12px;
......@@ -154,7 +154,7 @@ textarea.ui-resizable-handle.ui-resizable-s {
// Date picker
.ui-datepicker-header {
background-color: @brand-color-light;
background-color: var(--brand-color-light);
}
.ui-datepicker-header .ui-icon {
......@@ -162,14 +162,14 @@ textarea.ui-resizable-handle.ui-resizable-s {
}
.ui-datepicker-calendar .ui-state-active {
background-color: @white;
color: @brand-color-darker;
border: 1px solid @base-gray;
background-color: var(--white);
color: var(--brand-color-darker);
border: 1px solid var(--base-gray);
}
.ui-datepicker-calendar .ui-state-active.ui-state-hover {
background-color: @brand-color-light;
color: @white;
background-color: var(--brand-color-light);
color: var(--white);
}
.hasDatepicker,
......@@ -181,9 +181,9 @@ textarea.ui-resizable-handle.ui-resizable-s {
background-position: right 3px center;
background-repeat: no-repeat;
min-width: 12ex;
border: 1px solid @light-gray-color-40;
border: 1px solid var(--light-gray-color-40);
&:focus {
border-color: @brand-color-dark;
border-color: var(--brand-color-dark);
}
}
.hasTimepicker,
......@@ -193,9 +193,9 @@ textarea.ui-resizable-handle.ui-resizable-s {
background-position: right 3px center;
background-repeat: no-repeat;
min-width: 10ex;
border: 1px solid @light-gray-color-40;
border: 1px solid var(--light-gray-color-40);
&:focus {
border-color: @brand-color-dark;
border-color: var(--brand-color-dark);
}
}
[data-datetime-picker],
......@@ -205,6 +205,6 @@ textarea.ui-resizable-handle.ui-resizable-s {
.ui-slider {
.ui-slider-range {
background-color: @base-color;
background-color: var(--base-color);
}
}
......@@ -72,11 +72,11 @@ div.messagebox_details {
}
}
.messagebox(info, #000, white, @base-color);
.messagebox(success, #000, white, @dark-green);
.messagebox(error, #000, white, @red);
.messagebox(exception, @red, @red-20, @red);
.messagebox(warning, #000, white, @yellow-60, 'advice');
.messagebox(info, var(--black), var(--white), var(--base-color));
.messagebox(success, var(--black), var(--white), var(--dark-green));
.messagebox(error, var(--black), var(--white), var(--red));
.messagebox(exception, var(--red), var(--red-20), var(--red));
.messagebox(warning, var(--black), var(--white), var(--yellow-60), 'advice');
// Define modal messagebox
.modaloverlay {
......@@ -109,7 +109,7 @@ div.messagebox_details {
width: auto;
color: #000;
border-color: @yellow;
border-color: var(--yellow);
background-color: white;
background-image: url("@{image-path}/messagebox/question.png");
background-size: 32px 32px;
......
/* --- ablaufplan / dates --------------------------------------------------- */
.dates_items th, .dates_items td {
border-bottom: 3px solid @white;
border-bottom: 3px solid var(--white);
}
.dates_opened td {
border-bottom: 3px solid #f3f5f8;
border-bottom: 3px solid var(--content-color-10);
}
.dates_content td {
......@@ -18,27 +18,27 @@
#schedule_headings {
margin-left: 41px;
background-color: #e8eef7;
background-color: var(--content-color-20);
}
table.schedule_headings td {
background-color: #e8eef7;
background-color: var(--content-color-20);
}
div.schedule_day {
border-right: 3px double #ddd;
border-right: 3px double var(--dark-gray-color-20);
position: relative;
}
div.schedule_marker {
border-bottom: 1px dotted #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px dotted var(--dark-gray-color-20);
border-top: 1px solid var(--dark-gray-color-20);
padding: 0;
}
div.schedule_hours {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid var(--dark-gray-color-20);
border-right: 1px solid var(--dark-gray-color-20);
color: black;
padding-bottom: 1px;
padding-right: 3px;
......@@ -93,8 +93,8 @@ div.snatch {
}
#schedule_new_entry {
background-color: #e8eef7;
border: 2px solid #e0e0f0;
background-color: var(--content-color-20);
border: 2px solid var(--dark-gray-color-15);
height: 230px;
position: absolute;
width: 400px;
......@@ -102,15 +102,15 @@ div.snatch {
}
#schedule_entry_new {
dl {
border: 1px solid #5c2d64;
background-color: #7c5783;
border: 1px solid var(--dark-violet);
background-color: var(--dark-violet-80);
}
dt { background-color: #5c2d64; }
dt { background-color: var(--dark-violet); }
}
div.schedule_edit_entry, #schedule_settings {
background-color: #E8EEF7;
border: 2px solid #E0E0F0;
background-color: var(--content-color-20);
border: 2px solid var(--dark-gray-color-15);
height: auto;
left: 50%;
margin-left: -25%;
......@@ -150,7 +150,7 @@ div.invisible_entry {
}
span.invisible_entry {
background-color: #600;
background-color: var(--red);
font-style: italic;
}
......@@ -200,7 +200,7 @@ td.schedule-adminbind {
display: none;
&:checked + label {
outline: 1px solid @black;
outline: 1px solid var(--black);
position: relative;
.icon('before', 'accept', 'info', 24px);
......@@ -209,13 +209,13 @@ td.schedule-adminbind {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 2px @white);
filter: drop-shadow(0 0 2px var(--white));
}
}
}
label {
border: 1px solid @white;
border: 1px solid var(--white);
display: inline-block;
height: 32px;
width: 32px;
......
/* --- Tabellen ------------------------------------------------------------- */
table.header, .table_header { //normale Tabellenheader
background-color: @table-header-color;
border-bottom: 1px solid #575757;
color: #000;
background-color: var(--table-header-color);
border-bottom: 1px solid var(--dark-gray-color-80);
color: var(--black);
padding: 4px;
}
.table_header_bold { //formerly known as topic(-header)
background-color: @brand-color-lighter;
border-color: @brand-color-darker;
background-color: var(--brand-color-lighter);
border-color: var(--brand-color-darker);
border-style: solid;
border-width: 0 0 1px 0;
color: @white;
color: var(--white);
font-size: 12pt;
padding: 3px 5px;
......@@ -20,7 +20,7 @@ table.header, .table_header { //normale Tabellenheader
}
table.links1 { background-color: @white; }
table.links1 { background-color: var(--white); }
table.logintable {
background-image: url("@{image-path}/login.jpg");
background-size: 750px 350px;
......@@ -33,7 +33,7 @@ table.logintable {
.gradient-bar(@flow-content: true) {
#gradient > .vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
border-top: 1px solid @brand-color-lighter;
border-top: 1px solid var(--brand-color-lighter);
line-height: 17pt;
height: 25px;
}
......@@ -54,36 +54,36 @@ td.toolbar, td.printhead {
}
td {
&.aufklapp { background-color: #fffaee; }
&.angemeldet { border: 1px solid #000; }
&.aufklapp { background-color: var(--dark-gray-color-5); }
&.angemeldet { border: 1px solid var(--black); }
&.nix { background-color: transparent; }
&.quote {
border: 1px solid #000;
border: 1px solid var(--black);
font-size: 8px;
}
&.rahmen_steel {
background-color: #f3f5f8;
border: 1px solid #000;
background-color: var(--content-color-10);
border: 1px solid var(--black);
}
&.rahmen_table_row_odd {
background-color: @content-color-20;
border: 1px solid #000;
background-color: var(--content-color-20);
border: 1px solid var(--black);
}
&.rahmen_white {
background: #fff;
border: 1px solid #000;
background: var(--white);
border: 1px solid var(--black);
}
&.table_header_bold_red {
border: none;
background-color: #fdc6c6;
border-bottom: 1px solid #990000;
color: #000;
background-color: var(--red-20);
border-bottom: 1px solid var(--red);
color: var(--red);
height: 20px;
}
}
table.blank, td.blank, td.onlineinfo, td.blanksmall {
background-color: #fff;
background-color: var(--white);
}
td.tree-indent {
......@@ -120,13 +120,13 @@ td.tree-elbow-line, td.tree-elbow-end {
}
.toggle-indicator {
color: #000;
color: var(--black);
font-weight: bold;
a {
background: left center no-repeat;
.background-icon('arr_1down', 'clickable');
color: #000;
color: var(--black);
cursor: pointer;
display: block;
}
......@@ -162,15 +162,15 @@ td.tree-elbow-line, td.tree-elbow-end {
}
/* --- Sonstige ------------------------------------------------------------- */
.gruppe0 { background-color: @group-color-0 !important; }
.gruppe1 { background-color: @group-color-1 !important; }
.gruppe2 { background-color: @group-color-2 !important; }
.gruppe3 { background-color: @group-color-3 !important; }
.gruppe4 { background-color: @group-color-4 !important; }
.gruppe5 { background-color: @group-color-5 !important; }
.gruppe6 { background-color: @group-color-6 !important; }
.gruppe7 { background-color: @group-color-7 !important; }
.gruppe8 { background-color: @group-color-8 !important; }
.gruppe0 { background-color: var(--group-color-0) !important; }
.gruppe1 { background-color: var(--group-color-1) !important; }
.gruppe2 { background-color: var(--group-color-2) !important; }
.gruppe3 { background-color: var(--group-color-3) !important; }
.gruppe4 { background-color: var(--group-color-4) !important; }
.gruppe5 { background-color: var(--group-color-5) !important; }
.gruppe6 { background-color: var(--group-color-6) !important; }
.gruppe7 { background-color: var(--group-color-7) !important; }
.gruppe8 { background-color: var(--group-color-8) !important; }
#my_seminars, #settings-notifications {
.gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
......@@ -185,31 +185,31 @@ td.tree-elbow-line, td.tree-elbow-end {
}
}
.grey { background: #bbb none; }
.white { background: #fff none; }
.grey { background: var(--dark-gray-color-40) none; }
.white { background: var(--white) none; }
.red_gradient {
#gradient > .vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9);
border-top: 2px solid #b35357;
border-top: 2px solid var(--brown);
}
/* --- Styles fuer printhead und printcontent ------------------------------- */
table {
td.printcontent {
background-color: @dark-gray-color-5;
background-color: var(--dark-gray-color-5);
text-align: left;
}
td.printcontent:hover {
background-color: @dark-gray-color-5;
background-color: var(--dark-gray-color-5);
}
td.printhead2 {
background-image: url("@{image-path}/content_object_arr-right.png");
border-top: 1px solid @brand-color-lighter;
border-top: 1px solid var(--brand-color-lighter);
padding: 0;
}
td.printhead3 {
background-image: url("@{image-path}/content_object_arr-down.png");
border-top: 1px solid @brand-color-lighter;
border-top: 1px solid var(--brand-color-lighter);
padding: 0;
}
}
......@@ -279,9 +279,9 @@ tr.sortable {
}
td:first-child[colspan], .divider > th, .divider > td {
background-color: lighten(@brand-color-lighter, 20%);
border-bottom: 1px solid #444;
border-top: 1px solid #444;
color: #000;
border-bottom: 1px solid var(--base-gray);
border-top: 1px solid var(--base-gray);
color: var(--black);
font-weight: bold;
text-align: center;
}
......@@ -297,15 +297,15 @@ tr.sortable {
}
tfoot {
td {
background: @table-footer-color;
background: var(--table-footer-color);
text-align: center;
}
tr:first-child td {
border-top: 1px solid #575757;
border-top: 1px solid var(--dark-gray-color-80);
}
}
label.required:after {
color: red;
color: var(--red);
content:'*';
font-size: 1.5em;
padding-left: 5px;
......@@ -317,8 +317,8 @@ tr.sortable {
&:nth-child(-n+2) { text-align: left; }
}
.bordered {
&.left { border-left: 1px solid @brand-color-lighter; }
&.right { border-right: 1px solid @brand-color-lighter; }
&.left { border-left: 1px solid var(--brand-color-lighter); }
&.right { border-right: 1px solid var(--brand-color-lighter); }
}
}
......@@ -343,19 +343,19 @@ table.tree {
}
}
td.blank {
background: #fff;
background: var(--white);
border: 0;
}
td.in-between {
background: #fff url("@{image-path}/tree-line.gif") center repeat-y;
background: var(--white) url("@{image-path}/tree-line.gif") center repeat-y;
border: 0;
}
td.leaf {
background: #fff url("@{image-path}/tree-leaf.gif") center no-repeat;
background: var(--white) url("@{image-path}/tree-leaf.gif") center no-repeat;
border: 0;
}
td.end {
background: #fff url("@{image-path}/tree-end.gif") center no-repeat;
background: var(--white) url("@{image-path}/tree-end.gif") center no-repeat;
border: 0;
}
.centered {
......@@ -365,8 +365,8 @@ table.tree {
}
.table_footer, .table_footer td {
background-color: #e9e9e9;
border-top: 1px solid #c8c8c8;
background-color: var(--dark-gray-color-10);
border-top: 1px solid var(--dark-gray-color-30);
}
// New table definition
......@@ -393,7 +393,7 @@ table.default {
> caption {
background-color: transparent;
padding-top: 0px;
color: @headings-color;
color: var(--headings-color);
font-size: 1.4em;
text-align: left;
......@@ -415,26 +415,26 @@ table.default {
}
> thead {
> tr > th {
background-color: @content-color-20;
background-color: var(--content-color-20);
border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
border-top: 1px solid @brand-color-darker;
border-top: 1px solid var(--brand-color-darker);
font-size: 1.0em;
}
}
> tbody {
> tr {
> th {
background-color: @content-color-20;
border-top: 1px solid @brand-color-darker;
background-color: var(--content-color-20);
border-top: 1px solid var(--brand-color-darker);
border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
text-align: left;
}
> td {
border-bottom: 1px solid @table-header-color;
border-bottom: 1px solid var(--table-header-color);
transition: background-color 0.3s;
}
&.dragover > td {
background-color: @yellow-20;
background-color: var(--yellow-20);
}
}
}
......@@ -468,7 +468,7 @@ table.default {
bottom: 0;
left: 0;
width: 2px;
background-color: @red;
background-color: var(--red);
}
}
.action-menu {
......@@ -476,7 +476,7 @@ table.default {
}
}
> tbody:last-of-type > tr:last-child > td {
border-bottom: 1px solid @brand-color-darker;
border-bottom: 1px solid var(--brand-color-darker);
}
// Hover effect
&:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
......@@ -487,8 +487,8 @@ table.default {
}
> tfoot {
> tr > td {
background-color: @content-color-20;
border-top: 1px solid @brand-color-darker;
background-color: var(--content-color-20);
border-top: 1px solid var(--brand-color-darker);
padding-left: 10px;
padding-right: 10px;
}
......@@ -506,7 +506,7 @@ table.default {
}
> caption .actions {
font-size: @font-size-base;
border-left: 1px solid @brand-color-darker;
border-left: 1px solid var(--brand-color-darker);
margin-bottom: -5px;
min-height: 26px;
padding-bottom: 3px;
......@@ -526,7 +526,7 @@ table.default {
}
.caption-content {
flex-grow: 1;
border-right: 1px solid @brand-color-darker;
border-right: 1px solid var(--brand-color-darker);
padding-bottom: 5px;
padding-right: 0.5em;
margin-right: 0.5em;
......@@ -647,7 +647,7 @@ table.withdetails {
padding-bottom: 10px;
> .detailscontainer {
padding: 5px;
border: 1px solid @table-header-color;
border: 1px solid var(--table-header-color);
margin-top: -1px;
border-top-color: white;
}
......@@ -676,9 +676,9 @@ table.withdetails {
.tablesorter-header:not(.sorter-false) {
white-space: nowrap;
color: @base-color;
color: var(--base-color);
&:hover {
color: @active-color;
color: var(--active-color);
cursor: pointer;
}
&.tablesorter-headerDesc:hover .tablesorter-header-inner::after {
......@@ -710,7 +710,7 @@ table#schedule_data {
td {
text-align: center;
vertical-align: top;
background-color: @content-color-20;
background-color: var(--content-color-20);
padding-right: 2px;
padding: 0px;
&:first-child {
......@@ -728,7 +728,7 @@ table#schedule_data {
td:first-child {
text-align: right;
vertical-align: top;
background-color: @content-color-20;
background-color: var(--content-color-20);
padding-right: 2px;
padding: 0px;
}
......@@ -745,15 +745,15 @@ table.course-search{
@max-width-s: 8em;
@max-width-m: 48em;
@max-width-l: 100%;
border: 1px solid @content-color-40;
border: 1px solid var(--content-color-40);
padding: 0px;
border-top: 0;
caption.legend {
box-sizing: border-box;
background-color: @fieldset-header;
border: 1px solid @content-color-40;
border: 1px solid var(--content-color-40);
border-bottom: 0;
color: @brand-color-dark;
color: var(--brand-color-dark);
font-size: 12pt;
font-weight: bold;
line-height: 2em;
......@@ -768,7 +768,7 @@ table.show-tree {
width:100%;
padding: 0px 10px 10px 10px;
td.b-top-va-center {
border-top: 1px solid @content-color-40;
border-top: 1px solid var(--content-color-40);
padding-top: 10px;
vertical-align:middle;
}
......@@ -815,7 +815,7 @@ table.show-tree {
}
a:hover{
background-color: @fieldset-header !important;
color: @base-color !important;
color: var(--base-color) !important;
}
}
......
$action-menu-icon-size: 20px;
$action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
$action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
.action-menu {
display: inline-block;
......@@ -31,8 +31,8 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
padding: 4px 8px;
background: $white;
border: thin solid $dark-gray-color-45;
background: var(--white);
border: thin solid var(--dark-gray-color-45);
box-shadow: $action-menu-shadow;
font-weight: normal;
text-align: left;
......@@ -60,7 +60,7 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
display: block;
position: absolute;
background: $base-color;
background: var(--base-color);
border-radius: 50%;
opacity: 1;
left: 50%;
......@@ -107,7 +107,7 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
> label {
&,
&:hover {
color: $dark-gray-color-80;
color: var(--dark-gray-color-80);
cursor: default;
}
}
......@@ -135,10 +135,10 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
> label,
> button {
color: $base-color;
color: var(--base-color);
cursor: pointer;
&:hover {
color: $active-color;
color: var(--active-color);
}
}
......
......@@ -5,14 +5,14 @@
overflow-y: auto;
.activity {
border: 1px solid $content-color-40;
border: 1px solid var(--content-color-40);
width: 95%;
margin: 30px auto;
}
.activity header {
color: $base-color;
color: var(--base-color);
padding: 5px;
display: flex;
position: relative;
......@@ -22,10 +22,10 @@
border-radius: 50%;
width: 42px;
height: 42px;
background: $base-color;
background: var(--base-color);
position: absolute;
top: -20px;
border: 3px solid $white;
border: 3px solid var(--white);
cursor: pointer;
&.left {
......@@ -51,7 +51,7 @@
}
h3 {
display: inline;
color: $base-color;
color: var(--base-color);
border-bottom: none;
font-size: 14px;
vertical-align: 6px;
......@@ -62,7 +62,7 @@
max-width: 25px;
}
.activity-date{
color: $base-gray;
color: var(--base-gray);
font-size: 0.75em ;
margin: 0 0 0 30px;
display: block;
......@@ -73,7 +73,7 @@
.activity-content{
padding: 5px;
background-color: $white;
background-color: var(--white);
margin-left: 30px;
display: none;
}
......@@ -117,7 +117,7 @@
.activity-day {
color: $base-gray;
color: var(--base-gray);
font-size: 0.75em ;
margin: 0 45%;
}
......@@ -129,7 +129,7 @@
}
.loading-indicator span {
background-color: $light-gray-color;
background-color: var(--light-gray-color);
border-radius: 50%;
height: 10px;
position: relative;
......
......@@ -7,12 +7,12 @@
padding-left: 0px;
position: relative;
text-align: center;
background-color: $content-color-20;
background-color: var(--content-color-20);
@include background-icon(upload, clickable, 50);
background-repeat: no-repeat;
background-position: center 10px;
padding-top: 70px;
color: $base-color;
color: var(--base-color);
cursor: pointer;
input[type=file] {
......@@ -27,9 +27,9 @@
}
&.hovered {
background-color: $base-color;
background-color: var(--base-color);
@include background-icon(upload, info_alt, 50);
color: $white;
color: var(--white);
}
}
.js .widget-links .drag-and-drop {
......@@ -62,7 +62,7 @@ fieldset.attribute_table {
width: 150px;
max-width: 150px;
overflow: hidden;
border: thin solid #cccccc;
border: thin solid var(--dark-gray-color-30);
vertical-align: top;
margin-top: 3px;
margin-bottom: 3px;
......@@ -70,7 +70,7 @@ fieldset.attribute_table {
div[container] > h2 {
display: block;
width: 100%;
background-color: #dddddd;
background-color: var(--dark-gray-color-20);
font-size: 12px;
text-align: center;
margin: 0;
......@@ -81,12 +81,10 @@ fieldset.attribute_table {
}
div[container] > div.droparea > div.plugin {
cursor: move;
border: thin solid #cccccc;
border: thin solid var(--dark-gray-color-30);
border-radius: 5px;
background-color: #dddddd;
margin: 5px;
margin-left: 7px;
margin-right: 7px;
background-color: var(--dark-gray-color-20);
margin: 5px 7px;
display: inline-block;
min-width: 132px;
max-width: 132px;
......@@ -94,10 +92,10 @@ fieldset.attribute_table {
div[container] > div.droparea > div > h2 {
display: block;
width: 100%;
background-color: #cccccc;
background-color: var(--dark-gray-color-30);
font-size: 12px;
text-align: center;
margin: 0px;
margin: 0;
}
div[container] > div.droparea > div.deactivated {
opacity: 0.5;
......@@ -110,8 +108,8 @@ fieldset.attribute_table {
}
hr {
height: 1px;
color: #aaaaaa;
background-color: #aaaaaa;
color: var(--dark-gray-color-45);
background-color: var(--dark-gray-color-45);
border: none;
}
div[container]#deactivated_modules {
......
/* --- AJAX indicator ------------------------------------------------------- */
#ajax_notification {
background-color: #7387ac;
background-color: var(--base-color-60);
bottom: 0;
color: $white;
color: var(--white);
display: none;
font-size: 1.3em;
font-weight: bold;
......@@ -21,7 +21,7 @@
.notification {
background: rgba(255, 255, 255, 0.5) url("#{$image-path}/loading-indicator.svg") center center no-repeat;
border: 1px solid #ccc;
border: 1px solid var(--dark-gray-color-30);
border-radius: 8px;
display: inline-block;
height: 16px;
......
$article-padding: 10px;
article.studip {
border: 1px solid $content-color-40;
border: 1px solid var(--content-color-40);
margin-bottom: $article-padding;
padding: $article-padding;
......@@ -18,7 +18,7 @@ article.studip {
flex-wrap: wrap;
padding: 2px;
background-color: $content-color-20;
background-color: var(--content-color-20);
margin: -$article-padding;
margin-bottom: $article-padding;
......@@ -35,7 +35,7 @@ article.studip {
h1 {
padding: 5px;
margin: 0;
color: $base-color;
color: var(--base-color);
border-bottom: none;
font-size: medium;
......@@ -60,7 +60,7 @@ article.studip {
padding: 2px;
> * {
border-right: 1px solid $content-color;
border-right: 1px solid var(--content-color);
padding-right: 4px;
margin-right: 4px;
......@@ -120,7 +120,7 @@ article.studip {
> footer {
text-align: center;
border-top: 1px solid $content-color-40;
border-top: 1px solid var(--content-color-40);
margin: -$article-padding;
margin-top: $article-padding;
......
......@@ -3,7 +3,7 @@ div.avatar-widget {
display: block;
margin: 5px;
padding: 0;
color: $white;
color: var(--white);
width: $avatar-normal;
height: $avatar-normal;
......@@ -38,7 +38,7 @@ div.avatar-widget {
left: -2px;
top: -2px;
background-color: fade-out($base-color-40, 0.333);
border: 2px dashed $base-color;
border: 2px dashed var(--base-color);
opacity: 1;
}
}
......@@ -142,11 +142,11 @@ form.settings-avatar {
margin-right: auto;
.cropper-view-box {
outline: 1px solid $base-color-80;
outline: 1px solid var(--base-color-80);
}
.cropper-line, .cropper-point {
background-color: $base-color-80;
background-color: var(--base-color-80);
}
}
......
......@@ -16,8 +16,8 @@
margin: 0;
padding: 1px 5px;
background-color: $red;
color: $white;
background-color: var(--red);
color: var(--white);
font-size: 10px;
font-weight: bold;
......@@ -28,6 +28,6 @@
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
border-radius: 9px;
box-shadow: $black 0 1px 3px;
box-shadow: var(--black) 0 1px 3px;
}
}
......@@ -30,7 +30,7 @@ $bg-big-image-handler: fade-out($black, 0.3);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid $white;
border: 1px solid var(--white);
box-shadow: 0 0 20px fade-out($white, 0.5);
display: block;
max-width: 98%;
......
blockquote {
background-color: $dark-gray-color-5;
border-left: 3px solid $base-color;
background-color: var(--dark-gray-color-5);
border-left: 3px solid var(--base-color);
padding: 4px 10px;
margin: 0 0 8px;
color: black;
......@@ -12,10 +12,10 @@ blockquote {
blockquote {
background-color: white;
blockquote {
background-color: $dark-gray-color-5;
background-color: var(--dark-gray-color-5);
blockquote {
background-color: white;
}
}
}
}
\ No newline at end of file
}
......@@ -29,8 +29,8 @@
}
.blubber_thread {
border: 1px solid $content-color-40;
background-color: $dark-gray-color-5;
border: 1px solid var(--content-color-40);
background-color: var(--dark-gray-color-5);
width: 100%;
max-width: 100%;
......@@ -67,22 +67,22 @@
}
&.dragover {
background-color: $yellow-40;
background-color: var(--yellow-40);
.writer > textarea {
background-color: $yellow-40;
background-color: var(--yellow-40);
}
ol.comments > li.mine > .content::after,
ol.comments > li.theirs > .content::after {
background-color: $yellow-40;
background-color: var(--yellow-40);
}
}
.context_info {
border-bottom: 1px solid $content-color-40;
border-bottom: 1px solid var(--content-color-40);
text-align: center;
}
.writer {
border-top: 1px solid $content-color-40;
border-top: 1px solid var(--content-color-40);
}
......@@ -142,12 +142,12 @@
display: flex;
flex-direction: row-reverse;
> .content {
background-color: $base-color;
color: $white;
background-color: var(--base-color);
color: var(--white);
.opengraph {
background-color: $base-color-80;
border-color: $base-color-60;
background-color: var(--base-color-80);
border-color: var(--base-color-60);
}
a.link-extern {
......@@ -170,7 +170,7 @@
a,
a:link,
a:visited {
color: $white;
color: var(--white);
opacity: 0.8;
transition: opacity 200ms;
}
......@@ -179,7 +179,7 @@
a:hover.index,
a:active.index,
a:hover.tree {
color: $white;
color: var(--white);
opacity: 1;
transition: opacity 200ms;
}
......@@ -198,7 +198,7 @@
content: '';
height: 10px;
width: 10px;
background-color: $dark-gray-color-5;
background-color: var(--dark-gray-color-5);
position: absolute;
pointer-events: none;
left: 100%;
......@@ -218,7 +218,7 @@
&.theirs {
display: flex;
> .content {
background-color: $content-color-20;
background-color: var(--content-color-20);
@include arrow-left(10px, $content-color-20);
&::before {
top: 100%;
......@@ -227,19 +227,19 @@
content: '';
height: 10px;
width: 10px;
background-color: $dark-gray-color-5;
background-color: var(--dark-gray-color-5);
position: absolute;
pointer-events: none;
left: -10px;
top: 100%;
}
> .name {
color: $base-color;
color: var(--base-color);
font-size: 0.8em;
display: block;
&:hover {
color: $red;
color: var(--red);
}
}
}
......@@ -264,7 +264,7 @@
}
> .time {
font-size: 0.8em;
color: $black;
color: var(--black);
time {
@media screen and (max-width: $major-breakpoint-small) {
display: none;
......@@ -276,8 +276,8 @@
}
.writer {
background-color: $white;
background-image: linear-gradient(to left, $content-color-60, $content-color-60);
background-color: var(--white);
background-image: linear-gradient(to left, var(--content-color-60), var(--content-color-60));
background-size: 0% 100%;
background-repeat: no-repeat;
padding: 5px;
......@@ -289,8 +289,8 @@
transition: all 0.5s ease-out;
> textarea {
border: 1px solid $content-color-40;
background-color: $white;
border: 1px solid var(--content-color-40);
background-color: var(--white);
width: calc(100% - 140px);
height: 34px;
resize: none;
......@@ -316,18 +316,18 @@
}
.thread_posting {
border-bottom: 1px solid $content-color-40;
background-color: $white;
border-bottom: 1px solid var(--content-color-40);
background-color: var(--white);
.contextinfo {
background-color: $content-color-20;
border-bottom: 1px solid $content-color-40;
color: $dark-gray-color-60;
background-color: var(--content-color-20);
border-bottom: 1px solid var(--content-color-40);
color: var(--dark-gray-color-60);
font-size: 0.8em;
padding: 7px 5px 5px 75px;
position: relative;
a {
color: $dark-gray-color-60;
color: var(--dark-gray-color-60);
}
time {
float: right;
......@@ -386,7 +386,7 @@
max-width: 270px;
margin-left: 5px;
border: 1px solid $content-color-40;
border: 1px solid var(--content-color-40);
box-sizing: border-box;
max-height: calc(100vh - 140px);
......@@ -396,7 +396,7 @@
padding: 10px;
}
.new_section {
border-top: 1px solid $content-color-40;
border-top: 1px solid var(--content-color-40);
}
.members {
......@@ -404,9 +404,9 @@
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid $content-color-40;
border-bottom: 1px solid var(--content-color-40);
&:first-child {
border-top: 1px solid $content-color-40;
border-top: 1px solid var(--content-color-40);
}
}
&.topless li:first-child {
......@@ -447,7 +447,7 @@
}
.context_info {
border-bottom: 1px solid $content-color-40;
border-bottom: 1px solid var(--content-color-40);
.blubber_course_info {
......@@ -473,7 +473,7 @@
}
.lowprio_info {
color: $black;
color: var(--black);
}
.studip-dialog {
......@@ -536,21 +536,21 @@
padding-left: 0px;
li {
border-bottom: thin solid $content-color-40;
border-bottom: thin solid var(--content-color-40);
height: 50px;
max-height: 50px;
overflow: hidden;
padding: 10px;
cursor: pointer;
color: $base-color;
color: var(--base-color);
font-weight: bold;
&:last-child {
border-bottom: none;
}
&.unseen {
border-left: 3px solid $active-color;
border-left: 3px solid var(--active-color);
padding-left: 7px;
}
......@@ -566,7 +566,7 @@
}
&.active {
background-color: $yellow-40;
background-color: var(--yellow-40);
&::before {
content: '';
......@@ -575,7 +575,7 @@
width: 0px;
border-top: 35px transparent solid;
border-bottom: 35px transparent solid;
border-left: 10px $content-color-40 solid;
border-left: 10px var(--content-color-40) solid;
right: -2px;
margin-top: -10px;
}
......@@ -586,7 +586,7 @@
width: 0px;
border-top: 35px transparent solid;
border-bottom: 35px transparent solid;
border-left: 10px $yellow-40 solid;
border-left: 10px var(--yellow-40) solid;
right: -1px;
margin-top: -70px;
}
......@@ -617,7 +617,7 @@
time {
font-size: 0.8em;
font-weight: normal;
color: $black;
color: var(--black);
}
}
......
......@@ -2,10 +2,10 @@
@mixin button() {
background: white;
border: 1px solid $base-color;
border: 1px solid var(--base-color);
border-radius: 0;
box-sizing: border-box;
color: $base-color;
color: var(--base-color);
cursor: pointer;
display: inline-block;
font-family: $font-family-base;
......@@ -24,19 +24,19 @@
&:hover,
&:active {
background: $base-color;
background: var(--base-color);
color: white;
}
&.disabled,
&[disabled] {
box-shadow: none;
background: $light-gray-color-20;
background: var(--light-gray-color-20);
cursor: default;
opacity: 0.65;
&:hover {
color: $base-color;
color: var(--base-color);
}
}
......@@ -144,11 +144,11 @@ button.styleless {
button.as-link {
background-color: transparent;
border: none;
color: $base-color;
color: var(--base-color);
cursor: pointer;
margin: 0px;
padding: 0px;
&:hover {
color: $active-color;
color: var(--active-color);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment