/* New look (html.pie-premium) — library page.
Owned by one session at a time; see .claude/skills/pie-new-ui/SKILL.md.
Every selector starts with: html.pie-premium .pp-shell */
/* ==========================================================================
Library (library/library.vue, .library-dpage) — the design's Library screen
(standard.js library()): page head with eyebrow, subtitle and pill actions on the right,
dark segmented tabs, type chips, search bar, list card.
The head actions live in each tab's own component (Reservations, Information, Cloud
Storage), not in the head. The wrappers between the page card and those buttons are
display: contents, so every piece is a flex item of the card and `order` places it:
0 title 1-6 head actions (secondary first, primary last)
9 line break 10 tabs
20 type chips 21-22 filter fields
30-32 tools (beside the search) 40 list card
45 everything else (popups)
========================================================================== */
html.pie-premium .pp-shell .library-dpage .crm-page-content {
padding: 0;
}
html.pie-premium .pp-shell .library-dpage .crm-page-content > .container-fluid {
padding: 0 32px 32px;
}
html.pie-premium .pp-shell .library-dpage .crm-page-content > .container-fluid > .booking-lists {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: 8px;
margin: 0 !important;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Line break between the head and the tabs */
html.pie-premium .pp-shell .library-dpage .crm-page-content > .container-fluid > .booking-lists::before {
content: "";
display: block;
order: 9;
flex: 0 0 100%;
height: 0;
}
html.pie-premium .pp-shell .library-dpage .crm-page-content > .container-fluid > .booking-lists::after {
content: none;
}
html.pie-premium .pp-shell .library-dpage .booking-lists > .invoice-header,
html.pie-premium .pp-shell .library-dpage .booking-lists > .invoice-header > .dashboard-titles,
html.pie-premium .pp-shell .library-dpage #full-screen-booking:not(.toggle-full-screen),
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title > .pull-right,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions,
html.pie-premium .pp-shell .library-dpage .library-events,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage {
display: contents;
}
html.pie-premium .pp-shell .library-dpage :is(#full-screen-booking, .library-events, .library-cloud-storage) > * {
order: 45;
flex: 0 0 100%;
min-width: 0;
}
/* ---------- Page head: eyebrow, 30px title, subtitle ---------- */
html.pie-premium .pp-shell .library-dpage .invoice-header h1 {
order: 0;
flex: 1 1 auto;
margin: 0 auto 0 0;
padding: 18px 0 22px;
color: var(--pp-ink);
font: 30px/1.15 var(--pp-bold);
letter-spacing: -.015em;
}
html.pie-premium .pp-shell .library-dpage .invoice-header h1::before {
content: "Workspace";
display: block;
margin-bottom: 6px;
color: var(--pp-acc);
font: 11.5px/1.55 var(--pp-bold);
letter-spacing: .08em;
text-transform: uppercase;
}
html.pie-premium .pp-shell .library-dpage .invoice-header h1::after {
content: "Reservations, information and files saved for your team";
display: block;
margin-top: 4px;
color: var(--pp-ink-3);
font: 14px/1.55 var(--pp-sans);
letter-spacing: 0;
}
/* ---------- Head actions: white pills, the primary one last ---------- */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .btn { order: 1; }
html.pie-premium .pp-shell .library-dpage #export_xls { order: 2; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > span.btn { order: 3; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.btn-small { order: 4; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .pie-icon-maximize { order: 5; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.px-2,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn { order: 6; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .btn,
html.pie-premium .pp-shell .library-dpage #export_xls,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > .btn,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn {
float: none !important;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 40px;
margin: 0 0 22px !important;
padding: 0 16px !important;
border: 0;
border-radius: 999px;
background: #fff;
color: var(--pp-ink) !important;
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
font: 13.5px/1 var(--pp-bold);
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .btn:hover,
html.pie-premium .pp-shell .library-dpage #export_xls:hover,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > .btn:hover {
background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.px-2,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn {
padding: 0 18px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc);
color: #fff !important;
box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--pp-acc) 80%, #000);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.px-2:hover,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn:hover,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--pp-acc) 88%, #000);
}
/* Icons in front of the secondary labels (the primary ones already start with "+") */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .btn::before,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > span.btn::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--pp-i-down) center / contain no-repeat;
mask: var(--pp-i-down) center / contain no-repeat;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > span.btn::before {
-webkit-mask-image: var(--pp-i-up);
mask-image: var(--pp-i-up);
}
/* Export XLS: the share glyph becomes the design's download icon, with a label */
html.pie-premium .pp-shell .library-dpage #export_xls > i {
width: 16px;
height: 16px;
background: currentColor;
font-size: 0 !important;
-webkit-mask: var(--pp-i-down) center / contain no-repeat;
mask: var(--pp-i-down) center / contain no-repeat;
}
html.pie-premium .pp-shell .library-dpage #export_xls > i::before {
content: none;
}
html.pie-premium .pp-shell .library-dpage #export_xls::after {
content: "Export XLS";
}
/* Full screen: a round white button */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .pie-icon-maximize {
flex: none;
display: inline-grid !important;
place-items: center;
width: 40px;
height: 40px;
margin: 0 0 22px;
border-radius: 999px;
background: #fff;
color: var(--pp-ink-2);
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
font-size: 15px !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .pie-icon-maximize:hover {
background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}
/* ---------- Tabs: the dark segmented bar ---------- */
html.pie-premium .pp-shell .library-dpage .invoice-header > ul.crm_tag {
order: 10;
float: none;
display: flex;
gap: 2px;
width: fit-content;
max-width: 100%;
margin: 0 0 16px;
padding: 4px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .72);
box-shadow: none;
overflow-x: auto;
scrollbar-width: none;
}
html.pie-premium .pp-shell .library-dpage .invoice-header > ul.crm_tag > li.crm_pills {
float: none;
display: inline-flex;
align-items: center;
margin: 0;
padding: 7px 13px !important;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--pp-ink-3);
box-shadow: none;
font: 13.5px/1.55 var(--pp-sans);
letter-spacing: 0;
white-space: nowrap;
}
html.pie-premium .pp-shell .library-dpage .invoice-header > ul.crm_tag > li.crm_pills::after {
content: none;
}
html.pie-premium .pp-shell .library-dpage .invoice-header > ul.crm_tag > li.crm_pills:hover:not(.active) {
background: transparent;
color: var(--pp-ink);
}
html.pie-premium .pp-shell .library-dpage .invoice-header > ul.crm_tag > li.crm_pills.active {
background: var(--pp-ink);
color: #fff;
box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
font-family: var(--pp-bold);
}
/* ---------- Type chips (Reservations and Information): icon + type name ---------- */
html.pie-premium .pp-shell .library-dpage .booking-popup-header {
order: 20;
margin: 0 0 16px !important;
padding: 0;
border: 0;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li {
float: none;
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
height: 30px;
margin: 0;
padding: 0 11px;
border: 0;
border-radius: 999px;
background: #fff;
color: var(--pp-ink-2);
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
font: 13px/1 var(--pp-sans);
letter-spacing: 0;
text-align: left;
white-space: nowrap;
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li:hover {
background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
color: var(--pp-ink);
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li.active {
background: var(--pp-ink);
color: #fff;
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li :is(a, i) {
display: inline-flex;
align-items: center;
color: inherit !important;
font-size: inherit;
line-height: 1;
text-decoration: none;
}
/* Icons: 14px; the Information chips carry the icon class on the chip itself */
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li i,
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li::before {
font-size: 14px;
line-height: 1;
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li[title]:not([title="All"])::after {
content: attr(title);
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li#di-model-header-link-library-all a::before {
content: none;
}
/* "All" reads "All types", as in the design */
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li[title="All"]::after {
content: " types";
white-space: pre;
}
/* Information sub-types: small pills on a light bar */
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-sub-category-block:has(> li) {
display: flex;
flex-wrap: wrap;
gap: 2px;
width: fit-content;
max-width: 100%;
margin: 10px 0 0;
padding: 3px;
border-radius: 999px;
background: rgba(255, 255, 255, .72);
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-sub-category-block > li {
float: none;
display: inline-flex;
align-items: center;
height: 30px;
margin: 0;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--pp-ink-3);
font: 12.5px/1 var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-sub-category-block > li:hover:not(.active) {
color: var(--pp-ink);
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-sub-category-block > li.active {
background: var(--pp-ink);
color: #fff;
box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
font-family: var(--pp-bold);
}
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-sub-category-block > li .booking-sub-category {
color: inherit;
font: inherit;
}
/* ---------- Filter fields added from "Apply filters +" ---------- */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .row {
order: 22;
margin: 0 -6px 6px;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .row.g-2 {
order: 21;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .row:not(:has(> *)) {
display: none;
}
/* ---------- Tools beside the search: Delete, Apply filters, Display columns ----------
They sit on a zero-height line (margin-bottom: -40px), so the list's own search, the first
thing in the next line, comes up level with them on the left */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .position-relative,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button {
position: relative;
z-index: 2;
flex: none;
display: flex;
align-items: center;
height: 40px;
margin: 0 0 -40px;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 { order: 30; margin-left: auto; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend { order: 31; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .position-relative { order: 32; }
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button { order: 30; margin-left: auto; }
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 > span,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn,
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button {
display: inline-flex;
align-items: center;
gap: 7px;
height: 40px;
margin: 0;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: #fff;
color: var(--pp-ink) !important;
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
font: 13.5px/1 var(--pp-bold);
letter-spacing: 0;
white-space: nowrap;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 > span:hover,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn:hover,
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle:hover,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button:hover {
background: color-mix(in srgb, var(--pp-acc) 8%, #fff);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 > span .rowdelete {
margin: 0 !important;
color: inherit;
font-size: 15px;
}
/* Apply filters: a filter icon instead of the caret */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--pp-i-filter) center / contain no-repeat;
mask: var(--pp-i-filter) center / contain no-repeat;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn::after {
content: none;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .filter-dropdown {
margin-top: 6px !important;
padding: 6px !important;
border: 0;
border-radius: 14px;
background: var(--pp-panel);
box-shadow: 0 18px 40px -18px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .filter-dropdown .dropdown-item {
padding: 8px 10px;
border-radius: 8px;
color: var(--pp-ink-2);
font: 13.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .filter-dropdown .dropdown-item:hover {
background: var(--pp-hover);
color: var(--pp-ink);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .filter-dropdown .dropdown-item.color-gray {
color: var(--pp-muted) !important;
}
/* Display columns: columns icon, the design's popover list */
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk {
float: none !important;
position: relative;
margin: 0;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle {
width: auto;
min-width: 0;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--pp-i-cols) center / contain no-repeat;
mask: var(--pp-i-cols) center / contain no-repeat;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle::after {
margin-left: 2px;
border: 0;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: var(--pp-i-chev) center / contain no-repeat;
mask: var(--pp-i-chev) center / contain no-repeat;
vertical-align: 0;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > .dropdown-menu {
right: 0;
left: auto;
width: 280px;
margin-top: 6px !important;
padding: 6px;
border: 0;
border-radius: 14px;
background: var(--pp-panel);
box-shadow: 0 18px 40px -18px rgba(20, 24, 20, .35), 0 0 0 1px var(--pp-line);
font-family: var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .dropdown-menu .head {
display: flex;
margin: 0;
padding: 10px 10px 4px;
color: var(--pp-muted);
font: 11.5px var(--pp-bold);
letter-spacing: .05em;
text-transform: uppercase;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .checklist {
max-height: 60vh;
overflow-y: auto;
padding: 0;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .checklist > a.color-pink {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 10px 6px;
color: var(--pp-acc) !important;
font-size: 12.5px;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .display-dropdown {
margin: 0;
padding: 0;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .custom-lists {
align-items: center;
margin: 0;
padding: 6px 10px;
border-radius: 8px;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .custom-lists:hover {
background: var(--pp-hover);
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .custom-lists label {
color: var(--pp-ink-2);
font-size: 13.5px;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .custom-checkbox .checkmark {
border: 1.5px solid var(--pp-line-2);
border-radius: 5px;
background: var(--pp-panel);
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk .custom-checkbox input:checked ~ .checkmark {
border-color: var(--pp-acc);
background: var(--pp-acc);
}
/* ---------- List card (Reservations and Information) ---------- */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .crm_table,
html.pie-premium .pp-shell .library-dpage .library-events > div:has(.vgt-wrap) {
order: 40;
margin: 0;
padding: 0 !important;
}
html.pie-premium .pp-shell .library-dpage .vgt-wrap {
background: transparent;
}
/* The card starts 54px lower (flex stops the margins collapsing); the search goes in that gap */
html.pie-premium .pp-shell .library-dpage .vgt-inner-wrap {
display: flex;
flex-direction: column;
margin-top: 54px;
border: 0;
border-radius: 24px;
background: var(--pp-panel);
box-shadow: 0 1px 2px rgba(30, 38, 32, .04), 0 14px 32px -20px rgba(30, 40, 32, .22);
}
/* Search: as wide as the tools beside it allow */
html.pie-premium .pp-shell .library-dpage .vgt-global-search {
display: flex;
width: 100%;
max-width: calc(100% - 340px);
margin: -54px 0 14px;
padding: 0;
border: 0;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking:has(> .pull-left.mb-2 > span:not([style*="none"])) .vgt-global-search {
max-width: calc(100% - 450px);
}
html.pie-premium .pp-shell .library-dpage .library-events .vgt-global-search {
max-width: none;
}
html.pie-premium .pp-shell .library-dpage .library-events:has(> .d-flex > button) .vgt-global-search {
max-width: calc(100% - 220px);
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search__input {
flex: 1;
min-width: 220px;
padding: 0;
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search__input form {
width: 100%;
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search .vgt-input {
float: none;
width: 100%;
height: 40px;
padding: 0 14px 0 39px;
border: 1px solid transparent;
border-radius: 999px;
background: rgba(255, 255, 255, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px center / 16px no-repeat;
color: var(--pp-ink);
box-shadow: none;
font: 14px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search .vgt-input::placeholder {
color: var(--pp-muted);
opacity: 1;
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search .vgt-input:focus {
border-color: color-mix(in srgb, var(--pp-acc) 55%, transparent);
outline: 0;
background-color: var(--pp-panel);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-acc) 16%, transparent);
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search .input__icon,
html.pie-premium .pp-shell .library-dpage .vgt-global-search :is(.search-icon, .fa-search, img),
html.pie-premium .pp-shell .library-dpage .vgt-global-search__actions:not(:has(> *)) {
display: none;
}
html.pie-premium .pp-shell .library-dpage .vgt-responsive {
border-radius: 24px 24px 0 0;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table {
border: 0;
background: var(--pp-panel);
font-family: var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage table.vgt-table thead th {
padding: 13px 12px;
border: 0;
border-bottom: 1px solid var(--pp-line);
background: var(--pp-panel);
color: var(--pp-ink-3);
font: 12px var(--pp-bold);
white-space: nowrap;
vertical-align: middle;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table thead th:is(.sorting-asc, .sorting-desc) {
color: var(--pp-acc);
}
html.pie-premium .pp-shell .library-dpage table.vgt-table thead th.sortable button {
opacity: 0;
transition: opacity .12s;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table thead th.sortable:hover button {
opacity: 1;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table thead tr:has(> th.filter-th):not(:has(.vgt-input:not(:placeholder-shown))) {
display: none;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table thead .vgt-input {
height: 32px;
border: 1px solid transparent;
border-radius: 8px;
background-color: var(--pp-panel-2);
font: 12.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage table.vgt-table :is(th, td).vgt-checkbox-col {
width: 1%;
padding: 0 4px 0 18px;
border-right: 0;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--pp-acc);
vertical-align: middle;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table tbody td {
height: 56px;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid var(--pp-line);
background: transparent;
color: var(--pp-ink-2) !important;
font-size: 13.5px;
vertical-align: middle;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table tbody tr:last-child td {
border-bottom: 0;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table.striped tbody tr:nth-of-type(odd) {
background: transparent;
}
html.pie-premium .pp-shell .library-dpage table.vgt-table tbody tr:hover td {
background: var(--pp-hover);
}
html.pie-premium .pp-shell .library-dpage table.vgt-table .vgt-text-disabled {
padding: 28px 0;
color: var(--pp-muted);
font: 13.5px var(--pp-sans);
}
/* Footer: rows per page, page info, Previous / Next */
html.pie-premium .pp-shell .library-dpage .vgt-wrap__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border: 0;
border-top: 1px solid var(--pp-line);
border-radius: 0 0 24px 24px;
background: var(--pp-panel);
color: var(--pp-muted);
font: 12.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .vgt-wrap__footer :is(.footer__row-count, .footer__navigation) {
float: none;
display: flex;
align-items: center;
gap: 6px;
}
html.pie-premium .pp-shell .library-dpage .vgt-wrap__footer :is(.footer__row-count__label, .footer__navigation__page-info, .footer__navigation__page-btn) {
margin: 0;
color: var(--pp-muted);
font: 12.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .vgt-wrap__footer .footer__row-count__select {
height: 30px;
margin: 0 0 0 6px;
padding: 0 22px 0 10px;
border: 1px solid var(--pp-line);
border-radius: 8px;
background-color: var(--pp-panel-2);
color: var(--pp-ink-2);
font: 12.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .vgt-wrap__footer .footer__navigation__page-btn {
height: 30px;
padding: 0 10px;
border-radius: 999px;
}
html.pie-premium .pp-shell .library-dpage .vgt-wrap__footer .footer__navigation__page-btn:not(.disabled):hover {
background: var(--pp-hover);
color: var(--pp-ink);
}
/* ---------- Cloud Storage: Select all / Delete, then the file grid ---------- */
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > br {
display: none;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > span.ms-4 {
order: 30;
flex: none;
display: inline-flex;
align-items: center;
margin: 0 8px 14px 0 !important;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox {
height: 34px;
padding: 0 14px 0 40px;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox .checkmark {
top: 50%;
left: 14px;
margin: 0 !important;
transform: translateY(-50%);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox label {
margin: 0;
color: var(--pp-ink-2);
font: 13.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > span.ms-4 {
gap: 6px;
height: 34px;
padding: 0 14px;
border-radius: 999px;
background: #fff;
color: var(--pp-ink);
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
font: 13.5px var(--pp-bold);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > span.ms-4 .rowdelete {
margin: 0 !important;
font-size: 14px;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .uploaded-documents {
order: 40;
margin: 0 !important;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage .pdf_document_wrapper {
overflow: hidden;
border: 0;
border-radius: 16px;
background: var(--pp-panel);
box-shadow: 0 1px 2px rgba(30, 38, 32, .04), 0 14px 32px -20px rgba(30, 40, 32, .22);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage .pdf_document_inner {
border: 0;
background: var(--pp-panel-2);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage .pdf_document_bottom_share {
border: 0;
background: var(--pp-panel);
color: var(--pp-ink-2);
font: 12.5px var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage .pdf_document_bottom_share a {
color: var(--pp-ink-2);
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage .main_wrapper_pdf {
float: none;
width: 100%;
padding: 28px 0;
border-radius: 24px;
background: var(--pp-panel) !important;
box-shadow: 0 1px 2px rgba(30, 38, 32, .04), 0 14px 32px -20px rgba(30, 40, 32, .22);
text-align: center;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage .main_wrapper_pdf h3 {
color: var(--pp-muted);
font: 13.5px var(--pp-sans);
}
/* ---------- Full screen: the Reservations block on the page background ---------- */
html.pie-premium .pp-shell .library-dpage #full-screen-booking.toggle-full-screen {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-start;
column-gap: 8px;
padding: 18px 32px 32px;
background: var(--pp-bg);
overflow-y: auto;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking.toggle-full-screen > .booking-title .btn {
margin-left: auto !important;
}
/* ---------- Fixes (layout order, readable buttons, Display columns line) ----------
- The type chips (order 20) lost to the catch-all `> * { order: 45 }` above (its :is() carries the
#full-screen-booking id), so they ended up under the list; same id here puts them back.
- Bootstrap's .d-flex (!important) kept .reservation-actions a box, so its buttons sat under the
list instead of joining the head actions.
- A global accent rule paints .btn-primary Bordeaux with !important: the white pills need
!important too, or their dark text lands on Bordeaux.
- Display columns hung 30px under Apply filters; the subtitle inherited the title's capitalize. */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-popup-header {
order: 20;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions {
display: contents !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .btn,
html.pie-premium .pp-shell .library-dpage #export_xls,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > span.btn,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 > span,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button {
border-color: transparent !important;
background: #fff !important;
color: var(--pp-ink) !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .booking-title .btn:hover,
html.pie-premium .pp-shell .library-dpage #export_xls:hover,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > span.btn:hover,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 > span:hover,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn:hover,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button:hover {
background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.px-2,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn {
border-color: transparent !important;
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)), var(--pp-acc) !important;
color: #fff !important;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk {
top: 0 !important;
margin: 0 !important;
}
html.pie-premium .pp-shell .library-dpage .invoice-header h1::after {
text-transform: none;
}
/* Submit sale is a secondary action: white pill (the accent rule had painted it Bordeaux under
dark text) */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.btn-small:not(.px-2) {
border-color: transparent !important;
background: #fff !important;
color: var(--pp-ink) !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.btn-small:not(.px-2):hover {
background: color-mix(in srgb, var(--pp-acc) 8%, #fff) !important;
}
/* When the head actions don't fit beside the title, the primary one wraps to the right edge
instead of starting a lonely line on the left */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.px-2,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn {
margin-left: auto !important;
}
/* The (usually empty) Delete holder kept Bootstrap's mb-2, so the zero-height tools line grew to
48px and pushed the search down */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 {
margin-top: 0 !important;
margin-bottom: -40px !important;
}
/* "All types": the classic link is lifted 3px */
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li#di-model-header-link-library-all a {
top: 0;
}
/* Display columns: the classic dropdown is shifted 34px left (right: 34px), onto Apply filters */
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk {
left: 0 !important;
right: auto !important;
}
/* Phones: no room beside the search, so the tools take their own row above it */
@media (max-width: 640px) {
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend,
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .position-relative,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button {
margin-bottom: 12px !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Search row (Reservations and Information): the search is a white pill like the buttons beside
it (it had square bottom corners and no shadow); Apply filters at the same 13.5px as Display
columns (Bootstrap's fs-12 shrank it); the Display columns chevron centred (it had a 10px top
margin) */
html.pie-premium .pp-shell .library-dpage .vgt-global-search {
height: 40px;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: #fff !important;
box-shadow: 0 1px 2px rgba(30, 38, 32, .05), 0 6px 16px -10px rgba(30, 40, 32, .25);
}
html.pie-premium .pp-shell .library-dpage .vgt-global-search .vgt-input {
height: 40px;
border: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .btn-group.dropend > .btn {
font-size: 13.5px !important;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle::after {
align-self: center;
margin-top: 0 !important;
}
/* Room for Apply filters (150px at 13.5px) + Display columns (184px) + 8px gaps, so the search
pill keeps a 12px gap instead of touching Apply filters */
html.pie-premium .pp-shell .library-dpage .vgt-global-search {
max-width: calc(100% - 354px);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking:has(> .pull-left.mb-2 > span:not([style*="none"])) .vgt-global-search {
max-width: calc(100% - 464px);
}
@media (max-width: 640px) {
html.pie-premium .pp-shell .library-dpage .vgt-global-search,
html.pie-premium .pp-shell .library-dpage #full-screen-booking:has(> .pull-left.mb-2 > span:not([style*="none"])) .vgt-global-search {
max-width: none;
}
}
/* Same toolbar as Reservations (reservations.css): the search is the translucent pill on the page
background (no shadow), and the columns button reads "Columns" with its icon, no chevron */
html.pie-premium .pp-shell .library-dpage .vgt-global-search {
background: rgba(255, 255, 255, .72) !important;
box-shadow: none;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle {
font-size: 0 !important;
}
html.pie-premium .pp-shell .library-dpage #pie-custom-dropdown-bk > button.dropdown-toggle::after {
content: 'Columns';
width: auto;
height: auto;
margin: 0 !important;
background: none;
-webkit-mask: none;
mask: none;
color: inherit;
font: 13.5px var(--pp-bold);
}
/* "Columns" is narrower than "Display Columns": Apply filters 150 + Columns 117 + 8 + 12 gap */
html.pie-premium .pp-shell .library-dpage .vgt-global-search {
max-width: calc(100% - 287px);
}
html.pie-premium .pp-shell .library-dpage #full-screen-booking:has(> .pull-left.mb-2 > span:not([style*="none"])) .vgt-global-search {
max-width: calc(100% - 397px);
}
@media (max-width: 640px) {
html.pie-premium .pp-shell .library-dpage .vgt-global-search,
html.pie-premium .pp-shell .library-dpage #full-screen-booking:has(> .pull-left.mb-2 > span:not([style*="none"])) .vgt-global-search {
max-width: none;
}
}
/* The primary action (New reservation / New information / Upload) on the tabs line, right-aligned:
beside the head actions it wrapped onto a line of its own and left a large gap above the tabs */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .reservation-actions > a.px-2,
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn {
order: 11 !important;
margin: 0 0 16px auto !important;
}
/* Information: its action wrapper kept Bootstrap's .d-flex (!important), so "Create new event" sat
on its own line; Cloud storage: the catch-all made "Upload" 100% wide */
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex {
display: contents !important;
}
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > a.btn,
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > a.btn {
flex: 0 0 auto !important;
width: auto !important;
}
/* Information: the empty sub-type list is inline-block, so it opened a ~24px text line under the
chips until a type is picked */
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-sub-category-block:not(:has(> li)) {
display: none;
}
/* ==========================================================================
QA fixes (Library: Information popup, Information list, Cloud Storage)
========================================================================== */
/* Type chips (list and popup): the chip carries the icon class, so its icon font (picos_thin)
reached the type name too and it fell back to a serif face */
html.pie-premium .pp-shell .library-dpage .booking-popup-header .booking-type-block > li::after {
font-family: var(--pp-sans);
}
/* ---------- Information popup (event/EventPopup.vue → PopupHeader.vue) ---------- */
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) .booking-popup-header {
position: relative;
margin: 0 0 6px !important;
}
/* "Add / Edit library item" title, the close button level with it */
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) .pp-event-popup-title {
margin: 0 0 16px;
padding: 6px 48px 0 0;
color: var(--pp-ink);
font: 20px/1.2 var(--pp-bold);
letter-spacing: -.015em;
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) .booking-popup-header:has(> .pp-event-popup-title) > .d-flex > .text-end {
position: absolute;
top: 0;
right: 0;
}
/* Main categories: 34px pills with the same ring, font and dark selected state as the
sub-type pills under them (classic: pink text and underline) */
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_header {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 10px !important;
padding: 0 !important;
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_header > li {
height: 34px;
margin: 0 !important;
padding: 0 13px !important;
border: 0 !important;
background: #fff;
color: var(--pp-ink-3) !important;
box-shadow: 0 0 0 1px var(--pp-line);
font-size: 13px;
cursor: pointer;
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_header > li::after {
color: inherit;
font: 13px/1 var(--pp-sans);
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_header > li:hover {
background: var(--pp-panel);
color: var(--pp-ink) !important;
box-shadow: 0 0 0 1px var(--pp-ink-3);
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_header > li.active-event-icon {
background: var(--pp-ink) !important;
color: #fff !important;
box-shadow: 0 6px 14px -10px rgba(20, 24, 20, .6);
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_header > li.active-event-icon::after {
font-family: var(--pp-bold);
}
/* Sub-types right under the categories, then the section heading */
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) ul.event_sub_type {
margin: 0 0 18px !important;
}
html.pie-premium .pp-shell .library-dpage .modal:is(#eventModalNew, .modal) .event-edit-content > h5.card-title {
margin: 0 0 16px !important;
padding-top: 16px;
border-top: 1px solid var(--pp-line);
color: var(--pp-ink);
font: 17px/1.3 var(--pp-bold);
}
/* ---------- Information list: long descriptions show 3 lines and "Show more" ---------- */
html.pie-premium .pp-shell .library-dpage .pp-lib-notes:not(.is-open) {
max-height: 4.5em;
overflow: hidden;
-webkit-mask-image: linear-gradient(#000 55%, transparent);
mask-image: linear-gradient(#000 55%, transparent);
}
html.pie-premium .pp-shell .library-dpage .pp-lib-notes:not(.is-open) :is(h1, h2, h3, h4, h5, h6, p) {
margin: 0;
font-size: inherit;
line-height: 1.5;
}
html.pie-premium .pp-shell .library-dpage .pp-lib-notes:not(.is-open) :is(img, iframe, video, table) {
display: none;
}
html.pie-premium .pp-shell .library-dpage .pp-lib-notes-more {
display: inline-block;
margin-top: 4px;
color: var(--pp-acc) !important;
font: 12.5px/1.4 var(--pp-bold);
text-decoration: none;
}
html.pie-premium .pp-shell .library-dpage .pp-lib-notes-more:hover {
text-decoration: underline;
}
/* ---------- Information list: Delete selected beside the search ----------
The chips are order 45 (the catch-all beats their order 20), so at order 30 the button
jumped up beside "Create new event". At 45 it follows the chips in source order and sits on
the zero-height line above the card, level with the search. */
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button {
order: 45;
margin: 0 0 -40px auto;
}
/* Reservations: the Delete holder kept Bootstrap's me-4 (24px, !important), which the search
width doesn't allow for, so Delete slid under the end of the search */
html.pie-premium .pp-shell .library-dpage #full-screen-booking > .pull-left.mb-2 {
margin-right: 0 !important;
}
@media (max-width: 640px) {
html.pie-premium .pp-shell .library-dpage .library-events > .d-flex > button {
margin: 0 0 12px;
}
}
/* ---------- Cloud Storage: Select all and Delete as pills on one line ----------
The catch-all (:is(#full-screen-booking, …) > *) carries an id, so it stretched both to
full-width bars; the id is repeated here to win. */
html.pie-premium .pp-shell .library-dpage :is(#full-screen-booking, .library-cloud-storage) > :is(.custom-checkbox, span.ms-4) {
order: 30;
flex: none;
width: auto;
height: 40px;
margin: 0 0 16px !important; /* the card's 8px column-gap spaces them */
}
/* Select all kept Bootstrap's d-inline-block and pe-4 (both !important): the label sat at the
top of the pill and 24px of padding widened the gap before Delete */
html.pie-premium .pp-shell .library-dpage :is(#full-screen-booking, .library-cloud-storage) > .custom-checkbox {
display: inline-flex !important;
align-items: center;
padding: 0 16px 0 42px !important;
}
/* …on a toolbar line of their own under the tabs (beside Upload they sat lower and shorter
than it): the page card's spare ::after breaks the line before them */
html.pie-premium .pp-shell .library-dpage .crm-page-content > .container-fluid > .booking-lists:has(.library-cloud-storage)::after {
content: "";
display: block;
order: 20;
flex: 0 0 100%;
height: 0;
}
/* The real checkbox sat 14px left of the drawn box, so only the label toggled it: put it
exactly over the box */
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox > input {
top: 50%;
left: 14px;
width: 18px;
height: 18px;
margin: 0;
transform: translateY(-50%);
cursor: pointer;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox > .checkmark {
pointer-events: none;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > .custom-checkbox > label {
color: var(--pp-ink);
font: 13.5px/1 var(--pp-bold);
cursor: pointer;
}
html.pie-premium .pp-shell .library-dpage .library-cloud-storage > span.ms-4 {
line-height: 1;
}
/* ---------- Loading overlay on the Library: page colour, Bordeaux dots (classic: 84% black) ---------- */
html.pie-premium:has(.pp-shell .library-dpage) #fullPageLoader {
background: color-mix(in srgb, var(--pp-bg) 72%, transparent);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
html.pie-premium:has(.pp-shell .library-dpage) #fullPageLoader .ldio-v1jtt91sjj > div {
background: var(--pp-acc);
}
html.pie-premium:has(.pp-shell .library-dpage) #fullPageLoaderMessage {
color: var(--pp-ink) !important;
}
/* ---------- Cloud Storage: Upload Files and Photos pop-up (DocumentsUpload.vue) ---------- */
/* Title as in the other new-look pop-ups */
html.pie-premium .pp-shell .library-dpage #libraryDocumentUpload .modal-title {
color: var(--pp-ink);
font: 20px/1.3 var(--pp-bold);
letter-spacing: -.01em;
}
/* Drop zone: one dashed box (the classic grey dropzone sat inside a bordered box and spilled
past it, which drew a double frame); grows with the previews once files are added */
html.pie-premium .pp-shell .library-dpage #libraryDocumentUpload .documents_upload {
height: auto !important;
min-height: 120px;
padding: 0;
border: 1.5px dashed var(--pp-line-2);
border-radius: 14px;
background: var(--pp-panel-2);
overflow: hidden;
transition: border-color .12s, background-color .12s;
}
html.pie-premium .pp-shell .library-dpage #libraryDocumentUpload .documents_upload:hover {
border-color: var(--pp-acc);
background: color-mix(in srgb, var(--pp-acc) 4%, var(--pp-panel-2));
}
html.pie-premium .pp-shell .library-dpage #libraryDocumentUpload .documents_upload :is(.upload_icon, #dropzone) {
min-height: 117px;
height: auto;
border: 0;
background: transparent;
}
html.pie-premium .pp-shell .library-dpage #libraryDocumentUpload #dropzone .dz-message {
color: var(--pp-ink-3);
font: 13px var(--pp-sans);
}