Atris Gadgets
星尘 - 主题版式 » Atris Gadgets
测试文本
/* USER ID */ @keyframes pm-indicator { 0% { outline: 1px solid rgb(var(--pm-indicator-color)); } 100% { outline: 1px solid transparent; } } #login-status { position: fixed; right: calc(var(--search-height) + 1.5rem); top: 0px; max-width: 100%; pointer-events: none; user-select: none; font-size: 0; z-index: 2; width: var(--omh-dt); float: right; height: var(--omh-dt); } #login-status:is(:hover,:focus-within) { pointer-events: auto } #login-status>* { user-select: text; font-size: var(--id-ui-font-size) } #login-status::after { content: ''; display: block; position: absolute; top: 0; right: 0; width: var(--user-button-width); height: 0; pointer-events: auto; cursor: pointer; background-color: rgb(var(--user-icon-button-background-hover)); z-index: 1; transition: height var(--header-link-transition-2nd); backdrop-filter: blur(2px) } #login-status:is(:hover,:focus-within)::after { height: 100%; transition: height var(--header-link-transition-1st) } #login-status span.printuser { display: contents; font-size: 0; user-select: none; pointer-events: none } #login-status span.printuser>a { display: flex; align-items: center; justify-content: center; padding: 0.2875rem; box-sizing: border-box; position: absolute; top: 0.4px; right: -2.5px; background: 0 0; width: 100%; height: 100%; pointer-events: auto; z-index: 2; } #login-status span.printuser>a:hover{ border-bottom: 1px solid transparent; } #login-status span.printuser>a img { background-image: none!important; padding: 0; display: block; height: 100%; flex-grow: 1; padding-right: 0; outline: 0px solid rgb(var(--user-icon-border-color)); filter: drop-shadow(0rem 0.2rem 0.35rem rgb(0, 0, 0, 0.4)); } a#account-topbutton,a#my-account { display: none } #login-status>a[href*='account/messages'] { display: inline-block; position: fixed; font-size: 0px; pointer-events: none; user-select: none; width: 6px; height: 5.5px; background-color: rgb(var(--pm-indicator-color)); top: 2px; right: calc(var(--search-height) + 2px + 1.5rem); z-index: 3; transform: rotateZ(45deg); -webkit-clip-path: var(--undertone-ring); clip-path: var(--undertone-ring); animation: linear 1.05s infinite alternate pm-indicator; } div#account-options { width: var(--login-status-width); position: absolute; inset-block-start: 100%; right: unset; inset-inline-end: 0; display: block !important; background-color: rgb(var(--login-status-background-color),.3); backdrop-filter: brightness(2) blur(1px) contrast(0.4); border-radius: 0 0 2px 2px; } @media only screen and (max-width: 767px) { div#account-options { inset-block-start: 0%; inset-inline-end: 100%; background-color: rgb(var(--login-status-background-color),1); } } #account-options,:where(#login-status)>:is(.login-status-create-account,.login-status-sign-in) { clip-path: inset(0 0 0 100%); transition: clip-path var(--header-link-transition-1st) } :where(#login-status):is(:hover,:focus-within)>:is(#account-options,.login-status-create-account,.login-status-sign-in) { clip-path: inset(0); transition: clip-path var(--header-link-transition-2nd) } div#account-options>ul { display: grid; grid-template-columns: 1fr 1fr } div#account-options>ul>li { display: contents } div#account-options>ul>li>a { display: flex; height: calc(var(--id-ui-font-size) *2.25); align-items: center; justify-content: center; text-align: center; padding: 0; position: relative; text-decoration: none; text-shadow: none; color: rgb(var(--login-status-text-color)) } div#account-options>ul>li>a:is(:hover,:focus) { color: rgb(var(--login-status-text-color-hover)); border-bottom: 1px solid transparent; text-shadow: 0 0 1px rgb(var(--login-status-text-color-hover)); } #login-status a:is(.login-status-create-account,.login-status-sign-in)::before,div#account-options>ul>li>a::before { content: ''; display: block; position: absolute; top: 0; right: 0; width: 0; height: 100%; background-color: rgb(var(--login-status-link-background-hover)); z-index: -1; transition: width var(--header-link-transition-1st); backdrop-filter: blur(2px); filter: opacity(0.7); box-shadow: 0 0 6px 0px rgb(var(--login-status-link-background-hover)), inset 0 0 6px 0px rgb(var(--login-status-link-background-hover)); } #login-status a:is(.login-status-create-account,.login-status-sign-in):is(:hover,:focus)::before,div#account-options>ul>li>a:is(:hover,:focus)::before { width: 100% } #login-status>a:first-child+span { display: block; width: 100%; height: 100%; clip-path: none; pointer-events: auto; cursor: pointer; font-size: 0; position: absolute; top: 0; right: 0; background-color: rgb(var(--user-icon-button-color)); z-index: 2; filter: brightness(1.5); -webkit-mask-image: var(--user-icon-mask); mask-image: var(--user-icon-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 50%; mask-size: 50%; transition: background-color var(--header-link-transition-2nd) } @media screen and (max-width: 767px) { #login-status>a:first-child+span { background-color: rgb(var(--user-icon-button-color-hover)); } #login-status:is(:hover,:focus-within)>a:first-child+span { background-color: rgb(var(--user-icon-button-color)); } #login-status::after { background-color: rgb(63,63,63); } } #login-status:is(:hover,:focus-within)>a:first-child+span { background-color: rgb(var(--user-icon-button-color-hover)); transition: background-color var(--header-link-transition-1st) } #login-status a:is(.login-status-create-account,.login-status-sign-in) { display: flex !important; position: absolute !important; inset-inline-end: 0; inset-block-start: 100%; height: calc(var(--id-ui-font-size) *1.75); width: calc(var(--login-status-width)/3); text-align: center; text-decoration: none; justify-content: center; align-items: center; background-color: rgb(var(--login-status-background-color)) !important; color: rgb(var(--login-status-text-color)) !important; } #login-status a.login-status-create-account { inset-inline-end: calc(var(--login-status-width)/2 - 10%) } /* TABVIEW */ #page-content .yui-navset .yui-content a, #page-content .yui-navset .yui-content a:visited { color: rgb(var(--tab-highlight-color)); text-shadow: 0 0 9px #000; font-size: 103%; filter: brightness(1.1); } #page-content .yui-navset .yui-content a:hover { color: rgb(var(--tab-highlight-color)); text-shadow: 0 0 9px #000; font-size: 103%; filter: brightness(1.05); border-bottom: 1px solid rgb(var(--highlight-color)); } #page-content .yui-navset .yui-content > div > blockquote p { color: rgb(var(--tab-highlight-color)) } .yui-navset.yui-navset-top>ul.yui-nav { display: flex; flex-wrap: wrap; border: none; font-family: var(--label-font); font-size: .95em; gap: .05rem; } .yui-navset .yui-nav a { border: unset; background-color: rgb(var(--label-bg-color),0.5); color: rgb(var(--label-txt-color)); } .yui-navset .yui-nav li { display: flex; position: relative; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; transform: translateY(0); border: none; background-color: rgb(var(--label-bg-color)); box-shadow: 0 0 0 0 rgb(var(--label-selected-outline)); transition: box-shadow .2s var(--tabview-transition-curve),color .15s var(--tabview-transition-curve),background-color .15s var(--tabview-transition-curve),transform .2s var(--tabview-transition-curve); will-change: box-shadow,color,background-color,transform } .yui-navset .yui-nav li a,.yui-navset-bottom .yui-nav li a,.yui-navset-top .yui-nav li a { --wght: calc(var(--tab-title-weight) - 200); display: flex; background:rgb(var(--label-bg-color),0.5); color: rgb(var(--label-txt-color)); position: relative; align-items: center; justify-content: center; width: 100%; font-weight: var(--wght); font-size: var(--label-txt-size); vertical-align: bottom; transition: background-color .16s var(--tabview-transition-curve),color .16s var(--tabview-transition-curve),font-weight .16s var(--tabview-transition-curve),font-variation-settings .16s var(--tabview-transition-curve); } .yui-navset .yui-nav a:active,.yui-navset .yui-nav a:focus,.yui-navset .yui-nav a:hover { --wght: var(--tab-title-weight); color: rgb(var(--label-txt-hover-color)); font-weight: var(--wght); background: rgb(var(--label-bg-hover-color)); } .yui-navset .yui-nav a:focus-within { --wght: var(--tab-title-weight); color: rgb(var(--label-txt-hover-color)); font-weight: var(--wght); background: rgb(var(--label-bg-hover-color)); } .yui-navset .yui-nav a:before { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--label-bg-color),.5); content: " "; -webkit-clip-path: var(--label-clip-path); clip-path: var(--label-clip-path); pointer-events: none; transition: background-color 50ms var(--tabview-transition-curve),-webkit-clip-path .2s var(--tabview-transition-curve); transition: background-color 50ms var(--tabview-transition-curve),clip-path .2s var(--tabview-transition-curve); transition: background-color 50ms var(--tabview-transition-curve),clip-path .2s var(--tabview-transition-curve),-webkit-clip-path .2s var(--tabview-transition-curve) } .yui-navset .yui-nav a:hover::before, .yui-navset .yui-nav a:active::before,.yui-navset .yui-nav a:focus::before { background-color: rgb(var(--label-bg-color)); -webkit-clip-path: var(--label-hover-clip-path); clip-path: var(--label-hover-clip-path); pointer-events: none; transition: background-color 50ms var(--tabview-transition-curve),-webkit-clip-path .2s var(--tabview-transition-curve); transition: background-color 50ms var(--tabview-transition-curve),clip-path .2s var(--tabview-transition-curve); transition: background-color 50ms var(--tabview-transition-curve),clip-path .2s var(--tabview-transition-curve),-webkit-clip-path .2s var(--tabview-transition-curve) } .yui-navset .yui-nav li:active a:before,.yui-navset .yui-nav li:focus a:before,.yui-navset .yui-nav li:hover a:before { -webkit-clip-path: var(--label-hover-clip-path); clip-path: var(--label-hover-clip-path); background: rgb(var(--highlight-color)) } .yui-navset .yui-nav li:focus-within a:before { -webkit-clip-path: var(--label-hover-clip-path); clip-path: var(--label-hover-clip-path); background: rgb(var(--highlight-color)) } .yui-navset .yui-nav .selected a em,.yui-navset .yui-nav a em { top: 0; padding: .35em .75em; overflow: hidden; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap } .yui-navset .yui-nav li em { border: unset !important } .yui-navset .yui-nav .selected { z-index: 10; margin: 0; padding: 0; transform: scale(1.05); box-shadow:0 0 1px 1px #000; } .yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a em { border: transparent } .yui-navset .yui-nav .selected a { --wght: var(--tab-title-weight); background-image: none; background: rgb(var(--lable-bg-selected-color)); color: rgb(var(--label-txt-selected-color))!important; font-weight: var(--wght); text-shadow: none; } .yui-navset .yui-nav .selected a:before,.yui-navset .yui-nav .selected:active a:before,.yui-navset .yui-nav .selected:focus a:before,.yui-navset .yui-nav .selected:hover a:before { --clip-path: polygon(0 0,calc(100% + 1rem) -1rem,calc(100% + 1rem) calc(100% + 1rem),0 calc(100% + 1rem)); background: rgb(var(--lable-bg-selected-color)) } .yui-navset .yui-nav .selected:focus-within a:before { --clip-path: polygon(0 0,calc(100% + 1rem) -1rem,calc(100% + 1rem) calc(100% + 1rem),0 calc(100% + 1rem)); background: rgb(var(--lable-bg-selected-color)) } .yui-navset .yui-nav .selected a:active,.yui-navset .yui-nav .selected a:hover { cursor: default; background: rgb(var(--lable-bg-selected-color)); text-shadow: none; } .yui-navset .yui-nav .selected a:focus-within { cursor: default; background: rgb(var(--lable-bg-selected-color)); text-shadow: none; } .yui-navset .yui-content { display: flex; flex-direction: column; background: rgb(var(--tab-bg-color)); border: var(--tab-content-border-weight) solid transparent; border-image: radial-gradient(rgb(var(--border-line-gradient)) 70%, rgb(var(--border-angle-gradient)) 130%) 10; padding: 0 1rem; position: relative; margin-top: calc(var(--tab-content-border-weight) * 1/2); transform-origin: 0 0; color: rgb(var(--tab-text-color)); font-size: var(--tab-base-font-size); zoom:unset; } .yui-navset .yui-content > div { border: none; border-left: none; background-color: rgb(var(--tab-bg-color)); padding: 0 0.25rem; display: block; top: 0; overflow: hidden; transform-origin: 0 0; } #page-content .yui-navset .yui-content > div > * { transform-origin: 0 0; color: rgb(var(--tab-text-color)); } #page-content .yui-navset .yui-content>div>h2 { text-shadow: 0 0 1px rgb(var(--title-shadow)); } #page-content .yui-navset .yui-content > div[style*="none"] { display: block !important; flex: 0; max-height: 0; border-width: 0; transition: opacity 0s ease-in-out .1s, filter 0s ease-in-out .1s; animation: tab-disappear .1s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"] { display: block !important; padding: 1em; flex: 1; max-height: 100%; transition: opacity 0s ease-in-out .3s, filter 0s ease-in-out .3s, clip-path 0s var(--tabview-transition-curve) .15s, -webkit-clip-path 0s var(--tabview-transition-curve) .15s; animation: tab-appear 0.2s var(--tabview-transition-curve) 0.2s 1 both; } @keyframes tab-disappear { 0% { opacity:1; filter: blur(0); } 100% { opacity:0; filter: blur(.5rem); } } @keyframes tab-appear { 0% { opacity:0.8; filter: blur(.5rem); -webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0); clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0); } 100% { opacity:1; filter: blur(0); -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, -25% 0); clip-path: polygon(100% 0%, 100% 100%, 0% 100%, -25% 0); } } /* SEARCH BOX */ #search-top-box, #search-top-box * { box-sizing: border-box; margin: 0; padding: 0; border: none; transition: box-shadow .2s var(--standard-curve),font-variation-settings .2s var(--standard-curve),font-weight .2s var(--standard-curve),background-color .15s var(--standard-curve),color .15s var(--standard-curve),right .2s var(--standard-curve),width .6s var(--standard-curve),padding .6s var(--standard-curve),max-width .6s var(--standard-curve); will-change: box-shadow,font-variation-settings,font-weight,background-color,color,right,width,padding,max-width; } #search-top-box:before { -webkit-mask-size: calc(var(--search-height)/2) calc(var(--search-height)/2); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-image: var(--search-icon-mask); z-index: 15; background-color: rgb(var(--search-icon-bg-color)); color: rgb(var(--swatch-text-tertiary-color)); text-align: center; cursor: pointer; mask-image: var(--search-icon-mask); mask-position: center center; mask-repeat: no-repeat; mask-size: calc(var(--search-height)/2) calc(var(--search-height)/2); pointer-events: none; } #search-top-box:after, #search-top-box:before { position: fixed; top: 5px; right: calc(1em - 1px); width: var(--search-height); height: var(--search-height); content: ""; } #search-top-box form[id=search-top-box-form]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id=search-top-box-form] { display: flex; visibility: visible; position: relative; right: 0; max-width: 100%; height: var(--search-height); } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] { max-width: var(--search-height); padding: 0; outline-width: 0; background-color: rgb(var(--search-icon-hover-bg-color)); box-shadow: 0 0 0 2px rgb(var(--search-focus-outline-color)); color: rgb(var(--search-textbox-text-color)); cursor: pointer; } #search-top-box form[id=search-top-box-form] input[type=text] { z-index: 13; position: fixed; right: calc(1em - 1px); top: 5px; width: var(--search-width); max-width: var(--search-width); height: var(--search-height); padding: 0 var(--search-height) 0 1em; outline: 0 solid rgb(var(--search-focus-outline-color)); background-color: rgb(var(--search-icon-focus-bg-color)); box-shadow: 0 0 0 0.125rem rgb(var(--search-focus-outline-color)); color: rgb(var(--search-focus-textbox-text-color),1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] { box-shadow: 0 0 0 0 rgb(var(--search-focus-outline-color)); pointer-events: none; } #search-top-box form[id=search-top-box-form] input[type=submit] { visibility: visible; z-index: 14; position: fixed; right: 1em; width: var(--search-height); height: var(--search-height); outline: 0 solid rgb(var(--search-focus-outline-color)); background-color: rgb(var(--search-icon-color),0.7); box-shadow: 0 0 0 .125rem rgb(var(--search-focus-outline-color)); color: transparent; font-size: calc(var(--base-font-size)* 13 / 15); cursor: pointer; pointer-events: all; top: 5px; } #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover { border: inherit; background: inherit; box-shadow: inherit; color: inherit; text-shadow: inherit; } /* TOOLS UI */ .edit-section-button, :not(.page-rate-widget-box):not(#search-top-box-form)>.btn, :not(.page-rate-widget-box):not(#search-top-box-form)>.button, :not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form)>button, :not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form)>input.button, #site-tools-box ul.nav li a, #site-tools-box ul.nav li a:visited { --wght: 700; display: inline-flex; position: relative; align-items: center; justify-content: center; min-width: 5em; margin: 0; padding: .25em; overflow: hidden; border: .125rem solid rgb(var(--plain-primary-color),.4); outline: 0 solid solid rgb(var(--border-line)); background-color: rgb(var(--bright-third-color),.25); box-shadow: 0px 0px 0px 0px #000; color: rgb(var(--dark-secondary-color)); font-weight: var(--wght); filter: brightness(1); transition: border-color .2s var(--standard-curve),box-shadow .2s var(--standard-curve),color .15s var(--standard-curve),background-color .15s var(--standard-curve),font-weight .2s var(--standard-curve),font-variation-settings .2s var(--standard-curve); will-change: border-color, box-shadow, color, background-color, font-weight, filter; font-family: 'Julius Sans One', 'Noto Serif SC'; } .edit-section-button:hover,:not(.page-rate-widget-box):not(#search-top-box-form)>.btn:active, :not(.page-rate-widget-box):not(#search-top-box-form)>.btn:hover, :not(.page-rate-widget-box):not(#search-top-box-form)>.button:active, :not(.page-rate-widget-box):not(#search-top-box-form)>.button:hover, :not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a:active, :not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a:hover, :not(.page-rate-widget-box):not(#search-top-box-form)>button:active, :not(.page-rate-widget-box):not(#search-top-box-form)>button:hover, :not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input:active, :not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input:hover, :not(.page-rate-widget-box):not(#search-top-box-form)>input.button:active, :not(.page-rate-widget-box):not(#search-top-box-form)>input.button:hover, #site-tools-box ul.nav li a:active, #site-tools-box ul.nav li a:hover { --wght: 700; --ui-button-hover-txt: var(--lowlight-primary-color); --emerge-color: 255, 255, 255 ,1; outline: 0px solid rgb(var(--scale-8)); background-color: rgb(var(--emerge-color)); box-shadow: 0 0 0 0.1rem rgb(var(--border-line)); color: rgb(var(--ui-button-hover-txt)); font-weight: var(--wght); text-decoration: none; cursor: pointer; border-color: rgb(var(--emerge-color)); filter: brightness(1.1); } /* RATE BOX */ .page-rate-widget-box { display: inline-flex; height: 1.3125rem; border: 1px solid rgb(var(--scale-2)); border-right: 2px solid rgb(var(--bright-secondary-color)); padding: 0px 0.125rem; border-radius: 2px 0 0 2px; overflow: hidden; box-shadow: rgb(var(--scale-0)) 0px 0px 5px 1px; background-color: rgb(var(--scale-2)) } .page-rate-widget-box .rate-points { display: flex; align-items: center; justify-content: center; font-size: 0.9em; color: rgb(var(--scale-7))!important; font-weight: bold; font-family: var(--Serif-font); background-color: rgb(var(--scale-3),.5)!important; border-radius: 2px; } .page-rate-widget-box a { text-decoration: none; background-color: transparent; padding: 8px 5px !important; border-left: 1px solid rgb(var(--undertone)); font-family: 'Cinzel', serif; box-shadow: inset 0 0 2px rgb(var(--scale-8)); text-shadow: none; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { font-size: 110%; text-shadow: none; font-weight: 900; color: rgb(var(--highlight-primary-color)); transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; background-color: rgb(var(--scale-0),0); } .page-rate-widget-box .cancel a { color: rgb(var(--highlight-primary-color)); text-shadow: none; border-right: 1px solid rgb(var(--undertone)); font-family: 'zuijinregular'; font-weight: 900; background-color: rgb(var(--scale-0),0); transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover { background-color: rgb(var(--bright-primary-color),.25) !important; color: rgb(var(--lowlight-primary-color)) !important; text-shadow: none; } .page-rate-widget-box .rateup a:hover { box-shadow: inset 0 0 4px 0px rgb(var(--rate-up-bg),.6); } .page-rate-widget-box .ratedown a:hover { box-shadow: inset 0 0 4px 0px rgb(var(--rate-down-bg),.6); } .page-rate-widget-box .cancel a:hover { box-shadow: inset 0 0 4px 0px rgb(var(--rate-cancel-bg),.8); } @media (max-width: 767px) { .page-history tbody tr td:last-child { width: 35%; } .owindow { min-width: 80%; max-width: 99%; } .modal-body .table, .modal-body .table ~ div { float: left; } .owindow .button-bar { float: center; } .owindow div .btn-primary { width: 100%; float: left; } .owindow div .btn-primary ~ div { width: 100%; } .yui-navset { z-index: 1; } #navi-bar, #navi-bar-shadow { display: none; } } /* IMAGES */ .image-block { border: 1px solid rgb(var(--scale-3)); box-shadow: 0 1px 4px rgb(var(--scale-3)),0 0 6px rgb(var(--scale-7)); } .image-block.block-right { float: right; clear: right; margin: 0; } .image-block.block-right > img { width:100% } .image-block.block-left { float: left; clear: left; margin: 0; } .image-block.block-left > img { width:100% } .image-block.block-center { margin-right: auto; margin-left: auto; } .image-block img { border: 0; width: 100% !important; } .image-block .image-caption { background-color: rgb(var(--dark-secondary-color)); outline: solid 1px rgb(var(--dark-primary-color)); outline-offset: -1px; border: none; padding: 2px 0; font-size: 95%; font-weight: 700; text-align: center; width: 100%!important; color: rgb(var(--bright-primary-color)); } .image-block .image-caption > p { margin: 0; padding: 0 10px; } /* WIKIWALK */ .footer-wikiwalk-nav { font-weight: bold; font-size: 75%; } /* GADGETS */ #page-info { clear: both; text-align: right; font-size: 80%; margin: 2px 2px; } .code { border: 1px dashed #DDD; background-color: rgb(var(--scale-7)); font-family: var(--Mono-font); padding: 0 1em; margin: .5em 0; overflow: auto; overflow-wrap: break-wrap; white-space: nowrap; } .ruby, ruby { display: inline-table; text-align: center; white-space: nowrap; line-height: 1; height: 1em; vertical-align: text-bottom; } .rt, rt { display: table-header-group; font-size: 0.6em; line-height: 1.1; text-align: center; white-space: nowrap; } .keycap { border: 1px solid; border-color: #ddd #bbb #bbb #ddd; border-bottom-width: 2px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #f9f9f9; padding: 1px 3px; font-family: inherit; font-size: 0.85em; white-space: nowrap; } .page-watch-options a{ color: rgb(var(--lowlight-primary-color)); border-bottom: none; text-decoration: none; z-index: 1; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: .2em; line-height: 1; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; position: relative; overflow: hidden; transition: transform 2s var(--adagio-curve), color .2s var(--standard-curve), box-shadow .2s var(--presto-curve); will-change: transform, color, box-shadow } .page-watch-options a:hover{ border-bottom: none; text-decoration: none; color: rgb(var(--bright-primary-color)); box-shadow: 0 0 1px 1px rgb(var(--dark-secondary-color)),0 0 2px 2px rgb(var(--dark-secondary-color),.75); } .page-watch-options a:active { transform: translate(1px, 1px) scale(0.96); transition: transform .1s var(--adagio-curve), box-shadow .15s var(--presto-curve); box-shadow: 0 0 1px 1px rgb(var(--dark-secondary-color)); } .page-watch-options a:before { --clip-path: polygon(0 0, 0 50%, 0 100%, 0 100%, 0 0); -webkit-clip-path: var(--clip-path); z-index: -1; position: absolute; top: 0; width: 101%; height: 101%; background-color: rgb(var(--lowlight-primary-color)); content: ""; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 1; pointer-events: none; transition: -webkit-clip-path .2s var(--standard-curve); transition: clip-path .2s var(--standard-curve); } .page-watch-options a:hover:before { --clip-path: polygon(100% 0, 105% 50%, 100% 100%, 0 100%, 0 0); } :is(#breadcrumbs a, .pseudocrumbs a) { border-bottom:none; text-decoration: 1px underline transparent; } :is(#breadcrumbs a, .pseudocrumbs a):hover { border-bottom:none; text-decoration: 1px underline currentcolor; }
