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 {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -9,34 +14,57 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
overflow-x: hidden;
|
||||
max-width: 100vw;
|
||||
/* Safe area para notch/home indicator */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
img,
|
||||
video,
|
||||
canvas,
|
||||
iframe,
|
||||
table {
|
||||
/* ---- Safe area en header y footer ---- */
|
||||
.header {
|
||||
padding-top: env(safe-area-inset-top) !important;
|
||||
padding-left: env(safe-area-inset-left) !important;
|
||||
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;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
pre, code {
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-word !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 {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 4px !important;
|
||||
gap: 4px !important;
|
||||
overflow: visible !important;
|
||||
padding: 4px 2px !important;
|
||||
gap: 2px !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
|
|
@ -46,18 +74,39 @@ code {
|
|||
max-width: 100% !important;
|
||||
padding: 2px !important;
|
||||
gap: 4px !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.top-bar-left,
|
||||
.top-bar-mid,
|
||||
.top-bar-right {
|
||||
body div.top-bar-left {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
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;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
align-items: stretch !important;
|
||||
gap: 6px !important;
|
||||
gap: 4px !important;
|
||||
}
|
||||
|
||||
.top-bar-left nav ul,
|
||||
|
|
@ -65,85 +114,76 @@ code {
|
|||
.top-bar-right nav ul {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 6px !important;
|
||||
gap: 4px !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-header { font-size: 0.85rem !important; }
|
||||
.oasis-nav-list li a {
|
||||
font-size: 0.9rem !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,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
|
|
@ -155,35 +195,267 @@ input[type="button"],
|
|||
.leave-btn,
|
||||
.buy-btn {
|
||||
min-height: 44px !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 15px !important;
|
||||
white-space: normal !important;
|
||||
text-align: center !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.feed-row,
|
||||
.comment-body-row,
|
||||
table {
|
||||
button:active,
|
||||
input[type="submit"]:active,
|
||||
.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;
|
||||
width: 100% !important;
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
font-size: 16px !important;
|
||||
/* Tabla invite-log: colapsar columnas menos importantes */
|
||||
.invite-log-block table td:nth-child(1),
|
||||
.invite-log-block table th:nth-child(1) {
|
||||
max-width: 80px !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
/* ---- Galería ---- */
|
||||
.gallery {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
footer,
|
||||
.footer {
|
||||
/* ---- Cards de inhabitants ---- */
|
||||
.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;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
|
@ -197,302 +469,11 @@ footer div {
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
/* ---- Overrides de grid inline ---- */
|
||||
[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;
|
||||
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;
|
||||
}
|
||||
|
||||
button:active, input[type="submit"]:active, input[type="button"]:active {
|
||||
background-color: #555;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
background-color: #333;
|
||||
color: #FFD700;
|
||||
|
|
@ -93,9 +98,12 @@ article, section {
|
|||
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;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
div .header-content {
|
||||
|
|
@ -103,16 +111,17 @@ div .header-content {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #444;
|
||||
background-color: #555;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #222;
|
||||
background-color: #1A1A1A;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
|
|
@ -149,6 +158,7 @@ footer a:hover {
|
|||
color: #FFD600;
|
||||
font-family: inherit;
|
||||
box-shadow: 0 2px 20px 0 #FFD60024;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
|
|
@ -185,12 +195,10 @@ footer a:hover {
|
|||
background: none;
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
margin-bottom: 6;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-top: 0;
|
||||
margin-bottom: 4;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -230,15 +238,19 @@ footer a:hover {
|
|||
a.user-link {
|
||||
background-color: #FFA500;
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||
font-size: 0.8em;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
font-size: 0.75em;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.user-link:hover {
|
||||
|
|
@ -248,6 +260,11 @@ a.user-link:hover {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.user-link:active {
|
||||
background-color: #cc8400;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
a.user-link:focus {
|
||||
background-color: #007B9F;
|
||||
border-color: #007B9F;
|
||||
|
|
@ -288,434 +305,6 @@ a.user-link:focus {
|
|||
display: inline-block;
|
||||
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 {
|
||||
background-color: #1a1400;
|
||||
|
|
@ -732,34 +321,11 @@ h3 { font-size: 1em !important; }
|
|||
word-break: break-all !important;
|
||||
}
|
||||
|
||||
body div.header {
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 2px !important;
|
||||
align-items: center !important;
|
||||
padding: 4px 2px !important;
|
||||
/* QR code tema oscuro */
|
||||
.qr-code svg rect {
|
||||
fill: #1A1A1A;
|
||||
}
|
||||
|
||||
body div.top-bar-left {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
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;
|
||||
.qr-code svg path {
|
||||
fill: #FFD700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -686,10 +686,7 @@ const template = (titlePrefix, ...elements) => {
|
|||
meta({ name: "description", content: i18n.oasisDescription }),
|
||||
meta({
|
||||
name: "viewport",
|
||||
content: toAttributes({
|
||||
width: "device-width",
|
||||
"initial-scale": 1
|
||||
})
|
||||
content: "width=device-width, initial-scale=1, viewport-fit=cover"
|
||||
})
|
||||
),
|
||||
body(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue