Files
5chan/src/components/post-desktop/post-menu-desktop/post-menu-desktop.module.css
T

117 lines
2.4 KiB
CSS

.postMenu {
position: absolute;
background-color: var(--post-menu-desktop-background-color);
border-bottom: var(--post-menu-desktop-border-bottom);
border-right: var(--post-menu-desktop-border-right);
outline: none;
z-index: 2;
}
.postMenuBtnWrapper {
position: relative;
display: inline-block;
padding-left: 15px;
}
.postMenuBtn {
color: var(--post-menu-desktop-button-color);
transition: transform 0.1s;
transform: rotate(90deg);
position: absolute;
bottom: -4px;
}
.postMenuBtn:hover {
cursor: pointer;
color: var(--post-menu-desktop-button-color-hover);
}
.postMenuItem {
cursor: pointer;
padding: 2px 4px;
border: 1px solid var(--post-menu-desktop-item-border-color);
background-color: var(--post-menu-desktop-item-background-color);
border-bottom: none;
}
.postMenuItem:hover {
background-color: var(--post-menu-desktop-item-hover-background-color);
}
.dropdown {
position: relative;
}
.dropdownMenu {
position: absolute;
left: 100%;
top: -1px;
display: none;
border-bottom: var(--post-menu-desktop-border-bottom);
border-right: var(--post-menu-desktop-border-right);
}
.dropdown a {
text-decoration: none;
color: inherit;
}
.dropdown:hover .dropdownMenu {
display: block;
}
.postMenuBtnCatalogWrapper {
left: 5px;
top: 5px;
position: relative;
}
.postMenuBtnCatalog {
position: absolute;
bottom: 5px;
line-height: 1em;
color: var(--catalog-post-menu-desktop-btn-color);
opacity: var(--catalog-post-menu-desktop-btn-opacity);
transition: transform 0.1s;
}
.postMenuBtnCatalog:hover {
cursor: pointer;
color: var(--catalog-post-menu-desktop-btn-hover-color);
opacity: var(--catalog-post-menu-desktop-btn-hover-opacity);
}
.postMenuBtnCatalog {
/* preserve unicode triangle for button, some browsers will use an emoji */
font-variant: normal;
font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum"; /* Chrome, Opera, and Safari */
-moz-font-feature-settings: "tnum"; /* Firefox */
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.postMenuBtn {
width: 1em;
text-align: center;
font-weight: 700;
font-size: 16px;
}
.postMenuBtnWrapper {
position: relative;
padding-right: 12px;
}
}
@media (min-width: 640px) {
.postMenuBtn {
right: -2px;
opacity: var(--post-menu-desktop-btn-opacity);
}
.stickyIconWrapper {
padding-right: 18px;
}
}