mirror of
https://github.com/WordPress/WordPress.git
synced 2024-07-08 12:54:45 +02:00
030bc377dd
This adds the ability for themes to add support for videos in custom headers by passing `'video' => true` as an argument when adding theme support for custom headers. Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”) panel in the Customizer where you can select a video from the media library or set a URL to an external video (YouTube for now) for use in custom headers. This introduces several new functions: `has_header_video()` – Check whether a header video is set or not. `get_header_video_url()` – Retrieve header video URL for custom header. `the_header_video_url()` – Display header video URL. `get_header_video_settings()` – Retrieve header video settings. `has_custom_header()` – Check whether a custom header is set or not. `get_custom_header_markup()` – Retrieve the markup for a custom header. `the_custom_header_markup()` – Print the markup for a custom header. And a new file, `wp-includes/js/wp-custom-header.js` that handles loading videos in custom headers. This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes. Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill. Fixes #38172. Built from https://develop.svn.wordpress.org/trunk@38985 git-svn-id: http://core.svn.wordpress.org/trunk@38928 1a063a9b-81f0-0310-95a4-ce76da25c4cd
204 lines
3.1 KiB
CSS
204 lines
3.1 KiB
CSS
/*
|
|
Theme Name: Twenty Seventeen
|
|
Description: IE8 specific style.
|
|
*/
|
|
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
font-size: 1.875rem;
|
|
}
|
|
|
|
h2,
|
|
.page .panel-content .recent-posts .entry-title {
|
|
font-size: 26px;
|
|
font-size: 1.625rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 22px;
|
|
font-size: 1.375rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 18px;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 13px;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
img {
|
|
width: inherit; /* Make images fill their parent's space. */
|
|
}
|
|
|
|
/* Fixes linked images */
|
|
.entry-content a img,
|
|
.widget a img {
|
|
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=5, Color=#ffffff);
|
|
}
|
|
|
|
/* Layout */
|
|
|
|
.site-content {
|
|
padding: 6.5em 0 0;
|
|
}
|
|
|
|
/* Site Branding */
|
|
|
|
.custom-header {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-header-image {
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.site-branding {
|
|
padding: 45px 0;
|
|
}
|
|
|
|
.has-header-image .custom-header-image img,
|
|
.has-header-image .custom-header-image video {
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.site-title {
|
|
font-size: 36px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.site-description {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Main Navigation */
|
|
|
|
.navigation-top {
|
|
background: #fff;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.menu-toggle {
|
|
width: 150px;
|
|
}
|
|
|
|
.main-navigation ul#top-menu {
|
|
margin-bottom: -1px;
|
|
padding: 0;
|
|
}
|
|
|
|
.no-svg .dropdown-toggle {
|
|
padding: 0.25em 0 0;
|
|
}
|
|
|
|
.no-svg .dropdown-toggle.toggled-on {
|
|
padding: 0.75em 0 0;
|
|
}
|
|
|
|
.dropdown-toggle .svg-fallback.icon-expand {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
|
|
}
|
|
|
|
.dropdown-toggle.toggled-on .svg-fallback.icon-expand {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
|
|
}
|
|
|
|
/* Front Page */
|
|
|
|
.twentyseventeen-front-page.has-header-image .custom-header,
|
|
.blog.home.has-header-image .custom-header,
|
|
.panel-image {
|
|
height: 800px;
|
|
max-height: 800px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.twentyseventeen-front-page .custom-header-image,
|
|
.blog.home .custom-header-image {
|
|
background-position: center center;
|
|
}
|
|
|
|
.twentyseventeen-front-page.has-header-image .site-branding,
|
|
.home.blog.has-header-image .site-branding {
|
|
bottom: 20px;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.page .panel-content .entry-title,
|
|
.page-title,
|
|
.page .entry-title {
|
|
font-size: 14px;
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Posts */
|
|
|
|
.blog .site-main > article,
|
|
.archive .site-main > article,
|
|
.search .site-main > article {
|
|
padding-bottom: 4em;
|
|
}
|
|
|
|
time.updated {
|
|
display: none;
|
|
}
|
|
|
|
time.published {
|
|
display: inline-block;
|
|
}
|
|
|
|
.blog .entry-title {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.single-post .entry-title,
|
|
.page .entry-title,
|
|
.entry-meta + .entry-title {
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
letter-spacing: normal;
|
|
padding-top: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
.entry-footer .cat-links,
|
|
.entry-footer .tags-links {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.comment-author .avatar {
|
|
z-index: -1;
|
|
}
|
|
|
|
ol.children .children {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
/* RTL Styles */
|
|
|
|
.rtl .entry-footer .cat-links,
|
|
.rtl .entry-footer .tags-links {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.rtl ol.children .children {
|
|
padding-left: 0;
|
|
padding-right: 2em;
|
|
} |