:root {
--sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
--body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
#content-wrap {
display: flex;
position: initial;
flex-direction: row;
flex-grow: 2;
width: calc(100vw - (100vw - 100%));
max-width: inherit;
height: auto;
min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
}
#main-content {
position: initial;
width: var(--body-width-on-desktop, 45.75rem);
max-width: var(--body-width-on-desktop, 45.75rem);
max-height: 100%;
margin: 0 auto;
padding: 2rem 1rem;
}
#page-content {
max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
}
#side-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
grid-area: side-bar;
width: var(--sidebar-width-on-desktop, 13.6rem) !important;
min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
max-height: 100vh;
padding-right: 2.5rem;
padding-left: 0.5rem;
overflow-y: scroll;
transition:
translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear;
border: none;
border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
direction: rtl;
scrollbar-width: thin;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
scrollbar-color:
rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
rgba(var(--swatch-tertiary-color), 0.05); /* Track */
}
#side-bar::-webkit-scrollbar-track {
background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
}
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
width: 0.5rem;
border-right-width: calc(100vw + 100vh);
border-right-style: inset;
border-color: inherit;
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
}
#side-bar:is(:hover, :active, :focus-within) {
margin-right: 2.25rem;
padding-right: 0.25rem;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(var(--swatch-primary-darker), 1);
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
scrollbar-color:
rgba(170, 170, 170, 1) /* Thumb */
rgba(252, 252, 252, 1); /* Track */
scrollbar-color:
rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */
}
#main-content::after {
content: " ";
display: flex;
position: fixed;
top: 0;
left: 1rem;
align-items: center;
justify-content: center;
width: 1rem;
height: 100%;
max-height: 100%;
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center left 1rem;
background-size: 1rem 12.875rem;
pointer-events: none;
}
#side-bar:is(:hover, :active, :focus-within) + #main-content::after {
left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
width: 0rem;
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
font-size: 0em;
}
#main-content::before {
content: " ";
position: absolute;
z-index: 9;
top: var(--final-header-height-on-desktop, 0);
left: 0;
width: var(--sidebar-width-on-desktop, 14.5rem);
height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
transition:
translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0.5;
background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
pointer-events: none;
translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
}
#side-bar:is(:hover, :active, :focus-within) + #main-content::before {
translate: 0;
opacity: 0;
}
#side-bar .side-block {
margin-top: 1em;
padding-left: 0.25em;
border-right-width: 0rem;
border-left-width: 0rem;
border-radius: 0;
background-color: rgb(0, 0, 0, 0);
direction: ltr;
}
#side-bar .scpnet-interwiki-wrapper {
direction: ltr;
}
/* Print Friendly Formatting by Estrella */
body.print-body {
--sidebar-width-on-desktop: 0;
}
body.print-body #main-content::before,
body.print-body #main-content::after {
display: none;
}
}
我只能说,
偷代码失败
嘛,这个代码还好的啦w
pokm那里借来的,自己又改了些奇奇怪怪的细节什么的
其实是
——来自「卯酉新幹線」
以上,一个在传统和现代的交互中挣扎的角色,转而投身于日常生活和艺术创作,仅此而已。
可能吧……会牵扯出一些其他稍微久远一点的东西出来,谁知道呢?
需要联动的时候可以不那么拘谨,毕竟她也适应了正常的生活
如果想试试去写一些年代稍微久远的东西,可以考虑一下关于「这场变革」为什么资料没有流传下来
反正,遵循一无二随,写的爽就完事了嘛
Logo原画师@莳椛YUANNN,遵循CC-BY-SA3.0协议
——来自「卯酉新幹線」
模范市民档案,请各位认真阅读,不要只注意css。
啊啊感谢推荐啦ww
——来自「卯酉新幹線」
感觉自己的市民档案不配叫市民档案
啊,你发现了隐藏的签名档
嘛,大家的风格都不一样啦w
因为是在感情和经历上稍显复杂的角色,所以就用了不一样的表达方式
——来自「卯酉新幹線」
我写的都是什么玩意儿
You will be killed by yourself
(挠头)嘛只是个人设啦,主要是我个人也比较喜欢这种类似的元素
所以就加在一起了hhh
——来自「卯酉新幹線」
好厉害的css
好强的文笔
恭喜喜提精品
感谢!我会继续努力的w
——来自「卯酉新幹線」
漂亮啊,阿园。
恭喜。
(然而我最高分才+9啊艹…
乐此,狂醉,不知所云。
谢谢石头ww
我都没有文章[捂脸]
不过我会继续努力的ww
——来自「卯酉新幹線」
版式又改回来了,那就当我啥都没说吧(掩面跑)
大佬好,蹭个眼熟(
啊pokm佬提的意见很有参考性
wow炫酷代码噢噢噢
法治社会 我治社会
前来膜拜
看了这篇市民档案我觉得我的市民档案就一辣鸡
欢迎莳椛前辈加入小城大家庭!说真的我特喜欢您制作的基金会周边,但没赶得上现场去膜拜一直挺可惜的(悲
诶诶我不是莳花老师哦!我是莳椛!莳花老师比我强多啦(瘫)
我是菜鸡x要是介意的话叫阿园就好啦x
——来自「卯酉新幹線」