以下是景の域 V1sta 的 Twenty Fourteen 2014 使用的主题美化CSS代码。
域主水平有限,没系统性学过CSS,如果有不周之处也请多多包涵或指出建议。另外,像是题图的裁剪部分可能还是需要修改主题本身,我也在计划制作2014的子主题……
/*
V1sta 2014 Theme CSS
Update 2026 02 07
*/
.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
text-decoration: none;
}
/* 主要布局 */
@media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 56px;
}
}
@media screen and (min-width: 1008px) {
.site {
margin: 0 auto;
max-width: 1280px;
position: relative;
}
.site-header {
max-width: 1280px;
position: relative;
width: 100%;
z-index: 4;
}
.archive-header,
.comments-area,
.image-navigation,
.page-header,
.page-content,
.post-navigation,
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content footer.entry-meta {
padding-right: 40px;
padding-left: 40px;
margin-right: auto;
margin-bottom: 20px;
}
article.hentry {
max-width: 100% !important;
}
.site-content {
margin-right: 340px;
}
.content-sidebar {
margin-left: -340px;
max-width: 340px !important;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 500px;
padding-top: 6px;
padding-bottom: 6px;
}
}
@media screen and (min-width: 1681px) {
.site {
margin: 0 auto;
max-width: 1400px;
position: relative;
}
.site-header {
max-width: 1400px !important;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 580px;
padding-top: 12px;
}
}
/* 页脚站点信息 */
.site-info {
background: rgb(163, 163, 163);
background: linear-gradient(180deg,
rgba(0, 0, 0, 1) 1%,
rgba(200, 200, 200, 1) 2%,
rgba(126, 126, 126, 1) 5%, rgba(64, 64, 64, 1) 50%, rgba(25, 25, 25, 1) 50%, rgba(0, 0, 0, 1) 100%);
}
@media screen and (min-width: 592px) {
.site-content .has-post-thumbnail .entry-header {
box-shadow: 0px -20px 25px -15px #0000005F !important;
}
}
.secondary-navigation li:hover>a,
.secondary-navigation li.focus>a,
.secondary-navigation ul ul {
background-color: #00e8e8;
background: linear-gradient(90deg, #00e8e8 20%, #ffffff00 100%);
}
.archive-title,
.page-title {
font-size: 2rem;
font-weight: 300;
}
/* 图标部分 2025-01-31 */
h1.widget-title::before {
background: radial-gradient(at bottom right, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgba(126, 126, 126, 1) 5%, rgba(64, 64, 64, 1) 50%, rgba(25, 25, 25, 1) 50%, rgba(0, 0, 0, 1) 100%);
}
/* 导航栏部分 2025-01-31 */
.site-header {
background-image: radial-gradient(at top left, rgb(61 61 61) 5%, rgb(40 40 40) 45%, rgba(25, 25, 25, 1) 40%, rgba(0, 0, 0, 1) 60%);
}
@media screen and (max-width: 783px) {
.primary-navigation.toggled-on .nav-menu {
background-color: black;
background: linear-gradient(180deg, rgb(39 39 39 / 0%) 0%, rgb(0 0 0) 35%, rgb(0 0 0) 100%);
padding-left: 40px;
/* padding-right: 34px; */
margin-left: -30px;
margin-right: 15px;
margin-bottom: -15px;
margin-top: -72px;
padding-top: 58px;
border-style: none;
}
}
/* 题图 2026-01-25*/
.featured-content .entry-header {
background: linear-gradient(154deg, rgb(105 105 105 / 70%) 5%, rgb(55 55 55 / 78%) 54%, rgb(57 57 57 / 38%) 29%, rgb(0 0 0 / 35%) 60%);
background-color: #000000d6;
}
@media screen and (min-width: 900px) {
.grid .featured-content .entry-header {
border-style: hidden;
height: 102px;
padding: 18px;
border-left-style: outset;
border-width: 1px;
}
}
@media screen and (min-width: 673px) {
.grid .featured-content .entry-header {
border-style: hidden;
height: 102px;
padding: 18px;
border-left-style: outset;
border-width: 1px;
}
}
/* 切换键 */
.slider-direction-nav a {
background: linear-gradient(180deg, rgb(78 78 78) 5%, rgb(60 60 60) 50%, rgb(30 30 30) 50%, rgb(50 50 50) 100%);
}
.slider-direction-nav a:hover {
background: linear-gradient(180deg, rgb(00 00 00) 5%, rgb(50 50 50) 50%, rgb(30 30 30) 50%, rgb(50 50 50) 100%);
}
.slider-direction-nav a:hover:before {
color: aqua;
}
/* 搜索图标 20260127 */
.search-toggle {
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(178 212 225) 5%, rgb(9 67 64) 50%, rgb(4 46 49) 50%, #1a6b7d 100%);
color: white;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(46 91 173) 5%, rgb(9 37 67) 50%, rgb(8 14 57) 50%, #1e5277 100%);
border-top-style: none;
border-right-style: none;
margin-left: 2px;
}
.search-toggle:hover {
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(75 139 255) 5%, rgb(22 71 123) 50%, rgb(26 35 105) 50%, #4bb9ed 100%);
}
.menu-toggle:hover {
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(75 139 255) 5%, rgb(22 71 123) 50%, rgb(26 35 105) 50%, #4bb9ed 100%);
}
.search-toggle:active {
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(48 62 87) 5%, rgb(1 3 4) 50%, rgb(0 0 0) 50%, #1d4663 100%);
}
.menu-toggle:active {
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(48 62 87) 5%, rgb(1 3 4) 50%, rgb(0 0 0) 50%, #1d4663 100%);
}
.search-toggle::before {
color: white;
}
.menu-toggle {
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(200, 200, 200, 1) 2%, rgb(46 91 173) 5%, rgb(9 37 67) 50%, rgb(8 14 57) 50%, #1e5277 100%);
}
/* 搜索框 */
.search-box {
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 1%, rgb(200 200 200) 2%, rgb(18 18 18 / 60%) 5%, rgb(24 24 24) 70%, rgba(25, 25, 25, 1) 70%, rgb(0 0 0) 100%);
}
/* 像素化*/
.pixbtn {
image-rendering: pixelated;
}
/* Aero Button */
.wp-block-button .wp-block-button__link {
color: #2b2b2b;
line-height: 12px;
border-radius: 3px;
background: #ECEFEF;
background: linear-gradient(180deg, rgba(236, 239, 239, 1) 0%, rgba(235, 236, 236, 1) 45%, rgba(219, 221, 222, 1) 45%, rgba(204, 210, 212, 1) 100%);
border: 1px solid #f3f3f3;
box-shadow: 0 0 1px 0.8px #707070c7;
transition: border-color calc(1s * 1);
}
.wp-block-button .wp-block-button__link:active {
outline: 1px dotted currentColor;
outline-offset: -3px;
background: linear-gradient(180deg, #EAF6FD 0%, #D9F0FC 45%, #94cfed 45%, #6cb5dc 100%);
border: 1px solid #ECF7FD;
color: #2b2b2b;
/* padding: 2px 7px 3px 9px; */
border: 1px solid #73A7C4;
border-bottom-style: outset;
box-shadow: 0 0 1px 0.8px #2C628B;
transition: border-color calc(1s * 1);
}
.wp-block-button .wp-block-button__link:hover {
color: #2b2b2b;
box-shadow: 0 0 1px 0.8px #3C7FB1;
border: 1px solid #ECF7FD;
transition: box-shadow calc(1s * 1);
}
.wp-block-button .wp-block-button__link:focus-visible {
outline: 1px dotted currentColor;
outline-offset: -3px;
background: linear-gradient(180deg, #EAF6FD 0%, #D9F0FC 50%, #94cfed 51%, #6cb5dc 100%);
border: 1px solid #ECF7FD;
color: #2b2b2b;
border: 1px solid #73A7C4;
box-shadow: 0 0 1px 0.8px #2C628B;
}
.wp-block-button .wp-block-button__link:focus {
outline: 1px dotted currentColor;
outline-offset: -3px;
color: #003f3f;
border-color: #72f2ff;
transition: border-color calc(1s * 1);
animation: 1s ease-in-out infinite alternate win7__anim-button--pulse;
}
.wp-block-button .wp-block-button__link:focus::before {
transition: border-color calc(1s * var(--effect-animate-controls));
}
.wp-block-button .wp-block-button__link .small {
padding: 2px 7px 3px 9px;
}
/* 侧边栏 */
@media screen and (min-width: 782px) {
.secondary-navigation li:hover>a,
.secondary-navigation li.focus>a,
.secondary-navigation ul ul {
box-shadow: 0 2px 21px aqua;
transition: box-shadow 0.3s;
}
}
.widget_calendar tbody a {
background: linear-gradient(180deg, rgba(158, 158, 158, 1) 0%, rgb(12 15 16) 52%, rgb(24 24 24) 52%, rgb(43 90 104) 100%);
color: white;
}
.widget_calendar tbody a:hover {
background: linear-gradient(180deg, rgb(200 223 225) 0%, rgb(8 167 181) 52%, rgb(39 112 120) 52%, rgb(48 223 229) 100%);
color: white;
box-shadow: 0 2px 21px aqua;
transition: box-shadow 0.1s;
}
.widget_calendar tbody a:focus {
background: linear-gradient(180deg, rgba(158, 158, 158, 1) 0%, rgb(0 0 0) 52%, rgb(24 24 24) 52%, rgb(47 79 85) 100%);
color: white;
}
.featured-content a:hover,
.featured-content .entry-title a:hover {
text-shadow: 0 2px 18px #36e3e394;
color: #e2fcff;
}
@media screen and (max-width: 782px) {
.secondary-navigation a {
padding: 9px 0px;
padding-left: 15px;
}
}
@media screen and (min-width: 782px) {
.secondary-navigation li:hover>a,
.secondary-navigation li.focus>a,
.secondary-navigation ul ul {
box-shadow: 0 2px 21px aqua;
}
}
a:hover,
.featured-content a:hover,
.featured-content .entry-title a:hover,
.widget a:hover,
.widget-title a:hover,
.widget_twentyfourteen_ephemera .entry-meta a:hover,
.hentry .mejs-controls .mejs-button button:hover,
.widget .mejs-controls .mejs-button button:hover,
.site-info a:hover,
.featured-content a:hover,
.wp-block-latest-comments_comment-meta a:hover,
.wp-block-latest-comments_comment-meta a:focus {
text-shadow: 0 3px 8px #3bffff94;
transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
.search-toggle,
.menu-toggle {
box-shadow: 20px 14.5px 40px -15px #ffffff;
transition: box-shadow calc(1s * 1);
animation: 1s;
}
/*聚光主导航*/
@media screen and (min-width: 783px) {
.site-navigation .current-menu-item>a,
.site-navigation .current-menu-ancestor>a,
.primary-navigation li:hover>a,
.primary-navigation li.focus>a {
background: #00000000;
color: #4ae3de;
background-image: radial-gradient(circle at center -12px, #d2f7ff8c 0%, #00000000 45%, #00000000 100%);
transition: background-image 0.14s;
}
.site-navigation .current-menu-item>a,
.primary-navigation li:hover>a,
.primary-navigation li.focus>a {
background: #00000000;
color: #4ae3de;
background-image: radial-gradient(circle at center -12px, #d2f7ff6b 0%, #00000000 55%, #00000000 100%);
transition: background-image 0.14s;
}
.site-navigation .current-menu-item>a,
.primary-navigation li:hover>a,
.primary-navigation li.focus>a {
background: #00000000;
color: #00e8e8;
background-image: radial-gradient(circle at center -12px, #d2f7ff8c 0%, #00000000 45%, #00000000 100%);
transition: background-image 0.14s;
}
}
@media screen and (min-width: 783px) {
.primary-navigation li>a {
padding-inline: 12px;
}
.primary-navigation li>a {
background-image: radial-gradient(circle at center 0px, #d2f7ff00 0%, #00000000 55%, #00000000 100%);
transition: background-image 0.14s;
}
.primary-navigation ul ul a {
color: #487575;
}
}
/* --- */
/* 绚动子菜单 */
@media screen and (min-width: 782px) {
.primary-navigation ul li:hover>ul,
.primary-navigation ul li.focus>ul {
left: auto;
background: linear-gradient(180deg, rgb(5 10 12) 70%, rgb(17 41 45) 100%);
box-shadow: 1px 3px 15px 3px #00000059;
border-radius: 3px;
padding-bottom: 8px;
padding-top: 7px;
padding-inline: 8px;
/* width: 100%; */
border: 2px solid;
}
}
@media screen and (min-width: 782px) {
.primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus>a {
background-color: #a5a5a500;
background-image: linear-gradient(180deg, #4f4f4f 5%, rgb(19 37 39) 50%, rgb(8 8 8) 50%, rgb(29 83 78) 100%);
background-blend-mode: darken;
font-size: 1.45em;
line-height: 5px;
color: #c5ffffcc;
padding-block: 18px;
margin-inline: -2px;
margin-bottom: 6px;
height: 8px;
margin-top: 4px;
border-radius: 3px;
box-shadow: 0 3px 16px -10px #00e8e8, 0 -6px 40px -7px #252727;
border: 2.1px solid #6d6d6d63;
border-block: none;
transition: box-shadow 0.14s, color 0.14s, margin-bottom 14s, margin-top 0s, font-size 0.14s;
}
/* 绚动子菜单当前页面*/
.site-navigation li .current_page_item>a,
.site-navigation li .current_page_ancestor>a,
.site-navigation li .current-menu-item>a,
.site-navigation li .current-menu-ancestor>a {
background-color: #AAAAAA;
background-image: linear-gradient(180deg, #4f4f4f 5%, rgb(19 37 39) 50%, rgb(8 8 8) 50%, rgb(70 200 190) 120%);
background-blend-mode: light;
font-size: 1.45em;
line-height: 5px;
color: #c5ffffcc;
padding-block: 18px;
margin-inline: -2px;
margin-bottom: 6px;
height: 8px;
margin-top: 4px;
border-radius: 3px;
box-shadow: 0 3px 16px -10px #00e8e8, 0 -6px 40px -7px #252727;
border: 2.1px solid #6d6d6d63;
border-block: none;
transition: box-shadow 0.14s, color 0.14s, margin-bottom 14s, margin-top 0s, font-size 0.14s;
}
}
/* --- */
/* 副侧栏选中 */
.secondary-navigation li:hover>a,
.secondary-navigation li.focus>a,
.secondary-navigation ul ul {
background-color: #00e8e8;
background: linear-gradient(180deg, rgb(177 244 255 / 47%) 0%, rgb(220 243 243 / 26%) 52%, rgb(24 24 24) 52%, rgb(51 197 197 / 61%) 100%);
color: white;
box-shadow: 0px 10px 20px -14.8px #16e9ff, 0px 3px 70px -10px #edffffc2;
}
@media screen and (min-width: 782px) {
.secondary-navigation .current-menu-item>a {
background-image: linear-gradient(180deg, #4f4f4f 5%, rgb(19 37 39) 50%, rgb(8 8 8) 50%, rgb(29 83 78) 100%);
min-height: 20px;
}
}
/* --- */
