Files
zitadel/console/src/app/modules/info-overlay/info-overlay.component.scss
T
Max PeintnerandGitHub b6deed3e34 fix(console): text color shades, ui fixes, state handle restore (#3698)
* common project grant dialog, info box, label policy

* text styles, statehandler fix

* dialog, btn alignment, i18n

* search-user theme colors

* filter formfield sizing

* redirect uris

* shortcut layout

* settings grid type rest, shortcuts linking

* login policy, reset button consistency, metadata

* permission checks
2022-05-25 09:33:18 +02:00

100 lines
2.2 KiB
SCSS

@mixin info-overlay-theme($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
.cnsl-overlay-backdrop {
background-color: if($is-dark-theme, #00000080, #ffffff80);
backdrop-filter: blur(2px);
}
.cnsl-overlay-panel {
position: relative;
display: flex;
flex-direction: column;
background-color: map-get($background, cards);
border-radius: 6px;
padding: 1rem;
font-size: 14px;
width: 300px;
border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
&::before {
visibility: hidden;
content: '';
position: absolute;
width: 0;
height: 0;
border: 0.75rem solid transparent;
border-top: none;
border-radius: 4px;
border-bottom-color: map-get($background, cards);
}
}
.context_intro_overlay {
display: flex;
flex-direction: column;
width: 100%;
color: map-get($foreground, text);
&.top-left {
&::before {
visibility: visible;
bottom: 100%;
left: 1.5em;
}
}
&.top-right {
&::before {
visibility: visible;
bottom: 100%;
right: 1.5em;
}
}
.overlay-info-row {
display: flex;
justify-content: space-between;
margin: -1rem -1rem 0.5rem 0;
align-items: center;
.info {
font-size: 12px;
text-transform: uppercase;
color: $primary-color;
}
}
p {
margin: 0;
font-size: 15px;
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
font-style: italic;
line-height: 1.3rem;
}
.overlay-actions {
display: flex;
align-items: center;
padding-top: 0.5rem;
justify-content: flex-end;
button {
margin-left: 0.5rem;
}
}
}
}