caae8e7385
Some mobile browsers (e.g. chrome) uses collapsing url bars (the
bar collapses when you scroll). In such cases, `100vh` typically
refers to the full height of the viewport when the url bar is
collapsed (see also `svh`, `lvh` and `dvh`, e.g. at
<https://ishadeed.com/article/new-viewport-units/#the-small-large-and-dynamic-viewport-units>
). This meant that on my tablet, the editor would extend below the
visible page until I scrolled it into view.
This commit re-uses a fix from some of my other projects
(specifically
<5c7e788d40/src/styles/globals.css (L14-L28)>
) where the root element is set to fill 100% height. This avoids
dealing with viewport units altogether. On my tablet, this means
that the url bar is visible and that the editor does not extend
below the visible page.
128 lines
2.3 KiB
CSS
128 lines
2.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/*
|
|
* Workaround to allow proper bottom positioning for fixed
|
|
* elements in mobile browsers with collapsing url bars:
|
|
* https://stackoverflow.com/a/17555766/1137077
|
|
*/
|
|
:root,
|
|
html,
|
|
body {
|
|
@apply h-full min-h-full;
|
|
}
|
|
#root {
|
|
@apply h-full min-h-full;
|
|
}
|
|
}
|
|
|
|
.semi-form-vertical .semi-form-field {
|
|
margin: 0;
|
|
padding-top: 8px !important;
|
|
padding-bottom: 8px !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.semi-card .semi-collapse-item {
|
|
border: none !important;
|
|
}
|
|
|
|
.semi-button.semi-button-light {
|
|
background-color: rgba(var(--semi-grey-1), 1);
|
|
}
|
|
|
|
.semi-button.semi-button-light:hover {
|
|
background-color: rgba(var(--semi-grey-2), 1);
|
|
}
|
|
|
|
.semi-button.semi-button-primary:not(.semi-button-light):not(
|
|
.semi-button-borderless
|
|
) {
|
|
background-color: rgba(var(--semi-blue-5), 1);
|
|
}
|
|
|
|
.semi-button.semi-button-primary:not(.semi-button-light):not(
|
|
.semi-button-borderless
|
|
):hover {
|
|
background-color: rgba(var(--semi-blue-6), 1);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
opacity: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
opacity: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(var(--semi-grey-2), 1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(var(--semi-grey-3), 1);
|
|
}
|
|
|
|
.theme {
|
|
color: var(--semi-color-text-1);
|
|
background-color: var(--semi-color-bg-0);
|
|
}
|
|
|
|
.sidesheet-theme {
|
|
color: var(--semi-color-text-1);
|
|
background-color: var(--semi-color-bg-2);
|
|
}
|
|
|
|
.popover-theme {
|
|
color: var(--semi-color-text-1);
|
|
background-color: var(--semi-color-bg-3);
|
|
}
|
|
|
|
.card-theme {
|
|
color: var(--semi-color-text-1);
|
|
background-color: rgba(var(--semi-grey-0), 1);
|
|
}
|
|
|
|
.toolbar-theme {
|
|
background-color: rgba(var(--semi-grey-1), 1);
|
|
}
|
|
|
|
.hover-1:hover {
|
|
background-color: rgba(var(--semi-grey-1), 1);
|
|
}
|
|
|
|
.bg-semi-grey-2 {
|
|
background-color: rgba(var(--semi-grey-2), 1);
|
|
}
|
|
|
|
.hover-2:hover {
|
|
background-color: rgba(var(--semi-grey-2), 1);
|
|
}
|
|
|
|
.text-color {
|
|
color: var(--semi-color-text-1);
|
|
}
|
|
|
|
.border-color {
|
|
border-color: rgba(var(--semi-grey-9), 0.08);
|
|
}
|
|
|
|
.table-border {
|
|
border-color: rgba(var(--semi-grey-2), 1);
|
|
}
|
|
|
|
.bg-dots {
|
|
background-color: white;
|
|
opacity: 0.8;
|
|
background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
|
|
background-size: 20px 20px;
|
|
}
|