$primaryColor: #004699 !default; $primaryLightColor: #3276bd !default; $primaryDarkColor: #002d67 !default; $primaryDarkerColor: #022541 !default; $primaryTextColor: #ffffff !default; $highlightBg: #eff6ff !default; $highlightTextColor: $primaryDarkerColor !default; $highlightFocusBg: rgba($primaryColor, 0.24) !default; @import "../_variables"; @import "./_fonts"; @import "../../../../theme-base/_components"; @import "../_extensions"; :root { h1, h2, h3, h4, h5, h6 { font-weight: 100; } .fc { /* FullCalendar 4 */ /* FullCalendar 5 */ // set the background color of the calendar transparent --fc-page-bg-color: transparent; } .fc.fc-unthemed .fc-view-container th { background: $primaryTextColor; /*#071426*/ border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(255, 255, 255, 0.87); } .fc.fc-unthemed .fc-view-container td.fc-widget-content { border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(255, 255, 255, 0.87); } .fc.fc-unthemed .fc-view-container td.fc-head-container { border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ } .fc.fc-unthemed .fc-view-container .fc-view { background: $primaryTextColor; /*#071426*/ } .fc.fc-unthemed .fc-view-container .fc-row { border-right: 1px solid $primaryTextColor; /*#0b213f*/ } .fc.fc-unthemed .fc-view-container .fc-event { background: map-get($colors, "primary"); border: 1px solid map-get($colors, "primary-24"); color: $primaryTextColor; /*#1c2127*/ } .fc.fc-unthemed .fc-view-container .fc-divider { background: $primaryTextColor; /*#071426*/ border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ } .fc.fc-unthemed .fc-toolbar .fc-button { color: $primaryTextColor; /*#1c2127*/ background: map-get($colors, "primary"); /*#93c5fd*/ border: 1px solid map-get($colors, "primary"); /*#93c5fd*/ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; display: flex; align-items: center; } .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover { background: map-get($colors, "primary"); color: $primaryTextColor; /*#1c2127*/ border-color: map-get($colors, "primary-24"); } .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active { background: map-get($colors, "primary"); color: $primaryTextColor; /*#1c2127*/ border-color: map-get($colors, "primary-24"); } .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ } .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left { font-family: "PrimeIcons" !important; text-indent: 0; font-size: 1rem; } .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before { content: "\e900"; } .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right { font-family: "PrimeIcons" !important; text-indent: 0; font-size: 1rem; } .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before { content: "\e901"; } .fc.fc-unthemed .fc-toolbar .fc-button:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ } .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button { background: $primaryTextColor; /*#071426*/ border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover { background: rgba(255, 255, 255, 0.03); border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(255, 255, 255, 0.87); } .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { background: map-get($colors, "primary"); /*#93c5fd*/ border-color: map-get($colors, "primary"); /*#93c5fd*/ color: $primaryTextColor; /*#1c2127*/ } .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { background: map-get($colors, "primary"); border-color: map-get($colors, "primary-24"); color: $primaryTextColor; /*#1c2127*/ } .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ z-index: 1; } .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button { border-radius: 0; } .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid { border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/ } .fc.fc-theme-standard .fc-view-harness th { background: $primaryTextColor; /*#071426*/ border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(map-get($colors, "htwk-schwarz"), 0.87); } .fc.fc-theme-standard .fc-view-harness td { color: rgba(map-get($colors, "htwk-schwarz"), 0.87); border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/ } .fc.fc-theme-standard .fc-view-harness .fc-view { background: $primaryTextColor; /*#071426*/ } .fc.fc-theme-standard .fc-view-harness .fc-popover { background: none; border: 0 none; } .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header { border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ padding: 1.25rem; background: $primaryTextColor; /*#071426*/ color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close { opacity: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: "PrimeIcons" !important; font-size: 1rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before { content: "\e90b"; } .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ } .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body { padding: 1.25rem; border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ background: $primaryTextColor; /*#071426*/ color: rgba(255, 255, 255, 0.87); border-top: 0 none; } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event { color: $primaryTextColor; /*#1c2127*/ background: map-get($colors, "primary"); border-color: map-get($colors, "primary-24"); } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main { color: $primaryTextColor; /*#1c2127*/ } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot { background: map-get($colors, "primary"); border-color: map-get($colors, "primary-24"); } .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded { background: $primaryTextColor; /*#071426*/ } .fc.fc-theme-standard .fc-toolbar .fc-button { color: $primaryTextColor; /*#1c2127*/ background: map-get($colors, "primary"); /*#93c5fd*/ border: 1px solid map-get($colors, "primary"); /*#93c5fd*/ font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; } .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover { background: map-get($colors, "primary-24"); color: $primaryTextColor; /*#1c2127*/ border-color: map-get($colors, "primary-24"); } .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active { background: map-get($colors, "htwk-grau-60"); color: $primaryTextColor; /*#1c2127*/ border-color: map-get($colors, "primary-24"); } .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ } .fc.fc-theme-standard .fc-toolbar .fc-button:disabled { opacity: 0.4; color: $primaryTextColor; /*#1c2127*/ background: map-get($colors, "primary"); /*#93c5fd*/ border: 1px solid map-get($colors, "primary"); /*#93c5fd*/ } .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left { font-family: "PrimeIcons" !important; text-indent: 0; font-size: 1rem; } .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before { content: "\e900"; } .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right { font-family: "PrimeIcons" !important; text-indent: 0; font-size: 1rem; } .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before { content: "\e901"; } .fc.fc-theme-standard .fc-toolbar .fc-button:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ } .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button { background: $primaryTextColor; /*#071426*/ border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover { background: rgba(255, 255, 255, 0.03); border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/ color: rgba(255, 255, 255, 0.87); } .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active { background: map-get($colors, "primary"); /*#93c5fd*/ border-color: map-get($colors, "primary"); /*#93c5fd*/ color: $primaryTextColor; /*#1c2127*/ } .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover { background: map-get($colors, "primary"); border-color: map-get($colors, "primary-24"); color: $primaryTextColor; /*#1c2127*/ } .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/ z-index: 1; } .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button { border-radius: 0; } .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .fc.fc-theme-standard .fc-highlight { color: rgba(255, 255, 255, 0.87); background: rgba( map-get($colors, "primary"), 0.16 ); /*rgba(147, 197, 253, 0.16)*/ } }