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

colores de serie como la APK oficial y filas en rejilla en vez de deslizar

Browse source 
- Estandar calca los colores de la oficial, medidos con el inspector en su
  1.3.5: fondo #121212, texto #ffd700, titulos y etiquetas #ffa300, tarjeta
  #1e1e1e sin borde con raya naranja a la izquierda, campos #2a2a2a, barra de
  abajo #161616 y aviso #1a1400. Variables nuevas en el tema (--a26-card,
  --a26-title, --a26-field, --a26-bar...) con lo de antes como reserva, asi que
  las otras paletas no cambian. Los botones siguen siendo los nuestros.
- Las tiras de fichas de la cabecera del dev, las pestañas de tribu y las
  etiquetas de las tarjetas van en rejilla de tres columnas o a la linea
  siguiente: nada de deslizar de lado.
- Rejillas de tarjetas del dev sin relleno propio.
This commit is contained in:
hacklab 2026-10-22 12:36:06 +02:00
parent 83f26ba19e
commit 6990ee5675
4 changed files with 71 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/client/assets/styles/activista.css
View file

@ -75,9 +75,9 @@ body { background: var(--a26-bg) !important; }
/* ---------- barra de abajo ---------- */
.oasis-bottombar {
background: var(--a26-bg) !important;
background: var(--a26-bar, var(--a26-bg)) !important;
border: 0 !important;
border-top: var(--a26-bd) !important;
border-top: var(--a26-bar-bd, var(--a26-bd)) !important;
box-shadow: none !important;
}
.oasis-bottombar { padding: 6px 4px calc(6px + var(--inset-bottom)) !important; gap: 2px !important; }
@ -308,8 +308,9 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important
border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important;
}
.main-column [class$="-card"], .main-column [class*="-card "] {
border: var(--a26-bd) !important; border-radius: var(--a26-radius) !important;
background: var(--a26-bg) !important; padding: 12px !important; margin: 0 0 14px !important;
border: var(--a26-card-bd, var(--a26-bd)) !important; border-radius: var(--a26-radius) !important;
box-shadow: var(--a26-card-shadow, none) !important;
background: var(--a26-card, var(--a26-bg)) !important; padding: 12px !important; margin: 0 0 14px !important;
}
.main-column .card-header { padding: 0 0 8px !important; border-bottom: var(--a26-bd-fino) !important; margin-bottom: 8px !important; }
.main-column [class$="-card"] .card-footer { border-top: var(--a26-bd-fino) !important; padding-top: 8px !important; margin-top: 8px !important; }

47
src/client/assets/styles/mobile_ux.css
View file

@ -341,17 +341,18 @@ body .main-content > .main-column { padding-left: 0 !important; padding-right: 0
/* ---------- secciones de una tribu: tira de fichas deslizable + "Mas" ---------- */
.main-column .tribe-tabs { margin: 4px 0 12px !important; }
/* en rejilla de tres columnas (antes una fila que habia que deslizar); el resto en "Mas" */
.tribe-tabs-strip {
display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
margin: 0; padding: 4px 0 8px; scroll-snap-type: x proximity;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px;
margin: 0; padding: 4px 0 8px;
}
.tribe-tabs-strip::-webkit-scrollbar { display: none; }
.main-column a.tribe-tab, .tribe-tabs-more > summary {
flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; text-align: center; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; padding: 4px 14px; border: 1px solid var(--ux-line) !important; border-radius: 20px !important;
background: var(--ux-bg) !important; color: var(--ux-fg) !important; text-decoration: none !important;
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 14px !important; white-space: nowrap;
text-transform: none; letter-spacing: .02em;
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 14px !important; white-space: normal;
text-transform: none; letter-spacing: .02em; min-height: 44px; border-radius: 12px !important;
}
.main-column a.tribe-tab.is-current { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
.tribe-tabs-more > summary { list-style: none; cursor: pointer; margin-top: 2px; }
@ -832,10 +833,21 @@ body .oasis-mobile-topbar .omt-logo img, body .oasis-mobile-topbar .omt-avatar i
.main-column > div.apk-banners > * { margin: 0 0 10px !important; }
.main-column > div.apk-modbar { display: block !important; position: static !important; margin: 0 0 12px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.main-column div.apk-modbar > div.apk-modbar-row { display: flex !important; align-items: center; justify-content: space-between; margin: 0 0 10px !important; padding: 0 !important; }
.main-column div.apk-modbar .apk-title { margin: 0 !important; padding: 0 !important; color: var(--ux-fg) !important; }
.main-column div.apk-modbar .apk-title { margin: 0 !important; padding: 0 !important; color: var(--a26-title, var(--ux-fg)) !important; }
.main-column div.apk-modbar .apk-pin { margin: 0 0 0 10px !important; width: auto !important; flex: 0 0 auto; }
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; margin: 0 0 10px !important; padding: 0 0 4px !important; }
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > * { flex: 0 0 auto !important; width: auto !important; margin: 0 8px 0 0 !important; white-space: nowrap !important; }
/* las fichas de la cabecera en rejilla de tres columnas, sin deslizar de lado */
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) {
display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px;
overflow: visible !important; margin: 0 0 10px !important; padding: 0 !important; white-space: normal !important;
}
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > *,
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form > button {
display: flex !important; align-items: center; justify-content: center; text-align: center;
width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 4px 6px !important;
font-size: 14px !important; line-height: 1.15 !important; white-space: normal !important; overflow-wrap: anywhere;
}
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form { padding: 0 !important; border: 0 !important; background: transparent !important; }
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form > button { width: 100% !important; }
.main-column div.apk-modbar > form.filter-box { margin: 0 0 8px !important; }
.main-column div.apk-modbar > div.apk-modbar-foot { margin: 0 !important; padding: 0 !important; }
.main-column div.apk-modbar div.module-stats-line { margin: 0 !important; padding: 0 !important; font-size: 13px; color: var(--ux-muted) !important; }
@ -856,3 +868,22 @@ body .oasis-mobile-topbar .omt-logo img, body .oasis-mobile-topbar .omt-avatar i
/* el menu desplegado con los colores del skin y filas de 48px */
.main-column details.card-menu > div.card-menu-items { background: var(--ux-bg) !important; border: 1px solid var(--ux-line) !important; color: var(--ux-fg) !important; min-width: 220px; }
.main-column div.card-menu-items > * { min-height: 48px; }
/* etiquetas de la tarjeta (PUBLICO, Abierto, Asisto...): a la linea siguiente, no cortadas */
.main-column div.card-chips-row { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; max-width: 100% !important; }
.main-column div.card-chips-row > * { margin: 0 6px 6px 0 !important; }
/* algunas tiras son un solo formulario con todos los botones (Eventos): la rejilla va dentro */
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child {
grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px;
min-height: 0 !important; padding: 0 !important;
}
.main-column div.apk-modbar > .apk-strip:not(.mobile-filter) > form:only-child > button { min-height: 44px !important; margin: 0 !important; }
/* las rejillas de tarjetas del dev (jobs-grid, events...) sin relleno propio: la tarjeta
ocupa el ancho como en Actividad */
.main-column > section > div[class$="-grid"] { padding: 0 !important; margin: 0 !important; }
/* campos de texto con el fondo de campo de la paleta (en Estandar, el #2a2a2a del dev) */
.main-column input[type="text"], .main-column input[type="search"], .main-column input[type="url"], .main-column input[type="number"],
.main-column input[type="datetime-local"], .main-column input[type="date"], .main-column textarea, .main-column select {
background-color: var(--a26-field, var(--a26-bg)) !important;
}

8
src/client/assets/themes/Activista.css
View file

@ -58,7 +58,7 @@ h1, h2, h3, .card-label, .tags-header h2, .oasis-nav-header {
text-transform: none !important;
letter-spacing: 0;
line-height: 1.2 !important;
color: var(--a26-fg) !important;
color: var(--a26-title, var(--a26-fg)) !important;
}
h1 { font-size: 26px !important; }
h2 { font-size: 22px !important; }
@ -80,10 +80,10 @@ h3 { font-size: 18px !important; }
/* --- tarjetas: borde fino, sin sombra --- */
.main-column article, .main-column [class$="-card"], .main-column [class*="-card "],
.main-column .card, .forum-comment, .feed-row {
background: var(--a26-bg) !important;
border: 1px solid var(--a26-line) !important;
background: var(--a26-card, var(--a26-bg)) !important;
border: var(--a26-card-bd, 1px solid var(--a26-line)) !important;
border-radius: var(--a26-radius) !important;
box-shadow: none !important;
box-shadow: var(--a26-card-shadow, none) !important;
}
.main-column > section { border: 0 !important; padding: 0 !important; }

32
src/views/mobile_settings.js
View file

@ -23,10 +23,18 @@ const cfgNow = () => { try { return require("../configs/config-manager.js").getC
// ---------- colores ----------
// [clave, fondo, texto, acento]; la primera es la de serie y son los colores del dev
// (negro y oro de su tema OasisMobile). Los nombres, en i18n_fork (palette_<clave>)
// [clave, fondo, texto, acento, extras]; la primera es la de serie y calca la APK
// oficial del dev, medida con el inspector en su 1.3.5 (fondo #121212, texto oro
// #ffd700, titulos, etiquetas y resalte naranja #ffa300 con texto #111, tarjetas #1e1e1e
// sin borde y con raya naranja a la izquierda, bordes de boton #555, campos #2a2a2a), para
// que al abrir no parezca otra app. Los extras pisan lo que si no se calcula.
// Los nombres, en i18n_fork (palette_<clave>)
const PALETTES = [
["oasis", "#121212", "#f2f2f2", "#ffd700"],
["oasis", "#121212", "#ffd700", "#ffa300", {
onAccent: "#111111", card: "#1e1e1e", title: "#ffa300", line: "#2a2a2a", edge: "#555555",
muted: "#ffd700", soft: "#2a2a2a", tint: "#1a1400", field: "#2a2a2a",
bar: "#161616", barBorder: "1px solid #2a2a2a",
cardBorder: "0", cardShadow: "inset 3px 0 0 0 #ffa300" }],
["acampada", "#ffffff", "#000000", "#00e5ff"],
["noche", "#101114", "#f2f2f2", "#00e5ff"],
["bosque", "#f3f7ef", "#13231a", "#3ccf7e"],
@ -85,14 +93,20 @@ const PREVIEW_CSS = PALETTES.map(([k, bg, fg, ac]) =>
const colorsCss = (cfg) => {
const c = colorState(cfg);
// sin nada guardado tambien: la de serie son los colores del dev, no los de Activista.css
const extra = ((c.preset !== "custom" && PALETTES.find(x => x[0] === c.preset)) || [])[4] || {};
const vars = [
`--a26-bg:${c.bg}`, `--a26-fg:${c.fg}`, `--a26-neon:${c.accent}`,
`--a26-on-neon:${readableOn(c.accent)}`,
`--a26-soft:${mix(c.bg, c.fg, 0.06)}`,
`--a26-muted:${mix(c.fg, c.bg, 0.35)}`,
`--a26-tint:${mix(c.bg, c.accent, 0.2)}`,
`--a26-line:${mix(c.bg, c.fg, 0.18)}`,
`--a26-edge:${mix(c.bg, c.fg, 0.5)}`,
`--a26-card:${extra.card || c.bg}`, `--a26-title:${extra.title || c.fg}`,
`--a26-on-neon:${extra.onAccent || readableOn(c.accent)}`,
`--a26-soft:${extra.soft || mix(c.bg, c.fg, 0.06)}`,
`--a26-muted:${extra.muted || mix(c.fg, c.bg, 0.35)}`,
`--a26-tint:${extra.tint || mix(c.bg, c.accent, 0.2)}`,
`--a26-line:${extra.line || mix(c.bg, c.fg, 0.18)}`,
`--a26-edge:${extra.edge || mix(c.bg, c.fg, 0.5)}`,
`--a26-card-bd:${extra.cardBorder || "var(--a26-bd)"}`,
`--a26-card-shadow:${extra.cardShadow || "none"}`,
`--a26-field:${extra.field || c.bg}`, `--a26-bar:${extra.bar || c.bg}`,
`--a26-bar-bd:${extra.barBorder || "var(--a26-bd)"}`,
// rojo de texto (borrar): el de serie si se lee sobre el fondo; si no, uno claro
`--a26-danger-text:${contrast(c.bg, "#c4003b") >= 4.5 ? "#c4003b" : "#ff6b86"}`,
`color-scheme:${lum(c.bg) < 0.2 ? "dark" : "light"}`