diff --git a/Gruntfile.js b/Gruntfile.js index d4e688b..2b7c57d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -122,6 +122,16 @@ module.exports = function(grunt) { options: { outputStyle: 'expanded' } + }, + core: { + expand: true, + cwd: SOURCE_DIR, + dest: BUILD_DIR, + ext: '.css', + src: ['wp-admin/css/*.scss'], + options: { + outputStyle: 'expanded' + } } }, cssmin: { @@ -134,10 +144,18 @@ module.exports = function(grunt) { dest: BUILD_DIR, ext: '.min.css', src: [ - 'wp-admin/css/{<%= cssmin.options["wp-admin"] %>}.css', 'wp-includes/css/*.css' ] }, + core_scss: { + expand: true, + cwd: BUILD_DIR, + dest: BUILD_DIR, + ext: '.min.css', + src: [ + 'wp-admin/css/{<%= cssmin.options["wp-admin"] %>}.css', + ] + }, rtl: { expand: true, cwd: BUILD_DIR, @@ -423,6 +441,10 @@ module.exports = function(grunt) { files: [SOURCE_DIR + 'wp-admin/css/colors/**'], tasks: ['sass:colors'] }, + core_scss: { + files: [SOURCE_DIR + 'wp-admin/css/*.scss'], + tasks: ['sass:core'] + }, rtl: { files: [ SOURCE_DIR + 'wp-admin/css/*.css', @@ -463,7 +485,7 @@ module.exports = function(grunt) { grunt.registerTask('copy:all', ['copy:files', 'copy:wp-admin-rtl', 'copy:version']); // Build task. - grunt.registerTask('build', ['clean:all', 'copy:all', 'cssmin:core', 'colors', 'rtl', 'cssmin:rtl', 'cssmin:colors', + grunt.registerTask('build', ['clean:all', 'sass:core', 'copy:all', 'cssmin:core_scss', 'cssmin:core', 'colors', 'rtl', 'cssmin:rtl', 'cssmin:colors', 'uglify:core', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce', 'jsvalidate:build']); // Testing tasks. diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css deleted file mode 100644 index 50c4d92..0000000 --- a/src/wp-admin/css/about.css +++ /dev/null @@ -1,446 +0,0 @@ -/*------------------------------------------------------------------------------ - 22.0 - About Pages -------------------------------------------------------------------------------*/ - -.about-wrap { - position: relative; - margin: 25px 40px 0 20px; - max-width: 1050px; /* readability */ - - font-size: 15px; -} - -.about-wrap div.updated, -.about-wrap div.error { - display: none !important; -} - -.about-wrap hr { - border: 0; - height: 0; - margin: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); -} - -.about-wrap img { - margin: 0; - max-width: 100%; - height: auto; - vertical-align: middle; -} - -/* Typography */ - -.about-wrap p { - line-height: 1.6em; - font-size: 14px; -} - -.about-wrap h1 { - margin: 0.2em 200px 0 0; - color: #333; - line-height: 1.2em; - font-size: 2.8em; - font-weight: 400; -} - -.about-wrap h4 { - color: #222; -} - -.about-wrap .about-text, -.about-wrap p.about-description, -.about-wrap li.wp-person a.web { - font-weight: normal; - line-height: 1.6em; - font-size: 19px; -} - -.about-description { - margin-top: 1.4em; -} - -.about-text { - margin: 1em 200px 1em 0; - min-height: 60px; - color: #777; - font-size: 24px; -} - -.about-wrap .changelog h2.about-headline-callout { - margin: 1.1em 0 0.2em; - font-size: 2.4em; - font-weight: 300; - line-height: 1.3; - text-align: center; -} - -.about-wrap h3 { - margin: 1em 0 .6em; - font-size: 1.5em; - line-height: 1.5em; -} - -.about-wrap h3.higher { - margin-top: .5em; -} - -.customize h3 { - margin-top: 1.75em; - text-align: center; -} - -.about-wrap .feature-section h4 { - margin: 1.4em 0 0.6em 0; - font-size: 1.2em; -} - -.about-wrap .feature-section p { - margin-top: 0.6em; -} - -.about-wrap code, -.about-wrap ol li p { - font-size: 14px; -} - -.about-wrap .button.button-large { - padding: 8px 20px 10px !important; - height: 46px !important; - font-size: 14px; - line-height: 28px !important; -} - -/* 3.8 Images */ - -.about-wrap .about-overview-img { - margin: 0; -} - -/* Point Releases */ - -.about-wrap .point-releases { - margin-top: 5px; - border-bottom: 1px solid #dfdfdf; -} - -.about-wrap .changelog.point-releases h3 { - padding-top: 35px; -} - -.about-wrap .changelog.point-releases h3:first-child { - padding-top: 7px; -} - -/* WordPress Version Badge */ - -.wp-badge { - background: #0074a2 url(../images/w-logo-white.png?ver=20131202) no-repeat; - background: #0074a2, url(../images/wordpress-logo-white.svg?ver=20131110) no-repeat; /* multiple backgrounds are ignored by browsers that don't support SVGs */ - background-position: center 24px; - -webkit-background-size: 85px 85px; - background-size: 85px 85px; - color: #78c8e6; - font-size: 14px; - text-align: center; - font-weight: 600; - margin: 5px 0 0; - padding-top: 120px; - height: 40px; - display: inline-block; - width: 150px; - text-rendering: optimizeLegibility; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); - box-shadow: 0 1px 3px rgba(0,0,0,0.2); -} - - -.about-wrap .wp-badge { - position: absolute; - top: 0; - right: 0; -} - -/* Tabs */ - -.about-wrap h2.nav-tab-wrapper { - padding-left: 6px; -} - -.about-wrap h2 .nav-tab { - padding: 4px 15px 6px; - margin: 0 3px -1px 0; - font-size: 18px; - vertical-align: top; - border-width: 1px; -} - -/* Changelog / Update screen */ - -.about-overview { - margin-top: 40px; - margin-bottom: 40px; - text-align: center; -} - -.about-overview p { - margin: 1em auto 50px; - max-width: 770px; - font-size: 18px; - line-height: 1.5; - text-align: center; -} - -.about-wrap .feature-section { - margin-top: 40px; - padding-bottom: 20px; -} - -.about-wrap .feature-section.two-col > div { - position: relative; - width: 47.6%; - margin-right: 4.799999999%; - float: left; -} - -.about-wrap .feature-section.three-col > div { - position: relative; - width: 29.95%; - margin-right: 4.999999999%; - float: left; -} - -.about-wrap .feature-section.col .last-feature { - margin-right: 0; -} - -.about-wrap .under-the-hood .feature-section { - margin-top: 0; -} - -.about-wrap .changelog .feature-section { - overflow: hidden; -} - -.about-wrap .feature-section.two-col div p { - margin-right: 3%; -} - -.about-wrap .feature-section div p img { - float: right; - margin-left: 10px; - max-width: 20%; -} - -/* responsive videos for 4.0 */ -.about-video { - position: relative; - width: 100%; - height: 0; -} - -.about-video-embed { - padding-bottom: 70.4%; /* 352 / 500 */ -} - -.about-video-focus { - padding-bottom: 56.2%; /* 281 / 500 */ -} - -.about-video .wp-video, -.about-video .mejs-container, -.about-video video { - position: absolute; - top: 0; - left: 0; - width: 100% !important; - height: 100% !important; -} - -.about-wrap .changelog li { - list-style-type: disc; - margin-left: 3em; -} - -/* Return to Dashboard Home link */ - -.about-wrap .return-to-dashboard { - margin: 30px 0 0 -5px; - font-size: 14px; - font-weight: bold; -} - -.about-wrap .return-to-dashboard a { - text-decoration: none; - padding: 0 5px; -} - -/* Credits */ - -.about-wrap h4.wp-people-group { - margin-top: 2.6em; - font-size: 16px; -} - -.about-wrap ul.wp-people-group { - overflow: hidden; - padding: 0 5px; - margin: 0 -15px 0 -5px; -} - -.about-wrap ul.compact { - margin-bottom: 0 -} - -.about-wrap li.wp-person { - float: left; - margin-right: 10px; -} - -.about-wrap li.wp-person img.gravatar { - float: left; - margin: 0 10px 10px 0; - padding: 2px; - width: 60px; - height: 60px; -} - -.about-wrap ul.compact li.wp-person img.gravatar { - width: 30px; - height: 30px; -} - -/* @todo: combine this */ -.about-wrap li.wp-person { - height: 70px; - width: 280px; - padding-bottom: 15px; -} - -.about-wrap ul.compact li.wp-person { - height: auto; - width: 180px; - padding-bottom: 0; - margin-bottom: 0; -} - -.about-wrap #wp-people-group-validators + p.wp-credits-list { - margin-top: 0; -} - -.about-wrap li.wp-person a.web { - display: block; - margin: 6px 0 2px; - font-size: 16px; - text-decoration: none; -} - -.about-wrap p.wp-credits-list a { - white-space: nowrap; -} - -/* Freedoms */ - -.freedoms-php .about-wrap ol { - margin: 40px 60px; -} - -.freedoms-php .about-wrap ol li { - list-style-type: decimal; - font-weight: bold; -} - -.freedoms-php .about-wrap ol p { - font-weight: normal; - margin: 0.6em 0; -} - -/* =Media Queries --------------------------------------------------------------- */ - -@media screen and ( max-width: 782px ) { - .about-wrap .feature-section.one-col > div, - .about-wrap .feature-section.two-col > div, - .about-wrap .feature-section.three-col > div { - width: 100%; - margin: 0 0 40px; - padding: 0 0 40px; - float: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - } - - .about-wrap .under-the-hood .feature-section > div, - .about-wrap .feature-section.col > div.last-feature { - margin: 0; - padding: 0; - border-bottom: none; - } - -} - -/* Responsive release video */ -@media screen and ( max-width: 710px ) { - .about-overview { - position: relative; - padding-bottom: 56.25%; /* 360 / 640 */ - width: 100%; - height: 0; - } - - .about-overview embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -@media only screen and (max-width: 500px) { - .about-wrap { - margin-right: 20px; - margin-left: 10px; - } - - .about-wrap h1, - .about-text { - margin-right: 0; - } - - .about-text { - margin-bottom: 0.25em; - } - - .about-wrap .wp-badge { - position: relative; - margin-bottom: 1.5em; - width: 100%; - } - - .about-wrap h2.nav-tab-wrapper { - padding-left: 0; - border-bottom: 0; - } - - .about-wrap h2 .nav-tab { - margin-top: 10px; - margin-right: 10px; - border-bottom: 1px solid #ccc; - } - - .about-wrap .feature-section.three-col div { - width: 100%; - float: none; - } - - .about-wrap .three-col.about-updates .col-1 { - padding: 0; - float: none; - } - - .about-wrap .three-col.about-updates .col-2 { - margin: 0 0 20px; - width: 100%; - float: none; - } -} diff --git a/src/wp-admin/css/about.scss b/src/wp-admin/css/about.scss new file mode 100644 index 0000000..50aede8 --- /dev/null +++ b/src/wp-admin/css/about.scss @@ -0,0 +1,422 @@ +/*------------------------------------------------------------------------------ + 22.0 - About Pages +------------------------------------------------------------------------------*/ + +.about-wrap { + position: relative; + margin: 25px 40px 0 20px; + max-width: 1050px; + /* readability */ + font-size: 15px; + div { + &.updated, &.error { + display: none !important; + } + } + hr { + border: 0; + height: 0; + margin: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); + } + img { + margin: 0; + max-width: 100%; + height: auto; + vertical-align: middle; + } + p { + line-height: 1.6em; + font-size: 14px; + } + h1 { + margin: 0.2em 200px 0 0; + color: #333; + line-height: 1.2em; + font-size: 2.8em; + font-weight: 400; + } + h4 { + color: #222; + } + .about-text, p.about-description, li.wp-person a.web { + font-weight: normal; + line-height: 1.6em; + font-size: 19px; + } +} + +/* Typography */ + +.about-description { + margin-top: 1.4em; +} + +.about-text { + margin: 1em 200px 1em 0; + min-height: 60px; + color: #777; + font-size: 24px; +} + +.about-wrap { + .changelog h2.about-headline-callout { + margin: 1.1em 0 0.2em; + font-size: 2.4em; + font-weight: 300; + line-height: 1.3; + text-align: center; + } + h3 { + margin: 1em 0 .6em; + font-size: 1.5em; + line-height: 1.5em; + &.higher { + margin-top: .5em; + } + } +} + +.customize h3 { + margin-top: 1.75em; + text-align: center; +} + +.about-wrap { + .feature-section { + h4 { + margin: 1.4em 0 0.6em 0; + font-size: 1.2em; + } + p { + margin-top: 0.6em; + } + } + code, ol li p { + font-size: 14px; + } + .button.button-large { + padding: 8px 20px 10px !important; + height: 46px !important; + font-size: 14px; + line-height: 28px !important; + } + .about-overview-img { + margin: 0; + } + .point-releases { + margin-top: 5px; + border-bottom: 1px solid #dfdfdf; + } + .changelog.point-releases h3 { + padding-top: 35px; + &:first-child { + padding-top: 7px; + } + } +} + +/* 3.8 Images */ + +/* Point Releases */ + +/* WordPress Version Badge */ + +.wp-badge { + background: #0074a2 url(../images/w-logo-white.png?ver=20131202) no-repeat; + background: #0074a2, url(../images/wordpress-logo-white.svg?ver=20131110) no-repeat; + /* multiple backgrounds are ignored by browsers that don't support SVGs */ + background-position: center 24px; + -webkit-background-size: 85px 85px; + background-size: 85px 85px; + color: #78c8e6; + font-size: 14px; + text-align: center; + font-weight: 600; + margin: 5px 0 0; + padding-top: 120px; + height: 40px; + display: inline-block; + width: 150px; + text-rendering: optimizeLegibility; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.about-wrap { + .wp-badge { + position: absolute; + top: 0; + right: 0; + } + h2 { + &.nav-tab-wrapper { + padding-left: 6px; + } + .nav-tab { + padding: 4px 15px 6px; + margin: 0 3px -1px 0; + font-size: 18px; + vertical-align: top; + border-width: 1px; + } + } +} + +/* Tabs */ + +/* Changelog / Update screen */ + +.about-overview { + margin-top: 40px; + margin-bottom: 40px; + text-align: center; + p { + margin: 1em auto 50px; + max-width: 770px; + font-size: 18px; + line-height: 1.5; + text-align: center; + } +} + +.about-wrap { + .feature-section { + margin-top: 40px; + padding-bottom: 20px; + &.two-col > div { + position: relative; + width: 47.6%; + margin-right: 4.799999999%; + float: left; + } + &.three-col > div { + position: relative; + width: 29.95%; + margin-right: 4.999999999%; + float: left; + } + &.col .last-feature { + margin-right: 0; + } + } + .under-the-hood .feature-section { + margin-top: 0; + } + .changelog .feature-section { + overflow: hidden; + } + .feature-section { + &.two-col div p { + margin-right: 3%; + } + div p img { + float: right; + margin-left: 10px; + max-width: 20%; + } + } +} + +/* responsive videos for 4.0 */ + +.about-video { + position: relative; + width: 100%; + height: 0; +} + +.about-video-embed { + padding-bottom: 70.4%; + /* 352 / 500 */ +} + +.about-video-focus { + padding-bottom: 56.2%; + /* 281 / 500 */ +} + +.about-video { + .wp-video, .mejs-container, video { + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; + } +} + +.about-wrap { + .changelog li { + list-style-type: disc; + margin-left: 3em; + } + .return-to-dashboard { + margin: 30px 0 0 -5px; + font-size: 14px; + font-weight: bold; + a { + text-decoration: none; + padding: 0 5px; + } + } + h4.wp-people-group { + margin-top: 2.6em; + font-size: 16px; + } + ul { + &.wp-people-group { + overflow: hidden; + padding: 0 5px; + margin: 0 -15px 0 -5px; + } + &.compact { + margin-bottom: 0; + } + } + li.wp-person { + float: left; + margin-right: 10px; + img.gravatar { + float: left; + margin: 0 10px 10px 0; + padding: 2px; + width: 60px; + height: 60px; + } + } + ul.compact li.wp-person img.gravatar { + width: 30px; + height: 30px; + } + li.wp-person { + height: 70px; + width: 280px; + padding-bottom: 15px; + } + ul.compact li.wp-person { + height: auto; + width: 180px; + padding-bottom: 0; + margin-bottom: 0; + } + #wp-people-group-validators + p.wp-credits-list { + margin-top: 0; + } + li.wp-person a.web { + display: block; + margin: 6px 0 2px; + font-size: 16px; + text-decoration: none; + } + p.wp-credits-list a { + white-space: nowrap; + } +} + +/* Return to Dashboard Home link */ + +/* Credits */ + +/* @todo: combine this */ + +/* Freedoms */ + +.freedoms-php .about-wrap ol { + margin: 40px 60px; + li { + list-style-type: decimal; + font-weight: bold; + } + p { + font-weight: normal; + margin: 0.6em 0; + } +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + .about-wrap { + .feature-section { + &.one-col > div, &.two-col > div, &.three-col > div { + width: 100%; + margin: 0 0 40px; + padding: 0 0 40px; + float: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + } + .under-the-hood .feature-section > div, .feature-section.col > div.last-feature { + margin: 0; + padding: 0; + border-bottom: none; + } + } +} + +/* Responsive release video */ +@media screen and (max-width: 710px) { + .about-overview { + position: relative; + padding-bottom: 56.25%; + /* 360 / 640 */ + width: 100%; + height: 0; + embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } +} + +@media only screen and (max-width: 500px) { + .about-wrap { + margin-right: 20px; + margin-left: 10px; + h1 { + margin-right: 0; + } + } + .about-text { + margin-right: 0; + margin-bottom: 0.25em; + } + .about-wrap { + .wp-badge { + position: relative; + margin-bottom: 1.5em; + width: 100%; + } + h2 { + &.nav-tab-wrapper { + padding-left: 0; + border-bottom: 0; + } + .nav-tab { + margin-top: 10px; + margin-right: 10px; + border-bottom: 1px solid #ccc; + } + } + .feature-section.three-col div { + width: 100%; + float: none; + } + .three-col.about-updates { + .col-1 { + padding: 0; + float: none; + } + .col-2 { + margin: 0 0 20px; + width: 100%; + float: none; + } + } + } +} diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css deleted file mode 100644 index 7f317bd..0000000 --- a/src/wp-admin/css/admin-menu.css +++ /dev/null @@ -1,917 +0,0 @@ -#adminmenuback, -#adminmenuwrap, -#adminmenu, -#adminmenu .wp-submenu { - width: 160px; - background-color: #222; -} - -#adminmenuback { - position: absolute; - top: 0; - bottom: 0; - z-index: -1; -} - -#adminmenu { - clear: left; - margin: 12px 0 0; - padding: 0; - list-style: none; -} - -.folded #adminmenuback, -.folded #adminmenuwrap, -.folded #adminmenu, -.folded #adminmenu li.menu-top { - width: 36px; -} - -.icon16 { - height: 18px; - width: 18px; - padding: 6px 6px; - margin: -6px 0 0 -8px; - float: left; -} - -/* New Menu icons */ - -.icon16:before { - color: #999; - font: normal 20px/1 'dashicons'; - speak: none; - padding: 6px 0; - height: 34px; - width: 20px; - display: inline-block; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; -} - -.icon16.icon-dashboard:before { - content: '\f226'; -} - -.icon16.icon-post:before { - content: '\f109'; -} - -.icon16.icon-media:before { - content: '\f104'; -} - -.icon16.icon-links:before { - content: '\f103'; -} - -.icon16.icon-page:before { - content: '\f105'; -} - -.icon16.icon-comments:before { - content: '\f101'; - margin-top: 1px; -} - -.icon16.icon-appearance:before { - content: '\f100'; -} - -.icon16.icon-plugins:before { - content: '\f106'; -} - -.icon16.icon-users:before { - content: '\f110'; -} - -.icon16.icon-tools:before { - content: '\f107'; -} - -.icon16.icon-settings:before { - content: '\f108'; -} - -.icon16.icon-site:before { - content: '\f112' -} - -.icon16.icon-generic:before { - content: '\f111'; -} - -/* hide background-image for icons above */ -.icon16.icon-dashboard, -.menu-icon-dashboard div.wp-menu-image, -.icon16.icon-post, -.menu-icon-post div.wp-menu-image, -.icon16.icon-media, -.menu-icon-media div.wp-menu-image, -.icon16.icon-links, -.menu-icon-links div.wp-menu-image, -.icon16.icon-page, -.menu-icon-page div.wp-menu-image, -.icon16.icon-comments, -.menu-icon-comments div.wp-menu-image, -.icon16.icon-appearance, -.menu-icon-appearance div.wp-menu-image, -.icon16.icon-plugins, -.menu-icon-plugins div.wp-menu-image, -.icon16.icon-users, -.menu-icon-users div.wp-menu-image, -.icon16.icon-tools, -.menu-icon-tools div.wp-menu-image, -.icon16.icon-settings, -.menu-icon-settings div.wp-menu-image, -.icon16.icon-site, -.menu-icon-site div.wp-menu-image, -.icon16.icon-generic, -.menu-icon-generic div.wp-menu-image { - background-image: none !important; -} - -/*------------------------------------------------------------------------------ - 7.0 - Main Navigation (Left Menu) -------------------------------------------------------------------------------*/ - -#adminmenuwrap { - position: relative; - float: left; -} - -/* side admin menu */ -#adminmenu * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#adminmenu li { - margin: 0; - padding: 0; - cursor: pointer; -} - -#adminmenu a { - display: block; - line-height: 18px; - padding: 2px 5px; - color: #eee; -} - -#adminmenu .wp-submenu a { - color: #bbb; -} - -#adminmenu .wp-submenu a:hover, -#adminmenu .wp-submenu a:focus { - background: none; -} - -#adminmenu a:hover, -#adminmenu li.menu-top > a:focus, -#adminmenu .wp-submenu a:hover, -#adminmenu .wp-submenu a:focus { - color: #2ea2cc; -} - -#adminmenu li.menu-top { - border: none; - min-height: 34px; - position: relative; -} - -#adminmenu .wp-submenu { - list-style: none; - position: absolute; - top: -1000em; - left: 160px; - overflow: visible; - word-wrap: break-word; -} - -#adminmenu .wp-submenu, -.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - padding: 7px 0 8px; - z-index: 9999; - background-color: #333; - -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2); - box-shadow: 0 3px 5px rgba(0,0,0,0.2); -} - -.js #adminmenu .sub-open, -.js #adminmenu .opensub .wp-submenu, -#adminmenu a.menu-top:focus + .wp-submenu, -.no-js li.wp-has-submenu:hover .wp-submenu { - top: -1px; -} - -#adminmenu .wp-has-current-submenu .wp-submenu, -.no-js li.wp-has-current-submenu:hover .wp-submenu, -#adminmenu a.wp-has-current-submenu:focus + .wp-submenu, -#adminmenu .wp-has-current-submenu .wp-submenu.sub-open, -#adminmenu .wp-has-current-submenu.opensub .wp-submenu { - position: relative; - z-index: 3; - top: auto; - left: auto; - right: auto; - bottom: auto; - border: 0 none; - margin-top: 0; - -webkit-box-shadow: none; - box-shadow: none; - background-color: #333; -} - -/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ -#adminmenu li.menu-top:hover, -#adminmenu li.opensub > a.menu-top, -#adminmenu li > a.menu-top:focus { - position: relative; - background-color: #111; -} - -.folded #adminmenu li.menu-top:hover, -.folded #adminmenu li.opensub > a.menu-top, -.folded #adminmenu li > a.menu-top:focus { - z-index: 10000; -} - -#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, -#adminmenu li.current a.menu-top, -.folded #adminmenu li.wp-has-current-submenu, -.folded #adminmenu li.current.menu-top, -#adminmenu .wp-menu-arrow, -#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, -#adminmenu .wp-menu-arrow div { - background: #0074a2; - color: #fff; -} - -.folded #adminmenu .wp-submenu.sub-open, -.folded #adminmenu .opensub .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, -.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, -.folded #adminmenu a.menu-top:focus + .wp-submenu, -.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, -.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { - top: 0; - left: 36px; -} - -.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - position: absolute; - top: -1000em; -} - -#adminmenu .wp-not-current-submenu .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - min-width: 160px; - width: auto; -} - -#adminmenu .wp-submenu a { - font-size: 13px; - line-height: 1.2; - margin: 0; - padding: 6px 0; -} - -#adminmenu .wp-submenu li.current, -#adminmenu .wp-submenu li.current a, -#adminmenu .opensub .wp-submenu li.current a, -#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, -#adminmenu .wp-submenu li.current a:hover, -#adminmenu .wp-submenu li.current a:focus { - color: #fff; -} - -#adminmenu .wp-not-current-submenu li > a, -.folded #adminmenu .wp-has-current-submenu li > a { - padding-right: 16px; - padding-left: 14px; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; -} - -#adminmenu .wp-has-current-submenu ul > li > a, -.folded #adminmenu li.menu-top .wp-submenu > li > a { - padding: 6px 12px; -} - -#adminmenu a.menu-top, -#adminmenu .wp-submenu-head { - font-size: 14px; - font-weight: 400; - line-height: 18px; - padding: 0; -} - -#adminmenu .wp-submenu-head, -.folded #adminmenu .wp-menu-name { - display: none; -} - -.folded #adminmenu .wp-submenu-head { - display: block; -} - -#adminmenu .wp-submenu li { - padding: 0; - margin: 0; - overflow: hidden; -} - -#adminmenu .wp-menu-image img { - padding: 9px 0 0 0; - opacity: 0.6; - filter: alpha(opacity=60); -} - -#adminmenu div.wp-menu-name { - padding: 8px 0; -} - -#adminmenu div.wp-menu-image { - float: left; - width: 36px; - height: 34px; - margin: 0; - text-align: center; -} - -#adminmenu div.wp-menu-image.svg { - background-repeat: no-repeat; - background-position: center; - -webkit-background-size: 20px auto; - background-size: 20px auto; -} - -div.wp-menu-image:before { - color: #999; - padding: 7px 0; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; -} - -#adminmenu div.wp-menu-image:before { - color: #999; -} - -#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, -#adminmenu .wp-has-current-submenu div.wp-menu-image:before, -#adminmenu .current div.wp-menu-image:before, -#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before, -#adminmenu a.current:hover div.wp-menu-image:before { - color: #fff; -} - -#adminmenu li:hover div.wp-menu-image:before { - color: #2ea2cc; -} - -.folded #adminmenu div.wp-menu-image { - width: 35px; - height: 30px; - position: absolute; - z-index: 25; -} - -.folded #adminmenu a.menu-top { - height: 34px; -} - -/* No @font-face support */ -.no-font-face #adminmenu .wp-menu-image { - display: none; -} - -.no-font-face #adminmenu div.wp-menu-name { - padding: 8px 12px; -} - -.no-font-face.auto-fold #adminmenu .wp-menu-name { - margin-left: 0; -} -/* End no @font-face support */ - -/* Sticky admin menu */ -.sticky-menu #adminmenuwrap { - position: fixed; - z-index: 9999; /* Match the z-index of .wp-submenu to ensure flyout menus don't appear underneath main column elements */ -} - -/* A new arrow */ - -.wp-menu-arrow { - display: none !important; -} - -ul#adminmenu a.wp-has-current-submenu { - position: relative; -} - -ul#adminmenu a.wp-has-current-submenu:after, -ul#adminmenu > li.current > a.current:after { - right: 0; - border: solid 8px transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-right-color: #f1f1f1; - top: 50%; - margin-top: -8px; -} - -.folded ul#adminmenu li:hover a.wp-has-current-submenu:after { - display: none; -} - -.folded ul#adminmenu a.wp-has-current-submenu:after, -.folded ul#adminmenu > li a.current:after { - border-width: 4px; - margin-top: -4px; -} - -/* flyout menu arrow */ -#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { - right: 0; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-width: 8px; - top: 10px; - z-index: 10000; -} - -.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { - border-width: 4px; - margin-top: -4px; - top: 18px; -} - -#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { - border-right-color: #333; -} - -#adminmenu li.menu-top:hover .wp-menu-image img, -#adminmenu li.wp-has-current-submenu .wp-menu-image img { - opacity: 1; - filter: alpha(opacity=100); -} - -#adminmenu li.wp-menu-separator { - height: 5px; - padding: 0; - margin: 0 0 6px 0; - cursor: inherit; -} - -/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */ -#adminmenu div.separator { - height: 2px; - padding: 0; -} - -#adminmenu .wp-submenu .wp-submenu-head { - color: #fff; - font-weight: 400; - font-size: 14px; - padding: 8px 4px 8px 11px; - margin: -7px 0px 4px; -} - -#adminmenu li.current, -.folded #adminmenu li.wp-menu-open { - border: 0 none; -} - -#adminmenu .awaiting-mod, -#adminmenu .update-plugins, -#sidemenu li a span.update-plugins { - display: inline-block; - background-color: #d54e21; - color: #fff; - font-size: 9px; - line-height: 17px; - font-weight: 600; - margin: 1px 0 0 2px; - vertical-align: top; - -webkit-border-radius: 10px; - border-radius: 10px; - z-index: 26; -} - -#adminmenu li .awaiting-mod span, -#adminmenu li span.update-plugins span, -#sidemenu li a span.update-plugins span { - display: block; - padding: 0 6px; -} - -#adminmenu li.current a .awaiting-mod, -#adminmenu li a.wp-has-current-submenu .update-plugins { - background-color: #2ea2cc; - color: #fff; -} - -#adminmenu li span.count-0, -#sidemenu li a .count-0 { - display: none; -} - -#collapse-menu { - font-size: 13px; - line-height: 34px; - margin-top: 10px; - color: #aaa; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; -} - -#collapse-menu:hover, -#collapse-menu:hover #collapse-button div:after { - color: #2ea2cc; -} - -.folded #collapse-menu span { - display: none; -} - -#collapse-button, -#collapse-button div { - width: 15px; - height: 15px; -} - -#collapse-button { - float: left; - height: 15px; - margin: 10px 8px 10px 11px; - width: 15px; - -webkit-border-radius: 10px; - border-radius: 10px; -} - -#wpwrap #collapse-button div { - padding: 0; -} - -#collapse-button div:after { - content: '\f148'; - display: block; - line-height: 15px; - left: -3px; - top: -3px; - color: #aaa; - font: normal 20px/1 'dashicons' !important; - speak: none; - margin: 0 auto; - padding: 0 !important; - position: relative; - text-align: center; - width: 20px; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.folded #collapse-button div:after, -.rtl #collapse-button div:after { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.rtl.folded #collapse-button div:after { - -webkit-transform: none; - -ms-transform: none; - transform: none; -} - -/** - * Toolbar menu toggle - */ -li#wp-admin-bar-menu-toggle { - display: none; -} - - -/* Auto-folding of the admin menu */ -@media only screen and (max-width: 960px) { - .auto-fold #wpcontent, - .auto-fold #wpfooter { - margin-left: 36px; - } - - .auto-fold #adminmenuback, - .auto-fold #adminmenuwrap, - .auto-fold #adminmenu, - .auto-fold #adminmenu li.menu-top { - width: 36px; - } - - .auto-fold #adminmenu .wp-submenu.sub-open, - .auto-fold #adminmenu .opensub .wp-submenu, - .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, - .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, - .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, - .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { - top: 0px; - left: 36px; - } - - .auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, - .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { - position: absolute; - top: -1000em; - margin-right: -1px; - padding: 7px 0 8px; - z-index: 9999; - } - - .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu { - min-width: 150px; - width: auto; - } - - .auto-fold #adminmenu .wp-has-current-submenu li > a { - padding-right: 16px; - padding-left: 14px; - } - - - .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { - padding-left: 12px; - } - - .auto-fold #adminmenu .wp-menu-name { - display: none; - } - - .auto-fold #adminmenu .wp-submenu-head { - display: block; - } - - .auto-fold #adminmenu div.wp-menu-image { - height: 30px; - width: 34px; - position: absolute; - z-index: 25; - } - - .auto-fold #adminmenu a.menu-top { - height: 34px; - } - - .auto-fold #adminmenu li.wp-menu-open { - border: 0 none; - } - - .auto-fold #adminmenu .wp-has-current-submenu.menu-top-last { - margin-bottom: 0; - } - - .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { - display: none; - } - - .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { - border-width: 4px; - margin-top: -4px; - top: 16px; - } - - .auto-fold ul#adminmenu a.wp-has-current-submenu:after, - .auto-fold ul#adminmenu > li a.current:after { - border-width: 4px; - margin-top: -4px; - } - - .auto-fold #adminmenu li.menu-top:hover, - .auto-fold #adminmenu li.opensub > a.menu-top, - .auto-fold #adminmenu li > a.menu-top:focus { - z-index: 10000; - } - - .auto-fold #collapse-menu span { - display: none; - } - - .auto-fold #collapse-button div { - background: none; - } - - .auto-fold #collapse-button div:after { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - } - - .rtl.auto-fold #collapse-button div:after { - -webkit-transform: none; - -ms-transform: none; - transform: none; - } - -} - -@media screen and ( max-width: 782px ) { - .auto-fold #wpcontent { - position: relative; - margin-left: 0; - padding-left: 10px; - } - - .sticky-menu #adminmenuwrap { - position: relative; - z-index: auto; - top: 0; - } - - /* Sidebar Adjustments */ - .auto-fold #adminmenu, - .auto-fold #adminmenuback, - .auto-fold #adminmenuwrap { - position: absolute; - width: 190px; - z-index: 100; - } - - .auto-fold #adminmenuback, - .auto-fold #adminmenuwrap { - display: none; - } - - .auto-fold .wp-responsive-open #adminmenuback, - .auto-fold .wp-responsive-open #adminmenuwrap { - display: block; - } - - .auto-fold #adminmenu li.menu-top { - width: 100%; - } - - /* Resize the admin menu items to a comfortable touch size */ - .auto-fold #adminmenu li a { - font-size: 16px; - padding: 5px; - } - - .auto-fold #adminmenu li.menu-top .wp-submenu > li > a { - padding: 10px 10px 10px 20px; - } - - /* Restore the menu names */ - .auto-fold #adminmenu .wp-menu-name { - display: block; - margin-left: 35px; - } - - /* Switch the arrow side */ - .auto-fold ul#adminmenu a.wp-has-current-submenu:after, - .auto-fold ul#adminmenu > li.current > a.current:after { - border-width: 8px; - margin-top: -8px; - } - - .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { - display: none; - } - - /* Make the submenus appear correctly when tapped. */ - #adminmenu .wp-submenu { - position: relative; - display: none; - } - - .auto-fold #adminmenu .selected .wp-submenu, - .auto-fold #adminmenu .wp-menu-open .wp-submenu { - position: relative; - display: block; - top: 0; - left: -1px; - -webkit-box-shadow: none; - box-shadow: none; - } - - .auto-fold #adminmenu .selected .wp-submenu:after, - .auto-fold #adminmenu .wp-menu-open .wp-submenu:after { - display: none; - } - - .auto-fold #adminmenu .opensub .wp-submenu { - display: none; - } - - .auto-fold #adminmenu .selected .wp-submenu { - display: block; - } - - .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { - display: block; - } - - .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, - .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { - position: relative; - left: -1px; - right: 0; - top: 0; - } - - /* Remove submenu headers and adjust sub meu*/ - #adminmenu .wp-submenu .wp-submenu-head { - display: none; - } - - /* Toolbar menu toggle */ - #wp-responsive-toggle { - position: fixed; - top: 5px; - left: 4px; - padding-right: 10px; - z-index: 99999; - border: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - #wpadminbar #wp-admin-bar-menu-toggle a { - display: block; - padding: 0; - overflow: hidden; - outline: none; - text-decoration: none; - border: 1px solid transparent; - background: none; - height: 44px; - margin-left: -1px; - } - - .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { - background: #333; - } - - li#wp-admin-bar-menu-toggle { - display: block; - } - - #wpadminbar #wp-admin-bar-menu-toggle a:hover { - border: 1px solid transparent; - } - - #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { - content: '\f228'; - display: inline-block; - float: left; - font: normal 40px/45px 'Dashicons'; - vertical-align: middle; - outline: none; - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - height: 44px; - width: 50px; - padding: 0; - border: none; - text-align: center; - text-decoration: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } -} - -/* Smartphone */ -@media screen and (max-width: 600px) { - #adminmenuwrap, - #adminmenuback { - display: none; - } - - .wp-responsive-open #adminmenuwrap, - .wp-responsive-open #adminmenuback { - display: block; - } - - .auto-fold #adminmenu { - top: 46px; - } -} - diff --git a/src/wp-admin/css/admin-menu.scss b/src/wp-admin/css/admin-menu.scss new file mode 100644 index 0000000..297a10a --- /dev/null +++ b/src/wp-admin/css/admin-menu.scss @@ -0,0 +1,995 @@ +#adminmenuback, #adminmenuwrap { + width: 160px; + background-color: #222; +} + +#adminmenu { + width: 160px; + background-color: #222; + .wp-submenu { + width: 160px; + background-color: #222; + } +} + +#adminmenuback { + position: absolute; + top: 0; + bottom: 0; + z-index: -1; +} + +#adminmenu { + clear: left; + margin: 12px 0 0; + padding: 0; + list-style: none; +} + +.folded { + #adminmenuback, #adminmenuwrap { + width: 36px; + } + #adminmenu { + width: 36px; + li.menu-top { + width: 36px; + } + } +} + +.icon16 { + height: 18px; + width: 18px; + padding: 6px 6px; + margin: -6px 0 0 -8px; + float: left; + &:before { + color: #999; + font: normal 20px/1 'dashicons'; + speak: none; + padding: 6px 0; + height: 34px; + width: 20px; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; + } + &.icon-dashboard:before { + content: '\f226'; + } + &.icon-post:before { + content: '\f109'; + } + &.icon-media:before { + content: '\f104'; + } + &.icon-links:before { + content: '\f103'; + } + &.icon-page:before { + content: '\f105'; + } + &.icon-comments:before { + content: '\f101'; + margin-top: 1px; + } + &.icon-appearance:before { + content: '\f100'; + } + &.icon-plugins:before { + content: '\f106'; + } + &.icon-users:before { + content: '\f110'; + } + &.icon-tools:before { + content: '\f107'; + } + &.icon-settings:before { + content: '\f108'; + } + &.icon-site:before { + content: ""; + } + &.icon-generic:before { + content: '\f111'; + } + &.icon-dashboard { + background-image: none !important; + } +} + +/* New Menu icons */ + +/* hide background-image for icons above */ + +.menu-icon-dashboard div.wp-menu-image, .icon16.icon-post, .menu-icon-post div.wp-menu-image, .icon16.icon-media, .menu-icon-media div.wp-menu-image, .icon16.icon-links, .menu-icon-links div.wp-menu-image, .icon16.icon-page, .menu-icon-page div.wp-menu-image, .icon16.icon-comments, .menu-icon-comments div.wp-menu-image, .icon16.icon-appearance, .menu-icon-appearance div.wp-menu-image, .icon16.icon-plugins, .menu-icon-plugins div.wp-menu-image, .icon16.icon-users, .menu-icon-users div.wp-menu-image, .icon16.icon-tools, .menu-icon-tools div.wp-menu-image, .icon16.icon-settings, .menu-icon-settings div.wp-menu-image, .icon16.icon-site, .menu-icon-site div.wp-menu-image, .icon16.icon-generic, .menu-icon-generic div.wp-menu-image { + background-image: none !important; +} + +/*------------------------------------------------------------------------------ + 7.0 - Main Navigation (Left Menu) +------------------------------------------------------------------------------*/ + +#adminmenuwrap { + position: relative; + float: left; +} + +/* side admin menu */ + +#adminmenu { + * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + li { + margin: 0; + padding: 0; + cursor: pointer; + } + a { + display: block; + line-height: 18px; + padding: 2px 5px; + color: #eee; + } + .wp-submenu a { + color: #bbb; + &:hover, &:focus { + background: none; + } + } + a:hover, li.menu-top > a:focus { + color: #2ea2cc; + } + .wp-submenu a { + &:hover, &:focus { + color: #2ea2cc; + } + } + li.menu-top { + border: none; + min-height: 34px; + position: relative; + } + .wp-submenu { + list-style: none; + position: absolute; + top: -1000em; + left: 160px; + overflow: visible; + word-wrap: break-word; + padding: 7px 0 8px; + z-index: 9999; + background-color: #333; + -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + } +} + +.folded #adminmenu { + a.wp-has-current-submenu:focus + .wp-submenu, .wp-has-current-submenu .wp-submenu { + padding: 7px 0 8px; + z-index: 9999; + background-color: #333; + -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + } +} + +.js #adminmenu { + .sub-open, .opensub .wp-submenu { + top: -1px; + } +} + +#adminmenu a.menu-top:focus + .wp-submenu, .no-js li.wp-has-submenu:hover .wp-submenu { + top: -1px; +} + +#adminmenu .wp-has-current-submenu .wp-submenu, .no-js li.wp-has-current-submenu:hover .wp-submenu { + position: relative; + z-index: 3; + top: auto; + left: auto; + right: auto; + bottom: auto; + border: 0 none; + margin-top: 0; + -webkit-box-shadow: none; + box-shadow: none; + background-color: #333; +} + +#adminmenu { + a.wp-has-current-submenu:focus + .wp-submenu { + position: relative; + z-index: 3; + top: auto; + left: auto; + right: auto; + bottom: auto; + border: 0 none; + margin-top: 0; + -webkit-box-shadow: none; + box-shadow: none; + background-color: #333; + } + .wp-has-current-submenu { + .wp-submenu.sub-open, &.opensub .wp-submenu { + position: relative; + z-index: 3; + top: auto; + left: auto; + right: auto; + bottom: auto; + border: 0 none; + margin-top: 0; + -webkit-box-shadow: none; + box-shadow: none; + background-color: #333; + } + } + li { + &.menu-top:hover, &.opensub > a.menu-top, > a.menu-top:focus { + position: relative; + background-color: #111; + } + } +} + +/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ + +.folded #adminmenu li { + &.menu-top:hover, &.opensub > a.menu-top, > a.menu-top:focus { + z-index: 10000; + } +} + +#adminmenu li { + &.wp-has-current-submenu a.wp-has-current-submenu, &.current a.menu-top { + background: #0074a2; + color: #fff; + } +} + +.folded #adminmenu li { + &.wp-has-current-submenu, &.current.menu-top { + background: #0074a2; + color: #fff; + } +} + +#adminmenu { + .wp-menu-arrow, .wp-has-current-submenu .wp-submenu .wp-submenu-head, .wp-menu-arrow div { + background: #0074a2; + color: #fff; + } +} + +.folded #adminmenu { + .wp-submenu.sub-open, .opensub .wp-submenu { + top: 0; + left: 36px; + } + .wp-has-current-submenu { + .wp-submenu.sub-open, &.opensub .wp-submenu { + top: 0; + left: 36px; + } + } + a.menu-top:focus + .wp-submenu, .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + top: 0; + left: 36px; + } +} + +.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { + top: 0; + left: 36px; +} + +.folded #adminmenu { + a.wp-has-current-submenu:focus + .wp-submenu, .wp-has-current-submenu .wp-submenu { + position: absolute; + top: -1000em; + } +} + +#adminmenu .wp-not-current-submenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu { + min-width: 160px; + width: auto; +} + +#adminmenu { + .wp-submenu { + a { + font-size: 13px; + line-height: 1.2; + margin: 0; + padding: 6px 0; + } + li.current { + color: #fff; + a { + color: #fff; + } + } + } + .opensub .wp-submenu li.current a, a.wp-has-current-submenu:focus + .wp-submenu li.current a { + color: #fff; + } + .wp-submenu li.current a { + &:hover, &:focus { + color: #fff; + } + } + .wp-not-current-submenu li > a { + padding-right: 16px; + padding-left: 14px; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; + } +} + +.folded #adminmenu .wp-has-current-submenu li > a { + padding-right: 16px; + padding-left: 14px; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; +} + +#adminmenu .wp-has-current-submenu ul > li > a, .folded #adminmenu li.menu-top .wp-submenu > li > a { + padding: 6px 12px; +} + +#adminmenu { + a.menu-top { + font-size: 14px; + font-weight: 400; + line-height: 18px; + padding: 0; + } + .wp-submenu-head { + font-size: 14px; + font-weight: 400; + line-height: 18px; + padding: 0; + display: none; + } +} + +.folded #adminmenu { + .wp-menu-name { + display: none; + } + .wp-submenu-head { + display: block; + } +} + +#adminmenu { + .wp-submenu li { + padding: 0; + margin: 0; + overflow: hidden; + } + .wp-menu-image img { + padding: 9px 0 0 0; + opacity: 0.6; + filter: alpha(opacity = 60); + } + div { + &.wp-menu-name { + padding: 8px 0; + } + &.wp-menu-image { + float: left; + width: 36px; + height: 34px; + margin: 0; + text-align: center; + &.svg { + background-repeat: no-repeat; + background-position: center; + -webkit-background-size: 20px auto; + background-size: 20px auto; + } + } + } +} + +div.wp-menu-image:before { + color: #999; + padding: 7px 0; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; +} + +#adminmenu { + div.wp-menu-image:before { + color: #999; + } + li.wp-has-current-submenu:hover div.wp-menu-image:before, .wp-has-current-submenu div.wp-menu-image:before, .current div.wp-menu-image:before { + color: #fff; + } + a { + &.wp-has-current-submenu:hover div.wp-menu-image:before, &.current:hover div.wp-menu-image:before { + color: #fff; + } + } + li:hover div.wp-menu-image:before { + color: #2ea2cc; + } +} + +.folded #adminmenu { + div.wp-menu-image { + width: 35px; + height: 30px; + position: absolute; + z-index: 25; + } + a.menu-top { + height: 34px; + } +} + +/* No @font-face support */ + +.no-font-face { + #adminmenu { + .wp-menu-image { + display: none; + } + div.wp-menu-name { + padding: 8px 12px; + } + } + &.auto-fold #adminmenu .wp-menu-name { + margin-left: 0; + } +} + +/* End no @font-face support */ + +/* Sticky admin menu */ + +.sticky-menu #adminmenuwrap { + position: fixed; + z-index: 9999; + /* Match the z-index of .wp-submenu to ensure flyout menus don't appear underneath main column elements */ +} + +/* A new arrow */ + +.wp-menu-arrow { + display: none !important; +} + +ul#adminmenu { + a.wp-has-current-submenu { + position: relative; + &:after { + right: 0; + border: solid 8px transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: #f1f1f1; + top: 50%; + margin-top: -8px; + } + } + > li.current > a.current:after { + right: 0; + border: solid 8px transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: #f1f1f1; + top: 50%; + margin-top: -8px; + } +} + +.folded ul#adminmenu { + li:hover a.wp-has-current-submenu:after { + display: none; + } + a.wp-has-current-submenu:after, > li a.current:after { + border-width: 4px; + margin-top: -4px; + } +} + +/* flyout menu arrow */ + +#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + right: 0; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: 8px; + top: 10px; + z-index: 10000; +} + +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + border-width: 4px; + margin-top: -4px; + top: 18px; +} + +#adminmenu { + li { + &.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { + border-right-color: #333; + } + &.menu-top:hover .wp-menu-image img, &.wp-has-current-submenu .wp-menu-image img { + opacity: 1; + filter: alpha(opacity = 100); + } + &.wp-menu-separator { + height: 5px; + padding: 0; + margin: 0 0 6px 0; + cursor: inherit; + } + } + div.separator { + height: 2px; + padding: 0; + } + .wp-submenu .wp-submenu-head { + color: #fff; + font-weight: 400; + font-size: 14px; + padding: 8px 4px 8px 11px; + margin: -7px 0px 4px; + } + li.current { + border: 0 none; + } +} + +/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */ + +.folded #adminmenu li.wp-menu-open { + border: 0 none; +} + +#adminmenu { + .awaiting-mod, .update-plugins { + display: inline-block; + background-color: #d54e21; + color: #fff; + font-size: 9px; + line-height: 17px; + font-weight: 600; + margin: 1px 0 0 2px; + vertical-align: top; + -webkit-border-radius: 10px; + border-radius: 10px; + z-index: 26; + } +} + +#sidemenu li a span.update-plugins { + display: inline-block; + background-color: #d54e21; + color: #fff; + font-size: 9px; + line-height: 17px; + font-weight: 600; + margin: 1px 0 0 2px; + vertical-align: top; + -webkit-border-radius: 10px; + border-radius: 10px; + z-index: 26; +} + +#adminmenu li { + .awaiting-mod span, span.update-plugins span { + display: block; + padding: 0 6px; + } +} + +#sidemenu li a span.update-plugins span { + display: block; + padding: 0 6px; +} + +#adminmenu li { + &.current a .awaiting-mod, a.wp-has-current-submenu .update-plugins { + background-color: #2ea2cc; + color: #fff; + } + span.count-0 { + display: none; + } +} + +#sidemenu li a .count-0 { + display: none; +} + +#collapse-menu { + font-size: 13px; + line-height: 34px; + margin-top: 10px; + color: #aaa; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; + &:hover { + color: #2ea2cc; + #collapse-button div:after { + color: #2ea2cc; + } + } +} + +.folded #collapse-menu span { + display: none; +} + +#collapse-button { + width: 15px; + height: 15px; + div { + width: 15px; + height: 15px; + } + float: left; + height: 15px; + margin: 10px 8px 10px 11px; + width: 15px; + -webkit-border-radius: 10px; + border-radius: 10px; +} + +#wpwrap #collapse-button div { + padding: 0; +} + +#collapse-button div:after { + content: '\f148'; + display: block; + line-height: 15px; + left: -3px; + top: -3px; + color: #aaa; + font: normal 20px/1 'dashicons' !important; + speak: none; + margin: 0 auto; + padding: 0 !important; + position: relative; + text-align: center; + width: 20px; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.folded #collapse-button div:after { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.rtl { + #collapse-button div:after { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + &.folded #collapse-button div:after { + -webkit-transform: none; + -ms-transform: none; + transform: none; + } +} + +/** + * Toolbar menu toggle + */ + +li#wp-admin-bar-menu-toggle { + display: none; +} + +/* Auto-folding of the admin menu */ +@media only screen and (max-width: 960px) { + .auto-fold { + #wpcontent, #wpfooter { + margin-left: 36px; + } + #adminmenuback, #adminmenuwrap { + width: 36px; + } + #adminmenu { + width: 36px; + li.menu-top { + width: 36px; + } + .wp-submenu.sub-open, .opensub .wp-submenu { + top: 0px; + left: 36px; + } + .wp-has-current-submenu { + .wp-submenu.sub-open, &.opensub .wp-submenu { + top: 0px; + left: 36px; + } + } + a.menu-top:focus + .wp-submenu, .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + top: 0px; + left: 36px; + } + a.wp-has-current-submenu:focus + .wp-submenu { + position: absolute; + top: -1000em; + margin-right: -1px; + padding: 7px 0 8px; + z-index: 9999; + } + .wp-has-current-submenu { + .wp-submenu { + position: absolute; + top: -1000em; + margin-right: -1px; + padding: 7px 0 8px; + z-index: 9999; + min-width: 150px; + width: auto; + } + li > a { + padding-right: 16px; + padding-left: 14px; + } + } + li.menu-top .wp-submenu > li > a { + padding-left: 12px; + } + .wp-menu-name { + display: none; + } + .wp-submenu-head { + display: block; + } + div.wp-menu-image { + height: 30px; + width: 34px; + position: absolute; + z-index: 25; + } + a.menu-top { + height: 34px; + } + li.wp-menu-open { + border: 0 none; + } + .wp-has-current-submenu.menu-top-last { + margin-bottom: 0; + } + } + ul#adminmenu { + li { + &:hover a.wp-has-current-submenu:after { + display: none; + } + &.wp-has-submenu.wp-not-current-submenu:hover:after { + border-width: 4px; + margin-top: -4px; + top: 16px; + } + } + a.wp-has-current-submenu:after, > li a.current:after { + border-width: 4px; + margin-top: -4px; + } + } + #adminmenu li { + &.menu-top:hover, &.opensub > a.menu-top, > a.menu-top:focus { + z-index: 10000; + } + } + #collapse-menu span { + display: none; + } + #collapse-button div { + background: none; + &:after { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + } + } + .rtl.auto-fold #collapse-button div:after { + -webkit-transform: none; + -ms-transform: none; + transform: none; + } +} + +@media screen and (max-width: 782px) { + .auto-fold #wpcontent { + position: relative; + margin-left: 0; + padding-left: 10px; + } + .sticky-menu #adminmenuwrap { + position: relative; + z-index: auto; + top: 0; + } + /* Sidebar Adjustments */ + .auto-fold { + #adminmenu, #adminmenuback, #adminmenuwrap { + position: absolute; + width: 190px; + z-index: 100; + } + #adminmenuback, #adminmenuwrap { + display: none; + } + .wp-responsive-open { + #adminmenuback, #adminmenuwrap { + display: block; + } + } + #adminmenu { + li { + &.menu-top { + width: 100%; + } + a { + font-size: 16px; + padding: 5px; + } + &.menu-top .wp-submenu > li > a { + padding: 10px 10px 10px 20px; + } + } + .wp-menu-name { + display: block; + margin-left: 35px; + } + } + ul#adminmenu { + a.wp-has-current-submenu:after, > li.current > a.current:after { + border-width: 8px; + margin-top: -8px; + } + li.wp-has-submenu.wp-not-current-submenu:hover:after { + display: none; + } + } + } + /* Resize the admin menu items to a comfortable touch size */ + /* Restore the menu names */ + /* Switch the arrow side */ + /* Make the submenus appear correctly when tapped. */ + #adminmenu .wp-submenu { + position: relative; + display: none; + } + .auto-fold { + #adminmenu { + .selected .wp-submenu, .wp-menu-open .wp-submenu { + position: relative; + display: block; + top: 0; + left: -1px; + -webkit-box-shadow: none; + box-shadow: none; + } + .selected .wp-submenu:after, .wp-menu-open .wp-submenu:after, .opensub .wp-submenu { + display: none; + } + .selected .wp-submenu { + display: block; + } + } + ul#adminmenu li:hover a.wp-has-current-submenu:after { + display: block; + } + #adminmenu { + a.menu-top:focus + .wp-submenu, .wp-has-current-submenu a.menu-top:focus + .wp-submenu { + position: relative; + left: -1px; + right: 0; + top: 0; + } + } + } + /* Remove submenu headers and adjust sub meu*/ + #adminmenu .wp-submenu .wp-submenu-head { + display: none; + } + /* Toolbar menu toggle */ + #wp-responsive-toggle { + position: fixed; + top: 5px; + left: 4px; + padding-right: 10px; + z-index: 99999; + border: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + #wpadminbar #wp-admin-bar-menu-toggle a { + display: block; + padding: 0; + overflow: hidden; + outline: none; + text-decoration: none; + border: 1px solid transparent; + background: none; + height: 44px; + margin-left: -1px; + } + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #333; + } + li#wp-admin-bar-menu-toggle { + display: block; + } + #wpadminbar #wp-admin-bar-menu-toggle { + a:hover { + border: 1px solid transparent; + } + .ab-icon:before { + content: '\f228'; + display: inline-block; + float: left; + font: normal 40px/45px 'Dashicons'; + vertical-align: middle; + outline: none; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 44px; + width: 50px; + padding: 0; + border: none; + text-align: center; + text-decoration: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + #adminmenuwrap, #adminmenuback { + display: none; + } + .wp-responsive-open { + #adminmenuwrap, #adminmenuback { + display: block; + } + } + .auto-fold #adminmenu { + top: 46px; + } +} diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css deleted file mode 100644 index 4229402..0000000 --- a/src/wp-admin/css/color-picker.css +++ /dev/null @@ -1,127 +0,0 @@ -.wp-color-picker { - width: 80px; -} - -.wp-picker-container .hidden { - display: none; -} - -.wp-color-result { - background-color: #f7f7f7; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - border-radius: 3px; - cursor: pointer; - display: inline-block; - height: 22px; - margin: 0 6px 6px 0px; - position: relative; - top: 1px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: bottom; - display: inline-block; - padding-left: 30px; - -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); - box-shadow: 0 1px 0 rgba(0,0,0,.08); -} - -.wp-color-result:after { - background: #f7f7f7; - -webkit-border-radius: 0 2px 2px 0; - border-radius: 0 2px 2px 0; - border-left: 1px solid #ccc; - color: #555; - content: attr( title ); - display: block; - font-size: 11px; - line-height: 22px; - padding: 0 6px; - position: relative; - right: 0; - text-align: center; - top: 0; - -webkit-box-shadow: inset 0 1px 0 #fff; - box-shadow: inset 0 1px 0 #fff; -} - -.wp-color-result:hover, -.wp-color-result:focus { - background: #fafafa; - border-color: #999; - color: #222; -} - -.wp-color-result:hover:after, -.wp-color-result:focus:after { - color: #222; - border-color: #aaa; - border-left: 1px solid #999; -} - -.wp-color-result { - top: 0; -} - -.wp-color-result.wp-picker-open:after { - content: attr( data-current ); -} - -.wp-picker-container, .wp-picker-container:active { - display: inline-block; - outline: 0; -} - -.wp-color-result:focus { - -webkit-box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); -} - -.wp-picker-open + .wp-picker-input-wrap { - display: inline-block; - vertical-align: top; -} - -.wp-picker-container .button { - margin-left: 6px; -} - -.wp-picker-container .iris-square-slider .ui-slider-handle:focus { - background-color: #555 -} - -.wp-picker-container .iris-picker { - -webkit-border-radius: 0; - border-radius: 0; - border-color: #dfdfdf; - margin-top: 6px; -} - -.wp-picker-container input[type="text"].wp-color-picker { - width: 65px; - font-size: 12px; - font-family: monospace; - text-align: center; - line-height: 16px; - margin: 0; -} - -.wp-picker-container input[type="text"].wp-color-picker:focus::-webkit-input-placeholder { - color: transparent; -} - -.wp-picker-container input[type="text"].wp-color-picker:-moz-placeholder { - color: #999; -} - -.wp-picker-container input[type="text"].iris-error { - background-color: #ffebe8; - border-color: #c00; - color: #000; -} diff --git a/src/wp-admin/css/color-picker.scss b/src/wp-admin/css/color-picker.scss new file mode 100644 index 0000000..4c1f1fe --- /dev/null +++ b/src/wp-admin/css/color-picker.scss @@ -0,0 +1,116 @@ +.wp-color-picker { + width: 80px; +} + +.wp-picker-container .hidden { + display: none; +} + +.wp-color-result { + background-color: #f7f7f7; + border: 1px solid #ccc; + -webkit-border-radius: 3px; + border-radius: 3px; + cursor: pointer; + display: inline-block; + height: 22px; + margin: 0 6px 6px 0px; + position: relative; + top: 1px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: bottom; + display: inline-block; + padding-left: 30px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); + &:after { + background: #f7f7f7; + -webkit-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; + border-left: 1px solid #ccc; + color: #555; + content: attr(title); + display: block; + font-size: 11px; + line-height: 22px; + padding: 0 6px; + position: relative; + right: 0; + text-align: center; + top: 0; + -webkit-box-shadow: inset 0 1px 0 #fff; + box-shadow: inset 0 1px 0 #fff; + } + &:hover, &:focus { + background: #fafafa; + border-color: #999; + color: #222; + } + &:hover:after, &:focus:after { + color: #222; + border-color: #aaa; + border-left: 1px solid #999; + } + top: 0; + &.wp-picker-open:after { + content: attr(data-current); + } +} + +.wp-picker-container { + display: inline-block; + outline: 0; + &:active { + display: inline-block; + outline: 0; + } +} + +.wp-color-result:focus { + -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); +} + +.wp-picker-open + .wp-picker-input-wrap { + display: inline-block; + vertical-align: top; +} + +.wp-picker-container { + .button { + margin-left: 6px; + } + .iris-square-slider .ui-slider-handle:focus { + background-color: #555; + } + .iris-picker { + -webkit-border-radius: 0; + border-radius: 0; + border-color: #dfdfdf; + margin-top: 6px; + } + input[type="text"] { + &.wp-color-picker { + width: 65px; + font-size: 12px; + font-family: monospace; + text-align: center; + line-height: 16px; + margin: 0; + &:focus::-webkit-input-placeholder { + color: transparent; + } + &:-moz-placeholder { + color: #999; + } + } + &.iris-error { + background-color: #ffebe8; + border-color: #c00; + color: #000; + } + } +} diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css deleted file mode 100644 index a995ee4..0000000 --- a/src/wp-admin/css/common.css +++ /dev/null @@ -1,3210 +0,0 @@ -/* 2 column liquid layout */ -#wpwrap { - height: auto; - min-height: 100%; - width: 100%; - position: relative; - -webkit-font-smoothing: subpixel-antialiased; -} - -#wpcontent { - height: 100%; - padding-left: 20px; -} - -#wpcontent, -#wpfooter { - margin-left: 160px; -} - -.folded #wpcontent, -.folded #wpfooter { - margin-left: 36px; -} - -#wpbody-content { - padding-bottom: 65px; - float: left; - width: 100%; - overflow: visible !important; -} - -/* inner 2 column liquid layout */ - -.inner-sidebar { - float: right; - clear: right; - display: none; - width: 281px; - position: relative; -} - -.columns-2 .inner-sidebar { - margin-right: auto; - width: 286px; - display: block; -} - -.inner-sidebar #side-sortables, -.columns-2 .inner-sidebar #side-sortables { - min-height: 300px; - width: 280px; - padding: 0; -} - -.has-right-sidebar .inner-sidebar { - display: block; -} - -.has-right-sidebar #post-body { - float: left; - clear: left; - width: 100%; - margin-right: -2000px; -} - -.has-right-sidebar #post-body-content { - margin-right: 300px; - float: none; - width: auto; -} - -/* 2 columns main area */ - -#col-container, -#col-left, -#col-right { - overflow: hidden; - padding: 0; - margin: 0; -} - -#col-left { - width: 35%; -} - -#col-right { - float: right; - clear: right; - width: 65%; -} - -.col-wrap { - padding: 0 7px; -} - -/* utility classes */ -.alignleft { - float: left; -} - -.alignright { - float: right; -} - -.textleft { - text-align: left; -} - -.textright { - text-align: right; -} - -.clear { - clear: both; -} - -/* Hide visually but not from screen readers */ -.screen-reader-text, -.screen-reader-text span, -.ui-helper-hidden-accessible { - position: absolute; - margin: -1px; - padding: 0; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - border: 0; -} - -.screen-reader-shortcut { - position: absolute; - top: -1000em; -} - -.screen-reader-shortcut:focus { - left: 6px; - top: -25px; - height: auto; - width: auto; - display: block; - font-size: 14px; - font-weight: 600; - padding: 15px 23px 14px; - background: #f1f1f1; - color: #21759b; - z-index: 100000; - line-height: normal; - -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6); - box-shadow: 0 0 2px 2px rgba(0,0,0,.6); - text-decoration: none; - outline: none; -} - -.hidden, -.js .closed .inside, -.js .hide-if-js, -.no-js .hide-if-no-js, -.js.wp-core-ui .hide-if-js, -.js .wp-core-ui .hide-if-js, -.no-js.wp-core-ui .hide-if-no-js, -.no-js .wp-core-ui .hide-if-no-js { - display: none; -} - -/* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */ -.widget-top, -.menu-item-handle, -.widget-inside, -#menu-settings-column .accordion-container, -#menu-management .menu-edit, -.manage-menus, -table.widefat, -.stuffbox, -p.popular-tags, -.widgets-holder-wrap, -.wp-editor-container, -.popular-tags, -.feature-filter, -.imgedit-group { - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); -} - -table.widefat, -.wp-editor-container, -.stuffbox, -p.popular-tags, -.widgets-holder-wrap, -.popular-tags, -.feature-filter, -.imgedit-group { - background: #fff; -} - -/* general */ -html, -body { - height: 100%; - margin: 0; - padding: 0; -} - -html { - background: #f1f1f1; -} - -body { - color: #444; - font-family: "Open Sans", sans-serif; - font-size: 13px; - line-height: 1.4em; - min-width: 600px; -} - -body.iframe { - min-width: 0; - padding-top: 1px; -} - -body.modal-open { - overflow: hidden; -} - -iframe, -img { - border: 0; -} - -td { - font-family: inherit; - font-size: inherit; - font-weight: inherit; - line-height: inherit; -} - -a { - color: #0074a2; - -webkit-transition-property: border, background, color; - transition-property: border, background, color; - -webkit-transition-duration: .05s; - transition-duration: .05s; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; -} - -a, -div { - outline: 0; -} - -a:hover, -a:active { - color: #2ea2cc; -} - -a:focus { - color: #124964; - -webkit-box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); -} - -.ie8 a:focus { - outline: #5b9dd9 solid 1px; -} - -#adminmenu a:focus, -.screen-reader-text:focus { - -webkit-box-shadow: none; - box-shadow: none; - outline: none; -} - -blockquote, -q { - quotes: none; -} - -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} - -p { - font-size: 13px; - line-height: 1.5; - margin: 1em 0; -} - -blockquote { - margin: 1em; -} - -li, -dd { - margin-bottom: 6px; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - display: block; - font-weight: 600; -} - -h1 { - font-size: 2em; - margin: .67em 0; -} - -h2 { - color: #222; - font-size: 1.5em; - margin: .83em 0; - font-weight: 400; -} - -h3 { - color: #222; - font-size: 1.3em; - margin: 1em 0; -} - -h4 { - font-size: 1em; - margin: 1.33em 0; -} - -h5 { - font-size: 0.83em; - margin: 1.67em 0; -} - -h6 { - font-size: 0.67em; - margin: 2.33em 0; -} - -ul, -ol { - padding: 0; -} - -ul { - list-style: none; -} - -ol { - list-style-type: decimal; - margin-left: 2em; -} - -ul.ul-disc { - list-style: disc outside; -} - -ul.ul-square { - list-style: square outside; -} - -ol.ol-decimal { - list-style: decimal outside; -} - -ul.ul-disc, -ul.ul-square, -ol.ol-decimal { - margin-left: 1.8em; -} - -ul.ul-disc > li, -ul.ul-square > li, -ol.ol-decimal > li { - margin: 0 0 0.5em; -} - -/* @noflip */ -.ltr { - direction: ltr; -} - -/* @noflip */ -.code, -code { - font-family: Consolas, Monaco, monospace; - direction: ltr; -} - -kbd, -code { - padding: 3px 5px 2px 5px; - margin: 0 1px; - background: #eaeaea; - background: rgba(0,0,0,0.07); - font-size: 13px; -} - -.subsubsub { - list-style: none; - margin: 8px 0 0; - padding: 0; - font-size: 13px; - float: left; - color: #666; -} - -.subsubsub a { - line-height: 2; - padding: .2em; - text-decoration: none; -} - -.subsubsub a .count, -.subsubsub a.current .count { - color: #999; - font-weight: normal; -} - -.subsubsub a.current { - font-weight: 600; - border: none; -} - -.subsubsub li { - display: inline-block; - margin: 0; - padding: 0; - white-space: nowrap; -} - -/* .widefat - main style for tables */ -.widefat { - border-spacing: 0; - width: 100%; - clear: both; - margin: 0; -} - -.widefat * { - word-wrap: break-word; -} - -.widefat a { - text-decoration: none; -} - -.widefat td, -.widefat th { - padding: 8px 10px; -} - -.widefat thead th { - border-bottom: 1px solid #e1e1e1; -} - -.widefat tfoot th { - border-top: 1px solid #e1e1e1; - border-bottom: none; -} - -.widefat .no-items td { - border-bottom-width: 0; -} - -.widefat td { - vertical-align: top; -} - -.widefat td, -.widefat td p, -.widefat td ol, -.widefat td ul { - font-size: 13px; - line-height: 1.5em; -} - -.widefat th { - text-align: left; - line-height: 1.3em; - font-size: 14px; -} - -.widefat th input { - margin: 0 0 0 8px; - padding: 0; - vertical-align: text-top; -} - -.widefat .check-column { - width: 2.2em; - padding: 6px 0 25px; - vertical-align: top; -} - -.widefat th input[type=checkbox] { - margin-top: -1px; -} - -.widefat tbody th.check-column { - padding: 9px 0 22px; -} - -.widefat.media .check-column { - padding-top: 8px; -} - -.widefat thead th.check-column, -.widefat tbody th.check-column, -.widefat tfoot th.check-column { - padding: 11px 0 0 3px; -} - -.widefat thead th.check-column { - padding-top: 10px; -} - -.update-php div.updated, -.update-php div.error { - margin-left: 0; -} - -.no-js .widefat thead .check-column input, -.no-js .widefat tfoot .check-column input { - display: none; -} - -.widefat .num, -.column-comments, -.column-links, -.column-posts { - text-align: center; -} - -.widefat th#comments { - vertical-align: middle; -} - -.wrap { - margin: 10px 20px 0 2px; -} - -div.updated, -div.error { - padding: 0 0.6em; - margin: 5px 15px 2px; -} - -div.updated p, -div.error p { - margin: 0.5em 0; - padding: 2px; -} - -.wrap div.updated, -.wrap div.error, -.media-upload-form div.error { - margin: 5px 0 15px; -} - -div.updated { - border-left: 4px solid #7ad03a; - padding: 1px 12px; - background-color: #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); -} - -div.error { - border-left: 4px solid #dd3d36; - background: #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - padding: 1px 12px; -} - -.attention { - color: #2ea2cc; -} - -.wrap h2, -.subtitle { - font-weight: normal; - margin: 0; -} - -.wrap h2 { - font-size: 23px; - font-weight: 400; - padding: 9px 15px 4px 0; - line-height: 29px; -} - -.subtitle { - color: #777; - font-size: 14px; - padding-left: 25px; -} - -.wrap .add-new-h2, -.wrap .add-new-h2:active { - margin-left: 4px; - padding: 4px 8px; - position: relative; - top: -3px; - text-decoration: none; - border: none; - -webkit-border-radius: 2px; - border-radius: 2px; - background: #e0e0e0; - text-shadow: none; - font-weight: 600; - font-size: 13px; -} - -.wrap .add-new-h2:hover { - background: #2ea2cc; - color: #fff; -} - -.wrap h2.long-header { - padding-right: 0; -} - -.wp-dialog { - background-color: #fff; -} - -.widgets-chooser ul, -#widgets-left .widget-in-question .widget-top, -#available-widgets .widget-top:hover, -div#widgets-right .widget-top:hover, -#widgets-left .widget-top:hover { - border-color: #999; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); - box-shadow: 0 1px 2px rgba(0,0,0,0.1); -} - -.sorthelper { - background-color: #ccf3fa; -} - -.ac_match, -.subsubsub a.current { - color: #000; -} - -.alternate, -.alt { - background-color: #f9f9f9; -} - -.bar { - background-color: #e8e8e8; - border-right-color: #99d; -} - -.media-upload-form label.form-help, -td.help { - color: #9a9a9a; -} - -/* Helper classes for plugins to leverage the active WordPress color scheme */ - -.highlight { - background-color: #e4f2fd; - color: #000; -} - -.wp-ui-primary { - color: #fff; - background-color: #333; -} -.wp-ui-text-primary { - color: #333; -} - -.wp-ui-highlight { - color: white; - background-color: #1e8cbe; -} -.wp-ui-text-highlight { - color: #1e8cbe; -} - -.wp-ui-notification { - color: #fff; - background-color: #d54e21; -} -.wp-ui-text-notification { - color: #d54e21; -} - -.wp-ui-text-icon { - color: #999; -} - -/*------------------------------------------------------------------------------ - 1.0 - Text Styles -------------------------------------------------------------------------------*/ - -.widget .widget-top, -.postbox .hndle, -.stuffbox .hndle, -.control-section .accordion-section-title, -.sidebar-name, -#nav-menu-header, -#nav-menu-footer, -.menu-item-handle, -.checkbox, -.side-info, -#your-profile #rich_editing, -.widefat thead th, -.widefat tfoot th { - line-height: 1.4em; -} - -.widget .widget-top, -.menu-item-handle { - background: #fafafa; - color: #222; -} - -.postbox .hndle, -.stuffbox .hndle { - border-bottom: 1px solid #eee; -} - -.quicktags, -.search { - background-color: #ccc; - color: #000; - font-size: 12px; -} - -.icon32 { - display: none; -} - -/* @todo can we combine these into a class or use an existing dashicon one? */ -#welcome-panel.welcome-panel .welcome-panel-close:before, -.tagchecklist span a:before, -#bulk-titles div a:before { - background: none; - color: #bbb; - content: '\f153'; - display: block !important; - font: normal 16px/1 'dashicons'; - speak: none; - height: 20px; - text-align: center; - width: 20px; - -webkit-font-smoothing: antialiased !important; -} - -#welcome-panel.welcome-panel .welcome-panel-close:before { - margin: 0; -} - -.tagchecklist span a:before, -#bulk-titles div a:before { - margin: 2px 0; -} - -#welcome-panel.welcome-panel .welcome-panel-close:hover:before, -.tagchecklist span a:hover:before, -#bulk-titles div a:hover:before { - color: #c00; -} - -.key-labels label { - line-height: 24px; -} - -strong, b { - font-weight: 600; -} - -.pre { - /* https://developer.mozilla.org/en-US/docs/CSS/white-space */ - white-space: pre-wrap; /* css-3 */ - word-wrap: break-word; /* IE 5.5 - 7 */ -} - -.howto { - color: #666; - font-style: italic; - display: block; -} - -p.install-help { - margin: 8px 0; - font-style: italic; -} - -.no-break { - white-space: nowrap; -} - -hr { - border: 0; - border-top: 1px solid #ddd; - border-bottom: 1px solid #fafafa; -} - -.row-actions span.delete a, -.row-actions span.trash a, -.row-actions span.spam a, -.plugins a.delete, -#all-plugins-table .plugins a.delete, -#search-plugins-table .plugins a.delete, -.submitbox .submitdelete, -#media-items a.delete, -#media-items a.delete-permanently, -#nav-menu-footer .menu-delete { - color: #a00; -} - -abbr.required, -.file-error, -.widget-control-remove:hover, -.row-actions .delete a:hover, -.row-actions .trash a:hover, -.row-actions .spam a:hover, -.plugins a.delete:hover, -#all-plugins-table .plugins a.delete:hover, -#search-plugins-table .plugins a.delete:hover, -.submitbox .submitdelete:hover, -#media-items a.delete:hover, -#media-items a.delete-permanently:hover, -#nav-menu-footer .menu-delete:hover { - color: #f00; - text-decoration: none; - border: none; -} - -/*------------------------------------------------------------------------------ - 3.0 - Actions -------------------------------------------------------------------------------*/ - -#major-publishing-actions { - padding: 10px; - clear: both; - border-top: 1px solid #ddd; - background: #f5f5f5; -} - -#delete-action { - line-height: 28px; - vertical-align: middle; - text-align: left; - float: left; -} - -#publishing-action { - text-align: right; - float: right; - line-height: 23px; -} - -#publishing-action .spinner { - float: left; -} - -#misc-publishing-actions { - padding: 6px 0 0; -} - -.misc-pub-section { - padding: 6px 10px 8px; -} - -#minor-publishing-actions { - padding: 10px 10px 0 10px; - text-align: right; -} - -#save-post { - float: left; -} - -.preview { - float: right; -} - -#sticky-span { - margin-left: 18px; -} - -.side-info { - margin: 0; - padding: 4px; - font-size: 11px; -} - -.side-info h5 { - padding-bottom: 7px; - font-size: 14px; - margin: 12px 2px 5px; - border-bottom: 1px solid #dadada; -} - -.side-info ul { - margin: 0; - padding-left: 18px; - list-style: square; - color: #666; -} - -.approve, -.unapproved .unapprove { - display: none; -} - -.unapproved .approve, -.spam .approve, -.trash .approve { - display: inline; -} - -td.action-links, -th.action-links { - text-align: right; -} - -/* Filter bar */ -.wp-filter { - display: inline-block; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 12px 0 25px; - padding: 0 20px; - width: 100%; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - border: 1px solid #e5e5e5; - background: #fff; - color: #555; - font-size: 13px; -} - -.wp-filter a { - text-decoration: none; -} - -.filter-count { - display: inline-block; - vertical-align: middle; - min-width: 4em; -} - -.title-count, -.filter-count .count { - display: inline-block; - position: relative; - top: -1px; - padding: 4px 10px; - -webkit-border-radius: 30px; - border-radius: 30px; - background: #777; - color: #fff; - font-size: 14px; - font-weight: 600; -} - -/* not a part of filter bar, but derived from it, so here for now */ -.title-count { - display: inline; - top: -3px; - margin-left: 5px; - margin-right: 20px; -} - -.filter-links { - display: inline-block; - margin: 0; -} - -.filter-links li { - display: inline-block; - margin: 0; -} - -.filter-links li > a { - display: inline-block; - margin: 0 10px; - padding: 15px 0; - border-bottom: 4px solid #fff; - color: #666; - cursor: pointer; -} - -.filter-links .current { - -webkit-box-shadow: none; - box-shadow: none; - border-bottom: 4px solid #666; - color: #222; -} - -.filter-links li > a:hover, -.filter-links li > a:focus, -.show-filters .filter-links a.current:hover, -.show-filters .filter-links a.current:focus { - color: #2ea2cc; -} - -.wp-filter .search-form { - float: right; - margin-top: 9px; -} - -.wp-filter .search-form input[type="search"] { - margin: 0; - padding: 3px 5px; - width: 280px; - font-size: 16px; - font-weight: 300; - line-height: 1.5; -} - -.wp-filter .search-form select { - height: 33px; - vertical-align: top; -} - -.wp-filter .drawer-toggle { - display: inline-block; - margin: 0 10px; - padding: 4px 6px; - color: #666; - cursor: pointer; -} - -.wp-filter .drawer-toggle:before { - display: inline-block; - vertical-align: top; - content: "\f111"; - margin: 0 5px 0 0; - width: 16px; - height: 16px; - color: #777; - -webkit-transition: color .1s ease-in 0; - transition: color .1s ease-in 0; - font-family: "dashicons"; - font-size: 16px; - line-height: 1; - text-align: center; - text-decoration: inherit; - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -.wp-filter .drawer-toggle:hover, -.wp-filter .drawer-toggle:hover:before { - color: #2ea2cc; -} - -.wp-filter .drawer-toggle.current:before { - color: #fff; -} - -.filter-drawer { - display: none; - margin: 0 -20px; - padding: 20px; - border-top: 1px solid #eee; - background: #fafafa; -} - -.show-filters .filter-drawer { - display: block; - overflow: hidden; -} - -.show-filters .wp-filter .drawer-toggle:hover, -.show-filters .wp-filter .drawer-toggle:focus { - background: rgb(46, 162, 204); -} - -.show-filters .filter-links a.current { - border-bottom: none; -} - -.show-filters .wp-filter .drawer-toggle { - -webkit-border-radius: 2px; - border-radius: 2px; - border: none; - background: #777; - color: #fff; -} - -.show-filters .wp-filter .drawer-toggle:before { - color: #fff; -} - -.filter-group { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - float: left; - margin: 0 1% 0 0; - padding: 10px; - width: 19%; - background: #fff; - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); -} - -.filter-group.wide { - width: 38%; -} - -.filter-group h4 { - position: relative; - margin: 0; -} - -.filter-drawer ol { - margin: 20px 0 0; - list-style-type: none; - font-size: 12px; -} - -.filter-drawer li { - display: inline-block; - vertical-align: top; - margin: 5px 0; - padding-right: 25px; - width: 160px; - list-style-type: none; -} - -.filter-drawer .buttons { - margin-bottom: 20px; -} - -.filter-drawer .buttons .button span { - display: inline-block; - opacity: 0.8; - font-size: 12px; - text-indent: 10px; -} - -.wp-filter .button.clear-filters { - display: none; - margin: 0 0 20px 10px; -} - -.filtered-by { - display: none; - margin: 0; -} - -.filtered-by > span { - font-weight: 600; -} - -.filtered-by a { - margin-left: 10px; -} - -.filtered-by .tags { - display: inline; -} - -.filtered-by .tag { - margin: 0 5px; - padding: 4px 8px; - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - background: #fff; - font-size: 11px; -} - -.filters-applied .filter-group, -.filters-applied .filter-drawer .buttons, -.filters-applied .filter-drawer br { - display: none !important; -} - -.filters-applied .filtered-by { - display: block; -} - -.filters-applied .filter-drawer { - padding: 20px; -} - -.show-filters .content-filterable, -.show-filters.filters-applied.loading-content .content-filterable, -.loading-content .content-filterable, -.error .content-filterable { - display: none; -} - -.show-filters.filters-applied .content-filterable { - display: block; -} - -.loading-content .spinner { - display: block; - margin: 40px auto 0; - float: none; -} - -@media only screen and (max-width: 1120px) { - .wp-filter .search-form { - float: none; - margin: 20px 0; - } - - .filter-drawer { - border-bottom: 1px solid #eee; - } - - .filter-group { - margin-bottom: 0; - margin-top: 5px; - width: 100%; - } - - .filter-group li { - margin: 10px 0; - } -} - -@media only screen and (max-width: 782px) { - .filter-group, - .filter-group li { - width: 100%; - } - -} - - -/*------------------------------------------------------------------------------ - 4.0 - Notifications -------------------------------------------------------------------------------*/ - -#update-nag, -.update-nag { - display: inline-block; - line-height: 19px; - padding: 11px 15px; - font-size: 14px; - text-align: left; - margin: 25px 20px 0 2px; - background-color: #fff; - border-left: 4px solid #ffba00; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); -} - -.update-message { - color: #000; -} - -ul#dismissed-updates { - display: none; -} - -form.upgrade { - margin-top: 8px; -} - -form.upgrade .hint { - font-style: italic; - font-size: 85%; - margin: -0.5em 0 2em 0; -} - -.update-php .spinner { - float: none; - margin: -4px 0; -} - -#ajax-loading, -.ajax-loading, -.ajax-feedback, -.imgedit-wait-spin, -.list-ajax-loading { /* deprecated */ - visibility: hidden; -} - -#ajax-response.alignleft { - margin-left: 2em; -} - -/* @todo: this does not need its own section anymore */ -/*------------------------------------------------------------------------------ - 6.0 - Admin Header -------------------------------------------------------------------------------*/ -#adminmenu a, -#sidemenu a, -#taglist a, -#catlist a { - text-decoration: none; -} - -/*------------------------------------------------------------------------------ - 6.1 - Screen Options Tabs -------------------------------------------------------------------------------*/ - -#screen-options-wrap, -#contextual-help-wrap { - margin: 0; - padding: 8px 20px 12px; - position: relative; -} - -#contextual-help-wrap { - overflow: auto; - margin-left: 0 !important; -} - -#screen-meta .screen-reader-text { - visibility: hidden; -} - -#screen-meta-links { - margin: 0 20px 0 0; -} - -#screen-meta-links a { - padding: 3px 6px 3px 16px; -} - -#screen-meta-links a:focus { - outline: none; -} - -/* screen options and help tabs revert */ -#screen-meta { - display: none; - margin: 0 20px -1px 0px; - position: relative; - background-color: #fff; - border: 1px solid #ddd; - border-top: none; - -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.025); - box-shadow: 0 1px 0 rgba(0,0,0,.025); -} - -#screen-options-link-wrap, -#contextual-help-link-wrap { - float: right; - height: 28px; - margin: 0 0 0 6px; - border: 1px solid #ddd; - border-top: none; - background: #fff; - -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); - box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); -} - -#screen-meta-links .screen-meta-toggle { - position: relative; - top: 0; -} - -#screen-meta-links a { - color: #777; -} - -#screen-meta-links a:hover, -#screen-meta-links a:active, -#screen-meta-links a:focus { - color: #333; -} - -#screen-meta-links a.show-settings { - display: block; - font-size: 13px; - height: 22px; - line-height: 22px; - text-decoration: none; - z-index: 1; -} - -#screen-meta-links a:after { - right: 0; - content: '\f140'; - font: normal 20px/1 'dashicons'; - speak: none; - display: inline-block; - padding: 0 5px 0 0; - bottom: 2px; - position: relative; - vertical-align: bottom; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; - color: #bbb; -} - -#screen-meta-links a.screen-meta-active:after { - content: '\f142'; -} - -#screen-meta-links a.show-settings:hover { - text-decoration: none; -} -/* end screen options and help tabs */ - -.toggle-arrow { - background-repeat: no-repeat; - background-position: top left; - background-color: transparent; - height: 22px; - line-height: 22px; - display: block; -} - -.toggle-arrow-active { - background-position: bottom left; -} - -#screen-options-wrap h5, -#contextual-help-wrap h5 { - margin: 8px 0; - font-size: 13px; -} - -.metabox-prefs label { - display: inline-block; - padding-right: 15px; - line-height: 30px; -} - -.metabox-prefs label input[type=checkbox] { - margin-top: -4px; - margin-right: 6px; -} - -.metabox-prefs label input { - margin: 0 5px 0 2px; -} - -.metabox-prefs .columns-prefs label input { - margin: 0 2px; -} - -.metabox-prefs label a { - display: none; -} - -/*------------------------------------------------------------------------------ - 6.2 - Help Menu -------------------------------------------------------------------------------*/ - -#contextual-help-wrap { - padding: 0; -} - -#contextual-help-columns { - position: relative; -} - -#contextual-help-back { - position: absolute; - top: 0; - bottom: 0; - left: 150px; - right: 170px; - border: 1px solid #e1e1e1; - border-top: none; - border-bottom: none; - background: #f6fbfd; -} - -#contextual-help-wrap.no-sidebar #contextual-help-back { - right: 0; - border-right-width: 0; - -webkit-border-bottom-right-radius: 2px; - border-bottom-right-radius: 2px; -} - -.contextual-help-tabs { - float: left; - width: 150px; - margin: 0; -} - -.contextual-help-tabs ul { - margin: 1em 0; -} - -.contextual-help-tabs li { - margin-bottom: 0; - list-style-type: none; - border-style: solid; - border-width: 0 0 0 2px; - border-color: transparent; -} - -.contextual-help-tabs a { - display: block; - padding: 5px 5px 5px 12px; - line-height: 18px; - text-decoration: none; - border: 1px solid transparent; - border-right: none; - border-left: none; -} - -.contextual-help-tabs a:hover { - color: #333; -} - -.contextual-help-tabs .active { - padding: 0; - margin: 0 -1px 0 0; - border-left: 2px solid #2ea2cc; - background: #f6fbfd; - -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.02), 0 1px 0 rgba(0,0,0,0.02); - box-shadow: 0 2px 0 rgba(0,0,0,0.02), 0 1px 0 rgba(0,0,0,0.02); -} - -.contextual-help-tabs .active a { - border-color: #e1e1e1; - color: #333; -} - -.contextual-help-tabs-wrap { - padding: 0 20px; - overflow: auto; -} - -.help-tab-content { - display: none; - margin: 0 22px 12px 0; - line-height: 1.6em; -} - -.help-tab-content.active { - display: block; -} - -.help-tab-content ul li { - list-style-type: disc; - margin-left: 18px; -} - -.contextual-help-sidebar { - width: 150px; - float: right; - padding: 0 8px 0 12px; - overflow: auto; -} - -/*------------------------------------------------------------------------------ - 8.0 - Layout Blocks -------------------------------------------------------------------------------*/ - -html.wp-toolbar { - padding-top: 32px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.narrow { - width: 70%; - margin-bottom: 40px; -} - -.narrow p { - line-height: 150%; -} - -.widefat th, -.widefat td { - overflow: hidden; - color: #555; -} - -.widefat th { - font-weight: normal; -} - -.widefat thead tr th, -.widefat tfoot tr th { - color: #333; -} - -.widefat td p { - margin: 2px 0 0.8em; -} - -.widefat p, -.widefat ol, -.widefat ul { - color: #333; -} - -.widefat .column-comment p { - margin: 0.6em 0; -} - -/* Screens with postboxes */ -.postbox-container { - float: left; -} - -.postbox-container .meta-box-sortables { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#wpbody-content .metabox-holder { - padding-top: 10px; -} - -.metabox-holder .postbox-container .empty-container { - border: 3px dashed #bbb; - height: 250px; -} - -.metabox-holder.columns-1 .postbox-container .empty-container, -.columns-2 #postbox-container-3 .empty-container, -.columns-2 #postbox-container-4 .empty-container, -.columns-3 #postbox-container-4 .empty-container { - border: 0 none; - height: 0; - min-height: 0; -} - -#post-body-content { - width: 100%; - min-width: 463px; - float: left; -} - -#post-body.columns-2 #postbox-container-1 { - float: right; - margin-right: -300px; - width: 280px; -} - -#post-body.columns-2 #side-sortables { - min-height: 250px; -} - -/* one column on the dash */ -@media only screen and (max-width: 799px) { - #wpbody-content .metabox-holder .postbox-container .empty-container { - border: 0 none; - height: 0; - min-height: 0; - } -} - -.js .widget .widget-top, -.js .postbox .hndle { - cursor: move; -} - -.hndle a { - font-size: 11px; - font-weight: normal; -} - -.postbox .handlediv { - float: right; - width: 27px; - height: 30px; -} - -.js .postbox .handlediv { - cursor: pointer; -} - -.sortable-placeholder { - border: 1px dashed #bbb; - margin-bottom: 20px; -} - -.postbox, -.stuffbox { - margin-bottom: 20px; - padding: 0; - line-height: 1; -} - -/* user-select is not a part of the CSS standard - may change behavior in the future */ -.postbox .hndle, -.stuffbox .hndle { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.postbox .inside, -.stuffbox .inside { - padding: 0 12px 12px; - line-height: 1.4em; - font-size: 13px; -} - -.postbox .inside { - margin: 11px 0; - position: relative; -} - -.postbox .inside > p:last-child, -.rss-widget ul li:last-child { - margin-bottom: 1px !important; -} - -.postbox.closed h3 { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.postbox table.form-table { - margin-bottom: 0; -} - -.postbox table.widefat { - -webkit-box-shadow: none; - box-shadow: none; -} - -.temp-border { - border: 1px dotted #ccc; -} - -.columns-prefs label { - padding: 0 5px; -} - -/* @todo: what is this doing here */ -#dashboard_right_now .versions .b, -#post-status-display, -#post-visibility-display, -#adminmenu .wp-submenu li.current, -#adminmenu .wp-submenu li.current a, -#adminmenu .wp-submenu li.current a:hover, -.media-item .percent, -.plugins .name, -#pass-strength-result.strong, -#pass-strength-result.short, -#ed_reply_toolbar #ed_reply_strong, -.item-controls .item-order a, -.feature-filter .feature-name { - font-weight: 600; -} - -/*------------------------------------------------------------------------------ - 21.0 - Admin Footer -------------------------------------------------------------------------------*/ - -#wpfooter { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 10px 20px; - color: #777; -} - -#wpfooter p { - font-size: 13px; - margin: 0; - line-height: 20px; -} - -#footer-thankyou { - font-style: italic; -} - -#wpfooter a { - text-decoration: none; -} - -#wpfooter a:hover { - text-decoration: underline; -} - -/*------------------------------------------------------------------------------ - 25.0 - Tabbed Admin Screen Interface (Experimental) -------------------------------------------------------------------------------*/ - -.nav-tab { - border: 1px solid #ccc; - border-bottom: none; - background: #e4e4e4; - color: #555; - font-size: 12px; - line-height: 16px; - display: inline-block; - padding: 4px 14px 6px; - text-decoration: none; - margin: -4px 4px -1px 0; -} - -.nav-tab:hover { - background-color: #fff; - color: #464646; -} - -.nav-tab-active { - color: #464646; -} - -.nav-tab-active, -.nav-tab-active:hover { - border-bottom: 1px solid #f1f1f1; - background: #f1f1f1; - color: #000; -} - -h2.nav-tab-wrapper, -h3.nav-tab-wrapper { - border-bottom: 1px solid #ccc; - padding-bottom: 0; - padding-left: 10px; -} - -h2 .nav-tab { - padding: 6px 10px; - font-weight: bold; - font-size: 15px; - line-height: 24px; -} - - -/*------------------------------------------------------------------------------ - 26.0 - Misc -------------------------------------------------------------------------------*/ - -.spinner { - background: url(../images/spinner.gif) no-repeat; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; - display: none; - float: right; - opacity: 0.7; - filter: alpha(opacity=70); - width: 20px; - height: 20px; - margin: 2px 5px 0; -} - -#template div { - margin-right: 190px; -} - -.metabox-holder h3 { - font-size: 14px; - padding: 8px 12px; - margin: 0; - line-height: 1.4; -} - -#templateside ul li a { - text-decoration: none; -} - -#sidemenu { - margin: -30px 15px 0 315px; - list-style: none; - position: relative; - float: right; - padding-left: 10px; - font-size: 12px; -} - -#sidemenu a { - padding: 0 7px; - display: block; - float: left; - line-height: 28px; - border-top: 1px solid #f9f9f9; - border-bottom: 1px solid #dfdfdf; - background-color: #f9f9f9; - -webkit-transition: none; - transition: none; -} - -#sidemenu li { - display: inline; - line-height: 200%; - list-style: none; - text-align: center; - white-space: nowrap; - margin: 0; - padding: 0; -} - -/* @todo: remove border radius */ -#sidemenu a.current { - font-weight: normal; - padding-left: 6px; - padding-right: 6px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - border: 1px solid #dfdfdf; - border-bottom-color: #f1f1f1; - background-color: #f1f1f1; - color: #000; -} - -#sidemenu li a .count-0 { - display: none; -} - -.plugin-install #description, -.plugin-install-network #description { - width: 60%; -} - -table .vers, -table .column-visible, -table .column-rating { - text-align: left; -} - -.error-message { - color: red; - font-weight: 600; -} - -/* Scrollbar fix for bulk upgrade iframe */ -body.iframe { - height: 98%; -} - -/* Upgrader styles, Specific to Language Packs */ -.lp-show-latest p { - display: none; -} -.lp-show-latest p:last-child, -.lp-show-latest .lp-error p { - display: block; -} - -/* - Only used once or twice in all of WP - deprecate for global style -------------------------------------------------------------------------------*/ -td.media-icon { - text-align: center; - width: 80px; - padding-top: 8px; - padding-bottom: 8px; -} - -td.media-icon img { - max-width: 80px; - max-height: 60px; -} - -td.image-icon img { - border: 1px solid rgba(0, 0, 0, 0.07); -} - -#howto { - font-size: 11px; - margin: 0 5px; - display: block; -} - -.importers td { - padding-right: 14px; -} - -.importers { - font-size: 16px; - width: auto; -} - -#post-body #post-body-content #namediv h3 { - margin-top: 0; -} - -#namediv h3 label { - vertical-align: baseline; -} - -#namediv table { - width: 100%; -} - -#namediv td.first { - width: 10px; - white-space: nowrap; -} - -#namediv input { - width: 98%; -} - -#namediv p { - margin: 10px 0; -} - -#submitdiv h3 { - margin-bottom: 0 !important; -} - -/* - Used - but could/should be deprecated with a CSS reset -------------------------------------------------------------------------------*/ -.zerosize { - height: 0; - width: 0; - margin: 0; - border: 0; - padding: 0; - overflow: hidden; - position: absolute; -} - -br.clear { - height: 2px; - line-height: 2px; -} - -.checkbox { - border: none; - margin: 0; - padding: 0; -} - -fieldset { - border: 0; - padding: 0; - margin: 0; -} - -.post-categories { - display: inline; - margin: 0; - padding: 0; -} - -.post-categories li { - display: inline; -} - -/* Star Ratings - Back-compat for pre-3.8 */ -div.star-holder { - position: relative; - height: 17px; - width: 100px; - background: url(../images/stars.png?ver=20121108) repeat-x bottom left; -} - -div.star-holder .star-rating { - background: url(../images/stars.png?ver=20121108) repeat-x top left; - height: 17px; - float: left; -} - -/* Star Ratings */ -.star-rating { - white-space: nowrap; -} -.star-rating .star { - display: inline-block; - width: 20px; - height: 20px; - -webkit-font-smoothing: antialiased; - font-size: 20px; - line-height: 1; - font-family: 'dashicons'; - text-decoration: inherit; - font-weight: normal; - font-style: normal; - vertical-align: top; - -webkit-transition: color .1s ease-in 0; - transition: color .1s ease-in 0; - text-align: center; - color: #0074a2; -} - -.star-rating .star-full:before { - content:'\f155'; -} - -.star-rating .star-half:before { - content:'\f459'; -} - -.rtl .star-rating .star-half { - -webkit-transform: rotateY(180deg); - -ms-transform: rotateY(180deg); - transform: rotateY(180deg); -} - -.star-rating .star-empty:before { - content:'\f154'; -} - -div.action-links { - font-weight: normal; - margin: 6px 0 0; -} - -/* Plugin install thickbox */ -#plugin-information { - background: #fff; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - height: 100%; - padding: 0; -} - -#plugin-information-scrollable { - overflow: auto; - height: 100%; -} - -#plugin-information-title { - padding: 0 20px; - background: #f5f5f5; - font-size: 22px; - font-weight: 600; - line-height: 56px; - position: relative; - top: 0; - right: 0; - left: 0; - height: 56px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -#plugin-information-title.with-banner { - margin-right: 0; - height: 250px; - bottom: 250px; - -webkit-background-size: 100% auto; - background-size: 100% auto; -} - -#plugin-information-title h2 { - font-size: 1em; - font-weight: bold; - padding: 0; - margin: 0; - max-width: 680px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -#plugin-information-title.with-banner h2 { - font-family: "Helvetica Neue", sans-serif; - display: inline-block; - font-size: 30px; - line-height: 50px; - padding: 0 15px; - margin: 174px 0 0 10px; - color: #fff; - background: rgba( 30, 30, 30, 0.9 ); - text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 ); - -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 ); - box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 ); - -webkit-border-radius: 8px; - border-radius: 8px; -} - -#plugin-information-title div.vignette { - display: none; -} - -#plugin-information-title.with-banner div.vignette { - display: block; - float: right; - top: 0; - height: 250px; - width: 830px; - margin: 0 -20px; - background: transparent; - -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 ); - box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 ); -} - -#plugin-information-tabs { - padding: 0 16px; - position: relative; - right: 0; - left: 0; - height: 36px; - z-index: 1; - border-bottom: 1px solid #ddd; - background: #f3f3f3; -} - -#plugin-information-tabs a { - position: relative; - float: left; - padding: 9px 10px; - margin: 0; - height: 18px; - line-height: 18px; - font-size: 14px; - text-decoration: none; - -webkit-transition: none; - transition: none; -} - -#plugin-information-tabs a.current { - margin: 0 -1px 0; - background: #fff; - border: 1px solid #ddd; - border-bottom-color: #fff; - padding-top: 8px; - color: #333; -} - -#plugin-information-tabs.with-banner a.current { - border-top: none; - padding-top: 9px; -} - -#plugin-information-tabs a:active, -#plugin-information-tabs a:focus { - outline: none; -} - -#plugin-information-content { - overflow: hidden; /* equal height column trick */ - background: #fff; - position: relative; - top: 0; - right: 0; - left: 0; - min-height: 100%; - /* Height of title + tabs + install now */ - min-height: -webkit-calc( 100% - 152px ); - min-height: calc( 100% - 152px ); -} - -#plugin-information-content.with-banner { - /* Height of banner + tabs + install now */ - min-height: -webkit-calc( 100% - 346px ); - min-height: calc( 100% - 346px ); -} - -#section-holder { - position: relative; - top: 0; - right: 250px; - bottom: 0; - left: 0; - margin-right: 250px; /* FYI box */ - padding: 10px 26px; - margin-bottom: -99930px; /* a bit less than the padding below to accommodate footer */ - padding-bottom: 99999px; /* equal height column trick */ -} - -#section-holder .updated { - margin: 16px 0; -} - -#plugin-information .fyi { - display: block; - float: right; - position: relative; - top: 0; - right: 0; - padding: 16px; - margin-bottom: -99930px; /* slightly less than the padding below to accommodate footer */ - padding-bottom: 99999px; /* equal height column trick */ - width: 217px; - border-left: 1px solid #ddd; - background: #f3f3f3; - color: #666; -} - -#plugin-information .fyi strong { - color: #464646; -} - -#plugin-information .fyi h3 { - font-weight: bold; - text-transform: uppercase; - font-size: 12px; - color: #666; - margin: 24px 0 8px; -} - -#plugin-information .fyi h2 { - font-size: 0.9em; - margin-bottom: 0; - margin-right: 0; -} - -#plugin-information .fyi ul { - padding: 0; - margin: 0; - list-style: none; -} - -#plugin-information .fyi li { - margin: 0 0 10px; -} - -#plugin-information .counter-container { - margin: 3px 0; -} - -#plugin-information .counter-label { - float: left; - margin-right: 5px; - min-width: 55px; -} - -#plugin-information .counter-back { - height: 17px; - width: 92px; - background-color: #ececec; - float: left; -} - -#plugin-information .counter-bar { - height: 17px; - background-color: #fddb5a; - float: left; -} - -#plugin-information .counter-count { - margin-left: 5px; -} - -#plugin-information .fyi ul.contributors { - margin-top: 10px; -} - -#plugin-information .fyi ul.contributors li { - display: inline-block; - margin-right: 8px; - vertical-align: middle; -} - -#plugin-information .fyi ul.contributors li { - display: inline-block; - margin-right: 8px; - vertical-align: middle; -} - -#plugin-information .fyi ul.contributors li img { - vertical-align: middle; - margin-right: 4px; -} - -#plugin-information-footer { - padding: 15px 16px; - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 28px; - border-top: 1px solid #ddd; - background: #f3f3f3; -} - -/* @noflip */ -#plugin-information .section { - direction: ltr; -} - -/* @noflip */ -#plugin-information .section ul, -#plugin-information .section ol { - list-style-type: disc; - margin-left: 24px; -} - -#plugin-information .section, -#plugin-information .section p { - font-size: 14px; - line-height: 1.7; -} - -#plugin-information #section-screenshots ol { - list-style: none; - margin: 0; -} - -#plugin-information #section-screenshots li img { - vertical-align: text-top; - margin-top: 16px; - max-width: 100%; - width: auto; - height: auto; - -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); - box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); -} - -/* @noflip */ -#plugin-information #section-screenshots li p { - font-style: italic; - padding-left: 20px; -} - -#plugin-information pre { - padding: 7px; - overflow: auto; - border: 1px solid #ccc; -} - -/* @noflip */ -#plugin-information .review { - overflow: hidden; /* clearfix */ - width: 100%; - margin-bottom: 20px; - border-bottom: 1px solid #e6e6e6; -} - -#plugin-information .review-title-section { - overflow: hidden; /* clearfix */ -} - -/* @noflip */ -#plugin-information .review-title-section h4 { - display: inline-block; - float: left; - margin: 0 6px 0 0; -} - -#plugin-information .reviewer-info p { - clear: both; - margin: 0; - padding-top: 2px; -} - -/* @noflip */ -#plugin-information .reviewer-info .avatar { - float: left; - margin: 4px 6px 0 0; -} - -/* @noflip */ -#plugin-information .reviewer-info .star-rating { - float: left; -} - -/* @noflip */ -#plugin-information .review-meta { - float: left; - margin-left: 0.75em; -} - -/* @noflip */ -#plugin-information .review-body { - float: left; - width: 100%; -} - -.plugin-version-author-uri { - font-size: 13px; -} - -@media screen and ( max-width: 771px ) { - #plugin-information-title.with-banner { - height: 100px; - bottom: 100px; - } - - #plugin-information-title.with-banner h2 { - margin-top: 30px; - font-size: 20px; - line-height: 40px; - max-width: 85%; - } - - #plugin-information-title.with-banner div.vignette { - height: 100px; - bottom: 100px; - width: 800%; - } - - #plugin-information-tabs { - overflow: hidden; /* clearfix */ - padding: 0; - height: auto; /* let tabs wrap */ - } - - #plugin-information-tabs a.current { - margin-bottom: 0; - border-bottom: none; - } - - #plugin-information .fyi { - float: none; - border: 1px solid #ddd; - position: static; - width: auto; - margin: 26px 26px 0; - padding-bottom: 0; /* reset from the two column height fix */ - } - - #section-holder { - position: static; - margin: 0; - padding-bottom: 70px; /* reset from the two column height fix, plus accomodate footer */ - } - - #plugin-information .fyi h3, - #plugin-information .fyi small { - display: none; - } - - #plugin-information-footer { - padding: 12px 16px 0; - height: 46px; - } -} - -/* Thickbox for Plugin Install screen */ -body.plugin-install-php #TB_window, -body.import-php #TB_window, -body.plugins-php #TB_window, -body.update-core-php #TB_window, -body.index-php #TB_window { - background: #fcfcfc url( ../images/spinner.gif ) no-repeat center; -} - -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - - body.plugin-install-php #TB_window, - body.import-php #TB_window, - body.plugins-php #TB_window, - body.update-core-php #TB_window, - body.index-php #TB_window { - background: #fcfcfc url( ../images/spinner-2x.gif ) no-repeat center; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; - } -} - -body.plugin-install-php #TB_title, -body.import-php #TB_title, -body.plugins-php #TB_title, -body.update-core-php #TB_title, -body.index-php #TB_title { - float: left; - height: 1px; -} - -body.plugin-install-php #TB_ajaxWindowTitle, -body.import-php #TB_ajaxWindowTitle, -body.plugins-php #TB_ajaxWindowTitle, -body.update-core-php #TB_ajaxWindowTitle, -body.index-php #TB_ajaxWindowTitle { - display: none; -} - -body.plugin-install-php .tb-close-icon, -body.import-php .tb-close-icon, -body.plugins-php .tb-close-icon, -body.update-core-php .tb-close-icon, -body.index-php .tb-close-icon { - left: auto; - right: -30px; - color: #eee; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -body.plugin-install-php #TB_closeWindowButton:focus, -body.plugin-install-php #TB_closeWindowButton:focus .tb-close-icon, -body.plugin-install-php .tb-close-icon:focus, -body.plugin-install-php .tb-close-icon:hover, -body.import-php #TB_closeWindowButton:focus, -body.import-php #TB_closeWindowButton:focus .tb-close-icon, -body.import-php .tb-close-icon:focus, -body.import-php .tb-close-icon:hover, -body.plugins-php #TB_closeWindowButton:focus, -body.plugins-php #TB_closeWindowButton:focus .tb-close-icon, -body.plugins-php .tb-close-icon:focus, -body.plugins-php .tb-close-icon:hover, -body.update-core-php #TB_closeWindowButton:focus, -body.update-core-php #TB_closeWindowButton:focus .tb-close-icon, -body.update-core-php .tb-close-icon:focus, -body.update-core-php .tb-close-icon:hover, -body.index-php #TB_closeWindowButton:focus, -body.index-php #TB_closeWindowButton:focus .tb-close-icon, -body.index-php .tb-close-icon:focus, -body.index-php .tb-close-icon:hover { - color: #2ea2cc; - outline: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -body.plugin-install-php .tb-close-icon:before, -body.import-php .tb-close-icon:before, -body.plugins-php .tb-close-icon:before, -body.update-core-php .tb-close-icon:before, -body.index-php .tb-close-icon:before { - content: "\f335"; - font-size: 32px; -} - -/* move plugin install close icon to top on narrow screens */ -@media screen and ( max-width: 830px ) { - body.plugin-install-php .tb-close-icon, - body.import-php .tb-close-icon, - body.plugins-php .tb-close-icon, - body.update-core-php .tb-close-icon, - body.index-php .tb-close-icon { - right: 0; - top: -30px; - } -} - -/* @todo: move this. */ -img { - border: none; -} - -/* Header */ -/* @todo: are these also specific to Press This? */ -#wphead { - border-bottom: 1px solid #dfdfdf; -} - -#wphead h1 a { - color: #464646; -} - -/* @todo: these seem misplaced */ -.js .meta-box-sortables .postbox:hover .handlediv { - margin-right: 0 !important; -} - -/* Metabox collapse arrow indicators */ -.js .sidebar-name .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox .handlediv:before { - right: 12px; - font: normal 20px/1 'dashicons'; - speak: none; - display: inline-block; - padding: 8px 10px; - top: 0; - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - -.js #widgets-left .sidebar-name .sidebar-name-arrow { - display: none; -} - -.js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow, -.js #widgets-left .sidebar-name:hover .sidebar-name-arrow { - display: block; -} - -/* Show the arrow only on hover */ -.js .sidebar-name .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox .handlediv:before { - content: '\f142'; -} - -.js .widgets-holder-wrap.closed .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox.closed .handlediv:before { - content: '\f140'; -} - -.error a { - text-decoration: underline; -} - -.updated a { - text-decoration: none; - padding-bottom: 2px; -} - -/* @todo: appears to be Press This only and overridden */ -#photo-add-url-div input[type="text"] { - width: 300px; -} - -/* Theme/Plugin Editor */ -.alignleft h3 { - margin: 0; -} - -#template textarea { - font-family: Consolas, Monaco, monospace; - font-size: 13px; - width: 97%; - background: #f9f9f9; - outline: none; -} - -/* @noflip */ -#template textarea, -#docs-list { - direction: ltr; -} - -#template p { - width: 97%; -} - -#templateside { - float: right; - width: 190px; - word-wrap: break-word; -} - -#templateside h3, -#postcustomstuff p.submit { - margin: 0; -} - -#templateside h4 { - margin: 1em 0 0; -} - -#templateside ol, -#templateside ul { - margin: .5em 0; - padding: 0; -} - -#templateside li { - margin: 4px 0; -} - -#templateside a, -.theme-editor-php .highlight { - display: block; - padding: 3px 3px 3px 12px; - text-decoration: none; -} - -.theme-editor-php .highlight { - margin: -3px 3px -3px -12px; -} - -#templateside .highlight { - border: none; - font-weight: bold; -} - -.nonessential { - color: #666; - font-size: 11px; - font-style: italic; - padding-left: 12px; -} - -#documentation { - margin-top: 10px; -} - -#documentation label { - line-height: 22px; - vertical-align: baseline; - font-weight: 600; -} - -.fileedit-sub { - padding: 10px 0 8px; - line-height: 180%; -} - -/* @todo: can we use a common class for these? */ -.nav-menus-php .item-edit:before, -.widget-top a.widget-action:after, -.control-section .accordion-section-title:after, -.accordion-section-title:after { - right: 0; - content: '\f140'; - border: none; - background: none; - font: normal 20px/1 'dashicons'; - speak: none; - display: block; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - -.widget-action, -.handlediv, -.item-edit, -.sidebar-name-arrow, -.accordion-section-title:after { - color: #aaa; -} - -.widget-action:hover, -.handlediv:hover, -.item-edit:hover, -.sidebar-name:hover .sidebar-name-arrow, -.accordion-section-title:hover:after { - color: #777; -} - -.widget-top a.widget-action:after { - padding: 12px 12px 0; -} - -.nav-menus-php .item-edit:before { - line-height: 2.1; -} - -.control-section .accordion-section-title:after, -.accordion-section-title:after { - float: right; - right: 20px; - top: -2px; -} - -.control-section.open .accordion-section-title:after, -#customize-info.open .accordion-section-title:after, -.nav-menus-php .menu-item-edit-active .item-edit:before, -.widget.open .widget-top a.widget-action:after { - content: '\f142'; -} - -/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ -.ui-sortable, -.ui-draggable { - -ms-touch-action: none; - touch-action: none; -} - -.meta-box-sortables.ui-sortable, -.widgets-holder-wrap .ui-draggable, -.widgets-holder-wrap .ui-sortable, -.menu.ui-sortable { - -ms-touch-action: auto; - touch-action: auto; -} - -.meta-box-sortables.ui-sortable .hndle, -.menu.ui-sortable .menu-item-handle { - -ms-touch-action: none; - touch-action: none; -} - -/* Accordion */ - -.accordion-section { - border-bottom: 1px solid #dfdfdf; - margin: 0; -} - -.accordion-section.open .accordion-section-content, -.no-js .accordion-section .accordion-section-content { - display: block; -} - -.accordion-section.open:hover { - border-bottom-color: #dfdfdf; -} - -.accordion-section-content { - display: none; - padding: 10px 20px 15px; - overflow: hidden; - background: #fff; -} - -.accordion-section-title { - margin: 0; - padding: 12px 15px 15px; - position: relative; - border-left: 1px solid #dfdfdf; - border-right: 1px solid #dfdfdf; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.js .accordion-section-title { - cursor: pointer; -} - -.js .accordion-section-title:after { - position: absolute; - top: 12px; - right: 10px; - z-index: 1; -} - -.accordion-section-title:focus { - outline: none; -} - -.accordion-section-title:hover:after, -.accordion-section-title:focus:after { - border-color: #aaa transparent; -} - -.cannot-expand .accordion-section-title { - cursor: auto; -} - -.cannot-expand .accordion-section-title:after { - display: none; -} - -.control-section .accordion-section-title { - border-left: none; - border-right: none; - padding: 10px 10px 11px 14px; - line-height: 21px; - background: #fff; -} - -.control-section .accordion-section-title:after { - top: 11px; -} - -.js .control-section:hover .accordion-section-title, -.js .control-section .accordion-section-title:hover, -.js .control-section.open .accordion-section-title, -.js .control-section .accordion-section-title:focus { - color: #222; - background: #f5f5f5; -} - -.control-section.open .accordion-section-title { - /* When expanded */ - border-bottom: 1px solid #dfdfdf; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/* @todo: de-duplication */ -@media only screen and (min-width: 769px) { - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (max-width: 860px) { - - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (min-width: 980px) { - - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (max-width: 768px) { - /* categories */ - #col-left { - width: 100%; - } - - #col-right { - width: 100%; - } -} - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - /* Back-compat for pre-3.8 */ - div.star-holder, - div.star-holder .star-rating { - background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left; - -webkit-background-size: 21px 37px; - background-size: 21px 37px; - } - - .spinner { - background-image: url(../images/spinner-2x.gif); - } - - /* @todo: evaluate - most of these were likely replaced by dashicons */ - .curtime #timestamp, - #screen-meta-links a.show-settings, - .widget-top a.widget-action, - .widget-top a.widget-action:hover, - .sidebar-name-arrow, - .sidebar-name:hover .sidebar-name-arrow, - .meta-box-sortables .postbox:hover .handlediv, - .tagchecklist span a, - #bulk-titles div a, - .tagchecklist span a:hover, - #bulk-titles div a:hover { - background: none !important; - } - -} - -@-ms-viewport { - width: device-width; -} - -@media screen and ( max-width: 782px ) { - html.wp-toolbar { - padding-top: 46px; - } - - body { - min-width: 240px; - overflow-x: hidden; - } - - body * { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; - } - - #wpcontent { - position: relative; - margin-left: 0; - padding-left: 10px; - } - - #wpbody-content { - padding-bottom: 100px; - } - - .wrap { - margin-right: 12px; - margin-left: 0; - } - - .col-wrap { - padding: 0; - } - - /* Hidden Elements */ - #screen-meta, - #screen-meta-links, - #collapse-menu, - .post-format-select { - display: none !important; - } - - .wrap .add-new-h2, .wrap .add-new-h2:active { - padding: 10px 15px; - font-size: 14px; - } - - .wp-color-result { - height: auto; - padding-left: 45px; - } - - .wp-color-result:after { - font-size: 14px; - height: auto; - padding: 6px 14px; - } - - /* Feedback Messages */ - .wrap div.updated, .wrap div.error, .media-upload-form div.error { - margin: 20px 0 10px 0; - padding: 5px 10px; - font-size: 14px; - line-height: 175%; - } - - .wrap .icon32 + h2 { - margin-top: -2px; - } - - .wp-responsive-open #wpbody { - right: -190px; - } - - code { - word-wrap: break-word; - } - - /* General Metabox */ - .postbox { - font-size: 14px; - } - - .metabox-holder h3 { - padding: 12px; - } - - .postbox .handlediv { - margin-top: 3px; - } - - /* Subsubsub Nav */ - .subsubsub { - font-size: 16px; - text-align: center; - margin-bottom: 15px; - } - - /* Theme/Plugin File Editor */ - #templateside { - float: none; - width: auto; - } - - #templateside li { - margin: 0; - } - - #templateside li a { - display: block; - padding: 5px; - } - - #templateside .highlight { - padding: 5px; - margin-left: -5px; - margin-top: -5px; - } - - #template div { - float: none; - margin: 0; - width: auto; - } - - #template textarea { - width: 100%; - } - - .fileedit-sub .alignright { - margin-top: 15px; - } - - #wpfooter { - display: none; - } - - #comments-form .checkforspam { - display: none; - } -} - -/* Smartphone */ -@media screen and (max-width: 600px) { - /* Disable horizontal scroll when responsive menu is open - since we push the main content off to the right. */ - #wpwrap.wp-responsive-open { - overflow-x: hidden; - } - - html.wp-toolbar { - padding-top: 0; - } - - #wpbody { - padding-top: 46px; - } - - /* Keep full-width boxes on Edit Post page from causing horizontal scroll */ - div#post-body.metabox-holder.columns-1 { - overflow-x: hidden; - } -} diff --git a/src/wp-admin/css/common.scss b/src/wp-admin/css/common.scss new file mode 100644 index 0000000..30f0e48 --- /dev/null +++ b/src/wp-admin/css/common.scss @@ -0,0 +1,3218 @@ +/* 2 column liquid layout */ + +#wpwrap { + height: auto; + min-height: 100%; + width: 100%; + position: relative; + -webkit-font-smoothing: subpixel-antialiased; +} + +#wpcontent { + height: 100%; + padding-left: 20px; + margin-left: 160px; +} + +#wpfooter { + margin-left: 160px; +} + +.folded { + #wpcontent, #wpfooter { + margin-left: 36px; + } +} + +#wpbody-content { + padding-bottom: 65px; + float: left; + width: 100%; + overflow: visible !important; +} + +/* inner 2 column liquid layout */ + +.inner-sidebar { + float: right; + clear: right; + display: none; + width: 281px; + position: relative; +} + +.columns-2 .inner-sidebar { + margin-right: auto; + width: 286px; + display: block; +} + +.inner-sidebar #side-sortables, .columns-2 .inner-sidebar #side-sortables { + min-height: 300px; + width: 280px; + padding: 0; +} + +.has-right-sidebar { + .inner-sidebar { + display: block; + } + #post-body { + float: left; + clear: left; + width: 100%; + margin-right: -2000px; + } + #post-body-content { + margin-right: 300px; + float: none; + width: auto; + } +} + +/* 2 columns main area */ + +#col-container, #col-left, #col-right { + overflow: hidden; + padding: 0; + margin: 0; +} + +#col-left { + width: 35%; +} + +#col-right { + float: right; + clear: right; + width: 65%; +} + +.col-wrap { + padding: 0 7px; +} + +/* utility classes */ + +.alignleft { + float: left; +} + +.alignright { + float: right; +} + +.textleft { + text-align: left; +} + +.textright { + text-align: right; +} + +.clear { + clear: both; +} + +/* Hide visually but not from screen readers */ + +.screen-reader-text { + position: absolute; + margin: -1px; + padding: 0; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; + span { + position: absolute; + margin: -1px; + padding: 0; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; + } +} + +.ui-helper-hidden-accessible { + position: absolute; + margin: -1px; + padding: 0; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} + +.screen-reader-shortcut { + position: absolute; + top: -1000em; + &:focus { + left: 6px; + top: -25px; + height: auto; + width: auto; + display: block; + font-size: 14px; + font-weight: 600; + padding: 15px 23px 14px; + background: #f1f1f1; + color: #21759b; + z-index: 100000; + line-height: normal; + -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + text-decoration: none; + outline: none; + } +} + +.hidden { + display: none; +} + +.js { + .closed .inside, .hide-if-js { + display: none; + } +} + +.no-js .hide-if-no-js { + display: none; +} + +.js { + &.wp-core-ui .hide-if-js, .wp-core-ui .hide-if-js { + display: none; + } +} + +.no-js { + &.wp-core-ui .hide-if-no-js, .wp-core-ui .hide-if-no-js { + display: none; + } +} + +/* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */ + +.widget-top, .menu-item-handle, .widget-inside, #menu-settings-column .accordion-container, #menu-management .menu-edit, .manage-menus, table.widefat, .stuffbox, p.popular-tags, .widgets-holder-wrap, .wp-editor-container, .popular-tags, .feature-filter, .imgedit-group { + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} + +table.widefat, .wp-editor-container, .stuffbox, p.popular-tags, .widgets-holder-wrap, .popular-tags, .feature-filter, .imgedit-group { + background: #fff; +} + +/* general */ + +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +html { + background: #f1f1f1; +} + +body { + color: #444; + font-family: "Open Sans", sans-serif; + font-size: 13px; + line-height: 1.4em; + min-width: 600px; + &.iframe { + min-width: 0; + padding-top: 1px; + } + &.modal-open { + overflow: hidden; + } +} + +iframe, img { + border: 0; +} + +td { + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} + +a { + color: #0074a2; + -webkit-transition-property: border, background, color; + transition-property: border, background, color; + -webkit-transition-duration: .05s; + transition-duration: .05s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + outline: 0; +} + +div { + outline: 0; +} + +a { + &:hover, &:active { + color: #2ea2cc; + } + &:focus { + color: #124964; + -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); + } +} + +.ie8 a:focus { + outline: #5b9dd9 solid 1px; +} + +#adminmenu a:focus, .screen-reader-text:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; +} + +blockquote, q { + quotes: none; +} + +blockquote { + &:before, &:after { + content: ''; + content: none; + } +} + +q { + &:before, &:after { + content: ''; + content: none; + } +} + +p { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; +} + +blockquote { + margin: 1em; +} + +li, dd { + margin-bottom: 6px; +} + +h1, h2, h3, h4, h5, h6 { + display: block; + font-weight: 600; +} + +h1 { + font-size: 2em; + margin: .67em 0; +} + +h2 { + color: #222; + font-size: 1.5em; + margin: .83em 0; + font-weight: 400; +} + +h3 { + color: #222; + font-size: 1.3em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.67em; + margin: 2.33em 0; +} + +ul, ol { + padding: 0; +} + +ul { + list-style: none; +} + +ol { + list-style-type: decimal; + margin-left: 2em; +} + +ul { + &.ul-disc { + list-style: disc outside; + } + &.ul-square { + list-style: square outside; + } +} + +ol.ol-decimal { + list-style: decimal outside; +} + +ul { + &.ul-disc, &.ul-square { + margin-left: 1.8em; + } +} + +ol.ol-decimal { + margin-left: 1.8em; +} + +ul { + &.ul-disc > li, &.ul-square > li { + margin: 0 0 0.5em; + } +} + +ol.ol-decimal > li { + margin: 0 0 0.5em; +} + +/* @noflip */ + +.ltr { + direction: ltr; +} + +/* @noflip */ + +.code, code { + font-family: Consolas, Monaco, monospace; + direction: ltr; +} + +kbd, code { + padding: 3px 5px 2px 5px; + margin: 0 1px; + background: #eaeaea; + background: rgba(0, 0, 0, 0.07); + font-size: 13px; +} + +.subsubsub { + list-style: none; + margin: 8px 0 0; + padding: 0; + font-size: 13px; + float: left; + color: #666; + a { + line-height: 2; + padding: .2em; + text-decoration: none; + .count { + color: #999; + font-weight: normal; + } + &.current { + .count { + color: #999; + font-weight: normal; + } + font-weight: 600; + border: none; + } + } + li { + display: inline-block; + margin: 0; + padding: 0; + white-space: nowrap; + } +} + +/* .widefat - main style for tables */ + +.widefat { + border-spacing: 0; + width: 100%; + clear: both; + margin: 0; + * { + word-wrap: break-word; + } + a { + text-decoration: none; + } + td, th { + padding: 8px 10px; + } + thead th { + border-bottom: 1px solid #e1e1e1; + } + tfoot th { + border-top: 1px solid #e1e1e1; + border-bottom: none; + } + .no-items td { + border-bottom-width: 0; + } + td { + vertical-align: top; + font-size: 13px; + line-height: 1.5em; + p, ol, ul { + font-size: 13px; + line-height: 1.5em; + } + } + th { + text-align: left; + line-height: 1.3em; + font-size: 14px; + input { + margin: 0 0 0 8px; + padding: 0; + vertical-align: text-top; + } + } + .check-column { + width: 2.2em; + padding: 6px 0 25px; + vertical-align: top; + } + th input[type=checkbox] { + margin-top: -1px; + } + tbody th.check-column { + padding: 9px 0 22px; + } + &.media .check-column { + padding-top: 8px; + } + thead th.check-column, tbody th.check-column, tfoot th.check-column { + padding: 11px 0 0 3px; + } + thead th.check-column { + padding-top: 10px; + } +} + +.update-php div { + &.updated, &.error { + margin-left: 0; + } +} + +.no-js .widefat { + thead .check-column input, tfoot .check-column input { + display: none; + } +} + +.widefat .num, .column-comments, .column-links, .column-posts { + text-align: center; +} + +.widefat th#comments { + vertical-align: middle; +} + +.wrap { + margin: 10px 20px 0 2px; +} + +div { + &.updated, &.error { + padding: 0 0.6em; + margin: 5px 15px 2px; + } + &.updated p, &.error p { + margin: 0.5em 0; + padding: 2px; + } +} + +.wrap div { + &.updated, &.error { + margin: 5px 0 15px; + } +} + +.media-upload-form div.error { + margin: 5px 0 15px; +} + +div { + &.updated { + border-left: 4px solid #7ad03a; + padding: 1px 12px; + background-color: #fff; + -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + } + &.error { + border-left: 4px solid #dd3d36; + background: #fff; + -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + padding: 1px 12px; + } +} + +.attention { + color: #2ea2cc; +} + +.wrap h2, .subtitle { + font-weight: normal; + margin: 0; +} + +.wrap h2 { + font-size: 23px; + font-weight: 400; + padding: 9px 15px 4px 0; + line-height: 29px; +} + +.subtitle { + color: #777; + font-size: 14px; + padding-left: 25px; +} + +.wrap { + .add-new-h2 { + margin-left: 4px; + padding: 4px 8px; + position: relative; + top: -3px; + text-decoration: none; + border: none; + -webkit-border-radius: 2px; + border-radius: 2px; + background: #e0e0e0; + text-shadow: none; + font-weight: 600; + font-size: 13px; + &:active { + margin-left: 4px; + padding: 4px 8px; + position: relative; + top: -3px; + text-decoration: none; + border: none; + -webkit-border-radius: 2px; + border-radius: 2px; + background: #e0e0e0; + text-shadow: none; + font-weight: 600; + font-size: 13px; + } + &:hover { + background: #2ea2cc; + color: #fff; + } + } + h2.long-header { + padding-right: 0; + } +} + +.wp-dialog { + background-color: #fff; +} + +.widgets-chooser ul, #widgets-left .widget-in-question .widget-top, #available-widgets .widget-top:hover, div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { + border-color: #999; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.sorthelper { + background-color: #ccf3fa; +} + +.ac_match, .subsubsub a.current { + color: #000; +} + +.alternate, .alt { + background-color: #f9f9f9; +} + +.bar { + background-color: #e8e8e8; + border-right-color: #99d; +} + +.media-upload-form label.form-help, td.help { + color: #9a9a9a; +} + +/* Helper classes for plugins to leverage the active WordPress color scheme */ + +.highlight { + background-color: #e4f2fd; + color: #000; +} + +.wp-ui-primary { + color: #fff; + background-color: #333; +} + +.wp-ui-text-primary { + color: #333; +} + +.wp-ui-highlight { + color: white; + background-color: #1e8cbe; +} + +.wp-ui-text-highlight { + color: #1e8cbe; +} + +.wp-ui-notification { + color: #fff; + background-color: #d54e21; +} + +.wp-ui-text-notification { + color: #d54e21; +} + +.wp-ui-text-icon { + color: #999; +} + +/*------------------------------------------------------------------------------ + 1.0 - Text Styles +------------------------------------------------------------------------------*/ + +.widget .widget-top, .postbox .hndle, .stuffbox .hndle, .control-section .accordion-section-title, .sidebar-name, #nav-menu-header, #nav-menu-footer, .menu-item-handle, .checkbox, .side-info, #your-profile #rich_editing { + line-height: 1.4em; +} + +.widefat { + thead th, tfoot th { + line-height: 1.4em; + } +} + +.widget .widget-top, .menu-item-handle { + background: #fafafa; + color: #222; +} + +.postbox .hndle, .stuffbox .hndle { + border-bottom: 1px solid #eee; +} + +.quicktags, .search { + background-color: #ccc; + color: #000; + font-size: 12px; +} + +.icon32 { + display: none; +} + +/* @todo can we combine these into a class or use an existing dashicon one? */ + +#welcome-panel.welcome-panel .welcome-panel-close:before, .tagchecklist span a:before, #bulk-titles div a:before { + background: none; + color: #bbb; + content: '\f153'; + display: block !important; + font: normal 16px/1 'dashicons'; + speak: none; + height: 20px; + text-align: center; + width: 20px; + -webkit-font-smoothing: antialiased !important; +} + +#welcome-panel.welcome-panel .welcome-panel-close:before { + margin: 0; +} + +.tagchecklist span a:before, #bulk-titles div a:before { + margin: 2px 0; +} + +#welcome-panel.welcome-panel .welcome-panel-close:hover:before, .tagchecklist span a:hover:before, #bulk-titles div a:hover:before { + color: #c00; +} + +.key-labels label { + line-height: 24px; +} + +strong, b { + font-weight: 600; +} + +.pre { + /* https://developer.mozilla.org/en-US/docs/CSS/white-space */ + white-space: pre-wrap; + /* css-3 */ + word-wrap: break-word; + /* IE 5.5 - 7 */ +} + +.howto { + color: #666; + font-style: italic; + display: block; +} + +p.install-help { + margin: 8px 0; + font-style: italic; +} + +.no-break { + white-space: nowrap; +} + +hr { + border: 0; + border-top: 1px solid #ddd; + border-bottom: 1px solid #fafafa; +} + +.row-actions span { + &.delete a, &.trash a, &.spam a { + color: #a00; + } +} + +.plugins a.delete, #all-plugins-table .plugins a.delete, #search-plugins-table .plugins a.delete, .submitbox .submitdelete { + color: #a00; +} + +#media-items a { + &.delete, &.delete-permanently { + color: #a00; + } +} + +#nav-menu-footer .menu-delete { + color: #a00; +} + +abbr.required, .file-error, .widget-control-remove:hover { + color: #f00; + text-decoration: none; + border: none; +} + +.row-actions { + .delete a:hover, .trash a:hover, .spam a:hover { + color: #f00; + text-decoration: none; + border: none; + } +} + +.plugins a.delete:hover, #all-plugins-table .plugins a.delete:hover, #search-plugins-table .plugins a.delete:hover, .submitbox .submitdelete:hover { + color: #f00; + text-decoration: none; + border: none; +} + +#media-items a { + &.delete:hover, &.delete-permanently:hover { + color: #f00; + text-decoration: none; + border: none; + } +} + +#nav-menu-footer .menu-delete:hover { + color: #f00; + text-decoration: none; + border: none; +} + +/*------------------------------------------------------------------------------ + 3.0 - Actions +------------------------------------------------------------------------------*/ + +#major-publishing-actions { + padding: 10px; + clear: both; + border-top: 1px solid #ddd; + background: #f5f5f5; +} + +#delete-action { + line-height: 28px; + vertical-align: middle; + text-align: left; + float: left; +} + +#publishing-action { + text-align: right; + float: right; + line-height: 23px; + .spinner { + float: left; + } +} + +#misc-publishing-actions { + padding: 6px 0 0; +} + +.misc-pub-section { + padding: 6px 10px 8px; +} + +#minor-publishing-actions { + padding: 10px 10px 0 10px; + text-align: right; +} + +#save-post { + float: left; +} + +.preview { + float: right; +} + +#sticky-span { + margin-left: 18px; +} + +.side-info { + margin: 0; + padding: 4px; + font-size: 11px; + h5 { + padding-bottom: 7px; + font-size: 14px; + margin: 12px 2px 5px; + border-bottom: 1px solid #dadada; + } + ul { + margin: 0; + padding-left: 18px; + list-style: square; + color: #666; + } +} + +.approve { + display: none; +} + +.unapproved { + .unapprove { + display: none; + } + .approve { + display: inline; + } +} + +.spam .approve, .trash .approve { + display: inline; +} + +td.action-links, th.action-links { + text-align: right; +} + +/* Filter bar */ + +.wp-filter { + display: inline-block; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 12px 0 25px; + padding: 0 20px; + width: 100%; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + border: 1px solid #e5e5e5; + background: #fff; + color: #555; + font-size: 13px; + a { + text-decoration: none; + } +} + +.filter-count { + display: inline-block; + vertical-align: middle; + min-width: 4em; +} + +.title-count, .filter-count .count { + display: inline-block; + position: relative; + top: -1px; + padding: 4px 10px; + -webkit-border-radius: 30px; + border-radius: 30px; + background: #777; + color: #fff; + font-size: 14px; + font-weight: 600; +} + +/* not a part of filter bar, but derived from it, so here for now */ + +.title-count { + display: inline; + top: -3px; + margin-left: 5px; + margin-right: 20px; +} + +.filter-links { + display: inline-block; + margin: 0; + li { + display: inline-block; + margin: 0; + > a { + display: inline-block; + margin: 0 10px; + padding: 15px 0; + border-bottom: 4px solid #fff; + color: #666; + cursor: pointer; + } + } + .current { + -webkit-box-shadow: none; + box-shadow: none; + border-bottom: 4px solid #666; + color: #222; + } + li > a { + &:hover, &:focus { + color: #2ea2cc; + } + } +} + +.show-filters .filter-links a.current { + &:hover, &:focus { + color: #2ea2cc; + } +} + +.wp-filter { + .search-form { + float: right; + margin-top: 9px; + input[type="search"] { + margin: 0; + padding: 3px 5px; + width: 280px; + font-size: 16px; + font-weight: 300; + line-height: 1.5; + } + select { + height: 33px; + vertical-align: top; + } + } + .drawer-toggle { + display: inline-block; + margin: 0 10px; + padding: 4px 6px; + color: #666; + cursor: pointer; + &:before { + display: inline-block; + vertical-align: top; + content: "\f111"; + margin: 0 5px 0 0; + width: 16px; + height: 16px; + color: #777; + -webkit-transition: color .1s ease-in 0; + transition: color .1s ease-in 0; + font-family: "dashicons"; + font-size: 16px; + line-height: 1; + text-align: center; + text-decoration: inherit; + font-weight: normal; + font-style: normal; + -webkit-font-smoothing: antialiased; + } + &:hover { + color: #2ea2cc; + &:before { + color: #2ea2cc; + } + } + &.current:before { + color: #fff; + } + } +} + +.filter-drawer { + display: none; + margin: 0 -20px; + padding: 20px; + border-top: 1px solid #eee; + background: #fafafa; +} + +.show-filters { + .filter-drawer { + display: block; + overflow: hidden; + } + .wp-filter .drawer-toggle { + &:hover, &:focus { + background: rgb(46, 162, 204); + } + } + .filter-links a.current { + border-bottom: none; + } + .wp-filter .drawer-toggle { + -webkit-border-radius: 2px; + border-radius: 2px; + border: none; + background: #777; + color: #fff; + &:before { + color: #fff; + } + } +} + +.filter-group { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + margin: 0 1% 0 0; + padding: 10px; + width: 19%; + background: #fff; + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + &.wide { + width: 38%; + } + h4 { + position: relative; + margin: 0; + } +} + +.filter-drawer { + ol { + margin: 20px 0 0; + list-style-type: none; + font-size: 12px; + } + li { + display: inline-block; + vertical-align: top; + margin: 5px 0; + padding-right: 25px; + width: 160px; + list-style-type: none; + } + .buttons { + margin-bottom: 20px; + .button span { + display: inline-block; + opacity: 0.8; + font-size: 12px; + text-indent: 10px; + } + } +} + +.wp-filter .button.clear-filters { + display: none; + margin: 0 0 20px 10px; +} + +.filtered-by { + display: none; + margin: 0; + > span { + font-weight: 600; + } + a { + margin-left: 10px; + } + .tags { + display: inline; + } + .tag { + margin: 0 5px; + padding: 4px 8px; + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; + font-size: 11px; + } +} + +.filters-applied { + .filter-group { + display: none !important; + } + .filter-drawer { + .buttons, br { + display: none !important; + } + } + .filtered-by { + display: block; + } + .filter-drawer { + padding: 20px; + } +} + +.show-filters { + .content-filterable, &.filters-applied.loading-content .content-filterable { + display: none; + } +} + +.loading-content .content-filterable, .error .content-filterable { + display: none; +} + +.show-filters.filters-applied .content-filterable { + display: block; +} + +.loading-content .spinner { + display: block; + margin: 40px auto 0; + float: none; +} + +@media only screen and (max-width: 1120px) { + .wp-filter .search-form { + float: none; + margin: 20px 0; + } + .filter-drawer { + border-bottom: 1px solid #eee; + } + .filter-group { + margin-bottom: 0; + margin-top: 5px; + width: 100%; + li { + margin: 10px 0; + } + } +} + +@media only screen and (max-width: 782px) { + .filter-group { + width: 100%; + li { + width: 100%; + } + } +} + +/*------------------------------------------------------------------------------ + 4.0 - Notifications +------------------------------------------------------------------------------*/ + +#update-nag, .update-nag { + display: inline-block; + line-height: 19px; + padding: 11px 15px; + font-size: 14px; + text-align: left; + margin: 25px 20px 0 2px; + background-color: #fff; + border-left: 4px solid #ffba00; + -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); +} + +.update-message { + color: #000; +} + +ul#dismissed-updates { + display: none; +} + +form.upgrade { + margin-top: 8px; + .hint { + font-style: italic; + font-size: 85%; + margin: -0.5em 0 2em 0; + } +} + +.update-php .spinner { + float: none; + margin: -4px 0; +} + +#ajax-loading, .ajax-loading, .ajax-feedback, .imgedit-wait-spin, .list-ajax-loading { + /* deprecated */ + visibility: hidden; +} + +#ajax-response.alignleft { + margin-left: 2em; +} + +/* @todo: this does not need its own section anymore */ +/*------------------------------------------------------------------------------ + 6.0 - Admin Header +------------------------------------------------------------------------------*/ + +#adminmenu a, #sidemenu a, #taglist a, #catlist a { + text-decoration: none; +} + +/*------------------------------------------------------------------------------ + 6.1 - Screen Options Tabs +------------------------------------------------------------------------------*/ + +#screen-options-wrap { + margin: 0; + padding: 8px 20px 12px; + position: relative; +} + +#contextual-help-wrap { + margin: 0; + padding: 8px 20px 12px; + position: relative; + overflow: auto; + margin-left: 0 !important; +} + +#screen-meta .screen-reader-text { + visibility: hidden; +} + +#screen-meta-links { + margin: 0 20px 0 0; + a { + padding: 3px 6px 3px 16px; + &:focus { + outline: none; + } + } +} + +/* screen options and help tabs revert */ + +#screen-meta { + display: none; + margin: 0 20px -1px 0px; + position: relative; + background-color: #fff; + border: 1px solid #ddd; + border-top: none; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.025); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.025); +} + +#screen-options-link-wrap, #contextual-help-link-wrap { + float: right; + height: 28px; + margin: 0 0 0 6px; + border: 1px solid #ddd; + border-top: none; + background: #fff; + -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); +} + +#screen-meta-links { + .screen-meta-toggle { + position: relative; + top: 0; + } + a { + color: #777; + &:hover, &:active, &:focus { + color: #333; + } + &.show-settings { + display: block; + font-size: 13px; + height: 22px; + line-height: 22px; + text-decoration: none; + z-index: 1; + } + &:after { + right: 0; + content: '\f140'; + font: normal 20px/1 'dashicons'; + speak: none; + display: inline-block; + padding: 0 5px 0 0; + bottom: 2px; + position: relative; + vertical-align: bottom; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #bbb; + } + &.screen-meta-active:after { + content: '\f142'; + } + &.show-settings:hover { + text-decoration: none; + } + } +} + +/* end screen options and help tabs */ + +.toggle-arrow { + background-repeat: no-repeat; + background-position: top left; + background-color: transparent; + height: 22px; + line-height: 22px; + display: block; +} + +.toggle-arrow-active { + background-position: bottom left; +} + +#screen-options-wrap h5, #contextual-help-wrap h5 { + margin: 8px 0; + font-size: 13px; +} + +.metabox-prefs { + label { + display: inline-block; + padding-right: 15px; + line-height: 30px; + input { + &[type=checkbox] { + margin-top: -4px; + margin-right: 6px; + } + margin: 0 5px 0 2px; + } + } + .columns-prefs label input { + margin: 0 2px; + } + label a { + display: none; + } +} + +/*------------------------------------------------------------------------------ + 6.2 - Help Menu +------------------------------------------------------------------------------*/ + +#contextual-help-wrap { + padding: 0; +} + +#contextual-help-columns { + position: relative; +} + +#contextual-help-back { + position: absolute; + top: 0; + bottom: 0; + left: 150px; + right: 170px; + border: 1px solid #e1e1e1; + border-top: none; + border-bottom: none; + background: #f6fbfd; +} + +#contextual-help-wrap.no-sidebar #contextual-help-back { + right: 0; + border-right-width: 0; + -webkit-border-bottom-right-radius: 2px; + border-bottom-right-radius: 2px; +} + +.contextual-help-tabs { + float: left; + width: 150px; + margin: 0; + ul { + margin: 1em 0; + } + li { + margin-bottom: 0; + list-style-type: none; + border-style: solid; + border-width: 0 0 0 2px; + border-color: transparent; + } + a { + display: block; + padding: 5px 5px 5px 12px; + line-height: 18px; + text-decoration: none; + border: 1px solid transparent; + border-right: none; + border-left: none; + &:hover { + color: #333; + } + } + .active { + padding: 0; + margin: 0 -1px 0 0; + border-left: 2px solid #2ea2cc; + background: #f6fbfd; + -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02); + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02); + a { + border-color: #e1e1e1; + color: #333; + } + } +} + +.contextual-help-tabs-wrap { + padding: 0 20px; + overflow: auto; +} + +.help-tab-content { + display: none; + margin: 0 22px 12px 0; + line-height: 1.6em; + &.active { + display: block; + } + ul li { + list-style-type: disc; + margin-left: 18px; + } +} + +.contextual-help-sidebar { + width: 150px; + float: right; + padding: 0 8px 0 12px; + overflow: auto; +} + +/*------------------------------------------------------------------------------ + 8.0 - Layout Blocks +------------------------------------------------------------------------------*/ + +html.wp-toolbar { + padding-top: 32px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.narrow { + width: 70%; + margin-bottom: 40px; + p { + line-height: 150%; + } +} + +.widefat { + th, td { + overflow: hidden; + color: #555; + } + th { + font-weight: normal; + } + thead tr th, tfoot tr th { + color: #333; + } + td p { + margin: 2px 0 0.8em; + } + p, ol, ul { + color: #333; + } + .column-comment p { + margin: 0.6em 0; + } +} + +/* Screens with postboxes */ + +.postbox-container { + float: left; + .meta-box-sortables { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } +} + +#wpbody-content .metabox-holder { + padding-top: 10px; +} + +.metabox-holder { + .postbox-container .empty-container { + border: 3px dashed #bbb; + height: 250px; + } + &.columns-1 .postbox-container .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } +} + +.columns-2 { + #postbox-container-3 .empty-container, #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } +} + +.columns-3 #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; +} + +#post-body-content { + width: 100%; + min-width: 463px; + float: left; +} + +#post-body.columns-2 { + #postbox-container-1 { + float: right; + margin-right: -300px; + width: 280px; + } + #side-sortables { + min-height: 250px; + } +} + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content .metabox-holder .postbox-container .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } +} + +.js { + .widget .widget-top, .postbox .hndle { + cursor: move; + } +} + +.hndle a { + font-size: 11px; + font-weight: normal; +} + +.postbox .handlediv { + float: right; + width: 27px; + height: 30px; +} + +.js .postbox .handlediv { + cursor: pointer; +} + +.sortable-placeholder { + border: 1px dashed #bbb; + margin-bottom: 20px; +} + +.postbox, .stuffbox { + margin-bottom: 20px; + padding: 0; + line-height: 1; +} + +/* user-select is not a part of the CSS standard - may change behavior in the future */ + +.postbox .hndle, .stuffbox .hndle { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.postbox .inside, .stuffbox .inside { + padding: 0 12px 12px; + line-height: 1.4em; + font-size: 13px; +} + +.postbox .inside { + margin: 11px 0; + position: relative; + > p:last-child { + margin-bottom: 1px !important; + } +} + +.rss-widget ul li:last-child { + margin-bottom: 1px !important; +} + +.postbox { + &.closed h3 { + border: none; + -webkit-box-shadow: none; + box-shadow: none; + } + table { + &.form-table { + margin-bottom: 0; + } + &.widefat { + -webkit-box-shadow: none; + box-shadow: none; + } + } +} + +.temp-border { + border: 1px dotted #ccc; +} + +.columns-prefs label { + padding: 0 5px; +} + +/* @todo: what is this doing here */ + +#dashboard_right_now .versions .b, #post-status-display, #post-visibility-display { + font-weight: 600; +} + +#adminmenu .wp-submenu li.current { + font-weight: 600; + a { + font-weight: 600; + &:hover { + font-weight: 600; + } + } +} + +.media-item .percent, .plugins .name { + font-weight: 600; +} + +#pass-strength-result { + &.strong, &.short { + font-weight: 600; + } +} + +#ed_reply_toolbar #ed_reply_strong, .item-controls .item-order a, .feature-filter .feature-name { + font-weight: 600; +} + +/*------------------------------------------------------------------------------ + 21.0 - Admin Footer +------------------------------------------------------------------------------*/ + +#wpfooter { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 10px 20px; + color: #777; + p { + font-size: 13px; + margin: 0; + line-height: 20px; + } +} + +#footer-thankyou { + font-style: italic; +} + +#wpfooter a { + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + +/*------------------------------------------------------------------------------ + 25.0 - Tabbed Admin Screen Interface (Experimental) +------------------------------------------------------------------------------*/ + +.nav-tab { + border: 1px solid #ccc; + border-bottom: none; + background: #e4e4e4; + color: #555; + font-size: 12px; + line-height: 16px; + display: inline-block; + padding: 4px 14px 6px; + text-decoration: none; + margin: -4px 4px -1px 0; + &:hover { + background-color: #fff; + color: #464646; + } +} + +.nav-tab-active { + color: #464646; + border-bottom: 1px solid #f1f1f1; + background: #f1f1f1; + color: #000; + &:hover { + border-bottom: 1px solid #f1f1f1; + background: #f1f1f1; + color: #000; + } +} + +h2.nav-tab-wrapper, h3.nav-tab-wrapper { + border-bottom: 1px solid #ccc; + padding-bottom: 0; + padding-left: 10px; +} + +h2 .nav-tab { + padding: 6px 10px; + font-weight: bold; + font-size: 15px; + line-height: 24px; +} + +/*------------------------------------------------------------------------------ + 26.0 - Misc +------------------------------------------------------------------------------*/ + +.spinner { + background: url(../images/spinner.gif) no-repeat; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; + display: none; + float: right; + opacity: 0.7; + filter: alpha(opacity = 70); + width: 20px; + height: 20px; + margin: 2px 5px 0; +} + +#template div { + margin-right: 190px; +} + +.metabox-holder h3 { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; +} + +#templateside ul li a { + text-decoration: none; +} + +#sidemenu { + margin: -30px 15px 0 315px; + list-style: none; + position: relative; + float: right; + padding-left: 10px; + font-size: 12px; + a { + padding: 0 7px; + display: block; + float: left; + line-height: 28px; + border-top: 1px solid #f9f9f9; + border-bottom: 1px solid #dfdfdf; + background-color: #f9f9f9; + -webkit-transition: none; + transition: none; + } + li { + display: inline; + line-height: 200%; + list-style: none; + text-align: center; + white-space: nowrap; + margin: 0; + padding: 0; + } + a.current { + font-weight: normal; + padding-left: 6px; + padding-right: 6px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + border: 1px solid #dfdfdf; + border-bottom-color: #f1f1f1; + background-color: #f1f1f1; + color: #000; + } + li a .count-0 { + display: none; + } +} + +/* @todo: remove border radius */ + +.plugin-install #description, .plugin-install-network #description { + width: 60%; +} + +table { + .vers, .column-visible, .column-rating { + text-align: left; + } +} + +.error-message { + color: red; + font-weight: 600; +} + +/* Scrollbar fix for bulk upgrade iframe */ + +body.iframe { + height: 98%; +} + +/* Upgrader styles, Specific to Language Packs */ + +.lp-show-latest { + p { + display: none; + &:last-child { + display: block; + } + } + .lp-error p { + display: block; + } +} + +/* - Only used once or twice in all of WP - deprecate for global style +------------------------------------------------------------------------------*/ + +td { + &.media-icon { + text-align: center; + width: 80px; + padding-top: 8px; + padding-bottom: 8px; + img { + max-width: 80px; + max-height: 60px; + } + } + &.image-icon img { + border: 1px solid rgba(0, 0, 0, 0.07); + } +} + +#howto { + font-size: 11px; + margin: 0 5px; + display: block; +} + +.importers { + td { + padding-right: 14px; + } + font-size: 16px; + width: auto; +} + +#post-body #post-body-content #namediv h3 { + margin-top: 0; +} + +#namediv { + h3 label { + vertical-align: baseline; + } + table { + width: 100%; + } + td.first { + width: 10px; + white-space: nowrap; + } + input { + width: 98%; + } + p { + margin: 10px 0; + } +} + +#submitdiv h3 { + margin-bottom: 0 !important; +} + +/* - Used - but could/should be deprecated with a CSS reset +------------------------------------------------------------------------------*/ + +.zerosize { + height: 0; + width: 0; + margin: 0; + border: 0; + padding: 0; + overflow: hidden; + position: absolute; +} + +br.clear { + height: 2px; + line-height: 2px; +} + +.checkbox { + border: none; + margin: 0; + padding: 0; +} + +fieldset { + border: 0; + padding: 0; + margin: 0; +} + +.post-categories { + display: inline; + margin: 0; + padding: 0; + li { + display: inline; + } +} + +/* Star Ratings - Back-compat for pre-3.8 */ + +div.star-holder { + position: relative; + height: 17px; + width: 100px; + background: url(../images/stars.png?ver=20121108) repeat-x bottom left; + .star-rating { + background: url(../images/stars.png?ver=20121108) repeat-x top left; + height: 17px; + float: left; + } +} + +/* Star Ratings */ + +.star-rating { + white-space: nowrap; + .star { + display: inline-block; + width: 20px; + height: 20px; + -webkit-font-smoothing: antialiased; + font-size: 20px; + line-height: 1; + font-family: 'dashicons'; + text-decoration: inherit; + font-weight: normal; + font-style: normal; + vertical-align: top; + -webkit-transition: color .1s ease-in 0; + transition: color .1s ease-in 0; + text-align: center; + color: #0074a2; + } + .star-full:before { + content: '\f155'; + } + .star-half:before { + content: '\f459'; + } +} + +.rtl .star-rating .star-half { + -webkit-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.star-rating .star-empty:before { + content: '\f154'; +} + +div.action-links { + font-weight: normal; + margin: 6px 0 0; +} + +/* Plugin install thickbox */ + +#plugin-information { + background: #fff; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + padding: 0; +} + +#plugin-information-scrollable { + overflow: auto; + height: 100%; +} + +#plugin-information-title { + padding: 0 20px; + background: #f5f5f5; + font-size: 22px; + font-weight: 600; + line-height: 56px; + position: relative; + top: 0; + right: 0; + left: 0; + height: 56px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + &.with-banner { + margin-right: 0; + height: 250px; + bottom: 250px; + -webkit-background-size: 100% auto; + background-size: 100% auto; + } + h2 { + font-size: 1em; + font-weight: bold; + padding: 0; + margin: 0; + max-width: 680px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + &.with-banner h2 { + font-family: "Helvetica Neue", sans-serif; + display: inline-block; + font-size: 30px; + line-height: 50px; + padding: 0 15px; + margin: 174px 0 0 10px; + color: #fff; + background: rgba(30, 30, 30, 0.9); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); + box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); + -webkit-border-radius: 8px; + border-radius: 8px; + } + div.vignette { + display: none; + } + &.with-banner div.vignette { + display: block; + float: right; + top: 0; + height: 250px; + width: 830px; + margin: 0 -20px; + background: transparent; + -webkit-box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } +} + +#plugin-information-tabs { + padding: 0 16px; + position: relative; + right: 0; + left: 0; + height: 36px; + z-index: 1; + border-bottom: 1px solid #ddd; + background: #f3f3f3; + a { + position: relative; + float: left; + padding: 9px 10px; + margin: 0; + height: 18px; + line-height: 18px; + font-size: 14px; + text-decoration: none; + -webkit-transition: none; + transition: none; + &.current { + margin: 0 -1px 0; + background: #fff; + border: 1px solid #ddd; + border-bottom-color: #fff; + padding-top: 8px; + color: #333; + } + } + &.with-banner a.current { + border-top: none; + padding-top: 9px; + } + a { + &:active, &:focus { + outline: none; + } + } +} + +#plugin-information-content { + overflow: hidden; + /* equal height column trick */ + background: #fff; + position: relative; + top: 0; + right: 0; + left: 0; + min-height: 100%; + /* Height of title + tabs + install now */ + min-height: -webkit-calc( 100% - 152px ); + min-height: calc( 100% - 152px ); + &.with-banner { + /* Height of banner + tabs + install now */ + min-height: -webkit-calc( 100% - 346px ); + min-height: calc( 100% - 346px ); + } +} + +#section-holder { + position: relative; + top: 0; + right: 250px; + bottom: 0; + left: 0; + margin-right: 250px; + /* FYI box */ + padding: 10px 26px; + margin-bottom: -99930px; + /* a bit less than the padding below to accommodate footer */ + padding-bottom: 99999px; + /* equal height column trick */ + .updated { + margin: 16px 0; + } +} + +#plugin-information { + .fyi { + display: block; + float: right; + position: relative; + top: 0; + right: 0; + padding: 16px; + margin-bottom: -99930px; + /* slightly less than the padding below to accommodate footer */ + padding-bottom: 99999px; + /* equal height column trick */ + width: 217px; + border-left: 1px solid #ddd; + background: #f3f3f3; + color: #666; + strong { + color: #464646; + } + h3 { + font-weight: bold; + text-transform: uppercase; + font-size: 12px; + color: #666; + margin: 24px 0 8px; + } + h2 { + font-size: 0.9em; + margin-bottom: 0; + margin-right: 0; + } + ul { + padding: 0; + margin: 0; + list-style: none; + } + li { + margin: 0 0 10px; + } + } + .counter-container { + margin: 3px 0; + } + .counter-label { + float: left; + margin-right: 5px; + min-width: 55px; + } + .counter-back { + height: 17px; + width: 92px; + background-color: #ececec; + float: left; + } + .counter-bar { + height: 17px; + background-color: #fddb5a; + float: left; + } + .counter-count { + margin-left: 5px; + } + .fyi ul.contributors { + margin-top: 10px; + li { + display: inline-block; + margin-right: 8px; + vertical-align: middle; + display: inline-block; + margin-right: 8px; + vertical-align: middle; + img { + vertical-align: middle; + margin-right: 4px; + } + } + } +} + +#plugin-information-footer { + padding: 15px 16px; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 28px; + border-top: 1px solid #ddd; + background: #f3f3f3; +} + +/* @noflip */ + +#plugin-information { + .section { + direction: ltr; + ul, ol { + list-style-type: disc; + margin-left: 24px; + } + font-size: 14px; + line-height: 1.7; + p { + font-size: 14px; + line-height: 1.7; + } + } + #section-screenshots { + ol { + list-style: none; + margin: 0; + } + li { + img { + vertical-align: text-top; + margin-top: 16px; + max-width: 100%; + width: auto; + height: auto; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + } + p { + font-style: italic; + padding-left: 20px; + } + } + } + pre { + padding: 7px; + overflow: auto; + border: 1px solid #ccc; + } + .review { + overflow: hidden; + /* clearfix */ + width: 100%; + margin-bottom: 20px; + border-bottom: 1px solid #e6e6e6; + } + .review-title-section { + overflow: hidden; + /* clearfix */ + h4 { + display: inline-block; + float: left; + margin: 0 6px 0 0; + } + } + .reviewer-info { + p { + clear: both; + margin: 0; + padding-top: 2px; + } + .avatar { + float: left; + margin: 4px 6px 0 0; + } + .star-rating { + float: left; + } + } + .review-meta { + float: left; + margin-left: 0.75em; + } + .review-body { + float: left; + width: 100%; + } +} + +/* @noflip */ + +/* @noflip */ + +/* @noflip */ + +/* @noflip */ + +/* @noflip */ + +/* @noflip */ + +/* @noflip */ + +/* @noflip */ + +.plugin-version-author-uri { + font-size: 13px; +} + +@media screen and (max-width: 771px) { + #plugin-information-title.with-banner { + height: 100px; + bottom: 100px; + h2 { + margin-top: 30px; + font-size: 20px; + line-height: 40px; + max-width: 85%; + } + div.vignette { + height: 100px; + bottom: 100px; + width: 800%; + } + } + #plugin-information-tabs { + overflow: hidden; + /* clearfix */ + padding: 0; + height: auto; + /* let tabs wrap */ + a.current { + margin-bottom: 0; + border-bottom: none; + } + } + #plugin-information .fyi { + float: none; + border: 1px solid #ddd; + position: static; + width: auto; + margin: 26px 26px 0; + padding-bottom: 0; + /* reset from the two column height fix */ + } + #section-holder { + position: static; + margin: 0; + padding-bottom: 70px; + /* reset from the two column height fix, plus accomodate footer */ + } + #plugin-information .fyi { + h3, small { + display: none; + } + } + #plugin-information-footer { + padding: 12px 16px 0; + height: 46px; + } +} + +/* Thickbox for Plugin Install screen */ + +body { + &.plugin-install-php #TB_window, &.import-php #TB_window, &.plugins-php #TB_window, &.update-core-php #TB_window, &.index-php #TB_window { + background: #fcfcfc url( ../images/spinner.gif ) no-repeat center; + } + &.plugin-install-php #TB_title, &.import-php #TB_title, &.plugins-php #TB_title, &.update-core-php #TB_title, &.index-php #TB_title { + float: left; + height: 1px; + } + &.plugin-install-php #TB_ajaxWindowTitle, &.import-php #TB_ajaxWindowTitle, &.plugins-php #TB_ajaxWindowTitle, &.update-core-php #TB_ajaxWindowTitle, &.index-php #TB_ajaxWindowTitle { + display: none; + } + &.plugin-install-php .tb-close-icon, &.import-php .tb-close-icon, &.plugins-php .tb-close-icon, &.update-core-php .tb-close-icon, &.index-php .tb-close-icon { + left: auto; + right: -30px; + color: #eee; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; + } + &.plugin-install-php { + #TB_closeWindowButton:focus { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + .tb-close-icon { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .tb-close-icon { + &:focus, &:hover { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + &.import-php { + #TB_closeWindowButton:focus { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + .tb-close-icon { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .tb-close-icon { + &:focus, &:hover { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + &.plugins-php { + #TB_closeWindowButton:focus { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + .tb-close-icon { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .tb-close-icon { + &:focus, &:hover { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + &.update-core-php { + #TB_closeWindowButton:focus { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + .tb-close-icon { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .tb-close-icon { + &:focus, &:hover { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + &.index-php { + #TB_closeWindowButton:focus { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + .tb-close-icon { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .tb-close-icon { + &:focus, &:hover { + color: #2ea2cc; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + } + &.plugin-install-php .tb-close-icon:before, &.import-php .tb-close-icon:before, &.plugins-php .tb-close-icon:before, &.update-core-php .tb-close-icon:before, &.index-php .tb-close-icon:before { + content: "\f335"; + font-size: 32px; + } +} + +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + body { + &.plugin-install-php #TB_window, &.import-php #TB_window, &.plugins-php #TB_window, &.update-core-php #TB_window, &.index-php #TB_window { + background: #fcfcfc url( ../images/spinner-2x.gif ) no-repeat center; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; + } + } +} + +/* move plugin install close icon to top on narrow screens */ +@media screen and (max-width: 830px) { + body { + &.plugin-install-php .tb-close-icon, &.import-php .tb-close-icon, &.plugins-php .tb-close-icon, &.update-core-php .tb-close-icon, &.index-php .tb-close-icon { + right: 0; + top: -30px; + } + } +} + +/* @todo: move this. */ + +img { + border: none; +} + +/* Header */ +/* @todo: are these also specific to Press This? */ + +#wphead { + border-bottom: 1px solid #dfdfdf; + h1 a { + color: #464646; + } +} + +/* @todo: these seem misplaced */ + +.js { + .meta-box-sortables .postbox:hover .handlediv { + margin-right: 0 !important; + } + .sidebar-name .sidebar-name-arrow:before, .meta-box-sortables .postbox .handlediv:before { + right: 12px; + font: normal 20px/1 'dashicons'; + speak: none; + display: inline-block; + padding: 8px 10px; + top: 0; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + } + #widgets-left { + .sidebar-name .sidebar-name-arrow { + display: none; + } + .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow, .sidebar-name:hover .sidebar-name-arrow { + display: block; + } + } + .sidebar-name .sidebar-name-arrow:before, .meta-box-sortables .postbox .handlediv:before { + content: '\f142'; + } + .widgets-holder-wrap.closed .sidebar-name-arrow:before, .meta-box-sortables .postbox.closed .handlediv:before { + content: '\f140'; + } +} + +/* Metabox collapse arrow indicators */ + +/* Show the arrow only on hover */ + +.error a { + text-decoration: underline; +} + +.updated a { + text-decoration: none; + padding-bottom: 2px; +} + +/* @todo: appears to be Press This only and overridden */ + +#photo-add-url-div input[type="text"] { + width: 300px; +} + +/* Theme/Plugin Editor */ + +.alignleft h3 { + margin: 0; +} + +#template textarea { + font-family: Consolas, Monaco, monospace; + font-size: 13px; + width: 97%; + background: #f9f9f9; + outline: none; + direction: ltr; +} + +/* @noflip */ + +#docs-list { + direction: ltr; +} + +#template p { + width: 97%; +} + +#templateside { + float: right; + width: 190px; + word-wrap: break-word; + h3 { + margin: 0; + } +} + +#postcustomstuff p.submit { + margin: 0; +} + +#templateside { + h4 { + margin: 1em 0 0; + } + ol, ul { + margin: .5em 0; + padding: 0; + } + li { + margin: 4px 0; + } + a { + display: block; + padding: 3px 3px 3px 12px; + text-decoration: none; + } +} + +.theme-editor-php .highlight { + display: block; + padding: 3px 3px 3px 12px; + text-decoration: none; + margin: -3px 3px -3px -12px; +} + +#templateside .highlight { + border: none; + font-weight: bold; +} + +.nonessential { + color: #666; + font-size: 11px; + font-style: italic; + padding-left: 12px; +} + +#documentation { + margin-top: 10px; + label { + line-height: 22px; + vertical-align: baseline; + font-weight: 600; + } +} + +.fileedit-sub { + padding: 10px 0 8px; + line-height: 180%; +} + +/* @todo: can we use a common class for these? */ + +.nav-menus-php .item-edit:before, .widget-top a.widget-action:after, .control-section .accordion-section-title:after, .accordion-section-title:after { + right: 0; + content: '\f140'; + border: none; + background: none; + font: normal 20px/1 'dashicons'; + speak: none; + display: block; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +.widget-action, .handlediv, .item-edit, .sidebar-name-arrow, .accordion-section-title:after { + color: #aaa; +} + +.widget-action:hover, .handlediv:hover, .item-edit:hover, .sidebar-name:hover .sidebar-name-arrow, .accordion-section-title:hover:after { + color: #777; +} + +.widget-top a.widget-action:after { + padding: 12px 12px 0; +} + +.nav-menus-php .item-edit:before { + line-height: 2.1; +} + +.control-section .accordion-section-title:after, .accordion-section-title:after { + float: right; + right: 20px; + top: -2px; +} + +.control-section.open .accordion-section-title:after, #customize-info.open .accordion-section-title:after, .nav-menus-php .menu-item-edit-active .item-edit:before, .widget.open .widget-top a.widget-action:after { + content: '\f142'; +} + +/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */ + +.ui-sortable, .ui-draggable { + -ms-touch-action: none; + touch-action: none; +} + +.meta-box-sortables.ui-sortable { + -ms-touch-action: auto; + touch-action: auto; +} + +.widgets-holder-wrap { + .ui-draggable, .ui-sortable { + -ms-touch-action: auto; + touch-action: auto; + } +} + +.menu.ui-sortable { + -ms-touch-action: auto; + touch-action: auto; +} + +.meta-box-sortables.ui-sortable .hndle, .menu.ui-sortable .menu-item-handle { + -ms-touch-action: none; + touch-action: none; +} + +/* Accordion */ + +.accordion-section { + border-bottom: 1px solid #dfdfdf; + margin: 0; + &.open .accordion-section-content { + display: block; + } +} + +.no-js .accordion-section .accordion-section-content { + display: block; +} + +.accordion-section.open:hover { + border-bottom-color: #dfdfdf; +} + +.accordion-section-content { + display: none; + padding: 10px 20px 15px; + overflow: hidden; + background: #fff; +} + +.accordion-section-title { + margin: 0; + padding: 12px 15px 15px; + position: relative; + border-left: 1px solid #dfdfdf; + border-right: 1px solid #dfdfdf; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.js .accordion-section-title { + cursor: pointer; + &:after { + position: absolute; + top: 12px; + right: 10px; + z-index: 1; + } +} + +.accordion-section-title { + &:focus { + outline: none; + } + &:hover:after, &:focus:after { + border-color: #aaa transparent; + } +} + +.cannot-expand .accordion-section-title { + cursor: auto; + &:after { + display: none; + } +} + +.control-section .accordion-section-title { + border-left: none; + border-right: none; + padding: 10px 10px 11px 14px; + line-height: 21px; + background: #fff; + &:after { + top: 11px; + } +} + +.js .control-section { + &:hover .accordion-section-title, .accordion-section-title:hover, &.open .accordion-section-title, .accordion-section-title:focus { + color: #222; + background: #f5f5f5; + } +} + +.control-section.open .accordion-section-title { + /* When expanded */ + border-bottom: 1px solid #dfdfdf; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/* @todo: de-duplication */ +@media only screen and (min-width: 769px) { + /* categories */ + #col-left { + width: 35%; + } + #col-right { + width: 65%; + } +} + +@media only screen and (max-width: 860px) { + /* categories */ + #col-left { + width: 35%; + } + #col-right { + width: 65%; + } +} + +@media only screen and (min-width: 980px) { + /* categories */ + #col-left { + width: 35%; + } + #col-right { + width: 65%; + } +} + +@media only screen and (max-width: 768px) { + /* categories */ + #col-left, #col-right { + width: 100%; + } +} + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + /* Back-compat for pre-3.8 */ + div.star-holder { + background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left; + -webkit-background-size: 21px 37px; + background-size: 21px 37px; + .star-rating { + background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left; + -webkit-background-size: 21px 37px; + background-size: 21px 37px; + } + } + .spinner { + background-image: url(../images/spinner-2x.gif); + } + /* @todo: evaluate - most of these were likely replaced by dashicons */ + .curtime #timestamp, #screen-meta-links a.show-settings { + background: none !important; + } + .widget-top a.widget-action { + background: none !important; + &:hover { + background: none !important; + } + } + .sidebar-name-arrow, .sidebar-name:hover .sidebar-name-arrow, .meta-box-sortables .postbox:hover .handlediv, .tagchecklist span a, #bulk-titles div a, .tagchecklist span a:hover, #bulk-titles div a:hover { + background: none !important; + } +} + +@-ms-viewport { + width: device-width; +} + + +@media screen and (max-width: 782px) { + html.wp-toolbar { + padding-top: 46px; + } + body { + min-width: 240px; + overflow-x: hidden; + * { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; + } + } + #wpcontent { + position: relative; + margin-left: 0; + padding-left: 10px; + } + #wpbody-content { + padding-bottom: 100px; + } + .wrap { + margin-right: 12px; + margin-left: 0; + } + .col-wrap { + padding: 0; + } + /* Hidden Elements */ + #screen-meta, #screen-meta-links, #collapse-menu, .post-format-select { + display: none !important; + } + .wrap .add-new-h2 { + padding: 10px 15px; + font-size: 14px; + &:active { + padding: 10px 15px; + font-size: 14px; + } + } + .wp-color-result { + height: auto; + padding-left: 45px; + &:after { + font-size: 14px; + height: auto; + padding: 6px 14px; + } + } + /* Feedback Messages */ + .wrap div { + &.updated, &.error { + margin: 20px 0 10px 0; + padding: 5px 10px; + font-size: 14px; + line-height: 175%; + } + } + .media-upload-form div.error { + margin: 20px 0 10px 0; + padding: 5px 10px; + font-size: 14px; + line-height: 175%; + } + .wrap .icon32 + h2 { + margin-top: -2px; + } + .wp-responsive-open #wpbody { + right: -190px; + } + code { + word-wrap: break-word; + } + /* General Metabox */ + .postbox { + font-size: 14px; + } + .metabox-holder h3 { + padding: 12px; + } + .postbox .handlediv { + margin-top: 3px; + } + /* Subsubsub Nav */ + .subsubsub { + font-size: 16px; + text-align: center; + margin-bottom: 15px; + } + /* Theme/Plugin File Editor */ + #templateside { + float: none; + width: auto; + li { + margin: 0; + a { + display: block; + padding: 5px; + } + } + .highlight { + padding: 5px; + margin-left: -5px; + margin-top: -5px; + } + } + #template { + div { + float: none; + margin: 0; + width: auto; + } + textarea { + width: 100%; + } + } + .fileedit-sub .alignright { + margin-top: 15px; + } + #wpfooter, #comments-form .checkforspam { + display: none; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Disable horizontal scroll when responsive menu is open + since we push the main content off to the right. */ + #wpwrap.wp-responsive-open { + overflow-x: hidden; + } + html.wp-toolbar { + padding-top: 0; + } + #wpbody { + padding-top: 46px; + } + /* Keep full-width boxes on Edit Post page from causing horizontal scroll */ + div#post-body.metabox-holder.columns-1 { + overflow-x: hidden; + } +} diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css deleted file mode 100644 index f9f11b3..0000000 --- a/src/wp-admin/css/customize-controls.css +++ /dev/null @@ -1,889 +0,0 @@ -body { - overflow: hidden; -} - -#customize-controls a { - text-decoration: none; -} - -#customize-controls h3 { - font-size: 14px; -} - -#customize-controls .submit { - text-align: center; -} - -#customize-controls .description { - color: #666666; -} - -#customize-header-actions .button-primary { - float: right; - margin-top: 9px; -} - -#customize-header-actions .spinner { - margin-top: 16px; - margin-right: 4px; -} - -.saving #customize-header-actions .spinner { - display: block; -} - -#customize-header-actions { - border-bottom: 1px solid #ddd; -} - -#customize-controls .wp-full-overlay-sidebar-content { - overflow-y: auto; - overflow-x: hidden; -} - -#customize-info { - border: none; - border-top: 1px solid #ddd; -} - -#customize-info .accordion-section-title { - background-color: #fff; - color: #666666; - border-left: none; - border-right: none; - border-bottom: 1px solid #eeeeee; -} - -#customize-info.open .accordion-section-title:after, -#customize-info .accordion-section-title:hover:after, -#customize-info .accordion-section-title:focus:after { - color: #555555; -} - -#customize-info .preview-notice { - font-size: 13px; - line-height: 24px; -} - -#customize-info .theme-name { - font-size: 20px; - font-weight: 200; - line-height: 24px; - display: block; -} - -#customize-info .theme-screenshot { - width: 258px; -} - -#customize-info .theme-description { - margin-top: 1em; - color: #666666; - line-height: 20px; -} - -#customize-theme-controls .control-section { - border: none; -} - -#customize-theme-controls .accordion-section-title { - color: #555555; - background-color: #fff; - border-bottom: 1px solid #eeeeee; -} - -#customize-theme-controls .accordion-section-content { - color: #555555; - background: #fff; -} - -#customize-info.open .accordion-section-title, -#customize-info .accordion-section-title:hover, -#customize-info .accordion-section-title:focus, -#customize-theme-controls .control-section:hover > .accordion-section-title, -#customize-theme-controls .control-section .accordion-section-title:hover, -#customize-theme-controls .control-section.open .accordion-section-title, -#customize-theme-controls .control-section .accordion-section-title:focus { - color: #222; - background: #f5f5f5; -} - -.js .control-section:hover .accordion-section-title, -.js .control-section .accordion-section-title:hover, -.js .control-section.open .accordion-section-title, -.js .control-section .accordion-section-title:focus { - background: #f5f5f5; -} - -#customize-theme-controls .control-section:hover > .accordion-section-title:after, -#customize-theme-controls .control-section .accordion-section-title:hover:after, -#customize-theme-controls .control-section.open .accordion-section-title:after, -#customize-theme-controls .control-section .accordion-section-title:focus:after { - color: #555; -} - -#customize-info.open, -#customize-theme-controls .control-section.open { - border-bottom: 1px solid #eeeeee; -} - -#customize-theme-controls .control-section.open .accordion-section-title { - border-bottom-color: #eeeeee !important; -} - -#customize-theme-controls .control-section:last-of-type.open, -#customize-theme-controls .control-section:last-of-type > .accordion-section-title { - border-bottom-color: #ddd; -} - -#customize-theme-controls > ul, -#customize-theme-controls .accordion-section-content { - margin: 0; -} - -.control-section.control-panel > .accordion-section-title { - padding-right: 54px; -} - -.control-section.control-panel > .accordion-section-title:after { - content: "\f345"; - background: #f5f5f5; - color: #555; - width: 38px; - height: 100%; - margin: -11px -10px -11px 0; /* compensate for positioning */ - line-height: 45px; - padding-left: 5px; - border-left: 1px solid #eee; - z-index: 0; -} - -.rtl .control-section.control-panel > .accordion-section-title:after { - content: "\f341"; -} - -#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:focus:after, -#customize-theme-controls .control-section.control-panel > h3.accordion-section-title:hover:after { - background: #ddd; - color: #000; - border: 1px solid #d9d9d9; - border-right: none; - margin-top: -12px; - line-height: 44px; - z-index: 1; -} - -.accordion-sub-container.control-panel-content { - display: none; - position: absolute; - left: 300px; - top: 0; - width: 300px; - border-top: 1px solid #ddd; - -webkit-transition: left ease-in-out .18s; - transition: left ease-in-out .18s; -} - -.accordion-sub-container.control-panel-content.animating { - display: block; -} - -.current-panel .accordion-sub-container.control-panel-content { - width: 100%; -} - -.customize-controls-close { - display: block; - position: absolute; - top: 0; - left: 0; - width: 45px; - height: 45px; - padding-right: 2px; - background: #eee; - border-right: 1px solid #ddd; - color: #444; - cursor: pointer; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -.control-panel-back { - display: block; - position: fixed; - top: 0; - z-index: 99; - left: -48px; - width: 45px; - height: 45px; - padding-right: 2px; - background: #eee; - border-right: 1px solid #ddd; - cursor: pointer; - -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; - transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; -} - -.collapsed .control-panel-back { - display: none; -} - -.customize-controls-close:focus, -.customize-controls-close:hover, -.control-panel-back:focus, -.control-panel-back:hover { - background: #ddd; - border-color: #ccc; - color: #000; - outline: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.customize-controls-close:before { - font: normal 22px/1 dashicons; - content: "\f335"; - position: relative; - top: 7px; - left: 13px; -} - -.control-panel-back:before { - font: normal 20px/1 dashicons; - content: "\f341"; - position: relative; - top: 7px; - left: 13px; -} - -.rtl .control-panel-back:before { - content: "\f344"; -} - -.in-sub-panel .control-panel-back { - left: 0; -} - -.current-panel > .accordion-section-title { - height: 22px; -} - -.wp-full-overlay-sidebar .wp-full-overlay-header { - -webkit-transition: padding ease-in-out .18s; - transition: padding ease-in-out .18s; -} - -.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { - padding-left: 62px; -} - -#customize-info, -#customize-theme-controls > ul > .accordion-section { - position: relative; - left: 0; - -webkit-transition: left ease-in-out .18s; - transition: left ease-in-out .18s; -} - -.in-sub-panel #customize-info, -.in-sub-panel #customize-theme-controls > ul > .accordion-section { - left: -300px; - width: 300px; -} - -.in-sub-panel #customize-theme-controls .accordion-section.current-panel { - width: 100%; -} - -#customize-theme-controls .control-section.current-panel { - padding: 0; -} - -#customize-theme-controls .control-section > h3.accordion-section-title { - position: relative; - left: 0; -} - -#customize-theme-controls .control-section.current-panel > h3.accordion-section-title { - left: -300px; - -webkit-transition: left ease-in-out .18s; - transition: left ease-in-out .18s; -} - -.control-section.control-panel .accordion-section-title .panel-title { - font-size: 20px; - font-weight: 200; - line-height: 24px; - display: block; - border: none; -} - -.control-section.control-panel .preview-notice { - font-size: 13px; - line-height: 24px; -} - -p.customize-section-description { - font-style: normal; -} - -.customize-control { - width: 100%; - float: left; - clear: both; - margin-bottom: 8px; -} - -.customize-control select, -.customize-control input[type="radio"], -.customize-control input[type="checkbox"] { - line-height: 28px; -} - -.customize-control input[type="text"], -.customize-control input[type="password"], -.customize-control input[type="email"], -.customize-control input[type="number"], -.customize-control input[type="search"], -.customize-control input[type="tel"], -.customize-control input[type="url"] { - width: 98%; - line-height: 18px; - margin: 0; -} - -.customize-control-textarea textarea { - width: 100%; - resize: vertical; -} - -.customize-control select { - min-width: 50%; - max-width: 100%; - height: 28px; - line-height: 28px; -} - -.customize-control select[multiple] { - height: auto; -} - -.customize-control-title { - display: block; - font-size: 14px; - line-height: 24px; - font-weight: 600; - margin-bottom: 5px; -} - -.customize-control-description { - display: block; - font-style: italic; - line-height: 18px; - margin-bottom: 5px; -} - -.customize-control-color .color-picker, -.customize-control-checkbox label, -.customize-control-upload div { - line-height: 28px; -} - -.customize-control-checkbox input { - margin-right: 5px; -} - -.customize-control-radio { - padding: 5px 0 10px; -} - -.customize-control-radio .customize-control-title { - margin-bottom: 0; - line-height: 22px; -} - -.customize-control-radio .customize-control-title + .customize-control-description { - margin-top: 7px; -} - -.customize-control-radio label { - line-height: 32px; -} - -.customize-control-radio input { - margin-right: 5px; -} - -#customize-preview iframe { - width: 100%; - height: 100%; -} - -.wp-full-overlay-sidebar { - background: #eeeeee; - border-right: 1px solid #ddd; -} - -.collapse-sidebar { - background-color: transparent !important; - border: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - -webkit-border-radius: 0 !important; - border-radius: 0 !important; -} - - -.collapse-sidebar:active, -.collapse-sidebar:active .collapse-sidebar-label, -.collapse-sidebar:active .collapse-sidebar-arrow:before { - text-shadow: none; -} - -.collapsed .collapse-sidebar-arrow:before { - color: #888; -} - -/* Style for custom settings */ - -/* - * Dropdowns - */ -.accordion-section .dropdown { - float: left; - display: block; - position: relative; - cursor: pointer; -} - -.accordion-section .dropdown-content { - overflow: hidden; - float: left; - min-width: 30px; - height: 16px; - line-height: 16px; - margin-right: 16px; - padding: 4px 5px; - border: 2px solid #eeeeee; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.customize-control .dropdown-arrow { - position: absolute; - top: 0; - bottom: 0; - right: 0; - width: 20px; - background: #eeeeee; -} - -.customize-control .dropdown-arrow:after { - content: "\f140"; - font: normal 20px/1 'dashicons'; - speak: none; - display: block; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; - color: #333; -} - -.customize-control .dropdown-status { - color: #333; - background: #eeeeee; - display: none; - max-width: 112px; -} - -/* Color Picker */ -.customize-control-color .color-picker-hex { - display: none; -} - -.customize-control-color.open .color-picker-hex { - display: block; -} - -.customize-control-color .dropdown { - margin-right: 5px; - margin-bottom: 5px; -} - -.customize-control-color .dropdown .dropdown-content { - background-color: #555555; - border: 1px solid rgba(0, 0, 0, 0.15); -} - -.customize-control-color .dropdown:hover .dropdown-content { - border-color: rgba(0, 0, 0, 0.25); -} - -/* - * Image Picker - */ -.customize-control-image .library, -.customize-control-image .actions { - display: none; - float: left; - width: 100%; -} - -.customize-control-image.open .library, -.customize-control-image.open .actions { - display: block; -} - -.accordion-section .customize-control-image .dropdown-content { - height: auto; - min-height: 24px; - min-width: 40px; - padding: 0; -} - -.accordion-section .customize-control-image .dropdown-status { - padding: 4px 5px; -} - -.accordion-section .customize-control-image .preview-thumbnail img { - display: block; - width: 100%; - max-width: 122px; - max-height: 98px; - margin: 0 auto; -} - -.accordion-section .customize-control-image .actions { - text-align: right; -} - -.accordion-section .customize-control-image .library ul { - border-bottom: 1px solid #ddd; - float: left; - width: 100%; - margin: 10px 0 0; -} - -.accordion-section .customize-control-image .library li { - color: #ccc; - float: left; - padding: 3px 15px; - margin: 0; - border: 1px solid transparent; -} - -.accordion-section .customize-control-image .library li.library-selected { - margin-bottom: -1px; - padding-bottom: 4px; - color: #666666; - border-color: #ddd; - border-bottom-color: #fff; -} - -.accordion-section .customize-control-image .library .thumbnail { - display: block; - width: 100%; -} - -.accordion-section .customize-control-image .library .thumbnail img { - display: block; - max-width: 90%; - max-height: 80px; - margin: 5px auto; - padding: 2px; - background: #666666; -} - -.accordion-section .customize-control-image .library .thumbnail:hover img { - background-color: #2ea2cc; -} - -.accordion-section .customize-control-image .library-content { - display: none; - width: 100%; - float: left; - padding: 10px 0; -} - -.accordion-section .customize-control-image .library-content.library-selected { - display: block; -} - -.accordion-section .customize-control-upload .upload-fallback, -.accordion-section .customize-control-image .upload-fallback { - display: none; -} - -.accordion-section .customize-control-upload .upload-dropzone, -.accordion-section .customize-control-image .upload-dropzone { - display: none; - padding: 15px 10px; - border: 3px dashed #dfdfdf; - margin: 5px auto; - text-align: center; - position: relative; - cursor: default; -} - -.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop, -.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop { - display: block; - -webkit-transition: border-color 0.1s; - transition: border-color 0.1s; -} - -.accordion-section .customize-control-upload .library ul li, -.accordion-section .customize-control-image .library ul li { - cursor: pointer; -} - -.accordion-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over, -.accordion-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over { - border-color: #83b4d8; -} - -/** - * iOS can't scroll iframes, - * instead it expands the iframe size to match the size of the content - */ -.ios .wp-full-overlay { - position: relative; -} - -.ios #customize-preview { - position: relative; -} - -.ios #customize-controls .wp-full-overlay-sidebar-content { - -webkit-overflow-scrolling: touch; -} - -/** Header control **/ - -#customize-control-header_image .current { - margin-bottom: 8px; -} - -#customize-control-header_image .uploaded { - margin-bottom: 18px; -} - -#customize-control-header_image .uploaded button:not(.random), -#customize-control-header_image .default button:not(.random) { - width: 100%; - padding: 0; - margin: 0; - background: none; - border: none; - color: inherit; - cursor: pointer; -} - -#customize-control-header_image button img { - display: block; -} - -#customize-control-header_image button.new, -#customize-control-header_image button.remove { - white-space: normal; - width: 48%; - height: auto; -} - - -/* Header control: current image container */ - -#customize-control-header_image .current .container { - overflow: hidden; - -webkit-border-radius: 2px; - border: 1px solid #eee; - -webkit-border-radius: 2px; - border-radius: 2px; -} - -#customize-control-header_image .placeholder { - width: 100%; - position: relative; - text-align: center; - cursor: default; -} - -#customize-control-header_image .inner { - display: none; - position: absolute; - width: 100%; - color: #555; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -#customize-control-header_image .inner, -#customize-control-header_image .inner .dashicons { - line-height: 20px; - top: 10px; -} -#customize-control-header_image .list .inner, -#customize-control-header_image .list .inner .dashicons { - top: 9px; -} - -#customize-control-header_image .header-view { - position: relative; - width: 100%; - margin-bottom: 5px; -} - -#customize-control-header_image .header-view:last-child { - margin-bottom: 0px; -} - -/* Convoluted, but 'outline' support isn't good enough yet */ -#customize-control-header_image .header-view:after { - border: 0; -} -#customize-control-header_image .header-view.selected:after { - content: ''; - position: absolute; - height: auto; - top: 0; left: 0; bottom: 0; right: 0; - border: 4px solid #2ea2cc; - -webkit-border-radius: 2px; - border-radius: 2px; -} -#customize-control-header_image .header-view.button.selected { - border: 0; -} - -/* Header control: overlay "close" button */ - -#customize-control-header_image .uploaded .header-view .close { - font-size: 2em; - color: grey; - position: absolute; - visibility: hidden; - top: 10px; - right: 10px; - z-index: 1; - width: 20px; - height: 20px; - cursor: pointer; -} - -#customize-control-header_image .uploaded .header-view .close:hover { - color: black; - text-shadow: - -1px -1px 0 #fff, - 1px -1px 0 #fff, - -1px 1px 0 #fff, - 1px 1px 0 #fff; -} - -#customize-control-header_image .header-view:hover .close { - visibility: visible; -} - -/* Header control: randomiz(s)er */ - -#customize-control-header_image .random.placeholder { - cursor: pointer; - -webkit-border-radius: 2px; - border-radius: 2px; - height: 40px; -} - -#customize-control-header_image button.random { - width: 100%; - height: auto; - min-height: 40px; - white-space: normal; -} - -#customize-control-header_image button.random .dice { - margin-top: 4px; -} - -#customize-control-header_image .placeholder:hover .dice, -#customize-control-header_image .header-view:hover > button.random .dice { - -webkit-animation: dice-color-change 3s infinite; - -ms-animation: dice-color-change 3s infinite; - animation: dice-color-change 3s infinite; -} - -@-webkit-keyframes dice-color-change { - 0% { color: #d4b146; } - 50% { color: #ef54b0; } - 75% { color: #7190d3; } - 100% { color: #d4b146; } -} - -@-ms-keyframes dice-color-change { - 0% { color: #d4b146; } - 50% { color: #ef54b0; } - 75% { color: #7190d3; } - 100% { color: #d4b146; } -} - -@keyframes dice-color-change { - 0% { color: #d4b146; } - 50% { color: #ef54b0; } - 75% { color: #7190d3; } - 100% { color: #d4b146; } -} - -/* Header control: actions and choices */ - -#customize-control-header_image .actions { - margin-bottom: 32px; -} - -#customize-control-header_image .choice { - position: relative; - display: block; - margin-bottom: 9px; -} - -#customize-control-header_image .uploaded div:last-child > .choice { - margin-bottom: 0; -} - -#customize-control-header_image img { - width: 100%; - -webkit-border-radius: 2px; - border-radius: 2px; -} - -#customize-control-header_image .remove { - float: left; - margin-right: 3px; -} - -#customize-control-header_image .new { - float: right; -} - - -/** Handle cheaters. */ -body.cheatin { - font-size: medium; - height: auto; - background: #fff; - margin: 50px auto 2em; - padding: 1em 2em; - max-width: 700px; - min-width: 0; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13); - box-shadow: 0 1px 3px rgba(0,0,0,0.13); -} - -body.cheatin p { - font-size: 14px; - line-height: 1.5; - margin: 25px 0 20px; -} diff --git a/src/wp-admin/css/customize-controls.scss b/src/wp-admin/css/customize-controls.scss new file mode 100644 index 0000000..acefaea --- /dev/null +++ b/src/wp-admin/css/customize-controls.scss @@ -0,0 +1,874 @@ +body { + overflow: hidden; +} + +#customize-controls { + a { + text-decoration: none; + } + h3 { + font-size: 14px; + } + .submit { + text-align: center; + } + .description { + color: #666666; + } +} + +#customize-header-actions { + .button-primary { + float: right; + margin-top: 9px; + } + .spinner { + margin-top: 16px; + margin-right: 4px; + } +} + +.saving #customize-header-actions .spinner { + display: block; +} + +#customize-header-actions { + border-bottom: 1px solid #ddd; +} + +#customize-controls .wp-full-overlay-sidebar-content { + overflow-y: auto; + overflow-x: hidden; +} + +#customize-info { + border: none; + border-top: 1px solid #ddd; + .accordion-section-title { + background-color: #fff; + color: #666666; + border-left: none; + border-right: none; + border-bottom: 1px solid #eeeeee; + } + &.open .accordion-section-title:after { + color: #555555; + } + .accordion-section-title { + &:hover:after, &:focus:after { + color: #555555; + } + } + .preview-notice { + font-size: 13px; + line-height: 24px; + } + .theme-name { + font-size: 20px; + font-weight: 200; + line-height: 24px; + display: block; + } + .theme-screenshot { + width: 258px; + } + .theme-description { + margin-top: 1em; + color: #666666; + line-height: 20px; + } +} + +#customize-theme-controls { + .control-section { + border: none; + } + .accordion-section-title { + color: #555555; + background-color: #fff; + border-bottom: 1px solid #eeeeee; + } + .accordion-section-content { + color: #555555; + background: #fff; + } +} + +#customize-info { + &.open .accordion-section-title { + color: #222; + background: #f5f5f5; + } + .accordion-section-title { + &:hover, &:focus { + color: #222; + background: #f5f5f5; + } + } +} + +#customize-theme-controls .control-section { + &:hover > .accordion-section-title, .accordion-section-title:hover, &.open .accordion-section-title, .accordion-section-title:focus { + color: #222; + background: #f5f5f5; + } +} + +.js .control-section { + &:hover .accordion-section-title, .accordion-section-title:hover, &.open .accordion-section-title, .accordion-section-title:focus { + background: #f5f5f5; + } +} + +#customize-theme-controls .control-section { + &:hover > .accordion-section-title:after, .accordion-section-title:hover:after, &.open .accordion-section-title:after, .accordion-section-title:focus:after { + color: #555; + } +} + +#customize-info.open { + border-bottom: 1px solid #eeeeee; +} + +#customize-theme-controls { + .control-section { + &.open { + border-bottom: 1px solid #eeeeee; + .accordion-section-title { + border-bottom-color: #eeeeee !important; + } + } + &:last-of-type { + &.open, > .accordion-section-title { + border-bottom-color: #ddd; + } + } + } + > ul, .accordion-section-content { + margin: 0; + } +} + +.control-section.control-panel > .accordion-section-title { + padding-right: 54px; + &:after { + content: "\f345"; + background: #f5f5f5; + color: #555; + width: 38px; + height: 100%; + margin: -11px -10px -11px 0; + /* compensate for positioning */ + line-height: 45px; + padding-left: 5px; + border-left: 1px solid #eee; + z-index: 0; + } +} + +.rtl .control-section.control-panel > .accordion-section-title:after { + content: "\f341"; +} + +#customize-theme-controls .control-section.control-panel > h3.accordion-section-title { + &:focus:after, &:hover:after { + background: #ddd; + color: #000; + border: 1px solid #d9d9d9; + border-right: none; + margin-top: -12px; + line-height: 44px; + z-index: 1; + } +} + +.accordion-sub-container.control-panel-content { + display: none; + position: absolute; + left: 300px; + top: 0; + width: 300px; + border-top: 1px solid #ddd; + -webkit-transition: left ease-in-out .18s; + transition: left ease-in-out .18s; + &.animating { + display: block; + } +} + +.current-panel .accordion-sub-container.control-panel-content { + width: 100%; +} + +.customize-controls-close { + display: block; + position: absolute; + top: 0; + left: 0; + width: 45px; + height: 45px; + padding-right: 2px; + background: #eee; + border-right: 1px solid #ddd; + color: #444; + cursor: pointer; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.control-panel-back { + display: block; + position: fixed; + top: 0; + z-index: 99; + left: -48px; + width: 45px; + height: 45px; + padding-right: 2px; + background: #eee; + border-right: 1px solid #ddd; + cursor: pointer; + -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; + transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out; +} + +.collapsed .control-panel-back { + display: none; +} + +.customize-controls-close { + &:focus, &:hover { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } +} + +.control-panel-back { + &:focus, &:hover { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } +} + +.customize-controls-close:before { + font: normal 22px/1 dashicons; + content: "\f335"; + position: relative; + top: 7px; + left: 13px; +} + +.control-panel-back:before { + font: normal 20px/1 dashicons; + content: "\f341"; + position: relative; + top: 7px; + left: 13px; +} + +.rtl .control-panel-back:before { + content: "\f344"; +} + +.in-sub-panel .control-panel-back { + left: 0; +} + +.current-panel > .accordion-section-title { + height: 22px; +} + +.wp-full-overlay-sidebar .wp-full-overlay-header { + -webkit-transition: padding ease-in-out .18s; + transition: padding ease-in-out .18s; +} + +.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header { + padding-left: 62px; +} + +#customize-info, #customize-theme-controls > ul > .accordion-section { + position: relative; + left: 0; + -webkit-transition: left ease-in-out .18s; + transition: left ease-in-out .18s; +} + +.in-sub-panel { + #customize-info { + left: -300px; + width: 300px; + } + #customize-theme-controls { + > ul > .accordion-section { + left: -300px; + width: 300px; + } + .accordion-section.current-panel { + width: 100%; + } + } +} + +#customize-theme-controls .control-section { + &.current-panel { + padding: 0; + > h3.accordion-section-title { + left: -300px; + -webkit-transition: left ease-in-out .18s; + transition: left ease-in-out .18s; + } + } + > h3.accordion-section-title { + position: relative; + left: 0; + } +} + +.control-section.control-panel { + .accordion-section-title .panel-title { + font-size: 20px; + font-weight: 200; + line-height: 24px; + display: block; + border: none; + } + .preview-notice { + font-size: 13px; + line-height: 24px; + } +} + +p.customize-section-description { + font-style: normal; +} + +.customize-control { + width: 100%; + float: left; + clear: both; + margin-bottom: 8px; + select { + line-height: 28px; + } + input { + &[type="radio"], &[type="checkbox"] { + line-height: 28px; + } + &[type="text"], &[type="password"], &[type="email"], &[type="number"], &[type="search"], &[type="tel"], &[type="url"] { + width: 98%; + line-height: 18px; + margin: 0; + } + } +} + +.customize-control-textarea textarea { + width: 100%; + resize: vertical; +} + +.customize-control select { + min-width: 50%; + max-width: 100%; + height: 28px; + line-height: 28px; + &[multiple] { + height: auto; + } +} + +.customize-control-title { + display: block; + font-size: 14px; + line-height: 24px; + font-weight: 600; + margin-bottom: 5px; +} + +.customize-control-description { + display: block; + font-style: italic; + line-height: 18px; + margin-bottom: 5px; +} + +.customize-control-color .color-picker, .customize-control-checkbox label, .customize-control-upload div { + line-height: 28px; +} + +.customize-control-checkbox input { + margin-right: 5px; +} + +.customize-control-radio { + padding: 5px 0 10px; + .customize-control-title { + margin-bottom: 0; + line-height: 22px; + + .customize-control-description { + margin-top: 7px; + } + } + label { + line-height: 32px; + } + input { + margin-right: 5px; + } +} + +#customize-preview iframe { + width: 100%; + height: 100%; +} + +.wp-full-overlay-sidebar { + background: #eeeeee; + border-right: 1px solid #ddd; +} + +.collapse-sidebar { + background-color: transparent !important; + border: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + -webkit-border-radius: 0 !important; + border-radius: 0 !important; + &:active { + text-shadow: none; + .collapse-sidebar-label, .collapse-sidebar-arrow:before { + text-shadow: none; + } + } +} + +.collapsed .collapse-sidebar-arrow:before { + color: #888; +} + +/* Style for custom settings */ + +/* + * Dropdowns + */ + +.accordion-section { + .dropdown { + float: left; + display: block; + position: relative; + cursor: pointer; + } + .dropdown-content { + overflow: hidden; + float: left; + min-width: 30px; + height: 16px; + line-height: 16px; + margin-right: 16px; + padding: 4px 5px; + border: 2px solid #eeeeee; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } +} + +.customize-control { + .dropdown-arrow { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 20px; + background: #eeeeee; + &:after { + content: "\f140"; + font: normal 20px/1 'dashicons'; + speak: none; + display: block; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #333; + } + } + .dropdown-status { + color: #333; + background: #eeeeee; + display: none; + max-width: 112px; + } +} + +/* Color Picker */ + +.customize-control-color { + .color-picker-hex { + display: none; + } + &.open .color-picker-hex { + display: block; + } + .dropdown { + margin-right: 5px; + margin-bottom: 5px; + .dropdown-content { + background-color: #555555; + border: 1px solid rgba(0, 0, 0, 0.15); + } + &:hover .dropdown-content { + border-color: rgba(0, 0, 0, 0.25); + } + } +} + +/* + * Image Picker + */ + +.customize-control-image { + .library, .actions { + display: none; + float: left; + width: 100%; + } + &.open { + .library, .actions { + display: block; + } + } +} + +.accordion-section { + .customize-control-image { + .dropdown-content { + height: auto; + min-height: 24px; + min-width: 40px; + padding: 0; + } + .dropdown-status { + padding: 4px 5px; + } + .preview-thumbnail img { + display: block; + width: 100%; + max-width: 122px; + max-height: 98px; + margin: 0 auto; + } + .actions { + text-align: right; + } + .library { + ul { + border-bottom: 1px solid #ddd; + float: left; + width: 100%; + margin: 10px 0 0; + } + li { + color: #ccc; + float: left; + padding: 3px 15px; + margin: 0; + border: 1px solid transparent; + &.library-selected { + margin-bottom: -1px; + padding-bottom: 4px; + color: #666666; + border-color: #ddd; + border-bottom-color: #fff; + } + } + .thumbnail { + display: block; + width: 100%; + img { + display: block; + max-width: 90%; + max-height: 80px; + margin: 5px auto; + padding: 2px; + background: #666666; + } + &:hover img { + background-color: #2ea2cc; + } + } + } + .library-content { + display: none; + width: 100%; + float: left; + padding: 10px 0; + &.library-selected { + display: block; + } + } + } + .customize-control-upload .upload-fallback, .customize-control-image .upload-fallback { + display: none; + } + .customize-control-upload .upload-dropzone, .customize-control-image .upload-dropzone { + display: none; + padding: 15px 10px; + border: 3px dashed #dfdfdf; + margin: 5px auto; + text-align: center; + position: relative; + cursor: default; + } + .customize-control-upload .upload-dropzone.supports-drag-drop, .customize-control-image .upload-dropzone.supports-drag-drop { + display: block; + -webkit-transition: border-color 0.1s; + transition: border-color 0.1s; + } + .customize-control-upload .library ul li, .customize-control-image .library ul li { + cursor: pointer; + } + .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over, .customize-control-image .upload-dropzone.supports-drag-drop.drag-over { + border-color: #83b4d8; + } +} + +/** + * iOS can't scroll iframes, + * instead it expands the iframe size to match the size of the content + */ + +.ios { + .wp-full-overlay, #customize-preview { + position: relative; + } + #customize-controls .wp-full-overlay-sidebar-content { + -webkit-overflow-scrolling: touch; + } +} + +/** Header control **/ +@-webkit-keyframes dice-color-change { + 0% { color: #d4b146; } + 50% { color: #ef54b0; } + 75% { color: #7190d3; } + 100% { color: #d4b146; } +} + +@-ms-keyframes dice-color-change { + 0% { color: #d4b146; } + 50% { color: #ef54b0; } + 75% { color: #7190d3; } + 100% { color: #d4b146; } +} + +@keyframes dice-color-change { + 0% { color: #d4b146; } + 50% { color: #ef54b0; } + 75% { color: #7190d3; } + 100% { color: #d4b146; } +} + + +#customize-control-header_image { + .current { + margin-bottom: 8px; + } + .uploaded { + margin-bottom: 18px; + button:not(.random) { + width: 100%; + padding: 0; + margin: 0; + background: none; + border: none; + color: inherit; + cursor: pointer; + } + } + .default button:not(.random) { + width: 100%; + padding: 0; + margin: 0; + background: none; + border: none; + color: inherit; + cursor: pointer; + } + button { + img { + display: block; + } + &.new, &.remove { + white-space: normal; + width: 48%; + height: auto; + } + } + .current .container { + overflow: hidden; + -webkit-border-radius: 2px; + border: 1px solid #eee; + -webkit-border-radius: 2px; + border-radius: 2px; + } + .placeholder { + width: 100%; + position: relative; + text-align: center; + cursor: default; + } + .inner { + display: none; + position: absolute; + width: 100%; + color: #555; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 20px; + top: 10px; + .dashicons { + line-height: 20px; + top: 10px; + } + } + .list .inner { + top: 9px; + .dashicons { + top: 9px; + } + } + .header-view { + position: relative; + width: 100%; + margin-bottom: 5px; + &:last-child { + margin-bottom: 0px; + } + &:after { + border: 0; + } + &.selected:after { + content: ''; + position: absolute; + height: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + border: 4px solid #2ea2cc; + -webkit-border-radius: 2px; + border-radius: 2px; + } + &.button.selected { + border: 0; + } + } + .uploaded .header-view .close { + font-size: 2em; + color: grey; + position: absolute; + visibility: hidden; + top: 10px; + right: 10px; + z-index: 1; + width: 20px; + height: 20px; + cursor: pointer; + &:hover { + color: black; + text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; + } + } + .header-view:hover .close { + visibility: visible; + } + .random.placeholder { + cursor: pointer; + -webkit-border-radius: 2px; + border-radius: 2px; + height: 40px; + } + button.random { + width: 100%; + height: auto; + min-height: 40px; + white-space: normal; + .dice { + margin-top: 4px; + } + } + .placeholder:hover .dice, .header-view:hover > button.random .dice { + -webkit-animation: dice-color-change 3s infinite; + -ms-animation: dice-color-change 3s infinite; + animation: dice-color-change 3s infinite; + } + .actions { + margin-bottom: 32px; + } + .choice { + position: relative; + display: block; + margin-bottom: 9px; + } + .uploaded div:last-child > .choice { + margin-bottom: 0; + } + img { + width: 100%; + -webkit-border-radius: 2px; + border-radius: 2px; + } + .remove { + float: left; + margin-right: 3px; + } + .new { + float: right; + } +} + +/* Header control: current image container */ + +/* Convoluted, but 'outline' support isn't good enough yet */ + +/* Header control: overlay "close" button */ + +/* Header control: randomiz(s)er */ + +/* Header control: actions and choices */ + +/** Handle cheaters. */ + +body.cheatin { + font-size: medium; + height: auto; + background: #fff; + margin: 50px auto 2em; + padding: 1em 2em; + max-width: 700px; + min-width: 0; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); + p { + font-size: 14px; + line-height: 1.5; + margin: 25px 0 20px; + } +} + diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css deleted file mode 100644 index f025f79..0000000 --- a/src/wp-admin/css/customize-widgets.css +++ /dev/null @@ -1,603 +0,0 @@ -.wp-full-overlay-sidebar { - overflow: visible; -} - -/** - * Hide all sidebar sections by default, only show them (via JS) once the - * preview loads and we know whether the sidebars are used in the template. - */ - -.control-section[id^="accordion-section-sidebar-widgets-"], -.customize-control-sidebar_widgets label, -.customize-control-sidebar_widgets .hide-if-js { - /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ - display:none; -} - -.customize-control-widget_form .widget-top { - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} - -.customize-control-widget_form:not(.widget-rendered) .widget-top { - opacity: 0.5; -} - -.customize-control-widget_form .widget-control-save, -.customize-control-widget_form .spinner { - display: none; -} - -.customize-control-widget_form.previewer-loading .spinner { - display: inline; -} - -.customize-control-widget_form.widget-form-disabled .widget-content { - opacity: 0.7; - pointer-events: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.customize-control-widget_form .widget { - margin-bottom: 0; -} - -.customize-control-widget_form.wide-widget-control .widget-inside { - position: fixed; - left: 299px; - top: 25%; - border: 1px solid rgb(229, 229, 229); - overflow: auto; -} -.customize-control-widget_form.wide-widget-control .widget-inside > .form { - padding: 20px; -} - -.customize-control-widget_form.wide-widget-control .widget-top { - -webkit-transition: background-color 0.4s; - transition: background-color 0.4s; -} -.customize-control-widget_form.wide-widget-control.expanding .widget-top, -.customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { - background-color: rgb(227, 227, 227); -} - -.widget-inside { - padding: 1px 10px 10px 10px; - border-top: none; - line-height: 16px; -} - -.widget-top { - cursor: move; -} - -.customize-control-widget_form.expanded a.widget-action:after { - content: "\f142"; -} - -.customize-control-widget_form.wide-widget-control a.widget-action:after { - content: "\f139"; -} - -.customize-control-widget_form.wide-widget-control.expanded a.widget-action:after { - content: "\f141"; -} - -.widget-title-action { - cursor: pointer; -} - -.customize-control-widget_form .widget .customize-control-title { - cursor: move; -} - -.control-section.accordion-section.highlighted > .accordion-section-title, -.customize-control-widget_form.highlighted { - outline: none; - -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); - box-shadow: 0 0 2px rgba(30,140,190,0.8); - position: relative; - z-index: 1; -} - -#widget-customizer-control-templates { - display: none; -} - -/** -* Widget reordering styles -**/ - -.reorder-toggle { - float: right; - padding: 5px 8px; - text-decoration: none; - cursor: pointer; - outline: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.reorder-toggle:focus { - outline: 1px dotted; -} - -.reorder-done, -.reordering .reorder { - display: none; -} - -.reordering .reorder-done { - display: block; - color: #aa0000; -} - -#customize-theme-controls .reordering .add-new-widget { - opacity: 0.2; - pointer-events: none; - cursor: not-allowed; -} - -#customize-theme-controls .widget-reorder-nav { - display: none; - float: right; - background-color: #fafafa; -} - -.widget-reorder-nav span { - position: relative; - overflow: hidden; - float: left; - display: block; - width: 33px; /* was 42px for mobile */ - height: 43px; - color: #888; - text-indent: -9999px; - cursor: pointer; - outline: none; -} - -.widget-reorder-nav span:before { - display: inline-block; - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - font: normal 20px/43px 'dashicons'; - text-align: center; - text-indent: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.widget-reorder-nav span:hover, -.widget-reorder-nav span:focus { - color: #444; - background: #eee; -} - -.move-widget:before { - content: '\f504'; -} - -.move-widget-down:before { - content: '\f347'; -} - -.move-widget-up:before { - content: '\f343'; -} - -#customize-theme-controls .first-widget .move-widget-up, -#customize-theme-controls .last-widget .move-widget-down { - color: #d5d5d5; - cursor: default; -} - -#customize-theme-controls .move-widget-area { - display: none; - background: #fff; - border: 1px solid #dedede; - border-top: none; - cursor: auto; -} - -#customize-theme-controls .reordering .move-widget-area.active { - display: block; -} - -#customize-theme-controls .move-widget-area .description { - margin: 0; - padding: 15px 20px; - font-weight: 400; -} - -#customize-theme-controls .widget-area-select { - margin: 0; - padding: 0; - list-style: none; -} - -#customize-theme-controls .widget-area-select li { - position: relative; - margin: 0; - padding: 13px 15px 15px 42px; - color: #555; - border-top: 1px solid #eee; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#customize-theme-controls .widget-area-select li:before { - display: none; - content: '\f147'; - position: absolute; - top: 12px; - left: 10px; - font: normal 20px/1 'dashicons'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -#customize-theme-controls .widget-area-select li:last-child { - border-bottom: 1px solid #eee; -} - -#customize-theme-controls .widget-area-select .selected { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.4); - background: #2ea2cc; -} - -#customize-theme-controls .widget-area-select .selected:before { - display: block; -} - -#customize-theme-controls .move-widget-actions { - text-align: right; - padding: 12px; -} - -#customize-theme-controls .reordering .widget-title-action { - display: none; -} - -#customize-theme-controls .reordering .widget-reorder-nav { - display: block; -} - - -/** - * Styles for new widget addition panel - */ -.wp-full-overlay-main { - right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ - width: 100%; -} - -#customize-theme-controls .add-new-widget { - cursor: pointer; - float: right; - margin-left: 10px; - -webkit-transition: all 0.2s; - transition: all 0.2s; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - outline: none; -} - -.add-new-widget:before { - content: "\f132"; - display: inline-block; - position: relative; - left: -2px; - top: -1px; - font: normal 20px/1 'dashicons'; - vertical-align: middle; - -webkit-transition: all 0.2s; - transition: all 0.2s; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body.adding-widget .add-new-widget, -body.adding-widget .add-new-widget:hover { - background: #eee; - border-color: #999; - color: #333; - -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); -} -body.adding-widget .add-new-widget:before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -#available-widgets .widget { - position: static; -} - -/* override widgets admin page rules in wp-admin/css/wp-admin.css */ -#widgets-left #available-widgets .widget { - float: none !important; - width: auto !important; -} - -#available-widgets { - position: absolute; - overflow: auto; - top: 0; - bottom: 0; - left: -301px; - width: 300px; - margin: 0; - z-index: 1; - background: #fff; - -webkit-transition: all 0.2s; - transition: all 0.2s; - border-right: 1px solid #dddddd; -} - -#available-widgets-filter { - padding: 8px 17px 7px 13px; - border-bottom: 1px solid #e4e4e4; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#available-widgets-filter input { - padding: 5px 10px 2px 10px; - width: 100%; -} - -#available-widgets .widget-tpl { - position: relative; - padding: 20px 15px 20px 60px; - border-bottom: 1px solid #e4e4e4; - cursor: pointer; - display: none; -} - -#available-widgets .widget-tpl:hover, -#available-widgets .widget-tpl.selected { - background: #fafafa; -} - -#available-widgets .widget-top, -#available-widgets .widget-top:hover { - border: none; - background: transparent; - -webkit-box-shadow: none; - box-shadow: none; -} - -#available-widgets .widget-title h4 { - padding: 0 0 5px; - font-size: 14px; -} - -#available-widgets .widget .widget-description { - padding: 0; - color: #777; -} - -#customize-preview { - -webkit-transition: all 0.2s; - transition: all 0.2s; -} - -body.adding-widget #available-widgets { - left: 0; -} - -body.adding-widget .wp-full-overlay-main { - left: 300px; -} - -body.adding-widget #customize-preview { - opacity: 0.4; -} - - -/** - * Widget Icon styling - * No plurals in naming. - * Ordered from lowest to highest specificity. - **/ -#available-widgets .widget-title { - position: relative; -} - -#available-widgets .widget-title:before { - content: "\f132"; - position: absolute; - top: -3px; - right: 100%; - margin-right: 20px; - width: 20px; - height: 20px; - color: #333; - font: normal 20px/1 'dashicons'; - text-align: center; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* smiley */ -#available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; } - -/* star-filled */ -#available-widgets [class*="super"] .widget-title:before, -#available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; } - -/* wordpress */ -#available-widgets [class*="meta"] .widget-title:before { content: "\f120"; } - -/* archive-box */ -#available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; } - -/* category */ -#available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; } - -/* comments */ -#available-widgets [class*="comment"] .widget-title:before, -#available-widgets [class*="testimonial"] .widget-title:before, -#available-widgets [class*="chat"] .widget-title:before { content: "\f101"; } - -/* post */ -#available-widgets [class*="post"] .widget-title:before { content: "\f109"; } - -/* admin-page */ -#available-widgets [class*="page"] .widget-title:before { content: "\f105"; } - -/* text */ -#available-widgets [class*="text"] .widget-title:before { content: "\f478"; } - -/* links */ -#available-widgets [class*="link"] .widget-title:before { content: "\f103"; } - -/* search */ -#available-widgets [class*="search"] .widget-title:before { content: "\f179"; } - -/* menu */ -#available-widgets [class*="menu"] .widget-title:before, -#available-widgets [class*="nav"] .widget-title:before { content: "\f333"; } - -/* tag-cloud */ -#available-widgets [class*="tag"] .widget-title:before { content: "\f479"; } - -/* rss */ -#available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; } - -/* calendar */ -#available-widgets [class*="event"] .widget-title:before, -#available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;} - -/* format-image */ -#available-widgets [class*="image"] .widget-title:before, -#available-widgets [class*="photo"] .widget-title:before, -#available-widgets [class*="slide"] .widget-title:before, -#available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; } - -/* format-gallery */ -#available-widgets [class*="album"] .widget-title:before, -#available-widgets [class*="galler"] .widget-title:before { content: "\f161"; } - -/* format-video */ -#available-widgets [class*="video"] .widget-title:before, -#available-widgets [class*="tube"] .widget-title:before { content: "\f126"; } - -/* format-audio */ -#available-widgets [class*="music"] .widget-title:before, -#available-widgets [class*="radio"] .widget-title:before, -#available-widgets [class*="audio"] .widget-title:before { content: "\f127"; } - -/* admin-users */ -#available-widgets [class*="login"] .widget-title:before, -#available-widgets [class*="user"] .widget-title:before, -#available-widgets [class*="member"] .widget-title:before, -#available-widgets [class*="avatar"] .widget-title:before, -#available-widgets [class*="subscriber"] .widget-title:before, -#available-widgets [class*="profile"] .widget-title:before, -#available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; } - -/* cart */ -#available-widgets [class*="commerce"] .widget-title:before, -#available-widgets [class*="shop"] .widget-title:before, -#available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; } - -/* shield */ -#available-widgets [class*="secur"] .widget-title:before, -#available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; } - -/* chart-bar */ -#available-widgets [class*="analytic"] .widget-title:before, -#available-widgets [class*="stat"] .widget-title:before, -#available-widgets [class*="poll"] .widget-title:before { content: "\f185"; } - -/* feedback */ -#available-widgets [class*="form"] .widget-title:before { content: "\f175"; } - -/* email-alt */ -#available-widgets [class*="subscribe"] .widget-title:before, -#available-widgets [class*="news"] .widget-title:before, -#available-widgets [class*="contact"] .widget-title:before, -#available-widgets [class*="mail"] .widget-title:before { content: "\f466"; } - -/* share */ -#available-widgets [class*="share"] .widget-title:before, -#available-widgets [class*="socia"] .widget-title:before { content: "\f237"; } - -/* translation */ -#available-widgets [class*="lang"] .widget-title:before, -#available-widgets [class*="translat"] .widget-title:before { content: "\f326"; } - -/* location-alt */ -#available-widgets [class*="locat"] .widget-title:before, -#available-widgets [class*="map"] .widget-title:before { content: "\f231"; } - -/* download */ -#available-widgets [class*="download"] .widget-title:before { content: "\f316"; } - -/* cloud */ -#available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;} - -/* facebook */ -#available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; } - -/* twitter */ -#available-widgets [class*="tweet"] .widget-title:before, -#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } - - -@media screen and (max-height: 700px) and (min-width: 981px) { - .customize-control { - margin-bottom: 0; - } - .widget-top { - -webkit-box-shadow: none; - box-shadow: none; - margin-top: -1px; - } - .widget-top:hover { - position: relative; - z-index: 1; - } - .last-widget { - margin-bottom: 15px; - } - .widget-title h4 { - padding: 13px 15px; - } - .widget-top a.widget-action:after { - padding-top: 9px; - } - .widget-reorder-nav span { - height: 39px; - } - .widget-reorder-nav span:before { - line-height: 39px; - } - #customize-theme-controls .widget-area-select li { - padding: 9px 15px 11px 42px; - } - #customize-theme-controls .widget-area-select li:before { - top: 8px; - } -} diff --git a/src/wp-admin/css/customize-widgets.scss b/src/wp-admin/css/customize-widgets.scss new file mode 100644 index 0000000..127fc23 --- /dev/null +++ b/src/wp-admin/css/customize-widgets.scss @@ -0,0 +1,649 @@ +.wp-full-overlay-sidebar { + overflow: visible; +} + +/** + * Hide all sidebar sections by default, only show them (via JS) once the + * preview loads and we know whether the sidebars are used in the template. + */ + +.control-section[id^="accordion-section-sidebar-widgets-"] { + /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ + display: none; +} + +.customize-control-sidebar_widgets { + label, .hide-if-js { + /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ + display: none; + } +} + +.customize-control-widget_form { + .widget-top { + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; + } + &:not(.widget-rendered) .widget-top { + opacity: 0.5; + } + .widget-control-save, .spinner { + display: none; + } + &.previewer-loading .spinner { + display: inline; + } + &.widget-form-disabled .widget-content { + opacity: 0.7; + pointer-events: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + } + .widget { + margin-bottom: 0; + } + &.wide-widget-control { + .widget-inside { + position: fixed; + left: 299px; + top: 25%; + border: 1px solid rgb(229, 229, 229); + overflow: auto; + > .form { + padding: 20px; + } + } + .widget-top { + -webkit-transition: background-color 0.4s; + transition: background-color 0.4s; + } + &.expanding .widget-top, &.expanded:not(.collapsing) .widget-top { + background-color: rgb(227, 227, 227); + } + } +} + +.widget-inside { + padding: 1px 10px 10px 10px; + border-top: none; + line-height: 16px; +} + +.widget-top { + cursor: move; +} + +.customize-control-widget_form { + &.expanded a.widget-action:after { + content: "\f142"; + } + &.wide-widget-control { + a.widget-action:after { + content: "\f139"; + } + &.expanded a.widget-action:after { + content: "\f141"; + } + } +} + +.widget-title-action { + cursor: pointer; +} + +.customize-control-widget_form .widget .customize-control-title { + cursor: move; +} + +.control-section.accordion-section.highlighted > .accordion-section-title, .customize-control-widget_form.highlighted { + outline: none; + -webkit-box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + position: relative; + z-index: 1; +} + +#widget-customizer-control-templates { + display: none; +} + +/** +* Widget reordering styles +**/ + +.reorder-toggle { + float: right; + padding: 5px 8px; + text-decoration: none; + cursor: pointer; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + &:focus { + outline: 1px dotted; + } +} + +.reorder-done { + display: none; +} + +.reordering { + .reorder { + display: none; + } + .reorder-done { + display: block; + color: #aa0000; + } +} + +#customize-theme-controls { + .reordering .add-new-widget { + opacity: 0.2; + pointer-events: none; + cursor: not-allowed; + } + .widget-reorder-nav { + display: none; + float: right; + background-color: #fafafa; + } +} + +.widget-reorder-nav span { + position: relative; + overflow: hidden; + float: left; + display: block; + width: 33px; + /* was 42px for mobile */ + height: 43px; + color: #888; + text-indent: -9999px; + cursor: pointer; + outline: none; + &:before { + display: inline-block; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + font: normal 20px/43px 'dashicons'; + text-align: center; + text-indent: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + &:hover, &:focus { + color: #444; + background: #eee; + } +} + +.move-widget:before { + content: '\f504'; +} + +.move-widget-down:before { + content: '\f347'; +} + +.move-widget-up:before { + content: '\f343'; +} + +#customize-theme-controls { + .first-widget .move-widget-up, .last-widget .move-widget-down { + color: #d5d5d5; + cursor: default; + } + .move-widget-area { + display: none; + background: #fff; + border: 1px solid #dedede; + border-top: none; + cursor: auto; + } + .reordering .move-widget-area.active { + display: block; + } + .move-widget-area .description { + margin: 0; + padding: 15px 20px; + font-weight: 400; + } + .widget-area-select { + margin: 0; + padding: 0; + list-style: none; + li { + position: relative; + margin: 0; + padding: 13px 15px 15px 42px; + color: #555; + border-top: 1px solid #eee; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + &:before { + display: none; + content: '\f147'; + position: absolute; + top: 12px; + left: 10px; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + &:last-child { + border-bottom: 1px solid #eee; + } + } + .selected { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); + background: #2ea2cc; + &:before { + display: block; + } + } + } + .move-widget-actions { + text-align: right; + padding: 12px; + } + .reordering { + .widget-title-action { + display: none; + } + .widget-reorder-nav { + display: block; + } + } +} + +/** + * Styles for new widget addition panel + */ + +.wp-full-overlay-main { + right: auto; + /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ + width: 100%; +} + +#customize-theme-controls .add-new-widget { + cursor: pointer; + float: right; + margin-left: 10px; + -webkit-transition: all 0.2s; + transition: all 0.2s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: none; +} + +.add-new-widget:before { + content: "\f132"; + display: inline-block; + position: relative; + left: -2px; + top: -1px; + font: normal 20px/1 'dashicons'; + vertical-align: middle; + -webkit-transition: all 0.2s; + transition: all 0.2s; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body.adding-widget .add-new-widget { + background: #eee; + border-color: #999; + color: #333; + -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + &:hover { + background: #eee; + border-color: #999; + color: #333; + -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + } + &:before { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } +} + +#available-widgets .widget { + position: static; +} + +/* override widgets admin page rules in wp-admin/css/wp-admin.css */ + +#widgets-left #available-widgets .widget { + float: none !important; + width: auto !important; +} + +#available-widgets { + position: absolute; + overflow: auto; + top: 0; + bottom: 0; + left: -301px; + width: 300px; + margin: 0; + z-index: 1; + background: #fff; + -webkit-transition: all 0.2s; + transition: all 0.2s; + border-right: 1px solid #dddddd; +} + +#available-widgets-filter { + padding: 8px 17px 7px 13px; + border-bottom: 1px solid #e4e4e4; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + input { + padding: 5px 10px 2px 10px; + width: 100%; + } +} + +#available-widgets { + .widget-tpl { + position: relative; + padding: 20px 15px 20px 60px; + border-bottom: 1px solid #e4e4e4; + cursor: pointer; + display: none; + &:hover, &.selected { + background: #fafafa; + } + } + .widget-top { + border: none; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + &:hover { + border: none; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .widget-title h4 { + padding: 0 0 5px; + font-size: 14px; + } + .widget .widget-description { + padding: 0; + color: #777; + } +} + +#customize-preview { + -webkit-transition: all 0.2s; + transition: all 0.2s; +} + +body.adding-widget { + #available-widgets { + left: 0; + } + .wp-full-overlay-main { + left: 300px; + } + #customize-preview { + opacity: 0.4; + } +} + +/** + * Widget Icon styling + * No plurals in naming. + * Ordered from lowest to highest specificity. + **/ + +#available-widgets { + .widget-title { + position: relative; + &:before { + content: "\f132"; + position: absolute; + top: -3px; + right: 100%; + margin-right: 20px; + width: 20px; + height: 20px; + color: #333; + font: normal 20px/1 'dashicons'; + text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + [class*="easy"] .widget-title:before { + content: "\f328"; + top: -4px; + } + [class*="super"] .widget-title:before, [class*="like"] .widget-title:before { + content: "\f155"; + top: -4px; + } + [class*="meta"] .widget-title:before { + content: "\f120"; + } + [class*="archives"] .widget-title:before { + content: "\f480"; + top: -4px; + } + [class*="categor"] .widget-title:before { + content: "\f318"; + top: -4px; + } + [class*="comment"] .widget-title:before, [class*="testimonial"] .widget-title:before, [class*="chat"] .widget-title:before { + content: "\f101"; + } + [class*="post"] .widget-title:before { + content: "\f109"; + } + [class*="page"] .widget-title:before { + content: "\f105"; + } + [class*="text"] .widget-title:before { + content: "\f478"; + } + [class*="link"] .widget-title:before { + content: "\f103"; + } + [class*="search"] .widget-title:before { + content: "\f179"; + } + [class*="menu"] .widget-title:before, [class*="nav"] .widget-title:before { + content: "\f333"; + } + [class*="tag"] .widget-title:before { + content: "\f479"; + } + [class*="rss"] .widget-title:before { + content: "\f303"; + top: -6px; + } + [class*="event"] .widget-title:before, [class*="calendar"] .widget-title:before { + content: "\f145"; + top: -4px; + } + [class*="image"] .widget-title:before, [class*="photo"] .widget-title:before, [class*="slide"] .widget-title:before, [class*="instagram"] .widget-title:before { + content: "\f128"; + } + [class*="album"] .widget-title:before, [class*="galler"] .widget-title:before { + content: "\f161"; + } + [class*="video"] .widget-title:before, [class*="tube"] .widget-title:before { + content: "\f126"; + } + [class*="music"] .widget-title:before, [class*="radio"] .widget-title:before, [class*="audio"] .widget-title:before { + content: "\f127"; + } + [class*="login"] .widget-title:before, [class*="user"] .widget-title:before, [class*="member"] .widget-title:before, [class*="avatar"] .widget-title:before, [class*="subscriber"] .widget-title:before, [class*="profile"] .widget-title:before, [class*="grofile"] .widget-title:before { + content: "\f110"; + } + [class*="commerce"] .widget-title:before, [class*="shop"] .widget-title:before, [class*="cart"] .widget-title:before { + content: "\f174"; + top: -4px; + } + [class*="secur"] .widget-title:before, [class*="firewall"] .widget-title:before { + content: "\f332"; + } + [class*="analytic"] .widget-title:before, [class*="stat"] .widget-title:before, [class*="poll"] .widget-title:before { + content: "\f185"; + } + [class*="form"] .widget-title:before { + content: "\f175"; + } + [class*="subscribe"] .widget-title:before, [class*="news"] .widget-title:before, [class*="contact"] .widget-title:before, [class*="mail"] .widget-title:before { + content: "\f466"; + } + [class*="share"] .widget-title:before, [class*="socia"] .widget-title:before { + content: "\f237"; + } + [class*="lang"] .widget-title:before, [class*="translat"] .widget-title:before { + content: "\f326"; + } + [class*="locat"] .widget-title:before, [class*="map"] .widget-title:before { + content: "\f231"; + } + [class*="download"] .widget-title:before { + content: "\f316"; + } + [class*="weather"] .widget-title:before { + content: "\f176"; + top: -4px; + } + [class*="facebook"] .widget-title:before { + content: "\f304"; + } + [class*="tweet"] .widget-title:before, [class*="twitter"] .widget-title:before { + content: "\f301"; + } +} + +/* smiley */ + +/* star-filled */ + +/* wordpress */ + +/* archive-box */ + +/* category */ + +/* comments */ + +/* post */ + +/* admin-page */ + +/* text */ + +/* links */ + +/* search */ + +/* menu */ + +/* tag-cloud */ + +/* rss */ + +/* calendar */ + +/* format-image */ + +/* format-gallery */ + +/* format-video */ + +/* format-audio */ + +/* admin-users */ + +/* cart */ + +/* shield */ + +/* chart-bar */ + +/* feedback */ + +/* email-alt */ + +/* share */ + +/* translation */ + +/* location-alt */ + +/* download */ + +/* cloud */ + +/* facebook */ + +/* twitter */ + +@media screen and (max-height: 700px) and (min-width: 981px) { + .customize-control { + margin-bottom: 0; + } + .widget-top { + -webkit-box-shadow: none; + box-shadow: none; + margin-top: -1px; + &:hover { + position: relative; + z-index: 1; + } + } + .last-widget { + margin-bottom: 15px; + } + .widget-title h4 { + padding: 13px 15px; + } + .widget-top a.widget-action:after { + padding-top: 9px; + } + .widget-reorder-nav span { + height: 39px; + &:before { + line-height: 39px; + } + } + #customize-theme-controls .widget-area-select li { + padding: 9px 15px 11px 42px; + &:before { + top: 8px; + } + } +} diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css deleted file mode 100644 index 9759e40..0000000 --- a/src/wp-admin/css/dashboard.css +++ /dev/null @@ -1,1112 +0,0 @@ -#wpbody-content #dashboard-widgets.columns-1 .postbox-container { - width: 100%; -} - -#wpbody-content #dashboard-widgets.columns-2 .postbox-container { - width: 49.5%; -} - -#wpbody-content #dashboard-widgets.columns-2 #postbox-container-2, -#wpbody-content #dashboard-widgets.columns-2 #postbox-container-3, -#wpbody-content #dashboard-widgets.columns-2 #postbox-container-4 { - float: right; - width: 50.5%; -} - -#wpbody-content #dashboard-widgets.columns-3 .postbox-container { - width: 33.5%; -} - -#wpbody-content #dashboard-widgets.columns-3 #postbox-container-1 { - width: 33%; -} - -#wpbody-content #dashboard-widgets.columns-3 #postbox-container-3, -#wpbody-content #dashboard-widgets.columns-3 #postbox-container-4 { - float: right; -} - -#wpbody-content #dashboard-widgets.columns-4 .postbox-container { - width: 25%; -} - -#dashboard-widgets .postbox-container { - width: 25%; -} - -#dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container { - border: none !important; -} - -.ie8 #wpbody-content #dashboard-widgets .postbox-container { - width: 49.5%; -} - -.ie8 #wpbody-content #dashboard-widgets #postbox-container-2, -.ie8 #wpbody-content #dashboard-widgets #postbox-container-3, -.ie8 #wpbody-content #dashboard-widgets #postbox-container-4 { - float: right; - width: 50.5%; -} - -.ie8 #dashboard-widgets #postbox-container-3 .empty-container, -.ie8 #dashboard-widgets #postbox-container-4 .empty-container { - border: 0 none; - height: 0; - min-height: 0; -} - -/*------------------------------------------------------------------------------ - 9.0 - Dashboard -------------------------------------------------------------------------------*/ - -#dashboard-widgets-wrap { - overflow: hidden; - margin: 0 -8px; -} - -#dashboard-widgets .postbox .inside { - margin-bottom: 0; -} - -#dashboard-widgets .meta-box-sortables { - margin: 0 8px; - min-height: 100px; -} - -/* @todo: this was originally in this section, but likely belongs elsewhere */ -#the-comment-list td.comment p.comment-author { - margin-top: 0; - margin-left: 0; -} - -#the-comment-list p.comment-author img { - float: left; - margin-right: 8px; -} - -#the-comment-list p.comment-author strong a { - border: none; -} - -#the-comment-list td { - vertical-align: top; -} - -#the-comment-list td.comment { - word-wrap: break-word; -} - -#the-comment-list td.comment img { - max-width: 100%; -} - -/* Welcome Panel */ -.welcome-panel { - position: relative; - overflow: auto; - margin: 16px 0; - padding: 23px 10px 0; - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - background: #fff; - font-size: 13px; - line-height: 2.1em; -} - -.welcome-panel h3 { - margin: 0; - font-size: 21px; - font-weight: normal; - line-height: 1.2; -} - -.welcome-panel h4 { - margin: 1.33em 0 0; - font-size: 16px; -} - -.welcome-panel li { - font-size: 14px; -} - -.welcome-panel p { - color: #777; -} - -.welcome-panel a { - text-decoration: none; -} - -.welcome-panel .about-description { - font-size: 16px; - margin: 0; -} - -.welcome-panel .welcome-panel-close { - position: absolute; - top: 5px; - right: 10px; - padding: 20px 15px 0 3px; - font-size: 13px; - text-decoration: none; - line-height: 1; -} - -#welcome-panel.welcome-panel .welcome-panel-close:before { - position: absolute; - left: -18px; - margin-top: -2px; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; -} - -.wp-core-ui .welcome-panel .button.button-hero { - margin: 15px 0 3px; -} - -.welcome-panel-content { - margin-left: 13px; - max-width: 1500px; -} - -.welcome-panel .welcome-panel-column-container { - clear: both; - overflow: hidden; - position: relative; -} - -.welcome-panel .welcome-panel-column { - width: 32%; - min-width: 200px; - float: left; -} - -.ie8 .welcome-panel .welcome-panel-column { - min-width: 230px; -} - -.welcome-panel .welcome-panel-column:first-child { - width: 36%; -} - -.welcome-panel-column p.hide-if-no-customize { - margin-top: 10px; -} - -.welcome-panel-column p { - margin-top: 7px; - color: #464646; -} - -.welcome-panel .welcome-icon { - display: block; - padding: 0 0 8px; - background: transparent !important; -} - -.welcome-panel .welcome-icon:before { - color: #888; - font: normal 20px/1 'dashicons'; - speak: none; - display: inline-block; - padding: 0 10px 0 0; - top: -1px; - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; - vertical-align: top; -} - -.welcome-panel .welcome-write-blog:before, -.welcome-panel .welcome-edit-page:before { - content:'\f119'; - top: -3px; -} - -.welcome-panel .welcome-add-page:before { - content:'\f132'; -} - -.welcome-panel .welcome-view-site:before { - content:'\f115'; - top: -2px; -} - -.welcome-panel .welcome-widgets-menus:before { - content:'\f116'; - top: -2px; -} - -.welcome-panel .welcome-comments:before { - content:'\f117'; - top: -1px; -} - -.welcome-panel .welcome-learn-more:before { - content:'\f118'; - top: -1px; -} - -.welcome-panel .welcome-widgets-menus { - line-height: 16px; -} - -.welcome-panel .welcome-panel-column ul { - margin: 0.8em 1em 1em 0; -} - -.welcome-panel .welcome-panel-column li { - line-height: 16px; - list-style-type: none; -} - -/* Dashboard WordPress news */ - -#dashboard_primary .inside { - margin: 0; - padding: 0; -} - -#dashboard_primary .widget-loading, -#dashboard_primary .dashboard-widget-control-form { - padding: 12px 12px 0; -} - -body #dashboard-widgets .postbox form .submit { - margin: 0; -} - -.dashboard-widget-control-form { - overflow: hidden; -} - -.dashboard-widget-control-form p { - margin-top: 0; -} - -.rssSummary { - color: #777; - margin-top: 4px; -} - -#dashboard_primary .rss-widget { - border-bottom: 1px solid #eee; - font-size: 13px; - padding: 8px 12px 10px; -} - -#dashboard_primary .rss-widget:last-child { - border-bottom: none; - padding-bottom: 8px; -} - -#dashboard_primary .rss-widget a { - font-weight: normal; -} - -#dashboard_primary .rss-widget span, -#dashboard_primary .rss-widget span.rss-date { - color: #777; -} - -#dashboard_primary .rss-widget span.rss-date { - margin-left: 12px; -} - -#dashboard_primary .rss-widget ul li { - margin-bottom: 8px; -} - -/* Dashboard right now */ - -#dashboard_right_now ul { - margin: 0; - overflow: hidden; -} - -#dashboard_right_now li { - width: 50%; - float: left; - margin-bottom: 10px; -} - -#dashboard_right_now .inside { - overflow: hidden; - padding: 0; -} - -#dashboard_right_now .main { - overflow: hidden; - padding: 0 12px 11px; -} - -#dashboard_right_now .main p { - margin: 0; -} - -#dashboard_right_now #wp-version-message .button { - clear: right; - float: right; - position: relative; - top: -5px; -} - -.mu-storage { - overflow: hidden; -} - -#dashboard-widgets h4.mu-storage { - margin-bottom: 10px; -} - -/* Dashboard right now - Colors */ - -#dashboard_right_now li a:before, -#dashboard_right_now li span:before { - color: #888; -} - -#dashboard_right_now .sub { - color: #777; - background: #f5f5f5; - border-top: 1px solid #eee; - padding: 10px 12px 6px 12px; -} - -#dashboard_right_now .sub h4 { - color: #555; -} - -#dashboard_right_now .sub p { - margin: 0 0 1em; -} - -#dashboard_right_now .warning a:before, -#dashboard_right_now .warning span:before { - color: #d54e21; -} - -/* Dashboard right now - Icons */ -#dashboard_right_now li a:before, -#dashboard_right_now li span:before { - content: '\f159'; - font: normal 20px/1 'dashicons'; - speak: none; - display: block; - float: left; - margin: 0 5px 0 0; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; - -webkit-font-smoothing: antialiased; - text-decoration: none !important; -} - -#dashboard_right_now .page-count a:before, -#dashboard_right_now .page-count span:before { - content: '\f105'; -} - -#dashboard_right_now .post-count a:before, -#dashboard_right_now .post-count span:before { - content: '\f109'; -} - -#dashboard_right_now .comment-count a:before { - content: '\f101'; -} - -#dashboard_right_now .comment-mod-count a:before { - content: '\f125'; -} - -#dashboard_right_now .storage-count a:before { - content: '\f104'; -} - -#dashboard_right_now .storage-count.warning a:before { - content: '\f153'; -} - -/* Dashboard Quick Draft */ - -#dashboard_quick_press .inside { - margin: 0; - padding: 0; -} - -#dashboard_quick_press div.updated { - margin-bottom: 10px; - border: 1px solid #eee; - border-width: 1px 1px 1px 0; -} - -#dashboard_quick_press form { - overflow: hidden; - margin: 12px; -} - -#dashboard_quick_press .drafts, -#dashboard_quick_press .easy-blogging { - padding: 10px 0 0; -} - -/* Dashboard Quick Draft - Form styling */ - -input#save-post { - float: left; -} - -form.initial-form.quickpress-open label.prompt { - font-style: normal; -} - -form.initial-form.quickpress-open input#title { - height: auto; -} - -#dashboard_quick_press input, -#dashboard_quick_press textarea { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0; -} - -#dashboard_quick_press textarea { - resize: vertical; -} - -#dashboard-widgets .postbox form .submit { - margin: -39px 0; - float: right; -} - -#description-wrap { - margin-top: 12px; -} - -#title-wrap #title-prompt-text, -.textarea-wrap #content-prompt-text { - color: #777; -} - -#title-wrap #title-prompt-text { - font-size: 1.1em; - padding: 7px 8px; -} - -.input-text-wrap, -.textarea-wrap { - position: relative; -} - -.input-text-wrap .prompt, -.textarea-wrap .prompt { - position: absolute; -} - -.textarea-wrap #content-prompt-text { - font-size: 1.1em; - padding: 7px 8px; -} - -.textarea-wrap textarea#content { - margin: 0 0 8px; - padding: 6px 7px; -} - -#quick-press textarea#content { - min-height: 90px; - max-height: 1300px; - resize: none; -} - -/* Dashboard Quick Draft - Drafts list */ - -.js #dashboard_quick_press .drafts { - border-top: 1px solid #eee; -} - -#dashboard_quick_press .drafts abbr { - border: none; -} - -#dashboard_quick_press .drafts h4 { - margin: 0 12px 8px; - font-weight: normal; -} - -#dashboard_quick_press .drafts .view-all { - float: right; - margin: 0 12px 0 0; -} - -#dashboard_primary a.rsswidget { - font-weight: normal; -} - -#dashboard_quick_press .drafts ul { - margin: 0 12px; -} - -#dashboard_quick_press .drafts li { - margin-bottom: 1em; -} -#dashboard_quick_press .drafts li time { - color: #777; -} - -#dashboard_quick_press .drafts p { - margin: 0; - word-wrap: break-word; -} - -#dashboard_quick_press .draft-title { - overflow: hidden; -} - -#dashboard_quick_press .draft-title a, -#dashboard_quick_press .draft-title time { - float: left; - margin: 0 5px 0 0; -} - -/* Dashboard activity widget */ - -#dashboard-widgets #dashboard_activity h4 { - margin: 0 0 8px 12px; - font-weight: normal; -} - -#dashboard-widgets #dashboard_activity h4.comment-meta { - margin: 0; -} - -#dashboard_activity h4.comment-meta { - margin-bottom: 4px; -} - -#dashboard_activity ul { - padding: 0 12px; -} - -#dashboard_activity .comment-meta span.approve:before { - content: '\f227'; - font: 20px/.5 "dashicons"; - margin-left: 12px; - vertical-align: middle; - position: relative; - top: -1px; - margin-right: 2px; -} - -#dashboard_activity .inside { - padding: 0; - margin: 0; -} - -#dashboard_activity .no-activity { - overflow: hidden; - padding: 0 12px 12px; - text-align: center; -} - -#dashboard_activity .no-activity p { - color: #999; - font-size: 16px; -} - -#dashboard_activity .no-activity .smiley { - margin-top: 0; -} - -#dashboard_activity .no-activity .smiley:before { - content: '\f328'; - font: normal 120px/1 'dashicons'; - speak: none; - display: block; - margin: 0 5px 0 0; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; - -webkit-font-smoothing: antialiased; - text-decoration: none !important; -} - -#dashboard_activity .subsubsub { - float: none; - border-top: 1px solid #eeeeee; - margin-top: 0; - padding: 8px 12px 4px; -} - -#future-posts ul, -#published-posts ul { - clear: both; - margin-bottom: 0; -} - -#future-posts li, -#published-posts li { - overflow: hidden; - margin-bottom: 8px; -} - -#future-posts ul span, -#published-posts ul span { - color: #777; - float: left; - margin-right: 8px; - min-width: 150px; -} - -.activity-block { - border-bottom: 1px solid #eee; - overflow: hidden; - padding: 8px 0 4px; -} - -.activity-block:last-child { - border-bottom: none; -} - -.activity-block .subsubsub li { - color: #ddd; -} - -/* Dashboard activity widget - Comments */ -/* @todo: needs serious de-duplication */ - -#activity-widget #the-comment-list tr.undo, -#activity-widget #the-comment-list div.undo { - background: none; - padding: 6px 0; - margin-left: 12px; -} - -#activity-widget #the-comment-list .alternate, -#activity-widget #the-comment-list .alt { - background: none; -} - -#activity-widget #the-comment-list .comment-item { - background: #fafafa; - padding: 12px; - position: relative; -} - -#activity-widget #the-comment-list img { - position: absolute; - top: 13px; -} - -#activity-widget #the-comment-list .dashboard-comment-wrap { - padding-left: 63px; -} - -#activity-widget #the-comment-list .dashboard-comment-wrap blockquote { - margin: 1em 0; -} - -#activity-widget #the-comment-list .comment-item h4 { - font-size: 13px; - color: #999; -} - -#activity-widget #the-comment-list .comment-item p.row-actions { - margin: 4px 0 0 0; -} - -#activity-widget #the-comment-list .comment-item:first-child { - border-top: 1px solid #eeeeee; -} - -#activity-widget #the-comment-list .unapproved { - background-color: #fef7f1; -} - -#activity-widget #the-comment-list .unapproved:before { - content: ""; - display: block; - position: absolute; - left: 0; - top: 0; - bottom: 0; - background: #d54e21; - width: 4px; -} - -#activity-widget #the-comment-list .spam-undo-inside .avatar, -#activity-widget #the-comment-list .trash-undo-inside .avatar { - position: relative; - top: 0; -} - -/* Browse happy box */ - -#dashboard-widgets #dashboard_browser_nag.postbox .inside { - margin: 10px; -} - -.edit-box { - display: none; -} - -h3:hover .edit-box { - display: inline; -} - -#dashboard-widgets form .input-text-wrap input { - width: 100%; -} - -#dashboard-widgets form .textarea-wrap textarea { - width: 100%; -} - -#dashboard-widgets .postbox form .submit { - float: none; - margin: .5em 0 0; - padding: 0; - border: none; -} - -#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish { - min-width: 0; -} - -#dashboard-widgets a { - text-decoration: none; -} - -#dashboard-widgets h3 a { - text-decoration: underline; -} - -#dashboard-widgets h3 .postbox-title-action { - position: absolute; - right: 10px; - padding: 0; - top: 5px; -} - -.js #dashboard-widgets h3 .postbox-title-action { - right: 33px; -} - -#dashboard-widgets h4 { - color: #222; - font-weight: normal; - font-size: 14px; - margin: 0 0 .2em; - padding: 0; -} - -#dashboard_plugins h5 { - font-size: 14px; -} - -/* Recent Comments */ - -#latest-comments #the-comment-list { - position: relative; -} - -#activity-widget #the-comment-list .comment, -#activity-widget #the-comment-list .pingback { - -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); -} - -#activity-widget .comments #the-comment-list .alt { - background-color: transparent; -} - -#activity-widget #latest-comments #the-comment-list .comment-item { - padding: 1em 12px; -} - -#latest-comments #the-comment-list .pingback { - padding-left: 12px !important; -} - -#latest-comments #the-comment-list .comment-item:first-child { - border-top: none; -} - -#latest-comments #the-comment-list .comment-item h4 { - line-height: 1.5em; - margin-top: 0; - color: #666; -} - -#latest-comments #the-comment-list .comment-item h4 cite { - font-style: normal; - font-weight: normal; -} - -#latest-comments #the-comment-list .comment-item blockquote, -#latest-comments #the-comment-list .comment-item blockquote p { - margin: 0; - padding: 0; - display: inline; -} - -#latest-comments #the-comment-list .comment-item p.row-actions { - margin: 3px 0 0; - padding: 0; - font-size: 13px; -} - -/* QuickDraft */ - -#title-wrap label, -#description-wrap label { - cursor: text; -} - -#title-wrap #title { - padding: 2px 6px; - font-size: 1.3em; - outline: none; -} - -#title-wrap #title-prompt-text { - font-size: 1.1em; - padding: 5px 8px; -} - -/* Feeds */ -.rss-widget ul { - margin: 0; - padding: 0; - list-style: none; -} - -a.rsswidget { - font-size: 14px; - font-weight: 600; - line-height: 1.7em; -} - -.rss-widget ul li { - line-height: 1.5em; - margin-bottom: 12px; -} - -.rss-widget span.rss-date { - color: #999; - font-size: 13px; - margin-left: 3px; -} - -.rss-widget cite { - display: block; - text-align: right; - margin: 0 0 1em; - padding: 0; -} - -.rss-widget cite:before { - content: '\2014'; -} - -.dashboard-comment-wrap { - overflow: hidden; - word-wrap: break-word; -} - -/* Browser Nag */ -#dashboard_browser_nag a.update-browser-link { - font-size: 1.2em; - font-weight: 600; -} - -#dashboard_browser_nag a { - text-decoration: underline; -} - -#dashboard_browser_nag p.browser-update-nag.has-browser-icon { - padding-right: 125px; -} - -#dashboard_browser_nag .browser-icon { - margin-top: -35px; -} - -#dashboard_browser_nag.postbox.browser-insecure { - background-color: #ac1b1b; - border-color: #ac1b1b; -} - -#dashboard_browser_nag.postbox { - background-color: #e29808; - background-image: none; - border-color: #edc048; - color: #fff; - -webkit-box-shadow: none; - box-shadow: none; -} - -#dashboard_browser_nag.postbox.browser-insecure h3 { - border-bottom-color: #cd5a5a; - color: #fff; -} - -#dashboard_browser_nag.postbox h3 { - border-bottom-color: #f6e2ac; - background: transparent none; - color: #fff; - -webkit-box-shadow: none; - box-shadow: none; -} - -#dashboard_browser_nag a { - color: #fff; -} - -/* Make the browser nags easier to read with Open Sans */ - -#dashboard_browser_nag h3.hndle { - border: none; - font-weight: 600; - font-size: 20px; - padding-top: 10px; -} - -.postbox#dashboard_browser_nag p a.dismiss { - font-size: 14px; -} - -.postbox#dashboard_browser_nag p, -.postbox#dashboard_browser_nag a, -.postbox#dashboard_browser_nag p.browser-update-nag { - font-size: 16px; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/* one column on the dash */ -@media only screen and (max-width: 799px) { - #wpbody-content #dashboard-widgets .postbox-container { - width: 100%; - } -} - -/* two columns on the dash, but keep the setting if one is selected */ -@media only screen and (min-width: 800px) and (max-width: 1499px) { - #wpbody-content #dashboard-widgets .postbox-container { - width: 49.5%; - } - - #wpbody-content #dashboard-widgets #postbox-container-2, - #wpbody-content #dashboard-widgets #postbox-container-3, - #wpbody-content #dashboard-widgets #postbox-container-4 { - float: right; - width: 50.5%; - } - - #dashboard-widgets #postbox-container-3 .empty-container, - #dashboard-widgets #postbox-container-4 .empty-container { - border: 0 none; - height: 0; - min-height: 0; - } - - #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container { - width: 100%; - } - - #wpbody #wpbody-content .metabox-holder.columns-1 .postbox-container .empty-container { - border: 0 none; - height: 0; - min-height: 0; - } - - /* show the radio buttons for column prefs only for one or two columns */ - .index-php .screen-layout, - .index-php .columns-prefs { - display: block; - } - - .columns-prefs .columns-prefs-3, - .columns-prefs .columns-prefs-4 { - display: none; - } -} - -/* three columns on the dash */ -@media only screen and (min-width: 1500px) and (max-width: 1800px) { - #wpbody-content #dashboard-widgets .postbox-container { - width: 33.5%; - } - - #wpbody-content #dashboard-widgets #postbox-container-1 { - width: 33%; - } - - #wpbody-content #dashboard-widgets #postbox-container-3, - #wpbody-content #dashboard-widgets #postbox-container-4 { - float: right; - } - - #dashboard-widgets #postbox-container-4 .empty-container { - border: 0 none; - height: 0; - min-height: 0; - } -} - -@media screen and (max-width: 870px) { - .welcome-panel .welcome-panel-column, - .welcome-panel .welcome-panel-column:first-child { - display: block; - float: none; - width: 100%; - } - - .welcome-panel .welcome-panel-column li { - display: inline-block; - margin-right: 13px; - } - - .welcome-panel .welcome-panel-column ul { - margin: 0.4em 0 0; - } - -} - -@media screen and ( max-width: 782px ) { - #dashboard_recent_comments #the-comment-list .comment-item .avatar { - height: 30px; - width: 30px; - margin: 4px 10px 5px 0; - } -} - -/* Smartphone */ -@media screen and (max-width: 600px) { - /* Keep the close icon from overlapping the Welcome text. */ - .welcome-panel .welcome-panel-close { - overflow: hidden; - text-indent: 100%; - white-space: nowrap; - width: 20px; - height: 20px; - right: 0; - padding: 5px; - } - - /* Make the close icon larger for tappability. */ - #welcome-panel.welcome-panel .welcome-panel-close:before { - font-size: 20px; - margin: 0; - } -} diff --git a/src/wp-admin/css/dashboard.scss b/src/wp-admin/css/dashboard.scss new file mode 100644 index 0000000..84b3f37 --- /dev/null +++ b/src/wp-admin/css/dashboard.scss @@ -0,0 +1,1067 @@ +#wpbody-content #dashboard-widgets { + &.columns-1 .postbox-container { + width: 100%; + } + &.columns-2 { + .postbox-container { + width: 49.5%; + } + #postbox-container-2, #postbox-container-3, #postbox-container-4 { + float: right; + width: 50.5%; + } + } + &.columns-3 { + .postbox-container { + width: 33.5%; + } + #postbox-container-1 { + width: 33%; + } + #postbox-container-3, #postbox-container-4 { + float: right; + } + } + &.columns-4 .postbox-container { + width: 25%; + } +} + +#dashboard-widgets .postbox-container { + width: 25%; +} + +#dashboard-widgets-wrap .columns-3 #postbox-container-4 .empty-container { + border: none !important; +} + +.ie8 { + #wpbody-content #dashboard-widgets { + .postbox-container { + width: 49.5%; + } + #postbox-container-2, #postbox-container-3, #postbox-container-4 { + float: right; + width: 50.5%; + } + } + #dashboard-widgets { + #postbox-container-3 .empty-container, #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } + } +} + +/*------------------------------------------------------------------------------ + 9.0 - Dashboard +------------------------------------------------------------------------------*/ + +#dashboard-widgets-wrap { + overflow: hidden; + margin: 0 -8px; +} + +#dashboard-widgets { + .postbox .inside { + margin-bottom: 0; + } + .meta-box-sortables { + margin: 0 8px; + min-height: 100px; + } +} + +/* @todo: this was originally in this section, but likely belongs elsewhere */ + +#the-comment-list { + td.comment p.comment-author { + margin-top: 0; + margin-left: 0; + } + p.comment-author { + img { + float: left; + margin-right: 8px; + } + strong a { + border: none; + } + } + td { + vertical-align: top; + &.comment { + word-wrap: break-word; + img { + max-width: 100%; + } + } + } +} + +/* Welcome Panel */ + +.welcome-panel { + position: relative; + overflow: auto; + margin: 16px 0; + padding: 23px 10px 0; + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; + font-size: 13px; + line-height: 2.1em; + h3 { + margin: 0; + font-size: 21px; + font-weight: normal; + line-height: 1.2; + } + h4 { + margin: 1.33em 0 0; + font-size: 16px; + } + li { + font-size: 14px; + } + p { + color: #777; + } + a { + text-decoration: none; + } + .about-description { + font-size: 16px; + margin: 0; + } + .welcome-panel-close { + position: absolute; + top: 5px; + right: 10px; + padding: 20px 15px 0 3px; + font-size: 13px; + text-decoration: none; + line-height: 1; + } +} + +#welcome-panel.welcome-panel .welcome-panel-close:before { + position: absolute; + left: -18px; + margin-top: -2px; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; +} + +.wp-core-ui .welcome-panel .button.button-hero { + margin: 15px 0 3px; +} + +.welcome-panel-content { + margin-left: 13px; + max-width: 1500px; +} + +.welcome-panel { + .welcome-panel-column-container { + clear: both; + overflow: hidden; + position: relative; + } + .welcome-panel-column { + width: 32%; + min-width: 200px; + float: left; + } +} + +.ie8 .welcome-panel .welcome-panel-column { + min-width: 230px; +} + +.welcome-panel .welcome-panel-column:first-child { + width: 36%; +} + +.welcome-panel-column p { + &.hide-if-no-customize { + margin-top: 10px; + } + margin-top: 7px; + color: #464646; +} + +.welcome-panel { + .welcome-icon { + display: block; + padding: 0 0 8px; + background: transparent !important; + &:before { + color: #888; + font: normal 20px/1 'dashicons'; + speak: none; + display: inline-block; + padding: 0 10px 0 0; + top: -1px; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + vertical-align: top; + } + } + .welcome-write-blog:before, .welcome-edit-page:before { + content: '\f119'; + top: -3px; + } + .welcome-add-page:before { + content: '\f132'; + } + .welcome-view-site:before { + content: '\f115'; + top: -2px; + } + .welcome-widgets-menus:before { + content: '\f116'; + top: -2px; + } + .welcome-comments:before { + content: '\f117'; + top: -1px; + } + .welcome-learn-more:before { + content: '\f118'; + top: -1px; + } + .welcome-widgets-menus { + line-height: 16px; + } + .welcome-panel-column { + ul { + margin: 0.8em 1em 1em 0; + } + li { + line-height: 16px; + list-style-type: none; + } + } +} + +/* Dashboard WordPress news */ + +#dashboard_primary { + .inside { + margin: 0; + padding: 0; + } + .widget-loading, .dashboard-widget-control-form { + padding: 12px 12px 0; + } +} + +body #dashboard-widgets .postbox form .submit { + margin: 0; +} + +.dashboard-widget-control-form { + overflow: hidden; + p { + margin-top: 0; + } +} + +.rssSummary { + color: #777; + margin-top: 4px; +} + +#dashboard_primary .rss-widget { + border-bottom: 1px solid #eee; + font-size: 13px; + padding: 8px 12px 10px; + &:last-child { + border-bottom: none; + padding-bottom: 8px; + } + a { + font-weight: normal; + } + span { + color: #777; + &.rss-date { + color: #777; + margin-left: 12px; + } + } + ul li { + margin-bottom: 8px; + } +} + +/* Dashboard right now */ + +#dashboard_right_now { + ul { + margin: 0; + overflow: hidden; + } + li { + width: 50%; + float: left; + margin-bottom: 10px; + } + .inside { + overflow: hidden; + padding: 0; + } + .main { + overflow: hidden; + padding: 0 12px 11px; + p { + margin: 0; + } + } + #wp-version-message .button { + clear: right; + float: right; + position: relative; + top: -5px; + } +} + +.mu-storage { + overflow: hidden; +} + +#dashboard-widgets h4.mu-storage { + margin-bottom: 10px; +} + +/* Dashboard right now - Colors */ + +#dashboard_right_now { + li { + a:before, span:before { + color: #888; + } + } + .sub { + color: #777; + background: #f5f5f5; + border-top: 1px solid #eee; + padding: 10px 12px 6px 12px; + h4 { + color: #555; + } + p { + margin: 0 0 1em; + } + } + .warning { + a:before, span:before { + color: #d54e21; + } + } + li { + a:before, span:before { + content: '\f159'; + font: normal 20px/1 'dashicons'; + speak: none; + display: block; + float: left; + margin: 0 5px 0 0; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + text-decoration: none !important; + } + } + .page-count { + a:before, span:before { + content: '\f105'; + } + } + .post-count { + a:before, span:before { + content: '\f109'; + } + } + .comment-count a:before { + content: '\f101'; + } + .comment-mod-count a:before { + content: '\f125'; + } + .storage-count { + a:before { + content: '\f104'; + } + &.warning a:before { + content: '\f153'; + } + } +} + +/* Dashboard right now - Icons */ + +/* Dashboard Quick Draft */ + +#dashboard_quick_press { + .inside { + margin: 0; + padding: 0; + } + div.updated { + margin-bottom: 10px; + border: 1px solid #eee; + border-width: 1px 1px 1px 0; + } + form { + overflow: hidden; + margin: 12px; + } + .drafts, .easy-blogging { + padding: 10px 0 0; + } +} + +/* Dashboard Quick Draft - Form styling */ + +input#save-post { + float: left; +} + +form.initial-form.quickpress-open { + label.prompt { + font-style: normal; + } + input#title { + height: auto; + } +} + +#dashboard_quick_press { + input { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + } + textarea { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + resize: vertical; + } +} + +#dashboard-widgets .postbox form .submit { + margin: -39px 0; + float: right; +} + +#description-wrap { + margin-top: 12px; +} + +#title-wrap #title-prompt-text, .textarea-wrap #content-prompt-text { + color: #777; +} + +#title-wrap #title-prompt-text { + font-size: 1.1em; + padding: 7px 8px; +} + +.input-text-wrap, .textarea-wrap { + position: relative; +} + +.input-text-wrap .prompt { + position: absolute; +} + +.textarea-wrap { + .prompt { + position: absolute; + } + #content-prompt-text { + font-size: 1.1em; + padding: 7px 8px; + } + textarea#content { + margin: 0 0 8px; + padding: 6px 7px; + } +} + +#quick-press textarea#content { + min-height: 90px; + max-height: 1300px; + resize: none; +} + +/* Dashboard Quick Draft - Drafts list */ + +.js #dashboard_quick_press .drafts { + border-top: 1px solid #eee; +} + +#dashboard_quick_press .drafts { + abbr { + border: none; + } + h4 { + margin: 0 12px 8px; + font-weight: normal; + } + .view-all { + float: right; + margin: 0 12px 0 0; + } +} + +#dashboard_primary a.rsswidget { + font-weight: normal; +} + +#dashboard_quick_press { + .drafts { + ul { + margin: 0 12px; + } + li { + margin-bottom: 1em; + time { + color: #777; + } + } + p { + margin: 0; + word-wrap: break-word; + } + } + .draft-title { + overflow: hidden; + a, time { + float: left; + margin: 0 5px 0 0; + } + } +} + +/* Dashboard activity widget */ + +#dashboard-widgets #dashboard_activity h4 { + margin: 0 0 8px 12px; + font-weight: normal; + &.comment-meta { + margin: 0; + } +} + +#dashboard_activity { + h4.comment-meta { + margin-bottom: 4px; + } + ul { + padding: 0 12px; + } + .comment-meta span.approve:before { + content: '\f227'; + font: 20px/.5 "dashicons"; + margin-left: 12px; + vertical-align: middle; + position: relative; + top: -1px; + margin-right: 2px; + } + .inside { + padding: 0; + margin: 0; + } + .no-activity { + overflow: hidden; + padding: 0 12px 12px; + text-align: center; + p { + color: #999; + font-size: 16px; + } + .smiley { + margin-top: 0; + &:before { + content: '\f328'; + font: normal 120px/1 'dashicons'; + speak: none; + display: block; + margin: 0 5px 0 0; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + text-decoration: none !important; + } + } + } + .subsubsub { + float: none; + border-top: 1px solid #eeeeee; + margin-top: 0; + padding: 8px 12px 4px; + } +} + +#future-posts ul, #published-posts ul { + clear: both; + margin-bottom: 0; +} + +#future-posts li, #published-posts li { + overflow: hidden; + margin-bottom: 8px; +} + +#future-posts ul span, #published-posts ul span { + color: #777; + float: left; + margin-right: 8px; + min-width: 150px; +} + +.activity-block { + border-bottom: 1px solid #eee; + overflow: hidden; + padding: 8px 0 4px; + &:last-child { + border-bottom: none; + } + .subsubsub li { + color: #ddd; + } +} + +/* Dashboard activity widget - Comments */ +/* @todo: needs serious de-duplication */ + +#activity-widget #the-comment-list { + tr.undo, div.undo { + background: none; + padding: 6px 0; + margin-left: 12px; + } + .alternate, .alt { + background: none; + } + .comment-item { + background: #fafafa; + padding: 12px; + position: relative; + } + img { + position: absolute; + top: 13px; + } + .dashboard-comment-wrap { + padding-left: 63px; + blockquote { + margin: 1em 0; + } + } + .comment-item { + h4 { + font-size: 13px; + color: #999; + } + p.row-actions { + margin: 4px 0 0 0; + } + &:first-child { + border-top: 1px solid #eeeeee; + } + } + .unapproved { + background-color: #fef7f1; + &:before { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + bottom: 0; + background: #d54e21; + width: 4px; + } + } + .spam-undo-inside .avatar, .trash-undo-inside .avatar { + position: relative; + top: 0; + } +} + +/* Browse happy box */ + +#dashboard-widgets #dashboard_browser_nag.postbox .inside { + margin: 10px; +} + +.edit-box { + display: none; +} + +h3:hover .edit-box { + display: inline; +} + +#dashboard-widgets { + form { + .input-text-wrap input, .textarea-wrap textarea { + width: 100%; + } + } + .postbox form .submit { + float: none; + margin: .5em 0 0; + padding: 0; + border: none; + } +} + +#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish { + min-width: 0; +} + +#dashboard-widgets { + a { + text-decoration: none; + } + h3 { + a { + text-decoration: underline; + } + .postbox-title-action { + position: absolute; + right: 10px; + padding: 0; + top: 5px; + } + } +} + +.js #dashboard-widgets h3 .postbox-title-action { + right: 33px; +} + +#dashboard-widgets h4 { + color: #222; + font-weight: normal; + font-size: 14px; + margin: 0 0 .2em; + padding: 0; +} + +#dashboard_plugins h5 { + font-size: 14px; +} + +/* Recent Comments */ + +#latest-comments #the-comment-list { + position: relative; +} + +#activity-widget { + #the-comment-list { + .comment, .pingback { + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); + } + } + .comments #the-comment-list .alt { + background-color: transparent; + } + #latest-comments #the-comment-list .comment-item { + padding: 1em 12px; + } +} + +#latest-comments #the-comment-list { + .pingback { + padding-left: 12px !important; + } + .comment-item { + &:first-child { + border-top: none; + } + h4 { + line-height: 1.5em; + margin-top: 0; + color: #666; + cite { + font-style: normal; + font-weight: normal; + } + } + blockquote { + margin: 0; + padding: 0; + display: inline; + p { + margin: 0; + padding: 0; + display: inline; + } + } + p.row-actions { + margin: 3px 0 0; + padding: 0; + font-size: 13px; + } + } +} + +/* QuickDraft */ + +#title-wrap label, #description-wrap label { + cursor: text; +} + +#title-wrap { + #title { + padding: 2px 6px; + font-size: 1.3em; + outline: none; + } + #title-prompt-text { + font-size: 1.1em; + padding: 5px 8px; + } +} + +/* Feeds */ + +.rss-widget ul { + margin: 0; + padding: 0; + list-style: none; +} + +a.rsswidget { + font-size: 14px; + font-weight: 600; + line-height: 1.7em; +} + +.rss-widget { + ul li { + line-height: 1.5em; + margin-bottom: 12px; + } + span.rss-date { + color: #999; + font-size: 13px; + margin-left: 3px; + } + cite { + display: block; + text-align: right; + margin: 0 0 1em; + padding: 0; + &:before { + content: '\2014'; + } + } +} + +.dashboard-comment-wrap { + overflow: hidden; + word-wrap: break-word; +} + +/* Browser Nag */ + +#dashboard_browser_nag { + a { + &.update-browser-link { + font-size: 1.2em; + font-weight: 600; + } + text-decoration: underline; + } + p.browser-update-nag.has-browser-icon { + padding-right: 125px; + } + .browser-icon { + margin-top: -35px; + } + &.postbox { + &.browser-insecure { + background-color: #ac1b1b; + border-color: #ac1b1b; + h3 { + border-bottom-color: #cd5a5a; + color: #fff; + } + } + background-color: #e29808; + background-image: none; + border-color: #edc048; + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; + h3 { + border-bottom-color: #f6e2ac; + background: transparent none; + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; + } + } + a { + color: #fff; + } + h3.hndle { + border: none; + font-weight: 600; + font-size: 20px; + padding-top: 10px; + } +} + +/* Make the browser nags easier to read with Open Sans */ + +.postbox#dashboard_browser_nag { + p { + a.dismiss { + font-size: 14px; + } + font-size: 16px; + } + a, p.browser-update-nag { + font-size: 16px; + } +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/* one column on the dash */ +@media only screen and (max-width: 799px) { + #wpbody-content #dashboard-widgets .postbox-container { + width: 100%; + } +} + +/* two columns on the dash, but keep the setting if one is selected */ +@media only screen and (min-width: 800px) and (max-width: 1499px) { + #wpbody-content #dashboard-widgets { + .postbox-container { + width: 49.5%; + } + #postbox-container-2, #postbox-container-3, #postbox-container-4 { + float: right; + width: 50.5%; + } + } + #dashboard-widgets { + #postbox-container-3 .empty-container, #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } + } + #wpbody #wpbody-content { + #dashboard-widgets.columns-1 .postbox-container { + width: 100%; + } + .metabox-holder.columns-1 .postbox-container .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } + } + /* show the radio buttons for column prefs only for one or two columns */ + .index-php { + .screen-layout, .columns-prefs { + display: block; + } + } + .columns-prefs { + .columns-prefs-3, .columns-prefs-4 { + display: none; + } + } +} + +/* three columns on the dash */ +@media only screen and (min-width: 1500px) and (max-width: 1800px) { + #wpbody-content #dashboard-widgets { + .postbox-container { + width: 33.5%; + } + #postbox-container-1 { + width: 33%; + } + #postbox-container-3, #postbox-container-4 { + float: right; + } + } + #dashboard-widgets #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } +} + +@media screen and (max-width: 870px) { + .welcome-panel .welcome-panel-column { + display: block; + float: none; + width: 100%; + &:first-child { + display: block; + float: none; + width: 100%; + } + li { + display: inline-block; + margin-right: 13px; + } + ul { + margin: 0.4em 0 0; + } + } +} + +@media screen and (max-width: 782px) { + #dashboard_recent_comments #the-comment-list .comment-item .avatar { + height: 30px; + width: 30px; + margin: 4px 10px 5px 0; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Keep the close icon from overlapping the Welcome text. */ + .welcome-panel .welcome-panel-close { + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + width: 20px; + height: 20px; + right: 0; + padding: 5px; + } + /* Make the close icon larger for tappability. */ + #welcome-panel.welcome-panel .welcome-panel-close:before { + font-size: 20px; + margin: 0; + } +} diff --git a/src/wp-admin/css/deprecated-media.css b/src/wp-admin/css/deprecated-media.css deleted file mode 100644 index ee7c08f..0000000 --- a/src/wp-admin/css/deprecated-media.css +++ /dev/null @@ -1,371 +0,0 @@ -/* Styles for the media library iframe (not used on the Library screen) */ - -div#media-upload-header { - margin: 0; - padding: 5px 5px 0; - font-weight: bold; - position: relative; - border-bottom: 1px solid #dfdfdf; - background: #f9f9f9; -} - -body#media-upload ul#sidemenu { - font-weight: normal; - margin: 0 5px; - left: 0; - bottom: -1px; - float: none; - overflow: hidden; -} - -#media-upload:after { /* clearfix */ - content: ""; - display: table; - clear: both; -} - -#media-upload .slidetoggle { - border-top-color: #dfdfdf; -} - -#media-upload input[type="radio"] { - padding: 0; -} - -form { - margin: 1em; -} - -#search-filter { - text-align: right; -} - -th { - position: relative; -} - -.media-upload-form label.form-help, td.help { - font-family: sans-serif; - font-style: italic; - font-weight: normal; -} - -.media-upload-form p.help { - margin: 0; - padding: 0; -} - -.media-upload-form fieldset { - width: 100%; - border: none; - text-align: justify; - margin: 0 0 1em 0; - padding: 0; -} - -/* specific to the image upload form */ - -.image-align-none-label { - background: url(../images/align-none.png) no-repeat center left; -} - -.image-align-left-label { - background: url(../images/align-left.png) no-repeat center left; -} - -.image-align-center-label { - background: url(../images/align-center.png) no-repeat center left; -} - -.image-align-right-label { - background: url(../images/align-right.png) no-repeat center left; -} - -tr.image-size td { - width: 460px; -} - -tr.image-size div.image-size-item { - margin: 0 0 5px; -} - -#library-form .progress, -#gallery-form .progress, -.insert-gallery, -.describe.startopen, -.describe.startclosed { - display: none; -} - -.media-item .thumbnail { - max-width: 128px; - max-height: 128px; -} - -thead.media-item-info tr { - background-color: transparent; -} - -.form-table thead.media-item-info { - border: 8px solid #fff; -} - -abbr.required { - text-decoration: none; - border: none; -} - -.describe label { - display: inline; -} - -.describe td.error { - padding: 2px 8px; -} - -.describe td.A1 { - width: 132px; -} - -.describe input[type="text"], -.describe textarea { - width: 460px; - border-width: 1px; - border-style: solid; -} - -/* Specific to Uploader */ - -#media-upload p.ml-submit { - padding: 1em 0; -} - -#media-upload p.help, -#media-upload label.help { - font-family: sans-serif; - font-style: italic; - font-weight: normal; -} - -#media-upload .ui-sortable .media-item { - cursor: move; -} - -#media-upload tr.image-size { - margin-bottom: 1em; - height: 3em; -} - -#media-upload #filter { - width: 623px; -} - -#media-upload #filter .subsubsub { - margin: 8px 0; -} - -#filter .tablenav select { - border-style: solid; - border-width: 1px; - padding: 2px; - vertical-align: top; - width: auto; -} - -#media-upload .del-attachment { - display: none; - margin: 5px 0; -} - -.menu_order { - float: right; - font-size: 11px; - margin: 8px 10px 0; -} - -.menu_order_input { - border: 1px solid #ddd; - font-size: 10px; - padding: 1px; - width: 23px; -} - -.ui-sortable-helper { - background-color: #fff; - border: 1px solid #aaa; - opacity: 0.6; - filter: alpha(opacity=60); -} - -#media-upload th.order-head { - width: 20%; - text-align: center; -} - -#media-upload th.actions-head { - width: 25%; - text-align: center; -} - -#media-upload a.wp-post-thumbnail { - margin: 0 20px; -} - -#media-upload .widefat { - border-style: solid solid none; -} - -.sorthelper { - height: 37px; - width: 623px; - display: block; -} - -#gallery-settings th.label { - width: 160px; -} - -#gallery-settings #basic th.label { - padding: 5px 5px 5px 0; -} - -#gallery-settings .title { - clear: both; - padding: 0 0 3px; - font-size: 1.6em; - border-bottom: 1px solid #DADADA; -} - -h3.media-title { - font-size: 1.6em; -} - -h4.media-sub-title { - border-bottom: 1px solid #DADADA; - font-size: 1.3em; - margin: 12px; - padding: 0 0 3px; -} - -#gallery-settings .title, -h3.media-title, -h4.media-sub-title { - font-family: Georgia,"Times New Roman",Times,serif; - font-weight: normal; - color: #5A5A5A; -} - -#gallery-settings .describe td { - vertical-align: middle; - height: 3em; -} - -#gallery-settings .describe th.label { - padding-top: .5em; - text-align: left; -} - -#gallery-settings .describe { - padding: 5px; - width: 100%; - clear: both; - cursor: default; - background: #fff; -} - -#gallery-settings .describe select { - width: 15em; -} - -#gallery-settings .describe select option, -#gallery-settings .describe td { - padding: 0; -} - -#gallery-settings label, -#gallery-settings legend { - font-size: 13px; - color: #464646; - margin-right: 15px; -} - -#gallery-settings .align .field label { - margin: 0 1em 0 3px; -} - -#gallery-settings p.ml-submit { - border-top: 1px solid #dfdfdf; -} - -#gallery-settings select#columns { - width: 6em; -} - -#sort-buttons { - font-size: 0.8em; - margin: 3px 25px -8px 0; - text-align: right; - max-width: 625px; -} - -#sort-buttons a { - text-decoration: none; -} - -#sort-buttons #asc, -#sort-buttons #showall { - padding-left: 5px; -} - -#sort-buttons span { - margin-right: 25px; -} - -p.media-types { - padding: 1em; -} - -tr.not-image { - display: none; -} - -table.not-image tr.not-image { - display: table-row; -} - -table.not-image tr.image-only { - display: none; -} - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - - .image-align-none-label { - background-image: url(../images/align-none-2x.png?ver=20120916); - -webkit-background-size: 21px 15px; - background-size: 21px 15px; - } - - .image-align-left-label { - background-image: url(../images/align-left-2x.png?ver=20120916); - -webkit-background-size: 22px 15px; - background-size: 22px 15px; - } - - .image-align-center-label { - background-image: url(../images/align-center-2x.png?ver=20120916); - -webkit-background-size: 21px 15px; - background-size: 21px 15px; - } - - .image-align-right-label { - background-image: url(../images/align-right-2x.png?ver=20120916); - -webkit-background-size: 22px 15px; - background-size: 22px 15px; - } -} diff --git a/src/wp-admin/css/deprecated-media.scss b/src/wp-admin/css/deprecated-media.scss new file mode 100644 index 0000000..b4f0473 --- /dev/null +++ b/src/wp-admin/css/deprecated-media.scss @@ -0,0 +1,363 @@ +/* Styles for the media library iframe (not used on the Library screen) */ + +div#media-upload-header { + margin: 0; + padding: 5px 5px 0; + font-weight: bold; + position: relative; + border-bottom: 1px solid #dfdfdf; + background: #f9f9f9; +} + +body#media-upload ul#sidemenu { + font-weight: normal; + margin: 0 5px; + left: 0; + bottom: -1px; + float: none; + overflow: hidden; +} + +#media-upload { + &:after { + /* clearfix */ + content: ""; + display: table; + clear: both; + } + .slidetoggle { + border-top-color: #dfdfdf; + } + input[type="radio"] { + padding: 0; + } +} + +form { + margin: 1em; +} + +#search-filter { + text-align: right; +} + +th { + position: relative; +} + +.media-upload-form label.form-help, td.help { + font-family: sans-serif; + font-style: italic; + font-weight: normal; +} + +.media-upload-form { + p.help { + margin: 0; + padding: 0; + } + fieldset { + width: 100%; + border: none; + text-align: justify; + margin: 0 0 1em 0; + padding: 0; + } +} + +/* specific to the image upload form */ + +.image-align-none-label { + background: url(../images/align-none.png) no-repeat center left; +} + +.image-align-left-label { + background: url(../images/align-left.png) no-repeat center left; +} + +.image-align-center-label { + background: url(../images/align-center.png) no-repeat center left; +} + +.image-align-right-label { + background: url(../images/align-right.png) no-repeat center left; +} + +tr.image-size { + td { + width: 460px; + } + div.image-size-item { + margin: 0 0 5px; + } +} + +#library-form .progress, #gallery-form .progress, .insert-gallery { + display: none; +} + +.describe { + &.startopen, &.startclosed { + display: none; + } +} + +.media-item .thumbnail { + max-width: 128px; + max-height: 128px; +} + +thead.media-item-info tr { + background-color: transparent; +} + +.form-table thead.media-item-info { + border: 8px solid #fff; +} + +abbr.required { + text-decoration: none; + border: none; +} + +.describe { + label { + display: inline; + } + td { + &.error { + padding: 2px 8px; + } + &.A1 { + width: 132px; + } + } + input[type="text"], textarea { + width: 460px; + border-width: 1px; + border-style: solid; + } +} + +/* Specific to Uploader */ + +#media-upload { + p { + &.ml-submit { + padding: 1em 0; + } + &.help { + font-family: sans-serif; + font-style: italic; + font-weight: normal; + } + } + label.help { + font-family: sans-serif; + font-style: italic; + font-weight: normal; + } + .ui-sortable .media-item { + cursor: move; + } + tr.image-size { + margin-bottom: 1em; + height: 3em; + } + #filter { + width: 623px; + .subsubsub { + margin: 8px 0; + } + } +} + +#filter .tablenav select { + border-style: solid; + border-width: 1px; + padding: 2px; + vertical-align: top; + width: auto; +} + +#media-upload .del-attachment { + display: none; + margin: 5px 0; +} + +.menu_order { + float: right; + font-size: 11px; + margin: 8px 10px 0; +} + +.menu_order_input { + border: 1px solid #ddd; + font-size: 10px; + padding: 1px; + width: 23px; +} + +.ui-sortable-helper { + background-color: #fff; + border: 1px solid #aaa; + opacity: 0.6; + filter: alpha(opacity = 60); +} + +#media-upload { + th { + &.order-head { + width: 20%; + text-align: center; + } + &.actions-head { + width: 25%; + text-align: center; + } + } + a.wp-post-thumbnail { + margin: 0 20px; + } + .widefat { + border-style: solid solid none; + } +} + +.sorthelper { + height: 37px; + width: 623px; + display: block; +} + +#gallery-settings { + th.label { + width: 160px; + } + #basic th.label { + padding: 5px 5px 5px 0; + } + .title { + clear: both; + padding: 0 0 3px; + font-size: 1.6em; + border-bottom: 1px solid #DADADA; + } +} + +h3.media-title { + font-size: 1.6em; +} + +h4.media-sub-title { + border-bottom: 1px solid #DADADA; + font-size: 1.3em; + margin: 12px; + padding: 0 0 3px; +} + +#gallery-settings .title, h3.media-title, h4.media-sub-title { + font-family: Georgia,"Times New Roman",Times,serif; + font-weight: normal; + color: #5A5A5A; +} + +#gallery-settings { + .describe { + td { + vertical-align: middle; + height: 3em; + } + th.label { + padding-top: .5em; + text-align: left; + } + padding: 5px; + width: 100%; + clear: both; + cursor: default; + background: #fff; + select { + width: 15em; + option { + padding: 0; + } + } + td { + padding: 0; + } + } + label, legend { + font-size: 13px; + color: #464646; + margin-right: 15px; + } + .align .field label { + margin: 0 1em 0 3px; + } + p.ml-submit { + border-top: 1px solid #dfdfdf; + } + select#columns { + width: 6em; + } +} + +#sort-buttons { + font-size: 0.8em; + margin: 3px 25px -8px 0; + text-align: right; + max-width: 625px; + a { + text-decoration: none; + } + #asc, #showall { + padding-left: 5px; + } + span { + margin-right: 25px; + } +} + +p.media-types { + padding: 1em; +} + +tr.not-image { + display: none; +} + +table.not-image tr { + &.not-image { + display: table-row; + } + &.image-only { + display: none; + } +} + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + .image-align-none-label { + background-image: url(../images/align-none-2x.png?ver=20120916); + -webkit-background-size: 21px 15px; + background-size: 21px 15px; + } + .image-align-left-label { + background-image: url(../images/align-left-2x.png?ver=20120916); + -webkit-background-size: 22px 15px; + background-size: 22px 15px; + } + .image-align-center-label { + background-image: url(../images/align-center-2x.png?ver=20120916); + -webkit-background-size: 21px 15px; + background-size: 21px 15px; + } + .image-align-right-label { + background-image: url(../images/align-right-2x.png?ver=20120916); + -webkit-background-size: 22px 15px; + background-size: 22px 15px; + } +} diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css deleted file mode 100644 index cc64ae5..0000000 --- a/src/wp-admin/css/edit.css +++ /dev/null @@ -1,1500 +0,0 @@ -#poststuff { - padding-top: 10px; - min-width: 763px; -} - -#poststuff #post-body { - padding: 0; -} - -#poststuff .postbox-container { - width: 100%; -} - -#poststuff #post-body.columns-2 { - margin-right: 300px; -} - -/*------------------------------------------------------------------------------ - 11.0 - Write/Edit Post Screen -------------------------------------------------------------------------------*/ - -#show-comments { - overflow: hidden; -} - -#save-action .spinner, -#show-comments a, -#show-comments .spinner { - float: left; -} - -#lost-connection-notice .spinner { - display: block; - float: left; - margin: 0 5px 0 0; -} - -#titlediv { - position: relative; -} - -#titlediv label { - cursor: text; -} - -#titlediv div.inside { - margin: 0; -} - -#poststuff #titlewrap { - border: 0; - padding: 0; -} - -#titlediv #title { - padding: 3px 8px; - font-size: 1.7em; - line-height: 100%; - height: 1.7em; - width: 100%; - outline: none; - margin: 0; - background-color: #fff; -} - -#titlediv #title-prompt-text { - color: #777; - position: absolute; - font-size: 1.7em; - padding: 11px 10px; -} - -#wp-fullscreen-save .fs-saved { - color: #999; - float: right; - margin-top: 4px; -} - -#poststuff .inside-submitbox, -#side-sortables .inside-submitbox { - margin: 0 3px; - font-size: 11px; -} - -input#link_description, -input#link_url { - width: 98%; -} - -#pending { - background: 0 none; - border: 0 none; - padding: 0; - font-size: 11px; - margin-top: -1px; -} - -#edit-slug-box { - line-height: 24px; - min-height: 25px; /* Yes, line-height + 1 */ - margin-top: 5px; - padding: 0 10px; - color: #666; -} - -#edit-slug-box .cancel { - margin-right: 10px; - font-size: 11px; -} - -#editable-post-name-full { - display: none; -} - -#editable-post-name { - background-color: #fffbcc; -} - -#editable-post-name input { - font-size: 13px; - height: 22px; - margin: 0; - width: 16em; -} - -.postarea h3 label { - float: left; -} - -.submitbox .submit { - text-align: left; - padding: 12px 10px 10px; - font-size: 11px; - background-color: #464646; - color: #ccc; -} - -.submitbox .submitdelete { - text-decoration: none; - padding: 1px 2px; -} - -/* @todo: do we really need this? word on the street is we don't and this -stray rule may actually be compensated for elsewhere. */ -#normal-sortables .submitbox .submitdelete:hover { - color: #000; - background-color: #f00; - border-bottom-color: #f00; -} - -.submitbox .submit a:hover { - text-decoration: underline; -} - -.submitbox .submit input { - margin-bottom: 8px; - margin-right: 4px; - padding: 6px; -} - -.inside-submitbox #post_status { - margin: 2px 0 2px -2px; -} - -#post-status-select { - margin-top: 3px; -} - -/* Post Screen */ -#post-body #normal-sortables { - min-height: 50px; -} - -.postbox { - position: relative; - min-width: 255px; - border: 1px solid #e5e5e5; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - background: #fff; -} - -#trackback_url { - width: 99%; -} - -#normal-sortables .postbox .submit { - background: transparent none; - border: 0 none; - float: right; - padding: 0 12px; - margin:0; -} - -.category-add input[type="text"], -.category-add select { - width: 100%; - max-width: 260px; - vertical-align: baseline; -} - -#side-sortables .category-add input[type="text"], -#side-sortables .category-add select { - margin: 0 0 1em; -} - -ul.category-tabs li, -#side-sortables .add-menu-item-tabs li, -.wp-tab-bar li { - display: inline; - line-height: 1.35em; -} - -.no-js .category-tabs li.hide-if-no-js { - display: none; -} - -.category-tabs a, -#side-sortables .add-menu-item-tabs a, -.wp-tab-bar a { - text-decoration: none; -} - -/* @todo: do these really need to be so specific? */ -#side-sortables .category-tabs .tabs a, -#side-sortables .add-menu-item-tabs .tabs a, -.wp-tab-bar .wp-tab-active a, -#post-body ul.category-tabs li.tabs a, -#post-body ul.add-menu-item-tabs li.tabs a { - color: #333; -} - -.category-tabs { - margin: 8px 0 5px; -} - -#category-adder h4 { - margin: 10px 0; -} - -#side-sortables .add-menu-item-tabs, -.wp-tab-bar { - margin-bottom: 3px; -} - -#normal-sortables .postbox #replyrow .submit { - float: none; - margin: 0; - padding: 0 7px 5px; -} - -#side-sortables .submitbox .submit input, -#side-sortables .submitbox .submit .preview, -#side-sortables .submitbox .submit a.preview:hover { - border: 0 none; -} - -#side-sortables .inside-submitbox .insidebox, -.stuffbox .insidebox { - margin: 11px 0; -} - -/* @todo: make this a more generic class */ -ul.category-tabs, -ul.add-menu-item-tabs, -ul.wp-tab-bar { - margin-top: 12px; -} - -ul.category-tabs li, -ul.add-menu-item-tabs li { - border: solid 1px transparent; - position: relative; -} - -ul.category-tabs li.tabs, -ul.add-menu-item-tabs li.tabs, -.wp-tab-active { - border: 1px solid #dfdfdf; - border-bottom-color: #fdfdfd; - background-color: #fdfdfd; -} - -ul.category-tabs li, -ul.add-menu-item-tabs li, -ul.wp-tab-bar li { - padding: 3px 5px 5px; -} - -#postimagediv .inside img { - max-width: 100%; - height: auto; -} - -form#tags-filter { - position: relative; -} - -/* Edit posts */ -td.post-title strong, -td.plugin-title strong { - display: block; - margin-bottom: .2em; - font-size: 14px; -} - -td.post-title p, -td.plugin-title p { - margin: 6px 0; -} - -/* Global classes */ -.wp-hidden-children .wp-hidden-child, -.ui-tabs-hide { - display: none; -} - -#post-body .tagsdiv #newtag { - margin-right: 5px; - width: 16em; -} - -#side-sortables input#post_password { - width: 94% -} - -#side-sortables .tagsdiv #newtag { - width: 68%; -} - -#post-status-info { - width: 100%; - border-spacing: 0; - border: 1px solid #e5e5e5; - border-top: none; - background-color: #f7f7f7; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - z-index: 999; -} - -#post-status-info td { - font-size: 12px; -} - -.autosave-info { - padding: 2px 10px; - text-align: right; -} - -#editorcontent #post-status-info { - border: none; -} - -#content-resize-handle { - background: transparent url(../images/resize.gif) no-repeat scroll right bottom; - width: 12px; - cursor: row-resize; -} - -.rtl #content-resize-handle { - background: transparent url(../images/resize-rtl.gif) no-repeat scroll left bottom; -} - -.wp-editor-expand #content-resize-handle { - display: none; -} - -#postdivrich #content { - resize: none; -} - -#wp-word-count { - display: block; - padding: 2px 10px; -} - -#wp-content-editor-container { - position: relative; -} - -#content-textarea-clone { - z-index: -1; - position: absolute; - top: 0; - visibility: hidden; - overflow: hidden; - max-width: 100%; - border: 1px solid transparent; -} - -.wp-fullscreen-wrap #content-textarea-clone { - display: none; -} - -/* editor-expand.js override */ -.wp-fullscreen-wrap { - padding-top: 0 !important; -} - -.wp-fullscreen-wrap .wp-editor-area { - margin-top: 0 !important; -} - -.wp-fullscreen-wrap .mce-edit-area { - padding-top: 0 !important; -} -/* end editor-expand.js override */ - -.wp-editor-expand #wp-content-editor-tools { - z-index: 1000; - border-bottom: 1px solid #e5e5e5; -} - -.wp-editor-expand #wp-content-editor-container { - -webkit-box-shadow: none; - box-shadow: none; - margin-top: -1px; -} - -.wp-editor-expand #wp-content-editor-container { - border-bottom: 0 none; -} - -.wp-editor-expand div.mce-statusbar { - z-index: 1; -} - -.wp-editor-expand #post-status-info { - border-top: 1px solid #e5e5e5; -} - -.wp-editor-expand div.mce-toolbar-grp { - z-index: 999; -} - -#wp-content-editor-tools { - background-color: #f1f1f1; - padding-top: 20px; -} - -#poststuff #post-body.columns-2 #side-sortables { - width: 280px; -} - -#timestampdiv select { - height: 21px; - line-height: 14px; - padding: 0; - vertical-align: top; - font-size: 12px; -} - -#aa, #jj, #hh, #mn { - padding: 1px; - font-size: 12px; -} - -#jj, #hh, #mn { - width: 2em; -} - -#aa { - width: 3.4em; -} - -.curtime #timestamp { - padding: 2px 0 1px 0; - display: inline !important; - height: auto !important; -} - -#misc-publishing-actions label[for="post_status"]:before, -#post-body #visibility:before, -.curtime #timestamp:before, -#post-body .misc-pub-revisions:before, -span.wp-media-buttons-icon:before { - color: #888; -} - -#post-body #visibility:before, -.curtime #timestamp:before, -#post-body .misc-pub-revisions:before { - font: normal 20px/1 'dashicons'; - speak: none; - display: inline-block; - padding: 0 2px 0 0; - top: 0; - left: -1px; - position: relative; - vertical-align: top; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - -#post-body #visibility:before { - content: '\f177'; -} - -.curtime #timestamp:before { - content: '\f145'; - top: -1px; -} - -#post-body .misc-pub-revisions:before { - content: '\f321'; -} - -#timestampdiv { - padding-top: 5px; - line-height: 23px; -} - -#timestampdiv p { - margin: 8px 0 6px; -} - -#timestampdiv input { - border-width: 1px; - border-style: solid; -} - -.notification-dialog { - position: fixed; - top: 30%; - left: 50%; - width: 450px; - margin-left: -225px; - background: #fff; - -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); - box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); - line-height: 1.5; - z-index: 1000005; -} - -.notification-dialog-background { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #000; - opacity: 0.7; - filter: alpha(opacity=70); - z-index: 1000000; -} - -#post-lock-dialog .post-locked-message, -#post-lock-dialog .post-taken-over { - margin: 25px; -} - -#post-lock-dialog .post-locked-message a.button { - margin-right: 10px; -} - -#post-lock-dialog .post-locked-avatar { - float: left; - margin: 0 20px 20px 0; -} - -#post-lock-dialog .wp-tab-first { - outline: 0; -} - -#post-lock-dialog .locked-saving img { - float: left; - margin-right: 3px; -} - -#post-lock-dialog.saving .locked-saving, -#post-lock-dialog.saved .locked-saved { - display: inline; -} - -#excerpt, -.attachmentlinks { - margin: 0; - height: 4em; - width: 98%; -} - -.tagchecklist { - margin-left: 14px; - font-size: 12px; - overflow: auto; -} - -.tagchecklist br { - display: none; -} - -.tagchecklist strong { - margin-left: -8px; - position: absolute; -} - -.tagchecklist span { - margin-right: 25px; - display: block; - float: left; - font-size: 13px; - line-height: 1.8em; - white-space: nowrap; - cursor: default; -} - -.tagchecklist span a { - margin: 1px 0 0 -17px; - cursor: pointer; - width: 20px; - height: 20px; - display: block; - float: left; - text-indent: 0; - overflow: hidden; - position: absolute; -} - -#poststuff h2 { - margin-top: 20px; - font-size: 1.5em; - margin-bottom: 15px; - padding: 0 0 3px; - clear: left; -} - -#poststuff h3 { - font-size: 14px; - padding: 8px 12px; - margin: 0; - line-height: 1.4; -} - -#poststuff .inside { - margin: 6px 0 0 0; -} - -#poststuff .inside #parent_id, -#poststuff .inside #page_template { - max-width: 100%; -} - -#poststuff .inside label.spam, -#poststuff .inside label.deleted { - color: red; -} - -#poststuff .inside label.waiting { - color: orange; -} - -#poststuff .inside label.approved { - color: green; -} - -.ie8 #poststuff .inside #parent_id, -.ie8 #poststuff .inside #page_template { - width: 250px; -} - -#post-visibility-select { - line-height: 1.5em; - margin-top: 3px; -} - -#poststuff #submitdiv .inside { - margin: 0; - padding: 0; -} - -#post-body-content, -.edit-form-section { - margin-bottom: 20px; -} - -/*------------------------------------------------------------------------------ - 11.1 - Custom Fields -------------------------------------------------------------------------------*/ - -#postcustomstuff thead th { - padding: 5px 8px 8px; - background-color: #f1f1f1; -} - -#postcustom #postcustomstuff .submit { - border: 0 none; - float: none; - padding: 0 8px 8px; -} - -#side-sortables #postcustom #postcustomstuff .submit { - margin: 0; - padding: 0; -} - -#side-sortables #postcustom #postcustomstuff #the-list textarea { - height: 85px; -} - -#side-sortables #postcustom #postcustomstuff td.left input, -#side-sortables #postcustom #postcustomstuff td.left select, -#side-sortables #postcustomstuff #newmetaleft a { - margin: 3px 3px 0; -} - -#postcustomstuff table { - margin: 0; - width: 100%; - border: 1px solid #dfdfdf; - border-spacing: 0; - background-color: #f9f9f9; -} - -#postcustomstuff tr { - vertical-align: top; -} - -#postcustomstuff table input, -#postcustomstuff table select, -#postcustomstuff table textarea { - width: 96%; - margin: 8px; -} - -#side-sortables #postcustomstuff table input, -#side-sortables #postcustomstuff table select, -#side-sortables #postcustomstuff table textarea { - margin: 3px; -} - -#postcustomstuff th.left, -#postcustomstuff td.left { - width: 38%; -} - -#postcustomstuff .submit input { - margin: 0; - width: auto; -} - -#postcustomstuff #newmetaleft a { - display: inline-block; - margin: 0 8px 8px; - text-decoration: none; -} - -.no-js #postcustomstuff #enternew { - display: none; -} - -#post-body-content .compat-attachment-fields { - margin-bottom: 20px; -} - -.compat-attachment-fields th { - padding-top: 5px; - padding-right: 10px; -} - -/*------------------------------------------------------------------------------ - 11.3 - Featured Images -------------------------------------------------------------------------------*/ - -#select-featured-image { - padding: 4px 0; - overflow: hidden; -} - -#select-featured-image img { - max-width: 100%; - height: auto; - margin-bottom: 10px; -} - -#select-featured-image a { - float: left; - clear: both; -} - -#select-featured-image .remove { - display: none; - margin-top: 10px; -} - -.js #select-featured-image.has-featured-image .remove { - display: inline-block; -} - -.no-js #select-featured-image .choose { - display: none; -} - -/*------------------------------------------------------------------------------ - 11.4 - Post formats -------------------------------------------------------------------------------*/ - -.post-state-format { - overflow: hidden; - display: inline-block; - vertical-align: middle; - height: 20px; - width: 20px; - margin-right: 5px; - margin-top: -4px; -} - -.post-state-format:before { - display: block; - height: 20px; - width: 20px; - font: normal 20px/1 'dashicons' !important; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.post-state-format:before, -.post-format-icon:before { - color: #ddd; - -webkit-transition: all .1s ease-in-out; - transition: all .1s ease-in-out; -} - -a.post-state-format:hover:before, -a.post-format-icon:hover:before { - color: #2ea2cc; -} - -#post-formats-select { - line-height: 2em; -} - -#post-formats-select .post-format-icon:before { - top: 5px; -} - -input.post-format { - margin-top: 1px; -} - -label.post-format-icon { - margin-left: 0px; - padding: 2px 0 2px 0px; -} - -.post-format-icon:before { - position: relative; - display: inline-block; - margin-right: 7px; - font: normal 20px/1 'dashicons'; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.post-state-format.post-format-standard:before, -.post-format-icon.post-format-standard:before, -a.post-state-format.format-standard:before { - content: '\f109'; -} - -.post-state-format.post-format-image:before, -.post-format-icon.post-format-image:before, -a.post-state-format.format-image:before { - content: '\f128'; -} - -.post-state-format.post-format-gallery:before, -.post-format-icon.post-format-gallery:before, -a.post-state-format.format-gallery:before { - content: '\f161'; -} - -.post-state-format.post-format-audio:before, -.post-format-icon.post-format-audio:before, -a.post-state-format.format-audio:before { - content: '\f127'; -} - -.post-state-format.post-format-video:before, -.post-format-icon.post-format-video:before, -a.post-state-format.format-video:before { - content: '\f126'; -} - -.post-state-format.post-format-chat:before, -.post-format-icon.post-format-chat:before, -a.post-state-format.format-chat:before { - content: '\f125'; -} - -.post-state-format.post-format-status:before, -.post-format-icon.post-format-status:before, -a.post-state-format.format-status:before { - content: '\f130'; -} - -.post-state-format.post-format-aside:before, -.post-format-icon.post-format-aside:before, -a.post-state-format.format-aside:before { - content: '\f123'; -} - -.post-state-format.post-format-quote:before, -.post-format-icon.post-format-quote:before, -a.post-state-format.format-quote:before { - content: '\f122'; -} - -.post-state-format.post-format-link:before, -.post-format-icon.post-format-link:before, -a.post-state-format.format-link:before { - content: '\f103'; -} - -/*------------------------------------------------------------------------------ - 12.0 - Categories -------------------------------------------------------------------------------*/ - -.category-adder { - margin-left: 120px; - padding: 4px 0; -} - -.category-adder h4 { - margin: 0 0 8px; -} - -#side-sortables .category-adder { - margin: 0; -} - -.wp-tab-panel, -.categorydiv div.tabs-panel, -.customlinkdiv div.tabs-panel, -.posttypediv div.tabs-panel, -.taxonomydiv div.tabs-panel { - min-height: 42px; - max-height: 200px; - overflow: auto; - padding: 0 0.9em; - border: solid 1px #dfdfdf; - background-color: #fdfdfd; -} - -div.tabs-panel-active { - display:block; -} - -div.tabs-panel-inactive { - display:none; -} - -#front-page-warning, -#front-static-pages ul, -ul.export-filters, -.inline-editor ul.cat-checklist ul, -.categorydiv ul.categorychecklist ul, -.customlinkdiv ul.categorychecklist ul, -.posttypediv ul.categorychecklist ul, -.taxonomydiv ul.categorychecklist ul { - margin-left: 18px; -} - -ul.categorychecklist li { - margin: 0; - padding: 0; - line-height: 22px; - word-wrap: break-word; -} - -.categorydiv .tabs-panel, -.customlinkdiv .tabs-panel, -.posttypediv .tabs-panel, -.taxonomydiv .tabs-panel { - border-width: 3px; - border-style: solid; -} - -.form-wrap p, -.form-wrap label { - font-size: 11px; -} - -.form-wrap label { - display: block; - padding: 2px; - font-size: 12px; -} - -.form-field input[type="text"], -.form-field input[type="password"], -.form-field input[type="email"], -.form-field input[type="number"], -.form-field input[type="search"], -.form-field input[type="tel"], -.form-field input[type="url"], -.form-field textarea { - border-style: solid; - border-width: 1px; - width: 95%; -} - -p.description, -.form-wrap p { - margin: 2px 0 5px; - color: #666; -} - -p.help, -p.description, -span.description, -.form-wrap p { - font-size: 13px; - font-style: italic; -} - -.form-wrap .form-field { - margin: 0 0 10px; - padding: 8px 0; -} - -.form-wrap .form-field #parent { - max-width: 100%; -} - -.col-wrap h3 { - margin: 12px 0; - font-size: 1.1em; -} - -.col-wrap p.submit { - margin-top: -10px; -} - - -/*------------------------------------------------------------------------------ - 13.0 - Tags -------------------------------------------------------------------------------*/ - -.tagsdiv { - margin-top: -8px; -} - -#poststuff .taghint { - color: #aaa; - margin: 15px 0 -24px 12px; -} - -#poststuff .tagsdiv .howto { - margin: 0 0 6px 0; -} - -.ajaxtag .newtag { - position: relative; -} - -.tagsdiv .newtag { - width: 180px; -} - -.tagsdiv .the-tags { - display: block; - height: 60px; - margin: 0 auto; - overflow: auto; - width: 260px; -} - -#post-body-content .tagsdiv .the-tags { - margin: 0 5px; -} - -/* tag hints */ -.taghint { - color: #aaa; - margin: -17px 0 0 7px; - visibility: hidden; -} - -input.newtag ~ div.taghint { - visibility: visible; -} - -input.newtag:focus ~ div.taghint { - visibility: hidden; -} - -p.popular-tags { - border: none; - line-height: 2em; - padding: 8px 12px 12px; - text-align: justify; -} - -p.popular-tags a { - padding: 0 3px; -} - -.tagcloud { - width: 97%; - margin: 0 0 40px; - text-align: justify; -} - -.tagcloud h3 { - margin: 2px 0 12px; -} - -.ac_results { - padding: 0; - margin: 0; - list-style: none; - position: absolute; - z-index: 10000; - display: none; - border: 1px solid #808080; - background-color: #fff; -} - -.wp-customizer .ac_results { - z-index: 500000; -} - -.ac_results li { - padding: 2px 5px; - white-space: nowrap; - color: #101010; - text-align: left; -} - -.ac_over { - background-color: #f0f0b8; - cursor: pointer; -} - -.ac_match { - text-decoration: underline; -} - -/* Comments */ - -.comment-php .wp-editor-area { - height: 200px; -} - -.comment-ays { - margin-bottom: 0; - border-bottom-style: solid; - border-bottom-width: 1px; -} - -.comment-ays .alt { - background-color: transparent; -} - -.trash-undo-inside, -.spam-undo-inside { - margin: 1px 8px 1px 0; - line-height: 16px; -} - -.spam-undo-inside .avatar, -.trash-undo-inside .avatar { - height: 20px; - width: 20px; - margin-right: 8px; - vertical-align: middle; -} - -.stuffbox .editcomment { - clear: none; -} - -#comment-status-radio p { - margin: 3px 0 5px; -} - -#comment-status-radio input { - margin: 2px 3px 5px 0; - vertical-align: middle; -} - -#comment-status-radio label { - padding: 5px 0; -} - -/* links tables */ -table.links-table { - width: 100%; - border-spacing: 0; -} - -.links-table th { - font-weight: normal; - text-align: left; - vertical-align: top; - min-width: 80px; - width: 20%; - word-wrap: break-word; -} - -.links-table th, -.links-table td { - padding: 5px 0; -} - -.links-table td label { - margin-right: 8px; -} - -.links-table td input[type="text"], -.links-table td textarea { - width: 100%; -} - -.links-table #link_rel { - max-width: 280px; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - #content-resize-handle, - #post-body .wp_themeSkin .mceStatusbar a.mceResize { - background: transparent url(../images/resize-2x.gif) no-repeat scroll right bottom; - -webkit-background-size: 11px 11px; - background-size: 11px 11px; - } - - .rtl #content-resize-handle, - .rtl #post-body .wp_themeSkin .mceStatusbar a.mceResize { - background: transparent url(../images/resize-rtl-2x.gif) no-repeat scroll right bottom; - } -} - -/* one column on the post write/edit screen */ -@media only screen and (max-width: 850px) { - #poststuff { - min-width: 0; - } - - #wpbody-content #poststuff #post-body { - margin: 0; - } - - #wpbody-content #post-body.columns-2 #postbox-container-1 { - margin-right: 0; - width: 100%; - } - - #poststuff #postbox-container-1 .empty-container, - #poststuff #postbox-container-1 #side-sortables:empty { - border: 0 none; - height: 0; - min-height: 0; - } - - #poststuff #post-body.columns-2 #side-sortables { - min-height: 0; - width: auto; - } - - /* hide the radio buttons for column prefs */ - .screen-layout, - .columns-prefs { - display: none; - } -} - -@media screen and ( max-width: 782px ) { - #post-body-content { - min-width: 0; - } - - #titlediv #title-prompt-text { - padding: 10px 10px; - } - - #poststuff h3 { - padding: 12px; - } - - .post-format-options { - padding-right: 0; - } - - .post-format-options a { - margin-right: 5px; - margin-bottom: 5px; - min-width: 52px; - } - - .post-format-options .post-format-title { - font-size: 11px; - } - - .post-format-options a div { - height: 28px; - width: 28px; - } - - .post-format-options a div:before { - font-size: 26px !important; - } - - /* Publish Metabox Options */ - #post-visibility-select { - line-height: 280%; - } - - .wp-core-ui .save-post-visibility, - .wp-core-ui .save-timestamp { - vertical-align: middle; - margin-right: 15px; - } - - .timestamp-wrap select#mm { - display: block; - width: 100%; - margin-bottom: 10px; - } - - .timestamp-wrap #jj, - .timestamp-wrap #aa, - .timestamp-wrap #hh, - .timestamp-wrap #mn { - padding: 12px 3px; - font-size: 14px; - margin-bottom: 5px; - width: auto; - text-align: center; - } - - /* Categories Metabox */ - ul.category-tabs { - margin: 30px 0 15px; - } - - ul.category-tabs li.tabs { - padding: 15px; - } - - ul.categorychecklist li { - margin-bottom: 15px; - } - - ul.categorychecklist ul { - margin-top: 15px; - } - - .category-add input[type=text], - .category-add select { - max-width: none; - margin-bottom: 15px; - } - - /* Tags Metabox */ - .tagsdiv .newtag { - width: 100%; - height: auto; - margin-bottom: 15px; - } - - .tagchecklist { - margin: 25px 10px; - } - - .tagchecklist span { - font-size: 16px; - line-height: 120%; - } - - /* Discussion */ - #commentstatusdiv p { - line-height: 2.8; - } - - /* TinyMCE Adjustments */ - .mceToolbar * { - white-space: normal !important; - } - - .mceToolbar tr, - .mceToolbar td { - float: left !important; - } - - .wp_themeSkin a.mceButton { - width: 30px; - height: 30px; - } - - .wp_themeSkin .mceButton .mceIcon { - margin-top: 5px; - margin-left: 5px; - } - - .wp_themeSkin .mceSplitButton { - margin-top: 1px; - } - - .wp_themeSkin .mceSplitButton td a.mceAction { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 6px; - padding-right: 3px; - } - - .wp_themeSkin .mceSplitButton td a.mceOpen, - .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen { - padding-top: 6px; - padding-bottom: 6px; - background-position: 1px 6px; - } - - .wp_themeSkin table.mceListBox { - margin: 5px; - } - - div.quicktags-toolbar input { - padding: 10px 20px; - } - - a.wp-switch-editor { - font-size: 16px; - line-height: 1em; - margin: 3px 0 0 7px; - padding: 12px 15px; - } - - #wp-content-media-buttons a { - font-size: 16px; - line-height: 37px; - height: 39px; - padding: 0 20px 0 15px; - } - - .wp-media-buttons span.wp-media-buttons-icon, - .wp-media-buttons span.jetpack-contact-form-icon { - width: 22px !important; - margin-top: -3px !important; - margin-left: -5px !important; - } - - .wp-media-buttons .add_media span.wp-media-buttons-icon:before, - .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before { - font-size: 20px !important; - } - - #content_wp_fullscreen { - display: none; - } - - .misc-pub-section { - padding: 20px 10px 20px; - } - - .misc-pub-section > a { - float: right; - font-size: 16px; - } - - #delete-action, - #publishing-action { - line-height: 47px; - } - - /* Moderate Comment */ - .comment-ays { - border-bottom: none; - } - - /* Links */ - .links-table #link_rel { - max-width: none; - } - - .links-table th, - .links-table td { - padding: 10px 0; - } -} - -@media only screen and (max-width: 500px) { - /* Align Add Media + Visual + Text tabs */ - #wp-content-media-buttons a { - font-size: 14px; - padding: 0 10px 0 10px; - } -} diff --git a/src/wp-admin/css/edit.scss b/src/wp-admin/css/edit.scss new file mode 100644 index 0000000..ed4f1a4 --- /dev/null +++ b/src/wp-admin/css/edit.scss @@ -0,0 +1,1460 @@ +#poststuff { + padding-top: 10px; + min-width: 763px; + #post-body { + padding: 0; + } + .postbox-container { + width: 100%; + } + #post-body.columns-2 { + margin-right: 300px; + } +} + +/*------------------------------------------------------------------------------ + 11.0 - Write/Edit Post Screen +------------------------------------------------------------------------------*/ + +#show-comments { + overflow: hidden; +} + +#save-action .spinner { + float: left; +} + +#show-comments { + a, .spinner { + float: left; + } +} + +#lost-connection-notice .spinner { + display: block; + float: left; + margin: 0 5px 0 0; +} + +#titlediv { + position: relative; + label { + cursor: text; + } + div.inside { + margin: 0; + } +} + +#poststuff #titlewrap { + border: 0; + padding: 0; +} + +#titlediv { + #title { + padding: 3px 8px; + font-size: 1.7em; + line-height: 100%; + height: 1.7em; + width: 100%; + outline: none; + margin: 0; + background-color: #fff; + } + #title-prompt-text { + color: #777; + position: absolute; + font-size: 1.7em; + padding: 11px 10px; + } +} + +#wp-fullscreen-save .fs-saved { + color: #999; + float: right; + margin-top: 4px; +} + +#poststuff .inside-submitbox, #side-sortables .inside-submitbox { + margin: 0 3px; + font-size: 11px; +} + +input { + &#link_description, &#link_url { + width: 98%; + } +} + +#pending { + background: 0 none; + border: 0 none; + padding: 0; + font-size: 11px; + margin-top: -1px; +} + +#edit-slug-box { + line-height: 24px; + min-height: 25px; + /* Yes, line-height + 1 */ + margin-top: 5px; + padding: 0 10px; + color: #666; + .cancel { + margin-right: 10px; + font-size: 11px; + } +} + +#editable-post-name-full { + display: none; +} + +#editable-post-name { + background-color: #fffbcc; + input { + font-size: 13px; + height: 22px; + margin: 0; + width: 16em; + } +} + +.postarea h3 label { + float: left; +} + +.submitbox { + .submit { + text-align: left; + padding: 12px 10px 10px; + font-size: 11px; + background-color: #464646; + color: #ccc; + } + .submitdelete { + text-decoration: none; + padding: 1px 2px; + } +} + +/* @todo: do we really need this? word on the street is we don't and this +stray rule may actually be compensated for elsewhere. */ + +#normal-sortables .submitbox .submitdelete:hover { + color: #000; + background-color: #f00; + border-bottom-color: #f00; +} + +.submitbox .submit { + a:hover { + text-decoration: underline; + } + input { + margin-bottom: 8px; + margin-right: 4px; + padding: 6px; + } +} + +.inside-submitbox #post_status { + margin: 2px 0 2px -2px; +} + +#post-status-select { + margin-top: 3px; +} + +/* Post Screen */ + +#post-body #normal-sortables { + min-height: 50px; +} + +.postbox { + position: relative; + min-width: 255px; + border: 1px solid #e5e5e5; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + background: #fff; +} + +#trackback_url { + width: 99%; +} + +#normal-sortables .postbox .submit { + background: transparent none; + border: 0 none; + float: right; + padding: 0 12px; + margin: 0; +} + +.category-add { + input[type="text"], select { + width: 100%; + max-width: 260px; + vertical-align: baseline; + } +} + +#side-sortables .category-add { + input[type="text"], select { + margin: 0 0 1em; + } +} + +ul.category-tabs li, #side-sortables .add-menu-item-tabs li, .wp-tab-bar li { + display: inline; + line-height: 1.35em; +} + +.no-js .category-tabs li.hide-if-no-js { + display: none; +} + +.category-tabs a, #side-sortables .add-menu-item-tabs a, .wp-tab-bar a { + text-decoration: none; +} + +/* @todo: do these really need to be so specific? */ + +#side-sortables { + .category-tabs .tabs a, .add-menu-item-tabs .tabs a { + color: #333; + } +} + +.wp-tab-bar .wp-tab-active a { + color: #333; +} + +#post-body ul { + &.category-tabs li.tabs a, &.add-menu-item-tabs li.tabs a { + color: #333; + } +} + +.category-tabs { + margin: 8px 0 5px; +} + +#category-adder h4 { + margin: 10px 0; +} + +#side-sortables .add-menu-item-tabs, .wp-tab-bar { + margin-bottom: 3px; +} + +#normal-sortables .postbox #replyrow .submit { + float: none; + margin: 0; + padding: 0 7px 5px; +} + +#side-sortables { + .submitbox .submit { + input, .preview, a.preview:hover { + border: 0 none; + } + } + .inside-submitbox .insidebox { + margin: 11px 0; + } +} + +.stuffbox .insidebox { + margin: 11px 0; +} + +/* @todo: make this a more generic class */ + +ul { + &.category-tabs, &.add-menu-item-tabs, &.wp-tab-bar { + margin-top: 12px; + } + &.category-tabs li, &.add-menu-item-tabs li { + border: solid 1px transparent; + position: relative; + } + &.category-tabs li.tabs, &.add-menu-item-tabs li.tabs { + border: 1px solid #dfdfdf; + border-bottom-color: #fdfdfd; + background-color: #fdfdfd; + } +} + +.wp-tab-active { + border: 1px solid #dfdfdf; + border-bottom-color: #fdfdfd; + background-color: #fdfdfd; +} + +ul { + &.category-tabs li, &.add-menu-item-tabs li, &.wp-tab-bar li { + padding: 3px 5px 5px; + } +} + +#postimagediv .inside img { + max-width: 100%; + height: auto; +} + +form#tags-filter { + position: relative; +} + +/* Edit posts */ + +td { + &.post-title strong, &.plugin-title strong { + display: block; + margin-bottom: .2em; + font-size: 14px; + } + &.post-title p, &.plugin-title p { + margin: 6px 0; + } +} + +/* Global classes */ + +.wp-hidden-children .wp-hidden-child, .ui-tabs-hide { + display: none; +} + +#post-body .tagsdiv #newtag { + margin-right: 5px; + width: 16em; +} + +#side-sortables { + input#post_password { + width: 94%; + } + .tagsdiv #newtag { + width: 68%; + } +} + +#post-status-info { + width: 100%; + border-spacing: 0; + border: 1px solid #e5e5e5; + border-top: none; + background-color: #f7f7f7; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + z-index: 999; + td { + font-size: 12px; + } +} + +.autosave-info { + padding: 2px 10px; + text-align: right; +} + +#editorcontent #post-status-info { + border: none; +} + +#content-resize-handle { + background: transparent url(../images/resize.gif) no-repeat scroll right bottom; + width: 12px; + cursor: row-resize; +} + +.rtl #content-resize-handle { + background: transparent url(../images/resize-rtl.gif) no-repeat scroll left bottom; +} + +.wp-editor-expand #content-resize-handle { + display: none; +} + +#postdivrich #content { + resize: none; +} + +#wp-word-count { + display: block; + padding: 2px 10px; +} + +#wp-content-editor-container { + position: relative; +} + +#content-textarea-clone { + z-index: -1; + position: absolute; + top: 0; + visibility: hidden; + overflow: hidden; + max-width: 100%; + border: 1px solid transparent; +} + +.wp-fullscreen-wrap { + #content-textarea-clone { + display: none; + } + padding-top: 0 !important; + .wp-editor-area { + margin-top: 0 !important; + } + .mce-edit-area { + padding-top: 0 !important; + } +} + +/* editor-expand.js override */ + +/* end editor-expand.js override */ + +.wp-editor-expand { + #wp-content-editor-tools { + z-index: 1000; + border-bottom: 1px solid #e5e5e5; + } + #wp-content-editor-container { + -webkit-box-shadow: none; + box-shadow: none; + margin-top: -1px; + border-bottom: 0 none; + } + div.mce-statusbar { + z-index: 1; + } + #post-status-info { + border-top: 1px solid #e5e5e5; + } + div.mce-toolbar-grp { + z-index: 999; + } +} + +#wp-content-editor-tools { + background-color: #f1f1f1; + padding-top: 20px; +} + +#poststuff #post-body.columns-2 #side-sortables { + width: 280px; +} + +#timestampdiv select { + height: 21px; + line-height: 14px; + padding: 0; + vertical-align: top; + font-size: 12px; +} + +#aa, #jj, #hh, #mn { + padding: 1px; + font-size: 12px; +} + +#jj, #hh, #mn { + width: 2em; +} + +#aa { + width: 3.4em; +} + +.curtime #timestamp { + padding: 2px 0 1px 0; + display: inline !important; + height: auto !important; +} + +#misc-publishing-actions label[for="post_status"]:before, #post-body #visibility:before, .curtime #timestamp:before, #post-body .misc-pub-revisions:before, span.wp-media-buttons-icon:before { + color: #888; +} + +#post-body #visibility:before, .curtime #timestamp:before { + font: normal 20px/1 'dashicons'; + speak: none; + display: inline-block; + padding: 0 2px 0 0; + top: 0; + left: -1px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +#post-body { + .misc-pub-revisions:before { + font: normal 20px/1 'dashicons'; + speak: none; + display: inline-block; + padding: 0 2px 0 0; + top: 0; + left: -1px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + } + #visibility:before { + content: '\f177'; + } +} + +.curtime #timestamp:before { + content: '\f145'; + top: -1px; +} + +#post-body .misc-pub-revisions:before { + content: '\f321'; +} + +#timestampdiv { + padding-top: 5px; + line-height: 23px; + p { + margin: 8px 0 6px; + } + input { + border-width: 1px; + border-style: solid; + } +} + +.notification-dialog { + position: fixed; + top: 30%; + left: 50%; + width: 450px; + margin-left: -225px; + background: #fff; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + line-height: 1.5; + z-index: 1000005; +} + +.notification-dialog-background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #000; + opacity: 0.7; + filter: alpha(opacity = 70); + z-index: 1000000; +} + +#post-lock-dialog { + .post-locked-message, .post-taken-over { + margin: 25px; + } + .post-locked-message a.button { + margin-right: 10px; + } + .post-locked-avatar { + float: left; + margin: 0 20px 20px 0; + } + .wp-tab-first { + outline: 0; + } + .locked-saving img { + float: left; + margin-right: 3px; + } + &.saving .locked-saving, &.saved .locked-saved { + display: inline; + } +} + +#excerpt, .attachmentlinks { + margin: 0; + height: 4em; + width: 98%; +} + +.tagchecklist { + margin-left: 14px; + font-size: 12px; + overflow: auto; + br { + display: none; + } + strong { + margin-left: -8px; + position: absolute; + } + span { + margin-right: 25px; + display: block; + float: left; + font-size: 13px; + line-height: 1.8em; + white-space: nowrap; + cursor: default; + a { + margin: 1px 0 0 -17px; + cursor: pointer; + width: 20px; + height: 20px; + display: block; + float: left; + text-indent: 0; + overflow: hidden; + position: absolute; + } + } +} + +#poststuff { + h2 { + margin-top: 20px; + font-size: 1.5em; + margin-bottom: 15px; + padding: 0 0 3px; + clear: left; + } + h3 { + font-size: 14px; + padding: 8px 12px; + margin: 0; + line-height: 1.4; + } + .inside { + margin: 6px 0 0 0; + #parent_id, #page_template { + max-width: 100%; + } + label { + &.spam, &.deleted { + color: red; + } + &.waiting { + color: orange; + } + &.approved { + color: green; + } + } + } +} + +.ie8 #poststuff .inside { + #parent_id, #page_template { + width: 250px; + } +} + +#post-visibility-select { + line-height: 1.5em; + margin-top: 3px; +} + +#poststuff #submitdiv .inside { + margin: 0; + padding: 0; +} + +#post-body-content, .edit-form-section { + margin-bottom: 20px; +} + +/*------------------------------------------------------------------------------ + 11.1 - Custom Fields +------------------------------------------------------------------------------*/ + +#postcustomstuff thead th { + padding: 5px 8px 8px; + background-color: #f1f1f1; +} + +#postcustom #postcustomstuff .submit { + border: 0 none; + float: none; + padding: 0 8px 8px; +} + +#side-sortables { + #postcustom #postcustomstuff { + .submit { + margin: 0; + padding: 0; + } + #the-list textarea { + height: 85px; + } + td.left { + input, select { + margin: 3px 3px 0; + } + } + } + #postcustomstuff #newmetaleft a { + margin: 3px 3px 0; + } +} + +#postcustomstuff { + table { + margin: 0; + width: 100%; + border: 1px solid #dfdfdf; + border-spacing: 0; + background-color: #f9f9f9; + } + tr { + vertical-align: top; + } + table { + input, select, textarea { + width: 96%; + margin: 8px; + } + } +} + +#side-sortables #postcustomstuff table { + input, select, textarea { + margin: 3px; + } +} + +#postcustomstuff { + th.left, td.left { + width: 38%; + } + .submit input { + margin: 0; + width: auto; + } + #newmetaleft a { + display: inline-block; + margin: 0 8px 8px; + text-decoration: none; + } +} + +.no-js #postcustomstuff #enternew { + display: none; +} + +#post-body-content .compat-attachment-fields { + margin-bottom: 20px; +} + +.compat-attachment-fields th { + padding-top: 5px; + padding-right: 10px; +} + +/*------------------------------------------------------------------------------ + 11.3 - Featured Images +------------------------------------------------------------------------------*/ + +#select-featured-image { + padding: 4px 0; + overflow: hidden; + img { + max-width: 100%; + height: auto; + margin-bottom: 10px; + } + a { + float: left; + clear: both; + } + .remove { + display: none; + margin-top: 10px; + } +} + +.js #select-featured-image.has-featured-image .remove { + display: inline-block; +} + +.no-js #select-featured-image .choose { + display: none; +} + +/*------------------------------------------------------------------------------ + 11.4 - Post formats +------------------------------------------------------------------------------*/ + +.post-state-format { + overflow: hidden; + display: inline-block; + vertical-align: middle; + height: 20px; + width: 20px; + margin-right: 5px; + margin-top: -4px; + &:before { + display: block; + height: 20px; + width: 20px; + font: normal 20px/1 'dashicons' !important; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #ddd; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; + } +} + +.post-format-icon:before { + color: #ddd; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; +} + +a { + &.post-state-format:hover:before, &.post-format-icon:hover:before { + color: #2ea2cc; + } +} + +#post-formats-select { + line-height: 2em; + .post-format-icon:before { + top: 5px; + } +} + +input.post-format { + margin-top: 1px; +} + +label.post-format-icon { + margin-left: 0px; + padding: 2px 0 2px 0px; +} + +.post-format-icon:before { + position: relative; + display: inline-block; + margin-right: 7px; + font: normal 20px/1 'dashicons'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.post-state-format.post-format-standard:before, .post-format-icon.post-format-standard:before, a.post-state-format.format-standard:before { + content: '\f109'; +} + +.post-state-format.post-format-image:before, .post-format-icon.post-format-image:before, a.post-state-format.format-image:before { + content: '\f128'; +} + +.post-state-format.post-format-gallery:before, .post-format-icon.post-format-gallery:before, a.post-state-format.format-gallery:before { + content: '\f161'; +} + +.post-state-format.post-format-audio:before, .post-format-icon.post-format-audio:before, a.post-state-format.format-audio:before { + content: '\f127'; +} + +.post-state-format.post-format-video:before, .post-format-icon.post-format-video:before, a.post-state-format.format-video:before { + content: '\f126'; +} + +.post-state-format.post-format-chat:before, .post-format-icon.post-format-chat:before, a.post-state-format.format-chat:before { + content: '\f125'; +} + +.post-state-format.post-format-status:before, .post-format-icon.post-format-status:before, a.post-state-format.format-status:before { + content: '\f130'; +} + +.post-state-format.post-format-aside:before, .post-format-icon.post-format-aside:before, a.post-state-format.format-aside:before { + content: '\f123'; +} + +.post-state-format.post-format-quote:before, .post-format-icon.post-format-quote:before, a.post-state-format.format-quote:before { + content: '\f122'; +} + +.post-state-format.post-format-link:before, .post-format-icon.post-format-link:before, a.post-state-format.format-link:before { + content: '\f103'; +} + +/*------------------------------------------------------------------------------ + 12.0 - Categories +------------------------------------------------------------------------------*/ + +.category-adder { + margin-left: 120px; + padding: 4px 0; + h4 { + margin: 0 0 8px; + } +} + +#side-sortables .category-adder { + margin: 0; +} + +.wp-tab-panel, .categorydiv div.tabs-panel, .customlinkdiv div.tabs-panel, .posttypediv div.tabs-panel, .taxonomydiv div.tabs-panel { + min-height: 42px; + max-height: 200px; + overflow: auto; + padding: 0 0.9em; + border: solid 1px #dfdfdf; + background-color: #fdfdfd; +} + +div { + &.tabs-panel-active { + display: block; + } + &.tabs-panel-inactive { + display: none; + } +} + +#front-page-warning, #front-static-pages ul, ul.export-filters, .inline-editor ul.cat-checklist ul, .categorydiv ul.categorychecklist ul, .customlinkdiv ul.categorychecklist ul, .posttypediv ul.categorychecklist ul, .taxonomydiv ul.categorychecklist ul { + margin-left: 18px; +} + +ul.categorychecklist li { + margin: 0; + padding: 0; + line-height: 22px; + word-wrap: break-word; +} + +.categorydiv .tabs-panel, .customlinkdiv .tabs-panel, .posttypediv .tabs-panel, .taxonomydiv .tabs-panel { + border-width: 3px; + border-style: solid; +} + +.form-wrap { + p { + font-size: 11px; + } + label { + font-size: 11px; + display: block; + padding: 2px; + font-size: 12px; + } +} + +.form-field { + input { + &[type="text"], &[type="password"], &[type="email"], &[type="number"], &[type="search"], &[type="tel"], &[type="url"] { + border-style: solid; + border-width: 1px; + width: 95%; + } + } + textarea { + border-style: solid; + border-width: 1px; + width: 95%; + } +} + +p.description, .form-wrap p { + margin: 2px 0 5px; + color: #666; +} + +p { + &.help, &.description { + font-size: 13px; + font-style: italic; + } +} + +span.description { + font-size: 13px; + font-style: italic; +} + +.form-wrap { + p { + font-size: 13px; + font-style: italic; + } + .form-field { + margin: 0 0 10px; + padding: 8px 0; + #parent { + max-width: 100%; + } + } +} + +.col-wrap { + h3 { + margin: 12px 0; + font-size: 1.1em; + } + p.submit { + margin-top: -10px; + } +} + +/*------------------------------------------------------------------------------ + 13.0 - Tags +------------------------------------------------------------------------------*/ + +.tagsdiv { + margin-top: -8px; +} + +#poststuff { + .taghint { + color: #aaa; + margin: 15px 0 -24px 12px; + } + .tagsdiv .howto { + margin: 0 0 6px 0; + } +} + +.ajaxtag .newtag { + position: relative; +} + +.tagsdiv { + .newtag { + width: 180px; + } + .the-tags { + display: block; + height: 60px; + margin: 0 auto; + overflow: auto; + width: 260px; + } +} + +#post-body-content .tagsdiv .the-tags { + margin: 0 5px; +} + +/* tag hints */ + +.taghint { + color: #aaa; + margin: -17px 0 0 7px; + visibility: hidden; +} + +input.newtag { + ~ div.taghint { + visibility: visible; + } + &:focus ~ div.taghint { + visibility: hidden; + } +} + +p.popular-tags { + border: none; + line-height: 2em; + padding: 8px 12px 12px; + text-align: justify; + a { + padding: 0 3px; + } +} + +.tagcloud { + width: 97%; + margin: 0 0 40px; + text-align: justify; + h3 { + margin: 2px 0 12px; + } +} + +.ac_results { + padding: 0; + margin: 0; + list-style: none; + position: absolute; + z-index: 10000; + display: none; + border: 1px solid #808080; + background-color: #fff; +} + +.wp-customizer .ac_results { + z-index: 500000; +} + +.ac_results li { + padding: 2px 5px; + white-space: nowrap; + color: #101010; + text-align: left; +} + +.ac_over { + background-color: #f0f0b8; + cursor: pointer; +} + +.ac_match { + text-decoration: underline; +} + +/* Comments */ + +.comment-php .wp-editor-area { + height: 200px; +} + +.comment-ays { + margin-bottom: 0; + border-bottom-style: solid; + border-bottom-width: 1px; + .alt { + background-color: transparent; + } +} + +.trash-undo-inside { + margin: 1px 8px 1px 0; + line-height: 16px; +} + +.spam-undo-inside { + margin: 1px 8px 1px 0; + line-height: 16px; + .avatar { + height: 20px; + width: 20px; + margin-right: 8px; + vertical-align: middle; + } +} + +.trash-undo-inside .avatar { + height: 20px; + width: 20px; + margin-right: 8px; + vertical-align: middle; +} + +.stuffbox .editcomment { + clear: none; +} + +#comment-status-radio { + p { + margin: 3px 0 5px; + } + input { + margin: 2px 3px 5px 0; + vertical-align: middle; + } + label { + padding: 5px 0; + } +} + +/* links tables */ + +table.links-table { + width: 100%; + border-spacing: 0; +} + +.links-table { + th { + font-weight: normal; + text-align: left; + vertical-align: top; + min-width: 80px; + width: 20%; + word-wrap: break-word; + padding: 5px 0; + } + td { + padding: 5px 0; + label { + margin-right: 8px; + } + input[type="text"], textarea { + width: 100%; + } + } + #link_rel { + max-width: 280px; + } +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + #content-resize-handle, #post-body .wp_themeSkin .mceStatusbar a.mceResize { + background: transparent url(../images/resize-2x.gif) no-repeat scroll right bottom; + -webkit-background-size: 11px 11px; + background-size: 11px 11px; + } + .rtl { + #content-resize-handle, #post-body .wp_themeSkin .mceStatusbar a.mceResize { + background: transparent url(../images/resize-rtl-2x.gif) no-repeat scroll right bottom; + } + } +} + +/* one column on the post write/edit screen */ +@media only screen and (max-width: 850px) { + #poststuff { + min-width: 0; + } + #wpbody-content { + #poststuff #post-body { + margin: 0; + } + #post-body.columns-2 #postbox-container-1 { + margin-right: 0; + width: 100%; + } + } + #poststuff { + #postbox-container-1 { + .empty-container, #side-sortables:empty { + border: 0 none; + height: 0; + min-height: 0; + } + } + #post-body.columns-2 #side-sortables { + min-height: 0; + width: auto; + } + } + /* hide the radio buttons for column prefs */ + .screen-layout, .columns-prefs { + display: none; + } +} + +@media screen and (max-width: 782px) { + #post-body-content { + min-width: 0; + } + #titlediv #title-prompt-text { + padding: 10px 10px; + } + #poststuff h3 { + padding: 12px; + } + .post-format-options { + padding-right: 0; + a { + margin-right: 5px; + margin-bottom: 5px; + min-width: 52px; + } + .post-format-title { + font-size: 11px; + } + a div { + height: 28px; + width: 28px; + &:before { + font-size: 26px !important; + } + } + } + /* Publish Metabox Options */ + #post-visibility-select { + line-height: 280%; + } + .wp-core-ui { + .save-post-visibility, .save-timestamp { + vertical-align: middle; + margin-right: 15px; + } + } + .timestamp-wrap { + select#mm { + display: block; + width: 100%; + margin-bottom: 10px; + } + #jj, #aa, #hh, #mn { + padding: 12px 3px; + font-size: 14px; + margin-bottom: 5px; + width: auto; + text-align: center; + } + } + /* Categories Metabox */ + ul { + &.category-tabs { + margin: 30px 0 15px; + li.tabs { + padding: 15px; + } + } + &.categorychecklist { + li { + margin-bottom: 15px; + } + ul { + margin-top: 15px; + } + } + } + .category-add { + input[type=text], select { + max-width: none; + margin-bottom: 15px; + } + } + /* Tags Metabox */ + .tagsdiv .newtag { + width: 100%; + height: auto; + margin-bottom: 15px; + } + .tagchecklist { + margin: 25px 10px; + span { + font-size: 16px; + line-height: 120%; + } + } + /* Discussion */ + #commentstatusdiv p { + line-height: 2.8; + } + /* TinyMCE Adjustments */ + .mceToolbar { + * { + white-space: normal !important; + } + tr, td { + float: left !important; + } + } + .wp_themeSkin { + a.mceButton { + width: 30px; + height: 30px; + } + .mceButton .mceIcon { + margin-top: 5px; + margin-left: 5px; + } + .mceSplitButton { + margin-top: 1px; + td a { + &.mceAction { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 6px; + padding-right: 3px; + } + &.mceOpen { + padding-top: 6px; + padding-bottom: 6px; + background-position: 1px 6px; + } + } + } + .mceSplitButtonEnabled:hover td a.mceOpen { + padding-top: 6px; + padding-bottom: 6px; + background-position: 1px 6px; + } + table.mceListBox { + margin: 5px; + } + } + div.quicktags-toolbar input { + padding: 10px 20px; + } + a.wp-switch-editor { + font-size: 16px; + line-height: 1em; + margin: 3px 0 0 7px; + padding: 12px 15px; + } + #wp-content-media-buttons a { + font-size: 16px; + line-height: 37px; + height: 39px; + padding: 0 20px 0 15px; + } + .wp-media-buttons { + span { + &.wp-media-buttons-icon, &.jetpack-contact-form-icon { + width: 22px !important; + margin-top: -3px !important; + margin-left: -5px !important; + } + } + .add_media span.wp-media-buttons-icon:before, #insert-jetpack-contact-form span.jetpack-contact-form-icon:before { + font-size: 20px !important; + } + } + #content_wp_fullscreen { + display: none; + } + .misc-pub-section { + padding: 20px 10px 20px; + > a { + float: right; + font-size: 16px; + } + } + #delete-action, #publishing-action { + line-height: 47px; + } + /* Moderate Comment */ + .comment-ays { + border-bottom: none; + } + /* Links */ + .links-table { + #link_rel { + max-width: none; + } + th, td { + padding: 10px 0; + } + } +} + +@media only screen and (max-width: 500px) { + /* Align Add Media + Visual + Text tabs */ + #wp-content-media-buttons a { + font-size: 14px; + padding: 0 10px 0 10px; + } +} diff --git a/src/wp-admin/css/farbtastic.css b/src/wp-admin/css/farbtastic.css deleted file mode 100644 index 2bb73bf..0000000 --- a/src/wp-admin/css/farbtastic.css +++ /dev/null @@ -1,41 +0,0 @@ - -.farbtastic { - position: relative; -} - -.farbtastic * { - position: absolute; - cursor: crosshair; -} - -.farbtastic, -.farbtastic .wheel { - width: 195px; - height: 195px; -} - -.farbtastic .color, -.farbtastic .overlay { - top: 47px; - left: 47px; - width: 101px; - height: 101px; -} - -.farbtastic .wheel { - background: url(../images/wheel.png) no-repeat; - width: 195px; - height: 195px; -} - -.farbtastic .overlay { - background: url(../images/mask.png) no-repeat; -} - -.farbtastic .marker { - width: 17px; - height: 17px; - margin: -8px 0 0 -8px; - overflow: hidden; - background: url(../images/marker.png) no-repeat; -} diff --git a/src/wp-admin/css/farbtastic.scss b/src/wp-admin/css/farbtastic.scss new file mode 100644 index 0000000..43e726b --- /dev/null +++ b/src/wp-admin/css/farbtastic.scss @@ -0,0 +1,40 @@ +.farbtastic { + position: relative; + + * { + position: absolute; + cursor: crosshair; + } + + &, .wheel { + width: 195px; + height: 195px; + } + + .color, + .overlay { + top: 47px; + left: 47px; + width: 101px; + height: 101px; + } + + .wheel { + background: url(../images/wheel.png) no-repeat; + width: 195px; + height: 195px; + } + + .overlay { + background: url(../images/mask.png) no-repeat; + } + + .marker { + width: 17px; + height: 17px; + margin: -8px 0 0 -8px; + overflow: hidden; + background: url(../images/marker.png) no-repeat; + } +} + diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css deleted file mode 100644 index b80f98a..0000000 --- a/src/wp-admin/css/forms.css +++ /dev/null @@ -1,992 +0,0 @@ -/* Include margin and padding in the width calculation of input and textarea. */ -input, -textarea { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -input[type="text"], -input[type="password"], -input[type="checkbox"], -input[type="color"], -input[type="date"], -input[type="datetime"], -input[type="datetime-local"], -input[type="email"], -input[type="month"], -input[type="number"], -input[type="password"], -input[type="search"], -input[type="radio"], -input[type="tel"], -input[type="text"], -input[type="time"], -input[type="url"], -input[type="week"], -select, -textarea { - border: 1px solid #ddd; - -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 ); - box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 ); - background-color: #fff; - color: #333; - outline: none; - -webkit-transition: 0.05s border-color ease-in-out; - transition: 0.05s border-color ease-in-out; -} - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="color"]:focus, -input[type="date"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="email"]:focus, -input[type="month"]:focus, -input[type="number"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="text"]:focus, -input[type="time"]:focus, -input[type="url"]:focus, -input[type="week"]:focus, -input[type="checkbox"]:focus, -input[type="radio"]:focus, -select:focus, -textarea:focus { - border-color: #5b9dd9; - -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); - box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); -} - -/* @noflip */ -input[type="email"], -input[type="url"] { - direction: ltr; -} - -input[type="checkbox"], -input[type="radio"] { - border: 1px solid #bbb; - background: #fff; - color: #555; - clear: none; - cursor: pointer; - display: inline-block; - line-height: 0; - height: 16px; - margin: -4px 4px 0 0; - outline: 0; - padding: 0 !important; - text-align: center; - vertical-align: middle; - width: 16px; - min-width: 16px; - -webkit-appearance: none; - -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 ); - box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 ); - -webkit-transition: .05s border-color ease-in-out; - transition: .05s border-color ease-in-out; -} - -input[type="radio"]:checked + label:before { - color: #888; -} - -.wp-core-ui input[type="reset"]:hover, -.wp-core-ui input[type="reset"]:active { - color: #2ea2cc; -} - -td > input[type="checkbox"], -.wp-admin p input[type="checkbox"], -.wp-admin p input[type="radio"] { - margin-top: 0; -} - -.wp-admin p label input[type="checkbox"] { - margin-top: -4px; -} - -.wp-admin p label input[type="radio"] { - margin-top: -2px; -} - -input[type="radio"] { - -webkit-border-radius: 50%; - border-radius: 50%; - margin-right: 4px; - line-height: 10px; -} - -input[type="checkbox"]:checked:before, -input[type="radio"]:checked:before { - float: left; - display: inline-block; - vertical-align: middle; - width: 16px; - font: normal 21px/1 'dashicons'; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -input[type="checkbox"]:checked:before { - content: '\f147'; - margin: -3px 0 0 -4px; - color: #1e8cbe; -} - -input[type="radio"]:checked:before { - content: '\2022'; - text-indent: -9999px; - -webkit-border-radius: 50px; - border-radius: 50px; - font-size: 24px; - width: 6px; - height: 6px; - margin: 4px; - line-height: 16px; - background-color: #1e8cbe; -} - -@-moz-document url-prefix() { - input[type="checkbox"], - input[type="radio"], - .form-table input.tog { - margin-bottom: -1px; - } -} - -/* Search */ -input[type="search"] { - -webkit-appearance: textfield; -} - -input[type="search"]::-webkit-search-decoration { - display: none; -} - -.ie8 input[type="password"] { - font-family: sans-serif; -} - -textarea, -input, -select, -button { - font-family: inherit; - font-size: inherit; - font-weight: inherit; -} - -textarea, -input, -select { - font-size: 14px; - padding: 3px 5px; - -webkit-border-radius: 0; - border-radius: 0; /* Reset mobile webkit's default element styling */ -} - -textarea { - overflow: auto; - padding: 2px 6px; - line-height: 1.4; -} - -.wp-admin input[type="file"] { - padding: 3px 0; -} - -label { - cursor: pointer; -} - -input, -select { - margin: 1px; - padding: 3px 5px; -} - -input.code { - padding-top: 6px; -} - -textarea.code { - line-height: 1.4; - padding: 4px 6px 1px 6px; -} - -input.readonly, -input[readonly], -textarea.readonly, -textarea[readonly] { - background-color: #eee; -} - -:-moz-placeholder, -.wp-core-ui :-moz-placeholder { - color: #a9a9a9; -} - -.form-invalid { - background-color: #ffebe8 !important; -} - -.form-invalid input, -.form-invalid select { - border-color: #c00 !important; -} - -.form-input-tip { - color: #666; -} - -input:disabled, -input.disabled, -select:disabled, -select.disabled, -textarea:disabled, -textarea.disabled { - background: rgba( 255, 255, 255, 0.5 ); - border-color: rgba( 222, 222, 222, 0.75 ); - -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 ); - box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 ); - color: rgba( 51, 51, 51, 0.5 ); -} - -input[type="file"]:disabled, -input[type="file"].disabled, -input[type="range"]:disabled, -input[type="range"].disabled { - background: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -input[type="checkbox"]:disabled, -input[type="checkbox"].disabled, -input[type="radio"]:disabled, -input[type="radio"].disabled, -input[type="checkbox"]:disabled:checked:before, -input[type="checkbox"].disabled:checked:before, -input[type="radio"]:disabled:checked:before, -input[type="radio"].disabled:checked:before { - opacity: 0.7; -} - -/*------------------------------------------------------------------------------ - 2.0 - Forms -------------------------------------------------------------------------------*/ - - -.wp-admin select { - padding: 2px; - line-height: 28px; - height: 28px; - vertical-align: middle; -} - -.wp-admin .button-cancel { - padding: 0 5px; - line-height: 2; -} - -.meta-box-sortables select { - max-width: 100%; -} - -.wp-admin select[multiple] { - height: auto; -} - -.submit { - padding: 1.5em 0; - margin: 5px 0; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; - border: none; -} - -form p.submit a.cancel:hover { - text-decoration: none; -} - -p.submit { - text-align: left; - max-width: 100%; - margin-top: 20px; - padding-top: 10px; -} - -.textright p.submit { - border: none; - text-align: right; -} - -table.form-table + p.submit, -table.form-table + input + p.submit, -table.form-table + input + input + p.submit { - border-top: none; - padding-top: 0; -} - -#minor-publishing-actions input, -#major-publishing-actions input, -#minor-publishing-actions .preview { - text-align: center; -} - -textarea.all-options, -input.all-options { - width: 250px; -} - -input.large-text, -textarea.large-text { - width: 99%; -} - -input.regular-text, -#adduser .form-field input { - width: 25em; -} - -input.small-text { - width: 50px; - padding: 1px 6px; -} - -input[type="number"].small-text { - width: 65px; -} - -#doaction, -#doaction2, -#post-query-submit { - margin: 1px 8px 0 0; -} - -.tablenav #changeit, -.tablenav #delete_all, -.tablenav #clear-recent-list, -.wp-filter #delete_all { - margin-top: 1px; -} - -.tablenav .actions select { - float: left; - margin-right: 6px; - max-width: 200px; -} - -.ie8 .tablenav .actions select { - width: 155px; -} - -.ie8 .tablenav .actions select#cat { - width: 200px; -} - -#timezone_string option { - margin-left: 1em; -} - -#upload-form label { - color: #777; -} - -label, -#your-profile label + a { - vertical-align: middle; -} - -fieldset label, -#your-profile label + a { - vertical-align: middle; -} - -.options-media-php label[for*="_size_"], -#misc-publishing-actions label { - vertical-align: baseline; -} - -#misc-publishing-actions label[for="post_status"]:before { - content: '\f173'; - display: inline-block; - font: normal 20px/1 'dashicons'; - speak: none; - left: -1px; - padding: 0 5px 0 0; - position: relative; - top: 0; - text-decoration: none !important; - vertical-align: top; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -#pass-strength-result { - background-color: #eee; - border: 1px solid #ddd; - float: left; - margin: 13px 5px 5px 1px; - padding: 3px 5px; - text-align: center; - width: 200px; - display: none; -} - -#pass-strength-result.short { - background-color: #ffa0a0; - border-color: #f04040; -} - -#pass-strength-result.bad { - background-color: #ffb78c; - border-color: #ff853c; -} - -#pass-strength-result.good { - background-color: #ffec8b; - border-color: #fc0; -} - -#pass-strength-result.strong { - background-color: #c3ff88; - border-color: #8dff1c; -} - -.indicator-hint { - padding-top: 8px; -} - -p.search-box { - float: right; - margin: 0; -} - -.network-admin.themes-php p.search-box { - clear: left; -} - -.search-box input[name="s"], -.tablenav .search-plugins input[name="s"], -.tagsdiv .newtag { - float: left; - height: 28px; - margin: 0 4px 0 0; -} - -input[type="text"].ui-autocomplete-loading { - background: transparent url(../images/loading.gif) no-repeat right center; - visibility: visible; -} - -ul#add-to-blog-users { - margin: 0 0 0 14px; -} - -.ui-autocomplete-input.open { - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - border-bottom-left-radius: 0; -} - -.ui-autocomplete { - padding: 0; - margin: 0; - list-style: none; - position: absolute; - z-index: 10000; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; - border: 1px solid #aaa; - background-color: #efefef; -} - -.ui-autocomplete li { - margin-bottom: 0; - white-space: nowrap; - text-align: left; -} - -.ui-autocomplete li a { - display: block; - height: 100%; - padding: 4px 10px; - color: #444; -} - -.ui-autocomplete li a.ui-state-focus { - background-color: #ddd; - cursor: pointer; -} - -/*------------------------------------------------------------------------------ - 15.0 - Comments Screen -------------------------------------------------------------------------------*/ - -.form-table { - border-collapse: collapse; - margin-top: 0.5em; - width: 100%; - clear: both; -} - -.form-table, -.form-table td, -.form-table th, -.form-table td p, -.form-wrap label { - font-size: 14px; -} - -.form-table td { - margin-bottom: 9px; - padding: 15px 10px; - line-height: 1.3; - vertical-align: middle; -} - -.form-table th, -.form-wrap label { - color: #222; - font-weight: normal; - text-shadow: none; - vertical-align: baseline; -} - -.form-table th { - vertical-align: top; - text-align: left; - padding: 20px 10px 20px 0; - width: 200px; - line-height: 1.3; - font-weight: 600; -} - -.form-table th.th-full { - width: auto; - font-weight: 400; -} - -.form-table td p { - margin-top: 4px; - margin-bottom: 0; -} - -.form-table td fieldset label { - margin: 0.25em 0 0.5em !important; - display: inline-block; -} - -.form-table td fieldset label, -.form-table td fieldset p, -.form-table td fieldset li { - line-height: 1.4em; -} - -.form-table input.tog, -.form-table input[type="radio"] { - margin-top: -4px; - margin-right: 4px; - float: none; -} - -.form-table .pre { - padding: 8px; - margin: 0; -} - -table.form-table td .updated { - font-size: 13px; -} - -/*------------------------------------------------------------------------------ - 18.0 - Users -------------------------------------------------------------------------------*/ - -#profile-page .form-table textarea { - width: 500px; - margin-bottom: 6px; -} - -#profile-page .form-table #rich_editing { - margin-right: 5px -} - -#your-profile legend { - font-size: 22px; -} - -#display_name { - width: 15em; -} - -#createuser .form-field input { - width: 25em; -} - -.color-option { - display: inline-block; - width: 24%; - padding: 5px 15px 15px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-bottom: 3px; -} - -.color-option:hover, -.color-option.selected { - background: #ddd; -} - -.color-palette { - width: 100%; - border-spacing: 0; - border-collapse: collapse; -} -.color-palette td { - height: 20px; - padding: 0; - border: none; -} - -.color-option { - cursor: pointer; -} - -/*------------------------------------------------------------------------------ - 19.0 - Tools -------------------------------------------------------------------------------*/ - -.tool-box .title { - margin: 8px 0; - font-size: 18px; - font-weight: normal; - line-height: 24px; -} - -.pressthis { - margin: 20px 0; -} - -.pressthis a, -.pressthis a:hover, -.pressthis a:focus, -.pressthis a:active { - display: inline-block; - position: relative; - cursor: move; - color: #333; - background: #e6e6e6; - -webkit-border-radius: 5px; - border-radius: 5px; - border: 1px solid #b4b4b4; - font-style: normal; - line-height: 16px; - font-size: 14px; - text-decoration: none; -} - -.pressthis a:active { - outline: none; -} - -.pressthis a:hover:after { - -webkit-transform: skew(20deg) rotate(9deg); - -ms-transform: skew(20deg) rotate(9deg); - transform: skew(20deg) rotate(9deg); - -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); - box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); -} - -.pressthis a span { - display: inline-block; - margin: 0px 0 0; - padding: 0px 12px 8px 9px; -} - -.pressthis a span:before { - color: #777; - font: normal 20px/1 'dashicons'; - content:'\f157'; - position: relative; - display: inline-block; - top: 4px; - margin-right: 4px; -} - -.pressthis a:after { - content: ''; - width: 70%; - height: 55%; - z-index: -1; - position: absolute; - right: 10px; - bottom: 9px; - background: transparent; - -webkit-transform: skew(20deg) rotate(6deg); - -ms-transform: skew(20deg) rotate(6deg); - transform: skew(20deg) rotate(6deg); - -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); - box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); -} - -/*------------------------------------------------------------------------------ - 20.0 - Settings -------------------------------------------------------------------------------*/ - -#utc-time, #local-time { - padding-left: 25px; - font-style: italic; -} - -.defaultavatarpicker .avatar { - margin: 2px 0; - vertical-align: middle; -} - -.options-general-php .spinner { - float: none; - margin: -3px 3px; -} - -/* =Media Queries --------------------------------------------------------------- */ - -@media screen and ( max-width: 782px ) { - /* Input Elements */ - textarea { - -webkit-appearance: none; - } - - input[type=text], input[type="search"], - input[type=password], input[type="number"] { - -webkit-appearance: none; - padding: 6px 10px; - } - - input.code { - padding-bottom: 5px; - padding-top: 10px; - } - - input[type="checkbox"], .widefat th input[type="checkbox"] { - -webkit-appearance: none; - padding: 10px; - } - - .widefat th input[type="checkbox"] { - margin-bottom: 8px; - } - - input[type="checkbox"]:checked:before, .widefat th input[type="checkbox"]:before { - font: normal 30px/1 'Dashicons'; - margin: -3px -5px; - } - - input[type="radio"], - input[type="checkbox"] { - height: 25px; - width: 25px; - } - - .wp-admin p input[type="checkbox"], - .wp-admin p input[type="radio"] { - margin-top: -3px; - } - - input[type="radio"]:checked:before { - vertical-align: middle; - width: 9px; - height: 9px; - margin: 7px; - line-height: 16px; - } - - .wp-upload-form input[type="submit"] { - margin-top: 10px; - } - - #wpbody select { - height: 36px; - font-size: 16px; - } - - .wp-admin .button-cancel { - padding: 0; - font-size: 14px; - } - - #createuser .form-field input { - width: 100%; - } - - .form-table { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - .form-table th, - .form-table td { - display: block; - width: auto; - vertical-align: middle; - } - - .form-table .color-palette td { - display: table-cell; - width: 15px; - } - - .form-table table.color-palette { - margin-right: 10px; - } - - textarea, - input { - font-size: 16px; - } - - .form-table td input[type="text"], - .form-table td input[type="password"], - .form-table td select, - .form-table td textarea, - .form-table span.description, - #profile-page .form-table textarea { - width: 100%; - font-size: 16px; - line-height: 1.5; - padding: 7px 10px; - display: block; - max-width: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - #wpbody .form-table td select { - height: 40px; - } - - input[type="text"].small-text, - input[type="search"].small-text, - input[type="password"].small-text, - input[type="number"].small-text, - input[type="number"].small-text, - .form-table input[type="text"].small-text { - width: auto; - max-width: 55px; - display: inline; - padding: 3px 6px; - margin: 0 3px; - } - - #pass-strength-result { - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 8px; - } - - p.search-box { - float: none; - position: absolute; - bottom: 0; - width: 98%; - height: 90px; - margin-bottom: 20px; - } - - p.search-box input[name="s"] { - height: auto; - float: none; - width: 100%; - margin-bottom: 10px; - vertical-align: middle; - -webkit-appearance: none; - } - - p.search-box input[type="submit"] { - margin-bottom: 10px; - } - - .form-table span.description { - padding: 4px 0 0; - line-height: 1.4em; - } - - .form-table th { - padding-top: 10px; - padding-bottom: 0; - border-bottom: 0; - } - - .form-table td { - padding-top: 8px; - padding-left: 0; - } - - .form-table input.regular-text { - width: 100%; - } - - .form-table label { - font-size: 14px; - } - - .form-table fieldset label { - display: block; - } - - #utc-time { - margin-top: 10px; - } - - #utc-time, - #local-time { - display: block; - float: none; - padding: 0; - line-height: 2; - } -} - -@media only screen and (max-width: 768px) { - .form-field input, - .form-field textarea { - width: 99%; - } - - .form-wrap .form-field { - padding:0; - } - - /* users */ - #profile-page .form-table textarea { - max-width: 400px; - width: auto; - } -} - -/* Smartphone */ -@media screen and (max-width: 600px) { - /* Color Picker Options */ - .color-option { - width: 49%; - } -} - diff --git a/src/wp-admin/css/forms.scss b/src/wp-admin/css/forms.scss new file mode 100644 index 0000000..00cff85 --- /dev/null +++ b/src/wp-admin/css/forms.scss @@ -0,0 +1,1070 @@ +/* Include margin and padding in the width calculation of input and textarea. */ + +input, textarea { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +input { + &[type="text"], &[type="password"], &[type="checkbox"], &[type="color"], &[type="date"], &[type="datetime"], &[type="datetime-local"], &[type="email"], &[type="month"], &[type="number"], &[type="password"], &[type="search"], &[type="radio"], &[type="tel"], &[type="text"], &[type="time"], &[type="url"], &[type="week"] { + border: 1px solid #ddd; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); + background-color: #fff; + color: #333; + outline: none; + -webkit-transition: 0.05s border-color ease-in-out; + transition: 0.05s border-color ease-in-out; + } +} + +select, textarea { + border: 1px solid #ddd; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); + background-color: #fff; + color: #333; + outline: none; + -webkit-transition: 0.05s border-color ease-in-out; + transition: 0.05s border-color ease-in-out; +} + +input { + &[type="text"]:focus, &[type="password"]:focus, &[type="color"]:focus, &[type="date"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="email"]:focus, &[type="month"]:focus, &[type="number"]:focus, &[type="password"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="text"]:focus, &[type="time"]:focus, &[type="url"]:focus, &[type="week"]:focus, &[type="checkbox"]:focus, &[type="radio"]:focus { + border-color: #5b9dd9; + -webkit-box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + } +} + +select:focus, textarea:focus { + border-color: #5b9dd9; + -webkit-box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); +} + +/* @noflip */ + +input { + &[type="email"], &[type="url"] { + direction: ltr; + } + &[type="checkbox"] { + border: 1px solid #bbb; + background: #fff; + color: #555; + clear: none; + cursor: pointer; + display: inline-block; + line-height: 0; + height: 16px; + margin: -4px 4px 0 0; + outline: 0; + padding: 0 !important; + text-align: center; + vertical-align: middle; + width: 16px; + min-width: 16px; + -webkit-appearance: none; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -webkit-transition: .05s border-color ease-in-out; + transition: .05s border-color ease-in-out; + } + &[type="radio"] { + border: 1px solid #bbb; + background: #fff; + color: #555; + clear: none; + cursor: pointer; + display: inline-block; + line-height: 0; + height: 16px; + margin: -4px 4px 0 0; + outline: 0; + padding: 0 !important; + text-align: center; + vertical-align: middle; + width: 16px; + min-width: 16px; + -webkit-appearance: none; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -webkit-transition: .05s border-color ease-in-out; + transition: .05s border-color ease-in-out; + &:checked + label:before { + color: #888; + } + } +} + +.wp-core-ui input[type="reset"] { + &:hover, &:active { + color: #2ea2cc; + } +} + +td > input[type="checkbox"] { + margin-top: 0; +} + +.wp-admin p { + input { + &[type="checkbox"], &[type="radio"] { + margin-top: 0; + } + } + label input { + &[type="checkbox"] { + margin-top: -4px; + } + &[type="radio"] { + margin-top: -2px; + } + } +} + +input { + &[type="radio"] { + -webkit-border-radius: 50%; + border-radius: 50%; + margin-right: 4px; + line-height: 10px; + } + &[type="checkbox"]:checked:before, &[type="radio"]:checked:before { + float: left; + display: inline-block; + vertical-align: middle; + width: 16px; + font: normal 21px/1 'dashicons'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + &[type="checkbox"]:checked:before { + content: '\f147'; + margin: -3px 0 0 -4px; + color: #1e8cbe; + } + &[type="radio"]:checked:before { + content: '\2022'; + text-indent: -9999px; + -webkit-border-radius: 50px; + border-radius: 50px; + font-size: 24px; + width: 6px; + height: 6px; + margin: 4px; + line-height: 16px; + background-color: #1e8cbe; + } + &[type="search"] { + -webkit-appearance: textfield; + &::-webkit-search-decoration { + display: none; + } + } +} + +@-moz-document url-prefix() { + input { + &[type="checkbox"], &[type="radio"] { + margin-bottom: -1px; + } + } + .form-table input.tog { + margin-bottom: -1px; + } +} + + +/* Search */ + +.ie8 input[type="password"] { + font-family: sans-serif; +} + +textarea, input, select, button { + font-family: inherit; + font-size: inherit; + font-weight: inherit; +} + +textarea, input, select { + font-size: 14px; + padding: 3px 5px; + -webkit-border-radius: 0; + border-radius: 0; + /* Reset mobile webkit's default element styling */ +} + +textarea { + overflow: auto; + padding: 2px 6px; + line-height: 1.4; +} + +.wp-admin input[type="file"] { + padding: 3px 0; +} + +label { + cursor: pointer; +} + +input, select { + margin: 1px; + padding: 3px 5px; +} + +input.code { + padding-top: 6px; +} + +textarea.code { + line-height: 1.4; + padding: 4px 6px 1px 6px; +} + +input { + &.readonly, &[readonly] { + background-color: #eee; + } +} + +textarea { + &.readonly, &[readonly] { + background-color: #eee; + } +} + +:-moz-placeholder, .wp-core-ui :-moz-placeholder { + color: #a9a9a9; +} + +.form-invalid { + background-color: #ffebe8 !important; + input, select { + border-color: #c00 !important; + } +} + +.form-input-tip { + color: #666; +} + +input { + &:disabled, &.disabled { + background: rgba(255, 255, 255, 0.5); + border-color: rgba(222, 222, 222, 0.75); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + color: rgba(51, 51, 51, 0.5); + } +} + +select { + &:disabled, &.disabled { + background: rgba(255, 255, 255, 0.5); + border-color: rgba(222, 222, 222, 0.75); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + color: rgba(51, 51, 51, 0.5); + } +} + +textarea { + &:disabled, &.disabled { + background: rgba(255, 255, 255, 0.5); + border-color: rgba(222, 222, 222, 0.75); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + color: rgba(51, 51, 51, 0.5); + } +} + +input { + &[type="file"] { + &:disabled, &.disabled { + background: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + &[type="range"] { + &:disabled, &.disabled { + background: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + &[type="checkbox"] { + &:disabled, &.disabled { + opacity: 0.7; + } + } + &[type="radio"] { + &:disabled, &.disabled { + opacity: 0.7; + } + } + &[type="checkbox"] { + &:disabled:checked:before, &.disabled:checked:before { + opacity: 0.7; + } + } + &[type="radio"] { + &:disabled:checked:before, &.disabled:checked:before { + opacity: 0.7; + } + } +} + +/*------------------------------------------------------------------------------ + 2.0 - Forms +------------------------------------------------------------------------------*/ + +.wp-admin { + select { + padding: 2px; + line-height: 28px; + height: 28px; + vertical-align: middle; + } + .button-cancel { + padding: 0 5px; + line-height: 2; + } +} + +.meta-box-sortables select { + max-width: 100%; +} + +.wp-admin select[multiple] { + height: auto; +} + +.submit { + padding: 1.5em 0; + margin: 5px 0; + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + border: none; +} + +form p.submit a.cancel:hover { + text-decoration: none; +} + +p.submit { + text-align: left; + max-width: 100%; + margin-top: 20px; + padding-top: 10px; +} + +.textright p.submit { + border: none; + text-align: right; +} + +table.form-table + { + p.submit { + border-top: none; + padding-top: 0; + } + input + { + p.submit, input + p.submit { + border-top: none; + padding-top: 0; + } + } +} + +#minor-publishing-actions input, #major-publishing-actions input, #minor-publishing-actions .preview { + text-align: center; +} + +textarea.all-options { + width: 250px; +} + +input { + &.all-options { + width: 250px; + } + &.large-text { + width: 99%; + } +} + +textarea.large-text { + width: 99%; +} + +input.regular-text, #adduser .form-field input { + width: 25em; +} + +input { + &.small-text { + width: 50px; + padding: 1px 6px; + } + &[type="number"].small-text { + width: 65px; + } +} + +#doaction, #doaction2, #post-query-submit { + margin: 1px 8px 0 0; +} + +.tablenav { + #changeit, #delete_all, #clear-recent-list { + margin-top: 1px; + } +} + +.wp-filter #delete_all { + margin-top: 1px; +} + +.tablenav .actions select { + float: left; + margin-right: 6px; + max-width: 200px; +} + +.ie8 .tablenav .actions select { + width: 155px; + &#cat { + width: 200px; + } +} + +#timezone_string option { + margin-left: 1em; +} + +#upload-form label { + color: #777; +} + +label, #your-profile label + a, fieldset label, #your-profile label + a { + vertical-align: middle; +} + +.options-media-php label[for*="_size_"] { + vertical-align: baseline; +} + +#misc-publishing-actions label { + vertical-align: baseline; + &[for="post_status"]:before { + content: '\f173'; + display: inline-block; + font: normal 20px/1 'dashicons'; + speak: none; + left: -1px; + padding: 0 5px 0 0; + position: relative; + top: 0; + text-decoration: none !important; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +#pass-strength-result { + background-color: #eee; + border: 1px solid #ddd; + float: left; + margin: 13px 5px 5px 1px; + padding: 3px 5px; + text-align: center; + width: 200px; + display: none; + &.short { + background-color: #ffa0a0; + border-color: #f04040; + } + &.bad { + background-color: #ffb78c; + border-color: #ff853c; + } + &.good { + background-color: #ffec8b; + border-color: #fc0; + } + &.strong { + background-color: #c3ff88; + border-color: #8dff1c; + } +} + +.indicator-hint { + padding-top: 8px; +} + +p.search-box { + float: right; + margin: 0; +} + +.network-admin.themes-php p.search-box { + clear: left; +} + +.search-box input[name="s"], .tablenav .search-plugins input[name="s"], .tagsdiv .newtag { + float: left; + height: 28px; + margin: 0 4px 0 0; +} + +input[type="text"].ui-autocomplete-loading { + background: transparent url(../images/loading.gif) no-repeat right center; + visibility: visible; +} + +ul#add-to-blog-users { + margin: 0 0 0 14px; +} + +.ui-autocomplete-input.open { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; +} + +.ui-autocomplete { + padding: 0; + margin: 0; + list-style: none; + position: absolute; + z-index: 10000; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; + border: 1px solid #aaa; + background-color: #efefef; + li { + margin-bottom: 0; + white-space: nowrap; + text-align: left; + a { + display: block; + height: 100%; + padding: 4px 10px; + color: #444; + &.ui-state-focus { + background-color: #ddd; + cursor: pointer; + } + } + } +} + +/*------------------------------------------------------------------------------ + 15.0 - Comments Screen +------------------------------------------------------------------------------*/ + +.form-table { + border-collapse: collapse; + margin-top: 0.5em; + width: 100%; + clear: both; + font-size: 14px; + td, th, td p { + font-size: 14px; + } +} + +.form-wrap label { + font-size: 14px; +} + +.form-table { + td { + margin-bottom: 9px; + padding: 15px 10px; + line-height: 1.3; + vertical-align: middle; + } + th { + color: #222; + font-weight: normal; + text-shadow: none; + vertical-align: baseline; + } +} + +.form-wrap label { + color: #222; + font-weight: normal; + text-shadow: none; + vertical-align: baseline; +} + +.form-table { + th { + vertical-align: top; + text-align: left; + padding: 20px 10px 20px 0; + width: 200px; + line-height: 1.3; + font-weight: 600; + &.th-full { + width: auto; + font-weight: 400; + } + } + td { + p { + margin-top: 4px; + margin-bottom: 0; + } + fieldset { + label { + margin: 0.25em 0 0.5em !important; + display: inline-block; + line-height: 1.4em; + } + p, li { + line-height: 1.4em; + } + } + } + input { + &.tog, &[type="radio"] { + margin-top: -4px; + margin-right: 4px; + float: none; + } + } + .pre { + padding: 8px; + margin: 0; + } +} + +table.form-table td .updated { + font-size: 13px; +} + +/*------------------------------------------------------------------------------ + 18.0 - Users +------------------------------------------------------------------------------*/ + +#profile-page .form-table { + textarea { + width: 500px; + margin-bottom: 6px; + } + #rich_editing { + margin-right: 5px; + } +} + +#your-profile legend { + font-size: 22px; +} + +#display_name { + width: 15em; +} + +#createuser .form-field input { + width: 25em; +} + +.color-option { + display: inline-block; + width: 24%; + padding: 5px 15px 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-bottom: 3px; + &:hover, &.selected { + background: #ddd; + } +} + +.color-palette { + width: 100%; + border-spacing: 0; + border-collapse: collapse; + td { + height: 20px; + padding: 0; + border: none; + } +} + +.color-option { + cursor: pointer; +} + +/*------------------------------------------------------------------------------ + 19.0 - Tools +------------------------------------------------------------------------------*/ + +.tool-box .title { + margin: 8px 0; + font-size: 18px; + font-weight: normal; + line-height: 24px; +} + +.pressthis { + margin: 20px 0; + a { + display: inline-block; + position: relative; + cursor: move; + color: #333; + background: #e6e6e6; + -webkit-border-radius: 5px; + border-radius: 5px; + border: 1px solid #b4b4b4; + font-style: normal; + line-height: 16px; + font-size: 14px; + text-decoration: none; + &:hover, &:focus { + display: inline-block; + position: relative; + cursor: move; + color: #333; + background: #e6e6e6; + -webkit-border-radius: 5px; + border-radius: 5px; + border: 1px solid #b4b4b4; + font-style: normal; + line-height: 16px; + font-size: 14px; + text-decoration: none; + } + &:active { + display: inline-block; + position: relative; + cursor: move; + color: #333; + background: #e6e6e6; + -webkit-border-radius: 5px; + border-radius: 5px; + border: 1px solid #b4b4b4; + font-style: normal; + line-height: 16px; + font-size: 14px; + text-decoration: none; + outline: none; + } + &:hover:after { + -webkit-transform: skew(20deg) rotate(9deg); + -ms-transform: skew(20deg) rotate(9deg); + transform: skew(20deg) rotate(9deg); + -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); + } + span { + display: inline-block; + margin: 0px 0 0; + padding: 0px 12px 8px 9px; + &:before { + color: #777; + font: normal 20px/1 'dashicons'; + content: '\f157'; + position: relative; + display: inline-block; + top: 4px; + margin-right: 4px; + } + } + &:after { + content: ''; + width: 70%; + height: 55%; + z-index: -1; + position: absolute; + right: 10px; + bottom: 9px; + background: transparent; + -webkit-transform: skew(20deg) rotate(6deg); + -ms-transform: skew(20deg) rotate(6deg); + transform: skew(20deg) rotate(6deg); + -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); + box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); + } + } +} + +/*------------------------------------------------------------------------------ + 20.0 - Settings +------------------------------------------------------------------------------*/ + +#utc-time, #local-time { + padding-left: 25px; + font-style: italic; +} + +.defaultavatarpicker .avatar { + margin: 2px 0; + vertical-align: middle; +} + +.options-general-php .spinner { + float: none; + margin: -3px 3px; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + /* Input Elements */ + textarea { + -webkit-appearance: none; + } + input { + &[type=text], &[type="search"], &[type=password], &[type="number"] { + -webkit-appearance: none; + padding: 6px 10px; + } + &.code { + padding-bottom: 5px; + padding-top: 10px; + } + &[type="checkbox"] { + -webkit-appearance: none; + padding: 10px; + } + } + .widefat th input[type="checkbox"] { + -webkit-appearance: none; + padding: 10px; + margin-bottom: 8px; + } + input[type="checkbox"]:checked:before, .widefat th input[type="checkbox"]:before { + font: normal 30px/1 'Dashicons'; + margin: -3px -5px; + } + input { + &[type="radio"], &[type="checkbox"] { + height: 25px; + width: 25px; + } + } + .wp-admin p input { + &[type="checkbox"], &[type="radio"] { + margin-top: -3px; + } + } + input[type="radio"]:checked:before { + vertical-align: middle; + width: 9px; + height: 9px; + margin: 7px; + line-height: 16px; + } + .wp-upload-form input[type="submit"] { + margin-top: 10px; + } + #wpbody select { + height: 36px; + font-size: 16px; + } + .wp-admin .button-cancel { + padding: 0; + font-size: 14px; + } + #createuser .form-field input { + width: 100%; + } + .form-table { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + th, td { + display: block; + width: auto; + vertical-align: middle; + } + .color-palette td { + display: table-cell; + width: 15px; + } + table.color-palette { + margin-right: 10px; + } + } + textarea, input { + font-size: 16px; + } + .form-table { + td { + input { + &[type="text"], &[type="password"] { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + select, textarea { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + span.description { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + #profile-page .form-table textarea { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + #wpbody .form-table td select { + height: 40px; + } + input { + &[type="text"].small-text, &[type="search"].small-text, &[type="password"].small-text, &[type="number"].small-text { + width: auto; + max-width: 55px; + display: inline; + padding: 3px 6px; + margin: 0 3px; + } + } + .form-table input[type="text"].small-text { + width: auto; + max-width: 55px; + display: inline; + padding: 3px 6px; + margin: 0 3px; + } + #pass-strength-result { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 8px; + } + p.search-box { + float: none; + position: absolute; + bottom: 0; + width: 98%; + height: 90px; + margin-bottom: 20px; + input { + &[name="s"] { + height: auto; + float: none; + width: 100%; + margin-bottom: 10px; + vertical-align: middle; + -webkit-appearance: none; + } + &[type="submit"] { + margin-bottom: 10px; + } + } + } + .form-table { + span.description { + padding: 4px 0 0; + line-height: 1.4em; + } + th { + padding-top: 10px; + padding-bottom: 0; + border-bottom: 0; + } + td { + padding-top: 8px; + padding-left: 0; + } + input.regular-text { + width: 100%; + } + label { + font-size: 14px; + } + fieldset label { + display: block; + } + } + #utc-time { + margin-top: 10px; + display: block; + float: none; + padding: 0; + line-height: 2; + } + #local-time { + display: block; + float: none; + padding: 0; + line-height: 2; + } +} + +@media only screen and (max-width: 768px) { + .form-field { + input, textarea { + width: 99%; + } + } + .form-wrap .form-field { + padding: 0; + } + /* users */ + #profile-page .form-table textarea { + max-width: 400px; + width: auto; + } +} + +/* Smartphone */ +@media screen and (max-width: 600px) { + /* Color Picker Options */ + .color-option { + width: 49%; + } +} diff --git a/src/wp-admin/css/ie.css b/src/wp-admin/css/ie.css deleted file mode 100644 index c49f576..0000000 --- a/src/wp-admin/css/ie.css +++ /dev/null @@ -1,785 +0,0 @@ -/* Fixes for IE 7 bugs */ - -#dashboard-widgets form .input-text-wrap input, -#dashboard-widgets form .textarea-wrap textarea { - width: 99%; -} - -#dashboard-widgets form #title { - width: 98%; -} - -#wpbody-content #dashboard-widgets .postbox-container { - width: 49.5%; -} - -#wpbody-content #dashboard-widgets #postbox-container-2, -#wpbody-content #dashboard-widgets #postbox-container-3, -#wpbody-content #dashboard-widgets #postbox-container-4 { - float: right; - width: 50.5%; -} - -#dashboard-widgets #postbox-container-3 .empty-container, -#dashboard-widgets #postbox-container-4 .empty-container { - border: 0 none; - height: 0; - min-height: 0; -} - -.wp-editor-wrap .wp-editor-tools, -.wp-editor-wrap .wp-switch-editor, -.wp-editor-wrap .wp-editor-tabs, -.wp-editor-wrap .wp-editor-container { - zoom: 100%; -} - -.wp-editor-wrap .wp-editor-container textarea.wp-editor-area { - width: 97%; -} - -#post-body.columns-2 #postbox-container-1 { - padding-left: 19px; -} - -.welcome-panel .wp-badge { - position: absolute; -} - -.welcome-panel .welcome-panel-column:first-child { - width: 35%; -} - -.wp-fullscreen-title { - width: 97%; -} - -#wp_mce_fullscreen_ifr { - background-color: #f9f9f9; -} - -#wp-fullscreen-tagline { - color: #888; - font-size: 14px; -} - -#adminmenuback { - left: 0; - background-image: none; -} - -#adminmenuwrap { - position: static; -} - -#adminmenu { - position: relative; -} - -#adminmenu, -#adminmenu a { - cursor: pointer; -} - -#adminmenu li.wp-menu-separator, -#adminmenu li.wp-menu-separator-last { - font-size: 1px; - line-height: 1; -} - -#adminmenu a.menu-top { - border-bottom: 0 none; - border-top: 1px solid #ddd; -} - -#adminmenu .separator { - font-size: 1px; - line-height: 1px; -} - -#adminmenu .wp-submenu { - left: 110px; -} - -#adminmenu .wp-submenu ul { - margin: 0; -} - -.folded #wpcontent, -.folded #wpfooter { - margin-left: 170px; -} - -.folded #adminmenuback, -.folded #adminmenuwrap, -.folded #adminmenu, -.folded #adminmenu li.menu-top { - width: 150px; -} - -.folded #adminmenu .wp-submenu { - border-top-color: transparent; -} - -.folded #adminmenu .wp-menu-name { - display: block; -} - -.folded #adminmenu .wp-submenu.sub-open, -.folded #adminmenu .opensub .wp-submenu { - left: 110px; -} - -.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu { - top: -1px; - position: relative; -} - -.folded #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { - background-color: transparent; -} - -#adminmenu .wp-submenu .wp-submenu-head { - border-top-color: #ddd; -} - -.folded #adminmenu .wp-submenu ul { - margin-left: 5px; -} - -#adminmenu li.menu-top { - margin-bottom: -2px; -} - -#adminmenu .wp-menu-arrow { - display: none !important; -} - -.js.folded #adminmenu li.menu-top { - display: block; - zoom: 100%; -} - -ul#adminmenu { - z-index: 99; -} - -#adminmenu li.menu-top a.menu-top { - min-width: auto; - width: auto; -} - -#wpcontent #adminmenu li.wp-has-current-submenu a.wp-has-submenu { - font-style: normal; -} - -#wpcontent #adminmenu .wp-submenu li { - padding: 0; -} - -#adminmenu li.wp-has-current-submenu .wp-submenu { - left: -40px; -} - -#adminmenu .wp-menu-image { - display: none !important; -} - -#adminmenu a.menu-top .wp-menu-name { - padding-left: 8px; -} - -#collapse-menu { - line-height: 23px; -} - -#wpadminbar .ab-comments-icon { - padding-top: 7px; -} - - -.theme-browser .theme { - width: 30%; - margin: 0 3% 4% 0; - cursor: auto; -} - -.theme-browser .theme:hover, -.theme-browser .theme:focus { - cursor: auto; -} - -.theme-browser .theme .theme-screenshot { - height: 180px; -} - -.theme-browser .theme .theme-actions { - position: static; - background-color: #e8e8e8; -} - -.theme-browser .theme .more-details { - display: none; -} - -.plugins td, -.plugins th { - border-top: 1px solid #ddd; -} - -table.fixed th, -table.fixed td { - border-top: 1px solid #ddd; -} - -#wpbody-content input.button, -#wpbody-content input.button-primary, -#wpbody-content input.button-secondary { - overflow: visible; -} - -#dashboard-widgets h3 a { - height: 14px; - line-height: 14px; -} - -#dashboard_browser_nag { - color: #fff; -} - -#dashboard_browser_nag .browser-icon { - position: relative; -} - -.tablenav-pages .current-page { - vertical-align: middle; -} - -#wpbody-content .postbox { - border: 1px solid #dfdfdf; -} - -#wpbody-content .postbox .hndle { - margin-bottom: -1px; -} - -.major-publishing-actions, -.wp-submenu, -.wp-submenu li, -#template, -#template div, -#editcat, -#addcat { - zoom: 100%; -} - -.wp-menu-arrow { - height: 28px; -} - -.submitbox { - margin-top: 10px; -} - -/* Inline Editor */ -#wpbody-content .quick-edit-row-post .inline-edit-col-left { - width: 39%; -} - -#wpbody-content .inline-edit-row-post .inline-edit-col-center { - width: 19%; -} - -#wpbody-content .quick-edit-row-page .inline-edit-col-left { - width: 49%; -} - -#wpbody-content .bulk-edit-row .inline-edit-col-left { - width: 29%; -} - -.inline-edit-row p.submit { - zoom: 100%; -} - -.inline-edit-row fieldset label span.title { - display: block; - float: left; - width: 5em; -} - -.inline-edit-row fieldset label span.input-text-wrap { - margin-left: 0; - zoom: 100%; -} - -#wpbody-content .inline-edit-row fieldset label span.input-text-wrap input { - line-height: 130%; -} - -#wpbody-content .inline-edit-row .input-text-wrap input { - width: 95%; -} - -#wpbody-content .inline-edit-row .input-text-wrap input.inline-edit-password-input { - width: 8em; -} -/* end Inline Editor */ - -#titlediv #title { - width: 98%; -} - -.button, -input[type="reset"], -input[type="button"], -input[type="submit"] { - padding: 0 8px; - line-height: 20px; - height: auto; -} - -.button.button-large, -input[type="reset"].button-large, -input[type="button"].button-large, -input[type="submit"].button-large { - padding: 0 10px; - line-height: 24px; - height: auto; -} - -.button.button-small, -input[type="reset"].button-small, -input[type="button"].button-small, -input[type="submit"].button-small { - padding: 0 6px; - line-height: 16px; - height: auto; -} - -a.button { - margin: 1px; - padding: 1px 9px 2px; -} - -a.button.button-large { - padding: 1px 11px 2px; -} - -a.button.button-small { - padding: 1px 7px 2px; -} - -#screen-options-wrap { - overflow: hidden; -} - -#the-comment-list .comment-item, -#post-status-info, -#wpwrap, -#wrap, -#postdivrich, -#postdiv, -#poststuff, -.metabox-holder, -#titlediv, -#post-body, -#editorcontainer, -.tablenav, -.widget-liquid-left, -.widget-liquid-right, -#widgets-left, -.widgets-sortables, -#dragHelper, -.widget .widget-top, -.widget-control-actions, -.tagchecklist, -#col-container, -#col-left, -#col-right, -.fileedit-sub { - display: block; - zoom: 100%; -} - -p.search-box { - position: static; - float: right; - margin: -3px 0 4px; -} - -#widget-list .widget, -.feature-filter .feature-group li { - display: inline; -} - -.feature-filter .feature-group li input { - vertical-align: middle; -} - -#editorcontainer #content { - overflow: auto; - margin: auto; - width: 98%; -} - -form#template div { - width: 100%; -} - -.wp-editor-container .quicktags-toolbar input { - overflow: visible; - padding: 0 4px; -} - -#poststuff h2 { - font-size: 1.6em; -} - -#poststuff .inside #parent_id, -#poststuff .inside #page_template, -.inline-edit-row #post_parent, -.inline-edit-row select[name="page_template"] { - width: 250px; -} - -#submitdiv input, -#submitdiv select, -#submitdiv a.button { - position: relative; -} - -#bh { - margin: 7px 10px 0 0; - float: right; -} - -/* without this dashboard widgets appear in one column for some screen widths */ -div#dashboard-widgets { - padding-right: 1px; -} - -.tagchecklist span, .tagchecklist span a { - display: inline-block; - display: block; -} - -.tablenav .button-secondary, -.nav .button-secondary { - padding-top: 2px; - padding-bottom: 2px; -} - -.tablenav select { - font-size: 13px; - display: inline-block; - vertical-align: top; - margin-top: 2px; -} - -.tablenav .actions select { - width: 155px; -} - -.subsubsub li { - display: inline; -} - -a.post-state-format { - text-indent: 0; - line-height: 0; - font-size: 0; -} - -table.ie-fixed { - table-layout: fixed; -} - -.widefat tr, -.widefat th { - margin-bottom: 0; - border-spacing: 0; -} - -.widefat th input { - margin: 0 0 0 5px; -} - -.widefat thead .check-column, -.widefat tfoot .check-column { - padding-top: 6px; -} - -.widefat tbody th.check-column, -.media.widefat tbody th.check-column { - padding: 4px 0 0; -} - -.widefat { - empty-cells: show; - border-collapse: collapse; -} - -.tablenav a.button-secondary { - display: inline-block; - padding: 2px 5px; -} - -.inactive-sidebar .widgets-sortables { - padding-bottom: 8px; -} - -#available-widgets .widget-holder { - padding-bottom: 65px; -} - -#widgets-left .inactive { - padding-bottom: 10px; -} - -.widget-liquid-right .widget, -.inactive-sidebar .widget { - position: relative; -} - -.inactive-sidebar .widget { - display: block; - float: left; -} - -#wpcontent .button-primary-disabled { - color: #9FD0D5; - background: #298CBA; -} - -#the-comment-list .unapproved tr, -#the-comment-list .unapproved td { - background-color: #ffffe0; -} - -.imgedit-submit { - width: 300px; -} - -#nav-menus-frame, -#wpbody, -.menu li { - zoom: 100%; -} - -#update-nav-menu #post-body { - overflow:hidden; -} - -.menu li { - min-width: 100%; -} - -.menu li.sortable-placeholder { - min-width: 400px; -} - -.available-theme { - display: inline; -} - -.available-theme ul { - margin: 0; -} - -.available-theme .action-links li { - padding-right: 7px; - margin-right: 7px; -} - -.about-wrap .three-col.about-updates .col-2 { - width: 15%; -} - -.about-wrap .about-password-meter input { - width: 98%; -} - -.revisions-tickmarks, -.revisions-tooltip { - display: none !important; -} - -.revisions.pinned .revisions-controls { - position: relative; -} - -input[type="password"], -.login form .input { - font-family: sans-serif; -} - -/* TinyMCE icons */ -.mce-btn i.mce-i-bold, -.mce-btn i.mce-i-italic, -.mce-btn i.mce-i-bullist, -.mce-btn i.mce-i-numlist, -.mce-btn i.mce-i-blockquote, -.mce-btn i.mce-i-alignleft, -.mce-btn i.mce-i-aligncenter, -.mce-btn i.mce-i-alignright, -.mce-btn i.mce-i-link, -.mce-btn i.mce-i-unlink, -.mce-btn i.mce-i-wp_more, -.mce-btn i.mce-i-strikethrough, -.mce-btn i.mce-i-spellchecker, -.mce-btn i.mce-i-fullscreen, -.mce-btn i.mce-i-wp_fullscreen, -.mce-btn i.mce-i-wp_adv, -.mce-btn i.mce-i-underline, -.mce-btn i.mce-i-alignjustify, -.mce-btn i.mce-i-forecolor, -.mce-btn i.mce-i-pastetext, -.mce-btn i.mce-i-pasteword, -.mce-btn i.mce-i-removeformat, -.mce-btn i.mce-i-charmap, -.mce-btn i.mce-i-outdent, -.mce-btn i.mce-i-indent, -.mce-btn i.mce-i-undo, -.mce-btn i.mce-i-redo, -.mce-btn i.mce-i-help, -.mce-btn i.mce-i-wp_help, -.mce-btn i.mce-i-wp-media-library, -.mce-btn i.mce-i-ltr, -.mce-btn i.mce-i-wp_page, -.mce-btn i.mce-i-hr, -.mce-close { - font-family: 'tinymce', Arial; - font-style: normal; - font-weight: normal; - font-variant: normal; - font-size: 16px; - margin-left: 0; - padding-right: 0; -} - -.mce-btn i.mce-i-wp_fullscreen, -.qt-fullscreen { - -ie7-icon: '\e023'; -} - -.mce-btn i.mce-i-wp_more, -.mce-btn i.mce-i-wp_page { - -ie7-icon: '\e027'; -} - -.mce-btn i.mce-i-wp_adv { - background-color: #aaa; -} - -.mce-btn i.mce-i-help, -.mce-btn i.mce-i-wp_help { - -ie7-icon: '\e016'; -} - - -/* IE6 leftovers */ -* html .row-actions { - visibility: visible; -} - -* html div.widget-liquid-left, -* html div.widget-liquid-right { - display: block; - position: relative; -} - -* html #editorcontainer { - padding: 0; -} - -* html #poststuff h2 { - margin-left: 0; -} - -* html .stuffbox, -* html .stuffbox input, -* html .stuffbox textarea { - border: 1px solid #DFDFDF; -} - -* html .feature-filter .feature-group li { - width: 145px; -} - -* html div.widget-liquid-left { - width: 99%; -} - -* html .widgets-sortables { - height: 50px; -} - -* html a#content_resize { - right: -2px; -} - -* html .widget-title h4 { - width: 205px; -} - -* html #removing-widget .in-widget-title { - display: none; -} - -* html .media-item .pinkynail { - height: 32px; - width: 40px; -} - -* html .describe .field input.text, -* html .describe .field textarea { - width: 440px; -} - -* html input { - border: 1px solid #dfdfdf; -} - -* html .edit-box { - display: inline; -} - -* html .postbox-container .meta-box-sortables { - height: 300px; -} - -* html #wpbody-content #screen-options-link-wrap { - display: inline-block; - width: 150px; - text-align: center; -} - -* html #wpbody-content #contextual-help-link-wrap { - display: inline-block; - width: 100px; - text-align: center; -} - -* html #adminmenu { - margin-left: -80px; -} - -* html .folded #adminmenu { - margin-left: -22px; -} - -* html #wpcontent #adminmenu li.menu-top { - display: inline; - padding: 0; - margin: 0; -} - -* html #wpfooter { - margin: 0; -} - -* html #adminmenu div.wp-menu-image { - height: 29px; -} diff --git a/src/wp-admin/css/ie.scss b/src/wp-admin/css/ie.scss new file mode 100644 index 0000000..eadbdac --- /dev/null +++ b/src/wp-admin/css/ie.scss @@ -0,0 +1,757 @@ +/* Fixes for IE 7 bugs */ + +#dashboard-widgets form { + .input-text-wrap input, .textarea-wrap textarea { + width: 99%; + } + #title { + width: 98%; + } +} + +#wpbody-content #dashboard-widgets { + .postbox-container { + width: 49.5%; + } + #postbox-container-2, #postbox-container-3, #postbox-container-4 { + float: right; + width: 50.5%; + } +} + +#dashboard-widgets { + #postbox-container-3 .empty-container, #postbox-container-4 .empty-container { + border: 0 none; + height: 0; + min-height: 0; + } +} + +.wp-editor-wrap { + .wp-editor-tools, .wp-switch-editor, .wp-editor-tabs { + zoom: 100%; + } + .wp-editor-container { + zoom: 100%; + textarea.wp-editor-area { + width: 97%; + } + } +} + +#post-body.columns-2 #postbox-container-1 { + padding-left: 19px; +} + +.welcome-panel { + .wp-badge { + position: absolute; + } + .welcome-panel-column:first-child { + width: 35%; + } +} + +.wp-fullscreen-title { + width: 97%; +} + +#wp_mce_fullscreen_ifr { + background-color: #f9f9f9; +} + +#wp-fullscreen-tagline { + color: #888; + font-size: 14px; +} + +#adminmenuback { + left: 0; + background-image: none; +} + +#adminmenuwrap { + position: static; +} + +#adminmenu { + position: relative; + cursor: pointer; + a { + cursor: pointer; + } + li { + &.wp-menu-separator, &.wp-menu-separator-last { + font-size: 1px; + line-height: 1; + } + } + a.menu-top { + border-bottom: 0 none; + border-top: 1px solid #ddd; + } + .separator { + font-size: 1px; + line-height: 1px; + } + .wp-submenu { + left: 110px; + ul { + margin: 0; + } + } +} + +.folded { + #wpcontent, #wpfooter { + margin-left: 170px; + } + #adminmenuback, #adminmenuwrap { + width: 150px; + } + #adminmenu { + width: 150px; + li.menu-top { + width: 150px; + } + .wp-submenu { + border-top-color: transparent; + } + .wp-menu-name { + display: block; + } + .wp-submenu.sub-open, .opensub .wp-submenu { + left: 110px; + } + a.wp-has-current-submenu:focus + .wp-submenu { + top: -1px; + position: relative; + } + .wp-has-current-submenu .wp-submenu { + top: -1px; + position: relative; + .wp-submenu-head { + background-color: transparent; + } + } + } +} + +#adminmenu .wp-submenu .wp-submenu-head { + border-top-color: #ddd; +} + +.folded #adminmenu .wp-submenu ul { + margin-left: 5px; +} + +#adminmenu { + li.menu-top { + margin-bottom: -2px; + } + .wp-menu-arrow { + display: none !important; + } +} + +.js.folded #adminmenu li.menu-top { + display: block; + zoom: 100%; +} + +ul#adminmenu { + z-index: 99; +} + +#adminmenu li.menu-top a.menu-top { + min-width: auto; + width: auto; +} + +#wpcontent #adminmenu { + li.wp-has-current-submenu a.wp-has-submenu { + font-style: normal; + } + .wp-submenu li { + padding: 0; + } +} + +#adminmenu { + li.wp-has-current-submenu .wp-submenu { + left: -40px; + } + .wp-menu-image { + display: none !important; + } + a.menu-top .wp-menu-name { + padding-left: 8px; + } +} + +#collapse-menu { + line-height: 23px; +} + +#wpadminbar .ab-comments-icon { + padding-top: 7px; +} + +.theme-browser .theme { + width: 30%; + margin: 0 3% 4% 0; + cursor: auto; + &:hover, &:focus { + cursor: auto; + } + .theme-screenshot { + height: 180px; + } + .theme-actions { + position: static; + background-color: #e8e8e8; + } + .more-details { + display: none; + } +} + +.plugins { + td, th { + border-top: 1px solid #ddd; + } +} + +table.fixed { + th, td { + border-top: 1px solid #ddd; + } +} + +#wpbody-content input { + &.button, &.button-primary, &.button-secondary { + overflow: visible; + } +} + +#dashboard-widgets h3 a { + height: 14px; + line-height: 14px; +} + +#dashboard_browser_nag { + color: #fff; + .browser-icon { + position: relative; + } +} + +.tablenav-pages .current-page { + vertical-align: middle; +} + +#wpbody-content .postbox { + border: 1px solid #dfdfdf; + .hndle { + margin-bottom: -1px; + } +} + +.major-publishing-actions { + zoom: 100%; +} + +.wp-submenu { + zoom: 100%; + li { + zoom: 100%; + } +} + +#template { + zoom: 100%; + div { + zoom: 100%; + } +} + +#editcat, #addcat { + zoom: 100%; +} + +.wp-menu-arrow { + height: 28px; +} + +.submitbox { + margin-top: 10px; +} + +/* Inline Editor */ + +#wpbody-content { + .quick-edit-row-post .inline-edit-col-left { + width: 39%; + } + .inline-edit-row-post .inline-edit-col-center { + width: 19%; + } + .quick-edit-row-page .inline-edit-col-left { + width: 49%; + } + .bulk-edit-row .inline-edit-col-left { + width: 29%; + } +} + +.inline-edit-row { + p.submit { + zoom: 100%; + } + fieldset label span { + &.title { + display: block; + float: left; + width: 5em; + } + &.input-text-wrap { + margin-left: 0; + zoom: 100%; + } + } +} + +#wpbody-content .inline-edit-row { + fieldset label span.input-text-wrap input { + line-height: 130%; + } + .input-text-wrap input { + width: 95%; + &.inline-edit-password-input { + width: 8em; + } + } +} + +/* end Inline Editor */ + +#titlediv #title { + width: 98%; +} + +.button { + padding: 0 8px; + line-height: 20px; + height: auto; +} + +input { + &[type="reset"], &[type="button"], &[type="submit"] { + padding: 0 8px; + line-height: 20px; + height: auto; + } +} + +.button.button-large { + padding: 0 10px; + line-height: 24px; + height: auto; +} + +input { + &[type="reset"].button-large, &[type="button"].button-large, &[type="submit"].button-large { + padding: 0 10px; + line-height: 24px; + height: auto; + } +} + +.button.button-small { + padding: 0 6px; + line-height: 16px; + height: auto; +} + +input { + &[type="reset"].button-small, &[type="button"].button-small, &[type="submit"].button-small { + padding: 0 6px; + line-height: 16px; + height: auto; + } +} + +a.button { + margin: 1px; + padding: 1px 9px 2px; + &.button-large { + padding: 1px 11px 2px; + } + &.button-small { + padding: 1px 7px 2px; + } +} + +#screen-options-wrap { + overflow: hidden; +} + +#the-comment-list .comment-item, #post-status-info, #wpwrap, #wrap, #postdivrich, #postdiv, #poststuff, .metabox-holder, #titlediv, #post-body, #editorcontainer, .tablenav, .widget-liquid-left, .widget-liquid-right, #widgets-left, .widgets-sortables, #dragHelper, .widget .widget-top, .widget-control-actions, .tagchecklist, #col-container, #col-left, #col-right, .fileedit-sub { + display: block; + zoom: 100%; +} + +p.search-box { + position: static; + float: right; + margin: -3px 0 4px; +} + +#widget-list .widget { + display: inline; +} + +.feature-filter .feature-group li { + display: inline; + input { + vertical-align: middle; + } +} + +#editorcontainer #content { + overflow: auto; + margin: auto; + width: 98%; +} + +form#template div { + width: 100%; +} + +.wp-editor-container .quicktags-toolbar input { + overflow: visible; + padding: 0 4px; +} + +#poststuff { + h2 { + font-size: 1.6em; + } + .inside { + #parent_id, #page_template { + width: 250px; + } + } +} + +.inline-edit-row { + #post_parent, select[name="page_template"] { + width: 250px; + } +} + +#submitdiv { + input, select, a.button { + position: relative; + } +} + +#bh { + margin: 7px 10px 0 0; + float: right; +} + +/* without this dashboard widgets appear in one column for some screen widths */ + +div#dashboard-widgets { + padding-right: 1px; +} + +.tagchecklist span { + display: inline-block; + display: block; + a { + display: inline-block; + display: block; + } +} + +.tablenav .button-secondary, .nav .button-secondary { + padding-top: 2px; + padding-bottom: 2px; +} + +.tablenav { + select { + font-size: 13px; + display: inline-block; + vertical-align: top; + margin-top: 2px; + } + .actions select { + width: 155px; + } +} + +.subsubsub li { + display: inline; +} + +a.post-state-format { + text-indent: 0; + line-height: 0; + font-size: 0; +} + +table.ie-fixed { + table-layout: fixed; +} + +.widefat { + tr { + margin-bottom: 0; + border-spacing: 0; + } + th { + margin-bottom: 0; + border-spacing: 0; + input { + margin: 0 0 0 5px; + } + } + thead .check-column, tfoot .check-column { + padding-top: 6px; + } + tbody th.check-column { + padding: 4px 0 0; + } +} + +.media.widefat tbody th.check-column { + padding: 4px 0 0; +} + +.widefat { + empty-cells: show; + border-collapse: collapse; +} + +.tablenav a.button-secondary { + display: inline-block; + padding: 2px 5px; +} + +.inactive-sidebar .widgets-sortables { + padding-bottom: 8px; +} + +#available-widgets .widget-holder { + padding-bottom: 65px; +} + +#widgets-left .inactive { + padding-bottom: 10px; +} + +.widget-liquid-right .widget { + position: relative; +} + +.inactive-sidebar .widget { + position: relative; + display: block; + float: left; +} + +#wpcontent .button-primary-disabled { + color: #9FD0D5; + background: #298CBA; +} + +#the-comment-list .unapproved { + tr, td { + background-color: #ffffe0; + } +} + +.imgedit-submit { + width: 300px; +} + +#nav-menus-frame, #wpbody, .menu li { + zoom: 100%; +} + +#update-nav-menu #post-body { + overflow: hidden; +} + +.menu li { + min-width: 100%; + &.sortable-placeholder { + min-width: 400px; + } +} + +.available-theme { + display: inline; + ul { + margin: 0; + } + .action-links li { + padding-right: 7px; + margin-right: 7px; + } +} + +.about-wrap { + .three-col.about-updates .col-2 { + width: 15%; + } + .about-password-meter input { + width: 98%; + } +} + +.revisions-tickmarks, .revisions-tooltip { + display: none !important; +} + +.revisions.pinned .revisions-controls { + position: relative; +} + +input[type="password"], .login form .input { + font-family: sans-serif; +} + +/* TinyMCE icons */ + +.mce-btn i { + &.mce-i-bold, &.mce-i-italic, &.mce-i-bullist, &.mce-i-numlist, &.mce-i-blockquote, &.mce-i-alignleft, &.mce-i-aligncenter, &.mce-i-alignright, &.mce-i-link, &.mce-i-unlink, &.mce-i-wp_more, &.mce-i-strikethrough, &.mce-i-spellchecker, &.mce-i-fullscreen, &.mce-i-wp_fullscreen, &.mce-i-wp_adv, &.mce-i-underline, &.mce-i-alignjustify, &.mce-i-forecolor, &.mce-i-pastetext, &.mce-i-pasteword, &.mce-i-removeformat, &.mce-i-charmap, &.mce-i-outdent, &.mce-i-indent, &.mce-i-undo, &.mce-i-redo, &.mce-i-help, &.mce-i-wp_help, &.mce-i-wp-media-library, &.mce-i-ltr, &.mce-i-wp_page, &.mce-i-hr { + font-family: 'tinymce', Arial; + font-style: normal; + font-weight: normal; + font-variant: normal; + font-size: 16px; + margin-left: 0; + padding-right: 0; + } +} + +.mce-close { + font-family: 'tinymce', Arial; + font-style: normal; + font-weight: normal; + font-variant: normal; + font-size: 16px; + margin-left: 0; + padding-right: 0; +} + +.mce-btn i.mce-i-wp_fullscreen, .qt-fullscreen { + -ie7-icon: '\e023'; +} + +.mce-btn i { + &.mce-i-wp_more, &.mce-i-wp_page { + -ie7-icon: '\e027'; + } + &.mce-i-wp_adv { + background-color: #aaa; + } + &.mce-i-help, &.mce-i-wp_help { + -ie7-icon: '\e016'; + } +} + +/* IE6 leftovers */ + +* html { + .row-actions { + visibility: visible; + } + div { + &.widget-liquid-left, &.widget-liquid-right { + display: block; + position: relative; + } + } + #editorcontainer { + padding: 0; + } + #poststuff h2 { + margin-left: 0; + } + .stuffbox { + border: 1px solid #DFDFDF; + input, textarea { + border: 1px solid #DFDFDF; + } + } + .feature-filter .feature-group li { + width: 145px; + } + div.widget-liquid-left { + width: 99%; + } + .widgets-sortables { + height: 50px; + } + a#content_resize { + right: -2px; + } + .widget-title h4 { + width: 205px; + } + #removing-widget .in-widget-title { + display: none; + } + .media-item .pinkynail { + height: 32px; + width: 40px; + } + .describe .field { + input.text, textarea { + width: 440px; + } + } + input { + border: 1px solid #dfdfdf; + } + .edit-box { + display: inline; + } + .postbox-container .meta-box-sortables { + height: 300px; + } + #wpbody-content { + #screen-options-link-wrap { + display: inline-block; + width: 150px; + text-align: center; + } + #contextual-help-link-wrap { + display: inline-block; + width: 100px; + text-align: center; + } + } + #adminmenu { + margin-left: -80px; + } + .folded #adminmenu { + margin-left: -22px; + } + #wpcontent #adminmenu li.menu-top { + display: inline; + padding: 0; + margin: 0; + } + #wpfooter { + margin: 0; + } + #adminmenu div.wp-menu-image { + height: 29px; + } +} diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css deleted file mode 100644 index 28c071c..0000000 --- a/src/wp-admin/css/install.css +++ /dev/null @@ -1,389 +0,0 @@ -html { - background: #f1f1f1; - margin: 0 20px; -} - -body { - background: #fff; - color: #444; - font-family: "Open Sans", sans-serif; - margin: 140px auto 25px; - padding: 20px 20px 10px 20px; - max-width: 700px; - -webkit-font-smoothing: subpixel-antialiased; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13); - box-shadow: 0 1px 3px rgba(0,0,0,0.13); -} - -a { - color: #0074a2; - text-decoration: none; -} - -a:hover { - color: #2ea2cc; -} - -h1 { - border-bottom: 1px solid #dedede; - clear: both; - color: #666; - font-size: 24px; - margin: 30px 0; - padding: 0; - padding-bottom: 7px; - font-weight: normal; -} - -h2 { - font-size: 16px; -} - -p, li, dd, dt { - padding-bottom: 2px; - font-size: 14px; - line-height: 1.5; -} - -code, .code { - font-family: Consolas, Monaco, monospace; -} - -ul, ol, dl { - padding: 5px 5px 5px 22px; -} - -a img { - border:0 -} -abbr { - border: 0; - font-variant: normal; -} - -label { - cursor: pointer; -} - -#logo { - margin: 6px 0 14px 0; - border-bottom: none; - text-align:center -} -#logo a { - background-image: url(../images/w-logo-blue.png?ver=20131202); - background-image: none, url(../images/wordpress-logo.svg?ver=20131107); - -webkit-background-size: 84px; - background-size: 84px; - background-position: center top; - background-repeat: no-repeat; - color: #999; - height: 84px; - font-size: 20px; - font-weight: normal; - line-height: 1.3em; - margin: -130px auto 25px; - padding: 0; - text-decoration: none; - width: 84px; - text-indent: -9999px; - outline: none; - overflow: hidden; - display: block; -} -.step { - margin: 20px 0 15px; -} -.step, th { - text-align: left; - padding: 0; -} -.language-chooser.wp-core-ui .step .button.button-large { - height: 36px; - vertical-align: middle; - font-size: 14px; -} -textarea { - border: 1px solid #dfdfdf; - font-family: "Open Sans", sans-serif; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.form-table { - border-collapse: collapse; - margin-top: 1em; - width: 100%; -} - -.form-table td { - margin-bottom: 9px; - padding: 10px 20px 10px 0; - border-bottom: 8px solid #fff; - font-size: 14px; - vertical-align: top -} - -.form-table th { - font-size: 14px; - text-align: left; - padding: 16px 20px 10px 0; - width: 140px; - vertical-align: top; -} - -.form-table code { - line-height: 18px; - font-size: 14px; -} - -.form-table p { - margin: 4px 0 0 0; - font-size: 11px; -} - -.form-table input { - line-height: 20px; - font-size: 15px; - padding: 3px 5px; - border: 1px solid #ddd; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); -} - -input, -submit { - font-family: "Open Sans", sans-serif; -} - -.form-table input[type=text], -.form-table input[type=email], -.form-table input[type=url], -.form-table input[type=password] { - width: 206px; -} - -.form-table th p { - font-weight: normal; -} - -.form-table.install-success td { - vertical-align: middle; - padding: 16px 20px 10px 0; -} - -.form-table.install-success td p { - margin: 0; - font-size: 14px; -} - -.form-table.install-success td code { - margin: 0; - font-size: 18px; -} - -#error-page { - margin-top: 50px; -} - -#error-page p { - font-size: 14px; - line-height: 18px; - margin: 25px 0 20px; -} - -#error-page code, .code { - font-family: Consolas, Monaco, monospace; -} - -#pass-strength-result { - background-color: #eee; - border-color: #ddd !important; - border-style: solid; - border-width: 1px; - margin: 5px 5px 5px 0; - padding: 5px; - text-align: center; - width: 200px; - display: none; -} - -#pass-strength-result.bad { - background-color: #ffb78c; - border-color: #ff853c !important; -} - -#pass-strength-result.good { - background-color: #ffec8b; - border-color: #ffcc00 !important; -} - -#pass-strength-result.short { - background-color: #ffa0a0; - border-color: #f04040 !important; -} - -#pass-strength-result.strong { - background-color: #c3ff88; - border-color: #8dff1c !important; -} - -.message { - border: 1px solid #c00; - padding: 0.5em 0.7em; - margin: 5px 0 15px; - background-color: #ffebe8; -} - -/* @noflip */ -#dbname, -#uname, -#pwd, -#dbhost, -#prefix, -#user_login, -#admin_email, -#pass1, -#pass2 { - direction: ltr; -} - - -/* localization */ -body.rtl, -.rtl textarea, -.rtl input, -.rtl submit { - font-family: Tahoma, sans-serif; -} - -:lang(he-il) body.rtl, -:lang(he-il) .rtl textarea, -:lang(he-il) .rtl input, -:lang(he-il) .rtl submit { - font-family: Arial, sans-serif; -} - -@media only screen and (max-width: 799px) { - body { - margin-top: 115px; - } - #logo a { - margin: -125px auto 30px; - } -} - -@media screen and ( max-width: 782px ) { - - .form-table { - margin-top: 0; - } - - .form-table th, - .form-table td { - display: block; - width: auto; - vertical-align: middle; - } - - .form-table th { - padding: 20px 0 0; - } - - .form-table td { - padding: 5px 0; - border: 0; - margin: 0; - } - - textarea, - input { - font-size: 16px; - } - - .form-table td input[type="text"], - .form-table td input[type="email"], - .form-table td input[type="url"], - .form-table td input[type="password"], - .form-table td select, - .form-table td textarea, - .form-table span.description { - width: 100%; - font-size: 16px; - line-height: 1.5; - padding: 7px 10px; - display: block; - max-width: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - -} - -body.language-chooser { - max-width: 300px; -} - -.language-chooser select { - padding: 8px; - width: 100%; - display: block; - border: 1px solid #ddd; - background-color: #fff; - color: #333; - font-size: 16px; - font-family: Arial, sans-serif; - font-weight: normal; -} - -.language-chooser p { - text-align: right; -} - -.screen-reader-input, -.screen-reader-text { - position: absolute; - margin: -1px; - padding: 0; - height: 1px; - width: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - border: 0; -} - -.spinner { - background: url(../images/spinner.gif) no-repeat; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; - visibility: hidden; - opacity: 0.7; - filter: alpha(opacity=70); - width: 20px; - height: 20px; - margin: 2px 5px 0; -} - -.step .spinner { - display: inline-block; - margin-top: 8px; - margin-right: 15px; - vertical-align: top; -} - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - - .spinner { - background-image: url(../images/spinner-2x.gif); - } - -} diff --git a/src/wp-admin/css/install.scss b/src/wp-admin/css/install.scss new file mode 100644 index 0000000..f8dbb71 --- /dev/null +++ b/src/wp-admin/css/install.scss @@ -0,0 +1,392 @@ +html { + background: #f1f1f1; + margin: 0 20px; +} + +body { + background: #fff; + color: #444; + font-family: "Open Sans", sans-serif; + margin: 140px auto 25px; + padding: 20px 20px 10px 20px; + max-width: 700px; + -webkit-font-smoothing: subpixel-antialiased; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); +} + +a { + color: #0074a2; + text-decoration: none; + &:hover { + color: #2ea2cc; + } +} + +h1 { + border-bottom: 1px solid #dedede; + clear: both; + color: #666; + font-size: 24px; + margin: 30px 0; + padding: 0; + padding-bottom: 7px; + font-weight: normal; +} + +h2 { + font-size: 16px; +} + +p, li, dd, dt { + padding-bottom: 2px; + font-size: 14px; + line-height: 1.5; +} + +code, .code { + font-family: Consolas, Monaco, monospace; +} + +ul, ol, dl { + padding: 5px 5px 5px 22px; +} + +a img { + border: 0; +} + +abbr { + border: 0; + font-variant: normal; +} + +label { + cursor: pointer; +} + +#logo { + margin: 6px 0 14px 0; + border-bottom: none; + text-align: center; + a { + background-image: url(../images/w-logo-blue.png?ver=20131202); + background-image: none, url(../images/wordpress-logo.svg?ver=20131107); + -webkit-background-size: 84px; + background-size: 84px; + background-position: center top; + background-repeat: no-repeat; + color: #999; + height: 84px; + font-size: 20px; + font-weight: normal; + line-height: 1.3em; + margin: -130px auto 25px; + padding: 0; + text-decoration: none; + width: 84px; + text-indent: -9999px; + outline: none; + overflow: hidden; + display: block; + } +} + +.step { + margin: 20px 0 15px; + text-align: left; + padding: 0; +} + +th { + text-align: left; + padding: 0; +} + +.language-chooser.wp-core-ui .step .button.button-large { + height: 36px; + vertical-align: middle; + font-size: 14px; +} + +textarea { + border: 1px solid #dfdfdf; + font-family: "Open Sans", sans-serif; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.form-table { + border-collapse: collapse; + margin-top: 1em; + width: 100%; + td { + margin-bottom: 9px; + padding: 10px 20px 10px 0; + border-bottom: 8px solid #fff; + font-size: 14px; + vertical-align: top; + } + th { + font-size: 14px; + text-align: left; + padding: 16px 20px 10px 0; + width: 140px; + vertical-align: top; + } + code { + line-height: 18px; + font-size: 14px; + } + p { + margin: 4px 0 0 0; + font-size: 11px; + } + input { + line-height: 20px; + font-size: 15px; + padding: 3px 5px; + border: 1px solid #ddd; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); + } +} + +input, submit { + font-family: "Open Sans", sans-serif; +} + +.form-table { + input { + &[type=text], &[type=email], &[type=url], &[type=password] { + width: 206px; + } + } + th p { + font-weight: normal; + } + &.install-success td { + vertical-align: middle; + padding: 16px 20px 10px 0; + p { + margin: 0; + font-size: 14px; + } + code { + margin: 0; + font-size: 18px; + } + } +} + +#error-page { + margin-top: 50px; + p { + font-size: 14px; + line-height: 18px; + margin: 25px 0 20px; + } + code { + font-family: Consolas, Monaco, monospace; + } +} + +.code { + font-family: Consolas, Monaco, monospace; +} + +#pass-strength-result { + background-color: #eee; + border-color: #ddd !important; + border-style: solid; + border-width: 1px; + margin: 5px 5px 5px 0; + padding: 5px; + text-align: center; + width: 200px; + display: none; + &.bad { + background-color: #ffb78c; + border-color: #ff853c !important; + } + &.good { + background-color: #ffec8b; + border-color: #ffcc00 !important; + } + &.short { + background-color: #ffa0a0; + border-color: #f04040 !important; + } + &.strong { + background-color: #c3ff88; + border-color: #8dff1c !important; + } +} + +.message { + border: 1px solid #c00; + padding: 0.5em 0.7em; + margin: 5px 0 15px; + background-color: #ffebe8; +} + +/* @noflip */ + +#dbname, #uname, #pwd, #dbhost, #prefix, #user_login, #admin_email, #pass1, #pass2 { + direction: ltr; +} + +/* localization */ + +body.rtl { + font-family: Tahoma, sans-serif; +} + +.rtl { + textarea, input, submit { + font-family: Tahoma, sans-serif; + } +} + +:lang(he-il) { + body.rtl { + font-family: Arial, sans-serif; + } + .rtl { + textarea, input, submit { + font-family: Arial, sans-serif; + } + } +} + +@media only screen and (max-width: 799px) { + body { + margin-top: 115px; + } + #logo a { + margin: -125px auto 30px; + } +} + +@media screen and (max-width: 782px) { + .form-table { + margin-top: 0; + th, td { + display: block; + width: auto; + vertical-align: middle; + } + th { + padding: 20px 0 0; + } + td { + padding: 5px 0; + border: 0; + margin: 0; + } + } + textarea, input { + font-size: 16px; + } + .form-table { + td { + input { + &[type="text"], &[type="email"], &[type="url"], &[type="password"] { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + select, textarea { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + span.description { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } +} + +body.language-chooser { + max-width: 300px; +} + +.language-chooser { + select { + padding: 8px; + width: 100%; + display: block; + border: 1px solid #ddd; + background-color: #fff; + color: #333; + font-size: 16px; + font-family: Arial, sans-serif; + font-weight: normal; + } + p { + text-align: right; + } +} + +.screen-reader-input, .screen-reader-text { + position: absolute; + margin: -1px; + padding: 0; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} + +.spinner { + background: url(../images/spinner.gif) no-repeat; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; + visibility: hidden; + opacity: 0.7; + filter: alpha(opacity = 70); + width: 20px; + height: 20px; + margin: 2px 5px 0; +} + +.step .spinner { + display: inline-block; + margin-top: 8px; + margin-right: 15px; + vertical-align: top; +} + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + .spinner { + background-image: url(../images/spinner-2x.gif); + } +} diff --git a/src/wp-admin/css/l10n.css b/src/wp-admin/css/l10n.css deleted file mode 100644 index 4e40586..0000000 --- a/src/wp-admin/css/l10n.css +++ /dev/null @@ -1,101 +0,0 @@ -/*------------------------------------------------------------------------------ - 27.0 - Localization -------------------------------------------------------------------------------*/ - -/* RTL except Hebrew (see below): Tahoma as the first font; */ -body.rtl, -body.rtl .press-this a.wp-switch-editor { - font-family: Tahoma, Arial, sans-serif; -} - - -/* he_IL: Remove Tahoma from the font stack. Arial is best for Hebrew. */ -body.locale-he-il, -body.locale-he-il .press-this a.wp-switch-editor { - font-family: Arial, sans-serif; -} - -/* he_IL: Have be bold rather than italic. */ -.locale-he-il em { - font-style: normal; - font-weight: bold; -} - -/* zh_CN: Remove italic properties. */ -.locale-zh-cn .howto, -.locale-zh-cn .tablenav .displaying-num, -.locale-zh-cn .js .input-with-default-title, -.locale-zh-cn .link-to-original, -.locale-zh-cn .inline-edit-row fieldset span.title, -.locale-zh-cn .inline-edit-row fieldset span.checkbox-title, -.locale-zh-cn #utc-time, -.locale-zh-cn #local-time, -.locale-zh-cn p.install-help, -.locale-zh-cn p.help, -.locale-zh-cn p.description, -.locale-zh-cn span.description, -.locale-zh-cn .form-wrap p { - font-style: normal; -} - -/* zh_CN: Enlarge dashboard widget 'Configure' link */ -.locale-zh-cn .hdnle a { font-size: 12px; } - -/* zn_CH: Enlarge font size, set font-size: normal */ -.locale-zh-cn form.upgrade .hint { font-style: normal; font-size: 100%; } - -/* Zn_CH: Distraction free writing. - * More beautiful font for "Just write." - * Larger text for HTML/Visual mode. - */ -.locale-zh-cn #wp-fullscreen-tagline { font-family: KaiTi, "楷体", sans-serif; } -.locale-zh-cn #wp-fullscreen-modes a { font-size: 12px; } - -/* zh_CN: Enlarge font-size. */ -.locale-zh-cn #sort-buttons { font-size: 1em !important; } - -/* de_DE: Text needs more space for translation */ -.locale-de-de .inline-edit-row fieldset label span.title { - width: 7em; /* default 5em */ -} -.locale-de-de .inline-edit-row fieldset label span.input-text-wrap { - margin-left: 7em; /* default 5em */ -} -.locale-de-de #customize-header-actions .button { - padding: 0 5px 1px; /* default 0 10px 1px */ -} -.locale-de-de #customize-header-actions .spinner { - margin: 16px 3px 0; /* default 16px 4px 0 5px */ -} - -/* ru_RU: Text needs more room to breathe. */ -.locale-ru-ru .inline-edit-row fieldset label span.title { - width: 8em; /* default 5em */ -} -.locale-ru-ru .inline-edit-row fieldset label span.input-text-wrap { - margin-left: 8em; /* default 5em */ -} -.locale-ru-ru.post-php .tagsdiv .newtag, -.locale-ru-ru.post-new-php .tagsdiv .newtag { - width: 165px; /* default 180px - 15px */ -} -.locale-ru-ru.press-this .posting { - margin-right: 277px; /* default 252px + 25px */ -} -.locale-ru-ru .press-this-sidebar { - width: 265px; /* default 240px + 25px */ -} -.locale-ru-ru #customize-header-actions .button { - padding: 0 5px 1px; /* default 0 10px 1px */ -} -.locale-ru-ru #customize-header-actions .spinner { - margin: 16px 3px 0; /* default 16px 4px 0 5px */ -} - -/* lt_LT: QuickEdit */ -.locale-lt-lt .inline-edit-row fieldset label span.title { - width: 8em; -} -.locale-lt-lt .inline-edit-row fieldset label span.input-text-wrap { - margin-left: 8em; -} diff --git a/src/wp-admin/css/l10n.scss b/src/wp-admin/css/l10n.scss new file mode 100644 index 0000000..80812cd --- /dev/null +++ b/src/wp-admin/css/l10n.scss @@ -0,0 +1,153 @@ +/*------------------------------------------------------------------------------ + 27.0 - Localization +------------------------------------------------------------------------------*/ + +/* RTL except Hebrew (see below): Tahoma as the first font; */ + +body { + &.rtl { + font-family: Tahoma, Arial, sans-serif; + .press-this a.wp-switch-editor { + font-family: Tahoma, Arial, sans-serif; + } + } + &.locale-he-il { + font-family: Arial, sans-serif; + .press-this a.wp-switch-editor { + font-family: Arial, sans-serif; + } + } +} + +/* he_IL: Remove Tahoma from the font stack. Arial is best for Hebrew. */ + +/* he_IL: Have be bold rather than italic. */ + +.locale-he-il em { + font-style: normal; + font-weight: bold; +} + +/* zh_CN: Remove italic properties. */ + +.locale-zh-cn { + .howto, .tablenav .displaying-num, .js .input-with-default-title, .link-to-original { + font-style: normal; + } + .inline-edit-row fieldset span { + &.title, &.checkbox-title { + font-style: normal; + } + } + #utc-time, #local-time { + font-style: normal; + } + p { + &.install-help, &.help, &.description { + font-style: normal; + } + } + span.description, .form-wrap p { + font-style: normal; + } + .hdnle a { + font-size: 12px; + } + form.upgrade .hint { + font-style: normal; + font-size: 100%; + } + #wp-fullscreen-tagline { + font-family: KaiTi, "楷体", sans-serif; + } + #wp-fullscreen-modes a { + font-size: 12px; + } + #sort-buttons { + font-size: 1em !important; + } +} + +/* zh_CN: Enlarge dashboard widget 'Configure' link */ + +/* zn_CH: Enlarge font size, set font-size: normal */ + +/* Zn_CH: Distraction free writing. + * More beautiful font for "Just write." + * Larger text for HTML/Visual mode. + */ + +/* zh_CN: Enlarge font-size. */ + +/* de_DE: Text needs more space for translation */ + +.locale-de-de { + .inline-edit-row fieldset label span { + &.title { + width: 7em; + /* default 5em */ + } + &.input-text-wrap { + margin-left: 7em; + /* default 5em */ + } + } + #customize-header-actions { + .button { + padding: 0 5px 1px; + /* default 0 10px 1px */ + } + .spinner { + margin: 16px 3px 0; + /* default 16px 4px 0 5px */ + } + } +} + +/* ru_RU: Text needs more room to breathe. */ + +.locale-ru-ru { + .inline-edit-row fieldset label span { + &.title { + width: 8em; + /* default 5em */ + } + &.input-text-wrap { + margin-left: 8em; + /* default 5em */ + } + } + &.post-php .tagsdiv .newtag, &.post-new-php .tagsdiv .newtag { + width: 165px; + /* default 180px - 15px */ + } + &.press-this .posting { + margin-right: 277px; + /* default 252px + 25px */ + } + .press-this-sidebar { + width: 265px; + /* default 240px + 25px */ + } + #customize-header-actions { + .button { + padding: 0 5px 1px; + /* default 0 10px 1px */ + } + .spinner { + margin: 16px 3px 0; + /* default 16px 4px 0 5px */ + } + } +} + +/* lt_LT: QuickEdit */ + +.locale-lt-lt .inline-edit-row fieldset label span { + &.title { + width: 8em; + } + &.input-text-wrap { + margin-left: 8em; + } +} diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css deleted file mode 100644 index 6feaa22..0000000 --- a/src/wp-admin/css/list-tables.css +++ /dev/null @@ -1,1875 +0,0 @@ -/* List table styles */ -.post-com-count-wrapper { - min-width: 22px; -} - -.post-com-count { - background: none; - height: 1.3em; - line-height: 1.1em; - display: block; - text-decoration: none; - padding: 0 0 6px; - cursor: pointer; - background-position: center -80px; - background-repeat: no-repeat; - color: #fff; -} - -.post-com-count:after { /* draw bubble connector using CSS! */ - content: ""; - display: block; - width: 0; - height: 0; - margin-left: 8px; - border-top: 5px solid #bbb; - border-right: 5px solid transparent; -} - -.post-com-count span { - font-size: 11px; - font-weight: 600; - height: 1.4em; - line-height: 1.4em; - min-width: 0.7em; - padding: 0 6px; - display: inline-block; - -webkit-border-radius: 5px; - border-radius: 5px; - background-color: #bbb; - color: #fff; -} - -.post-com-count:hover { - background-position: center -3px; -} - -.post-com-count:hover span { - background-color: #2ea2cc; -} - -.post-com-count:hover:after { - border-top: 5px solid #2ea2cc; -} - -strong .post-com-count { - background-position: center -55px; -} - -strong .post-com-count span { - background-color: #0074a2; -} - -strong .post-com-count:after { - border-top: 5px solid #0074a2; -} - -.column-response .post-com-count { - float: left; - margin-right: 5px; - text-align: center; -} - -.response-links { - float: left; -} - -/* comments */ - -.commentlist li { - padding: 1em 1em .2em; - margin: 0; - border-bottom: 1px solid #ccc; -} - -.commentlist li li { - border-bottom: 0; - padding: 0; -} - -.commentlist p { - padding: 0; - margin: 0 0 .8em; -} - -#submitted-on, -.submitted-on { - color: #777; -} - -/* reply to comments */ -#replyrow td { - padding: 2px; -} - -#replysubmit { - margin: 0; - padding: 0 5px 3px; - text-align: center; -} - -#replysubmit .spinner { - padding: 2px 0 0; - vertical-align: top; - float: right; -} - -#replysubmit .button { - margin-right: 5px; -} - -#replysubmit .error { - color: red; - line-height: 21px; - text-align: center; -} - -#replyrow h5 { - margin: .2em 0 0; - padding: 0 5px; - line-height: 1.4em; - font-size: 1em; -} - -#edithead .inside { - float: left; - padding: 3px 0 2px 5px; - margin: 0; - text-align: center; -} - -#edithead .inside input { - width: 180px; -} - -#edithead label { - padding: 2px 0; -} - -#replycontainer { - padding: 5px; -} - -#replycontent { - height: 120px; - -webkit-box-shadow: none; - box-shadow: none; -} - -#replyerror { - border-color: #ddd; - background-color: #f9f9f9; -} - -/* @todo: is this used? */ -.commentlist .avatar { - vertical-align: text-top; -} - -#the-comment-list .attachment-80x60 { - padding: 4px 8px; -} - -#the-comment-list tr.undo, -#the-comment-list div.undo { - background-color: #f4f4f4; -} - -#the-comment-list .unapproved th, -#the-comment-list .unapproved td { - background-color: #fef7f1; -} - -#the-comment-list .unapproved th.check-column { - border-left: 4px solid #d54e21; -} - -#the-comment-list .unapproved th.check-column input { - margin-left: 4px; -} - -#the-comment-list .approve a { - color: #006505; -} - -#the-comment-list .unapprove a { - color: #d98500; -} - -#the-comment-list th, -#the-comment-list td { - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); -} - -#the-comment-list tr:last-child th, -#the-comment-list tr:last-child td { - -webkit-box-shadow: none; - box-shadow: none; -} - -#the-comment-list tr.unapproved + tr.approved th, -#the-comment-list tr.unapproved + tr.approved td { - border-top: 1px solid rgba(0, 0, 0, 0.03); -} - -/* table vim shortcuts */ -.vim-current, -.vim-current th, -.vim-current td { - background-color: #e4f2fd !important; -} - -th .comment-grey-bubble { - height: 16px; - width: 16px; -} - -th .comment-grey-bubble:before { - content: '\f101'; - font: normal 20px/.5 'dashicons'; - speak: none; - display: inline-block; - padding: 0; - top: 4px; - left: -4px; - position: relative; - vertical-align: top; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; - color: #444; -} - -/*------------------------------------------------------------------------------ - 10.0 - List Posts (/Pages/etc) -------------------------------------------------------------------------------*/ - -table.fixed { - table-layout: fixed; -} - -.fixed .column-rating, -.fixed .column-visible { - width: 8%; -} - -.fixed .column-posts, -.fixed .column-date, -.fixed .column-parent, -.fixed .column-links, -.fixed .column-author, -.fixed .column-format { - width: 10%; -} - -.fixed .column-posts { - width: 74px; -} - -.fixed .column-comment .comment-author { - display: none; -} - -.fixed .column-response, -.fixed .column-categories, -.fixed .column-tags, -.fixed .column-rel, -.fixed .column-role { - width: 15%; -} - -.fixed .column-slug { - width: 25%; -} - -.fixed .column-locations { - width: 35%; -} - -.fixed .column-comments { - width: 4em; - padding: 8px 0; - text-align: left; -} - -.fixed .column-comments .vers { - padding-left: 3px; -} - -.fixed .column-comments a { - float: left; -} - -.fixed .column-icon { - width: 80px; -} - -/* @todo: pick a consistent list table selector */ -.wp-list-table a { - -webkit-transition: none; - transition: none; -} - -#the-list tr:last-child td, -#the-list tr:last-child th { - border-bottom: none !important; - -webkit-box-shadow: none; - box-shadow: none; -} - -#comments-form .fixed .column-author { - width: 20%; -} - -#commentsdiv.postbox .inside { - margin: 0; - padding: 0; -} - -#commentsdiv .inside .row-actions { - line-height:18px; -} - -#commentsdiv .inside .column-author { - width: 25%; -} - -#commentsdiv .column-comment p { - margin: 0.6em 0; - padding: 0; -} - -#commentsdiv #replyrow td { - padding: 0; -} - -#commentsdiv p { - padding: 8px 10px; - margin: 0; -} - -#commentsdiv .comments-box { - border: 0 none; -} - -#commentsdiv .comments-box thead th { - background: transparent; - padding: 0 7px 4px; - font-style: italic; -} - -#commentsdiv .comments-box tr:last-child td { - border-bottom: 0 none; -} - -#commentsdiv .spinner { - padding-left: 5px; -} - -.sorting-indicator { - display: none; - width: 10px; - height: 4px; - margin-top: 8px; - margin-left: 7px; -} - -.sorting-indicator:before { - background: none; - content: '\f142'; - font: normal 20px/1 'dashicons'; - speak: none; - display: inline-block; - padding: 0; - top: -4px; - left: -8px; - color: #444; - line-height: 10px; - position: relative; - vertical-align: top; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; - color: #444; -} - -.column-comments .sorting-indicator:before { - top: 0; - left: -10px; -} - -th.sorted.asc .sorting-indicator:before, -th.desc:hover span.sorting-indicator:before { - content: '\f142'; -} - -th.sorted.desc .sorting-indicator:before, -th.asc:hover span.sorting-indicator:before { - content: '\f140'; -} - -tr.wp-locked .locked-indicator { - margin-left: 6px; - height: 20px; - width: 16px; -} - -tr.wp-locked .locked-indicator:before { - color: #888; - content: '\f160'; - display: inline-block; - float: left; - font: normal 20px/1 'dashicons'; - speak: none; - vertical-align: middle; - margin-left: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -tr.wp-locked .check-column label, -tr.wp-locked .check-column input[type="checkbox"], -tr.wp-locked .row-actions .inline, -tr.wp-locked .row-actions .trash { - display: none; -} - -tr .locked-info { - height: 0; - opacity: 0; -} - -tr.wp-locked .locked-info { - margin-top: 8px; - height: auto; - opacity: 1; -} - -.locked-text { - vertical-align: top; -} - -tr.locked-info, tr.wp-locked .locked-info { - -webkit-transition: height 1s, opacity 0.5s; - transition: height 1s, opacity 0.5s; -} - -.fixed .column-comments .sorting-indicator { - margin-top: 3px; -} - -#menu-locations-wrap .widefat { - width: 60%; -} - -.widefat th.sortable, -.widefat th.sorted { - padding: 0; -} - -th.sortable a, -th.sorted a { - display: block; - overflow: hidden; - padding: 7px 7px 8px 10px; -} - -th.manage-column a, -th.sortable a:hover, -th.sortable a:active, -th.sortable a:focus { - color: #333; -} - -th.sortable a:focus { - background: #e1e1e1; -} - -.fixed .column-comments.sortable a, -.fixed .column-comments.sorted a { - padding: 8px 0; -} - -th.sortable a span, -th.sorted a span { - float: left; - cursor: pointer; -} - -th.sorted.asc .sorting-indicator, -th.desc:hover span.sorting-indicator { - display: block; - background-position: 0 0; -} - -th.sorted.desc .sorting-indicator, -th.asc:hover span.sorting-indicator { - display: block; - background-position: -7px 0; -} - -/* Bulk Actions */ -.tablenav-pages a { - font-weight: 600; - margin-right: 1px; - padding: 0 2px; -} -.tablenav-pages .current-page { - padding-top: 0; - text-align: center; -} -.tablenav-pages .next-page { - margin-left: 2px; -} - -.tablenav a.button-secondary { - display: block; - margin: 3px 8px 0 0; -} - -.tablenav { - clear: both; - height: 30px; - margin: 6px 0 4px; - vertical-align: middle; -} - -.tablenav.themes { - max-width: 98%; -} - -.tablenav .tablenav-pages { - float: right; - display: block; - cursor: default; - height: 30px; - color: #555; - line-height: 30px; - font-size: 12px; -} - -.tablenav .no-pages, -.tablenav .one-page .pagination-links { - display: none; -} - -.tablenav .tablenav-pages a, -.tablenav-pages span.current { - text-decoration: none; - padding: 3px 6px; -} - -.tablenav .tablenav-pages a { - padding: 0 10px 3px; - background: #eee; - background: rgba( 0, 0, 0, 0.05 ); - font-size: 16px; - font-weight: normal; -} - -.tablenav .tablenav-pages a:hover, -.tablenav .tablenav-pages a:focus { - color: #fff; - background: #2ea2cc; -} - -.tablenav .tablenav-pages a.disabled, -.tablenav .tablenav-pages a.disabled:hover, -.tablenav .tablenav-pages a.disabled:focus, -.tablenav .tablenav-pages a.disabled:active { - color: #aaa; - background: #eee; - background: rgba( 0, 0, 0, 0.05 ); -} - -.tablenav .displaying-num { - margin-right: 2px; - color: #777; - font-size: 12px; - font-style: italic; -} - -.tablenav .actions { - overflow: hidden; - padding: 2px 8px 0 0; -} - -.wp-filter .actions { - display: inline-block; - vertical-align: middle; -} - -.tablenav .delete { - margin-right: 20px; -} - -/* @todo: unclear if the following tablenav rules are actually used. -classes exist in paginate_links() but not seen in list table output. */ -.tablenav .dots { - border-color: transparent; -} - -.tablenav .next, -.tablenav .prev { - border-color: transparent; - color: #0074a2; -} - -.tablenav .next:hover, -.tablenav .prev:hover { - border-color: transparent; - color: #2ea2cc; -} - -.tablenav .view-switch { - float: right; - margin: 5px 16px 0 8px; -} - -.wp-filter .view-switch { - display: inline-block; - vertical-align: middle; - padding: 14px 0; - margin: 0 20px 0 0; -} - -.view-switch a { - text-decoration: none; -} - -.view-switch > a { - display: inline-block; - width: 18px; - height: 18px; -} - -.view-switch > a:before { - color: #bbb; - display: inline-block; - float: left; - font: normal 20px/1 'dashicons'; - speak: none; - vertical-align: middle; - margin-left: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.view-switch > .view-list:before { - content: '\f163'; -} - -.view-switch a:hover:before { - color: #727272; -} - -.view-switch a.current:before { - color: #0074a2; -} - -.view-switch > a + a { - margin-left: 5px; -} - -.view-switch > .view-excerpt:before { - content: '\f164'; -} - -.view-switch > .view-grid:before { - content: '\f509'; -} - -.filter { - float: left; - margin: -5px 0 0 10px; -} - -.filter .subsubsub { - margin-left: -10px; - margin-top: 13px; -} -.screen-per-page { - width: 4em; -} - -#posts-filter .wp-filter { - margin-bottom: 0; -} - -#posts-filter fieldset { - float: left; - margin: 0 1.5ex 1em 0; - padding: 0; -} - -#posts-filter fieldset legend { - padding: 0 0 .2em 1px; -} - -p.pagenav { - margin: 0; - display: inline; -} - -.pagenav span { - font-weight: 600; - margin: 0 6px; -} - -.row-title { - font-size: 14px !important; - font-weight: 600; -} - -.column-comment .comment-author { - margin-bottom: 0.6em; -} - -.column-author img, -.column-username img, -.column-comment .comment-author img { - float: left; - margin-right: 10px; - margin-top: 1px; -} - -.row-actions { - color: #ddd; - font-size: 13px; - visibility: hidden; - padding: 2px 0 0; -} - -tr:hover .row-actions, -.mobile .row-actions, -.row-actions.visible, -div.comment-item:hover .row-actions { - visibility: visible; -} - -/* deprecated */ -.row-actions-visible { - padding: 2px 0 0; -} - - -/*------------------------------------------------------------------------------ - 10.1 - Inline Editing -------------------------------------------------------------------------------*/ - -/* -.quick-edit* is for Quick Edit -.bulk-edit* is for Bulk Edit -.inline-edit* is for everything -*/ - -/* Layout */ - -#wpbody-content .inline-edit-row fieldset { - font-size: 12px; - float: left; - margin: 0; - padding: 0; - width: 100%; -} - -tr.inline-edit-row td, -#wpbody-content .inline-edit-row fieldset .inline-edit-col { - padding: 0 0.5em; -} - -#wpbody-content .quick-edit-row-page fieldset.inline-edit-col-right .inline-edit-col { - border-width: 0 0 0 1px; - border-style: none none none solid; -} - -#wpbody-content .quick-edit-row-post .inline-edit-col-left { - width: 40%; -} - -#wpbody-content .quick-edit-row-post .inline-edit-col-right { - width: 39%; -} - -#wpbody-content .inline-edit-row-post .inline-edit-col-center { - width: 20%; -} - -#wpbody-content .quick-edit-row-page .inline-edit-col-left { - width: 50%; -} - -#wpbody-content .quick-edit-row-page .inline-edit-col-right, -#wpbody-content .bulk-edit-row-post .inline-edit-col-right { - width: 49%; -} - -#wpbody-content .bulk-edit-row .inline-edit-col-left { - width: 30%; -} - -#wpbody-content .bulk-edit-row-page .inline-edit-col-right { - width: 69%; -} - -#wpbody-content .bulk-edit-row .inline-edit-col-bottom { - float: right; - width: 69%; -} - -#wpbody-content .inline-edit-row-page .inline-edit-col-right { - margin-top: 27px; -} - -.inline-edit-row fieldset .inline-edit-group { - clear: both; -} - -.inline-edit-row fieldset .inline-edit-group:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.inline-edit-row p.submit { - clear: both; - padding: 0.5em; - margin: 0.5em 0 0; -} - -.inline-edit-row span.error { - line-height: 22px; - margin: 0 15px; - padding: 3px 5px; -} - -/* Positioning */ -.inline-edit-row h4 { - margin: .2em 0; - padding: 0; - line-height: 23px; -} -.inline-edit-row fieldset span.title, -.inline-edit-row fieldset span.checkbox-title { - margin: 0; - padding: 0; - line-height: 27px; -} - -.inline-edit-row fieldset label, -.inline-edit-row fieldset span.inline-edit-categories-label { - display: block; - margin: .2em 0; -} - -.inline-edit-row fieldset label.inline-edit-tags { - margin-top: 0; -} - -.inline-edit-row fieldset label.inline-edit-tags span.title { - margin: .2em 0; - width: auto; -} - -.inline-edit-row fieldset label span.title { - display: block; - float: left; - width: 5em; -} - -.inline-edit-row fieldset label span.input-text-wrap { - display: block; - margin-left: 5em; -} - -.quick-edit-row-post fieldset.inline-edit-col-right label span.title { - width: auto; - padding-right: 0.5em; -} - -.inline-edit-row .input-text-wrap input[type=text] { - width: 100%; -} - -.inline-edit-row fieldset label input[type=checkbox] { - vertical-align: text-bottom; -} - -.inline-edit-row fieldset label textarea { - width: 100%; - height: 4em; -} - -#wpbody-content .bulk-edit-row fieldset .inline-edit-group label { - max-width: 50%; -} - -#wpbody-content .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child { - margin-right: 0.5em -} - -.inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input { - width: 6em; -} - -.inline-edit-save .spinner { - padding: 4px 10px 0; - vertical-align: top; - float: right; -} - -/* Styling */ -.inline-edit-row h4 { - text-transform: uppercase; -} - -.inline-edit-row fieldset span.title, -.inline-edit-row fieldset span.checkbox-title { - font-style: italic; - line-height: 1.8em; -} - -/* Specific Elements */ -.inline-edit-row fieldset .inline-edit-date { - float: left; -} - -.inline-edit-row fieldset input[name=jj], -.inline-edit-row fieldset input[name=hh], -.inline-edit-row fieldset input[name=mn] { - font-size: 12px; - width: 2.1em; -} - -.inline-edit-row fieldset input[name=aa] { - font-size: 12px; - width: 3.5em; -} - -.inline-edit-row fieldset label input.inline-edit-password-input { - width: 8em; -} - -ul.cat-checklist { - height: 12em; - border: solid 1px #ddd; - overflow-y: scroll; - padding: 0 5px; - margin: 0; - background-color: #fff; -} - -#bulk-titles { - display: block; - height: 12em; - border: 1px solid #ddd; - overflow-y: scroll; - padding: 0 5px; - margin: 0 0 5px; -} - -.inline-edit-row fieldset ul.cat-checklist li, -.inline-edit-row fieldset ul.cat-checklist input { - margin: 0; - position: relative; /* RTL fix, #WP27629 */ -} - -.inline-edit-row fieldset ul.cat-checklist label, -.inline-edit-row #bulk-titles div { - font-style: normal; - font-size: 11px; -} - -.inline-edit-row fieldset label input.inline-edit-menu-order-input { - width: 3em; -} - -.inline-edit-row fieldset label input.inline-edit-slug-input { - width: 75%; -} - -.inline-edit-row #post_parent, -.inline-edit-row select[name="page_template"] { - max-width: 80%; -} - -.ie8 .inline-edit-row #post_parent, -.ie8 .inline-edit-row select[name="page_template"] { - width: 250px; -} - -.quick-edit-row-post fieldset label.inline-edit-status { - float: left; -} - -#bulk-titles { - line-height: 140%; -} -#bulk-titles div { - margin: 0.2em 0.3em; -} - -#bulk-titles div a { - cursor: pointer; - display: block; - float: left; - height: 18px; - margin: 0 3px 0 -2px; - overflow: hidden; - position: relative; - width: 20px; -} - -#bulk-titles div a:before { - position: relative; - top: -3px; -} - -/*------------------------------------------------------------------------------ - 17.0 - Plugins -------------------------------------------------------------------------------*/ - -.plugins tbody th.check-column, -.plugins tbody { - padding: 8px 0 0 2px; -} - -.plugins tbody th.check-column input[type=checkbox] { - margin-top: 4px; -} - -#update-plugins-table tbody td p { - margin-top: 0; -} - -#update-plugins-table tbody td p strong { - font-size: 14px; -} - -.plugins thead th.check-column, -.plugins tfoot th.check-column, -.plugins .inactive th.check-column { - padding-left: 6px; -} - -#update-plugins-table thead th.check-column, -#update-plugins-table tfoot th.check-column { - padding-top: 11px; -} - -.plugins, -.plugins th, -.plugins td { - color: #000; -} - -.plugins tr { - background: #fff; -} - -.plugins p { - margin: 0 4px; - padding: 0; -} - -.plugins .desc p { - margin: 0 0 8px; -} - -.plugins td.desc { - line-height: 1.5em; -} - -.plugins .desc ul, -.plugins .desc ol { - margin: 0 0 0 2em; -} - -.plugins .desc ul { - list-style-type: disc; -} - -.plugins .row-actions { - font-size: 13px; - padding: 0; -} - -.plugins .inactive td, -.plugins .inactive th, -.plugins .active td, -.plugins .active th { - padding: 10px 9px; -} - -.plugins .active td, -.plugins .active th { - background-color: #f7fcfe; -} - -.plugins .update th, -.plugins .update td { - border-bottom: 0; -} - -.plugin-update-tr td { - border-top: 0; -} - -.plugins .inactive td, -.plugins .inactive th, -.plugins .active td, -.plugins .active th, -.plugin-install #the-list td, -.upgrade .plugins td, -.upgrade .plugins th { - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); -} - -.plugins tr.active.plugin-update-tr + tr.inactive th, -.plugins tr.active.plugin-update-tr + tr.inactive td, -.plugins tr.active + tr.inactive th, -.plugins tr.active + tr.inactive td { - border-top: 1px solid rgba(0,0,0,0.03); - -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), inset 0 -1px 0 #e1e1e1; - box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), inset 0 -1px 0 #e1e1e1; -} - -.plugins .update td, -.plugins .update th, -.upgrade .plugins tr:last-of-type td, -.upgrade .plugins tr:last-of-type th, -.plugins tr.active + tr.inactive.update th, -.plugins tr.active + tr.inactive.update td { - -webkit-box-shadow: none; - box-shadow: none; -} - -.plugins .active.update td, -.plugins .active.update th, -tr.active.update + tr.plugin-update-tr .plugin-update { - background-color: #fef7f1; -} - -.plugins .active th.check-column { - border-left: 4px solid #2ea2cc; -} - -.plugins .active.update th.check-column, -.plugins .active.update + .plugin-update-tr .plugin-update { - border-left: 4px solid #d54e21; -} - -#wpbody-content .plugins .plugin-title, -#wpbody-content .plugins .theme-title { - padding-right: 12px; - white-space:nowrap; -} - -.plugins .inactive .plugin-title strong { - font-weight: 400; -} - -.plugins .second, -.plugins .row-actions { - padding: 0 0 5px; -} - -.plugins .update .second, -.plugins .update .row-actions { - padding-bottom: 0; -} - -.plugins-php .widefat tfoot th, -.plugins-php .widefat tfoot td { - border-top-style: solid; - border-top-width: 1px; -} - -.plugin-update-tr .update-message { - font-size: 13px; - font-weight: normal; - margin: 6px 12px 12px; - padding: 6px 12px; - margin: 0 10px 8px 31px; - background-color: #f7f7f7; - background-color: rgba(0,0,0,0.03); -} - -.plugin-update-tr .update-message:before { - color: #d54e21; - content: '\f463'; - display: inline-block; - font: normal 20px/1 'dashicons'; - speak: none; - margin: 0 8px 0 -2px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - vertical-align: top; -} - -.plugins .plugin-update { - padding: 0; - border: none; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); -} - -/* update notices for active plugins */ -tr.active + tr.plugin-update-tr .plugin-update { - background-color: #f7fcfe; -} - -tr.active + tr.plugin-update-tr .plugin-update .update-message { - background-color: #fcf3ef; -} - -.plugin-install-php h3 { - clear: both; -} - -.plugin-install-php h4 { - margin: 2.5em 0 8px; -} - -.plugin-install-php .wp-filter { - margin-bottom: 0; -} - -/* Plugin card table view */ -.plugin-group { - overflow: hidden; /* clearfix */ - margin-top: 1.5em; -} - -.plugin-group h3 { - margin-top: 0; -} - -.plugin-card { - float: left; - margin: 0 8px 16px; - width: 48.5%; - width: -webkit-calc( 50% - 8px ); - width: calc( 50% - 8px ); - background-color: #fff; - border: 1px solid #dedede; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.plugin-card:nth-child(odd) { - clear: both; - margin-left: 0; -} - -.plugin-card:nth-child(even) { - margin-right: 0; -} - -@media screen and ( min-width: 1600px ) { - .plugin-card { - width: 30%; - width: -webkit-calc( 33.1% - 8px ); - width: calc( 33.1% - 8px ); - } - - .plugin-card:nth-child(odd) { - clear: none; - margin-left: 8px; - } - - .plugin-card:nth-child(even) { - margin-right: 8px; - } - - .plugin-card:nth-child(3n+1) { - clear: both; - margin-left: 0; - } - - .plugin-card:nth-child(3n) { - margin-right: 0; - } -} - -@media screen and ( max-width: 782px ) { - .plugin-card { - margin-left: 0; - margin-right: 0; - width: 100%; - } -} - -.plugin-card-top { - position: relative; - padding: 20px 20px 10px; - min-height: 135px; -} - -div.action-links, -.plugin-action-buttons { - margin: 0; /* Override existing margins */ -} - -.plugin-card h4 { - margin: 0 0 12px; - font-size: 18px; - line-height: 1.3; -} - -.plugin-card .name, -.plugin-card .desc { - margin-left: 148px; /* icon + margin */ - margin-right: 120px; /* action links */ -} - -.plugin-card .action-links { - position: absolute; - top: 20px; - right: 20px; - width: 120px; -} - -.plugin-action-buttons { - clear: right; - float: right; - margin-left: 2em; - margin-bottom: 1em; - text-align: right; -} - -.plugin-action-buttons li { - margin-bottom: 10px; -} - -.plugin-card-bottom { - clear: both; - padding: 12px 20px; - background-color: #fafafa; - border-top: 1px solid #dedede; - overflow: hidden; -} - -.plugin-card-bottom .star-rating { - display: inline; -} - -.plugin-card .column-rating { - line-height: 23px; -} - -.plugin-card .column-rating, -.plugin-card .column-updated { - margin-bottom: 4px; -} - -.plugin-card .column-rating, -.plugin-card .column-downloaded { - float: left; - clear: left; - max-width: 180px; -} - -.plugin-card .column-updated, -.plugin-card .column-compatibility { - text-align: right; - float: right; - clear: right; - width: 65%; - width: -webkit-calc( 100% - 180px ); - width: calc( 100% - 180px ); -} - -.plugin-card .column-compatibility span:before { - font: normal 20px/.5 'dashicons'; - speak: none; - display: inline-block; - padding: 0; - top: 4px; - left: -2px; - position: relative; - vertical-align: top; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; - color: #444; -} - -.plugin-card .compatibility-incompatible:before { - content: '\f158'; -} - -.plugin-card .compatibility-compatible:before { - content: '\f147'; -} - -.plugin-icon { - position: absolute; - top: 20px; - left: 20px; - width: 128px; - height: 128px; - margin: 0 20px 20px 0; -} - -.plugin-icon img { - width: 128px; - height: 128px; -} - -.no-plugin-results { - color: #999; - font-size: 18px; - font-style: normal; - margin: 0; - padding: 100px 0 0; - text-align: center; -} - -/* ms */ -/* Background Color for Site Status */ -.wp-list-table .site-deleted { - background: #ff8573; -} -.wp-list-table .site-spammed { - background: #faafaa; -} -.wp-list-table .site-archived { - background: #ffebe8; -} -.wp-list-table .site-mature { - background: #fecac2; -} - -/* =Media Queries --------------------------------------------------------------- */ - -@media screen and ( max-width: 1100px ) and ( min-width: 782px ), ( max-width: 480px ) { - .plugin-card .action-links { - position: static; - margin-left: 148px; - width: auto; - } - - .plugin-action-buttons { - float: none; - margin: 1em 0 0; - text-align: left; - } - - .plugin-action-buttons li { - display: inline-block; - vertical-align: middle; - } - - .plugin-action-buttons li .button { - margin-right: 20px; - } - - .plugin-card .name, - .plugin-card .desc { - margin-right: 0; - } - - .plugin-card .desc p:first-of-type { - margin-top: 0; - } -} - -@media screen and ( max-width: 782px ) { - /* WP List Table Options & Filters */ - .tablenav { - height: auto; - } - - .tablenav.top { - margin: 20px 0 5px 0; - } - - .tablenav.bottom { - position: relative; - margin-top: 15px; - } - - .tablenav br { - display: none; - } - - .tablenav br.clear { - display: block; - } - - .tablenav.top .actions, - .tablenav .view-switch { - display: none; - } - - /* Pagination */ - .tablenav.top .displaying-num { - display: none; - } - - .tablenav.bottom .displaying-num { - position: absolute; - right: 0; - top: 10px; - font-size: 14px; - } - - .tablenav-pages { - width: 100%; - text-align: center; - margin: 0 0 25px; - } - - .tablenav.bottom .tablenav-pages { - margin-top: 25px; - } - - .tablenav.top .tablenav-pages.one-page { - display: none; - } - - .tablenav.bottom .tablenav-pages.one-page { - margin: 15px 0 0 0; - height: 0; - } - - .tablenav-pages .pagination-links .paging-input { - font-size: 18px; - } - - .tablenav-pages .pagination-links a { - padding: 8px 20px 11px; - font-size: 18px; - background: rgba(0, 0, 0, 0.05); - } - - .tablenav-pages .pagination-links .current-page { - padding: 10px; - font-size: 14px; - } - - /* WP List Table Adjustments: General */ - .form-wrap > p { - display: none; - } - - .comment-count { - font-size: 14px; - } - - /* Columns to hide */ - .fixed .column-date, - .fixed .column-author, - .column-categories, - .column-tags, - .tags .column-description, - .media .column-parent, - .users .column-email, - .users .column-name, - .sites .column-registered, - .sites .column-users { - display: none; - } - - .fixed .column-comment .comment-author { - display: block; - } - - /* Posts */ - .column-title { - width: 85%; - } - - .fixed .column-comments, .widefat .check-column { - width: 35px - } - - .widefat thead .check-column, .widefat tfoot .check-column { - padding: 10px 0 10px; - } - - .widefat * { - word-wrap: normal; - } - - /* Quick Edit and Bulk Edit */ - #wpbody-content .quick-edit-row-post .inline-edit-col-left, - #wpbody-content .quick-edit-row-post .inline-edit-col-right, - #wpbody-content .inline-edit-row-post .inline-edit-col-center, - #wpbody-content .quick-edit-row-page .inline-edit-col-left, - #wpbody-content .quick-edit-row-page .inline-edit-col-right, - #wpbody-content .bulk-edit-row-post .inline-edit-col-right, - #wpbody-content .bulk-edit-row .inline-edit-col-left, - #wpbody-content .bulk-edit-row-page .inline-edit-col-right, - #wpbody-content .bulk-edit-row .inline-edit-col-bottom { - float: none; - width: 100%; - } - - #wpbody-content .quick-edit-row fieldset .inline-edit-col label, - #wpbody-content .quick-edit-row fieldset .inline-edit-group label, - #wpbody-content .bulk-edit-row fieldset .inline-edit-col label, - #wpbody-content .bulk-edit-row fieldset .inline-edit-group label { - max-width: none; - float: none; - margin-bottom: 5px; - } - - #wpbody .bulk-edit-row fieldset select { - display: block; - width: 100%; - max-width: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - .inline-edit-row fieldset ul.cat-checklist label, - .inline-edit-row #bulk-titles div { - font-size: 16px; - } - - .inline-edit-row fieldset label span.title { - float: none; - } - - .inline-edit-row fieldset label.inline-edit-tags { - padding: 0 0.5em; - } - - .inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { - padding: 0; - } - - .inline-edit-row fieldset label span.input-text-wrap { - margin-left: 0; - } - - .inline-edit-row fieldset input[name=jj], - .inline-edit-row fieldset input[name=hh], - .inline-edit-row fieldset input[name=mn] { - width: 3em; - } - - .inline-edit-row fieldset input[name=aa] { - width: 4.5em; - } - - #bulk-titles div { - margin: 0.8em 0.3em; - } - - #bulk-titles div a { - height: 22px; - } - - /* Taxonomies */ - .tags .column-posts { - width: 74px; - } - - .tags .column-slug { - width: 30%; - } - - /* Comments */ - .comments .column-response { - width: 35%; - } - - /* Users */ - .users .column-role { - width: 35%; - } - - /* Network admin sites */ - .sites .column-blogname { - width: 55%; - } - - /* Updates */ - #wpbody-content #update-themes-table .plugin-title { - width: auto; - } - - /* Links */ - .link-manager-php #posts-filter { - margin-top: 25px; - } - - .link-manager-php .tablenav.bottom { - overflow: hidden; - } - - /* Plugin/Theme Management Page */ - .wp-list-table.plugins { - position: relative; - margin-top: 35px; - margin-bottom: 50px; - } - - .wp-list-table.plugins thead .column-description, - #wpbody-content .wp-list-table.plugins tfoot .column-description, - .wp-list-table.plugins th#description { - display: none; - } - - #wpbody-content .wp-list-table.plugins, - #wpbody-content .wp-list-table.plugins thead, - #wpbody-content .wp-list-table.plugins tbody, - #wpbody-content .wp-list-table.plugins tr, - #wpbody-content .wp-list-table.plugins .column-description, - #wpbody-content .wp-list-table.plugins .plugin-title, - #wpbody-content .wp-list-table.plugins .theme-title, - #wpbody-content .wp-list-table.plugins .plugin-update, - #wpbody-content .wp-list-table.plugins .manage-column.column-name { - display: block; - width: auto; - } - - .wp-list-table.plugins thead, - .wp-list-table.plugins tfoot { - position: absolute; - top: -35px; - left: 0; - right: 0; - width: auto; - height: 35px; - } - - .wp-list-table.plugins tfoot { - bottom: -35px; - top: auto; - } - - .active, .inactive { - padding-top: 0; - } - - .wp-list-table.plugins .plugin-title, - .wp-list-table.plugins .theme-title { - padding-top: 13px; - padding-bottom: 4px; - } - - .plugins tr.active + tr.inactive th.check-column, - .plugins tr.active + tr.inactive td, - .wp-list-table.plugins .plugin-title, - .wp-list-table.plugins .theme-title, - .wp-list-table.plugins tbody th { - -webkit-box-shadow: none; - box-shadow: none; - } - - .plugins tbody { - padding: 1px 0 0; - } - - .plugins tr.active + tr.inactive td.column-description { - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); - } - - .plugins tr.active + tr.inactive th.check-column, - .plugins tr.active + tr.inactive td { - border-top: none; - } - - .wp-list-table.plugins .column-description { - padding-top: 0; - } - - .wp-list-table.plugins .manage-column.column-name, - .wp-list-table.plugins .column-description, - .wp-list-table.plugins .plugin-title, - .wp-list-table.plugins .theme-title { - padding-right: 12px; - padding-left: 46px; - } - - .wp-list-table.plugins tr { - position: relative; - } - - .wp-list-table.plugins th.check-column, - .wp-list-table.plugins tr.update th.check-column { - position: absolute; - height: auto; - top: 0; - bottom: 0; - left: 0; - padding-left: 2px; - padding-top: 18px; - } - - .wp-list-table.plugins thead th.check-column, - .wp-list-table.plugins tfoot th.check-column { - padding-left: 3px; - padding-top: 11px; - background: none; - } - - .widefat tbody th.check-column input[type="checkbox"] { - margin-top: -3px; - margin-left: 8px; - } - - .wp-list-table.plugins .active .check-column input, - .wp-list-table.plugins .update .check-column input { - margin-left: 5px; - } - - .wp-list-table.plugins thead .check-column input, - .wp-list-table.plugins tfoot .check-column input { - margin-top: -6px; - } - - .wp-list-table.plugins .active th.check-column { - background: none; - } - - .wp-list-table.plugins .plugin-title strong, - .wp-list-table.plugins .theme-title strong { - font-size: 1.4em; - line-height: 1.6em; - } - - /* Add New plugins page */ - table.plugin-install .column-name, - table.plugin-install .column-version, - table.plugin-install .column-rating, - table.plugin-install .column-description { - display: block; - width: auto; - } - - table.plugin-install th.column-name, - table.plugin-install th.column-version, - table.plugin-install th.column-rating, - table.plugin-install th.column-description { - display: none; - } - - table.plugin-install td.column-name strong { - font-size: 1.4em; - line-height: 1.6em; - } - - table.plugin-install #the-list td { - -webkit-box-shadow: none; - box-shadow: none; - } - - table.plugin-install #the-list tr { - display: block; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - } -} diff --git a/src/wp-admin/css/list-tables.scss b/src/wp-admin/css/list-tables.scss new file mode 100644 index 0000000..c4b7055 --- /dev/null +++ b/src/wp-admin/css/list-tables.scss @@ -0,0 +1,1869 @@ +/* List table styles */ + +.post-com-count-wrapper { + min-width: 22px; +} + +.post-com-count { + background: none; + height: 1.3em; + line-height: 1.1em; + display: block; + text-decoration: none; + padding: 0 0 6px; + cursor: pointer; + background-position: center -80px; + background-repeat: no-repeat; + color: #fff; + &:after { + /* draw bubble connector using CSS! */ + content: ""; + display: block; + width: 0; + height: 0; + margin-left: 8px; + border-top: 5px solid #bbb; + border-right: 5px solid transparent; + } + span { + font-size: 11px; + font-weight: 600; + height: 1.4em; + line-height: 1.4em; + min-width: 0.7em; + padding: 0 6px; + display: inline-block; + -webkit-border-radius: 5px; + border-radius: 5px; + background-color: #bbb; + color: #fff; + } + &:hover { + background-position: center -3px; + span { + background-color: #2ea2cc; + } + &:after { + border-top: 5px solid #2ea2cc; + } + } +} + +strong .post-com-count { + background-position: center -55px; + span { + background-color: #0074a2; + } + &:after { + border-top: 5px solid #0074a2; + } +} + +.column-response .post-com-count { + float: left; + margin-right: 5px; + text-align: center; +} + +.response-links { + float: left; +} + +/* comments */ + +.commentlist { + li { + padding: 1em 1em .2em; + margin: 0; + border-bottom: 1px solid #ccc; + li { + border-bottom: 0; + padding: 0; + } + } + p { + padding: 0; + margin: 0 0 .8em; + } +} + +#submitted-on, .submitted-on { + color: #777; +} + +/* reply to comments */ + +#replyrow td { + padding: 2px; +} + +#replysubmit { + margin: 0; + padding: 0 5px 3px; + text-align: center; + .spinner { + padding: 2px 0 0; + vertical-align: top; + float: right; + } + .button { + margin-right: 5px; + } + .error { + color: red; + line-height: 21px; + text-align: center; + } +} + +#replyrow h5 { + margin: .2em 0 0; + padding: 0 5px; + line-height: 1.4em; + font-size: 1em; +} + +#edithead { + .inside { + float: left; + padding: 3px 0 2px 5px; + margin: 0; + text-align: center; + input { + width: 180px; + } + } + label { + padding: 2px 0; + } +} + +#replycontainer { + padding: 5px; +} + +#replycontent { + height: 120px; + -webkit-box-shadow: none; + box-shadow: none; +} + +#replyerror { + border-color: #ddd; + background-color: #f9f9f9; +} + +/* @todo: is this used? */ + +.commentlist .avatar { + vertical-align: text-top; +} + +#the-comment-list { + .attachment-80x60 { + padding: 4px 8px; + } + tr.undo, div.undo { + background-color: #f4f4f4; + } + .unapproved { + th, td { + background-color: #fef7f1; + } + th.check-column { + border-left: 4px solid #d54e21; + input { + margin-left: 4px; + } + } + } + .approve a { + color: #006505; + } + .unapprove a { + color: #d98500; + } + th, td { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + tr { + &:last-child { + th, td { + -webkit-box-shadow: none; + box-shadow: none; + } + } + &.unapproved + tr.approved { + th, td { + border-top: 1px solid rgba(0, 0, 0, 0.03); + } + } + } +} + +/* table vim shortcuts */ + +.vim-current { + background-color: #e4f2fd !important; + th, td { + background-color: #e4f2fd !important; + } +} + +th .comment-grey-bubble { + height: 16px; + width: 16px; + &:before { + content: '\f101'; + font: normal 20px/.5 'dashicons'; + speak: none; + display: inline-block; + padding: 0; + top: 4px; + left: -4px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #444; + } +} + +/*------------------------------------------------------------------------------ + 10.0 - List Posts (/Pages/etc) +------------------------------------------------------------------------------*/ + +table.fixed { + table-layout: fixed; +} + +.fixed { + .column-rating, .column-visible { + width: 8%; + } + .column-posts, .column-date, .column-parent, .column-links, .column-author, .column-format { + width: 10%; + } + .column-posts { + width: 74px; + } + .column-comment .comment-author { + display: none; + } + .column-response, .column-categories, .column-tags, .column-rel, .column-role { + width: 15%; + } + .column-slug { + width: 25%; + } + .column-locations { + width: 35%; + } + .column-comments { + width: 4em; + padding: 8px 0; + text-align: left; + .vers { + padding-left: 3px; + } + a { + float: left; + } + } + .column-icon { + width: 80px; + } +} + +/* @todo: pick a consistent list table selector */ + +.wp-list-table a { + -webkit-transition: none; + transition: none; +} + +#the-list tr:last-child { + td, th { + border-bottom: none !important; + -webkit-box-shadow: none; + box-shadow: none; + } +} + +#comments-form .fixed .column-author { + width: 20%; +} + +#commentsdiv { + &.postbox .inside { + margin: 0; + padding: 0; + } + .inside { + .row-actions { + line-height: 18px; + } + .column-author { + width: 25%; + } + } + .column-comment p { + margin: 0.6em 0; + padding: 0; + } + #replyrow td { + padding: 0; + } + p { + padding: 8px 10px; + margin: 0; + } + .comments-box { + border: 0 none; + thead th { + background: transparent; + padding: 0 7px 4px; + font-style: italic; + } + tr:last-child td { + border-bottom: 0 none; + } + } + .spinner { + padding-left: 5px; + } +} + +.sorting-indicator { + display: none; + width: 10px; + height: 4px; + margin-top: 8px; + margin-left: 7px; + &:before { + background: none; + content: '\f142'; + font: normal 20px/1 'dashicons'; + speak: none; + display: inline-block; + padding: 0; + top: -4px; + left: -8px; + color: #444; + line-height: 10px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #444; + } +} + +.column-comments .sorting-indicator:before { + top: 0; + left: -10px; +} + +th { + &.sorted.asc .sorting-indicator:before, &.desc:hover span.sorting-indicator:before { + content: '\f142'; + } + &.sorted.desc .sorting-indicator:before, &.asc:hover span.sorting-indicator:before { + content: '\f140'; + } +} + +tr { + &.wp-locked { + .locked-indicator { + margin-left: 6px; + height: 20px; + width: 16px; + &:before { + color: #888; + content: '\f160'; + display: inline-block; + float: left; + font: normal 20px/1 'dashicons'; + speak: none; + vertical-align: middle; + margin-left: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + .check-column { + label, input[type="checkbox"] { + display: none; + } + } + .row-actions { + .inline, .trash { + display: none; + } + } + } + .locked-info { + height: 0; + opacity: 0; + } + &.wp-locked .locked-info { + margin-top: 8px; + height: auto; + opacity: 1; + } +} + +.locked-text { + vertical-align: top; +} + +tr { + &.locked-info, &.wp-locked .locked-info { + -webkit-transition: height 1s, opacity 0.5s; + transition: height 1s, opacity 0.5s; + } +} + +.fixed .column-comments .sorting-indicator { + margin-top: 3px; +} + +#menu-locations-wrap .widefat { + width: 60%; +} + +.widefat th { + &.sortable, &.sorted { + padding: 0; + } +} + +th { + &.sortable a, &.sorted a { + display: block; + overflow: hidden; + padding: 7px 7px 8px 10px; + } + &.manage-column a { + color: #333; + } + &.sortable a { + &:hover, &:active { + color: #333; + } + &:focus { + color: #333; + background: #e1e1e1; + } + } +} + +.fixed .column-comments { + &.sortable a, &.sorted a { + padding: 8px 0; + } +} + +th { + &.sortable a span { + float: left; + cursor: pointer; + } + &.sorted { + a span { + float: left; + cursor: pointer; + } + &.asc .sorting-indicator { + display: block; + background-position: 0 0; + } + } + &.desc:hover span.sorting-indicator { + display: block; + background-position: 0 0; + } + &.sorted.desc .sorting-indicator, &.asc:hover span.sorting-indicator { + display: block; + background-position: -7px 0; + } +} + +/* Bulk Actions */ + +.tablenav-pages { + a { + font-weight: 600; + margin-right: 1px; + padding: 0 2px; + } + .current-page { + padding-top: 0; + text-align: center; + } + .next-page { + margin-left: 2px; + } +} + +.tablenav { + a.button-secondary { + display: block; + margin: 3px 8px 0 0; + } + clear: both; + height: 30px; + margin: 6px 0 4px; + vertical-align: middle; + &.themes { + max-width: 98%; + } + .tablenav-pages { + float: right; + display: block; + cursor: default; + height: 30px; + color: #555; + line-height: 30px; + font-size: 12px; + } + .no-pages, .one-page .pagination-links { + display: none; + } + .tablenav-pages a { + text-decoration: none; + padding: 3px 6px; + } +} + +.tablenav-pages span.current { + text-decoration: none; + padding: 3px 6px; +} + +.tablenav { + .tablenav-pages a { + padding: 0 10px 3px; + background: #eee; + background: rgba(0, 0, 0, 0.05); + font-size: 16px; + font-weight: normal; + &:hover, &:focus { + color: #fff; + background: #2ea2cc; + } + &.disabled { + color: #aaa; + background: #eee; + background: rgba(0, 0, 0, 0.05); + &:hover, &:focus, &:active { + color: #aaa; + background: #eee; + background: rgba(0, 0, 0, 0.05); + } + } + } + .displaying-num { + margin-right: 2px; + color: #777; + font-size: 12px; + font-style: italic; + } + .actions { + overflow: hidden; + padding: 2px 8px 0 0; + } +} + +.wp-filter .actions { + display: inline-block; + vertical-align: middle; +} + +.tablenav { + .delete { + margin-right: 20px; + } + .dots { + border-color: transparent; + } + .next, .prev { + border-color: transparent; + color: #0074a2; + } + .next:hover, .prev:hover { + border-color: transparent; + color: #2ea2cc; + } + .view-switch { + float: right; + margin: 5px 16px 0 8px; + } +} + +/* @todo: unclear if the following tablenav rules are actually used. +classes exist in paginate_links() but not seen in list table output. */ + +.wp-filter .view-switch { + display: inline-block; + vertical-align: middle; + padding: 14px 0; + margin: 0 20px 0 0; +} + +.view-switch { + a { + text-decoration: none; + &:hover:before { + color: #727272; + } + &.current:before { + color: #0074a2; + } + } + > { + a { + display: inline-block; + width: 18px; + height: 18px; + &:before { + color: #bbb; + display: inline-block; + float: left; + font: normal 20px/1 'dashicons'; + speak: none; + vertical-align: middle; + margin-left: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + .view-list:before { + content: '\f163'; + } + } + > { + a + a { + margin-left: 5px; + } + .view-excerpt:before { + content: '\f164'; + } + .view-grid:before { + content: '\f509'; + } + } +} + +.filter { + float: left; + margin: -5px 0 0 10px; + .subsubsub { + margin-left: -10px; + margin-top: 13px; + } +} + +.screen-per-page { + width: 4em; +} + +#posts-filter { + .wp-filter { + margin-bottom: 0; + } + fieldset { + float: left; + margin: 0 1.5ex 1em 0; + padding: 0; + legend { + padding: 0 0 .2em 1px; + } + } +} + +p.pagenav { + margin: 0; + display: inline; +} + +.pagenav span { + font-weight: 600; + margin: 0 6px; +} + +.row-title { + font-size: 14px !important; + font-weight: 600; +} + +.column-comment .comment-author { + margin-bottom: 0.6em; +} + +.column-author img, .column-username img, .column-comment .comment-author img { + float: left; + margin-right: 10px; + margin-top: 1px; +} + +.row-actions { + color: #ddd; + font-size: 13px; + visibility: hidden; + padding: 2px 0 0; +} + +tr:hover .row-actions, .mobile .row-actions, .row-actions.visible, div.comment-item:hover .row-actions { + visibility: visible; +} + +/* deprecated */ + +.row-actions-visible { + padding: 2px 0 0; +} + +/*------------------------------------------------------------------------------ + 10.1 - Inline Editing +------------------------------------------------------------------------------*/ + +/* +.quick-edit* is for Quick Edit +.bulk-edit* is for Bulk Edit +.inline-edit* is for everything +*/ + +/* Layout */ + +#wpbody-content .inline-edit-row fieldset { + font-size: 12px; + float: left; + margin: 0; + padding: 0; + width: 100%; +} + +tr.inline-edit-row td { + padding: 0 0.5em; +} + +#wpbody-content { + .inline-edit-row fieldset .inline-edit-col { + padding: 0 0.5em; + } + .quick-edit-row-page fieldset.inline-edit-col-right .inline-edit-col { + border-width: 0 0 0 1px; + border-style: none none none solid; + } + .quick-edit-row-post { + .inline-edit-col-left { + width: 40%; + } + .inline-edit-col-right { + width: 39%; + } + } + .inline-edit-row-post .inline-edit-col-center { + width: 20%; + } + .quick-edit-row-page { + .inline-edit-col-left { + width: 50%; + } + .inline-edit-col-right { + width: 49%; + } + } + .bulk-edit-row-post .inline-edit-col-right { + width: 49%; + } + .bulk-edit-row .inline-edit-col-left { + width: 30%; + } + .bulk-edit-row-page .inline-edit-col-right { + width: 69%; + } + .bulk-edit-row .inline-edit-col-bottom { + float: right; + width: 69%; + } + .inline-edit-row-page .inline-edit-col-right { + margin-top: 27px; + } +} + +.inline-edit-row { + fieldset .inline-edit-group { + clear: both; + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } + } + p.submit { + clear: both; + padding: 0.5em; + margin: 0.5em 0 0; + } + span.error { + line-height: 22px; + margin: 0 15px; + padding: 3px 5px; + } + h4 { + margin: .2em 0; + padding: 0; + line-height: 23px; + } + fieldset { + span { + &.title, &.checkbox-title { + margin: 0; + padding: 0; + line-height: 27px; + } + } + label, span.inline-edit-categories-label { + display: block; + margin: .2em 0; + } + label { + &.inline-edit-tags { + margin-top: 0; + span.title { + margin: .2em 0; + width: auto; + } + } + span { + &.title { + display: block; + float: left; + width: 5em; + } + &.input-text-wrap { + display: block; + margin-left: 5em; + } + } + } + } +} + +/* Positioning */ + +.quick-edit-row-post fieldset.inline-edit-col-right label span.title { + width: auto; + padding-right: 0.5em; +} + +.inline-edit-row { + .input-text-wrap input[type=text] { + width: 100%; + } + fieldset label { + input[type=checkbox] { + vertical-align: text-bottom; + } + textarea { + width: 100%; + height: 4em; + } + } +} + +#wpbody-content { + .bulk-edit-row fieldset .inline-edit-group label { + max-width: 50%; + } + .quick-edit-row fieldset .inline-edit-group label.alignleft:first-child { + margin-right: 0.5em; + } +} + +.inline-edit-col-right .input-text-wrap input.inline-edit-menu-order-input { + width: 6em; +} + +.inline-edit-save .spinner { + padding: 4px 10px 0; + vertical-align: top; + float: right; +} + +/* Styling */ + +.inline-edit-row { + h4 { + text-transform: uppercase; + } + fieldset { + span { + &.title, &.checkbox-title { + font-style: italic; + line-height: 1.8em; + } + } + .inline-edit-date { + float: left; + } + input { + &[name=jj], &[name=hh], &[name=mn] { + font-size: 12px; + width: 2.1em; + } + &[name=aa] { + font-size: 12px; + width: 3.5em; + } + } + label input.inline-edit-password-input { + width: 8em; + } + } +} + +/* Specific Elements */ + +ul.cat-checklist { + height: 12em; + border: solid 1px #ddd; + overflow-y: scroll; + padding: 0 5px; + margin: 0; + background-color: #fff; +} + +#bulk-titles { + display: block; + height: 12em; + border: 1px solid #ddd; + overflow-y: scroll; + padding: 0 5px; + margin: 0 0 5px; +} + +.inline-edit-row { + fieldset ul.cat-checklist { + li, input { + margin: 0; + position: relative; + /* RTL fix, #WP27629 */ + } + label { + font-style: normal; + font-size: 11px; + } + } + #bulk-titles div { + font-style: normal; + font-size: 11px; + } + fieldset label input { + &.inline-edit-menu-order-input { + width: 3em; + } + &.inline-edit-slug-input { + width: 75%; + } + } + #post_parent, select[name="page_template"] { + max-width: 80%; + } +} + +.ie8 .inline-edit-row { + #post_parent, select[name="page_template"] { + width: 250px; + } +} + +.quick-edit-row-post fieldset label.inline-edit-status { + float: left; +} + +#bulk-titles { + line-height: 140%; + div { + margin: 0.2em 0.3em; + a { + cursor: pointer; + display: block; + float: left; + height: 18px; + margin: 0 3px 0 -2px; + overflow: hidden; + position: relative; + width: 20px; + &:before { + position: relative; + top: -3px; + } + } + } +} + +/*------------------------------------------------------------------------------ + 17.0 - Plugins +------------------------------------------------------------------------------*/ + +.plugins tbody { + th.check-column { + padding: 8px 0 0 2px; + input[type=checkbox] { + margin-top: 4px; + } + } + padding: 8px 0 0 2px; +} + +#update-plugins-table tbody td p { + margin-top: 0; + strong { + font-size: 14px; + } +} + +.plugins { + thead th.check-column, tfoot th.check-column, .inactive th.check-column { + padding-left: 6px; + } +} + +#update-plugins-table { + thead th.check-column, tfoot th.check-column { + padding-top: 11px; + } +} + +.plugins { + color: #000; + th, td { + color: #000; + } + tr { + background: #fff; + } + p { + margin: 0 4px; + padding: 0; + } + .desc p { + margin: 0 0 8px; + } + td.desc { + line-height: 1.5em; + } + .desc { + ul, ol { + margin: 0 0 0 2em; + } + ul { + list-style-type: disc; + } + } + .row-actions { + font-size: 13px; + padding: 0; + } + .inactive { + td, th { + padding: 10px 9px; + } + } + .active { + td, th { + padding: 10px 9px; + } + td, th { + background-color: #f7fcfe; + } + } + .update { + th, td { + border-bottom: 0; + } + } +} + +.plugin-update-tr td { + border-top: 0; +} + +.plugins { + .inactive { + td, th { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + } + .active { + td, th { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + } +} + +.plugin-install #the-list td { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.upgrade .plugins { + td, th { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } +} + +.plugins { + tr.active { + &.plugin-update-tr + tr.inactive { + th, td { + border-top: 1px solid rgba(0, 0, 0, 0.03); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #e1e1e1; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #e1e1e1; + } + } + + tr.inactive { + th, td { + border-top: 1px solid rgba(0, 0, 0, 0.03); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #e1e1e1; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #e1e1e1; + } + } + } + .update { + td, th { + -webkit-box-shadow: none; + box-shadow: none; + } + } +} + +.upgrade .plugins tr:last-of-type { + td, th { + -webkit-box-shadow: none; + box-shadow: none; + } +} + +.plugins { + tr.active + tr.inactive.update { + th, td { + -webkit-box-shadow: none; + box-shadow: none; + } + } + .active.update { + td, th { + background-color: #fef7f1; + } + } +} + +tr.active.update + tr.plugin-update-tr .plugin-update { + background-color: #fef7f1; +} + +.plugins .active { + th.check-column { + border-left: 4px solid #2ea2cc; + } + &.update { + th.check-column, + .plugin-update-tr .plugin-update { + border-left: 4px solid #d54e21; + } + } +} + +#wpbody-content .plugins { + .plugin-title, .theme-title { + padding-right: 12px; + white-space: nowrap; + } +} + +.plugins { + .inactive .plugin-title strong { + font-weight: 400; + } + .second, .row-actions { + padding: 0 0 5px; + } + .update { + .second, .row-actions { + padding-bottom: 0; + } + } +} + +.plugins-php .widefat tfoot { + th, td { + border-top-style: solid; + border-top-width: 1px; + } +} + +.plugin-update-tr .update-message { + font-size: 13px; + font-weight: normal; + margin: 6px 12px 12px; + padding: 6px 12px; + margin: 0 10px 8px 31px; + background-color: #f7f7f7; + background-color: rgba(0, 0, 0, 0.03); + &:before { + color: #d54e21; + content: '\f463'; + display: inline-block; + font: normal 20px/1 'dashicons'; + speak: none; + margin: 0 8px 0 -2px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; + } +} + +.plugins .plugin-update { + padding: 0; + border: none; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +/* update notices for active plugins */ + +tr.active + tr.plugin-update-tr .plugin-update { + background-color: #f7fcfe; + .update-message { + background-color: #fcf3ef; + } +} + +.plugin-install-php { + h3 { + clear: both; + } + h4 { + margin: 2.5em 0 8px; + } + .wp-filter { + margin-bottom: 0; + } +} + +/* Plugin card table view */ + +.plugin-group { + overflow: hidden; + /* clearfix */ + margin-top: 1.5em; + h3 { + margin-top: 0; + } +} + +.plugin-card { + float: left; + margin: 0 8px 16px; + width: 48.5%; + width: -webkit-calc( 50% - 8px ); + width: calc( 50% - 8px ); + background-color: #fff; + border: 1px solid #dedede; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + &:nth-child(odd) { + clear: both; + margin-left: 0; + } + &:nth-child(even) { + margin-right: 0; + } +} + +@media screen and (min-width: 1600px) { + .plugin-card { + width: 30%; + width: -webkit-calc( 33.1% - 8px ); + width: calc( 33.1% - 8px ); + &:nth-child(odd) { + clear: none; + margin-left: 8px; + } + &:nth-child(even) { + margin-right: 8px; + } + &:nth-child(3n+1) { + clear: both; + margin-left: 0; + } + &:nth-child(3n) { + margin-right: 0; + } + } +} + +@media screen and (max-width: 782px) { + .plugin-card { + margin-left: 0; + margin-right: 0; + width: 100%; + } +} + +.plugin-card-top { + position: relative; + padding: 20px 20px 10px; + min-height: 135px; +} + +div.action-links, .plugin-action-buttons { + margin: 0; + /* Override existing margins */ +} + +.plugin-card { + h4 { + margin: 0 0 12px; + font-size: 18px; + line-height: 1.3; + } + .name, .desc { + margin-left: 148px; + /* icon + margin */ + margin-right: 120px; + /* action links */ + } + .action-links { + position: absolute; + top: 20px; + right: 20px; + width: 120px; + } +} + +.plugin-action-buttons { + clear: right; + float: right; + margin-left: 2em; + margin-bottom: 1em; + text-align: right; + li { + margin-bottom: 10px; + } +} + +.plugin-card-bottom { + clear: both; + padding: 12px 20px; + background-color: #fafafa; + border-top: 1px solid #dedede; + overflow: hidden; + .star-rating { + display: inline; + } +} + +.plugin-card { + .column-rating { + line-height: 23px; + margin-bottom: 4px; + } + .column-updated { + margin-bottom: 4px; + } + .column-rating, .column-downloaded { + float: left; + clear: left; + max-width: 180px; + } + .column-updated { + text-align: right; + float: right; + clear: right; + width: 65%; + width: -webkit-calc( 100% - 180px ); + width: calc( 100% - 180px ); + } + .column-compatibility { + text-align: right; + float: right; + clear: right; + width: 65%; + width: -webkit-calc( 100% - 180px ); + width: calc( 100% - 180px ); + span:before { + font: normal 20px/.5 'dashicons'; + speak: none; + display: inline-block; + padding: 0; + top: 4px; + left: -2px; + position: relative; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + color: #444; + } + } + .compatibility-incompatible:before { + content: '\f158'; + } + .compatibility-compatible:before { + content: '\f147'; + } +} + +.plugin-icon { + position: absolute; + top: 20px; + left: 20px; + width: 128px; + height: 128px; + margin: 0 20px 20px 0; + img { + width: 128px; + height: 128px; + } +} + +.no-plugin-results { + color: #999; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0 0; + text-align: center; +} + +/* ms */ +/* Background Color for Site Status */ + +.wp-list-table { + .site-deleted { + background: #ff8573; + } + .site-spammed { + background: #faafaa; + } + .site-archived { + background: #ffebe8; + } + .site-mature { + background: #fecac2; + } +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) { + .plugin-card .action-links { + position: static; + margin-left: 148px; + width: auto; + } + .plugin-action-buttons { + float: none; + margin: 1em 0 0; + text-align: left; + li { + display: inline-block; + vertical-align: middle; + .button { + margin-right: 20px; + } + } + } + .plugin-card { + .name { + margin-right: 0; + } + .desc { + margin-right: 0; + p:first-of-type { + margin-top: 0; + } + } + } +} + +@media screen and (max-width: 782px) { + /* WP List Table Options & Filters */ + .tablenav { + height: auto; + &.top { + margin: 20px 0 5px 0; + } + &.bottom { + position: relative; + margin-top: 15px; + } + br { + display: none; + &.clear { + display: block; + } + } + &.top .actions, .view-switch, &.top .displaying-num { + display: none; + } + &.bottom .displaying-num { + position: absolute; + right: 0; + top: 10px; + font-size: 14px; + } + } + /* Pagination */ + .tablenav-pages { + width: 100%; + text-align: center; + margin: 0 0 25px; + } + .tablenav { + &.bottom .tablenav-pages { + margin-top: 25px; + } + &.top .tablenav-pages.one-page { + display: none; + } + &.bottom .tablenav-pages.one-page { + margin: 15px 0 0 0; + height: 0; + } + } + .tablenav-pages .pagination-links { + .paging-input { + font-size: 18px; + } + a { + padding: 8px 20px 11px; + font-size: 18px; + background: rgba(0, 0, 0, 0.05); + } + .current-page { + padding: 10px; + font-size: 14px; + } + } + /* WP List Table Adjustments: General */ + .form-wrap > p { + display: none; + } + .comment-count { + font-size: 14px; + } + /* Columns to hide */ + .fixed { + .column-date, .column-author { + display: none; + } + } + .column-categories, .column-tags, .tags .column-description, .media .column-parent { + display: none; + } + .users { + .column-email, .column-name { + display: none; + } + } + .sites { + .column-registered, .column-users { + display: none; + } + } + .fixed .column-comment .comment-author { + display: block; + } + /* Posts */ + .column-title { + width: 85%; + } + .fixed .column-comments { + width: 35px; + } + .widefat { + .check-column { + width: 35px; + } + thead .check-column, tfoot .check-column { + padding: 10px 0 10px; + } + * { + word-wrap: normal; + } + } + /* Quick Edit and Bulk Edit */ + #wpbody-content { + .quick-edit-row-post { + .inline-edit-col-left, .inline-edit-col-right { + float: none; + width: 100%; + } + } + .inline-edit-row-post .inline-edit-col-center { + float: none; + width: 100%; + } + .quick-edit-row-page { + .inline-edit-col-left, .inline-edit-col-right { + float: none; + width: 100%; + } + } + .bulk-edit-row-post .inline-edit-col-right, .bulk-edit-row .inline-edit-col-left, .bulk-edit-row-page .inline-edit-col-right, .bulk-edit-row .inline-edit-col-bottom { + float: none; + width: 100%; + } + .quick-edit-row fieldset { + .inline-edit-col label, .inline-edit-group label { + max-width: none; + float: none; + margin-bottom: 5px; + } + } + .bulk-edit-row fieldset { + .inline-edit-col label, .inline-edit-group label { + max-width: none; + float: none; + margin-bottom: 5px; + } + } + } + #wpbody .bulk-edit-row fieldset select { + display: block; + width: 100%; + max-width: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .inline-edit-row { + fieldset ul.cat-checklist label, #bulk-titles div { + font-size: 16px; + } + fieldset { + label { + span.title { + float: none; + } + &.inline-edit-tags { + padding: 0 0.5em; + } + } + .inline-edit-col label.inline-edit-tags { + padding: 0; + } + label span.input-text-wrap { + margin-left: 0; + } + input { + &[name=jj], &[name=hh], &[name=mn] { + width: 3em; + } + &[name=aa] { + width: 4.5em; + } + } + } + } + #bulk-titles div { + margin: 0.8em 0.3em; + a { + height: 22px; + } + } + /* Taxonomies */ + .tags { + .column-posts { + width: 74px; + } + .column-slug { + width: 30%; + } + } + /* Comments */ + .comments .column-response, .users .column-role { + width: 35%; + } + /* Users */ + /* Network admin sites */ + .sites .column-blogname { + width: 55%; + } + /* Updates */ + #wpbody-content #update-themes-table .plugin-title { + width: auto; + } + /* Links */ + .link-manager-php { + #posts-filter { + margin-top: 25px; + } + .tablenav.bottom { + overflow: hidden; + } + } + /* Plugin/Theme Management Page */ + .wp-list-table.plugins { + position: relative; + margin-top: 35px; + margin-bottom: 50px; + thead .column-description { + display: none; + } + } + #wpbody-content .wp-list-table.plugins tfoot .column-description, .wp-list-table.plugins th#description { + display: none; + } + #wpbody-content .wp-list-table.plugins { + display: block; + width: auto; + thead, tbody, tr, .column-description, .plugin-title, .theme-title, .plugin-update, .manage-column.column-name { + display: block; + width: auto; + } + } + .wp-list-table.plugins { + thead { + position: absolute; + top: -35px; + left: 0; + right: 0; + width: auto; + height: 35px; + } + tfoot { + position: absolute; + top: -35px; + left: 0; + right: 0; + width: auto; + height: 35px; + bottom: -35px; + top: auto; + } + } + .active, .inactive { + padding-top: 0; + } + .wp-list-table.plugins { + .plugin-title, .theme-title { + padding-top: 13px; + padding-bottom: 4px; + } + } + .plugins tr.active + tr.inactive { + th.check-column, td { + -webkit-box-shadow: none; + box-shadow: none; + } + } + .wp-list-table.plugins { + .plugin-title, .theme-title, tbody th { + -webkit-box-shadow: none; + box-shadow: none; + } + } + .plugins { + tbody { + padding: 1px 0 0; + } + tr.active + tr.inactive { + td.column-description { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + th.check-column, td { + border-top: none; + } + } + } + .wp-list-table.plugins { + .column-description { + padding-top: 0; + } + .manage-column.column-name, .column-description, .plugin-title, .theme-title { + padding-right: 12px; + padding-left: 46px; + } + tr { + position: relative; + } + th.check-column, tr.update th.check-column { + position: absolute; + height: auto; + top: 0; + bottom: 0; + left: 0; + padding-left: 2px; + padding-top: 18px; + } + thead th.check-column, tfoot th.check-column { + padding-left: 3px; + padding-top: 11px; + background: none; + } + } + .widefat tbody th.check-column input[type="checkbox"] { + margin-top: -3px; + margin-left: 8px; + } + .wp-list-table.plugins { + .active .check-column input, .update .check-column input { + margin-left: 5px; + } + thead .check-column input, tfoot .check-column input { + margin-top: -6px; + } + .active th.check-column { + background: none; + } + .plugin-title strong, .theme-title strong { + font-size: 1.4em; + line-height: 1.6em; + } + } + /* Add New plugins page */ + table.plugin-install { + .column-name, .column-version, .column-rating, .column-description { + display: block; + width: auto; + } + th { + &.column-name, &.column-version, &.column-rating, &.column-description { + display: none; + } + } + td.column-name strong { + font-size: 1.4em; + line-height: 1.6em; + } + #the-list { + td { + -webkit-box-shadow: none; + box-shadow: none; + } + tr { + display: block; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + } + } +} diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css deleted file mode 100644 index 02ee1d8..0000000 --- a/src/wp-admin/css/login.css +++ /dev/null @@ -1,269 +0,0 @@ -@import url(forms.css); -@import url(l10n.css); - -html, -body { - height: 100%; - margin: 0; - padding: 0; -} - -html { - background: #f1f1f1; -} - -body { - background: #f1f1f1; - min-width: 0; - color: #444; - font-family: "Open Sans", sans-serif; - font-size: 13px; - line-height: 1.4em; -} - -a { - color: #0074a2; - -webkit-transition-property: border, background, color; - transition-property: border, background, color; - -webkit-transition-duration: .05s; - transition-duration: .05s; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; -} - -a { - outline: 0; -} - -a:hover, -a:active { - color: #2ea2cc; -} - -a:focus { - color: #124964; -} - -a:focus, -a:active { - outline: thin dotted; -} - -p { - line-height: 1.5; -} - -.login .message { - border-left: 4px solid #7ad03a; - padding: 1px 12px; - background-color: #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); -} - -.login #login_error { - border-left: 4px solid #dd3d36; - background: #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); -} - -#loginform p.submit, -.login-action-lostpassword p.submit { - border: none; - margin: -10px 0 20px; /* May want to revisit this */ -} - -.login * { - margin: 0; - padding: 0; -} - -.login form { - margin-top: 20px; - margin-left: 0; - padding: 26px 24px 46px; - font-weight: normal; - overflow: hidden; - background: #fff; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13); - box-shadow: 0 1px 3px rgba(0,0,0,0.13); -} - -.login form .forgetmenot { - font-weight: normal; - float: left; - margin-bottom: 0; -} - -.login .button-primary { - float: right; -} - -#login form p { - margin-bottom: 0; -} - -#login form p.submit { - margin: 0; - padding: 0; -} - -.login label { - color: #777; - font-size: 14px; -} - -.login form .forgetmenot label { - font-size: 12px; - line-height: 19px; -} - -.login h1 { - text-align: center; -} - -.login h1 a { - background-image: url(../images/w-logo-blue.png?ver=20131202); - background-image: none, url(../images/wordpress-logo.svg?ver=20131107); - -webkit-background-size: 84px; - background-size: 84px; - background-position: center top; - background-repeat: no-repeat; - color: #999; - height: 84px; - font-size: 20px; - font-weight: normal; - line-height: 1.3em; - margin: 0 auto 25px; - padding: 0; - text-decoration: none; - width: 84px; - text-indent: -9999px; - outline: none; - overflow: hidden; - display: block; -} - -#login { - width: 320px; - padding: 8% 0 0; - margin: auto; -} - -#login_error, -.login .message { - margin-left: 0; - padding: 12px; -} - -.login #nav, -.login #backtoblog { - font-size: 13px; - padding: 0 24px 0; -} - -.login #nav { - margin: 24px 0 0 0; -} - -#backtoblog { - margin: 16px 0 0 0; -} - -.login #nav a, -.login #backtoblog a { - text-decoration: none; - color: #999; -} - -.login #nav a:hover, -.login #backtoblog a:hover, -.login h1 a:hover { - color: #2ea2cc; -} - -.login form .input, -.login input[type="text"] { - font-size: 24px; - width: 100%; - padding: 3px; - margin: 2px 6px 16px 0; -} - -.login form .input, -.login input[type="text"], -.login form input[type="checkbox"] { - background: #fbfbfb; -} - -.ie7 .login form .input, -.ie8 .login form .input { - font-family: sans-serif; -} - -.login #pass-strength-result { - width: 250px; - font-weight: 600; - margin: 12px 0 6px; - padding: 6px 5px; - text-align: center; -} - -.mobile #login { - padding: 20px 0; -} - -.mobile #login form, -.mobile #login .message, -.mobile #login_error { - margin-left: 0; -} - -.mobile #login #nav, -.mobile #login #backtoblog { - margin-left: 8px; -} - -.mobile #login h1 a { - width: auto; -} - -body.interim-login { - height: auto; -} - -.interim-login #login { - padding: 0; - margin: 5px auto 20px; -} - -.interim-login.login h1 a { - width: auto; -} - -.interim-login #login_error, -.interim-login.login .message { - margin: 0 0 16px; -} - -.interim-login.login form { - margin: 0; -} - -@-ms-viewport { - width: device-width; -} - -@media screen and ( max-width: 782px ) { - .interim-login input[type=checkbox] { - height: 16px; - width: 16px; - } - - .interim-login input[type=checkbox]:checked:before { - width: 16px; - font: normal 21px/1 'dashicons'; - margin: -3px 0 0 -4px; - } -} diff --git a/src/wp-admin/css/login.scss b/src/wp-admin/css/login.scss new file mode 100644 index 0000000..141713b --- /dev/null +++ b/src/wp-admin/css/login.scss @@ -0,0 +1,259 @@ +@import url(forms.css); + +@import url(l10n.css); + +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +html { + background: #f1f1f1; +} + +body { + background: #f1f1f1; + min-width: 0; + color: #444; + font-family: "Open Sans", sans-serif; + font-size: 13px; + line-height: 1.4em; +} + +a { + color: #0074a2; + -webkit-transition-property: border, background, color; + transition-property: border, background, color; + -webkit-transition-duration: .05s; + transition-duration: .05s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + outline: 0; + &:hover, &:active { + color: #2ea2cc; + } + &:focus { + color: #124964; + outline: thin dotted; + } + &:active { + outline: thin dotted; + } +} + +p { + line-height: 1.5; +} + +.login { + .message { + border-left: 4px solid #7ad03a; + padding: 1px 12px; + background-color: #fff; + -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + } + #login_error { + border-left: 4px solid #dd3d36; + background: #fff; + -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + } +} + +#loginform p.submit, .login-action-lostpassword p.submit { + border: none; + margin: -10px 0 20px; + /* May want to revisit this */ +} + +.login { + * { + margin: 0; + padding: 0; + } + form { + margin-top: 20px; + margin-left: 0; + padding: 26px 24px 46px; + font-weight: normal; + overflow: hidden; + background: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); + .forgetmenot { + font-weight: normal; + float: left; + margin-bottom: 0; + } + } + .button-primary { + float: right; + } +} + +#login form p { + margin-bottom: 0; + &.submit { + margin: 0; + padding: 0; + } +} + +.login { + label { + color: #777; + font-size: 14px; + } + form .forgetmenot label { + font-size: 12px; + line-height: 19px; + } + h1 { + text-align: center; + a { + background-image: url(../images/w-logo-blue.png?ver=20131202); + background-image: none, url(../images/wordpress-logo.svg?ver=20131107); + -webkit-background-size: 84px; + background-size: 84px; + background-position: center top; + background-repeat: no-repeat; + color: #999; + height: 84px; + font-size: 20px; + font-weight: normal; + line-height: 1.3em; + margin: 0 auto 25px; + padding: 0; + text-decoration: none; + width: 84px; + text-indent: -9999px; + outline: none; + overflow: hidden; + display: block; + } + } +} + +#login { + width: 320px; + padding: 8% 0 0; + margin: auto; +} + +#login_error { + margin-left: 0; + padding: 12px; +} + +.login { + .message { + margin-left: 0; + padding: 12px; + } + #nav, #backtoblog { + font-size: 13px; + padding: 0 24px 0; + } + #nav { + margin: 24px 0 0 0; + } +} + +#backtoblog { + margin: 16px 0 0 0; +} + +.login { + #nav a, #backtoblog a { + text-decoration: none; + color: #999; + } + #nav a:hover, #backtoblog a:hover, h1 a:hover { + color: #2ea2cc; + } + form .input, input[type="text"] { + font-size: 24px; + width: 100%; + padding: 3px; + margin: 2px 6px 16px 0; + } + form .input, input[type="text"], form input[type="checkbox"] { + background: #fbfbfb; + } +} + +.ie7 .login form .input, .ie8 .login form .input { + font-family: sans-serif; +} + +.login #pass-strength-result { + width: 250px; + font-weight: 600; + margin: 12px 0 6px; + padding: 6px 5px; + text-align: center; +} + +.mobile { + #login { + padding: 20px 0; + form, .message { + margin-left: 0; + } + } + #login_error { + margin-left: 0; + } + #login { + #nav, #backtoblog { + margin-left: 8px; + } + h1 a { + width: auto; + } + } +} + +body.interim-login { + height: auto; +} + +.interim-login { + #login { + padding: 0; + margin: 5px auto 20px; + } + &.login h1 a { + width: auto; + } + #login_error { + margin: 0 0 16px; + } + &.login { + .message { + margin: 0 0 16px; + } + form { + margin: 0; + } + } +} + +@-ms-viewport { + width: device-width; +} + + +@media screen and (max-width: 782px) { + .interim-login input[type=checkbox] { + height: 16px; + width: 16px; + &:checked:before { + width: 16px; + font: normal 21px/1 'dashicons'; + margin: -3px 0 0 -4px; + } + } +} diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css deleted file mode 100644 index e27b665..0000000 --- a/src/wp-admin/css/media.css +++ /dev/null @@ -1,1196 +0,0 @@ -/*------------------------------------------------------------------------------ - 14.0 - Media Screen -------------------------------------------------------------------------------*/ - -.media-item .describe { - border-collapse: collapse; - width: 100%; - border-top: 1px solid #dfdfdf; - clear: both; - cursor: default; -} - -.media-item.media-blank .describe { - border: 0; -} - -.media-item .describe th { - vertical-align: top; - text-align: left; - padding: 5px 10px 10px; - width: 140px; -} - -.media-item .describe .align th { - padding-top: 0; -} - -.media-item .media-item-info tr { - background-color: transparent; -} - -.media-item .describe td { - padding: 0 8px 8px 0; - vertical-align: top; -} - -.media-item thead.media-item-info td { - padding: 4px 10px 0; -} - -.media-item .media-item-info .A1B1 { - padding: 0 0 0 10px; -} - -.media-item td.savesend { - padding-bottom: 15px; -} - -.media-item .thumbnail { - max-height: 128px; - max-width: 128px; -} - -#wpbody-content #async-upload-wrap a { - display: none; -} - -.media-upload-form { - margin-top: 20px; -} - -.media-upload-form td label { - margin-right: 6px; - margin-left: 2px; -} - -.media-upload-form .align .field label { - display: inline; - padding: 0 0 0 23px; - margin: 0 1em 0 3px; - font-weight: 600; -} - -.media-upload-form tr.image-size label { - margin: 0 0 0 5px; - font-weight: 600; -} - -.media-upload-form th.label label { - font-weight: 600; - margin: 0.5em; - font-size: 13px; -} - -.media-upload-form th.label label span { - padding: 0 5px; -} - -.media-item .describe input[type="text"], -.media-item .describe textarea { - width: 460px; -} - -.media-item .describe p.help { - margin: 0; - padding: 0 0 0 5px; -} - -.media-item .edit-attachment, -.describe-toggle-on, -.describe-toggle-off { - display: block; - line-height: 36px; - float: right; - margin-right: 10px; -} - -.media-item .describe-toggle-off, -.media-item.open .describe-toggle-on { - display: none; -} - -.media-item.open .describe-toggle-off { - display: block; -} - -.media-upload-form .media-item { - min-height: 36px; - margin-bottom: 1px; - position: relative; - width: 100%; - background: #fff; -} - -.media-upload-form .media-item, -.media-upload-form .media-item .error { - -webkit-box-shadow: 0 1px 0 #dfdfdf; - box-shadow: 0 1px 0 #dfdfdf; -} - -#media-items:empty { - border: 0 none; -} - -.media-item .filename { - line-height: 36px; - overflow: hidden; - margin-left: 6px; -} - -.media-item .pinkynail { - float: left; - margin: 2px 10px 0 3px; - max-width: 40px; - max-height: 32px; -} - -.media-item .startopen, -.media-item .startclosed { - display: none; -} - -.media-item .original { - position: relative; - height: 34px; -} - -.media-item .progress { - float: right; - height: 22px; - margin: 7px 6px; - width: 200px; - line-height: 2em; - padding: 0; - overflow: hidden; - -webkit-border-radius: 22px; - border-radius: 22px; - background: #ddd; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -} - -.media-item .bar { - z-index: 9; - width: 0; - height: 100%; - margin-top: -22px; - -webkit-border-radius: 22px; - border-radius: 22px; - background-color: #0074a2; - -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); - box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -} - -.media-item .progress .percent { - z-index: 10; - position: relative; - width: 200px; - padding: 0; - color: #fff; - text-align: center; - line-height: 22px; - font-weight: 400; - text-shadow: 0 1px 2px rgba(0,0,0,0.2); -} - -.upload-php .fixed .column-parent { - width: 15%; -} - -.js .html-uploader #plupload-upload-ui { - display: none; -} - -.js .html-uploader #html-upload-ui { - display: block; -} - -.media-upload-form .media-item.error, -.media-upload-form .media-item .error { - width: auto; - margin: 0 0 1px 0; -} - -.media-upload-form .media-item .error { - padding: 10px 0 10px 14px; -} - -.media-item .error-div a.dismiss { - display: block; - float: right; - margin: 0 10px 0 15px; -} - -/*------------------------------------------------------------------------------ - 14.1 - Media Library -------------------------------------------------------------------------------*/ - -.find-box { - background-color: #fff; - -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); - box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); - width: 600px; - overflow: hidden; - margin-left: -300px; - position: fixed; - top: 30px; - bottom: 30px; - left: 50%; - z-index: 100105; -} - -.find-box-head { - background: #fcfcfc; - border-bottom: 1px solid #dfdfdf; - height: 36px; - font-size: 18px; - font-weight: 600; - line-height: 36px; - padding: 0 36px 0 16px; - position: absolute; - top: 0; - left: 0; - right: 0; -} - -.find-box-inside { - overflow: auto; - padding: 16px; - background-color: #fff; - position: absolute; - top: 37px; - bottom: 45px; - overflow-y: scroll; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.find-box-search { - padding-bottom: 16px; -} - -.find-box-search .spinner { - float: none; - left: 110px; - position: absolute; - top: 2px; -} - -.find-box-search, -#find-posts-response { - position: relative; /* RTL fix, #WP28010 */ -} - -#find-posts-input, -#find-posts-search { - float: left; -} - -#find-posts-input { - width: 140px; - height: 28px; - margin: 0 4px 0 0; -} - -.widefat .found-radio { - padding-right: 0; - width: 16px; -} - -#find-posts-close { - width: 36px; - height: 36px; - position: absolute; - top: 0; - right: 0; - cursor: pointer; - text-align: center; - color: #666; -} - -#find-posts-close:hover { - color: #2ea2cc; -} - -#find-posts-close:before { - font: normal 20px/36px 'dashicons'; - vertical-align: top; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - content: '\f158'; -} - -.find-box-buttons { - padding: 8px 16px; - background: #fcfcfc; - border-top: 1px solid #dfdfdf; - position: absolute; - bottom: 0; - left: 0; - right: 0; -} - -@media screen and ( max-width: 782px ) { - .find-box-inside { - bottom: 57px; - } -} - -@media screen and ( max-width: 660px ) { - - .find-box { - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: 0; - width: 100%; - } - -} - -.ui-find-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #000; - opacity: 0.7; - filter: alpha(opacity=70); - z-index: 100100; -} - -ul#dismissed-updates { - display: none; -} - -form.upgrade { - margin-top: 8px; -} - -form.upgrade .hint { - font-style: italic; - font-size: 85%; - margin: -0.5em 0 2em 0; -} - -#poststuff .inside .the-tagcloud { - margin: 5px 0 10px; - padding: 8px; - border: 1px solid #ddd; - line-height: 1.8em; - word-spacing: 3px; - -webkit-border-radius: 6px; - border-radius: 6px; -} - -.drag-drop #drag-drop-area { - border: 4px dashed #bbb; - height: 200px; -} - -.drag-drop .drag-drop-inside { - margin: 70px auto 0; - width: 250px; -} - -.drag-drop-inside p { - color: #aaa; - font-size: 14px; - margin: 5px 0; - display: none; -} - -.drag-drop .drag-drop-inside p { - text-align: center; -} - -.drag-drop-inside p.drag-drop-info { - font-size: 20px; -} - -.drag-drop .drag-drop-inside p, -.drag-drop-inside p.drag-drop-buttons { - display: block; -} - -/* -#drag-drop-area:-moz-drag-over { - border-color: #83b4d8; -} -border color while dragging a file over the uploader drop area */ -.drag-drop.drag-over #drag-drop-area { - border-color: #83b4d8; -} - -#plupload-upload-ui { - position: relative; -} - -/** - * Media Library grid view - */ - -.media-frame.mode-grid, -.media-frame.mode-grid .media-frame-content, -.media-frame.mode-grid .attachments-browser .attachments, -.media-frame.mode-grid .uploader-inline-content { - position: static; -} - -/* Regions we don't use at all */ -.media-frame.mode-grid .media-frame-title, -.media-frame.mode-grid .media-frame-router, -.media-frame.mode-grid .media-frame-menu { - display: none; -} - -.media-frame.mode-grid .media-frame-content { - background-color: transparent; - border: none; -} - -.upload-php .mode-grid .media-sidebar { - position: relative; - width: auto; - margin-bottom: 16px; - padding: 0 16px; - border: 1px solid #c00; - background-color: #feebe8; -} - -.upload-php .mode-grid .hide-sidebar .media-sidebar { - display: none; -} - -.upload-php .mode-grid .media-sidebar .media-uploader-status { - border-bottom: none; - padding-bottom: 0; - max-width: 100%; -} - -.upload-php .mode-grid .media-sidebar .upload-error { - margin: 20px 0; - padding: 0; - border: none; - background: none; -} - -.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors { - font-size: 0; - top: -12px; - right: -10px; -} - -.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before { - content: "\f158"; - font: normal 20px/1 dashicons; - color: #666; -} - -.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before, -.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before { - color: #2ea2cc; -} - -.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 { - display: none; -} - -.media-frame.mode-grid .uploader-inline { - position: relative; - top: auto; - right: auto; - left: auto; - bottom: auto; - padding-top: 0; - margin-top: 0; - border: 4px dashed #bbb; -} - -.media-frame.mode-select .attachments-browser.fixed .attachments { - position: relative; - top: 94px; /* prevent jumping up when the toolbar becomes fixed */ - padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */ -} - -.media-frame.mode-grid .attachment:focus, -.media-frame.mode-grid .selected.attachment:focus, -.media-frame.mode-grid .attachment.details:focus { - -webkit-box-shadow: - inset 0 0 2px 3px #f1f1f1, - inset 0 0 0 7px #5b9dd9; - box-shadow: - inset 0 0 2px 3px #f1f1f1, - inset 0 0 0 7px #5b9dd9; - outline: none; -} - -.media-frame.mode-grid .selected.attachment { - -webkit-box-shadow: - inset 0 0 0 5px #f1f1f1, - inset 0 0 0 7px #ccc; - box-shadow: - inset 0 0 0 5px #f1f1f1, - inset 0 0 0 7px #ccc; -} - -.media-frame.mode-grid .attachment.details { - -webkit-box-shadow: - inset 0 0 0 3px #f1f1f1, - inset 0 0 0 7px #1e8cbe; - box-shadow: - inset 0 0 0 3px #f1f1f1, - inset 0 0 0 7px #1e8cbe; -} - -.media-frame.mode-grid.mode-select .attachment .thumbnail { - opacity: 0.65; -} - -.media-frame.mode-select .attachment.selected .thumbnail { - opacity: 1; -} - -.media-frame.mode-grid .media-toolbar { - margin-bottom: 15px; - height: auto; -} - -.media-frame.mode-grid .media-toolbar select { - margin: 0 10px 0 0; - font-size: 14px; -} - -.media-frame.mode-grid .media-toolbar-secondary > .media-button { - margin-top: 10px; - margin-bottom: 10px; -} - -.media-frame.mode-grid .attachments-browser .bulk-select { - display: inline-block; - margin: 0 10px 0 0; -} - -.media-frame.mode-grid .search { - margin-top: 0; -} - -.media-frame.mode-grid .spinner { - margin-top: 15px; -} - -.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button { - margin-right: 10px; -} - -.media-frame.mode-select .attachments-browser.fixed .media-toolbar { - position: fixed; - top: 32px; - left: auto; - right: 20px; - margin-top: 0; -} - -.media-frame.mode-grid .attachments-browser { - padding: 0; -} - -.media-frame.mode-grid .attachments-browser .attachments { - padding: 2px; -} - -.media-frame.mode-grid .attachments-browser .no-media { - color: #999; - font-size: 18px; - font-style: normal; - margin: 0; - padding: 100px 0 0; - text-align: center; -} - -/** - * Attachment details modal - */ - -.edit-attachment-frame { - display: block; - height: 100%; - width: 100%; -} - -.edit-attachment-frame .edit-media-header { - overflow: hidden; -} - -.upload-php .media-modal-close .media-modal-icon:before { - content: '\f335'; - font-size: 22px; -} - -.upload-php .media-modal-close .media-modal-icon { - margin: 14px; - width: 22px; -} - -.upload-php .media-modal-close, -.edit-attachment-frame .edit-media-header .left, -.edit-attachment-frame .edit-media-header .right { - cursor: pointer; - color: #777; - background-color: transparent; - height: 50px; - width: 50px; - padding: 0; - position: absolute; - text-align: center; - border: 0; - border-left: 1px solid #ddd; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -.upload-php .media-modal-close { - top: 0; - right: 0; -} - -.edit-attachment-frame .edit-media-header .left { - right: 102px; -} - -.edit-attachment-frame .edit-media-header .right { - right: 51px; -} - -.edit-attachment-frame .media-frame-title { - left: 0; - right: 150px; /* leave space for prev/next/close */ -} - -.edit-attachment-frame .edit-media-header .right:before, -.edit-attachment-frame .edit-media-header .left:before { - font: normal 20px/50px 'dashicons' !important; - display: inline; - font-weight: 300; -} - -.upload-php .media-modal-close:hover, -.upload-php .media-modal-close:focus, -.edit-attachment-frame .edit-media-header .left:hover, -.edit-attachment-frame .edit-media-header .right:hover, -.edit-attachment-frame .edit-media-header .left:focus, -.edit-attachment-frame .edit-media-header .right:focus { - background: #ddd; - border-color: #ccc; - color: #000; - outline: none; -} - -.upload-php .media-modal-close:focus .media-modal-icon:before, -.upload-php .media-modal-close:hover .media-modal-icon:before { - color: #000; -} - -.edit-attachment-frame .edit-media-header .left:before, -.rtl .edit-attachment-frame .edit-media-header .right:before { - content: '\f341'; -} - -.edit-attachment-frame .edit-media-header .right:before, -.rtl .edit-attachment-frame .edit-media-header .left:before { - content: '\f345'; -} - -.edit-attachment-frame .edit-media-header .left.disabled, -.edit-attachment-frame .edit-media-header .right.disabled, -.edit-attachment-frame .edit-media-header .left.disabled:hover, -.edit-attachment-frame .edit-media-header .right.disabled:hover { - color: #ccc; - background: inherit; - cursor: default; - pointer-events: none; -} - -.edit-attachment-frame .media-frame-content, -.edit-attachment-frame .media-frame-router { - left: 0; -} - -.edit-attachment-frame .media-frame-content { - border-bottom: none; - bottom: 0; - top: 50px; -} - -.edit-attachment-frame .attachment-details { - position: absolute; - overflow: auto; - top: 0; - bottom: 0; - right: 0; - left: 0; - -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); - box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); -} - -.edit-attachment-frame .attachment-media-view { - float: left; - width: 65%; - height: 100%; -} - -.edit-attachment-frame .attachment-media-view .thumbnail { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 16px; - height: 100%; -} - -.edit-attachment-frame .attachment-media-view .details-image { - display: block; - margin-bottom: 16px; - max-width: 100%; - max-height: 90%; - max-height: -webkit-calc( 100% - 42px ); - max-height: calc( 100% - 42px ); /* leave space for actions underneath */ -} - -.edit-attachment-frame .wp-media-wrapper { - margin-bottom: 12px; -} - -.edit-attachment-frame input, -.edit-attachment-frame textarea { - padding: 6px 8px; - line-height: 16px; -} - -.edit-attachment-frame .attachment-info { - overflow: auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-bottom: 0; - padding: 12px 16px 0; - width: 35%; - height: 100%; - -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); - box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); - border-bottom: 0; - border-left: 1px solid #ddd; - background: #f3f3f3; -} - -.edit-attachment-frame .attachment-info .details, -.edit-attachment-frame .attachment-info .settings { - position: relative; /* RTL fix, #WP29352 */ - overflow: hidden; - float: none; - margin-bottom: 15px; - padding-bottom: 15px; - border-bottom: 1px solid #ddd; -} - -.edit-attachment-frame .attachment-info .filename { - font-weight: normal; - color: #666; -} - -.edit-attachment-frame .attachment-info .thumbnail { - margin-bottom: 12px; -} - -.attachment-info .actions { - margin-bottom: 16px; -} - -.attachment-info .actions a { - display: inline; - text-decoration: none; -} - - -/*------------------------------------------------------------------------------ - 14.2 - Image Editor -------------------------------------------------------------------------------*/ - -.wp_attachment_details label[for="content"] { - font-size: 13px; - line-height: 1.5; - margin: 1em 0; -} - -.wp_attachment_details #attachment_caption { - height: 4em; -} - -.describe .image-editor { - vertical-align: top; -} - -.imgedit-wrap { - position: relative; -} - -.imgedit-settings p { - margin: 8px 0 0; -} - -.describe .imgedit-wrap .imgedit-settings { - padding: 0 5px; -} - -.wp_attachment_holder div.updated { - margin-top: 0; -} - -.wp_attachment_holder .imgedit-wrap > div { - height: auto; - overflow: hidden; -} - -.wp_attachment_holder .imgedit-wrap .imgedit-panel-content { - padding-right: 16px; - width: auto; - overflow: hidden; -} - -.wp_attachment_holder .imgedit-wrap .imgedit-settings { - float: right; - width: 250px; -} - -.imgedit-settings input { - margin-top: 0; - vertical-align: middle; -} - -.imgedit-wait { - position: absolute; - top: 0; - background: #fff url(../images/spinner.gif) no-repeat center; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; - opacity: 0.7; - filter: alpha(opacity=70); - width: 100%; - height: 500px; - display: none; -} - -.no-float { - float: none; -} - -.media-disabled, -.imgedit-settings .disabled { - color: grey; -} - -.wp_attachment_image, -.A1B1 { - overflow: hidden; -} - -.wp_attachment_image .button, -.A1B1 .button { - float: left; -} - -.no-js .wp_attachment_image .button { - display: none; -} - -.wp_attachment_image .spinner, -.A1B1 .spinner { - float: left; - padding: 0 0 4px 0; - vertical-align: bottom; -} - -.imgedit-menu { - margin: 0 0 12px; - min-width: 300px; -} - -.imgedit-menu div { - float: left; - width: 32px; - border: 1px solid #d5d5d5; - background: #f1f1f1; - margin: 0 8px 0 0; - height: 32px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - line-height: 28px; - color: #777; - cursor: pointer; -} - -.imgedit-menu div:before { - font: normal 20px/1 'dashicons'; - speak: none; - vertical-align: middle; -} - -.imgedit-menu div:hover { - border-color: #c1c1c1; - background-color: #eaeaea; - color: #333; -} - -.imgedit-menu div.disabled { - border-color: #ccc; - background-color: #ddd; - color: #777; - filter: alpha(opacity=50); - opacity: 0.5; - cursor: default; -} - -.imgedit-crop:before { - content:'\f165'; -} - -.imgedit-rleft:before { - content:'\f166'; -} - -.imgedit-rright:before { - content:'\f167'; -} - -.imgedit-flipv:before { - content:'\f168'; -} - -.imgedit-fliph:before { - content:'\f169'; -} - -.imgedit-undo:before { - content:'\f171'; -} - -.imgedit-redo:before { - content:'\f172'; -} - -.imgedit-crop-wrap { - position: relative; -} - -.imgedit-crop { - margin: 0 8px 0 0; -} - -.imgedit-rleft { - margin: 0 3px; -} - -.imgedit-rright { - margin: 0 8px 0 3px; -} - -.imgedit-flipv { - margin: 0 3px; -} - -.imgedit-fliph { - margin: 0 8px 0 3px; -} - -.imgedit-undo { - margin: 0 3px; -} - -.imgedit-redo { - margin: 0 8px 0 3px; -} - -.imgedit-applyto img { - margin: 0 8px 0 0; -} - -.imgedit-group-top { - margin: 5px 0; -} - -#poststuff .imgedit-group-top h3 { - padding: 0; -} - -.imgedit-group-top h3 a { - text-decoration: none; -} - -.imgedit-applyto .imgedit-label { - padding: 2px 0 0; - display: block; -} - -.imgedit-help { - display: none; - font-style: italic; -} - -a.imgedit-help-toggle { - text-decoration: none; -} - -.form-table td.imgedit-response { - padding: 0; -} - -.imgedit-submit { - margin: 8px 0; -} - -.imgedit-submit-btn { - margin-left: 20px; -} - -.imgedit-wrap .nowrap { - white-space: nowrap; -} - -span.imgedit-scale-warn { - color: red; - font-size: 20px; - font-style: normal; - visibility: hidden; - vertical-align: middle; -} - -.imgedit-group { - margin-bottom: 8px; - padding: 2px 10px; -} - -audio, video { - display: inline-block; - max-width: 100%; -} - -.mejs-container { - width: 100%; - max-width: 100%; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - .imgedit-wait { - background-image: url(../images/spinner-2x.gif); - } -} - -@media screen and ( max-width: 782px ) { - .wp_attachment_details label[for="content"] { - font-size: 14px; - line-height: 1.5em; - } - - .media-upload-form .media-item.error, - .media-upload-form .media-item .error { - font-size: 13px; - line-height: 1.5; - } - - .media-upload-form .media-item.error { - padding: 1px 10px; - } - - .media-upload-form .media-item .error { - padding: 10px 0 10px 12px; - } -} - -/** - * Media queries for media grid. - */ - -@media only screen and (max-width: 1120px) { - .media-frame.mode-grid .attachments-browser .media-toolbar-secondary { - float: none; - } -} - -@media only screen and ( max-width: 782px ) { - .media-frame.mode-select .attachments-browser.fixed .media-toolbar { - top: 46px; - right: 10px; - } -} - -@media only screen and (max-width: 600px) { - .media-frame.mode-select .attachments-browser.fixed .media-toolbar { - top: 0; - } -} - -@media only screen and (max-width: 480px) { - .edit-attachment-frame .media-frame-title { - right: 110px; - } - - .upload-php .media-modal-close, - .edit-attachment-frame .edit-media-header .left, - .edit-attachment-frame .edit-media-header .right { - width: 40px; - height: 40px; - } - - .upload-php .media-modal-close .media-modal-icon { - margin: 9px 10px; - } - - .edit-attachment-frame .edit-media-header .right:before, - .edit-attachment-frame .edit-media-header .left:before { - line-height: 40px !important; - } - - .edit-attachment-frame .edit-media-header .left { - right: 82px; - } - - .edit-attachment-frame .edit-media-header .right { - right: 41px; - } - - .edit-attachment-frame .media-frame-content { - top: 40px; - } - - .edit-attachment-frame .attachment-media-view { - float: none; - height: auto; - width: 100%; - } - - .edit-attachment-frame .attachment-info { - height: auto; - width: 100%; - } -} - -@media only screen and (max-width: 640px), screen and (max-height: 400px) { - .upload-php .mode-grid .media-sidebar{ - max-width: 100%; - } -} diff --git a/src/wp-admin/css/media.scss b/src/wp-admin/css/media.scss new file mode 100644 index 0000000..110333f --- /dev/null +++ b/src/wp-admin/css/media.scss @@ -0,0 +1,1164 @@ +/*------------------------------------------------------------------------------ + 14.0 - Media Screen +------------------------------------------------------------------------------*/ + +.media-item { + .describe { + border-collapse: collapse; + width: 100%; + border-top: 1px solid #dfdfdf; + clear: both; + cursor: default; + } + &.media-blank .describe { + border: 0; + } + .describe { + th { + vertical-align: top; + text-align: left; + padding: 5px 10px 10px; + width: 140px; + } + .align th { + padding-top: 0; + } + } + .media-item-info tr { + background-color: transparent; + } + .describe td { + padding: 0 8px 8px 0; + vertical-align: top; + } + thead.media-item-info td { + padding: 4px 10px 0; + } + .media-item-info .A1B1 { + padding: 0 0 0 10px; + } + td.savesend { + padding-bottom: 15px; + } + .thumbnail { + max-height: 128px; + max-width: 128px; + } +} + +#wpbody-content #async-upload-wrap a { + display: none; +} + +.media-upload-form { + margin-top: 20px; + td label { + margin-right: 6px; + margin-left: 2px; + } + .align .field label { + display: inline; + padding: 0 0 0 23px; + margin: 0 1em 0 3px; + font-weight: 600; + } + tr.image-size label { + margin: 0 0 0 5px; + font-weight: 600; + } + th.label label { + font-weight: 600; + margin: 0.5em; + font-size: 13px; + span { + padding: 0 5px; + } + } +} + +.media-item { + .describe { + input[type="text"], textarea { + width: 460px; + } + p.help { + margin: 0; + padding: 0 0 0 5px; + } + } + .edit-attachment { + display: block; + line-height: 36px; + float: right; + margin-right: 10px; + } +} + +.describe-toggle-on, .describe-toggle-off { + display: block; + line-height: 36px; + float: right; + margin-right: 10px; +} + +.media-item { + .describe-toggle-off { + display: none; + } + &.open { + .describe-toggle-on { + display: none; + } + .describe-toggle-off { + display: block; + } + } +} + +.media-upload-form .media-item { + min-height: 36px; + margin-bottom: 1px; + position: relative; + width: 100%; + background: #fff; + -webkit-box-shadow: 0 1px 0 #dfdfdf; + box-shadow: 0 1px 0 #dfdfdf; + .error { + -webkit-box-shadow: 0 1px 0 #dfdfdf; + box-shadow: 0 1px 0 #dfdfdf; + } +} + +#media-items:empty { + border: 0 none; +} + +.media-item { + .filename { + line-height: 36px; + overflow: hidden; + margin-left: 6px; + } + .pinkynail { + float: left; + margin: 2px 10px 0 3px; + max-width: 40px; + max-height: 32px; + } + .startopen, .startclosed { + display: none; + } + .original { + position: relative; + height: 34px; + } + .progress { + float: right; + height: 22px; + margin: 7px 6px; + width: 200px; + line-height: 2em; + padding: 0; + overflow: hidden; + -webkit-border-radius: 22px; + border-radius: 22px; + background: #ddd; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + } + .bar { + z-index: 9; + width: 0; + height: 100%; + margin-top: -22px; + -webkit-border-radius: 22px; + border-radius: 22px; + background-color: #0074a2; + -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); + } + .progress .percent { + z-index: 10; + position: relative; + width: 200px; + padding: 0; + color: #fff; + text-align: center; + line-height: 22px; + font-weight: 400; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + } +} + +.upload-php .fixed .column-parent { + width: 15%; +} + +.js .html-uploader { + #plupload-upload-ui { + display: none; + } + #html-upload-ui { + display: block; + } +} + +.media-upload-form .media-item { + &.error { + width: auto; + margin: 0 0 1px 0; + } + .error { + width: auto; + margin: 0 0 1px 0; + padding: 10px 0 10px 14px; + } +} + +.media-item .error-div a.dismiss { + display: block; + float: right; + margin: 0 10px 0 15px; +} + +/*------------------------------------------------------------------------------ + 14.1 - Media Library +------------------------------------------------------------------------------*/ + +.find-box { + background-color: #fff; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + width: 600px; + overflow: hidden; + margin-left: -300px; + position: fixed; + top: 30px; + bottom: 30px; + left: 50%; + z-index: 100105; +} + +.find-box-head { + background: #fcfcfc; + border-bottom: 1px solid #dfdfdf; + height: 36px; + font-size: 18px; + font-weight: 600; + line-height: 36px; + padding: 0 36px 0 16px; + position: absolute; + top: 0; + left: 0; + right: 0; +} + +.find-box-inside { + overflow: auto; + padding: 16px; + background-color: #fff; + position: absolute; + top: 37px; + bottom: 45px; + overflow-y: scroll; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.find-box-search { + padding-bottom: 16px; + .spinner { + float: none; + left: 110px; + position: absolute; + top: 2px; + } + position: relative; + /* RTL fix, #WP28010 */ +} + +#find-posts-response { + position: relative; + /* RTL fix, #WP28010 */ +} + +#find-posts-input, #find-posts-search { + float: left; +} + +#find-posts-input { + width: 140px; + height: 28px; + margin: 0 4px 0 0; +} + +.widefat .found-radio { + padding-right: 0; + width: 16px; +} + +#find-posts-close { + width: 36px; + height: 36px; + position: absolute; + top: 0; + right: 0; + cursor: pointer; + text-align: center; + color: #666; + &:hover { + color: #2ea2cc; + } + &:before { + font: normal 20px/36px 'dashicons'; + vertical-align: top; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: '\f158'; + } +} + +.find-box-buttons { + padding: 8px 16px; + background: #fcfcfc; + border-top: 1px solid #dfdfdf; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +@media screen and (max-width: 782px) { + .find-box-inside { + bottom: 57px; + } +} + +@media screen and (max-width: 660px) { + .find-box { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 0; + width: 100%; + } +} + +.ui-find-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #000; + opacity: 0.7; + filter: alpha(opacity = 70); + z-index: 100100; +} + +ul#dismissed-updates { + display: none; +} + +form.upgrade { + margin-top: 8px; + .hint { + font-style: italic; + font-size: 85%; + margin: -0.5em 0 2em 0; + } +} + +#poststuff .inside .the-tagcloud { + margin: 5px 0 10px; + padding: 8px; + border: 1px solid #ddd; + line-height: 1.8em; + word-spacing: 3px; + -webkit-border-radius: 6px; + border-radius: 6px; +} + +.drag-drop { + #drag-drop-area { + border: 4px dashed #bbb; + height: 200px; + } + .drag-drop-inside { + margin: 70px auto 0; + width: 250px; + } +} + +.drag-drop-inside p { + color: #aaa; + font-size: 14px; + margin: 5px 0; + display: none; +} + +.drag-drop .drag-drop-inside p { + text-align: center; +} + +.drag-drop-inside p.drag-drop-info { + font-size: 20px; +} + +.drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons { + display: block; +} + +/* +#drag-drop-area:-moz-drag-over { + border-color: #83b4d8; +} +border color while dragging a file over the uploader drop area */ + +.drag-drop.drag-over #drag-drop-area { + border-color: #83b4d8; +} + +#plupload-upload-ui { + position: relative; +} + +/** + * Media Library grid view + */ + +.media-frame.mode-grid { + position: static; + .media-frame-content, .attachments-browser .attachments, .uploader-inline-content { + position: static; + } + .media-frame-title, .media-frame-router, .media-frame-menu { + display: none; + } + .media-frame-content { + background-color: transparent; + border: none; + } +} + +/* Regions we don't use at all */ + +.upload-php .mode-grid { + .media-sidebar { + position: relative; + width: auto; + margin-bottom: 16px; + padding: 0 16px; + border: 1px solid #c00; + background-color: #feebe8; + } + .hide-sidebar .media-sidebar { + display: none; + } + .media-sidebar { + .media-uploader-status { + border-bottom: none; + padding-bottom: 0; + max-width: 100%; + } + .upload-error { + margin: 20px 0; + padding: 0; + border: none; + background: none; + } + .media-uploader-status { + .upload-dismiss-errors { + font-size: 0; + top: -12px; + right: -10px; + &:before { + content: "\f158"; + font: normal 20px/1 dashicons; + color: #666; + } + &:focus:before, &:hover:before { + color: #2ea2cc; + } + } + &.errors h3 { + display: none; + } + } + } +} + +.media-frame { + &.mode-grid .uploader-inline { + position: relative; + top: auto; + right: auto; + left: auto; + bottom: auto; + padding-top: 0; + margin-top: 0; + border: 4px dashed #bbb; + } + &.mode-select .attachments-browser.fixed .attachments { + position: relative; + top: 94px; + /* prevent jumping up when the toolbar becomes fixed */ + padding-bottom: 94px; + /* offset for above so the bottom doesn't get cut off */ + } + &.mode-grid { + .attachment:focus, .selected.attachment:focus, .attachment.details:focus { + -webkit-box-shadow: inset 0 0 2px 3px #f1f1f1, inset 0 0 0 7px #5b9dd9; + box-shadow: inset 0 0 2px 3px #f1f1f1, inset 0 0 0 7px #5b9dd9; + outline: none; + } + .selected.attachment { + -webkit-box-shadow: inset 0 0 0 5px #f1f1f1, inset 0 0 0 7px #ccc; + box-shadow: inset 0 0 0 5px #f1f1f1, inset 0 0 0 7px #ccc; + } + .attachment.details { + -webkit-box-shadow: inset 0 0 0 3px #f1f1f1, inset 0 0 0 7px #1e8cbe; + box-shadow: inset 0 0 0 3px #f1f1f1, inset 0 0 0 7px #1e8cbe; + } + &.mode-select .attachment .thumbnail { + opacity: 0.65; + } + } + &.mode-select .attachment.selected .thumbnail { + opacity: 1; + } + &.mode-grid { + .media-toolbar { + margin-bottom: 15px; + height: auto; + select { + margin: 0 10px 0 0; + font-size: 14px; + } + } + .media-toolbar-secondary > .media-button { + margin-top: 10px; + margin-bottom: 10px; + } + .attachments-browser .bulk-select { + display: inline-block; + margin: 0 10px 0 0; + } + .search { + margin-top: 0; + } + .spinner { + margin-top: 15px; + } + } +} + +.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button { + margin-right: 10px; +} + +.media-frame { + &.mode-select .attachments-browser.fixed .media-toolbar { + position: fixed; + top: 32px; + left: auto; + right: 20px; + margin-top: 0; + } + &.mode-grid .attachments-browser { + padding: 0; + .attachments { + padding: 2px; + } + .no-media { + color: #999; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 100px 0 0; + text-align: center; + } + } +} + +/** + * Attachment details modal + */ + +.edit-attachment-frame { + display: block; + height: 100%; + width: 100%; + .edit-media-header { + overflow: hidden; + } +} + +.upload-php .media-modal-close { + .media-modal-icon { + &:before { + content: '\f335'; + font-size: 22px; + } + margin: 14px; + width: 22px; + } + cursor: pointer; + color: #777; + background-color: transparent; + height: 50px; + width: 50px; + padding: 0; + position: absolute; + text-align: center; + border: 0; + border-left: 1px solid #ddd; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; +} + +.edit-attachment-frame .edit-media-header { + .left, .right { + cursor: pointer; + color: #777; + background-color: transparent; + height: 50px; + width: 50px; + padding: 0; + position: absolute; + text-align: center; + border: 0; + border-left: 1px solid #ddd; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; + } +} + +.upload-php .media-modal-close { + top: 0; + right: 0; +} + +.edit-attachment-frame { + .edit-media-header { + .left { + right: 102px; + } + .right { + right: 51px; + } + } + .media-frame-title { + left: 0; + right: 150px; + /* leave space for prev/next/close */ + } + .edit-media-header { + .right:before, .left:before { + font: normal 20px/50px 'dashicons' !important; + display: inline; + font-weight: 300; + } + } +} + +.upload-php .media-modal-close { + &:hover, &:focus { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + } +} + +.edit-attachment-frame .edit-media-header { + .left:hover, .right:hover, .left:focus, .right:focus { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + } +} + +.upload-php .media-modal-close { + &:focus .media-modal-icon:before, &:hover .media-modal-icon:before { + color: #000; + } +} + +.edit-attachment-frame .edit-media-header .left:before, .rtl .edit-attachment-frame .edit-media-header .right:before { + content: '\f341'; +} + +.edit-attachment-frame .edit-media-header .right:before, .rtl .edit-attachment-frame .edit-media-header .left:before { + content: '\f345'; +} + +.edit-attachment-frame { + .edit-media-header { + .left.disabled, .right.disabled, .left.disabled:hover, .right.disabled:hover { + color: #ccc; + background: inherit; + cursor: default; + pointer-events: none; + } + } + .media-frame-content, .media-frame-router { + left: 0; + } + .media-frame-content { + border-bottom: none; + bottom: 0; + top: 50px; + } + .attachment-details { + position: absolute; + overflow: auto; + top: 0; + bottom: 0; + right: 0; + left: 0; + -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); + box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); + } + .attachment-media-view { + float: left; + width: 65%; + height: 100%; + .thumbnail { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 16px; + height: 100%; + } + .details-image { + display: block; + margin-bottom: 16px; + max-width: 100%; + max-height: 90%; + max-height: -webkit-calc( 100% - 42px ); + max-height: calc( 100% - 42px ); + /* leave space for actions underneath */ + } + } + .wp-media-wrapper { + margin-bottom: 12px; + } + input, textarea { + padding: 6px 8px; + line-height: 16px; + } + .attachment-info { + overflow: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-bottom: 0; + padding: 12px 16px 0; + width: 35%; + height: 100%; + -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); + box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1); + border-bottom: 0; + border-left: 1px solid #ddd; + background: #f3f3f3; + .details, .settings { + position: relative; + /* RTL fix, #WP29352 */ + overflow: hidden; + float: none; + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #ddd; + } + .filename { + font-weight: normal; + color: #666; + } + .thumbnail { + margin-bottom: 12px; + } + } +} + +.attachment-info .actions { + margin-bottom: 16px; + a { + display: inline; + text-decoration: none; + } +} + +/*------------------------------------------------------------------------------ + 14.2 - Image Editor +------------------------------------------------------------------------------*/ + +.wp_attachment_details { + label[for="content"] { + font-size: 13px; + line-height: 1.5; + margin: 1em 0; + } + #attachment_caption { + height: 4em; + } +} + +.describe .image-editor { + vertical-align: top; +} + +.imgedit-wrap { + position: relative; +} + +.imgedit-settings p { + margin: 8px 0 0; +} + +.describe .imgedit-wrap .imgedit-settings { + padding: 0 5px; +} + +.wp_attachment_holder { + div.updated { + margin-top: 0; + } + .imgedit-wrap { + > div { + height: auto; + overflow: hidden; + } + .imgedit-panel-content { + padding-right: 16px; + width: auto; + overflow: hidden; + } + .imgedit-settings { + float: right; + width: 250px; + } + } +} + +.imgedit-settings input { + margin-top: 0; + vertical-align: middle; +} + +.imgedit-wait { + position: absolute; + top: 0; + background: #fff url(../images/spinner.gif) no-repeat center; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; + opacity: 0.7; + filter: alpha(opacity = 70); + width: 100%; + height: 500px; + display: none; +} + +.no-float { + float: none; +} + +.media-disabled, .imgedit-settings .disabled { + color: grey; +} + +.wp_attachment_image, .A1B1 { + overflow: hidden; +} + +.wp_attachment_image .button, .A1B1 .button { + float: left; +} + +.no-js .wp_attachment_image .button { + display: none; +} + +.wp_attachment_image .spinner, .A1B1 .spinner { + float: left; + padding: 0 0 4px 0; + vertical-align: bottom; +} + +.imgedit-menu { + margin: 0 0 12px; + min-width: 300px; + div { + float: left; + width: 32px; + border: 1px solid #d5d5d5; + background: #f1f1f1; + margin: 0 8px 0 0; + height: 32px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + line-height: 28px; + color: #777; + cursor: pointer; + &:before { + font: normal 20px/1 'dashicons'; + speak: none; + vertical-align: middle; + } + &:hover { + border-color: #c1c1c1; + background-color: #eaeaea; + color: #333; + } + &.disabled { + border-color: #ccc; + background-color: #ddd; + color: #777; + filter: alpha(opacity = 50); + opacity: 0.5; + cursor: default; + } + } +} + +.imgedit-crop:before { + content: '\f165'; +} + +.imgedit-rleft:before { + content: '\f166'; +} + +.imgedit-rright:before { + content: '\f167'; +} + +.imgedit-flipv:before { + content: '\f168'; +} + +.imgedit-fliph:before { + content: '\f169'; +} + +.imgedit-undo:before { + content: '\f171'; +} + +.imgedit-redo:before { + content: '\f172'; +} + +.imgedit-crop-wrap { + position: relative; +} + +.imgedit-crop { + margin: 0 8px 0 0; +} + +.imgedit-rleft { + margin: 0 3px; +} + +.imgedit-rright { + margin: 0 8px 0 3px; +} + +.imgedit-flipv { + margin: 0 3px; +} + +.imgedit-fliph { + margin: 0 8px 0 3px; +} + +.imgedit-undo { + margin: 0 3px; +} + +.imgedit-redo { + margin: 0 8px 0 3px; +} + +.imgedit-applyto img { + margin: 0 8px 0 0; +} + +.imgedit-group-top { + margin: 5px 0; +} + +#poststuff .imgedit-group-top h3 { + padding: 0; +} + +.imgedit-group-top h3 a { + text-decoration: none; +} + +.imgedit-applyto .imgedit-label { + padding: 2px 0 0; + display: block; +} + +.imgedit-help { + display: none; + font-style: italic; +} + +a.imgedit-help-toggle { + text-decoration: none; +} + +.form-table td.imgedit-response { + padding: 0; +} + +.imgedit-submit { + margin: 8px 0; +} + +.imgedit-submit-btn { + margin-left: 20px; +} + +.imgedit-wrap .nowrap { + white-space: nowrap; +} + +span.imgedit-scale-warn { + color: red; + font-size: 20px; + font-style: normal; + visibility: hidden; + vertical-align: middle; +} + +.imgedit-group { + margin-bottom: 8px; + padding: 2px 10px; +} + +audio, video { + display: inline-block; + max-width: 100%; +} + +.mejs-container { + width: 100%; + max-width: 100%; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + .imgedit-wait { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + .wp_attachment_details label[for="content"] { + font-size: 14px; + line-height: 1.5em; + } + .media-upload-form .media-item { + &.error, .error { + font-size: 13px; + line-height: 1.5; + } + &.error { + padding: 1px 10px; + } + .error { + padding: 10px 0 10px 12px; + } + } +} + +/** + * Media queries for media grid. + */ + +@media only screen and (max-width: 1120px) { + .media-frame.mode-grid .attachments-browser .media-toolbar-secondary { + float: none; + } +} + +@media only screen and (max-width: 782px) { + .media-frame.mode-select .attachments-browser.fixed .media-toolbar { + top: 46px; + right: 10px; + } +} + +@media only screen and (max-width: 600px) { + .media-frame.mode-select .attachments-browser.fixed .media-toolbar { + top: 0; + } +} + +@media only screen and (max-width: 480px) { + .edit-attachment-frame .media-frame-title { + right: 110px; + } + .upload-php .media-modal-close { + width: 40px; + height: 40px; + } + .edit-attachment-frame .edit-media-header { + .left, .right { + width: 40px; + height: 40px; + } + } + .upload-php .media-modal-close .media-modal-icon { + margin: 9px 10px; + } + .edit-attachment-frame { + .edit-media-header { + .right:before { + line-height: 40px !important; + } + .left { + &:before { + line-height: 40px !important; + } + right: 82px; + } + .right { + right: 41px; + } + } + .media-frame-content { + top: 40px; + } + .attachment-media-view { + float: none; + height: auto; + width: 100%; + } + .attachment-info { + height: auto; + width: 100%; + } + } +} + +@media only screen and (max-width: 640px), screen and (max-height: 400px) { + .upload-php .mode-grid .media-sidebar { + max-width: 100%; + } +} diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css deleted file mode 100644 index 28e32b8..0000000 --- a/src/wp-admin/css/nav-menus.css +++ /dev/null @@ -1,857 +0,0 @@ -/* nav-menu */ - -/* @todo: determine if this is truly for nav menus only */ -.no-js #message { - display: block; -} - -ul.add-menu-item-tabs li { - padding: 3px 5px 3px 8px; -} - -.accordion-section ul.category-tabs, -.accordion-section ul.add-menu-item-tabs, -.accordion-section ul.wp-tab-bar { - margin: 0; -} - -.accordion-section .categorychecklist { - margin: 13px 0; -} - -#nav-menu-meta .accordion-section-content { - padding: 18px 13px; -} - -#nav-menu-meta .button-controls { - margin-bottom: 0; -} - -#nav-menus-frame { - margin-left: 300px; - margin-top: 23px; -} - -#wpbody-content #menu-settings-column { - display:inline; - width:281px; - margin-left: -300px; - clear: both; - float: left; - padding-top: 0; -} - -#menu-settings-column .inside { - clear: both; - margin: 10px 0 0; -} - -.metabox-holder-disabled .postbox, -.metabox-holder-disabled .accordion-section-content, -.metabox-holder-disabled .accordion-section-title { - opacity: 0.5; - filter: alpha(opacity=50); -} - -.metabox-holder-disabled .button-controls .select-all { - display: none; -} - -#wpbody { - position: relative; -} - -.blank-slate .menu-name { - height: 2em; -} - -.blank-slate .menu-settings { - border: none; - margin-top: 0; - padding-top: 0; - overflow: hidden; -} - -.is-submenu { - color: #999; - font-style: italic; - font-weight: normal; - margin-left: 4px; -} - -.manage-menus { - margin-top: 23px; - padding: 10px; - overflow: hidden; - background: #fbfbfb; -} - -.manage-menus select { - float: left; - margin-right: 6px; -} - -.manage-menus .selected-menu { - float: left; - margin: 5px 6px 0 0; -} - -.manage-menus .submit-btn { - float: left; - margin-top: 1px; -} - -.menu-edit p { - margin: .3em 0 .6em; -} - -.menu-edit #post-body-content h3 { - margin: 1em 0 10px; -} - -.menu-settings { - border-top: 1px solid #eee; - margin-top: 2em; -} - -.menu-settings dl { - margin: 0 0 10px; - overflow: hidden; - padding-left: 18%; -} - -.menu-settings dd { - float: left; - margin: 0; - width: 100%; -} - -.menu-settings dt { - float: left; - clear: both; - width: 21.951%; - padding: 3px 0 0; - margin-left: -21.951%; -} - -.menu-settings label { - vertical-align: baseline; -} - -.menu-edit .checkbox-input { - margin-top: 4px; -} - -.theme-location-set { - color: #999; - font-size: 11px; -} - -/* Menu Container */ -#menu-management-liquid { - float: left; - min-width: 100%; - margin-top: 3px; -} - -#menu-management { - position: relative; - margin-right: 20px; - margin-top: -3px; - width: 100%; - background: #f5f5f5; -} - -#menu-management .menu-edit { - margin-bottom: 20px; -} - -.nav-menus-php #post-body { - padding: 0 10px 10px; - border-top: 1px solid #fff; - border-bottom: 1px solid #dfdfdf; - background: #fff; -} - -#nav-menu-header, -#nav-menu-footer { - padding: 0 10px; -} - -#nav-menu-header { - border-bottom: 1px solid #dfdfdf; - margin-bottom: 0; -} - -#nav-menu-header .menu-name-label { - margin-top: 4px; -} - -.nav-menus-php #post-body div.updated, -.nav-menus-php #post-body div.error { - margin: 0; -} - -.nav-menus-php #post-body-content { - position: relative; - float: none; -} - -#menu-management .menu-add-new abbr { - font-weight:600; -} - -#select-nav-menu-container { - text-align: right; - padding: 0 10px 3px 10px; - margin-bottom: 5px; -} - -#select-nav-menu { - width: 100px; - display: inline; -} - -#menu-name-label { - margin-top: -2px; -} - -.widefat td.menu-location-menus { - padding-bottom: 5px; -} - -.menu-location-menus select { - float: left; -} - -#locations-nav-menu-wrapper { - padding: 5px 0; -} - -.locations-nav-menu-select select { - float: left; - width: 160px; - margin-right: 5px; -} - -.locations-row-links { - float: left; - margin: 6px 0 0 6px; -} - -.locations-edit-menu-link, -.locations-add-menu-link { - margin: 0 3px; -} - -.locations-edit-menu-link { - padding-right: 3px; - border-right: 1px solid #ccc; -} - -#wpbody .open-label { - display: block; - float:left; -} - -#wpbody .open-label span { - padding-right: 10px; -} - -.js .input-with-default-title { - color: #aaa; - font-style: italic; -} - -#menu-management .inside { - padding: 0 10px; -} - -/* Add Menu Item Boxes */ -.postbox .howto input, -.accordion-container .howto input { - width: 180px; - float: right; -} - -.accordion-container .outer-border { - margin: 0; -} - -.customlinkdiv .howto input { - width: 180px; -} - -.customlinkdiv p { - margin-top: 0 -} - -#nav-menu-theme-locations .howto select { - width: 100%; -} - -#nav-menu-theme-locations .button-controls { - text-align: right; -} - -.add-menu-item-view-all { - height: 400px; -} - -/* Button Primary Actions */ -#menu-container .submit { - margin: 0 0 10px; - padding: 0; -} - -.nav-menus-php .add-new-menu-action { - float: left; - margin: 6px 0 0 6px; - line-height: 15px; -} - -.nav-menus-php .meta-sep, -.nav-menus-php .submitdelete, -.nav-menus-php .submitcancel { - display: block; - float: left; - margin: 6px 0; - line-height: 15px; -} - -.meta-sep { - padding: 0 2px; -} - -/* @todo: is this actually used? */ -#cancel-save { - text-decoration: underline; - font-size: 12px; - margin-left: 20px; - margin-top: 5px; -} - -.button.right, .button-secondary.right, .button-primary.right { - float: right; -} - -/* Button Secondary Actions */ -.list-controls { - float: left; - margin-top: 5px; -} - -.add-to-menu { - float: right; -} - -.postbox .spinner { - display: none; - vertical-align: middle; -} - -.button-controls { - clear:both; - margin: 10px 0; -} - -.show-all, -.hide-all { - cursor: pointer; -} - -.hide-all { - display: none; -} - -/* Create Menu */ -#menu-name { - width: 270px; -} - -#manage-menu .inside { - padding: 0px 0px; -} - -/* Custom Links */ -#available-links dt { - display: block; -} - -#add-custom-link .howto { - font-size: 12px; -} - -#add-custom-link label span { - display: block; - float: left; - margin-top: 5px; - padding-right: 5px; -} - -.menu-item-textbox { - width: 180px; -} - -.nav-menus-php .howto span { - margin-top: 6px; - display: block; - float: left; -} - -/* Menu item types */ -.quick-search { - width: 190px; -} - -.nav-menus-php .list-wrap { - display: none; - clear: both; - margin-bottom: 10px; -} - -.nav-menus-php .postbox p.submit { - margin-bottom: 0; -} - -/* Listings */ -.nav-menus-php .list li { - display: none; - margin: 0; - margin-bottom: 5px; -} - -.nav-menus-php .list li .menu-item-title { - cursor: pointer; - display: block; -} - -.nav-menus-php .list li .menu-item-title input { - margin-right: 3px; - margin-top: -3px; -} - -.menu-item-title input[type=checkbox] { - display: inline-block; - margin-top: -4px; -} - -/* Nav Menu */ -#menu-container .inside { - padding-bottom: 10px; -} - -.menu { - padding-top:1em; -} - -#menu-to-edit { - margin: 0; - padding: 0.1em 0; -} - -.menu ul { - width: 100%; -} - -.menu li { - margin-bottom: 0; - position:relative; -} - -.menu-item-bar { - clear:both; - line-height:1.5em; - position:relative; - margin: 9px 0 0; -} - -.menu-item-bar .menu-item-handle { - border: 1px solid #dfdfdf; - position: relative; - padding: 10px 15px; - height: auto; - width: 382px; - line-height: 30px; - overflow: hidden; - word-wrap: break-word; -} - -.menu-item-bar .menu-item-handle:hover { - border-color: #999; -} - -#menu-to-edit .menu-item-invalid .menu-item-handle { - background: #f6c9cc; - border-color: #f1acb1; -} - -.no-js .menu-item-edit-active .item-edit { - display: none; -} - -.js .menu-item-handle { - cursor: move; -} - -.menu li.deleting .menu-item-handle { - background-image: none; - background-color: #f66; -} - -.menu-item-handle .item-title { - font-size: 13px; - font-weight: 600; - line-height: 20px; - display: block; - margin-right: 13em; -} - -.menu-item-handle .menu-item-title.no-title { - color: #999; -} - -/* Sortables */ -li.menu-item.ui-sortable-helper dl { - margin-top: 0; -} - -li.menu-item.ui-sortable-helper .menu-item-transport dl { - margin-top: 13px; -} - -.menu .sortable-placeholder { - height: 35px; - width: 410px; - margin-top: 13px; -} - -/* WARNING: The factor of 30px is hardcoded into the nav-menus javascript. */ -.menu-item-depth-0 { margin-left: 0px; } -.menu-item-depth-1 { margin-left: 30px; } -.menu-item-depth-2 { margin-left: 60px; } -.menu-item-depth-3 { margin-left: 90px; } -.menu-item-depth-4 { margin-left: 120px; } -.menu-item-depth-5 { margin-left: 150px; } -.menu-item-depth-6 { margin-left: 180px; } -.menu-item-depth-7 { margin-left: 210px; } -.menu-item-depth-8 { margin-left: 240px; } -.menu-item-depth-9 { margin-left: 270px; } -.menu-item-depth-10 { margin-left: 300px; } -.menu-item-depth-11 { margin-left: 330px; } - -.menu-item-depth-0 .menu-item-transport { margin-left: 0px; } -.menu-item-depth-1 .menu-item-transport { margin-left: -30px; } -.menu-item-depth-2 .menu-item-transport { margin-left: -60px; } -.menu-item-depth-3 .menu-item-transport { margin-left: -90px; } -.menu-item-depth-4 .menu-item-transport { margin-left: -120px; } -.menu-item-depth-5 .menu-item-transport { margin-left: -150px; } -.menu-item-depth-6 .menu-item-transport { margin-left: -180px; } -.menu-item-depth-7 .menu-item-transport { margin-left: -210px; } -.menu-item-depth-8 .menu-item-transport { margin-left: -240px; } -.menu-item-depth-9 .menu-item-transport { margin-left: -270px; } -.menu-item-depth-10 .menu-item-transport { margin-left: -300px; } -.menu-item-depth-11 .menu-item-transport { margin-left: -330px; } - -body.menu-max-depth-0 { min-width: 950px !important; } -body.menu-max-depth-1 { min-width: 980px !important; } -body.menu-max-depth-2 { min-width: 1010px !important; } -body.menu-max-depth-3 { min-width: 1040px !important; } -body.menu-max-depth-4 { min-width: 1070px !important; } -body.menu-max-depth-5 { min-width: 1100px !important; } -body.menu-max-depth-6 { min-width: 1130px !important; } -body.menu-max-depth-7 { min-width: 1160px !important; } -body.menu-max-depth-8 { min-width: 1190px !important; } -body.menu-max-depth-9 { min-width: 1220px !important; } -body.menu-max-depth-10 { min-width: 1250px !important; } -body.menu-max-depth-11 { min-width: 1280px !important; } - -/* Menu item controls */ -.item-type { - color: #777; - font-size: 12px; - padding: 12px 10px; - line-height: 18px; - display: block; -} - -.item-controls { - font-size: 12px; - position: absolute; - right: 20px; - top: -1px; -} - -.item-controls a { - text-decoration: none; -} - -.item-controls a:hover { - cursor: pointer; -} - -.item-controls .item-order { - padding-right: 10px; -} - -.nav-menus-php .item-edit { - position: absolute; - right: -20px; - top: 0; - display: block; - width: 30px; - height: 40px; - margin-right: 0 !important; - text-indent: 100%; - outline: none; - overflow: hidden; - white-space: nowrap; -} - -/* Menu editing */ -.menu-instructions-inactive { - display: none; -} - -.menu-item-settings { - display: block; - width: 402px; - padding: 10px 0 10px 10px; - position: relative; - z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */ - border: 1px solid #e5e5e5; - border-top: none; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); -} - -.menu-item-settings .field-move a { - display: none; - margin: 0 2px; -} - -.menu-item-edit-active .menu-item-settings { - display: block; -} - -.menu-item-edit-inactive .menu-item-settings { - display: none; -} - -.add-menu-item-pagelinks { - margin: .5em auto; - text-align: center; -} - -.link-to-original { - display: block; - margin: 0 0 10px; - padding: 3px 5px 5px; - border: 1px solid #dfdfdf; - color: #777; - font-size: 12px; - font-style: italic; -} - -.link-to-original a { - padding-left: 4px; - font-style: normal; -} - -.hidden-field { - display: none; -} - -.menu-item-settings .description-thin, -.menu-item-settings .description-wide { - margin-right: 10px; - float: left; -} - -.description-thin { - width: 190px; - height: 40px; -} - -.description-wide { - width: 390px; -} - -.menu-item-actions { - padding-top: 15px; -} - -#cancel-save { - cursor: pointer; -} - -/* Major/minor publishing actions (classes) */ -.nav-menus-php .major-publishing-actions { - clear: both; - padding: 3px 0 6px; -} - -.nav-menus-php .major-publishing-actions .publishing-action { - text-align: right; - float: right; - line-height: 23px; - margin: 4px 0 1px; -} - -.nav-menus-php .blank-slate .menu-settings { - display: none; -} - -.nav-menus-php .delete-action { - float: left; - margin-top: 2px; -} - -.nav-menus-php .submitbox .submitcancel { - border-bottom: 1px solid #0074a2; - padding: 1px 2px; - color: #0074a2; - text-decoration: none; -} - -.nav-menus-php .submitbox .submitcancel:hover { - background: #0074a2; - color: #fff; -} - -.nav-menus-php .major-publishing-actions .form-invalid { - padding-left: 4px; - margin-left: -4px; -} - -/* Clearfix */ -#menu-item-name-wrap:after, -#menu-item-url-wrap:after, -#menu-name-label:after, -#menu-settings-column .inside:after, -#nav-menus-frame:after, -.nav-menus-php #post-body-content:after, -.nav-menus-php .button-controls:after, -.nav-menus-php .major-publishing-actions:after, -.nav-menus-php .menu-item-settings:after { - clear: both; - content: "."; - display: block; - height: 0; - visibility: hidden; -} - -#nav-menus-frame, -.button-controls, -#menu-item-url-wrap, -#menu-item-name-wrap { - display: block; -} - -/* =Media Queries --------------------------------------------------------------- */ - -@media screen and ( max-width: 782px ) { - body.nav-menus-php { - min-width: 0 !important; - } - - #nav-menus-frame { - margin-left: 0; - float: none; - width: 100%; - } - - #wpbody-content #menu-settings-column { - display: block; - width: 100%; - float: none; - margin-left: 0; - } - - #side-sortables .add-menu-item-tabs { - margin: 15px 0 14px; - } - - ul.add-menu-item-tabs li.tabs { - padding: 13px 15px 14px; - } - - .nav-menus-php .item-controls .item-type { - margin-top: 2px; - } - - .nav-menus-php .customlinkdiv .howto input { - width: 65%; - } - - .nav-menus-php .quick-search { - width: 85%; - } - - #menu-management-liquid { - margin-top: 25px; - } - - .nav-menus-php .menu-name-label.howto span { - margin-top: 13px - } - - .menu-name-label #menu-name { - margin-top: 4px; - } - - .nav-menus-php .major-publishing-actions .publishing-action { - margin-top: 6px; - } - - .nav-menus-php .delete-action { - font-size: 14px; - line-height: 50px; - margin-top: 12px; - } - - .menu-item-bar .menu-item-handle, - .menu-item-settings, - .description-wide { - width: auto; - } - - .menu-item-settings { - padding: 10px; - } - - .menu-item-settings .description-thin, - .menu-item-settings .description-wide { - width: 100%; - height: auto; - } - - .menu-item-settings input { - width: 100%; - } - - .menu-settings dl { - padding-left: 0; - } - - .menu-settings dd { - float: none; - width: 100%; - margin-bottom: 15px; - } - - .menu-settings dt { - float: none; - width: auto; - margin-left: 0; - margin-bottom: 15px; - } -} - -@media only screen and (max-width: 768px) { - /* menu locations */ - #menu-locations-wrap .widefat { - width: 100%; - } -} diff --git a/src/wp-admin/css/nav-menus.scss b/src/wp-admin/css/nav-menus.scss new file mode 100644 index 0000000..8f3f018 --- /dev/null +++ b/src/wp-admin/css/nav-menus.scss @@ -0,0 +1,945 @@ +/* nav-menu */ + +/* @todo: determine if this is truly for nav menus only */ + +.no-js #message { + display: block; +} + +ul.add-menu-item-tabs li { + padding: 3px 5px 3px 8px; +} + +.accordion-section { + ul { + &.category-tabs, &.add-menu-item-tabs, &.wp-tab-bar { + margin: 0; + } + } + .categorychecklist { + margin: 13px 0; + } +} + +#nav-menu-meta { + .accordion-section-content { + padding: 18px 13px; + } + .button-controls { + margin-bottom: 0; + } +} + +#nav-menus-frame { + margin-left: 300px; + margin-top: 23px; +} + +#wpbody-content #menu-settings-column { + display: inline; + width: 281px; + margin-left: -300px; + clear: both; + float: left; + padding-top: 0; +} + +#menu-settings-column .inside { + clear: both; + margin: 10px 0 0; +} + +.metabox-holder-disabled { + .postbox, .accordion-section-content, .accordion-section-title { + opacity: 0.5; + filter: alpha(opacity = 50); + } + .button-controls .select-all { + display: none; + } +} + +#wpbody { + position: relative; +} + +.blank-slate { + .menu-name { + height: 2em; + } + .menu-settings { + border: none; + margin-top: 0; + padding-top: 0; + overflow: hidden; + } +} + +.is-submenu { + color: #999; + font-style: italic; + font-weight: normal; + margin-left: 4px; +} + +.manage-menus { + margin-top: 23px; + padding: 10px; + overflow: hidden; + background: #fbfbfb; + select { + float: left; + margin-right: 6px; + } + .selected-menu { + float: left; + margin: 5px 6px 0 0; + } + .submit-btn { + float: left; + margin-top: 1px; + } +} + +.menu-edit { + p { + margin: .3em 0 .6em; + } + #post-body-content h3 { + margin: 1em 0 10px; + } +} + +.menu-settings { + border-top: 1px solid #eee; + margin-top: 2em; + dl { + margin: 0 0 10px; + overflow: hidden; + padding-left: 18%; + } + dd { + float: left; + margin: 0; + width: 100%; + } + dt { + float: left; + clear: both; + width: 21.951%; + padding: 3px 0 0; + margin-left: -21.951%; + } + label { + vertical-align: baseline; + } +} + +.menu-edit .checkbox-input { + margin-top: 4px; +} + +.theme-location-set { + color: #999; + font-size: 11px; +} + +/* Menu Container */ + +#menu-management-liquid { + float: left; + min-width: 100%; + margin-top: 3px; +} + +#menu-management { + position: relative; + margin-right: 20px; + margin-top: -3px; + width: 100%; + background: #f5f5f5; + .menu-edit { + margin-bottom: 20px; + } +} + +.nav-menus-php #post-body { + padding: 0 10px 10px; + border-top: 1px solid #fff; + border-bottom: 1px solid #dfdfdf; + background: #fff; +} + +#nav-menu-header, #nav-menu-footer { + padding: 0 10px; +} + +#nav-menu-header { + border-bottom: 1px solid #dfdfdf; + margin-bottom: 0; + .menu-name-label { + margin-top: 4px; + } +} + +.nav-menus-php { + #post-body div { + &.updated, &.error { + margin: 0; + } + } + #post-body-content { + position: relative; + float: none; + } +} + +#menu-management .menu-add-new abbr { + font-weight: 600; +} + +#select-nav-menu-container { + text-align: right; + padding: 0 10px 3px 10px; + margin-bottom: 5px; +} + +#select-nav-menu { + width: 100px; + display: inline; +} + +#menu-name-label { + margin-top: -2px; +} + +.widefat td.menu-location-menus { + padding-bottom: 5px; +} + +.menu-location-menus select { + float: left; +} + +#locations-nav-menu-wrapper { + padding: 5px 0; +} + +.locations-nav-menu-select select { + float: left; + width: 160px; + margin-right: 5px; +} + +.locations-row-links { + float: left; + margin: 6px 0 0 6px; +} + +.locations-edit-menu-link, .locations-add-menu-link { + margin: 0 3px; +} + +.locations-edit-menu-link { + padding-right: 3px; + border-right: 1px solid #ccc; +} + +#wpbody .open-label { + display: block; + float: left; + span { + padding-right: 10px; + } +} + +.js .input-with-default-title { + color: #aaa; + font-style: italic; +} + +#menu-management .inside { + padding: 0 10px; +} + +/* Add Menu Item Boxes */ + +.postbox .howto input { + width: 180px; + float: right; +} + +.accordion-container { + .howto input { + width: 180px; + float: right; + } + .outer-border { + margin: 0; + } +} + +.customlinkdiv { + .howto input { + width: 180px; + } + p { + margin-top: 0; + } +} + +#nav-menu-theme-locations { + .howto select { + width: 100%; + } + .button-controls { + text-align: right; + } +} + +.add-menu-item-view-all { + height: 400px; +} + +/* Button Primary Actions */ + +#menu-container .submit { + margin: 0 0 10px; + padding: 0; +} + +.nav-menus-php { + .add-new-menu-action { + float: left; + margin: 6px 0 0 6px; + line-height: 15px; + } + .meta-sep, .submitdelete, .submitcancel { + display: block; + float: left; + margin: 6px 0; + line-height: 15px; + } +} + +.meta-sep { + padding: 0 2px; +} + +/* @todo: is this actually used? */ + +#cancel-save { + text-decoration: underline; + font-size: 12px; + margin-left: 20px; + margin-top: 5px; +} + +.button.right, .button-secondary.right, .button-primary.right { + float: right; +} + +/* Button Secondary Actions */ + +.list-controls { + float: left; + margin-top: 5px; +} + +.add-to-menu { + float: right; +} + +.postbox .spinner { + display: none; + vertical-align: middle; +} + +.button-controls { + clear: both; + margin: 10px 0; +} + +.show-all { + cursor: pointer; +} + +.hide-all { + cursor: pointer; + display: none; +} + +/* Create Menu */ + +#menu-name { + width: 270px; +} + +#manage-menu .inside { + padding: 0px 0px; +} + +/* Custom Links */ + +#available-links dt { + display: block; +} + +#add-custom-link { + .howto { + font-size: 12px; + } + label span { + display: block; + float: left; + margin-top: 5px; + padding-right: 5px; + } +} + +.menu-item-textbox { + width: 180px; +} + +.nav-menus-php .howto span { + margin-top: 6px; + display: block; + float: left; +} + +/* Menu item types */ + +.quick-search { + width: 190px; +} + +.nav-menus-php { + .list-wrap { + display: none; + clear: both; + margin-bottom: 10px; + } + .postbox p.submit { + margin-bottom: 0; + } + .list li { + display: none; + margin: 0; + margin-bottom: 5px; + .menu-item-title { + cursor: pointer; + display: block; + input { + margin-right: 3px; + margin-top: -3px; + } + } + } +} + +/* Listings */ + +.menu-item-title input[type=checkbox] { + display: inline-block; + margin-top: -4px; +} + +/* Nav Menu */ + +#menu-container .inside { + padding-bottom: 10px; +} + +.menu { + padding-top: 1em; +} + +#menu-to-edit { + margin: 0; + padding: 0.1em 0; +} + +.menu { + ul { + width: 100%; + } + li { + margin-bottom: 0; + position: relative; + } +} + +.menu-item-bar { + clear: both; + line-height: 1.5em; + position: relative; + margin: 9px 0 0; + .menu-item-handle { + border: 1px solid #dfdfdf; + position: relative; + padding: 10px 15px; + height: auto; + width: 382px; + line-height: 30px; + overflow: hidden; + word-wrap: break-word; + &:hover { + border-color: #999; + } + } +} + +#menu-to-edit .menu-item-invalid .menu-item-handle { + background: #f6c9cc; + border-color: #f1acb1; +} + +.no-js .menu-item-edit-active .item-edit { + display: none; +} + +.js .menu-item-handle { + cursor: move; +} + +.menu li.deleting .menu-item-handle { + background-image: none; + background-color: #f66; +} + +.menu-item-handle { + .item-title { + font-size: 13px; + font-weight: 600; + line-height: 20px; + display: block; + margin-right: 13em; + } + .menu-item-title.no-title { + color: #999; + } +} + +/* Sortables */ + +li.menu-item.ui-sortable-helper { + dl { + margin-top: 0; + } + .menu-item-transport dl { + margin-top: 13px; + } +} + +.menu .sortable-placeholder { + height: 35px; + width: 410px; + margin-top: 13px; +} + +/* WARNING: The factor of 30px is hardcoded into the nav-menus javascript. */ + +.menu-item-depth-0 { + margin-left: 0px; +} + +.menu-item-depth-1 { + margin-left: 30px; +} + +.menu-item-depth-2 { + margin-left: 60px; +} + +.menu-item-depth-3 { + margin-left: 90px; +} + +.menu-item-depth-4 { + margin-left: 120px; +} + +.menu-item-depth-5 { + margin-left: 150px; +} + +.menu-item-depth-6 { + margin-left: 180px; +} + +.menu-item-depth-7 { + margin-left: 210px; +} + +.menu-item-depth-8 { + margin-left: 240px; +} + +.menu-item-depth-9 { + margin-left: 270px; +} + +.menu-item-depth-10 { + margin-left: 300px; +} + +.menu-item-depth-11 { + margin-left: 330px; +} + +.menu-item-depth-0 .menu-item-transport { + margin-left: 0px; +} + +.menu-item-depth-1 .menu-item-transport { + margin-left: -30px; +} + +.menu-item-depth-2 .menu-item-transport { + margin-left: -60px; +} + +.menu-item-depth-3 .menu-item-transport { + margin-left: -90px; +} + +.menu-item-depth-4 .menu-item-transport { + margin-left: -120px; +} + +.menu-item-depth-5 .menu-item-transport { + margin-left: -150px; +} + +.menu-item-depth-6 .menu-item-transport { + margin-left: -180px; +} + +.menu-item-depth-7 .menu-item-transport { + margin-left: -210px; +} + +.menu-item-depth-8 .menu-item-transport { + margin-left: -240px; +} + +.menu-item-depth-9 .menu-item-transport { + margin-left: -270px; +} + +.menu-item-depth-10 .menu-item-transport { + margin-left: -300px; +} + +.menu-item-depth-11 .menu-item-transport { + margin-left: -330px; +} + +body { + &.menu-max-depth-0 { + min-width: 950px !important; + } + &.menu-max-depth-1 { + min-width: 980px !important; + } + &.menu-max-depth-2 { + min-width: 1010px !important; + } + &.menu-max-depth-3 { + min-width: 1040px !important; + } + &.menu-max-depth-4 { + min-width: 1070px !important; + } + &.menu-max-depth-5 { + min-width: 1100px !important; + } + &.menu-max-depth-6 { + min-width: 1130px !important; + } + &.menu-max-depth-7 { + min-width: 1160px !important; + } + &.menu-max-depth-8 { + min-width: 1190px !important; + } + &.menu-max-depth-9 { + min-width: 1220px !important; + } + &.menu-max-depth-10 { + min-width: 1250px !important; + } + &.menu-max-depth-11 { + min-width: 1280px !important; + } +} + +/* Menu item controls */ + +.item-type { + color: #777; + font-size: 12px; + padding: 12px 10px; + line-height: 18px; + display: block; +} + +.item-controls { + font-size: 12px; + position: absolute; + right: 20px; + top: -1px; + a { + text-decoration: none; + &:hover { + cursor: pointer; + } + } + .item-order { + padding-right: 10px; + } +} + +.nav-menus-php .item-edit { + position: absolute; + right: -20px; + top: 0; + display: block; + width: 30px; + height: 40px; + margin-right: 0 !important; + text-indent: 100%; + outline: none; + overflow: hidden; + white-space: nowrap; +} + +/* Menu editing */ + +.menu-instructions-inactive { + display: none; +} + +.menu-item-settings { + display: block; + width: 402px; + padding: 10px 0 10px 10px; + position: relative; + z-index: 10; + /* Keep .item-title's shadow from appearing on top of .menu-item-settings */ + border: 1px solid #e5e5e5; + border-top: none; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + .field-move a { + display: none; + margin: 0 2px; + } +} + +.menu-item-edit-active .menu-item-settings { + display: block; +} + +.menu-item-edit-inactive .menu-item-settings { + display: none; +} + +.add-menu-item-pagelinks { + margin: .5em auto; + text-align: center; +} + +.link-to-original { + display: block; + margin: 0 0 10px; + padding: 3px 5px 5px; + border: 1px solid #dfdfdf; + color: #777; + font-size: 12px; + font-style: italic; + a { + padding-left: 4px; + font-style: normal; + } +} + +.hidden-field { + display: none; +} + +.menu-item-settings { + .description-thin, .description-wide { + margin-right: 10px; + float: left; + } +} + +.description-thin { + width: 190px; + height: 40px; +} + +.description-wide { + width: 390px; +} + +.menu-item-actions { + padding-top: 15px; +} + +#cancel-save { + cursor: pointer; +} + +/* Major/minor publishing actions (classes) */ + +.nav-menus-php { + .major-publishing-actions { + clear: both; + padding: 3px 0 6px; + .publishing-action { + text-align: right; + float: right; + line-height: 23px; + margin: 4px 0 1px; + } + } + .blank-slate .menu-settings { + display: none; + } + .delete-action { + float: left; + margin-top: 2px; + } + .submitbox .submitcancel { + border-bottom: 1px solid #0074a2; + padding: 1px 2px; + color: #0074a2; + text-decoration: none; + &:hover { + background: #0074a2; + color: #fff; + } + } + .major-publishing-actions .form-invalid { + padding-left: 4px; + margin-left: -4px; + } +} + +/* Clearfix */ + +#menu-item-name-wrap:after, #menu-item-url-wrap:after, #menu-name-label:after, #menu-settings-column .inside:after, #nav-menus-frame:after { + clear: both; + content: "."; + display: block; + height: 0; + visibility: hidden; +} + +.nav-menus-php { + #post-body-content:after, .button-controls:after, .major-publishing-actions:after, .menu-item-settings:after { + clear: both; + content: "."; + display: block; + height: 0; + visibility: hidden; + } +} + +#nav-menus-frame, .button-controls, #menu-item-url-wrap, #menu-item-name-wrap { + display: block; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 782px) { + body.nav-menus-php { + min-width: 0 !important; + } + #nav-menus-frame { + margin-left: 0; + float: none; + width: 100%; + } + #wpbody-content #menu-settings-column { + display: block; + width: 100%; + float: none; + margin-left: 0; + } + #side-sortables .add-menu-item-tabs { + margin: 15px 0 14px; + } + ul.add-menu-item-tabs li.tabs { + padding: 13px 15px 14px; + } + .nav-menus-php { + .item-controls .item-type { + margin-top: 2px; + } + .customlinkdiv .howto input { + width: 65%; + } + .quick-search { + width: 85%; + } + } + #menu-management-liquid { + margin-top: 25px; + } + .nav-menus-php .menu-name-label.howto span { + margin-top: 13px; + } + .menu-name-label #menu-name { + margin-top: 4px; + } + .nav-menus-php { + .major-publishing-actions .publishing-action { + margin-top: 6px; + } + .delete-action { + font-size: 14px; + line-height: 50px; + margin-top: 12px; + } + } + .menu-item-bar .menu-item-handle, .menu-item-settings, .description-wide { + width: auto; + } + .menu-item-settings { + padding: 10px; + .description-thin, .description-wide { + width: 100%; + height: auto; + } + input { + width: 100%; + } + } + .menu-settings { + dl { + padding-left: 0; + } + dd { + float: none; + width: 100%; + margin-bottom: 15px; + } + dt { + float: none; + width: auto; + margin-left: 0; + margin-bottom: 15px; + } + } +} + +@media only screen and (max-width: 768px) { + /* menu locations */ + #menu-locations-wrap .widefat { + width: 100%; + } +} diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css deleted file mode 100644 index dbf355a..0000000 --- a/src/wp-admin/css/press-this.css +++ /dev/null @@ -1,458 +0,0 @@ -.press-this #message { - border-left: 4px solid #7ad03a; - padding: 1px 12px; - background-color: #fff; - -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); -} - -.press-this #side-sortables .category-tabs li { - display: inline; - line-height: 1.35em; -} - -body.press-this ul.category-tabs li.tabs a { - color: #333; -} - -.press-this #content-resize-handle { - bottom: 2px; -} - -body.press-this { - color: #333; - margin: 0; - padding: 0; - min-width: 708px; - min-height: 400px; -} - -.press-this #titlediv #title { - font-size: 1.4em; -} - -.press-this #site-heading:before { - top: 3px; - position: relative; - display: inline-block; - font: normal 18px/1 'dashicons'; - speak: none; - color: #727272; - content: '\f120'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.press-this #wphead { - height: 32px; - margin-left: 0; - margin-right: 0; - margin-bottom: 5px; -} - -.press-this #header-logo { - float: left; - margin: 7px 7px 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.press-this #wphead h1 { - font-weight: normal; - font-size: 16px; - line-height: 32px; - margin: 0; - float: left; -} - -.press-this #wphead h1 a { - text-decoration: none; -} - -.press-this #wphead h1 a:hover { - text-decoration: underline; -} - -.press-this #message { - margin: 10px 0; -} - -.press-this .posting { - margin-right: 250px; -} - -.press-this-sidebar { - float: right; - width: 240px; - padding-top: 10px; -} - -.press-this #title { - margin-left: 0; - margin-right: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.press-this .tagchecklist { - margin-top: 8px; -} - -.press-this #titlediv { - margin: 0; -} - -.press-this #wp-content-wrap #wp-content-editor-tools { - padding: 0; - top: 3px; - overflow: hidden; -} - -.press-this .wp-media-buttons { - cursor: default; - padding: 8px 8px 6px; -} - -.press-this #wp-content-wrap #wp-content-media-buttons a { - padding: 0; - line-height: normal; - height: auto; - font-size: 16px; -} - -.press-this #wp-content-wrap .mce-toolbar .mce-btn-group .mce-btn { - margin: 0 1px; -} - -.press-this #wp-content-wrap .mce-toolbar .mce-btn button { - padding: 2px 3px; -} - -.press-this #wp-content-wrap div.mce-toolbar-grp, -.press-this #wp-content-wrap .quicktags-toolbar { - padding-right: 3px; -} - -.press-this .howto { - margin-top: 2px; - margin-bottom: 3px; - font-size: 12px; - font-style: italic; - display: block; -} - -.press-this #wp-content-editor-container { - clear: none; -} - -.press-this #poststuff .inside { - margin-top: 18px; -} - -.press-this .category-tabs { - margin-bottom: 3px; -} - -/* Editor/Main Column */ -.press-this #poststuff { - margin: 0 8px; - padding: 0; -} - -.press-this #photo-add-url-div input[type="text"] { - width: 220px; -} - -#poststuff #editor-toolbar { - height: 30px; -} - -.posting { - margin-right: 212px; - position: relative; -} - -.press-this .inner-sidebar { - width: 200px; -} - -.press-this .inner-sidebar .sleeve { - padding-top: 5px; -} - -.press-this #submitdiv p { - margin: 0; - padding: 6px; -} - -.press-this #submitdiv #publishing-actions { - border-bottom: 1px solid #dfdfdf; -} - -.press-this #publish { - float: right; -} - -.press-this #poststuff h2, -.press-this #poststuff h3 { - font-size: 14px; - line-height: 1; -} - -.press-this #tagsdiv-post_tag h3, -.press-this #categorydiv h3 { - cursor: pointer; -} - -.press-this #submitdiv h3 { - cursor: default; -} - -h3.tb { - font-weight: 600; - font-size: 12px; - margin-left: 5px; -} - -.press-this .postbox, -.press-this .stuffbox { - margin-bottom: 10px; - min-width: 0; -} - -.press-this #submitdiv:hover .handlediv { - background: none; -} - -.tbtitle { - font-size: 1.7em; - outline: none; - padding: 3px 4px; - border: 1px solid #dfdfdf; -} - -.press-this .actions { - float: right; - margin: -19px 0 0; -} - -.press-this #extra-fields .actions { - margin: -32px -7px 0 0; -} - -.press-this .actions li { - float: left; - list-style: none; - margin-right: 10px; -} - -#extra-fields .button { - margin-right: 5px; -} - -/* Photo Styles */ -#photo_saving { - margin: 0 8px 8px; - vertical-align: middle; -} - -#img_container_container { - overflow: auto; -} - -#extra-fields { - margin-top: 10px; - position: relative; -} - -#extra-fields h2 { - margin: 12px; -} - -#waiting { - margin-top: 10px; - overflow: hidden; -} - -#waiting span { - float: right; - margin: 0 0 0 5px; -} - -#waiting .spinner { - display: block; -} - -#extra-fields .postbox { - margin-bottom: 5px; -} - -#extra-fields .titlewrap { - padding: 0; - overflow: auto; - height: 120px; -} - -#img_container a { - display: block; - float: left; - overflow: hidden; -} - -#img_container img, -#img_container a { - width: 68px; - height: 68px; -} - -#img_container img { - border: none; - background-color: #f4f4f4; - cursor: pointer; -} - -#img_container a, -#img_container a:link, -#img_container a:visited { - border: 1px solid #ccc; - display: block; - position: relative; -} - -#img_container a:hover, -#img_container a:active { - border-color: #000; - z-index: 1000; - border-width: 1px; -} - -/* Video */ -#embed-code { - width: 100%; - height: 98px; -} - -/* Categories */ -.press-this .categorydiv div.tabs-panel { - height: 100px; -} - -/* Tags */ -.press-this .tagsdiv .newtag { - width: 120px; -} - -.press-this #content { - margin: 5px 0; - padding: 0 5px; - border: 0 none; - height: 340px; - font-family: Consolas, Monaco, monospace; - font-size: 13px; - line-height: 19px; - background: transparent; -} - -/* Submit */ -.press-this #publishing-actions .spinner { - display: inline; - vertical-align: middle; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/* Reset responsive styles in Press This */ -@media screen and ( max-width: 782px ) { - .press-this ul.category-tabs li.tabs { - padding: 3px 5px 5px; /* Reset tabs in Press This to standard size */ - } - - .press-this a.wp-switch-editor { - font: 13px/19px "Open Sans", sans-serif; - margin: 5px 0 0 5px; - padding: 3px 8px 4px; - } - - .press-this #wp-content-media-buttons a { - padding: 0; - line-height: normal; - height: auto; - } - - .press-this #wp-content-editor-tools { - padding: 0; - top: 3px; - } - - .press-this .category-tabs { - margin-top: 0; - } - - .press-this .tagsdiv .newtag { - width: 120px; - padding: 3px 5px; - margin-bottom: 0; - } - - .press-this .tagchecklist { - padding: 0; - margin-bottom: 0; - } - - .press-this .wp_themeSkin a.mceButton { - width: 20px; - height: 20px; - } - - .press-this .wp_themeSkin .mceButton .mceIcon { - margin: 0; - } - - .press-this #poststuff h3, - .press-this .metabox-holder h3 { - padding: 7px 12px; - } - - .press-this input[type=checkbox], - .press-this input[type=radio] { - height: 16px; - width: 16px; - } - - .press-this input[type=checkbox]:checked:before { - width: 16px; - font: normal 21px/1 'dashicons'; - margin: -3px 0 0 -4px; - } - - .press-this input[type=radio]:checked:before { - font: normal 21px/1 'dashicons'; - width: 6px; - height: 6px; - margin: 4px; - } - - .press-this ul.categorychecklist ul, - .press-this ul.categorychecklist li { - margin-top: 0; - margin-bottom: 0; - } - - .press-this div.quicktags-toolbar input { - padding: 2px 4px; - } - - .press-this textarea, - .press-this input { - font-size: 14px; - } - - .press-this .tagchecklist span { - font-size: 13px; - line-height: 1.8em; - } -} diff --git a/src/wp-admin/css/press-this.scss b/src/wp-admin/css/press-this.scss new file mode 100644 index 0000000..abcaac4 --- /dev/null +++ b/src/wp-admin/css/press-this.scss @@ -0,0 +1,432 @@ +.press-this { + #message { + border-left: 4px solid #7ad03a; + padding: 1px 12px; + background-color: #fff; + -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + } + #side-sortables .category-tabs li { + display: inline; + line-height: 1.35em; + } +} + +body.press-this ul.category-tabs li.tabs a { + color: #333; +} + +.press-this #content-resize-handle { + bottom: 2px; +} + +body.press-this { + color: #333; + margin: 0; + padding: 0; + min-width: 708px; + min-height: 400px; +} + +.press-this { + #titlediv #title { + font-size: 1.4em; + } + #site-heading:before { + top: 3px; + position: relative; + display: inline-block; + font: normal 18px/1 'dashicons'; + speak: none; + color: #727272; + content: '\f120'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + #wphead { + height: 32px; + margin-left: 0; + margin-right: 0; + margin-bottom: 5px; + } + #header-logo { + float: left; + margin: 7px 7px 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + #wphead h1 { + font-weight: normal; + font-size: 16px; + line-height: 32px; + margin: 0; + float: left; + a { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } + #message { + margin: 10px 0; + } + .posting { + margin-right: 250px; + } +} + +.press-this-sidebar { + float: right; + width: 240px; + padding-top: 10px; +} + +.press-this { + #title { + margin-left: 0; + margin-right: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .tagchecklist { + margin-top: 8px; + } + #titlediv { + margin: 0; + } + #wp-content-wrap #wp-content-editor-tools { + padding: 0; + top: 3px; + overflow: hidden; + } + .wp-media-buttons { + cursor: default; + padding: 8px 8px 6px; + } + #wp-content-wrap { + #wp-content-media-buttons a { + padding: 0; + line-height: normal; + height: auto; + font-size: 16px; + } + .mce-toolbar { + .mce-btn-group .mce-btn { + margin: 0 1px; + } + .mce-btn button { + padding: 2px 3px; + } + } + div.mce-toolbar-grp, .quicktags-toolbar { + padding-right: 3px; + } + } + .howto { + margin-top: 2px; + margin-bottom: 3px; + font-size: 12px; + font-style: italic; + display: block; + } + #wp-content-editor-container { + clear: none; + } + #poststuff .inside { + margin-top: 18px; + } + .category-tabs { + margin-bottom: 3px; + } + #poststuff { + margin: 0 8px; + padding: 0; + } + #photo-add-url-div input[type="text"] { + width: 220px; + } +} + +/* Editor/Main Column */ + +#poststuff #editor-toolbar { + height: 30px; +} + +.posting { + margin-right: 212px; + position: relative; +} + +.press-this { + .inner-sidebar { + width: 200px; + .sleeve { + padding-top: 5px; + } + } + #submitdiv { + p { + margin: 0; + padding: 6px; + } + #publishing-actions { + border-bottom: 1px solid #dfdfdf; + } + } + #publish { + float: right; + } + #poststuff { + h2, h3 { + font-size: 14px; + line-height: 1; + } + } + #tagsdiv-post_tag h3, #categorydiv h3 { + cursor: pointer; + } + #submitdiv h3 { + cursor: default; + } +} + +h3.tb { + font-weight: 600; + font-size: 12px; + margin-left: 5px; +} + +.press-this { + .postbox, .stuffbox { + margin-bottom: 10px; + min-width: 0; + } + #submitdiv:hover .handlediv { + background: none; + } +} + +.tbtitle { + font-size: 1.7em; + outline: none; + padding: 3px 4px; + border: 1px solid #dfdfdf; +} + +.press-this { + .actions { + float: right; + margin: -19px 0 0; + } + #extra-fields .actions { + margin: -32px -7px 0 0; + } + .actions li { + float: left; + list-style: none; + margin-right: 10px; + } +} + +#extra-fields .button { + margin-right: 5px; +} + +/* Photo Styles */ + +#photo_saving { + margin: 0 8px 8px; + vertical-align: middle; +} + +#img_container_container { + overflow: auto; +} + +#extra-fields { + margin-top: 10px; + position: relative; + h2 { + margin: 12px; + } +} + +#waiting { + margin-top: 10px; + overflow: hidden; + span { + float: right; + margin: 0 0 0 5px; + } + .spinner { + display: block; + } +} + +#extra-fields { + .postbox { + margin-bottom: 5px; + } + .titlewrap { + padding: 0; + overflow: auto; + height: 120px; + } +} + +#img_container { + a { + display: block; + float: left; + overflow: hidden; + } + img, a { + width: 68px; + height: 68px; + } + img { + border: none; + background-color: #f4f4f4; + cursor: pointer; + } + a { + border: 1px solid #ccc; + display: block; + position: relative; + &:link, &:visited { + border: 1px solid #ccc; + display: block; + position: relative; + } + &:hover, &:active { + border-color: #000; + z-index: 1000; + border-width: 1px; + } + } +} + +/* Video */ + +#embed-code { + width: 100%; + height: 98px; +} + +/* Categories */ + +.press-this { + .categorydiv div.tabs-panel { + height: 100px; + } + .tagsdiv .newtag { + width: 120px; + } + #content { + margin: 5px 0; + padding: 0 5px; + border: 0 none; + height: 340px; + font-family: Consolas, Monaco, monospace; + font-size: 13px; + line-height: 19px; + background: transparent; + } + #publishing-actions .spinner { + display: inline; + vertical-align: middle; + } +} + +/* Tags */ + +/* Submit */ + +/* =Media Queries +-------------------------------------------------------------- */ + +/* Reset responsive styles in Press This */ +@media screen and (max-width: 782px) { + .press-this { + ul.category-tabs li.tabs { + padding: 3px 5px 5px; + /* Reset tabs in Press This to standard size */ + } + a.wp-switch-editor { + font: 13px/19px "Open Sans", sans-serif; + margin: 5px 0 0 5px; + padding: 3px 8px 4px; + } + #wp-content-media-buttons a { + padding: 0; + line-height: normal; + height: auto; + } + #wp-content-editor-tools { + padding: 0; + top: 3px; + } + .category-tabs { + margin-top: 0; + } + .tagsdiv .newtag { + width: 120px; + padding: 3px 5px; + margin-bottom: 0; + } + .tagchecklist { + padding: 0; + margin-bottom: 0; + } + .wp_themeSkin { + a.mceButton { + width: 20px; + height: 20px; + } + .mceButton .mceIcon { + margin: 0; + } + } + #poststuff h3, .metabox-holder h3 { + padding: 7px 12px; + } + input { + &[type=checkbox], &[type=radio] { + height: 16px; + width: 16px; + } + &[type=checkbox]:checked:before { + width: 16px; + font: normal 21px/1 'dashicons'; + margin: -3px 0 0 -4px; + } + &[type=radio]:checked:before { + font: normal 21px/1 'dashicons'; + width: 6px; + height: 6px; + margin: 4px; + } + } + ul.categorychecklist { + ul, li { + margin-top: 0; + margin-bottom: 0; + } + } + div.quicktags-toolbar input { + padding: 2px 4px; + } + textarea, input { + font-size: 14px; + } + .tagchecklist span { + font-size: 13px; + line-height: 1.8em; + } + } +} diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css deleted file mode 100644 index f191494..0000000 --- a/src/wp-admin/css/revisions.css +++ /dev/null @@ -1,574 +0,0 @@ -/*------------------------------------------------------------------------------ - 11.2 - Post Revisions -------------------------------------------------------------------------------*/ -.revisions-control-frame, -.revisions-diff-frame { - position: relative; -} - -.revisions-controls { - padding-top: 40px; - height: 100px; - z-index: 1; -} - -.revisions-controls input[type="checkbox"] { - position: relative; - top: -1px; - vertical-align: text-bottom; -} - -.revisions.pinned .revisions-controls { - position: fixed; - top: 0; - height: 82px; - background: #fff; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -.revisions-tickmarks { - position: relative; - margin: 0 auto; - height: 0.7em; - top: 7px; - max-width: 70%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - background-color: #fff; -} - -.revisions-tickmarks > div { - position: absolute; - height: 100%; - border-left: 1px solid #aaa; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.revisions-tickmarks > div:first-child { - border-width: 0; -} - -.comparing-two-revisions .revisions-controls { - height: 140px; -} - -.comparing-two-revisions.pinned .revisions-controls { - height: 124px; -} - -.revisions .diff-error { - position: absolute; - text-align: center; - margin: 0 auto; - width: 100%; - display: none; -} - -.revisions.diff-error .diff-error { - display: block; -} - -.revisions .loading-indicator { - position: absolute; - vertical-align: middle; - opacity: 0; - width: 100%; - width: -webkit-calc( 100% - 30px ); - width: calc( 100% - 30px ); - top: 50%; - top: -webkit-calc( 50% - 10px ); - top: calc( 50% - 10px ); - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; - filter: alpha(opacity=0); /* ie8 and earlier */ -} - -body.folded .revisions .loading-indicator { - margin-left: -32px; -} - -.revisions .loading-indicator span.spinner { - display: block; - margin: 0 auto; - float: none; -} - -.revisions.loading .loading-indicator { - opacity: 1; - filter: alpha(opacity=100); /* ie8 and earlier */ -} - -.revisions .diff { - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} - -.revisions.loading .diff { - opacity: 0.5; - filter: alpha(opacity=50); /* ie8 and earlier */ -} - -.revisions.diff-error .diff { - visibility: hidden; -} - -.revisions-meta { - margin-top: 20px; - background-color: #fff; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -.revisions.pinned .revisions-meta { - -webkit-box-shadow: none; - box-shadow: none; -} - -.revision-toggle-compare-mode { - position: absolute; - top: 0; - right: 0; -} - -.comparing-two-revisions .revisions-previous, -.comparing-two-revisions .revisions-next, -.revisions-meta .diff-meta-to strong { - display: none; -} - -.revisions-controls .author-card .date { - color: #777; -} - -.revisions-controls .author-card.autosave { - color: #d54e21; -} - -.revisions-controls .author-card .author-name { - font-weight: bold; -} - -.comparing-two-revisions .diff-meta-to strong { - display: block; -} - -.revisions.pinned .revisions-buttons { - padding: 0 11px; -} - -.revisions-previous, -.revisions-next { - position: relative; - z-index: 1; -} - -.revisions-previous { - float: left; -} - -.revisions-next { - float: right; -} - -.revisions-controls .wp-slider { - max-width: 70%; - margin: 0 auto; - top: -3px; -} - -.revisions-diff { - padding: 15px; - background-color: #fff; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -.revisions-diff h3:first-child { - margin-top: 0; -} - -/* Revision meta box */ -.post-revisions li img, -#revisions-meta-restored img { - vertical-align: middle; -} - -table.diff tbody tr td:nth-child(2) { - width: 4%; -} - -table.diff { - table-layout: fixed; - width: 100%; - white-space: pre-wrap; -} - -table.diff col.content { - width: auto; -} - -table.diff col.content.diffsplit { - width: 48%; -} - -table.diff col.diffsplit.middle { - width: auto; -} - -table.diff col.ltype { - width: 30px; -} - -table.diff tr { - background-color: transparent; -} - -table.diff td, -table.diff th { - font-family: Consolas, Monaco, monospace; - font-size: 14px; - line-height: 1.618; - padding: .5em; - vertical-align: top; - word-wrap: break-word; -} - -table.diff td h1, -table.diff td h2, -table.diff td h3, -table.diff td h4, -table.diff td h5, -table.diff td h6 { - margin: 0; -} - -table.diff .diff-deletedline del, -table.diff .diff-addedline ins { - text-decoration: none; -} - -table.diff .diff-deletedline { - background-color: #ffe9e9; -} - -table.diff .diff-deletedline del { - background-color: #faa; -} - -table.diff .diff-addedline { - background-color: #e9ffe9; -} - -table.diff .diff-addedline ins { - background-color: #afa; -} - -.diff-meta { - padding: 5px; - clear: both; - min-height: 32px; -} - -.diff-title strong { - line-height: 32px; - min-width: 60px; - text-align: right; - float: left; - margin-right: 5px; -} - -.revisions-controls .author-card .author-info { - font-size: 12px; - line-height: 16px; -} - -.revisions-controls .author-card .avatar, -.revisions-controls .author-card .author-info { - float: left; - margin-left: 6px; - margin-right: 6px; -} - -.revisions-controls .author-card .byline { - display: block; - font-size: 12px; -} - -.revisions-controls .author-card .avatar { - vertical-align: middle; -} - -.diff-meta input.restore-revision { - float: right; - margin-left: 6px; - margin-right: 6px; - margin-top: 4px; -} - -.diff-meta-from { - display: none; -} - -.comparing-two-revisions .diff-meta-from { - display: block; -} - -.revisions-tooltip { - position: absolute; - bottom: 105px; - margin-right: 0; - margin-left: -69px; - z-index: 0; - max-width: 350px; - min-width: 130px; - padding: 8px 4px; - display: none; - opacity: 0; -} - -.revisions-tooltip.flipped { - margin-left: 0; - margin-right: -70px; -} - -.revisions.pinned .revisions-tooltip { - display: none !important; -} - -.comparing-two-revisions .revisions-tooltip { - bottom: 145px; -} - -.revisions-tooltip-arrow { - width: 70px; - height: 15px; - overflow: hidden; - position: absolute; - left: 0; - margin-left: 35px; - bottom: -15px; -} - -.revisions-tooltip.flipped .revisions-tooltip-arrow { - margin-left: 0; - margin-right: 35px; - left: auto; - right: 0; -} - -.revisions-tooltip-arrow > span { - content: ""; - position: absolute; - left: 20px; - top: -20px; - width: 25px; - height: 25px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -.revisions-tooltip.flipped .revisions-tooltip-arrow > span { - left: auto; - right: 20px; -} - -.ie8 .revisions-tooltip-arrow > span { - left: 15px; - top: -25px; - -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; -} - -.ie8 .revisions-tooltip.flipped .revisions-tooltip-arrow > span { - right: 25px; -} - -.revisions-tooltip, -.revisions-tooltip-arrow > span { - border: 1px solid #d7d7d7; - background-color: #fff; -} - -.revisions-tooltip { - display: none; -} - -.arrow { - width: 70px; - height: 16px; - overflow: hidden; - position: absolute; - left: 0; - margin-left: -35px; - bottom: 90px; - z-index: 10000; -} - -.arrow:after { - z-index: 9999; - background-color: #fff; - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -.arrow.top { - top: -16px; - bottom: auto; -} - -.arrow.left { - left: 20%; -} - -.arrow:after { - content: ""; - position: absolute; - left: 20px; - top: -20px; - width: 25px; - height: 25px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -.revisions-tooltip, -.revisions-tooltip-arrow:after { - border-width: 1px; - border-style: solid; -} - -div.revisions-controls > .wp-slider > .ui-slider-handle { - margin-left: -10px; -} - -.rtl div.revisions-controls > .wp-slider > .ui-slider-handle { - margin-right: -10px; -} - - /* jQuery UI Slider */ -.wp-slider.ui-slider { - position: relative; - border: 1px solid #d7d7d7; - text-align: left; - cursor: pointer; -} - -.wp-slider .ui-slider-handle { - -webkit-border-radius: 50%; - border-radius: 50%; - height: 18px; - margin-top: -3px; - outline: none; - position: absolute; - width: 18px; - z-index: 2; -} - -.wp-slider .ui-slider-handle, -.wp-slider .ui-slider-handle.ui-state-hover, -.wp-slider .ui-slider-handle.focus { - background: #2ea2cc; - border: 1px solid #0074a2; - -webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15); - box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15); -} - -.wp-slider .ui-slider-handle:before { - background: none; - position: absolute; - top: 0; - left: 0; - color: #fff; - content: "\f229"; - font: normal 18px/1 'dashicons'; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.wp-slider .ui-slider-handle.from-handle:before, -.wp-slider .ui-slider-handle.to-handle:before { - font-size: 20px !important; - margin: -1px 0 0 -1px; -} - -.wp-slider .ui-slider-handle.from-handle:before { - content: '\f139'; -} - -.wp-slider .ui-slider-handle.to-handle:before { - content: '\f141'; -} - -.rtl .wp-slider .ui-slider-handle.from-handle:before { - content: '\f141'; -} - -.rtl .wp-slider .ui-slider-handle.to-handle:before { - content: '\f139'; - right: -1px; -} - -.wp-slider .ui-slider-range { - position: absolute; - font-size: .7em; - display: block; - border: 0; - background-color: transparent; - background-image: none; -} - -.wp-slider.ui-slider-horizontal { - height: .7em; -} - -.wp-slider.ui-slider-horizontal .ui-slider-handle { - top: -.25em; - margin-left: -.6em; -} - -.wp-slider.ui-slider-horizontal .ui-slider-range { - top: 0; - height: 100%; -} - -.wp-slider.ui-slider-horizontal .ui-slider-range-min { - left: 0; -} - -.wp-slider.ui-slider-horizontal .ui-slider-range-max { - right: 0; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - .revision-tick.completed-false { - background-image: url(../images/spinner-2x.gif); - } -} - -@media screen and ( max-width: 782px ) { - #diff-next-revision, - #diff-previous-revision { - margin-top: -1em; - } - - table.diff { - -ms-word-break: break-all; - word-break: break-all; - word-wrap: break-word; - } -} diff --git a/src/wp-admin/css/revisions.scss b/src/wp-admin/css/revisions.scss new file mode 100644 index 0000000..1b3600b --- /dev/null +++ b/src/wp-admin/css/revisions.scss @@ -0,0 +1,542 @@ +/*------------------------------------------------------------------------------ + 11.2 - Post Revisions +------------------------------------------------------------------------------*/ + +.revisions-control-frame, .revisions-diff-frame { + position: relative; +} + +.revisions-controls { + padding-top: 40px; + height: 100px; + z-index: 1; + input[type="checkbox"] { + position: relative; + top: -1px; + vertical-align: text-bottom; + } +} + +.revisions.pinned .revisions-controls { + position: fixed; + top: 0; + height: 82px; + background: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.revisions-tickmarks { + position: relative; + margin: 0 auto; + height: 0.7em; + top: 7px; + max-width: 70%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background-color: #fff; + > div { + position: absolute; + height: 100%; + border-left: 1px solid #aaa; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + &:first-child { + border-width: 0; + } + } +} + +.comparing-two-revisions { + .revisions-controls { + height: 140px; + } + &.pinned .revisions-controls { + height: 124px; + } +} + +.revisions { + .diff-error { + position: absolute; + text-align: center; + margin: 0 auto; + width: 100%; + display: none; + } + &.diff-error .diff-error { + display: block; + } + .loading-indicator { + position: absolute; + vertical-align: middle; + opacity: 0; + width: 100%; + width: -webkit-calc( 100% - 30px ); + width: calc( 100% - 30px ); + top: 50%; + top: -webkit-calc( 50% - 10px ); + top: calc( 50% - 10px ); + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; + filter: alpha(opacity = 0); + /* ie8 and earlier */ + } +} + +body.folded .revisions .loading-indicator { + margin-left: -32px; +} + +.revisions { + .loading-indicator span.spinner { + display: block; + margin: 0 auto; + float: none; + } + &.loading .loading-indicator { + opacity: 1; + filter: alpha(opacity = 100); + /* ie8 and earlier */ + } + .diff { + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; + } + &.loading .diff { + opacity: 0.5; + filter: alpha(opacity = 50); + /* ie8 and earlier */ + } + &.diff-error .diff { + visibility: hidden; + } +} + +.revisions-meta { + margin-top: 20px; + background-color: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.revisions.pinned .revisions-meta { + -webkit-box-shadow: none; + box-shadow: none; +} + +.revision-toggle-compare-mode { + position: absolute; + top: 0; + right: 0; +} + +.comparing-two-revisions { + .revisions-previous, .revisions-next { + display: none; + } +} + +.revisions-meta .diff-meta-to strong { + display: none; +} + +.revisions-controls .author-card { + .date { + color: #777; + } + &.autosave { + color: #d54e21; + } + .author-name { + font-weight: bold; + } +} + +.comparing-two-revisions .diff-meta-to strong { + display: block; +} + +.revisions.pinned .revisions-buttons { + padding: 0 11px; +} + +.revisions-previous, .revisions-next { + position: relative; + z-index: 1; +} + +.revisions-previous { + float: left; +} + +.revisions-next { + float: right; +} + +.revisions-controls .wp-slider { + max-width: 70%; + margin: 0 auto; + top: -3px; +} + +.revisions-diff { + padding: 15px; + background-color: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + h3:first-child { + margin-top: 0; + } +} + +/* Revision meta box */ + +.post-revisions li img, #revisions-meta-restored img { + vertical-align: middle; +} + +table.diff { + tbody tr td:nth-child(2) { + width: 4%; + } + table-layout: fixed; + width: 100%; + white-space: pre-wrap; + col { + &.content { + width: auto; + &.diffsplit { + width: 48%; + } + } + &.diffsplit.middle { + width: auto; + } + &.ltype { + width: 30px; + } + } + tr { + background-color: transparent; + } + td, th { + font-family: Consolas, Monaco, monospace; + font-size: 14px; + line-height: 1.618; + padding: .5em; + vertical-align: top; + word-wrap: break-word; + } + td { + h1, h2, h3, h4, h5, h6 { + margin: 0; + } + } + .diff-deletedline del, .diff-addedline ins { + text-decoration: none; + } + .diff-deletedline { + background-color: #ffe9e9; + del { + background-color: #faa; + } + } + .diff-addedline { + background-color: #e9ffe9; + ins { + background-color: #afa; + } + } +} + +.diff-meta { + padding: 5px; + clear: both; + min-height: 32px; +} + +.diff-title strong { + line-height: 32px; + min-width: 60px; + text-align: right; + float: left; + margin-right: 5px; +} + +.revisions-controls .author-card { + .author-info { + font-size: 12px; + line-height: 16px; + } + .avatar, .author-info { + float: left; + margin-left: 6px; + margin-right: 6px; + } + .byline { + display: block; + font-size: 12px; + } + .avatar { + vertical-align: middle; + } +} + +.diff-meta input.restore-revision { + float: right; + margin-left: 6px; + margin-right: 6px; + margin-top: 4px; +} + +.diff-meta-from { + display: none; +} + +.comparing-two-revisions .diff-meta-from { + display: block; +} + +.revisions-tooltip { + position: absolute; + bottom: 105px; + margin-right: 0; + margin-left: -69px; + z-index: 0; + max-width: 350px; + min-width: 130px; + padding: 8px 4px; + display: none; + opacity: 0; + &.flipped { + margin-left: 0; + margin-right: -70px; + } +} + +.revisions.pinned .revisions-tooltip { + display: none !important; +} + +.comparing-two-revisions .revisions-tooltip { + bottom: 145px; +} + +.revisions-tooltip-arrow { + width: 70px; + height: 15px; + overflow: hidden; + position: absolute; + left: 0; + margin-left: 35px; + bottom: -15px; +} + +.revisions-tooltip.flipped .revisions-tooltip-arrow { + margin-left: 0; + margin-right: 35px; + left: auto; + right: 0; +} + +.revisions-tooltip-arrow > span { + content: ""; + position: absolute; + left: 20px; + top: -20px; + width: 25px; + height: 25px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.revisions-tooltip.flipped .revisions-tooltip-arrow > span { + left: auto; + right: 20px; +} + +.ie8 { + .revisions-tooltip-arrow > span { + left: 15px; + top: -25px; + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; + } + .revisions-tooltip.flipped .revisions-tooltip-arrow > span { + right: 25px; + } +} + +.revisions-tooltip, .revisions-tooltip-arrow > span { + border: 1px solid #d7d7d7; + background-color: #fff; +} + +.revisions-tooltip { + display: none; +} + +.arrow { + width: 70px; + height: 16px; + overflow: hidden; + position: absolute; + left: 0; + margin-left: -35px; + bottom: 90px; + z-index: 10000; + &:after { + z-index: 9999; + background-color: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + } + &.top { + top: -16px; + bottom: auto; + } + &.left { + left: 20%; + } + &:after { + content: ""; + position: absolute; + left: 20px; + top: -20px; + width: 25px; + height: 25px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } +} + +.revisions-tooltip, .revisions-tooltip-arrow:after { + border-width: 1px; + border-style: solid; +} + +div.revisions-controls > .wp-slider > .ui-slider-handle { + margin-left: -10px; +} + +.rtl div.revisions-controls > .wp-slider > .ui-slider-handle { + margin-right: -10px; +} + +/* jQuery UI Slider */ + +.wp-slider { + &.ui-slider { + position: relative; + border: 1px solid #d7d7d7; + text-align: left; + cursor: pointer; + } + .ui-slider-handle { + -webkit-border-radius: 50%; + border-radius: 50%; + height: 18px; + margin-top: -3px; + outline: none; + position: absolute; + width: 18px; + z-index: 2; + background: #2ea2cc; + border: 1px solid #0074a2; + -webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0, 0, 0, 0.15); + &.ui-state-hover, &.focus { + background: #2ea2cc; + border: 1px solid #0074a2; + -webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0, 0, 0, 0.15); + } + &:before { + background: none; + position: absolute; + top: 0; + left: 0; + color: #fff; + content: "\f229"; + font: normal 18px/1 'dashicons'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + &.from-handle:before, &.to-handle:before { + font-size: 20px !important; + margin: -1px 0 0 -1px; + } + &.from-handle:before { + content: '\f139'; + } + &.to-handle:before { + content: '\f141'; + } + } +} + +.rtl .wp-slider .ui-slider-handle { + &.from-handle:before { + content: '\f141'; + } + &.to-handle:before { + content: '\f139'; + right: -1px; + } +} + +.wp-slider { + .ui-slider-range { + position: absolute; + font-size: .7em; + display: block; + border: 0; + background-color: transparent; + background-image: none; + } + &.ui-slider-horizontal { + height: .7em; + .ui-slider-handle { + top: -.25em; + margin-left: -.6em; + } + .ui-slider-range { + top: 0; + height: 100%; + } + .ui-slider-range-min { + left: 0; + } + .ui-slider-range-max { + right: 0; + } + } +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + .revision-tick.completed-false { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + #diff-next-revision, #diff-previous-revision { + margin-top: -1em; + } + table.diff { + -ms-word-break: break-all; + word-break: break-all; + word-wrap: break-word; + } +} diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css deleted file mode 100644 index 6ff0f9f..0000000 --- a/src/wp-admin/css/themes.css +++ /dev/null @@ -1,1732 +0,0 @@ -/*------------------------------------------------------------------------------ - 16.0 - Themes -------------------------------------------------------------------------------*/ - - -/*------------------------------------------------------------------------------ - 16.1 - Manage Themes -------------------------------------------------------------------------------*/ - -.theme-browser .themes { - clear: both; - padding: 0 0 100px; -} - -.themes-php .wrap h2 { - float: left; - margin-bottom: 15px; -} - -.network-admin.themes-php .wrap h2 { - margin-bottom: 0; -} - -.themes-php .wrap h2 .button { - margin-left: 20px; -} - -/* Search form */ -.themes-php .wp-filter-search { - position: relative; - top: -2px; - left: 20px; - margin: 0; - width: 280px; - font-size: 16px; - font-weight: 300; - line-height: 1.5; -} - -/* Position admin messages */ -.themes-php div.updated, -.themes-php div.error { - margin: 0 0 20px 0; - clear: both; -} - -.themes-php div.updated a { - text-decoration: underline; -} - -/** - * Main theme element - * (has flexible margins) - */ -.theme-browser .theme { - cursor: pointer; - float: left; - margin: 0 4% 4% 0; - position: relative; - width: 30.6%; - border: 1px solid #dedede; - -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); - box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.ie8 .theme-browser .theme { - width: 30%; - margin: 0 3% 4% 0; -} - -.theme-browser .theme:nth-child(3n) { - margin-right: 0; -} - -.theme-browser .theme:hover, -.theme-browser .theme:focus { - cursor: pointer; -} - -.theme-browser .theme .theme-name { - font-size: 15px; - font-weight: 600; - height: 18px; - margin: 0; - padding: 15px; - -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); - box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - background: #fff; - background: rgba(255,255,255,0.65); -} - -/* Activate and Customize buttons, shown on hover and focus */ -.theme-browser .theme .theme-actions { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - opacity: 0; - -webkit-transition: opacity 0.1s ease-in-out; - transition: opacity 0.1s ease-in-out; - position: absolute; - bottom: 0; - right: 0; - height: 38px; - padding: 9px 10px 0 10px; - background: rgba(244, 244, 244, 0.7); - border-left: 1px solid rgba(0,0,0,0.05); -} - -.theme-browser .theme:hover .theme-actions, -.theme-browser .theme.focus .theme-actions, -.theme-browser .theme:focus .theme-actions { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} - -.theme-browser .theme .theme-actions .button-primary { - margin-right: 3px; -} - -.theme-browser .theme .theme-actions .button-secondary { - float: none; - margin-left: 3px; -} - -/** - * Theme Screenshot - * - * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size - * It is also responsive. - */ -.theme-browser .theme .theme-screenshot { - display: block; - overflow: hidden; - position: relative; - -webkit-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; -} - -.theme-browser .theme .theme-screenshot:after { - content: ''; - display: block; - padding-top: 66.66666%; /* using a 3/2 aspect ratio */ -} - -.theme-browser .theme .theme-screenshot img { - height: auto; - position: absolute; - left: 0; - top: 0; - width: 100%; - -webkit-transform: translateZ( 0 ); /* Prevents rendering bugs in Chrome */ - -webkit-transition: opacity 0.2s ease-in-out; /* Prevents rendering bugs in Chrome */ - transition: opacity 0.2s ease-in-out; -} - -.theme-browser .theme:hover .theme-screenshot, -.theme-browser .theme:focus .theme-screenshot { - background: #fff; -} - -.theme-browser.rendered .theme:hover .theme-screenshot img, -.theme-browser.rendered .theme:focus .theme-screenshot img { - opacity: 0.4; -} - -.theme-browser .theme .more-details { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - opacity: 0; - position: absolute; - top: 35%; - right: 25%; - left: 25%; - background: #222; - background: rgba(0,0,0,0.7); - color: #fff; - font-size: 15px; - text-shadow: 0 1px 0 rgba(0,0,0,0.6); - -webkit-font-smoothing: antialiased; - font-weight: 600; - padding: 15px 12px; - text-align: center; - -webkit-border-radius: 3px; - border-radius: 3px; - -webkit-transition: opacity 0.1s ease-in-out; - transition: opacity 0.1s ease-in-out; -} - -.theme-browser .theme:focus { - border-color: #5b9dd9; - -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); - box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); -} - -.theme-browser .theme:focus .more-details { - opacity: 1; -} - -/* Current theme needs to have its action always on view */ -.theme-browser .theme.active:focus .theme-actions { - display: block; -} - -.theme-browser.rendered .theme:hover .more-details, -.theme-browser.rendered .theme:focus .more-details { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; -} - -/** - * Displays a theme update notice - * when an update is available. - */ -.theme-browser .theme .theme-update, -.theme-browser .theme .theme-installed { - background: #d54e21; - background: rgba(213, 78, 33, 0.95); - color: #fff; - display: block; - font-size: 13px; - font-weight: 400; - height: 48px; - line-height: 48px; - padding: 0 10px; - position: absolute; - top: 0; - right: 0; - left: 0; - border-bottom: 1px solid rgba(0,0,0,0.25); - overflow: hidden; -} - -.theme-browser .theme .theme-update:before, -.theme-browser .theme .theme-installed:before { - content: '\f463'; - display: inline-block; - font: normal 20px/1 'dashicons'; - margin: 0 6px 0 0; - opacity: 0.8; - position: relative; - top: 5px; - speak: none; - -webkit-font-smoothing: antialiased; -} - - -/** - * The currently active theme - */ -.theme-browser .theme.active .theme-name { - background: #2f2f2f; - color: #fff; - padding-right: 110px; - font-weight: 300; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); - box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); -} - -.theme-browser .theme.active .theme-name span { - font-weight: 600; -} - -.theme-browser .theme.active .theme-actions { - background: rgba(49,49,49,0.7); - border-left: none; - opacity: 1; -} - -.theme-browser .theme.active .theme-actions .button-primary { - margin-right: 0; -} - -.theme-browser .theme .theme-author { - background: #222; - color: #eee; - display: none; - font-size: 14px; - margin: 0 10px; - padding: 5px 10px; - position: absolute; - bottom: 56px; -} - -.theme-browser .theme.display-author .theme-author { - display: block; -} - -.theme-browser .theme.display-author .theme-author a { - color: inherit; - text-decoration: none; -} - -/** - * Add new theme - */ -.theme-browser .theme.add-new-theme { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.theme-browser .theme.add-new-theme a { - color: #999; - text-decoration: none; - display: block; - position: relative; - z-index: 1; -} - -.theme-browser .theme.add-new-theme:after { - display: block; - content: ''; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity: 1; - background: transparent; - background: rgba(0, 0, 0, 0); - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 10% 0 0 0; - text-shadow: none; - border: 5px dashed #d5d2ca; - border: 5px dashed rgba(0, 0, 0, 0.1); - -webkit-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.theme-browser .theme.add-new-theme span:after { - background: #e5e5e5; - background: rgba(153, 153, 153, 0.1); - -webkit-border-radius: 50%; - border-radius: 50%; - display: inline-block; - content: '\f132'; - -webkit-font-smoothing: antialiased; - font: normal 74px/115px 'dashicons'; - width: 100px; - height: 100px; - vertical-align: middle; - text-align: center; - color: rgb(153, 153, 153); - position: absolute; - top: 30%; - left: 50%; - margin-left: -50px; - text-indent: -4px; - padding: 0; - text-shadow: none; - z-index:4; -} - -.rtl .theme-browser .theme.add-new-theme span:after { - text-indent: 4px; -} - -.theme-browser .theme.add-new-theme:hover .theme-screenshot, -.theme-browser .theme.add-new-theme:focus .theme-screenshot { - background: none; -} - -.theme-browser .theme.add-new-theme:hover span:after, -.theme-browser .theme.add-new-theme:focus span:after { - background: #fff; - color: #0074a2; -} - -.theme-browser .theme.add-new-theme:hover:after, -.theme-browser .theme.add-new-theme:focus:after { - border-color: transparent; - color: #fff; - background: #0074a2; - content: ''; -} - -.theme-browser .theme.add-new-theme .theme-name { - background: none; - text-align: center; - -webkit-box-shadow: none; - box-shadow: none; - font-weight: 400; - position: relative; - top: 0; - margin-top: -10%; - margin-bottom: 10%; -} - -.theme-browser .theme.add-new-theme:hover .theme-name, -.theme-browser .theme.add-new-theme:focus .theme-name { - color: #fff; - z-index: 2; -} - -/** - * Theme Overlay - * Shown when clicking a theme - */ -.theme-overlay .theme-backdrop { - position: absolute; - left: -20px; - right: 0; - top: 0; - bottom: 0; - background: #f1f1f1; - background: rgba( 238, 238, 238, 0.9 ); - z-index: 10; -} - -.theme-overlay .theme-header { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 48px; - border-bottom: 1px solid #ddd; -} - -.theme-overlay .theme-header .close { - cursor: pointer; - height: 48px; - width: 50px; - text-align: center; - float: right; - border: 0; - border-left: 1px solid #ddd; - background-color: transparent; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -.theme-overlay .theme-header .close:before { - font: normal 22px/50px 'dashicons' !important; - color: #777; - display: inline-block; - content: '\f335'; - font-weight: 300; -} - -/* Left and right navigation */ -.theme-overlay .theme-header .right, -.theme-overlay .theme-header .left { - cursor: pointer; - color: #777; - background-color: transparent; - height: 48px; - width: 54px; - float: left; - text-align: center; - border: 0; - border-right: 1px solid #ddd; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -.theme-overlay .theme-header .close:focus, -.theme-overlay .theme-header .close:hover, -.theme-overlay .theme-header .right:focus, -.theme-overlay .theme-header .right:hover, -.theme-overlay .theme-header .left:focus, -.theme-overlay .theme-header .left:hover { - background: #ddd; - border-color: #ccc; - color: #000; -} - -.theme-overlay .theme-header .close:focus:before, -.theme-overlay .theme-header .close:hover:before { - color: #000; -} - -.theme-overlay .theme-header .close:focus, -.theme-overlay .theme-header .right:focus, -.theme-overlay .theme-header .left:focus { - -webkit-box-shadow: none; - box-shadow: none; - outline: none; -} - -.theme-overlay .theme-header .left.disabled, -.theme-overlay .theme-header .right.disabled, -.theme-overlay .theme-header .left.disabled:hover, -.theme-overlay .theme-header .right.disabled:hover { - color: #ccc; - background: inherit; - cursor: inherit; -} - -.theme-overlay .theme-header .right:before, -.theme-overlay .theme-header .left:before { - font: normal 20px/50px 'dashicons' !important; - display: inline; - font-weight: 300; -} - -.theme-overlay .theme-header .left:before, -.rtl .theme-overlay .theme-header .right:before { - content: '\f341'; -} - -.theme-overlay .theme-header .right:before, -.rtl .theme-overlay .theme-header .left:before { - content: '\f345'; -} - - - -.theme-overlay .theme-wrap { - clear: both; - position: fixed; - top: 9%; - left: 190px; - right: 30px; - bottom: 3%; - background: #fff; - -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); - z-index: 20; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.theme-overlay .theme-wrap:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -body.folded .theme-overlay .theme-wrap { - left: 70px; -} - -.theme-overlay .theme-about { - position: absolute; - top: 49px; - bottom: 57px; - left: 0; - right: 0; - overflow: auto; - padding: 2% 4%; -} -.theme-overlay .theme-about:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.theme-overlay .theme-actions { - position: absolute; - text-align: center; - bottom: 0; - left: 0; - right: 0; - padding: 10px 25px 5px; - background: #f3f3f3; - z-index: 30; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - border-top: 1px solid #eee; -} - -.ie8 .theme-overlay .theme-actions { - border: 1px solid #eee; -} - -.theme-overlay .theme-actions a { - margin-right: 5px; - margin-bottom: 5px; -} - -.theme-overlay .theme-actions .delete-theme { - color: #a00; - position: absolute; - right: 10px; - bottom: 5px; - text-decoration: none; - border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - background: transparent; -} - -.theme-overlay .theme-actions .delete-theme:hover, -.theme-overlay .theme-actions .delete-theme:focus { - background: #d54e21; - color: #fff; - border-color: #d54e21; -} - -.theme-overlay .theme-actions .active-theme, -.theme-overlay.active .theme-actions .inactive-theme { - display: none; -} - -.theme-overlay .theme-actions .inactive-theme, -.theme-overlay.active .theme-actions .active-theme { - display: block; -} - -/** - * Theme Screenshots gallery - */ -.theme-overlay .theme-screenshots { - float: left; - margin: 0 30px 0 0; - width: 55%; - max-width: 880px; - text-align: center; -} - -/* First screenshot, shown big */ -.theme-overlay .screenshot { - border: 1px solid #fff; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - position: relative; - -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2); - box-shadow: 0 0 0 1px rgba(0,0,0,0.2); -} - -.theme-overlay .screenshot:after { - content: ''; - display: block; - padding-top: 75%; /* using a 4/3 aspect ratio */ -} - -.theme-overlay .screenshot img { - height: auto; - position: absolute; - left: 0; - top: 0; - width: 100%; -} -/* Handles old 300px screenshots */ -.theme-overlay.small-screenshot .theme-screenshots { - position: absolute; - width: 302px; -} -.theme-overlay.small-screenshot .theme-info { - margin-left: 350px; - width: auto; -} - -/* Other screenshots, shown small and square */ -.theme-overlay .screenshot.thumb { - background: #ccc; - border: 1px solid #eee; - float: none; - display: inline-block; - margin: 10px 5px 0; - width: 140px; - height: 80px; - cursor: pointer; -} - -.theme-overlay .screenshot.thumb:after { - content: ''; - display: block; - padding-top: 100%; /* using a 1/1 aspect ratio */ -} - -.theme-overlay .screenshot.thumb img { - cursor: pointer; - height: auto; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: auto; -} - -.theme-overlay .screenshot.selected { - background: transparent; - border: 2px solid #2ea2cc; -} - -.theme-overlay .screenshot.selected img { - opacity: 0.8; -} - -/* No screenshot placeholder */ -.theme-browser .theme .theme-screenshot.blank, -.theme-overlay .screenshot.blank { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); -} - -/** - * Theme heading information - */ -.theme-overlay .theme-info { - width: 40%; - float: left; -} - -.theme-overlay .current-label { - background: #333; - color: #fff; - font-size: 11px; - display: inline-block; - padding: 2px 8px; - -webkit-border-radius: 2px; - border-radius: 2px; - margin: 0 0 -10px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.theme-overlay .theme-name { - color: #222; - font-size: 32px; - font-weight: 100; - margin: 10px 0 0; - line-height: 1.3; -} - -.theme-overlay .theme-version { - color: #999; - font-size: 13px; - font-weight: 400; - float: none; - display: inline-block; - margin-left: 10px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.theme-overlay .theme-author { - color: #686868; - font-size: 16px; - font-weight: 400; - margin: 15px 0 25px; -} - -.theme-overlay .theme-author a { - text-decoration: none; -} - -.theme-overlay .theme-description { - color: #555; - font-size: 15px; - font-weight: 400; - line-height: 1.5; - margin: 30px 0 0 0; -} - -.theme-overlay .theme-tags { - border-top: 3px solid #eee; - color: #888; - font-size: 13px; - font-weight: 400; - margin: 30px 0 0 0; - padding-top: 20px; -} - -.theme-overlay .theme-tags span { - color: #444; - font-weight: bold; - margin-right: 5px; -} - -/* Theme Updates info */ -.theme-overlay .theme-update-message { - background: #fef7f1; - border: 1px solid #eee; - border-left: 4px solid #d54e21; - -webkit-border-radius: 3px; - border-radius: 3px; - padding: 5px 20px 10px; -} - -.theme-overlay .theme-update { - color: #222; - font-size: 18px; - display: inline-block; - line-height: 40px; - margin: 0; -} - -.theme-overlay .parent-theme { - background: #f7fcfe; - border: 1px solid #eee; - border-left: 4px solid #2ea2cc; - font-size: 14px; - font-weight: normal; - margin-top: 30px; - padding: 10px 10px 10px 20px; -} - -.theme-overlay .parent-theme strong { - font-weight: 700; -} - -/** - * Single Theme Mode - * Displays detailed view inline when a user has no switch capabilities - */ -.single-theme .theme-overlay .theme-backdrop, -.single-theme .theme-overlay .theme-header, -.single-theme .theme { - display: none; -} - -.single-theme .theme-overlay .theme-wrap { - clear: both; - min-height: 330px; - position: relative; - left: auto; - right: auto; - top: auto; - bottom: auto; -} - -.single-theme .theme-overlay .theme-about { - padding: 30px 30px 70px; - position: static; -} - -.single-theme .theme-overlay .theme-actions { - position: absolute; -} - -/** - * Basic Responsive structure... - * - * Shuffles theme columns around based on screen width - */ - -@media only screen and (min-width: 2000px) { - #wpwrap .theme-browser .theme { - width: 17.6%; - margin: 0 3% 3% 0; - } - - #wpwrap .theme-browser .theme:nth-child(3n), - #wpwrap .theme-browser .theme:nth-child(4n) { - margin-right: 3%; - } - - #wpwrap .theme-browser .theme:nth-child(5n) { - margin-right: 0; - } -} - -@media only screen and (min-width: 1680px) { - .theme-overlay .theme-wrap { - width: 1450px; - margin: 0 auto; - } -} - -/* Maximum screenshot width reaches 440px */ -@media only screen and (min-width: 1640px) { - .theme-browser .theme { - width: 22.7%; - margin: 0 3% 3% 0; - } - .theme-browser .theme .theme-screenshot:after { - padding-top: 75%; /* using a 4/3 aspect ratio */ - } - - .theme-browser .theme:nth-child(3n) { - margin-right: 3%; - } - - .theme-browser .theme:nth-child(4n) { - margin-right: 0; - } -} -/* Maximum screenshot width reaches 440px */ -@media only screen and (max-width: 1120px) { - .theme-browser .theme { - width: 47.5%; - margin-right: 0; - } - - .theme-browser .theme:nth-child(even) { - margin-right: 0; - } - - .theme-browser .theme:nth-child(odd) { - margin-right: 5%; - } -} - -/* Admin menu is folded */ -@media only screen and (max-width: 900px) { - .theme-overlay .theme-wrap { - left: 65px; - } -} - -@media only screen and (max-width: 780px) { - body.folded .theme-overlay .theme-wrap, - .theme-overlay .theme-wrap { - top: 0; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ - right: 0; - bottom: 0; - left: 0; - padding: 70px 20px 20px; - border: none; - z-index: 500; /* should overlap #wpadminbar, which is 500 on mobile. */ - position: fixed; - } - - .theme-browser .theme.active .theme-name span { - /* Hide the "Active: " label on smaller screens. */ - display: none; - } - - .theme-overlay .theme-screenshots { - width: 40%; - } - - .theme-overlay .theme-info { - width: 50%; - } - .single-theme .theme-wrap { - padding: 10px; - } - - .theme-browser .theme .theme-actions { - padding: 5px 10px 4px 10px; - } - - .theme-overlay.small-screenshot .theme-screenshots { - position: static; - float: none; - max-width: 302px; - } - - .theme-overlay.small-screenshot .theme-info { - margin-left: 0; - width: auto; - } - - .theme:not(.active):hover .theme-actions, - .theme:not(.active):focus .theme-actions, - .theme:hover .more-details, - .theme:focus .more-details { - display: none; - } - - .theme-browser.rendered .theme:hover .theme-screenshot img, - .theme-browser.rendered .theme:focus .theme-screenshot img { - opacity: 1.0; - } -} - -@media only screen and (max-width: 480px) { - .theme-browser .theme { - width: 100%; - margin-right: 0; - } - - .theme-browser .theme:nth-child(2n), - .theme-browser .theme:nth-child(3n) { - margin-right: 0; - } -} - -@media only screen and (max-width: 650px) { - .theme-overlay .theme-update, - .theme-overlay .theme-description { - margin-left: 0; - } - - .theme-overlay .theme-actions .delete-theme { - position: relative; - right: auto; - bottom: auto; - } - - .theme-overlay .theme-actions .inactive-theme { - display: inline; - } - - .theme-overlay .theme-screenshots { - width: 100%; - float: none; - } - - .theme-overlay .theme-info { - width: 100%; - } - - .theme-overlay .theme-author { - margin: 5px 0 15px 0; - } - - .theme-overlay .current-label { - margin-top: 10px; - font-size: 13px; - } - - .themes-php .wrap h2 { - width: 100%; - } - - .themes-php .wp-filter-search { - float: none; - clear: both; - left: 0; - top: 0; - right: 0; - margin: 10px 0; - width: 100%; - } - - .theme-browser .theme.add-new-theme span:after { - font: normal 60px/90px 'dashicons'; - width: 80px; - height: 80px; - top: 30%; - left: 50%; - text-indent: 0; - margin-left: -40px; - } - - .single-theme .theme-wrap { - margin: 0 -12px 0 -10px; - padding: 10px; - } - .single-theme .theme-overlay .theme-about { - padding: 10px; - overflow: visible; - } - .single-theme .current-label { - display: none; - } - .single-theme .theme-overlay .theme-actions { - position: static; - } -} - -.broken-themes { - clear: both; -} - -.broken-themes table { - text-align: left; - width: 50%; - border-spacing: 3px; - padding: 3px; -} - - -/*------------------------------------------------------------------------------ - 16.2 - Install Themes -------------------------------------------------------------------------------*/ - -/* Already installed theme */ -.theme-browser .theme .theme-installed { - background: #0074a2; -} -.theme-browser .theme .theme-installed:before { - content: '\f147'; -} -.theme-browser .theme.is-installed .theme-actions .button-primary { - display: none !important; -} - -.theme-install-php a.upload, -.theme-install-php a.browse-themes { - cursor: pointer; -} -.theme-install-php a.browse-themes, -.theme-install-php.show-upload-theme a.upload { - display: none; -} -.theme-install-php.show-upload-theme a.browse-themes { - display: inline; -} -.upload-theme, -.upload-plugin { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: none; - margin: 0; - padding: 0; - width: 100%; - overflow: hidden; - position: relative; - top: 10px; -} -body.show-upload-theme .upload-theme, -.upload-plugin { - display: block; -} -.upload-theme .wp-upload-form, -.upload-plugin .wp-upload-form { - background: #fafafa; - border: 1px solid #e5e5e5; - padding: 30px; - margin: 30px auto; - max-width: 380px; -} -.upload-theme .install-help, -.upload-plugin .install-help { - color: #999; - font-size: 18px; - font-style: normal; - margin: 0; - padding: 40px 0 0; - text-align: center; -} -body.show-upload-theme .upload-theme + .wp-filter, -body.show-upload-theme .upload-theme + .wp-filter + .theme-browser { - display: none; -} - -p.no-themes { - color: #999; - font-size: 18px; - font-style: normal; - margin: 0; - padding: 0; - text-align: center; - display: none; -} -body.no-results p.no-themes { - display: block; -} -body.show-upload-theme p.no-themes { - display: none !important; -} - -.theme-install-php .add-new-theme { - display: none !important; -} - -@media only screen and (max-width: 1120px) { - .upload-theme .wp-upload-form { - margin: 20px 0; - max-width: 100%; - } - .upload-theme .install-help { - font-size: 15px; - padding: 20px 0 0; - text-align: left; - } -} - -.rating { - margin: 30px 0; -} -.rating span:before { - color: #e6b800; - content: "\f154"; - display: inline-block; - -webkit-font-smoothing: antialiased; - font: normal 20px/1 'dashicons'; - vertical-align: top; -} -/* Half stars */ -.rating-10 span.one:before, -.rating-30 span.two:before, -.rating-50 span.three:before, -.rating-70 span.four:before, -.rating-90 span.five:before { - content: "\f459"; -} -/* Full stars */ -.rating-20 span.one:before { - content: "\f155"; -} -.rating-30 span.one:before, -.rating-40 span.one:before, -.rating-40 span.two:before { - content: "\f155"; -} -.rating-50 span.one:before, -.rating-50 span.two:before, -.rating-60 span.one:before, -.rating-60 span.two:before, -.rating-60 span.three:before { - content: "\f155"; -} -.rating-70 span.one:before, -.rating-70 span.two:before, -.rating-70 span.three:before, -.rating-80 span.one:before, -.rating-80 span.two:before, -.rating-80 span.three:before, -.rating-80 span.four:before { - content: "\f155"; -} -.rating-90 span.one:before, -.rating-90 span.two:before, -.rating-90 span.three:before, -.rating-90 span.four:before, -.rating-100 span.one:before, -.rating-100 span.two:before, -.rating-100 span.three:before, -.rating-100 span.four:before, -.rating-100 span.five:before { - content: "\f155"; -} -.rating .ratings { - display: inline; - margin-left: 10px; - line-height: 20px; - color: #999; -} - -/*------------------------------------------------------------------------------ - 16.3 - Custom Header Screen -------------------------------------------------------------------------------*/ - -.appearance_page_custom-header #headimg { - border: 1px solid #DFDFDF; - overflow: hidden; - width: 100%; -} - -.appearance_page_custom-header #upload-form p label { - font-size: 12px; -} - -.appearance_page_custom-header .available-headers .default-header { - float: left; - margin: 0 20px 20px 0; -} - -.appearance_page_custom-header .random-header { - clear: both; - margin: 0 20px 20px 0; - vertical-align: middle; -} - -.appearance_page_custom-header .available-headers label input, -.appearance_page_custom-header .random-header label input { - margin-right: 10px; -} - -.appearance_page_custom-header .available-headers label img { - vertical-align: middle; -} - - -/*------------------------------------------------------------------------------ - 16.4 - Custom Background Screen -------------------------------------------------------------------------------*/ - -div#custom-background-image { - min-height: 100px; - border: 1px solid #dfdfdf; -} - -div#custom-background-image img { - max-width: 400px; - max-height: 300px; -} - -/*------------------------------------------------------------------------------ - 23.0 - Full Overlay w/ Sidebar -------------------------------------------------------------------------------*/ - -body.full-overlay-active { - overflow: hidden; -} - -.wp-full-overlay { - background: transparent; - z-index: 500000; - position: fixed; - overflow: visible; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 100%; - min-width: 0; -} - -.wp-full-overlay-sidebar { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - position: fixed; - width: 300px; - height: 100%; - top: 0; - bottom: 0; - left: 0; - padding: 0; - margin: 0; - z-index: 10; - overflow: auto; - background: #eee; - border-right: none; -} - -.wp-full-overlay.collapsed .wp-full-overlay-sidebar { - overflow: visible; -} - -.wp-full-overlay.collapsed, -.wp-full-overlay.expanded .wp-full-overlay-sidebar { - margin-left: 0 !important; -} - -.wp-full-overlay.expanded { - margin-left: 300px; -} - -.wp-full-overlay.collapsed .wp-full-overlay-sidebar { - margin-left: -300px; -} - -.wp-full-overlay-sidebar:after { - content: ''; - display: block; - position: absolute; - top: 0; - bottom: 0; - right: 0; - width: 3px; - z-index: 1000; -} - -.wp-full-overlay-main { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - height: 100%; -} - -.wp-full-overlay-sidebar .wp-full-overlay-header { - position: absolute; - left: 0; - right: 0; - height: 45px; - padding: 0 15px; - line-height: 45px; - z-index: 10; - margin: 0; - border-top: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.wp-full-overlay-sidebar .wp-full-overlay-header a.back { - margin-top: 9px; -} - -.wp-full-overlay-sidebar .wp-full-overlay-footer { - bottom: 0; - border-bottom: none; - border-top: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { - position: absolute; - top: 45px; - bottom: 45px; - left: 0; - right: 0; - overflow: auto; -} - -/* Close & Navigation Links */ -.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header { - padding: 0; -} - -.theme-install-overlay .close-full-overlay, -.theme-install-overlay .previous-theme, -.theme-install-overlay .next-theme { - display: block; - position: relative; - float: left; - width: 45px; - height: 45px; - padding-right: 2px; - background: #eee; - border-right: 1px solid #ddd; - color: #444; - cursor: pointer; - text-decoration: none; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -.theme-install-overlay .close-full-overlay:hover, -.theme-install-overlay .close-full-overlay:focus, -.theme-install-overlay .previous-theme:hover, -.theme-install-overlay .previous-theme:focus, -.theme-install-overlay .next-theme:hover, -.theme-install-overlay .next-theme:focus { - background: #ddd; - border-color: #ccc; - color: #000; - outline: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.theme-install-overlay .close-full-overlay:before { - font: normal 22px/1 dashicons; - content: "\f335"; - position: relative; - top: 7px; - left: 13px; -} - -.theme-install-overlay .previous-theme:before { - font: normal 20px/1 dashicons; - content: "\f341"; - position: relative; - top: 6px; - left: 14px; -} - -.theme-install-overlay .next-theme:before { - font: normal 20px/1 dashicons; - content: "\f345"; - position: relative; - top: 6px; - left: 13px; -} - -.theme-install-overlay .previous-theme.disabled, -.theme-install-overlay .next-theme.disabled, -.theme-install-overlay .previous-theme.disabled:hover, -.theme-install-overlay .previous-theme.disabled:focus, -.theme-install-overlay .next-theme.disabled:hover, -.theme-install-overlay .next-theme.disabled:focus { - color: #bbb; - background: #eee; - cursor: default; - pointer-events: none; -} - -.rtl .theme-install-overlay .previous-theme:before { - content: "\f345"; -} - -.rtl .theme-install-overlay .next-theme:before { - content: "\f341"; -} - -/* Collapse Button */ -.wp-full-overlay a.collapse-sidebar { - position: absolute; - bottom: 12px; - left: 0; - z-index: 50; - display: block; - width: 19px; - height: 19px; - margin-left: 15px; - padding: 0; - -webkit-border-radius: 50%; - border-radius: 50%; - color: #777; - text-decoration: none; -} - -.wp-full-overlay a.collapse-sidebar:hover { - color: #0074a2; -} - -.wp-full-overlay.collapsed .collapse-sidebar { - position: absolute; - left: 100%; -} - -.wp-full-overlay .collapse-sidebar-arrow { - position: static; - margin-top: 0; - margin-left: 0; - display: block; - width: auto; - height: auto; - background: none; -} - -.wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-border-radius: 50%; - border-radius: 50%; - float: left; - content: "\f148"; - background: #eee; - font: normal 20px/1 'dashicons'; - speak: none; - display: block; - padding: 0; - text-indent: 0; - text-align: center; - position: relative; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - -.wp-full-overlay.collapsed .collapse-sidebar-arrow:before, -.rtl .wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { - -webkit-transform: none; - -ms-transform: none; - transform: none; -} - -.wp-full-overlay.collapsed .collapse-sidebar-arrow { - background-position: -1px -109px; -} - -.wp-full-overlay .collapse-sidebar-label { - position: absolute; - left: 100%; - line-height: 20px; - margin-left: 10px; -} - -.wp-full-overlay.collapsed .collapse-sidebar-label { - display: none; -} - -/* Animations */ -.wp-full-overlay, -.wp-full-overlay-sidebar, -.wp-full-overlay .collapse-sidebar, -.wp-full-overlay-main { - -webkit-transition-property: left, right, top, bottom, width, margin; - transition-property: left, right, top, bottom, width, margin; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; -} - -/*------------------------------------------------------------------------------ - 24.0 - Customize Loader -------------------------------------------------------------------------------*/ - -.no-customize-support .hide-if-no-customize, -.customize-support .hide-if-customize, -.no-customize-support.wp-core-ui .hide-if-no-customize, -.no-customize-support .wp-core-ui .hide-if-no-customize, -.customize-support.wp-core-ui .hide-if-customize, -.customize-support .wp-core-ui .hide-if-customize { - display: none; -} - -#customize-container { - display: none; - background: #fff; - z-index: 500000; - position: fixed; - overflow: visible; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 100%; -} - -.customize-active #customize-container { - display: block; -} - -.customize-loading #customize-container iframe { - opacity: 0; -} - -.customize-loading #customize-container { - background: #fff url(../images/spinner.gif) no-repeat fixed center center; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; -} - -#customize-container iframe, -.theme-install-overlay iframe { - height: 100%; - width: 100%; - z-index: 20; - -webkit-transition: opacity 0.3s; - transition: opacity 0.3s; -} - -#customize-container .collapse-sidebar { - bottom: 16px; -} - -#customize-controls { - margin-top: 0; -} - -.theme-install-overlay { - display: none; -} - -.theme-install-overlay.single-theme { - display: block; -} - -.install-theme-info { - display: none; - padding: 10px 20px 60px; -} - -.single-theme .install-theme-info { - padding-top: 15px; -} - -.theme-install-overlay .install-theme-info { - display: block; -} - -.install-theme-info .theme-install { - float: right; - margin-top: 18px; -} - -.install-theme-info .theme-name { - font-size: 16px; - line-height: 24px; - margin-bottom: 0; - margin-top: 0; -} - -.install-theme-info .theme-screenshot { - margin-top: 15px; - width: 258px; - border: 1px solid #ccc; -} - -.install-theme-info .theme-details { - overflow: hidden; -} - -.theme-details .theme-version { - margin: 15px 0; - float: left; -} - -.theme-details .star-rating { - margin: 7px 0; - float: right; -} - -.theme-details .theme-description { - float: left; - color: #777; - line-height: 20px; - max-width: 100%; -} - -.theme-install-overlay .wp-full-overlay-header .theme-install { - float: right; - margin: 8px 10px 0 0; - /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ - line-height: 26px; -} - -.theme-install-overlay .wp-full-overlay-sidebar { - background: #eee; - border-right: 1px solid #ddd; -} - -.theme-install-overlay .wp-full-overlay-sidebar-content { - background: #fff; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; -} - -.theme-install-overlay .wp-full-overlay-main { - background: #fff url(../images/spinner.gif) no-repeat center center; - -webkit-background-size: 20px 20px; - background-size: 20px 20px; -} - -/* =Media Queries --------------------------------------------------------------- */ - -/** - * HiDPI Displays - */ -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - .wp-full-overlay .collapse-sidebar-arrow { - background-image: url(../images/arrows-2x.png); - -webkit-background-size: 15px 123px; - background-size: 15px 123px; - } - - .customize-loading #customize-container, - .theme-install-overlay .wp-full-overlay-main { - background-image: url(../images/spinner-2x.gif); - } -} - -@media screen and ( max-width: 782px ) { - .available-theme .action-links .delete-theme { - float: none; - margin: 0; - padding: 0; - clear: both; - } - - .available-theme .action-links .delete-theme a { - padding: 0; - } -} diff --git a/src/wp-admin/css/themes.scss b/src/wp-admin/css/themes.scss new file mode 100644 index 0000000..ac4cb28 --- /dev/null +++ b/src/wp-admin/css/themes.scss @@ -0,0 +1,1782 @@ +/*------------------------------------------------------------------------------ + 16.0 - Themes +------------------------------------------------------------------------------*/ + +/*------------------------------------------------------------------------------ + 16.1 - Manage Themes +------------------------------------------------------------------------------*/ + +.theme-browser .themes { + clear: both; + padding: 0 0 100px; +} + +.themes-php .wrap h2 { + float: left; + margin-bottom: 15px; +} + +.network-admin.themes-php .wrap h2 { + margin-bottom: 0; +} + +.themes-php { + .wrap h2 .button { + margin-left: 20px; + } + .wp-filter-search { + position: relative; + top: -2px; + left: 20px; + margin: 0; + width: 280px; + font-size: 16px; + font-weight: 300; + line-height: 1.5; + } + div { + &.updated, &.error { + margin: 0 0 20px 0; + clear: both; + } + &.updated a { + text-decoration: underline; + } + } +} + +/* Search form */ + +/* Position admin messages */ + +/** + * Main theme element + * (has flexible margins) + */ + +.theme-browser .theme { + cursor: pointer; + float: left; + margin: 0 4% 4% 0; + position: relative; + width: 30.6%; + border: 1px solid #dedede; + -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.ie8 .theme-browser .theme { + width: 30%; + margin: 0 3% 4% 0; +} + +.theme-browser { + .theme { + &:nth-child(3n) { + margin-right: 0; + } + &:hover, &:focus { + cursor: pointer; + } + .theme-name { + font-size: 15px; + font-weight: 600; + height: 18px; + margin: 0; + padding: 15px; + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + background: #fff; + background: rgba(255, 255, 255, 0.65); + } + .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + opacity: 0; + -webkit-transition: opacity 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out; + position: absolute; + bottom: 0; + right: 0; + height: 38px; + padding: 9px 10px 0 10px; + background: rgba(244, 244, 244, 0.7); + border-left: 1px solid rgba(0, 0, 0, 0.05); + } + &:hover .theme-actions, &.focus .theme-actions, &:focus .theme-actions { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; + } + .theme-actions { + .button-primary { + margin-right: 3px; + } + .button-secondary { + float: none; + margin-left: 3px; + } + } + .theme-screenshot { + display: block; + overflow: hidden; + position: relative; + -webkit-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + &:after { + content: ''; + display: block; + padding-top: 66.66666%; + /* using a 3/2 aspect ratio */ + } + img { + height: auto; + position: absolute; + left: 0; + top: 0; + width: 100%; + -webkit-transform: translateZ(0); + /* Prevents rendering bugs in Chrome */ + -webkit-transition: opacity 0.2s ease-in-out; + /* Prevents rendering bugs in Chrome */ + transition: opacity 0.2s ease-in-out; + } + } + &:hover .theme-screenshot, &:focus .theme-screenshot { + background: #fff; + } + } + &.rendered .theme { + &:hover .theme-screenshot img, &:focus .theme-screenshot img { + opacity: 0.4; + } + } + .theme { + .more-details { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + opacity: 0; + position: absolute; + top: 35%; + right: 25%; + left: 25%; + background: #222; + background: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 15px; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); + -webkit-font-smoothing: antialiased; + font-weight: 600; + padding: 15px 12px; + text-align: center; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-transition: opacity 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out; + } + &:focus { + border-color: #5b9dd9; + -webkit-box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + .more-details { + opacity: 1; + } + } + &.active:focus .theme-actions { + display: block; + } + } + &.rendered .theme { + &:hover .more-details, &:focus .more-details { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; + } + } + .theme { + .theme-update, .theme-installed { + background: #d54e21; + background: rgba(213, 78, 33, 0.95); + color: #fff; + display: block; + font-size: 13px; + font-weight: 400; + height: 48px; + line-height: 48px; + padding: 0 10px; + position: absolute; + top: 0; + right: 0; + left: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.25); + overflow: hidden; + } + .theme-update:before, .theme-installed:before { + content: '\f463'; + display: inline-block; + font: normal 20px/1 'dashicons'; + margin: 0 6px 0 0; + opacity: 0.8; + position: relative; + top: 5px; + speak: none; + -webkit-font-smoothing: antialiased; + } + &.active { + .theme-name { + background: #2f2f2f; + color: #fff; + padding-right: 110px; + font-weight: 300; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); + span { + font-weight: 600; + } + } + .theme-actions { + background: rgba(49, 49, 49, 0.7); + border-left: none; + opacity: 1; + .button-primary { + margin-right: 0; + } + } + } + .theme-author { + background: #222; + color: #eee; + display: none; + font-size: 14px; + margin: 0 10px; + padding: 5px 10px; + position: absolute; + bottom: 56px; + } + &.display-author .theme-author { + display: block; + a { + color: inherit; + text-decoration: none; + } + } + &.add-new-theme { + border: none; + -webkit-box-shadow: none; + box-shadow: none; + a { + color: #999; + text-decoration: none; + display: block; + position: relative; + z-index: 1; + } + &:after { + display: block; + content: ''; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; + background: transparent; + background: rgba(0, 0, 0, 0); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 10% 0 0 0; + text-shadow: none; + border: 5px dashed #d5d2ca; + border: 5px dashed rgba(0, 0, 0, 0.1); + -webkit-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + span:after { + background: #e5e5e5; + background: rgba(153, 153, 153, 0.1); + -webkit-border-radius: 50%; + border-radius: 50%; + display: inline-block; + content: '\f132'; + -webkit-font-smoothing: antialiased; + font: normal 74px/115px 'dashicons'; + width: 100px; + height: 100px; + vertical-align: middle; + text-align: center; + color: rgb(153, 153, 153); + position: absolute; + top: 30%; + left: 50%; + margin-left: -50px; + text-indent: -4px; + padding: 0; + text-shadow: none; + z-index: 4; + } + } + } +} + +/* Activate and Customize buttons, shown on hover and focus */ + +/** + * Theme Screenshot + * + * Has a fixed aspect ratio of 1.5 to 1 regardless of screenshot size + * It is also responsive. + */ + +/* Current theme needs to have its action always on view */ + +/** + * Displays a theme update notice + * when an update is available. + */ + +/** + * The currently active theme + */ + +/** + * Add new theme + */ + +.rtl .theme-browser .theme.add-new-theme span:after { + text-indent: 4px; +} + +.theme-browser .theme.add-new-theme { + &:hover .theme-screenshot, &:focus .theme-screenshot { + background: none; + } + &:hover span:after, &:focus span:after { + background: #fff; + color: #0074a2; + } + &:hover:after, &:focus:after { + border-color: transparent; + color: #fff; + background: #0074a2; + content: ''; + } + .theme-name { + background: none; + text-align: center; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: 400; + position: relative; + top: 0; + margin-top: -10%; + margin-bottom: 10%; + } + &:hover .theme-name, &:focus .theme-name { + color: #fff; + z-index: 2; + } +} + +/** + * Theme Overlay + * Shown when clicking a theme + */ + +.theme-overlay { + .theme-backdrop { + position: absolute; + left: -20px; + right: 0; + top: 0; + bottom: 0; + background: #f1f1f1; + background: rgba(238, 238, 238, 0.9); + z-index: 10; + } + .theme-header { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 48px; + border-bottom: 1px solid #ddd; + .close { + cursor: pointer; + height: 48px; + width: 50px; + text-align: center; + float: right; + border: 0; + border-left: 1px solid #ddd; + background-color: transparent; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; + &:before { + font: normal 22px/50px 'dashicons' !important; + color: #777; + display: inline-block; + content: '\f335'; + font-weight: 300; + } + } + .right, .left { + cursor: pointer; + color: #777; + background-color: transparent; + height: 48px; + width: 54px; + float: left; + text-align: center; + border: 0; + border-right: 1px solid #ddd; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; + } + .close { + &:focus, &:hover { + background: #ddd; + border-color: #ccc; + color: #000; + } + } + .right { + &:focus, &:hover { + background: #ddd; + border-color: #ccc; + color: #000; + } + } + .left { + &:focus, &:hover { + background: #ddd; + border-color: #ccc; + color: #000; + } + } + .close { + &:focus:before, &:hover:before { + color: #000; + } + &:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + } + } + .right:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + } + .left { + &:focus { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + } + &.disabled { + color: #ccc; + background: inherit; + cursor: inherit; + } + } + .right.disabled, .left.disabled:hover { + color: #ccc; + background: inherit; + cursor: inherit; + } + .right { + &.disabled:hover { + color: #ccc; + background: inherit; + cursor: inherit; + } + &:before { + font: normal 20px/50px 'dashicons' !important; + display: inline; + font-weight: 300; + } + } + .left:before { + font: normal 20px/50px 'dashicons' !important; + display: inline; + font-weight: 300; + content: '\f341'; + } + } +} + +/* Left and right navigation */ + +.rtl .theme-overlay .theme-header .right:before { + content: '\f341'; +} + +.theme-overlay .theme-header .right:before, .rtl .theme-overlay .theme-header .left:before { + content: '\f345'; +} + +.theme-overlay .theme-wrap { + clear: both; + position: fixed; + top: 9%; + left: 190px; + right: 30px; + bottom: 3%; + background: #fff; + -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); + z-index: 20; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } +} + +body.folded .theme-overlay .theme-wrap { + left: 70px; +} + +.theme-overlay { + .theme-about { + position: absolute; + top: 49px; + bottom: 57px; + left: 0; + right: 0; + overflow: auto; + padding: 2% 4%; + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } + } + .theme-actions { + position: absolute; + text-align: center; + bottom: 0; + left: 0; + right: 0; + padding: 10px 25px 5px; + background: #f3f3f3; + z-index: 30; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-top: 1px solid #eee; + } +} + +.ie8 .theme-overlay .theme-actions { + border: 1px solid #eee; +} + +.theme-overlay { + .theme-actions { + a { + margin-right: 5px; + margin-bottom: 5px; + } + .delete-theme { + color: #a00; + position: absolute; + right: 10px; + bottom: 5px; + text-decoration: none; + border-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + background: transparent; + &:hover, &:focus { + background: #d54e21; + color: #fff; + border-color: #d54e21; + } + } + .active-theme { + display: none; + } + } + &.active .theme-actions .inactive-theme { + display: none; + } + .theme-actions .inactive-theme, &.active .theme-actions .active-theme { + display: block; + } + .theme-screenshots { + float: left; + margin: 0 30px 0 0; + width: 55%; + max-width: 880px; + text-align: center; + } + .screenshot { + border: 1px solid #fff; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + position: relative; + -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); + &:after { + content: ''; + display: block; + padding-top: 75%; + /* using a 4/3 aspect ratio */ + } + img { + height: auto; + position: absolute; + left: 0; + top: 0; + width: 100%; + } + } + &.small-screenshot { + .theme-screenshots { + position: absolute; + width: 302px; + } + .theme-info { + margin-left: 350px; + width: auto; + } + } + .screenshot { + &.thumb { + background: #ccc; + border: 1px solid #eee; + float: none; + display: inline-block; + margin: 10px 5px 0; + width: 140px; + height: 80px; + cursor: pointer; + &:after { + content: ''; + display: block; + padding-top: 100%; + /* using a 1/1 aspect ratio */ + } + img { + cursor: pointer; + height: auto; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: auto; + } + } + &.selected { + background: transparent; + border: 2px solid #2ea2cc; + img { + opacity: 0.8; + } + } + } +} + +/** + * Theme Screenshots gallery + */ + +/* First screenshot, shown big */ + +/* Handles old 300px screenshots */ + +/* Other screenshots, shown small and square */ + +/* No screenshot placeholder */ + +.theme-browser .theme .theme-screenshot.blank { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); +} + +.theme-overlay { + .screenshot.blank { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=); + } + .theme-info { + width: 40%; + float: left; + } + .current-label { + background: #333; + color: #fff; + font-size: 11px; + display: inline-block; + padding: 2px 8px; + -webkit-border-radius: 2px; + border-radius: 2px; + margin: 0 0 -10px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .theme-name { + color: #222; + font-size: 32px; + font-weight: 100; + margin: 10px 0 0; + line-height: 1.3; + } + .theme-version { + color: #999; + font-size: 13px; + font-weight: 400; + float: none; + display: inline-block; + margin-left: 10px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .theme-author { + color: #686868; + font-size: 16px; + font-weight: 400; + margin: 15px 0 25px; + a { + text-decoration: none; + } + } + .theme-description { + color: #555; + font-size: 15px; + font-weight: 400; + line-height: 1.5; + margin: 30px 0 0 0; + } + .theme-tags { + border-top: 3px solid #eee; + color: #888; + font-size: 13px; + font-weight: 400; + margin: 30px 0 0 0; + padding-top: 20px; + span { + color: #444; + font-weight: bold; + margin-right: 5px; + } + } + .theme-update-message { + background: #fef7f1; + border: 1px solid #eee; + border-left: 4px solid #d54e21; + -webkit-border-radius: 3px; + border-radius: 3px; + padding: 5px 20px 10px; + } + .theme-update { + color: #222; + font-size: 18px; + display: inline-block; + line-height: 40px; + margin: 0; + } + .parent-theme { + background: #f7fcfe; + border: 1px solid #eee; + border-left: 4px solid #2ea2cc; + font-size: 14px; + font-weight: normal; + margin-top: 30px; + padding: 10px 10px 10px 20px; + strong { + font-weight: 700; + } + } +} + +/** + * Theme heading information + */ + +/* Theme Updates info */ + +/** + * Single Theme Mode + * Displays detailed view inline when a user has no switch capabilities + */ + +.single-theme { + .theme-overlay { + .theme-backdrop, .theme-header { + display: none; + } + } + .theme { + display: none; + } + .theme-overlay { + .theme-wrap { + clear: both; + min-height: 330px; + position: relative; + left: auto; + right: auto; + top: auto; + bottom: auto; + } + .theme-about { + padding: 30px 30px 70px; + position: static; + } + .theme-actions { + position: absolute; + } + } +} + +/** + * Basic Responsive structure... + * + * Shuffles theme columns around based on screen width + */ + +@media only screen and (min-width: 2000px) { + #wpwrap .theme-browser .theme { + width: 17.6%; + margin: 0 3% 3% 0; + &:nth-child(3n), &:nth-child(4n) { + margin-right: 3%; + } + &:nth-child(5n) { + margin-right: 0; + } + } +} + +@media only screen and (min-width: 1680px) { + .theme-overlay .theme-wrap { + width: 1450px; + margin: 0 auto; + } +} + +/* Maximum screenshot width reaches 440px */ +@media only screen and (min-width: 1640px) { + .theme-browser .theme { + width: 22.7%; + margin: 0 3% 3% 0; + .theme-screenshot:after { + padding-top: 75%; + /* using a 4/3 aspect ratio */ + } + &:nth-child(3n) { + margin-right: 3%; + } + &:nth-child(4n) { + margin-right: 0; + } + } +} + +/* Maximum screenshot width reaches 440px */ +@media only screen and (max-width: 1120px) { + .theme-browser .theme { + width: 47.5%; + margin-right: 0; + &:nth-child(even) { + margin-right: 0; + } + &:nth-child(odd) { + margin-right: 5%; + } + } +} + +/* Admin menu is folded */ +@media only screen and (max-width: 900px) { + .theme-overlay .theme-wrap { + left: 65px; + } +} + +@media only screen and (max-width: 780px) { + body.folded .theme-overlay .theme-wrap, .theme-overlay .theme-wrap { + top: 0; + /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */ + right: 0; + bottom: 0; + left: 0; + padding: 70px 20px 20px; + border: none; + z-index: 500; + /* should overlap #wpadminbar, which is 500 on mobile. */ + position: fixed; + } + .theme-browser .theme.active .theme-name span { + /* Hide the "Active: " label on smaller screens. */ + display: none; + } + .theme-overlay { + .theme-screenshots { + width: 40%; + } + .theme-info { + width: 50%; + } + } + .single-theme .theme-wrap { + padding: 10px; + } + .theme-browser .theme .theme-actions { + padding: 5px 10px 4px 10px; + } + .theme-overlay.small-screenshot { + .theme-screenshots { + position: static; + float: none; + max-width: 302px; + } + .theme-info { + margin-left: 0; + width: auto; + } + } + .theme { + &:not(.active) { + &:hover .theme-actions, &:focus .theme-actions { + display: none; + } + } + &:hover .more-details, &:focus .more-details { + display: none; + } + } + .theme-browser.rendered .theme { + &:hover .theme-screenshot img, &:focus .theme-screenshot img { + opacity: 1.0; + } + } +} + +@media only screen and (max-width: 480px) { + .theme-browser .theme { + width: 100%; + margin-right: 0; + &:nth-child(2n), &:nth-child(3n) { + margin-right: 0; + } + } +} + +@media only screen and (max-width: 650px) { + .theme-overlay { + .theme-update, .theme-description { + margin-left: 0; + } + .theme-actions { + .delete-theme { + position: relative; + right: auto; + bottom: auto; + } + .inactive-theme { + display: inline; + } + } + .theme-screenshots { + width: 100%; + float: none; + } + .theme-info { + width: 100%; + } + .theme-author { + margin: 5px 0 15px 0; + } + .current-label { + margin-top: 10px; + font-size: 13px; + } + } + .themes-php { + .wrap h2 { + width: 100%; + } + .wp-filter-search { + float: none; + clear: both; + left: 0; + top: 0; + right: 0; + margin: 10px 0; + width: 100%; + } + } + .theme-browser .theme.add-new-theme span:after { + font: normal 60px/90px 'dashicons'; + width: 80px; + height: 80px; + top: 30%; + left: 50%; + text-indent: 0; + margin-left: -40px; + } + .single-theme { + .theme-wrap { + margin: 0 -12px 0 -10px; + padding: 10px; + } + .theme-overlay .theme-about { + padding: 10px; + overflow: visible; + } + .current-label { + display: none; + } + .theme-overlay .theme-actions { + position: static; + } + } +} + +.broken-themes { + clear: both; + table { + text-align: left; + width: 50%; + border-spacing: 3px; + padding: 3px; + } +} + +/*------------------------------------------------------------------------------ + 16.2 - Install Themes +------------------------------------------------------------------------------*/ + +/* Already installed theme */ + +.theme-browser .theme { + .theme-installed { + background: #0074a2; + &:before { + content: '\f147'; + } + } + &.is-installed .theme-actions .button-primary { + display: none !important; + } +} + +.theme-install-php { + a { + &.upload { + cursor: pointer; + } + &.browse-themes { + cursor: pointer; + display: none; + } + } + &.show-upload-theme a { + &.upload { + display: none; + } + &.browse-themes { + display: inline; + } + } +} + +.upload-theme, .upload-plugin { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: none; + margin: 0; + padding: 0; + width: 100%; + overflow: hidden; + position: relative; + top: 10px; +} + +body.show-upload-theme .upload-theme, .upload-plugin { + display: block; +} + +.upload-theme .wp-upload-form, .upload-plugin .wp-upload-form { + background: #fafafa; + border: 1px solid #e5e5e5; + padding: 30px; + margin: 30px auto; + max-width: 380px; +} + +.upload-theme .install-help, .upload-plugin .install-help { + color: #999; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 40px 0 0; + text-align: center; +} + +body.show-upload-theme .upload-theme + .wp-filter { + display: none; + + .theme-browser { + display: none; + } +} + +p.no-themes { + color: #999; + font-size: 18px; + font-style: normal; + margin: 0; + padding: 0; + text-align: center; + display: none; +} + +body { + &.no-results p.no-themes { + display: block; + } + &.show-upload-theme p.no-themes { + display: none !important; + } +} + +.theme-install-php .add-new-theme { + display: none !important; +} + +@media only screen and (max-width: 1120px) { + .upload-theme { + .wp-upload-form { + margin: 20px 0; + max-width: 100%; + } + .install-help { + font-size: 15px; + padding: 20px 0 0; + text-align: left; + } + } +} + +.rating { + margin: 30px 0; + span:before { + color: #e6b800; + content: "\f154"; + display: inline-block; + -webkit-font-smoothing: antialiased; + font: normal 20px/1 'dashicons'; + vertical-align: top; + } +} + +/* Half stars */ + +.rating-10 span.one:before, .rating-30 span.two:before, .rating-50 span.three:before, .rating-70 span.four:before, .rating-90 span.five:before { + content: "\f459"; +} + +/* Full stars */ + +.rating-20 span.one:before, .rating-30 span.one:before { + content: "\f155"; +} + +.rating-40 span { + &.one:before, &.two:before { + content: "\f155"; + } +} + +.rating-50 span { + &.one:before, &.two:before { + content: "\f155"; + } +} + +.rating-60 span { + &.one:before, &.two:before, &.three:before { + content: "\f155"; + } +} + +.rating-70 span { + &.one:before, &.two:before, &.three:before { + content: "\f155"; + } +} + +.rating-80 span { + &.one:before, &.two:before, &.three:before, &.four:before { + content: "\f155"; + } +} + +.rating-90 span { + &.one:before, &.two:before, &.three:before, &.four:before { + content: "\f155"; + } +} + +.rating-100 span { + &.one:before, &.two:before, &.three:before, &.four:before, &.five:before { + content: "\f155"; + } +} + +.rating .ratings { + display: inline; + margin-left: 10px; + line-height: 20px; + color: #999; +} + +/*------------------------------------------------------------------------------ + 16.3 - Custom Header Screen +------------------------------------------------------------------------------*/ + +.appearance_page_custom-header { + #headimg { + border: 1px solid #DFDFDF; + overflow: hidden; + width: 100%; + } + #upload-form p label { + font-size: 12px; + } + .available-headers .default-header { + float: left; + margin: 0 20px 20px 0; + } + .random-header { + clear: both; + margin: 0 20px 20px 0; + vertical-align: middle; + } + .available-headers label input, .random-header label input { + margin-right: 10px; + } + .available-headers label img { + vertical-align: middle; + } +} + +/*------------------------------------------------------------------------------ + 16.4 - Custom Background Screen +------------------------------------------------------------------------------*/ + +div#custom-background-image { + min-height: 100px; + border: 1px solid #dfdfdf; + img { + max-width: 400px; + max-height: 300px; + } +} + +/*------------------------------------------------------------------------------ + 23.0 - Full Overlay w/ Sidebar +------------------------------------------------------------------------------*/ + +body.full-overlay-active { + overflow: hidden; +} + +.wp-full-overlay { + background: transparent; + z-index: 500000; + position: fixed; + overflow: visible; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + min-width: 0; +} + +.wp-full-overlay-sidebar { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + position: fixed; + width: 300px; + height: 100%; + top: 0; + bottom: 0; + left: 0; + padding: 0; + margin: 0; + z-index: 10; + overflow: auto; + background: #eee; + border-right: none; +} + +.wp-full-overlay { + &.collapsed { + .wp-full-overlay-sidebar { + overflow: visible; + } + margin-left: 0 !important; + } + &.expanded { + .wp-full-overlay-sidebar { + margin-left: 0 !important; + } + margin-left: 300px; + } + &.collapsed .wp-full-overlay-sidebar { + margin-left: -300px; + } +} + +.wp-full-overlay-sidebar:after { + content: ''; + display: block; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 3px; + z-index: 1000; +} + +.wp-full-overlay-main { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; +} + +.wp-full-overlay-sidebar { + .wp-full-overlay-header { + position: absolute; + left: 0; + right: 0; + height: 45px; + padding: 0 15px; + line-height: 45px; + z-index: 10; + margin: 0; + border-top: none; + -webkit-box-shadow: none; + box-shadow: none; + a.back { + margin-top: 9px; + } + } + .wp-full-overlay-footer { + bottom: 0; + border-bottom: none; + border-top: none; + -webkit-box-shadow: none; + box-shadow: none; + } + .wp-full-overlay-sidebar-content { + position: absolute; + top: 45px; + bottom: 45px; + left: 0; + right: 0; + overflow: auto; + } +} + +/* Close & Navigation Links */ + +.theme-install-overlay { + .wp-full-overlay-sidebar .wp-full-overlay-header { + padding: 0; + } + .close-full-overlay, .previous-theme, .next-theme { + display: block; + position: relative; + float: left; + width: 45px; + height: 45px; + padding-right: 2px; + background: #eee; + border-right: 1px solid #ddd; + color: #444; + cursor: pointer; + text-decoration: none; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; + } + .close-full-overlay { + &:hover, &:focus { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .previous-theme { + &:hover, &:focus { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .next-theme { + &:hover, &:focus { + background: #ddd; + border-color: #ccc; + color: #000; + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .close-full-overlay:before { + font: normal 22px/1 dashicons; + content: "\f335"; + position: relative; + top: 7px; + left: 13px; + } + .previous-theme:before { + font: normal 20px/1 dashicons; + content: "\f341"; + position: relative; + top: 6px; + left: 14px; + } + .next-theme:before { + font: normal 20px/1 dashicons; + content: "\f345"; + position: relative; + top: 6px; + left: 13px; + } + .previous-theme.disabled, .next-theme.disabled { + color: #bbb; + background: #eee; + cursor: default; + pointer-events: none; + } + .previous-theme.disabled { + &:hover, &:focus { + color: #bbb; + background: #eee; + cursor: default; + pointer-events: none; + } + } + .next-theme.disabled { + &:hover, &:focus { + color: #bbb; + background: #eee; + cursor: default; + pointer-events: none; + } + } +} + +.rtl .theme-install-overlay { + .previous-theme:before { + content: "\f345"; + } + .next-theme:before { + content: "\f341"; + } +} + +/* Collapse Button */ + +.wp-full-overlay { + a.collapse-sidebar { + position: absolute; + bottom: 12px; + left: 0; + z-index: 50; + display: block; + width: 19px; + height: 19px; + margin-left: 15px; + padding: 0; + -webkit-border-radius: 50%; + border-radius: 50%; + color: #777; + text-decoration: none; + &:hover { + color: #0074a2; + } + } + &.collapsed .collapse-sidebar { + position: absolute; + left: 100%; + } + .collapse-sidebar-arrow { + position: static; + margin-top: 0; + margin-left: 0; + display: block; + width: auto; + height: auto; + background: none; + &:before { + -webkit-border-radius: 50%; + border-radius: 50%; + float: left; + content: "\f148"; + background: #eee; + font: normal 20px/1 'dashicons'; + speak: none; + display: block; + padding: 0; + text-indent: 0; + text-align: center; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + } + } + &.collapsed .collapse-sidebar-arrow:before { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } +} + +.rtl .wp-full-overlay { + .collapse-sidebar-arrow:before { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + &.collapsed .collapse-sidebar-arrow:before { + -webkit-transform: none; + -ms-transform: none; + transform: none; + } +} + +.wp-full-overlay { + &.collapsed .collapse-sidebar-arrow { + background-position: -1px -109px; + } + .collapse-sidebar-label { + position: absolute; + left: 100%; + line-height: 20px; + margin-left: 10px; + } + &.collapsed .collapse-sidebar-label { + display: none; + } + -webkit-transition-property: left, right, top, bottom, width, margin; + transition-property: left, right, top, bottom, width, margin; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +/* Animations */ + +.wp-full-overlay-sidebar, .wp-full-overlay .collapse-sidebar, .wp-full-overlay-main { + -webkit-transition-property: left, right, top, bottom, width, margin; + transition-property: left, right, top, bottom, width, margin; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +/*------------------------------------------------------------------------------ + 24.0 - Customize Loader +------------------------------------------------------------------------------*/ + +.no-customize-support .hide-if-no-customize, .customize-support .hide-if-customize { + display: none; +} + +.no-customize-support { + &.wp-core-ui .hide-if-no-customize, .wp-core-ui .hide-if-no-customize { + display: none; + } +} + +.customize-support { + &.wp-core-ui .hide-if-customize, .wp-core-ui .hide-if-customize { + display: none; + } +} + +#customize-container { + display: none; + background: #fff; + z-index: 500000; + position: fixed; + overflow: visible; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; +} + +.customize-active #customize-container { + display: block; +} + +.customize-loading #customize-container { + iframe { + opacity: 0; + } + background: #fff url(../images/spinner.gif) no-repeat fixed center center; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; +} + +#customize-container iframe, .theme-install-overlay iframe { + height: 100%; + width: 100%; + z-index: 20; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; +} + +#customize-container .collapse-sidebar { + bottom: 16px; +} + +#customize-controls { + margin-top: 0; +} + +.theme-install-overlay { + display: none; + &.single-theme { + display: block; + } +} + +.install-theme-info { + display: none; + padding: 10px 20px 60px; +} + +.single-theme .install-theme-info { + padding-top: 15px; +} + +.theme-install-overlay .install-theme-info { + display: block; +} + +.install-theme-info { + .theme-install { + float: right; + margin-top: 18px; + } + .theme-name { + font-size: 16px; + line-height: 24px; + margin-bottom: 0; + margin-top: 0; + } + .theme-screenshot { + margin-top: 15px; + width: 258px; + border: 1px solid #ccc; + } + .theme-details { + overflow: hidden; + } +} + +.theme-details { + .theme-version { + margin: 15px 0; + float: left; + } + .star-rating { + margin: 7px 0; + float: right; + } + .theme-description { + float: left; + color: #777; + line-height: 20px; + max-width: 100%; + } +} + +.theme-install-overlay { + .wp-full-overlay-header .theme-install { + float: right; + margin: 8px 10px 0 0; + /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ + line-height: 26px; + } + .wp-full-overlay-sidebar { + background: #eee; + border-right: 1px solid #ddd; + } + .wp-full-overlay-sidebar-content { + background: #fff; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + } + .wp-full-overlay-main { + background: #fff url(../images/spinner.gif) no-repeat center center; + -webkit-background-size: 20px 20px; + background-size: 20px 20px; + } +} + +/* =Media Queries +-------------------------------------------------------------- */ + +/** + * HiDPI Displays + */ +@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + .wp-full-overlay .collapse-sidebar-arrow { + background-image: url(../images/arrows-2x.png); + -webkit-background-size: 15px 123px; + background-size: 15px 123px; + } + .customize-loading #customize-container, .theme-install-overlay .wp-full-overlay-main { + background-image: url(../images/spinner-2x.gif); + } +} + +@media screen and (max-width: 782px) { + .available-theme .action-links .delete-theme { + float: none; + margin: 0; + padding: 0; + clear: both; + a { + padding: 0; + } + } +} diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css deleted file mode 100644 index 409a393..0000000 --- a/src/wp-admin/css/widgets.css +++ /dev/null @@ -1,577 +0,0 @@ -/* General Widgets Styles */ - -.widget { - margin: 0 auto 10px; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.widget-top { - font-size: 13px; - font-weight: 600; - background: #f7f7f7; -} - -.widget-top a.widget-action, -.widget-top a.widget-action:hover { - -webkit-box-shadow: none; - box-shadow: none; - outline: none; - text-decoration: none; -} - -.widget-title h4 { - margin: 0; - padding: 15px; - line-height: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.widgets-holder-wrap .widget-inside { - border-top: none; - padding: 1px 15px 15px 15px; - line-height: 16px; -} - -.in-widget-title, -#widgets-right a.widget-control-edit, -#available-widgets .widget-description { - color: #666; -} - -.deleting .widget-title, -.deleting .widget-top a.widget-action:after { - color: #aaa; -} - -/* Widget Dragging Helpers */ -.widget.ui-draggable-dragging { - min-width: 100%; -} - -.widget.ui-sortable-helper { - opacity: 0.8; -} - -.widget-placeholder { - border: 1px dashed #bbb; - margin: 0 auto 10px; - height: 45px; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#widgets-right .widget-placeholder { - margin-top: 0; -} - -#widgets-right .closed .widget-placeholder { - height: 0; - border: 0; - margin-top: -10px; -} - -/* Widget Sidebars */ -.sidebar-name { - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.sidebar-name-arrow { - position: absolute; - top: 0; - right: 0; - bottom: 0; -} - -.js .sidebar-name { - cursor: pointer; -} - -.sidebar-name h3 { - margin: 0; - padding: 8px 10px; - overflow: hidden; - white-space: nowrap; -} - -.widgets-holder-wrap .description { - padding: 0 0 15px; - margin: 0; - font-style: normal; - color: #777; -} - -#widgets-right .widgets-holder-wrap .description { - padding-left: 7px; - padding-right: 7px; -} - -/* Widgets 2-col Layout */ -div.widget-liquid-left { - margin: 0; - width: 38%; - float: left; -} - -div.widget-liquid-right { - float: right; - width: 58%; -} - -/* Widgets Left - Available Widgets */ - -div#widgets-left { - padding-top: 12px; -} - -div#widgets-left .closed .sidebar-name, -div#widgets-left .inactive-sidebar.closed .sidebar-name { - margin-bottom: 10px; -} - -div#widgets-left .sidebar-name h3 { - padding: 10px 0; - margin: 0 10px 0 0; -} - -div#widgets-left .sidebar-name .sidebar-name-arrow:before { - right: 0; - top: 4px; - padding: 4px 6px 4px 4px; -} - -#widgets-left #available-widgets, -div#widgets-left .widget-holder { - background: transparent; - border: none; -} - -#widgets-left .widgets-holder-wrap { - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -#available-widgets .widget-action { - display: none; -} - -#available-widgets .widget { - margin: 0; -} - -#available-widgets .widget:nth-child(odd) { - clear: both; -} - -#available-widgets .widget .widget-description { - display: block; - padding: 10px 15px; - font-size: 12px; -} - -#available-widgets #widget-list { - position: relative; -} - -/* Inactive Sidebars */ -#widgets-left .inactive-sidebar { - clear: both; - width: 100%; - background: transparent; - padding: 0; - margin: 0 0 20px 0; - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -#widgets-left .inactive-sidebar.first { - margin-top: 40px; -} - -/* Not sure what this is for... */ -div#widgets-left .inactive-sidebar .widget.expanded { - left: auto; -} - -.widget-title-action { - float: right; - position: relative; -} - -div#widgets-left .inactive-sidebar .widgets-sortables { - min-height: 42px; - padding: 0; - background: transparent; - margin: 0; - position: relative; -} - -/* Widgets Right */ - -div#widgets-right:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -div#widgets-right .sidebars-column-1, -div#widgets-right .sidebars-column-2 { - max-width: 450px; -} - -div#widgets-right .widgets-holder-wrap { - margin: 10px 0 0 0; -} - -div#widgets-right .sidebar-description { - min-height: 20px; - margin-top: -5px; -} - -div#widgets-right .sidebar-name h3 { - padding: 15px 7px; -} - -div#widgets-right .sidebar-name .sidebar-name-arrow:before { - right: 0; - top: 4px; -} - -div#widgets-right .widget-top { - padding: 0; -} - -div#widgets-right .widgets-sortables { - padding: 0 8px; - margin-bottom: 9px; - position: relative; - min-height: 123px; -} - -div#widgets-right .closed .widgets-sortables { - min-height: 0; - margin-bottom: 0; -} - -.sidebar-name .spinner { - margin: -5px 5px; - float: none; -} - -/* Dragging a widget over a closed sidebar */ -#widgets-right .widgets-holder-wrap.widget-hover { - border-color: #777; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3); - box-shadow: 0 1px 2px rgba(0,0,0,0.3); -} - -/* Accessibility Mode */ -.widgets_access #widgets-left .widget .widget-top { - cursor: auto; -} - -.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description, -.widgets_access #wpwrap .widgets-holder-wrap.closed .widget, -.widgets_access #wpwrap .widget-control-edit { - display: block; -} - -.widgets_access #widgets-left .widget .widget-top:hover, -.widgets_access #widgets-right .widget .widget-top:hover { - border-color: #ddd; -} - -#available-widgets .widget-control-edit .edit, -#widgets-left .inactive-sidebar .widget-control-edit .add, -#widgets-right .widget-control-edit .add { - display: none; -} - -.widget-control-edit { - display: block; - color: #666; - background: #EEE; - padding: 0 15px; - line-height: 43px; - border-left: 1px solid #DDD; -} - -#widgets-left .widget-control-edit:hover, -#widgets-right .widget-control-edit:hover { - color: #fff; - background: #444; - border-left: 0; - outline: 1px solid #444; -} - -.widgets-holder-wrap .sidebar-name, -.widgets-holder-wrap .sidebar-description { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.editwidget { - margin: 0 auto; -} - -.editwidget .widget-inside { - display: block; - padding: 0 15px; -} - -.editwidget .widget-control-actions { - margin-top: 20px; -} - -.js .widgets-holder-wrap.closed .widget, -.js .widgets-holder-wrap.closed .sidebar-description, -.js .closed br.clear { - display: none; -} - -/* Hide Widget Settings by Default */ -.widget-inside, -.widget-description { - display: none; -} - -.widget-inside { - background: #fff; -} - -/* Dragging widgets over the available widget area show's a "Deactivate" message */ -#removing-widget { - display: none; - font-weight: normal; - padding-left: 15px; - font-size: 12px; - line-height: 1; - color: black; -} - -.js #removing-widget { - color: #2ea2cc; -} - -.widget-control-noform, -#access-off, -.widgets_access .widget-action, -.widgets_access .sidebar-name-arrow, -.widgets_access #access-on, -.widgets_access .widget-holder .description, -.no-js .widget-holder .description { - display: none; -} - -.widgets_access .widget-holder, -.widgets_access #widget-list { - padding-top: 10px; -} - -.widgets_access #access-off { - display: inline; -} - -.widgets_access .sidebar-name, -.widgets_access .widget .widget-top { - cursor: default; -} - - -/* Widgets Area Chooser */ -.widget-liquid-left #widgets-left.chooser #available-widgets .widget, -.widget-liquid-left #widgets-left.chooser .inactive-sidebar { - -webkit-transition: opacity 0.1s linear; - transition: opacity 0.1s linear; -} - -.widget-liquid-left #widgets-left.chooser #available-widgets .widget, -.widget-liquid-left #widgets-left.chooser .inactive-sidebar { - /* -webkit-filter: blur(1px); */ - opacity: 0.2; - pointer-events: none; -} - -.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question { - /* -webkit-filter: none; */ - opacity: 1; - pointer-events: auto; -} - -.widgets-chooser ul, -#widgets-left .widget-in-question .widget-top, -#available-widgets .widget-top:hover, -div#widgets-right .widget-top:hover, -#widgets-left .widget-top:hover { - border-color: #999; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); - box-shadow: 0 1px 2px rgba(0,0,0,0.1); -} - -.widgets-chooser ul.widgets-chooser-sidebars { - margin: 0; - list-style-type: none; - max-height: 300px; - overflow: auto; -} - -.widgets-chooser { - display: none; -} - -.widgets-chooser ul { - border: 1px solid #ccc; -} - -.widgets-chooser li { - padding: 10px 15px 10px 35px; - border-bottom: 1px solid #ccc; - background: #fff; - margin: 0; - cursor: pointer; - outline: none; - position: relative; - -webkit-transition: background 0.2s ease-in-out; - transition: background 0.2s ease-in-out; -} - -.widgets-chooser li:hover, -.widgets-chooser li:focus { - background: rgba(255,255,255,0.7); -} - -.widgets-chooser li:focus:before { - content: '\f147'; - display: block; - -webkit-font-smoothing: antialiased; - font: normal 26px/1 'dashicons'; - color: #999; - position: absolute; - top: 7px; - left: 5px; -} - -.widgets-chooser li:last-child { - border: none; -} - -.widgets-chooser li.widgets-chooser-selected { - background: #2ea2cc; - color: #fff; -} - -.widgets-chooser li.widgets-chooser-selected:before, -.widgets-chooser li.widgets-chooser-selected:focus:before { - content: '\f147'; - display: block; - -webkit-font-smoothing: antialiased; - font: normal 26px/1 'dashicons'; - color: #fff; - position: absolute; - top: 7px; - left: 5px; -} - -.widgets-chooser .widgets-chooser-actions { - padding: 10px 0 12px 0; - text-align: center; -} - -.widgets-chooser button { - margin-right: 5px; -} - -#available-widgets .widget .widget-top { - cursor: pointer; -} - -/* =Media Queries --------------------------------------------------------------- */ - -@media screen and (max-width: 480px) { - div.widget-liquid-left { - width: 100%; - float: none; - border-right: none; - padding-right: 0; - } - - #widgets-left .sidebar-name { - margin-right: 0; - } - - #widgets-left #available-widgets .widget-top { - margin-right: 0; - } - - #widgets-left .inactive-sidebar .widgets-sortables { - margin-right: 0; - } - - div.widget-liquid-right { - width: 100%; - float: none; - } - - div.widget { - margin: 0 auto 10px !important; - max-width: 480px; - } -} - -@media screen and (max-width: 320px) { - div.widget { - max-width: 320px; - } -} - -@media only screen and (min-width: 1250px) { - #widgets-left #available-widgets .widget { - width: 49%; - float: left; - } - - .widget.ui-draggable-dragging { - min-width: 49%; - } - - #widgets-left #available-widgets .widget:nth-child(even) { - float: right; - } - - #widgets-right .sidebars-column-1, - #widgets-right .sidebars-column-2 { - float: left; - width: 49%; - } - - #widgets-right .sidebars-column-1 { - margin-right: 2%; - } - - #widgets-right.single-sidebar .sidebars-column-1, - #widgets-right.single-sidebar .sidebars-column-2 { - float: none; - width: 100%; - margin: 0; - } -} diff --git a/src/wp-admin/css/widgets.scss b/src/wp-admin/css/widgets.scss new file mode 100644 index 0000000..38d2749 --- /dev/null +++ b/src/wp-admin/css/widgets.scss @@ -0,0 +1,562 @@ +/* General Widgets Styles */ + +.widget { + margin: 0 auto 10px; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.widget-top { + font-size: 13px; + font-weight: 600; + background: #f7f7f7; + a.widget-action { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + text-decoration: none; + &:hover { + -webkit-box-shadow: none; + box-shadow: none; + outline: none; + text-decoration: none; + } + } +} + +.widget-title h4 { + margin: 0; + padding: 15px; + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.widgets-holder-wrap .widget-inside { + border-top: none; + padding: 1px 15px 15px 15px; + line-height: 16px; +} + +.in-widget-title, #widgets-right a.widget-control-edit, #available-widgets .widget-description { + color: #666; +} + +.deleting { + .widget-title, .widget-top a.widget-action:after { + color: #aaa; + } +} + +/* Widget Dragging Helpers */ + +.widget { + &.ui-draggable-dragging { + min-width: 100%; + } + &.ui-sortable-helper { + opacity: 0.8; + } +} + +.widget-placeholder { + border: 1px dashed #bbb; + margin: 0 auto 10px; + height: 45px; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +#widgets-right { + .widget-placeholder { + margin-top: 0; + } + .closed .widget-placeholder { + height: 0; + border: 0; + margin-top: -10px; + } +} + +/* Widget Sidebars */ + +.sidebar-name { + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.sidebar-name-arrow { + position: absolute; + top: 0; + right: 0; + bottom: 0; +} + +.js .sidebar-name { + cursor: pointer; +} + +.sidebar-name h3 { + margin: 0; + padding: 8px 10px; + overflow: hidden; + white-space: nowrap; +} + +.widgets-holder-wrap .description { + padding: 0 0 15px; + margin: 0; + font-style: normal; + color: #777; +} + +#widgets-right .widgets-holder-wrap .description { + padding-left: 7px; + padding-right: 7px; +} + +/* Widgets 2-col Layout */ + +div { + &.widget-liquid-left { + margin: 0; + width: 38%; + float: left; + } + &.widget-liquid-right { + float: right; + width: 58%; + } + &#widgets-left { + padding-top: 12px; + .closed .sidebar-name, .inactive-sidebar.closed .sidebar-name { + margin-bottom: 10px; + } + .sidebar-name { + h3 { + padding: 10px 0; + margin: 0 10px 0 0; + } + .sidebar-name-arrow:before { + right: 0; + top: 4px; + padding: 4px 6px 4px 4px; + } + } + } +} + +/* Widgets Left - Available Widgets */ + +#widgets-left #available-widgets, div#widgets-left .widget-holder { + background: transparent; + border: none; +} + +#widgets-left .widgets-holder-wrap { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +#available-widgets { + .widget-action { + display: none; + } + .widget { + margin: 0; + &:nth-child(odd) { + clear: both; + } + .widget-description { + display: block; + padding: 10px 15px; + font-size: 12px; + } + } + #widget-list { + position: relative; + } +} + +/* Inactive Sidebars */ + +#widgets-left .inactive-sidebar { + clear: both; + width: 100%; + background: transparent; + padding: 0; + margin: 0 0 20px 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + &.first { + margin-top: 40px; + } +} + +/* Not sure what this is for... */ + +div#widgets-left .inactive-sidebar .widget.expanded { + left: auto; +} + +.widget-title-action { + float: right; + position: relative; +} + +div { + &#widgets-left .inactive-sidebar .widgets-sortables { + min-height: 42px; + padding: 0; + background: transparent; + margin: 0; + position: relative; + } + &#widgets-right { + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } + .sidebars-column-1, .sidebars-column-2 { + max-width: 450px; + } + .widgets-holder-wrap { + margin: 10px 0 0 0; + } + .sidebar-description { + min-height: 20px; + margin-top: -5px; + } + .sidebar-name { + h3 { + padding: 15px 7px; + } + .sidebar-name-arrow:before { + right: 0; + top: 4px; + } + } + .widget-top { + padding: 0; + } + .widgets-sortables { + padding: 0 8px; + margin-bottom: 9px; + position: relative; + min-height: 123px; + } + .closed .widgets-sortables { + min-height: 0; + margin-bottom: 0; + } + } +} + +/* Widgets Right */ + +.sidebar-name .spinner { + margin: -5px 5px; + float: none; +} + +/* Dragging a widget over a closed sidebar */ + +#widgets-right .widgets-holder-wrap.widget-hover { + border-color: #777; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +/* Accessibility Mode */ + +.widgets_access { + #widgets-left .widget .widget-top { + cursor: auto; + } + #wpwrap { + .widgets-holder-wrap.closed { + .sidebar-description, .widget { + display: block; + } + } + .widget-control-edit { + display: block; + } + } + #widgets-left .widget .widget-top:hover, #widgets-right .widget .widget-top:hover { + border-color: #ddd; + } +} + +#available-widgets .widget-control-edit .edit, #widgets-left .inactive-sidebar .widget-control-edit .add, #widgets-right .widget-control-edit .add { + display: none; +} + +.widget-control-edit { + display: block; + color: #666; + background: #EEE; + padding: 0 15px; + line-height: 43px; + border-left: 1px solid #DDD; +} + +#widgets-left .widget-control-edit:hover, #widgets-right .widget-control-edit:hover { + color: #fff; + background: #444; + border-left: 0; + outline: 1px solid #444; +} + +.widgets-holder-wrap { + .sidebar-name, .sidebar-description { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } +} + +.editwidget { + margin: 0 auto; + .widget-inside { + display: block; + padding: 0 15px; + } + .widget-control-actions { + margin-top: 20px; + } +} + +.js { + .widgets-holder-wrap.closed { + .widget, .sidebar-description { + display: none; + } + } + .closed br.clear { + display: none; + } +} + +/* Hide Widget Settings by Default */ + +.widget-inside, .widget-description { + display: none; +} + +.widget-inside { + background: #fff; +} + +/* Dragging widgets over the available widget area show's a "Deactivate" message */ + +#removing-widget { + display: none; + font-weight: normal; + padding-left: 15px; + font-size: 12px; + line-height: 1; + color: black; +} + +.js #removing-widget { + color: #2ea2cc; +} + +.widget-control-noform, #access-off { + display: none; +} + +.widgets_access { + .widget-action, .sidebar-name-arrow, #access-on, .widget-holder .description { + display: none; + } +} + +.no-js .widget-holder .description { + display: none; +} + +.widgets_access { + .widget-holder, #widget-list { + padding-top: 10px; + } + #access-off { + display: inline; + } + .sidebar-name, .widget .widget-top { + cursor: default; + } +} + +/* Widgets Area Chooser */ + +.widget-liquid-left #widgets-left.chooser { + #available-widgets .widget, .inactive-sidebar { + -webkit-transition: opacity 0.1s linear; + transition: opacity 0.1s linear; + } + #available-widgets .widget, .inactive-sidebar { + /* -webkit-filter: blur(1px); */ + opacity: 0.2; + pointer-events: none; + } + #available-widgets .widget-in-question { + /* -webkit-filter: none; */ + opacity: 1; + pointer-events: auto; + } +} + +.widgets-chooser ul, #widgets-left .widget-in-question .widget-top, #available-widgets .widget-top:hover, div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { + border-color: #999; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.widgets-chooser { + ul { + &.widgets-chooser-sidebars { + margin: 0; + list-style-type: none; + max-height: 300px; + overflow: auto; + } + border: 1px solid #ccc; + } + display: none; + li { + padding: 10px 15px 10px 35px; + border-bottom: 1px solid #ccc; + background: #fff; + margin: 0; + cursor: pointer; + outline: none; + position: relative; + -webkit-transition: background 0.2s ease-in-out; + transition: background 0.2s ease-in-out; + &:hover { + background: rgba(255, 255, 255, 0.7); + } + &:focus { + background: rgba(255, 255, 255, 0.7); + &:before { + content: '\f147'; + display: block; + -webkit-font-smoothing: antialiased; + font: normal 26px/1 'dashicons'; + color: #999; + position: absolute; + top: 7px; + left: 5px; + } + } + &:last-child { + border: none; + } + &.widgets-chooser-selected { + background: #2ea2cc; + color: #fff; + &:before, &:focus:before { + content: '\f147'; + display: block; + -webkit-font-smoothing: antialiased; + font: normal 26px/1 'dashicons'; + color: #fff; + position: absolute; + top: 7px; + left: 5px; + } + } + } + .widgets-chooser-actions { + padding: 10px 0 12px 0; + text-align: center; + } + button { + margin-right: 5px; + } +} + +#available-widgets .widget .widget-top { + cursor: pointer; +} + +/* =Media Queries +-------------------------------------------------------------- */ + +@media screen and (max-width: 480px) { + div.widget-liquid-left { + width: 100%; + float: none; + border-right: none; + padding-right: 0; + } + #widgets-left { + .sidebar-name, #available-widgets .widget-top, .inactive-sidebar .widgets-sortables { + margin-right: 0; + } + } + div { + &.widget-liquid-right { + width: 100%; + float: none; + } + &.widget { + margin: 0 auto 10px !important; + max-width: 480px; + } + } +} + +@media screen and (max-width: 320px) { + div.widget { + max-width: 320px; + } +} + +@media only screen and (min-width: 1250px) { + #widgets-left #available-widgets .widget { + width: 49%; + float: left; + } + .widget.ui-draggable-dragging { + min-width: 49%; + } + #widgets-left #available-widgets .widget:nth-child(even) { + float: right; + } + #widgets-right { + .sidebars-column-1, .sidebars-column-2 { + float: left; + width: 49%; + } + .sidebars-column-1 { + margin-right: 2%; + } + &.single-sidebar { + .sidebars-column-1, .sidebars-column-2 { + float: none; + width: 100%; + margin: 0; + } + } + } +} diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css deleted file mode 100644 index b29af79..0000000 --- a/src/wp-admin/css/wp-admin.css +++ /dev/null @@ -1,14 +0,0 @@ -@import url(common.css); -@import url(forms.css); -@import url(admin-menu.css); -@import url(dashboard.css); -@import url(list-tables.css); -@import url(edit.css); -@import url(revisions.css); -@import url(media.css); -@import url(themes.css); -@import url(press-this.css); -@import url(about.css); -@import url(nav-menus.css); -@import url(widgets.css); -@import url(l10n.css); diff --git a/src/wp-admin/css/wp-admin.scss b/src/wp-admin/css/wp-admin.scss new file mode 100644 index 0000000..500b40e --- /dev/null +++ b/src/wp-admin/css/wp-admin.scss @@ -0,0 +1,27 @@ +@import url(common.css); + +@import url(forms.css); + +@import url(admin-menu.css); + +@import url(dashboard.css); + +@import url(list-tables.css); + +@import url(edit.css); + +@import url(revisions.css); + +@import url(media.css); + +@import url(themes.css); + +@import url(press-this.css); + +@import url(about.css); + +@import url(nav-menus.css); + +@import url(widgets.css); + +@import url(l10n.css);