update hook
··[CST 2026-02-18 Wednesday 15:25:54]
This commit is contained in:
biss
222
css/calendar.css
Normal file
222
css/calendar.css
Normal file
@@ -0,0 +1,222 @@
|
||||
/* 浅色主题变量覆盖 -------------------------------- */
|
||||
:root {
|
||||
--main: #a0d2eb; /* 主强调色：柔和天空蓝 */
|
||||
--main-op: rgba(160, 210, 235, 0.6);
|
||||
--main-op-deep: rgba(160, 210, 235, 0.4);
|
||||
--main-op-light: rgba(160, 210, 235, 0.2);
|
||||
|
||||
--card-bg: #fdfdfd; /* 卡片背景：几乎白 */
|
||||
--fontcolor: #444; /* 主文本：深灰 */
|
||||
--secondtext: #999; /* 次级文本：浅灰 */
|
||||
}
|
||||
.card-widget {
|
||||
padding: 10px!important;
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
.card-times a, .card-times div {
|
||||
color: var(--fontcolor);
|
||||
}
|
||||
|
||||
#card-widget-calendar .item-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#calendar-area-left {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#calendar-area-right {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
#calendar-area-left, #calendar-area-right {
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#calendar-main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#calendar-week {
|
||||
height: 1.2rem;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#calendar-date {
|
||||
height: 3rem;
|
||||
line-height: 1.3;
|
||||
font-size: 64px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--main);
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: calc(50% - 2.1rem);
|
||||
}
|
||||
|
||||
#calendar-lunar, #calendar-solar {
|
||||
height: 1rem;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#calendar-solar {
|
||||
bottom: 2.1rem;
|
||||
}
|
||||
|
||||
#calendar-lunar {
|
||||
bottom: 1rem;
|
||||
color: var(--secondtext);
|
||||
}
|
||||
|
||||
#calendar-main a {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#calendar-main a.now {
|
||||
background: var(--main);
|
||||
color: var(--card-bg);
|
||||
}
|
||||
|
||||
#calendar-main .calendar-rh a {
|
||||
color: var(--secondtext);
|
||||
}
|
||||
|
||||
.calendar-r0, .calendar-r1, .calendar-r2, .calendar-r3, .calendar-r4, .calendar-r5, .calendar-rh {
|
||||
height: 1.2rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendar-d0, .calendar-d1, .calendar-d2, .calendar-d3, .calendar-d4, .calendar-d5, .calendar-d6 {
|
||||
width: calc(100% / 7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#card-widget-schedule .item-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#schedule-area-left, #schedule-area-right {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#schedule-area-left {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#schedule-area-right {
|
||||
width: 70%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.schedule-r0, .schedule-r1, .schedule-r2 {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.schedule-d0 {
|
||||
width: 30px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.schedule-d1 {
|
||||
width: calc(100% - 35px);
|
||||
height: 1.5rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background: linear-gradient(to right, var(--main-op-deep), var(--main-op), var(--main-op-light));
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: var(--main);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.aside-span1, .aside-span2 {
|
||||
height: 1rem;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.aside-span1 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.aside-span2 {
|
||||
right: 20px;
|
||||
color: var(--secondtext);
|
||||
}
|
||||
|
||||
.aside-span2 a {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
#pBar_month, #pBar_week, #pBar_year {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#schedule-date, #schedule-days, #schedule-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#schedule-title {
|
||||
height: 25px;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#schedule-days {
|
||||
height: 40px;
|
||||
line-height: 1;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
#schedule-date {
|
||||
height: 20px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
color: var(--secondtext);
|
||||
}
|
||||
8804
css/index.css
Normal file
8804
css/index.css
Normal file
File diff suppressed because it is too large
Load Diff
203
css/nav.css
Normal file
203
css/nav.css
Normal file
@@ -0,0 +1,203 @@
|
||||
#nav-right{
|
||||
flex:1 1 auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
/* 导航栏居中 */
|
||||
|
||||
#sidebar #sidebar-menus .menus_items .menus_item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
#sidebar #sidebar-menus .menus_items a.site-page {
|
||||
padding-left: 0;
|
||||
}
|
||||
#sidebar #sidebar-menus .menus_items .site-page {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 6px 30px 6px 22px;
|
||||
color: var(--font-color);
|
||||
font-size: 1.15em;
|
||||
border: var(--style-border-always);
|
||||
background: var(--icat-card-bg);
|
||||
font-size: 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#nav #menus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
#nav #blog-info {
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 102;
|
||||
max-width: fit-content;
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
#nav {
|
||||
padding: 0 15px;
|
||||
}
|
||||
#nav-group {
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
#rightside {
|
||||
right: -42px;
|
||||
}
|
||||
}
|
||||
/* IPAD菜单栏调整 */
|
||||
|
||||
/* 1. 容器溢出穿透 */
|
||||
#nav, #blog-info, #nav-group {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#ls-menu-container {
|
||||
position: relative !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 15px;
|
||||
cursor: pointer !important;
|
||||
z-index: 2000 !important;
|
||||
}
|
||||
|
||||
/* 2. 悬浮面板：宽大且高不透明度 */
|
||||
#ls-menu-panel {
|
||||
position: absolute !important;
|
||||
top: 100% !important;
|
||||
left: 0 !important;
|
||||
margin-top: 15px !important;
|
||||
width: 420px;
|
||||
padding: 24px;
|
||||
border-radius: 18px;
|
||||
|
||||
/* 高不透明度磨砂玻璃 (0.9) */
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: blur(20px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.5) !important;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
|
||||
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
transform: translateY(12px) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
z-index: 999999 !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* 3. 透明感应桥梁 */
|
||||
#ls-menu-panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 25px;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 4. 触发效果 */
|
||||
#ls-menu-container:hover #ls-menu-panel {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
#ls-menu-container:hover i.fa-fingerprint {
|
||||
color: #49b1f5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 5. 内部网格：保持两列 */
|
||||
.ls-section { margin-bottom: 22px; }
|
||||
.ls-section:last-child { margin-bottom: 0; }
|
||||
.ls-title {
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.ls-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr); /* 恢复为两列 */
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ls-grid a {
|
||||
color: #444 !important;
|
||||
font-size: 14px !important;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.ls-grid a:hover {
|
||||
background: #49b1f5 !important;
|
||||
color: #fff !important;
|
||||
transform: translateX(4px); /* 悬停时轻微右移，增加动感 */
|
||||
}
|
||||
|
||||
.ls-grid a i {
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* 6. 深色模式适配 */
|
||||
[data-theme='dark'] #ls-menu-panel {
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
[data-theme='dark'] .ls-title { color: #eee; }
|
||||
[data-theme='dark'] .ls-grid a {
|
||||
color: #ccc !important;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
#nav.show-title .nav-page-title {
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
white-space: nowrap !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
#nav.show-title #menus,
|
||||
#nav.show-title .nav-site-title {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
#nav .nav-page-title {
|
||||
display: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
#nav #blog-info {
|
||||
overflow: visible !important;
|
||||
}
|
||||
67
css/poem.css
Normal file
67
css/poem.css
Normal file
@@ -0,0 +1,67 @@
|
||||
[data-theme=light] {
|
||||
--fontcolor: #363636;
|
||||
--text: rgba(60, 60, 67, 0.6);
|
||||
--bg: #edf0f7;
|
||||
}
|
||||
|
||||
[data-theme=dark] {
|
||||
--fontcolor: #F7F7FA;
|
||||
--text: #a1a2b8;
|
||||
--bg: #30343f;
|
||||
}
|
||||
div#poem_sentence{
|
||||
text-align: center;
|
||||
font-family: serif,cursive;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
background: var(--bg);
|
||||
min-height: 62px;
|
||||
}
|
||||
|
||||
div#poem_info{
|
||||
display: flex;
|
||||
color: var(--text);
|
||||
font-size: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
div#poem_author{
|
||||
order: 1;
|
||||
padding: 2px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
div#poem_dynasty{
|
||||
order: 0;
|
||||
padding: 2px 4px 2px 6px;
|
||||
background: var(-btn-bg);
|
||||
color: var(--fontcolor);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#card-poem{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem!important;
|
||||
min-height: 130px;
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7))!important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
[data-theme=dark] #card-poem{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem!important;
|
||||
min-height: 130px;
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7))!important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
300
css/shuoshuo.css
Normal file
300
css/shuoshuo.css
Normal file
@@ -0,0 +1,300 @@
|
||||
/* ================= 主题变量 ================= */
|
||||
:root {
|
||||
--card-bg: #fff;
|
||||
--card-border: 1px solid #e3e8f7;
|
||||
--card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
|
||||
--card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2);
|
||||
--card-secondbg: #f1f3f8;
|
||||
--button-hover-bg: #2679cc;
|
||||
--text: #4c4948;
|
||||
--button-bg: #f1f3f8;
|
||||
--fancybox-bg: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
[data-theme=dark] {
|
||||
--card-bg: #181818;
|
||||
--card-secondbg: #30343f;
|
||||
--card-border: 1px solid #42444a;
|
||||
--card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
|
||||
--card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2);
|
||||
--button-bg: #30343f;
|
||||
--button-hover-bg: #2679cc;
|
||||
--text: rgba(255,255,255,0.702);
|
||||
--fancybox-bg: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* ================= 卡片布局 ================= */
|
||||
#talk {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
align-items: flex-start; /* 防止高度拉伸导致变形 */
|
||||
}
|
||||
|
||||
#talk .talk_item {
|
||||
width: calc(33.333% - 6px);
|
||||
background: var(--card-bg);
|
||||
border: var(--card-border);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-right: 9px;
|
||||
margin-bottom: 9px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow .3s ease-in-out;
|
||||
}
|
||||
|
||||
#talk .talk_item:hover {
|
||||
box-shadow: var(--card-hover-box-shadow);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#talk .talk_item {
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
#talk .talk_item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 给 Meting 播放器预留约 80px 的固定高度 */
|
||||
meting-js {
|
||||
display: block;
|
||||
min-height: 100px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 如果有视频，也预留一下比例高度 */
|
||||
.talk_content iframe {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
/* ================= 头部信息 ================= */
|
||||
#talk .talk_meta,
|
||||
#talk .talk_bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#talk .talk_meta {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed grey;
|
||||
}
|
||||
|
||||
#talk .talk_meta .avatar {
|
||||
margin: 0 !important;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#talk .talk_meta .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#talk .talk_meta .info .talk_nick {
|
||||
color: #6dbdc3;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#talk .talk_meta .info svg.is-badge.icon {
|
||||
width: 15px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
#talk .talk_meta .info span.talk_date {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* ================= 内容区域 ================= */
|
||||
#talk .talk_item .talk_content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_content .zone_imgbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
--w: calc(25% - 8px);
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_content .zone_imgbox a {
|
||||
display: block;
|
||||
border-radius: 12px;
|
||||
width: var(--w);
|
||||
aspect-ratio: 1/1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_content .zone_imgbox a:first-child {
|
||||
width: 100%;
|
||||
aspect-ratio: 1.8;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_content .zone_imgbox img {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ================= 底部信息 ================= */
|
||||
#talk .talk_item .talk_bottom {
|
||||
margin-top: 15px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed grey;
|
||||
justify-content: space-between;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_bottom .icon {
|
||||
float: right;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_bottom .icon:hover {
|
||||
color: #49b1f5;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_bottom span.talk_tag,
|
||||
#talk .talk_item .talk_bottom span.location_tag {
|
||||
font-size: 14px;
|
||||
background-color: var(--card-secondbg);
|
||||
border-radius: 12px;
|
||||
padding: 3px 15px 3px 10px;
|
||||
transition: box-shadow 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_bottom span.location_tag {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_bottom span.talk_tag:hover,
|
||||
#talk .talk_item .talk_bottom span.location_tag:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ================= 文本链接 ================= */
|
||||
#talk .talk_item .talk_content > a {
|
||||
margin: 0 3px;
|
||||
color: #ff7d73 !important;
|
||||
}
|
||||
|
||||
#talk .talk_item .talk_content > a:hover {
|
||||
text-decoration: none !important;
|
||||
color: #ff5143 !important;
|
||||
}
|
||||
|
||||
/* ================= 响应式 ================= */
|
||||
@media screen and (max-width: 900px) {
|
||||
#talk .talk_item .talk_content .zone_imgbox {
|
||||
--w: calc(33% - 5px);
|
||||
}
|
||||
|
||||
#talk .talk_item #post-comment {
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.zone_imgbox {
|
||||
gap: 6px;
|
||||
--w: calc(50% - 3px);
|
||||
}
|
||||
|
||||
span.talk_date {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= 豆瓣卡片 ================= */
|
||||
#talk .talk_item .talk_content .douban-card {
|
||||
margin-top: 10px !important;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #faebd7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 10px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ================= 外链卡片 ================= */
|
||||
#talk .talk_item .talk_content .shuoshuo-external-link {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-top: 10px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--card-secondbg);
|
||||
color: var(--card-text);
|
||||
border: var(--card-border);
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
|
||||
.shuoshuo-external-link:hover {
|
||||
background-color: var(--button-hover-bg);
|
||||
}
|
||||
|
||||
.shuoshuo-external-link .external-link {
|
||||
display: flex;
|
||||
color: var(--text) !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shuoshuo-external-link .external-link:hover {
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.shuoshuo-external-link .external-link-left {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 10px;
|
||||
border-radius: 12px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.shuoshuo-external-link .external-link-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: calc(100% - 80px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.shuoshuo-external-link .external-link-right .external-link-title {
|
||||
font-size: 1.0rem;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.shuoshuo-external-link .external-link-right i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* ================= 结尾 ================= */
|
||||
.limit {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
140
css/shuoshuoshouye.css
Normal file
140
css/shuoshuoshouye.css
Normal file
@@ -0,0 +1,140 @@
|
||||
/* maintop */
|
||||
|
||||
#main_top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
max-width: 1400px;
|
||||
margin: 20px auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.hide-aside #main_top {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.hide-aside #main_top #bber-talk {
|
||||
max-width: 936px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
.hide-aside #main_top #bber-talk {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
#main_top {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1210px) {
|
||||
.hide-aside #main_top {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.hide-aside #main_top {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hide-aside #main_top {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
div#main_top {
|
||||
margin-top: 20px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 重点修改：bber-talk 的磨砂玻璃背景 */
|
||||
#bber-talk {
|
||||
/* 统一磨砂玻璃效果 */
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
|
||||
border-radius: 12px; /* 给哔哔栏加一点圆角，更符合玻璃质感 */
|
||||
border: 1px solid rgba(255, 255, 255, 0.3); /* 增加边缘高光 */
|
||||
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
padding: .5rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
font-weight: 700;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
/* 暗黑模式适配 */
|
||||
[data-theme=dark] #bber-talk {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#bber-talk:hover {
|
||||
transform: translateY(-2px); /* 悬停微动，增加交互感 */
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#bber-talk,
|
||||
#bber-talk a {
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
#bber-talk svg.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#bber-talk .item i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#bber-talk > i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#bber-talk .talk-list {
|
||||
flex: 1;
|
||||
max-height: 32px;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#bber-talk .talk-list:hover {
|
||||
color: var(--default-bg-color);
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
#bber-talk .talk-list li {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 770px) {
|
||||
#bber-talk .talk-list {
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
699
css/style.css
Normal file
699
css/style.css
Normal file
@@ -0,0 +1,699 @@
|
||||
/* #card-newest-comments img {border-radius: 10px; /* 设置最新评论圆角半径为10px，可以根据需要调整} */
|
||||
|
||||
/* 侧边栏个人信息卡片动态渐变色 */
|
||||
#aside-content>.card-widget.card-info {
|
||||
position: relative;
|
||||
z-index: 1; /* 确保原内容在上层显示 */
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
#aside-content > .card-widget.card-info::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 255, 255, 0.0),
|
||||
rgba(255, 255, 255, 0.3),
|
||||
rgba(255, 255, 255, 0.6),
|
||||
rgba(255, 255, 255, 0.7)); /* 鼠标悬停时显示的背景图片 */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.8s; /* 过渡效果持续时间 */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
[data-theme=dark] #aside-content > .card-widget.card-info::before {
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(24, 40, 72, .1),
|
||||
rgba(35, 37, 58, .3),
|
||||
rgba(35, 37, 58, .6),
|
||||
rgba(24, 40, 72, .7)); /* 鼠标悬停时显示的背景图片 */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#aside-content > .card-widget.card-info:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
/* 卡片动态效果，好好看哈哈 */
|
||||
#aside-content div.card-widget.card-info .avatar-img {
|
||||
transition: opacity 0.3s ease; /* 添加渐变效果 */
|
||||
}
|
||||
|
||||
#aside-content div.card-widget.card-info .avatar-img:hover {
|
||||
opacity: 0; /* 鼠标移上去时完全透明 */
|
||||
}
|
||||
|
||||
#card-info-btn:hover, #card-info-btn:hover .icon, #card-info-btn:hover span {
|
||||
transform: scale(1.1); /* 鼠标悬停时放大到110% */
|
||||
}
|
||||
|
||||
[data-theme=dark] #aside-content>.card-widget.card-info {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .6),
|
||||
rgba(35, 37, 58, .5),
|
||||
rgba(35, 37, 58, .5),
|
||||
rgba(24, 40, 72, .6));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/* 侧边栏公告栏卡片渐变色 */
|
||||
#aside-content>.card-widget.card-announcement {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] #aside-content>.card-widget.card-announcement {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/* 侧边栏目录最新文章卡片渐变色 */
|
||||
#aside-content>.sticky_layout>.card-widget {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] #aside-content>.sticky_layout>.card-widget {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/* 侧边栏欢迎卡片渐变色 */
|
||||
#aside-content>.card-widget.welcomeBoxClass {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] #aside-content>.card-widget.welcomeBoxClass {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/* 公告卡片渐变色 */
|
||||
#recent-posts>#noticeList {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] #recent-posts>#noticeList {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/* 个人信息Follow me按钮 */
|
||||
#aside-content>.card-widget.card-info>#card-info-btn {
|
||||
background-color: #3eb8be;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*文章页面*/
|
||||
.layout>#post {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] .layout>#post {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/*分类条*/
|
||||
#recent-posts>.category-bar {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7))!important;
|
||||
backdrop-filter: blur(10px)!important;
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] #recent-posts>.category-bar {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7))!important;
|
||||
backdrop-filter: blur(10px)!important;
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/*主页文章预览页面*/
|
||||
#recent-posts>.recent-post-items>.recent-post-item {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7))!important;
|
||||
backdrop-filter: blur(10px)!important;
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] #recent-posts>.recent-post-items>.recent-post-item {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7))!important;
|
||||
backdrop-filter: blur(10px)!important;
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/*分类页面*/
|
||||
.layout>#page {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] .layout>#page {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
|
||||
/*时间轴页面*/
|
||||
.layout>#archive {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] .layout>#archive {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/*分类点进去的页面*/
|
||||
.layout>#category {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] .layout>#category {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
/*标签点进去的页面*/
|
||||
.layout>#tag {
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .8),
|
||||
rgba(255, 255, 255, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
[data-theme=dark] .layout>#tag {
|
||||
background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(35, 37, 58, .8),
|
||||
rgba(24, 40, 72, .7));
|
||||
backdrop-filter: blur(10px);
|
||||
/* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
|
||||
}
|
||||
|
||||
.layout.hide-aside {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* 设置黑夜的时候，社交按钮为白色 */
|
||||
[data-theme=dark] .social-icon i {
|
||||
color: rgba(188, 188, 188) !important; /* 设置为白色 */
|
||||
}
|
||||
|
||||
.layout{
|
||||
width: 100%;
|
||||
max-width:1400px;
|
||||
}
|
||||
/* 重新定义宽度 */
|
||||
|
||||
.layout > div:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
#post {
|
||||
width: 78%;
|
||||
}
|
||||
.aside-content {
|
||||
max-width: 100%;
|
||||
min-width: 300px;
|
||||
}
|
||||
.layout.hide-aside {
|
||||
max-width: 1400px;
|
||||
}
|
||||
/* 定义是否侧边栏的宽度 */
|
||||
|
||||
#recent-posts > .recent-post-item {
|
||||
height: 19em;
|
||||
border: var(--style-border);
|
||||
}
|
||||
#recent-posts > .recent-post-item >.recent-post-info {
|
||||
padding: 0 56px;
|
||||
width: 64%;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#recent-posts > .recent-post-item {
|
||||
height: auto;
|
||||
}
|
||||
#recent-posts > .recent-post-item >.recent-post-info {
|
||||
padding: 20px 20px 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* 主页文章列表图片宽度 */
|
||||
|
||||
.loading-img {
|
||||
background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#footer {
|
||||
background-color: rgba(0, 0, 0, 0); /* 修改透明色 */
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#footer .footer-other {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-copyright{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.my-footer-logo {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.my-footer-wave-svg {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
transform: scale(-1, -1) translateY(-10px); /*;*/
|
||||
}
|
||||
|
||||
.my-footer-wave-path {
|
||||
fill: #177ecd;
|
||||
}
|
||||
|
||||
.my-footer-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1230px;
|
||||
padding: 40px 15px 450px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my-footer-content-column {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.my-footer-content-column ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.my-footer-logo-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.my-footer-menu {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.my-footer-menu-name {
|
||||
color: #fffff2;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
letter-spacing: .1em;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.my-footer-menu-list {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.my-footer-menu-list li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action-description {
|
||||
color: #fffff2;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action-button:hover {
|
||||
background-color: #fffff2;
|
||||
color: #00bef0;
|
||||
}
|
||||
|
||||
.button:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action-button {
|
||||
background-color: #03708c;
|
||||
border-radius: 21px;
|
||||
color: #fffff2;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
letter-spacing: .1em;
|
||||
line-height: 18px;
|
||||
padding: 12px 30px;
|
||||
margin: 0 10px 10px 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: background-color .2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action-title {
|
||||
color: #fffff2;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
letter-spacing: .1em;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action-link-wrapper {
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.my-footer-call-to-action-link-wrapper a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.my-footer-social-links {
|
||||
bottom: -1px;
|
||||
height: 54px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 236px;
|
||||
}
|
||||
|
||||
.my-footer-social-amoeba-svg {
|
||||
height: 54px;
|
||||
left: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 236px;
|
||||
}
|
||||
|
||||
.my-footer-social-amoeba-path {
|
||||
fill: #03708c;
|
||||
}
|
||||
|
||||
.my-footer-social-link.email {
|
||||
height: 41px;
|
||||
left: 5px;
|
||||
top: 14px;
|
||||
width: 41px;
|
||||
}
|
||||
|
||||
.my-footer-social-link {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hidden-link-text {
|
||||
position: absolute;
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
|
||||
clip-path: inset(0px 0px 99.9% 99.9%);
|
||||
overflow: hidden;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.my-footer-social-icon-svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.my-footer-social-icon-path {
|
||||
fill: #fffff2;
|
||||
transition: fill .2s;
|
||||
}
|
||||
|
||||
.my-footer-social-link.follow {
|
||||
height: 42px;
|
||||
left: 124px;
|
||||
top: 13px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.my-footer-social-link.rss {
|
||||
height: 43px;
|
||||
left: 178px;
|
||||
top: 10px;
|
||||
width: 43px;
|
||||
}
|
||||
|
||||
.my-footer-social-link.github {
|
||||
height: 62px;
|
||||
left: 54px;
|
||||
top: -4px;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
.my-footer-copyright {
|
||||
background-color: #03708c;
|
||||
color: #fff;
|
||||
padding: 15px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-footer-copyright-wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.my-footer-copyright-text {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.my-footer-copyright-link {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.my-footer-content-div {
|
||||
background: #177ecd
|
||||
}
|
||||
|
||||
.my-footer-svg-div {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* Media Query For different screens */
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
|
||||
.my-footer-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1230px;
|
||||
padding: 40px 15px 649px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 不展示logo */
|
||||
.my-footer-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 599px) {
|
||||
/* smartphones, Android phones, landscape iPhone */
|
||||
.my-footer-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1230px;
|
||||
padding: 40px 15px 738px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my-footer-logo {
|
||||
padding-left: 177px; /* Qlogo 稍微偏移一点 */
|
||||
padding-right: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 800px) {
|
||||
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
|
||||
.my-footer-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1230px;
|
||||
padding: 40px 15px 758px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 801px) {
|
||||
/* tablet, landscape iPad, lo-res laptops ands desktops */
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
/* big landscape tablets, laptops, and desktops */
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1281px) {
|
||||
/* hi-res laptops and desktops */
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.my-footer-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1230px;
|
||||
padding: 10px 15px 237px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.my-footer-content-column {
|
||||
/*五列的话 19.99 %*/
|
||||
width: 24.99%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 568px) {
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 760px) {
|
||||
/* 在这里编写适用于小屏幕的样式 */
|
||||
.my-footer-logo {
|
||||
padding-left: 212px; /* Qlogo 稍微偏移一点 */
|
||||
padding-right: 204px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页脚波浪的颜色 */
|
||||
[data-theme='dark'] .my-footer-wave-path {
|
||||
fill: #0f3858;
|
||||
}
|
||||
[data-theme='dark'] .my-footer-content-div {
|
||||
background-color: #0f3858;
|
||||
}
|
||||
|
||||
/* 页脚海底的颜色 */
|
||||
[data-theme='dark'] .my-footer-copyright {
|
||||
background-color: #2b3f49;
|
||||
}
|
||||
[data-theme='dark'] .my-footer-social-amoeba-path {
|
||||
fill: #2b3f49;
|
||||
}
|
||||
138
css/swiper.css
Normal file
138
css/swiper.css
Normal file
@@ -0,0 +1,138 @@
|
||||
/* 1. 强制清空外层容器的背景、边框和阴影 */
|
||||
#swiperBox,
|
||||
#swiper_container,
|
||||
.blog-slider,
|
||||
.swiper-container {
|
||||
padding: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* 2. 强力锁定比例，防止 JS 动态修改高度 */
|
||||
div#swiper_container {
|
||||
width: 100% !important;
|
||||
|
||||
/* 使用 vw 单位根据屏幕宽度动态计算高度 */
|
||||
/* 16:9 比例下，高度 = 宽度 * 56.25% */
|
||||
height: 56.25vw !important;
|
||||
|
||||
/* 设定最大高度，防止在 PC 端显得过大（可根据需求调整，比如 400px） */
|
||||
max-height: 450px !important;
|
||||
|
||||
/* 设定最小高度，防止在极小屏幕下太扁 */
|
||||
min-height: 180px !important;
|
||||
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
display: block !important;
|
||||
border-radius: 12px;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* 强制内部所有幻灯片跟随父容器高度 */
|
||||
.swiper-wrapper, .swiper-slide, .blog-slider__item {
|
||||
height: 100% !important;
|
||||
}
|
||||
/* 3. 彻底隐藏分页圆点或橙色元素 */
|
||||
.blog-slider__pagination, .swiper-pagination {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.blog-slider__pagination .swiper-pagination-bullet,
|
||||
.swiper-pagination-bullet,
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* 4. 图片填充修复：确保铺满不留白 */
|
||||
.blog-slider__item {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 5. 打包内容块并整体居中 */
|
||||
.blog-slider__content {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 核心：将内容容器设为居中参考点 */
|
||||
.blog-slider__content .blog-slider__item_content_wrapper, /* 尝试抓取可能的内层包裹 */
|
||||
.blog-slider__content > div:first-child, /* 备选抓取 */
|
||||
.blog-slider__content {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* 针对标题和描述的统一样式 */
|
||||
.blog-slider__title,
|
||||
.blog-slider__text {
|
||||
position: relative !important; /* 放弃绝对定位，回归正常流，防止重叠 */
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
transform: none !important;
|
||||
width: 85% !important;
|
||||
text-align: center !important;
|
||||
margin: 5px auto !important; /* 自动上下留白 */
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
a.blog-slider__title {
|
||||
font-size: 1.4rem !important;
|
||||
font-weight: bold !important;
|
||||
line-height: 1.3 !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.blog-slider__text {
|
||||
font-size: 0.9rem !important;
|
||||
opacity: 0.9;
|
||||
/* 限制描述文字行数，防止在16:9中撑破容器 */
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 针对手机端的极小屏幕适配 */
|
||||
@media screen and (max-width: 768px) {
|
||||
a.blog-slider__title {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
.blog-slider__text {
|
||||
font-size: 0.8rem !important;
|
||||
-webkit-line-clamp: 1; /* 手机端只留一行描述，防止空间拥挤 */
|
||||
}
|
||||
}
|
||||
/* 6. 移动端微调：防止文字过大或间距过宽 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__content {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
a.blog-slider__title {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 7. 左右箭头样式：白色且无背景 */
|
||||
.swiper-button-next::after, .swiper-button-prev::after {
|
||||
font-size: 1.2rem !important;
|
||||
color: #fff !important;
|
||||
background: none !important;
|
||||
}
|
||||
0
css/var.css
Normal file
0
css/var.css
Normal file
Reference in New Issue
Block a user