russell@unturf.com
f780f0dab6
Ring header restructured from flat 1fr/auto grid into two semantic rows: - Info row: title + badges left, progress counter right - Controls row: Reverse and Autoplay toggles right-aligned Now-playing row shows full title (no line-clamp truncation) and product thumbnail. JS reads og:image meta tag for current thumbnail during SPA navigation. SPA updates for edit button, download button, file info, comments, and canonical link. Footer and docs updates.
3156 lines
64 KiB
CSS
3156 lines
64 KiB
CSS
/* * * * * *
|
|
*
|
|
* Make Post Sell (mps) is a mobile first web application. We make the pages
|
|
* look great on mobile & only use media queries as needed for bigger displays.
|
|
*
|
|
* We use CSS Grid. It's awesome.
|
|
*
|
|
* * * * * */
|
|
|
|
/* Preload hover background images to prevent flash */
|
|
body::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
background-image:
|
|
url("/static/img/trans-blue.png"),
|
|
url("/static/img/trans-green.png"),
|
|
url("/static/img/trans-red.png"),
|
|
url("/static/img/trans-blue2.png"),
|
|
url("/static/img/trans-green2.png"),
|
|
url("/static/img/trans-red2.png");
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
font-family: helvetica;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.25em;
|
|
margin-top: 0;
|
|
margin-bottom: .4em;
|
|
}
|
|
|
|
/* Remove top margin from all heading tags */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Products editor: Status column hidden by default (desktop/landscape) */
|
|
.col-status { display: none; }
|
|
|
|
/* Mobile PORTRAIT only adjustments for products table */
|
|
@media (max-width: 640px) and (orientation: portrait) {
|
|
/* Let columns size naturally and tighten spacing */
|
|
.table-fixed-layout { table-layout: auto; }
|
|
.table-fixed-layout th, .table-fixed-layout td { padding: 6px; font-size: 14px; }
|
|
|
|
/* Hide low-priority columns: Visibility(3), Bundle(4), Physical(5), Ready(6) */
|
|
.table-fixed-layout th:nth-child(3), .table-fixed-layout td:nth-child(3),
|
|
.table-fixed-layout th:nth-child(4), .table-fixed-layout td:nth-child(4),
|
|
.table-fixed-layout th:nth-child(5), .table-fixed-layout td:nth-child(5),
|
|
.table-fixed-layout th:nth-child(6), .table-fixed-layout td:nth-child(6) {
|
|
display: none;
|
|
}
|
|
|
|
/* Show compact Status column (now header index 8, cell .col-status) */
|
|
.table-fixed-layout th.col-status, .table-fixed-layout td.col-status { display: table-cell; }
|
|
|
|
/* Allow Title (7) to wrap to multiple lines and keep bold */
|
|
.table-fixed-layout th:nth-child(7), .table-fixed-layout td:nth-child(7) {
|
|
white-space: normal;
|
|
width: 88px;
|
|
min-width: 88px;
|
|
max-width: 88px;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.table-fixed-layout td:nth-child(7) b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Make Sellable (1) and Price (2) sit closer together and more compact */
|
|
.table-fixed-layout th:nth-child(1), .table-fixed-layout td:nth-child(1) {
|
|
width: auto;
|
|
max-width: 66px;
|
|
min-width: 36px;
|
|
padding-right: 6px;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.table-fixed-layout th:nth-child(2), .table-fixed-layout td:nth-child(2) {
|
|
width: auto;
|
|
max-width: 65px;
|
|
min-width: 32px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Constrain Size column (9) to give Title more space */
|
|
.table-fixed-layout th:nth-child(9), .table-fixed-layout td:nth-child(9) {
|
|
max-width: 66px;
|
|
min-width: 32px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Ensure check/cross glyphs render consistently and add visual polish */
|
|
.table-fixed-layout td.col-status {
|
|
font-family: system-ui, "Segoe UI Symbol", "Noto Sans Symbols", "Apple Color Emoji",
|
|
"Noto Color Emoji", "Helvetica", "Arial", sans-serif;
|
|
padding: 8px 6px;
|
|
}
|
|
|
|
/* Align status lines with fixed-width labels for easier eye tracking */
|
|
.status-line {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-bottom: 4px;
|
|
align-items: baseline;
|
|
white-space: nowrap;
|
|
}
|
|
.status-line:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.status-label {
|
|
display: inline-block;
|
|
min-width: 44px;
|
|
max-width: 44px;
|
|
text-align: left;
|
|
flex-shrink: 0;
|
|
margin-right: 3px;
|
|
}
|
|
.status-dot {
|
|
margin: 0 4px 0 2px;
|
|
}
|
|
.status-value {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.decimal-dot {
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
/* Allow Status column to wrap rows but keep each line intact */
|
|
.table-fixed-layout th.col-status, .table-fixed-layout td.col-status {
|
|
white-space: normal;
|
|
width: 84px;
|
|
min-width: 84px;
|
|
max-width: 84px;
|
|
}
|
|
|
|
/* Ensure table doesn't overflow on very small screens */
|
|
@media (max-width: 400px) {
|
|
.table-fixed-layout th:nth-child(1), .table-fixed-layout td:nth-child(1) { width: 52px; font-size: 13px; }
|
|
.table-fixed-layout th:nth-child(2), .table-fixed-layout td:nth-child(2) { width: 80px; font-size: 13px; }
|
|
.table-fixed-layout td:nth-child(9) { width: 50px; font-size: 13px; }
|
|
.table-fixed-layout th:nth-child(9) { width: 50px; }
|
|
.status-label { min-width: 56px; max-width: 56px; font-size: 13px; }
|
|
}
|
|
}
|
|
|
|
table tr:nth-child(even) {
|
|
/* Light gray background for even rows */
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
table tr:nth-child(odd) {
|
|
/* White background for odd rows (optional, for contrast) */
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
tr, th, td {
|
|
padding: 8px;
|
|
border: 0px;
|
|
text-align: left;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.asterisk {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #5f6368
|
|
}
|
|
|
|
input {
|
|
/* keep the input inside the parents box! */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="date"] {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #CCCCCC;
|
|
}
|
|
|
|
textarea {
|
|
/* keep the input inside the parents box! */
|
|
box-sizing: border-box;
|
|
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #CCCCCC;
|
|
}
|
|
|
|
section.shop-name-and-description {
|
|
display: grid;
|
|
}
|
|
|
|
input.mps-quantity {
|
|
max-width: 60px;
|
|
}
|
|
|
|
input.mps-submit {
|
|
float: right;
|
|
}
|
|
|
|
textarea.mps-billing-address,
|
|
textarea.mps-shop-description,
|
|
textarea.mps-bundle-data,
|
|
textarea.mps-shop-ribbon-text
|
|
{
|
|
max-width: 600px;
|
|
width: 100%;
|
|
height: 120px;
|
|
padding: 10px;
|
|
}
|
|
|
|
textarea.mps-shop-ribbon-text {
|
|
height: 60px;
|
|
}
|
|
|
|
input.mps-shop-name,
|
|
input.mps-phone-number,
|
|
input.mps-google-analytics-id,
|
|
input.mps-stripe-public-api-key,
|
|
input.mps-stripe-secret-api-key,
|
|
input.mps-shop-ribbon-text-color,
|
|
input.mps-shop-ribbon-color
|
|
{
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
section.product-title-and-description,
|
|
section.content-title-and-description {
|
|
display: grid;
|
|
}
|
|
|
|
section.product-left,
|
|
section.content-left {
|
|
justify-self: right;
|
|
text-align: left;
|
|
/*max-width: 480px;*/
|
|
}
|
|
|
|
section.product-right,
|
|
section.content-right {
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
section.log-in-form {
|
|
justify-self: right;
|
|
text-align: center;
|
|
}
|
|
|
|
section.join-form {
|
|
justify-self: left;
|
|
text-align: center;
|
|
}
|
|
|
|
input.mps-product-title,
|
|
input.mps-product-price,
|
|
input.mps-content-title {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
textarea.mps-product-description,
|
|
textarea.mps-content-description {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
height: 120px;
|
|
padding: 10px;
|
|
}
|
|
|
|
input.file-input {
|
|
width: 100%;
|
|
}
|
|
|
|
div.message-ribbon {
|
|
height: 42px;
|
|
display: grid;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
section.main {
|
|
/*padding: 14px;*/
|
|
}
|
|
|
|
/*
|
|
section.grid-nav {
|
|
grid-column: 1/-1;
|
|
}
|
|
*/
|
|
|
|
/* mobile first */
|
|
/* the navbar is stacked by default. */
|
|
section.nav {
|
|
background-color: var(--bg-secondary);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: dense;
|
|
grid-gap: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
div.message-ribbon {
|
|
display: none;
|
|
}
|
|
|
|
section.log-in {
|
|
text-align: center;
|
|
align-self: center;
|
|
font-size: .75em;
|
|
}
|
|
|
|
section.search {
|
|
align-self: center;
|
|
}
|
|
|
|
form.search {
|
|
width: 100%;
|
|
}
|
|
|
|
input.mps-keywords {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
section.content {
|
|
background-color: #ffffff;
|
|
margin: 4px;
|
|
margin-bottom: 42px;
|
|
}
|
|
|
|
section.logo{
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
img.logo {
|
|
width: initial;
|
|
max-height: 100px;
|
|
max-width: 94%;
|
|
padding: 10px;
|
|
}
|
|
|
|
img.product-cart-thumbnail {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
max-width:44px;
|
|
max-height:44px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
img.product-thumbnail {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
max-width:58px;
|
|
max-height:58px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.product-main {
|
|
max-height: 42vh;
|
|
}
|
|
|
|
.product-images {
|
|
text-align: left;
|
|
}
|
|
|
|
.product-images img.product-main,
|
|
div.product-images img.product-main {
|
|
max-width: 100%;
|
|
max-height: 42vh;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
/* Video play button overlay for hero thumbnails */
|
|
.video-thumbnail-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.video-thumbnail-container img.product-main {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 42vh;
|
|
height: auto;
|
|
}
|
|
|
|
.video-play-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: rgba(255, 0, 0, 0.4); /* red at 66/255 ~= 0.26, try 0.4 for 66% visibility */
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.video-play-overlay::after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 15px 0 15px 25px;
|
|
border-color: transparent transparent transparent #ffffff;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.video-click-to-play {
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
color: inherit;
|
|
}
|
|
|
|
.video-thumbnail-container:hover .video-play-overlay {
|
|
background-color: rgba(255, 0, 0, 0.6);
|
|
}
|
|
|
|
/* Prevent content sections from overflowing */
|
|
.product-description {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
box-sizing: border-box;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Use overflow-x: clip on .content so it clips without creating a scroll
|
|
container — overflow-x: auto breaks position: sticky for descendants */
|
|
.content,
|
|
section.content {
|
|
max-width: 100%;
|
|
overflow-x: clip;
|
|
box-sizing: border-box;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Make pre and code tags horizontally scrollable for long content */
|
|
pre, code {
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
.mps-button {
|
|
border: 2px solid transparent;
|
|
border-radius: 4px;
|
|
color: white;
|
|
background-color: #D4D0C8;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
min-width: 100%;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-theme="dark"] .mps-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
color: var(--blue-color);
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
[data-theme="dark"] .mps-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
a.mps-button-blue,
|
|
button.mps-button-blue {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button-blue,
|
|
[data-theme="dark"] button.mps-button-blue,
|
|
[data-theme="dark"] input.mps-button-blue {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
color: var(--blue-color);
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button-blue:hover,
|
|
[data-theme="dark"] button.mps-button-blue:hover,
|
|
[data-theme="dark"] input.mps-button-blue:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
a.mps-button-green,
|
|
button.mps-button-green {
|
|
background-color: #a3c765;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button-green,
|
|
[data-theme="dark"] button.mps-button-green,
|
|
[data-theme="dark"] input.mps-button-green {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
color: var(--green-color);
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button-green:hover,
|
|
[data-theme="dark"] button.mps-button-green:hover,
|
|
[data-theme="dark"] input.mps-button-green:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
a.mps-button-red,
|
|
button.mps-button-red,
|
|
input.mps-button-red {
|
|
background-color: #bc2131;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button-red,
|
|
[data-theme="dark"] button.mps-button-red,
|
|
[data-theme="dark"] input.mps-button-red {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red.png");
|
|
color: var(--red-color);
|
|
border: 2px solid var(--red-color);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button-red:hover,
|
|
[data-theme="dark"] button.mps-button-red:hover,
|
|
[data-theme="dark"] input.mps-button-red:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--red-color);
|
|
}
|
|
|
|
.mps-cancel-button,
|
|
.mps-comment-form-button {
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #f9f9f9;
|
|
color: #333;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Red cancel button */
|
|
.mps-cancel-button-red {
|
|
background: var(--red-color);
|
|
color: white;
|
|
border-color: var(--red-color);
|
|
}
|
|
|
|
[data-theme="dark"] .mps-cancel-button-red {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red.png");
|
|
border: 2px solid var(--red-color);
|
|
color: var(--red-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .mps-cancel-button-red:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--red-color);
|
|
}
|
|
|
|
.comment-actions {
|
|
margin-bottom: 42px;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-columns: repeat(auto-fit, max-content);
|
|
justify-content: start;
|
|
gap: 5px;
|
|
}
|
|
|
|
.reply-link,
|
|
.edit-link,
|
|
.delete-link,
|
|
.moderate-link {
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #f9f9f9;
|
|
color: #333;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Light mode color styling */
|
|
.reply-link {
|
|
background: var(--green-color);
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.delete-link {
|
|
background: var(--red-color);
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mps-comment-form-button {
|
|
background: var(--green-color);
|
|
color: white;
|
|
border: 2px solid transparent;
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .reply-link,
|
|
[data-theme="dark"] .edit-link,
|
|
[data-theme="dark"] .moderate-link {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
border: 2px solid var(--blue-color);
|
|
color: var(--blue-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .reply-link:hover,
|
|
[data-theme="dark"] .edit-link:hover,
|
|
[data-theme="dark"] .moderate-link:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
/* Reply button - green */
|
|
[data-theme="dark"] .reply-link {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
border: 2px solid var(--green-color);
|
|
color: var(--green-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .reply-link:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
/* Delete button - red */
|
|
[data-theme="dark"] .delete-link {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red.png");
|
|
border: 2px solid var(--red-color);
|
|
color: var(--red-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .delete-link:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--red-color);
|
|
}
|
|
|
|
/* Post comment button - green */
|
|
[data-theme="dark"] .mps-comment-form-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
border: 2px solid var(--green-color);
|
|
color: var(--green-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .mps-comment-form-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
.payment-toggle-button {
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #f9f9f9;
|
|
color: #333;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.payment-toggle-button.enable {
|
|
background: #4a4;
|
|
color: white;
|
|
border-color: #4a4;
|
|
}
|
|
|
|
.payment-toggle-button.disable {
|
|
background: #d44;
|
|
color: white;
|
|
border-color: #d44;
|
|
}
|
|
|
|
a.product-edit-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button.product-edit-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
color: #7ab9ff;
|
|
border: 2px solid #7ab9ff;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button.product-edit-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
color: #ffffff;
|
|
border: 2px solid #7ab9ff;
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button.shop-new-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
color: var(--green-color);
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.mps-button.shop-new-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
/* Product download and preview buttons - make them green in dark mode */
|
|
[data-theme="dark"] a.product-download-button,
|
|
[data-theme="dark"] button.product-download-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
color: var(--green-color);
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.product-download-button:hover,
|
|
[data-theme="dark"] button.product-download-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.product-preview-button,
|
|
[data-theme="dark"] button.product-preview-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
color: var(--green-color);
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.product-preview-button:hover,
|
|
[data-theme="dark"] button.product-preview-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
a.product-preview-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
a.product-download-button {
|
|
background-color: #a3c765;
|
|
}
|
|
|
|
a.product-new-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
a.shop-new-button {
|
|
background-color: #a3c765;
|
|
}
|
|
|
|
a.done-button {
|
|
background-color: #a3c765;
|
|
}
|
|
|
|
a.log-out-button {
|
|
background-color: var(--red-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.log-out-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red.png");
|
|
border: 2px solid var(--red-color);
|
|
color: var(--red-color);
|
|
}
|
|
|
|
[data-theme="dark"] a.log-out-button:hover {
|
|
background-image: url("/static/img/trans-red2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--red-color);
|
|
}
|
|
|
|
a.shop-switch-button {
|
|
color: #666666;
|
|
border-color: #666666;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
a.user-display-name {
|
|
margin: 14px;
|
|
display: inline-block;
|
|
}
|
|
|
|
a.cart-and-count {
|
|
margin: 14px;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/* -------------------------------------------------------------------
|
|
Form-buttons: copy your <a>-class styles to <button> elements
|
|
------------------------------------------------------------------- */
|
|
|
|
/* “Remove” link: no button chrome, just a link color + hover underline */
|
|
button.cart-remove-link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font: inherit;
|
|
color: #5f6368;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
button.cart-remove-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Links should use the theme link color */
|
|
[data-theme="dark"] a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
[data-theme="dark"] button.cart-remove-link {
|
|
color: var(--blue-color);
|
|
}
|
|
|
|
[data-theme="dark"] button.cart-remove-link:hover {
|
|
color: var(--blue-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* “Add To Cart”, “Download”, “Preview” buttons */
|
|
button.product-download-button,
|
|
button.product-preview-button {
|
|
/* inherits .mps-button defaults */
|
|
}
|
|
button.product-download-button {
|
|
background-color: #a3c765;
|
|
}
|
|
button.product-preview-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
/* Cart action buttons */
|
|
button.cart-checkout-button {
|
|
background-color: #a3c765;
|
|
}
|
|
button.cart-save-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
/* Dark mode cart buttons */
|
|
[data-theme="dark"] button.cart-checkout-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
color: var(--green-color);
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
|
|
[data-theme="dark"] button.cart-checkout-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--green-color);
|
|
}
|
|
button.cart-activate-button {
|
|
background-color: #5871ad;
|
|
}
|
|
button.cart-delete-button {
|
|
background-color: #CC6958;
|
|
color: white;
|
|
}
|
|
|
|
/* “Make Public” / “Make Private” */
|
|
button.cart-public-button {
|
|
background: none;
|
|
color: #666666;
|
|
border: 1px solid #666666;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
cursor: pointer;
|
|
}
|
|
button.cart-public-button span.lock {
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* Continue shopping button */
|
|
.cart-continue-shopping-button {
|
|
background-color: #98b6fa;
|
|
color: white;
|
|
}
|
|
|
|
.coupon-apply-button {
|
|
background-color: #a3c765;
|
|
}
|
|
|
|
/*
|
|
* CSS Grid Lanes: Masonry-style layout with graceful fallback
|
|
*
|
|
* Grid Lanes is a new CSS feature that creates true masonry layouts natively.
|
|
* We use @supports to detect browser support and fall back to regular CSS Grid.
|
|
* Shop owners can toggle this via the "grid-lanes-enabled" class in settings.
|
|
*
|
|
* Fallback: Standard CSS Grid with auto-fit columns (items in rows)
|
|
* Enhanced: CSS Grid Lanes (items flow into shortest column, waterfall style)
|
|
*/
|
|
|
|
/* Default: Standard CSS Grid layout */
|
|
section.serp {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: dense;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Grid Lanes: Only apply when shop has it enabled AND browser supports it */
|
|
@supports (display: grid-lanes) {
|
|
section.serp.grid-lanes-enabled {
|
|
display: grid-lanes;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 4px;
|
|
/* item-tolerance controls sensitivity when deciding item placement */
|
|
/* Prevents layout shuffling from minor size variations */
|
|
item-tolerance: 1em;
|
|
}
|
|
}
|
|
|
|
div.serp-item {
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
grid-column: span 1;
|
|
grid-row: span 1;
|
|
|
|
/* The new CSS animations are off the hook. */
|
|
transition: background-color 800ms ease;
|
|
|
|
-webkit-transition: 600ms -webkit-filter ease;
|
|
-moz-transition: 600ms -moz-filter ease;
|
|
-moz-transition: 600ms filter ease;
|
|
-ms-transition: 600ms -ms-filter ease;
|
|
-o-transition: 600ms -o-filter ease;
|
|
transition: 600ms filter ease, 600ms -webkit-filter ease;
|
|
}
|
|
|
|
div.serp-item:hover {
|
|
background-color: #FBFBF3;
|
|
|
|
-webkit-filter: brightness(88%);
|
|
-moz-filter: brightness(88%);
|
|
filter: brightness(88%);
|
|
}
|
|
|
|
[data-theme="dark"] div.serp-item:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
border: 2px solid #7ab9ff;
|
|
color: #ffffff;
|
|
-webkit-filter: none;
|
|
-moz-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
[data-theme="dark"] div.serp-item:hover a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
img.serp-thumbnail {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
div.edit-page {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
grid-gap: 20px;
|
|
}
|
|
|
|
hr {
|
|
color: #EEEEEE;
|
|
}
|
|
|
|
section.upload-product-and-preview {
|
|
}
|
|
|
|
section.upload-thumbnails {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: dense;
|
|
grid-gap: 14px;
|
|
}
|
|
|
|
section.windows-95-task-bar {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-gap: 4px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
section.windows-95-start-button {
|
|
padding: 14px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
section.call-to-action {
|
|
padding: 14px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
section.one-column, section.one-column-thin {
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
section.one-column-thin {
|
|
max-width: 400px;
|
|
}
|
|
|
|
section.user-settings {
|
|
justify-self: right;
|
|
}
|
|
|
|
section.button-panel {
|
|
justify-self: left;
|
|
text-align: center;
|
|
}
|
|
|
|
section.existing-cards {
|
|
justify-self: right;
|
|
text-align: left;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
section.new-card {
|
|
justify-self: left;
|
|
text-align: right;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
div.card-details {
|
|
max-width: 240px;
|
|
margin:auto;
|
|
}
|
|
|
|
div.card-are-you-sure-buttons {
|
|
max-width: 300px;
|
|
margin:auto;
|
|
}
|
|
|
|
section.cart-left {
|
|
margin-bottom: 10px;
|
|
grid-column: 1 / span 3;
|
|
}
|
|
|
|
section.cart-left-grid {
|
|
display: grid;
|
|
grid-gap: 20px;
|
|
grid-template-columns: 1fr 4fr 1fr;
|
|
}
|
|
|
|
section.cart-right {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
grid-column: 4;
|
|
}
|
|
|
|
span.cart-left-item-title {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
section.checkout-left {
|
|
justify-self: right;
|
|
text-align: left;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
section.checkout-right {
|
|
justify-self: left;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Checkout page: responsive columns based on content */
|
|
section.checkout-page {
|
|
display: grid;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
grid-gap: 20px;
|
|
max-width: 640px;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Two columns when multiple sections exist (Stripe + shipping) */
|
|
section.checkout-page .checkout-left + .checkout-right {
|
|
/* This targets checkout-right when it follows checkout-left */
|
|
}
|
|
|
|
section.checkout-page:has(.checkout-left) {
|
|
max-width: 1000px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* Fallback for browsers without :has() support */
|
|
@supports not (selector(:has(*))) {
|
|
section.checkout-page {
|
|
max-width: 1000px;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
}
|
|
}
|
|
|
|
|
|
section.checkout-page .well {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
section.checkout-page {
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
section.checkout-page:has(.checkout-left) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.coupon {
|
|
/* Dotted border */
|
|
border-radius: 4px;
|
|
border: 3px dotted #bbb;
|
|
padding: 20px;
|
|
}
|
|
|
|
|
|
#email2_input {
|
|
display: None;
|
|
}
|
|
|
|
.StripeElement {
|
|
width: 90%;
|
|
margin: auto;
|
|
border-color: #bbbbbb;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 8px;
|
|
background-color: white;
|
|
padding: 12px;
|
|
}
|
|
|
|
.opacity-60 {
|
|
opacity: .60;
|
|
}
|
|
|
|
.well, .well2 {
|
|
background-color: #F9F9FA;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.well-green {
|
|
background-color: var(--green-color);
|
|
color: white;
|
|
}
|
|
|
|
[data-theme="dark"] .one-column.well.well-green,
|
|
[data-theme="dark"] .action-columns.well.well-green {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green.png");
|
|
border: 2px solid var(--green-color);
|
|
box-shadow: 0 0 10px rgba(163, 199, 101, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
[data-theme="dark"] .well-green .shop-new-button {
|
|
background-image: url("/static/img/trans-green.png");
|
|
}
|
|
|
|
/* Action columns - true 50/50 equal columns */
|
|
.action-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.action-columns {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* markup editor css */
|
|
|
|
section.markup-settings {
|
|
width: 100%;
|
|
min-height: 280px;
|
|
}
|
|
|
|
textarea.markup-editor-textarea {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
|
|
.markup-editor-submit {
|
|
float: right;
|
|
}
|
|
|
|
.markup-preview-div {
|
|
width: 100%;
|
|
}
|
|
|
|
.markup-preview-div {
|
|
border-top: 1px dotted #bbbbbb;
|
|
border-bottom: 1px dotted #bbbbbb;
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.markup-preview-div p {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.preview-raw-markup {
|
|
display: block;
|
|
white-space: pre-wrap;
|
|
background-color: unset;
|
|
border-radius: unset;
|
|
border: unset;
|
|
border-width: 0px;
|
|
|
|
margin-top: 19px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.discounted {
|
|
color: #a3c765;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
/* the two-column is stacked by default. */
|
|
section.two-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* On mobile, reorder to put purchase section after images */
|
|
.product-images {
|
|
order: 1;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.product-images img.product-main {
|
|
max-width: 100%;
|
|
max-height: 42vh;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
section.product-right {
|
|
order: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
section.product-right .well {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.product-description {
|
|
order: 3;
|
|
}
|
|
|
|
.product-comments {
|
|
order: 4;
|
|
}
|
|
|
|
/* Watch mode mobile: video sticks at top, nothing scrolls over it */
|
|
.watch-left {
|
|
order: 1;
|
|
}
|
|
|
|
.watch-mode .product-images {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
background: var(--bg-primary, #ffffff);
|
|
}
|
|
|
|
.watch-mode .product-description,
|
|
.watch-mode .product-comments,
|
|
.watch-mode section.product-right {
|
|
position: relative;
|
|
z-index: 5;
|
|
background: var(--bg-primary, #ffffff);
|
|
}
|
|
|
|
.watch-mode section.product-right {
|
|
order: 2;
|
|
}
|
|
|
|
/* Ensure buttons get full width on mobile */
|
|
section.product-right .mps-button {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* the cart-grid is stacked by default. */
|
|
section.cart-grid {
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* markup-editor is stacked by default. */
|
|
div.markup-editor {
|
|
display: grid;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
section.markup-rendered {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*************************************************************
|
|
*
|
|
* for displays bigger than 800px which are "desktop-ish".
|
|
*
|
|
*************************************************************/
|
|
@media (min-width: 960px) {
|
|
|
|
/* The SERP page grid should have bigger items since it has more room.
|
|
* mobile -> desktop
|
|
* 160px -> 240px */
|
|
section.serp {
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, .25fr));
|
|
}
|
|
|
|
/* We have the room to really break into 2 columns */
|
|
section.two-column {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
grid-template-areas:
|
|
"images purchase"
|
|
"description purchase"
|
|
"comments purchase";
|
|
gap: 40px;
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
align-items: start;
|
|
}
|
|
|
|
.product-images {
|
|
grid-area: images;
|
|
}
|
|
|
|
section.product-right {
|
|
grid-area: purchase;
|
|
}
|
|
|
|
.product-description {
|
|
grid-area: description;
|
|
}
|
|
|
|
.product-comments {
|
|
grid-area: comments;
|
|
}
|
|
|
|
/* Watch mode: two-column layout with left wrapper for sticky video */
|
|
section.two-column.watch-mode {
|
|
grid-template-columns: 2fr 1fr;
|
|
grid-template-areas: "left purchase";
|
|
}
|
|
|
|
.watch-left {
|
|
grid-area: left;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* In watch mode, child divs inside watch-left are plain block elements */
|
|
.watch-mode .product-images,
|
|
.watch-mode .product-description,
|
|
.watch-mode .product-comments {
|
|
grid-area: auto;
|
|
}
|
|
|
|
.watch-mode section.product-right {
|
|
grid-area: purchase;
|
|
align-self: start;
|
|
}
|
|
|
|
/* if we have room, break markup-editor into 2 columns */
|
|
div.markup-editor {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: dense;
|
|
grid-gap: 30px;
|
|
padding: 14px;
|
|
justify-items: center;
|
|
}
|
|
section.markup-settings {
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* the minimum width for "desktop-ish" screens. */
|
|
a.mps-button {
|
|
min-width: 280px;
|
|
}
|
|
|
|
/* really make the button small now that we have room. */
|
|
a.mps-button-small {
|
|
min-width: 140px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
section.windows-95-task-bar {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
section.call-to-action {
|
|
text-align: right;
|
|
}
|
|
|
|
/* if we have room, break into 2 columns */
|
|
section.cart-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-gap: 30px;
|
|
padding: 14px;
|
|
justify-items: center;
|
|
}
|
|
|
|
img.product-cart-thumbnail {
|
|
max-width:104px;
|
|
max-height:104px;
|
|
}
|
|
|
|
section.content {
|
|
background-color: #ffffff;
|
|
margin: 4px;
|
|
padding-bottom: 42px;
|
|
}
|
|
|
|
input.mps-keywords {
|
|
text-align: left;
|
|
}
|
|
|
|
section.nav {
|
|
/* if we have room, break navbar into 3 columns */
|
|
grid-template-columns: minmax(200px, 300px) 3fr 1fr;
|
|
grid-gap: 30px;
|
|
padding: 2px;
|
|
}
|
|
|
|
div.message-ribbon {
|
|
display: grid;
|
|
}
|
|
|
|
/* Desktop, NOT watch mode: full nav is sticky */
|
|
body:not(.watch-mode-shop) section.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
/* Desktop, watch mode: ribbon + logo stick, rest of nav scrolls */
|
|
.watch-mode-shop div.message-ribbon {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
.watch-mode-shop section.logo {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 39;
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
/* Desktop: offset sticky video below the sticky ribbon */
|
|
.watch-mode .product-images {
|
|
top: 42px;
|
|
}
|
|
|
|
section.log-in {
|
|
text-align: right;
|
|
}
|
|
|
|
.well, .well2 {
|
|
padding: 10px;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
.well2 {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
img.product-cart-thumbnail {
|
|
max-width:184px;
|
|
max-height:184px;
|
|
}
|
|
.well, .well2 {
|
|
padding: 20px;
|
|
padding-right: 40px;
|
|
padding-left: 40px;
|
|
}
|
|
.well2 {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Desktop: Progressive enhancement for CSS Grid Lanes
|
|
* This uses nested @supports inside @media to only apply when both
|
|
* the viewport is desktop-sized AND the browser supports grid-lanes
|
|
* AND the shop has grid-lanes-enabled class set
|
|
*/
|
|
@media (min-width: 960px) {
|
|
@supports (display: grid-lanes) {
|
|
section.serp.grid-lanes-enabled {
|
|
display: grid-lanes;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 4px;
|
|
item-tolerance: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.message-ribbon {
|
|
color: #ffffff;
|
|
background-color: #5871ad;
|
|
background: linear-gradient(to right, #5871ad, #82A8FF);
|
|
}
|
|
|
|
.highlight {
|
|
text-shadow:
|
|
-6px 0px 6px rgba(255, 231, 13, 0.6),
|
|
6px 0px 6px rgba(255, 231, 13, 0.6),
|
|
12px 0px 12px rgba(255, 231, 13, 0.6),
|
|
-12px 0px 12px rgba(255, 231, 13, 0.6);
|
|
}
|
|
.avoid-wrap {
|
|
display:inline-block;
|
|
}
|
|
|
|
.vertical-text {
|
|
display: inline-block;
|
|
-webkit-transform: rotate(-90deg);
|
|
-moz-transform: rotate(-90deg);
|
|
-ms-transform: rotate(-90deg);
|
|
-o-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.shown-on-desktop {
|
|
display: none;
|
|
}
|
|
|
|
.not-shown-on-desktop {
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (min-width:800px) {
|
|
.shown-on-desktop {display: block}
|
|
.not-shown-on-desktop {display: none}
|
|
}
|
|
div.message-ribbon {
|
|
color: #ffffff;
|
|
background-color: #5871ad;
|
|
background: linear-gradient(to right, #5871ad, #82A8FF);
|
|
}
|
|
|
|
#alerts {
|
|
animation: fadein 2s;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
|
|
/* ALERT START */
|
|
#alerts {
|
|
z-index: 98;
|
|
}
|
|
|
|
.alert {
|
|
opacity: .85;
|
|
display: grid;
|
|
grid-template-columns: 1fr 50px;
|
|
grid-gap: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.alert-message {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.alert .close {
|
|
text-align: right;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.alert-danger, .alert-error {
|
|
color: #721c24;
|
|
background-color: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.alert-warning {
|
|
color: #856404;
|
|
background-color: #fff3cd;
|
|
border: 1px solid #ffeeba;
|
|
}
|
|
|
|
.alert-info, .alert-notice {
|
|
color: var(--text-primary);
|
|
background-color: color-mix(in srgb, var(--info-color) 20%, var(--bg-primary) 80%);
|
|
border: 1px solid var(--info-color);
|
|
}
|
|
|
|
.alert-success {
|
|
color: #155724;
|
|
background-color: #a3c765;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
/* ALERT END */
|
|
|
|
|
|
/* Pure CSS toggle using <details> element */
|
|
.toggle-summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
color: var(--primary-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.toggle-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-summary::marker {
|
|
display: none;
|
|
content: "";
|
|
}
|
|
|
|
.api-key-details {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.api-key-fields {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Status and message styling */
|
|
.status-message {
|
|
color: #666;
|
|
}
|
|
|
|
.success-indicator {
|
|
color: green;
|
|
}
|
|
|
|
.error-indicator {
|
|
color: #d44;
|
|
}
|
|
|
|
.note-text {
|
|
color: #666;
|
|
}
|
|
|
|
[data-theme="dark"] .note-text {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
[data-theme="dark"] .status-message {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
[data-theme="dark"] .error-indicator {
|
|
color: #ff6b6b;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Flash message styling for dark mode */
|
|
[data-theme="dark"] .alert-danger,
|
|
[data-theme="dark"] .alert-error {
|
|
color: white;
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red2.png");
|
|
border-color: var(--red-color);
|
|
}
|
|
|
|
[data-theme="dark"] .alert-warning {
|
|
color: white;
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-red2.png");
|
|
border-color: #ffd93d;
|
|
}
|
|
|
|
[data-theme="dark"] .alert-info,
|
|
[data-theme="dark"] .alert-notice {
|
|
color: white;
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
border-color: var(--blue-color);
|
|
}
|
|
|
|
[data-theme="dark"] .alert-success {
|
|
color: white;
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-green2.png");
|
|
border-color: var(--green-color);
|
|
}
|
|
|
|
/* Override shop theme link colors to ensure visibility in dark mode */
|
|
[data-theme="dark"] a.shop-theme-link-color,
|
|
[data-theme="dark"] .shop-theme-link-color {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
|
|
/* User settings page grid layout */
|
|
.user-settings-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.user-settings-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
}
|
|
|
|
/* Add payment method button styling */
|
|
.add-payment-method-button {
|
|
background-color: var(--blue-color);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.add-payment-method-button:hover {
|
|
background-color: #4a90e2;
|
|
color: white;
|
|
}
|
|
|
|
[data-theme="dark"] .add-payment-method-button {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
color: var(--blue-color);
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
[data-theme="dark"] .add-payment-method-button:hover {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue2.png");
|
|
color: #ffffff;
|
|
border: 2px solid var(--blue-color);
|
|
}
|
|
|
|
.inline-label {
|
|
display: inline;
|
|
}
|
|
|
|
.favicon-preview {
|
|
width: 32px;
|
|
}
|
|
|
|
/* Input field styling */
|
|
.full-width-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.disabled-input {
|
|
opacity: 0.5;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* Crypto checkout styles */
|
|
.crypto-logo {
|
|
width: 150px;
|
|
height: 150px;
|
|
margin-right: 15px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.payment-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 20px;
|
|
margin: 16px 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.crypto-address {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.payment-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 8px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.payment-button-row-1 {
|
|
grid-row: 1;
|
|
}
|
|
|
|
.payment-button-cancel {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.status-box {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.confirmations-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.qr-fallback {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
color: #666;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.success-notice {
|
|
background: color-mix(in srgb, var(--success-color) 15%, var(--bg-primary) 85%);
|
|
border: 1px solid var(--success-color);
|
|
color: var(--text-primary);
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.warning-notice {
|
|
background: color-mix(in srgb, var(--warning-color) 15%, var(--bg-primary) 85%);
|
|
border: 1px solid var(--warning-color);
|
|
color: var(--text-primary);
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.monospace-address {
|
|
font-family: monospace;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
padding: 8px;
|
|
border-radius: 3px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.notice-list {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.notice-footer {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Cart checkout styles */
|
|
.disabled-crypto-button {
|
|
background: #aaa !important;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-theme="dark"] .disabled-crypto-button {
|
|
background-color: #1a1a1a !important;
|
|
background-image: none !important;
|
|
color: #666666 !important;
|
|
border: 2px solid #444444 !important;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
button img.crypto-button-icon,
|
|
.mps-button img.crypto-button-icon,
|
|
img.crypto-button-icon {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
max-width: 32px !important;
|
|
min-width: 32px !important;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.crypto-settings-link {
|
|
color: #f59e0b;
|
|
text-decoration: none;
|
|
display: block;
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.warning-banner {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
color: #856404;
|
|
}
|
|
|
|
.warning-banner-alt {
|
|
background: color-mix(in srgb, var(--info-color) 15%, var(--bg-primary) 85%);
|
|
border: 1px solid var(--info-color);
|
|
color: var(--text-primary);
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.warning-banner p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.warning-banner h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.warning-banner-content {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.pending-quote-item {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
border-radius: 3px;
|
|
padding: 10px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.pending-quote-single {
|
|
text-align: center;
|
|
}
|
|
|
|
.pending-quote-cancel {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.full-width-button {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
|
|
.view-quote-button {
|
|
background: #17a2b8;
|
|
font-size: 12px;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.pending-quote-details {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Cart page styles */
|
|
.cart-float-right {
|
|
float: right;
|
|
}
|
|
|
|
.cart-shop-grid-span {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.cart-shop-name {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cart-inline-form {
|
|
display: inline;
|
|
}
|
|
|
|
.cart-update-button {
|
|
width: 80px;
|
|
}
|
|
|
|
.cart-total-section {
|
|
text-align: right;
|
|
}
|
|
|
|
.cart-total-grid-span {
|
|
text-align: right;
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.cart-total-amount {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cart-public-link {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Phase 1: Static inline style replacements */
|
|
.no-bottom-margin {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.no-top-margin {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.bold-text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stripe-card-logo {
|
|
width: 92px;
|
|
float: left;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.stripe-negative-margin {
|
|
margin-top: -12px;
|
|
}
|
|
|
|
.stripe-initial-width {
|
|
width: initial;
|
|
}
|
|
|
|
.stripe-save-button {
|
|
margin-bottom: 0px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.comment-pending {
|
|
color: orange;
|
|
}
|
|
|
|
.hidden-form {
|
|
display: none;
|
|
}
|
|
|
|
.coupon-disabled {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.vertical-coupon-text {
|
|
margin: 0px;
|
|
}
|
|
|
|
.remove-button-small {
|
|
width: 80px;
|
|
}
|
|
|
|
.subtitle-text {
|
|
font-size: 0.45em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.product-meta-dates {
|
|
color: var(--text-muted);
|
|
font-size: 0.8em;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.original-comment-box {
|
|
background-color: #f5f5f5;
|
|
padding: 15px;
|
|
border-left: 4px solid #007cba;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
[data-theme="dark"] .original-comment-box {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
border-left: 4px solid var(--blue-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Comment reply styling */
|
|
.comment-reply {
|
|
margin-left: 0px;
|
|
margin-bottom: 20px;
|
|
border-left: 2px solid #ddd;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
[data-theme="dark"] .comment-reply {
|
|
border-left: 2px solid var(--blue-color);
|
|
}
|
|
|
|
.start-button-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.table-full-width {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.table-fixed-layout {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.sold-out-button {
|
|
background-color: red !important;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Phase 2: Static layout and status styling */
|
|
|
|
/* Crypto history layout classes */
|
|
.crypto-history-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.crypto-payment-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.crypto-header-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: start;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.crypto-header-title {
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
.crypto-header-subtitle {
|
|
margin: 0;
|
|
color: #6c757d;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.crypto-details-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 15px;
|
|
margin: 10px 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.crypto-right-align {
|
|
text-align: right;
|
|
}
|
|
|
|
.crypto-right-align-justify {
|
|
text-align: right;
|
|
justify-self: end;
|
|
}
|
|
|
|
.crypto-small-text {
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Status notice classes */
|
|
.status-warning-notice {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 3px;
|
|
padding: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.status-error-notice {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
border-radius: 3px;
|
|
padding: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.status-info-notice {
|
|
background: #d1ecf1;
|
|
border: 1px solid #bee5eb;
|
|
border-radius: 3px;
|
|
padding: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.crypto-help-section {
|
|
margin-top: 30px;
|
|
padding: 15px;
|
|
background: #e9ecef;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.crypto-empty-state {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Invoice layout classes */
|
|
.invoice-right-section {
|
|
text-align: right;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.invoice-total-section {
|
|
text-align: right;
|
|
margin: 20px 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.invoice-payment-box {
|
|
background-color: #f0f8ff;
|
|
padding: 15px;
|
|
border: 1px solid #4169e1;
|
|
border-radius: 5px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.invoice-margin-section {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.invoice-margin-small {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
/* Status color classes */
|
|
.status-success {
|
|
color: #28a745;
|
|
}
|
|
|
|
.status-warning {
|
|
color: #ffc107;
|
|
}
|
|
|
|
.status-info {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.status-error {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.code-monospace {
|
|
font-size: 0.9em;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Dark Mode Theme System */
|
|
:root {
|
|
/* Light mode colors (default) */
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f8f9fa;
|
|
--bg-tertiary: #e9ecef;
|
|
--text-primary: #333333;
|
|
--text-secondary: #6c757d;
|
|
--text-muted: #666666;
|
|
--border-color: #dee2e6;
|
|
--border-light: #e9ecef;
|
|
--link-color: #5f6368;
|
|
--blue-color: #98b6fa;
|
|
--green-color: #a3c765;
|
|
--red-color: #bc2131;
|
|
--success-color: #28a745;
|
|
--warning-color: #ffc107;
|
|
--error-color: #dc3545;
|
|
--info-color: #17a2b8;
|
|
|
|
/* Form elements */
|
|
--input-bg: #ffffff;
|
|
--input-border: #cccccc;
|
|
--input-text: #333333;
|
|
|
|
/* Navigation */
|
|
--nav-bg: #f9f9fa;
|
|
--nav-text: #333333;
|
|
|
|
/* Cards and containers */
|
|
--card-bg: #f8f9fa;
|
|
--well-bg: #f9f9fa;
|
|
|
|
/* Status notices */
|
|
--notice-warning-bg: #fff3cd;
|
|
--notice-warning-border: #ffeaa7;
|
|
--notice-error-bg: #f8d7da;
|
|
--notice-error-border: #f5c6cb;
|
|
--notice-info-bg: #d1ecf1;
|
|
--notice-info-border: #bee5eb;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Dark mode colors - zealotrush.com inspired gaming theme */
|
|
--bg-primary: #0d1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #21262d;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #cccccc;
|
|
--text-muted: #999999;
|
|
--border-color: #7ab9ff;
|
|
--border-light: #5599dd;
|
|
--link-color: #7ab9ff;
|
|
--blue-color: #7ab9ff;
|
|
--green-color: #08e700;
|
|
--red-color: #F34C31;
|
|
--success-color: #08e700;
|
|
--warning-color: #f34c31;
|
|
--error-color: #f34c31;
|
|
--info-color: #7ab9ff;
|
|
|
|
/* Form elements */
|
|
--input-bg: #161b22;
|
|
--input-border: #7ab9ff;
|
|
--input-text: #ffffff;
|
|
|
|
/* Navigation */
|
|
--nav-bg: #0d1117;
|
|
--nav-text: #ffffff;
|
|
|
|
/* Cards and containers */
|
|
--card-bg: #2d2d2d;
|
|
--well-bg: #2d2d2d;
|
|
|
|
/* Status notices */
|
|
--notice-warning-bg: #3e2723;
|
|
--notice-warning-border: #5d4037;
|
|
--notice-error-bg: #3f1a1a;
|
|
--notice-error-border: #5c2626;
|
|
--notice-info-bg: #1a365d;
|
|
--notice-info-border: #2c5282;
|
|
}
|
|
|
|
/* Apply theme variables to existing elements */
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
section.content {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
section.nav {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--nav-text);
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
textarea {
|
|
background-color: var(--input-bg);
|
|
border-color: var(--input-border);
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.well, .well2 {
|
|
background-color: var(--well-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .well,
|
|
[data-theme="dark"] .well2 {
|
|
background-color: #2d3748;
|
|
background-image: url("/static/img/trans-blue.png");
|
|
border: 2px solid #7ab9ff;
|
|
box-shadow: 0 0 10px rgba(122, 185, 255, 0.3);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Dark mode specific overrides for existing classes */
|
|
[data-theme="dark"] table tr:nth-child(even) {
|
|
background-color: #2d2d2d;
|
|
}
|
|
|
|
[data-theme="dark"] table tr:nth-child(odd) {
|
|
background-color: #333333;
|
|
}
|
|
|
|
[data-theme="dark"] .crypto-payment-card {
|
|
background: var(--card-bg);
|
|
border-color: var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .status-warning-notice {
|
|
background: var(--notice-warning-bg);
|
|
border-color: var(--notice-warning-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .status-error-notice {
|
|
background: var(--notice-error-bg);
|
|
border-color: var(--notice-error-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .status-info-notice {
|
|
background: var(--notice-info-bg);
|
|
border-color: var(--notice-info-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .crypto-help-section {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="dark"] .invoice-payment-box {
|
|
background-color: #1a365d;
|
|
border-color: #2c5282;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Crypto wallet success indicators */
|
|
.success-indicator {
|
|
color: var(--success-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
[data-theme="dark"] .success-indicator {
|
|
color: var(--green-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Theme toggle button */
|
|
.theme-toggle {
|
|
background: none;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
.theme-toggle-icon {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Watch mode: sticky video within tall left wrapper */
|
|
.watch-mode .product-images {
|
|
position: sticky;
|
|
z-index: 10;
|
|
background: var(--bg-primary, #ffffff);
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Watch video container — grid stacks all children in same cell for crossfade */
|
|
.watch-video-container {
|
|
display: grid;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.watch-video-container > * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
.watch-video-container > video {
|
|
max-width: 100%;
|
|
max-height: 42vh;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
/* Incoming video during DJ crossfade — z-index above active */
|
|
.crossfade-incoming {
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Unmute overlay — shown by JS when autoplay-with-sound is blocked */
|
|
.unmute-overlay {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 20;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
|
|
/* Related content sidebar — "Up Next" */
|
|
.related-content {
|
|
margin-top: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.related-content-header {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ring-header-info {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto 1fr;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.ring-header-info .ring-progress {
|
|
justify-self: end;
|
|
}
|
|
|
|
.ring-header-controls {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
gap: 16px;
|
|
justify-content: end;
|
|
align-items: center;
|
|
}
|
|
|
|
.related-content-header h3 {
|
|
margin: 0;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted, #888);
|
|
}
|
|
|
|
/* Autoplay toggle — iOS-style slider */
|
|
.watch-autoplay-label {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.autoplay-label-text {
|
|
font-size: 0.75em;
|
|
color: var(--text-muted, #888);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.autoplay-slider {
|
|
width: 36px;
|
|
height: 20px;
|
|
background: var(--bg-tertiary, #ccc);
|
|
border-radius: 10px;
|
|
position: relative;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.autoplay-slider::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.watch-autoplay-label input {
|
|
display: none;
|
|
}
|
|
|
|
.watch-autoplay-label input:checked + .autoplay-slider {
|
|
background: var(--blue-color, #98b6fa);
|
|
}
|
|
|
|
.watch-autoplay-label input:checked + .autoplay-slider::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.related-content-row {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr 28px;
|
|
gap: 0;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
border-radius: 6px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.related-content-row:hover {
|
|
background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
|
|
}
|
|
|
|
.related-content-row-watched {
|
|
opacity: 0.45;
|
|
}
|
|
.related-content-row-current {
|
|
background-color: var(--blue-color, #5871ad);
|
|
color: white;
|
|
border-radius: 4px;
|
|
padding: 4px 0;
|
|
}
|
|
.related-content-row-current .related-content-index {
|
|
color: white;
|
|
}
|
|
.related-content-now-playing {
|
|
font-weight: bold;
|
|
}
|
|
.related-content-now-playing .related-content-title {
|
|
-webkit-line-clamp: unset;
|
|
overflow: visible;
|
|
}
|
|
.related-content-row-prev {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.ring-progress {
|
|
font-size: 0.8em;
|
|
color: var(--text-muted, #999);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ring-loops-badge {
|
|
font-size: 0.75em;
|
|
font-weight: bold;
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
background-color: var(--blue-color, #5871ad);
|
|
color: white;
|
|
}
|
|
.ring-mod-badge {
|
|
font-size: 0.65em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 1px 5px;
|
|
border-radius: 10px;
|
|
background-color: #48bb78;
|
|
color: white;
|
|
}
|
|
|
|
.watch-direction-label {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
gap: 6px;
|
|
align-items: center;
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.watch-direction-label input {
|
|
display: none;
|
|
}
|
|
|
|
.watch-direction-label input:checked + .autoplay-slider {
|
|
background: var(--blue-color, #98b6fa);
|
|
}
|
|
|
|
.watch-direction-label input:checked + .autoplay-slider::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.direction-label-text {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted, #999);
|
|
}
|
|
|
|
.related-content-index {
|
|
font-size: 0.75em;
|
|
color: var(--text-muted, #999);
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.related-content-item {
|
|
display: grid;
|
|
grid-template-columns: 58px 1fr;
|
|
gap: 10px;
|
|
padding: 6px 4px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.related-content-item img {
|
|
max-width: 58px;
|
|
max-height: 58px;
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.related-content-no-thumb {
|
|
display: block;
|
|
width: 58px;
|
|
height: 58px;
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary, #e8e8e8);
|
|
}
|
|
|
|
.related-content-title {
|
|
font-size: 0.82em;
|
|
line-height: 1.3;
|
|
text-align: left;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Watch mode: audio container with album art */
|
|
.watch-audio-container {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.watch-audio-container .audio-cover {
|
|
max-height: 42vh;
|
|
width: auto;
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.watch-audio-container audio {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Watch countdown overlay — compact bottom bar with frosted glass */
|
|
.watch-countdown {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255, 255, 255, 0.75);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr auto auto;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
align-items: center;
|
|
text-align: left;
|
|
z-index: 30;
|
|
border-top: 1px solid var(--border-color, #dee2e6);
|
|
}
|
|
|
|
[data-theme="dark"] .watch-countdown {
|
|
background: rgba(13, 17, 23, 0.80);
|
|
border-top: 1px solid var(--border-color, #7ab9ff);
|
|
}
|
|
|
|
.countdown-thumb {
|
|
grid-column: 1;
|
|
width: 60px;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.countdown-text {
|
|
grid-column: 2;
|
|
color: var(--text-primary, #333);
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
#countdown-title {
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#countdown-number {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--blue-color, #98b6fa);
|
|
}
|
|
|
|
.watch-countdown .mps-button {
|
|
padding: 6px 14px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
#countdown-play-now {
|
|
grid-column: 3;
|
|
}
|
|
|
|
#countdown-cancel {
|
|
grid-column: 4;
|
|
}
|
|
|
|
/* Static content countdown: flows in-place, not overlaid */
|
|
.watch-countdown-static {
|
|
position: relative;
|
|
border-top: none;
|
|
border: 1px solid var(--border-color, #dee2e6);
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Queue UI */
|
|
#watch-queue {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
#watch-queue h4 {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.queue-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--border-color, #ddd);
|
|
}
|
|
|
|
.queue-item-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.queue-remove-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary, #666);
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.queue-remove-btn:hover {
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
/* Queue add button inside related content row */
|
|
.queue-add-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
padding: 4px;
|
|
color: var(--text-primary, #333);
|
|
border-radius: 50%;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.queue-add-btn:hover {
|
|
background: var(--bg-secondary, rgba(0, 0, 0, 0.08));
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
/* Footer */
|
|
.mps-footer {
|
|
background-color: var(--bg-secondary, #f8f9fa);
|
|
border-top: 2px solid var(--border-color, #dee2e6);
|
|
margin-top: 40px;
|
|
padding: 40px 40px 24px;
|
|
}
|
|
|
|
.mps-footer-grid {
|
|
max-width: 100%;
|
|
margin: 0 auto 32px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 28px;
|
|
}
|
|
|
|
.mps-footer-brand {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mps-footer-logo {
|
|
font-size: 1.4em;
|
|
font-weight: 550;
|
|
color: var(--text-primary, #333);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mps-footer-logo:hover {
|
|
color: var(--blue-color, #5871ad);
|
|
}
|
|
|
|
.mps-footer-tagline {
|
|
color: var(--text-muted, #777);
|
|
font-size: 14px;
|
|
max-width: 320px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.mps-footer-group {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mps-footer-group-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #333);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.mps-footer-links {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mps-footer-links a {
|
|
color: var(--text-muted, #777);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mps-footer-links a:hover {
|
|
color: var(--green-color, #a3c765);
|
|
}
|
|
|
|
.mps-footer-ctas {
|
|
max-width: 100%;
|
|
margin: 0 auto 24px;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
justify-content: start;
|
|
gap: 12px;
|
|
padding: 20px 0;
|
|
border-top: 1px solid var(--border-color, #dee2e6);
|
|
border-bottom: 1px solid var(--border-color, #dee2e6);
|
|
}
|
|
|
|
.mps-footer-ctas a.mps-button {
|
|
min-width: 160px;
|
|
font-size: 14px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.mps-footer-bottom {
|
|
text-align: center;
|
|
color: var(--text-muted, #999);
|
|
font-size: 12px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mps-footer-bottom a {
|
|
color: var(--text-muted, #999);
|
|
text-decoration: underline;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mps-footer-bottom a:hover {
|
|
color: var(--green-color, #a3c765);
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.mps-footer-grid {
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|