102 lines
3.1 KiB
CSS
102 lines
3.1 KiB
CSS
:root {
|
|
font-size: 16px;
|
|
|
|
--main-scroll: theme('colors.grayscale.300');
|
|
--panels-scroll: hsl(180, 2%, 17%);
|
|
--toast-background: hsla(240, 12%, 16%, 0.85);
|
|
--toast-secondary: hsla(240, 12%, 16%, 0.15);
|
|
--toast-text: hsla(0, 0%, 100%, 0.85);
|
|
|
|
--primary-color: hsl(210, 100%, 52%); /* will remove variable */
|
|
--primary-text: theme('colors.grayscale.870'); /* will remove variable */
|
|
--secondary-color: hsl(46, 100%, 57%); /* will remove variable */
|
|
}
|
|
|
|
:root[data-theme='light'] {
|
|
--main-background: theme('colors.white');
|
|
--secondary-background: theme('colors.grayscale.930');
|
|
--foreground: theme('colors.grayscale.200');
|
|
--panels-background: hsl(216, 4%, 78%);
|
|
|
|
--table-bg: theme('colors.white');
|
|
--table-zebra: theme('colors.grayscale.900');
|
|
--table-highlight: theme('colors.grayscale.840');
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--main-background: hsl(240, 10%, 8%);
|
|
--secondary-background: hsl(240, 12%, 16%); /* e.g. search bar bg */
|
|
--foreground: theme('colors.grayscale.930'); /* primary text + icons in main + search */
|
|
--panels-background: hsl(240, 15%, 12%); /* panel left + right bg */
|
|
|
|
--table-bg: hsl(240, 10%, 8%); /* e.g. results table bg 1st row */
|
|
--table-zebra: hsl(240, 15%, 11%); /* e.g. results table bg 2nd alternate */
|
|
--table-highlight: hsl(240, 10%, 22%); /* e.g. hover bg color on table selection */
|
|
}
|
|
|
|
:root[data-theme='purple'] {
|
|
--main-background: hsl(261, 74%, 6%);
|
|
--secondary-background: hsl(257, 61%, 10%);
|
|
--foreground: theme('colors.grayscale.930');
|
|
--panels-background: hsl(257, 70%, 9%);
|
|
|
|
--table-bg: hsl(261, 74%, 6%);
|
|
--table-zebra: hsl(257, 61%, 10%);
|
|
--table-highlight: hsl(257, 66%, 27%);
|
|
}
|
|
|
|
@layer base {
|
|
input[type='text'],
|
|
input[type='password'],
|
|
input[type='number'],
|
|
select {
|
|
border-radius: 4px;
|
|
background-color: var(--secondary-background);
|
|
padding: 0 1rem;
|
|
width: 100%;
|
|
min-height: 3rem;
|
|
line-height: 3rem;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='password'],
|
|
input[type='number'] {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
display: inline-block;
|
|
position: relative;
|
|
opacity: 0.5;
|
|
margin: 3px;
|
|
border: 2px solid gray;
|
|
border-radius: 2px;
|
|
background-color: none;
|
|
padding: 7px;
|
|
}
|
|
|
|
input[type='checkbox']:checked {
|
|
opacity: 1;
|
|
border-width: 0;
|
|
background-color: var(--primary-color);
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
|
|
background-position: center center;
|
|
padding: 9px;
|
|
color: var(--primary-text);
|
|
}
|
|
|
|
select {
|
|
background-clip: border-box;
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill:gray;fill-opacity:0.5' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
|
|
background-position: calc(100% - 8px) center;
|
|
background-repeat: no-repeat;
|
|
background-size: 24px;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
a {
|
|
color: dodgerblue;
|
|
}
|
|
}
|