PLACESTYLE CSS
PLACESTYLE CSS
Bởi: FlawedFlawed
ĐĂNG VÀO: 14 Jun 2021 14:16

Bảng thông tin trang trên đây được tự động lập bởi module Listpages ngay trong authorbox, một hộp cạnh phía trái. Hộp này được cập nhật tự động trên mọi trang có cài theme này, trừ khi bạn bao Placestyle trong một div display: none;. Vì nằm phía bên trái, hộp này có thể sử dụng song song với các hộp truyền thống. Nó sẽ không hiển thị trên các thiết bị di động.

placeholderword.png

.

đánh giá: +1+–x

Info

PLACESTYLE CSS
Bởi: Placeholder McDPlaceholder McD

Cảm ơn tới CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte và NagirosNagiros vì đã tạo nên đa số các code sử dụng trong theme đây.

đánh giá: +1+–x

Gì Đây?

Đây là Placestyle CSS: một phần từ Theme Penumbra của EstrellaYoshteEstrellaYoshte tạo bởi Placeholder McDPlaceholder McD để sử dụng trong tài liệu của anh. Nó được tạo với mục đích giúp dễ dàng sử dụng và cập nhật cho mọi trường hợp. Nó đơn thuần chính là Penumbra, trừ đi mấy thứ tôi không thích, và cộng thêm những thứ tôi thích từ
Blankstyle CSS của HarryBlankHarryBlank, và hơn vậy nữa!

Gần như nó sẽ không hoạt động với các theme khác, nhất là các bản Black Highlighter. Đừng có dùng theme này trừ khi bạn biết bạn đang làm gì.

Hướng Dẫn Sử Dụng

Để sử dụng theme này, sao chép đoạn mã sau vào đầu bài viết của bạn:

[[include :scp-vn:theme:placestyle]]

Lưu ý rằng theme đây có bao gồm các component sau:

Nếu sử dụng với hộp thông tin kèm đánh giá, bọc module đấy trong các [[div]] để đảm bảo rằng trang thông tin không bị trì hoãn do Fade In.

Theme này mượn code từ Image Block Peppo của PeppersGhostPeppersGhost và EstrellaYoshte giúp làm cho thanh trên và hộp ảnh chuyển lùi về trung tâm, tạo nên hình sắc thẩm mỹ đối với màn hình nhỏ (hay: di động). Gần như toàn bộ mã code đều lấy từ Theme Penumbra.

Cảm ơn tới CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte và NagirosNagiros vì đã tạo nên đa số các code sử dụng trong theme đây.

Hộp bảng trên được gói gọn trong hộp cạnh thường. Các hộp cạnh có thể được giới hạn di chuyển đến một phần nhất định của trang sử dụng div limit. Nếu bạn kéo qua mã nguồn trang này, bạn sẽ để ý rằng hộp cạnh sẽ không di chuyển quá tiêu đề MÃ NGUỒN.

Những khác biệt chính giữa PLACESTYLE CSS và Penumbra bao gồm:

  • font thân (Verdana) giống với Sigma-9
  • font tiêu đề (Monserrat) giống với Blankstyle
  • scp-image-block giản thể tượng trưng Sigma-9
  • bảng có đệm trong (trừ hộp cạnh) giống Blankstyle
  • Ô tiêu đề bảng sẽ có màu giống với accentColor
  • div tableb chia các hộp (và cả phụ đề ảnh!) ngay trong bảng y như Blankstyle
  • nền hộp cạnh trong suốt giống Blankstyle
  • span bt tô đậm và chỉnh màu chữ (theo accentColor) giống Ad Astra Theme của NatVoltaicNatVoltaic và stormbreathstormbreath (thực ra màu sẽ chỉnh sáng hơn chút so với accentColor, nhằm tính dễ đọc)
  • nút mở thanh dọc cạnh hình vuông
  • BetterFootnotes tự động điều chỉnh giống với accentColor
  • ACS Component được chỉnh màu phù hợp với nền tối giống với Night Rush Theme của NagirosNagiros
  • ACS Component sẽ không có "MÃ VẬT THỂ:" ở cạnh đầu trái, giống với Blankstyle
  • Hộp sập ngầu lòi với hideLocation="both" để hiển thị đỉnh hơn
  • authorbox, hộp cạnh trái hiện thông tin trang, được tự động thêm vào bất cứ trang nào có theme này (trừ khi bạn bao phần include trong div style="display: none;". Nó cũng sẽ không có tác động vào hộp cạnh thường.

VÍ DỤ

Ghi chú thông tin sửa lỗi có thể tìm thấy trong phần bình luận.

MÃ NGUỒN:

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within:not(:target) {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    }
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    }
 
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
 
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
 
        top: 0.5em;
        left: 0.5em;
 
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
 
        pointer-events: all;
        cursor: pointer;
    }
    #side-bar:focus-within {
        left: 0;
    }
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;
    }
    }
}
CODE
theme
sửa đổi trang: 7, chỉnh sửa lần cuối: 28 Jul 2021 06:17
Chỉnh sửa Đánh giá (+1) Tag Bình luận Lịch sử Tệp In Công cụ trang + Lựa chọn
Nếu không có ngoại lệ được nêu, nội dung của trang này được xuất bản dưới giấy phép Creative Commons Attribution-ShareAlike 3.0 License