mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-22 01:12:17 +00:00
CSS updates
This commit is contained in:
chfhtw
@@ -15,7 +15,7 @@ $includesArray = array(
|
||||
'public/css/components/searchbar/searchbar.css',
|
||||
'public/css/Fhc.css',
|
||||
'public/css/components/dashboard.css',
|
||||
'public/css/components/calendar.css',
|
||||
//'public/css/components/calendar.css', <= imported in dashboard.css
|
||||
'public/css/components/Sprachen.css',
|
||||
'public/css/components/MyLv.css',
|
||||
'public/css/components/FilterComponent.css',
|
||||
@@ -40,7 +40,7 @@ $includesArray = array(
|
||||
|
||||
$this->load->view('templates/CISVUE-Header', $includesArray);
|
||||
?>
|
||||
<div id="fhccontent" route=<?php echo $route ?>>
|
||||
<div id="fhccontent" class="h-100" route=<?php echo $route ?>>
|
||||
<router-view
|
||||
:view-data='<?php echo json_encode($viewData) ?>'
|
||||
></router-view>
|
||||
|
||||
@@ -1,136 +1,52 @@
|
||||
@import './calendar/frame.css';
|
||||
@import './calendar/events.css';
|
||||
@import './calendar/backgrounds.css';
|
||||
|
||||
/* Themable Variables */
|
||||
:root {
|
||||
--fhc-calendar-pane-height: calc(100vh - 220px);
|
||||
|
||||
--fhc-calendar-primary: var(--fhc-primary, #006095);
|
||||
--fhc-calendar-border: var(--fhc-border, #dee2e6);
|
||||
--fhc-calendar-border-highlight: var(--fhc-border-highlight, #495057);
|
||||
--fhc-calendar-text: var(--fhc-text, #212529);
|
||||
--fhc-calendar-text-light: var(--fhc-text, #212529);
|
||||
--fhc-calendar-background: var(--fhc-background, #fff);
|
||||
--fhc-calendar-dark: var(--fhc-dark, #212529);
|
||||
--fhc-calendar-hour-indicator-bg: var(--fhc-background, #fff);
|
||||
--fhc-calendar-week-page-header-background: var(--fhc-background, #fff);
|
||||
--fhc-calendar-week-page-header-color: var(--fhc-text, #212529);
|
||||
--fhc-calendar-week-page-header-border: var(--fhc-border, #dee2e6);
|
||||
--fhc-calendar-week-page-header-hover-background: var(--fhc-background-highlight, #d5dae0);
|
||||
--fhc-calendar-all-day-event-background: var(--fhc-background, #fff);
|
||||
--fhc-calendar-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
|
||||
--fhc-calendar-box-shadow: var(--fhc-box-shadow, #dee2e6);
|
||||
}
|
||||
/* --fhc-calendar-pane-height: calc(100vh - 220px);
|
||||
|
||||
--fhc-calendar-primary: var(--fhc-primary, #006095);
|
||||
--fhc-calendar-border-highlight: var(--fhc-border-highlight, #495057);
|
||||
--fhc-calendar-text: var(--fhc-text, #212529);
|
||||
--fhc-calendar-text-light: var(--fhc-text, #212529);
|
||||
--fhc-calendar-background: var(--fhc-background, #fff);
|
||||
--fhc-calendar-dark: var(--fhc-dark, #212529);
|
||||
--fhc-calendar-hour-indicator-bg: var(--fhc-background, #fff);
|
||||
--fhc-calendar-week-page-header-background: var(--fhc-background, #fff);
|
||||
--fhc-calendar-week-page-header-color: var(--fhc-text, #212529);
|
||||
--fhc-calendar-week-page-header-border: var(--fhc-border, #dee2e6);
|
||||
--fhc-calendar-week-page-header-hover-background: var(--fhc-background-highlight, #d5dae0);
|
||||
--fhc-calendar-all-day-event-background: var(--fhc-background, #fff);
|
||||
--fhc-calendar-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
|
||||
--fhc-calendar-box-shadow: var(--fhc-box-shadow, #dee2e6);*/
|
||||
|
||||
--fhc-calendar-gap: var(--fhc-border, #dee2e6);
|
||||
--fhc-calendar-bg: var(--fhc-background, #fff);
|
||||
--fhc-calendar-border: var(--fhc-border, #dee2e6);
|
||||
|
||||
--fhc-calendar-bg-event: var(--fhc-white-80, #ccc);
|
||||
--fhc-calendar-border-event: var(--bs-secondary, #6c757d);
|
||||
--fhc-calendar-radius-event: var(--bs-border-radius, .375rem);
|
||||
--fhc-calendar-fontsize-event: .875em;
|
||||
|
||||
/* Labels */
|
||||
/* ====== */
|
||||
.fhc-calendar-base-label-dow .short,
|
||||
.fhc-calendar-base-label-dow .narrow,
|
||||
.fhc-calendar-base-label-day .full,
|
||||
.fhc-calendar-base-label-day .short,
|
||||
.fhc-calendar-base-label-day .narrow,
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-day .long,
|
||||
.collapsed-header .fhc-calendar-base-label-day .long,
|
||||
.collapsed-header .fhc-calendar-base-label-dow .long {
|
||||
display: none;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-day .narrow,
|
||||
.collapsed-header .fhc-calendar-base-label-day .short,
|
||||
.collapsed-header .fhc-calendar-base-label-dow .short {
|
||||
display: block;
|
||||
}
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-label-day,
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-label-day {
|
||||
font-size: .875em;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-week {
|
||||
text-align: right;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-week span {
|
||||
color: var(--bs-secondary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-week span + span:before {
|
||||
content: "/";
|
||||
}
|
||||
--fhc-calendar-bg-markings-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
|
||||
--fhc-calendar-border-markings-past: var(--fhc-calendar-border);
|
||||
--fhc-calendar-bg-markings-past-label: var(--fhc-calendar-bg);
|
||||
--fhc-calendar-border-markings-past-label: var(--fhc-calendar-border);
|
||||
|
||||
--fhc-calendar-gap-header: transparent;
|
||||
--fhc-calendar-gap-allday: transparent;
|
||||
--fhc-calendar-gap-body: transparent;
|
||||
--fhc-calendar-bg-header: var(--fhc-calendar-bg);
|
||||
--fhc-calendar-bg-allday: var(--fhc-calendar-bg);
|
||||
--fhc-calendar-bg-body: var(--fhc-calendar-bg);
|
||||
|
||||
/* Base Grid */
|
||||
/* ========= */
|
||||
/* Grid */
|
||||
.fhc-calendar-base-grid {
|
||||
--fhc-calendar-axis-collapsible: .2fr;
|
||||
background-color: var(--bs-border-color);
|
||||
grid-gap: 2px;
|
||||
--fhc-calendar-bg-overlay1: var(--fhc-calendar-bg);
|
||||
--fhc-calendar-bg-overlay2: var(--fhc-dark, #212529);
|
||||
|
||||
--fhc-calendar-radius-day-event: var(--fhc-calendar-radius-event);
|
||||
--fhc-calendar-radius-week-event: var(--fhc-calendar-radius-event);
|
||||
--fhc-calendar-radius-month-event: 0;
|
||||
--fhc-calendar-radius-list-event: 0;
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-header {
|
||||
background-color: var(--bs-gray-200);
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-main {
|
||||
grid-gap: 1px;
|
||||
}
|
||||
.fhc-calendar-base-grid-line {
|
||||
grid-gap: 1px;
|
||||
}
|
||||
.fhc-calendar-mode-month .main-header,
|
||||
.fhc-calendar-base-grid .part-header,
|
||||
.fhc-calendar-base-grid .part-body {
|
||||
background-color: rgba(255,255,255, 1);
|
||||
}
|
||||
.fhc-calendar-base-label-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
/* Events */
|
||||
.fhc-calendar-base-grid-line-event.event-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
.fhc-calendar-base-grid-line-event.event-header .disabled {
|
||||
opacity: .3;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line {
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
font-size: .8rem;
|
||||
grid-auto-rows: 1.5em;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
|
||||
text-indent: .5em;
|
||||
height: 1.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* Customize */
|
||||
/* ========= */
|
||||
/* Header */
|
||||
.fhc-calendar-base-header > .row {
|
||||
align-items: center;
|
||||
}
|
||||
/* Events */
|
||||
.event-colored {
|
||||
background: rgba(var(--event-color-rgb), .5);
|
||||
min-height: 100%;
|
||||
}
|
||||
.event-colored:hover {
|
||||
background: rgba(var(--event-color-rgb), .3);
|
||||
}
|
||||
/* Backgrounds */
|
||||
.background-past {
|
||||
background: var(--fhc-calendar-past);
|
||||
border-bottom: solid 1px var(--fhc-calendar-border);
|
||||
}
|
||||
.background-past > span {
|
||||
display: none;
|
||||
}
|
||||
.background-past.bg-end > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 1rem;
|
||||
padding: 0 .5rem;
|
||||
background-color: var(--fhc-background);
|
||||
border: solid 1px var(--fhc-calendar-border);
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
.background-past {
|
||||
background-color: var(--fhc-calendar-bg-markings-past);
|
||||
border-bottom: solid 1px var(--fhc-calendar-border-markings-past);
|
||||
}
|
||||
.background-past > span {
|
||||
display: none;
|
||||
}
|
||||
.background-past.bg-end > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 1rem;
|
||||
padding: 0 .5rem;
|
||||
background-color: var(--fhc-calendar-bg-markings-past-label);
|
||||
border: solid 1px var(--fhc-calendar-border-markings-past-label);
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
.fhc-calendar-base-grid-line-event {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event .weekPageContainer {
|
||||
padding: .25rem;
|
||||
}
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event,
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event {
|
||||
margin: 0 .5rem;
|
||||
font-size: var(--fhc-calendar-fontsize-event, .875rem);
|
||||
}
|
||||
.fhc-calendar-mode-day .all-day-events .fhc-calendar-base-grid-line-event,
|
||||
.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event {
|
||||
margin: .25rem;
|
||||
}
|
||||
/* Border */
|
||||
.fhc-calendar-mode-day .grid-main .fhc-calendar-base-grid-line-event > *,
|
||||
.fhc-calendar-mode-week .grid-main .fhc-calendar-base-grid-line-event > * {
|
||||
border: solid 1px var(--fhc-calendar-border-event);
|
||||
}
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event {
|
||||
--event-radius: var(--fhc-calendar-radius-day-event, 0);
|
||||
}
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event {
|
||||
--event-radius: var(--fhc-calendar-radius-week-event, 0);
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
|
||||
--event-radius: var(--fhc-calendar-radius-month-event, 0);
|
||||
}
|
||||
.fhc-calendar-mode-list .fhc-calendar-base-grid-line-event {
|
||||
--event-radius: var(--fhc-calendar-radius-list-event, 0);
|
||||
}
|
||||
.fhc-calendar-mode-day .all-day-events .fhc-calendar-base-grid-line-event > *,
|
||||
.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event > *,
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event.event-begin > *,
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event.event-begin > * {
|
||||
border-top-left-radius: var(--event-radius);
|
||||
border-top-right-radius: var(--event-radius);
|
||||
}
|
||||
.fhc-calendar-mode-day .all-day-events .fhc-calendar-base-grid-line-event > *,
|
||||
.fhc-calendar-mode-week .all-day-events .fhc-calendar-base-grid-line-event > *,
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-grid-line-event.event-end > *,
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-grid-line-event.event-end > * {
|
||||
border-bottom-left-radius: var(--event-radius);
|
||||
border-bottom-right-radius: var(--event-radius);
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-begin > * {
|
||||
border-top-left-radius: var(--event-radius);
|
||||
border-bottom-left-radius: var(--event-radius);
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-end > * {
|
||||
border-top-right-radius: var(--event-radius);
|
||||
border-bottom-right-radius: var(--event-radius);
|
||||
}
|
||||
/* Colors */
|
||||
.fhc-calendar-base-grid-line-event {
|
||||
--event-default-bg: var(--fhc-calendar-bg-event, #ccc);
|
||||
}
|
||||
.fhc-calendar-base-grid-line-event .event-type-reservierung {
|
||||
--event-default-bg: var(--fhc-calendar-bg-reservierung, #fff);
|
||||
}
|
||||
.fhc-calendar-base-grid-line-event > * {
|
||||
background-color: var(--event-bg, var(--event-default-bg));
|
||||
}
|
||||
.fhc-calendar-base-grid-line-event > *:hover {
|
||||
filter: brightness(120%);
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
/* Labels */
|
||||
/* ====== */
|
||||
.fhc-calendar-base-label-dow .short,
|
||||
.fhc-calendar-base-label-dow .narrow,
|
||||
.fhc-calendar-base-label-day .full,
|
||||
.fhc-calendar-base-label-day .short,
|
||||
.fhc-calendar-base-label-day .narrow,
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-day .long,
|
||||
.collapsed-header .fhc-calendar-base-label-day .long,
|
||||
.collapsed-header .fhc-calendar-base-label-dow .long {
|
||||
display: none;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-day .narrow,
|
||||
.collapsed-header .fhc-calendar-base-label-day .short,
|
||||
.collapsed-header .fhc-calendar-base-label-dow .short {
|
||||
display: block;
|
||||
}
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-label-day,
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-label-day {
|
||||
font-size: .875em;
|
||||
}
|
||||
.fhc-calendar-mode-day .main-header,
|
||||
.fhc-calendar-mode-week .main-header {
|
||||
text-align: center;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-label-week {
|
||||
text-align: right;
|
||||
}
|
||||
.fhc-calendar-base-label-week {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
.fhc-calendar-base-label-time,
|
||||
.fhc-calendar-base-label-day,
|
||||
.fhc-calendar-base-label-week {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.fhc-calendar-mode-day .fhc-calendar-base-label-dow,
|
||||
.fhc-calendar-mode-week .fhc-calendar-base-label-dow,
|
||||
.fhc-calendar-base-label-day,
|
||||
.fhc-calendar-base-label-week {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fhc-calendar-base-label-week span + span:before {
|
||||
content: "/";
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header {
|
||||
--event-bg: transparent;
|
||||
font-weight: bold;
|
||||
text-indent: 0;
|
||||
font-size: var(--fhc-calendar-fontsize-month-day, 1rem);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header .disabled {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
|
||||
/* Base Grid */
|
||||
/* ========= */
|
||||
/* Grid */
|
||||
.fhc-calendar-base-grid {
|
||||
--fhc-calendar-axis-collapsible: .2fr;
|
||||
background-color: var(--fhc-calendar-gap);
|
||||
grid-gap: 2px;
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-header {
|
||||
background-color: var(--fhc-calendar-gap-header);
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-header:before,
|
||||
.fhc-calendar-base-grid .grid-allday:before {
|
||||
content: "";
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-header:before,
|
||||
.fhc-calendar-base-grid .grid-header .main-header {
|
||||
background-color: var(--fhc-calendar-bg-header);
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-allday {
|
||||
background-color: var(--fhc-calendar-gap-allday);
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-allday:before,
|
||||
.fhc-calendar-base-grid .grid-allday .all-day-events {
|
||||
background-color: var(--fhc-calendar-bg-allday);
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-main {
|
||||
grid-gap: 1px;
|
||||
background-color: var(--fhc-calendar-gap-body);
|
||||
}
|
||||
.fhc-calendar-base-grid .grid-main .part-header,
|
||||
.fhc-calendar-base-grid .grid-main .part-body {
|
||||
background-color: var(--fhc-calendar-bg-body);
|
||||
}
|
||||
.fhc-calendar-base-grid-line {
|
||||
grid-gap: 1px;
|
||||
}
|
||||
.fhc-calendar-base-label-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
/* Header */
|
||||
.fhc-calendar-base-header > .row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Modes */
|
||||
/* ===== */
|
||||
/* Day */
|
||||
.fhc-calendar-mode-day .event-details {
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
border-left: solid 1px var(--fhc-calendar-gap);
|
||||
}
|
||||
/* Month */
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line {
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
grid-template-rows: 2em;
|
||||
grid-auto-rows: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
|
||||
font-size: var(--fhc-calendar-fontsize-event, .875rem);
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
|
||||
text-indent: .5em;
|
||||
height: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
|
||||
overflow: hidden;
|
||||
}
|
||||
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event * {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Overlays */
|
||||
/* ======== */
|
||||
/* No Events */
|
||||
.fhc-calendar-no-events-overlay {
|
||||
background: linear-gradient(120deg, var(--fhc-calendar-bg-overlay1), var(--fhc-calendar-bg-overlay2));
|
||||
opacity: .7;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -76,7 +76,6 @@ export default {
|
||||
<label-day
|
||||
v-if="slot.event.orig == 'header'"
|
||||
:date="slot.event.start"
|
||||
class="text-center"
|
||||
:class="{ disabled: day.month != slot.event.start.month }"
|
||||
/>
|
||||
<slot v-else v-bind="slot" />
|
||||
|
||||
@@ -56,11 +56,9 @@ export default {
|
||||
<label-dow
|
||||
v-bind="{ date }"
|
||||
@cal-click="evt => evt.detail.source = 'day'"
|
||||
class="text-center"
|
||||
/>
|
||||
<label-day
|
||||
v-bind="{ date }"
|
||||
class="text-center"
|
||||
/>
|
||||
</template>
|
||||
<template #part-header="{ part }">
|
||||
|
||||
Reference in New Issue
Block a user