MosisService/base-apps/ui/layout.rcss

/* ==============================================
   Layout Components: Reusable App Layout Structure
   System status bar, app bar, navigation bar
   ============================================== */

/* ============== System Status Bar ============== */
/* Top bar showing time, signal, wifi, battery */

.system-status-bar {
    height: 36px;
    padding: 0 16px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #FFFFFF;
    z-index: 1000;
}

.system-status-bar.bg-surface {
    background-color: #1E1E1E;
}

.system-status-time {
    font-weight: 500;
    font-size: 16px;
}

.system-status-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.system-status-icons img {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

/* ============== App Bar ============== */
/* Title bar with back button and optional actions */

.app-bar {
    height: 72px;
    padding: 0 8px;
    background-color: #1E1E1E;
    display: flex;
    align-items: center;
    z-index: 900;
}

.app-bar.transparent {
    background-color: transparent;
}

.app-bar.primary {
    background-color: #121212;
}

.app-bar-back {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 28px;
}

.app-bar-back:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.app-bar-back:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.app-bar-back img {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.app-bar-title {
    flex: 1;
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
    padding-left: 8px;
}

.app-bar-actions {
    display: flex;
    gap: 4px;
}

.app-bar-action {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 28px;
}

.app-bar-action:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.app-bar-action:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.app-bar-action img {
    width: 28px;
    height: 28px;
    pointer-events: none;
}

/* ============== System Navigation Bar ============== */
/* Bottom bar with back, home, and recent buttons */

.system-nav-bar {
    height: 56px;
    background-color: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
}

.system-nav-bar.transparent {
    background-color: rgba(10, 10, 10, 0.9);
}

.system-nav-btn {
    width: 72px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 24px;
}

.system-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.system-nav-btn:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.system-nav-btn img {
    width: 28px;
    height: 28px;
    pointer-events: none;
    opacity: 0.8;
}

/* Home button - pill shape */
.system-nav-home {
    width: 96px;
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
}

.system-nav-home:hover {
    opacity: 0.8;
}

.system-nav-home:active {
    opacity: 1.0;
}

/* ============== Screen Layout ============== */
/* Standard app screen structure */

.app-screen {
    width: 100%;
    height: 100%;
    background-color: #121212;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Content padding for nav bar */
.app-content.with-nav {
    padding-bottom: 56px;
}

/* Content padding for dock */
.app-content.with-dock {
    padding-bottom: 100px;
}

/* ============== Combined Header ============== */
/* Status bar + App bar combined */

.app-header {
    display: flex;
    flex-direction: column;
    background-color: #1E1E1E;
}

.app-header.transparent {
    background-color: transparent;
}

.app-header .system-status-bar {
    background-color: transparent;
}

/* ============== Notification Badge ============== */

.notification-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 20px;
    height: 20px;
    background-color: #CF6679;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* ============== Recording Indicator ============== */
/* Shown when camera/mic is active */

.recording-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    background-color: #F44336;
    border-radius: 6px;
    animation: recording-pulse 1.5s ease-in-out infinite;
}

@keyframes recording-pulse {
    0%, 100% { opacity: 1.0; }
    50% { opacity: 0.4; }
}

/* ============== Divider ============== */

.header-divider {
    height: 1px;
    background-color: #333333;
}