mirror of
https://gitlab.opencode.de/bmi/opendesk/deployment/opendesk.git
synced 2025-12-06 07:21:36 +01:00
521 lines
13 KiB
CSS
521 lines
13 KiB
CSS
/**
|
|
* SPDX-FileCopyrightText: 2023 Bundesministerium des Innern und für Heimat, PG ZenDiS "Projektgruppe für Aufbau ZenDiS"
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
:root {
|
|
/* used to accent some elements: checkbox/radiobox, checked toggle buttons/checked input fields */
|
|
--color-accent: #571EFA;
|
|
--color-opendesk-secondary: #f5f5f5;
|
|
--color-opendesk-secondary-dark: #c7b3f3;
|
|
--color-opendesk-white: #ffffff;
|
|
--color-opendesk-black: #000000;
|
|
--bgc-announcements-info: #adb3bc;
|
|
--bgc-announcements-warn: #ffc700;
|
|
--bgc-announcements-success: #00ffcd;
|
|
--bgc-announcements-danger: #ff529e;
|
|
--bgc-content-body: var(--color-opendesk-secondary);
|
|
--bgc-content-container: var(--color-opendesk-white);
|
|
--bgc-content-header: var(--bgc-content-container);
|
|
--bgc-inputfield-on-container: var(--color-opendesk-white);
|
|
--bgc-inputborder-on-container: var(--color-opendesk-secondary);
|
|
--bgc-inputfield-on-body: var(--bgc-content-container);
|
|
--bgc-checkbox-hover: rgba(255, 255, 255, 0.06);
|
|
--bgc-checkbox-focus: rgba(255, 255, 255, 0.12);
|
|
--bgc-loading-circle: var(--font-color-contrast-middle);
|
|
--bgc-user-menu-item-hover: rgba(255, 255, 255, 0.1);
|
|
--bgc-user-menu-item-active: rgba(255, 255, 255, 0.2);
|
|
--bgc-header-number-circle: var(--color-accent);
|
|
--bgc-tab-separator: var(--color-opendesk-secondary);
|
|
--bgc-popup: #d0d0d0;
|
|
--bgc-popup-item-hover: rgba(0, 0, 0, 0.15);
|
|
--bgc-popup-item-active: rgba(0, 0, 0, 0.3);
|
|
--bgc-popup-item-selected: rgba(0, 0, 0, 0.3);
|
|
--bgc-grid-row-hover: rgba(255, 255, 255, 0.04);
|
|
--bgc-grid-row-selected: var(--bgc-grid-row-hover);
|
|
--bgc-tree-row-hover: var(--bgc-grid-row-hover);
|
|
--bgc-tree-row-selected: rgba(255, 255, 255, 0.15);
|
|
--bgc-apptile-default: var(--color-opendesk-white);
|
|
--bgc-appcenter-app-hover: rgba(255, 255, 255, 0.08);
|
|
--bgc-appcenter-app-active: rgba(255, 255, 255, 0.12);
|
|
--bgc-progressbar-empty: #bdbdbb;
|
|
--bgc-progressbar-progress: var(--bgc-success);
|
|
--bgc-titlepane-hover: rgba(255, 255, 255, 0.04);
|
|
--bgc-underlay: rgb(221 221 221 / 80%);
|
|
--bgc-checkerboard: repeating-conic-gradient(var(--bgc-inputfield-on-container) 0% 25%, transparent 0% 50%) 50%/20px 20px;
|
|
--bgc-error: #ff529e;
|
|
--bgc-warning: #ffc700;
|
|
--bgc-success: #00ffcd;
|
|
--font-size-1: 1.5rem;
|
|
--font-size-2: 1.25rem;
|
|
--font-size-3: 1rem;
|
|
--font-size-4: 0.875rem;
|
|
--font-size-5: 0.75rem;
|
|
--font-size-html: 1rem;
|
|
--font-size-body: var(--font-size-4);
|
|
--font-lineheight-normal: 1.5;
|
|
--font-lineheight-compact: 1.25;
|
|
--font-lineheight-header: 1.3;
|
|
--font-weight-bold: 600;
|
|
--font-color-contrast-high: #203257;
|
|
--font-color-contrast-middle: #606060;
|
|
--font-color-contrast-low: #868681;
|
|
--font-color-error: #b82323;
|
|
--font-color-error-light: #EABFBF;
|
|
--font-color-warning: #ff8c00;
|
|
--font-color-warning-light: #ffeeca;
|
|
--font-color-success: #92d625;
|
|
--font-color-success-light: #ebffca;
|
|
--button-primary-bgc: #571EFA;
|
|
--button-primary-bgc-hover: #1b1d18;
|
|
--button-primary-bgc-active: rgba(79, 114, 24, 1);
|
|
--button-primary-bgc-disabled: #5f5f5c;
|
|
--button-bgc: var(--color-opendesk-secondary);
|
|
--button-bgc-hover: #575755;
|
|
--button-bgc-active: rgba(80, 80, 77, 1);
|
|
--button-bgc-disabled: #5f5f5c;
|
|
--button-text-bgc: transparent;
|
|
--button-text-bgc-hover: var(--button-bgc-hover);
|
|
--button-text-bgc-active: var(--button-bgc-active);
|
|
--button-text-bgc-disabled: transparent;
|
|
--button-icon-bgc: transparent;
|
|
--button-icon-bgc-hover: var(--button-bgc-hover);
|
|
--button-icon-bgc-active: var(--button-bgc-active);
|
|
--button-icon-bgc-disabled: transparent;
|
|
--button-icon-highlighted-bgc: var(--bgc-inputfield-on-body);
|
|
--button-icon-highlighted-bgc-hover: var(--button-bgc-hover);
|
|
--button-icon-highlighted-bgc-active: var(--button-bgc-active);
|
|
--button-icon-highlighted-bgc-disabled: transparent;
|
|
--color-focus: #AA98FB;
|
|
--popup-border: 1px solid #bdbdbb;
|
|
--box-shadow: 0 1px 6px rgb(1 0 0 / 12%), 0 1px 4px rgb(0 1 0 / 12%);
|
|
--serveroverview-tile-hover-bgc: #00acb6;
|
|
--serveroverview-tile-hover-color: #1e1e1d;
|
|
--portal-tab-background: var(--color-accent);
|
|
--select-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABkSURBVHgB7Y3BCQAhDAS3BEtICVeCJdi5JVwpGsGHiGLECD4ysL9lBjCMpwk8En6p/kV4XuL9WAeo/sr/gwDHi4JAK47YYBXoxQ6bzALH4lnAa4lHgaQpHgVUxW0g4ILYMC6TAZ0BJA3bxN3RAAAAAElFTkSuQmCC');
|
|
--layout-height-header: 63px;
|
|
/* Keycloak user screens logo */
|
|
--login-logo: url("/static-files/login/logo.svg") no-repeat center;
|
|
}
|
|
|
|
/* Beta overlay for Notes */
|
|
.portal-tile[target="tab_notes"]:before {
|
|
position: absolute;
|
|
content: "Beta";
|
|
color: #571EFA;
|
|
transform: rotate(45deg);
|
|
top: 8px;
|
|
right: 0px;
|
|
font-size: var(--font-size-5);
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media screen and (max-width: 748px) {
|
|
.portal-tile[target="tab_notes"]:before {
|
|
top: 5px;
|
|
font-size: 10px;
|
|
}
|
|
.portal-tile__name {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.portal-tile[target="tab_notes"]:after {
|
|
position: absolute;
|
|
content: "";
|
|
top: 1px;
|
|
right: 1px;
|
|
border-style: solid;
|
|
border-width: 0 calc(var(--app-tile-side-length) / 2) calc(var(--app-tile-side-length) / 2) 0;
|
|
border-color: transparent #E9E4FC transparent transparent;
|
|
z-index: 0;
|
|
border-top-right-radius: calc(var(--border-radius-apptile) - 1px);
|
|
}
|
|
|
|
/* Keycloak user screens begin */
|
|
#kc-login,
|
|
#kc-logout,
|
|
#saveTOTPBtn,
|
|
.pf-c-button.btn-lg,
|
|
.kc-social-provider-name
|
|
{
|
|
color: var(--color-opendesk-white);
|
|
border: 2px solid;
|
|
}
|
|
|
|
#kc-login:hover,
|
|
#kc-logout:hover,
|
|
#saveTOTPBtn:hover,
|
|
.pf-c-button.btn-lg:hover {
|
|
color: #000000;
|
|
background-color: #e7dffa;
|
|
border: 2px solid var(--color-accent);
|
|
}
|
|
|
|
.pf-c-form-control {
|
|
background-color: #e7dffa;
|
|
}
|
|
|
|
.pf-c-dropdown__menu-item:hover {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-opendesk-white) !important;
|
|
}
|
|
|
|
#kc-form-options .checkbox {
|
|
color: var(--font-color-contrast-high) !important;
|
|
}
|
|
|
|
#kc-header-wrapper {
|
|
color: var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.login-pf-page {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.login-pf-page #kc-header {
|
|
display: none;
|
|
}
|
|
|
|
.login-pf-page .card-pf {
|
|
border-radius: 13px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.login-pf-page #umcLoginLinks a {
|
|
color: #000;
|
|
}
|
|
|
|
.login-pf-page #umcLoginLinks a:focus {
|
|
text-decoration-thickness: unset;
|
|
}
|
|
|
|
.login-pf body {
|
|
background: #eee6fe url("/static-files/login/background.jpg") center center/cover no-repeat !important;
|
|
}
|
|
/* Keycloak user screens end */
|
|
|
|
.portal-title__image {
|
|
width: 82px;
|
|
height: auto;
|
|
}
|
|
|
|
.portal-title {
|
|
padding: 0 10px 0 5px;
|
|
}
|
|
|
|
/*
|
|
.portal::after {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 0;
|
|
height: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: linear-gradient(to right, #571EFA, #571EFA 62%, white 62%);
|
|
}
|
|
*/
|
|
|
|
.portal__background::before {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
background-image: url("/static-files/portal/background.svg");
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 237px;
|
|
background-size: 480px;
|
|
bottom: 4px;
|
|
background-position: right 25px center;
|
|
}
|
|
|
|
@media screen and (max-width: 1300px) {
|
|
.portal__background::before {
|
|
background-size: 350px;
|
|
bottom: -28px;
|
|
background-position: right 19px center;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 748px) {
|
|
.portal__background::before {
|
|
background-size: 250px;
|
|
bottom: -50px;
|
|
background-position: right 20px center;
|
|
}
|
|
}
|
|
|
|
.portal-categories:before {
|
|
width: 100%;
|
|
content: '';
|
|
position: fixed;
|
|
left: 0;
|
|
height: 1px;
|
|
top: var(--layout-height-header);
|
|
background-color: #dddddd;
|
|
z-index: 1;
|
|
}
|
|
|
|
.portal-sidenavigation__login-header {
|
|
border-bottom-color: var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.portal-sidenavigation__edit-mode {
|
|
border-color: var(--color-opendesk-secondary);
|
|
background-color: var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.portal-sidenavigation__edit-mode:hover {
|
|
border-color: var(--color-opendesk-secondary-dark);
|
|
background-color: var(--color-opendesk-secondary-dark);
|
|
}
|
|
|
|
.portal-header__edit-mode-label {
|
|
background-color: var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.portal-sidenavigation__logout-link {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.portal-sidenavigation__menu-item:hover,
|
|
.portal-sidenavigation__menu-subItem:hover {
|
|
background-color: var(--color-opendesk-secondary);
|
|
transition: all var(--portal-transition-duration);
|
|
}
|
|
|
|
.portal-sidenavigation__menu-item:hover .portal-sidenavigation__submenu {
|
|
background-color: var(--color-opendesk-white);
|
|
}
|
|
|
|
.portal-sidenavigation__menu-item:active {
|
|
border-color: transparent;
|
|
}
|
|
|
|
input {
|
|
border: 0.1rem solid var(--color-opendesk-secondary-dark)
|
|
}
|
|
|
|
input[readonly] {
|
|
background-color: var(--color-opendesk-secondary);
|
|
}
|
|
|
|
/*input {
|
|
border-color: var(--bgc-inputborder-on-container);
|
|
}*/
|
|
|
|
.portal-search__input {
|
|
border: 0.1rem solid var(--bgc-inputborder-on-container);
|
|
}
|
|
|
|
.image-upload__canvas {
|
|
background-color: var(--color-opendesk-secondary);
|
|
border: 1px solid var(--color-opendesk-secondary);
|
|
}
|
|
|
|
button {
|
|
transition: all var(--portal-transition-duration);
|
|
}
|
|
|
|
button.primary {
|
|
color: var(--color-opendesk-white);
|
|
}
|
|
|
|
button.primary svg {
|
|
color: var(--color-opendesk-white);
|
|
}
|
|
|
|
button[disabled] {
|
|
color: #afafaf;
|
|
}
|
|
|
|
button[disabled] svg {
|
|
color: #afafaf;
|
|
}
|
|
|
|
input[type=checkbox]:focus {
|
|
outline: 2px solid var(--color-opendesk-black);
|
|
}
|
|
|
|
.form-element {
|
|
margin-bottom: 2px;
|
|
/*needed for cleaner Outline*/
|
|
margin-left: 2px;
|
|
}
|
|
|
|
select {
|
|
border: 1px solid var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.multi-select__select {
|
|
border: 1px solid var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.multi-input__row--multiline {
|
|
box-shadow: inset 2px 0 var(--color-opendesk-secondary);
|
|
}
|
|
|
|
textarea {
|
|
border: .1rem solid #B2AFAF;
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
.notification--success {
|
|
border: 1px solid var(--font-color-success);
|
|
background-color: var(--font-color-success-light);
|
|
}
|
|
|
|
.notification--warning {
|
|
border: 1px solid var(--font-color-warning);
|
|
background-color: var(--font-color-warning-light);
|
|
}
|
|
|
|
.notification--error {
|
|
border: 1px solid var(--font-color-error);
|
|
background-color: var(--font-color-error-light);
|
|
}
|
|
|
|
.header-tab__clickable:before {
|
|
background-color: var(--color-opendesk-secondary);
|
|
border-color: var(--color-opendesk-white);
|
|
box-shadow: 0 0.2rem 0 var(--color-opendesk-secondary);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.header-tab:hover:before {
|
|
background-color: var(--color-opendesk-secondary-dark);
|
|
box-shadow: 0 0.2rem 0 var(--color-opendesk-secondary-dark);
|
|
border-bottom: 0;
|
|
transition: all var(--portal-transition-duration);
|
|
}
|
|
|
|
.header-tab:focus:before {
|
|
border-bottom: 0.2rem solid var(--color-opendesk-black);
|
|
box-shadow: 0;
|
|
}
|
|
|
|
.header-tab--active:focus:after {
|
|
border: 0.2rem solid var(--color-opendesk-black);
|
|
}
|
|
|
|
.header-tab:hover,
|
|
.header-tab:hover~.icon-button .portal-icon,
|
|
.header-tab--active,
|
|
.header-tab--active~.icon-button .portal-icon {
|
|
color: var(--color-opendesk-white);
|
|
transition: all var(--portal-transition-duration);
|
|
}
|
|
|
|
.header-tab--active~.icon-button:focus {
|
|
border-color: var(--color-opendesk-white);
|
|
}
|
|
|
|
.choose-tab:hover {
|
|
background-color: var(--color-opendesk-secondary);
|
|
}
|
|
|
|
.choose-tab--active {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-opendesk-white);
|
|
}
|
|
|
|
|
|
.header-button__button .portal-icon {
|
|
color: #1F1F1F;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.header-button--is-active .portal-icon {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/*
|
|
//
|
|
//
|
|
// Loading Overlay image and Animation
|
|
*/
|
|
|
|
.standbyCircle {
|
|
display: none;
|
|
}
|
|
|
|
.standbyWrapper:before {
|
|
content: '';
|
|
background-image: url("/static-files/portal/waiting-spinner.svg");
|
|
background-size: 70%;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-repeat: no-repeat;
|
|
-webkit-animation: pulsate-bck 1.2s ease-in-out infinite both;
|
|
animation: pulsate-bck 1.2s ease-in-out infinite both;
|
|
background-position: center center;
|
|
}
|
|
|
|
@-webkit-keyframes pulsate-bck {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulsate-bck {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.portal-tooltip {
|
|
border-color: #D3D7DE;
|
|
box-shadow: 0px 0px 4px 0px rgba(32, 50, 87, 0.10);
|
|
}
|
|
|
|
.portal-tooltip__arrow {
|
|
border-color: transparent transparent #D3D7DE transparent;
|
|
}
|
|
|
|
.portal-title__portal-name {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
} |