Jeppe B
133e53cfa6
Add iOS safe-area viewport support and inset-aware mobile header/spacer sizing so controls clear the notch or Dynamic Island. Desktop and tablet headers remain unchanged. Includes focused unit and mobile browser regression coverage.
147 lines
3.8 KiB
CSS
147 lines
3.8 KiB
CSS
.input.has-sharp-edges {
|
|
border-radius: 0;
|
|
}
|
|
textarea.has-sharp-edges {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.pos-addon-popper {
|
|
padding: 0.5rem;
|
|
background-color: #fbfcfe;
|
|
opacity: 0.9;
|
|
border: 3px solid #68696b;
|
|
min-width: 250px;
|
|
min-height: 100px;
|
|
text-align: center;
|
|
}
|
|
/*body .has-text-grey {*/
|
|
/* color: #333333 !important;*/
|
|
/*}*/
|
|
|
|
:root {
|
|
--pleno-mobile-safe-top: env(safe-area-inset-top, 0px);
|
|
/* 1. Primary Brand Colors (HSL) */
|
|
--bulma-primary-h: 197deg !important;
|
|
--bulma-primary-l: 35% !important;
|
|
--bulma-link-h: 224deg !important;
|
|
--bulma-link-l: 13% !important;
|
|
--bulma-info-h: 215deg !important;
|
|
--bulma-info-l: 56% !important;
|
|
--bulma-warning-h: 44deg !important;
|
|
--bulma-warning-l: 50% !important;
|
|
--bulma-dark-h: 0 !important;
|
|
--bulma-dark-s: 0% !important;
|
|
--bulma-dark-l: 20% !important;
|
|
|
|
--bulma-dark-dark-invert-l: 100% !important;
|
|
|
|
/* 2. Typography - Avenir */
|
|
--bulma-family-primary: "Avenir", sans-serif;
|
|
--bulma-body-size: 11pt !important;
|
|
--bulma-title-weight: 800 !important;
|
|
--bulma-body-weight: 400 !important;
|
|
|
|
/* 3. Strict Hierarchy */
|
|
--bulma-title-size: 13pt !important;
|
|
|
|
/* 4. Brand Specific Restrictions */
|
|
--bulma-shadow: none !important;
|
|
--bulma-box-shadow: none !important;
|
|
--bulma-card-shadow: none !important;
|
|
|
|
--bulma-skeleton-background: hsla(197 100% 35% / 0.7) !important;
|
|
--pleno-compact-table-header-font-size: 0.72rem;
|
|
--pleno-compact-table-header-line-height: 1;
|
|
}
|
|
|
|
body:not(.pleno-large-table-headers) .table thead th {
|
|
font-size: var(--pleno-compact-table-header-font-size);
|
|
line-height: var(--pleno-compact-table-header-line-height);
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.pleno-table-header-content {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*:root {*/
|
|
/* --bulma-primary-h: 207deg !important;*/
|
|
/* --bulma-primary-s: 60% !important;*/
|
|
/* --bulma-primary-l: 19% !important;*/
|
|
/* --bulma-link-h: 200deg !important;*/
|
|
/* --bulma-link-s: 80% !important;*/
|
|
/* --bulma-link-l: 41% !important;*/
|
|
/* --bulma-info-h: 215deg !important;*/
|
|
/* --bulma-info-l: 56% !important;*/
|
|
/* --bulma-success-s: 84% !important;*/
|
|
/* --bulma-warning-h: 44deg !important;*/
|
|
/* --bulma-warning-l: 50% !important;*/
|
|
/*}*/
|
|
|
|
.button-same-width {
|
|
min-width: 124px !important;
|
|
}
|
|
|
|
/*:root {*/
|
|
/* --bulma-link-h: 200 !important;*/
|
|
/* --bulma-link-s: 80% !important;*/
|
|
/* --bulma-link-l: 41% !important;*/
|
|
|
|
/* --bulma-warning-h: 44 !important;*/
|
|
/* --bulma-warning-s: 100% !important;*/
|
|
/* --bulma-warning-l: 50% !important;*/
|
|
/*}*/
|
|
|
|
/*:root {*/
|
|
/* --bulma-menu-item-h: var(--bulma-menu-item-selected-h);*/
|
|
/* --bulma-menu-item-s: var(--bulma-menu-item-selected-s);*/
|
|
/* --bulma-menu-item-l: var(--bulma-menu-item-selected-l);*/
|
|
/* --bulma-menu-item-background-l: var(--bulma-menu-item-selected-background-l);*/
|
|
/* --bulma-menu-item-color-l: var(--bulma-menu-item-selected-color-l);*/
|
|
/* !* Set the base H, S, and L for the menu item *!*/
|
|
/* --bulma-menu-item-h: 200;*/
|
|
/* --bulma-menu-item-s: 80%;*/
|
|
|
|
/* !* Set the base lightness to 41% (from your hex) *!*/
|
|
/* --bulma-menu-item-background-l: 41%;*/
|
|
|
|
/* !* Set delta to 0% if you want exactly #1584BC *!*/
|
|
/* !* Or use a small % if you want it to brighten/darken on state changes *!*/
|
|
/* --bulma-menu-item-background-l-delta: 0%;*/
|
|
/*}*/
|
|
/*button.is-link {*/
|
|
/* background-color: #1584BC;*/
|
|
/*}*/
|
|
|
|
.mt-30 {
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
.cell .card-content .field {
|
|
width: 100%;
|
|
}
|
|
|
|
.cell .card-content .field .label {
|
|
font-weight: 800;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.mb-8-mobile {
|
|
margin-bottom: 8px !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
.ml-16-tablet {
|
|
margin-left: 16px !important;
|
|
}
|
|
.mt-30-tablet {
|
|
margin-top: 30px !important;
|
|
}
|
|
}
|