아카라이브 나무라이브 스타일 by kindongshin

/* ==UserStyle==
@name         나무라이브
@version      20230821.22.27
@namespace    ?
@var checkbox old "2016" 0 
@var checkbox oldsearch "2022 검색" 0 
@preprocessor   stylus
==/UserStyle== */
@-moz-document url-prefix("https://arca.live"),
url-prefix("https://adult.arca.live"),
url-prefix("https://namu.live") {
    html,
    html.theme-light {
        --color-bg-focus: #f7f7fc;
        --color-bg-body: #f2f2f5;
        --color-bg-badge: #00ad9c;
        --color-bg-navbar: #00ad9c;
        --color-board-category: #0275d8;
        --color-border-outer: #bbb;
    }

    .body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    .body .navbar-wrapper .navbar {
        padding: 0.2rem 1rem!important;
    }

    @media screen and (max-width: 991px) {
        .body .board-article {
            padding: 1.4rem 0 1rem 0;
        }

        .body .navbar-wrapper .navbar .search-form {
            top: 2.6rem;
        }
    }

    html .modal.modal-display-config .modal-content,
    html .modal.modal-display-config .modal-body select,
    .body .board-article .vote-area .item,
    .reply-form > .reply-form__container,
    .body .card,
    .reply-form > .reply-form__container > .reply-form-textarea-wrapper > .reply-form__submit-button-wrapper > .reply-form__submit-button {
        border-radius: unset;
    }

    .body .board-article > div {
        border-right: unset;
    }

    .body .nav-control {
        margin: unset;
    }

    .body .sidebar .sidebar-item {
        border: unset;
        border-radius: unset;
        padding: unset;
    }

    .body .board-article .article-list .board-category-wrapper .board-category .item a {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
    }

    .body .board-article .article-list .list-table .vrow.column .vcol.col-title .badge,
    .body .board-article .article-list .list-table .vrow.hybrid .vcol.col-title .badge {
        border: unset;
    }

    .body .board-article .pagination .page-item.active .page-link:hover {
        border-color: unset;
    }

    .body .navbar-wrapper .navbar .search-form {
        border-top: unset;
        background: var(--color-bg-badge);
    }
    .nav .nav-channel-search-input-wrapper > input {
        background-color: var(--color-bg-badge);
        border-radius: unset;
    }
    @media screen and (max-width: 575px) {
        .nav .nav-channel-search-input-wrapper {
            top: 2.8rem;
        }
    }
    button#removeAllBtn {
        background-color: var(--color-bg-badge);
        border-color: unset;
    }

    .body .navbar-wrapper {
        background: linear-gradient(45deg, #00b3a1 0, #00a495 30%, #008275 100%);
        border-bottom: 0;
    }

    .btn-danger {
        color: #fff;
        background-color: #d9534f;
        border-color: #d9534f;
    }

    a.btn.btn-sm.btn-arca.btn-arca-article-write {
        color: #fff;
        background-color: #5cb85c;
        border-color: #5cb85c;
    }

    .btn-info,
    button.btn.btn-arca.btn-sm {
        color: #fff;
        background-color: #5bc0de;
        border-color: #5bc0de;
    }

    .reply-form > .reply-form__container > .reply-form-textarea-wrapper > .reply-form__submit-button-wrapper > .reply-form__submit-button,
    .body .board-article .pagination .page-item.active .page-link {
        color: #fff;
        background-color: var( --color-board-category);
        border-color: var( --color-board-category);
    }

    .reply-form > .reply-form__container > .reply-form-textarea-wrapper > .reply-form__submit-button-wrapper > .reply-form__submit-button:hover {
        color: #fff;
        background-color: #025aa5;
        border-color: #01549b;
    }

    .body .board-article .pagination .page-item .page-link {
        color: var( --color-board-category);
    }

    .body .content-wrapper {
        background-color: var(--color-bg-main);
        border-color: var(--color-border-outer);
        border-width: 0 1px 1px;
        border-style: solid;
    }

    .body .footer {
        max-width: 1300px;
        background-color: var(--color-bg-main);
        margin: 1rem auto;
        padding: 1rem;
        border-color: var(--color-border-outer);
        border-width: 1px;
        border-style: solid;
    }

    .body .content-wrapper .containe-fluid {
        border-width: 0px 1px 0 0;
    }

    .body .right-sidebar .sidebar-item {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid var(--color-border-outer);
    }

    span.ion-ios-gear {
        border: 0!important;
    }

    .body .nav-control li span {
        border-left: 2px dashed #ccc;
    }

    .body .nav-control li {
        background-color: var(--color-bg-badge);
        border-radius: 0;
        margin-right: 0;
    }

    .body .topbar-area {
        background-color: var( --color-bg-badge);
    }

    .body .navbar-wrapper .navbar {
        height: 42px;
        padding: 0.5rem 1rem 0.5rem;
    }

    html.navbar-fixed .body .root-container:not(.single) {
        padding-top: 2.6rem;
    }

    .body .navbar-wrapper .navbar .navbar-brand {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .body .navbar-wrapper .navbar .navbar-brand svg {
        display: none;
    }

    a.navbar-brand::before {
        content: "나무라이브";
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .nav-channel-search-result {
        border: 1px solid var(--color-border-outer);
        border-radius: 3px;
    }
}

@media screen and (max-width: 575px) {
    .channel-visit-history {
        margin-top: 0rem;
    }
}

@media screen and (max-width: 575px) {
    .body .navbar-expand .navbar-nav .nav-link {
        padding-right: 0.25rem;
    }
}
if old {
    .body .navbar-wrapper {
        background: linear-gradient(45deg, #ef6908 0, #DB4400 30%, #c20200 100%);
    }
    html,
    html.theme-light {
        --color-bg-badge: #ef6908;
        --color-bg-navbar: #ef6908;
        --color-senkawa-green: #ef6908;
    }
}
if oldsearch {
    .nav .nav-channel-search-input-wrapper > input {
        background-color: transparent;
    }
    .nav .nav-channel-search-wrapper {
        border-radius: unset;
        margin: .18rem 1rem;
    }
    .nav .nav-channel-search-input-wrapper > input {
        height: 31px;
        border-bottom: 2px solid #eee;
        padding: .6rem .6rem .6rem 2.4rem;
    }
    .nav .nav-channel-search-input-wrapper > .ion-search {
        top: -1px;
        left: 0.6rem;
        font-size: 1.4rem;
    }
}