forked from david-swift/duckling
9ff2d6c316
It can potentially prevent user from reading text behind it, plus it can affect the performance for little benefit
61 lines
2.1 KiB
SCSS
61 lines
2.1 KiB
SCSS
.container {
|
|
margin: 0 auto;
|
|
width: min(var(--container-width), 90%);
|
|
}
|
|
|
|
.pre-container {
|
|
position: relative;
|
|
|
|
button {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
box-shadow: var(--edge-highlight);
|
|
border: none;
|
|
border-radius: 50%;
|
|
background-color: var(--fg-muted-1);
|
|
padding: 0.5rem;
|
|
line-height: 0;
|
|
|
|
:root[dir*="rtl"] & {
|
|
right: unset;
|
|
left: 0.5rem;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--fg-muted-2);
|
|
|
|
i {
|
|
background-color: var(--fg-muted-5);
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(var(--active));
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--primary-color-alpha);
|
|
|
|
.icon {
|
|
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
|
|
-webkit-mask-image: $icon;
|
|
mask-image: $icon;
|
|
background-color: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
$icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
|
|
-webkit-mask-image: $icon;
|
|
mask-image: $icon;
|
|
transition: var(--transition);
|
|
background-color: var(--fg-muted-4);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
}
|