Adjusted typography, styles, and other visual elements to ensure consistent layouts
This commit is contained in:
78
src/content/styles/dialogs.css
Normal file
78
src/content/styles/dialogs.css
Normal file
@@ -0,0 +1,78 @@
|
||||
/* Modal titles follow the customer Service Requests heading. Keep section and
|
||||
calendar headings independent from dialog typography. */
|
||||
.opportunities-extension-modal :is(
|
||||
.opportunities-extension-header,
|
||||
.opportunities-extension-account-plans-header,
|
||||
.opportunities-extension-preferences-header
|
||||
) {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
/* These headers live in panels that already supply the outer inset. */
|
||||
.opportunities-extension-modal :is(.oe-org-dialog.oe-contact-dialog,
|
||||
.oe-org-confirm-panel, .opportunities-extension-projection-confirm,
|
||||
.opportunities-extension-debug-panel) { padding: 16px; }
|
||||
.opportunities-extension-modal :is(.oe-org-editor-header,
|
||||
.opportunities-extension-debug-panel-header) {
|
||||
padding: 0;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.opportunities-extension-modal :is(
|
||||
.opportunities-extension-account-plans-header,
|
||||
.opportunities-extension-preferences-header,
|
||||
.opportunities-extension-debug-panel-header
|
||||
) p {
|
||||
margin: 5px 0 0;
|
||||
font-family: "Oracle Sans", Arial, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
letter-spacing: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
/* Search controls share the 16px inset of their table frames. */
|
||||
.opportunities-extension-modal :is(.opportunities-extension-customer-table-toolbar,
|
||||
.opportunities-extension-ratecard-toolbar,
|
||||
.opportunities-extension-ratecard-plan-details) { padding-inline: 16px; }
|
||||
.opportunities-extension-modal .opportunities-extension-customer-table-toolbar {
|
||||
padding-block: 12px;
|
||||
}
|
||||
.opportunities-extension-modal .opportunities-extension-customer-table-search {
|
||||
width: min(420px, 100%);
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.opportunities-extension-modal :is(
|
||||
.opportunities-extension-header,
|
||||
.opportunities-extension-account-plans-header,
|
||||
.opportunities-extension-preferences-header,
|
||||
.opportunities-extension-debug-panel-header,
|
||||
.oe-org-editor-header
|
||||
) :is(h1, h2, h3),
|
||||
.opportunities-extension-modal .opportunities-extension-projection-confirm h2,
|
||||
.opportunities-extension-modal .oe-org-confirm-panel h3 {
|
||||
margin: 0;
|
||||
font-family: "Oracle Sans", Arial, Helvetica, sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
letter-spacing: normal;
|
||||
color: #312d2a;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.opportunities-extension-modal[data-theme="dark"] :is(
|
||||
.opportunities-extension-header,
|
||||
.opportunities-extension-account-plans-header,
|
||||
.opportunities-extension-preferences-header,
|
||||
.opportunities-extension-debug-panel-header,
|
||||
.oe-org-editor-header
|
||||
) :is(h1, h2, h3),
|
||||
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-confirm h2,
|
||||
.opportunities-extension-modal[data-theme="dark"] .oe-org-confirm-panel h3 {
|
||||
color: #f6f4f2;
|
||||
}
|
||||
106
src/content/styles/tables.css
Normal file
106
src/content/styles/tables.css
Normal file
@@ -0,0 +1,106 @@
|
||||
/* Shared data-table presentation. Calendar grids are intentionally not data tables. */
|
||||
.opportunities-extension-modal :is(
|
||||
.opportunities-extension-table-surface,
|
||||
.opportunities-extension-install-base-content,
|
||||
.opportunities-extension-service-requests-content,
|
||||
.opportunities-extension-ratecard-viewport,
|
||||
.opportunities-extension-projection-viewport,
|
||||
.oe-time-grid,
|
||||
.oe-contact-opportunities-table
|
||||
) {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--oe-table-heading-border);
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
/* Unpadded dialogs need an inset on the scrolling frame itself. */
|
||||
.opportunities-extension-modal :is(
|
||||
.opportunities-extension-install-base-content,
|
||||
.opportunities-extension-service-requests-content,
|
||||
.opportunities-extension-ratecard-viewport
|
||||
) { margin: 16px; }
|
||||
/* Other frames already sit inside a padded body: keep a single gutter. */
|
||||
.opportunities-extension-modal :is(
|
||||
.opportunities-extension-body,
|
||||
.opportunities-extension-projection-body,
|
||||
.opportunities-extension-products-detail,
|
||||
.oe-time-body,
|
||||
.oe-org-dialog.oe-contact-opportunities
|
||||
) { padding: 16px; }
|
||||
.opportunities-extension-modal table.opportunities-extension-products-table {
|
||||
border: 1px solid var(--oe-table-heading-border);
|
||||
}
|
||||
.opportunities-extension-modal {
|
||||
--oe-table-heading: #faf9f8;
|
||||
--oe-table-text: #312d2a;
|
||||
--oe-table-border: #ebe8e5;
|
||||
--oe-table-heading-border: #b8b2ad;
|
||||
--oe-table-hover: #f5f4f2;
|
||||
}
|
||||
.opportunities-extension-modal[data-theme="dark"] {
|
||||
--oe-table-heading: #333130;
|
||||
--oe-table-text: #f6f4f2;
|
||||
--oe-table-border: #3f3c39;
|
||||
--oe-table-heading-border: #4e4a46;
|
||||
--oe-table-hover: #35322f;
|
||||
}
|
||||
.opportunities-extension-modal table[data-table-layout="standard"]:not(.fc-scrollgrid) {
|
||||
width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto;
|
||||
color: var(--oe-table-text); font-size: 12px; line-height: 1.35;
|
||||
}
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > thead > tr > th {
|
||||
padding: 10px 12px; height: 44px; vertical-align: middle; text-align: left;
|
||||
white-space: nowrap; overflow-wrap: normal; word-break: normal;
|
||||
font-size: 12px; font-weight: 700; color: var(--oe-table-text);
|
||||
background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-heading-border);
|
||||
}
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > tbody > tr > td {
|
||||
padding: 10px 12px; vertical-align: middle; text-align: left;
|
||||
border-bottom: 1px solid var(--oe-table-border);
|
||||
}
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > tbody > tr:hover { background: var(--oe-table-hover); }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > thead > tr > th .opportunities-extension-sort-button,
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] .opportunities-extension-ratecard-sort {
|
||||
display: flex; align-items: center; justify-content: flex-start; gap: 8px;
|
||||
width: 100%; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0;
|
||||
border: 0; border-radius: 0; background: transparent; color: inherit;
|
||||
text-align: left; white-space: nowrap; overflow-wrap: normal; font-weight: 700;
|
||||
}
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > thead > tr > th .opportunities-extension-sort-button::after { position: absolute; right: 0; left: auto; font-size: 12px; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] .opportunities-extension-ratecard-sort-icon { margin-left: auto; }
|
||||
/* Currency columns keep their heading and value on the same right edge. */
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] :is(th, td)[data-align="money"] { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > thead > tr > th[data-align="money"] .opportunities-extension-sort-button,
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] th[data-align="money"] .opportunities-extension-ratecard-sort { justify-content: flex-end; text-align: right; padding: 4px 0 4px 18px; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > thead > tr > th[data-align="money"] .opportunities-extension-sort-button::after { left: 0; right: auto; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] th[data-align="money"] .opportunities-extension-ratecard-sort-icon { order: -1; margin-left: 0; margin-right: auto; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] td[data-align="money"] > span[class*="skeleton"] { margin-left: auto; }
|
||||
/* Preserve room for Overview badges and the compact daily entry controls. */
|
||||
.opportunities-extension-modal table.opportunities-extension-table > tbody > tr > td:is([data-column="name"], [data-column="customer"]) { padding-bottom: 38px; vertical-align: top; }
|
||||
.opportunities-extension-modal .oe-time-grid table[data-table-layout="standard"] > :is(thead, tbody) > tr > :is(th, td) { padding-left: 5px; padding-right: 5px; }
|
||||
.opportunities-extension-modal .oe-time-grid table[data-table-layout="standard"] { table-layout: fixed; }
|
||||
.opportunities-extension-modal table[data-table-layout="standard"] > tbody > tr > th[scope="row"] { padding: 10px 12px; text-align: left; background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-border); }
|
||||
/* Rate Card must fit its drawer; headings may wrap at spaces, never mid-word. */
|
||||
.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout="standard"] {
|
||||
min-width: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout="standard"] > :is(thead, tbody) > tr > :is(th, td) {
|
||||
padding-inline: 6px;
|
||||
}
|
||||
.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout="standard"] > thead > tr > th,
|
||||
.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout="standard"] > thead > tr > th .opportunities-extension-ratecard-sort {
|
||||
white-space: normal;
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
hyphens: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout="standard"] > thead > tr > th .opportunities-extension-ratecard-sort {
|
||||
padding: 4px 0;
|
||||
gap: 4px;
|
||||
}
|
||||
.opportunities-extension-modal .opportunities-extension-ratecard-sort > span:first-child { min-width: 0; }
|
||||
.opportunities-extension-modal .opportunities-extension-ratecard-sort-icon { flex: 0 0 12px; }
|
||||
Reference in New Issue
Block a user