Files
radicle-explorer/public/index.css
T
2022-09-21 11:19:30 +02:00

178 lines
3.3 KiB
CSS

* {
outline: none !important;
box-sizing: border-box;
}
:root {
--border-radius: 0.75rem;
--border-radius-small: 0.5rem;
--border-radius-round: 10rem;
--content-max-width: 1920px;
--content-min-width: 480px;
--scrollbar-width: 0.5rem;
--button-regular-height: 2.5rem;
--button-small-height: 2rem;
--button-tiny-height: 1.5rem;
--glow: var(--color-secondary-3);
--glow-error: var(--color-negative-3);
--header-gradient: linear-gradient(
180deg,
var(--color-secondary-3) 0%,
transparent 100%
);
}
[data-theme="light"] {
--header-gradient: linear-gradient(
180deg,
var(--color-secondary-2) 0%,
transparent 100%
);
}
html {
height: 100%;
overflow-y: scroll;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
min-width: var(--content-min-width);
height: 100%;
margin: 0;
padding: 0;
color: var(--color-foreground);
text-align: left;
background-color: var(--color-background);
scrollbar-width: thin;
scrollbar-height: thin;
scrollbar-color: var(--color-foreground-4) transparent;
}
@media (max-width: 720px) {
body {
min-width: 0;
}
}
::-moz-selection {
background: var(--color-primary);
color: var(--color-background);
}
::selection {
background: var(--color-primary);
color: var(--color-background);
}
/* 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);
}
*::-webkit-scrollbar-corner {
background: transparent;
}
*:hover::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background-color: var(--color-foreground-4);
}
.error::selection,
.error ::selection {
background: var(--color-negative);
}
main {
display: block;
}
a {
color: inherit;
text-decoration: none;
}
a.link {
color: var(--color-foreground-6);
text-decoration: none;
border-bottom: 1px dashed var(--color-foreground-5);
}
a.link:hover {
color: var(--color-foreground);
border-bottom-color: var(--color-foreground);
}
a.link.primary {
color: var(--color-primary);
border-bottom-color: var(--color-primary-5);
}
a.link.primary:hover {
color: var(--color-primary-5);
border-bottom-color: var(--color-primary-5);
}
a.address {
border-bottom-color: transparent;
}
.error {
color: var(--color-negative) !important;
border-color: var(--color-negative) !important;
}
.error-message {
background-color: var(--color-negative-2);
word-wrap: break-word;
text-overflow: ellipsis;
overflow-x: hidden;
padding: 1rem;
}
.highlight,
.secondary,
.label {
color: var(--color-secondary);
}
.faded {
color: var(--color-foreground-5);
}
.off-centered {
height: 100%;
padding-top: 5rem;
padding-bottom: 24vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mobile,
.mobile-inline {
display: none !important;
}
.desktop {
display: block !important;
}
.desktop-inline {
display: inline !important;
}
@media (max-width: 720px) {
.mobile {
display: block !important;
}
.mobile-inline {
display: inline !important;
}
.desktop,
.desktop-inline {
display: none !important;
}
}