|
|
| 1번째 줄: |
1번째 줄: |
| <div class="mw-collapsible mw-customtoggle-1000 fixed top-1/2 left-16 w-[250px] shadow-2xl bg-violet-500 shadow-violet-500 rounded text-center" id="mw-customcollapsible-1000" style="transform: translate(0%, -50%)">
| |
| <div class="py-6"><span class="text-2xl text-white" style="font-family: 'Noto Serif JP', serif;">1000年生きてる</span><br><span class="text-xs text-white" style="font-family: 'Noto Serif JP', serif;">ⓒ 2023. Sakura All rights reserved.</span></div>
| |
| <span class="flex absolute h-3 w-3 top-0 right-0 -mt-1 -mr-1">
| |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
| |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
| |
| </span>
| |
| </div>
| |
| <div class="mw-collapsible mw-collapsed mw-customtoggle-1000 flex fixed top-1/2 left-16 rounded text-center overflow-visible shadow-2xl shadow-violet-500" id="mw-customcollapsible-1000" style="transform: translate(0%, -50%);">
| |
| <div class="bg-violet-500 py-6 rounded-l w-[250px]"><span class="text-2xl text-white" style="font-family: 'Noto Serif JP', serif;">1000年生きてる</span><br><span class="text-xs text-white" style="font-family: 'Noto Serif JP', serif;">ⓒ 2023. Sakura All rights reserved.</span></div>
| |
| <div class="flex">
| |
| <div class="bg-gradient-to-r from-violet-500 to-transparent flex flex-row flex-wrap content-center gap-4 h-full backdrop-filter">
| |
| <div class="text-sm text-white px-4" style="font-family: 'Noto Serif KR', serif;">세계관 소개</div><div class="text-sm text-white px-4" style="font-family: 'Noto Serif KR', serif;">문서보기</div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <html>
| |
| <head>
| |
| <script src="https://cdn.tailwindcss.com"></script>
| |
| <link rel="preconnect" href="https://fonts.googleapis.com">
| |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
| |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@900&display=swap" rel="stylesheet">
| |
| </head>
| |
| <style>
| |
| .Liberty .content-wrapper .liberty-content .liberty-content-main { overflow: unset; }
| |
| .input-group-btn .btn-secondary { -webkit-appearance: none; background-color: #fff; }
| |
| h1 { font-size: 2rem; }
| |
| h2 { font-size: 1.8rem; }
| |
| h3 { font-size: 1.6rem; }
| |
| h4 { font-size: 1.5rem; }
| |
| h5 { font-size: 1.25rem; }
| |
| h6 { font-size: 1.1rem; }
| |
|
| |
|
| .backdrop-filter {
| |
| backdrop-filter: saturate(180%) blur(20px);
| |
| }
| |
|
| |
| a {
| |
| color: var(--ew-theme-link);
| |
| }
| |
|
| |
| a.new {
| |
| color: var(--ew-theme-link-new);
| |
| }
| |
|
| |
| a:hover,
| |
| a:focus {
| |
| color: var(--ew-theme-link-hover);
| |
| text-decoration: underline;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| a.new:hover,
| |
| a.new:focus {
| |
| color: var(--ew-theme-link-new-hover);
| |
| text-decoration: underline;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| a.external {
| |
| color: var(--ew-theme-link-external);
| |
| }
| |
|
| |
| a.external:hover,
| |
| a.external:focus {
| |
| color: var(--ew-theme-link-external-hover);
| |
| text-decoration: underline;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| a.external:before {
| |
| font-family: 'Font Awesome 5 Free';
| |
| font-weight: 600;
| |
| text-align: center;
| |
| color: var(--ew-theme-link-external);
| |
| content: '\f0c1';
| |
| }
| |
|
| |
| .plainlinks a.external {
| |
| color: var(--ew-theme-link);
| |
| }
| |
|
| |
| .plainlinks a.external:hover,
| |
| .plainlinks a.external:focus {
| |
| color: var(--ew-theme-link-hover);
| |
| text-decoration: underline;
| |
| transition: 0.3s;
| |
| }
| |
| </style>
| |
| </html>
| |