/* Press This styles :) */ /** * Normalize * * normalize.css v3.0.0 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } *, *:before, *:after { box-sizing: border-box; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { *, *:before, *:after { -webkit-font-smoothing: antialiased; } } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 0; margin: 0; padding: 0; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } ::-webkit-input-placeholder { color: #72777c; } ::-moz-placeholder { color: #72777c; opacity: 1; } :-ms-input-placeholder { color: #72777c; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .hide-if-js { display: none; } .screen-reader-text { position: absolute; margin: -1px; padding: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } /** * Typography * * Base element typographic styles. */ body, button, input, select, textarea { color: #404040; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } b, strong { font-weight: 700; } /** * Buttons * * Pushing buttons is what I do. */ .scan-submit { display: inline-block; margin: 0; padding: 0 10px 1px; border-width: 1px; border-style: solid; border-radius: 3px; font-size: 13px; line-height: 2; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; } .split-button { position: relative; display: inline-block; vertical-align: middle; } .split-button-body { display: none; position: absolute; bottom: 39px; right: 0; border: 1px solid #ddd; background-color: #fff; min-width: 180px; max-width: 100%; margin: 0; padding: 8px; list-style: none; box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 ); } .split-button-body:before, .split-button-body:after { position: absolute; right: 12px; display: block; width: 0; height: 0; border-style: solid; border-color: transparent; content: ""; } .split-button-body:before { bottom: -18px; border-top-color: #ccc; border-width: 9px; right: 11px; } .split-button-body:after { bottom: -16px; border-top-color: #fff; border-width: 8px; } .split-button-body .split-button-option { display: block; padding: 5px 15px; margin: 0; width: 100%; border: 0; text-align: left; line-height: 2; background: none; color: inherit; text-decoration: none; outline: none; transition: none; } .split-button-body .split-button-option:hover, .split-button-body .split-button-option:active { color: inherit; } .is-open .split-button-body { display: block; } .split-button-primary, .split-button-toggle { border-radius: 0; display: block; margin: 0; font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; line-height: 2; padding: 0 10px 1px; background: #0085ba; border-color: #0073aa #006799 #006799; border-width: 1px; border-style: solid; box-shadow: 0 1px 0 #006799; color: #fff; text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799; } .split-button-primary { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 0 none; float: left; } .split-button-toggle { padding: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #006799; float: right; } .split-button-toggle i { margin: 4px 20px 3px 0; padding: 0 10px; } .split-button-primary:hover, .split-button-toggle:hover { outline: none; background: #008ec2; border-color: #006799; } .split-button-primary:focus, .split-button-toggle:focus { outline: none; box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; } .split-button-primary:active, .split-button-toggle:active { background: #0073aa; border-color: #006799; box-shadow: inset 0 2px 10px #006799, 0 1px 0 #0073aa; } /** * Forms * * So many input types. */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } [type="checkbox"], [type="radio"] { padding: 0; } [type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } [type="text"], [type="email"], [type="url"], [type="password"], [type="search"], textarea { padding: 0.4em 0.75em; color: #32373c; border: 1px solid #ccc; } [type="text"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="search"]:focus, textarea:focus { color: #32373c; outline: 0; } textarea { overflow: auto; padding-left: 3px; vertical-align: top; } /** * Links */ a { color: #0073aa; } a:visited { color: #0073aa; } a:hover, a:focus, a:active { color: #00a0d2; } /** * Lists */ ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /** * Post formats * * Complete styles for post formats UI */ /* TODO if we remove the
during merge, this can go. */ #post-formats-select br { display: none; } .post-format { width: 1px; height: 1px; position: absolute; top: -9999px; } .lt-ie9 .post-format { margin: 17px 12px 0 13px; width: auto; height: auto; position: static; top: auto; float: left; width: 16px; height: 16px; } .post-format-icon { position: relative; display: block; padding: 13px 2px 14px 13px; cursor: pointer; } .post-format-icon:before, .post-format-icon:after { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; font-size: 20px; line-height: 1; font-family: dashicons; text-decoration: inherit; color: #9ea7af; font-weight: 400; font-style: normal; vertical-align: top; text-align: center; transition: color .1s ease-in 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .post-format-icon:before { content: "\f109"; } .post-format-icon:after { display: none; content: "\f147"; float: right; } .post-format:checked + .post-format-icon { box-shadow: inset 6px 0 0 #00a0d2; background: rgba(46, 162, 204, 0.1); } .post-format:checked + .post-format-icon:before, .post-format:checked + .post-format-icon:after { color: #32373c; } .post-format:focus + .post-format-icon { background: #00a0d2; color: #fff; } .post-format:focus + .post-format-icon:before, .post-format:focus + .post-format-icon:after { color: #fff; } .post-format:checked + .post-format-icon:after { display: block; } .lt-ie9 .post-format-icon { margin-left: 16px; } .post-format-aside:before { content: "\f123"; } .post-format-chat:before { content: "\f125"; } .post-format-gallery:before { content: "\f161"; } .post-format-link:before { content: "\f103"; } .post-format-image:before { content: "\f128"; } .post-format-quote:before { content: "\f122"; } .post-format-status:before { content: "\f130"; } .post-format-video:before { content: "\f126"; } .post-format-audio:before { content: "\f127"; } /** * Tags * * Complete styles for tags UI */ .tagsdiv p { margin: 0; } .tagsdiv .ajaxtag { position: relative; } .tagsdiv .newtag { display: block; position: relative; padding: 11px 58px 11px 16px; width: 100%; border: 0; border-bottom: 1px solid #e5e5e5; font-size: 16px; } .tagsdiv .tagadd { position: absolute; top: 0; right: 0; bottom: 1px; border: 0; border-radius: 0; margin: 0; padding: 0 16px; background: #f7f7f7; border-left: 1px solid #f1f1f1; box-shadow: none; } .tagsdiv .tagadd:hover, .tagsdiv .tagadd:active, .tagsdiv .tagadd:focus { outline: 0; background: #2991b7; border-color: #20708e; color: #fff; box-shadow: none; } .tagsdiv .howto { color: #727272; font-style: italic; margin: 10px 0 6px 16px; } /* Tags */ .tagchecklist { padding: 16px 28px 5px; } .tagchecklist:before, .tagchecklist:after { content: ""; display: table; } .tagchecklist:after { clear: both; } .tagchecklist > span { float: left; margin-right: 25px; font-size: 13px; line-height: 1.8; white-space: nowrap; cursor: default; } @media (max-width: 600px) { .tagchecklist > span { margin-bottom: 15px; font-size: 16px; line-height: 1.3; } } .tagchecklist .ntdelbutton { position: absolute; width: 24px; height: 24px; border: none; margin: 0 0 0 -19px; padding: 0; background: none; cursor: pointer; text-indent: 0;; position: absolute; } .tagchecklist .ntdelbutton .remove-tag-icon:before { content: "\f153"; display: block; margin-left: 2px; height: 20px; width: 20px; border-radius: 50%; background: transparent; color: #0073aa; /* line-height tweak to vertically center the icon cross browsers */ font: 400 16px/1.28 dashicons; text-align: center; -webkit-font-smoothing: antialiased; } .tagchecklist .ntdelbutton:focus { outline: 0; } .tagchecklist .ntdelbutton:hover .remove-tag-icon:before, .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { color: #c00; } .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); } /* THE TAG CLOUD. */ .tagsdiv + p { margin: 0; } .press-this .tagcloud-link { display: block; margin: 0 16px 5px; padding: 0; text-decoration: none; outline: 0; color: inherit; } .press-this .tagcloud-link:hover, .press-this .tagcloud-link:active { color: inherit; } .tagcloud-link:focus { text-decoration: underline; } .popular-tags { border: none; line-height: 2em; padding: 8px 12px 12px; text-align: justify; } .popular-tags a { padding: 0 3px; } .the-tagcloud { margin: 0; padding: 16px; } .the-tagcloud a { text-decoration: none; outline: 0; } .the-tagcloud a:focus { text-decoration: underline; } .tagcloud h3 { margin: 2px 0 12px; } /** * Categories * * Complete styles for post categories UI */ input[type="search"].categories-search, .add-category-name { display: block; width: 100%; padding: 0.85714em 1.07143em; border: 0; border-radius: 0; border-bottom: 1px solid #e5e5e5; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media (max-width: 600px) { input[type="search"].categories-search, .add-category-name { /* Needs to be 16px to prevent zooming on iOS. Guh. */ font-size: 16px; } } .press-this .add-cat-toggle { float: right; margin-top: -45px; line-height: 20px; padding: 12px 10px 8px; color: #0073aa; text-decoration: none; transition: none; } .press-this .add-cat-toggle:focus { color: #00a0d2; } .press-this .add-cat-toggle.is-toggled { padding: 10px; } .press-this .add-cat-toggle.is-toggled .dashicons:before { content: "\f179"; } .add-category { position: relative; border-bottom: 1px solid #e5e5e5; } .add-category.is-hidden { display: none; } .add-category .add-cat-submit { position: absolute; top: 0; right: 0; border: 0; border-radius: 0; padding: 12px 16px; background: #f7f7f7; border-left: 1px solid #f1f1f1; } .add-category .add-cat-submit:hover, .add-category .add-cat-submit:active, .add-category .add-cat-submit:focus { outline: 0; background: #2991b7; border-color: #20708e; color: #fff; } /* Parent category select */ .postform-wrapper { padding: 12px; } .postform { display: block; margin: 0; width: 100%; height: 34px; border: 0; border-radius: 0; border: 1px solid #e5e5e5; background: #fff; background-size: 20px 20px; overflow: hidden; line-height: 21px; text-overflow: ellipsis; text-decoration: none; vertical-align: top; white-space: nowrap; cursor: pointer; outline: 0; } .postform:focus { border-color: #0073aa; box-shadow: 0 0 0 3px #00a0d2; outline: 0; -moz-outline: none; -moz-user-focus: ignore; } .postform::-ms-expand { display: none; } .postform::-ms-value { background: none; color: #727272; } .postform:-moz-focusring { color: transparent; text-shadow: 0 0 0 #727272; } /* Category list */ .categories-select { margin: 0; padding: 0; list-style: none; } .categories-select ul { margin: 0; padding: 0; list-style: none; } .category { position: relative; display: block; padding: 13px 16px 14px 16px; cursor: pointer; background: #fff; } .category:focus, .category.selected:focus { outline: 0; background: #00a0d2; color: #fff; } .category.selected { box-shadow: inset 6px 0 0 #00a0d2; background: #E9F5F9; } .category.selected:after { display: inline-block; content: "\f147"; position: absolute; top: 13px; right: 0; width: 20px; height: 20px; margin-right: 10px; font-size: 20px; line-height: 1; font-family: dashicons; text-decoration: inherit; color: #23282d; font-weight: 400; font-style: normal; vertical-align: top; text-align: center; transition: color .1s ease-in 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .category.selected:focus:after { color: #fff; } .categories-select ul .category { padding-left: 24px; } .categories-select ul ul .category { padding-left: 32px; } .categories-select ul ul ul .category { padding-left: 40px; } .categories-select ul ul ul ul .category { padding-left: 48px; } .categories-select ul ul ul ul ul .category { padding-left: 56px; } .categories-select ul ul ul ul ul ul .category { padding-left: 64px; } .categories-select .is-hidden { display: none; } .categories-select .is-hidden.searched-parent { display: block; } /* Category search */ .categories-search-wrapper { position: relative; } .categories-search-wrapper.is-hidden { display: none; } .categories-search-wrapper label { position: absolute; top: 50%; right: 10px; margin-top: -10px; color: #9ea7af; } /** * Main */ html { overflow: auto; } body { overflow-x: hidden; height: 100%; } html { background: #fff; box-shadow: -10px 0 0 rgba(0, 0, 0, 0.3); } @media (max-width: 900px) { body { font-size: 16px; } } @media (max-width: 320px) { body { font-size: 14px; } } .lt-ie9 { overflow: visible; } .adminbar { position: relative; width: 100%; padding: 0 0.8em; min-height: 3.2em; background: #23282d; color: #fff; z-index: 9999; } .adminbar:before, .adminbar:after { content: ""; display: table; } .adminbar:after { clear: both; } .adminbar .dashicons { color: #a0a5aa; /* same as WP admin bar icons */ } .press-this .adminbar button { position: absolute; top: 50%; right: 6px; margin-top: -13px; padding: 0 10px 1px; font-size: 13px; text-decoration: none; transition: none; } @media (max-width: 320px) { .adminbar { min-height: 45px; } } .current-site { margin-top: 0.5625em; font-size: 16px; line-height: 44px; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 600px) { .current-site { margin: 3px 0 0; } } @media (max-width: 320px) { .current-site { margin: 0; font-size: 14px; } } .current-site-link { text-decoration: none; } .current-site-link:focus { outline: 0; } .current-site-link:focus .current-site-name{ text-decoration: underline; } .current-site-name { color: #ededed; } @media (max-width: 320px) { .current-site-name { font-weight: 600; } } .current-site .dashicons-wordpress { position: relative; top: -1px; margin-right: 10px; vertical-align: middle; } .options, .options.open .on-closed, .options.closed .on-open { display: none; } @media (max-width: 900px) { .options { display: block; } } .options-panel-back.is-hidden { display: none; } .options:focus .dashicons { color: #fff; text-decoration: none; } .options .dashicons { margin-top: 3px; } .options { color: #00a0d2; } .alert { position: relative; margin: 0; padding: 16px 50px; border-bottom: 1px solid #e5e5e5; font-size: 14px; } .alert:before { content: ""; position: absolute; top: 50%; left: 30px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #00a0d2; } @media (max-width: 600px) { .alert { padding: 16px 35px; } .alert:before { left: 15px; } } .alert.is-error:before { background: red; } .scan { position: relative; border-bottom: 1px solid #e5e5e5; } @media (max-width: 900px) { .scan form { transition: opacity .3s ease-in-out; } .scan.is-hidden form { opacity: .2; pointer-events: none; } } .scan-url { display: block; border: 0; padding: 0.85714em 1.07143em; font-size: 14px; width: 100%; } @media (max-width: 600px) { .scan-url { font-size: 16px; } } .scan-submit { position: absolute; top: 0; right: 0; bottom: 0; padding: 0 1.07143em; background: #f7f7f7; border-color: #ddd; border: 0; border-left: 1px solid #f1f1f1; border-radius: 0; color: #555; font-size: 14px; line-height: 1.6; } .scan-submit:hover, .scan-submit:focus { background: #008ec2; border-color: #006799; color: #fff; outline: 0; } .scan-submit:active { background: #0073aa; border-color: #006799; color: #fff; } .scan-submit:visited { color: #555; } .wrapper { position: relative; margin-bottom: 60px; margin-right: 320px; } .wrapper:before, .wrapper:after { content: ""; display: table; } .wrapper:after { clear: both; } @media (max-width: 900px) { .wrapper { margin: 0; width: 100%; } } .editor-wrapper { overflow: auto; float: left; width: 100%; } .editor-wrapper:before, .editor-wrapper:after { content: ""; display: table; } .editor-wrapper:after { clear: both; } .editor { padding: 0 1.5em 4.75em; max-width: 700px; margin: 0 auto; } .spinner { height: 20px; width: 20px; display: inline-block; visibility: hidden; background: url(../images/spinner.gif) no-repeat center; background-size: 20px 20px; opacity: 0.7; filter: alpha(opacity=70); line-height: 1; vertical-align: middle; } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .spinner { background-image: url(../images/spinner-2x.gif); } } .spinner.is-active { visibility: visible; } /* Make the text inside the editor textarea white. Prevents a "flash" on loading the page */ #pressthis { color: #fff; } @media (min-width: 901px) { .editor { max-width: 760px; } } @media (max-width: 320px) { .editor { padding: 0; } } .post-title, .post-title-placeholder { margin: 0; padding: .83em 0; width: 100%; border-bottom: 1px solid #e5e5e5; font-size: 32px; line-height: 1.4; font-weight: 700; } .post-title:active, .post-title:focus, .post-title-placeholder:active, .post-title-placeholder:focus { outline: 0; box-shadow: inset 0px -3px 0 #00a0d2; border-color: #00a0d2; } @media (max-width: 900px) { .post-title, .post-title-placeholder { font-size: 24px; } } @media (max-height: 400px) { .post-title, .post-title-placeholder { padding: 15px 0; font-size: 16px; } } @media (max-width: 320px) { .post-title, .post-title-placeholder { font-size: 16px; font-weight: 600; padding: 1.14286em 1.42857em; } } .post-title { /* IE8 fallback */ background: url(data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAAAAABAAEAAAICVAEAOw==); background: none, none; } .post-title:before { /* Keeps empty container from collapsing */ content: "\a0"; display: inline-block; width: 0; speak: none; } .post-title-placeholder { position: absolute; border: 0; color: #82878c; z-index: -1; } .post-title-placeholder.is-hidden { display: none; } /* Suggested images */ .media-list-container { position: relative; padding: 2px 0; border-bottom: 1px solid #e5e5e5; display: none; } .media-list-inner-container { overflow: auto; max-height: 150px; max-height: 40vw; } .media-list-container.has-media { display: block; } .media-list-inner-container:before, .media-list-inner-container:after { content: ""; display: table; } .media-list-inner-container:after { clear: both; } .media-list { margin: 0; padding: 0; } @media (min-width: 321px) { .media-list-inner-container { max-height: 250px; max-height: 40vw; } } @media (min-width: 601px) { .media-list-inner-container { max-height: 200px; max-height: 18.75vw; } } .wppt-all-media-list { list-style: none; margin: 0; padding: 0; } .suggested-media-thumbnail:focus, .is-embed:focus { outline: 0; box-shadow: inset 0 0 0 3px #00a0d2; } .suggested-media-thumbnail { position: relative; display: block; float: left; width: 16.66%; padding: 16.66% 0 0 16.66%; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #d8d8d8; color: #fff; color: rgba(255, 255, 255, 0.6); cursor: pointer; } .suggested-media-thumbnail:hover, .suggested-media-thumbnail:active, .suggested-media-thumbnail:focus { color: #fff; } .suggested-media-thumbnail:before, .suggested-media-thumbnail:after { display: inline-block; position: absolute; font-size: 20px; line-height: 1; font-family: dashicons; text-decoration: inherit; font-weight: 400; font-style: normal; transition: color .1s ease-in 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .suggested-media-thumbnail:before { left: 50%; top: 50%; margin: -20px 0 0 -20px; font-size: 40px; } .suggested-media-thumbnail:after { content: "\f132"; right: 3%; bottom: 2%; } @media (min-width: 601px) { .suggested-media-thumbnail { width: 12.5%; padding: 12.5% 0 0 12.5%; } } .is-embed:before { content: "\f104"; color: #fff; color: rgba(255, 255, 255, 0.9); } .is-embed.is-audio:hover:before, .is-embed.is-audio:active:before, .is-embed.is-audio:focus:before, .is-embed.is-tweet:hover:before, .is-embed.is-tweet:active:before, .is-embed.is-tweet:focus:before { color: #fff; } .is-embed.is-video { background-color: #23282d; } .is-embed.is-video:hover:before, .is-embed.is-video:active:before, .is-embed.is-video:focus:before { color: rgba(255, 255, 255, 0.2); } .is-embed.is-video:before { content: "\f236"; } .is-embed.is-audio { background-color: #ff7d44; } .is-embed.is-audio:before { content: "\f127"; } .is-embed.is-tweet { background-color: #55acee; } .is-embed.is-tweet:before { content: "\f301"; } .no-media { margin: 0; padding: 0; border: 0; } /* Actions bar */ .press-this-actions { position: fixed; bottom: 0; left: 0; width: 100%; background: #f1f1f1; background: rgba(241, 241, 241, 0.9); border-top: 1px solid #e5e5e5; } @media (max-width: 900px) { .press-this-actions { -webkit-transform: translateY(0); transform: translateY(0); transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .press-this-actions.is-hidden { -webkit-transform: translateY(100%); transform: translateY(100%); } } .add-media { float: left; margin: 14px 0 14px 30px; font-size: 0; } @media (max-width: 320px) { .add-media { margin: 10px 0 10px 10px; } } .insert-media { color: #9ea7af; float: left; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden; } .insert-media:hover, .insert-media:focus, .insert-media:active { color: #23282d; } .insert-media:focus, .insert-media:active { outline: 0; color: #00a0d2; box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); } .insert-media .dashicons { padding: 11px; width: 63px; height: 58px; font-size: 40px; } @media (max-width: 320px) { .insert-media .dashicons { width: 55px; height: 49px; padding: 14px; font-size: 20px; } } .post-actions { float: right; margin: 14px 30px 14px 0; font-size: 13px; } @media (max-width: 320px) { .post-actions { margin: 10px 10px 10px 0; } } .publish-button .saving-draft, .publish-button.is-saving .publish { display: none; } .publish-button.is-saving .saving-draft { display: inline; } /* TinyMCE styles */ .editor .wp-media-buttons { float: none; } .editor div.mce-toolbar-grp { padding: 0.71429em 0; background: none; border: 0; } @media (max-height: 400px), (max-width: 320px) { .editor div.mce-toolbar-grp { padding: 0; } } .mce-stack-layout:before, .mce-stack-layout:after { content: ""; display: table; } .mce-stack-layout:after { clear: both; } .mce-container.mce-toolbar { float: left; } .mce-container.mce-toolbar:nth-child(2) { float: right; } @media (max-width: 600px) { .mce-first .mce-btn:nth-child(3), .mce-first .mce-btn:nth-child(4) { position: absolute; margin: -1px; padding: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .mce-first .mce-btn:nth-child(3):focus, .mce-first .mce-btn:nth-child(4):focus { position: static; margin: 1px; padding: inherit; height: auto; width: auto; overflow: visible; clip: auto; border: 1px solid #999; } } #wp-link-wrap { font-size: 13px; } #wp-link-wrap input[type="text"] { padding: 3px 5px; margin: 1px; } @media screen and (max-width: 782px) { #wp-link-wrap { font-size: 14px; } #wp-link-wrap input[type="text"] { padding: 6px 10px; } } #wp-link-wrap .howto { color: #666; font-style: italic; } /* Options panel (sidebar) */ .options-panel { position: relative; float: right; margin-right: -320px; width: 320px; border-left: 1px solid #e5e5e5; font-size: 14px; /* Keeps background the full height of the screen, but only visually. Clicks go through. */ box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5; outline: 0; } .options-panel-back { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; outline: 0; } @media (max-width: 900px) { .options-panel { background: #fff; -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .options-panel.is-hidden { visibility: hidden; } .options-panel.is-off-screen { -webkit-transform: translateX(0); transform: translateX(0); } } @media (max-width: 320px) { .options-panel { margin-right: -100%; width: 100%; border: 0; box-shadow: 5001px 5000px 0 5000px #fff; } .options-panel-back { width: 100%; } } .post-options { background: #fff; position: absolute; right: 0; width: 100%; overflow-x: hidden; } .post-options .post-option-contents { margin-left: 3px; color: #32373c; } .post-option-forward:before { position: absolute; top: 50%; right: 8px; margin-top: -10px; content: "\f345" } .post-option-back:before { content: "\f341"; } .lt-ie9 .options-panel, .lt-ie9 .post-options { border-left: 1px solid #e5e5e5; } .lt-ie9 .post-options.is-off-screen { border: 0; } .post-option { position: relative; } .post-options .post-option { display: block; width: 100%; margin: 0; padding: 13px 37px 13px 14px; border: 0; border-bottom: 1px solid #e5e5e5; text-decoration: none; text-align: left; background: none; color: #9ea7af; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .post-options .post-option:focus { outline: 0; box-shadow: inset 5px 0 0 #00a0d2; border-color: #e5e5e5; } .is-off-screen > .post-option { right: 100%; } .is-hidden > .post-option { visibility: hidden; } @media (min-width: 1px) { .is-off-screen > .post-option { right: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .post-option-title { display: inline-block; margin: 0 0 0 8px; font-size: 14px; font-weight: 400; } .setting-modal { position: relative; top: 0; left: 0; width: 100%; overflow: hidden; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } .setting-modal.is-hidden { visibility: hidden; height: 0; } .setting-modal.is-off-screen { left: 100%; } @media (min-width: 1px) { .setting-modal.is-off-screen { left: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } .press-this .modal-close { display: block; width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid #e5e5e5; background: none; color: #00a0d2; text-decoration: none; text-align: left; } .press-this .modal-close:focus { outline: 0; box-shadow: inset 5px 0 0 #00a0d2; border-color: #e5e5e5; } .setting-title { position: relative; top: -1px; margin-left: 11px; } /* Text editor */ #pressthis { color: #404040; resize: none; padding-top: 30px; font-size: 16px; } .wp-editor-wrap .quicktags-toolbar { background: transparent; border: none; } /* Switch editor buttons */ .wp-editor-wrap .wp-editor-tools { z-index: 0; } .wp-editor-wrap .wp-editor-tabs { padding: 2px; } .wp-editor-wrap .wp-switch-editor { top: 0; margin: 3px 0 0 5px; padding: 3px 8px; background: #f5f5f5; color: #555; border-color: #ccc; } .wp-editor-wrap .wp-switch-editor:hover { background: #fafafa; border-color: #999; color: #23282d; } .wp-editor-wrap.tmce-active .switch-tmce, .wp-editor-wrap.html-active .switch-html { background: #fff; border-color: #d8d8d8; } /* Inline link dialog */ .wp-link-input input { border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 ); background-color: #fff; color: #32373c; outline: none; transition: 0.05s border-color ease-in-out; } /* UI Autocomplete (for inline link and wpLink) */ .ui-autocomplete { padding: 0; margin: 0; list-style: none; position: absolute; z-index: 10000; border: 1px solid #5b9dd9; box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 ); background-color: #fff; font-size: 14px; } .ui-autocomplete li { margin-bottom: 0; padding: 4px 10px; white-space: nowrap; text-align: left; cursor: pointer; } /* Colors for the wplink toolbar autocomplete. */ .ui-autocomplete .ui-state-focus { background-color: #ddd; } /* Colors for the tags autocomplete. */ .wp-tags-autocomplete .ui-state-focus { background-color: #0073aa; color: #fff; }