/* ========================================================================== Skins — shared component layer plus the Office eras Each is a skin, not a palette of its own: the layout stamps , so every rule written for the light theme still applies and this sheet only re-tones the chrome. The component layer below is shared and reads --x-* variables, so an era is just a palette block. Gradient eras (2007, 2010) set gradients; flat eras (2016, 365) set solid colours and clear the bevel. Loaded after theme.css so it wins. Nothing applies without the skin attribute, so the stock light and dark themes are untouched. ========================================================================== */ /* -------------------------------------------------------------------------- Shared shell tokens — the parts every era agrees on. -------------------------------------------------------------------------- */ :root[data-skin] { --surface-1: #FFFFFF; --surface-2: #FFFFFF; --r-sm: var(--x-radius); --r-md: var(--x-radius); --r-lg: var(--x-radius); --r-xl: var(--x-radius); --tile-glow: 0.10; --line: var(--x-line); --line-strong: var(--x-line-strong); --scroll-thumb: var(--x-line-strong); --scroll-thumb-hi: var(--x-accent); --dot: var(--x-line-strong); --dot-hi: var(--x-accent); --app-bg: var(--x-app-bg); --shell-bg: var(--x-sidebar); --shell-bg-deep: var(--x-app-bg); --surface-3: var(--x-surface-3); --text-1: var(--x-ink); --text-2: var(--x-ink-soft); --text-3: var(--x-muted); --shadow-1: var(--x-shadow-1); --shadow-2: var(--x-shadow-2); --shadow-3: var(--x-shadow-3); --info: var(--x-accent); --ok: var(--x-ok); --warn: var(--x-warn); --bad: var(--x-bad); } /* ========================================================================== Office 2007 — glossy blue, heavy bevels, amber selection. ========================================================================== */ :root[data-skin='office2007'] { --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --x-radius: 2px; --x-inset: inset 0 1px 0 #fff; --x-app-bg: #EDF2F9; --x-surface-3: #F7FAFD; --x-row-alt: #F7FAFD; --x-sidebar: linear-gradient(180deg, #FDFEFF 0%, #E3ECF7 100%); --x-title: linear-gradient(180deg, #FDFEFF 0%, #D2E1F3 100%); --x-header: linear-gradient(180deg, #F7FAFD 0%, #D8E5F5 100%); --x-total: linear-gradient(180deg, #E7F0FA 0%, #D2E1F3 100%); --x-chrome: linear-gradient(180deg, #FDFEFF 0%, #DFE9F5 100%); --x-chrome-hover: linear-gradient(180deg, #FFFCF0 0%, #FFE7A8 100%); --x-chrome-active: linear-gradient(180deg, #FFE7A8 0%, #FFD26A 100%); --x-hover: #FFF6DA; --x-hover-line: #E0A526; --x-line: #C3D0E2; --x-line-soft: #DCE4EF; --x-line-strong: #8DB2E3; --x-ink: #16334F; --x-ink-soft: #3F5872; --x-muted: #74869B; --x-accent: #1F5FA9; --x-accent-dark: #17416F; --x-primary: linear-gradient(180deg, #4E88CE 0%, #1F5FA9 100%); --x-primary-hover: linear-gradient(180deg, #5C95D8 0%, #246ABA 100%); --x-primary-line: #17416F; --x-neutral: linear-gradient(180deg, #5B7592 0%, #3B5570 100%); --x-neutral-line: #2E4257; --x-success: linear-gradient(180deg, #3FA65A 0%, #1E7B34 100%); --x-success-line: #145A25; --x-danger-bg: linear-gradient(180deg, #E2574A 0%, #C0392B 100%); --x-danger-line: #A93226; --x-warning-bg: linear-gradient(180deg, #F5C25B 0%, #D89B1C 100%); --x-warning-line: #B8730C; --x-info-bg: linear-gradient(180deg, #5FA8D8 0%, #2A7FB8 100%); --x-info-line: #1F6191; --x-ok: #1E7B34; --x-warn: #B8730C; --x-bad: #C0392B; --x-shadow-1: 0 1px 1px rgba(22, 51, 79, .10); --x-shadow-2: 0 2px 6px rgba(22, 51, 79, .14); --x-shadow-3: 0 4px 14px rgba(22, 51, 79, .18); } /* ========================================================================== Office 2010 — silver chrome, softer gradients, deeper blue accent. ========================================================================== */ :root[data-skin='office2010'] { --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --x-radius: 3px; --x-inset: inset 0 1px 0 rgba(255, 255, 255, .8); --x-app-bg: #EEF1F4; --x-surface-3: #F7F9FB; --x-row-alt: #F7F9FB; --x-sidebar: linear-gradient(180deg, #FFFFFF 0%, #E4E9ED 100%); --x-title: linear-gradient(180deg, #FFFFFF 0%, #DDE3E9 100%); --x-header: linear-gradient(180deg, #FAFBFC 0%, #E4E9EE 100%); --x-total: linear-gradient(180deg, #EDF1F5 0%, #DCE3EA 100%); --x-chrome: linear-gradient(180deg, #FDFDFE 0%, #E6EAEE 100%); --x-chrome-hover: linear-gradient(180deg, #FEF9E7 0%, #FBE08E 100%); --x-chrome-active: linear-gradient(180deg, #FBE08E 0%, #F5CE5E 100%); --x-hover: #FDF6DE; --x-hover-line: #D9A82C; --x-line: #C6CDD4; --x-line-soft: #E2E7EB; --x-line-strong: #8FA4B8; --x-ink: #1B2A38; --x-ink-soft: #46586A; --x-muted: #7A8894; --x-accent: #1F4E79; --x-accent-dark: #163E5F; --x-primary: linear-gradient(180deg, #6FA8DC 0%, #2E75B6 100%); --x-primary-hover: linear-gradient(180deg, #7FB4E3 0%, #3781C4 100%); --x-primary-line: #1F4E79; --x-neutral: linear-gradient(180deg, #7C8B99 0%, #55636F 100%); --x-neutral-line: #3E4A54; --x-success: linear-gradient(180deg, #6FBF7F 0%, #3C8F4E 100%); --x-success-line: #2C6B3A; --x-danger-bg: linear-gradient(180deg, #E57C70 0%, #C0504D 100%); --x-danger-line: #9C3F3C; --x-warning-bg: linear-gradient(180deg, #F7CE6B 0%, #E0A32E 100%); --x-warning-line: #B8801F; --x-info-bg: linear-gradient(180deg, #74B3DC 0%, #3C87BE 100%); --x-info-line: #2A6A97; --x-ok: #2C6B3A; --x-warn: #B8801F; --x-bad: #9C3F3C; --x-shadow-1: 0 1px 1px rgba(27, 42, 56, .08); --x-shadow-2: 0 2px 5px rgba(27, 42, 56, .12); --x-shadow-3: 0 4px 12px rgba(27, 42, 56, .16); } /* ========================================================================== Office 2016 — flat, Excel green, no bevels. ========================================================================== */ :root[data-skin='office2016'] { --x-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --x-radius: 0px; --x-inset: none; --x-app-bg: #F3F2F1; --x-surface-3: #FAFAFA; --x-row-alt: #FAFAFA; --x-sidebar: #FFFFFF; --x-title: #217346; --x-header: #F3F2F1; --x-total: #E8F3EE; --x-chrome: #FFFFFF; --x-chrome-hover: #E8F3EE; --x-chrome-active: #D3E9DD; --x-hover: #E8F3EE; --x-hover-line: #217346; --x-line: #D0D0D0; --x-line-soft: #E1DFDD; --x-line-strong: #8A8886; --x-ink: #201F1E; --x-ink-soft: #484644; --x-muted: #797775; --x-accent: #217346; --x-accent-dark: #1A5C38; --x-primary: #217346; --x-primary-hover: #1A5C38; --x-primary-line: #1A5C38; --x-neutral: #605E5C; --x-neutral-line: #484644; --x-success: #107C10; --x-success-line: #0B5A0B; --x-danger-bg: #A4262C; --x-danger-line: #751B20; --x-warning-bg: #D83B01; --x-warning-line: #A32D01; --x-info-bg: #0078D4; --x-info-line: #005A9E; --x-ok: #107C10; --x-warn: #A32D01; --x-bad: #A4262C; --x-shadow-1: 0 1px 1px rgba(0, 0, 0, .06); --x-shadow-2: 0 2px 4px rgba(0, 0, 0, .10); --x-shadow-3: 0 4px 10px rgba(0, 0, 0, .13); } /* ========================================================================== Microsoft 365 — Fluent: soft neutrals, modern green, gentle corners. ========================================================================== */ :root[data-skin='office365'] { --x-font: "Segoe UI Variable Text", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --x-radius: 4px; --x-inset: none; --x-app-bg: #FAF9F8; --x-surface-3: #F3F2F1; --x-row-alt: #FAF9F8; --x-sidebar: #FFFFFF; --x-title: #107C41; --x-header: #F3F2F1; --x-total: #EBF5EF; --x-chrome: #FFFFFF; --x-chrome-hover: #F3F2F1; --x-chrome-active: #EDEBE9; --x-hover: #F3F2F1; --x-hover-line: #107C41; --x-line: #EDEBE9; --x-line-soft: #F3F2F1; --x-line-strong: #C8C6C4; --x-ink: #242424; --x-ink-soft: #424242; --x-muted: #616161; --x-accent: #107C41; --x-accent-dark: #0B5C30; --x-primary: #107C41; --x-primary-hover: #0B5C30; --x-primary-line: #0B5C30; --x-neutral: #424242; --x-neutral-line: #292929; --x-success: #0E700E; --x-success-line: #0B5A0B; --x-danger-bg: #C50F1F; --x-danger-line: #960B18; --x-warning-bg: #DA3B01; --x-warning-line: #A82C00; --x-info-bg: #0F6CBD; --x-info-line: #0C549A; --x-ok: #0E700E; --x-warn: #A82C00; --x-bad: #C50F1F; --x-shadow-1: 0 1px 2px rgba(0, 0, 0, .07); --x-shadow-2: 0 2px 6px rgba(0, 0, 0, .10); --x-shadow-3: 0 8px 16px rgba(0, 0, 0, .14); } /* -------------------------------------------------------------------------- Page canvas The shell paints the content area with a Tailwind utility (tw-bg-gray-100), which is a fixed light grey. A skin owns its own canvas, so it is repainted from the palette here. Scoped to [data-skin] so the stock light and dark themes keep the behaviour they already had. -------------------------------------------------------------------------- */ :root[data-skin] body, :root[data-skin] main, :root[data-skin] #scrollable-container { background-color: var(--x-app-bg); } /* -------------------------------------------------------------------------- Typography — each era names its own face. -------------------------------------------------------------------------- */ :root[data-skin] body, :root[data-skin] .content-wrapper, :root[data-skin] main { font-family: var(--x-font); } /* -------------------------------------------------------------------------- Sidebar — a navigation pane with a banded head and hairline rows. -------------------------------------------------------------------------- */ :root[data-skin] #side-bar { background: var(--x-sidebar); border-right: 1px solid var(--x-line); } :root[data-skin] #side-bar .nav-head { background: var(--x-header); border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); color: var(--x-accent-dark); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; box-shadow: var(--x-inset); border-radius: 0; margin: 6px 0 2px; padding-top: 4px; padding-bottom: 4px; } :root[data-skin] #side-bar .nav-item, :root[data-skin] #side-bar .nav-sub { border-radius: var(--x-radius); color: var(--text-1); } :root[data-skin] #side-bar .nav-item:hover, :root[data-skin] #side-bar .nav-sub:hover { background: var(--x-chrome-hover); border: 1px solid var(--x-hover-line); color: var(--x-accent-dark); } :root[data-skin] #side-bar .nav-item.theme-sidebar-active { background: var(--x-chrome-active); border: 1px solid var(--x-hover-line); color: var(--x-accent-dark); font-weight: 600; } :root[data-skin] #side-bar .nav-item.theme-sidebar-active::before { background: var(--x-accent); border-radius: 0; } :root[data-skin] #side-bar .nav-sub.theme-sidebar-child-active { background: var(--x-chrome-hover); border: 1px solid var(--x-hover-line); color: var(--x-accent-dark); font-weight: 600; } :root[data-skin] #side-bar .chiled-line, :root[data-skin] .nav-divider { background: var(--x-line); } :root[data-skin] #side-bar::-webkit-scrollbar-thumb { background: var(--x-line-strong); border-radius: 0; } /* -------------------------------------------------------------------------- Brand block — reads as the workbook title bar. -------------------------------------------------------------------------- */ :root[data-skin] .brand, :root[data-skin] .theme-logo-bg, :root[data-skin] .theme-header-bg { background: var(--x-title); border-bottom: 1px solid var(--x-line); box-shadow: var(--x-inset); border-radius: 0; } :root[data-skin] .brand-mark { background: var(--x-primary); border: 1px solid var(--x-primary-line); border-radius: var(--x-radius); color: #fff; } :root[data-skin] .brand-name { color: var(--x-accent-dark); font-weight: 700; } :root[data-skin] .brand-meta, :root[data-skin] .brand-text { color: var(--text-2); } /* -------------------------------------------------------------------------- Topbar — the ribbon strip. -------------------------------------------------------------------------- */ :root[data-skin] .app-topbar, :root[data-skin] .thetop { background: var(--x-title); border-bottom: 1px solid var(--x-line); box-shadow: var(--x-inset); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-skin] .tb-btn, :root[data-skin] .theme-btn-bg, :root[data-skin] .rail-toggle { background: var(--x-chrome); border: 1px solid var(--x-line); border-radius: var(--x-radius); color: var(--x-accent-dark); box-shadow: var(--x-inset); } :root[data-skin] .tb-btn:hover, :root[data-skin] .theme-btn-bg:hover, :root[data-skin] .rail-toggle:hover { background: var(--x-chrome-hover); border-color: var(--x-hover-line); color: var(--x-accent-dark); } :root[data-skin] .tb-btn:active { background: var(--x-chrome-active); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); } :root[data-skin] .tb-btn.is-primary { background: var(--x-primary); border-color: var(--x-primary-line); color: #fff; } :root[data-skin] .tb-btn.is-primary:hover { background: var(--x-primary-hover); color: #fff; } /* Dropdown menus */ :root[data-skin] .tb-menu { background: #fff; border: 1px solid var(--x-line); border-radius: var(--x-radius); box-shadow: var(--shadow-2); } :root[data-skin] .tb-menu-head { background: var(--x-header); border-bottom: 1px solid var(--x-line); color: var(--x-accent-dark); } :root[data-skin] .tb-menu button:hover { background: var(--x-chrome-hover); color: var(--x-accent-dark); } /* -------------------------------------------------------------------------- Page surfaces — boxes become worksheet frames. -------------------------------------------------------------------------- */ :root[data-skin] .box, :root[data-skin] .panel, :root[data-skin] .modal-content, :root[data-skin] .widget-card { border: 1px solid var(--x-line); border-radius: 0; box-shadow: var(--shadow-1); background: #fff; } :root[data-skin] .box-header, :root[data-skin] .panel-heading, :root[data-skin] .modal-header { background: var(--x-title); border-bottom: 1px solid var(--x-line); border-radius: 0; color: var(--x-accent-dark); box-shadow: var(--x-inset); } :root[data-skin] .box-title, :root[data-skin] .modal-title { color: var(--x-accent-dark); font-weight: 600; } /* -------------------------------------------------------------------------- Tables — the worksheet grid, including DataTables. -------------------------------------------------------------------------- */ :root[data-skin] table.table, :root[data-skin] table.dataTable { border-collapse: collapse; background: #fff; } :root[data-skin] table.table > thead > tr > th, :root[data-skin] table.dataTable > thead > tr > th { background: var(--x-header); border: 1px solid var(--x-line) !important; border-bottom-width: 1px !important; color: var(--x-accent-dark); font-weight: 600; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; box-shadow: var(--x-inset); } :root[data-skin] table.table > tbody > tr > td, :root[data-skin] table.dataTable > tbody > tr > td { border: 1px solid var(--x-line-soft) !important; color: var(--text-1); } :root[data-skin] table.table > tbody > tr:nth-of-type(even), :root[data-skin] table.dataTable > tbody > tr.even { background-color: #F7FAFD; } :root[data-skin] table.table > tbody > tr:hover, :root[data-skin] table.dataTable > tbody > tr:hover { background-color: var(--x-hover) !important; } /* Numeric columns line up like a spreadsheet. */ :root[data-skin] table.table td.text-right, :root[data-skin] table.dataTable td.text-right { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Form controls — cell editors. -------------------------------------------------------------------------- */ :root[data-skin] .form-control, :root[data-skin] .select2-container--default .select2-selection--single, :root[data-skin] .select2-container--default .select2-selection--multiple { border: 1px solid var(--x-line); border-radius: var(--x-radius); background-color: #fff; color: var(--text-1); box-shadow: none; } :root[data-skin] .form-control:focus, :root[data-skin] .select2-container--default.select2-container--focus .select2-selection--single, :root[data-skin] .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--x-line-strong); box-shadow: inset 0 0 0 1px rgba(141, 178, 227, .45); outline: none; } :root[data-skin] .input-group-addon { background: var(--x-header); border: 1px solid var(--x-line); border-radius: var(--x-radius); color: var(--text-2); } /* -------------------------------------------------------------------------- Buttons — Office chrome, amber on hover. -------------------------------------------------------------------------- */ :root[data-skin] .btn { border-radius: var(--x-radius); box-shadow: var(--x-inset); } :root[data-skin] .btn-default, :root[data-skin] .btn-white { background: var(--x-chrome); border: 1px solid var(--x-line); color: var(--text-1); } :root[data-skin] .btn-default:hover, :root[data-skin] .btn-white:hover { background: var(--x-chrome-hover); border-color: var(--x-hover-line); color: var(--x-accent-dark); } :root[data-skin] .btn-primary { background: var(--x-primary); border-color: var(--x-primary-line); color: #fff; } :root[data-skin] .btn-primary:hover { background: var(--x-primary-hover); border-color: var(--x-primary-line); } :root[data-skin] .btn-success { background: var(--x-success); border-color: var(--x-success-line); color: #fff; } :root[data-skin] .btn-danger { background: var(--x-danger-bg); border-color: var(--x-danger-line); color: #fff; } :root[data-skin] .btn-warning { background: var(--x-warning-bg); border-color: var(--x-warning-line); color: #3A2A05; } :root[data-skin] .btn-info { background: var(--x-info-bg); border-color: var(--x-info-line); color: #fff; } /* -------------------------------------------------------------------------- Tabs, pagination and small chrome. -------------------------------------------------------------------------- */ :root[data-skin] .nav-tabs > li > a { border-radius: 2px 2px 0 0; background: var(--x-header); border: 1px solid var(--x-line); color: var(--text-2); } :root[data-skin] .nav-tabs > li.active > a, :root[data-skin] .nav-tabs > li.active > a:hover { background: #fff; border-bottom-color: #fff; color: var(--x-accent-dark); font-weight: 600; } :root[data-skin] .pagination > li > a, :root[data-skin] .pagination > li > span, :root[data-skin] .paginate_button { border-radius: 2px !important; border: 1px solid var(--x-line) !important; background: var(--x-chrome) !important; color: var(--x-accent-dark) !important; } :root[data-skin] .pagination > .active > a, :root[data-skin] .paginate_button.current { background: var(--x-chrome-active) !important; border-color: var(--x-hover-line) !important; color: var(--x-accent-dark) !important; } :root[data-skin] .label, :root[data-skin] .badge { border-radius: var(--x-radius); } /* Scrollbars */ :root[data-skin] ::-webkit-scrollbar-thumb { background: var(--x-line-strong); border-radius: 0; } :root[data-skin] ::-webkit-scrollbar-track { background: #EDF2F9; } /* -------------------------------------------------------------------------- DaisyUI The component library is variable driven and its theme is keyed on [data-theme=light], which this skin rides on. Re-declaring those variables here re-tones every DaisyUI component in the codebase - all 400+ button usages included - without touching a single blade. -------------------------------------------------------------------------- */ :root[data-skin] { /* Office blue primary, deep blue-grey neutral. */ --p: 41.5% 0.115 258; --pc: 100% 0 0; --s: 45% 0.09 250; --sc: 100% 0 0; --a: 41.5% 0.115 258; --ac: 100% 0 0; --n: 33% 0.03 255; --nc: 100% 0 0; /* Worksheet surfaces. */ --b1: 100% 0 0; --b2: 97.5% 0.006 250; --b3: 93% 0.014 250; --bc: 22% 0.035 255; --su: 45% 0.12 150; --suc: 100% 0 0; --wa: 60% 0.13 75; --wac: 100% 0 0; --er: 48% 0.17 27; --erc: 100% 0 0; --in: 45% 0.11 245; --inc: 100% 0 0; /* Square chrome, no pop animation. */ --rounded-box: 2px; --rounded-btn: 2px; --rounded-badge: 2px; --tab-radius: 2px; --animation-btn: 0s; --animation-input: 0s; --btn-focus-scale: 1; --border-btn: 1px; } /* Give DaisyUI buttons the Office bevel and the amber hover. */ :root[data-skin] .tw-dw-btn { border-radius: var(--x-radius); box-shadow: var(--x-inset); text-transform: none; font-family: inherit; } :root[data-skin] .tw-dw-btn:not(.tw-dw-btn-primary):not(.tw-dw-btn-neutral):not(.tw-dw-btn-error):not(.tw-dw-btn-success):not(.tw-dw-btn-warning):not(.tw-dw-btn-info):not(.tw-dw-btn-accent) { background: var(--x-chrome); border-color: var(--x-line); color: var(--text-1); } :root[data-skin] .tw-dw-btn:hover { background: var(--x-chrome-hover); border-color: var(--x-hover-line); color: var(--x-accent-dark); } /* * Solid variants. Outline is excluded from every one of them: DaisyUI keeps the * solid colour rule's white text on an outline button, which over a light * Office background reads as white-on-white, so outline is coloured explicitly * further down instead. */ :root[data-skin] .tw-dw-btn-primary:not(.tw-dw-btn-outline) { background: var(--x-primary); border-color: var(--x-primary-line); color: #fff; } :root[data-skin] .tw-dw-btn-primary:not(.tw-dw-btn-outline):hover { background: var(--x-primary-hover); border-color: var(--x-primary-line); color: #fff; } :root[data-skin] .tw-dw-btn-neutral:not(.tw-dw-btn-outline) { background: var(--x-neutral); border-color: var(--x-neutral-line); color: #fff; } :root[data-skin] .tw-dw-btn-success:not(.tw-dw-btn-outline) { background: var(--x-success); border-color: var(--x-success-line); color: #fff; } :root[data-skin] .tw-dw-btn-error:not(.tw-dw-btn-outline) { background: var(--x-danger-bg); border-color: var(--x-danger-line); color: #fff; } :root[data-skin] .tw-dw-btn-warning:not(.tw-dw-btn-outline) { background: var(--x-warning-bg); border-color: var(--x-warning-line); color: #3A2A05; } :root[data-skin] .tw-dw-btn-info:not(.tw-dw-btn-outline), :root[data-skin] .tw-dw-btn-accent:not(.tw-dw-btn-outline) { background: var(--x-info-bg); border-color: var(--x-info-line); color: #fff; } /* Outline: a white cell with the variant colour on the text and border. */ :root[data-skin] .tw-dw-btn-outline { background: #fff; box-shadow: none; color: var(--x-accent-dark); border-color: var(--x-line-strong); } :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-primary { color: var(--x-primary-line); border-color: var(--x-primary-line); } :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-info, :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-accent { color: var(--x-info-line); border-color: var(--x-info-line); } :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-success { color: var(--x-success-line); border-color: var(--x-success-line); } :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-error { color: var(--x-danger-line); border-color: var(--x-danger-line); } :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-warning { color: #8A5A08; border-color: var(--x-warning-line); } :root[data-skin] .tw-dw-btn-outline.tw-dw-btn-neutral { color: var(--x-neutral-line); border-color: var(--x-neutral-line); } :root[data-skin] .tw-dw-btn-outline:hover { background: var(--x-chrome-hover); border-color: var(--x-hover-line); color: var(--x-accent-dark); } /* -------------------------------------------------------------------------- Tailwind utilities used as page furniture across the blades. Office 2007 has no rounded cards and no soft drop shadows, so the utility classes the views lean on are squared off and flattened here rather than edited out of 954 templates. -------------------------------------------------------------------------- */ :root[data-skin] [class*='tw-rounded-']:not(.tw-rounded-full):not(.brand-dot):not(img):not(.tw-dw-toggle) { border-radius: 2px !important; } :root[data-skin] [class*='tw-shadow-']:not(.tw-shadow-none) { box-shadow: var(--shadow-1) !important; } /* Cards built from Tailwind surfaces get the worksheet frame. */ :root[data-skin] .widget-card, :root[data-skin] .tw-bg-white.tw-shadow-sm, :root[data-skin] .tw-bg-white.tw-shadow-md, :root[data-skin] .tw-bg-white.tw-shadow { border: 1px solid var(--x-line) !important; border-radius: 0 !important; box-shadow: var(--shadow-1) !important; } /* -------------------------------------------------------------------------- Remaining Bootstrap / AdminLTE furniture. -------------------------------------------------------------------------- */ :root[data-skin] .modal-header { border-top-left-radius: 0; border-top-right-radius: 0; } :root[data-skin] .modal-footer { background: var(--x-header); border-top: 1px solid var(--x-line); } :root[data-skin] .well, :root[data-skin] .alert, :root[data-skin] .list-group-item, :root[data-skin] .breadcrumb { border-radius: var(--x-radius); border-color: var(--x-line); } :root[data-skin] .well { background: var(--x-header); box-shadow: inset 0 1px 2px rgba(22, 51, 79, .06); } /* DataTables chrome */ :root[data-skin] .dataTables_wrapper .dataTables_length select, :root[data-skin] .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; } :root[data-skin] .dataTables_wrapper .dataTables_info, :root[data-skin] .dataTables_wrapper .dataTables_length, :root[data-skin] .dataTables_wrapper .dataTables_filter { color: var(--text-2); } :root[data-skin] table.dataTable tfoot th, :root[data-skin] table.table tfoot th, :root[data-skin] table.table tfoot td { background: var(--x-total); border-top: 2px solid var(--x-line-strong) !important; color: var(--x-accent-dark); font-weight: 700; } /* -------------------------------------------------------------------------- acc-* components Accounting, Inventory Reports, Commerce and Collection share a component set defined in an inline