notion-enhancer/api/components/corner-action.css

56 lines
1.4 KiB
CSS

/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
* (https://notion-enhancer.github.io/) under the MIT license
*/
#enhancer--corner-actions {
position: absolute;
bottom: 26px;
right: 26px;
z-index: 101;
cursor: default;
pointer-events: none;
display: flex;
flex-direction: row-reverse;
}
#enhancer--corner-actions > div {
position: static !important;
width: 36px;
height: 36px;
margin-left: 12px;
pointer-events: auto;
border-radius: 100%;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme--icon);
fill: var(--theme--icon);
background: var(--theme--ui_corner_action) !important;
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important;
user-select: none;
cursor: pointer;
}
#enhancer--corner-actions > div:hover {
background: var(--theme--ui_corner_action-hover) !important;
}
#enhancer--corner-actions > div:active {
background: var(--theme--ui_corner_action-active) !important;
}
#enhancer--corner-actions > div.hidden {
display: none;
}
#enhancer--corner-actions > div > svg {
width: 22px;
height: 22px;
color: var(--theme--icon);
fill: var(--theme--icon);
}