pastebin

Paste Search Dynamic
Recent pastes
style
  1. :root {
  2.   /*colors*/
  3.   --primary: #2C9EB7;
  4.   --header: #38526A;
  5.   --blue: #236DE7;
  6.   --white: #ffffff;
  7.  
  8.   /*text*/
  9.   --gray-dark: #3C3B59;
  10.   --gray-light: #666666;
  11.   --table-heading: #708AA4;
  12.  
  13.   /*panels and borders*/
  14.   --divider: #CAD8EC;
  15.   --border: #D8D6D5;
  16.   --border-radius: 6px;
  17.   --code-background: #E7F0F4;
  18.  
  19.   /*shadows*/
  20.   --panel-shadow: 0 2px 1px 0 rgba(39, 45, 77, .05), 0 2px 8px 0 rgba(39, 45, 77, .05);
  21.   --subnav-shadow: 0 1px 3px 0 rgba(63, 65, 80, .15);
  22.  
  23.   /*row/col-gap*/
  24.   --gap-xs: 8px;
  25.   --gap-sm: 16px;
  26.   --gap-md: 24px;
  27.   --gap-lg: 32px;
  28.  
  29.   /*warning alert*/
  30.   --warning-text: #6A4E04;
  31.   --warning-fill: #FFFBF2;
  32.   --warning-border: #E2A70A;
  33.  
  34.   /*other*/
  35.   --subnav-item-active: #1E6075;
  36. }
  37.  
  38. /*overrides, reset and wrapper*/
  39. #wpcontent {
  40.   padding: 0 !important;
  41. }
  42.  
  43. .wrap, #wpdb.wrap {
  44.   margin: 0;
  45. }
  46.  
  47. #contextual-help-link {
  48.   position: absolute;
  49.   right: 0px;
  50. }
  51.  
  52. @media screen and (max-width: 782px) {
  53.   #screen-meta-links {
  54.     margin-bottom: 0;
  55.   }
  56. }
  57.  
  58. #wpbody-content {
  59.   padding-bottom: 32px;
  60. }
  61.  
  62. .content-wrap {
  63.   margin: 3rem 2rem;
  64.   max-width: 1280px;
  65. }
  66.  
  67. /*header styling----------------------------------------------------------*/
  68. .header {
  69.   background: var(--header);
  70.   /* width: 100%; */
  71.   display: flex;
  72.   padding: 24px 32px;
  73.   align-items: center;
  74.   margin: 0;
  75.   overflow: visible;
  76. }
  77.  
  78. .header h2 {
  79.   color: var(--white);
  80.   font-weight: 500;
  81.   font-size: 1.1rem;
  82. }
  83.  
  84. .header img {
  85.   width: 3rem;rgb(60, 59, 89)
  86.   height: 3rem;
  87.   margin-right: 1.25rem;
  88. }
  89.  
  90. /*subnav styling----------------------------------------------------------*/
  91. .subnav {
  92.   background: var(--white);
  93.   padding: 0;
  94.   box-shadow: var(--subnav-shadow);
  95. }
  96.  
  97. .subnav ul {
  98.   display: flex;
  99.   margin: 0;
  100.   column-gap: var(--gap-lg);
  101.   padding: 0 32px;
  102. }
  103.  
  104. .subnav li {
  105.   margin: 0;
  106. }
  107.  
  108. .subnav a {
  109.   margin: 0;
  110.   padding: 1.4rem 0 1.2rem 0;
  111.   font-size: .875rem;
  112.   font-weight: 400;
  113.   opacity: .5;
  114.   display: grid;
  115.   text-decoration: none;
  116.   color: var(--gray-dark);
  117. }
  118.  
  119. .subnav a:focus {
  120.   border-bottom: 3px solid rgba(60, 59, 89, .4)!important;
  121.   box-shadow: none;
  122.   outline: 0;
  123. }
  124.  
  125. .subnav a:hover {
  126.   opacity: .7 !important;
  127. }
  128.  
  129. .subnav a.active {
  130.   opacity: 1;
  131.   border-bottom: 3px solid var(--subnav-item-active);
  132. }
  133.  
  134. .subnav a.active:hover {
  135.   opacity: 1 !important;
  136. }
  137.  
  138. /*table panels------------------------------------------------*/
  139. .panel-heading {
  140.   padding: 1.2rem 2rem;
  141.   border-bottom: 1px solid var(--divider);
  142.   border-radius: var(--border-radius) var(--border-radius) 0 0;
  143. }
  144.  
  145. .panel-heading h3 {
  146.   color: var(--table-heading);
  147.   text-transform: uppercase;
  148.   font-size: 13px;
  149.   font-weight: 600;
  150.   letter-spacing: 0.75px;
  151.   margin: 0;
  152.   line-height: 1;
  153.   display: flex;
  154.   align-items: center;
  155.   align-self: center;
  156. }
  157.  
  158. h4 {
  159.   font-size: .85rem;
  160. }
  161.  
  162. .instructions {
  163.   margin: 0;
  164.   display: flex;
  165.   align-items: center;
  166. }
  167.  
  168. .instructions label {
  169.   display: flex;
  170.   align-items: center;
  171. }
  172.  
  173. .instructions-container {
  174.   display: flex;
  175.   justify-content: space-between;
  176. }
  177.  
  178. .instructions-container p {
  179.   font-size: 12px;
  180.   letter-spacing: 0;
  181. }
  182.  
  183. /*panel-content*/
  184. .panel-content {
  185.   padding: 2rem;
  186.   display: flex;
  187.   column-gap: var(--gap-lg);
  188.   row-gap: var(--gap-lg);
  189.   flex-direction: column;
  190. }
  191.  
  192. .panel-content ul, p, h2, h3, h4, p {
  193.   margin: 0;
  194. }
  195.  
  196. .panel-content .tables-list {
  197.   display: flex;
  198.   flex-direction: column;
  199.   width: 100%;
  200.   row-gap: var(--gap-md);
  201. }
  202.  
  203. .tables-list p.instructions {
  204.   display: inline-block;
  205. }
  206.  
  207. .panel-content.tables {
  208.   flex-direction: row;
  209. }
  210.  
  211. .panel-content.backup {
  212.   flex-direction: column;
  213. }
  214.  
  215. .panel-content.backup li {
  216.   margin-bottom: 12px !important;
  217. }
  218.  
  219. .panel-content.backup li:last-of-type {
  220.   margin-bottom: 0 !important;
  221. }
  222.  
  223. .panel-content.scheduled-backup form {
  224.   display: flex;
  225.   flex-direction: column;
  226.   row-gap: var(--gap-lg);
  227.   width: 100%;
  228. }
  229.  
  230. .panel-content.scheduled-backup .tables-list.scheduled li {
  231.   margin-bottom: 12px !important;
  232. }
  233.  
  234. .panel-content.scheduled-backup .email {
  235.   margin-top: 0;
  236. }
  237.  
  238. .panel-content.scheduled-backup .row {
  239.   display: flex;
  240.   padding: 0;
  241.   flex-direction: row;
  242.   row-gap: var(--gap-lg);
  243.   width: 100%;
  244. }
  245.  
  246. .panel-content.tables ul, #include-tables-list ul {
  247.   border: 1px solid var(--divider);
  248.   border-radius: var(--border-radius);
  249.   padding: 1rem;
  250.   row-gap: var(--gap-xs);
  251.   display: flex;
  252.   flex-direction: column;
  253. }
  254.  
  255. /*media queries*/
  256. @media only screen and (max-width: 900px) {
  257.   .panel-content.tables {
  258.     flex-direction: column;
  259.   }
  260.  
  261.   .panel-content.scheduled-backup .row {
  262.     flex-direction: column;
  263.   }
  264. }
  265.  
  266. @media only screen and (max-width: 1200px) {
  267.   .instructions-container{
  268.     flex-direction: column;
  269.     height: 2.75rem;
  270.     row-gap: 8px;
  271.     justify-content: flex-start;
  272.   }
  273. }
  274.  
  275. /*fieldset*/
  276. fieldset {
  277.   position: relative;
  278.   margin-top: 50px;
  279.   border-radius: var(--border-radius);
  280. }
  281.  
  282. fieldset legend {
  283.   visibility: hidden;
  284.   position: absolute;
  285.   float: left;
  286.   border-radius: var(--border-radius);
  287. }
  288.  
  289. fieldset.options {
  290.   background: var(--white);
  291.   box-shadow: var(--panel-shadow);
  292.   margin-top: 2.5rem;
  293.   border-radius: var(--border-radius);
  294. }
  295.  
  296. fieldset.options .instructions {
  297.   font-size: 0.75rem;
  298. }
  299.  
  300. fieldset.options ul {
  301.   list-style-type: none;
  302. }
  303.  
  304. fieldset.options li {
  305.   text-align: left;
  306.   display: flex;
  307.   margin: 0;
  308.   align-items: baseline;
  309. }
  310.  
  311. fieldset.options .instructions {
  312.   font-size: 0.75rem;
  313. }
  314.  
  315. /*input styling (button, label, text, checkbox, radio button)----------------------------------------------------------*/
  316. /*submit button*/
  317. input[type="submit"] {
  318.   color: var(--white);
  319.   background: var(--primary);
  320.   padding: 1rem 2rem;
  321.   border: 0;
  322.   border-radius: 4px;
  323.   font-weight: 500;
  324.   cursor: pointer;
  325.   display: inline-flex;
  326.   font-size: 15px;
  327.   /* display: inline-flex; */
  328. }
  329.  
  330. input[type="submit"]:hover {
  331.   filter: brightness(0.95);
  332. }
  333.  
  334. input[type="submit"]:active {
  335.   filter: brightness(0.92);
  336. }
  337.  
  338. input[type="submit"]:focus {
  339.   outline: none;
  340.   box-shadow: 0 0 0 5px rgba(44, 158, 183, .3);
  341. }
  342.  
  343. p.submit {
  344.   border-top: 1px solid var(--divider);
  345. }
  346.  
  347. .submit {
  348.   margin: 0 !important;
  349.   padding: 0;
  350.   padding-top: 32px !important;
  351. }
  352.  
  353. #change-wrap, #next-backup-time .submit {
  354.   padding: 0;
  355.   border: 0;
  356. }
  357.  
  358. #change-backup-time, #save-backup-time {
  359.   padding: 0 !important;
  360.   background: none;
  361.   color: var(--primary);
  362.   margin-left: 8px;
  363.   font-size: 13px;
  364.   text-decoration: underline;
  365. }
  366.  
  367. /*text input*/
  368. input[type="text"] {
  369.   width: 320px;
  370.   border: 1px solid var(--border);
  371.   padding: 0.3rem 1rem;
  372.   font-weight: 400;
  373.   font-size: 14px !important;
  374. }
  375.  
  376. input[type="text"]:focus {
  377.   border-color: var(--blue) !important;
  378.   box-shadow: 0 0 0 1px var(--blue) !important;
  379. }
  380.  
  381. .email {
  382.   margin-top: 32px;
  383.   display: flex;
  384.   flex-direction: column;
  385.   row-gap: var(--gap-xs);
  386. }
  387.  
  388. .email label {
  389.   color: var(--table-heading);
  390.   text-transform: uppercase;
  391.   font-size: 12px;
  392.   font-weight: 600;
  393.   letter-spacing: 0.75px;
  394.   margin: 0;
  395.   line-height: 1;
  396.   display: flex;
  397.   flex-direction: column;
  398.   row-gap: var(--gap-xs);
  399. }
  400.  
  401. /*radio input*/
  402. input[type="radio"] {
  403.   margin-right: .75rem;
  404.   border: 1px solid #999 !important;
  405.   width: 18px !important;
  406.   height: 18px !important;
  407.   box-shadow: none;
  408. }
  409.  
  410. input[type="radio"]:focus {
  411.   outline: 0.15rem solid rgba(35, 109, 231, .4);
  412.   outline-offset: 1px;
  413.   box-shadow: none;
  414. }
  415.  
  416. input[type=radio]:checked::before {
  417.   width: 10px !important;
  418.   height: 10px !important;
  419.   background: var(--blue);
  420.   margin: 3px;
  421. }
  422.  
  423. input[type=radio]:checked {
  424.   border: none;
  425. }
  426.  
  427. /*checkbox input*/
  428. input[type="checkbox"] {
  429.   margin: 0 0.5rem;
  430.   width: 18px !important;
  431.   height: 18px !important;
  432.   box-shadow: none !important;
  433. }
  434.  
  435. input[type=checkbox]:checked {
  436.   border: none;
  437.   background: var(--blue);
  438.   content: url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='3 -4 3 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.95048 6.24692C3.55481 6.64497 2.91278 6.64497 2.5173 6.24692L0.296759 4.01311C-0.0989197 3.61525 -0.0989197 2.96939 0.296759 2.57154C0.692247 2.17349 1.33427 2.17349 1.72995 2.57154L3.05295 3.90226C3.15283 4.00254 3.31495 4.00254 3.41502 3.90226L6.99732 0.298534C7.39281 -0.0995112 8.03483 -0.0995112 8.43051 0.298534C8.62052 0.48968 8.72727 0.749023 8.72727 1.01932C8.72727 1.28961 8.62052 1.54896 8.43051 1.7401L3.95048 6.24692Z' fill='white'/%3E%3C/svg%3E%0A");
  439.   border-color: var(--blue);
  440. }
  441.  
  442. input[type=checkbox]:checked::before {
  443.   border: none;
  444.   color: #fff;
  445.   background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.95048 6.24692C3.55481 6.64497 2.91278 6.64497 2.5173 6.24692L0.296759 4.01311C-0.0989197 3.61525 -0.0989197 2.96939 0.296759 2.57154C0.692247 2.17349 1.33427 2.17349 1.72995 2.57154L3.05295 3.90226C3.15283 4.00254 3.31495 4.00254 3.41502 3.90226L6.99732 0.298534C7.39281 -0.0995112 8.03483 -0.0995112 8.43051 0.298534C8.62052 0.48968 8.72727 0.749023 8.72727 1.01932C8.72727 1.28961 8.62052 1.54896 8.43051 1.7401L3.95048 6.24692Z' fill='white'/%3E%3C/svg%3E%0A");
  446. }
  447.  
  448. input[type="checkbox"]:focus {
  449.   outline: 0.15rem solid rgba(35, 109, 231, .4);
  450.   outline-offset: 1px;
  451.   box-shadow: none;
  452. }
  453.  
  454. .instructions input[type="checkbox"] {
  455.   margin-right: 0.6rem;
  456. }
  457.  
  458. /*code selector----------------------------------------------------------*/
  459. code {
  460.   background: var(--code-background);
  461.   font-size: .75rem;
  462.   padding: 2px 8px;
  463.   border-radius: 2px;
  464.   font-family: system-ui;
  465. }
  466.  
  467. .core-tables code {
  468.   margin-right: 24px;
  469. }
  470.  
  471. code.shift-key {
  472.   border-radius: 2px;
  473.   background-color: #F2F2F2;
  474.   border: 1px solid #AEC1C5;
  475.   padding: 3px 4px;
  476.   line-height: 1;
  477.   margin: 0 0.1rem;
  478.   font-size: 11px;
  479.   display: inline-block;
  480.   white-space: nowrap;
  481. }
  482.  
  483. .core-tables ul li {
  484.   display: flex;
  485.   align-items: center;
  486. }
  487.  
  488. /*progress bar----------------------------------------------------------*/
  489. .backup-running {
  490.   display: flex;
  491.   flex-direction: column;
  492. }
  493.  
  494. .progress-bar {
  495.   display: flex;
  496.   flex-direction: column;
  497.   row-gap: var(--gap-xs);
  498. }
  499.  
  500. #meterbox {
  501.   all: unset !important;
  502.   background: red;
  503.   opacity: 1;
  504. }
  505.  
  506. #meter {
  507.   background-color: var(--primary) !important;
  508.   border-radius: 8px;
  509. }
  510.  
  511. #progress-status {
  512.   color: var(--primary);
  513.   font-size: 28px;
  514.   line-height: 70%;
  515.   margin-bottom: 12px;
  516. }
  517.  
  518. #errors:empty {
  519.   display: none;
  520. }
  521.  
  522. /*notices----------------------------------------------------------*/
  523. .info-notice {
  524.   background: var(--warning-fill);
  525.   border: 1px solid var(--warning-border);
  526.   padding: .6rem 1rem;
  527.   display: inline-flex;
  528.   border-radius: 4px;
  529. }
  530.  
  531. .info-notice p {
  532.   color: var(--warning-text);
  533.   font-size: 13px;
  534.   line-height: 1.4;
  535. }
  536.  
  537. .info-notice img {
  538.   margin-right: .75rem;
  539. }
  540.  
  541. .wp-db-backup-updated {
  542.   background: var(--white);
  543.   border: 1px solid var(--border);
  544.   border-left-width: 5px;
  545.   box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
  546.   margin: 5px 0 15px;
  547.   padding: 6px 12px;
  548.   border-left-color: #00a32a;
  549.   border-radius: 3px;
  550. }
  551.  
  552. .wp-db-backup-updated p {
  553.   margin: 0.5em 0;
  554.   padding: 4px;
  555. }
  556.  
  557. .alternate {
  558.   background-color: var(--white);
  559. }
Parsed in 0.116 seconds