diff --git a/src/client/assets/themes/OasisMobile.css b/src/client/assets/themes/OasisMobile.css index 7726265..b412861 100644 --- a/src/client/assets/themes/OasisMobile.css +++ b/src/client/assets/themes/OasisMobile.css @@ -1,1005 +1,787 @@ -body { - background-color: #121212; - color: #FFD700; -} +html { overflow-x: clip; overflow-y: visible; height: auto; } +body { overflow-x: clip; overflow-y: visible; } -header, footer { - background-color: #1F1F1F; -} -.sidebar-left, .sidebar-right { - background-color: #1A1A1A; - border: 1px solid #333; +.oasis-bottombar { + display: flex; + position: fixed; + left: 0; right: 0; bottom: 0; + z-index: 1000; + justify-content: space-around; + align-items: center; + gap: 4px; + background: #1F1F1F; + border-top: 1px solid #333; + padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); } - -.main-column { - background-color: #1C1C1C; -} - -button, input[type="submit"], input[type="button"] { - background-color: #444; - color: #FFD700; - border: 1px solid #444; -} - -button:hover, input[type="submit"]:hover, input[type="button"]:hover { - background-color: #333; - border-color: #666; -} - -input, textarea, select { - background-color: #333; - color: #FFD700; - border: 1px solid #555; -} - -a { - color: #FFD700; -} - -a:hover { - color: #FFDD44; -} - -table { - background-color: #222; - color: #FFD700; -} - -table th { - background-color: #333; -} - -table tr:nth-child(even) { - background-color: #2A2A2A; -} - -nav ul li a:hover { - color: #FFDD44; - text-decoration: underline; -} - -.profile { - background-color: #222; - padding: 15px; - border-radius: 8px; -} - -.profile .name { - color: #FFD700; -} - -.avatar { - border: 3px solid #FFD700; -} - -article, section { - background-color: #1C1C1C; - color: #FFD700; -} - -.article img { - border: 3px solid #FFD700; -} - -.post-preview img { - border: 3px solid #FFD700; -} - -.post-preview .image-container { - max-width: 100%; - overflow: hidden; - display: block; - margin: 0 auto; -} - -div { - background-color: #1A1A1A; - border: 1px solid #333; -} - -div .header-content { - width: 100%; -} - -::-webkit-scrollbar { - width: 10px; -} - -::-webkit-scrollbar-thumb { - background-color: #444; - border-radius: 10px; -} - -::-webkit-scrollbar-track { - background-color: #222; -} - -.action-container { - background-color: #1A1A1A; - border: 1px solid #333; - padding: 10px; - border-radius: 8px; - color: #FFD700; -} - -footer { - background-color: #1F1F1F; - padding: 10px 0; -} - -footer a { - background-color: #444; - color: #FFD700; - text-align: center; - padding: 8px 16px; - border-radius: 5px; +.oasis-bottombar .bb-item { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 3px; + flex: 1 1 0; + min-width: 0; + padding: 2px 0; text-decoration: none; } - -footer a:hover { - background-color: #333; - color: #FFDD44; +.oasis-bottombar .bb-ico { font-size: 18px; line-height: 1; color: #FFA500; } +.oasis-bottombar .bb-lbl { font-size: 9px; color: #ccc; white-space: nowrap; } +.oasis-bottombar .bb-badge { + position: absolute; + top: -4px; + left: calc(50% + 6px); + min-width: 15px; height: 15px; + padding: 0 3px; + border-radius: 8px; + background: #FFA500; + color: #121212; + font-size: 9px; font-weight: bold; + display: flex; align-items: center; justify-content: center; } -.card { - border-radius: 16px; - padding: 0px 24px 10px 24px; - margin-bottom: 16px; - color: #FFD600; - font-family: inherit; - box-shadow: 0 2px 20px 0 #FFD60024; -} +body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } -.card-section { - border:none; - padding: 10px 0 0 16px; -} - -.card-header { +.oasis-mobile-topbar { display: flex; + align-items: center; justify-content: space-between; - align-items: center; - padding-bottom: 0px; - margin-top: 8px; - padding-top: 0px; - border: none; + width: 100%; + padding: 8px 12px; + background: transparent; + box-shadow: none; border: 0; } -.card-label { - color: #ffa300; - font-weight: bold; - letter-spacing: 1.5px; - line-height: 1.2; - margin-bottom: 0; +.oasis-mobile-topbar .omt-logo img, +.oasis-mobile-topbar .omt-avatar img { + width: 32px; height: 32px; + border-radius: 50%; + border: 2px solid #FFA500; + object-fit: cover; display: block; } -.card-footer { - margin-top: 6px; - font-weight: 500; - color: #ff9900; - font-size: 1.07em; - display: flex; - align-items: center; - gap: 8px; - background: none; - border: none; - padding-top: 0; - margin-bottom: 6; -} - -.card-body { - margin-top: 0; - margin-bottom: 4; - padding: 0; -} - -.card-field { - display: flex; - align-items: baseline; - padding: 0; - margin-bottom: 0; - border: none; - background: none; -} - -.card-tags { - margin: 5px 0 3px 0; - display: flex; - flex-wrap: wrap; - gap: 9px; -} - -.card-tags a.tag-link { - text-decoration: none; - color: #181818; - background: #FFD600; - padding: 5px 13px 4px 13px; - border-radius: 7px; - font-size: .98em; - border: none; - font-weight: bold; -} - -.card-tags a.tag-link:hover { - background: #ffe86a; - color: #111; - cursor: pointer; -} - -a.user-link { - background-color: #FFA500; - color: #000; - padding: 8px 16px; - border-radius: 5px; +.oasis-mobile-topbar .omt-title { + flex: 1 1 auto; 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; + font-size: 26px; font-weight: bold; + letter-spacing: 10px; text-indent: 10px; + color: #FFD700; text-decoration: none; + white-space: nowrap; + background: transparent; border: 0; box-shadow: none; padding: 0; } -a.user-link:hover { - background-color: #FFD700; - border-color: #FFD700; - color: #000; - cursor: pointer; +.header .top-bar-left > a.logo-icon { display: none; } + +.oasis-mobile-menus { display: flex; gap: 8px; padding: 0 10px 6px; } +.oasis-mobile-menus .oasis-menu-ico { display: none; } +.oasis-mobile-menus .oasis-menu-btn { + flex: 1 1 0; + display: flex; align-items: center; justify-content: center; + padding: 12px; + border: 1.5px solid #333; border-radius: 10px; + background: #121212; color: #ccc; + font-weight: bold; letter-spacing: 1px; cursor: pointer; } -a.user-link:focus { - background-color: #007B9F; - border-color: #007B9F; - color: #fff; +#nav-left-toggle:checked ~ .header .oasis-menu-btn[for="nav-left-toggle"] { + background: #FFA500; color: #121212; border-color: #FFA500; } -.date-link { - background-color: #444; - color: #FFD600; - padding: 8px 16px; - border-radius: 5px; - margin-left: 8px; +#nav-right-toggle:checked ~ .header .oasis-menu-btn[for="nav-right-toggle"] { + background: #FFD700; color: #121212; border-color: #FFD700; } -.date-link:hover { - background-color: #555; - color: #FFD700; +:root { + --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; + --fs-caption: 12px; --fs-body: 14px; --fs-body-lg: 16px; --fs-title: 20px; + --lh-body: 1.5; --measure: 66ch; + --c-muted: #8c8c8c; --radius-md: 12px; } -.activitySpreadInhabitant2 { - background-color: #007B9F; - color: #fff; - padding: 8px 16px; - border-radius: 5px; - font-weight: bold; - text-decoration: none; - display: inline-block; - border: 2px solid transparent; +.oasis-bottombar .bb-fab .bb-ico { + width: 46px; height: 46px; + margin-top: -22px; + border-radius: 50%; + background: #FFA500; color: #121212; + display: flex; align-items: center; justify-content: center; + font-size: 22px; + box-shadow: 0 2px 8px rgba(0,0,0,.4); } +.oasis-bottombar .bb-fab .bb-lbl { color: #FFA500; font-weight: bold; } -.activityVotePost { - background-color: #557d3b; - color: #fff; - padding: 8px 16px; - border-radius: 5px; - font-weight: bold; - text-decoration: none; - display: inline-block; - border: 2px solid transparent; -} -html { - -webkit-text-size-adjust: 100%; - box-sizing: border-box; - overflow-x: hidden !important; +.main-column, .main-column p, .main-column li, .main-column a, +.main-column span, .main-column td, .main-column h1, .main-column h2, .main-column h3 { + overflow-wrap: anywhere; + word-break: break-word; } +.main-column { padding: var(--space-3); } +.main-column p { line-height: var(--lh-body); } -*, *::before, *::after { - box-sizing: inherit; -} +.main-column > * + * { margin-top: var(--space-3); } -body { - font-size: 15px; - overflow-x: hidden; - max-width: 100vw; +.main-column img, .main-column video, .main-column table, .main-column pre, .main-column iframe { + max-width: 100%; height: auto; } +.main-column pre { white-space: pre-wrap; } -img, -video, -canvas, -iframe, -table { - max-width: 100% !important; +.oasis-nav-group { + list-style: none; + background: #1c1c1c; + border: 1px solid #333; + border-radius: var(--radius-md); + overflow: hidden; + margin-bottom: var(--space-2); } - -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; + display: flex; align-items: center; gap: var(--space-2); + min-height: 48px; padding: 0 var(--space-3); + cursor: pointer; + color: #FFD700; font-weight: bold; + text-transform: uppercase; letter-spacing: .04em; + font-size: var(--fs-caption); } - +.oasis-nav-header .nav-text { flex: 1 1 auto; } +.oasis-nav-header .oasis-nav-arrow { color: var(--c-muted); transition: transform 150ms ease; } +.oasis-nav-toggle:checked + .oasis-nav-header .oasis-nav-arrow { transform: rotate(180deg); } +.oasis-nav-header:active { background: #262626; } +.oasis-nav-list { list-style: none; padding: 0; margin: 0; } .oasis-nav-list li a { - font-size: 0.9rem !important; - padding: 8px 12px !important; + display: flex; align-items: center; gap: var(--space-3); + min-height: 48px; padding: 0 var(--space-3); + color: #e8e8e8; text-decoration: none; + border-top: 1px solid #262626; +} +.oasis-nav-list li a .emoji { flex: 0 0 auto; width: 22px; text-align: center; color: #FFA500; } +.oasis-nav-list li a .nav-text { font-size: var(--fs-body); } +.oasis-nav-list li a:active { background: #262626; } +.oasis-nav-list li a.current { color: #FFA500; font-weight: bold; } + +.main-column h1 { font-size: var(--fs-title); font-weight: 700; line-height: 1.25; margin: 0 0 var(--space-2); } +.main-column h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-2); } +.main-column h3 { font-size: var(--fs-body-lg); font-weight: 600; margin: 0 0 var(--space-1); } +.main-column p { font-size: var(--fs-body-lg); } +.main-column .created-at, .main-column .small, .main-column .time, +.main-column .meta, .main-column .author-meta, .main-column .subtitle { + color: var(--c-muted); font-size: var(--fs-caption); } -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; +.main-column article, +.main-column [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; } + +.btn, button, input[type="submit"], input[type="button"], .submit-button, +.filter-btn, .create-button, .edit-btn, .delete-btn, .join-btn, .leave-btn, .buy-btn { + min-height: 48px; +} +button:active, input[type="submit"]:active, .submit-button:active, +.filter-btn:active, .create-button:active, .edit-btn:active, +.delete-btn:active, .join-btn:active, .leave-btn:active, .buy-btn:active { + filter: brightness(.85); +} +.main-column a:active { opacity: .6; } + +* { -webkit-tap-highlight-color: transparent; } +a, button, label, .tap, .oasis-menu-btn, .bb-item, .oasis-nav-header, .oasis-nav-list li a { + touch-action: manipulation; +} +body { overscroll-behavior: none; } + +.main-content, .main-column, .header, +.sidebar-left, .sidebar-right { overflow: visible; } + +.sidebar-left, .sidebar-right { display: none; } +#nav-left-toggle:checked ~ .main-content .sidebar-left { display: block; } +#nav-right-toggle:checked ~ .main-content .sidebar-right { display: block; } + +.bb-manage { margin: 8px 0 16px; } +.bb-manage h3, .bb-manage-add h3 { + font-size: 13px; text-transform: uppercase; letter-spacing: .05em; + color: #FFA500; margin: 14px 0 8px; +} +.bb-manage-list { display: flex; flex-direction: column; gap: 8px; } +.bb-manage-form { margin: 0; width: 100%; } +.bb-manage-btn { + width: 100%; + display: flex; align-items: center; gap: 12px; + min-height: 52px; padding: 0 14px; + background: #1c1c1c; border: 1px solid #333; border-radius: 10px; + color: #eee; cursor: pointer; text-align: left; +} +.bb-manage-ico { font-size: 20px; color: #FFA500; width: 26px; text-align: center; } +.bb-manage-lbl { flex: 1 1 auto; font-size: 15px; } +.bb-manage-x { font-size: 16px; color: #ff6b6b; font-weight: bold; } +.bb-manage-empty, .bb-manage-full { color: #999; font-size: 14px; padding: 8px 2px; } +.bb-manage-done { + display: block; text-align: center; + margin-top: 16px; min-height: 48px; line-height: 48px; } -.feed-row, -.comment-body-row, -table { - display: block !important; - width: 100% !important; - overflow-x: auto !important; +.hive-nav { --hx: min(64px, calc((100vw - 40px) / 4)); --hxm: min(58px, calc((100vw - 36px) / 5)); margin: 8px 0 16px; overflow: visible; background: transparent; padding: 0; border: 0; box-shadow: none; } +.hive-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } +.hive-grid { display: flex; flex-direction: column; align-items: center; overflow: visible; background: transparent; padding: 0; margin: 0; box-shadow: none; } +.hive-row { display: flex; justify-content: center; gap: 3px; overflow: visible; background: transparent; padding: 0; margin: 0; box-shadow: none; } +.hive-cats .hive-row + .hive-row { margin-top: calc(var(--hx) * -0.30); } +.hex-cat, .hex-mod { + position: relative; + -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; + text-decoration: none; cursor: pointer; box-sizing: border-box; + background: #D9A400; + filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); +} +.hex-cat::before, .hex-mod::before { + content: ''; position: absolute; inset: 1.5px; z-index: 0; + -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + background: #161616; +} +.hex-cat { width: var(--hx); height: calc(var(--hx) * 1.15); } +.hex-mod { width: var(--hxm); height: calc(var(--hxm) * 1.15); } +.hex-cat .hx-ico, .hex-mod .hx-ico { color: #FFA500; line-height: 1; position: relative; z-index: 1; } +.hex-cat .hx-ico { font-size: 17px; } +.hex-mod .hx-ico { font-size: 16px; } +.hex-cat .hx-lbl, .hex-mod .hx-lbl { color: #d8d8d8; text-align: center; line-height: 1; font-weight: bold; overflow: hidden; position: relative; z-index: 1; } +.hex-cat .hx-lbl { font-size: 8px; max-width: 88%; } +.hex-mod .hx-lbl { font-size: 8px; max-width: 92%; } +.hex-cat:active::before, .hex-mod:active::before { background: #242424; } +#hive-personal:checked ~ .hive-grid .hex-cat[for="hive-personal"], +#hive-governance:checked ~ .hive-grid .hex-cat[for="hive-governance"], +#hive-office:checked ~ .hive-grid .hex-cat[for="hive-office"], +#hive-economy:checked ~ .hive-grid .hex-cat[for="hive-economy"], +#hive-tools:checked ~ .hive-grid .hex-cat[for="hive-tools"], +#hive-network:checked ~ .hive-grid .hex-cat[for="hive-network"], +#hive-blogs:checked ~ .hive-grid .hex-cat[for="hive-blogs"], +#hive-creative:checked ~ .hive-grid .hex-cat[for="hive-creative"], +#hive-media:checked ~ .hive-grid .hex-cat[for="hive-media"], +#hive-fediverse:checked ~ .hive-grid .hex-cat[for="hive-fediverse"] { background: #FFA500; } +#hive-personal:checked ~ .hive-grid .hex-cat[for="hive-personal"]::before, +#hive-governance:checked ~ .hive-grid .hex-cat[for="hive-governance"]::before, +#hive-office:checked ~ .hive-grid .hex-cat[for="hive-office"]::before, +#hive-economy:checked ~ .hive-grid .hex-cat[for="hive-economy"]::before, +#hive-tools:checked ~ .hive-grid .hex-cat[for="hive-tools"]::before, +#hive-network:checked ~ .hive-grid .hex-cat[for="hive-network"]::before, +#hive-blogs:checked ~ .hive-grid .hex-cat[for="hive-blogs"]::before, +#hive-creative:checked ~ .hive-grid .hex-cat[for="hive-creative"]::before, +#hive-media:checked ~ .hive-grid .hex-cat[for="hive-media"]::before, +#hive-fediverse:checked ~ .hive-grid .hex-cat[for="hive-fediverse"]::before { background: #FFA500; } +#hive-personal:checked ~ .hive-grid .hex-cat[for="hive-personal"] :is(.hx-ico,.hx-lbl), +#hive-governance:checked ~ .hive-grid .hex-cat[for="hive-governance"] :is(.hx-ico,.hx-lbl), +#hive-office:checked ~ .hive-grid .hex-cat[for="hive-office"] :is(.hx-ico,.hx-lbl), +#hive-economy:checked ~ .hive-grid .hex-cat[for="hive-economy"] :is(.hx-ico,.hx-lbl), +#hive-tools:checked ~ .hive-grid .hex-cat[for="hive-tools"] :is(.hx-ico,.hx-lbl), +#hive-network:checked ~ .hive-grid .hex-cat[for="hive-network"] :is(.hx-ico,.hx-lbl), +#hive-blogs:checked ~ .hive-grid .hex-cat[for="hive-blogs"] :is(.hx-ico,.hx-lbl), +#hive-creative:checked ~ .hive-grid .hex-cat[for="hive-creative"] :is(.hx-ico,.hx-lbl), +#hive-media:checked ~ .hive-grid .hex-cat[for="hive-media"] :is(.hx-ico,.hx-lbl), +#hive-fediverse:checked ~ .hive-grid .hex-cat[for="hive-fediverse"] :is(.hx-ico,.hx-lbl) { color: #121212; } +.hive-panel { display: none; margin: 12px auto 0; max-width: 340px; background: #101010; border: 1px solid #242424; border-radius: 16px; padding: 12px 8px; overflow: visible; box-shadow: none; } +#hive-personal:checked ~ #hive-panel-personal, +#hive-governance:checked ~ #hive-panel-governance, +#hive-office:checked ~ #hive-panel-office, +#hive-economy:checked ~ #hive-panel-economy, +#hive-tools:checked ~ #hive-panel-tools, +#hive-network:checked ~ #hive-panel-network, +#hive-blogs:checked ~ #hive-panel-blogs, +#hive-creative:checked ~ #hive-panel-creative, +#hive-media:checked ~ #hive-panel-media, +#hive-fediverse:checked ~ #hive-panel-fediverse { display: block; } +.hive-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; background: transparent; overflow: visible; } + +.header .top-bar-left nav, +.header .top-bar-right nav { display: none; } + +.oasis-mobile-topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); } + +.oasis-bottombar .bb-pair { + display: flex; align-items: center; + flex: 0 0 auto; + gap: 2px; padding: 3px; + background: #262626; + border: 1px solid #3a3a3a; + border-radius: 999px; +} +.oasis-bottombar .bb-pair .bb-item { flex: 0 0 auto; padding: 2px 8px; } +.oasis-bottombar .bb-pair .bb-lbl { font-size: 8px; } + +.oasis-bottombar a.bb-item.current .bb-ico { + background: #FFA500; color: #121212; + border-radius: 999px; padding: 4px 12px; +} +.oasis-bottombar a.bb-item.current .bb-lbl { color: #FFA500; font-weight: bold; } +.oasis-bottombar a.bb-item.current .bb-badge { background: #121212; color: #FFA500; } + +.main-column, .main-column p, .main-column li, .main-column a, +.main-column span, .main-column td, .main-column th, .main-column label, +.main-column h1, .main-column h2, .main-column h3, .main-column h4, +.main-column strong, .main-column em, .main-column small, +.created-at, .post-meta, .feed-post-meta, +.feed-row .small, .feed-row .time, .feed-row .created-at, +.profile-sensors-box > *, +.card-field .card-value, .card-field .card-label { + overflow-wrap: break-word; + word-break: normal; + -webkit-hyphens: none; + hyphens: none; } -textarea, -input, -select { - width: 100% !important; - max-width: 100% !important; - font-size: 16px !important; +.main-column pre, .main-column code, kbd, samp, +.peer-key, .user-link.peer-key, .oasis-id-copy, .search-oasis-id, +.pm-sent-key-value, .kpi__value, +.block-info-table td .peer-key, .block-info-table td .user-link, +.pm-info-table td .user-link, +.main-column a[href*="ed25519"], .main-column a[href^="ssb:"], +.main-column a[href^="/author/"] { + overflow-wrap: anywhere; + word-break: break-all; } -.gallery { - display: grid !important; - grid-template-columns: 1fr 1fr !important; - gap: 8px !important; +button, input[type="submit"], input[type="button"], +.filter-btn, a.filter-btn, .create-button, .edit-btn, .delete-btn, +.join-btn, .leave-btn, .buy-btn, .submit-button, .btn, +.conn-actions button, .peers-conn-actions button, +.mode-buttons button, .mode-buttons .filter-btn, +.filter-group button, .filter-group .filter-btn, +.main-column button, .main-column input[type="submit"] { + white-space: normal; + word-break: normal; + overflow-wrap: break-word; + -webkit-hyphens: none; + hyphens: none; } -footer, -.footer { - display: block !important; - width: 100% !important; - max-width: 100% !important; - padding: 12px !important; - overflow-x: auto !important; +.conn-actions, .peers-conn-actions { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + gap: 8px; + width: 100%; + max-width: 100%; + overflow-x: hidden; +} +.conn-actions > form, .peers-conn-actions > form { + flex: 0 1 auto; + width: auto; + min-width: 0; + margin: 0; + display: flex; } -footer div { - display: flex !important; - flex-direction: column !important; - gap: 8px !important; +.pm-info-table, .pm-info-table tbody, +.block-info-table, .block-info-table tbody { + display: block; + width: 100%; + max-width: 100%; + border: 0; + background: transparent; + box-shadow: none; + table-layout: auto; +} +.pm-info-table thead, .block-info-table thead { display: none; } +.pm-info-table tr, .block-info-table tr { + display: block; + width: 100%; + box-sizing: border-box; + border: 0; + border-bottom: 1px solid rgba(255,165,0,0.18); + border-radius: 0; + margin: 0 0 8px 0; + padding: 6px 0; + background: transparent; +} +.pm-info-table td, .block-info-table td { + display: block; + width: 100%; + max-width: 100%; + box-sizing: border-box; + border: 0; + background: transparent; + padding: 1px 0; + text-align: left; + overflow-wrap: break-word; + word-break: normal; } -h1 { font-size: 1.35em !important; } -h2 { font-size: 1.2em !important; } -h3 { font-size: 1em !important; } - -.small, -.time { - font-size: 0.8rem !important; +.pm-info-table td.card-label, .block-info-table td.card-label { + color: var(--c-muted, #8c8c8c); + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .03em; + margin-bottom: 2px; + padding-bottom: 0; +} +.pm-info-table td.card-value, .block-info-table td.card-value { + font-size: 15px; + line-height: 1.5; + margin-bottom: 6px; } -.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; +.block-info-table tr:first-child:has(> td.card-label) { display: none; } +.block-info-table td[data-label]:not([data-label=""])::before { + content: attr(data-label); + display: block; + color: var(--c-muted, #8c8c8c); + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .03em; + margin-bottom: 1px; + white-space: nowrap; + word-break: normal; +} +.block-info-table td[data-label=""]::before { content: none; } + +.peers-list .block-info-table td, +.peers-technical-block .block-info-table td, +.gov-overview tbody td { + word-break: normal; + overflow-wrap: break-word; } -.header-content .created-at { - display: block !important; - flex: 1 1 100% !important; - min-width: 0 !important; - max-width: 100% !important; +.pm-info-table td .user-link, .pm-info-table td .peer-key, .pm-info-table td a[href], +.block-info-table td .peer-key, .block-info-table td .user-link, .block-info-table td a[href] { + display: inline-block; + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-all; } -.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; +.pm-info-table td form, .block-info-table td form, +.pm-info-table td button, .block-info-table td button { + width: 100%; + margin: 0; } -.post-meta, -.feed-post-meta { - flex-direction: column !important; - gap: 4px !important; +.main-content { width: 100%; max-width: 100%; } +.main-column { + width: 100%; max-width: 100%; + padding: 16px; box-sizing: border-box; +} +.main-column .card-field { + flex-direction: column; + align-items: stretch; + gap: 2px; +} +.main-column .card-field .card-value { + width: 100%; max-width: 100%; font-size: 15px; +} +.main-column .card-field .card-label { + color: var(--c-muted, #8c8c8c); font-size: 11px; +} +.main-column img, .main-column video, .main-column iframe, .main-column canvas { + max-width: 100%; height: auto; +} +.main-column hr { + width: 100%; border: 0; + border-top: 1px solid #333; margin: 16px 0; } -.mode-buttons, -.mode-buttons-cols, -.mode-buttons-row, -.filter-group, -.activity-filter-grid, -.activity-sub-filter, -.filters .ui-toolbar { - display: flex !important; - flex-direction: row !important; - flex-wrap: wrap !important; - justify-content: center !important; - width: 100% !important; - max-width: 100% !important; - gap: 6px !important; - overflow-x: hidden !important; - overflow-y: visible !important; - grid-template-columns: none !important; - box-sizing: border-box !important; +.activity-filter-acc { width: 100%; margin-bottom: 8px; } + +.activity-quick-modes { + display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; +} +.activity-quick-modes form { flex: 1 1 0; min-width: 0; margin: 0; display: flex; } +.activity-quick-modes .filter-btn { + flex: 1 1 0; width: 100%; min-height: 44px; + white-space: nowrap; word-break: keep-all; overflow-wrap: normal; + padding-left: 6px; padding-right: 6px; font-size: 14px; } -.mode-buttons .column, -.mode-buttons > div, -.activity-filter-col { - display: flex !important; - flex-direction: row !important; - flex-wrap: wrap !important; - justify-content: center !important; - width: auto !important; - gap: 6px !important; - flex: 1 1 auto !important; +.activity-groups { list-style: none; padding: 0; margin: 0; } + +.activity-groups .oasis-nav-header .emoji { display: none; } +.activity-groups .oasis-nav-header .nav-text { flex: 1 1 auto; } +.activity-groups .act-count { + flex: 0 0 auto; min-width: 20px; text-align: center; + font-size: 11px; font-weight: 700; color: #121212; + background: #FFA500; border-radius: 999px; padding: 1px 7px; + margin: 0 8px 0 0; } -.mode-buttons form, -.filter-group form, -.activity-filter-col form { - width: auto !important; - flex: 0 0 auto !important; - scroll-snap-align: start !important; +.activity-groups .oasis-nav-list li { list-style: none; margin: 0; padding: 0; } +.activity-groups .oasis-nav-list form { margin: 0; display: block; width: 100%; } +.activity-groups .oasis-nav-list .filter-btn { + display: block; width: 100%; text-align: left; + min-height: 44px; margin: 2px 0; box-sizing: border-box; +} +.activity-groups .oasis-nav-list .filter-btn.active { + outline: 2px solid #FFA500; outline-offset: -2px; } -.mode-buttons .filter-btn, -.mode-buttons button, -.filter-group .filter-btn, -.filter-group button, -.activity-filter-grid .filter-btn, -.activity-filter-grid button, -.activity-sub-filter .filter-btn, -.filters .filter-btn, -.filters button { - width: auto !important; - flex: 0 0 auto !important; - white-space: nowrap !important; - min-width: 0 !important; +.message-list { display: flex; flex-direction: column; gap: 4px; width: 100%; } +.message-list .pm-thread { display: flex; flex-direction: column; width: 100%; align-self: stretch; } +.pm-thread-replies { display: flex; flex-direction: column; gap: 4px; } + +.pm-card.pm-bubble { + max-width: 82%; width: fit-content; min-width: 0; + box-sizing: border-box; padding: 8px 12px; margin: 2px 0; + border-radius: 16px; border: 1px solid #333; + background: #1e1e1e; box-shadow: none; cursor: default; } -.inhabitant-card { - display: flex !important; - flex-direction: column !important; - width: 100% !important; - max-width: 100% !important; - overflow: hidden !important; +.pm-card.pm-bubble.pm-recv { + align-self: flex-start; margin-left: 0; margin-right: auto; + border-bottom-left-radius: 4px; background: #1e1e1e; border-color: #343434; } -.inhabitant-left { - width: 100% !important; - text-align: center !important; +.pm-card.pm-bubble.pm-sent { + align-self: flex-end; margin-left: auto; margin-right: 0; + border-bottom-right-radius: 4px; background: #2a2413; border-color: #5c4c1f; } -.inhabitant-details { - width: 100% !important; +.pm-bubble .pm-bubble-sender { font-size: 11px; font-weight: 700; color: #FFA500; margin-bottom: 3px; } +.pm-bubble .pm-bubble-sender a { color: #FFA500; } + +.pm-bubble .message-text { font-size: 15px; line-height: 1.42; color: #ececec; margin: 0; } +.pm-bubble .message-text a { color: #FFD700; } + +.pm-bubble .pm-bubble-meta { + display: flex; flex-wrap: wrap; align-items: center; + gap: 6px; margin-top: 4px; font-size: 10px; color: var(--c-muted, #8c8c8c); +} +.pm-card.pm-sent .pm-bubble-meta { justify-content: flex-end; } +.pm-card.pm-recv .pm-bubble-meta { justify-content: flex-start; } +.pm-bubble .pm-bubble-subject { font-style: italic; opacity: .75; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.pm-bubble .pm-bubble-lock { opacity: .85; } +.pm-bubble .pm-bubble-eco { font-size: 9px; opacity: .9; } +.pm-bubble .pm-bubble-eco * { font-size: 9px; } + +.pm-bubble .pm-actions { margin-top: 6px; display: flex; gap: 6px; } +.pm-card.pm-sent .pm-actions { justify-content: flex-end; } +.pm-bubble .pm-actions .pm-btn { font-size: 10px; padding: 3px 8px; min-height: 28px; } +.pm-bubble .pm-actions form { margin: 0; } + +.pm-bubble .pm-info-table { display: none; } + +.pm-thread .pm-thread-details { width: 100%; } +.pm-thread .pm-thread-toggle { font-size: 12px; color: var(--c-muted, #8c8c8c); padding: 4px 0; cursor: pointer; } + +.main-column h1, .main-column h2, .main-column h3, .main-column h4, +.tags-header h2, .tags-header h3, .title-with-chip h2, .pm-title, h2.pm-title, +.cn-name, h1.cn-name, .cn-section, h2.cn-section, .profile-side-name, h2.profile-side-name { + text-wrap: balance; + overflow-wrap: break-word; + word-break: keep-all; + -webkit-hyphens: none; hyphens: none; + text-align: left; +} +.main-column h1, .tags-header h2, .cn-name { + font-size: var(--fs-title, 20px); font-weight: 700; + line-height: 1.22; letter-spacing: -0.01em; + margin: 0 0 var(--space-2, 8px); +} +.main-column h2, .pm-title, .title-with-chip h2, .cn-section { + font-size: 18px; font-weight: 700; + line-height: 1.28; margin: var(--space-1, 4px) 0 var(--space-2, 8px); +} +.main-column h3 { + font-size: var(--fs-body-lg, 16px); font-weight: 600; + line-height: 1.35; margin: var(--space-1, 4px) 0; +} +.main-column h1, .main-column h2, .main-column h3, +.tags-header h2, .pm-title, .cn-name, .cn-section { + max-width: 40ch; width: auto; min-width: 0; } -.inhabitant-photo, -.inhabitant-photo-details { - max-width: 200px !important; - margin: 0 auto !important; +.main-column h1 code, .main-column h2 code, .main-column h3 code, +.tags-header h2 code, .pm-title code, +.main-column h1 a[href*="ed25519"], .main-column h2 a[href*="ed25519"], +.main-column h1 a[href^="ssb:"], .main-column h2 a[href^="ssb:"] { + word-break: break-all; overflow-wrap: anywhere; } -.inhabitants-list, -.inhabitants-grid { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; +.main-column .tags-header { + display: flex; flex-direction: column; align-items: flex-start; + gap: var(--space-1, 4px); width: 100%; max-width: 100%; + margin: 0 0 var(--space-2, 8px); +} +.main-column .tags-header h2 { margin: 0; } + +.main-column .title-with-chip { + display: flex; flex-wrap: wrap; align-items: center; + gap: var(--space-2, 8px); width: 100%; max-width: 100%; +} +.main-column .title-with-chip h2 { flex: 1 1 auto; min-width: 0; margin: 0; max-width: none; } +.main-column .title-with-chip > :not(h2) { flex: 0 0 auto; } + +.main-column p, .main-column li, +.tags-header p, .tags-header .prefs-help, .indexing-note, .indexing-percent, +.error-page-message, .welcome-text, .message-text, .pm-bubble .message-text { + text-wrap: pretty; + line-height: 1.55; + max-width: min(66ch, 100%); + overflow-wrap: anywhere; + word-break: normal; + min-width: 0; + -webkit-hyphens: none; hyphens: none; +} +.main-column p + p { margin-top: var(--space-3, 16px); } +.tags-header p, .tags-header .prefs-help, .indexing-note { line-height: 1.5; margin: 4px 0 0 0; } +.pm-bubble .message-text { line-height: 1.45; max-width: 100%; } + +[style*="auto-fill"], +[style*="minmax(240px"], [style*="minmax(280px"], [style*="minmax(300px"], +[style*="minmax( 240px"], [style*="minmax( 280px"], [style*="minmax( 300px"], +.trending-container, .cn-hub-grid, .cn-products { + display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; + width: 100% !important; max-width: 100% !important; +} +.trending-container > *, .games-grid > *, .market-grid > *, .tribe-grid > *, +.feed-container, .feed-card, .trending-card, +.main-column article, .main-column [class*="-card"], .main-column [class*="-item"], +.main-column [class*="-entry"], .main-column .card { + width: 100%; max-width: 100%; min-width: 0; + box-sizing: border-box; margin-left: 0; margin-right: 0; +} +.feed-card .feed-text, .trending-card .feed-text, +.main-column article p, .main-column [class*="-card"] p { max-width: var(--measure, 66ch); } +.main-column form, .comment-form, .comment-form-wrapper, .market-form, +.new-message-form, .project-control-form, .filter-box { + display: block; width: 100%; max-width: 100%; + min-width: 0; box-sizing: border-box; +} +.main-column input:not([type="checkbox"]):not([type="radio"]):not(.oasis-nav-toggle):not(.oasis-nav-side-toggle), +.main-column textarea, .main-column select { + width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; +} +.main-column form > button:only-of-type, .main-column form > .create-button, +.comment-form button[type="submit"], .market-form button[type="submit"], +.new-message-form button[type="submit"] { + display: block; width: 100%; max-width: 100%; + box-sizing: border-box; margin-top: 8px; +} +[style*="width:33%"], [style*="width: 33%"], [style*="width:25%"], [style*="width: 25%"], +[style*="width:60%"], [style*="width: 60%"], [style*="width:40%"], [style*="width: 40%"] { + width: 100% !important; max-width: 100% !important; +} +.main-column [style*="max-width: 800px"], .main-column [style*="max-width:800px"], +.ai-response, .ai-train-bar { + max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; +} +.message-list, .pm-thread, .pm-thread-replies { width: 100%; max-width: 100%; box-sizing: border-box; } + +.main-column p .user-link, .main-column p a[href^="/author/"], +.main-column li .user-link, .main-column span .user-link, +.main-column .message-text .user-link, .main-column .message-text a[href^="/author/"], +.pm-bubble .message-text .user-link, .pm-bubble .message-text a[href^="/author/"], +.pm-quote a[href^="/author/"] { + display: inline; white-space: normal; + overflow-wrap: anywhere; word-break: keep-all; + -webkit-hyphens: none; hyphens: none; } -.tribe-card { - display: flex !important; - flex-direction: column !important; - width: 100% !important; - max-width: 100% !important; - overflow: hidden !important; +.peer-key, .user-link.peer-key, .block-info-table td .peer-key, .pm-info-table td .peer-key, +.pm-info-table td .user-link, .block-info-table td .user-link, +.search-oasis-id, .pm-sent-key-value, .kpi__value { + display: inline-block; max-width: 100%; + overflow-wrap: anywhere; word-break: break-all; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-variant-numeric: tabular-nums; line-height: 1.45; } -.tribe-grid { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; - grid-template-columns: 1fr !important; +.oasis-id-copy { + display: block; width: 100%; white-space: nowrap; + overflow: hidden; text-overflow: ellipsis; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; +} +.invites-list .user-link.peer-key, .peers-list .block-info-table td .peer-key { + display: block; max-width: 100%; white-space: nowrap; + overflow: hidden; text-overflow: ellipsis; word-break: normal; } -.tribes-list, -.tribes-grid { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; +.main-column .message-text a[href^="http"], .main-column p a[href^="http"], +.pm-bubble .message-text a[href^="http"], .main-column .message-text a.oasis-path-link, +.main-column .message-text a.job-link, .main-column .message-text a.project-link, +.main-column .message-text a.market-link { + overflow-wrap: anywhere; word-break: keep-all; + -webkit-hyphens: none; hyphens: none; +} +.main-column code:not(pre code), .pm-bubble .message-text code { + display: inline; max-width: 100%; + overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; } -.tribe-card-image { - width: 100% !important; - max-width: 100% !important; +.main-column .tags-header { margin-bottom: 6px; gap: 2px; } +.main-column .tags-header h2, .tags-header h2 { + font-size: 17px; line-height: 1.2; letter-spacing: 0; +} +.main-column .tags-header p { font-size: 13px; line-height: 1.35; margin: 0; } + +.main-column { padding: 10px 12px 16px 12px; } +.activity-filter-acc { margin-bottom: 4px; } + +.empty-state { + display: flex; flex-direction: column; align-items: center; + justify-content: center; text-align: center; + padding: 40px 16px; gap: 8px; width: 100%; box-sizing: border-box; +} +.empty-state-icon { font-size: 44px; line-height: 1; opacity: 0.55; } +.empty-state-title { font-size: 16px; font-weight: 700; margin: 4px 0 0 0; color: #eee; } +.empty-state-text { color: var(--c-muted, #8c8c8c); font-size: 14px; line-height: 1.4; max-width: 40ch; margin: 0; } +.empty-state-cta { margin-top: 10px; min-height: 48px; display: inline-flex; align-items: center; } + +.activity-filter-collapsed { + display: flex; align-items: center; gap: 10px; + flex-wrap: wrap; margin-bottom: 8px; width: 100%; +} +.activity-back { + display: inline-flex; align-items: center; gap: 4px; + min-height: 44px; padding: 6px 14px 6px 10px; flex: 0 0 auto; +} +.activity-back-arrow { font-size: 22px; line-height: 1; font-weight: bold; } +.activity-active-filter { + font-weight: 700; color: #FFA500; text-transform: uppercase; + font-size: 13px; letter-spacing: .03em; } -.forum-card { - flex-direction: column !important; +.oasis-bottombar .bb-item { min-height: 48px; } +.oasis-bottombar .bb-pair .bb-item { min-height: 44px; padding: 4px 10px; } +.oasis-mobile-menus .oasis-menu-btn { min-height: 48px; } +.pm-bubble .pm-actions .pm-btn { min-height: 40px; padding: 6px 12px; } +.score-btn, .vote-btn, .feed-action-btn { + min-height: 44px; min-width: 44px; + display: inline-flex; align-items: center; justify-content: center; } +.score-btn:active, .vote-btn:active, .feed-action-btn:active { filter: brightness(.85); } -.forum-score-col, -.forum-main-col, -.root-vote-col { - width: 100% !important; +.oasis-bottombar .bb-add .bb-ico { + background: #FFA500; color: #121212; border-radius: 999px; + width: 30px; height: 30px; display: inline-flex; + align-items: center; justify-content: center; + font-weight: bold; font-size: 20px; line-height: 1; } - -.forum-header-row { - flex-direction: column !important; - gap: 4px !important; +.bb-pick-grid { + display: grid; grid-template-columns: repeat(3, 1fr); + gap: 8px; width: 100%; margin-top: 8px; } - -.forum-meta { - flex-wrap: wrap !important; - gap: 8px !important; +.bb-pick-form { margin: 0; display: block; } +.bb-pick-btn { + display: flex; flex-direction: column; align-items: center; + justify-content: center; gap: 6px; width: 100%; + min-height: 76px; padding: 10px 6px; box-sizing: border-box; + background: #1c1c1c; border: 1px solid #333; border-radius: 12px; color: #eee; } +.bb-pick-btn.active { border-color: #FFA500; background: #2a2412; } +.bb-pick-ico { font-size: 26px; color: #FFA500; line-height: 1; } +.bb-pick-lbl { font-size: 11px; text-align: center; line-height: 1.2; } -.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; - border-bottom-color: #3a2e00; - color: #FFD700; -} - -.update-banner-link { - color: #FFD700; -} - -.snh-invite-code { - color: #FFA500 !important; -} - -.stats-kpi-label { - color: #ffa300 !important; -} - -.stats-kpi-value { - color: #FFD700 !important; -} - -.carbon-bar-note, -.carbon-bar-formula { - color: #FFD700 !important; -} - -.graphos-node-label { - fill: #ddd !important; -} - -.graphos-node-label-me { - fill: #ffa500 !important; -} - -.graphos-legend { - color: #ddd !important; -} +/* Ocultar los checkboxes nativos del drawer (nav-left/right-toggle) — si no, salen 2 cuadrados blancos arriba */ .oasis-nav-side-toggle { - position: absolute !important; - width: 1px !important; - height: 1px !important; - opacity: 0 !important; - pointer-events: none !important; + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + pointer-events: none; + margin: 0; } - -.header { - display: flex !important; - flex-direction: row !important; - flex-wrap: wrap !important; - align-items: center !important; - justify-content: center !important; - gap: 8px !important; - padding: 8px !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; -} - -.header .top-bar-left, -.header .top-bar-right, -.header .top-bar-mid, -.header .top-bar-center { - display: contents !important; -} - -.header .top-bar-left a.logo-icon { - order: 1 !important; - flex: 1 1 100% !important; - display: flex !important; - justify-content: center !important; - margin: 0 0 4px 0 !important; -} - -.oasis-mobile-menus { - order: 2 !important; - display: flex !important; - flex: 1 1 auto !important; - flex-wrap: wrap !important; - justify-content: center !important; - align-items: center !important; - gap: 8px !important; -} - -.oasis-menu-btn { - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - gap: 4px !important; - min-height: 42px !important; - padding: 6px 12px !important; - border: 1px solid #FFD700 !important; - border-radius: 8px !important; - background: #161616 !important; - color: #FFD700 !important; - font-weight: 600 !important; - font-size: 0.85rem !important; - text-decoration: none !important; - white-space: nowrap !important; - cursor: pointer !important; -} -.oasis-menu-btn .oasis-menu-ico { font-size: 1.05rem !important; } - -.header .top-bar-left nav { - order: 3 !important; - flex: 1 1 100% !important; - width: 100% !important; -} -.header .top-bar-right nav { - order: 4 !important; - flex: 1 1 100% !important; - width: 100% !important; -} -.header .top-bar-left nav ul, -.header .top-bar-right nav ul, -.header .top-bar-mid nav ul { - display: grid !important; - grid-template-columns: repeat(3, 1fr) !important; - gap: 6px !important; - overflow: visible !important; - list-style: none !important; - padding: 0 !important; - margin: 0 !important; - width: 100% !important; - box-sizing: border-box !important; -} -.header .top-bar-left nav ul li, -.header .top-bar-right nav ul li, -.header .top-bar-mid nav ul li { - width: 100% !important; - margin: 0 !important; -} -.header .top-bar-left nav ul li, -.header .top-bar-right nav ul li { margin: 0 !important; } -.header .top-bar-left nav ul li a, -.header .top-bar-right nav ul li a { - display: flex !important; - align-items: center !important; - justify-content: center !important; - gap: 4px !important; - width: 100% !important; - min-height: 42px !important; - box-sizing: border-box !important; - padding: 6px 8px !important; - font-size: 0.85rem !important; - white-space: nowrap !important; - border: 1px solid #FFD700 !important; - border-radius: 8px !important; - background: #161616 !important; - color: #FFD700 !important; - text-decoration: none !important; - font-weight: 600 !important; -} -.header a, -.header a:link, -.header a:visited { - text-decoration: none !important; -} -.header .top-bar-left nav ul li a .inbox-badge { - color: #fff !important; -} - -.main-content { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; -} -.main-content .main-column { order: 0 !important; } -.main-content .sidebar-left, -.main-content .sidebar-right { - display: none !important; -} -#nav-left-toggle:checked ~ .main-content .sidebar-left, -#nav-right-toggle:checked ~ .main-content .sidebar-right { - display: block !important; - order: -1 !important; - width: 100% !important; - max-width: 100% !important; - background: #0d0d0d !important; - border: 1px solid #FFD700 !important; - border-radius: 10px !important; - padding: 8px !important; - margin: 0 0 8px 0 !important; -} -.sidebar-left nav ul, -.sidebar-right nav ul { - display: flex !important; - flex-direction: column !important; - gap: 4px !important; - list-style: none !important; - padding: 0 !important; - margin: 0 !important; -} - -.activity-filter-grid, -.activity-filters, -.activity-sub-filter, -.filters .ui-toolbar { - display: flex !important; - flex-direction: row !important; - flex-wrap: wrap !important; - justify-content: center !important; - align-items: flex-start !important; - gap: 6px !important; - overflow-x: hidden !important; - grid-template-columns: none !important; - scroll-snap-type: none !important; - width: 100% !important; - max-width: 100% !important; -} -.activity-filter-col { - display: flex !important; - flex: 1 1 100% !important; - flex-direction: row !important; - flex-wrap: wrap !important; - justify-content: center !important; - gap: 6px !important; - width: 100% !important; - max-width: 100% !important; -} -.activity-filter-grid form, -.activity-filter-col form, -.activity-sub-filter form { - flex: 0 1 auto !important; - scroll-snap-align: none !important; - width: auto !important; -} -.activity-filter-grid .filter-btn, -.activity-filter-col .filter-btn { - width: auto !important; - min-width: 0 !important; - white-space: nowrap !important; -} - -.oasis-footer, -.oasis-footer-center { - overflow-x: hidden !important; - max-width: 100% !important; -} -.oasis-footer-center span, -.oasis-footer-center a { - overflow-wrap: anywhere !important; - word-break: break-all !important; - max-width: 100% !important; -} - -a:not([class]), -a.mention, -a.hashtag { - color: #FFD700 !important; - text-decoration: underline !important; -} - -.module-locked { opacity: 0.45 !important; } -.module-locked .input-checkbox { cursor: not-allowed !important; } - -.game-row { - flex-direction: column !important; - align-items: stretch !important; -} -.game-row-media, -.game-row-media img { - width: 100% !important; - max-width: 100% !important; -} -.game-row-body { width: 100% !important; min-width: 0 !important; } -.game-row-actions { justify-content: center !important; width: 100% !important; } -.games-grid { grid-template-columns: 1fr !important; } - -.profile-sensors-box { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; max-width: 100% !important; } -.profile-sensors-box span { display: block !important; max-width: 100% !important; overflow-wrap: anywhere !important; } -.larp-sign-block { display: block !important; max-width: 100% !important; overflow: hidden !important; text-align: center !important; } -.larp-sign-large { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; } -.profile-side-mention { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-all !important; } -.profile-side-mention a, .profile-side-mention strong { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-all !important; display: inline-block !important; } -.inhabitant-stats-box { max-width: 100% !important; overflow: hidden !important; } -.inhabitant-stats-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; max-width: 100% !important; } -.inhabitant-stat { max-width: 100% !important; overflow-wrap: anywhere !important; } -.profile-reach { max-width: 100% !important; overflow: hidden !important; text-align: center !important; } -.feed-card .card-footer { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; row-gap: 4px !important; } -.feed-card .date-link { max-width: 100% !important; overflow-wrap: anywhere !important; font-size: 0.85em !important; padding: 6px 10px !important; } diff --git a/src/client/assets/themes/OasisMobileUX.css b/src/client/assets/themes/OasisMobileUX.css deleted file mode 100644 index b412861..0000000 --- a/src/client/assets/themes/OasisMobileUX.css +++ /dev/null @@ -1,787 +0,0 @@ -html { overflow-x: clip; overflow-y: visible; height: auto; } -body { overflow-x: clip; overflow-y: visible; } - - -.oasis-bottombar { - display: flex; - position: fixed; - left: 0; right: 0; bottom: 0; - z-index: 1000; - justify-content: space-around; - align-items: center; - gap: 4px; - background: #1F1F1F; - border-top: 1px solid #333; - padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); -} -.oasis-bottombar .bb-item { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - gap: 3px; - flex: 1 1 0; - min-width: 0; - padding: 2px 0; - text-decoration: none; -} -.oasis-bottombar .bb-ico { font-size: 18px; line-height: 1; color: #FFA500; } -.oasis-bottombar .bb-lbl { font-size: 9px; color: #ccc; white-space: nowrap; } -.oasis-bottombar .bb-badge { - position: absolute; - top: -4px; - left: calc(50% + 6px); - min-width: 15px; height: 15px; - padding: 0 3px; - border-radius: 8px; - background: #FFA500; - color: #121212; - font-size: 9px; font-weight: bold; - display: flex; align-items: center; justify-content: center; -} - -body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } - -.oasis-mobile-topbar { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 8px 12px; - background: transparent; - box-shadow: none; border: 0; -} - -.oasis-mobile-topbar .omt-logo img, -.oasis-mobile-topbar .omt-avatar img { - width: 32px; height: 32px; - border-radius: 50%; - border: 2px solid #FFA500; - object-fit: cover; display: block; -} - -.oasis-mobile-topbar .omt-title { - flex: 1 1 auto; - text-align: center; - font-size: 26px; font-weight: bold; - letter-spacing: 10px; text-indent: 10px; - color: #FFD700; text-decoration: none; - white-space: nowrap; - background: transparent; border: 0; box-shadow: none; padding: 0; -} - -.header .top-bar-left > a.logo-icon { display: none; } - -.oasis-mobile-menus { display: flex; gap: 8px; padding: 0 10px 6px; } -.oasis-mobile-menus .oasis-menu-ico { display: none; } -.oasis-mobile-menus .oasis-menu-btn { - flex: 1 1 0; - display: flex; align-items: center; justify-content: center; - padding: 12px; - border: 1.5px solid #333; border-radius: 10px; - background: #121212; color: #ccc; - font-weight: bold; letter-spacing: 1px; cursor: pointer; -} - -#nav-left-toggle:checked ~ .header .oasis-menu-btn[for="nav-left-toggle"] { - background: #FFA500; color: #121212; border-color: #FFA500; -} - -#nav-right-toggle:checked ~ .header .oasis-menu-btn[for="nav-right-toggle"] { - background: #FFD700; color: #121212; border-color: #FFD700; -} - -:root { - --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; - --fs-caption: 12px; --fs-body: 14px; --fs-body-lg: 16px; --fs-title: 20px; - --lh-body: 1.5; --measure: 66ch; - --c-muted: #8c8c8c; --radius-md: 12px; -} - -.oasis-bottombar .bb-fab .bb-ico { - width: 46px; height: 46px; - margin-top: -22px; - border-radius: 50%; - background: #FFA500; color: #121212; - display: flex; align-items: center; justify-content: center; - font-size: 22px; - box-shadow: 0 2px 8px rgba(0,0,0,.4); -} -.oasis-bottombar .bb-fab .bb-lbl { color: #FFA500; font-weight: bold; } - -.main-column, .main-column p, .main-column li, .main-column a, -.main-column span, .main-column td, .main-column h1, .main-column h2, .main-column h3 { - overflow-wrap: anywhere; - word-break: break-word; -} -.main-column { padding: var(--space-3); } -.main-column p { line-height: var(--lh-body); } - -.main-column > * + * { margin-top: var(--space-3); } - -.main-column img, .main-column video, .main-column table, .main-column pre, .main-column iframe { - max-width: 100%; height: auto; -} -.main-column pre { white-space: pre-wrap; } - -.oasis-nav-group { - list-style: none; - background: #1c1c1c; - border: 1px solid #333; - border-radius: var(--radius-md); - overflow: hidden; - margin-bottom: var(--space-2); -} -.oasis-nav-header { - display: flex; align-items: center; gap: var(--space-2); - min-height: 48px; padding: 0 var(--space-3); - cursor: pointer; - color: #FFD700; font-weight: bold; - text-transform: uppercase; letter-spacing: .04em; - font-size: var(--fs-caption); -} -.oasis-nav-header .nav-text { flex: 1 1 auto; } -.oasis-nav-header .oasis-nav-arrow { color: var(--c-muted); transition: transform 150ms ease; } -.oasis-nav-toggle:checked + .oasis-nav-header .oasis-nav-arrow { transform: rotate(180deg); } -.oasis-nav-header:active { background: #262626; } -.oasis-nav-list { list-style: none; padding: 0; margin: 0; } -.oasis-nav-list li a { - display: flex; align-items: center; gap: var(--space-3); - min-height: 48px; padding: 0 var(--space-3); - color: #e8e8e8; text-decoration: none; - border-top: 1px solid #262626; -} -.oasis-nav-list li a .emoji { flex: 0 0 auto; width: 22px; text-align: center; color: #FFA500; } -.oasis-nav-list li a .nav-text { font-size: var(--fs-body); } -.oasis-nav-list li a:active { background: #262626; } -.oasis-nav-list li a.current { color: #FFA500; font-weight: bold; } - -.main-column h1 { font-size: var(--fs-title); font-weight: 700; line-height: 1.25; margin: 0 0 var(--space-2); } -.main-column h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-2); } -.main-column h3 { font-size: var(--fs-body-lg); font-weight: 600; margin: 0 0 var(--space-1); } -.main-column p { font-size: var(--fs-body-lg); } -.main-column .created-at, .main-column .small, .main-column .time, -.main-column .meta, .main-column .author-meta, .main-column .subtitle { - color: var(--c-muted); font-size: var(--fs-caption); -} - -.main-column article, -.main-column [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; } - -.btn, button, input[type="submit"], input[type="button"], .submit-button, -.filter-btn, .create-button, .edit-btn, .delete-btn, .join-btn, .leave-btn, .buy-btn { - min-height: 48px; -} -button:active, input[type="submit"]:active, .submit-button:active, -.filter-btn:active, .create-button:active, .edit-btn:active, -.delete-btn:active, .join-btn:active, .leave-btn:active, .buy-btn:active { - filter: brightness(.85); -} -.main-column a:active { opacity: .6; } - -* { -webkit-tap-highlight-color: transparent; } -a, button, label, .tap, .oasis-menu-btn, .bb-item, .oasis-nav-header, .oasis-nav-list li a { - touch-action: manipulation; -} -body { overscroll-behavior: none; } - -.main-content, .main-column, .header, -.sidebar-left, .sidebar-right { overflow: visible; } - -.sidebar-left, .sidebar-right { display: none; } -#nav-left-toggle:checked ~ .main-content .sidebar-left { display: block; } -#nav-right-toggle:checked ~ .main-content .sidebar-right { display: block; } - -.bb-manage { margin: 8px 0 16px; } -.bb-manage h3, .bb-manage-add h3 { - font-size: 13px; text-transform: uppercase; letter-spacing: .05em; - color: #FFA500; margin: 14px 0 8px; -} -.bb-manage-list { display: flex; flex-direction: column; gap: 8px; } -.bb-manage-form { margin: 0; width: 100%; } -.bb-manage-btn { - width: 100%; - display: flex; align-items: center; gap: 12px; - min-height: 52px; padding: 0 14px; - background: #1c1c1c; border: 1px solid #333; border-radius: 10px; - color: #eee; cursor: pointer; text-align: left; -} -.bb-manage-ico { font-size: 20px; color: #FFA500; width: 26px; text-align: center; } -.bb-manage-lbl { flex: 1 1 auto; font-size: 15px; } -.bb-manage-x { font-size: 16px; color: #ff6b6b; font-weight: bold; } -.bb-manage-empty, .bb-manage-full { color: #999; font-size: 14px; padding: 8px 2px; } -.bb-manage-done { - display: block; text-align: center; - margin-top: 16px; min-height: 48px; line-height: 48px; -} - -.hive-nav { --hx: min(64px, calc((100vw - 40px) / 4)); --hxm: min(58px, calc((100vw - 36px) / 5)); margin: 8px 0 16px; overflow: visible; background: transparent; padding: 0; border: 0; box-shadow: none; } -.hive-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } -.hive-grid { display: flex; flex-direction: column; align-items: center; overflow: visible; background: transparent; padding: 0; margin: 0; box-shadow: none; } -.hive-row { display: flex; justify-content: center; gap: 3px; overflow: visible; background: transparent; padding: 0; margin: 0; box-shadow: none; } -.hive-cats .hive-row + .hive-row { margin-top: calc(var(--hx) * -0.30); } -.hex-cat, .hex-mod { - position: relative; - -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; - text-decoration: none; cursor: pointer; box-sizing: border-box; - background: #D9A400; - filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); -} -.hex-cat::before, .hex-mod::before { - content: ''; position: absolute; inset: 1.5px; z-index: 0; - -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - background: #161616; -} -.hex-cat { width: var(--hx); height: calc(var(--hx) * 1.15); } -.hex-mod { width: var(--hxm); height: calc(var(--hxm) * 1.15); } -.hex-cat .hx-ico, .hex-mod .hx-ico { color: #FFA500; line-height: 1; position: relative; z-index: 1; } -.hex-cat .hx-ico { font-size: 17px; } -.hex-mod .hx-ico { font-size: 16px; } -.hex-cat .hx-lbl, .hex-mod .hx-lbl { color: #d8d8d8; text-align: center; line-height: 1; font-weight: bold; overflow: hidden; position: relative; z-index: 1; } -.hex-cat .hx-lbl { font-size: 8px; max-width: 88%; } -.hex-mod .hx-lbl { font-size: 8px; max-width: 92%; } -.hex-cat:active::before, .hex-mod:active::before { background: #242424; } -#hive-personal:checked ~ .hive-grid .hex-cat[for="hive-personal"], -#hive-governance:checked ~ .hive-grid .hex-cat[for="hive-governance"], -#hive-office:checked ~ .hive-grid .hex-cat[for="hive-office"], -#hive-economy:checked ~ .hive-grid .hex-cat[for="hive-economy"], -#hive-tools:checked ~ .hive-grid .hex-cat[for="hive-tools"], -#hive-network:checked ~ .hive-grid .hex-cat[for="hive-network"], -#hive-blogs:checked ~ .hive-grid .hex-cat[for="hive-blogs"], -#hive-creative:checked ~ .hive-grid .hex-cat[for="hive-creative"], -#hive-media:checked ~ .hive-grid .hex-cat[for="hive-media"], -#hive-fediverse:checked ~ .hive-grid .hex-cat[for="hive-fediverse"] { background: #FFA500; } -#hive-personal:checked ~ .hive-grid .hex-cat[for="hive-personal"]::before, -#hive-governance:checked ~ .hive-grid .hex-cat[for="hive-governance"]::before, -#hive-office:checked ~ .hive-grid .hex-cat[for="hive-office"]::before, -#hive-economy:checked ~ .hive-grid .hex-cat[for="hive-economy"]::before, -#hive-tools:checked ~ .hive-grid .hex-cat[for="hive-tools"]::before, -#hive-network:checked ~ .hive-grid .hex-cat[for="hive-network"]::before, -#hive-blogs:checked ~ .hive-grid .hex-cat[for="hive-blogs"]::before, -#hive-creative:checked ~ .hive-grid .hex-cat[for="hive-creative"]::before, -#hive-media:checked ~ .hive-grid .hex-cat[for="hive-media"]::before, -#hive-fediverse:checked ~ .hive-grid .hex-cat[for="hive-fediverse"]::before { background: #FFA500; } -#hive-personal:checked ~ .hive-grid .hex-cat[for="hive-personal"] :is(.hx-ico,.hx-lbl), -#hive-governance:checked ~ .hive-grid .hex-cat[for="hive-governance"] :is(.hx-ico,.hx-lbl), -#hive-office:checked ~ .hive-grid .hex-cat[for="hive-office"] :is(.hx-ico,.hx-lbl), -#hive-economy:checked ~ .hive-grid .hex-cat[for="hive-economy"] :is(.hx-ico,.hx-lbl), -#hive-tools:checked ~ .hive-grid .hex-cat[for="hive-tools"] :is(.hx-ico,.hx-lbl), -#hive-network:checked ~ .hive-grid .hex-cat[for="hive-network"] :is(.hx-ico,.hx-lbl), -#hive-blogs:checked ~ .hive-grid .hex-cat[for="hive-blogs"] :is(.hx-ico,.hx-lbl), -#hive-creative:checked ~ .hive-grid .hex-cat[for="hive-creative"] :is(.hx-ico,.hx-lbl), -#hive-media:checked ~ .hive-grid .hex-cat[for="hive-media"] :is(.hx-ico,.hx-lbl), -#hive-fediverse:checked ~ .hive-grid .hex-cat[for="hive-fediverse"] :is(.hx-ico,.hx-lbl) { color: #121212; } -.hive-panel { display: none; margin: 12px auto 0; max-width: 340px; background: #101010; border: 1px solid #242424; border-radius: 16px; padding: 12px 8px; overflow: visible; box-shadow: none; } -#hive-personal:checked ~ #hive-panel-personal, -#hive-governance:checked ~ #hive-panel-governance, -#hive-office:checked ~ #hive-panel-office, -#hive-economy:checked ~ #hive-panel-economy, -#hive-tools:checked ~ #hive-panel-tools, -#hive-network:checked ~ #hive-panel-network, -#hive-blogs:checked ~ #hive-panel-blogs, -#hive-creative:checked ~ #hive-panel-creative, -#hive-media:checked ~ #hive-panel-media, -#hive-fediverse:checked ~ #hive-panel-fediverse { display: block; } -.hive-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; background: transparent; overflow: visible; } - -.header .top-bar-left nav, -.header .top-bar-right nav { display: none; } - -.oasis-mobile-topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); } - -.oasis-bottombar .bb-pair { - display: flex; align-items: center; - flex: 0 0 auto; - gap: 2px; padding: 3px; - background: #262626; - border: 1px solid #3a3a3a; - border-radius: 999px; -} -.oasis-bottombar .bb-pair .bb-item { flex: 0 0 auto; padding: 2px 8px; } -.oasis-bottombar .bb-pair .bb-lbl { font-size: 8px; } - -.oasis-bottombar a.bb-item.current .bb-ico { - background: #FFA500; color: #121212; - border-radius: 999px; padding: 4px 12px; -} -.oasis-bottombar a.bb-item.current .bb-lbl { color: #FFA500; font-weight: bold; } -.oasis-bottombar a.bb-item.current .bb-badge { background: #121212; color: #FFA500; } - -.main-column, .main-column p, .main-column li, .main-column a, -.main-column span, .main-column td, .main-column th, .main-column label, -.main-column h1, .main-column h2, .main-column h3, .main-column h4, -.main-column strong, .main-column em, .main-column small, -.created-at, .post-meta, .feed-post-meta, -.feed-row .small, .feed-row .time, .feed-row .created-at, -.profile-sensors-box > *, -.card-field .card-value, .card-field .card-label { - overflow-wrap: break-word; - word-break: normal; - -webkit-hyphens: none; - hyphens: none; -} - -.main-column pre, .main-column code, kbd, samp, -.peer-key, .user-link.peer-key, .oasis-id-copy, .search-oasis-id, -.pm-sent-key-value, .kpi__value, -.block-info-table td .peer-key, .block-info-table td .user-link, -.pm-info-table td .user-link, -.main-column a[href*="ed25519"], .main-column a[href^="ssb:"], -.main-column a[href^="/author/"] { - overflow-wrap: anywhere; - word-break: break-all; -} - -button, input[type="submit"], input[type="button"], -.filter-btn, a.filter-btn, .create-button, .edit-btn, .delete-btn, -.join-btn, .leave-btn, .buy-btn, .submit-button, .btn, -.conn-actions button, .peers-conn-actions button, -.mode-buttons button, .mode-buttons .filter-btn, -.filter-group button, .filter-group .filter-btn, -.main-column button, .main-column input[type="submit"] { - white-space: normal; - word-break: normal; - overflow-wrap: break-word; - -webkit-hyphens: none; - hyphens: none; -} - -.conn-actions, .peers-conn-actions { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: stretch; - gap: 8px; - width: 100%; - max-width: 100%; - overflow-x: hidden; -} -.conn-actions > form, .peers-conn-actions > form { - flex: 0 1 auto; - width: auto; - min-width: 0; - margin: 0; - display: flex; -} - -.pm-info-table, .pm-info-table tbody, -.block-info-table, .block-info-table tbody { - display: block; - width: 100%; - max-width: 100%; - border: 0; - background: transparent; - box-shadow: none; - table-layout: auto; -} -.pm-info-table thead, .block-info-table thead { display: none; } -.pm-info-table tr, .block-info-table tr { - display: block; - width: 100%; - box-sizing: border-box; - border: 0; - border-bottom: 1px solid rgba(255,165,0,0.18); - border-radius: 0; - margin: 0 0 8px 0; - padding: 6px 0; - background: transparent; -} -.pm-info-table td, .block-info-table td { - display: block; - width: 100%; - max-width: 100%; - box-sizing: border-box; - border: 0; - background: transparent; - padding: 1px 0; - text-align: left; - overflow-wrap: break-word; - word-break: normal; -} - -.pm-info-table td.card-label, .block-info-table td.card-label { - color: var(--c-muted, #8c8c8c); - font-size: 11px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: .03em; - margin-bottom: 2px; - padding-bottom: 0; -} -.pm-info-table td.card-value, .block-info-table td.card-value { - font-size: 15px; - line-height: 1.5; - margin-bottom: 6px; -} - -.block-info-table tr:first-child:has(> td.card-label) { display: none; } -.block-info-table td[data-label]:not([data-label=""])::before { - content: attr(data-label); - display: block; - color: var(--c-muted, #8c8c8c); - font-size: 10px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: .03em; - margin-bottom: 1px; - white-space: nowrap; - word-break: normal; -} -.block-info-table td[data-label=""]::before { content: none; } - -.peers-list .block-info-table td, -.peers-technical-block .block-info-table td, -.gov-overview tbody td { - word-break: normal; - overflow-wrap: break-word; -} - -.pm-info-table td .user-link, .pm-info-table td .peer-key, .pm-info-table td a[href], -.block-info-table td .peer-key, .block-info-table td .user-link, .block-info-table td a[href] { - display: inline-block; - max-width: 100%; - overflow-wrap: anywhere; - word-break: break-all; -} - -.pm-info-table td form, .block-info-table td form, -.pm-info-table td button, .block-info-table td button { - width: 100%; - margin: 0; -} - -.main-content { width: 100%; max-width: 100%; } -.main-column { - width: 100%; max-width: 100%; - padding: 16px; box-sizing: border-box; -} -.main-column .card-field { - flex-direction: column; - align-items: stretch; - gap: 2px; -} -.main-column .card-field .card-value { - width: 100%; max-width: 100%; font-size: 15px; -} -.main-column .card-field .card-label { - color: var(--c-muted, #8c8c8c); font-size: 11px; -} -.main-column img, .main-column video, .main-column iframe, .main-column canvas { - max-width: 100%; height: auto; -} -.main-column hr { - width: 100%; border: 0; - border-top: 1px solid #333; margin: 16px 0; -} - -.activity-filter-acc { width: 100%; margin-bottom: 8px; } - -.activity-quick-modes { - display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; -} -.activity-quick-modes form { flex: 1 1 0; min-width: 0; margin: 0; display: flex; } -.activity-quick-modes .filter-btn { - flex: 1 1 0; width: 100%; min-height: 44px; - white-space: nowrap; word-break: keep-all; overflow-wrap: normal; - padding-left: 6px; padding-right: 6px; font-size: 14px; -} - -.activity-groups { list-style: none; padding: 0; margin: 0; } - -.activity-groups .oasis-nav-header .emoji { display: none; } -.activity-groups .oasis-nav-header .nav-text { flex: 1 1 auto; } -.activity-groups .act-count { - flex: 0 0 auto; min-width: 20px; text-align: center; - font-size: 11px; font-weight: 700; color: #121212; - background: #FFA500; border-radius: 999px; padding: 1px 7px; - margin: 0 8px 0 0; -} - -.activity-groups .oasis-nav-list li { list-style: none; margin: 0; padding: 0; } -.activity-groups .oasis-nav-list form { margin: 0; display: block; width: 100%; } -.activity-groups .oasis-nav-list .filter-btn { - display: block; width: 100%; text-align: left; - min-height: 44px; margin: 2px 0; box-sizing: border-box; -} -.activity-groups .oasis-nav-list .filter-btn.active { - outline: 2px solid #FFA500; outline-offset: -2px; -} - -.message-list { display: flex; flex-direction: column; gap: 4px; width: 100%; } -.message-list .pm-thread { display: flex; flex-direction: column; width: 100%; align-self: stretch; } -.pm-thread-replies { display: flex; flex-direction: column; gap: 4px; } - -.pm-card.pm-bubble { - max-width: 82%; width: fit-content; min-width: 0; - box-sizing: border-box; padding: 8px 12px; margin: 2px 0; - border-radius: 16px; border: 1px solid #333; - background: #1e1e1e; box-shadow: none; cursor: default; -} - -.pm-card.pm-bubble.pm-recv { - align-self: flex-start; margin-left: 0; margin-right: auto; - border-bottom-left-radius: 4px; background: #1e1e1e; border-color: #343434; -} - -.pm-card.pm-bubble.pm-sent { - align-self: flex-end; margin-left: auto; margin-right: 0; - border-bottom-right-radius: 4px; background: #2a2413; border-color: #5c4c1f; -} - -.pm-bubble .pm-bubble-sender { font-size: 11px; font-weight: 700; color: #FFA500; margin-bottom: 3px; } -.pm-bubble .pm-bubble-sender a { color: #FFA500; } - -.pm-bubble .message-text { font-size: 15px; line-height: 1.42; color: #ececec; margin: 0; } -.pm-bubble .message-text a { color: #FFD700; } - -.pm-bubble .pm-bubble-meta { - display: flex; flex-wrap: wrap; align-items: center; - gap: 6px; margin-top: 4px; font-size: 10px; color: var(--c-muted, #8c8c8c); -} -.pm-card.pm-sent .pm-bubble-meta { justify-content: flex-end; } -.pm-card.pm-recv .pm-bubble-meta { justify-content: flex-start; } -.pm-bubble .pm-bubble-subject { font-style: italic; opacity: .75; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.pm-bubble .pm-bubble-lock { opacity: .85; } -.pm-bubble .pm-bubble-eco { font-size: 9px; opacity: .9; } -.pm-bubble .pm-bubble-eco * { font-size: 9px; } - -.pm-bubble .pm-actions { margin-top: 6px; display: flex; gap: 6px; } -.pm-card.pm-sent .pm-actions { justify-content: flex-end; } -.pm-bubble .pm-actions .pm-btn { font-size: 10px; padding: 3px 8px; min-height: 28px; } -.pm-bubble .pm-actions form { margin: 0; } - -.pm-bubble .pm-info-table { display: none; } - -.pm-thread .pm-thread-details { width: 100%; } -.pm-thread .pm-thread-toggle { font-size: 12px; color: var(--c-muted, #8c8c8c); padding: 4px 0; cursor: pointer; } - -.main-column h1, .main-column h2, .main-column h3, .main-column h4, -.tags-header h2, .tags-header h3, .title-with-chip h2, .pm-title, h2.pm-title, -.cn-name, h1.cn-name, .cn-section, h2.cn-section, .profile-side-name, h2.profile-side-name { - text-wrap: balance; - overflow-wrap: break-word; - word-break: keep-all; - -webkit-hyphens: none; hyphens: none; - text-align: left; -} -.main-column h1, .tags-header h2, .cn-name { - font-size: var(--fs-title, 20px); font-weight: 700; - line-height: 1.22; letter-spacing: -0.01em; - margin: 0 0 var(--space-2, 8px); -} -.main-column h2, .pm-title, .title-with-chip h2, .cn-section { - font-size: 18px; font-weight: 700; - line-height: 1.28; margin: var(--space-1, 4px) 0 var(--space-2, 8px); -} -.main-column h3 { - font-size: var(--fs-body-lg, 16px); font-weight: 600; - line-height: 1.35; margin: var(--space-1, 4px) 0; -} -.main-column h1, .main-column h2, .main-column h3, -.tags-header h2, .pm-title, .cn-name, .cn-section { - max-width: 40ch; width: auto; min-width: 0; -} - -.main-column h1 code, .main-column h2 code, .main-column h3 code, -.tags-header h2 code, .pm-title code, -.main-column h1 a[href*="ed25519"], .main-column h2 a[href*="ed25519"], -.main-column h1 a[href^="ssb:"], .main-column h2 a[href^="ssb:"] { - word-break: break-all; overflow-wrap: anywhere; -} - -.main-column .tags-header { - display: flex; flex-direction: column; align-items: flex-start; - gap: var(--space-1, 4px); width: 100%; max-width: 100%; - margin: 0 0 var(--space-2, 8px); -} -.main-column .tags-header h2 { margin: 0; } - -.main-column .title-with-chip { - display: flex; flex-wrap: wrap; align-items: center; - gap: var(--space-2, 8px); width: 100%; max-width: 100%; -} -.main-column .title-with-chip h2 { flex: 1 1 auto; min-width: 0; margin: 0; max-width: none; } -.main-column .title-with-chip > :not(h2) { flex: 0 0 auto; } - -.main-column p, .main-column li, -.tags-header p, .tags-header .prefs-help, .indexing-note, .indexing-percent, -.error-page-message, .welcome-text, .message-text, .pm-bubble .message-text { - text-wrap: pretty; - line-height: 1.55; - max-width: min(66ch, 100%); - overflow-wrap: anywhere; - word-break: normal; - min-width: 0; - -webkit-hyphens: none; hyphens: none; -} -.main-column p + p { margin-top: var(--space-3, 16px); } -.tags-header p, .tags-header .prefs-help, .indexing-note { line-height: 1.5; margin: 4px 0 0 0; } -.pm-bubble .message-text { line-height: 1.45; max-width: 100%; } - -[style*="auto-fill"], -[style*="minmax(240px"], [style*="minmax(280px"], [style*="minmax(300px"], -[style*="minmax( 240px"], [style*="minmax( 280px"], [style*="minmax( 300px"], -.trending-container, .cn-hub-grid, .cn-products { - display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; - width: 100% !important; max-width: 100% !important; -} -.trending-container > *, .games-grid > *, .market-grid > *, .tribe-grid > *, -.feed-container, .feed-card, .trending-card, -.main-column article, .main-column [class*="-card"], .main-column [class*="-item"], -.main-column [class*="-entry"], .main-column .card { - width: 100%; max-width: 100%; min-width: 0; - box-sizing: border-box; margin-left: 0; margin-right: 0; -} -.feed-card .feed-text, .trending-card .feed-text, -.main-column article p, .main-column [class*="-card"] p { max-width: var(--measure, 66ch); } -.main-column form, .comment-form, .comment-form-wrapper, .market-form, -.new-message-form, .project-control-form, .filter-box { - display: block; width: 100%; max-width: 100%; - min-width: 0; box-sizing: border-box; -} -.main-column input:not([type="checkbox"]):not([type="radio"]):not(.oasis-nav-toggle):not(.oasis-nav-side-toggle), -.main-column textarea, .main-column select { - width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; -} -.main-column form > button:only-of-type, .main-column form > .create-button, -.comment-form button[type="submit"], .market-form button[type="submit"], -.new-message-form button[type="submit"] { - display: block; width: 100%; max-width: 100%; - box-sizing: border-box; margin-top: 8px; -} -[style*="width:33%"], [style*="width: 33%"], [style*="width:25%"], [style*="width: 25%"], -[style*="width:60%"], [style*="width: 60%"], [style*="width:40%"], [style*="width: 40%"] { - width: 100% !important; max-width: 100% !important; -} -.main-column [style*="max-width: 800px"], .main-column [style*="max-width:800px"], -.ai-response, .ai-train-bar { - max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; -} -.message-list, .pm-thread, .pm-thread-replies { width: 100%; max-width: 100%; box-sizing: border-box; } - -.main-column p .user-link, .main-column p a[href^="/author/"], -.main-column li .user-link, .main-column span .user-link, -.main-column .message-text .user-link, .main-column .message-text a[href^="/author/"], -.pm-bubble .message-text .user-link, .pm-bubble .message-text a[href^="/author/"], -.pm-quote a[href^="/author/"] { - display: inline; white-space: normal; - overflow-wrap: anywhere; word-break: keep-all; - -webkit-hyphens: none; hyphens: none; -} - -.peer-key, .user-link.peer-key, .block-info-table td .peer-key, .pm-info-table td .peer-key, -.pm-info-table td .user-link, .block-info-table td .user-link, -.search-oasis-id, .pm-sent-key-value, .kpi__value { - display: inline-block; max-width: 100%; - overflow-wrap: anywhere; word-break: break-all; - font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - font-variant-numeric: tabular-nums; line-height: 1.45; -} - -.oasis-id-copy { - display: block; width: 100%; white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; -} -.invites-list .user-link.peer-key, .peers-list .block-info-table td .peer-key { - display: block; max-width: 100%; white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; word-break: normal; -} - -.main-column .message-text a[href^="http"], .main-column p a[href^="http"], -.pm-bubble .message-text a[href^="http"], .main-column .message-text a.oasis-path-link, -.main-column .message-text a.job-link, .main-column .message-text a.project-link, -.main-column .message-text a.market-link { - overflow-wrap: anywhere; word-break: keep-all; - -webkit-hyphens: none; hyphens: none; -} -.main-column code:not(pre code), .pm-bubble .message-text code { - display: inline; max-width: 100%; - overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; -} - -.main-column .tags-header { margin-bottom: 6px; gap: 2px; } -.main-column .tags-header h2, .tags-header h2 { - font-size: 17px; line-height: 1.2; letter-spacing: 0; -} -.main-column .tags-header p { font-size: 13px; line-height: 1.35; margin: 0; } - -.main-column { padding: 10px 12px 16px 12px; } -.activity-filter-acc { margin-bottom: 4px; } - -.empty-state { - display: flex; flex-direction: column; align-items: center; - justify-content: center; text-align: center; - padding: 40px 16px; gap: 8px; width: 100%; box-sizing: border-box; -} -.empty-state-icon { font-size: 44px; line-height: 1; opacity: 0.55; } -.empty-state-title { font-size: 16px; font-weight: 700; margin: 4px 0 0 0; color: #eee; } -.empty-state-text { color: var(--c-muted, #8c8c8c); font-size: 14px; line-height: 1.4; max-width: 40ch; margin: 0; } -.empty-state-cta { margin-top: 10px; min-height: 48px; display: inline-flex; align-items: center; } - -.activity-filter-collapsed { - display: flex; align-items: center; gap: 10px; - flex-wrap: wrap; margin-bottom: 8px; width: 100%; -} -.activity-back { - display: inline-flex; align-items: center; gap: 4px; - min-height: 44px; padding: 6px 14px 6px 10px; flex: 0 0 auto; -} -.activity-back-arrow { font-size: 22px; line-height: 1; font-weight: bold; } -.activity-active-filter { - font-weight: 700; color: #FFA500; text-transform: uppercase; - font-size: 13px; letter-spacing: .03em; -} - -.oasis-bottombar .bb-item { min-height: 48px; } -.oasis-bottombar .bb-pair .bb-item { min-height: 44px; padding: 4px 10px; } -.oasis-mobile-menus .oasis-menu-btn { min-height: 48px; } -.pm-bubble .pm-actions .pm-btn { min-height: 40px; padding: 6px 12px; } -.score-btn, .vote-btn, .feed-action-btn { - min-height: 44px; min-width: 44px; - display: inline-flex; align-items: center; justify-content: center; -} -.score-btn:active, .vote-btn:active, .feed-action-btn:active { filter: brightness(.85); } - -.oasis-bottombar .bb-add .bb-ico { - background: #FFA500; color: #121212; border-radius: 999px; - width: 30px; height: 30px; display: inline-flex; - align-items: center; justify-content: center; - font-weight: bold; font-size: 20px; line-height: 1; -} -.bb-pick-grid { - display: grid; grid-template-columns: repeat(3, 1fr); - gap: 8px; width: 100%; margin-top: 8px; -} -.bb-pick-form { margin: 0; display: block; } -.bb-pick-btn { - display: flex; flex-direction: column; align-items: center; - justify-content: center; gap: 6px; width: 100%; - min-height: 76px; padding: 10px 6px; box-sizing: border-box; - background: #1c1c1c; border: 1px solid #333; border-radius: 12px; color: #eee; -} -.bb-pick-btn.active { border-color: #FFA500; background: #2a2412; } -.bb-pick-ico { font-size: 26px; color: #FFA500; line-height: 1; } -.bb-pick-lbl { font-size: 11px; text-align: center; line-height: 1.2; } - - -/* Ocultar los checkboxes nativos del drawer (nav-left/right-toggle) — si no, salen 2 cuadrados blancos arriba */ -.oasis-nav-side-toggle { - position: absolute; - width: 1px; - height: 1px; - opacity: 0; - pointer-events: none; - margin: 0; -} diff --git a/src/configs/oasis-config.json b/src/configs/oasis-config.json index 6474298..812f3fa 100644 --- a/src/configs/oasis-config.json +++ b/src/configs/oasis-config.json @@ -1,6 +1,6 @@ { "themes": { - "current": "OasisMobileUX" + "current": "OasisMobile" }, "ux": { "current": "blocks"