mirror of
https://github.com/Such-Software/bauhaus-echo-web.git
synced 2026-10-17 05:51:24 +02:00
Add nag overlay + AdSense
This commit is contained in:
jwinterm
+192
-35
@@ -1,52 +1,209 @@
|
||||
/* ================================================================
|
||||
BASE
|
||||
================================================================ */
|
||||
canvas {
|
||||
cursor: default;
|
||||
outline: none;
|
||||
cursor: default;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #222222;
|
||||
margin: 0px;
|
||||
background-color: #222;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #eeeeee;
|
||||
/* ================================================================
|
||||
NAG OVERLAY
|
||||
================================================================ */
|
||||
#nag-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(10, 10, 10, 0.92);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
color: #bbbbff;
|
||||
#nag-box {
|
||||
max-width: 420px;
|
||||
width: 90%;
|
||||
padding: 2.5rem 2rem;
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
#nag-header {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
#nag-title {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.25em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#nag-tagline {
|
||||
margin: 0.3rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
color: #999;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* Pitch text */
|
||||
#nag-pitch {
|
||||
margin-bottom: 1.6rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#nag-pitch p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Store link buttons */
|
||||
#nag-store-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
.nag-btn {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.2rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease, box-shadow 0.15s ease;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nag-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* Primary CTA — itch.io */
|
||||
.nag-btn-primary {
|
||||
background: #fa5c5c;
|
||||
color: #fff;
|
||||
font-size: 1.05rem;
|
||||
padding: 0.85rem 1.2rem;
|
||||
}
|
||||
|
||||
.nag-btn-primary:hover {
|
||||
background: #ff7070;
|
||||
box-shadow: 0 0 20px rgba(250, 92, 92, 0.3);
|
||||
}
|
||||
|
||||
/* App Store / Google Play row */
|
||||
#nag-mobile-row {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.nag-btn-store {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
color: #aaa;
|
||||
border: 1px solid #444;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.6rem 0.5rem;
|
||||
}
|
||||
|
||||
.nag-btn-store:hover {
|
||||
border-color: #777;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
#nag-divider {
|
||||
height: 1px;
|
||||
background: #333;
|
||||
margin: 0.2rem 0 1.2rem;
|
||||
}
|
||||
|
||||
/* Ad container */
|
||||
#nag-ad-container {
|
||||
margin: 0 0 1.2rem;
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Continue button */
|
||||
#nag-continue {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: transparent;
|
||||
color: #777;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#nag-continue:hover {
|
||||
color: #bbb;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
/* Fine print */
|
||||
#nag-fine-print {
|
||||
margin: 0.7rem 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
SUPERDEV (debug)
|
||||
================================================================ */
|
||||
.superdev {
|
||||
color: rgb(37,37,37);
|
||||
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
|
||||
font-size: 50pt;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
background-color: rgb(83,87,93);
|
||||
box-shadow: 0px 3px 0px 0px rgb(34,34,34),
|
||||
0px 7px 10px 0px rgb(17,17,17),
|
||||
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
|
||||
inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 0;
|
||||
border-radius: 35px;
|
||||
text-align: center;
|
||||
line-height: 68px;
|
||||
color: rgb(37,37,37);
|
||||
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
|
||||
font-size: 50pt;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
background-color: rgb(83,87,93);
|
||||
box-shadow: 0px 3px 0px 0px rgb(34,34,34),
|
||||
0px 7px 10px 0px rgb(17,17,17),
|
||||
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
|
||||
inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 0;
|
||||
border-radius: 35px;
|
||||
text-align: center;
|
||||
line-height: 68px;
|
||||
}
|
||||
|
||||
.superdev:active {
|
||||
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
|
||||
0px 3px 7px 0px rgb(17,17,17),
|
||||
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
|
||||
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
|
||||
background-color: rgb(83,87,93);
|
||||
top: 3px;
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 3px rgb(250,250,250);
|
||||
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
|
||||
0px 3px 7px 0px rgb(17,17,17),
|
||||
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
|
||||
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
|
||||
background-color: rgb(83,87,93);
|
||||
top: 3px;
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 3px rgb(250,250,250);
|
||||
}
|
||||
|
||||
.superdev:hover {
|
||||
|
||||
Reference in New Issue
Block a user