Files
hotpocket/services/extension/src/content/templates/popup.html
Tomek Wójcik 55126f4af6 BTHLABS-66: Prepping for public release: Take five
AKA "Using Apple reviewers as QA for your project". Thanks, y'all! :)
2025-11-27 17:51:19 +01:00

130 lines
8.2 KiB
HTML

<style type="text/css">
:host {
all: initial;
font-family: sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
position: fixed;
top: 20px;
right: 20px;
z-index: 999999;
}
.hotpocket-extension-popup {
background: #212529;
border: 1px solid #2b3035;
border-radius: 0.5rem;
color: white;
width: 300px;
}
.hotpocket-extension-popup strong {
font-weight: bold;
}
.hotpocket-extension-popup .hotpocket-extension-popup-close {
opacity: 0.75;
}
.hotpocket-extension-popup .hotpocket-extension-popup-close:hover {
opacity: 1;
}
.hotpocket-extension-popup .hotpocket-extension-popup-header {
align-items: center;
display: flex;
height: 1.5rem;
overflow: hidden;
padding: 0.5rem 0.5rem;
position: relative;
vertical-align: middle;
}
.hotpocket-extension-popup .hotpocket-extension-popup-header img {
border-radius: 20%;
height: 1.5rem;
}
.hotpocket-extension-popup .hotpocket-extension-popup-header strong {
flex: 1;
margin-left: 0.5rem;
margin-right: 1rem;
}
.hotpocket-extension-popup .hotpocket-extension-popup-header .hotpocket-extension-popup-close {
cursor: pointer;
font-size: 1.25rem;
height: 1.5rem;
line-height: 1;
padding: 0px 0.375rem;
text-align: center;
}
.hotpocket-extension-popup .hotpocket-extension-popup-body {
padding: 0.5rem 0.75rem;
padding-top: 0px;
}
.hotpocket-extension-popup .hotpocket-extension-popup-body > * {
margin: 0px;
}
.hotpocket-extension-popup .hotpocket-extension-popup-body > .hotpocket-extension-popup-loader {
margin: 0px auto;
}
.hotpocket-extension-popup .hotpocket-extension-popup-body strong {
font-weight: 600;
}
.hotpocket-extension-popup .hotpocket-extension-popup-message-success {
color: #0EA767;
}
.hotpocket-extension-popup .hotpocket-extension-popup-message-error {
color: #EE6476;
}
.hotpocket-extension-popup-loader {
animation: hotpocket-extension-popup-loader-animation 1s infinite steps(12);
aspect-ratio: 1;
background:
linear-gradient(0deg ,rgb(240 240 240/50%) 30%,#0000 0 70%,rgb(240 240 240/100%) 0) 50%/8% 100%,
linear-gradient(90deg,rgb(240 240 240/25%) 30%,#0000 0 70%,rgb(240 240 240/75% ) 0) 50%/100% 8%;
background-repeat: no-repeat;
border-radius: 50%;
display: grid;
width: 32px;
}
.hotpocket-extension-popup-loader::before,
.hotpocket-extension-popup-loader::after {
background: inherit;
border-radius: 50%;
content: "";
grid-area: 1/1;
opacity: 0.915;
transform: rotate(30deg);
}
.hotpocket-extension-popup-loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
.hotpocket-extension-popup-view {
background-color: #1CBAED;
border: 1px solid #1CBAED;
border-radius: 0.25rem;
color: white;
display: inline-block;
font-size: 0.875rem;
line-height: 1.25;
margin-top: 0.25rem !important;
padding: 0.25rem 0.5rem;
text-decoration: none;
}
.hotpocket-extension-popup-view:hover {
background-color: #189ec9;
border-color: #1695be;
}
.hotpocket-extension-popup-view:active {
background-color: #1695be;
border-color: #158cb2;
}
@keyframes hotpocket-extension-popup-loader-animation {
100% {transform: rotate(1turn)}
}
</style>
<div class="hotpocket-extension-popup">
<div class="hotpocket-extension-popup-header">
<img alt="" src="data:image/png;base64,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" title="" />
<strong>HotPocket by BTHLabs</strong>
<a class="hotpocket-extension-popup-close">&times;</a>
</div>
<div class="hotpocket-extension-popup-body hotpocket-extension-popup-message-success">
</div>
</div>