visbug-lib
Version:
<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href
168 lines (142 loc) • 3.07 kB
CSS
@import "../_variables.css";
:host {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: var(--layer-top);
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background: var(--theme-bd-2);
backdrop-filter: blur(5px);
font-size: 16px;
font-family: system-ui;
cursor: initial;
--light-grey: hsl(0 0% 90%);
--grey: hsl(0 0% 60%);
--dark-grey: hsl(0 0% 40%);
@media (prefers-color-scheme: dark) {
--light-grey: hsl(0 0% 20%);
--grey: hsl(0 0% 60%);
--dark-grey: hsl(0 0% 80%);
}
}
:host [command] {
padding: 1em;
text-align: center;
font-size: 3vw;
font-weight: lighter;
letter-spacing: 0.1em;
color: var(--dark-grey);
& > [light] {
color: var(--grey);
}
& > [tool] {
text-decoration: underline;
text-decoration-color: var(--theme-color);
}
& > :matches([negative],[side],[amount]) {
font-weight: normal;
}
}
:host [card] {
padding: 1em;
background: var(--theme-bg);
border-radius: 0.5em;
color: var(--dark-grey);
display: flex;
justify-content: space-evenly;
& > div:not([keyboard]) {
display: flex;
align-items: flex-end;
margin-left: 1em;
}
}
:host [tool-icon] {
position: absolute;
top: 1em;
left: 0;
width: 100%;
padding: 0 1rem;
display: flex;
justify-content: center;
& > span {
color: var(--dark-grey);
display: grid;
grid-template-columns: 5vmax auto;
grid-gap: 0.5em;
align-items: center;
text-transform: capitalize;
font-size: 4vmax;
font-weight: lighter;
}
& svg {
width: 100%;
fill: var(--theme-color);
}
}
:host section {
display: flex;
justify-content: center;
}
:host section > span,
:host [arrows] > span {
border: 1px solid transparent;
border-radius: 0.5em;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 2px;
padding: 1.5vw;
font-size: 0.75em;
white-space: nowrap;
}
:host section > span:not([pressed="true"]),
:host [arrows] > span:not([pressed="true"]) {
border: 1px solid var(--light-grey);
&:hover {
border-color: var(--grey);
}
}
:host span[pressed="true"] {
background: var(--theme-color);
color: var(--theme-bg);
}
:host span:not([pressed="true"]):matches([used]) {
background: var(--light-grey);
cursor: pointer;
}
:host span[hotkey] {
color: var(--theme-color);
font-weight: bold;
cursor: pointer;
}
:host section > span[hotkey]:not([pressed="true"]) {
border-color: var(--theme-color);
}
:host [arrows] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
& > span:nth-child(1) {
grid-row: 1;
grid-column: 2;
}
& > span:nth-child(2) {
grid-row: 2;
grid-column: 2;
}
& > span:nth-child(3) {
grid-row: 2;
grid-column: 1;
}
& > span:nth-child(4) {
grid-row: 2;
grid-column: 3;
}
}
:host [caps] > span:nth-child(1),
:host [shift] > span:nth-child(1) { justify-content: flex-start; }
:host [shift] > span:nth-child(12) { justify-content: flex-end; }