Files
outline/shared/styles/globals.ts
Tom Moor da19054555 Table improvements (#6958)
* Header toggling, resizable columns

* Allow all blocks in table cells, disable column resizing in read-only

* Fixed dynamic scroll shadows

* Refactor, scroll styling

* fix scrolling, tweaks

* fix: Table layout lost on sort

* fix: Caching of grip decorators

* refactor

* stash

* fix first render shadows

* stash

* First add column grip, styles

* Just add column/row click handlers left

* fix: isTableSelected for single cell table

* Refactor mousedown handlers

* fix: 'Add row before' command missing on first row

* fix overflow on rhs

* fix: Error clicking column grip when menu is open

* Hide table controls when printing

* Restore table header background

* fix: Header behavior when adding columns and rows at the edges

* Tweak header styling

* fix: Serialize and parsing of column attributes when copy/pasting
fix: Column width is lost when changing column alignment
2024-05-31 14:52:39 -07:00

119 lines
2.2 KiB
TypeScript

import { createGlobalStyle } from "styled-components";
import styledNormalize from "styled-normalize";
import { breakpoints, depths, s } from ".";
type Props = {
staticHTML?: boolean;
useCursorPointer?: boolean;
};
export default createGlobalStyle<Props>`
${styledNormalize}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
${(props) => (props.staticHTML ? "" : "height: 100%;")}
margin: 0;
padding: 0;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
--pointer: ${(props) => (props.useCursorPointer ? "pointer" : "default")};
overscroll-behavior-x: none;
}
body,
button,
input,
optgroup,
select,
textarea {
font-family: ${s("fontFamily")};
}
body {
font-size: 16px;
line-height: 1.5;
color: ${s("text")};
overscroll-behavior-y: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
@media (min-width: ${breakpoints.tablet}px) {
html,
body {
min-height: ${(props) => (props.staticHTML ? "0" : "100vh")};
}
}
@media (min-width: ${breakpoints.tablet}px) and (display-mode: standalone) {
body:after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 1px;
background: ${(props) => props.theme.titleBarDivider};
z-index: ${depths.titleBarDivider};
}
}
a {
color: ${(props) => props.theme.link};
text-decoration: none;
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
line-height: 1.25;
margin-top: 1em;
margin-bottom: 0.5em;
}
h1 { font-size: 36px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
p,
dl,
ol,
ul,
pre,
blockquote {
margin-top: 1em;
margin-bottom: 1em;
}
hr {
border: 0;
height: 0;
border-top: 1px solid ${s("divider")};
}
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
outline-width: 0;
}
.js-focus-visible .focus-visible {
outline-color: ${s("accent")};
outline-offset: -1px;
outline-width: initial;
}
`;