* { box-sizing: border-box; } /* Reserve the scrollbar gutter permanently so opening a Web Awesome modal (wa-drawer/wa-dialog) — which can lock body scroll and remove the scrollbar — doesn't reflow / shift the page content. */ html { scrollbar-gutter: stable; } :not(:defined) { visibility: hidden; } /* Sync native controls to the active theme so the browser's native date picker (the calendar icon + drop-down) follows light/dark like the WA components, instead of always rendering its light-mode chrome. */ .sl-theme-light, .wa-light { color-scheme: light; } .sl-theme-dark, .wa-dark { color-scheme: dark; } /* Web Awesome brand palette — Microsoft Teams brand ramp. WA's semantic brand tokens (--wa-color-brand-fill-loud, -border-loud, -on-quiet, …) derive from this tint scale: 95 = lightest … 50 = the primary fill (takes white text) … 05 = darkest (inverted vs Shoelace's 50–950). The app loads only WA's themes/default.css, which *references* these tints but ships no values, so defining them brands the WA components and supplies the values our own CSS uses (via --wa-color-brand-50/-40/-80). Replaces the former --sl-color-primary-*. MUST live on :root (= , where the .wa-light/.wa-dark theme class sits): WA's brand semantic tokens are declared on and substitute var(--wa-color- brand-50) at THAT element, so a -level definition wouldn't be seen. */ :root { --wa-color-brand-95: #e8ebfa; --wa-color-brand-90: #dce0fa; --wa-color-brand-80: #c5cbfa; --wa-color-brand-70: #aab1fa; --wa-color-brand-60: #7f85f5; --wa-color-brand-50: #5b5fc7; --wa-color-brand-40: #4f52b2; --wa-color-brand-30: #444791; --wa-color-brand-20: #383966; --wa-color-brand-10: #2f2f4a; --wa-color-brand-05: #2b2b40; } /* Dark theme — Teams shifts the brand brighter on dark surfaces. WA remaps the ramp per mode (dark uses the LOW stops for quiet fills, the mid for loud fill, the upper-mid for "on"/accent text). So we keep brand-50 (#5b5fc7) as the button fill — white text stays legible, like Teams — but lift the accent stops (60/70) one Fluent step brighter and nudge the quiet/bg stops (05–20) lighter so subtle brand fills read on dark. Placed after :root so it wins when .wa-dark is on . */ .wa-dark { --wa-color-brand-95: #e8ebfa; --wa-color-brand-90: #dce0fa; --wa-color-brand-80: #c5cbfa; --wa-color-brand-70: #b6bcfa; --wa-color-brand-60: #9299f7; --wa-color-brand-50: #5b5fc7; --wa-color-brand-40: #4f52b2; --wa-color-brand-30: #444791; --wa-color-brand-20: #3d3e78; --wa-color-brand-10: #333357; --wa-color-brand-05: #2f2f4a; } body { /*background-color: #eee;*/ /*touch-action: manipulation; /* prevents pinch-zoom and double-tap zoom */ font-size: 1rem; margin: 0.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sl-theme-light{ background-color: #fff; } /* #f5f5f5 */ ::-webkit-scrollbar { display: none; } span p { display: inline; } /* .homeToDo { float: left; min-width: 700px; max-width: 1000px; } .noTasksPlaceholder { text-align: center; width:100%; margin: 20px; margin-bottom: 40px; color:#999; } .homeMe{ float: left; min-width: 325px; max-width: 325px; } fluent-card { padding: 10px; margin: 5px; } fluent-accordion-item div.panel { padding: 10px; background-color:#fff; margin:5px; margin-top:5px; border-radius: 5px; font-weight: 600; } fluent-accordion-item{ margin: 5px; background-color: #f5f5f5; width:100%; font-weight: 500!important; } fluent-accordion { background-color:#fff; border-radius: 5px; padding:3px; margin-top:10px; } */