* 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
119 lines
2.2 KiB
TypeScript
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;
|
|
}
|
|
`;
|