mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-10-13 15:29:36 +00:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Johann Hoffmann
|
0b6288973f |
@@ -57,6 +57,11 @@
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
/* dark mode replaces the yellow cell background with the dark cell background */
|
||||
html.dark #notentable .tabulator-tableholder .tabulator-editable[tabulator-field="note_vorschlag"]::after {
|
||||
color: var(--fhc-text);
|
||||
}
|
||||
|
||||
/* rotate the indicator up while the dropdown editor is open */
|
||||
#notentable .tabulator-tableholder .tabulator-cell.tabulator-editing[tabulator-field="note_vorschlag"]::after {
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
@@ -139,8 +144,9 @@
|
||||
}
|
||||
|
||||
.pruefung-badge.attempt-t1::before { background: #0072B2; }
|
||||
.pruefung-badge.attempt-t2::before { background: #E69F00; }
|
||||
.pruefung-badge.attempt-t3::before { background: #CC79A7; }
|
||||
.pruefung-badge.attempt-k::before { background: #D55E00; }
|
||||
/* white text fails on the lighter badge colors */
|
||||
.pruefung-badge.attempt-t2::before { background: #E69F00; color: #000; }
|
||||
.pruefung-badge.attempt-t3::before { background: #CC79A7; color: #000; }
|
||||
.pruefung-badge.attempt-k::before { background: #D55E00; color: #000; }
|
||||
/* Termin ohne verbrauchten Antritt (entschuldigt, nicht beurteilt) - traegt keine Nummer */
|
||||
.pruefung-badge.attempt-none::before { background: #767676; }
|
||||
+17
-9
@@ -31,7 +31,7 @@ body.compat main#cis-main {
|
||||
}
|
||||
|
||||
.fhc-primary-color{
|
||||
color: var(--fhc-primary) !important;
|
||||
color: var(--fhc-primary-text) !important;
|
||||
}
|
||||
|
||||
.fhc-primary-bg {
|
||||
@@ -46,6 +46,17 @@ body.compat main#cis-main {
|
||||
color: var(--fhc-primary-highlight) !important;
|
||||
}
|
||||
|
||||
/* icon buttons in table action cells, white icon on the gray hover fill and in dark mode */
|
||||
.fhc-action-btn i {
|
||||
color: var(--fhc-primary);
|
||||
}
|
||||
|
||||
.fhc-action-btn:hover i,
|
||||
.fhc-action-btn:active i,
|
||||
html.dark .fhc-action-btn i {
|
||||
color: var(--fhc-white-10);
|
||||
}
|
||||
|
||||
.fhc-body-bg{
|
||||
background-color:var(--fhc-background) !important;
|
||||
}
|
||||
@@ -128,7 +139,7 @@ body.compat main#cis-main {
|
||||
|
||||
--fhc-cis-menu-lvl-1-bg: var(--fhc-primary);
|
||||
--fhc-cis-menu-lvl-1-color: var(--fhc-light);
|
||||
--fhc-cis-menu-lvl-1-bg-hover: var(--fhc-primary-highlight);
|
||||
--fhc-cis-menu-lvl-1-bg-hover: var(--fhc-primary-shade);
|
||||
--fhc-cis-menu-lvl-1-color-hover: var(--fhc-light);
|
||||
|
||||
--fhc-cis-menu-lvl-2-bg: var(--fhc-secondary);
|
||||
@@ -156,10 +167,6 @@ body.compat main#cis-main {
|
||||
--fhc-offcanvas-zindex: 1045;
|
||||
}
|
||||
|
||||
#themeSwitch i{
|
||||
color: var(fhc-light) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--fhc-cis-menu-width: 250px;
|
||||
@@ -185,11 +192,13 @@ body.compat main#cis-main {
|
||||
}
|
||||
|
||||
#cis-menu .menu-entry:hover .submenu{
|
||||
background-color: var(--fhc-primary-highlight);
|
||||
background-color: var(--fhc-primary-shade);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* dark text needs a light background, the shade is too dark for it */
|
||||
#cis-menu .menu-entry:hover .submenu:hover{
|
||||
background-color: var(--fhc-light);
|
||||
color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
@@ -521,7 +530,6 @@ body.compat main#cis-main {
|
||||
}
|
||||
#nav-main-toggle .collapsed .fa-chevron-left {
|
||||
transform: scaleX(-1);
|
||||
color: var(--fhc-black-40);
|
||||
}
|
||||
#nav-search {
|
||||
position: relative;
|
||||
@@ -637,7 +645,7 @@ body.compat main#cis-main {
|
||||
}
|
||||
}
|
||||
.fhc-header > h1 > small {
|
||||
color: var(--fhc-tertiary);
|
||||
color: var(--bs-secondary-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.fhc-header > h1 > small:before {
|
||||
|
||||
@@ -78,7 +78,6 @@
|
||||
|
||||
#studiengang-info-col.collapsed #studiengang-info-toggle .fa-chevron-right {
|
||||
transform: scaleX(-1);
|
||||
color: var(--fhc-black-40);
|
||||
}
|
||||
|
||||
#studiengang-info {
|
||||
|
||||
@@ -37,3 +37,8 @@
|
||||
.is-info {
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
/* #0d6efd is too dark for text on the dark background */
|
||||
html.dark .info-feedback {
|
||||
color: var(--fhc-primary-text);
|
||||
}
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
font-size: calc(1.325rem + .9vw);
|
||||
}
|
||||
.fhc-header > :first-child > small {
|
||||
color: var(--fhc-tertiary);
|
||||
color: var(--bs-secondary-color);
|
||||
font-size: .65em;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
}
|
||||
|
||||
.tabulator-row.tabulator-unselectable:not(.tabulator-calcs) {
|
||||
color: #777 !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.tabulator-cell .btn {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
:root {
|
||||
--fhc-sprachen-color: var(--fhc-text, white);
|
||||
--fhc-sprachen-background: var(--fhc-primary, #005585);
|
||||
--fhc-sprachen-background-highlight: var(--fhc-primary-highlight, #00649c);
|
||||
--fhc-sprachen-background-highlight: var(--fhc-primary-shade, #00649c);
|
||||
}
|
||||
|
||||
.sprachen-entry{
|
||||
|
||||
@@ -255,6 +255,50 @@
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* Status icons: fixed color per background, the inherited text color fails on the 50-70 steps */
|
||||
.verpasst-header,
|
||||
.nichtbestanden-header,
|
||||
.erledigt-header,
|
||||
.abgegeben-header,
|
||||
.bestanden-header {
|
||||
--abgabe-status-icon: var(--fhc-white-10);
|
||||
color: var(--abgabe-status-icon);
|
||||
}
|
||||
|
||||
.abzugeben-header,
|
||||
.beurteilungerforderlich-header,
|
||||
.verspaetet-header,
|
||||
.standard-header {
|
||||
--abgabe-status-icon: var(--fhc-black-30);
|
||||
color: var(--abgabe-status-icon);
|
||||
}
|
||||
|
||||
/* white on green-50 is below 3:1 */
|
||||
.p-accordion-tab-active > .abgegeben-header,
|
||||
.p-accordion-tab-active > .bestanden-header {
|
||||
--abgabe-status-icon: var(--fhc-black-30);
|
||||
}
|
||||
|
||||
/* the accordion link sets its own text color, so the icon reads the variable */
|
||||
.abgabe-status-icon {
|
||||
color: var(--abgabe-status-icon);
|
||||
}
|
||||
|
||||
/* dark mode: the PrimeVue hover makes the link transparent, so the label would sit on the status color */
|
||||
html.dark .p-accordion .p-accordion-header:is(
|
||||
.verpasst-header,
|
||||
.nichtbestanden-header,
|
||||
.erledigt-header,
|
||||
.abzugeben-header,
|
||||
.beurteilungerforderlich-header,
|
||||
.verspaetet-header,
|
||||
.abgegeben-header,
|
||||
.bestanden-header,
|
||||
.standard-header
|
||||
):hover .p-accordion-header-link {
|
||||
background: var(--fhc-black-70);
|
||||
}
|
||||
|
||||
#abgabetoolroot .modal-header{
|
||||
background-color: var(--fhc-blue-primary);
|
||||
color: var(--fhc-white-50);
|
||||
|
||||
@@ -55,6 +55,8 @@
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header {
|
||||
--event-bg: transparent;
|
||||
/* the day row is an .event, without this it gets the black event text color */
|
||||
--event-color: var(--fhc-text, #000);
|
||||
font-weight: bold;
|
||||
font-size: var(--fhc-calendar-fontsize-month-day, 1rem);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
@import './dashboard/LvPlan.css';
|
||||
|
||||
:root {
|
||||
--fhc-dashboard-danger: var(--fhc-danger, #842029);
|
||||
--fhc-dashboard-grid-size: 4;
|
||||
--fhc-dashboard-link: var(--fhc-link, #0a57ca);
|
||||
--fhc-dashboard-gridrow-background: var(--fhc-background, white);
|
||||
@@ -12,8 +11,8 @@
|
||||
--fhc-dashboard-item-overlay-background: var(--fhc-background-highlight, rgba(0, 100, 156, 1));
|
||||
--fhc-dashboard-item-overly-border-color: var(--fhc-border, lightgray);
|
||||
--fhc-dashboard-denied-dragging-animation-color: var(--fhc-danger, red);
|
||||
--fhc-dashboard-pin-pinned-hover-color: var(--fhc-fifth-highlight, rgb(153, 116, 116));
|
||||
--fhc-dashboard-section-info-color: var(--fhc-primary, #00649c);
|
||||
--fhc-dashboard-pin-pinned-hover-color: var(--fhc-disabled, rgb(153, 116, 116));
|
||||
--fhc-dashboard-section-info-color: var(--fhc-primary-text, #00649c);
|
||||
--fhc-dashboard-section-info-color-hover: var(--fhc-primary-highlight, #005585);
|
||||
}
|
||||
|
||||
@@ -64,7 +63,7 @@
|
||||
}
|
||||
|
||||
.newGridRow:hover {
|
||||
color: white;
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-dashboard-gridrow-background-highlight);
|
||||
}
|
||||
|
||||
@@ -72,11 +71,6 @@
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-500 -500 1448 1512"><path fill="rgb(211, 211, 211)" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>');
|
||||
}
|
||||
|
||||
.alert-danger .form-check-input:checked {
|
||||
border-color: var(--fhc-dashboard-danger);
|
||||
background-color: var(--fhc-dashboard-danger);
|
||||
}
|
||||
|
||||
@media(max-width: 1200px) {
|
||||
:root {
|
||||
--fhc-dashboard-grid-size: 3;
|
||||
@@ -162,10 +156,6 @@
|
||||
border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
|
||||
#deleteBookmark i {
|
||||
color: var(--fhc-dashboard-danger);
|
||||
}
|
||||
|
||||
.pin:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -211,14 +201,3 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hidden-widget {
|
||||
background: var(--fhc-disabled-background);
|
||||
opacity: 40%;
|
||||
}
|
||||
|
||||
.hidden-widget .card,
|
||||
.hidden-widget .card-body,
|
||||
.hidden-widget .card-body * {
|
||||
background: inherit !important;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
:root{
|
||||
--fhc-news-widget-height: 1;
|
||||
--fhc-news-widget-bg: var(--fhc-primary);
|
||||
--fhc-news-widget-highlight-color: var(--fhc-primary-highlight);
|
||||
--fhc-news-widget-highlight-color: var(--fhc-primary-shade);
|
||||
--fhc-news-widget-border: var(--fhc-border);
|
||||
--fhc-news-widget-border-highlight: var(--fhc-border-highlight);
|
||||
--fhc-news-widget-text-light: var(--fhc-light);
|
||||
@@ -171,7 +171,7 @@
|
||||
|
||||
|
||||
.fhc-news-items-lg .row .news-truncate span{
|
||||
color: var(--fhc-primary);
|
||||
color: var(--fhc-primary-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
background-color: var(--fhc-switches-unchecked-bg) !important;
|
||||
border-color: transparent;
|
||||
background-position: left center !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
.fhc-switches:focus {
|
||||
|
||||
@@ -36,6 +36,27 @@
|
||||
--dp-hover-icon-color: rgba(var(--bs-black-rgb), .75);
|
||||
--dp-range-between-dates-text-color: var(--dp-hover-text-color, var(--text-color));
|
||||
}
|
||||
/* dark mode: the picker always uses its light theme class, and --text-color (PrimeVue) turns white there */
|
||||
html.dark .dp__theme_light {
|
||||
--dp-background-color: var(--fhc-background);
|
||||
--dp-text-color: var(--fhc-text);
|
||||
--dp-hover-color: var(--fhc-tertiary);
|
||||
--dp-hover-text-color: var(--fhc-text);
|
||||
--dp-primary-color: var(--fhc-primary);
|
||||
--dp-primary-text-color: var(--fhc-white-10);
|
||||
--dp-secondary-color: var(--fhc-disabled);
|
||||
--dp-border-color: var(--fhc-border);
|
||||
--dp-menu-border-color: var(--fhc-border);
|
||||
--dp-border-color-hover: var(--fhc-border-highlight);
|
||||
--dp-icon-color: rgba(var(--bs-white-rgb), .5);
|
||||
--dp-hover-icon-color: rgba(var(--bs-white-rgb), .75);
|
||||
--dp-disabled-color: var(--fhc-secondary);
|
||||
--dp-disabled-color-text: var(--fhc-disabled);
|
||||
--dp-scroll-bar-background: var(--fhc-background);
|
||||
--dp-scroll-bar-color: var(--fhc-tertiary-highlight);
|
||||
--dp-tooltip-color: var(--fhc-tertiary);
|
||||
--dp-highlight-color: rgb(0 92 178 / 20%);
|
||||
}
|
||||
.dp__theme_light .form-control.is-invalid {
|
||||
--dp-border-color-hover: var(--bs-danger);
|
||||
}
|
||||
|
||||
@@ -24,6 +24,12 @@
|
||||
border-color: #DEE2E6 !important;
|
||||
}
|
||||
|
||||
/* the light fill above stays light in dark mode */
|
||||
html.dark .bg-secondary-subtle {
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
border-color: var(--fhc-border) !important;
|
||||
}
|
||||
|
||||
|
||||
/* html attribute disabled and title don't work together, sets the pointer-event to auto in order to see the title toolip */
|
||||
.btn:disabled {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
#protocoltbl td:nth-child(1), .cellbg {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--fhc-secondary, #f5f5f5);
|
||||
}
|
||||
|
||||
/* table date and time cell widths */
|
||||
|
||||
+132
-13
@@ -145,6 +145,9 @@
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-blue-primary);
|
||||
--fhc-primary-highlight: var(--fhc-blue-primary-highlight);
|
||||
--fhc-primary-text: var(--fhc-primary);
|
||||
/* darker primary for hover and selected backgrounds with light text */
|
||||
--fhc-primary-shade: var(--fhc-blue-50);
|
||||
|
||||
--fhc-secondary: var(--fhc-white-20);
|
||||
--fhc-secondary-highlight: var(--fhc-white-40);
|
||||
@@ -178,12 +181,11 @@
|
||||
--fhc-link: var(--fhc-blue-10);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-gray-90);
|
||||
--fhc-disabled-background: var(--fhc-gray-30);
|
||||
--fhc-disabled: var(--fhc-gray-20);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-danger: var(--fhc-red-60);
|
||||
--fhc-success: var(--fhc-green-70);
|
||||
--fhc-dark: var(--fhc-black-30);
|
||||
--fhc-light: var(--fhc-white-50);
|
||||
|
||||
@@ -195,6 +197,9 @@
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-blue-primary);
|
||||
--fhc-primary-highlight: var(--fhc-blue-primary-highlight);
|
||||
/* --fhc-primary is too dark for text on the dark background */
|
||||
--fhc-primary-text: var(--fhc-blue-40);
|
||||
--fhc-primary-shade: var(--fhc-blue-50);
|
||||
|
||||
--fhc-secondary: var(--fhc-black-50);
|
||||
--fhc-secondary-highlight: var(--fhc-black-70);
|
||||
@@ -202,7 +207,12 @@
|
||||
--fhc-tertiary: var(--fhc-black-70);
|
||||
--fhc-tertiary-highlight: var(--fhc-gray-40);
|
||||
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-fourth: var(--fhc-gray-40);
|
||||
--fhc-fourth-highlight: var(--fhc-gray-30);
|
||||
|
||||
/* lighter steps fail with --fhc-text, so level 5 repeats level 4 */
|
||||
--fhc-fifth: var(--fhc-gray-40);
|
||||
--fhc-fifth-highlight: var(--fhc-gray-30);
|
||||
|
||||
/*background*/
|
||||
--fhc-background: var(--fhc-black-30);
|
||||
@@ -225,14 +235,16 @@
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-gray-10);
|
||||
--fhc-disabled-background: var(--fhc-gray-120);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-danger: var(--fhc-red-30);
|
||||
--fhc-success: var(--fhc-green-30);
|
||||
--fhc-dark: var(--fhc-black-50);
|
||||
--fhc-light: var(--fhc-white-70);
|
||||
|
||||
/* calendar: beige-10 is too bright behind light day numbers */
|
||||
--fhc-calendar-bg-markings-past: var(--fhc-beige-20);
|
||||
|
||||
}
|
||||
|
||||
:root.purple {
|
||||
@@ -253,6 +265,8 @@
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-purple-primary-highlight);
|
||||
--fhc-primary-highlight: var(--fhc-purple-primary);
|
||||
--fhc-primary-text: var(--fhc-primary);
|
||||
--fhc-primary-shade: var(--fhc-primary-highlight);
|
||||
|
||||
--fhc-secondary: var(--fhc-purple-20);
|
||||
--fhc-secondary-highlight: var(--fhc-purple-40);
|
||||
@@ -260,6 +274,13 @@
|
||||
--fhc-tertiary: var(--fhc-purple-30);
|
||||
--fhc-tertiary-highlight: var(--fhc-purple-50);
|
||||
|
||||
--fhc-fourth: var(--fhc-purple-40);
|
||||
--fhc-fourth-highlight: var(--fhc-purple-50);
|
||||
|
||||
/* darker steps fail with --fhc-text, so level 5 repeats level 4 */
|
||||
--fhc-fifth: var(--fhc-purple-40);
|
||||
--fhc-fifth-highlight: var(--fhc-purple-50);
|
||||
|
||||
/* background */
|
||||
--fhc-background: var(--fhc-purple-5);
|
||||
--fhc-background-highlight: var(--fhc-purple-10);
|
||||
@@ -283,8 +304,8 @@
|
||||
--fhc-disabled: var(--fhc-purple-20);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-danger: var(--fhc-red-60);
|
||||
--fhc-success: var(--fhc-green-70);
|
||||
--fhc-dark: var(--fhc-black-20);
|
||||
--fhc-light: var(--fhc-white-70);
|
||||
|
||||
@@ -314,11 +335,12 @@ html.dark .border-primary {
|
||||
}
|
||||
|
||||
/* fhc danger*/
|
||||
/* dark --fhc-danger is a text color, white text needs a dark fill */
|
||||
html.dark .bg-danger,
|
||||
html.dark .btn-danger,
|
||||
html.dark .btn-outline-danger {
|
||||
background-color: var(--fhc-danger) !important;
|
||||
border-color: var(--fhc-danger) !important;
|
||||
background-color: var(--fhc-red-70) !important;
|
||||
border-color: var(--fhc-red-70) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -335,6 +357,61 @@ html.dark .border-danger {
|
||||
border-color: var(--fhc-danger) !important;
|
||||
}
|
||||
|
||||
/* btn-light stays light in dark mode, so it needs the dark red */
|
||||
html.dark .btn-light.text-danger {
|
||||
color: var(--fhc-red-70) !important;
|
||||
}
|
||||
|
||||
/* fhc success */
|
||||
html.dark .text-success {
|
||||
color: var(--fhc-success) !important;
|
||||
}
|
||||
|
||||
/* Bootstrap keeps #6c757d for secondary text and outline buttons in dark mode */
|
||||
html.dark .text-secondary {
|
||||
color: var(--bs-secondary-color) !important;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-secondary {
|
||||
--bs-btn-color: var(--fhc-white-90);
|
||||
--bs-btn-border-color: var(--fhc-white-90);
|
||||
}
|
||||
|
||||
/* btn-outline-dark is dark on the dark background, use the theme text color */
|
||||
html.dark .btn-outline-dark {
|
||||
--bs-btn-color: var(--fhc-text);
|
||||
--bs-btn-border-color: var(--fhc-text);
|
||||
--bs-btn-hover-color: var(--fhc-background);
|
||||
--bs-btn-hover-bg: var(--fhc-text);
|
||||
--bs-btn-hover-border-color: var(--fhc-text);
|
||||
--bs-btn-active-color: var(--fhc-background);
|
||||
--bs-btn-active-bg: var(--fhc-text);
|
||||
--bs-btn-active-border-color: var(--fhc-text);
|
||||
--bs-btn-disabled-color: var(--fhc-text);
|
||||
--bs-btn-disabled-border-color: var(--fhc-text);
|
||||
}
|
||||
|
||||
/* btn-dark fills with the page color in dark mode, mirror it so it stays distinct from btn-outline-dark */
|
||||
html.dark .btn-dark {
|
||||
--bs-btn-color: var(--fhc-background);
|
||||
--bs-btn-bg: var(--fhc-text);
|
||||
--bs-btn-border-color: var(--fhc-text);
|
||||
--bs-btn-hover-color: var(--fhc-background);
|
||||
--bs-btn-hover-bg: var(--fhc-light);
|
||||
--bs-btn-hover-border-color: var(--fhc-light);
|
||||
--bs-btn-active-color: var(--fhc-background);
|
||||
--bs-btn-active-bg: var(--fhc-light);
|
||||
--bs-btn-active-border-color: var(--fhc-light);
|
||||
--bs-btn-disabled-color: var(--fhc-background);
|
||||
--bs-btn-disabled-bg: var(--fhc-text);
|
||||
--bs-btn-disabled-border-color: var(--fhc-text);
|
||||
}
|
||||
|
||||
/* SB Admin 2 fills #page-wrapper white (Pruefungsprotokoll, Anrechnung admin) */
|
||||
html.dark #page-wrapper {
|
||||
background-color: var(--fhc-background);
|
||||
}
|
||||
|
||||
|
||||
html.dark .tabulator,
|
||||
html.dark .tabulator .tabulator-header,
|
||||
@@ -351,10 +428,52 @@ html.dark .tabulator .tabulator-cell {
|
||||
border-color: var(--fhc-border) !important;
|
||||
}
|
||||
|
||||
/* selected rows: the vendor #9abcea is too dark for the red and green cell content */
|
||||
.tabulator .tabulator-row.tabulator-selected .tabulator-cell {
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
|
||||
/* the gray outline button text fails on any row tint, so give it an opaque fill */
|
||||
.tabulator .tabulator-row.tabulator-selected .btn-outline-secondary {
|
||||
--bs-btn-bg: var(--fhc-background);
|
||||
}
|
||||
|
||||
/* selected rows: dark blue keeps the status text colors readable */
|
||||
html.dark .tabulator .tabulator-row.tabulator-selected .tabulator-cell {
|
||||
background-color: var(--fhc-indigo-90) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-header .tabulator-col:hover {
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
}
|
||||
|
||||
/* tabulator_simple: fixed light colors for the placeholder, sort arrows and menus */
|
||||
html.dark .tabulator .tabulator-tableholder .tabulator-placeholder span {
|
||||
color: var(--fhc-text);
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow {
|
||||
border-bottom-color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow {
|
||||
border-top-color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
/* both modes: the vendor #bbb for unsorted columns is too light on white */
|
||||
.tabulator .tabulator-col[aria-sort="none"] .tabulator-arrow {
|
||||
border-bottom-color: var(--fhc-disabled) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator-popup-container.tabulator-menu {
|
||||
background: var(--fhc-background);
|
||||
color: var(--fhc-text);
|
||||
}
|
||||
|
||||
html.dark .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
|
||||
background: var(--fhc-tertiary);
|
||||
}
|
||||
|
||||
.p-paginator{
|
||||
background-color: var(--fhc-background) !important;
|
||||
}
|
||||
@@ -371,7 +490,7 @@ html.dark .tabulator .tabulator-header .tabulator-col:hover {
|
||||
.p-paginator .p-paginator-prev,
|
||||
.p-paginator .p-paginator-first,
|
||||
.p-paginator .p-paginator-last {
|
||||
color: var(--fhc-primary) !important;
|
||||
color: var(--fhc-primary-text) !important;
|
||||
}
|
||||
|
||||
.p-link:focus {
|
||||
|
||||
@@ -764,7 +764,7 @@ export const AbgabeMitarbeiterDetail = {
|
||||
<template #header>
|
||||
<div class="d-flex flex-nowrap align-items-center w-100">
|
||||
|
||||
<div class="flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; margin-left: -68px;">
|
||||
<div class="abgabe-status-icon flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; margin-left: -68px;">
|
||||
<i v-if="termin.dateStyle == 'verspaetet'" v-tooltip.right="getTooltipVerspaetet" class="fa-solid fa-triangle-exclamation"></i>
|
||||
<i v-else-if="termin.dateStyle == 'verpasst'" v-tooltip.right="getTooltipVerpasst" class="fa-solid fa-calendar-xmark"></i>
|
||||
<i v-else-if="termin.dateStyle == 'abzugeben'" v-tooltip.right="getTooltipAbzugeben" class="fa-solid fa-hourglass-half"></i>
|
||||
|
||||
@@ -450,7 +450,7 @@ export const AbgabeStudentDetail = {
|
||||
<AccordionTab :headerClass="termin.dateStyle + '-header'">
|
||||
<template #header>
|
||||
<div class="d-flex flex-nowrap align-items-center w-100">
|
||||
<div class="flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; margin-left: -68px;">
|
||||
<div class="abgabe-status-icon flex-shrink-0 d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; margin-left: -68px;">
|
||||
<i v-if="termin.dateStyle == 'verspaetet'" v-tooltip.right="getTooltipVerspaetet" class="fa-solid fa-triangle-exclamation"></i>
|
||||
<i v-else-if="termin.dateStyle == 'verpasst'" v-tooltip.right="getTooltipVerpasst" class="fa-solid fa-calendar-xmark"></i>
|
||||
<i v-else-if="termin.dateStyle == 'abzugeben'" v-tooltip.right="getTooltipAbzugeben" class="fa-solid fa-hourglass-half"></i>
|
||||
|
||||
@@ -98,7 +98,7 @@ export const AbgabeStudentTimeline = {
|
||||
<div v-for="projekt in projekte" :key="projekt.projektarbeit_id" class="mb-2">
|
||||
|
||||
<button
|
||||
class="btn btn-sm w-100 text-start d-flex align-items-center gap-2 rounded bg-light border-0 py-2 px-3"
|
||||
class="btn btn-sm w-100 text-start d-flex align-items-center gap-2 rounded bg-body-tertiary border-0 py-2 px-3"
|
||||
@click="toggleProject(projekt.projektarbeit_id)"
|
||||
>
|
||||
<i
|
||||
|
||||
@@ -548,10 +548,10 @@ export const AbgabetoolAssistenz = {
|
||||
const display = document.createElement('input');
|
||||
display.readOnly = true;
|
||||
display.placeholder = '';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: #fff; appearance: none; caret-color: transparent;';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: var(--fhc-background); color: var(--fhc-text); appearance: none; caret-color: transparent;';
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: #fff; border: 1px solid; z-index: 9999; min-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: var(--fhc-background); color: var(--fhc-text); border: 1px solid; z-index: 9999; min-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
|
||||
|
||||
// mapping evaluated at render time, not at column definition time
|
||||
@@ -814,10 +814,10 @@ export const AbgabetoolAssistenz = {
|
||||
const display = document.createElement('input');
|
||||
display.readOnly = true;
|
||||
display.placeholder = '';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: #fff; appearance: none; caret-color: transparent;';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: var(--fhc-background); color: var(--fhc-text); appearance: none; caret-color: transparent;';
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: #fff; border: 1px solid; z-index: 9999; min-width: 220px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: var(--fhc-background); color: var(--fhc-text); border: 1px solid; z-index: 9999; min-width: 220px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
|
||||
const updateDisplay = () => {
|
||||
display.value = options
|
||||
@@ -912,10 +912,10 @@ export const AbgabetoolAssistenz = {
|
||||
const display = document.createElement('input');
|
||||
display.readOnly = true;
|
||||
display.placeholder = '';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: #fff; appearance: none; caret-color: transparent;';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: var(--fhc-background); color: var(--fhc-text); appearance: none; caret-color: transparent;';
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: #fff; border: 1px solid; z-index: 9999; min-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: var(--fhc-background); color: var(--fhc-text); border: 1px solid; z-index: 9999; min-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
|
||||
options.forEach(opt => {
|
||||
const row = document.createElement('label');
|
||||
@@ -1669,7 +1669,7 @@ export const AbgabetoolAssistenz = {
|
||||
|
||||
const createButton = (iconClass, titleKey, clickHandler) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-outline-secondary';
|
||||
btn.className = 'btn btn-outline-secondary fhc-action-btn';
|
||||
btn.style.display = "flex";
|
||||
btn.style.alignItems = "center"; // center icon vertically
|
||||
btn.style.justifyContent = "center"; // center icon horizontally
|
||||
@@ -1677,7 +1677,7 @@ export const AbgabetoolAssistenz = {
|
||||
btn.style.aspectRatio = "1 / 1"; // keep square shape (optional)
|
||||
btn.style.padding = "0"; // remove extra padding for compactness
|
||||
if(iconClass == 'fa fa-timeline') btn.style.transform = "rotate(90deg)";
|
||||
btn.innerHTML = `<i class="${iconClass}" style="color:#00649C; font-size:1.1rem;"></i>`;
|
||||
btn.innerHTML = `<i class="${iconClass}" style="font-size:1.1rem;"></i>`;
|
||||
btn.title = this.$capitalize(this.$p.t(titleKey));
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
@@ -1964,28 +1964,28 @@ export const AbgabetoolAssistenz = {
|
||||
let icon = ''
|
||||
switch(dateStyle) {
|
||||
case 'verspaetet':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-triangle-exclamation"></i>'
|
||||
icon = '<i class="fa-solid fa-triangle-exclamation"></i>'
|
||||
break
|
||||
case 'verpasst':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-calendar-xmark"></i>'
|
||||
icon = '<i class="fa-solid fa-calendar-xmark"></i>'
|
||||
break
|
||||
case 'abzugeben':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-hourglass-half"></i>'
|
||||
icon = '<i class="fa-solid fa-hourglass-half"></i>'
|
||||
break
|
||||
case 'standard':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-clock"></i>'
|
||||
icon = '<i class="fa-solid fa-clock"></i>'
|
||||
break
|
||||
case 'abgegeben':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-paperclip"></i>'
|
||||
icon = '<i class="fa-solid fa-paperclip"></i>'
|
||||
break
|
||||
case 'beurteilungerforderlich':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-list-check"></i>'
|
||||
icon = '<i class="fa-solid fa-list-check"></i>'
|
||||
break
|
||||
case 'bestanden':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-check"></i>'
|
||||
icon = '<i class="fa-solid fa-check"></i>'
|
||||
break
|
||||
case 'nichtbestanden':
|
||||
icon = '<i style="color: #000000 !important;" class="fa-solid fa-circle-exclamation"></i>'
|
||||
icon = '<i class="fa-solid fa-circle-exclamation"></i>'
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
@@ -312,7 +312,7 @@ export const AbgabetoolMitarbeiter = {
|
||||
|
||||
const createButton = (iconClass, titleKey, clickHandler) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-outline-secondary';
|
||||
btn.className = 'btn btn-outline-secondary fhc-action-btn';
|
||||
btn.style.display = "flex";
|
||||
btn.style.alignItems = "center"; // center icon vertically
|
||||
btn.style.justifyContent = "center"; // center icon horizontally
|
||||
@@ -320,7 +320,7 @@ export const AbgabetoolMitarbeiter = {
|
||||
btn.style.aspectRatio = "1 / 1"; // keep square shape (optional)
|
||||
btn.style.padding = "0"; // remove extra padding for compactness
|
||||
if(iconClass == 'fa fa-timeline') btn.style.transform = "rotate(90deg)";
|
||||
btn.innerHTML = `<i class="${iconClass}" style="color:#00649C; font-size:1.1rem;"></i>`;
|
||||
btn.innerHTML = `<i class="${iconClass}" style="font-size:1.1rem;"></i>`;
|
||||
btn.title = this.$capitalize(this.$p.t(titleKey));
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
@@ -395,10 +395,10 @@ export const AbgabetoolMitarbeiter = {
|
||||
const display = document.createElement('input');
|
||||
display.readOnly = true;
|
||||
display.placeholder = '';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: #fff; appearance: none; caret-color: transparent;';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: var(--fhc-background); color: var(--fhc-text); appearance: none; caret-color: transparent;';
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: #fff; border: 1px solid; z-index: 9999; min-width: 220px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: var(--fhc-background); color: var(--fhc-text); border: 1px solid; z-index: 9999; min-width: 220px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
|
||||
const updateDisplay = () => {
|
||||
display.value = options
|
||||
@@ -493,10 +493,10 @@ export const AbgabetoolMitarbeiter = {
|
||||
const display = document.createElement('input');
|
||||
display.readOnly = true;
|
||||
display.placeholder = '';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: #fff; appearance: none; caret-color: transparent;';
|
||||
display.style.cssText = 'padding: 4px; width: 100%; box-sizing: border-box; cursor: default; border: 1px solid; outline: none; background: var(--fhc-background); color: var(--fhc-text); appearance: none; caret-color: transparent;';
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: #fff; border: 1px solid; z-index: 9999; min-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
dropdown.style.cssText = 'display: none; position: fixed; background: var(--fhc-background); color: var(--fhc-text); border: 1px solid; z-index: 9999; min-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);';
|
||||
|
||||
options.forEach(opt => {
|
||||
const row = document.createElement('label');
|
||||
@@ -1195,7 +1195,7 @@ export const AbgabetoolMitarbeiter = {
|
||||
},
|
||||
detailFormatter(cell) {
|
||||
return '<div style="display: flex; justify-content: start; align-items: center; height: 100%">' +
|
||||
'<a><i class="fa fa-folder-open" style="color:#00649C"></i></a></div>'
|
||||
'<a><i class="fa fa-folder-open fhc-primary-color"></i></a></div>'
|
||||
},
|
||||
pkzTextFormatter(cell) {
|
||||
const val = cell.getValue()
|
||||
|
||||
@@ -222,22 +222,22 @@ export const AbgabetoolStudent = {
|
||||
|
||||
if(val.mode === 'detailTermine') {
|
||||
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">' +
|
||||
'<a><i class="fa fa-folder-open" style="color:#00649C"></i></a></div>'
|
||||
'<a><i class="fa fa-folder-open fhc-primary-color"></i></a></div>'
|
||||
} else if (val.mode === 'beurteilungDownload') {
|
||||
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">' +
|
||||
'<a><i class="fa fa-file-pdf" style="color:#00649C"></i></a></div>'
|
||||
'<a><i class="fa fa-file-pdf fhc-primary-color"></i></a></div>'
|
||||
}
|
||||
},
|
||||
mailFormatter(cell) {
|
||||
const val = cell.getValue()
|
||||
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">' +
|
||||
'<a href='+val+'><i class="fa fa-envelope" style="color:#00649C"></i></a></div>'
|
||||
'<a href='+val+'><i class="fa fa-envelope fhc-primary-color"></i></a></div>'
|
||||
},
|
||||
beurteilungFormatter(cell) {
|
||||
const val = cell.getValue()
|
||||
if(val) {
|
||||
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">' +
|
||||
'<a><i class="fa fa-file-pdf" style="color:#00649C"></i></a></div>'
|
||||
'<a><i class="fa fa-file-pdf fhc-primary-color"></i></a></div>'
|
||||
} else return '-'
|
||||
},
|
||||
buildMailToLink(projekt) {
|
||||
@@ -518,7 +518,7 @@ export const AbgabetoolStudent = {
|
||||
<div class="row mt-2">
|
||||
<div class="col-4 col-md-3 fw-bold">{{ getErstbetreuerEmailLabel(projektarbeit) }}</div>
|
||||
<div class="col-8 col-md-9">
|
||||
<a :href="getMailLink(projektarbeit)"><i class="fa fa-envelope" style="color:#00649C"></i></a>
|
||||
<a :href="getMailLink(projektarbeit)"><i class="fa fa-envelope fhc-primary-color"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="projektarbeit.zweitbetreuer_person_id || projektarbeit.zweitbetreuer" class="row mt-2">
|
||||
@@ -530,7 +530,7 @@ export const AbgabetoolStudent = {
|
||||
<div v-if="projektarbeit.zweitbetreuer_person_id || projektarbeit.zweitbetreuer" class="row mt-2">
|
||||
<div class="col-4 col-md-3 fw-bold">{{ getZweitbetreuerEmailLabel(projektarbeit) }}</div>
|
||||
<div class="col-8 col-md-9">
|
||||
<a v-if="projektarbeit.zweitbetreuer_mail" :href="getZweitbetreuerMailLink(projektarbeit)"><i class="fa fa-envelope" style="color:#00649C"></i></a>
|
||||
<a v-if="projektarbeit.zweitbetreuer_mail" :href="getZweitbetreuerMailLink(projektarbeit)"><i class="fa fa-envelope fhc-primary-color"></i></a>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1291,7 +1291,7 @@ export const Benotungstool = {
|
||||
|
||||
const data = cell.getData()
|
||||
if(field == 'note' && data.note && data.note != data.lv_note) {
|
||||
style += 'color:red; border-color:red; border-style:solid; border-width:1px;'
|
||||
style += 'color: var(--fhc-danger, red); border-color: var(--fhc-danger, red); border-style:solid; border-width:1px;'
|
||||
}
|
||||
|
||||
const match = this.notenOptions.find(opt => opt.note == value)
|
||||
@@ -1310,7 +1310,7 @@ export const Benotungstool = {
|
||||
'<div data-cy="freigabe-state" data-state="' + value + '" style="' + style + '">' + icon + '</div>'
|
||||
|
||||
if(value === 'ok') {
|
||||
return wrap('<i class="fa fa-circle-check" style="color:green"></i>')
|
||||
return wrap('<i class="fa fa-circle-check" style="color: var(--fhc-success, green)"></i>')
|
||||
} else if (value === 'offen') {
|
||||
return wrap('<i class="fa-regular fa-circle"></i>')
|
||||
} else if (value === 'changed') {
|
||||
@@ -1604,7 +1604,7 @@ export const Benotungstool = {
|
||||
let style = 'display: flex; justify-content: center; align-items: center; height: 100%;'
|
||||
|
||||
return '<div style="'+style+'">' +
|
||||
'<a href='+val+'><i class="fa fa-envelope" style="color:#00649C"></i></a></div>'
|
||||
'<a href='+val+'><i class="fa fa-envelope fhc-primary-color"></i></a></div>'
|
||||
},
|
||||
percentFormatter(cell) {
|
||||
const data = cell.getData()
|
||||
@@ -1682,7 +1682,7 @@ export const Benotungstool = {
|
||||
// some moodle noten are numeric, some are strings like "Sehr Gut", "Bestanden" etc...
|
||||
const notenOption = this.notenOptions.find(n=>n.note == g.grade || n.bezeichnung == g.grade)
|
||||
if(notenOption.positiv) s.teilnote += ('<span>'+g.text +'</span>'+ '<br/>')
|
||||
else s.teilnote += ('<span style="color: red;">'+g.text +'</span>'+ '<br/>')
|
||||
else s.teilnote += ('<span style="color: var(--fhc-danger, red);">'+g.text +'</span>'+ '<br/>')
|
||||
})
|
||||
|
||||
this.recalculateSelectable(s)
|
||||
|
||||
@@ -74,7 +74,7 @@ export const MyReservation = {
|
||||
|
||||
const createButton = (iconClass, titleKey, clickHandler) => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-outline-secondary';
|
||||
btn.className = 'btn btn-outline-secondary fhc-action-btn';
|
||||
btn.style.display = "flex";
|
||||
btn.style.alignItems = "center"; // center icon vertically
|
||||
btn.style.justifyContent = "center"; // center icon horizontally
|
||||
@@ -82,7 +82,7 @@ export const MyReservation = {
|
||||
btn.style.aspectRatio = "1 / 1"; // keep square shape (optional)
|
||||
btn.style.padding = "0"; // remove extra padding for compactness
|
||||
if(iconClass == 'fa fa-timeline') btn.style.transform = "rotate(90deg)";
|
||||
btn.innerHTML = `<i class="${iconClass}" style="color:#00649C; font-size:1.1rem;"></i>`;
|
||||
btn.innerHTML = `<i class="${iconClass}" style="font-size:1.1rem;"></i>`;
|
||||
btn.title = this.$capitalize(this.$p.t(titleKey));
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -117,8 +117,8 @@ export default {
|
||||
v-show="!loading"
|
||||
ref="modalContainer"
|
||||
v-bind="$props"
|
||||
header-class="bg-light"
|
||||
footer-class="bg-light"
|
||||
header-class="bg-body-tertiary"
|
||||
footer-class="bg-body-tertiary"
|
||||
body-class=""
|
||||
dialog-class="modal-lg"
|
||||
class="bootstrap-alert"
|
||||
|
||||
@@ -48,7 +48,7 @@ export const ProjektabgabeUebersicht = {
|
||||
container.className = "d-flex gap-2";
|
||||
|
||||
let downloadButton = document.createElement('button');
|
||||
downloadButton.className = 'btn btn-outline-secondary';
|
||||
downloadButton.className = 'btn btn-outline-secondary fhc-action-btn';
|
||||
downloadButton.innerHTML = '<i class="fa fa-download"></i>';
|
||||
downloadButton.title = this.$p.t('ui', 'downloadDok');
|
||||
downloadButton.addEventListener('click', evt => {
|
||||
@@ -60,7 +60,7 @@ export const ProjektabgabeUebersicht = {
|
||||
if (this.showEdit)
|
||||
{
|
||||
let editButton = document.createElement('button');
|
||||
editButton.className = 'btn btn-outline-secondary';
|
||||
editButton.className = 'btn btn-outline-secondary fhc-action-btn';
|
||||
editButton.innerHTML = '<i class="fa fa-edit"></i>';
|
||||
//editButton.addEventListener('click', () =>
|
||||
//this.$refs.edit.open(cell.getData())
|
||||
|
||||
@@ -136,7 +136,7 @@ export default {
|
||||
:''
|
||||
}}</th>
|
||||
<td>
|
||||
<a v-if="event.ort_content_id" :aria-label="$p.t('global','raum')" :title="$p.t('global','raum')" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true" style="color:#00649C"></i></a>
|
||||
<a v-if="event.ort_content_id" :aria-label="$p.t('global','raum')" :title="$p.t('global','raum')" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" aria-hidden="true"></i></a>
|
||||
{{event.ort_kurzbz}}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -157,7 +157,7 @@ export default {
|
||||
<td>
|
||||
<div id="lektorenContainer">
|
||||
<div v-for="lektor in event.lektor" class="d-block">
|
||||
<a v-if="lektorenLinks[lektor.kurzbz]" :aria-label="$p.t('lehre','lektor')" :title="$p.t('lehre','lektor')" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C" aria-hidden="true"></i></a>
|
||||
<a v-if="lektorenLinks[lektor.kurzbz]" :aria-label="$p.t('lehre','lektor')" :title="$p.t('lehre','lektor')" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" aria-hidden="true"></i></a>
|
||||
{{lektor.kurzbz}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -87,7 +87,7 @@ export default {
|
||||
:''
|
||||
}}</th>
|
||||
<td>
|
||||
<a v-if="event.ort_content_id" :aria-label="$p.t('global','raum')" :title="$p.t('global','raum')" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C" aria-hidden="true"></i></a>
|
||||
<a v-if="event.ort_content_id" :aria-label="$p.t('global','raum')" :title="$p.t('global','raum')" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" aria-hidden="true"></i></a>
|
||||
{{event.ort_kurzbz}}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -107,7 +107,7 @@ export default {
|
||||
}}</th>
|
||||
<td>
|
||||
<div v-for="lektor in event.lektor" class="d-block">
|
||||
<a v-if="lektorenLinks[lektor.kurzbz]" :aria-label="$p.t('lehre','lektor')" :tooltip="$p.t('lehre','lektor')" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true" style="color:#00649C"></i></a>
|
||||
<a v-if="lektorenLinks[lektor.kurzbz]" :aria-label="$p.t('lehre','lektor')" :tooltip="$p.t('lehre','lektor')" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" aria-hidden="true"></i></a>
|
||||
{{lektor.kurzbz}}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -275,7 +275,7 @@ export default {
|
||||
:aria-label="$p.t('dashboard/widget_pin')"
|
||||
@click="pinItem"
|
||||
>
|
||||
<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color:lightgray;"></i>
|
||||
<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color: var(--fhc-disabled, lightgray);"></i>
|
||||
</div>
|
||||
</template>
|
||||
<!-- widget link -->
|
||||
|
||||
@@ -148,7 +148,7 @@ export default {
|
||||
<div class="d-flex">
|
||||
<div class="text-muted small me-auto"><small>{{$p.t('ampeln','ampelnDeadline',{value:getDate(ampel.deadline)})}}</small></div>
|
||||
<div v-if="(new Date() > new Date(ampel.deadline)) && !ampel.bestaetigt "><span class="badge bg-danger"><i class="fa fa-solid fa-bolt"></i></span></div>
|
||||
<div v-if="ampel.verpflichtend"><span class="badge bg-warning ms-1"><i class="fa fa-solid fa-triangle-exclamation"></i></span></div>
|
||||
<div v-if="ampel.verpflichtend"><span class="badge text-bg-warning ms-1"><i class="fa fa-solid fa-triangle-exclamation"></i></span></div>
|
||||
<div v-if="ampel.bestaetigt"><span class="badge bg-success ms-1"><i class="fa fa-solid fa-circle-check"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,7 +232,7 @@ export default {
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="ampel.verpflichtend">
|
||||
<span class="badge bg-warning ms-1">
|
||||
<span class="badge text-bg-warning ms-1">
|
||||
<i class="fa fa-solid fa-triangle-exclamation"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -297,7 +297,7 @@ export default {
|
||||
<span
|
||||
v-if="hasTags(link)"
|
||||
:title="hasTags(link)"
|
||||
style="color: silver;"
|
||||
style="color: var(--fhc-disabled, silver);"
|
||||
>
|
||||
<i
|
||||
class="fa fa-solid fa-tag text-gray-500"
|
||||
|
||||
Reference in New Issue
Block a user