added bg feature
This commit is contained in:
316
src/App.css
316
src/App.css
@@ -3095,3 +3095,319 @@
|
||||
.static-page__footer span {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
CUSTOM BACKGROUND IMAGE
|
||||
============================ */
|
||||
body.gj-has-bg .home-page,
|
||||
body.gj-has-bg .history-page,
|
||||
body.gj-has-bg .settings-page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
[data-theme="dark"] body.gj-has-bg .home-page,
|
||||
[data-theme="dark"] body.gj-has-bg .history-page,
|
||||
[data-theme="dark"] body.gj-has-bg .settings-page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
BACKGROUND GALLERY MODAL
|
||||
============================ */
|
||||
|
||||
.bg-modal {
|
||||
background: var(--color-surface, #fff);
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
width: min(440px, calc(100vw - 2rem));
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.bg-gallery {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
overflow-x: auto;
|
||||
padding: 0.25rem 0 0.75rem;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.bg-gallery::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* Shared thumb/swatch styles */
|
||||
.bg-gallery-swatch,
|
||||
.bg-gallery-thumb,
|
||||
.bg-gallery-add {
|
||||
flex-shrink: 0;
|
||||
width: 84px;
|
||||
height: 58px;
|
||||
border-radius: 10px;
|
||||
border: 2.5px solid transparent;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
transition: border-color 0.15s, transform 0.12s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.bg-gallery-swatch,
|
||||
.bg-gallery-thumb {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-gallery-swatch:hover,
|
||||
.bg-gallery-thumb:hover,
|
||||
.bg-gallery-add:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.bg-gallery-item--active {
|
||||
border-color: var(--color-primary, #22c55e) !important;
|
||||
}
|
||||
|
||||
/* Default color swatch */
|
||||
.bg-gallery-swatch-fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eef6ee;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Thumbnail image */
|
||||
.bg-gallery-thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Active checkmark badge */
|
||||
.bg-gallery-badge {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary, #22c55e);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Label below swatch/add button */
|
||||
.bg-gallery-label {
|
||||
position: absolute;
|
||||
bottom: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-text-muted, #6b7280);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* "+" add button */
|
||||
.bg-gallery-add {
|
||||
border: 2px dashed var(--color-border, #d4e8d4);
|
||||
background: var(--color-accent-light, #dcfce7);
|
||||
color: var(--color-text-muted, #6b7280);
|
||||
gap: 0.1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.bg-gallery-add:hover {
|
||||
border-color: var(--color-primary, #22c55e);
|
||||
color: var(--color-primary, #22c55e);
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
.bg-close-btn {
|
||||
width: 100%;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.7rem;
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid var(--color-border, #d4e8d4);
|
||||
background: transparent;
|
||||
color: var(--color-text, #1a1a1a);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.bg-close-btn:hover {
|
||||
background: var(--color-accent-light, #dcfce7);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
FULLSCREEN IMAGE CROPPER
|
||||
============================ */
|
||||
|
||||
.cropper-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 500;
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.cropper-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
flex-shrink: 0;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cropper-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cropper-cancel-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem 0.5rem;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.cropper-apply-btn {
|
||||
background: #22c55e;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0.35rem 1rem;
|
||||
border-radius: 8px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.cropper-apply-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.cropper-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.cropper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Dark area outside crop box via box-shadow */
|
||||
.cropper-shade {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Crop box border */
|
||||
.cropper-box {
|
||||
position: absolute;
|
||||
border: 2px solid rgba(255, 255, 255, 0.85);
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Rule-of-thirds grid */
|
||||
.cropper-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.22) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.22) 1px, transparent 1px);
|
||||
background-size: 33.333% 33.333%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Resize handles */
|
||||
.cropper-handle {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
touch-action: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cropper-handle-tl { top: -4px; left: -4px; cursor: nw-resize; }
|
||||
.cropper-handle-tr { top: -4px; right: -4px; cursor: ne-resize; }
|
||||
.cropper-handle-bl { bottom: -4px; left: -4px; cursor: sw-resize; }
|
||||
.cropper-handle-br { bottom: -4px; right: -4px; cursor: se-resize; }
|
||||
|
||||
.cropper-hint {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 0.72rem;
|
||||
padding: 0.45rem;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
DARK THEME — bg gallery
|
||||
============================ */
|
||||
|
||||
[data-theme="dark"] .bg-modal {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-gallery-swatch-fill {
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-gallery-add {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-gallery-add:hover {
|
||||
border-color: #4ade80;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-close-btn {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #e8f5e8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bg-close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user