feat: mobile visual improvements and CSS cleanup
main_views: viewport-fit=cover for notch/home-indicator support OasisMobile.css: remove full mobile.css duplicate, fix aggressive div border/bg selector, add :active feedback on buttons/links, fix user-link overflow with ellipsis, QR colors adapted to dark theme mobile.css: complete rewrite - safe-area-inset padding for notch phones filter buttons as horizontal scroll row (no more tall vertical stacks) inhabitant photos circular with object-fit cover post images max-height 60vh to avoid full-screen takeover invite-log table horizontal scroll on mobile QR lightbox overlay (CSS-only, no JS) font-size 14px base (more readable on small screens) :active touch feedback on all interactive elements style.css: circular profile photos, max-height post images, button transitions, invite-page centered layout, user-id-qr alignment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO
parent
0fc10be24c
commit
b48944ef57
4 changed files with 530 additions and 889 deletions
|
|
@ -1,3 +1,8 @@
|
||||||
|
/* ============================================================
|
||||||
|
OASIS MOBILE — mobile.css
|
||||||
|
Aplicado solo en pantallas ≤768px via media attribute
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -9,34 +14,57 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: 15px;
|
font-size: 14px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
|
/* Safe area para notch/home indicator */
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
}
|
}
|
||||||
|
|
||||||
img,
|
/* ---- Safe area en header y footer ---- */
|
||||||
video,
|
.header {
|
||||||
canvas,
|
padding-top: env(safe-area-inset-top) !important;
|
||||||
iframe,
|
padding-left: env(safe-area-inset-left) !important;
|
||||||
table {
|
padding-right: env(safe-area-inset-right) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer, .footer {
|
||||||
|
padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
|
||||||
|
padding-left: env(safe-area-inset-left) !important;
|
||||||
|
padding-right: env(safe-area-inset-right) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Media generales ---- */
|
||||||
|
img, video, canvas, iframe, table {
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,
|
pre, code {
|
||||||
code {
|
|
||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
word-break: break-word !important;
|
word-break: break-word !important;
|
||||||
overflow-wrap: anywhere !important;
|
overflow-wrap: anywhere !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- Imágenes de posts con altura máxima ---- */
|
||||||
|
.post img, .feed-card img, .post-image {
|
||||||
|
max-height: 60vh !important;
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
display: block;
|
||||||
|
margin: 6px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Header ---- */
|
||||||
.header {
|
.header {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: row !important;
|
||||||
|
flex-wrap: wrap !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
padding: 4px !important;
|
padding: 4px 2px !important;
|
||||||
gap: 4px !important;
|
gap: 2px !important;
|
||||||
overflow: visible !important;
|
align-items: center !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
|
|
@ -46,18 +74,39 @@ code {
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
padding: 2px !important;
|
padding: 2px !important;
|
||||||
gap: 4px !important;
|
gap: 4px !important;
|
||||||
overflow: visible !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-bar-left,
|
body div.top-bar-left {
|
||||||
.top-bar-mid,
|
display: contents !important;
|
||||||
.top-bar-right {
|
}
|
||||||
|
|
||||||
|
body div.top-bar-left > a.logo-icon {
|
||||||
|
flex: 0 0 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body div.top-bar-left > nav,
|
||||||
|
body div.top-bar-left > nav > ul,
|
||||||
|
body div.top-bar-right,
|
||||||
|
body div.top-bar-right nav,
|
||||||
|
body div.top-bar-right nav ul {
|
||||||
|
display: contents !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body div.top-bar-left nav ul li a,
|
||||||
|
body div.top-bar-right nav ul li a {
|
||||||
|
padding: 5px 5px !important;
|
||||||
|
font-size: 0.82rem !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar-left, .top-bar-mid, .top-bar-right {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
align-items: stretch !important;
|
align-items: stretch !important;
|
||||||
gap: 6px !important;
|
gap: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-bar-left nav ul,
|
.top-bar-left nav ul,
|
||||||
|
|
@ -65,85 +114,76 @@ code {
|
||||||
.top-bar-right nav ul {
|
.top-bar-right nav ul {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-wrap: wrap !important;
|
flex-wrap: wrap !important;
|
||||||
gap: 6px !important;
|
gap: 4px !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
overflow: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar-left nav ul li,
|
|
||||||
.top-bar-mid nav ul li,
|
|
||||||
.top-bar-right nav ul li {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar-left nav ul li a,
|
|
||||||
.top-bar-mid nav ul li a,
|
|
||||||
.top-bar-right nav ul li a {
|
|
||||||
display: inline-flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
padding: 6px 8px !important;
|
|
||||||
font-size: 0.9rem !important;
|
|
||||||
white-space: nowrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input,
|
|
||||||
.feed-search-input,
|
|
||||||
.activity-search-input {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
height: 40px !important;
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
gap: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-left,
|
|
||||||
.sidebar-right,
|
|
||||||
.main-column {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
border-left: none !important;
|
|
||||||
border-right: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-left {
|
|
||||||
order: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-column {
|
|
||||||
order: 3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-right {
|
|
||||||
order: 2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-left nav ul,
|
|
||||||
.sidebar-right nav ul {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.oasis-nav-header {
|
|
||||||
font-size: 0.85rem !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.oasis-nav-header { font-size: 0.85rem !important; }
|
||||||
.oasis-nav-list li a {
|
.oasis-nav-list li a {
|
||||||
font-size: 0.9rem !important;
|
font-size: 0.9rem !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- Layout ---- */
|
||||||
|
.main-content {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left, .sidebar-right, .main-column {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left { order: 1 !important; }
|
||||||
|
.main-column { order: 3 !important; }
|
||||||
|
.sidebar-right { order: 2 !important; }
|
||||||
|
|
||||||
|
.sidebar-left nav ul, .sidebar-right nav ul {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Tipografía ---- */
|
||||||
|
h1 { font-size: 1.25em !important; }
|
||||||
|
h2 { font-size: 1.1em !important; }
|
||||||
|
h3 { font-size: 1em !important; }
|
||||||
|
|
||||||
|
.small, .time { font-size: 0.78rem !important; }
|
||||||
|
|
||||||
|
.created-at {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
word-break: break-word !important;
|
||||||
|
overflow-wrap: anywhere !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
font-size: 0.78rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta, .feed-post-meta,
|
||||||
|
.feed-row .small, .feed-row .time, .feed-row .created-at {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
word-break: break-word !important;
|
||||||
|
overflow-wrap: anywhere !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta, .feed-post-meta {
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Botones y touch targets ---- */
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
|
|
@ -155,35 +195,267 @@ input[type="button"],
|
||||||
.leave-btn,
|
.leave-btn,
|
||||||
.buy-btn {
|
.buy-btn {
|
||||||
min-height: 44px !important;
|
min-height: 44px !important;
|
||||||
font-size: 16px !important;
|
font-size: 15px !important;
|
||||||
white-space: normal !important;
|
white-space: normal !important;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feed-row,
|
button:active,
|
||||||
.comment-body-row,
|
input[type="submit"]:active,
|
||||||
table {
|
.filter-btn:active {
|
||||||
|
opacity: 0.75 !important;
|
||||||
|
transform: scale(0.97) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Inputs ---- */
|
||||||
|
textarea, input, select {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
font-size: 16px !important; /* evita zoom automático en iOS */
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input, .feed-search-input, .activity-search-input {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
height: 44px !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Filtros: scroll horizontal en vez de columna vertical ---- */
|
||||||
|
.mode-buttons,
|
||||||
|
.mode-buttons-cols,
|
||||||
|
.mode-buttons-row,
|
||||||
|
.filter-group,
|
||||||
|
.filters,
|
||||||
|
.inhabitant-action,
|
||||||
|
.tribe-mode-buttons {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: row !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
-webkit-overflow-scrolling: touch !important;
|
||||||
|
gap: 6px !important;
|
||||||
|
padding-bottom: 4px !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-buttons::-webkit-scrollbar,
|
||||||
|
.mode-buttons-cols::-webkit-scrollbar,
|
||||||
|
.mode-buttons-row::-webkit-scrollbar,
|
||||||
|
.filter-group::-webkit-scrollbar,
|
||||||
|
.filters::-webkit-scrollbar,
|
||||||
|
.inhabitant-action::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-buttons form,
|
||||||
|
.mode-buttons-cols form,
|
||||||
|
.mode-buttons-row form,
|
||||||
|
.filter-group form,
|
||||||
|
.filters form {
|
||||||
|
flex-shrink: 0 !important;
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode-buttons .filter-btn,
|
||||||
|
.mode-buttons button,
|
||||||
|
.filter-group .filter-btn {
|
||||||
|
width: auto !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
padding: 8px 14px !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Columnas de filtros del blockexplorer ---- */
|
||||||
|
.filter-column {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: row !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
gap: 6px !important;
|
||||||
|
flex-shrink: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Tablas: scroll horizontal ---- */
|
||||||
|
.feed-row, .comment-body-row, table {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
overflow-x: auto !important;
|
overflow-x: auto !important;
|
||||||
|
-webkit-overflow-scrolling: touch !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea,
|
/* Tabla invite-log: colapsar columnas menos importantes */
|
||||||
input,
|
.invite-log-block table td:nth-child(1),
|
||||||
select {
|
.invite-log-block table th:nth-child(1) {
|
||||||
width: 100% !important;
|
max-width: 80px !important;
|
||||||
max-width: 100% !important;
|
overflow: hidden !important;
|
||||||
font-size: 16px !important;
|
text-overflow: ellipsis !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- Galería ---- */
|
||||||
.gallery {
|
.gallery {
|
||||||
display: grid !important;
|
display: grid !important;
|
||||||
grid-template-columns: 1fr 1fr !important;
|
grid-template-columns: 1fr 1fr !important;
|
||||||
gap: 8px !important;
|
gap: 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer,
|
/* ---- Cards de inhabitants ---- */
|
||||||
.footer {
|
.inhabitant-card {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inhabitant-left {
|
||||||
|
width: 100% !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inhabitant-details { width: 100% !important; }
|
||||||
|
|
||||||
|
.inhabitant-photo,
|
||||||
|
.inhabitant-photo-details {
|
||||||
|
max-width: 160px !important;
|
||||||
|
width: 160px !important;
|
||||||
|
height: 160px !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inhabitants-list, .inhabitants-grid {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* user-link: recortar ID largo ---- */
|
||||||
|
a.user-link {
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
font-size: 0.72em !important;
|
||||||
|
padding: 4px 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- QR: lightbox CSS puro para ampliar ---- */
|
||||||
|
.qr-code-inline,
|
||||||
|
.qr-code-profile {
|
||||||
|
cursor: pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Wrap en ancla para lightbox sin JS */
|
||||||
|
.qr-lightbox-anchor {
|
||||||
|
display: block;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 6px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-lightbox-anchor:target ~ .qr-lightbox-overlay,
|
||||||
|
.qr-lightbox-overlay:target {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-lightbox-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0,0,0,0.88);
|
||||||
|
z-index: 9999;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-lightbox-overlay svg {
|
||||||
|
max-width: min(85vw, 85vh) !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code svg {
|
||||||
|
max-width: 180px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
margin: 6px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code-inline svg { max-width: 120px; }
|
||||||
|
.qr-code-profile svg { max-width: 150px; }
|
||||||
|
|
||||||
|
/* ---- Tribes ---- */
|
||||||
|
.tribe-card {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tribe-grid, .tribes-list, .tribes-grid {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tribe-card-image, .tribe-card-hero-image {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
height: 160px !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tribe-section-nav {
|
||||||
|
overflow-x: auto !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.tribe-section-nav::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
.tribe-section-btn {
|
||||||
|
font-size: 11px !important;
|
||||||
|
padding: 6px 10px !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tribe-details { flex-direction: column !important; }
|
||||||
|
.tribe-side, .tribe-main { width: 100% !important; }
|
||||||
|
.tribe-content-grid { grid-template-columns: 1fr !important; }
|
||||||
|
.tribe-inhabitants-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||||||
|
.tribe-media-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||||||
|
.tribe-overview-grid { grid-template-columns: 1fr !important; }
|
||||||
|
.tribe-content-header { flex-direction: column !important; gap: 8px !important; }
|
||||||
|
.tribe-content-filters, .tribe-media-filters { flex-wrap: wrap !important; }
|
||||||
|
.tribe-votation-option { flex-direction: column !important; align-items: flex-start !important; }
|
||||||
|
|
||||||
|
/* ---- Forum ---- */
|
||||||
|
.forum-card { flex-direction: column !important; }
|
||||||
|
.forum-score-col, .forum-main-col, .root-vote-col { width: 100% !important; }
|
||||||
|
.forum-header-row { flex-direction: column !important; gap: 4px !important; }
|
||||||
|
.forum-meta { flex-wrap: wrap !important; gap: 8px !important; }
|
||||||
|
.forum-thread-header { flex-direction: column !important; }
|
||||||
|
.forum-comment { margin-left: 0 !important; padding-left: 8px !important; }
|
||||||
|
.comment-body-row { flex-direction: column !important; }
|
||||||
|
.comment-vote-col, .comment-text-col { width: 100% !important; }
|
||||||
|
.forum-score-box, .forum-score-form { flex-direction: row !important; justify-content: center !important; }
|
||||||
|
.new-message-form textarea, .comment-textarea { width: 100% !important; }
|
||||||
|
|
||||||
|
/* ---- Footer ---- */
|
||||||
|
footer, .footer {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
|
|
@ -197,302 +469,11 @@ footer div {
|
||||||
gap: 8px !important;
|
gap: 8px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 { font-size: 1.35em !important; }
|
/* ---- Overrides de grid inline ---- */
|
||||||
h2 { font-size: 1.2em !important; }
|
[style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
|
||||||
h3 { font-size: 1em !important; }
|
[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
|
||||||
|
[style*="grid-template-columns:repeat(6"] { grid-template-columns: 1fr !important; }
|
||||||
.small,
|
[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
|
||||||
.time {
|
[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
|
||||||
font-size: 0.8rem !important;
|
[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }
|
||||||
}
|
[style*="width:50%"] { width: 100% !important; }
|
||||||
|
|
||||||
.created-at {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
white-space: normal !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
line-height: 1.5 !important;
|
|
||||||
font-size: 0.8rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content .created-at {
|
|
||||||
display: block !important;
|
|
||||||
flex: 1 1 100% !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-meta,
|
|
||||||
.feed-post-meta,
|
|
||||||
.feed-row .small,
|
|
||||||
.feed-row .time,
|
|
||||||
.feed-row .created-at {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
white-space: normal !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
line-height: 1.4 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-meta,
|
|
||||||
.feed-post-meta {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons-cols {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons-row {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons .column,
|
|
||||||
.mode-buttons > div {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons form {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons .filter-btn,
|
|
||||||
.mode-buttons button {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group form {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-card {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-left {
|
|
||||||
width: 100% !important;
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-details {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-photo,
|
|
||||||
.inhabitant-photo-details {
|
|
||||||
max-width: 200px !important;
|
|
||||||
margin: 0 auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitants-list,
|
|
||||||
.inhabitants-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-card {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 10px !important;
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribes-list,
|
|
||||||
.tribes-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-card-image {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-section-nav {
|
|
||||||
overflow-x: auto !important;
|
|
||||||
flex-wrap: nowrap !important;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-section-group {
|
|
||||||
flex-shrink: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-section-btn {
|
|
||||||
font-size: 11px !important;
|
|
||||||
padding: 4px 8px !important;
|
|
||||||
white-space: nowrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-details {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-side {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-main {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-content-grid {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-inhabitants-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-media-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-overview-grid {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-mode-buttons {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-card-hero-image {
|
|
||||||
height: 180px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-votation-option {
|
|
||||||
flex-direction: column !important;
|
|
||||||
align-items: flex-start !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-content-header {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-content-filters {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-media-filters {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-card {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-score-col,
|
|
||||||
.forum-main-col,
|
|
||||||
.root-vote-col {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-header-row {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-meta {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-thread-header {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-comment {
|
|
||||||
margin-left: 0 !important;
|
|
||||||
padding-left: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-body-row {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-vote-col,
|
|
||||||
.comment-text-col {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-score-box,
|
|
||||||
.forum-score-form {
|
|
||||||
flex-direction: row !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-message-form textarea,
|
|
||||||
.comment-textarea {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns: repeat(6"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns: repeat(3"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns:repeat(6"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns:repeat(3"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns: repeat(auto-fit"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns:repeat(auto-fit"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="width:50%"] {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -4211,3 +4211,100 @@ form {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
word-break: break-all;
|
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;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-id-label {
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
word-break: break-all;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,11 @@ button:hover, input[type="submit"]:hover, input[type="button"]:hover {
|
||||||
border-color: #666;
|
border-color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:active, input[type="submit"]:active, input[type="button"]:active {
|
||||||
|
background-color: #555;
|
||||||
|
transform: scale(0.97);
|
||||||
|
}
|
||||||
|
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #FFD700;
|
color: #FFD700;
|
||||||
|
|
@ -93,9 +98,12 @@ article, section {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
/* Fondo oscuro solo en contenedores principales, no en TODOS los divs */
|
||||||
|
.block, .post, .card, .tribe-card, .inhabitant-card,
|
||||||
|
.action-container, .feed-card, .block-single,
|
||||||
|
.invite-page, .wallet-section, .pubs-section,
|
||||||
|
.invites-tribes, .snh-invite-box, .invite-log-block {
|
||||||
background-color: #1A1A1A;
|
background-color: #1A1A1A;
|
||||||
border: 1px solid #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div .header-content {
|
div .header-content {
|
||||||
|
|
@ -103,16 +111,17 @@ div .header-content {
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #444;
|
background-color: #555;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background-color: #222;
|
background-color: #1A1A1A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-container {
|
.action-container {
|
||||||
|
|
@ -149,10 +158,11 @@ footer a:hover {
|
||||||
color: #FFD600;
|
color: #FFD600;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
box-shadow: 0 2px 20px 0 #FFD60024;
|
box-shadow: 0 2px 20px 0 #FFD60024;
|
||||||
|
border: 1px solid #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-section {
|
.card-section {
|
||||||
border:none;
|
border: none;
|
||||||
padding: 10px 0 0 16px;
|
padding: 10px 0 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -185,12 +195,10 @@ footer a:hover {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
margin-bottom: 6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 4;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -230,15 +238,19 @@ footer a:hover {
|
||||||
a.user-link {
|
a.user-link {
|
||||||
background-color: #FFA500;
|
background-color: #FFA500;
|
||||||
color: #000;
|
color: #000;
|
||||||
padding: 8px 16px;
|
padding: 4px 8px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
transition: background-color 0.2s, color 0.2s;
|
||||||
font-size: 0.8em;
|
font-size: 0.75em;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.user-link:hover {
|
a.user-link:hover {
|
||||||
|
|
@ -248,6 +260,11 @@ a.user-link:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.user-link:active {
|
||||||
|
background-color: #cc8400;
|
||||||
|
transform: scale(0.97);
|
||||||
|
}
|
||||||
|
|
||||||
a.user-link:focus {
|
a.user-link:focus {
|
||||||
background-color: #007B9F;
|
background-color: #007B9F;
|
||||||
border-color: #007B9F;
|
border-color: #007B9F;
|
||||||
|
|
@ -288,434 +305,6 @@ a.user-link:focus {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
}
|
}
|
||||||
html {
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
*, *::before, *::after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: 15px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
video,
|
|
||||||
canvas,
|
|
||||||
iframe,
|
|
||||||
table {
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre,
|
|
||||||
code {
|
|
||||||
white-space: pre-wrap !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
padding: 4px !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
overflow: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content {
|
|
||||||
display: flex !important;
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
padding: 2px !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
overflow: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar-left,
|
|
||||||
.top-bar-mid,
|
|
||||||
.top-bar-right {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
align-items: stretch !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar-left nav ul,
|
|
||||||
.top-bar-mid nav ul,
|
|
||||||
.top-bar-right nav ul {
|
|
||||||
display: flex !important;
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
overflow: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar-left nav ul li,
|
|
||||||
.top-bar-mid nav ul li,
|
|
||||||
.top-bar-right nav ul li {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar-left nav ul li a,
|
|
||||||
.top-bar-mid nav ul li a,
|
|
||||||
.top-bar-right nav ul li a {
|
|
||||||
display: inline-flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
padding: 6px 8px !important;
|
|
||||||
font-size: 0.9rem !important;
|
|
||||||
white-space: nowrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input,
|
|
||||||
.feed-search-input,
|
|
||||||
.activity-search-input {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
height: 40px !important;
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
gap: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-left,
|
|
||||||
.sidebar-right,
|
|
||||||
.main-column {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
padding: 10px !important;
|
|
||||||
border-left: none !important;
|
|
||||||
border-right: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-left {
|
|
||||||
order: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-column {
|
|
||||||
order: 3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-right {
|
|
||||||
order: 2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-left nav ul,
|
|
||||||
.sidebar-right nav ul {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.oasis-nav-header {
|
|
||||||
font-size: 0.85rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.oasis-nav-list li a {
|
|
||||||
font-size: 0.9rem !important;
|
|
||||||
padding: 8px 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input[type="submit"],
|
|
||||||
input[type="button"],
|
|
||||||
.filter-btn,
|
|
||||||
.create-button,
|
|
||||||
.edit-btn,
|
|
||||||
.delete-btn,
|
|
||||||
.join-btn,
|
|
||||||
.leave-btn,
|
|
||||||
.buy-btn {
|
|
||||||
min-height: 44px !important;
|
|
||||||
font-size: 16px !important;
|
|
||||||
white-space: normal !important;
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-row,
|
|
||||||
.comment-body-row,
|
|
||||||
table {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
overflow-x: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea,
|
|
||||||
input,
|
|
||||||
select {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery {
|
|
||||||
display: grid !important;
|
|
||||||
grid-template-columns: 1fr 1fr !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer,
|
|
||||||
.footer {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
padding: 12px !important;
|
|
||||||
overflow-x: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer div {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 { font-size: 1.35em !important; }
|
|
||||||
h2 { font-size: 1.2em !important; }
|
|
||||||
h3 { font-size: 1em !important; }
|
|
||||||
|
|
||||||
.small,
|
|
||||||
.time {
|
|
||||||
font-size: 0.8rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.created-at {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
white-space: normal !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
line-height: 1.5 !important;
|
|
||||||
font-size: 0.8rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content .created-at {
|
|
||||||
display: block !important;
|
|
||||||
flex: 1 1 100% !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-meta,
|
|
||||||
.feed-post-meta,
|
|
||||||
.feed-row .small,
|
|
||||||
.feed-row .time,
|
|
||||||
.feed-row .created-at {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
white-space: normal !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
line-height: 1.4 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-meta,
|
|
||||||
.feed-post-meta {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons-cols {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons-row {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons .column,
|
|
||||||
.mode-buttons > div {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons form {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-buttons .filter-btn,
|
|
||||||
.mode-buttons button {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
gap: 6px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group form {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-card {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-left {
|
|
||||||
width: 100% !important;
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-details {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitant-photo,
|
|
||||||
.inhabitant-photo-details {
|
|
||||||
max-width: 200px !important;
|
|
||||||
margin: 0 auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inhabitants-list,
|
|
||||||
.inhabitants-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-card {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 10px !important;
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribes-list,
|
|
||||||
.tribes-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribe-card-image {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-card {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-score-col,
|
|
||||||
.forum-main-col,
|
|
||||||
.root-vote-col {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-header-row {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-meta {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-thread-header {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-comment {
|
|
||||||
margin-left: 0 !important;
|
|
||||||
padding-left: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-body-row {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-vote-col,
|
|
||||||
.comment-text-col {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forum-score-box,
|
|
||||||
.forum-score-form {
|
|
||||||
flex-direction: row !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-message-form textarea,
|
|
||||||
.comment-textarea {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns: repeat(6"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns: repeat(3"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns:repeat(6"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns:repeat(3"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns: repeat(auto-fit"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="grid-template-columns:repeat(auto-fit"] {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[style*="width:50%"] {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.update-banner {
|
.update-banner {
|
||||||
background-color: #1a1400;
|
background-color: #1a1400;
|
||||||
|
|
@ -732,34 +321,11 @@ h3 { font-size: 1em !important; }
|
||||||
word-break: break-all !important;
|
word-break: break-all !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body div.header {
|
/* QR code tema oscuro */
|
||||||
flex-direction: row !important;
|
.qr-code svg rect {
|
||||||
flex-wrap: wrap !important;
|
fill: #1A1A1A;
|
||||||
gap: 2px !important;
|
|
||||||
align-items: center !important;
|
|
||||||
padding: 4px 2px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body div.top-bar-left {
|
.qr-code svg path {
|
||||||
display: contents !important;
|
fill: #FFD700;
|
||||||
}
|
|
||||||
|
|
||||||
body div.top-bar-left > a.logo-icon {
|
|
||||||
flex: 0 0 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body div.top-bar-left > nav,
|
|
||||||
body div.top-bar-left > nav > ul,
|
|
||||||
body div.top-bar-right,
|
|
||||||
body div.top-bar-right nav,
|
|
||||||
body div.top-bar-right nav ul {
|
|
||||||
display: contents !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body div.top-bar-left nav ul li a,
|
|
||||||
body div.top-bar-right nav ul li a {
|
|
||||||
padding: 5px 5px !important;
|
|
||||||
font-size: 0.82rem !important;
|
|
||||||
min-height: auto !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -686,10 +686,7 @@ const template = (titlePrefix, ...elements) => {
|
||||||
meta({ name: "description", content: i18n.oasisDescription }),
|
meta({ name: "description", content: i18n.oasisDescription }),
|
||||||
meta({
|
meta({
|
||||||
name: "viewport",
|
name: "viewport",
|
||||||
content: toAttributes({
|
content: "width=device-width, initial-scale=1, viewport-fit=cover"
|
||||||
width: "device-width",
|
|
||||||
"initial-scale": 1
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
body(
|
body(
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue