mirror of
https://github.com/goauthentik/authentik
synced 2026-05-09 16:42:38 +02:00
c75eed630a
* web: remove native fieldset borders from action groups Refs:\n- https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1775085687040019\n- https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1774988472501059 * Use consistent naming. * Fix up styles, selector specifics, compatibility mode. * Fix field autocapitalization, keyboard behavior. * Fix default height. * Fix for mid-size tablet viewports. - Helped with debugging on mobile. * Fix linter warning. --------- Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
289 lines
6.7 KiB
CSS
289 lines
6.7 KiB
CSS
/* #region Host */
|
|
|
|
:host {
|
|
--app-card-aspect-ratio: 4 / 3;
|
|
--app-card-min-width: 6.5rem;
|
|
--app-group-header-min-height: calc(var(--app-card-min-width) / 4);
|
|
--app-icon-offset: 1rem;
|
|
--app-card-row-coefficient: 3.5;
|
|
|
|
@media (min-width: 390px) {
|
|
--app-card-aspect-ratio: 1;
|
|
--app-group-template-columns: repeat(auto-fill, var(--app-card-min-width));
|
|
}
|
|
|
|
@media (min-width: 409px) {
|
|
--app-card-min-width: 7rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
--app-icon-offset: 0.5rem;
|
|
--app-card-min-width: 10rem;
|
|
}
|
|
}
|
|
|
|
/* #region Card */
|
|
|
|
.card-header-aspect-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
|
|
padding-inline: 1rem;
|
|
padding-block: calc(var(--pf-global--LineHeight--md) * var(--app-card-title-padding));
|
|
height: 100%;
|
|
position: relative;
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
[part="card"] {
|
|
transition: box-shadow 150ms ease-in-out;
|
|
border: 0.5px solid var(--pf-global--BorderColor--100);
|
|
height: 100%;
|
|
|
|
&:hover {
|
|
--pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--xl-bottom);
|
|
}
|
|
}
|
|
|
|
[data-anchor-strategy="anchor-position"] [part="card"] {
|
|
transform: translate3d(0, 0, 0); /* Fixes rendering artifacts on mobile. */
|
|
}
|
|
|
|
/* #region Header */
|
|
|
|
[part="card-header"] {
|
|
padding: 0 !important;
|
|
|
|
display: grid;
|
|
grid-template-rows: repeat(
|
|
auto-fill,
|
|
minmax(calc(var(--app-card-min-width) / var(--app-card-row-coefficient)), auto)
|
|
);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
|
|
.pf-c-card__title {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #region Title */
|
|
|
|
[part="card-title"] {
|
|
padding: 0 !important;
|
|
z-index: 1;
|
|
text-stroke-width: 0.15em;
|
|
text-stroke-color: var(--pf-c-card--BackgroundColor);
|
|
|
|
-webkit-text-stroke-width: 0.15em;
|
|
-webkit-text-stroke-color: var(--pf-c-card--BackgroundColor);
|
|
paint-order: stroke fill;
|
|
|
|
display: flex;
|
|
grid-row: -2 / -2;
|
|
justify-content: center;
|
|
height: 100%;
|
|
align-items: center;
|
|
|
|
.clamp-wrapper {
|
|
--clamp-padding: calc(0.1em * var(--app-card-row-coefficient));
|
|
|
|
display: box;
|
|
display: -webkit-box;
|
|
line-clamp: 2;
|
|
-webkit-line-clamp: 2;
|
|
box-orient: vertical;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
text-wrap: balance;
|
|
line-height: 1.2;
|
|
padding-block: var(--clamp-padding);
|
|
max-height: calc((var(--pf-global--LineHeight--md) * 2rem) - (var(--clamp-padding) / 2));
|
|
}
|
|
}
|
|
|
|
/* #region Icon */
|
|
|
|
ak-app-icon {
|
|
--icon-height: 50%;
|
|
--icon-font-size: calc(var(--app-card-min-width) / 2.3);
|
|
--app-icon--shadow-background-color: var(--pf-c-card--BackgroundColor);
|
|
|
|
&::part(icon) {
|
|
position: absolute;
|
|
inset: 0;
|
|
object-fit: contain;
|
|
place-self: center;
|
|
inset-block-start: -1.5rem;
|
|
inset-block-end: var(--app-icon-offset, 0);
|
|
padding: 0;
|
|
|
|
@media (max-width: 767px) {
|
|
inset-block-start: -0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #region Group Header */
|
|
|
|
[part="app-group-header"] {
|
|
@media not (prefers-contrast: more) {
|
|
--ak-c-fieldset__legend--PaddingInlineBase: 1rem;
|
|
padding-block-start: 0 !important;
|
|
padding-inline: 0 !important;
|
|
margin-inline: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* #region App List */
|
|
|
|
[part="app-list"] {
|
|
display: grid;
|
|
gap: var(--pf-global--spacer--md);
|
|
|
|
grid-template-columns: repeat(var(--app-list-column-count, 1), 1fr);
|
|
justify-items: center;
|
|
|
|
@media (max-width: 767px) {
|
|
--app-list-column-count: 1 !important;
|
|
justify-items: normal;
|
|
}
|
|
}
|
|
|
|
/* #region App Group */
|
|
|
|
[part="app-group"] {
|
|
--app-group-border-color: transparent;
|
|
|
|
display: grid;
|
|
gap: var(--pf-global--spacer--md);
|
|
grid-template-columns: var(--app-group-template-columns, 1fr);
|
|
width: round(down, 100%, calc(var(--app-card-min-width) / var(--app-list-column-count, 1)));
|
|
grid-auto-rows: minmax(min-content, 0);
|
|
|
|
@media (max-width: 767px) {
|
|
width: auto;
|
|
grid-template-rows: auto;
|
|
}
|
|
|
|
@media not (prefers-contrast: more) {
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
/* #region Group Separator */
|
|
|
|
[part="app-group-separator"] {
|
|
grid-column: 1 / -1;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* #region Card Wrapper */
|
|
|
|
[part="card-wrapper"] {
|
|
aspect-ratio: var(--app-card-aspect-ratio);
|
|
position: relative;
|
|
|
|
contain-intrinsic-size: var(--app-card-min-width);
|
|
|
|
&[aria-selected="true"] {
|
|
outline: auto var(--ak-accent);
|
|
}
|
|
}
|
|
|
|
/* #region Card Header Actions Description */
|
|
|
|
[part="card-header-action-description"] {
|
|
text-wrap: balance;
|
|
text-wrap: pretty; /* Supporting browsers. */
|
|
}
|
|
|
|
/* #region Card Header Actions */
|
|
|
|
[part="card-header-actions"] {
|
|
position: absolute;
|
|
inset-block-start: 0;
|
|
inset-inline-end: 0;
|
|
}
|
|
|
|
/* #region Card Header Actions Menu */
|
|
|
|
[part="card-header-actions-menu"] {
|
|
inset: auto;
|
|
border: none;
|
|
|
|
width: max-content;
|
|
min-width: 10ch;
|
|
max-width: 20ch;
|
|
/* This drop shadow both adds contrast and forces Firefox to order the layers correctly. */
|
|
filter: drop-shadow(0px 3px 1px var(--pf-global--BackgroundColor--dark-transparent-200));
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
|
|
[data-anchor-strategy="anchor-position"] [part="card-header-actions-menu"] {
|
|
position: fixed;
|
|
inset-inline-start: auto;
|
|
inset-block-start: anchor(end);
|
|
inset-inline-end: anchor(end);
|
|
|
|
transform: translate3d(0, 0, 0); /* Fixes rendering artifacts on mobile. */
|
|
|
|
&:popover-open {
|
|
display: block;
|
|
}
|
|
|
|
@media (min-width: 390px) {
|
|
inset-inline-start: anchor(center);
|
|
}
|
|
}
|
|
|
|
/* Fallback if popover + anchor positioning is not supported */
|
|
[data-anchor-strategy="fallback"] [part="card-header-actions-menu"] {
|
|
display: none;
|
|
position: absolute;
|
|
inset-inline: auto calc(100% - 1.5em);
|
|
|
|
@media (min-width: 390px) {
|
|
inset-block-start: 0;
|
|
inset-inline-start: 100%;
|
|
}
|
|
}
|
|
|
|
[data-anchor-strategy="fallback"]
|
|
[part="card-header-actions"]:focus-within
|
|
[part="card-header-actions-menu"] {
|
|
display: block;
|
|
}
|
|
|
|
/* #region Card Header Actions Button */
|
|
|
|
[part="card-header-actions-button"] {
|
|
border: 0.5px solid transparent;
|
|
border-end-start-radius: var(--pf-global--BorderRadius--sm);
|
|
|
|
--pf-c-dropdown__toggle--before--BorderWidth: 0;
|
|
|
|
&:hover {
|
|
--pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-card--m-flat--BorderColor);
|
|
border-color: var(--pf-c-card--m-flat--BorderColor);
|
|
}
|
|
}
|
|
|
|
/* #region Card Header Actions icon */
|
|
|
|
[part="card-header-actions-icon"] {
|
|
font-weight: bold;
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
monospace;
|
|
}
|