diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/style.css b/nodejs-project/nodejs-project/src/client/assets/styles/style.css index baba6b2d..a8a18770 100644 --- a/nodejs-project/nodejs-project/src/client/assets/styles/style.css +++ b/nodejs-project/nodejs-project/src/client/assets/styles/style.css @@ -350,18 +350,6 @@ nav ul li a:hover { .sidebar-right { border: 2px solid orange !important; } */ -/* Panel wrapper: transparent on desktop so sidebars stay as flex items */ -.sidebar-panel { - display: contents; -} -/* Restore visual order: left sidebar | main | right sidebar */ -.sidebar-left { order: 1; } -.main-column { order: 2; } -.sidebar-right { order: 3; } - -/* Quick links only shown in mobile panel */ -.panel-quicklinks { display: none; } - .sidebar-left, .sidebar-right { background-color: #222; @@ -882,7 +870,9 @@ article img { /* Filters */ button.filter-btn, +a.filter-btn, button.create-button { + font: inherit; padding: 10px 20px; margin-right: 10px; border-radius: 5px; @@ -891,14 +881,19 @@ button.create-button { transition: background-color .2s, border-color .2s; } -button.filter-btn { +button.filter-btn, +a.filter-btn { background-color: #ff6600; border-color: #ff3300; color: #fff; + text-decoration: none; + display: inline-block; } button.filter-btn:hover, -button.filter-btn.active { +button.filter-btn.active, +a.filter-btn:hover, +a.filter-btn.active { background-color: #ff9900; border-color: #e68a00; color: #000; @@ -922,7 +917,7 @@ button.create-button:hover { width: 100%; padding: 6px; font-size: 14px; - border: 1px solid #ccc; + border: 1px solid #333; border-radius: 4px; box-sizing: border-box; } @@ -2132,7 +2127,8 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; /* Market */ .market-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); + grid-template-columns: repeat(3, 1fr); + gap: 20px; justify-content: center; } @@ -2381,6 +2377,103 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; margin: 0.15em 0 0.2em 0; font-size: 1em; color: #ffd740; + line-height: 1.6; +} +.forum-body { + margin: 0.15em 0 0.2em 0; + font-size: 1em; + color: #ffd740; + line-height: 1.6; + word-break: break-word; +} + +.forum-body h1 { + font-size: 1.6em; + margin: 10px 0 6px 0; + color: #ff9d00; +} + +.forum-body h2 { + font-size: 1.4em; + margin: 8px 0 5px 0; + color: #ff9d00; +} + +.forum-body h3 { + font-size: 1.25em; + margin: 6px 0 4px 0; + color: #ff9d00; +} + +.forum-body ul, +.forum-body ol { + padding-left: 22px; + margin: 6px 0; +} + +.forum-body li { + margin: 3px 0; +} + +.forum-body blockquote { + border-left: 3px solid #ff7300; + padding-left: 10px; + margin: 8px 0; + color: #ffb347; +} + +.forum-body code { + background: #1a1a1a; + padding: 2px 6px; + border-radius: 4px; + font-family: monospace; +} + +.forum-body pre { + background: #111; + padding: 10px; + border-radius: 6px; + overflow-x: auto; + margin: 8px 0; +} + +.forum-body hr { + border: none; + border-top: 1px solid #333; + margin: 10px 0; +} + +.forum-body img { + max-width: 100%; + border-radius: 6px; + margin: 8px 0; +} + +.forum-body video, +.forum-body audio { + max-width: 100%; + margin: 8px 0; +} + +.forum-score-box { + position: sticky; + top: 80px; +} + +.forum-body.truncate { + max-height: 220px; + overflow: hidden; + position: relative; +} + +.forum-body.truncate::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 60px; + background: linear-gradient(to bottom, rgba(0,0,0,0), #0f0f0f); } .forum-meta { font-size: 1em; @@ -3116,14 +3209,64 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; font-weight: bold; } +.bank-claim-ubi{margin:16px 0} +.bank-claim-card{border:1px solid #FFA500;border-radius:8px;padding:16px;margin:8px 0} +.bank-claim-card p{margin:4px 0} +.bank-claim-btn{font-size:16px;padding:10px 24px;margin-top:8px} + .pub-item{border:1;border-radius:10px;background:none} .snh-invite-box{border:1px solid currentColor;border-radius:8px;padding:16px;margin:12px 0;font-family:monospace} .snh-invite-name{margin:0 0 8px 0} -.snh-invite-code{display:block;word-break:break-all;font-size:14px;margin:0;text-decoration:none;cursor:default} +.snh-invite-date{font-size:13px;opacity:0.7;margin:0 0 10px 0} +.snh-invite-btn{display:block;word-break:break-all;font-size:14px;margin:0;cursor:pointer;background:none;border:1px solid #FFA500;color:#FFA500;padding:10px;border-radius:5px;width:auto;text-align:left;font-family:monospace} .error-box{background:#222326;border:none;color:#f5c242;padding:12px;border-radius:8px;margin-top:8px} .error-title{margin:0 0 6px 0;font-weight:600} .error-pre{margin:0;white-space:pre-wrap;font-family:monospace} +.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:8px 0} +.shop-card{border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column} +.shop-card-media{max-height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111} +.shop-card-media img,.shop-media{width:100%;max-height:200px;object-fit:cover} +.shop-card-body{padding:12px;display:flex;flex-direction:column;gap:6px} +.shop-title-link{color:#FFA500;text-decoration:none} +.shop-card-desc{font-size:14px;opacity:0.85;margin:0} +.shop-card-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px} +.shop-open{color:#0f0;font-weight:bold} +.shop-closed{color:#f44;font-weight:bold} +.shop-product-count{color:#FFA500} +.shop-location{opacity:0.7} +.shop-card-tags{display:flex;flex-wrap:wrap;gap:4px} +.shop-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} +.shop-detail{padding:8px 0} +.shop-detail-media{max-width:100%;margin:12px 0} +.shop-detail-media img{max-width:100%;border-radius:6px} +.shop-detail-desc{margin:8px 0} +.shop-share{margin:8px 0;display:flex;align-items:center;gap:8px} +.shop-share-input{flex:1;background:#222;border:1px solid #555;color:#ccc;padding:6px 10px;border-radius:4px;font-family:monospace;font-size:13px} +.shop-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0} +.shop-product-card{border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column} +.shop-product-media{max-height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111} +.shop-product-media img{width:100%;max-height:180px;object-fit:cover} +.shop-product-body{padding:10px;display:flex;flex-direction:column;gap:6px} +.shop-product-price{font-size:18px;font-weight:bold;color:#FFA500} +.shop-product-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} +.shop-add-product{border:1px dashed #555;border-radius:8px;padding:16px;margin:12px 0} +.shop-featured-products{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} +.shop-featured-item{display:flex;flex-direction:column;align-items:center;width:72px;text-decoration:none;border:1px solid #333;border-radius:6px;overflow:hidden;background:#111} +.shop-featured-item:hover{border-color:#FFA500} +.shop-featured-thumb{width:72px;height:72px;object-fit:cover} +.shop-featured-price{font-size:11px;color:#FFA500;padding:4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%} +.shop-product-stars{color:#FFA500;font-size:14px;letter-spacing:1px} +.card-field-mb{margin-bottom:10px} +.card-field-mt{margin-top:10px} +.card-tags-mt{margin-top:10px} +.card-label-bold{font-weight:800} +.card-value-bold{margin-left:10px;font-weight:800} +.contact-bold{font-weight:bold} +.textarea-full{width:100%} +.shop-form{padding:8px 0} +.shop-form input[type="text"],.shop-form input[type="number"],.shop-form textarea,.shop-form select{width:100%;max-width:480px;padding:8px;margin:4px 0 8px 0;background:#222;border:1px solid #555;color:#ccc;border-radius:4px;font-family:monospace} + /* carbon footprint chart */ .carbon-section-title{font-size:18px;color:#555;margin:8px 0;font-weight:600} .carbon-chart{margin:12px 0;background:transparent !important;border:none !important} @@ -3214,11 +3357,14 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; border-top: 1px solid rgba(255,255,255,0.08); line-height: 1; min-height: 0; + margin-top: 5px; } .oasis-footer-center { + margin-top: 15px; text-align: center; line-height: 1.6; + box-shadow: 0 2px 20px 0 #FFD60024; } .oasis-footer-logo-link { @@ -3508,7 +3654,7 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; } .tribe-card-members { - border: 1px solid #555; + border: none; border-radius: 4px; padding: 8px; margin: 6px 0; @@ -3542,6 +3688,14 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; background: #ffa300; color: #000; } +.tribe-action-btn.danger-btn { border-color: #d9534f; color: #d9534f; } +.tribe-action-btn.danger-btn:hover { background: #d9534f; color: #000; } + +.calendar-interval-block { margin: 8px 0 16px; } +.calendar-interval-label { display: block; margin-bottom: 6px; } +.calendar-interval-until { margin-top: 10px; } +.calendar-interval-row { display: flex; gap: 16px; flex-wrap: wrap; } +.calendar-interval-option { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; } .tribe-thumb-grid { display: grid; @@ -3635,7 +3789,7 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; .tribe-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + grid-template-columns: repeat(3, 1fr); gap: 20px; } @@ -3675,8 +3829,7 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; } .tribe-section-nav .filter-btn { - font-size: 12px; - padding: 5px 10px; + padding: 8px 12px; text-transform: uppercase; } @@ -3715,6 +3868,7 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; align-items: center; margin-bottom: 16px; } +.tribe-search-form{display:flex;gap:10px;align-items:center} .tribe-content-filters { display: flex; @@ -4037,129 +4191,881 @@ width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; text-decoration: underline; } -/* Android / mobile touch compatibility */ -button, input[type="submit"], input[type="button"] { - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 165, 0, 0.3); - touch-action: manipulation; - min-height: 44px; - min-width: 44px; +.comment-submit-btn { + width: auto; + max-width: 200px; } -input[type="file"] { - -webkit-appearance: none; - display: block; - min-height: 44px; - padding: 10px 0; - font-size: 16px; - color: #FFA500; - cursor: pointer; - touch-action: manipulation; +.market-owner-actions-inline { + display: flex; + gap: 8px; + flex-wrap: wrap; + align-items: center; } -input[type="file"]::file-selector-button { +.project-goal-highlight { + font-size: 1.4em; + font-weight: 700; +} + +.project-control-form--progress { + max-width: 300px; +} + +.project-progress-input { + max-width: 80px; +} + +.applicants-under { + color: #4caf50; +} + +.applicants-at { + color: #ffeb3b; +} + +.applicants-over { + color: #f44336; +} + +.transfer-amount-highlight { + font-size: 1.3em; + font-weight: 700; +} + +.pixelia-paint-form { + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: center; +} + +.pixelia-paint-form label, +.pixelia-paint-form input, +.pixelia-paint-form select, +.pixelia-paint-form button { + width: auto; + margin: 0; +} + +.pixelia-paint-form input[type="number"] { + max-width: 80px; +} + +.method-image-centered { + text-align: center; + margin: 12px 0; +} + +.method-image-centered img { + height: auto; + margin: 0 auto; +} + +.tag-cloud-wrap { + display: flex; + flex-wrap: wrap; + max-width: 90%; + gap: 14px; + justify-content: center; + align-items: center; + min-height: 220px; + padding: 36px; + border-radius: 16px; +} + +.tag-cloud-item { + position: relative; + padding: 6px 14px; + border-radius: 999px; + font-weight: 500; + font-size: 0.95rem; + letter-spacing: 0.3px; + text-decoration: none; + transition: all 0.25s ease; +} + +.tag-cloud-item:hover { + background: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.2); + transform: translateY(-3px); + color: #ffffff; + box-shadow: 0 6px 18px rgba(0,0,0,0.5); +} + +.tag-cloud-item[data-weight="1"] { + font-size: 0.85rem; + opacity: 0.7; +} + +.tag-cloud-item[data-weight="2"] { + font-size: 0.95rem; + opacity: 0.8; +} + +.tag-cloud-item[data-weight="3"] { + font-size: 1.05rem; + opacity: 0.9; +} + +.tag-cloud-item[data-weight="4"] { + font-size: 1.15rem; + font-weight: 600; +} + +.stats-karma-block { + background-color: #222; + padding: 24px; + border-radius: 8px; + border: 1px solid #444; + margin-bottom: 24px; +} + +.feed-detail-card { + background-color: #222; + border: 1px solid #444; + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; +} + +.map-card { + background-color: #222; + border: 1px solid #444; + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; +} + +.map-card-info { + display: flex; + gap: 12px; + align-items: center; + flex-wrap: wrap; + margin-bottom: 8px; + border: 0px; +} + +.map-type-badge { + display: inline-block; + padding: 2px 8px; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.5px; background-color: #FFA500; color: #000; +} + +.map-coords { + font-family: monospace; + font-size: 0.85rem; + color: white; +} + +.map-coords-detail { + font-family: monospace; + font-size: 0.9rem; + color: white; +} + +.map-marker-count { + font-size: 0.8rem; + color: #888; +} + +.map-description { + margin: 20px 0; +} + +.map-url-container { + margin: 8px 0; +} + +.map-url-link { + color: #FFA500; + word-break: break-all; +} + +.map-detail-info { + display: flex; + gap: 16px; + align-items: center; + flex-wrap: wrap; + margin-bottom: 12px; +} + +.map-wrap { + margin-right: 30px; + position: relative; + border: 0px; +} + +.map-img { + display: block; + width: 100% !important; + height: 100% !important; + max-width: none !important; + border: none !important; +} + +.map-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 12px; + background-color: #1a1a1a; + border-top: 1px solid #333; +} + +.map-bar-info { + font-size: 0.75rem; + color: #aaa; +} + +.map-attr { + font-size: 0.6rem; + color: #555; +} + +.map-coord-preview { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + background-color: #222; + border-radius: 6px; + margin: 8px 0; + font-family: monospace; + font-size: 0.9rem; + color: #FFA500; +} + +.map-coord-inline { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: monospace; + font-size: 0.9rem; + color: #FFA500; + margin: 4px 0; +} + +.map-coord-pin { + font-size: 1.2rem; +} + +.map-create-layout { + width: 100%; +} + +.map-form { + margin-top: 12px; +} + +.map-form label { + display: block; + font-weight: 600; + color: #FFA500; + margin-top: 8px; + margin-bottom: 4px; +} + +.map-form input[type="text"], +.map-form textarea, +.map-form select { + width: 100%; + box-sizing: border-box; +} + +.map-form-row { + display: flex; + border: 0px; + gap: 12px; +} + +.map-form-field { + flex: 1; +} + +.map-card { + background-color: #222; + border: 1px solid #444; + border-radius: 8px; + padding: 12px 16px; + margin-bottom: 12px; + display: flex; + gap: 16px; + align-items: flex-start; +} + +.map-card-thumb-link { + flex-shrink: 0; +} + +.map-card-thumb { + width: 120px !important; + height: 120px !important; + max-width: none !important; + border-radius: 6px !important; + border: 1px solid #555 !important; + object-fit: cover; +} + +.map-card-body { + flex: 1; + min-width: 0; +} + +.map-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 8px; +} + +.map-card-actions { + display: flex; + gap: 6px; + flex-wrap: wrap; + align-items: center; +} + +.map-click-hint { + color: #FFA500; + font-size: 0.85rem; + padding: 6px 0; +} + +.map-detail { + background-color: #222; + border: 1px solid #444; + border-radius: 8px; + padding: 16px; +} + +.map-detail-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 12px; +} + +.map-detail-actions { + display: flex; + gap: 6px; + flex-wrap: wrap; + align-items: center; +} + +.map-marker-form { + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid #444; +} + +.map-markers-list { + margin-top: 16px; +} + +.map-marker-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 10px 0; + border-bottom: 1px solid #333; +} + +.map-marker-dot { + font-size: 1.2rem; + line-height: 1; +} + +.map-marker-info { + display: flex; + flex-direction: column; + gap: 2px; + border: 0px; +} + +.map-marker-label { + font-weight: 600; + color: #ffa300; +} + +.map-marker-coords { + font-family: monospace; + font-size: 0.8rem; + color: white; +} + +.map-marker-meta { + font-size: 0.75rem; +} + +.map-empty { + padding: 24px; + text-align: center; + color: #666; + font-size: 0.9rem; +} + +.map-form { + width: 100%; +} + +.map-form label { + font-weight: 600; + color: #FFA500; +} + +.map-form input[type="text"], +.map-form textarea, +.map-form select { + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +.map-marker-form { + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid #444; +} + +.map-marker-form label { + font-weight: 600; + color: #FFA500; +} + +.map-marker-form input[type="text"] { + width: 100%; + max-width: 100%; + box-sizing: border-box; +} + +.map-form-map-slot { + margin: 12px 0; border: none; - padding: 10px 20px; - border-radius: 5px; - font-size: 14px; - font-weight: bold; - cursor: pointer; - min-height: 44px; - touch-action: manipulation; + overflow: hidden; } -input[type="file"]::file-selector-button:hover { - background-color: #FFD700; +.map-markers-list { + margin-top: 16px; + text-align: left; } -.score-btn { - min-width: 44px; - min-height: 44px; - touch-action: manipulation; +.map-marker-item { + padding: 8px 0; + border-bottom: 1px solid #333; + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; } -.vote-btn { - min-height: 44px; - touch-action: manipulation; +.map-marker-dot { + color: #4a9eff; + font-size: 0.9rem; } -.vote-btn:disabled, .vote-btn.disabled { - background-color: #555; - color: #999; - cursor: not-allowed; - opacity: 0.6; +.search-result-image { + max-width: 100%; + max-height: 300px; + border-radius: 4px; + display: block; + margin: 6px 0; } -.refeed-btn { - min-height: 44px; - touch-action: manipulation; +.map-embed-section { + display: flex; + flex-direction: column; + gap: 6px; + margin: 8px 0; } -.refeed-btn:disabled, .refeed-btn.active { - background-color: #555; - color: #999; - cursor: not-allowed; - opacity: 0.6; +.map-location-inline { + display: inline-flex; + align-items: center; + gap: 4px; } -.filter-btn, .create-button { - min-height: 44px; - touch-action: manipulation; +.map-location-icon { + color: #FFA500; } -.tribe-action-btn { - min-height: 44px; - touch-action: manipulation; +.map-location-link { + color: #FFA500; + font-size: 0.85rem; } -.forum-send-btn { - min-height: 44px; - touch-action: manipulation; +.map-location-embed { + margin: 16px 0; } -form { - touch-action: manipulation; +.maps-list { + display: flex; + flex-direction: column; + gap: 16px; } -@media (max-width: 768px) { - button, input[type="submit"], input[type="button"] { - padding: 12px 16px; - font-size: 16px; - } - - .score-btn { - width: 48px; - height: 48px; - font-size: 1.4em; - } - - .vote-btn { - padding: 10px 14px; - font-size: 14px; - } - - .refeed-btn { - padding: 10px 14px; - font-size: 14px; - } - - .voting-buttons { - flex-wrap: wrap; - } - - input[type="file"] { - font-size: 16px; - width: 100%; - } - - textarea, input[type="text"], select { - font-size: 16px; - } +.maps-search { + margin-bottom: 16px; } -/* QR code styles */ +.inhabitant-karma-ubi { + margin-top: 8px; + display: flex; + flex-direction: column; + gap: 2px; +} +.inhabitant-karma-ubi .karma-line, +.inhabitant-karma-ubi .ubi-line { + display: block; + font-size: 0.9em; +} + +.shop-featured-item, +.shop-featured-item:hover, +.shop-featured-item:visited, +.shop-featured-item:active { + text-decoration: none; +} + +.shop-detail { + border: 1px solid #333; + border-radius: 8px; + padding: 16px; +} + +.map-form-map-slot { + margin: 12px 0 0 0; + border: none; + outline: none; + box-shadow: none; + overflow: hidden; +} + +.map-marker-item { + border: none; + padding: 4px 0; + display: flex; + align-items: center; + gap: 8px; + flex-wrap: nowrap; + text-align: left; +} +.map-marker-info { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + flex-wrap: nowrap; + padding: 4px 0; + width: 100%; + overflow: hidden; + text-align: left; + justify-content: flex-start; +} +.map-markers-list h3 { + margin-bottom: 4px; +} +.map-form-full { + width: 100%; +} +.map-form-full form { + width: 100%; +} +.map-osm-embed { + width: 100%; + height: 450px; + border: 1px solid #444; + border-radius: 8px; + margin: 12px 0; +} +.map-viewer { + width: 100%; + overflow-x: auto; + overflow-y: hidden; + border: 0px; +} +.map-form-full, .map-form-full form { + box-sizing: border-box; + overflow: hidden; +} +.map-popup { + display: none; + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.65); + z-index: 1000; + align-items: center; + justify-content: center; +} +.map-popup:target { + display: flex; +} +.map-popup-box { + background: #222; + border: 1px solid #555; + border-radius: 10px; + padding: 20px 24px; + max-width: 360px; + width: 90%; + color: #ddd; + position: relative; +} +.map-popup-close { + position: absolute; + top: 10px; right: 14px; + color: #FFA500; + text-decoration: none; + font-size: 1.2rem; + line-height: 1; +} +.map-popup-label { + font-weight: 600; + font-size: 1rem; + color: #eee; + margin-bottom: 6px; +} +.map-popup-coords { + font-family: monospace; + font-size: 0.85rem; + color: white; +} +.map-popup-link { + color: #FFA500; + text-decoration: underline; + word-break: break-all; +} +.map-popup-img { + display: block; + max-width: 180px; + max-height: 120px; + object-fit: cover; + border-radius: 4px; + margin: 6px auto; +} +.map-marker-img { + display: block; + max-width: 120px; + max-height: 80px; + object-fit: cover; + border-radius: 4px; + margin: 4px 0; +} +.map-zoom-info { + display: block; + font-size: 0.8rem; + color: #888; + margin-bottom: 4px; +} +.map-embed-url { + margin-top: 6px; +} +.map-embed-url .map-location-link { + font-size: 0.8rem; +} +.map-zone { + display: block; +} +.map-popup-container { height: 0; overflow: hidden; border: 0px; } +.project-maploc { + margin: 6px 0; +} +.project-maploc .map-location-link { + font-size: 0.85rem; + word-break: break-all; +} +.shop-product-actions:empty { + display: none; +} +.ubi-available{color:#4CAF50;font-weight:bold} +.ubi-unavailable{color:#F44336;font-weight:bold} +.banking-ubi .card-field{margin:4px 0} +.pad-status-open{font-weight:bold} +.pad-status-invite{color:#FFA500;font-weight:bold} +.pad-status-closed{font-weight:bold} +.pad-deadline{color:#FFA500;font-size:0.9rem} +.pad-editor-container{margin-top:12px} +.pad-editor-area{display:flex;flex-direction:column;gap:8px;} +.pad-editor-area textarea{width:100%;min-height:200px;background:#1a1a1a;color:#eee;border:1px solid #444;border-radius:4px;padding:10px;font-family:monospace;font-size:0.95rem;resize:vertical;box-sizing:border-box} +.pad-members-list{flex:1;min-width:160px;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:10px} +.pad-members-list h4{margin:0 0 8px 0;color:#aaa;font-size:0.85rem;text-transform:uppercase} +.pad-member-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:0.85rem} +.pad-color-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0} +.pad-entries{margin-top:16px;display:flex;flex-direction:column;gap:8px} +.pad-entry{padding:8px 12px;border-left:4px solid #444;background:#1a1a1a;border-radius:0 4px 4px 0} +.pad-entry-header{font-size:0.8rem;color:#888;margin-bottom:4px} +.pad-entry-text{white-space:pre-wrap;word-break:break-word;font-family:monospace;font-size:0.9rem} +.pad-invite-section{margin-top:12px;padding:12px;background:#1a1a1a;border:1px solid #333;border-radius:4px} +.pad-invite-section input[type="text"]{width:100%;background:#111;color:#eee;border:1px solid #555;border-radius:4px;padding:8px;box-sizing:border-box;margin-bottom:8px} +.chat-main-split{display:flex;gap:16px;width:100%} +.chat-messages-column{flex:2;min-width:0;display:flex;flex-direction:column;gap:8px} +.chat-participants-column{flex:1;min-width:140px;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:12px} +.chat-participants-column h2{margin:0 0 8px 0;color:#aaa;font-size:0.85rem;text-transform:uppercase;font-weight:normal} +.chat-participants-list{list-style:none;padding:0;margin:0} +.chat-participants-list li{padding:4px 0;font-size:0.85rem} +.chat-message-form{background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:10px} +.chat-message-form textarea{width:100%;box-sizing:border-box;background:#111;color:#eee;border:1px solid #555;border-radius:4px;padding:8px;resize:vertical;font-family:inherit} +.chat-messages-list{display:flex;flex-direction:column;gap:4px} +.chat-message{padding:6px 10px;border-radius:4px;background:#1a1a1a;word-break:break-word;border:none} +.chat-message-author{border-left-color:#FFA500;background:#1f1800} +.chat-message-self{border-left-color:#888;background:#181818} +.chat-message-meta{font-size:0.8rem;color:#888;border:none} +.chat-message-date{color:#666} +.chat-message-sender a{color:#aaa} +.chat-message-text{display:block;margin-top:2px;font-size:0.9rem;white-space:pre-wrap;word-break:break-word} +.calendar-note-card{position:relative;padding:10px 80px 10px 10px;min-height:56px} +.calendar-note-delete{position:absolute;top:8px;right:8px;margin:0} +.calendar-note-delete button{padding:4px 10px;font-size:0.8rem} +.chat-no-messages{color:#666;font-style:italic;padding:12px 0} +.chat-join-section{margin-top:12px;padding:12px;background:#1a1a1a;border:1px solid #333;border-radius:4px} +.chat-invite-form input[type="text"]{width:100%;background:#111;color:#eee;border:1px solid #555;border-radius:4px;padding:8px;box-sizing:border-box;margin-bottom:8px} +.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:16px} +.game-card{border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#111} +.game-card-media{width:100%;max-height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000} +.game-card-media img{width:100%;max-height:180px;object-fit:cover} +.game-card-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1} +.game-card-title{margin:0;font-size:1.1rem;color:#FFA500} +.game-card-desc{margin:0;font-size:0.9rem;color:#ccc;flex:1} +.game-card-actions{display:flex;justify-content:center;margin-top:8px} +.hall-of-fame-table{width:100%;border-collapse:collapse;font-size:0.9rem} +.hall-of-fame-table th{color:#FFA500;text-align:left;padding:4px 8px;border-bottom:1px solid #444} +.hall-of-fame-table td{padding:4px 8px;color:#ccc;border-bottom:1px solid #222} +.hall-of-fame-table tr:hover td{background:#1a1a1a} + +.activity-filter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:24px} +.activity-filter-col{display:flex;flex-direction:column;gap:8px} + +.visit-btn-centered{display:flex;margin-top:10px;border:0px} + +.pad-editor-white{width:100%;box-sizing:border-box;background:#fff;color:#111;border-radius:4px;padding:10px;resize:vertical;font-family:inherit;font-size:0.95rem} +.pad-readonly-text{background:#fff;color:#111;border:1px solid #aaa;border-radius:4px;padding:10px;white-space:pre-wrap;word-break:break-word;font-size:0.95rem} +.pad-version-list{margin-top:12px} +.pad-version-item{display:flex;flex-direction:column;gap:4px;padding:8px;border-bottom:1px solid #333;font-size:0.85rem} +.pad-version-date{color:#888} +.pad-version-author a{color:#FFA500} +.pad-version-link{color:#aaa;text-decoration:underline;cursor:pointer} +.pad-author-color-0{background-color:#e74c3c} +.pad-author-color-1{background-color:#3498db} +.pad-author-color-2{background-color:#2ecc71} +.pad-author-color-3{background-color:#f39c12} +.pad-author-color-4{background-color:#9b59b6} +.pad-author-color-5{background-color:#1abc9c} +.pad-author-color-6{background-color:#e67e22} +.pad-author-color-7{background-color:#e91e63} +.pad-author-color-8{background-color:#00bcd4} +.pad-author-color-9{background-color:#8bc34a} +.pad-author-color-none{background-color:#888} +.pad-entry-author{display:block;font-size:.75rem;margin-bottom:4px;opacity:.75} +.pad-author-swatch{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:middle;border:1px solid #000} +.pad-readonly-colored{background:#fff;color:#111;padding:12px;border-radius:4px;min-height:120px;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.95rem;border:1px solid #aaa;margin-bottom:10px} +.pad-author-span{padding:1px 2px;border-radius:2px} +.pad-members-section{margin-top:12px;border:none} +.pad-members-below-tags{margin-top:12px;border:none} +.pad-member-card{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:0.85rem} +.pad-members-grid{display:flex;flex-direction:column;gap:4px;margin-bottom:12px} +.pad-version-section{margin-top:16px;border-top:1px solid #333;padding-top:12px} + +.chat-full-width{flex:1;min-width:0} +.chat-participants-section{margin-top:12px;padding:12px;background:#1a1a1a;border:none;border-radius:4px} +.chat-participants-below{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} +.chat-participants-below a{font-size:0.85rem;color:#aaa} +.chat-message-image-wrap{margin:4px 0} +.chat-message-image{max-width:100%;max-height:300px;border-radius:4px} + +.games-single-col{display:flex;flex-direction:column;gap:16px;margin-top:16px} +.game-row{display:flex;gap:16px;border:1px solid #333;border-radius:8px;overflow:hidden;background:#111;padding:12px;align-items:flex-start} +.game-row-media{flex-shrink:0;width:120px} +.game-row-media img{width:100%;border-radius:4px} +.game-row-body{flex:1;display:flex;flex-direction:column;gap:6px} +.game-top-score{font-size:0.85rem;color:#aaa} +.score-first{color:#2ecc71;font-weight:bold} +.games-scoring-list{display:flex;flex-direction:column;gap:24px;margin-top:16px} +.game-scoring-section{border:1px solid #333;border-radius:8px;padding:16px;background:#111} +.game-scoring-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px} +.game-scoring-thumb{width:80px;border-radius:4px;flex-shrink:0} +.game-scoring-info{flex:1} +.game-shell-section{padding:0!important;margin:0} +.game-iframe{width:100%;height:82vh;border:none;background:#000;display:block} +.game-iframe-ecoinflow{height:95vh} +.game-iframe-neoninfiltrator{height:95vh} +.game-iframe-audiopendulum{height:95vh} +.game-iframe-flipflop{height:720px} +.game-iframe-rockpaperscissors{height:580px} +.game-iframe-tiktaktoe{height:580px} +.game-desc-yellow{color:yellow} +.game-new-record-label{color:#FFA500;font-weight:bold} +.game-row-actions{display:flex;align-items:center;text-align:center;flex-shrink:0;border:0px;} +.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0} +.calendar-day-header{font-weight:bold;padding:8px;text-align:center;color:#FFA500} +.calendar-day{padding:10px 4px;text-align:center;background:#222;border-radius:4px;min-height:36px} +.calendar-day-empty{background:#111;opacity:.4} +.calendar-day-marked{background:#FFA500;color:#000;font-weight:bold} +.calendar-day-marked a{color:#000;text-decoration:none;display:block} +.calendar-nav{display:flex;justify-content:space-between;align-items:center;margin:8px 0} +.calendar-date-list{margin-top:16px} +.calendar-date-item{background:#333;padding:18px 108px 18px 18px;border-radius:6px;margin-bottom:14px;position:relative;min-height:64px} +.calendar-date-delete{position:absolute;top:12px;right:12px;margin:0} +.calendar-date-delete button{padding:4px 10px;font-size:0.8rem} +.calendar-date-item-header{color:#FFA500;font-weight:bold;margin-bottom:6px;width:max-content} +.calendar-participants-count{color:#FFA500;font-weight:bold} +.calendar-day-notes{margin-top:16px} +.pad-viewer-back{margin-bottom:12px} + +.access-denied-msg{margin:12px 0;padding:12px;background:#1a1a1a;border:1px solid #555;border-radius:4px;color:#ccc;font-style:italic} + +.torrent-table{width:100%;border-collapse:collapse;margin-top:12px} +.torrent-table th,.torrent-table td{padding:8px 12px;text-align:left} +.torrent-table th{background:#1a1a1a;color:#FFA500;font-weight:bold} +.torrent-download{margin:12px 0} +.torrent-download .filter-btn{border:none} + +.logs-table{width:100%;border-collapse:collapse;margin-top:12px} +.logs-table th,.logs-table td{padding:8px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid #222} +.logs-col-actions{vertical-align:middle;text-align:center;white-space:nowrap;background:transparent} +.logs-col-actions form{margin:0;display:inline-block} +.logs-col-actions .filter-btn{min-width:110px} +.logs-table th{background:#1a1a1a;color:#FFA500;font-weight:bold} +.logs-col-date{white-space:nowrap;text-align:center;font-family:monospace;background:transparent} +.logs-date-day{color:#FFA500;font-weight:bold;font-size:0.9rem} +.logs-date-time{color:#ddd;font-size:0.85rem} +.logs-col-log{max-width:560px;vertical-align:middle;background:transparent;padding:8px 12px} +.logs-col-log>*{background:transparent;border:0;padding:0;margin:0} +.logs-entry-label{color:#FFA500;font-weight:bold;margin-bottom:4px !important;background:transparent;border:0} +.logs-entry-meta{color:#888;font-size:0.85rem;margin-bottom:6px} +.logs-entry-mode{color:#FFA500;font-weight:bold} +.logs-entry-text{white-space:pre-wrap;word-break:break-word;color:#ddd;background:transparent;border:0;padding:0;margin:0;display:block} +.logs-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0} +.logs-toolbar-inline{display:inline-flex;gap:10px;margin:0} +.logs-mode-form{margin:12px 0} +.logs-mode-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap} +.logs-ai-disabled{color:#e74c3c;font-style:italic;margin:8px 0} +.logs-col-type{white-space:nowrap;text-align:center;font-family:monospace;background:transparent} +.logs-type-text{font-weight:bold;letter-spacing:0.5px;text-transform:uppercase;font-family:monospace;font-size:0.85rem} +.logs-type-ai{color:#00b4ff} +.logs-type-manual{color:#FFA500} +.logs-toolbar-wrap{display:flex;flex-direction:column;gap:12px;margin:12px 0} +.logs-search{margin:0} +.logs-detail{padding:16px} +.logs-detail-header{color:#aaa;font-family:monospace;margin-bottom:12px;word-break:break-all} +.logs-detail-text{white-space:pre-wrap;word-break:break-word;color:#ddd;margin:12px 0} +.logs-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} + +.sidebar-panel { + display: contents; +} +.sidebar-left { order: 1; } +.main-column { order: 2; } +.sidebar-right { order: 3; } +.panel-quicklinks { display: none; } + .qr-code svg { max-width: 200px; width: 100%; @@ -4167,139 +5073,14 @@ form { display: block; margin: 8px auto; } - .qr-code-inline svg { max-width: 140px; margin: 4px 0; } - .qr-code-profile svg { max-width: 160px; margin: 8px auto; } - -.user-id-qr { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; -} - -.user-id-label { - font-size: 11px; - word-break: break-all; - opacity: 0.7; - margin: 0; -} - -.invite-code-text { - font-family: monospace; - font-size: 13px; - word-break: break-all; - padding: 6px 10px; - background: rgba(0,0,0,0.1); - border-radius: 4px; - margin: 8px 0; -} - -/* Invite log blockchain styles */ -.invite-log-block { - margin-top: 8px; - padding: 6px 8px; - border-left: 3px solid #27ae60; - background: rgba(39,174,96,0.06); - border-radius: 0 4px 4px 0; -} - -.invite-status--pending { color: #e67e22; font-weight: bold; } -.invite-status--used { color: #27ae60; font-weight: bold; } - -.invite-code-cell { - font-family: monospace; - font-size: 11px; -} - -.invite-key { - font-size: 11px; - word-break: break-all; -} - -/* ============================================================ - MEJORAS GENERALES — añadidas en refactor visual - ============================================================ */ - -/* Fotos de perfil circulares */ -.inhabitant-photo-details { - border-radius: 50%; - object-fit: cover; -} - -/* Imágenes de posts con altura controlada */ -.post img, .feed-card img, .post-image { - max-height: 70vh; - width: auto; - max-width: 100%; - border-radius: 8px; - display: block; - margin: 8px auto; -} - -/* Feedback táctil en botones */ -button:active, -input[type="submit"]:active, -input[type="button"]:active, -.filter-btn:active { - opacity: 0.75; - transform: scale(0.97); - transition: transform 0.1s, opacity 0.1s; -} - -/* Transición suave en botones */ -button, input[type="submit"], input[type="button"], .filter-btn { - transition: background-color 0.2s, border-color 0.2s, opacity 0.1s; -} - -/* Filtros: scroll horizontal por defecto */ -.mode-buttons, -.mode-buttons-cols, -.inhabitant-action { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -/* Cards con bordes redondeados */ -.inhabitant-card, -.tribe-card, -.block, -.post, -.forum-card { - border-radius: 12px; -} - -/* Invite code con fuente monospace legible */ -.invite-code-text { - font-family: 'Courier New', Courier, monospace; - font-size: 13px; - word-break: break-all; - padding: 8px 12px; - border-radius: 6px; - letter-spacing: 0.5px; - user-select: all; -} - -/* Sección de invite page más centrada */ -.invite-page { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - padding: 16px; - max-width: 480px; - margin: 0 auto; -} - -/* user-id-qr mejor alineado en perfil */ .user-id-qr { display: flex; flex-direction: column; @@ -4308,7 +5089,6 @@ button, input[type="submit"], input[type="button"], .filter-btn { width: 100%; margin-top: 8px; } - .user-id-label { font-size: 10px; font-family: monospace; @@ -4320,20 +5100,50 @@ button, input[type="submit"], input[type="button"], .filter-btn { text-overflow: ellipsis; white-space: nowrap; } - -/* trending-container: grid responsive en desktop, columna en movil */ +.invite-code-text { + font-family: 'Courier New', Courier, monospace; + font-size: 13px; + word-break: break-all; + padding: 8px 12px; + border-radius: 6px; + letter-spacing: 0.5px; + user-select: all; +} +.invite-page { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 16px; + max-width: 480px; + margin: 0 auto; +} +.invite-log-block { + margin-top: 8px; + padding: 6px 8px; + border-left: 3px solid #27ae60; + background: rgba(39,174,96,0.06); + border-radius: 0 4px 4px 0; +} +.invite-status--pending { color: #e67e22; font-weight: bold; } +.invite-status--used { color: #27ae60; font-weight: bold; } +.invite-code-cell { + font-family: monospace; + font-size: 11px; +} +.invite-key { + font-size: 11px; + word-break: break-all; +} .trending-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } - -/* ---- QR Compartir ID (details/summary en perfil) ---- */ .qr-share-details { margin: 8px 0; width: 100%; } - .qr-share-btn { display: inline-flex; align-items: center; @@ -4346,9 +5156,7 @@ button, input[type="submit"], input[type="button"], .filter-btn { list-style: none; user-select: none; } - .qr-share-btn::-webkit-details-marker { display: none; } - .qr-share-panel { display: flex; flex-direction: column; @@ -4358,7 +5166,6 @@ button, input[type="submit"], input[type="button"], .filter-btn { margin-top: 8px; border-radius: 12px; } - .qr-share-id { font-family: monospace; font-size: 0.7rem; @@ -4367,8 +5174,6 @@ button, input[type="submit"], input[type="button"], .filter-btn { max-width: 280px; opacity: 0.7; } - -/* Hamburger: oculto en desktop, visible solo en movil via mobile.css */ .mobile-menu-btn { display: none; } .mobile-menu-backdrop { display: none; } .mobile-menu-close { display: none; }