84 lines
1.4 KiB
CSS
84 lines
1.4 KiB
CSS
@reference "tailwindcss";
|
|
|
|
@layer utilities {
|
|
.tool-button {
|
|
&:not(:disabled):active {
|
|
color: white;
|
|
/* Note: do not apply transform to the button itself, as it would affect its interaction target. */
|
|
&>*:active {
|
|
transform: translateY(1px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.toolbar-control {
|
|
color: #888888;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
line-height: 0;
|
|
|
|
@apply flex-none w-12 h-12 rounded-full;
|
|
|
|
@variant hover {
|
|
&:not(:disabled) {
|
|
@apply text-gray-300;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&>svg {
|
|
fill: currentColor;
|
|
filter: drop-shadow(rgb(0 0 0 / 0.75) 0px 1px);
|
|
@apply w-12 h-12;
|
|
}
|
|
}
|
|
|
|
.toolbar-toggle {
|
|
/* prevent CSS minifier/Tailwind purge from removing this rule */
|
|
--toolbar-toggle-keep: 0;
|
|
}
|
|
|
|
.toolbar-toggle-checked {
|
|
color: white;
|
|
|
|
@variant hover {
|
|
&:not(:disabled) {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tool-button-small {
|
|
color: #757575;
|
|
background-color: #2c2c30;
|
|
/* will-change: transform; */
|
|
|
|
@apply flex-none w-4 h-4 rounded-full;
|
|
|
|
@variant hover {
|
|
&:not(:disabled) {
|
|
color: #b9b9ba;
|
|
background-color: #303034;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&>svg {
|
|
fill: currentColor;
|
|
@apply w-4 h-4;
|
|
}
|
|
}
|
|
}
|