/* General styles*/ span { padding: 2px; } .styled-link { color: #FFA500; text-decoration: none; } p { white-space: pre-wrap; } hr { border: none; border-top: 1px solid #FFA500; margin: 10px 0; width: 100%; } /* Textarea, input, select styles */ textarea, input, select { background-color: #444; color: #FFA500; border: 1px solid #333; padding: 10px; border-radius: 5px; width: 80%; font-size: 1em; margin-top: 10px; } input[type="text"], input[type="email"], input[type="password"], textarea { margin-bottom: 15px; } /* Body and overall page styles */ html { color: #FFA500; } body { font-family: sans-serif; background-color: #000; color: #FFA500; margin: 0; padding: 0; display: flex; flex-direction: column; } /* Link styles */ a { color: #FFA500; text-decoration: underline; } a:hover { text-decoration: underline; } .header { display: flex; justify-content: space-between; padding: 10px; align-items: center; } .header-content { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; } .avatar-profile { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .created-at, .author-name, .about-time, .time { margin-right: 10px; white-space: nowrap; } .author-name { font-weight: bold; } .created-at, .about-time, .time { font-size: 0.9rem; color: #ccc; } .time { font-size: 0.8rem; color: gray; } .time a { color: inherit; text-decoration: none; } form-button-group { display: flex; gap: 10px; flex-wrap: nowrap; justify-content: start; } .wallet-form-button-group-center { display: inline-flex; gap: 10px; justify-content: space-between; padding: 10px; align-items: center; } .conn-buttons { display: inline-flex; justify-content: space-between; padding: 10px; align-items: center; gap: 10px; } .left-bar { display: flex; align-items: center; } .right-bar { display: flex; align-items: center; } .search-input { width: 380px; height: 38px; } nav ul { list-style-type: none; padding: 0; } nav ul li { margin: 5px 0; } /* Logo and Navigation */ .logo-icon { width: 50px; height: auto; margin-right: 15px; } nav ul { display: flex; list-style: none; padding: 2px; margin: 0; } nav ul a { color: #FFA500; text-decoration: underline; padding: 10px; display: flex; } nav ul li { margin-right: 10px; padding: 2px; } nav ul li a { color: #FFA500; text-decoration: none; padding: 2px; display: block; } nav ul li a:hover { color: #FFD700; padding: 2px; text-decoration: underline; } /* nav menus */ .oasis-nav-group { list-style: none; margin-bottom: 0.75rem; } .oasis-nav-toggle { display: none; } .oasis-nav-header { display: flex; align-items: center; justify-content: flex-start; cursor: pointer; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #ffb400; transition: background 0.2s ease, color 0.2s ease; text-align: left; border: 1px solid rgba(255, 180, 0, 0.6); border-radius: 4px; margin: 0 0.25rem; box-sizing: border-box; } .oasis-nav-header:hover { background: rgba(255, 255, 255, 0.05); color: #ffd36a; } .oasis-nav-arrow { font-size: 0.7rem; margin-left: auto; transition: transform 0.2s ease; } .oasis-nav-header + .oasis-nav-list { margin-top: 0.35rem; } .oasis-nav-list { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; padding-left: 0; margin: 0 0 0 0.75rem; } .oasis-nav-toggle:checked + .oasis-nav-header + .oasis-nav-list { max-height: 1000px; } .oasis-nav-toggle:checked + .oasis-nav-header .oasis-nav-arrow { transform: rotate(180deg); } .oasis-nav-list li { list-style: none; padding: 0; margin: 0; } .oasis-nav-list li a { display: flex; align-items: center; padding: 0.35rem 1.25rem 0.35rem 1.5rem; font-size: 0.85rem; text-decoration: none; opacity: 0.85; transition: opacity 0.15s ease; } .oasis-nav-list li a:hover { opacity: 1; } .oasis-nav-list .emoji { margin-right: 0.4rem; } .oasis-header-marquee { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 0.78rem; color: #ffc45a; } .oasis-header-marquee-inner { display: inline-block; padding: 0 1rem; animation: oasis-marquee 30s linear infinite; } .oasis-marquee-item { margin: 0 0.4rem; opacity: 0.9; } .oasis-marquee-separator { margin: 0 0.4rem; opacity: 0.5; } @keyframes oasis-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Main content area + Menu */ /* .main-content { border: 2px solid red !important; } .sidebar-left { border: 2px solid blue !important; } .main-column { border: 2px solid green !important; } .sidebar-right { border: 2px solid orange !important; } */ .sidebar-left, .sidebar-right { background-color: #222; border: 1px solid #444; padding: 10px; min-width: 180px; max-width: 260px; flex-shrink: 0; box-sizing: border-box; } .main-content { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; box-sizing: border-box; gap: 10px; min-width: 0; max-width: 100vw; } .main-column pre, .main-column code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .main-column img { max-width: 100%; height: auto; display: block; } .main-column { background-color: #333; padding: 20px; flex-grow: 1; min-width: 0; max-width: 100%; border-radius: 5px; border: 1px solid #333; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere; } .main-column > *, .main-column details, .main-column section, .main-column article { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; } .main-column details, .main-column section { width: 100%; max-width: 100%; box-sizing: border-box; } .sidebar-left nav ul, .sidebar-right nav ul { display: block; } .sidebar-left nav ul li, .sidebar-right nav ul li { margin-bottom: 10px; } .sidebar-left nav ul li a, .sidebar-right nav ul li a, .header nav ul li a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background-color: #1d1d1d; text-decoration: none; font-size: 15px; color: #ffa300; border: 1px solid #333; transition: background-color 0.2s ease, border-color 0.2s ease; } .sidebar-left nav ul li a:hover, .sidebar-right nav ul li a:hover, .header nav ul li a:hover { background-color: #2a2a2a; border-color: #555; } /* Header layout */ .header { display: flex; justify-content: space-between; padding: 10px; align-items: center; } .top-bar-left, .top-bar-mid, .top-bar-right { display: flex; align-items: center; gap: 10px; border: 0px; } .top-bar-left { justify-content: flex-start; } .top-bar-mid { justify-content: center; } .top-bar-right { justify-content: flex-end; } .top-bar-left nav ul, .top-bar-mid nav ul, .top-bar-right nav ul { padding: 0; margin: 0; overflow-x: auto; } .logo-icon { width: 40px; height: 40px; margin-right: 10px; } /* Section styles */ section { margin-bottom: 20px; color: #FFA500; } ul { padding: 1; margin: 10px 0; } ul li { margin: 10px 0; } /* Buttons */ button, input[type="submit"], input[type="button"] { background-color: #FFA500; color: #000; border: 1px solid #FFA500; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: all 0.3s ease; margin-top: 4.5px; } button:hover, input[type="submit"]:hover, input[type="button"]:hover { background-color: #FFD700; border-color: #FFD700; } /* Tables */ table { width: 100%; border-collapse: collapse; margin-top: 20px; border: 1px solid #333; } table th, table td { padding: 10px; border: 1px solid #444; text-align: left; } table th { background-color: #222; } table tr:nth-child(even) { background-color: #444; } /* Media queries */ @media (max-width: 768px) { .main-content { flex-direction: column; gap: 20px; } .sidebar-left, .sidebar-right { width: 100%; display: block; } .main-column { width: 100%; } } @media (max-width: 480px) { body { font-size: 14px; } h1, h2, h3 { font-size: 1.5em; } input, select { font-size: 0.9em; } } /* general styles */ div { margin-bottom: 20px; padding: 20px; border-radius: 10px; background-color: #222; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease-in-out; overflow: hidden; } div .header-content{ width: 35%; } h1 { color: #FFA500; font-weight: bold; margin: 0; } .md-mention { font-size: 1.5em; font-weight: bold; margin: 20px 0; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; user-select: text; } article { font-size: 1.1em; color: #FFF; margin-bottom: 20px; } .thread-view { width: 90%; } thread-container { width: 95%; } .profile { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 10px; } .profile-metrics { display: flex; flex-direction: column; gap: 6px; } .profile-metrics .inhabitant-last-activity { align-self: center; } .inhabitant-last-activity .label { margin-right: 6px; } .avatar-container { display: flex; flex-direction: column; align-items: center; padding: 20px; border-radius: 16px; box-shadow: 0 8px 20px rgba(255, 165, 0, 0.25); max-width: 300px; margin: 0 auto 20px auto; transition: transform 0.3s ease; } .avatar-container:hover { transform: scale(1.05); } .avatar { width: 140px; height: 140px; border-radius: 50%; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(255, 140, 0, 0.4); object-fit: cover; transition: border-color 0.3s ease; } .avatar:hover { border-color: #FFA500; } .name { font-size: 1.5em; font-weight: bold; } footer { clear: both; margin-top: 20px; padding: 10px 0; } footer div { display: flex; gap: 10px; } footer a { background-color: #FFA500; color: #000; padding: 8px 16px; border-radius: 5px; text-decoration: none; text-align: center; margin: 5px 0; transition: background-color 0.3s ease; } footer a:hover { background-color: #FFD700; border-color: #FFD700; } footer .btn { background-color: #FFA500; color: #000; padding: 8px 16px; border-radius: 5px; text-align: center; text-decoration: none; } footer .btn:hover { background-color: #FFD700; border-color: #FFD700; } footer .btn:hover { background-color: #007B9F; } /* Post preview */ .mention { font-weight: bold; color: #ffcc00; text-decoration: none; } .mention:hover { text-decoration: underline; } .post-preview img { display: block; margin: 1em 0; max-width: 100%; border-radius: 8px; border: 2px solid #555; } .post-preview audio, .post-preview video { display: block; margin: 1.2em 0; max-width: 100%; } .thread-reply-item { margin-bottom: 18px; } .thread-reply-item:last-child { margin-bottom: 0; } .thread-reply-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 0; border: none !important; background: transparent !important; box-shadow: none !important; } .thread-reply-footer .inline-form { display: inline-flex; margin: 0; } .thread-reply-footer .inline-form button { margin: 0; } .publish-textarea { min-height: 10em; padding: 0.75em; border: 1px solid #444; border-radius: 6px; font-family: sans-serif; font-size: 1em; line-height: 1.4; } .preview-text { background-color: #444; color: #FFA500; border: 1px solid #333; padding: 10px; border-radius: 5px; width: 80%; font-size: 1em; white-space: pre-wrap; word-wrap: break-word; line-height: 1.4; } /* Section, article, and message word-wrap */ section, article, .message, .profile { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } article img { max-width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; } /* Filters */ button.filter-btn, button.create-button { padding: 10px 20px; margin-right: 10px; border-radius: 5px; border: 1px solid; cursor: pointer; transition: background-color .2s, border-color .2s; } button.filter-btn { background-color: #ff6600; border-color: #ff3300; color: #fff; } button.filter-btn:hover, button.filter-btn.active { background-color: #ff9900; border-color: #e68a00; color: #000; } button.create-button { background-color: #ffcc00; border-color: #e6b800; color: #000; } button.create-button:hover { background-color: #e6b800; border-color: #cca300; } /* Bookmarks */ .bookmark-form input[type="text"], .bookmark-form textarea, .bookmark-form select { width: 100%; padding: 6px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .bookmark-form input[type="url"] { max-width: 800px; } .bookmark-form textarea { height: 80px; } .bookmark-form select { width: auto; max-width: 200px; } .bookmark-form label { margin-bottom: 15px; padding: 6px; } .bookmark-tags { margin-top: 1em; } .bookmark-url { color: #ff6600; text-decoration: none; font-weight: bold; font-size: 1.2em; word-wrap: break-word; margin-bottom: 1em; } .bookmark-url:hover { text-decoration: underline; } .filter-box { padding: 16px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.18); } .filter-box__input { width: 100%; box-sizing: border-box; height: 42px; padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12); color: #ffd700; outline: none; } .filter-box__input::placeholder { color: rgba(255, 215, 0, 0.75); } .filter-box__controls { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; } .filter-box__select { box-sizing: border-box; height: 36px; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12); color: inherit; min-width: 170px; } .filter-box__button { height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.16); color: #ffd700; } .bookmark-topbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border:0px; } .bookmark-topbar-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .bookmark-topbar-left form { margin: 0; } .bookmark-actions { display: flex; gap: 8px; flex-wrap: wrap; border: 0px; } .tags-header h2 { color: #ffa300; } .tags-container { display: flex; flex-wrap: wrap; } .tag-link { display: inline-block; color: #ff6600; padding: 0.2em 0.6em; font-size: 0.9em; text-decoration: none; margin-right: 1em; margin-bottom: 0.5em; } .tag-checkboxes-table { margin-top: 1rem; width: 100%; border-collapse: collapse; color: yellow; } .tag-checkboxes-table td { padding: 0.5rem 1rem; white-space: nowrap; vertical-align: middle; } .input-checkbox { transform: scale(1.2); } /* Inhabitants */ .inhabitant-card { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 1rem; } .inhabitant-left { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 300px; flex: 0 0 300px; } .inhabitant-left a { display: block; width: 100%; } .inhabitant-left h2 { margin: 4px 0 0; line-height: 1.1; } .inhabitant-photo { width: 100% !important; height: 100% !important; border-radius: 50%; border: 3px solid #ffa500; display: block; margin: 0 auto; } .inhabitant-photo-details { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 50%; border: 2px solid #ffa500; display: block; margin: 0 auto; } .inhabitant-details { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .inhabitant-last-activity { margin-top: 4px; display: flex; border: 0; align-items: center; gap: 6px; } .activity-dot { width: 12px; height: 12px; border-radius: 50%; } .activity-dot.green { background-color: #2ecc71; } .activity-dot.orange { background-color: #f39c12; } .activity-dot.red { background-color: #e74c3c; } /* Documents */ .pdf-viewer-container { width: 100%; max-width: 100%; background: #1e1e1e; margin-bottom: 1rem; padding: 1rem; border-radius: 6px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .pdf-viewer-container canvas { display: block; margin: 0 auto; border: 1px solid #333; background-color: #fff; } .pdf-viewer-container div { margin-top: 1rem; } .pdf-viewer-container button { background-color: #2d2d2d; color: #eee; border: none; padding: 0.4rem 0.8rem; font-size: 1rem; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; } .pdf-viewer-container button:hover { background-color: #444; } .pdf-viewer-container span { color: #ccc; margin: 0 1rem; font-family: monospace; } /* CVs */ .cv-photo { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; } .cv-item { padding: 20px; border: 1px solid #ddd; margin-bottom: 20px; } .cv-section { padding: 20px; } .no-cv { padding: 20px; text-align: center; } .checkbox-oasisContributor { display: table-cell; align-items: center; gap: 0.5em; } .action-card { padding: 1em; border-bottom: 1px solid #333; margin-bottom: 1em; } .action-meta { font-size: 0.9em; color: #FFA500; } .feed-image { max-width: 100%; height: auto; border-radius: 6px; } .feed-search-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .feed-search-input { flex: 1 1 260px; min-width: 220px; height: 40px; box-sizing: border-box; } .feed-search-btn { height: 40px; display: inline-flex; align-items: center; box-sizing: border-box; } .type-label { font-weight: bold; margin-top: 0.5em; } .content-text { margin: 0.5em 0; } .filters { margin-bottom:16px; } .mode-buttons { display:flex; gap:8px; margin-top:16px; } .mention-avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } .tribe-card-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; } .tribe-row { display: flex; gap: 24px; margin-bottom: 32px; } .tribe-card { width: 50%; background-color: #111; padding: 16px; border-radius: 8px; } .tribe-feed { width: 50%; background-color: #111; padding: 16px; border-radius: 8px; } .tribe-feed-full { width: 100%; background-color: #222; padding: 16px; border-radius: 8px; box-sizing: border-box; } .feed-actions { display: flex; gap: 8px; margin-bottom: 16px; } .vote-actions { display: flex; gap: 8px; margin-bottom: 16px; } .feed-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .feed-item { background-color: #1c1c1c; padding: 12px; border-radius: 6px; color: #f0f0f0; } .feed-item p { margin: 4px 0; } .feed-item form { margin-top: 8px; } .feed-item button { background-color: orange; color: black; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; } .feed-item button:disabled { background-color: #555; cursor: not-allowed; } .tribe-feed .feed-row, .tribe-feed-full .feed-row { display: flex; align-items: flex-start; gap: 12px; } .tribe-feed .refeed-column, .tribe-feed-full .refeed-column { flex: 0 0 68px; min-width: 68px; max-width: 68px; padding: 10px 8px; } .tribe-feed .refeed-column h1, .tribe-feed-full .refeed-column h1 { margin: 0 0 8px 0; font-size: 24px; } .tribe-feed .refeed-btn, .tribe-feed-full .refeed-btn { padding: 6px 8px; font-size: 12px; width: 100%; } .tribe-feed .feed-main, .tribe-feed-full .feed-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 720px) { .tribe-feed .feed-row, .tribe-feed-full .feed-row { flex-direction: column; } .tribe-feed .refeed-column, .tribe-feed-full .refeed-column { width: 100%; min-width: 0; max-width: none; align-items: flex-start; } } .tribe-feed .feed-actions, .tribe-feed-full .feed-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .tribe-feed .feed-actions form, .tribe-feed-full .feed-actions form, .tribe-feed .refeed-column form, .tribe-feed-full .refeed-column form { margin: 0; } .tribe-feed-compose { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; align-items: end; } .tribe-feed-compose textarea { width: 100%; min-width: 0; padding: 12px; border-radius: 10px; border: 1px solid #444; background: #222; color: #eee; resize: vertical; min-height: 120px; line-height: 1.45; box-sizing: border-box; } .tribe-feed-compose .tribe-feed-send { height: 40px; padding: 0 14px; border-radius: 10px; white-space: nowrap; } @media (max-width: 720px) { .tribe-feed-compose { grid-template-columns: 1fr; } .tribe-feed-compose .tribe-feed-send { width: 100%; } } .tribes-container{ display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:20px; margin-top:16px; } .tribe-card { padding:16px; background:#2c2f33; border-radius:8px; border:1px solid #444; } .tribe-details { display: flex; background: #2c2f33; border-radius: 12px; padding: 24px; grid-template-columns: 1fr 2fr; gap: 24px; } .tribe-main { flex-direction: column; gap: 16px; } .tribe-side { background: #2c2f33; width: 60%; flex-direction: column; gap: 16px; } .filter-btn,.create-button,.edit-btn,.delete-btn,.join-btn,.leave-btn,.buy-btn { padding:8px 12px; border:none; border-radius:4px; cursor:pointer; background:#ff6600; color:#fff; } .filter-btn.active { background:#ffa500; } .create-button { background:#ffcc00; color:#000; } .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; padding:10px; } .gallery-item img { width:100%; max-height:200px; object-fit:cover; border-radius:6px; transition:transform .2s; } .gallery-item:hover img { transform:scale(1.05); } .tribe-detail-image { width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; border-radius:6px; } .activity-image-preview { width: 400px; height: 300px; object-fit: contain; border: 0px; } .media-preview { max-width: 100%; height: auto; display: block; } .meme-checkbox { width: 1%; } .image-detail { width: 100%; max-width: 400px; max-height: 300px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; } .div-center.image-form .image-detail { max-width: 200px; max-height: 150px; object-fit: contain; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; padding: 10px; } .gallery-item img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 6px; transition: transform .2s; } .gallery-item:hover img { transform: scale(1.05); } .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); justify-content: center; align-items: center; z-index: 10000; } .lightbox:target { display: flex; } .lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 6px; } .lightbox-close { position: absolute; top: 15px; right: 60px; width: 42px; height: 42px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; color: #fff; font-size: 1.5em; text-align: center; line-height: 32px; text-decoration: none; } /* Opinions */ .voting-buttons { display: flex; gap: 10px; margin-top: 10px; } .opinion-card { background-color: #1c1c1c; border: 1px solid #333; border-radius: 10px; padding: 16px; margin-bottom: 24px; color: #FFA500; } .opinion-card h3 { margin-bottom: 8px; } .opinion-card p { margin: 4px 0; color: #FFD700; } /* Events */ .event-tags { margin-top: 12px; } .event-tags .tag { display: inline-block; background-color: #2a2a2a; color: #FFA500; padding: 4px 10px; margin: 4px 4px 0 0; border-radius: 6px; font-size: 13px; } /* Tasks */ .task-id { color: #FFA500; font-weight: bold; margin: 0; } /* Governance */ .vote-buttons-row { display: flex; gap: 10px; flex-wrap: nowrap; justify-content: start; } .conn-actions { display: flex; gap: 10px; margin-top: 10px; } .inhabitant-action { display: flex; gap: 10px; margin-top: 10px; } .transfer-actions { display: flex; gap: 10px; margin-top: 10px; } .transfer-topbar-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .transfer-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .transfer-voting-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .confirmations-block { margin-top: 6px; } .confirmations-progress { width: 260px; max-width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.12); appearance: none; } .confirmations-progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.12); } .confirmations-progress::-webkit-progress-value { background: rgba(255, 255, 255, 0.65); } .confirmations-progress::-moz-progress-bar { background: rgba(255, 255, 255, 0.65); } .transfer-range { display: flex; gap: 8px; align-items: center; } .transfer-amount-input { width: 120px; } .market-item-actions { display: flex; gap: 10px; margin-top: 10px; } .job-actions { display: flex; gap: 10px; margin-top: 10px; } .tribe-actions { display: flex; gap: 10px; margin-top: 10px; } .audio-actions { display: flex; gap: 10px; margin-top: 10px; } .video-actions { display: flex; gap: 10px; margin-top: 10px; } .document-actions { display: flex; gap: 10px; margin-top: 10px; } .event-actions { display: flex; gap: 10px; margin-top: 10px; } .feed-actions { display: flex; gap: 10px; margin-top: 10px; } .image-actions { display: flex; gap: 10px; margin-top: 10px; } .task-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .task-actions > form { margin: 0; } .task-actions .project-control-form, .task-actions .project-control-form--status { margin: 0; padding: 0; } .task-actions .project-control-form--status { display: flex; align-items: center; gap: 10px; } .task-actions .project-control-select, .task-actions .project-control-btn { margin: 0; } .task-actions button { display: inline-flex; align-items: center; justify-content: center; } .report-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .report-actions form{ margin:0; } .report-actions button, .report-actions select{ height:40px; } .cv-filter-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } .cv-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .card-salary { display: inline-block; font-weight: 700; font-size: 1.2em; letter-spacing: 0.02em; } .mode-buttons { display: flex; gap: 10px; margin-top: 10px; } /* Tags */ .tag-cloud-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 1em; width: 97%; height: auto; background: #111; border: 1px solid #333; border-radius: 8px; margin: 1em auto; gap: 0.8em; } .tag-cloud-item { display: inline-block; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease, color 0.2s ease; } .tag-cloud-item:hover { transform: scale(1.3); color: #FFA500 !important; z-index: 10; } /* Feed */ .feed-card { border: 1px solid #444; border-radius: 12px; padding: 16px; margin-bottom: 24px; background-color: #1c1c1c; } .feed-row { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; } .refeed-column { text-align: center; border-right: 1px solid #555; padding-right: 12px; } .refeed-column h1 { font-size: 28px; margin: 0; color: #FFA500; } .refeed-btn { margin-top: 10px; background-color: #FFA500; border: none; padding: 6px 12px; border-radius: 6px; font-weight: bold; color: #000; cursor: pointer; transition: background-color 0.2s ease-in-out; } .refeed-btn:hover { background-color: #cc8500; } .feed-main { flex: 1; } .feed-text { background-color: #2a2a2a; padding: 10px; border-radius: 6px; color: #FFD700; margin-bottom: 8px; margin-right: 15px; word-wrap: break-word; } .feed-main a { text-decoration: underline; } .feed-main a:hover { text-decoration: underline; } .votes-wrapper { margin-top: 16px; padding-top: 12px; border-top: 1px solid #444; } .votes { display: flex; flex-wrap: wrap; gap: 8px; } .vote-category { background-color: #333; color: #FFA500; padding: 6px 10px; border-radius: 6px; font-size: 14px; } .voting-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .vote-btn { background-color: #FFA500; border: none; color: #000; padding: 6px 10px; border-radius: 6px; font-weight: bold; cursor: pointer; } .vote-btn:hover { background-color: #cc8500; } /* Pixelia Grid */ .pixelia-form-wrap { display: flex; justify-content: flex-start; margin-bottom: 12px; } .pixel-color-000000 { background-color: #000000; } .pixel-color-ffffff { background-color: #ffffff; } .pixel-color-17f018 { background-color: #17f018; } .pixel-color-ffbb00 { background-color: #ffbb00; } .pixel-color-ff0000 { background-color: #ff0000; } .pixel-color-0000ff { background-color: #0000ff; } .pixel-color-ffff00 { background-color: #ffff00; } .pixel-color-00ff00 { background-color: #00ff00; } .pixel-color-00ffff { background-color: #00ffff; } .pixel-color-ff00ff { background-color: #ff00ff; } .pixel-color-a52a2a { background-color: #a52a2a; } .pixel-color-800080 { background-color: #800080; } .pixel-color-808000 { background-color: #808000; } .pixel-color-00bfff { background-color: #00bfff; } .pixel-color-d3d3d3 { background-color: #d3d3d3; } .pixel-color-ff6347 { background-color: #ff6347; } .pixel-empty { background-color: #1a1a1a; } .pixel-cell { width: 0.1px; height: 0.1px; } /* Market */ .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); justify-content: center; } .market-card { background-color: #2c2c2c; border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; text-align: center; } .market-comments { background: #2f2f2f; border-radius: 12px; padding: 12px; } .market-comments .votations-comment-card { background: #3a3a3a; } .countdown-strong { font-weight: 700; } .market-card-image { width: 100%; max-height: 150px; object-fit: contain; border-radius: 8px; margin-bottom: 15px; } .market-card-title { font-size: 1.3em; font-weight: bold; color: #ffd600; margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .market-card-description { font-size: 0.9em; color: #ccc; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .market-card-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 1.1em; color: #ffd600; } .market-card-footer .condition, .market-card-footer .stock { font-size: 1em; color: #ff9900; } .market-card-footer .stock { font-weight: bold; color: #ff0000; } .market-card.price { font-size: 1.3em; font-weight: bold; } /*avatar relationships*/ .relationship-status { display: flex; flex-direction: row; gap: 0.5rem; justify-content: center; margin: 0.8rem 0 0.5rem 0; } .status { padding: 0.2rem 0.6rem; border: 1px solid #555; border-radius: 4px; background-color: #2a2a2a; font-size: 0.9rem; color: #e0e0e0; } .status.mutual { border-color: #557d3b; color: #8bc34a; } .status.supporting { border-color: #997f2e; color: #f0c674; } .status.supported-by { border-color: #3a6f9c; color: #6ab0f3; } .status.blocked { color: #ff5555; border-color: #802020; } .status.blocked-by { color: #ff8888; border-color: #a04040; } .status.you { padding: 0.2rem 0.6rem; border: 1px solid #555; border-radius: 4px; background-color: #2a2a2a; font-size: 0.9rem; color: #FFDD44; border-color: #FF6A00; font-weight: bold; } /*forums*/ .forum-list { display: flex; flex-direction: column; gap: 0.5em; } .forum-card { display: flex; flex-direction: row; align-items: stretch; border-bottom: 1px solid #262626; padding: 12px 0 16px 0; gap: 1.1em; background: none; } .visit-forum-form { display: flex; justify-content: center; margin-top: 10px; } .forum-score-col { min-width: 78px; display: flex; align-items: center; justify-content: center; } .forum-score-box { background: #22201a; border-radius: 12px; box-shadow: 0 0 0.5em #111b; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; min-height: 134px; padding: 8px 0; } .forum-score-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; } .score-btn { background: #282818; color: #ffd740; border: none; width: 38px; height: 38px; font-size: 1.25em; border-radius: 8px; cursor: pointer; transition: background 0.13s; display: flex; align-items: center; justify-content: center; line-height: 1; } .score-btn:hover { background: #39391c; } .score-total { font-size: 2em; font-weight: bold; color: #ffd740; text-align: center; margin: 0; line-height: 1.1; min-height: 38px; display: flex; align-items: center; justify-content: center; } .forum-main-col { flex: 1; display: flex; flex-direction: column; gap: 0.22em; } .forum-header-row { display: flex; align-items: center; gap: 0.7em; margin-bottom: 2px; } .forum-category { color: #ff7300; background: #282818; font-weight: bold; font-size: 1em; text-decoration: underline; padding: 2px 7px; border-radius: 5px; margin-right: 0.4em; } .forum-title { color: #ff7300; font-size: 1.13em; font-weight: bold; text-decoration: underline; transition: color 0.15s; } .forum-title:hover { color: #ffd740; } .forum-body { margin: 0.15em 0 0.2em 0; font-size: 1em; color: #ffd740; } .forum-meta { font-size: 1em; align-items: center; color: #ffd740; margin: 0.1em 0 0 0; display: flex; gap: 1.3em; } .forum-footer { font-size: 0.97em; margin-top: 6px; display: flex; gap: 0.5em; align-items: center; } .date-link { color: #ffd740; font-family: monospace; font-size: 1em; } .user-link { color: #ffd740; font-weight: bold; text-decoration: underline dotted; } .mode-buttons-row { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 1.5em; } .mode-buttons-cols { flex: 1; display: flex; flex-wrap: wrap; gap: 0.6em; } .forum-comment { display: flex; flex-direction: column; gap: 12px; background: #282828; padding: 12px; margin-bottom: 8px; border-radius: 8px; transition: background 0.3s ease; } .comment-header { display: flex; align-items: center; justify-content: space-between; } .comment-body-row { display: flex; flex-direction: row; gap: 16px; } .comment-vote-col { min-width: 78px; display: flex; align-items: flex-start; justify-content: center; } .comment-text-col { flex: 1; display: flex; flex-direction: column; } .comment-form { display: flex; flex-direction: column; gap: 8px; } .comment-textarea { resize: vertical; width: 100%; padding: 8px; background: #1e1e1e; color: #ffd740; border: 1px solid #444; border-radius: 6px; font-size: 1em; } .comment-votes { font-size: 0.9em; color: #ffd740; } .comment-footer { font-size: 0.85em; display: flex; justify-content: space-between; color: #ffd740; } .date-link { color: #ffd740; font-size: 0.95em; } .user-link { color: #ffd740; font-weight: bold; font-size: 1em; } .forum-send-btn { background: #ff7300; color: #fff; border: none; padding: 8px 16px; font-size: 1em; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .forum-send-btn:hover { background: #ffd740; } .forum-owner-actions { margin-top: 8px; text-align: left; } .comment-votes .votes-count { margin-right: 12px; } .new-message-wrapper { margin-top: 16px; padding: 16px; border-radius: 8px; } .highlighted-reply { background-color: #ffe5b4 !important; } .forum-comment.highlighted-reply { background-color: #ffa400 !important; transition: background 0.3s ease; } .forum-comment.level-0 { margin-left: 0; } .forum-comment.level-1 { margin-left: 20px; } .forum-comment.level-2 { margin-left: 40px; } .forum-comment.level-3 { margin-left: 60px; } .forum-comment.level-4 { margin-left: 80px; } /*blockexplorer*/ .blockchain-view { font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif; background-color: #191b20; padding: 32px 16px; border-radius: 16px; box-shadow: 0 8px 36px rgba(0,0,0,0.16); color: #e7e7e7; max-width: 900px; margin: 0 auto; } .block { background: #23242a; border-radius: 16px; box-shadow: 0 2px 12px rgba(32,35,42,0.11); padding: 22px 24px; margin-bottom: 26px; transition: box-shadow 0.22s; position: relative; } .block-buttons { display: flex; justify-content: right; align-items: center; gap: 12px; } .button-container { display: flex; gap: 12px; justify-content: right; align-items: center; } .block:hover { box-shadow: 0 8px 32px rgba(35,40,50,0.18); } .block-row { display: flex; align-items: center; gap: 6px; } .blockchain-card-label { color: #ffa300; font-weight: bold; letter-spacing: 1.5px; line-height: 1.2; margin-bottom: 0; } .block-row--content { margin: 10px 0 0 0; } .block-info-table td { padding: 12px 15px; font-size: 14px; border: 1px solid #444; } .block-author { font-weight: 600; font-size: 14px; color: #ffb36a; background: rgba(255,179,106,0.08); padding: 3px 10px; border-radius: 8px; text-decoration: none; transition: color 0.12s; } .block-author:hover { color: #ffe0ba; } .block-timestamp { color: #f5c242; font-size: 12px; margin-right: 6px; } .block-content-preview, .block-content { background: #222326; border-radius: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.7; color: #f5c242; font-family: 'JetBrains Mono', 'Courier New', monospace; overflow-x: auto; } .block-content-preview pre { margin: 0; } .block-info-table { width: 100%; border-collapse: collapse; margin: 15px 0; } .block-info-table td { padding: 10px; border: 1px solid #444; font-size: 14px; } .json-content { white-space: pre-wrap; word-break: break-word; color: #f5c242; } .block-row--details { margin-top: 14px; position: relative; } .block-url { color: #ffb36a; font-size: 14px; text-decoration: none; font-weight: 500; transition: color 0.13s, border-color 0.13s; } .block-row--details .block-url { position: absolute; top: 0; right: 0; background: #1f2023; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; transition: background 0.12s, color 0.12s; } .block-row--details .block-url:hover { background: #292b36; color: #ffb36a; } .btn-singleview { background: #1e1f23; border: none; border-radius: 50%; padding: 7px 12px; cursor: pointer; font-size: 1.14em; color: #c6c6c6; box-shadow: none; transition: background 0.14s, color 0.14s; text-decoration: none; display: flex; align-items: center; justify-content: center; } .btn-singleview:hover { background: #2d2e34; color: #f8b92c; } .block-row--back { margin-top: 15px; } .block-content-label { color: #f5c242; font-size: 1.02em; margin-bottom: 8px; font-weight: 600; } .btn-back { background: #21232b; color: #d7d7d7; padding: 7px 22px; border-radius: 8px; text-decoration: none; border: none; font-size: 1.01rem; font-weight: 500; margin-top: 12px; transition: background 0.12s, color 0.13s; display: inline-block; } .btn-back:hover { background: #292b36; color: #ffb36a; } @media (max-width: 700px) { .blockchain-view { padding: 9vw 2vw; } .block, .block-single, .block--single { padding: 15px 5vw; } .mode-buttons-row { flex-direction: column; gap: 18px; } } /*inbox/pm*/ .pm-card.normal-pm { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #ffa300; background: transparent } .pm-headerline { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px } .pm-date { font-size: 12px; opacity: .7 } .pm-sep { opacity: .8 } .pm-spacer { flex: 1 } .pm-chars { font-size: 12px; opacity: .7 } .pm-subject { margin: 0 0 6px 0; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: pre-wrap } .pm-bot { opacity: .85 } .pm-body { margin-top: 6px } .pm-action-form { display: inline-block; margin: 0 } .pm-actions-block { width: 100%; max-width: 720px; border: 0; } .pm-actions { display: flex; gap: 10px; } .thread-level-0 { margin-left: 0 } .thread-level-1 { margin-left: 12px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-2 { margin-left: 24px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-3 { margin-left: 36px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-4 { margin-left: 48px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-5 { margin-left: 60px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-6 { margin-left: 72px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-7 { margin-left: 84px; border-left: 1px solid #e5e7eb; padding-left: 10px } .thread-level-8 { margin-left: 96px; border-left: 1px solid #e5e7eb; padding-left: 10px } /*projects*/ .project-actions { display: flex; justify-content: flex-start; align-items: center; gap: 10px; } .project-card.status-completed .badge{ background:rgba(59,130,246,.12); color:#93c5fd; border-color:rgba(59,130,246,.25); } .bookmark-actions.project-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; } .bookmark-actions.project-actions form { margin: 0; } .project-control-form { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .project-control-select, .project-control-input, .project-control-btn { height: 42px; } .project-control-select, .project-control-input { min-width: 220px; } .project-control-btn { white-space: nowrap; } .project-progress-input { max-width: 140px; min-width: 120px; } @media (max-width: 820px) { .project-control-select, .project-control-input { min-width: 180px; } .project-progress-input { min-width: 110px; } } .badge{ position:absolute; top:14px; right:14px; font-size:.75rem; letter-spacing:.02em; padding:6px 8px; border-radius:8px; border:1px solid var(--line); color:var(--muted); } .milestones, .bounties{ display:flex; flex-direction:column; gap:8px; } .milestone-item, .bounty-item{ padding:12px; border:1px solid var(--line); border-radius:12px; background:#121620; } .milestone-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:6px; } .milestone-title{ font-weight:600; } .milestone-percent{ padding:4px 8px; border-radius:8px; border:1px solid var(--line); font-size:.8rem; color:#b7c2d6; } .milestone-due{ color:#c9a86a; font-size:.85rem; } .bounty-main{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .bounty-title{ font-weight:600; } .bounty-amount{ font-variant-numeric: tabular-nums; padding:4px 8px; border-radius:8px; background:#18202f; border:1px solid var(--line); } .pledge-box{ margin-top:6px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#121620; display:grid; gap:10px; } .pledge-box form{ display:flex; gap:10px; flex-wrap:wrap; } .pledge-box input[type="number"]{ background:#0f1420; border:1px solid #2b3240; color:var(--text); padding:10px 12px; border-radius:10px; outline:none; } .pledge-box input[type="number"]:focus{ border-color:#3a475c; } @media (max-width: 420px){ .card-field{ grid-template-columns: 1fr; } .milestone-row{ flex-direction:column; align-items:flex-start; gap:6px; } } /*banking*/ .addr-form-card, .addr-list-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(255,255,255,0.03); padding: 20px; } .addr-form-card.wide { padding: 22px; } .addr-form .form-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; } .addr-form .form-input { padding: 0 14px; } .addr-form .form-input.xl { height: 50px; font-size: 16px; } .addr-form .form-actions { display: flex; margin-top: 8px; } .addr-list-card .form-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; } .addr-list-card .form-input { padding: 0 14px; } .addr-search input[type="text"]:focus, .addr-form .form-input:focus { outline: none; border-color: #ffa300; } .addr-form .form-actions .mini-btn { background: #ffa300; border: none; color: #fff; padding: 9px 14px; border-radius: 8px; cursor: pointer; } .addr-form .form-actions .mini-btn:hover { background: #ff7f00; } .bank-summary .bank-info-table tbody tr .synced { color: green; font-weight: bold; } .bank-summary .bank-info-table tbody tr .outdated { color: red; font-weight: bold; } .pub-item{border:1;border-radius:10px;background:none} .error-box{background:#222326;border:none;color:#f5c242;padding:12px;border-radius:8px;margin-top:8px} .error-title{margin:0 0 6px 0;font-weight:600} .error-pre{margin:0;white-space:pre-wrap;font-family:monospace} /* parliament */ .cycle-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; } .kpi { border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: .75rem; } .kpi__label { display: block; letter-spacing: .06em; text-transform: uppercase; color: var(--parl-accent, #ff9f1a); opacity: 1; } .kpi__value { font-weight: 600; } .method-badge, .method-hero { display: inline-flex; align-items: center; gap: .5rem; } .method-cell { text-align: center; } .leader-cell { text-align: center; } .mt-2 { margin-top: .5rem; } .parliament-actor-table { table-layout: auto; width: 100%; } .parliament-actor-table th, .parliament-actor-table td { vertical-align: top; } .parliament-actor-col { white-space: nowrap; width: 1%; text-align: left; } .parliament-actor-col .user-link { display: inline-block; } .parliament-description-col { white-space: normal; text-align: left; } .parliament-members-row td { padding-top: .5rem; } .parliament-members-list { margin: .25rem 0 0; padding-left: 1.25rem; } .parliament-members-list li { margin: .125rem 0; } .oasis-footer { display: flex; justify-content: center; align-items: center; padding: 2px 10px; border-top: 1px solid rgba(255,255,255,0.08); line-height: 1; min-height: 0; } .oasis-footer-center { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; line-height: 1; border:0px; } .oasis-footer-logo-link { display: inline-flex; align-items: center; line-height: 0; } .oasis-footer-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; display: block; } .oasis-footer-package-link, .oasis-footer-package-name, .oasis-footer-version, .oasis-footer-sep { line-height: 1; } .oasis-footer-package-link { text-decoration: none; } .oasis-footer-package-link, .oasis-footer-center a, .oasis-footer-center span, .oasis-footer-center strong { padding-top: 0; padding-bottom: 0; margin: 0; }