2014 Theme Frutiger CSS

以下是景の域 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;
    }
}

/* --- */

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注