You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1421 lines
25 KiB

  1. /* Include margin and padding in the width calculation of input and textarea. */
  2. input,
  3. textarea {
  4. -webkit-box-sizing: border-box;
  5. -moz-box-sizing: border-box;
  6. box-sizing: border-box;
  7. }
  8. input[type="text"],
  9. input[type="password"],
  10. input[type="checkbox"],
  11. input[type="color"],
  12. input[type="date"],
  13. input[type="datetime"],
  14. input[type="datetime-local"],
  15. input[type="email"],
  16. input[type="month"],
  17. input[type="number"],
  18. input[type="search"],
  19. input[type="radio"],
  20. input[type="tel"],
  21. input[type="text"],
  22. input[type="time"],
  23. input[type="url"],
  24. input[type="week"],
  25. select,
  26. textarea {
  27. border: 1px solid #ddd;
  28. -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
  29. box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
  30. background-color: #fff;
  31. color: #32373c;
  32. outline: none;
  33. -webkit-transition: 0.05s border-color ease-in-out;
  34. transition: 0.05s border-color ease-in-out;
  35. }
  36. input[type="text"]:focus,
  37. input[type="password"]:focus,
  38. input[type="color"]:focus,
  39. input[type="date"]:focus,
  40. input[type="datetime"]:focus,
  41. input[type="datetime-local"]:focus,
  42. input[type="email"]:focus,
  43. input[type="month"]:focus,
  44. input[type="number"]:focus,
  45. input[type="search"]:focus,
  46. input[type="tel"]:focus,
  47. input[type="text"]:focus,
  48. input[type="time"]:focus,
  49. input[type="url"]:focus,
  50. input[type="week"]:focus,
  51. input[type="checkbox"]:focus,
  52. input[type="radio"]:focus,
  53. select:focus,
  54. textarea:focus {
  55. border-color: #5b9dd9;
  56. -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
  57. box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
  58. }
  59. /* rtl:ignore */
  60. input[type="email"],
  61. input[type="url"] {
  62. direction: ltr;
  63. }
  64. /* Vertically align the number selector with the input. */
  65. input[type="number"] {
  66. height: 28px;
  67. line-height: 1;
  68. }
  69. input[type="checkbox"],
  70. input[type="radio"] {
  71. border: 1px solid #b4b9be;
  72. background: #fff;
  73. color: #555;
  74. clear: none;
  75. cursor: pointer;
  76. display: inline-block;
  77. line-height: 0;
  78. height: 16px;
  79. margin: -4px 4px 0 0;
  80. outline: 0;
  81. padding: 0 !important;
  82. text-align: center;
  83. vertical-align: middle;
  84. width: 16px;
  85. min-width: 16px;
  86. -webkit-appearance: none;
  87. -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
  88. box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
  89. -webkit-transition: .05s border-color ease-in-out;
  90. transition: .05s border-color ease-in-out;
  91. }
  92. input[type="radio"]:checked + label:before {
  93. color: #82878c;
  94. }
  95. .wp-core-ui input[type="reset"]:hover,
  96. .wp-core-ui input[type="reset"]:active {
  97. color: #00a0d2;
  98. }
  99. td > input[type="checkbox"],
  100. .wp-admin p input[type="checkbox"],
  101. .wp-admin p input[type="radio"] {
  102. margin-top: 0;
  103. }
  104. .wp-admin p label input[type="checkbox"] {
  105. margin-top: -4px;
  106. }
  107. .wp-admin p label input[type="radio"] {
  108. margin-top: -2px;
  109. }
  110. input[type="radio"] {
  111. -webkit-border-radius: 50%;
  112. border-radius: 50%;
  113. margin-right: 4px;
  114. line-height: 10px;
  115. }
  116. input[type="checkbox"]:checked:before,
  117. input[type="radio"]:checked:before {
  118. float: left;
  119. display: inline-block;
  120. vertical-align: middle;
  121. width: 16px;
  122. font: normal 21px/1 dashicons;
  123. speak: none;
  124. -webkit-font-smoothing: antialiased;
  125. -moz-osx-font-smoothing: grayscale;
  126. }
  127. input[type="checkbox"]:checked:before {
  128. content: "\f147";
  129. margin: -3px 0 0 -4px;
  130. color: #1e8cbe;
  131. }
  132. input[type="radio"]:checked:before {
  133. content: "\2022";
  134. text-indent: -9999px;
  135. -webkit-border-radius: 50px;
  136. border-radius: 50px;
  137. font-size: 24px;
  138. width: 6px;
  139. height: 6px;
  140. margin: 4px;
  141. line-height: 16px;
  142. background-color: #1e8cbe;
  143. }
  144. @-moz-document url-prefix() {
  145. input[type="checkbox"],
  146. input[type="radio"],
  147. .form-table input.tog {
  148. margin-bottom: -1px;
  149. }
  150. }
  151. /* Search */
  152. input[type="search"] {
  153. -webkit-appearance: textfield;
  154. }
  155. input[type="search"]::-webkit-search-decoration {
  156. display: none;
  157. }
  158. .ie8 input[type="password"] {
  159. font-family: sans-serif;
  160. }
  161. textarea,
  162. input,
  163. select,
  164. button {
  165. font-family: inherit;
  166. font-size: inherit;
  167. font-weight: inherit;
  168. }
  169. textarea,
  170. input,
  171. select {
  172. font-size: 14px;
  173. padding: 3px 5px;
  174. -webkit-border-radius: 0;
  175. border-radius: 0; /* Reset mobile webkit's default element styling */
  176. }
  177. textarea {
  178. overflow: auto;
  179. padding: 2px 6px;
  180. line-height: 1.4;
  181. resize: vertical;
  182. }
  183. .wp-admin input[type="file"] {
  184. padding: 3px 0;
  185. cursor: pointer;
  186. }
  187. label {
  188. cursor: pointer;
  189. }
  190. input,
  191. select {
  192. margin: 1px;
  193. padding: 3px 5px;
  194. }
  195. input.code {
  196. padding-top: 6px;
  197. }
  198. textarea.code {
  199. line-height: 1.4;
  200. padding: 4px 6px 1px 6px;
  201. }
  202. input.readonly,
  203. input[readonly],
  204. textarea.readonly,
  205. textarea[readonly] {
  206. background-color: #eee;
  207. }
  208. ::-webkit-input-placeholder {
  209. color: #72777c;
  210. }
  211. ::-moz-placeholder {
  212. color: #72777c;
  213. opacity: 1;
  214. }
  215. :-ms-input-placeholder {
  216. color: #72777c;
  217. }
  218. .form-invalid input, .form-invalid input:focus,
  219. .form-invalid select, .form-invalid select:focus {
  220. border-color: #dc3232 !important;
  221. -webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
  222. box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
  223. }
  224. .form-table .form-required.form-invalid td:after {
  225. content: "\f534";
  226. font: normal 20px/1 dashicons;
  227. color: #dc3232;
  228. margin-left: -25px;
  229. vertical-align: middle;
  230. }
  231. /* Adjust error indicator for password layout */
  232. .form-table .form-required.user-pass1-wrap.form-invalid td:after {
  233. content: '';
  234. }
  235. .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
  236. content: '\f534';
  237. font: normal 20px/1 dashicons;
  238. color: #dc3232;
  239. margin: 0 6px 0 -29px;
  240. vertical-align: middle;
  241. }
  242. .form-input-tip {
  243. color: #666;
  244. }
  245. input:disabled,
  246. input.disabled,
  247. select:disabled,
  248. select.disabled,
  249. textarea:disabled,
  250. textarea.disabled {
  251. background: rgba( 255, 255, 255, 0.5 );
  252. border-color: rgba( 222, 222, 222, 0.75 );
  253. -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
  254. box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
  255. color: rgba( 51, 51, 51, 0.5 );
  256. }
  257. input[type="file"]:disabled,
  258. input[type="file"].disabled,
  259. input[type="range"]:disabled,
  260. input[type="range"].disabled {
  261. background: none;
  262. -webkit-box-shadow: none;
  263. box-shadow: none;
  264. cursor: default;
  265. }
  266. input[type="checkbox"]:disabled,
  267. input[type="checkbox"].disabled,
  268. input[type="radio"]:disabled,
  269. input[type="radio"].disabled,
  270. input[type="checkbox"]:disabled:checked:before,
  271. input[type="checkbox"].disabled:checked:before,
  272. input[type="radio"]:disabled:checked:before,
  273. input[type="radio"].disabled:checked:before {
  274. opacity: 0.7;
  275. }
  276. /*------------------------------------------------------------------------------
  277. 2.0 - Forms
  278. ------------------------------------------------------------------------------*/
  279. .wp-admin select {
  280. padding: 2px;
  281. line-height: 28px;
  282. height: 28px;
  283. vertical-align: middle;
  284. }
  285. .wp-admin .button-cancel {
  286. padding: 0 5px;
  287. line-height: 2;
  288. }
  289. .meta-box-sortables select {
  290. max-width: 100%;
  291. }
  292. .wp-admin select[multiple] {
  293. height: auto;
  294. }
  295. .submit {
  296. padding: 1.5em 0;
  297. margin: 5px 0;
  298. -webkit-border-bottom-left-radius: 3px;
  299. border-bottom-left-radius: 3px;
  300. -webkit-border-bottom-right-radius: 3px;
  301. border-bottom-right-radius: 3px;
  302. border: none;
  303. }
  304. form p.submit a.cancel:hover {
  305. text-decoration: none;
  306. }
  307. p.submit {
  308. text-align: left;
  309. max-width: 100%;
  310. margin-top: 20px;
  311. padding-top: 10px;
  312. }
  313. .textright p.submit {
  314. border: none;
  315. text-align: right;
  316. }
  317. table.form-table + p.submit,
  318. table.form-table + input + p.submit,
  319. table.form-table + input + input + p.submit {
  320. border-top: none;
  321. padding-top: 0;
  322. }
  323. #minor-publishing-actions input,
  324. #major-publishing-actions input,
  325. #minor-publishing-actions .preview {
  326. text-align: center;
  327. }
  328. textarea.all-options,
  329. input.all-options {
  330. width: 250px;
  331. }
  332. input.large-text,
  333. textarea.large-text {
  334. width: 99%;
  335. }
  336. .regular-text {
  337. width: 25em;
  338. }
  339. input.small-text {
  340. width: 50px;
  341. padding: 1px 6px;
  342. }
  343. input[type="number"].small-text {
  344. width: 65px;
  345. }
  346. input.tiny-text {
  347. width: 35px;
  348. }
  349. input[type="number"].tiny-text {
  350. width: 45px;
  351. }
  352. #doaction,
  353. #doaction2,
  354. #post-query-submit {
  355. margin: 1px 8px 0 0;
  356. }
  357. .tablenav #changeit,
  358. .tablenav #delete_all,
  359. .tablenav #clear-recent-list,
  360. .wp-filter #delete_all {
  361. margin-top: 1px;
  362. }
  363. .tablenav .actions select {
  364. float: left;
  365. margin-right: 6px;
  366. max-width: 200px;
  367. }
  368. .ie8 .tablenav .actions select {
  369. width: 155px;
  370. }
  371. .ie8 .tablenav .actions select#cat {
  372. width: 200px;
  373. }
  374. #timezone_string option {
  375. margin-left: 1em;
  376. }
  377. button.wp-hide-pw > .dashicons {
  378. position: relative;
  379. top: 3px;
  380. }
  381. label,
  382. #your-profile label + a {
  383. vertical-align: middle;
  384. }
  385. fieldset label,
  386. #your-profile label + a {
  387. vertical-align: middle;
  388. }
  389. .options-media-php label[for*="_size_"],
  390. #misc-publishing-actions label {
  391. vertical-align: baseline;
  392. }
  393. #pass-strength-result {
  394. background-color: #eee;
  395. border: 1px solid #ddd;
  396. color: #23282d;
  397. margin: -2px 5px 5px 1px;
  398. padding: 3px 5px;
  399. text-align: center;
  400. width: 25em;
  401. -webkit-box-sizing: border-box;
  402. -moz-box-sizing: border-box;
  403. box-sizing: border-box;
  404. opacity: 0;
  405. }
  406. #pass-strength-result.short {
  407. background-color: #f1adad;
  408. border-color: #e35b5b;
  409. opacity: 1;
  410. }
  411. #pass-strength-result.bad {
  412. background-color: #fbc5a9;
  413. border-color: #f78b53;
  414. opacity: 1;
  415. }
  416. #pass-strength-result.good {
  417. background-color: #ffe399;
  418. border-color: #ffc733;
  419. opacity: 1;
  420. }
  421. #pass-strength-result.strong {
  422. background-color: #c1e1b9;
  423. border-color: #83c373;
  424. opacity: 1;
  425. }
  426. #pass1.short, #pass1-text.short {
  427. border-color: #e35b5b;
  428. }
  429. #pass1.bad, #pass1-text.bad {
  430. border-color: #f78b53;
  431. }
  432. #pass1.good, #pass1-text.good {
  433. border-color: #ffc733;
  434. }
  435. #pass1.strong, #pass1-text.strong {
  436. border-color: #83c373;
  437. }
  438. .pw-weak {
  439. display:none;
  440. }
  441. .indicator-hint {
  442. padding-top: 8px;
  443. }
  444. #pass1-text,
  445. .show-password #pass1 {
  446. display: none;
  447. }
  448. .show-password #pass1-text
  449. {
  450. display: inline-block;
  451. }
  452. .form-table span.description.important {
  453. font-size: 12px;
  454. }
  455. p.search-box {
  456. float: right;
  457. margin: 0;
  458. }
  459. .network-admin.themes-php p.search-box {
  460. clear: left;
  461. }
  462. .search-box input[name="s"],
  463. .tablenav .search-plugins input[name="s"],
  464. .tagsdiv .newtag {
  465. float: left;
  466. height: 28px;
  467. margin: 0 4px 0 0;
  468. }
  469. .js.plugins-php .search-box .wp-filter-search {
  470. margin: 0;
  471. width: 280px;
  472. font-size: 16px;
  473. font-weight: 300;
  474. line-height: 1.5;
  475. padding: 3px 5px;
  476. height: 32px;
  477. }
  478. input[type="text"].ui-autocomplete-loading,
  479. input[type="email"].ui-autocomplete-loading {
  480. background-image: url(../images/loading.gif);
  481. background-repeat: no-repeat;
  482. background-position: right center;
  483. visibility: visible;
  484. }
  485. input.ui-autocomplete-input.open {
  486. border-bottom-color: transparent;
  487. }
  488. ul#add-to-blog-users {
  489. margin: 0 0 0 14px;
  490. }
  491. .ui-autocomplete {
  492. padding: 0;
  493. margin: 0;
  494. list-style: none;
  495. position: absolute;
  496. z-index: 10000;
  497. border: 1px solid #5b9dd9;
  498. -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
  499. box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
  500. background-color: #fff;
  501. }
  502. .ui-autocomplete li {
  503. margin-bottom: 0;
  504. padding: 4px 10px;
  505. white-space: nowrap;
  506. text-align: left;
  507. cursor: pointer;
  508. }
  509. /* Colors for the wplink toolbar autocomplete. */
  510. .ui-autocomplete .ui-state-focus {
  511. background-color: #ddd;
  512. }
  513. /* Colors for the tags autocomplete. */
  514. .wp-tags-autocomplete .ui-state-focus {
  515. background-color: #0073aa;
  516. color: #fff;
  517. }
  518. /*------------------------------------------------------------------------------
  519. 15.0 - Comments Screen
  520. ------------------------------------------------------------------------------*/
  521. .form-table {
  522. border-collapse: collapse;
  523. margin-top: 0.5em;
  524. width: 100%;
  525. clear: both;
  526. }
  527. .form-table,
  528. .form-table td,
  529. .form-table th,
  530. .form-table td p {
  531. font-size: 14px;
  532. }
  533. .form-table td {
  534. margin-bottom: 9px;
  535. padding: 15px 10px;
  536. line-height: 1.3;
  537. vertical-align: middle;
  538. }
  539. .form-table th,
  540. .form-wrap label {
  541. color: #23282d;
  542. font-weight: 400;
  543. text-shadow: none;
  544. vertical-align: baseline;
  545. }
  546. .form-table th {
  547. vertical-align: top;
  548. text-align: left;
  549. padding: 20px 10px 20px 0;
  550. width: 200px;
  551. line-height: 1.3;
  552. font-weight: 600;
  553. }
  554. .form-table th.th-full {
  555. width: auto;
  556. font-weight: 400;
  557. }
  558. .form-table td p {
  559. margin-top: 4px;
  560. margin-bottom: 0;
  561. }
  562. .form-table .date-time-doc {
  563. margin-top: 1em;
  564. }
  565. .form-table p.timezone-info {
  566. margin: 1em 0;
  567. }
  568. .form-table td fieldset label {
  569. margin: 0.25em 0 0.5em !important;
  570. display: inline-block;
  571. }
  572. .form-table td fieldset label,
  573. .form-table td fieldset p,
  574. .form-table td fieldset li {
  575. line-height: 1.4em;
  576. }
  577. .form-table input.tog,
  578. .form-table input[type="radio"] {
  579. margin-top: -4px;
  580. margin-right: 4px;
  581. float: none;
  582. }
  583. .form-table .pre {
  584. padding: 8px;
  585. margin: 0;
  586. }
  587. table.form-table td .updated {
  588. font-size: 13px;
  589. }
  590. table.form-table td .updated p {
  591. font-size: 13px;
  592. margin: 0.3em 0;
  593. }
  594. /*------------------------------------------------------------------------------
  595. 18.0 - Users
  596. ------------------------------------------------------------------------------*/
  597. #profile-page .form-table textarea {
  598. width: 500px;
  599. margin-bottom: 6px;
  600. }
  601. #profile-page .form-table #rich_editing {
  602. margin-right: 5px
  603. }
  604. #your-profile legend {
  605. font-size: 22px;
  606. }
  607. #display_name {
  608. width: 15em;
  609. }
  610. #adduser .form-field input,
  611. #createuser .form-field input {
  612. width: 25em;
  613. }
  614. .color-option {
  615. display: inline-block;
  616. width: 24%;
  617. padding: 5px 15px 15px;
  618. -webkit-box-sizing: border-box;
  619. -moz-box-sizing: border-box;
  620. box-sizing: border-box;
  621. margin-bottom: 3px;
  622. }
  623. .color-option:hover,
  624. .color-option.selected {
  625. background: #ddd;
  626. }
  627. .color-palette {
  628. width: 100%;
  629. border-spacing: 0;
  630. border-collapse: collapse;
  631. }
  632. .color-palette td {
  633. height: 20px;
  634. padding: 0;
  635. border: none;
  636. }
  637. .color-option {
  638. cursor: pointer;
  639. }
  640. /*------------------------------------------------------------------------------
  641. 19.0 - Tools
  642. ------------------------------------------------------------------------------*/
  643. .tool-box .title {
  644. margin: 8px 0;
  645. font-size: 18px;
  646. font-weight: 400;
  647. line-height: 24px;
  648. }
  649. .label-responsive {
  650. vertical-align: middle;
  651. }
  652. #export-filters p {
  653. margin: 0 0 1em;
  654. }
  655. #export-filters p.submit {
  656. margin: 7px 0 5px;
  657. }
  658. /* Card styles */
  659. .card {
  660. position: relative;
  661. margin-top: 20px;
  662. padding: 0.7em 2em 1em;
  663. min-width: 255px;
  664. max-width: 520px;
  665. border: 1px solid #e5e5e5;
  666. -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  667. box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  668. background: #fff;
  669. }
  670. /* Press this styles */
  671. .pressthis h4 {
  672. margin: 2em 0 1em;
  673. }
  674. .pressthis textarea {
  675. width: 100%;
  676. font-size: 1em;
  677. }
  678. #pressthis-code-wrap {
  679. overflow: auto;
  680. }
  681. .pressthis-bookmarklet-wrapper {
  682. margin: 20px 0 8px;
  683. vertical-align: top;
  684. position: relative;
  685. z-index: 1;
  686. }
  687. .pressthis-bookmarklet,
  688. .pressthis-bookmarklet:hover,
  689. .pressthis-bookmarklet:focus,
  690. .pressthis-bookmarklet:active {
  691. display: inline-block;
  692. position: relative;
  693. cursor: move;
  694. color: #32373c;
  695. background: #e5e5e5;
  696. -webkit-border-radius: 5px;
  697. border-radius: 5px;
  698. border: 1px solid #b4b9be;
  699. font-style: normal;
  700. line-height: 16px;
  701. font-size: 14px;
  702. text-decoration: none;
  703. }
  704. .pressthis-bookmarklet:active {
  705. outline: none;
  706. }
  707. .pressthis-bookmarklet:after {
  708. content: "";
  709. width: 70%;
  710. height: 55%;
  711. z-index: -1;
  712. position: absolute;
  713. right: 10px;
  714. bottom: 9px;
  715. background: transparent;
  716. -webkit-transform: skew(20deg) rotate(6deg);
  717. -ms-transform: skew(20deg) rotate(6deg);
  718. transform: skew(20deg) rotate(6deg);
  719. -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
  720. box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
  721. }
  722. .pressthis-bookmarklet:hover:after {
  723. -webkit-transform: skew(20deg) rotate(9deg);
  724. -ms-transform: skew(20deg) rotate(9deg);
  725. transform: skew(20deg) rotate(9deg);
  726. -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
  727. box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
  728. }
  729. .pressthis-bookmarklet span {
  730. display: inline-block;
  731. margin: 0px 0 0;
  732. padding: 0px 12px 8px 9px;
  733. }
  734. .pressthis-bookmarklet span:before {
  735. color: #72777c;
  736. font: normal 20px/1 dashicons;
  737. content: "\f157";
  738. position: relative;
  739. display: inline-block;
  740. top: 4px;
  741. margin-right: 4px;
  742. }
  743. .pressthis-js-toggle {
  744. margin-left: 10px;
  745. padding: 0;
  746. height: auto;
  747. vertical-align: top;
  748. }
  749. /* to override the button class being applied */
  750. .pressthis-js-toggle.button.button {
  751. margin-left: 10px;
  752. padding: 0;
  753. height: auto;
  754. vertical-align: top;
  755. }
  756. .pressthis-js-toggle .dashicons {
  757. margin: 5px 8px 6px 7px;
  758. color: #555d66;
  759. }
  760. /*------------------------------------------------------------------------------
  761. 20.0 - Settings
  762. ------------------------------------------------------------------------------*/
  763. .timezone-info code {
  764. white-space: nowrap;
  765. }
  766. .defaultavatarpicker .avatar {
  767. margin: 2px 0;
  768. vertical-align: middle;
  769. }
  770. .options-general-php .date-time-text {
  771. display: inline-block;
  772. min-width: 10em;
  773. }
  774. .options-general-php input.small-text {
  775. width: 56px;
  776. }
  777. .options-general-php .spinner {
  778. float: none;
  779. margin: 0 3px;
  780. }
  781. .settings-php .language-install-spinner,
  782. .options-general-php .language-install-spinner {
  783. display: inline-block;
  784. float: none;
  785. margin: -3px 5px 0;
  786. vertical-align: middle;
  787. }
  788. /*------------------------------------------------------------------------------
  789. 21.0 - Network Admin
  790. ------------------------------------------------------------------------------*/
  791. .setup-php textarea {
  792. max-width: 100%;
  793. }
  794. .form-field #site-address {
  795. max-width: 25em;
  796. }
  797. .form-field #domain {
  798. max-width: 22em;
  799. }
  800. .form-field #site-title,
  801. .form-field #admin-email,
  802. .form-field #path,
  803. .form-field #blog_registered,
  804. .form-field #blog_last_updated {
  805. max-width: 25em;
  806. }
  807. .form-field #path {
  808. margin-bottom: 5px;
  809. }
  810. #search-users,
  811. #search-sites {
  812. max-width: 100%;
  813. }
  814. /*------------------------------------------------------------------------------
  815. Credentials check dialog for Install and Updates
  816. ------------------------------------------------------------------------------*/
  817. .request-filesystem-credentials-dialog {
  818. display: none;
  819. }
  820. .request-filesystem-credentials-dialog .notification-dialog {
  821. top: 10%;
  822. max-height: 85%;
  823. }
  824. .request-filesystem-credentials-dialog-content {
  825. margin: 25px;
  826. }
  827. #request-filesystem-credentials-title {
  828. font-size: 1.3em;
  829. margin: 1em 0;
  830. }
  831. .request-filesystem-credentials-form legend {
  832. font-size: 1em;
  833. padding: 1.33em 0;
  834. font-weight: 600;
  835. }
  836. .request-filesystem-credentials-form input[type="text"],
  837. .request-filesystem-credentials-form input[type="password"] {
  838. display: block;
  839. }
  840. .request-filesystem-credentials-dialog input[type="text"],
  841. .request-filesystem-credentials-dialog input[type="password"] {
  842. width: 100%;
  843. }
  844. .request-filesystem-credentials-form .field-title {
  845. font-weight: 600;
  846. }
  847. .request-filesystem-credentials-dialog label[for="hostname"],
  848. .request-filesystem-credentials-dialog label[for="public_key"],
  849. .request-filesystem-credentials-dialog label[for="private_key"] {
  850. display: block;
  851. margin-bottom: 1em;
  852. }
  853. .request-filesystem-credentials-dialog .ftp-username,
  854. .request-filesystem-credentials-dialog .ftp-password {
  855. float: left;
  856. width: 48%;
  857. }
  858. .request-filesystem-credentials-dialog .ftp-password {
  859. margin-left: 4%;
  860. }
  861. .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
  862. text-align: right;
  863. }
  864. .request-filesystem-credentials-dialog label[for="ftp"] {
  865. margin-right: 10px;
  866. }
  867. .request-filesystem-credentials-dialog #auth-keys-desc {
  868. margin-bottom: 0;
  869. }
  870. #request-filesystem-credentials-dialog .button:not(:last-child) {
  871. margin-right: 10px;
  872. }
  873. #request-filesystem-credentials-form .cancel-button {
  874. display: none;
  875. }
  876. #request-filesystem-credentials-dialog .cancel-button {
  877. display: inline;
  878. }
  879. .request-filesystem-credentials-dialog .ftp-username,
  880. .request-filesystem-credentials-dialog .ftp-password {
  881. float: none;
  882. width: auto;
  883. }
  884. .request-filesystem-credentials-dialog .ftp-username {
  885. margin-bottom: 1em;
  886. }
  887. .request-filesystem-credentials-dialog .ftp-password {
  888. margin: 0;
  889. }
  890. .request-filesystem-credentials-dialog .ftp-password em {
  891. color: #888;
  892. }
  893. .request-filesystem-credentials-dialog label {
  894. display: block;
  895. line-height: 1.5;
  896. margin-bottom: 1em;
  897. }
  898. .request-filesystem-credentials-form legend {
  899. padding-bottom: 0;
  900. }
  901. .request-filesystem-credentials-form #ssh-keys legend {
  902. font-size: 1.3em;
  903. }
  904. .request-filesystem-credentials-form .notice {
  905. margin: 0 0 20px 0;
  906. clear: both;
  907. }
  908. /* =Media Queries
  909. -------------------------------------------------------------- */
  910. @media screen and ( max-width: 782px ) {
  911. /* Input Elements */
  912. textarea {
  913. -webkit-appearance: none;
  914. }
  915. input[type="text"],
  916. input[type="email"],
  917. input[type="search"],
  918. input[type="password"],
  919. input[type="number"] {
  920. -webkit-appearance: none;
  921. padding: 6px 10px;
  922. }
  923. input[type="number"] {
  924. height: 40px;
  925. }
  926. input.code {
  927. padding-bottom: 5px;
  928. padding-top: 10px;
  929. }
  930. input[type="checkbox"],
  931. .widefat th input[type="checkbox"],
  932. .widefat thead td input[type="checkbox"],
  933. .widefat tfoot td input[type="checkbox"] {
  934. -webkit-appearance: none;
  935. padding: 10px;
  936. }
  937. .widefat th input[type="checkbox"],
  938. .widefat thead td input[type="checkbox"],
  939. .widefat tfoot td input[type="checkbox"] {
  940. margin-bottom: 8px;
  941. }
  942. input[type="checkbox"]:checked:before,
  943. .widefat th input[type="checkbox"]:before,
  944. .widefat thead td input[type="checkbox"]:before,
  945. .widefat tfoot td input[type="checkbox"]:before {
  946. font: normal 30px/1 dashicons;
  947. margin: -3px -5px;
  948. }
  949. input[type="radio"],
  950. input[type="checkbox"] {
  951. height: 25px;
  952. width: 25px;
  953. }
  954. .wp-admin p input[type="checkbox"],
  955. .wp-admin p input[type="radio"] {
  956. margin-top: -3px;
  957. }
  958. input[type="radio"]:checked:before {
  959. vertical-align: middle;
  960. width: 9px;
  961. height: 9px;
  962. margin: 7px;
  963. line-height: 16px;
  964. }
  965. .wp-upload-form input[type="submit"] {
  966. margin-top: 10px;
  967. }
  968. #wpbody select {
  969. height: 36px;
  970. font-size: 16px;
  971. }
  972. .wp-admin .button-cancel {
  973. padding: 0;
  974. font-size: 14px;
  975. }
  976. #adduser .form-field input,
  977. #createuser .form-field input {
  978. width: 100%;
  979. }
  980. .form-table {
  981. -webkit-box-sizing: border-box;
  982. -moz-box-sizing: border-box;
  983. box-sizing: border-box;
  984. }
  985. .form-table th,
  986. .form-table td,
  987. .label-responsive {
  988. display: block;
  989. width: auto;
  990. vertical-align: middle;
  991. }
  992. .label-responsive {
  993. margin: 0.5em 0;
  994. }
  995. .export-filters li {
  996. margin-bottom: 0;
  997. }
  998. .form-table .color-palette td {
  999. display: table-cell;
  1000. width: 15px;
  1001. }
  1002. .form-table table.color-palette {
  1003. margin-right: 10px;
  1004. }
  1005. textarea,
  1006. input {
  1007. font-size: 16px;
  1008. }
  1009. .form-table td input[type="text"],
  1010. .form-table td input[type="email"],
  1011. .form-table td input[type="password"],
  1012. .form-table td select,
  1013. .form-table td textarea,
  1014. .form-table span.description,
  1015. #profile-page .form-table textarea {
  1016. width: 100%;
  1017. font-size: 16px;
  1018. line-height: 1.5;
  1019. padding: 7px 10px;
  1020. display: block;
  1021. max-width: none;
  1022. -webkit-box-sizing: border-box;
  1023. -moz-box-sizing: border-box;
  1024. box-sizing: border-box;
  1025. }
  1026. .form-table .form-required.form-invalid td:after {
  1027. float: right;
  1028. margin: -30px 3px 0 0;
  1029. }
  1030. #wpbody .form-table td select {
  1031. height: 40px;
  1032. }
  1033. input[type="text"].small-text,
  1034. input[type="search"].small-text,
  1035. input[type="password"].small-text,
  1036. input[type="number"].small-text,
  1037. input[type="number"].small-text,
  1038. .form-table input[type="text"].small-text {
  1039. width: auto;
  1040. max-width: 55px;
  1041. display: inline;
  1042. padding: 3px 6px;
  1043. margin: 0 3px;
  1044. }
  1045. #pass-strength-result {
  1046. width: 100%;
  1047. -webkit-box-sizing: border-box;
  1048. -moz-box-sizing: border-box;
  1049. box-sizing: border-box;
  1050. padding: 8px;
  1051. }
  1052. p.search-box {
  1053. float: none;
  1054. position: absolute;
  1055. bottom: 0;
  1056. width: 98%;
  1057. height: 90px;
  1058. margin-bottom: 20px;
  1059. }
  1060. p.search-box input[name="s"] {
  1061. height: auto;
  1062. float: none;
  1063. width: 100%;
  1064. margin-bottom: 10px;
  1065. vertical-align: middle;
  1066. -webkit-appearance: none;
  1067. }
  1068. p.search-box input[type="submit"] {
  1069. margin-bottom: 10px;
  1070. }
  1071. .form-table span.description {
  1072. display: inline;
  1073. padding: 4px 0 0;
  1074. line-height: 1.4em;
  1075. font-size: 14px;
  1076. }
  1077. .form-table th {
  1078. padding-top: 10px;
  1079. padding-bottom: 0;
  1080. border-bottom: 0;
  1081. }
  1082. .form-table td {
  1083. margin-bottom: 0;
  1084. padding-bottom: 6px;
  1085. padding-top: 4px;
  1086. padding-left: 0;
  1087. }
  1088. .form-table.permalink-structure td code {
  1089. margin-left: 32px;
  1090. }
  1091. .form-table.permalink-structure td input[type="text"] {
  1092. margin-left: 32px;
  1093. margin-top: 4px;
  1094. width: 96%;
  1095. }
  1096. .form-table input.regular-text {
  1097. width: 100%;
  1098. }
  1099. .form-table label {
  1100. font-size: 14px;
  1101. }
  1102. .form-table fieldset label {
  1103. display: block;
  1104. }
  1105. #utc-time,
  1106. #local-time {
  1107. display: block;
  1108. float: none;
  1109. margin-top: 0.5em;
  1110. }
  1111. .form-field #domain {
  1112. max-width: none;
  1113. }
  1114. /* New Password */
  1115. .wp-pwd {
  1116. position: relative;
  1117. }
  1118. .wp-pwd [type="text"],
  1119. .wp-pwd [type="password"] {
  1120. padding-right: 40px;
  1121. }
  1122. .wp-pwd button.button {
  1123. background: transparent;
  1124. border: none;
  1125. -webkit-box-shadow: none;
  1126. box-shadow: none;
  1127. line-height: 2;
  1128. margin: 0;
  1129. padding: 5px 10px;
  1130. position: absolute;
  1131. right: 0;
  1132. top: 0;
  1133. }
  1134. .wp-pwd button.button:hover,
  1135. .wp-pwd button.button:focus,
  1136. .wp-pwd button.button:active {
  1137. background: transparent;
  1138. }
  1139. .wp-pwd .button .text {
  1140. display: none;
  1141. }
  1142. .options-general-php input[type="text"].small-text {
  1143. max-width: 60px;
  1144. margin: 0;
  1145. }
  1146. }
  1147. @media only screen and (max-width: 768px) {
  1148. .form-field input[type="text"],
  1149. .form-field input[type="email"],
  1150. .form-field input[type="password"],
  1151. .form-field select,
  1152. .form-field textarea {
  1153. width: 99%;
  1154. }
  1155. .form-wrap .form-field {
  1156. padding:0;
  1157. }
  1158. /* users */
  1159. #profile-page .form-table textarea {
  1160. max-width: 400px;
  1161. width: auto;
  1162. }
  1163. }
  1164. @media only screen and (max-height: 480px) {
  1165. /* Request Credentials */
  1166. .request-filesystem-credentials-dialog .notification-dialog{
  1167. width: 100%;
  1168. height: 100%;
  1169. max-height: 100%;
  1170. position: fixed;
  1171. top: 0;
  1172. margin: 0;
  1173. left: 0;
  1174. }
  1175. }
  1176. /* Smartphone */
  1177. @media screen and (max-width: 600px) {
  1178. /* Color Picker Options */
  1179. .color-option {
  1180. width: 49%;
  1181. }
  1182. }
  1183. @media only screen and (max-width: 320px) {
  1184. .options-general-php .date-time-text.date-time-custom-text {
  1185. min-width: 0;
  1186. margin-right: 0.5em;
  1187. }
  1188. }