radicle-explorer/public/index.css

@import url(./typography.css);

* {
	outline: none !important;
	box-sizing: border-box;
}

:root {
	--color-primary: #ff55ff;
	--color-primary-1: #382847;
	--color-primary-2: #62326d;
	--color-primary-5: #dd44dd;
	--color-primary-6: #ffd4ff;
	--color-primary-faded: #ff55ff77;
	--color-secondary: #5555ff;
	--color-secondary-background: #5555ff11;
	--color-secondary-faded: #5555ff77;
	--color-secondary-1: #212847;
	--color-secondary-2: #2c326d;
	--color-secondary-6: #e3e3ff;
	--color-tertiary: #55ffff;
	--color-tertiary-background: #55ffff11;
	--color-tertiary-1: #214047;
	--color-tertiary-2: #2c326d;
	--color-tertiary-6: #e3e3ff;
	--color-yellow: #ffff99;
	--color-yellow-background: #ffff9911;
	--color-positive: #53db53;
	--color-positive-1: #21402f;
	--color-positive-2: #2c6837;
	--color-positive-6: #e3ffe3;
	--color-caution: #ffc555;
	--color-caution-1: #2f312d;
	--color-caution-2: #524a34;
	--color-caution-6: #ffefcf;
	--color-negative: #ff5555;
	--color-negative-background: #ff555511;
	--color-negative-1: #38282f;
	--color-negative-2: #623237;
	--color-negative-6: #ffd4d4;
	--color-foreground: #ffffff;
	--color-foreground-faded: #777788;
	--color-foreground-background: #77778811;
	--color-foreground-1: #242e38;
	--color-foreground-2: #29343d;
	--color-foreground-3: #333e47;
	--color-foreground-4: #5e6d7a;
	--color-foreground-5: #8594a1;
	--color-foreground-6: #d3dee8;
	--color-background: #0b131a;
	--color-glow: #5555ff22;
	--color-glow-error: #ff555522;

	--font-family-sans-serif: Inter, sans-serif;
	--font-family-monospace: monospace;
	--border-radius: 50px;
	--box-shadow-color: var(--color-secondary-2);
}


body {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	min-width: 580px;
	color: white;
	text-align: left;
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

html {
	font-family: sans-serif;
	line-height: 1.15;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent;
}

::-moz-selection {
	background: var(--color-primary);
	color: var(--color-background);
}
::selection {
	background: var(--color-primary);
	color: var(--color-background);
}

code {
	font-family: monospace;
	font-size: 0.95rem;
}

main, section {
	display: block;
}

body, input, textarea, button {
	font-family: var(--font-family-sans-serif);
	font-feature-settings: "ss01", "ss02", "cv01", "cv03";
}

button {
	color: var(--color-foreground-6);
	background: transparent;
	font-size: 1rem;
	padding: 1rem 1.5rem;
	border: 1px solid var(--color-foreground-6);
	border-radius: var(--border-radius);
	cursor: pointer;
	min-width: 8rem;
}
button:not([disabled]):hover {
	color: var(--color-background) !important;
	background-color: var(--color-foreground);
}
button.waiting {
	cursor: wait;
}
button.secondary {
	color: var(--color-secondary);
	border-color: var(--color-secondary);
}
button.secondary[disabled] {
	color: var(--color-secondary-faded);
	border-color: var(--color-secondary-faded);
}
button.secondary:not([disabled]):hover {
	background-color: var(--color-secondary);
}
button.primary {
	color: var(--color-primary);
	border-color: var(--color-primary);
}
button.primary:hover, button.primary.active {
	color: var(--color-background);
	background-color: var(--color-primary);
}
button.primary[disabled] {
	color: var(--color-primary-faded) !important;
	border-color: var(--color-primary-faded) !important;
	background-color: transparent;
}
button[disabled] {
	cursor: not-allowed !important;
	color: var(--color-foreground-faded);
	border-color: var(--color-foreground-faded);
}
button[data-waiting] {
	cursor: wait !important;
}

button.text {
	color: var(--color-foreground-6);
	background-color: transparent;
	border: none;
	min-width: 3rem;
}
button.text:hover {
	background-color: var(--color-foreground);
}

button.small {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	min-width: 6rem;
}
button.tiny {
	min-width: 0;
	padding: 0 0.75rem;
	height: 2rem;
}

a {
	color: #d0d0d0;
	text-decoration: none;
	border-bottom: 1px dashed #444;
}
a:hover {
	color: var(--color-foreground);
	border-bottom-color: var(--color-foreground);
}
a.primary {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary-faded);
}
a.primary:hover {
	color: var(--color-primary-faded);
	border-bottom-color: var(--color-primary-faded);
}
a.address {
	border-bottom-color: transparent;
}

input[type="text"], button {
	line-height: 1.5em;
}
input[type="text"] {
	outline: none;
	border: none;
	font-size: 1rem;
	color: var(--color-foreground);
	background: transparent;
	border: 1px solid var(--color-secondary);
	border-radius: var(--border-radius);
	padding: 1rem 1.5rem;
	margin: 1rem;
}
input[type="text"]::placeholder {
	color: var(--color-secondary);
}
input.wide {
	width: 44ch;
}

.modal-actions button {
	margin-right: 1rem;
}
.modal-actions button:last-child {
	margin-right: 0;
}
.modal.error .modal-title {
	color: var(--color-negative);
}
.modal.error .modal-actions button {
	color: var(--color-negative);
	border-color: var(--color-negative);
}
.modal.error .modal-actions button:hover {
	background-color: var(--color-negative);
}

.error {
	color: var(--color-negative) !important;
	border-color: var(--color-negative) !important;
	--box-shadow-color: var(--color-negative-2) !important;
}
.highlight {
	color: var(--color-secondary);
}
.subtle {
	color: var(--color-foreground-faded);
	font-style: italic;
}
.faded {
	color: var(--color-foreground-faded);
}
.label {
	color: var(--color-secondary);
}
.bold {
	font-weight: bold !important;
}
.badge {
	color: var(--color-foreground-faded);
	background: var(--color-foreground-background);
	border-radius: var(--border-radius);
	padding: 0.125rem 0.5rem;
	margin: 0 0.5rem;
	font-size: 0.75rem;
	line-height: 1.5;
}
.badge.tertiary {
	color: var(--color-tertiary);
	background: var(--color-tertiary-background);
}
.badge.safe {
	color: var(--color-yellow);
	background: var(--color-yellow-background);
}

span.small {
	font-size: 0.75rem;
}

button.error:hover {
	background-color: var(--color-negative);
}

table {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2rem 0;
}
td {
	text-align: left;
	text-overflow: ellipsis;
}
td strong {
	font-weight: 600;
}

h1, .title {
	font-size: 1.75rem;
	font-weight: normal;
	color: var(--color-secondary);
	text-align: left;
	text-overflow: ellipsis;
	overflow-x: hidden;
}
h1 {
	margin-bottom: 2rem;
}

h2 {
	margin: 1.5rem 0;
}

h3 {
	margin: 1rem 0;
}

p {
	margin: 1rem 0;
}