/** _ _ __ _ ____ _ _ ___ / \ | |/ / / \ / ___|| | | |_ _| / _ \ | ' / / _ \ \___ \| |_| || | / ___ \| . \ / ___ \ ___) | _ || | /_/ \_\_|\_\/_/ \_\____/|_| |_|___| * [Romanticism] * romanticism.aka.css 主样式表文件 * @version 2.2 * @link https://imakashi.eu.org/ **/ html{ scroll-behavior: auto; scroll-padding-top: 100px; } body{ font-family: 'Noto Serif SC', serif; font-weight:400; font-display: swap; } .mdui-theme-layout-light .LDtrans{ background-color: Seashell; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } .mdui-theme-layout-dark .LDtrans{ background-color: #303030; } .mdui-appbar{ transition: background-color 0.3s ease-in-out; } .mdui-card{ transition: all 0.3s ease-in-out; } /*高斯模糊效果*/ .blur{ backdrop-filter: saturate(150%) blur(5px); -webkit-backdrop-filter: saturate(150%) blur(5px); } .loadingbg.blur{ backdrop-filter: saturate(160%) blur(15px); -webkit-backdrop-filter: saturate(160%) blur(15px); } .mdui-theme-layout-light .blur{ background: rgba(255, 255, 255, 0.52); } .mdui-theme-layout-dark .blur{ background: rgba(58, 58, 58, 0.52); } .mdui-overlay{ backdrop-filter: saturate(100%) blur(20px); -webkit-backdrop-filter: saturate(100%) blur(20px); } .mdui-tooltip, .mdui-snackbar{ backdrop-filter: saturate(180%) blur(15px); -webkit-backdrop-filter: saturate(180%) blur(15px); border: 1px solid rgba(128, 128, 128, 0.2); } .mdui-theme-layout-light .mdui-tooltip{ background: rgba(255, 255, 255, 0.72); color:#252525; } .mdui-theme-layout-dark .mdui-tooltip{ background: rgba(69, 69, 69, 0.72); color:#f0f0f0; } .mdui-theme-layout-light .mdui-snackbar{ background: rgba(255, 255, 255, 0.72); color:#252525; font-weight: bold; } .mdui-theme-layout-dark .mdui-snackbar{ background: rgba(69, 69, 69, 0.72); color:#f0f0f0; font-weight: bold; } .mdui-dialog{ border: 1px solid rgba(128, 128, 128, 0.2); } /*加载动画*/ #loading { width: 100%; height: 100%; font-size: 30px; margin: 0; text-align: center; border-radius: 0; position: fixed; left: 0; right: 0; top: 0; z-index: 9999 } .loader { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .loader-box { transform: translateY(-50%); top: 50%; position: absolute; width: calc(100% - 200px); padding: 0 100px; text-align: center; } .loader-box .mdui-spinner{ width: 50px; height: 50px; } /* Fonts in loading Author:Naoya | @nxworld Link: https://codepen.io/nxworld/pen/zwGpXr */ .loadingtx span { display: inline-block; margin: 0 -0.09em; font-weight: bold; } .loading-text span { animation: loading02 1s infinite alternate; } .loading-text span:nth-child(1) { animation-delay: 0.2s; } .loading-text span:nth-child(2) { animation-delay: 0.4s; } .loading-text span:nth-child(3) { animation-delay: 0.6s; } .loading-text span:nth-child(4) { animation-delay: 0.8s; } .loading-text span:nth-child(5) { animation-delay: 1s; } .loading-text span:nth-child(6) { animation-delay: 1.2s; } @keyframes loading02 { 0% { filter: blur(0); opacity: 1; } 100% { filter: blur(2px); opacity: .3; } } /*圆角设置*/ .yuan, .mdui-snackbar{ border-radius: 14px; } .btnyuan{ border-radius: 8px; } .mdui-tooltip{ border-radius: 8px; } @media(max-width:450px){ .yuan{ border-radius: 10px; } .btnyuan{ border-radius: 6px; } .mdui-snackbar{ border-radius: 0px; } .mdui-tooltip{ border-radius: 8px; } } /*进入动画*/ .toup{ animation-name: toup; animation-duration: .5s; } @keyframes toup{ from {filter: blur(20px);} to {filter: blur(0);} } .show{ animation-name: show; animation-duration: .5s; } @keyframes show{ from {filter: blur(20px);} to {filter: blur(0);} } /*首页主题图*/ .indeximg{ background-repeat:no-repeat; background-position: center; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; } .indeximgcard{ width:auto; height:85vh; min-height:420px; } /* 置顶容器 */ .sticky-container { position: relative; width: 100%; height:200px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } .sticky-container::-webkit-scrollbar { height: 8px; } .sticky-container::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); border-radius: 5px; } .sticky-item{ display: inline-block; width: 320px; height: 100%; margin-right: 8px; background-color: #f0f0f0; text-align: center; transition: all 0.5s ease; border: 0.01px solid rgba(128,128,128,.3); } .sticky-item:hover{ transform: scale(1.02); border-radius:12px; } .sticky-item .mdui-card-media-covered{ display: flex; align-items: center; justify-content: center; height: 100%; } .sticky-item img{ object-fit: cover; object-position: center; width: 320px; height:170px; } .sticky-item .mdui-card-primary { margin-top: -20px; } .sticky-item .mdui-card-primary-title{ white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; line-height: 24px; } .sticky-item .mdui-card-primary-title h5{ margin-bottom:5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .sticky-item .mdui-card-media-covered{ height: 100%; } .sticky-wrapper { position: relative; width: 100%; isolation: isolate; } .sticky-badge { position: absolute; top: -10px; right: -10px; width: auto; min-width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; z-index: 99; border: 1px solid rgba(128, 128, 128, 0.2); } .sticky-badge i{ transform: rotate(-30deg); } @media (max-width:500px){ .sticky-item { width: 200px; } .sticky-item img{ width: 200px; } } /*主页文章列表容器*/ .indexlistbox{ margin-top:-180px; } .indexlistbox h3{ margin-top: 5px; margin-bottom: 5px; } .indexlistbox h4{ margin-top: 5px; margin-bottom: 5px; } .indexlistbox h5{ margin-top: 10px; } @media (max-width:420px){ .indexlistbox{ margin-top: -180px; } } @media (max-height:800px){ .indexlistbox{ margin-top: -150px; } } .indexinfobox{ margin-bottom: 20px; padding: 10px; padding-top: 15px; padding-bottom: 15px; line-height: 20px; border: 1px solid rgba(128, 128, 128, 0.8); } /*主页文章列表卡片*/ .articlelistcard{ width:auto; height:auto; min-height:250px; } .articlelistimg{ background-repeat:no-repeat; background-position: center; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; transition: all 0.5s ease; border: 0.01px solid rgba(128,128,128,.3); } .articlelistimg:hover{ transform: scale(1.03); border-radius:24px; } .articlelistcard .mdui-card-primary-title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .articlelistcard .mdui-card-primary-title span{ padding-left: 100px; } .articlelistcard .mdui-card-primary-title h4{ line-height: 30px; } .articlesms{ transition: all 0.5s ease; border: 0.1px solid rgba(128,128,128,.2); } .articlesms:hover{ transform: scale(1.01); border: 0.1px solid rgba(128,128,128,.8); z-index:9; } .articlesms .mdui-card-content{ margin-top: -20px; } .mdui-theme-layout-dark .articlesms .akarom-imgbox{ filter: brightness(80%); } .titlegap{ letter-spacing: 2px; font-weight:900; } #mainsidebar .mdui-grid-tile{ height: 170px; width: auto; } .sidebarimg{ background-repeat:no-repeat; background-position: center; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; } #mainsidebar .headicon{ position: absolute; top: 15%; left: 24px; width: 60px; height: 60px; border: 3px solid rgb(255, 255, 255); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.53); border-radius: 50%; } li{ list-style: none; } a{ text-decoration: none; } a:hover{ text-decoration: none; } ::-moz-selection{background:#ecf0f1; color:CornflowerBlue;} ::selection {background:#ecf0f1; color:CornflowerBlue;} .chameleon { transition: color 0.3s ease-in-out; } .chameleon:hover { color: CornflowerBlue; } .akarom-alter-button-valign{ display: flex; align-items: center; justify-content: center; background: none; border: none; } .akarom-alter-button{ border: 2px solid rgba(128, 128, 128, 0.2); padding:6px; transition: all 0.5s ease; background: none; padding-left: 10px; padding-right: 12px; } .akarom-alter-button:hover{ transform: scale(1.1); position: relative; border-radius: 16px; } .akarom-alter-button-disabled{ opacity: .5; } .akarom-alter-button-disabled:hover{ filter: none; transform: none; box-shadow: none; position: none; } .akarom-alter-button i{ margin-bottom: 3px; margin-right: 8px; opacity: .8; } .akarom-hoverable{ padding: 6px; transition: all 0.3s ease-in-out; border-radius: 6px; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .akarom-hoverable:hover{ background-color: rgba(158, 158, 158, 0.2); } .title{ font-family: 'Noto Serif SC', serif; font-weight:900; text-decoration: none; } .subtitle{ font-size: 15px; } .underline{ border-bottom: 2px solid transparent; transition: all 0.3s ease-in-out; } .underline:hover { border-bottom: 2px solid; } .easysee{ text-shadow: 0 1px 3px black; } /*上下翻页颜色*/ .mdui-theme-layout-light .prev{ color:#252525; } .mdui-theme-layout-dark .prev{ color:white; } .mdui-theme-layout-light .next{ color:#252525; } .mdui-theme-layout-dark .next{ color:white; } /*独立页面主题图*/ .articlecard{ width:auto; height:auto; display: block; min-height: 600px; padding-top: 20px; color: white; position: relative; background: none; } .mdui-theme-layout-dark .articlecard{ background: none; } .articlecard .articlecardimg{ background-repeat:no-repeat; background-position: center; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: -2; } .articlecard .articlecardshadow{ background-color: #252525; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: -1; opacity: .2; } @media (max-width:420px){ .articlecard{ min-height: 400px; } } .articlecard .mdui-card-primary-title{ line-height: 45px; } /*文章内排版格式*/ p{ font-size: 18px; } .mdui-typo h1{ position: relative; white-space: nowrap; font-weight:900; z-index:9 !important; } .mdui-typo h1::before { content: ""; position: absolute; height: 14px; width: 66px; bottom: 2px; z-index:-1; background-color: CornflowerBlue; opacity: 0.5; transform: skew(-35deg); transition: all .2s ease; border-radius: 3px 8px 10px 6px; } .mdui-typo h3{ font-weight:900; } .mdui-typo h4{ font-weight:900; } .mdui-typo h2{ position: relative; white-space: nowrap; font-weight:900; z-index:9 !important; } .mdui-typo h2::before { content: ""; position: absolute; height: 12px; width: 66px; bottom: 0; z-index:-1; background-color: lightblue; opacity: 0.5; transform: skew(-35deg); transition: all .2s ease; border-radius: 3px 8px 10px 6px; } .mdui-typo h3{ font-weight:900; } .article hr{ width:66%; border:none; border-top:6px dashed rgba(158, 158, 158, 0.2);; } .hr hr{ width:100%; margin: 0 auto; border:none; border-top:2px dashed rgba(158, 158, 158, 0.2);; } .article img{ height:anto; width:100%; } .mdui-theme-layout-dark .article img{ filter: brightness(80%); } .mdui-theme-layout-dark .mdui-panel-item{ background-color:#3c3c3c; } .copyright{ font-size: 14px; } #comments .headicon{ border: 2px solid white; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.53); } #comments .adminsign{ display:inline-block; padding: 0; padding-left:3px; padding-right:3px; margin-left: 8px; font-size: 13px; border: 2px solid rgba(128, 128, 128, 0.3); } #comments .comment-parent{ margin-top: 30px; } .fancybox { text-decoration: none; } .outlineborder{ padding:10px; border-radius:10px; display:inline-block; border: 3px solid rgba(128,128,128,.3); line-height: 25px; margin-bottom: 5px; } .outlineborder a{ color: #252525 !important; } .mdui-theme-layout-dark .outlineborder a{ color: #f0f0f0 !important; } .link img{ height:70%; width:70%; border: 5px solid rgb(255, 255, 255); } .comment-ua-second{ margin-right: -5px; } /* 文章tag筛选样式 */ .akarom-articletag{ position: fixed; bottom: 30px; left: 30px; opacity: 1; z-index: 99; width:40px; transition: all 0.3s ease-in-out; height:40px; border-radius: 20px; overflow:hidden; display: flex; align-items: center; cursor: pointer; border: 1px solid rgba(128, 128, 128, 0.2); } .akarom-articletag:hover{ width:205px; } .akarom-articletag .mdui-icon{ padding-left: 8px; } .akarom-articletag.akarom-articletag-style:hover{ width:238px; } .akarom-articletag-options{ display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 16px; white-space: nowrap; transform: translateX(-100%); opacity: 0; filter: blur(15px); transition: all 0.45s ease-in-out; } .akarom-articletag:hover .akarom-articletag-options{ transform: translateX(0); opacity: 1; filter: blur(0); margin-left: 8px; } .akarom-articletag input[type="radio"] { display: none; } .akarom-articletag input[type="radio"]:checked + .filter-btn { color: #6495ed; font-weight: bold; } @media (max-width:1024px){ .akarom-articletag{ bottom: 15px; left: 15px; } } .taglist, .tagnotice{ display: none; animation: tagfadein 0.3s; } /* 首页文章筛选 */ body:has(#filterall:checked) .LDtrans .taglist, body:has(#filterarticle:checked) .LDtrans .taglist.tagarticle, body:has(#filtersms:checked) .LDtrans .taglist.tagsms{ display: block; animation: tagfadein 0.3s; } body:has(#filterarticle:checked) .LDtrans .tagnotice-article, body:has(#filtersms:checked) .LDtrans .tagnotice-sms{ display: block; animation: tagfadein 0.3s; } @keyframes tagfadein { from { opacity: 0; filter:blur(20px);} to { opacity: 1; filter:blur(0px);} } .notfoundpage{ height:80vh; } .notfound-box{ height:60vh; width:auto; } .notfoundpage span{ opacity: .1; font-size: 114px; position:absolute; margin-top:-50px; font-weight: bold; } .akarom-rewardbox{ display: inline-flex; align-items: center; justify-content: center; padding: 10px; height: auto; width: auto; } .akarom-rewardbox img{ max-height: 78vh; margin: 0 auto; display: block; } .akarom-panel-menu{ padding:16px; overflow: hidden; padding-left:24px; border: 1px solid rgba(128, 128, 128, 0.1); } .akarom-panel-menu h3{ padding:0; margin-top:0; } .akarom-panel-menu ul{ margin-bottom: 0; } .akarom-panel-copy{ padding:16px; overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.1); } .akarom-corner-symbol-lb { position: absolute; bottom: -60px; left: -20px; font-weight: 600; font-size: 130px; transform: rotate(-15deg); opacity:.1; } .akarom-corner-symbol-rb { position: absolute; bottom: -60px; right: -10px; font-weight: 600; font-size: 130px; transform: rotate(-15deg); opacity:.1; } .mdui-theme-layout-light .akarom-inverticon{ filter: invert(0); } .mdui-theme-layout-dark .akarom-inverticon { filter: invert(1) !important; } .akarom-imgbox{ transition: all 0.5s ease; position: relative; overflow: hidden; border: 0.01px solid rgba(128,128,128,.3); } .akarom-imgbox:hover{ transform: scale(1.01); z-index:9; } .articlesms .akarom-imgbox:hover{ transform: scale(1); z-index:9; } .akarom-imgbox img { width: 100%; height: auto; min-height: 100px; object-fit: cover; display: block; opacity: 0.2; transition: all .8s ease; filter: blur(10px); } .akarom-imgbox img.loaded { filter: blur(0px); opacity: 1; z-index: 2; } .akarom-imgbox .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .akarom-links{ transition: all 0.5s ease; border: 0.01px solid rgba(128,128,128,.5); } .akarom-links:hover{ transform: scale(1.05); border-radius:16px; z-index:9; } .fancybox-bg{ background: black !important; transition: all 0.3s ease; } .fancybox-image{ border: 1px solid rgba(128,128,128,.6) !important; } .code-toolbar{ margin-bottom: 32px; } .code-toolbar .toolbar{ margin-right: 8px; } /*aplayer适配深色模式*/ .mdui-theme-layout-light .aplayer{ background-color: #ffffff; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } .mdui-theme-layout-dark .aplayer{ background-color: #404040; } .aplayer{ border-radius:10px; } .aplayer-lrc::before{ opacity: 0.01; } .mdui-theme-layout-dark .aplayer-lrc::after{ background: linear-gradient(rgba(235, 229, 229, 0) 0px, rgba(59, 59, 59, 0.8)); } /*aplayer适配深色模式 END*/ /*musenxi livephoto*/ .lpk-live-photo-player{ border-radius:8px; overflow: hidden; } /*musenxi livephoto END*/