Files
radicle-explorer/public/index.css
T
Rūdolfs Ošiņš dce64f19b0 Disable rubber-banding effect on scroll
The app doesn't implement any loading/refresh functionality on
over-scroll, so the effect doesn't make sense.
2024-09-23 11:39:27 +02:00

153 lines
2.9 KiB
CSS

* {
outline: none !important;
box-sizing: border-box;
}
:root {
--border-radius-tiny: 2px;
--border-radius-small: 4px;
--border-radius-regular: 8px;
--border-radius-round: 10rem;
--scrollbar-width: 0.5rem;
--button-regular-height: 2.5rem;
--button-small-height: 2rem;
--button-tiny-height: 1.5rem;
}
html {
height: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
height: 100%;
margin: 0;
padding: 0;
color: var(--color-foreground-contrast);
text-align: left;
background-color: var(--color-background-default);
scrollbar-width: thin;
scrollbar-height: thin;
scrollbar-color: var(--color-fill-separator) transparent;
overscroll-behavior: none;
}
::selection {
background: var(--color-fill-yellow-iconic);
color: var(--color-foreground-black);
}
/* Chrome/Edge/Safari scrollbar */
*::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: transparent;
border-radius: var(--border-radius-regular);
}
*::-webkit-scrollbar-corner {
background: transparent;
}
*:hover::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background-color: var(--color-fill-separator);
}
a {
color: inherit;
text-decoration: none;
}
pre {
margin: 0;
}
.global-oid {
color: var(--color-foreground-emphasized);
font-size: var(--font-size-small);
font-family: var(--font-family-monospace);
font-weight: var(--font-weight-regular);
}
.global-commit {
color: var(--color-foreground-dim);
font-size: var(--font-size-small);
font-family: var(--font-family-monospace);
font-weight: var(--font-weight-semibold);
}
.global-counter {
border-radius: var(--border-radius-tiny);
background-color: var(--color-fill-ghost);
color: var(--color-foreground-dim);
padding: 0 0.25rem;
display: block;
min-width: 1.25rem;
text-align: center;
}
.global-spacer {
width: 1px;
height: 100%;
background-color: var(--color-fill-ghost);
}
.global-flex-item {
display: flex;
gap: 0.5rem;
align-items: center;
}
/*
Breakpoints
===========
mobile 0px - 719.98px
small desktop 720px - 1010.98px
medium desktop 1011px - 1349.98px
desktop 1350px - ∞ px
*/
@media (max-width: 719.98px) {
body {
min-width: 0;
}
.global-hide-on-mobile-down {
display: none !important;
}
}
@media (max-width: 1010.98px) {
.global-hide-on-small-desktop-down {
display: none !important;
}
}
@media (max-width: 1349.98px) {
.global-hide-on-medium-desktop-down {
display: none !important;
}
}
@media (min-width: 720px) {
.global-hide-on-small-desktop-up {
display: none !important;
}
}
@media (min-width: 1011px) {
.global-hide-on-medium-desktop-up {
display: none !important;
}
}
@media (min-width: 1350px) {
.global-hide-on-desktop-up {
display: none !important;
}
}