API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 17th, 2019
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 37.82 KB | None | 0 0
raw download clone embed print report
  1. .pickr {
  2.     position: relative;
  3.     overflow: visible;
  4.     -webkit-transform: translateY(0);
  5.     -ms-transform: translateY(0);
  6.     transform: translateY(0)
  7. }
  8.  
  9. .pickr * {
  10.     -webkit-box-sizing: border-box;
  11.     box-sizing: border-box
  12. }
  13.  
  14. .pickr .pcr-button {
  15.     position: relative;
  16.     height: 2em;
  17.     width: 2em;
  18.     padding: .5em;
  19.     cursor: pointer;
  20.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  21.     border-radius: .15em;
  22.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;
  23.     background-size: 0;
  24.     -webkit-transition: all .3s;
  25.     transition: all .3s
  26. }
  27.  
  28. .pickr .pcr-button::before {
  29.     position: absolute;
  30.     content: '';
  31.     top: 0;
  32.     left: 0;
  33.     width: 100%;
  34.     height: 100%;
  35.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  36.     background-size: .5em;
  37.     border-radius: .15em;
  38.     z-index: -1
  39. }
  40.  
  41. .pickr .pcr-button::before {
  42.     z-index: initial
  43. }
  44.  
  45. .pickr .pcr-button::after {
  46.     position: absolute;
  47.     content: '';
  48.     top: 0;
  49.     left: 0;
  50.     height: 100%;
  51.     width: 100%;
  52.     -webkit-transition: background .3s;
  53.     transition: background .3s;
  54.     background: currentColor;
  55.     border-radius: .15em
  56. }
  57.  
  58. .pickr .pcr-button.clear {
  59.     background-size: 70%
  60. }
  61.  
  62. .pickr .pcr-button.clear::before {
  63.     opacity: 0
  64. }
  65.  
  66. .pickr .pcr-button.clear:focus {
  67.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor;
  68.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor
  69. }
  70.  
  71. .pickr .pcr-button.disabled {
  72.     cursor: not-allowed
  73. }
  74.  
  75. .pcr-app button, .pcr-app input, .pickr button, .pickr input {
  76.     outline: 0;
  77.     border: none;
  78.     -webkit-appearance: none
  79. }
  80.  
  81. .pcr-app button:focus, .pcr-app input:focus, .pickr button:focus, .pickr input:focus {
  82.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor;
  83.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor
  84. }
  85.  
  86. .pcr-app[data-theme=classic] {
  87.     position: absolute;
  88.     display: -webkit-box;
  89.     display: -ms-flexbox;
  90.     display: flex;
  91.     -webkit-box-orient: vertical;
  92.     -webkit-box-direction: normal;
  93.     -ms-flex-direction: column;
  94.     flex-direction: column;
  95.     z-index: 10000;
  96.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  97.     -webkit-box-shadow: 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
  98.     box-shadow: 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
  99.     width: 28.5em;
  100.     max-width: 95vw;
  101.     padding: .8em;
  102.     border-radius: .1em;
  103.     background: #fff;
  104.     opacity: 0;
  105.     visibility: hidden;
  106.     -webkit-transition: opacity .3s;
  107.     transition: opacity .3s;
  108.     left: 0;
  109.     top: 0
  110. }
  111.  
  112. .pcr-app[data-theme=classic].visible {
  113.     visibility: visible;
  114.     opacity: 1
  115. }
  116.  
  117. .pcr-app[data-theme=classic] .pcr-swatches {
  118.     display: -webkit-box;
  119.     display: -ms-flexbox;
  120.     display: flex;
  121.     -ms-flex-wrap: wrap;
  122.     flex-wrap: wrap;
  123.     margin-top: .75em
  124. }
  125.  
  126. .pcr-app[data-theme=classic] .pcr-swatches.pcr-last {
  127.     margin: 0
  128. }
  129.  
  130. @supports (display:grid) {
  131.     .pcr-app[data-theme=classic] .pcr-swatches {
  132.         display: grid;
  133.         -webkit-box-align: center;
  134.         -ms-flex-align: center;
  135.         align-items: center;
  136.         grid-template-columns: repeat(auto-fit, 1.75em)
  137.     }
  138. }
  139.  
  140. .pcr-app[data-theme=classic] .pcr-swatches > button {
  141.     font-size: 1em;
  142.     position: relative;
  143.     width: -webkit-calc(1.75em - 5px);
  144.     width: calc(1.75em - 5px);
  145.     height: -webkit-calc(1.75em - 5px);
  146.     height: calc(1.75em - 5px);
  147.     border-radius: .15em;
  148.     cursor: pointer;
  149.     margin: 2.5px;
  150.     -ms-flex-negative: 0;
  151.     flex-shrink: 0;
  152.     justify-self: center;
  153.     -webkit-transition: all .15s;
  154.     transition: all .15s;
  155.     overflow: hidden;
  156.     background: 0 0;
  157.     z-index: 1
  158. }
  159.  
  160. .pcr-app[data-theme=classic] .pcr-swatches > button::before {
  161.     position: absolute;
  162.     content: '';
  163.     top: 0;
  164.     left: 0;
  165.     width: 100%;
  166.     height: 100%;
  167.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  168.     background-size: 6px;
  169.     border-radius: .15em;
  170.     z-index: -1
  171. }
  172.  
  173. .pcr-app[data-theme=classic] .pcr-swatches > button::after {
  174.     content: '';
  175.     position: absolute;
  176.     top: 0;
  177.     left: 0;
  178.     width: 100%;
  179.     height: 100%;
  180.     background: currentColor;
  181.     border: 1px solid rgba(0, 0, 0, .05);
  182.     border-radius: .15em;
  183.     -webkit-box-sizing: border-box;
  184.     box-sizing: border-box
  185. }
  186.  
  187. .pcr-app[data-theme=classic] .pcr-swatches > button:hover {
  188.     -webkit-filter: brightness(1.05);
  189.     filter: brightness(1.05)
  190. }
  191.  
  192. .pcr-app[data-theme=classic] .pcr-interaction {
  193.     display: -webkit-box;
  194.     display: -ms-flexbox;
  195.     display: flex;
  196.     -ms-flex-wrap: wrap;
  197.     flex-wrap: wrap;
  198.     -webkit-box-align: center;
  199.     -ms-flex-align: center;
  200.     align-items: center;
  201.     margin: 0 -.2em 0 -.2em
  202. }
  203.  
  204. .pcr-app[data-theme=classic] .pcr-interaction > * {
  205.     margin: 0 .2em
  206. }
  207.  
  208. .pcr-app[data-theme=classic] .pcr-interaction input {
  209.     letter-spacing: .07em;
  210.     font-size: .75em;
  211.     text-align: center;
  212.     cursor: pointer;
  213.     color: #75797e;
  214.     background: #f1f3f4;
  215.     border-radius: .15em;
  216.     -webkit-transition: all .15s;
  217.     transition: all .15s;
  218.     padding: .45em .5em;
  219.     margin-top: .75em
  220. }
  221.  
  222. .pcr-app[data-theme=classic] .pcr-interaction input:hover {
  223.     -webkit-filter: brightness(.975);
  224.     filter: brightness(.975)
  225. }
  226.  
  227. .pcr-app[data-theme=classic] .pcr-interaction input:focus {
  228.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, .75);
  229.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, .75)
  230. }
  231.  
  232. .pcr-app[data-theme=classic] .pcr-interaction .pcr-result {
  233.     color: #75797e;
  234.     text-align: left;
  235.     -webkit-box-flex: 1;
  236.     -ms-flex: 1 1 8em;
  237.     flex: 1 1 8em;
  238.     min-width: 8em;
  239.     -webkit-transition: all .2s;
  240.     transition: all .2s;
  241.     border-radius: .15em;
  242.     background: #f1f3f4;
  243.     cursor: text
  244. }
  245.  
  246. .pcr-app[data-theme=classic] .pcr-interaction .pcr-result::-moz-selection {
  247.     background: #4285f4;
  248.     color: #fff
  249. }
  250.  
  251. .pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection {
  252.     background: #4285f4;
  253.     color: #fff
  254. }
  255.  
  256. .pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active {
  257.     color: #fff;
  258.     background: #4285f4
  259. }
  260.  
  261. .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear, .pcr-app[data-theme=classic] .pcr-interaction .pcr-save {
  262.     color: #fff;
  263.     width: auto
  264. }
  265.  
  266. .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear, .pcr-app[data-theme=classic] .pcr-interaction .pcr-save {
  267.     color: #fff
  268. }
  269.  
  270. .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover, .pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover {
  271.     -webkit-filter: brightness(.925);
  272.     filter: brightness(.925)
  273. }
  274.  
  275. .pcr-app[data-theme=classic] .pcr-interaction .pcr-save {
  276.     background: #4285f4
  277. }
  278.  
  279. .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear {
  280.     background: #f44250
  281. }
  282.  
  283. .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus {
  284.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, .75);
  285.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, .75)
  286. }
  287.  
  288. .pcr-app[data-theme=classic] .pcr-selection {
  289.     display: -webkit-box;
  290.     display: -ms-flexbox;
  291.     display: flex;
  292.     -webkit-box-pack: justify;
  293.     -ms-flex-pack: justify;
  294.     justify-content: space-between;
  295.     -webkit-box-flex: 1;
  296.     -ms-flex-positive: 1;
  297.     flex-grow: 1
  298. }
  299.  
  300. .pcr-app[data-theme=classic] .pcr-selection .pcr-picker {
  301.     position: absolute;
  302.     height: 18px;
  303.     width: 18px;
  304.     border: 2px solid #fff;
  305.     border-radius: 100%;
  306.     -webkit-user-select: none;
  307.     -moz-user-select: none;
  308.     -ms-user-select: none;
  309.     user-select: none
  310. }
  311.  
  312. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview {
  313.     position: relative;
  314.     z-index: 1;
  315.     width: 2em;
  316.     display: -webkit-box;
  317.     display: -ms-flexbox;
  318.     display: flex;
  319.     -webkit-box-orient: vertical;
  320.     -webkit-box-direction: normal;
  321.     -ms-flex-direction: column;
  322.     flex-direction: column;
  323.     -webkit-box-pack: justify;
  324.     -ms-flex-pack: justify;
  325.     justify-content: space-between;
  326.     margin-right: .75em
  327. }
  328.  
  329. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview::before {
  330.     position: absolute;
  331.     content: '';
  332.     top: 0;
  333.     left: 0;
  334.     width: 100%;
  335.     height: 100%;
  336.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  337.     background-size: .5em;
  338.     border-radius: .15em;
  339.     z-index: -1
  340. }
  341.  
  342. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color {
  343.     cursor: pointer;
  344.     -webkit-transition: background-color .3s, -webkit-box-shadow .3s;
  345.     transition: background-color .3s, -webkit-box-shadow .3s;
  346.     transition: background-color .3s, box-shadow .3s;
  347.     transition: background-color .3s, box-shadow .3s, -webkit-box-shadow .3s;
  348.     border-radius: .15em .15em 0 0;
  349.     z-index: 2
  350. }
  351.  
  352. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color {
  353.     border-radius: 0 0 .15em .15em
  354. }
  355.  
  356. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color {
  357.     background: currentColor;
  358.     width: 100%;
  359.     height: 50%
  360. }
  361.  
  362. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette {
  363.     position: relative;
  364.     -webkit-user-select: none;
  365.     -moz-user-select: none;
  366.     -ms-user-select: none;
  367.     user-select: none;
  368.     display: -webkit-box;
  369.     display: -ms-flexbox;
  370.     display: flex;
  371.     -webkit-box-orient: vertical;
  372.     -webkit-box-direction: normal;
  373.     -ms-flex-direction: column;
  374.     flex-direction: column;
  375.     cursor: grab;
  376.     cursor: -webkit-grab
  377. }
  378.  
  379. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active {
  380.     cursor: grabbing;
  381.     cursor: -webkit-grabbing
  382. }
  383.  
  384. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette {
  385.     width: 100%;
  386.     height: 8em;
  387.     z-index: 1
  388. }
  389.  
  390. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette {
  391.     -webkit-box-flex: 1;
  392.     -ms-flex-positive: 1;
  393.     flex-grow: 1;
  394.     border-radius: .15em
  395. }
  396.  
  397. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette::before {
  398.     position: absolute;
  399.     content: '';
  400.     top: 0;
  401.     left: 0;
  402.     width: 100%;
  403.     height: 100%;
  404.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  405.     background-size: .5em;
  406.     border-radius: .15em;
  407.     z-index: -1
  408. }
  409.  
  410. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity {
  411.     margin-left: .75em
  412. }
  413.  
  414. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker {
  415.     left: 50%;
  416.     -webkit-transform: translateX(-50%);
  417.     -ms-transform: translateX(-50%);
  418.     transform: translateX(-50%)
  419. }
  420.  
  421. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider {
  422.     width: 8px;
  423.     -webkit-box-flex: 1;
  424.     -ms-flex-positive: 1;
  425.     flex-grow: 1;
  426.     border-radius: 50em
  427. }
  428.  
  429. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider {
  430.     background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(yellow), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(magenta), to(red));
  431.     background: -webkit-linear-gradient(top, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red);
  432.     background: linear-gradient(to bottom, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red)
  433. }
  434.  
  435. .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider {
  436.     background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  437.     background: -webkit-linear-gradient(top, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  438.     background: linear-gradient(to bottom, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  439.     background-size: 100%, 50%
  440. }
  441.  
  442. .pickr {
  443.     position: relative;
  444.     overflow: visible;
  445.     -webkit-transform: translateY(0);
  446.     -ms-transform: translateY(0);
  447.     transform: translateY(0)
  448. }
  449.  
  450. .pickr * {
  451.     -webkit-box-sizing: border-box;
  452.     box-sizing: border-box
  453. }
  454.  
  455. .pickr .pcr-button {
  456.     position: relative;
  457.     height: 2em;
  458.     width: 2em;
  459.     padding: .5em;
  460.     cursor: pointer;
  461.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  462.     border-radius: .15em;
  463.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;
  464.     background-size: 0;
  465.     -webkit-transition: all .3s;
  466.     transition: all .3s
  467. }
  468.  
  469. .pickr .pcr-button::before {
  470.     position: absolute;
  471.     content: '';
  472.     top: 0;
  473.     left: 0;
  474.     width: 100%;
  475.     height: 100%;
  476.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  477.     background-size: .5em;
  478.     border-radius: .15em;
  479.     z-index: -1
  480. }
  481.  
  482. .pickr .pcr-button::before {
  483.     z-index: initial
  484. }
  485.  
  486. .pickr .pcr-button::after {
  487.     position: absolute;
  488.     content: '';
  489.     top: 0;
  490.     left: 0;
  491.     height: 100%;
  492.     width: 100%;
  493.     -webkit-transition: background .3s;
  494.     transition: background .3s;
  495.     background: currentColor;
  496.     border-radius: .15em
  497. }
  498.  
  499. .pickr .pcr-button.clear {
  500.     background-size: 70%
  501. }
  502.  
  503. .pickr .pcr-button.clear::before {
  504.     opacity: 0
  505. }
  506.  
  507. .pickr .pcr-button.clear:focus {
  508.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor;
  509.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor
  510. }
  511.  
  512. .pickr .pcr-button.disabled {
  513.     cursor: not-allowed
  514. }
  515.  
  516. .pcr-app button, .pcr-app input, .pickr button, .pickr input {
  517.     outline: 0;
  518.     border: none;
  519.     -webkit-appearance: none
  520. }
  521.  
  522. .pcr-app button:focus, .pcr-app input:focus, .pickr button:focus, .pickr input:focus {
  523.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor;
  524.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor
  525. }
  526.  
  527. .pcr-app[data-theme=monolith] {
  528.     position: absolute;
  529.     display: -webkit-box;
  530.     display: -ms-flexbox;
  531.     display: flex;
  532.     -webkit-box-orient: vertical;
  533.     -webkit-box-direction: normal;
  534.     -ms-flex-direction: column;
  535.     flex-direction: column;
  536.     z-index: 10000;
  537.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  538.     -webkit-box-shadow: 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
  539.     box-shadow: 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
  540.     width: 14.25em;
  541.     max-width: 95vw;
  542.     padding: .8em;
  543.     border-radius: .1em;
  544.     background: #fff;
  545.     opacity: 0;
  546.     visibility: hidden;
  547.     -webkit-transition: opacity .3s;
  548.     transition: opacity .3s;
  549.     left: 0;
  550.     top: 0
  551. }
  552.  
  553. .pcr-app[data-theme=monolith].visible {
  554.     visibility: visible;
  555.     opacity: 1
  556. }
  557.  
  558. .pcr-app[data-theme=monolith] .pcr-swatches {
  559.     display: -webkit-box;
  560.     display: -ms-flexbox;
  561.     display: flex;
  562.     -ms-flex-wrap: wrap;
  563.     flex-wrap: wrap;
  564.     margin-top: .75em
  565. }
  566.  
  567. .pcr-app[data-theme=monolith] .pcr-swatches.pcr-last {
  568.     margin: 0
  569. }
  570.  
  571. @supports (display:grid) {
  572.     .pcr-app[data-theme=monolith] .pcr-swatches {
  573.         display: grid;
  574.         -webkit-box-align: center;
  575.         -ms-flex-align: center;
  576.         align-items: center;
  577.         grid-template-columns: repeat(auto-fit, 1.75em)
  578.     }
  579. }
  580.  
  581. .pcr-app[data-theme=monolith] .pcr-swatches > button {
  582.     font-size: 1em;
  583.     position: relative;
  584.     width: -webkit-calc(1.75em - 5px);
  585.     width: calc(1.75em - 5px);
  586.     height: -webkit-calc(1.75em - 5px);
  587.     height: calc(1.75em - 5px);
  588.     border-radius: .15em;
  589.     cursor: pointer;
  590.     margin: 2.5px;
  591.     -ms-flex-negative: 0;
  592.     flex-shrink: 0;
  593.     justify-self: center;
  594.     -webkit-transition: all .15s;
  595.     transition: all .15s;
  596.     overflow: hidden;
  597.     background: 0 0;
  598.     z-index: 1
  599. }
  600.  
  601. .pcr-app[data-theme=monolith] .pcr-swatches > button::before {
  602.     position: absolute;
  603.     content: '';
  604.     top: 0;
  605.     left: 0;
  606.     width: 100%;
  607.     height: 100%;
  608.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  609.     background-size: 6px;
  610.     border-radius: .15em;
  611.     z-index: -1
  612. }
  613.  
  614. .pcr-app[data-theme=monolith] .pcr-swatches > button::after {
  615.     content: '';
  616.     position: absolute;
  617.     top: 0;
  618.     left: 0;
  619.     width: 100%;
  620.     height: 100%;
  621.     background: currentColor;
  622.     border: 1px solid rgba(0, 0, 0, .05);
  623.     border-radius: .15em;
  624.     -webkit-box-sizing: border-box;
  625.     box-sizing: border-box
  626. }
  627.  
  628. .pcr-app[data-theme=monolith] .pcr-swatches > button:hover {
  629.     -webkit-filter: brightness(1.05);
  630.     filter: brightness(1.05)
  631. }
  632.  
  633. .pcr-app[data-theme=monolith] .pcr-interaction {
  634.     display: -webkit-box;
  635.     display: -ms-flexbox;
  636.     display: flex;
  637.     -ms-flex-wrap: wrap;
  638.     flex-wrap: wrap;
  639.     -webkit-box-align: center;
  640.     -ms-flex-align: center;
  641.     align-items: center;
  642.     margin: 0 -.2em 0 -.2em
  643. }
  644.  
  645. .pcr-app[data-theme=monolith] .pcr-interaction > * {
  646.     margin: 0 .2em
  647. }
  648.  
  649. .pcr-app[data-theme=monolith] .pcr-interaction input {
  650.     letter-spacing: .07em;
  651.     font-size: .75em;
  652.     text-align: center;
  653.     cursor: pointer;
  654.     color: #75797e;
  655.     background: #f1f3f4;
  656.     border-radius: .15em;
  657.     -webkit-transition: all .15s;
  658.     transition: all .15s;
  659.     padding: .45em .5em;
  660.     margin-top: .75em
  661. }
  662.  
  663. .pcr-app[data-theme=monolith] .pcr-interaction input:hover {
  664.     -webkit-filter: brightness(.975);
  665.     filter: brightness(.975)
  666. }
  667.  
  668. .pcr-app[data-theme=monolith] .pcr-interaction input:focus {
  669.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, .75);
  670.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, .75)
  671. }
  672.  
  673. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-result {
  674.     color: #75797e;
  675.     text-align: left;
  676.     -webkit-box-flex: 1;
  677.     -ms-flex: 1 1 8em;
  678.     flex: 1 1 8em;
  679.     min-width: 8em;
  680.     -webkit-transition: all .2s;
  681.     transition: all .2s;
  682.     border-radius: .15em;
  683.     background: #f1f3f4;
  684.     cursor: text
  685. }
  686.  
  687. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-result::-moz-selection {
  688.     background: #4285f4;
  689.     color: #fff
  690. }
  691.  
  692. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-result::selection {
  693.     background: #4285f4;
  694.     color: #fff
  695. }
  696.  
  697. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-type.active {
  698.     color: #fff;
  699.     background: #4285f4
  700. }
  701.  
  702. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-clear, .pcr-app[data-theme=monolith] .pcr-interaction .pcr-save {
  703.     color: #fff;
  704.     width: auto
  705. }
  706.  
  707. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-clear, .pcr-app[data-theme=monolith] .pcr-interaction .pcr-save {
  708.     color: #fff
  709. }
  710.  
  711. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-clear:hover, .pcr-app[data-theme=monolith] .pcr-interaction .pcr-save:hover {
  712.     -webkit-filter: brightness(.925);
  713.     filter: brightness(.925)
  714. }
  715.  
  716. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-save {
  717.     background: #4285f4
  718. }
  719.  
  720. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-clear {
  721.     background: #f44250
  722. }
  723.  
  724. .pcr-app[data-theme=monolith] .pcr-interaction .pcr-clear:focus {
  725.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, .75);
  726.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, .75)
  727. }
  728.  
  729. .pcr-app[data-theme=monolith] .pcr-selection {
  730.     display: -webkit-box;
  731.     display: -ms-flexbox;
  732.     display: flex;
  733.     -webkit-box-orient: vertical;
  734.     -webkit-box-direction: normal;
  735.     -ms-flex-direction: column;
  736.     flex-direction: column;
  737.     -webkit-box-pack: justify;
  738.     -ms-flex-pack: justify;
  739.     justify-content: space-between;
  740.     -webkit-box-flex: 1;
  741.     -ms-flex-positive: 1;
  742.     flex-grow: 1
  743. }
  744.  
  745. .pcr-app[data-theme=monolith] .pcr-selection .pcr-picker {
  746.     position: absolute;
  747.     height: 18px;
  748.     width: 18px;
  749.     border: 2px solid #fff;
  750.     border-radius: 100%;
  751.     -webkit-user-select: none;
  752.     -moz-user-select: none;
  753.     -ms-user-select: none;
  754.     user-select: none
  755. }
  756.  
  757. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview {
  758.     position: relative;
  759.     z-index: 1;
  760.     width: 100%;
  761.     height: 1em;
  762.     display: -webkit-box;
  763.     display: -ms-flexbox;
  764.     display: flex;
  765.     -webkit-box-orient: horizontal;
  766.     -webkit-box-direction: normal;
  767.     -ms-flex-direction: row;
  768.     flex-direction: row;
  769.     -webkit-box-pack: justify;
  770.     -ms-flex-pack: justify;
  771.     justify-content: space-between;
  772.     margin-bottom: .5em
  773. }
  774.  
  775. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview::before {
  776.     position: absolute;
  777.     content: '';
  778.     top: 0;
  779.     left: 0;
  780.     width: 100%;
  781.     height: 100%;
  782.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  783.     background-size: .5em;
  784.     border-radius: .15em;
  785.     z-index: -1
  786. }
  787.  
  788. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
  789.     cursor: pointer;
  790.     -webkit-transition: background-color .3s, -webkit-box-shadow .3s;
  791.     transition: background-color .3s, -webkit-box-shadow .3s;
  792.     transition: background-color .3s, box-shadow .3s;
  793.     transition: background-color .3s, box-shadow .3s, -webkit-box-shadow .3s;
  794.     border-radius: .15em 0 0 .15em;
  795.     z-index: 2
  796. }
  797.  
  798. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color {
  799.     border-radius: 0 .15em .15em 0
  800. }
  801.  
  802. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
  803.     background: currentColor;
  804.     width: 50%;
  805.     height: 100%
  806. }
  807.  
  808. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette {
  809.     position: relative;
  810.     -webkit-user-select: none;
  811.     -moz-user-select: none;
  812.     -ms-user-select: none;
  813.     user-select: none;
  814.     display: -webkit-box;
  815.     display: -ms-flexbox;
  816.     display: flex;
  817.     -webkit-box-orient: vertical;
  818.     -webkit-box-direction: normal;
  819.     -ms-flex-direction: column;
  820.     flex-direction: column;
  821.     cursor: grab;
  822.     cursor: -webkit-grab
  823. }
  824.  
  825. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser:active, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity:active, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette:active {
  826.     cursor: grabbing;
  827.     cursor: -webkit-grabbing
  828. }
  829.  
  830. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette {
  831.     width: 100%;
  832.     height: 8em;
  833.     z-index: 1
  834. }
  835.  
  836. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette {
  837.     border-radius: .15em;
  838.     width: 100%;
  839.     height: 100%
  840. }
  841.  
  842. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette::before {
  843.     position: absolute;
  844.     content: '';
  845.     top: 0;
  846.     left: 0;
  847.     width: 100%;
  848.     height: 100%;
  849.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  850.     background-size: .5em;
  851.     border-radius: .15em;
  852.     z-index: -1
  853. }
  854.  
  855. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity {
  856.     height: .5em;
  857.     margin-top: .75em
  858. }
  859.  
  860. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker {
  861.     top: 50%;
  862.     -webkit-transform: translateY(-50%);
  863.     -ms-transform: translateY(-50%);
  864.     transform: translateY(-50%)
  865. }
  866.  
  867. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
  868.     -webkit-box-flex: 1;
  869.     -ms-flex-positive: 1;
  870.     flex-grow: 1;
  871.     border-radius: 50em
  872. }
  873.  
  874. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider {
  875.     background: -webkit-gradient(linear, left top, right top, from(red), color-stop(yellow), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(magenta), to(red));
  876.     background: -webkit-linear-gradient(left, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red);
  877.     background: linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red)
  878. }
  879.  
  880. .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
  881.     background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  882.     background: -webkit-linear-gradient(left, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  883.     background: linear-gradient(to right, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  884.     background-size: 100%, .25em
  885. }
  886.  
  887. .pickr {
  888.     position: relative;
  889.     overflow: visible;
  890.     -webkit-transform: translateY(0);
  891.     -ms-transform: translateY(0);
  892.     transform: translateY(0)
  893. }
  894.  
  895. .pickr * {
  896.     -webkit-box-sizing: border-box;
  897.     box-sizing: border-box
  898. }
  899.  
  900. .pickr .pcr-button {
  901.     position: relative;
  902.     height: 2em;
  903.     width: 2em;
  904.     padding: .5em;
  905.     cursor: pointer;
  906.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  907.     border-radius: .15em;
  908.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;
  909.     background-size: 0;
  910.     -webkit-transition: all .3s;
  911.     transition: all .3s
  912. }
  913.  
  914. .pickr .pcr-button::before {
  915.     position: absolute;
  916.     content: '';
  917.     top: 0;
  918.     left: 0;
  919.     width: 100%;
  920.     height: 100%;
  921.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  922.     background-size: .5em;
  923.     border-radius: .15em;
  924.     z-index: -1
  925. }
  926.  
  927. .pickr .pcr-button::before {
  928.     z-index: initial
  929. }
  930.  
  931. .pickr .pcr-button::after {
  932.     position: absolute;
  933.     content: '';
  934.     top: 0;
  935.     left: 0;
  936.     height: 100%;
  937.     width: 100%;
  938.     -webkit-transition: background .3s;
  939.     transition: background .3s;
  940.     background: currentColor;
  941.     border-radius: .15em
  942. }
  943.  
  944. .pickr .pcr-button.clear {
  945.     background-size: 70%
  946. }
  947.  
  948. .pickr .pcr-button.clear::before {
  949.     opacity: 0
  950. }
  951.  
  952. .pickr .pcr-button.clear:focus {
  953.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor;
  954.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor
  955. }
  956.  
  957. .pickr .pcr-button.disabled {
  958.     cursor: not-allowed
  959. }
  960.  
  961. .pcr-app button, .pcr-app input, .pickr button, .pickr input {
  962.     outline: 0;
  963.     border: none;
  964.     -webkit-appearance: none
  965. }
  966.  
  967. .pcr-app button:focus, .pcr-app input:focus, .pickr button:focus, .pickr input:focus {
  968.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor;
  969.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor
  970. }
  971.  
  972. .pcr-app[data-theme=nano] {
  973.     position: absolute;
  974.     display: -webkit-box;
  975.     display: -ms-flexbox;
  976.     display: flex;
  977.     -webkit-box-orient: vertical;
  978.     -webkit-box-direction: normal;
  979.     -ms-flex-direction: column;
  980.     flex-direction: column;
  981.     z-index: 10000;
  982.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  983.     -webkit-box-shadow: 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
  984.     box-shadow: 0 .15em 1.5em 0 rgba(0, 0, 0, .1), 0 0 1em 0 rgba(0, 0, 0, .03);
  985.     width: 14.25em;
  986.     max-width: 95vw;
  987.     border-radius: .1em;
  988.     background: #fff;
  989.     opacity: 0;
  990.     visibility: hidden;
  991.     -webkit-transition: opacity .3s;
  992.     transition: opacity .3s;
  993.     left: 0;
  994.     top: 0
  995. }
  996.  
  997. .pcr-app[data-theme=nano].visible {
  998.     visibility: visible;
  999.     opacity: 1
  1000. }
  1001.  
  1002. .pcr-app[data-theme=nano] .pcr-swatches {
  1003.     display: grid;
  1004.     -webkit-box-align: center;
  1005.     -ms-flex-align: center;
  1006.     align-items: center;
  1007.     grid-template-columns: repeat(auto-fit, 1.75em);
  1008.     margin-top: .6em;
  1009.     padding: 0 .6em
  1010. }
  1011.  
  1012. .pcr-app[data-theme=nano] .pcr-swatches.pcr-last {
  1013.     margin: 0
  1014. }
  1015.  
  1016. .pcr-app[data-theme=nano] .pcr-swatches > button {
  1017.     font-size: 1em;
  1018.     position: relative;
  1019.     width: -webkit-calc(1.75em - 5px);
  1020.     width: calc(1.75em - 5px);
  1021.     height: -webkit-calc(1.75em - 5px);
  1022.     height: calc(1.75em - 5px);
  1023.     border-radius: .15em;
  1024.     cursor: pointer;
  1025.     margin: 2.5px;
  1026.     -webkit-transition: all .15s;
  1027.     transition: all .15s;
  1028.     overflow: hidden;
  1029.     background: 0 0;
  1030.     z-index: 1
  1031. }
  1032.  
  1033. .pcr-app[data-theme=nano] .pcr-swatches > button::before {
  1034.     position: absolute;
  1035.     content: '';
  1036.     top: 0;
  1037.     left: 0;
  1038.     width: 100%;
  1039.     height: 100%;
  1040.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  1041.     background-size: 6px;
  1042.     border-radius: .15em;
  1043.     z-index: -1
  1044. }
  1045.  
  1046. .pcr-app[data-theme=nano] .pcr-swatches > button::after {
  1047.     content: '';
  1048.     position: absolute;
  1049.     top: 0;
  1050.     left: 0;
  1051.     width: 100%;
  1052.     height: 100%;
  1053.     background: currentColor;
  1054.     border: 1px solid rgba(0, 0, 0, .05);
  1055.     border-radius: .15em;
  1056.     -webkit-box-sizing: border-box;
  1057.     box-sizing: border-box
  1058. }
  1059.  
  1060. .pcr-app[data-theme=nano] .pcr-swatches > button:hover {
  1061.     -webkit-filter: brightness(1.05);
  1062.     filter: brightness(1.05)
  1063. }
  1064.  
  1065. .pcr-app[data-theme=nano] .pcr-interaction {
  1066.     display: -webkit-box;
  1067.     display: -ms-flexbox;
  1068.     display: flex;
  1069.     -ms-flex-wrap: wrap;
  1070.     flex-wrap: wrap;
  1071.     -webkit-box-align: center;
  1072.     -ms-flex-align: center;
  1073.     align-items: center;
  1074.     margin: 0 -.2em 0 -.2em;
  1075.     padding: 0 .6em .6em .6em
  1076. }
  1077.  
  1078. .pcr-app[data-theme=nano] .pcr-interaction > * {
  1079.     margin: 0 .2em
  1080. }
  1081.  
  1082. .pcr-app[data-theme=nano] .pcr-interaction input {
  1083.     letter-spacing: .07em;
  1084.     font-size: .75em;
  1085.     text-align: center;
  1086.     cursor: pointer;
  1087.     color: #75797e;
  1088.     background: #f1f3f4;
  1089.     border-radius: .15em;
  1090.     -webkit-transition: all .15s;
  1091.     transition: all .15s;
  1092.     padding: .45em .5em;
  1093.     margin-top: .6em
  1094. }
  1095.  
  1096. .pcr-app[data-theme=nano] .pcr-interaction input:hover {
  1097.     -webkit-filter: brightness(.975);
  1098.     filter: brightness(.975)
  1099. }
  1100.  
  1101. .pcr-app[data-theme=nano] .pcr-interaction input:focus {
  1102.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, .75);
  1103.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, .75)
  1104. }
  1105.  
  1106. .pcr-app[data-theme=nano] .pcr-interaction .pcr-result {
  1107.     color: #75797e;
  1108.     text-align: left;
  1109.     -webkit-box-flex: 1;
  1110.     -ms-flex: 1 1 8em;
  1111.     flex: 1 1 8em;
  1112.     min-width: 8em;
  1113.     -webkit-transition: all .2s;
  1114.     transition: all .2s;
  1115.     border-radius: .15em;
  1116.     background: #f1f3f4;
  1117.     cursor: text
  1118. }
  1119.  
  1120. .pcr-app[data-theme=nano] .pcr-interaction .pcr-result::-moz-selection {
  1121.     background: #4285f4;
  1122.     color: #fff
  1123. }
  1124.  
  1125. .pcr-app[data-theme=nano] .pcr-interaction .pcr-result::selection {
  1126.     background: #4285f4;
  1127.     color: #fff
  1128. }
  1129.  
  1130. .pcr-app[data-theme=nano] .pcr-interaction .pcr-type.active {
  1131.     color: #fff;
  1132.     background: #4285f4
  1133. }
  1134.  
  1135. .pcr-app[data-theme=nano] .pcr-interaction .pcr-clear, .pcr-app[data-theme=nano] .pcr-interaction .pcr-save {
  1136.     color: #fff;
  1137.     width: auto
  1138. }
  1139.  
  1140. .pcr-app[data-theme=nano] .pcr-interaction .pcr-clear, .pcr-app[data-theme=nano] .pcr-interaction .pcr-save {
  1141.     color: #fff
  1142. }
  1143.  
  1144. .pcr-app[data-theme=nano] .pcr-interaction .pcr-clear:hover, .pcr-app[data-theme=nano] .pcr-interaction .pcr-save:hover {
  1145.     -webkit-filter: brightness(.925);
  1146.     filter: brightness(.925)
  1147. }
  1148.  
  1149. .pcr-app[data-theme=nano] .pcr-interaction .pcr-save {
  1150.     background: #4285f4
  1151. }
  1152.  
  1153. .pcr-app[data-theme=nano] .pcr-interaction .pcr-clear {
  1154.     background: #f44250
  1155. }
  1156.  
  1157. .pcr-app[data-theme=nano] .pcr-interaction .pcr-clear:focus {
  1158.     -webkit-box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, .75);
  1159.     box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, .75)
  1160. }
  1161.  
  1162. .pcr-app[data-theme=nano] .pcr-selection {
  1163.     display: grid;
  1164.     grid-gap: .6em;
  1165.     grid-template-columns: 1fr 4fr;
  1166.     grid-template-rows: 5fr auto auto;
  1167.     -webkit-box-align: center;
  1168.     -ms-flex-align: center;
  1169.     align-items: center;
  1170.     height: 10.5em;
  1171.     width: 100%;
  1172.     align-self: flex-start
  1173. }
  1174.  
  1175. .pcr-app[data-theme=nano] .pcr-selection .pcr-picker {
  1176.     position: absolute;
  1177.     height: 18px;
  1178.     width: 18px;
  1179.     border: 2px solid #fff;
  1180.     border-radius: 100%;
  1181.     -webkit-user-select: none;
  1182.     -moz-user-select: none;
  1183.     -ms-user-select: none;
  1184.     user-select: none
  1185. }
  1186.  
  1187. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview {
  1188.     grid-area: 2/1/4/1;
  1189.     height: 100%;
  1190.     width: 100%;
  1191.     display: -webkit-box;
  1192.     display: -ms-flexbox;
  1193.     display: flex;
  1194.     -webkit-box-orient: horizontal;
  1195.     -webkit-box-direction: normal;
  1196.     -ms-flex-direction: row;
  1197.     flex-direction: row;
  1198.     -webkit-box-pack: center;
  1199.     -ms-flex-pack: center;
  1200.     justify-content: center;
  1201.     margin-left: .6em
  1202. }
  1203.  
  1204. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color {
  1205.     display: none
  1206. }
  1207.  
  1208. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color {
  1209.     position: relative;
  1210.     background: currentColor;
  1211.     width: 2em;
  1212.     height: 2em;
  1213.     border-radius: 50em;
  1214.     overflow: hidden
  1215. }
  1216.  
  1217. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color::before {
  1218.     position: absolute;
  1219.     content: '';
  1220.     top: 0;
  1221.     left: 0;
  1222.     width: 100%;
  1223.     height: 100%;
  1224.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  1225.     background-size: .5em;
  1226.     border-radius: .15em;
  1227.     z-index: -1
  1228. }
  1229.  
  1230. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette {
  1231.     position: relative;
  1232.     -webkit-user-select: none;
  1233.     -moz-user-select: none;
  1234.     -ms-user-select: none;
  1235.     user-select: none;
  1236.     display: -webkit-box;
  1237.     display: -ms-flexbox;
  1238.     display: flex;
  1239.     -webkit-box-orient: vertical;
  1240.     -webkit-box-direction: normal;
  1241.     -ms-flex-direction: column;
  1242.     flex-direction: column;
  1243.     cursor: grab;
  1244.     cursor: -webkit-grab
  1245. }
  1246.  
  1247. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser:active, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity:active, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette:active {
  1248.     cursor: grabbing;
  1249.     cursor: -webkit-grabbing
  1250. }
  1251.  
  1252. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette {
  1253.     grid-area: 1/1/2/3;
  1254.     width: 100%;
  1255.     height: 100%;
  1256.     z-index: 1
  1257. }
  1258.  
  1259. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette {
  1260.     border-radius: .15em;
  1261.     width: 100%;
  1262.     height: 100%
  1263. }
  1264.  
  1265. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette::before {
  1266.     position: absolute;
  1267.     content: '';
  1268.     top: 0;
  1269.     left: 0;
  1270.     width: 100%;
  1271.     height: 100%;
  1272.     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  1273.     background-size: .5em;
  1274.     border-radius: .15em;
  1275.     z-index: -1
  1276. }
  1277.  
  1278. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser {
  1279.     grid-area: 2/2/2/2
  1280. }
  1281.  
  1282. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
  1283.     grid-area: 3/2/3/2
  1284. }
  1285.  
  1286. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
  1287.     height: .5em;
  1288.     margin: 0 .6em
  1289. }
  1290.  
  1291. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker {
  1292.     top: 50%;
  1293.     -webkit-transform: translateY(-50%);
  1294.     -ms-transform: translateY(-50%);
  1295.     transform: translateY(-50%)
  1296. }
  1297.  
  1298. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
  1299.     -webkit-box-flex: 1;
  1300.     -ms-flex-positive: 1;
  1301.     flex-grow: 1;
  1302.     border-radius: 50em
  1303. }
  1304.  
  1305. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider {
  1306.     background: -webkit-gradient(linear, left top, right top, from(red), color-stop(yellow), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(magenta), to(red));
  1307.     background: -webkit-linear-gradient(left, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red);
  1308.     background: linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red)
  1309. }
  1310.  
  1311. .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
  1312.     background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  1313.     background: -webkit-linear-gradient(left, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  1314.     background: linear-gradient(to right, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  1315.     background-size: 100%, .25em
  1316. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!