sheppy/opendesk
1
0
Fork 0
mirror of https://gitlab.opencode.de/bmi/opendesk/deployment/opendesk.git synced 2025-12-06 07:21:36 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
e4f1afca0fdf4af184f4e287f1317ed57d229013
opendesk/helmfile/files/theme/portal/stylesheet.css

670 lines
17 KiB
CSS
Raw Blame History

/**
* 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;
}
/* Speed of flyout mennu */
.flyout-wrapper, .flyout-wrapper--isVisible {
transition: transform .5s cubic-bezier(0,0,.2,1);
}
/* Keycloak user screens begin */
#kc-login,
#kc-logout,
#saveTOTPBtn,
.pf-c-button.btn-lg {
color: var(--color-opendesk-white) !important;
border: 2px solid;
}
.kc-social-provider-name {
color: var(--color-opendesk-white) !important;
}
#social-sso-federation-idp {
margin: 0;
color: var(--color-opendesk-white);
background-color: var(--pf-c-button--m-primary--BackgroundColor);
border-radius: var(--border-radius-interactable, 0.25rem);
}
#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;
}
/* openDesk customization for nubus-frontend below */
.portal-quick-draft {
background-color: var(--color-accent);
color: #fff;
border: 1px solid #d3d7de;
}
.portal-quick-draft__img {
filter: grayscale(1) invert(1);
}
.portal-quick-draft:hover,
.portal-quick-draft__toggle:hover {
background-color: #4519c2;
}
.portal-quick-draft:focus-within {
box-shadow: 0px 0px 0px 3px #c8b9fd;
}
.portal-quick-draft--open:focus-within {
box-shadow: unset;
}
.portal-quick-draft__toggle:focus {
border-color: var(--color-focus);
}
.portal-quick-draft--open,
.portal-quick-draft--open:hover,
.portal-quick-draft--open .portal-quick-draft__toggle:hover {
background-color: #341291;
}
.portal-quick-draft__item {
color: #fff;
}
.portal-quick-draft__item:hover,
.portal-quick-draft__item:focus-visible {
color: hsla(0,0%,100%,.7);
}
.portal-category__title {
margin-bottom: calc(var(--layout-spacing-unit) * 2);
font-size: var(--font-size-3);
font-weight: 700;
}
.portal-category .portal-category__tiles {
--app-tile-side-length: 5.5rem;
--border-radius-apptile: var(--layout-spacing-unit);
grid-gap: calc(var(--layout-spacing-unit) * 2.5) calc(var(--layout-spacing-unit) * 4.5);
}
.portal-tile__box {
box-shadow: none;
border: 1px solid #d9d9d9;
margin-bottom: calc(var(--layout-spacing-unit) * 1);
}
.portal-tile__box--with-scaling-hover:hover {
scale: 1;
}
.portal-tile:hover .portal-tile__box {
border-color: #99a1b2;
}
.portal-tile:focus .portal-tile__box {
border-color: #99a1b2;
box-shadow: 0 0 0 3px #c8b9fd;
}
.portal-corner__inner {
background-color: #203257;
}
.portal-corner__link {
color: #fff;
}
.portal-corner__link:focus-visible,
.portal-corner__link:hover {
color: hsla(0, 0%, 100%, .7);
outline: none;
outline-offset: none;
}
.portal-corner__item:after {
color: hsla(0,0%,100%,.5);
}
.newsfeed-meta__btn {
border: 1px solid var(--bgc-announcements-info);
color: var(--color-accent);
background-color: var(--color-opendesk-white);
}
.newsfeed-meta__btn:focus,
.newsfeed-meta__btn:hover {
border-color: var(--newsfeed-link-hover-color);
}
#header-button-menu {
width: auto;
}
.portal-header__right .header-button[data-test=searchbutton] {
display: none;
}
.portal-sidebar__flyout {
border-radius: 0;
}
.portal-sidenavigation__login-header {
order: 1;
}
.portal-sidenavigation__login-header + .divider {
display: none;
}
.portal-sidenavigation__user-row {
display: block;
height: auto;
}
.portal-sidenavigation__user-text-content {
display: block;
padding: 0;
}
.portal-sidenavigation--username {
display: none;
}
.portal-sidenavigation__logout-link {
padding: 1em 0 1em 20px;
cursor: pointer;
height: auto;
width: 100%;
text-align: left;
font-size: var(--font-size-4);
color: var(--font-color-contrast-high);
font-weight: 600;
text-transform: uppercase;
background-color: transparent;
border: none;
margin: 0;
scale: 1;
display: block;
border-radius: 0;
}
.portal-sidenavigation__logout-link:hover {
background-color: #f5f5f5;
transition: all var(--portal-transition-duration);
}
.portal-category__title::before {
display: block;
content: "";
width: 20px;
height: 20px;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNNS45MzggNC42ODhhMS4yNSAxLjI1IDAgMCAxLS43NzIgMS4xNTUgMS4yNSAxLjI1IDAgMCAxLTEuMzYyLS4yNzEgMS4yNSAxLjI1IDAgMCAxLS4yNzEtMS4zNjIgMS4yNSAxLjI1IDAgMCAxIDEuMTU1LS43NzIgMS4yNSAxLjI1IDAgMCAxIDEuMjUgMS4yNXpNMTAgMy40MzhhMS4yNSAxLjI1IDAgMCAwLTEuMTU1Ljc3MiAxLjI1IDEuMjUgMCAwIDAgLjI3MSAxLjM2MiAxLjI1IDEuMjUgMCAwIDAgMS4zNjIuMjcxIDEuMjUgMS4yNSAwIDAgMCAuNzcyLTEuMTU1QTEuMjUgMS4yNSAwIDAgMCAxMCAzLjQzOHptNS4zMTMgMi41YTEuMjUgMS4yNSAwIDAgMCAxLjE1NS0uNzcyIDEuMjUgMS4yNSAwIDAgMC0uMjcxLTEuMzYyIDEuMjUgMS4yNSAwIDAgMC0xLjM2Mi0uMjcxIDEuMjUgMS4yNSAwIDAgMC0uNzcyIDEuMTU1IDEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjV6TTQuNjg4IDguNzVhMS4yNSAxLjI1IDAgMCAwLTEuMTU1Ljc3MiAxLjI1IDEuMjUgMCAwIDAgLjI3MSAxLjM2MiAxLjI1IDEuMjUgMCAwIDAgMS4zNjIuMjcxQTEuMjUgMS4yNSAwIDAgMCA1LjkzOCAxMGExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1em01LjMxMyAwYTEuMjUgMS4yNSAwIDAgMC0xLjE1NS43NzIgMS4yNSAxLjI1IDAgMCAwIC4yNzEgMS4zNjIgMS4yNSAxLjI1IDAgMCAwIDEuMzYyLjI3MUExLjI1IDEuMjUgMCAwIDAgMTEuMjUgMTAgMS4yNSAxLjI1IDAgMCAwIDEwIDguNzV6bTUuMzEzIDBhMS4yNSAxLjI1IDAgMCAwLTEuMTU1Ljc3MiAxLjI1IDEuMjUgMCAwIDAgLjI3MSAxLjM2MiAxLjI1IDEuMjUgMCAwIDAgMS4zNjIuMjcxQTEuMjUgMS4yNSAwIDAgMCAxNi41NjMgMTBhMS4yNSAxLjI1IDAgMCAwLTEuMjUtMS4yNXpNNC42ODggMTQuMDYzYTEuMjUgMS4yNSAwIDAgMC0xLjE1NS43NzIgMS4yNSAxLjI1IDAgMCAwIC4yNzEgMS4zNjIgMS4yNSAxLjI1IDAgMCAwIDEuMzYyLjI3MSAxLjI1IDEuMjUgMCAwIDAgLjc3Mi0xLjE1NSAxLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1em01LjMxMyAwYTEuMjUgMS4yNSAwIDAgMC0xLjE1NS43NzIgMS4yNSAxLjI1IDAgMCAwIC4yNzEgMS4zNjIgMS4yNSAxLjI1IDAgMCAwIDEuMzYyLjI3MSAxLjI1IDEuMjUgMCAwIDAgLjc3Mi0xLjE1NSAxLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1em01LjMxMyAwYTEuMjUgMS4yNSAwIDAgMC0xLjE1NS43NzIgMS4yNSAxLjI1IDAgMCAwIC4yNzEgMS4zNjIgMS4yNSAxLjI1IDAgMCAwIDEuMzYyLjI3MSAxLjI1IDEuMjUgMCAwIDAgLjc3Mi0xLjE1NSAxLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1eiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==');
}
Reference in New Issue View Git Blame Copy Permalink