global.css•2.68 kB
@import 'highlight.js/styles/atom-one-dark.css';
@tailwind utilities;
@import './reset.css';
@import './vars.css';
@import './tippy.css';
/* General */
body {
color: var(--text-color);
font-family: var(--sans-serif);
}
svg.vertical-align {
vertical-align: calc(-1 * var(--icon-adjust));
}
svg.keepcolor {
fill: currentColor;
}
svg.icon {
vertical-align: calc(-1 * var(--icon-adjust));
flex: 0 0 auto;
height: 1em;
width: 1em;
fill: currentColor;
}
input:not([type]),
input[type='text'],
input[type='number'],
input[type='datetime-local'] {
border: 1px solid var(--gray-3);
padding: var(--size-2) var(--size-3);
border-radius: 6px;
}
/* Hide up and down arrows in numeric input fields */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Components */
.controls-section {
display: flex;
flex-direction: column;
& + & {
margin-top: var(--size-4);
padding-top: var(--size-4);
border-top: 1px solid var(--gray-3);
}
> * + * {
margin-top: var(--size-3);
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: lowercase;
font-variant: small-caps;
font-size: var(--text-small);
color: var(--gray-4);
font-weight: 600;
}
}
.subcontrol::before {
content: '└';
color: var(--gray-3);
}
.checkbox-group {
display: flex;
flex-direction: column;
& > * {
display: flex;
align-items: center;
padding: var(--size-2);
}
input {
margin-right: var(--size-2);
}
.tooltip {
margin-left: auto;
}
.checked {
background-color: var(--blue-1);
}
}
.labeled-input {
display: flex;
flex-direction: column;
& > span {
font-size: var(--text-small);
}
& > input {
margin-top: var(--size-1);
width: 100%;
}
}
.tooltip-container,
.checkbox-group > *,
.labeled-input {
--tooltip-opacity: 0.15;
&:hover {
--tooltip-opacity: 0.5;
}
}
input.input-inline {
padding: 0.25em;
height: 1.5em;
width: 2em;
max-width: 100%;
text-align: center;
}
.has-error {
box-shadow: 0 0 var(--size-1) var(--red-2);
}
.import-link {
color: inherit;
}
.comment-link {
color: #7d828d;
}
.glimmery {
background: conic-gradient(rgb(196, 181, 253), rgb(110, 231, 183), rgb(249, 168, 212));
}
.hljs.-solidity {
background: linear-gradient(30deg, #151a24, #2b323e);
}
.hljs.-cairo {
background: linear-gradient(30deg, #191717, #2a0f0f);
}
.hljs.-stylus {
background: linear-gradient(30deg, #181215, #360c1f);
}
.light-link {
color: white;
}