1 line
7.1 KiB
CSS
1 line
7.1 KiB
CSS
:root{--radius:4px;--color-primary:#6e79d6;--color-primary-2:rgba(110,121,214,.1);--color-primary-4:rgba(110,121,214,.2);--color-blue:rgba(32,153,255,.33);--font-monospace:"linear","SFMono Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;--font-regular:"linear","Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--font-emoji:"linear","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","Twemoji Mozilla","Noto Color Emoji","Android Emoji";--color-gradient-border:linear-gradient(155deg,rgba(110,120,214,.515),rgba(255,191,96,0) 30%);--scrollbar-width:12px;--scrollbar-min-size:32px}.loading-bar{background-color:rgba(0,0,0,.2);border-radius:var(--radius);display:inherit;position:relative;width:100px}.loading-bar,.loading-bar span{background-clip:padding-box;height:4px;overflow:hidden}.loading-bar span{animation:react-spinners-barLoader 2.1s cubic-bezier(.65,.815,.735,.395) 0s infinite normal none running;background-color:#000;border-radius:2px;display:block;position:absolute;will-change:left,right}@keyframes react-spinners-barLoader{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}::selection{background:var(--color-selection)}.scrollbar-obtrusive::-webkit-scrollbar-track{background:transparent}.scrollbar-obtrusive::-webkit-scrollbar{height:var(--scrollbar-width);width:var(--scrollbar-width)}.scrollbar-obtrusive::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--scrollbar-color);border:3px solid transparent;border-radius:var(--scrollbar-width);opacity:.2}.tip{position:relative}.tip:hover:after{word-wrap:break-word;animation-delay:.4s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:tooltip-appear;animation-timing-function:ease-in;background:var(--color-font);border-radius:3px;color:var(--color-bg);content:attr(data-tip);font-size:12px;line-height:1;margin-top:6px;opacity:0;padding:.5em .75em;pointer-events:none;position:absolute;text-align:center;top:100%;white-space:pre;z-index:1000000}.tip.left:after{right:0}.tip.right:after{left:0}@keyframes tooltip-appear{0%{opacity:0}to{opacity:1}}.loader{background-color:#000;height:10px;left:50%;position:absolute;top:50%;width:100px}.blur-behind{position:relative;z-index:2}.blur-behind:before{background:var(--color-bg-mask);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.key-cap{border-radius:4px;font-family:var(--font-regular);height:24px;margin-right:2px;min-width:24px}.key-cap>span{align-items:center;background:var(--color-bg-3);border-radius:4px;color:var(--color-font-2);display:flex;font-size:12px;height:100%;justify-content:center;padding:2px 4px}.glass-material{backdrop-filter:blur(30px);background:linear-gradient(180deg,hsla(0,0%,100%,.28),hsla(0,0%,100%,0));box-shadow:inset 0 .5px 0 1px hsla(0,0%,100%,.23),inset 0 1px 0 0 hsla(0,0%,100%,.66),0 4px 16px rgba(0,0,0,.12)}.content-dialog:before{background:linear-gradient(var(--color-bg),transparent 70%)}.content-dialog:after,.content-dialog:before{content:"";height:2rem;position:fixed;width:100%;z-index:10}.content-dialog:after{background:linear-gradient(transparent,var(--color-bg) 70%);bottom:0}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-hover{align-items:center;border-radius:4px;cursor:pointer;display:inline-flex;justify-content:center;padding:3px;text-decoration:none;transition:all .3 ease}.btn-hover svg{color:var(--color-font-3);height:18px;width:18px}.btn-hover-bg,.btn-hover:hover{background:var(--color-bg-3)}.btn-hover:hover svg{color:var(--color-font-2)}.button{align-items:center;background:var(--color-bg-button);border:var(--border-button);border-radius:var(--radius);box-shadow:var(--shadow-button);color:var(--color-font);cursor:pointer;display:inline-flex;padding:6px 8px;transition:all .3s}.button:hover{color:var(--color-font-2)}.button:active{color:var(--color-font-3)}.button:first-child{margin-left:0}.button>svg{color:var(--color-font-2);height:16px;width:16px}.button>span{padding:0 2px 0 6px}.girdle-box{background:var(--color-gradient-border);position:relative;z-index:0}.girdle-box:before{background:var(--color-bg-3);border-radius:inherit;bottom:1px;content:"";left:1px;position:absolute;right:1px;top:1px;z-index:-1}@media only screen and (max-width:767px){.side-navigation{display:flex!important}.search-mask>div{left:20px!important;right:20px!important;transform:inherit!important;width:auto!important}#app{grid-template-columns:0 1fr!important}#app.equip{grid-template-columns:220px auto!important}#app.equip main{min-width:430px;position:relative}#app.equip main:after{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:var(--color-bg-mask);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1000}.archive>ul{padding-right:20px}.dropdown-menu{background:var(--color-bg-2)!important}.article-container{margin:0;width:100%!important}.copyright ul{flex-direction:column!important}.copyright ul li{margin-bottom:20px!important;margin-right:0!important}.meta-container{display:none!important}.welcome .circles{margin:0;padding:0}.welcome .weather{min-width:300px!important;right:20px!important;top:60px!important;width:auto!important}.welcome .slogan,.welcome .weather{left:20px!important}.task-bar-popover{width:80%!important}}@media only screen and (max-width:1280px){.resume>aside{display:none}.resume>main{padding-left:24px!important}}@media only screen and (max-width:512px){main{border:0!important}.resume>main .project .title .girdle-box:after{content:none}.resume>main .project .item{border-left:0!important;margin-left:0!important;padding-left:0!important}.resume>main .project .item:before{content:none}}.magic-cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,300px);justify-content:center}.magic-cards:hover .card:after{opacity:1}.magic-cards .card{background-color:var(--color-border);border-radius:10px;color:var(--color-font);cursor:pointer;display:flex;flex-direction:column;height:220px;position:relative;width:300px}.magic-cards .card:hover:before{opacity:1}.magic-cards .card:after,.magic-cards .card:before{background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),hsla(0,0%,100%,.06),transparent 40%);z-index:3}.magic-cards .card:after,.magic-cards .card:before{border-radius:inherit;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .5s;width:100%}.magic-cards .card:after{background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),hsla(0,0%,100%,.4),transparent 40%);z-index:1}.magic-cards .card>.card-content{background-color:var(--color-bg-2);border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;inset:1px;padding:10px;position:absolute;z-index:2}.magic-cards .card .card-image{align-items:center;display:flex;height:140px;justify-content:center;overflow:hidden}.magic-cards .card .card-info-wrapper{flex:1}*{box-sizing:border-box}@font-face{font-family:linear;src:url(../font/linear.woff2)}@font-face{font-family:motto;src:url(../font/motto.woff)}body,html{background:var(--color-bg);color:var(--color-font);font-family:var(--font-regular);font-size:14px;height:100%;line-height:1;margin:0;overflow:hidden;padding:0} |