Tema Super Cute

Info

terima kasih sangat untuk Super-Robot14 untuk Techlight!

Tema Super Cute merupakan tema sederhana yang dibuat oleh Ambersight! Kamu bisa pakai tema ini untuk keperluan apapun.

Tema Super Cute dibuat berdasarkan tema Super Liminal.

[[include :backrooms-wiki:theme:super-cute]]

Contoh

Gambar pertama yang diambil dari Level 0.

Level 0 adalah ruangan non-linier, menyerupai ruang belakang gerai ritel. Memiliki bentuk yang serupa dengan bentuk awalnya, semua bagian ruangan pada Level 0 tampak selaras dan memiliki fitur yang sama seperti kertas dinding berwarna kuning, karpet yang lembap, dan lampu neon yang ditempatkan secara tidak konsisten. Namun, tidak ada dua ruangan di dalam level ini yang identik dengan ruangan lainnya.¹.

Tajuk Pertama

Tajuk Kedua

Tajuk Ketiga

Seperti yang bisa kamu lihat, terlihat kurang bagus untuk langsung meletakkan teks pada latar belakang kuning. Oleh karena itu, saya sarankan untuk memasukkan semua konten apa pun ke dalam blok kutipan.

+ ini collapsible.

Daftar poin
Daftar 2
- Daftar bersarang

Daftar angka
Yang kedua

DIV Dekorasi

> blok kutipan
[[div class="blockquote"]]
[[div class="lightblock"]]

[[div class="darkblock"]]

[[div class="styled-quote"]]

[[div class="dark-styled-quote"]]

[[code]]
[[div class="code"]]

DIV Super Cute!

[[div class="with-bai blockquote"]]

Dia Bai Mulin, maskot dari Backrooms CN. Bai merupakan penyitas tak teridentifikasi, kami tidak begitu tahu tentangnya. Dia seringkali terlihat di kluster C Backrooms.

Kamu bisa ubah blok kutipan ke DIV dekorasi lainnya.

[[div class="with-shina blockquote"]]

Dia Shina, maskot dari Backrooms ID. Shina merupakan entitas kuat yang tinggal di Backrooms Indonesia, kamu bisa mencarinya lebih lanjut di halaman ini!

Tanduk Shina dapat menembus div atau paragraf di atasnya. Jika kamu tidak ingin itu terjadi, gunakan @@ @@ untuk menjarakkan satu baris.

[[div class="with-tess blockquote"]]

Tunggu tunggu, siapa dia?

Mengejutkannya, DIV with-tess juga ada di Tesseract. Lihatlah!

[[div class="with-shina dark-styled-quote no-padding"]]

Jika kamu tidak menyukai padding ekstra di bagian atas (yaitu, bagian yang kosong di bagian atas untuk menyisakan ruang bagi tangan maskot), kamu dapat menambahkan no-padding pada div.

Kustomisasi

Terdapat 5 warna utama di Super Cute. Dengan mengubah 5 warna ini, kamu dapat dengan mudah memodifikasi estetika tema:

--q-black
55, 55, 55

--q-white
252, 252, 252

--q-yellow
254, 203, 52

--q-green
52, 254, 145

--q-red
254, 104, 52

[[module CSS]]
:root {
    --q-black: 55, 55, 55;
    --q-white: 252, 252, 252;
    --q-yellow: 254, 203, 52;
    --q-green: 52, 254, 145;
    --q-red: 254, 104, 52;
}
[[/module]]

Jika kamu ingin membuat aksen warna baru untuk tema, cukup dengan mengubah kode warna pada —q-yellow saja kok.

‡ Lisensi / Kutipan

+ Kode Tema

- Tutup

:root {
    /* Color */
    --q-black: 55, 55, 55;
    --q-white: 252, 252, 252;
    --q-yellow: 254, 203, 52;
    --q-green: 52, 254, 145;
    --q-red: 254, 104, 52;
 
    /* palatte */
    --background-color: var(--q-yellow);
    --text-color: var(--q-black);
    --light-color-1: var(--q-white);
    --light-color-2: var(--q-white);
    --dark-color-1: var(--q-black);
    --dark-color-2: var(--q-white);
    --dark-color-3: var(--text-color);
    --general-medium-background-color: var(--dark-color-2);
    --general-medium-text-color: var(--text-color);
    --general-dark-background-color: var(--q-green);
    --general-dark-text-color: var(--text-color);
 
    /* Scrollbar */
    --scrollbar-color: var(--q-yellow);
    --scrollbar-background-color: 0, 0, 0, 0.2;
 
    /* Header */
    --header-background-top: 0, 0, 0, 0;
    --header-background-bottom: 0, 0, 0, 0;
    --header-extra-background-image: none;
    --header-text-color: var(--text-color);
    --header-text-shadow-color: 0, 0, 0, 0;
    --header-title-font-size: 2rem;
 
    /* Topb */
    --topbar-text-color: var(--text-color);
    --topbar-height-on-mobile: 4rem;
    --topbar-font-size-on-mobile: 0.8rem;
    --topbar-font-size: 1rem;
    --topbar-hover-background-color: var(--q-green);
    --topbar-hover-border-color: 0, 0, 0, 0;
    --topbar-height: 4rem;
    --topbar-drop-text-color: var(--q-black);
    --topbar-drop-hover-text-color: var(--q-black);
    --topbar-drop-background-color: var(--q-white);
    --topbar-drop-hover-background-color: var(--q-red);
    --topbar-drop-shadow-color: 0, 0, 0, 0;
    --topbar-drop-border-width: 0px;
 
    /* User */
    --account-drop-text-color: var(--q-black);
    --account-drop-hover-text-color: var(--q-black);
    --account-drop-background-color: var(--q-white);
    --account-drop-hover-background-color: var(--q-red);
 
    /* Search */
    --search-button-background-color: var(--q-white);
    --search-button-hover-background-color: var(--q-green);
 
    /* Tag */
    --page-tag-background-color: var(--q-yellow), 0.6;
 
    /* Footer */
    --footer-text-color: var(--q-black);
    --footer-background-color: var(--q-white);
    --license-background-color: var(--q-white);
    --license-text-color: var(--q-black);
    --license-link-color: var(--q-black);
 
    /* Popup */
    --popup-fader-color: 0, 0, 0, 0.7;
    --popup-title-background-color: var(--q-yellow);
    --popup-title-text-color: var(--q-black);
    --popup-tip-color: var(--q-white);
    --popup-loading-color: var(--q-yellow);
 
    /* tab */
    --tabview-button-background-color: 0, 0, 0, 0;
    --tabview-button-text-color: var(--q-black);
    --tabview-hover-button-background-color: var(--q-red);
    --tabview-hover-button-text-color: var(--q-black);
    --tabview-selected-button-background-color: var(--q-green);
    --tabview-selected-button-text-color: var(--q-black);
    --tabview-horizon-color: 0, 0, 0, 0;
    --tabview-content-background-color: var(--q-white);
    --tabview-border-width: 0px;
 
    /* footnote */
    --footnote-block-background-color: var(--q-white);
 
    /* Sidebar */
    --sidebar-handle-text-color: var(--q-white);
    --sidebar-handle-background-color: var(--q-black);
    --sidebar-media-background-color: var(--q-green);
    --sidebar-media-icon-color: var(--text-color);
    --sidebar-title-background-color: var(--q-yellow);
    --sidebar-title-shadow-color: 0, 0, 0, 0;
    --sidebar-hover-background-color: var(--q-red);
 
    /* Sturc */
    --body-width: 50rem;
    --sidebar-width: 20rem;
    --sidebar-width-on-mobile: 18rem;
    --header-subtitle-font-size-on-mobile: 0.8rem;
 
    /* Other Things */
    --general-transition-time-slow: 0s;
    --logo-image: url(
http://id-backrooms-wiki.wikidot.com/local--files/start/Logo%20TBID%20Hitam);
}
 
/* Body */
#skrollr-body {
    background-image:  radial-gradient(circle, rgba(0, 0, 0, 0.05) 15%, transparent 0);
    background-size: 2rem 2rem;
}
 
/* Header */
#header h1 a {
    display: flex;
    align-items: center;
    width: fit-content;
}
 
#header h1 a::before {
    content: "";
    display: block;
    flex: none;
    background-color: rgba(var(--q-white));
    background-image: var(--logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 4rem;
    height: 4rem;
    box-sizing: border-box;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 50%;
}
 
#header h1 a:is(:hover, :active, :focus, :focus-within)::before {
    background-color: rgba(var(--q-green));
}
 
#header h1 a span {
    align-items: flex-start;
    padding: 0;
    margin-left: 1rem;
    transition: margin-left 0.2s;
}
 
#header h1 a:is(:hover, :active, :focus, :focus-within) span {
    margin-left: 1.4rem;
}
 
#header h2 {
    display: none;
}
 
/* User Info */
#login-status {
    font-size: 0;
    top: calc(var(--main-header-height) / 2 - 2rem);
    right: var(--header-margin);
}
 
#login-status .printuser {
    gap: 0;
}
 
#login-status .printuser > a:first-child img {
    background-image: none !important;
    padding: 0;
    width: 4rem;
    height: 4rem;
    box-sizing: border-box;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 50%;
    object-fit: cover;
}
 
#login-status a:is(.login-status-create-account,.login-status-sign-in) {
    display: flex;
    width: 4rem;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
    font-size: 0.8rem;
    box-sizing: border-box;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 10rem;
    padding: 0.2rem 0;
    position: relative;
    top: -0.2rem;
}
 
#login-status a:is(.login-status-create-account,.login-status-sign-in):is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--q-green));
}
 
#login-status a.login-status-create-account {
    font-size: 0;
    margin-bottom: 0.5rem;
}
 
#login-status a.login-status-create-account::before {
    content: "Sign up";
    font-size: 0.8rem;
}
 
a#account-topbutton {
    display: none;
}
 
#account-options {
    font-size: 0.8rem;
    padding-top: 0.6rem;
    background: rgba(0, 0, 0, 0);
    border: none;
    width: 10rem;
}
 
#login-status:is(:hover, :active, :focus, :focus-within) #account-options {
    pointer-events: auto;
    opacity: 1;
}
 
#account-options ul {
    display: block;
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    background: rgba(var(--account-drop-background-color));
    overflow: hidden;
    padding-bottom: 0.5rem;
}
 
#account-options li a {
    height: 2rem;
    padding: 0 1rem;
    justify-content: space-between;
}
 
#account-options li:last-of-type a {
    border-radius: 0 0 0.4rem 0.4rem;
}
 
#account-options li a::after {
    content: "›";
    font-weight: 900;
    font-family: var(--mono-font);
    font-size: 1.25em;
}
 
#login-status > a[href*='account/messages'] {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0;
    z-index: 2;
    background: rgb(var(--q-red));
    border-radius: 50%;
    border: 0.2rem solid rgba(var(--text-color));
}
 
/* Search */
#search-top-box {
    right: calc(var(--header-margin) + 4rem + 1rem);
    top: calc(var(--main-header-height) / 2 - 1.6rem);
}
 
#search-top-box-form .button {
    height: 3.2rem;
    width: 4rem;
    font-size: 0;
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    padding: 0 0 0.5rem;
}
 
#search-top-box::after {
    content: "";
    width: 100%;
    height: calc(100% - 0.5rem);
    position: absolute;
    left: 0;
    top: 0;
    -webkit-mask-image: var(--search-icon-mask);
    mask-image: var(--search-icon-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 27.5%;
    mask-size: 27.5%;
    background-color: rgb(var(--text-color));
    pointer-events: none;
}
 
/* Top Bar */
#top-bar div[class*=top-bar] > ul {
    grid-gap: 0.5rem;
}
 
#top-bar div[class*=top-bar] > ul > li {
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(0, 0, 0, 0);
    transition: 0s;
    box-sizing: border-box;
    padding-bottom: 0.5rem
}
 
#top-bar .mobile-top-bar .open-menu {
    flex: none;
    margin-right: 0.5rem;
}
 
#top-bar .mobile-top-bar .open-menu a {
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(var(--q-black));
    transition: 0s;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
    background: rgba(var(--q-red));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
#top-bar .mobile-top-bar .open-menu a::before {
    -webkit-mask-size: 80%;
    mask-size: 80%;
}
 
#top-bar div[class*=top-bar] > ul > li:is(:hover, :active, :focus, :focus-within, .sfhover),
#top-bar .mobile-top-bar .open-menu a:is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--topbar-hover-background-color));
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
#top-bar div[class*=top-bar] > ul > li > a {
    padding-bottom: 1.5rem;
}
 
#top-bar div[class*=top-bar] > ul > li > ul {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    left: -0.2rem;
    min-width: calc(100% + 0.4rem);
    padding-bottom: 0.5rem;
    overflow: hidden;
    transition: 0s;
}
 
#top-bar div[class*=top-bar] > ul > li:last-of-type > ul {
    right: -0.2rem;
    left: auto;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li {
    overflow: hidden;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li:last-of-type {
    border-radius: 0 0 0.4rem 0.4rem;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li > a {
    font-weight: 500;
    justify-content: space-between;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li > a::after {
    content: "›";
    font-weight: 900;
    font-family: var(--mono-font);
    font-size: 1.25em;
    padding-left: 0.5rem;
}
 
/* Content */
#page-title, .meta-title {
    text-align: center;
    border: none;
    padding: 0;
}
 
/* Rating Module */
div.rate-box-with-credit-button,
div.page-rate-widget-box,
div.creditButtonStandalone {
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 10rem;
    overflow: hidden;
    padding-right: 0.5rem;
}
 
div.page-rate-widget-box .rate-points {
    padding-left: 0.8rem;
}
 
div.creditBottomRate div.page-rate-widget-box {
    border-bottom: 0.2rem solid rgba(var(--text-color));
}
 
/* Blockquote */
blockquote, .blockquote, .lightblock {
    margin: 1rem 0;
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
/* Page Tags */
.page-tags {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    background: rgba(var(--q-white));
    flex-direction: row;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 0.5rem 0.5rem 1rem;
}
 
.page-tags::before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiAkJCQvR2VuZXJhbFN0ci8xOTY9QWRvYmUgSWxsdXN0cmF0b3IgMjcuNi4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDEwNS43IDg3LjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwNS43IDg3LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMy4zLDI3LjhsNC42LDIxLjFjMC40LDEuOCwxLjQsMy40LDMsNC40bDQ1LjIsMzEuMmMzLjMsMi4zLDcuOCwxLjQsMTAuMS0xLjlsMTYuOC0yNC40DQoJYzIuMy0zLjMsMS40LTcuOC0xLjktMTAuMUw1NS44LDE3LjFjLTEuNS0xLTMuNC0xLjUtNS4yLTEuMmwtMjEuMywzLjJDMjUuMiwxOS43LDIyLjQsMjMuNywyMy4zLDI3Ljh6Ii8+DQo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0MSIgY3k9IjMzLjYiIHI9IjciLz4NCjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI2MS4yIiB5MT0iMzcuNyIgeDI9IjkyLjUiIHkyPSI1OS4zIi8+DQo8bGluZSBjbGFzcz0ic3QwIiB4MT0iNTYuNiIgeTE9IjQ0LjMiIHgyPSI3OC45IiB5Mj0iNTkuNiIvPg0KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjUyLjEiIHkxPSI1MC45IiB4Mj0iNzkuNyIgeTI9IjY5LjkiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMy43LDM3LjFjMCwwLDM2LjYtMTIuOS0zLjYtMzMuMkMyMS42LTAuNSwxMS4zLDEuMyw0LjUsOHYwQy03LjgsMjAuNCwyMS44LDM3LjQsMjUuMiwzNy40Ii8+DQo8L3N2Zz4NCg==");
    width: 4rem;
    height: 4rem;
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 50%;
    padding: 0;
    background-color: rgba(var(--q-yellow));
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    flex: none;
}
 
.page-tags span {
    border: none;
    padding: 0.5rem 0 0.5rem 1rem;
}
 
.page-tags span a {
    padding: 0.2rem 0.5rem;
    height: fit-content;
    font-weight: 500;
    transition: 0s;
}
 
/* Page Info */
#page-info, .page-watch-options {
    font-weight: 500;
    font-size: 0.8rem;
}
 
/* Buttons, i mean, seriously, buttonS */
div[id*=page-options-bottom] > a,
#edit-page-form div.buttons input,
div.buttons input,
.page-options-bottom a,
.owindow .button-bar > a:not([onclick*=cleanAll]),
.owindow div[style*=margin-top] a,
a.action-area-close,
#view-diff-div > p > a {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    padding: 0.5rem 0.5rem 1rem;
    line-height: 1.5;
    height: fit-content;
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
    font-weight: 500;
    font-size: 0.8rem;
}
 
#delete-button,
a.action-area-close,
#view-diff-div > p > a {
    background: rgba(var(--q-red));
}
 
a.action-area-close,
#view-diff-div > p > a {
    font-size: 0;
    height: 3rem;
    width: 3rem;
    box-sizing: border-box;
}
 
div[id*=page-options-bottom] > a:is(:hover, :active, :focus, :focus-within),
#edit-page-form div.buttons input:is(:hover, :active, :focus, :focus-within),
div.buttons input:is(:hover, :active, :focus, :focus-within),
.page-options-bottom a:is(:hover, :active, :focus, :focus-within),
.owindow .button-bar > a:not([onclick*=cleanAll]):is(:hover, :active, :focus, :focus-within),
.owindow div[style*=margin-top] a:is(:hover, :active, :focus, :focus-within),
a.action-area-close:is(:hover, :active, :focus, :focus-within),
#view-diff-div > p > a:is(:hover, :active, :focus, :focus-within) {
    background: rgba(var(--q-green));
    color: rgba(var(--q-black));
}
 
#delete-button:is(:hover, :active, :focus, :focus-within):before,
#delete-button:is(:hover, :active, :focus, :focus-within):after {
    content: "!";
    font-weight: 700;
    padding: 0 0.25rem;
}
 
div[id*=page-options-bottom] > a {
    flex-basis: 7.5rem;
    flex-grow: 0;
}
 
div[id*=page-options-bottom] {
    justify-content: center;
    margin: 0.25rem 0;
}
 
/* Footer */
#footer {
    border-top: 0.2rem solid rgba(var(--text-color));
    padding: 1rem 0;
}
 
/* Popup */
.owindow, div.modalbox, div.infobox {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    padding: 0 0 0.5rem 0;
}
 
.owindow .title,
div.modalbox > div:first-child,
div.infobox-title {
    border-radius: 0.8rem 0.8rem 0 0;
    border-bottom: 0.2rem solid rgba(var(--text-color));
}
 
.owindow.owait,
.owindow.osuccess {
    padding: 0.6rem 2rem 1.2rem;
}
 
/* Action */
#action-area > h1 {
    padding: 0.5rem 0;
}
 
#who-rated-page-area > div,
.page-source {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    padding: 1rem 1rem 1.5rem;
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
}
 
/* Image Block */
.scp-image-block {
    border: none;
    gap: 0.5rem;
}
 
.scp-image-block img {
    width: auto !important;
}
 
.scp-image-block img,
.scp-image-caption {
    border: 0.2rem solid rgba(var(--text-color));
    border-radius: 0.6rem;
}
 
.scp-image-caption {
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    padding: 0.3rem 0.5rem 0.8rem;
}
 
/* Tabview */
.yui-navset .yui-nav {
    justify-content: center;
    gap: 0.5rem;
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-nav li.selected {
    transition: none;
    flex: none;
    border-radius: 0.6rem;
    padding: 0.5rem 1.5rem 1rem;
    border: 0.2rem solid rgba(0, 0, 0, 0);
    font-weight: 700;
}
 
.yui-navset .yui-nav li.selected,
.yui-navset .yui-nav li:is(:hover, :active, :focus, :focus-within) {
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
}
 
.yui-navset .yui-nav li a,
.yui-navset .yui-nav li.selected a {
    transition: none;
    color: rgba(var(--q-black));
}
 
.yui-navset .yui-nav li a em,
.yui-navset .yui-nav li.selected a em {
    padding: 0;
}
 
.yui-navset .yui-content {
    margin: 1rem 0;
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-white));
}
 
/* Code */
.code {
    border-radius: 1rem;
}
 
/* Custom DIVs */
.darkblock {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-yellow));
    color: rgba(var(--q-black));
}
 
.styled-quote {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-green));
    color: rgba(var(--q-black));
}
 
.dark-styled-quote {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-red));
    color: rgba(var(--q-black));
}
 
/* Footnote */
.footnotes-footer, .bibitems {
    border-radius: 1rem;
    border: 0.2rem solid rgba(var(--text-color));
    padding: 0.5rem 1rem 1rem;
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    margin: 1rem;
}
 
.footnotes-footer .title {
    font-size: 1.5em;
}
 
.footnote-footer {
    font-size: 85%;
}
 
/* Sidebar */
#side-bar {
    scrollbar-width: none;
    padding-left: 1rem;
    background: rgba(0, 0, 0, 0);
    border: none;
}
 
#side-bar .side-block {
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(var(--text-color));
    box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.15);
    background: rgba(var(--q-white));
    color: rgba(var(--q-black));
    margin: 1rem 0;
    padding-bottom: 0.5rem;
}
 
#side-bar .side-block.media {
    padding: 0.5rem 0 1rem !important;
}
 
#side-bar .side-block.languages {
    display: none; /* Temp set */
}
 
#side-bar .heading,
#side-bar .collapsible-block-unfolded-link a,
#side-bar .collapsible-block-folded a {
    border-radius: 0.4rem 0.4rem 0 0;
    padding: 0.2rem 0;
}
 
#side-bar .side-block > *:last-child {
    border-bottom: none;
    border-radius: 0 0 0.4rem 0.4rem;
}
 
#side-bar .heading:last-child {
    border-radius: 0.4rem;
}
 
#side-bar .menu-item {
    overflow: hidden;
}
 
#side-bar .menu-item a {
    padding-right: 0.6em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
#side-bar .menu-item a::after {
    content: "›";
    font-weight: 900;
    font-family: var(--mono-font);
    font-size: 1.25em;
}
 
#side-bar .menu-item a:first-of-type {
    border-left: none;
}
 
/* MOBILE */
@media only screen and (max-width: 1024px) {
    #header {
        background-color: rgba(var(--q-yellow));
        background-image:  radial-gradient(circle, rgba(0, 0, 0, 0.05) 15%, transparent 0);
        background-size: 2rem 2rem;
    }
 
    #header h1 a::before {
        display: none;
    }
 
    #header h1 a {
        height: calc(100% - 2rem);
        margin: 1rem 0;
    }
 
    #login-status {
        right: 1rem;
    }
 
    #search-top-box {
        width: auto;
        height: auto;
        right: calc(var(--header-margin) + 4rem + 2rem);
        top: calc(var(--main-header-height) / 2 - 1.5rem);
    }
 
    #search-top-box-form .button {
        mask-image: none;
        -webkit-mask-image: none;
        width: 3rem;
        height: 3rem;
    }
 
    #search-top-box::after {
        mask-size: 35%;
        -webkit-mask-size: 35%;
    }
 
    #top-bar {
        padding: 0.5rem 1rem;
    }
 
    #top-bar div[class*=top-bar] > ul > li > a {
        padding-bottom: 1rem;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul {
        min-width: 100%;
        left: 0;
    }
 
    #top-bar div[class*=top-bar] > ul > li:last-of-type > ul {
        right: 0;
        left: auto;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n):nth-last-child(1) {
        border-bottom-left-radius: 0;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n+1):nth-last-child(1) {
        border-bottom-right-radius: 0;
    }
 
    #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n+1):nth-last-child(2) {
        border-bottom-left-radius: 0.4rem;
    }
 
    #side-bar:target .close-menu {
        width: 100%;
    }
 
}
 
/* SUPER CUTE!! */
.with-bai {
    margin-top: 13rem;
    padding-top: 5rem;
    position: relative;
}
 
.with-bai::before {
    content: "";
    display: block;
    height: 20rem;
    width: 12rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/bai.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -14rem;
    right: 2rem;
}
 
.with-bai.no-padding {
    padding-top: 0.5rem;
    min-height: 6rem;
}
 
.with-bai::after {
    content: "";
    display: block;
    height: 8rem;
    width: 10rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/cans.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -7.04rem;
    left: 1rem;
}
 
.with-shina {
    margin-top: 15rem;
    padding-top: 3rem;
    position: relative;
}
 
.with-shina.no-padding {
    padding-top: 0.5rem;
    min-height: 4rem;
}
 
.with-shina::before {
    content: "";
    display: block;
    height: 22rem;
    width: 19rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/shina.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -17.8rem;
    left: 0;
}
 
.with-shina::after {
    content: "";
    display: block;
    height: 10rem;
    width: 10rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/manstria.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -8.69rem;
    right: 0;
}
 
.with-tess {
    margin-top: 18rem;
    padding-top: 1.5rem;
    position: relative;
}
 
.with-tess.no-padding {
    padding-top: 0.5rem;
    min-height: 1rem;
}
 
.with-tess::before {
    content: "";
    display: block;
    height: 20rem;
    width: 23rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/tess.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -18.06rem;
    right: 2rem;
}
 
.with-tess::after {
    content: "";
    display: block;
    height: 6rem;
    width: 10rem;
    background: url(http://backrooms-wiki.wikidot.com/local--files/theme:super-cute/boat.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: -4rem;
    left: 1rem;
}
 
@media only screen and (max-width: 590px) {
    .with-tess::after {
        display: none;
    }
}
 
@media only screen and (max-width: 520px) {
    .with-bai::after,
    .with-shina::after {
        display: none;
    }
}
 
@media only screen and (max-width: 520px) {
    .with-tess::before {
        right: 0.5rem;
    }
}

- Tutup

tema tema-aestetik terjemahan

revisi halaman: 2, Terakhir disunting: 14 Dec 2024 03:06

Sunting Nilai (0) Label Diskusi (0) Riwayat Berkas Cetak Peralatan Situs + Pengaturan

Backrooms Indonesia

Dirimu pernah di sini sebelumnya!