hacklab/OASIS_MOBILE
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

interfaz: filtros en fichas y tarjetas sin cajas de mas

Browse source 
- Los filtros de chats, feed, foros, pads... heredaban el estilo de boton
  grande (48px, ancho completo): en el foro las categorias llenaban la
  pantalla. Ahora van en fila como los de Actividad; Crear sigue grande.
- La regla de tarjetas ([class*=-card]) pillaba tambien -card-header y
  -card-hero-image, que salian como cajas con fondo y borde. Se limita a
  las clases acabadas en -card.
- Acciones de la tarjeta (borrar, fijar, enlace, abrir) en una sola fila
  de iconos redondos; '.main-column form' las ponia a ancho completo.
- Se ocultan las cajas de filtros vacias del foro.
This commit is contained in:
oasis-bot 2026-10-19 00:44:06 +02:00
parent 948b6460d9
commit 5f5c1d6d0a
1 changed files with 83 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/client/assets/themes/OasisMobile.css
View file

@ -180,15 +180,17 @@ body { padding-top: 74px; background: #121212; }
color: var(--c-muted); font-size: var(--fs-caption);
}
/* solo las tarjetas (clase acabada en -card), no sus piezas: -card-header,
-card-hero-image... heredaban fondo, borde y relleno y salian como cajas */
.main-column article,
.main-column [class*="-card"] {
.main-column :is([class$="-card"], [class*="-card "]) {
background: #1c1c1c;
border: 1px solid #333;
border-radius: var(--radius-md);
padding: var(--space-3);
}
.main-column article:active,
.main-column [class*="-card"]:active { background: #202020; }
.main-column :is([class$="-card"], [class*="-card "]):active { background: #202020; }
.btn, button, input[type="submit"], input[type="button"], .submit-button,
.filter-btn, .create-button, .edit-btn, .delete-btn, .join-btn, .leave-btn, .buy-btn {
@ -1177,3 +1179,82 @@ body:has(.oasis-nav-side-toggle) { padding-top: 84px !important; }
}
.main-column .video-grid-solo .video-tile { width: 100% !important; }
.main-column .inhabitants-grid .inhabitant-card { padding-bottom: 12px !important; }
/* ==========================================================================
Filtros como fichas. Las reglas de botones grandes (48px, ancho completo)
tambien pillaban a los filtros de chats, feed, foros, pads...: en el foro
las 20 categorias llenaban la pantalla y el contenido quedaba debajo.
Ahora van en fila como los de Actividad; "Crear ..." sigue grande, aparte.
========================================================================== */
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 12px !important;
}
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) > form {
display: block !important;
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) .filter-btn:not(.create-button) {
min-height: 0 !important;
width: auto !important;
padding: 6px 12px !important;
font-size: 12px !important;
line-height: 1.3 !important;
letter-spacing: .3px !important;
border-radius: 16px !important;
border: 1px solid #555 !important;
background: transparent !important;
color: #ddd !important;
box-shadow: none !important;
white-space: nowrap !important;
}
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) .filter-btn.active:not(.create-button) {
background: #FFD700 !important;
border-color: #FFD700 !important;
color: #121212 !important;
}
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) > form:has(.create-button) {
flex: 1 1 100% !important;
margin-top: 6px !important;
}
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) .create-button {
width: 100% !important;
min-height: 44px !important;
}
/* fichas de filtro vacias (el foro solo pinta las categorias con hilos) */
.main-column .filter-group:empty { display: none !important; }
/* acciones de la tarjeta (borrar, fijar, enlace, abrir): una fila a la derecha.
".main-column form" las ponia a ancho completo y partia la fila en dos */
.main-column .content-actions {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
margin-left: auto !important;
}
.main-column .content-actions > form {
display: inline-flex !important;
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
.main-column .content-actions .btn-singleview {
min-height: 0 !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}