russell@unturf.com
10b8ad27f8
Ribbon now purple gradient with pulsing green glow keyframes. Hover intensifies the glow and slightly scales up. Changed from position:fixed to position:sticky so it scrolls with the page but sticks to top.
835 lines
15 KiB
CSS
835 lines
15 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.
|
|
*
|
|
* * * * * */
|
|
|
|
.avoid-wrap {
|
|
display:inline-block;
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
font-family: helvetica;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.75em;
|
|
margin-top: .4em;
|
|
margin-bottom: .4em;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #5f6368
|
|
}
|
|
|
|
input {
|
|
/* keep the input inside the parents box! */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input[type="text"], input[type="tel"], input[type="password"] {
|
|
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-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 {
|
|
display: grid;
|
|
}
|
|
|
|
section.product-left {
|
|
justify-self: right;
|
|
text-align: left;
|
|
max-width: 480px;
|
|
}
|
|
|
|
section.product-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 {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
textarea.mps-product-description {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
height: 120px;
|
|
padding: 10px;
|
|
}
|
|
|
|
input.file-input {
|
|
width: 100%;
|
|
}
|
|
|
|
div.message-ribbon {
|
|
padding: 8px;
|
|
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: #F9F9FA;
|
|
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;
|
|
}
|
|
|
|
section.search {
|
|
align-self: center;
|
|
}
|
|
|
|
form.search {
|
|
width: 100%;
|
|
}
|
|
|
|
input.mps-keywords {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
section.content {
|
|
background-color: #ffffff;
|
|
margin: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
section.logo{
|
|
align-self: center;
|
|
}
|
|
|
|
img.logo {
|
|
width: 90%;
|
|
padding: 5%;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
img.product-main {
|
|
/*
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
*/
|
|
width: 100%;
|
|
}
|
|
|
|
a.mps-button {
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
min-width: 250px;
|
|
padding-top: 14px;
|
|
padding-bottom: 14px;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
a.product-edit-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
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: #5871ad;
|
|
}
|
|
|
|
a.cart-checkout-button {
|
|
background-color: #a3c765;
|
|
}
|
|
|
|
a.cart-save-button {
|
|
background-color: #98b6fa;
|
|
}
|
|
|
|
a.cart-activate-button {
|
|
background-color: #5871ad;
|
|
}
|
|
|
|
a.cart-public-button span.lock {
|
|
font-size: 24px;
|
|
}
|
|
|
|
a.cart-public-button {
|
|
color: #666666;
|
|
border-color: #666666;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
a.cart-delete-button {
|
|
background-color: #CC6958;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
section.serp {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: dense;
|
|
grid-gap: 14px;
|
|
}
|
|
|
|
div.serp-item {
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
grid-column: span 1;
|
|
grid-row: span 1;
|
|
/* The new CSS animations are off the hook. */
|
|
transition: background-color 700ms ease;
|
|
}
|
|
|
|
div.serp-item:hover {
|
|
background-color: #F9F9FA;
|
|
}
|
|
|
|
img.serp-thumbnail {
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
section.windows-95-start-button {
|
|
padding: 14px;
|
|
}
|
|
|
|
section.call-to-action {
|
|
padding: 14px;
|
|
}
|
|
|
|
section.one-column, section.one-column-thin {
|
|
max-width: 800px;
|
|
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;
|
|
}
|
|
|
|
#email2_input {
|
|
display: None;
|
|
}
|
|
|
|
.StripeElement {
|
|
min-width: 246px;
|
|
width: 100%;
|
|
border-color: #bbbbbb;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 2px;
|
|
background-color: white;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.opacity-60 {
|
|
opacity: .60;
|
|
}
|
|
|
|
.well, .well2 {
|
|
background-color: #F9F9FA;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
/* the two-column is stacked by default. */
|
|
section.two-column {
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
/* if we have room, break into 2 columns */
|
|
section.two-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: dense;
|
|
grid-gap: 30px;
|
|
padding: 14px;
|
|
justify-items: center;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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: 14px;
|
|
}
|
|
|
|
input.mps-keywords {
|
|
text-align: left;
|
|
}
|
|
|
|
section.nav {
|
|
/* if we have room, break navbar into 3 columns */
|
|
grid-template-columns: minmax(200px, 300px) 1fr 1fr;
|
|
grid-gap: 30px;
|
|
padding: 14px;
|
|
}
|
|
|
|
div.message-ribbon {
|
|
display: block;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
FOOTER
|
|
============================================ */
|
|
|
|
.mps-footer {
|
|
background-color: #F9F9FA;
|
|
border-top: 2px solid #e0e0e0;
|
|
margin-top: 40px;
|
|
padding: 40px 40px 24px;
|
|
font-family: helvetica;
|
|
}
|
|
|
|
.mps-footer-grid {
|
|
max-width: 100%;
|
|
margin: 0 auto 32px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 28px;
|
|
}
|
|
|
|
.mps-footer-brand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mps-footer-logo {
|
|
font-size: 1.4em;
|
|
font-weight: 550;
|
|
color: #0b0b0b;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mps-footer-logo:hover {
|
|
color: #5871ad;
|
|
}
|
|
|
|
.mps-footer-tagline {
|
|
color: #777;
|
|
font-size: 14px;
|
|
max-width: 320px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.mps-footer-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mps-footer-group-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #0b0b0b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.mps-footer-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mps-footer-links a {
|
|
color: #777;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mps-footer-links a:hover {
|
|
color: #a3c765;
|
|
}
|
|
|
|
.mps-footer-ctas {
|
|
max-width: 100%;
|
|
margin: 0 auto 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 20px 0;
|
|
border-top: 1px solid #e0e0e0;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.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: #999;
|
|
font-size: 12px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mps-footer-bottom a {
|
|
color: #999;
|
|
text-decoration: underline;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mps-footer-bottom a:hover {
|
|
color: #a3c765;
|
|
}
|
|
|
|
/* ============================================
|
|
CORNER RIBBON
|
|
============================================ */
|
|
|
|
@keyframes ribbon-glow {
|
|
0% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3), 0 0 15px rgba(163, 199, 101, 0.15); }
|
|
50% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 30px rgba(163, 199, 101, 0.3); }
|
|
100% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3), 0 0 15px rgba(163, 199, 101, 0.15); }
|
|
}
|
|
|
|
@keyframes ribbon-glow-hover {
|
|
0% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
|
|
50% { box-shadow: 0 3px 18px rgba(163, 199, 101, 0.9), 0 0 50px rgba(163, 199, 101, 0.6), 0 0 80px rgba(163, 199, 101, 0.25); }
|
|
100% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
|
|
}
|
|
|
|
.corner-ribbon {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 99;
|
|
height: 0;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.corner-ribbon a {
|
|
display: block !important;
|
|
position: absolute !important;
|
|
right: -45px;
|
|
top: 40px;
|
|
width: 250px;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: bold !important;
|
|
color: #ffffff !important;
|
|
background: linear-gradient(135deg, #7B2D8E, #9B59B6, #7B2D8E) !important;
|
|
text-decoration: none !important;
|
|
transform: rotate(45deg);
|
|
pointer-events: auto;
|
|
letter-spacing: 0.03em;
|
|
animation: ribbon-glow 2.5s ease-in-out infinite;
|
|
transition: all 300ms ease;
|
|
}
|
|
|
|
.corner-ribbon a:hover {
|
|
background: linear-gradient(135deg, #6A1B7A, #8E44AD, #6A1B7A) !important;
|
|
animation: ribbon-glow-hover 1.5s ease-in-out infinite;
|
|
transform: rotate(45deg) scale(1.05);
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.mps-footer-grid {
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 32px;
|
|
}
|
|
}
|