Mocha-2023-RecRoom-Server/wwwroot/recnet/community-board.css

.community-board-admin {
    margin: 0 0 20px;
    padding: 0;
    overflow: hidden;
    border-color: #4b3561;
    background: linear-gradient(145deg,#1b1522,#120e17);
}

.community-board-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #493558;
    background: linear-gradient(110deg,rgba(111,53,210,.24),rgba(28,24,34,.2));
}

.community-board-heading h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 3px 0 2px;
}

.community-board-heading h2 i {
    color: #c28aff;
}

.community-board-heading p {
    margin: 0;
    color: var(--muted);
}

.community-board-save {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.community-board-save .primary-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
}

.community-board-status {
    color: #a9dfbd;
    font-size: 11px;
}

.community-board-status.error {
    color: #ff9baa;
}

.community-board-canvas {
    display: grid;
    grid-template-columns: minmax(190px,.82fr) minmax(280px,1.25fr) minmax(210px,.9fr);
    gap: 12px;
    padding: 16px;
    background: radial-gradient(circle at 50% 10%,rgba(137,73,205,.13),transparent 46%),#0e0b12;
}

.community-board-left {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}

.community-board-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #503b5e;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg,#2a2132,#211929);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.community-card-label {
    display: block;
    color: #f1e3ff;
    font: 900 15px var(--futura-extra);
    letter-spacing: .01em;
}

.community-card-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.community-card-heading small {
    color: #a99caf;
    font-size: 9px;
}

.community-featured-card {
    padding: 0;
    overflow: hidden;
}

.community-featured-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 190px;
    padding: 15px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.community-featured-button:hover {
    background: rgba(174,103,255,.09);
}

.community-featured-button .community-card-label {
    margin-bottom: 10px;
}

.community-featured-button img {
    width: 68px;
    height: 68px;
    border: 3px solid #aa72e7;
    border-radius: 50%;
    object-fit: cover;
    background: #18111e;
}

.community-featured-button img.is-broken {
    opacity: .15;
}

.community-featured-button strong {
    max-width: 100%;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 900 17px var(--futura-extra);
}

.community-featured-button small {
    color: #bcb0c5;
}

.community-add-orb {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    border: 1px dashed #a873dc;
    border-radius: 50%;
    background: #392748;
    color: #d8b0ff;
    font-size: 27px;
}

.community-edit-hint {
    margin-top: 10px;
    color: #b990df;
    font-size: 10px;
}

.community-rooms-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.community-rooms-card strong {
    display: block;
    margin-top: 2px;
    color: #c899f7;
    font-size: 11px;
}

.community-rooms-card p {
    margin: 6px 0 0;
    color: #aaa0b1;
    font-size: 11px;
    line-height: 1.35;
}

.community-pinned-list {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.community-pinned-list span {
    max-width: 100%;
    padding: 4px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    background: #3c2850;
    color: #dbbbfa;
    font-size: 9px;
}

.community-pinned-list .empty-slot {
    background: #241c2a;
    color: #8e8295;
}

.community-inline-button {
    width: 100%;
    padding: 9px;
    border: 1px solid #724c94;
    border-radius: var(--radius-sm);
    background: #31203f;
    color: #ead8fb;
    font: 800 11px system-ui;
    cursor: pointer;
}

.community-inline-button:hover {
    background: #442b59;
}

.community-photo-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.community-photo-tile,.community-video-tile {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #5e466e;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg,#3c3044,#2b2232);
    color: #caa4e8;
    cursor: pointer;
}

.community-photo-tile {
    aspect-ratio: 1;
}

.community-photo-tile>i,.community-video-tile>i {
    font-size: 25px;
}

.community-photo-tile:hover,.community-video-tile:hover {
    border-color: #b678ef;
    box-shadow: 0 0 0 2px rgba(171,103,235,.12);
}

.community-photo-tile img,.community-video-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-photo-tile img.is-broken,.community-video-tile img.is-broken {
    opacity: .15;
}

.community-photo-tile span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(20,12,25,.82);
    color: #fff;
    font-size: 10px;
    opacity: 0;
    transition: .15s opacity;
}

.community-photo-tile:hover span {
    opacity: 1;
}

.community-videos-card {
    display: flex;
    flex-direction: column;
}

.community-video-grid {
    display: grid;
    grid-template-rows: repeat(3,minmax(80px,1fr));
    gap: 10px;
    min-height: 0;
    flex: 1;
}

.community-video-tile {
    min-height: 90px;
}

.community-video-tile span {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 10px 7px;
    background: linear-gradient(transparent,rgba(12,8,15,.92));
    color: #fff;
    text-align: left;
}

.community-video-tile span strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.community-board-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px 16px;
    background: #0e0b12;
}

.community-action-card {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #543e63;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,#30243a,#251b2d);
    color: #f8edff;
    text-align: left;
    cursor: pointer;
}

.community-action-card:hover {
    border-color: #a56ed6;
    background: linear-gradient(135deg,#3b2949,#2d2036);
}

.community-action-card>i:first-child {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: #4a2d61;
    color: #d7a9ff;
    font-size: 16px;
}

.community-action-card>span {
    display: grid;
    min-width: 0;
}

.community-action-card strong {
    font: 900 14px var(--futura-extra);
}

.community-action-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #a99eaf;
    font-size: 9px;
}

.community-action-card>i:last-child {
    color: #806d89;
    font-size: 11px;
}

.community-board-dialog {
    width: min(650px,calc(100% - 28px));
    max-height: min(86vh,820px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #5b426b;
    border-radius: var(--radius-lg);
    background: #1a1420;
    color: #f6f0f9;
    box-shadow: 0 30px 100px rgba(0,0,0,.72);
}

.community-board-dialog::backdrop {
    background: rgba(6,3,8,.8);
    backdrop-filter: blur(5px);
}

.community-board-dialog form {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    max-height: min(86vh,820px);
}

.community-dialog-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #493653;
    background: #211827;
}

.community-dialog-heading h3 {
    margin: 2px 0 0;
    font: 900 22px var(--futura-extra);
}

.community-dialog-heading .dialog-close {
    position: static;
}

.community-dialog-body {
    display: grid;
    gap: 13px;
    padding: 18px 20px;
    overflow: auto;
}

.community-dialog-body>label,.community-room-fields label {
    display: grid;
    gap: 5px;
    color: #b7acbe;
    font-size: 11px;
    font-weight: 700;
}

.community-dialog-body input,.community-dialog-body textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #54425e;
    border-radius: var(--radius-sm);
    background: #100c13;
    color: #fff;
    font: 12px system-ui;
    outline: 0;
}

.community-dialog-body textarea {
    resize: vertical;
}

.community-dialog-body input:focus,.community-dialog-body textarea:focus {
    border-color: #a774ff;
    box-shadow: 0 0 0 3px rgba(167,116,255,.13);
}

.community-dialog-help {
    margin: 0;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: #241a2c;
    color: #b9aebe;
    font-size: 11px;
}

.community-dialog-preview {
    width: 100%;
    max-height: 260px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: #0d0910;
}

.community-room-fields {
    display: grid;
    gap: 9px;
}

.community-room-fields fieldset {
    display: grid;
    grid-template-columns: 100px minmax(130px,.8fr) minmax(180px,1.2fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid #45344e;
    border-radius: var(--radius-md);
}

.community-room-fields legend {
    padding: 0 5px;
    color: #cfa8f2;
    font-size: 10px;
}

.community-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #493653;
    background: #151019;
}

.community-dialog-actions .danger-button {
    margin-right: auto;
    padding: 10px 12px;
    border: 1px solid #8b3c4b;
    border-radius: var(--radius-sm);
    background: #6f2635;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.community-dialog-actions .secondary-button,.community-dialog-actions .primary-button {
    padding: 10px 13px;
}

.community-board-unavailable .community-board-canvas,.community-board-unavailable .community-board-bottom {
    opacity: .45;
    pointer-events: none;
}

@media (max-width:1050px) {
    .community-board-canvas {
        grid-template-columns: minmax(180px,.7fr) minmax(260px,1.3fr);
    }
    .community-videos-card {
        grid-column: 1/-1;
    }
    .community-video-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        grid-template-rows: 1fr;
    }
    .community-video-tile {
        aspect-ratio: 16/8;
    }
}

@media (max-width:760px) {
    .community-board-heading {
        display: grid;
    }
    .community-board-save {
        justify-content: flex-start;
    }
    .community-board-canvas {
        grid-template-columns: 1fr;
    }
    .community-board-left {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .community-videos-card {
        grid-column: auto;
    }
    .community-board-bottom {
        grid-template-columns: 1fr;
    }
    .community-room-fields fieldset {
        grid-template-columns: 1fr 1fr;
    }
    .community-room-fields fieldset label:last-child {
        grid-column: 1/-1;
    }
}

@media (max-width:520px) {
    .community-board-canvas {
        padding: 10px;
    }
    .community-board-left {
        grid-template-columns: 1fr;
    }
    .community-board-bottom {
        padding: 0 10px 10px;
    }
    .community-photo-grid {
        gap: 5px;
    }
    .community-video-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3,110px);
    }
    .community-video-tile {
        aspect-ratio: auto;
    }
    .community-dialog-actions {
        flex-wrap: wrap;
    }
    .community-dialog-actions button {
        flex: 1;
    }
    .community-dialog-actions .danger-button {
        flex-basis: 100%;
        margin-right: 0;
    }
    .community-room-fields fieldset {
        grid-template-columns: 1fr;
    }
    .community-room-fields fieldset label:last-child {
        grid-column: auto;
    }
}

.community-video-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0d0910;
}

.community-video-tile video.is-broken {
    opacity: .15;
}

.community-video-tile span.community-video-fallback {
    display: grid;
    place-items: center;
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    color: #b789d8;
    font-size: 24px;
}

.community-video-tile>span:last-child>i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
}

.community-upload-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: var(--space-4);
    border: 1px dashed #8058a1;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,#291d34,#201728);
    color: #eee1f7;
    cursor: pointer;
}

.community-upload-field:hover {
    border-color: #b97df0;
    background: linear-gradient(135deg,#33213f,#281b31);
}

.community-upload-field>span {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    column-gap: 10px;
    align-items: center;
}

.community-upload-field>span>i {
    grid-row: 1/3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: #4a2d61;
    color: #d9b2ff;
}

.community-upload-field strong {
    font-size: 12px;
}

.community-upload-field small {
    color: #9f94a7;
    font-size: 9px;
    font-weight: 500;
}

.community-upload-field input[type=file] {
    width: min(220px,100%);
    padding: 7px;
    border: 1px solid #564061;
    background: #140f18;
    font-size: 10px;
    cursor: pointer;
}

.community-upload-field input[type=file]::file-selector-button {
    margin-right: 7px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: #6d3ca0;
    color: #fff;
    font: 700 10px system-ui;
    cursor: pointer;
}

.community-upload-field.compact {
    padding: 10px 14px;
}

.community-upload-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #776c80;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.community-upload-divider:before,.community-upload-divider:after {
    content: "";
    height: 1px;
    flex: 1;
    background: #44354c;
}

.community-media-preview {
    overflow: hidden;
    border: 1px solid #4f3a5c;
    border-radius: var(--radius-md);
    background: #0d0910;
}

.community-dialog-preview,.community-dialog-video {
    display: block;
    width: 100%;
    height: min(310px,36vh);
    max-height: none;
    object-fit: contain;
    background: #09060b;
    border-radius: 0;
}

.community-dialog-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #09060b;
}

.community-dialog-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.community-dialog-video-poster {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    background: #09060b;
}

.community-dialog-video-poster img {
    width: 100%;
    height: min(310px,36vh);
    object-fit: contain;
}

.community-dialog-video-poster>i {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding-left: 3px;
    border-radius: 50%;
    background: rgba(92,46,128,.9);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.community-media-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 190px;
    color: #776a80;
}

.community-media-empty i {
    font-size: 30px;
    color: #684b79;
}

.community-media-empty span {
    font-size: 10px;
}

.community-upload-status {
    min-height: 18px;
}

.community-upload-status.admin-error {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
}

@media (max-width:620px) {
    .community-upload-field {
        grid-template-columns: 1fr;
    }
    .community-upload-field input[type=file] {
        width: 100%;
    }
    .community-dialog-preview,.community-dialog-video,.community-dialog-video-poster img {
        height: 230px;
    }
}