1128 行
21 KiB
CSS
1128 行
21 KiB
CSS
@import "@fontsource-variable/noto-sans-jp";
|
|
@import './components/counts/countsTable.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.ainu-ui-text
|
|
{
|
|
white-space: normal !important;
|
|
word-break: keep-all !important;
|
|
overflow-wrap: normal !important;
|
|
}
|
|
|
|
.ainu-ui-word
|
|
{
|
|
display: inline;
|
|
white-space: nowrap !important;
|
|
word-break: keep-all !important;
|
|
overflow-wrap: normal !important;
|
|
}
|
|
|
|
.ainu-ui-label .ainu-ui-text
|
|
{
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.ainu-ui-label wbr
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.localised-document
|
|
{
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.localised-document a:lang(ain)
|
|
{
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
@layer base
|
|
{
|
|
:root
|
|
{
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--destructive: 0 72.2% 50.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--theme-link: 221.2 83.2% 53.3%;
|
|
--top-nav-root-bg-mobile: #fef08a;
|
|
--top-nav-root-bg-desktop: #fefce8;
|
|
--top-nav-active-bg: #fef08a;
|
|
--top-nav-submenu-bg: #fef08a;
|
|
--top-nav-mobile-menu-bg: #fef08a;
|
|
--top-nav-mobile-active-bg: #fefce8;
|
|
--top-nav-brand-link: #db2777;
|
|
--top-nav-menu-link: #1d4ed8;
|
|
|
|
--tag-colour-deerjikist: #9f1239;
|
|
--tag-colour-deerjikist-hover: #b62a51;
|
|
--tag-colour-meme: #6b21a8;
|
|
--tag-colour-meme-hover: #8238bf;
|
|
--tag-colour-character: #4d7c0f;
|
|
--tag-colour-character-hover: #649326;
|
|
--tag-colour-general: #155e75;
|
|
--tag-colour-general-hover: #2c758c;
|
|
--tag-colour-material: #c2410c;
|
|
--tag-colour-material-hover: #d95823;
|
|
--tag-colour-meta: #a16207;
|
|
--tag-colour-meta-hover: #b8791e;
|
|
--tag-colour-nico: #4b5563;
|
|
--tag-colour-nico-hover: #626c7a;
|
|
}
|
|
|
|
.dark
|
|
{
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
--destructive: 0 62.8% 45%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
--top-nav-root-bg-mobile: #230505;
|
|
--top-nav-root-bg-desktop: #230505;
|
|
--top-nav-active-bg: #450a0a;
|
|
--top-nav-submenu-bg: #450a0a;
|
|
--top-nav-mobile-menu-bg: #230505;
|
|
--top-nav-mobile-active-bg: #450a0a;
|
|
--top-nav-brand-link: #f9a8d4;
|
|
--top-nav-menu-link: #93c5fd;
|
|
}
|
|
|
|
body
|
|
{
|
|
@apply overflow-x-clip bg-background text-foreground;
|
|
}
|
|
|
|
a
|
|
{
|
|
color: hsl(var(--theme-link));
|
|
}
|
|
a:hover
|
|
{
|
|
color: color-mix(in oklab, hsl(var(--theme-link)), white 18%);
|
|
}
|
|
}
|
|
|
|
:root
|
|
{
|
|
font-family: "Noto Sans JP Variable", system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
color-scheme: light dark;
|
|
color: hsl(var(--foreground));
|
|
background-color: hsl(var(--background));
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
:root[data-animation='reduced'] *,
|
|
:root[data-animation='off'] *
|
|
{
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
:root[data-animation='off'] *,
|
|
:root[data-animation='off'] *::before,
|
|
:root[data-animation='off'] *::after
|
|
{
|
|
animation-duration: 0ms !important;
|
|
animation-delay: 0ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0ms !important;
|
|
transition-delay: 0ms !important;
|
|
}
|
|
|
|
a
|
|
{
|
|
font-weight: 500;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
body
|
|
{
|
|
margin: 0;
|
|
min-width: 320px;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
#root
|
|
{
|
|
min-height: 100dvh;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
@keyframes wiki-blink
|
|
{
|
|
0%, 100% { color: #dc2626; }
|
|
50% { color: #2563eb; }
|
|
}
|
|
|
|
@keyframes wiki-blink-dark
|
|
{
|
|
0%, 100% { color: #f87171; }
|
|
50% { color: #60a5fa; }
|
|
}
|
|
|
|
.tag-marquee
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
.tag-link-colour
|
|
{
|
|
color: var(--tag-link-colour);
|
|
}
|
|
|
|
.tag-link-hover-colour:hover
|
|
{
|
|
color: var(--tag-link-hover-colour) !important;
|
|
}
|
|
|
|
.top-nav-root
|
|
{
|
|
background: var(--top-nav-root-bg-mobile);
|
|
}
|
|
|
|
.top-nav-bar
|
|
{
|
|
padding-inline: 8px;
|
|
column-gap: 4px;
|
|
}
|
|
|
|
.top-nav-primary
|
|
{
|
|
column-gap: 4px;
|
|
}
|
|
|
|
.top-nav-account
|
|
{
|
|
flex-shrink: 0;
|
|
width: max-content;
|
|
}
|
|
|
|
.top-nav-layout .top-nav-brand-link
|
|
{
|
|
margin-inline: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.top-nav-desktop-menu,
|
|
.top-nav-desktop-submenu,
|
|
.top-nav-layout .top-nav-account,
|
|
.top-nav-user-desktop
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.top-nav-desktop-menu
|
|
{
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.top-nav-separator-vertical
|
|
{
|
|
display: inline-flex;
|
|
}
|
|
|
|
.top-nav-separator-horizontal
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.top-nav-mobile-menu .top-nav-separator-vertical
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.top-nav-mobile-menu .top-nav-separator-horizontal
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
.top-nav-more-menu
|
|
{
|
|
display: grid;
|
|
grid-template-columns: fit-content(35%) minmax(0, 1fr);
|
|
align-items: center;
|
|
}
|
|
|
|
.top-nav-desktop-submenu .top-nav-menu-link
|
|
{
|
|
white-space: normal;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
.top-nav-desktop-menu .top-nav-menu-link
|
|
{
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
.top-nav-user-desktop
|
|
{
|
|
padding-right: 4px;
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.top-nav-user-mobile
|
|
{
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.top-nav-account .top-nav-user-desktop
|
|
{
|
|
min-width: 0;
|
|
max-width: 24vw;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.top-nav-locale-name
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 768px)
|
|
{
|
|
.top-nav-layout[data-measuring] .top-nav-primary,
|
|
.top-nav-layout[data-measuring] .top-nav-desktop-menu,
|
|
.top-nav-layout[data-measuring] .top-nav-account
|
|
{
|
|
flex: 0 0 auto;
|
|
width: max-content;
|
|
max-width: none;
|
|
}
|
|
|
|
.top-nav-layout:not([data-desktop]) .top-nav-locale-name,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-locale-name,
|
|
.top-nav-layout[data-measuring] .top-nav-locale-name
|
|
{
|
|
display: inline;
|
|
}
|
|
|
|
.top-nav-layout:not([data-desktop]) .top-nav-account .top-nav-user-desktop,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-account .top-nav-user-desktop,
|
|
.top-nav-layout[data-measuring] .top-nav-account .top-nav-user-desktop
|
|
{
|
|
max-width: none;
|
|
}
|
|
|
|
.top-nav-layout .top-nav-brand-link
|
|
{
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.top-nav-layout:not([data-desktop]) .top-nav-root,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-root
|
|
{
|
|
background: var(--top-nav-root-bg-desktop);
|
|
}
|
|
|
|
.top-nav-layout:not([data-desktop]) .top-nav-desktop-menu,
|
|
.top-nav-layout:not([data-desktop]) .top-nav-account,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-desktop-menu,
|
|
.top-nav-layout[data-measuring] .top-nav-desktop-menu,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-account,
|
|
.top-nav-layout[data-measuring] .top-nav-account
|
|
{
|
|
display: flex;
|
|
}
|
|
|
|
.top-nav-layout:not([data-desktop]) .top-nav-user-desktop,
|
|
.top-nav-layout:not([data-desktop]) .top-nav-desktop-submenu,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-user-desktop,
|
|
.top-nav-layout[data-measuring] .top-nav-user-desktop,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-desktop-submenu
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
.top-nav-layout:not([data-desktop]) .top-nav-mobile-controls,
|
|
.top-nav-layout:not([data-desktop]) .top-nav-mobile-menu,
|
|
.top-nav-layout:not([data-desktop]) .top-nav-user-mobile,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-mobile-toggle,
|
|
.top-nav-layout[data-measuring] .top-nav-mobile-toggle,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-mobile-controls,
|
|
.top-nav-layout[data-measuring] .top-nav-mobile-controls,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-mobile-menu,
|
|
.top-nav-layout[data-desktop='true'] .top-nav-user-mobile
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.top-nav-layout[data-measuring]
|
|
{
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px)
|
|
{
|
|
.top-nav-bar
|
|
{
|
|
padding-inline: 12px;
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.top-nav-primary
|
|
{
|
|
column-gap: 6px;
|
|
}
|
|
|
|
.top-nav-layout .top-nav-brand-link
|
|
{
|
|
margin-inline: 8px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.top-nav-desktop-menu
|
|
{
|
|
column-gap: 2px;
|
|
}
|
|
|
|
.top-nav-desktop-menu,
|
|
.top-nav-user-desktop
|
|
{
|
|
font-size: .9375rem;
|
|
}
|
|
|
|
.top-nav-desktop-menu .top-nav-menu-link
|
|
{
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.top-nav-user-desktop
|
|
{
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px)
|
|
{
|
|
.top-nav-bar
|
|
{
|
|
column-gap: 12px;
|
|
}
|
|
|
|
.top-nav-primary
|
|
{
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.top-nav-layout .top-nav-brand-link
|
|
{
|
|
margin-inline: 16px;
|
|
}
|
|
|
|
.top-nav-desktop-menu
|
|
{
|
|
column-gap: 4px;
|
|
}
|
|
|
|
.top-nav-desktop-menu,
|
|
.top-nav-user-desktop
|
|
{
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.top-nav-desktop-menu .top-nav-menu-link
|
|
{
|
|
padding-inline: 20px;
|
|
}
|
|
|
|
.top-nav-user-desktop
|
|
{
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-bar
|
|
{
|
|
padding-inline: 12px;
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-primary
|
|
{
|
|
column-gap: 6px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-brand-link
|
|
{
|
|
margin-inline: 8px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu
|
|
{
|
|
column-gap: 2px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu,
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-user-desktop
|
|
{
|
|
font-size: .9375rem;
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu .top-nav-menu-link
|
|
{
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='comfortable'] .top-nav-user-desktop
|
|
{
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-bar
|
|
{
|
|
padding-inline: 8px;
|
|
column-gap: 4px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-primary
|
|
{
|
|
column-gap: 4px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-brand-link
|
|
{
|
|
margin-inline: 4px;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-desktop-menu
|
|
{
|
|
column-gap: 0;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-desktop-menu,
|
|
.top-nav-layout[data-density='compact'] .top-nav-user-desktop
|
|
{
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-desktop-menu .top-nav-menu-link
|
|
{
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
.top-nav-layout[data-density='compact'] .top-nav-user-desktop
|
|
{
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.top-nav-brand-link,
|
|
.top-nav-mobile-toggle
|
|
{
|
|
color: var(--top-nav-brand-link);
|
|
}
|
|
|
|
.top-nav-brand-link:hover,
|
|
.top-nav-mobile-toggle:hover
|
|
{
|
|
color: color-mix(in oklab, var(--top-nav-brand-link), white 18%);
|
|
}
|
|
|
|
.top-nav-menu-link,
|
|
.top-nav-mobile-row
|
|
{
|
|
color: var(--top-nav-menu-link);
|
|
}
|
|
|
|
.top-nav-menu-link:hover,
|
|
.top-nav-mobile-row:hover
|
|
{
|
|
color: color-mix(in oklab, var(--top-nav-menu-link), white 18%);
|
|
}
|
|
|
|
.top-nav-highlight
|
|
{
|
|
background: var(--top-nav-active-bg);
|
|
}
|
|
|
|
.top-nav-submenu
|
|
{
|
|
background: var(--top-nav-submenu-bg);
|
|
}
|
|
|
|
.top-nav-mobile-menu .top-nav-submenu
|
|
{
|
|
background: var(--top-nav-mobile-active-bg);
|
|
}
|
|
|
|
.top-nav-mobile-menu
|
|
{
|
|
background: var(--top-nav-mobile-menu-bg);
|
|
}
|
|
|
|
.top-nav-mobile-active
|
|
{
|
|
background: var(--top-nav-mobile-active-bg);
|
|
}
|
|
|
|
.tag-marquee__animated
|
|
{
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
min-width: 100%;
|
|
width: max-content;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Loaded only by the development-only sample, with the OFL alongside the font. */
|
|
@font-face
|
|
{
|
|
font-family: 'BTRC Mongolian Preview';
|
|
src: url('/fonts/noto-sans-mongolian/NotoSansMongolian-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Development-only /mn-Mong layout. Unannotated pages retain horizontal text. */
|
|
[data-vertical-preview]
|
|
{
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-vertical-preview] > :not(.top-nav-layout)
|
|
{
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
[data-vertical-preview] [data-sidebar-container]
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-vertical-preview] .main-area
|
|
{
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
[data-vertical-preview] .main-area[data-vertical-content]
|
|
{
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar-panel
|
|
{
|
|
width: 100%;
|
|
height: var(--sidebar-height);
|
|
min-height: 0;
|
|
flex: none;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar
|
|
{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
direction: ltr;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar > *
|
|
{
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar > form
|
|
{
|
|
width: 16rem;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar > form > ul
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar > div
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar :is(h2, h3, ul)
|
|
{
|
|
margin: 0;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar-resize
|
|
{
|
|
display: block;
|
|
inset: auto 0 -.5rem;
|
|
width: 100%;
|
|
height: 1rem;
|
|
cursor: row-resize;
|
|
}
|
|
|
|
[data-vertical-preview] .sidebar-resize::before
|
|
{
|
|
inset: 50% 0 auto;
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
|
|
[data-vertical-preview] .vertical-preview-sample
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
font-family: 'BTRC Mongolian Preview', 'Mongolian Baiti', sans-serif;
|
|
font-size: 1.25rem;
|
|
line-height: 1.5;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* The post grid fills each column downwards before continuing to the right. */
|
|
[data-vertical-preview] .posts-main-area > div
|
|
{
|
|
display: flex;
|
|
height: 100%;
|
|
width: max-content;
|
|
margin: 0;
|
|
gap: 1rem;
|
|
}
|
|
|
|
[data-vertical-preview] .posts-main-area > div > div:first-child
|
|
{
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
}
|
|
|
|
[data-vertical-preview] .posts-main-area > div > div:last-child
|
|
{
|
|
display: flex;
|
|
width: max-content;
|
|
height: 100%;
|
|
margin: 0;
|
|
gap: 1rem;
|
|
}
|
|
|
|
[data-vertical-preview] .main-area[data-vertical-content] .post-list
|
|
{
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 10rem;
|
|
grid-template-rows: repeat(auto-fill, min(10rem, 100%));
|
|
flex: none;
|
|
width: max-content;
|
|
height: 100%;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
[data-vertical-preview] .main-area[data-vertical-content] .post-list > a
|
|
{
|
|
height: 100%;
|
|
}
|
|
|
|
[data-vertical-preview] .main-area[data-vertical-content] nav
|
|
{
|
|
flex: none;
|
|
align-self: flex-start;
|
|
margin: 0;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
[data-vertical-preview] .tags-main-area
|
|
{
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-filter
|
|
{
|
|
flex: none;
|
|
width: min(24rem, 75vw);
|
|
max-width: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-filter h1
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
max-height: 8rem;
|
|
margin-block: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-filter input[type='number']
|
|
{
|
|
max-width: 7rem;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-results
|
|
{
|
|
display: flex;
|
|
flex: none;
|
|
gap: 1rem;
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-table
|
|
{
|
|
max-width: none;
|
|
overflow-x: visible;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-table table
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
inline-size: max-content;
|
|
block-size: max-content;
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-table col
|
|
{
|
|
width: auto;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-table :is(th, td)
|
|
{
|
|
min-inline-size: 2rem;
|
|
max-inline-size: 16rem;
|
|
text-align: start;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-table thead
|
|
{
|
|
border-bottom: 0;
|
|
border-block-end: 2px solid currentColor;
|
|
}
|
|
|
|
[data-vertical-preview] .tag-list-table td:nth-child(2),
|
|
[data-vertical-preview] .tag-list-table time
|
|
{
|
|
writing-mode: horizontal-tb;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee,
|
|
[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee__static
|
|
{
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
max-inline-size: 16rem;
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee__animated
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/* Prose flows through the viewport height and grows into columns on the right. */
|
|
[data-vertical-preview] .wiki-main-area
|
|
{
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area > div
|
|
{
|
|
flex: none;
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area > div > span
|
|
{
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article,
|
|
[data-vertical-preview] .posts-main-area .localised-document
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
inline-size: 100%;
|
|
block-size: max-content;
|
|
max-width: none;
|
|
margin: 0;
|
|
flex: none;
|
|
}
|
|
|
|
[data-vertical-preview] .main-area[data-vertical-content] .localised-document
|
|
{
|
|
max-width: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article :is(h1, h2, h3, h4, p, ul, ol, blockquote)
|
|
{
|
|
margin: 0;
|
|
margin-block: 1em;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article :is(ul, ol)
|
|
{
|
|
padding: 0;
|
|
padding-inline-start: 1.5em;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article :is(img, video, iframe, svg)
|
|
{
|
|
writing-mode: horizontal-tb;
|
|
max-height: 100%;
|
|
max-width: none;
|
|
object-fit: contain;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose),
|
|
[data-vertical-preview] .main-area[data-vertical-content] :is(code, time, input, select, textarea)
|
|
{
|
|
writing-mode: horizontal-tb;
|
|
text-orientation: mixed;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose)
|
|
{
|
|
display: inline-block;
|
|
max-height: 100%;
|
|
max-width: min(48rem, 80vw);
|
|
overflow: auto;
|
|
vertical-align: top;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area article .not-prose
|
|
{
|
|
width: max-content;
|
|
height: 100%;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area .not-prose > div
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .wiki-main-area .not-prose > div > div:last-child
|
|
{
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
@media (min-width: 768px)
|
|
{
|
|
[data-vertical-preview].app-layout
|
|
{
|
|
flex-direction: row;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-layout
|
|
{
|
|
display: flex;
|
|
width: max-content;
|
|
max-width: 50vw;
|
|
height: 100%;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-bar
|
|
{
|
|
flex-direction: column;
|
|
flex: none;
|
|
width: 7rem;
|
|
height: 100%;
|
|
padding: .5rem;
|
|
gap: .5rem;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-primary
|
|
{
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-brand-link
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
max-height: 9rem;
|
|
white-space: normal;
|
|
margin-block: .5rem;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-desktop-menu
|
|
{
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-desktop-menu > div:not(.top-nav-highlight)
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-desktop-menu .top-nav-menu-link
|
|
{
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 3rem;
|
|
height: auto;
|
|
padding: .5rem;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-menu-link > :not(svg, select),
|
|
[data-vertical-preview] .top-nav-more-menu h2
|
|
{
|
|
writing-mode: vertical-lr;
|
|
text-orientation: mixed;
|
|
max-height: 9rem;
|
|
white-space: normal;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-highlight
|
|
{
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-account
|
|
{
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-account .top-nav-user-desktop
|
|
{
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-locale-name
|
|
{
|
|
display: inline;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-desktop-submenu
|
|
{
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-submenu-content
|
|
{
|
|
width: max-content;
|
|
max-width: 35vw;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
[data-vertical-preview] :is(.top-nav-submenu-items, .top-nav-more-links)
|
|
{
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-items: stretch;
|
|
}
|
|
|
|
[data-vertical-preview] .top-nav-submenu-items .top-nav-menu-link
|
|
{
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px)
|
|
{
|
|
[data-vertical-preview] .top-nav-layout
|
|
{
|
|
max-height: 50dvh;
|
|
overflow-y: auto;
|
|
}
|
|
}
|