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;
    }
}

/* --- */

发表回复

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

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)