逆流 版式
/* 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; } } }
评分模块与著作信息模块:
这里有一盘金枪鱼寿司,Nya!
该版式以半影版式为模板修改而来,增加了一些小动画_(:зゝ∠)_
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:obflow]]
转起来的时候更帅,对吧?
此为分页哒!
喵喵喵~
喵喵喵~
喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧喵1 |
页眉字体为 Josefin Sans / 黑体。
正文字体为 Roboto。
等宽字为 Fira Code / 幼圆。
Footnotes
1. 呜喵呜喵~
/* Obflow Theme [2022 Wikidot Theme] By AI_Mayca Based on Penumbra by EstrellaYoshte Created for the SCP Foundation Logo licensed under CC BY SA 3.0 */ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); body { width: 100%; font-family: 'Roboto', sans-serif; color: #E9E9EB; background-color: #43506C; background-image: linear-gradient( to bottom, #2A3853, #2A3853 90px, #2A3853 90px, #43506C 200px, #43506C 200px, #43506C 100%); background-repeat: no-repeat; } #page-content { font-size: 0.9rem; } #main-content { top: -1.2rem; } /* 滚轮↓ */ ::-webkit-scrollbar { width: 9px; background: #transparent; } ::-webkit-scrollbar-track { background: #43506C; } ::-webkit-scrollbar-thumb { background: #E9E9EB; border: none; } ::-webkit-scrollbar-thumb:hover { background: #EF4B4C; } /* root值↓ */ :root { } /* 版头↓ */ div#container-wrap { background-image: none; } div#header { height: 12rem; background-image: none; } /* 钟表倒转logo动画↓ */ div#extra-div-1::before { content: ""; background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸基准E9E9EB'); animation:rotateImg 5s linear infinite; } div#extra-div-1::after { content: ""; background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸时针E9E9EB'); animation:rotateImg 30s linear infinite; } div#extra-div-2::before { content: ""; background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸分针E9E9EB'); animation:rotateImg 3s linear infinite; } div#extra-div-2::after { content: ""; background: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/logo_时间轰炸秒针E9E9EB'); animation:rotateImg 0.3s linear infinite; } div#extra-div-1::before, div#extra-div-1::after, div#extra-div-2::before, div#extra-div-2::after { height: 164px; width: 80%; top: 0; left: 10%; position: absolute; background-size: contain; background-repeat: no-repeat; background-position: 50% 0%; z-index: -1; vertical-align: middle; } @keyframes rotateImg { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} } #header h1, #header h2 { margin-left: 0; float: none; text-align: center; } #header h1 { padding-top: 4rem; } #header h2 { margin-top: 0.3rem; } #header h1 span, #header h2 span { font-size: 0; display: none; } #header h1 a::before, #header h2::before { color: #E9E9EB; font-family: 'Josefin Sans', '黑体', sans-serif; text-shadow: none; } #header h1 a::before { content: var(--header-title, "基金会时间部队"); font-weight: 300; font-size: 1em; text-shadow: -1.5px -1.5px 0 #43506C, 1.5px -1.5px 0 #43506C, -1.5px 1.5px 0 #43506C, 1.5px 1.5px 0 #43506C, -1.5px 0 0 #43506C, 1.5px 0 0 #43506C, 0 1.5px 0 #43506C, 0 -1.5px 0 #43506C; } #header h2::before { content: var(--header-subtitle, "[未解─未知─未有]"); font-weight: 600; font-size: 1.22em; } /* 账户样式↓ */ #login-status { color: transparent; transition: color 0.5s ease; } #login-status a { color: #EF4B4C; } #login-status ul a, #account-options { color: #E9E9EB; background: #43506C; } #login-status ul a:hover { color: #EF4B4C; } #login-status .printuser { color: #E9E9EB; opacity: 0; right: -3rem; transition: opacity 0.3s ease, right 0.5s ease; position: relative; z-index: -1; } #login-status:hover { color: #E9E9EB; transition: color 0.5s ease; } #login-status:hover .printuser { opacity: 1; right: 0; transition: opacity 0.5s ease, right 0.3s ease; } #account-topbutton { border: solid 1px #EF4B4C; } #footer, #footer a { background: transparent; color: #E9E9EB; } #license-area { color: #E9E9EB; } /* 搜索栏↓ */ #search-top-box { top: 2.2rem!important; right: 8px; } #search-top-box-form > input[type=submit] { border: solid 1px #E9E9EB; background: #2A3853!important; box-shadow: none; border-radius: 0; color: #E9E9EB; transition: color 0.15s linear; } #search-top-box-form input[type=submit]:hover { border: solid 1px #EF4B4C; box-shadow: none; color: #EF4B4C; } #search-top-box-form > input[type=text] { border: solid 1px #E9E9EB; background: #2A3853!important; box-shadow: none; border-radius: 0; color: #E9E9EB; opacity: 0; right: -3rem; transition: opacity 0.3s ease, right 0.5s ease; position: relative; z-index: -1; } #search-top-box-form:hover > input[type=text] { opacity: 1; right: 0; transition: opacity 0.5s ease, right 0.3s ease; } /* 顶栏↓ */ #top-bar { top: 12rem; display: flex; justify-content: center; right: 0; } #top-bar, #top-bar a { color: #E9E9EB; transition: color 0s; } #top-bar ul li ul { border-color: #EF4B4C; overflow: hidden; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top-color: #43506C; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #2A3853; color: #E9E9EB; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: #2A3853; color: #EF4B4C; transition: color 0.2s linear; } /* 侧栏↓ */ div#side-bar{ background: #2A3853; clear: both; padding: .8em; border-radius: 0; box-shadow: none; overflow-x: hidden; } #side-bar .heading{ color: #E9E9EB; font-family: 'Josefin Sans', '黑体', sans-serif; font-size: 0.94rem; border-bottom: solid 1px #E9E9EB; } #side-bar .side-block { border: transparent; border-radius: 0; box-shadow: none; background-color: #2A3853 !important; } .side-block .menu-item > .image { display: none; } #side-bar .collapsible-block-folded { background: none; } #side-bar .collapsible-block-link { margin-left: 0; } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px #E9E9EB; padding-left: 15px; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: #E9E9EB; font-family: 'Josefin Sans', '黑体', sans-serif; font-size: 0.94rem; } #top-bar div.open-menu a { border-radius: 0; box-shadow: none; color: #EF4B4C; background-color: #2A3853; border: solid 1px #2A3853; } /* 小于767px↓ */ @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #2A3853; left: -18.6em; } #side-bar:target { border: none; box-shadow: none; } #side-bar .close-menu { transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s; display: block; position: fixed; width: 100%; height: 100%; top: 0; right: 0; background: rgba(0,0,0,0.3); background-position: 18.6em 50%; z-index: -1; opacity: 0; pointer-events: none; } #side-bar:target .close-menu { width: calc(100% - 18.6em); right: 0; left: auto; opacity: 1; pointer-events: auto; } #side-bar:target .close-menu:hover { background: unset; } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -5.5%; } #side-bar { top: 0; } #side-bar .heading, #side-bar .collapsible-block-folded, #side-bar .collapsible-block-unfolded-link { padding-left: 1em; margin-left: -1em; } #search-top-box { top: 107px; } } /* tab块↓ */ /* 基本样式 ↓*/ .yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit} /* 自定义tab↓ */ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { display: flex; flex-wrap: wrap; width: calc(100% - .125rem); margin: 0 auto; border-color: #E9E9EB; box-shadow: none; } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { color: #E9E9EB; font-weight: bold; background-color: #2A3853;/* ←tab未选中背景色 */ border: unset; box-shadow: none; box-shadow: none; transition: background-color 0.15s linear; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { color: #2A3853; background-color: #E9E9EB;/* ←tab已选中背景色 */ } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { position: relative; display: flex; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; color: #E9E9EB; background-color: #2A3853; border-color: transparent; box-shadow: none; } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a { display: flex; align-items: center; justify-content: center; width: 100%; } .yui-navset .yui-nav li em { border: unset; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em { padding: 0.35em 0.75em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { flex-grow: 2; margin: 0; padding: 0; background-color: #E9E9EB;/* ←tab未选中背景色 */ } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { border: none; } .yui-navset .yui-nav .selected a { width: 100%; color: #2A3853; font-weight: bold; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { color: #2A3853; background-color: #E9E9EB; } .yui-navset .yui-content { background-color: #2A3853; box-shadow: none; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { padding: 0.5em; border: none; } /* tab切换动画↓(by Croquembouc) */ .yui-navset .yui-content > div { display: block; top: 0; overflow: hidden; transform-origin: 0 0; } #page-content .yui-navset .yui-content > div[style*="none"] { display: block !important; flex: 0; max-height: 0; padding: 0 0.5em; border-width: 0; /* 以下过渡将影响tab-disappear */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s; animation: tab-disappear 0.5s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; /* The following transition affects the one that APPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } @keyframes tab-disappear { 0% { max-height: 9999rem; opacity: 1; } 1% { max-height: 100vh; } 100% { max-height: 0; opacity: 0; } } @keyframes tab-appear { 0% { max-height: 0; opacity: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; opacity: 1; } } /* 信息栏↓ */ body { --barColour: #2A3853; --linkColour: #E9E9EB; } .info-container .collapsible-block-content { padding: 0 0.5em 30px; } .info-container .collapsible-block-content .wiki-content-table { width: 100%; } /* 信息栏补丁↓(by Monkatraz )*/ #page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; box-shadow: none; } #page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before { content: ""; display: none; } #page-content .info-container .collapsible-block-content::after { display: none; } /* 著作信息块↓ */ #page-content .creditRate { margin: unset; margin-top: 4px; margin-bottom: 4px; margin-right: 3px; } #page-content .rate-box-with-credit-button { background-color: #2A3853; border: solid 2px #2A3853; border-radius: 0; box-shadow: 3px 0px 0px 0px #EF4B4C, -3px 0px 0px 0px #EF4B4C; } #page-content .rate-box-with-credit-button .creditButton p a { border-left-color: transparent; } #page-content .rate-box-with-credit-button .page-rate-widget-box .cancel { border-radius: 0; } #page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points { border-left: 0; } .rate-box-with-credit-button .page-rate-widget-box .cancel a:hover { border-radius: 0; } #page-content .rate-box-with-credit-button .fa-info { color: #E9E9EB; } #page-content .rate-box-with-credit-button .fa-info:hover { color: #EF4B4C; } #page-content .creditButtonStandalone p a { background-color: #2A3853; border: solid 2px #2A3853; border-radius: 0; box-shadow: 3px 0px 0px 0px #EF4B4C; color: #E9E9EB; } #page-content .creditButtonStandalone p a:hover { color: #EF4B4C; } #page-content .modalbox { background: #43506C !important; color: #E9E9EB; box-shadow: none; } .close-credits, .credit-back { filter: grayscale(100%) invert(100%) contrast(275%); } /* 评分模块↓ */ .page-rate-widget-box { margin: unset; border-radius: 0; border: solid 2px #2A3853; box-shadow: 3px 0px 0px 0px #EF4B4C, -3px 0px 0px 0px #EF4B4C; background-color: #2A3853; margin-top: 4px; margin-bottom:4px; margin-right: 3px; } .page-rate-widget-box .rate-points { background-color: #2A3853 !important; border: none; color: #E9E9EB !important; text-transform: capitalize; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #2A3853; border-top: none; border-bottom: none; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: transparent; color: #E9E9EB; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #2A3853; color: #EF4B4C; } .page-rate-widget-box .cancel { background: transparent; background-color: #2A3853; border: none; } .page-rate-widget-box .cancel a { color: #E9E9EB; } .page-rate-widget-box .cancel a:hover { background: #2A3853; color: #EF4B4C; } /* 页面元素↓ */ .page-source, tt { font-family: "Fira Code", '幼圆', monospace; font-size: 0.87rem; } .code pre, .code p, .code { font-family: "Fira Code", '幼圆', monospace; font-size: 0.87rem; color: #2A3853; } h1 { color: #E9E9EB; font-family: 'Josefin Sans', '黑体', sans-serif; font-weight: bold; } h2, h3, h4, h5, h6 { color: #E9E9EB; font-family: 'Josefin Sans', '黑体', sans-serif; font-weight: bold; } #page-title { color: #E9E9EB; font-family: 'Josefin Sans', '黑体', sans-serif; font-size: 1.65rem; text-align: center; border-color: #E9E9EB; } /* 链接触发↓ */ a, a.newpage, a:visited, #side-bar a:visited { color: #EF4B4C; transition: color 0.15s linear; } a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover { color: #E9E9EB; text-decoration: none; background-color: #EF4B4C; } a.newpage { filter: hue-rotate(180deg); } /* 边栏媒体、可折叠文件、ACS、信息按钮和Ayers模块的补丁,使链接不会被覆盖↓ */ #page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover { background: transparent; } .info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link { background: var(--linkColour) !important; } hr { background-color: #E9E9EB; } blockquote, div.blockquote, #toc { background-color: #2A3853; border: solid 2px #43506C; box-shadow: -3px 0px 0px -0.1px #EF4B4C, 3px 0px 0px -0.1px #EF4B4C; } .code { background-color: #E9E9EB; border: solid 3px #43506C; box-shadow: none; } .scp-image-block { border: solid 8px #2A3853; border-bottom: solid 0px #2A3853; box-shadow: 0px 0.26rem 0px 0px #E9E9EB; box-sizing: border-box; } .scp-image-block .scp-image-caption { background-color: #2A3853; border: solid 4px #2A3853; color: #E9E9EB; font-size: 0.84rem; } .scp-image-block.block-left { margin-left: 0; } .scp-image-block.block-right { margin-right: 0; } @media (max-width: 540px) { .scp-image-block.block-left, .scp-image-block.block-right { float: none; clear: both; margin-left: auto; margin-right: auto; } } #page-content .wiki-content-table tr th { border: solid 1px #E9E9EB; color: #2A3853; background-color: #E9E9EB;/* ←表格标题边框 */ } #page-content .wiki-content-table tr td { border: solid 1px #E9E9EB;/* ←表格内容边框 */ } /* 折叠块↓ */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: #2A3853; transition: box-shadow 0.25s linear; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; width: min-content; white-space: nowrap; overflow: hidden; margin: auto; } #page-content .collapsible-block-link { text-decoration: none; color: #E9E9EB; font-weight: bold; } #page-content .collapsible-block-unfolded .collapsible-block-content { max-height: 0; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-folded:hover + .collapsible-block-unfolded .collapsible-block-unfolded-link { box-shadow: 5px 0px 0px 0px #EF4B4C, -5px 0px 0px 0px #EF4B4C; transition: box-shadow 0.25s linear; } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; margin-bottom: 10px; } /* 选中元素↓ */ ::selection { background: #E9E9EB; color: #43506C; } /* 脚注块↓ */ .hovertip { font-size: 0.9rem; background-color: #2A3853 !important; border: solid 1px #EF4B4C !important; } .footnotes-footer { background-color: #2A3853; padding-left: 1.4rem; padding-right: 1.4rem; padding-bottom: 1.5rem; box-shadow: -0.24rem 0px 0px 0px #E9E9EB; } .footnotes-footer .title { color: #E9E9EB; } .footnote .f-footer, .equation .e-footer, .reference .r-footer { display: none; } /* Tags↓ */ #main-content .page-tags a { margin-top: 0.18rem; } .page-tags span { border-top: 1px solid #E9E9EB; } /* 页面弹窗↓ */ .owindow { background-color: #2A3853; border-color: #E9E9EB; } .owindow .modal-header { background-color: #2A3853; } .owindow .modal-body img { background-color: transparent !important; } .owindow .title { background-color: #2A3853; color: #E9E9EB; border-bottom: 1px solid #2F333C; } .owindow .button-bar a { background-color: #21252E; border-color: #E9E9EB; color: #E9E9EB; } .owindow .button-bar a:hover { background-color: #E9E9EB; } /* 编辑按钮↓ */ .buttons .btn { background-color: #2A3853; border-color: #E9E9EB; color: #E9E9EB; padding: 3px 5px; } .buttons .btn:hover { background-color: #E9E9EB; color: #2A3853; } /* 编辑锁信息块↓ */ #lock-info { background-color: #2A3853; border-color: #E9E9EB; } /* 页面来源、评级等的关闭按钮↓ */ a.action-area-close:hover { background-color: #2A3853; } /* 页面历史记录↓ */ .pager .current { background-color: #E9E9EB; border-color: #E9E9EB; } /* Sidebox移动端优化↓(courtesy of Woed) */ @media (max-width: 1290px) { .sidebox { width: auto; max-width: 65vw!important; border: none; padding-left: 0.4rem; padding-right: 0.4rem; top: 0.75rem; right: calc(((100vw - 45.8rem)/2) * -1); left: initial; -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; overflow: visible; } .sidebox::before, .sidebox::after { content: ""; position: absolute; right: 0; } .sidebox::before { top: calc(50% - 0.75rem); width: 0; height: 0; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; border-right: 0.75rem solid #E9E9EB; transition: border 0.1s ease-in-out 0.1s; z-index: 10; } .sidebox::after { top: 0; max-width: 0.75rem; width: 100%; height: 100%; box-shadow: 0.15rem 0 0 0 #E9E9EB; max-height: calc(100vh - 18rem); background-color: #2A3853; z-index: -1; transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s; } .sidebox > * { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out 0.2s; -o-transition: opacity 0.2s ease-in-out 0.2s; transition: opacity 0.2s ease-in-out 0.2s; } .sidebox:hover { overflow: visible; -webkit-clip-path: inset(-0.125rem -0.25rem 0 0); clip-path: inset(-0.125rem -0.25rem 0 0); -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; } .sidebox:hover::before { border-top: 0 solid transparent; border-bottom: 0 solid transparent; } .sidebox:hover::after { box-shadow: 0 -0.125rem 0 0 #E9E9EB; right: 0; max-width: 100%; } .sidebox:hover > * { opacity: 1; } } @media (max-width:768px) { .sidebox, .sidebox:hover { right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem); } }