MediaWiki:Mobile.css

Chú ý: Sau khi lưu trang, có thể bạn sẽ phải xóa bộ nhớ đệm của trình duyệt để xem các thay đổi.

Firefox / Safari: Nhấn giữ phím Shift trong khi nhấn Tải lại (Reload), hoặc nhấn tổ hợp Ctrl-F5 hay Ctrl-R (⌘R trên Mac)
Google Chrome: Nhấn tổ hợp Ctrl-Shift-R (⇧⌘R trên Mac)
Internet Explorer / Edge: Nhấn giữ phím Ctrl trong khi nhấn Làm tươi (Refresh), hoặc nhấn tổ hợp Ctrl-F5
Opera: Nhấn tổ hợp Ctrl-F5.

/* Toàn bộ mã CSS đặt ở đây sẽ được tải cho người sử dụng trang di động */

/* Wordmark Tết */
/*
img[src="/static/images/mobile/copyright/wikibooks-wordmark.svg"] {
	content: url("//upload.wikimedia.org/wikipedia/commons/0/06/Wikibooks-wordmark-red.svg");
}*/

/*TabberNeue*/
.tabber {
        position: relative;
        display: flex;
        overflow: hidden;
        flex-direction: column;
    }
    
    .tabber__tabs {
        display: flex;
        overflow: auto hidden;
        box-shadow: inset 0 -1px 0 0 #a2a9b1;
        scrollbar-width: none;
    }
    
    .tabber__tabs::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    
    .tabber__section {
        display: grid;
        overflow: hidden;
        block-size: 100%;
        grid-auto-columns: 100%;
        grid-auto-flow: column;
    }
    
    .tabber__header {
        position: relative;
        display: flex;
        flex-shrink: 0;
        min-block-size: fit-content;
    }
    
    .tabber__header__prev {
        left: 0;
    }
    
    .tabber__header__next {
        right: 0;
    }
    
    .tabber__header__prev,
    .tabber__header__next {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        display: none;
        width: 20px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .tabber__header__prev:after,
    .tabber__header__next:after {
        position: absolute;
        top: 0;
        bottom: 0;
        width: inherit;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 14px;
        content: '';
    }
    
    .tabber__header--prev-visible .tabber__tabs {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
    }
    
    .tabber__header--next-visible .tabber__tabs {
        -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    }
    
    .tabber__header--prev-visible.tabber__header--next-visible .tabber__tabs {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    }
    
    .tabber__header--prev-visible .tabber__header__prev,
    .tabber__header--next-visible .tabber__header__next {
        display: block;
    }
    
    .tabber__header,
    .tabber__section {
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    
    .tabber__header::-webkit-scrollbar,
    .tabber__section::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    
    .tabber__tab {
        display: inline-flex;
        align-items: center;
        padding: 5px 12px;
        color: #54595d;
        font-weight: bold;
        scroll-snap-align: start;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .tabber__tab:visited {
        color: #54595d;
    }
    
    .tabber__tab:hover,
    .tabber__tab:active,
    .tabber__tab:focus {
        text-decoration: none;
    }
    
    .tabber__tab--active,
    .tabber__tab--active:visited {
        box-shadow: inset 0 -2px 0 0 #36c;
        color: #36c;
    }
    
    .tabber__panel {
        height: max-content !important;
        block-size: 100%;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-snap-align: start;
    }
    
    @media (hover: hover) {
        .tabber__tab:hover {
            box-shadow: inset 0 -2px 0 0 #447ff5;
            color: #447ff5;
        }
        .tabber__tab:active {
            box-shadow: inset 0 -2px 0 0 #2a4b8d;
            color: #2a4b8d;
        }
        .tabber__header__prev:hover,
        .tabber__header__next:hover {
            background-color: rgba(0, 24, 73, 0.03);
        }
        .tabber__header__prev:active,
        .tabber__header__next:active {
            background-color: rgba(0, 24, 73, 0.05);
        }
    }
    
    @media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
        .tabber__header,
        .tabber__section,
        .tabber__tabs {
            scroll-behavior: smooth;
        }
    }

.tabber__header__next:after {
    background-image: linear-gradient(transparent,transparent),url(//upload.wikimedia.org/wikipedia/commons/8/8e/OOjs_UI_icon_next-ltr.svg);
}
.tabber__header__prev:after {
    background-image: linear-gradient(transparent,transparent),url(//static.miraheze.org/bookswiki/f/f4/Previous-ltr.svg);
}