added popover to lcd artwork, replaced mini with cast button

This commit is contained in:
booploops 2022-05-24 00:47:50 -07:00
parent e65ab71388
commit b5ea40ac71
5 changed files with 138 additions and 121 deletions

View file

@ -7670,160 +7670,132 @@ fieldset:disabled .btn {
.popover {
position: absolute;
top : 0;
left : 0
/* rtl:ignore */
;
z-index : 1070;
display : block;
max-width : 276px;
font-family : var(--bs-font-sans-serif);
font-style : normal;
font-weight : 400;
line-height : 1.5;
text-align : left;
text-align : start;
text-decoration : none;
text-shadow : none;
text-transform : none;
letter-spacing : normal;
word-break : normal;
word-spacing : normal;
white-space : normal;
line-break : auto;
font-size : 0.875rem;
word-wrap : break-word;
background-color: #fff;
background-clip : padding-box;
border : 1px solid rgba(0, 0, 0, 0.2);
border-radius : 0.3rem;
top: 0;
left: 0 /* rtl:ignore */;
z-index: 1070;
display: block;
max-width: 276px;
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: var(--modalBackground);
background-clip: padding-box;
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle);
border-radius: var(--mediaItemRadius);
}
.popover .popover-arrow {
position: absolute;
display : block;
width : 1rem;
height : 0.5rem;
display: block;
width: 1rem;
height: 0.5rem;
}
.popover .popover-arrow::before,
.popover .popover-arrow::after {
position : absolute;
display : block;
content : "";
.popover .popover-arrow::before, .popover .popover-arrow::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-popover-top>.popover-arrow,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow {
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
bottom: calc(-0.5rem - 1px);
}
.bs-popover-top>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before {
bottom : 0;
border-width : 0.5rem 0.5rem 0;
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
bottom: 0;
border-width: 0.5rem 0.5rem 0;
border-top-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-top>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
bottom : 1px;
border-width : 0.5rem 0.5rem 0;
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #fff;
}
.bs-popover-end>.popover-arrow,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow {
left : calc(-0.5rem - 1px);
width : 0.5rem;
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
left: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
}
.bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before {
left : 0;
border-width : 0.5rem 0.5rem 0.5rem 0;
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-end>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after {
left : 1px;
border-width : 0.5rem 0.5rem 0.5rem 0;
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #fff;
}
.bs-popover-bottom>.popover-arrow,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow {
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
top: calc(-0.5rem - 1px);
}
.bs-popover-bottom>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
top : 0;
border-width : 0 0.5rem 0.5rem 0.5rem;
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
top: 0;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-bottom>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
top : 1px;
border-width : 0 0.5rem 0.5rem 0.5rem;
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
position : absolute;
top : 0;
left : 50%;
display : block;
width : 1rem;
margin-left : -0.5rem;
content : "";
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 1rem;
margin-left: -0.5rem;
content: "";
border-bottom: 1px solid #f0f0f0;
}
.bs-popover-start>.popover-arrow,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow {
right : calc(-0.5rem - 1px);
width : 0.5rem;
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
right: calc(-0.5rem - 1px);
width: 0.5rem;
height: 1rem;
}
.bs-popover-start>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before {
right : 0;
border-width : 0.5rem 0 0.5rem 0.5rem;
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: rgba(0, 0, 0, 0.25);
}
.bs-popover-start>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after {
right : 1px;
border-width : 0.5rem 0 0.5rem 0.5rem;
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #fff;
}
.popover-header {
padding : 0.5rem 1rem;
margin-bottom : 0;
font-size : 1rem;
background-color : #f0f0f0;
border-bottom : 1px solid rgba(0, 0, 0, 0.2);
border-top-left-radius : calc(0.3rem - 1px);
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.popover-header:empty {
display: none;
}
.popover-body {
padding: 1rem 1rem;
color : #212529;
color: var(--textColor);
}
// carousel