API tools faq
paste
Advertisement
secumbu

WPCodeBox Scrollbar + Darkmode - Updated

secumbu
Feb 3rd, 2022 (edited)
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 14.08 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2.  
  3. /**
  4.  *   WPCodeBox Dark Mode v 1.0.0 modded by Sebastian Piskaty
  5.  *   Whats added: Darkmode Hue Control, Primary Color Control, Scrollbars, Min Heights
  6.  */
  7.  
  8. add_action('admin_head', function(){
  9.    
  10.     if( isset( $_GET['page'] ) && $_GET['page'] === 'wpcb_menu_page_php') {
  11.    
  12.         echo <<<EOD
  13.         <style type="text/css">
  14.        
  15.         .actions div:not(:first-of-type) svg{
  16.           width: 16px;
  17.           height: 16px;
  18.         }
  19.         .actions div:not(:first-of-type) span{
  20.           font-size: 12px !important;
  21.           text-transform: lowercase !important;
  22.         }
  23.         .actions div:not(:first-of-type) span:first-letter{
  24.           text-transform: uppercase !important;
  25.         }
  26.         .actions div:first-of-type svg{
  27.           width: 18px;
  28.           height: 18px;
  29.           margin-top: 3px;
  30.           margin-left: 4px;
  31.         }
  32.         .ace-cobalt {
  33.             background-color: hsl(var(--bg-hue),22%,15%);
  34.             color: #FFFFFF;
  35.         }
  36.         .ace-cobalt .ace_gutter {
  37.             background: hsl(var(--bg-hue),22%,12%);
  38.             color: hsl(var(--bg-hue),22%,70%);
  39.         }
  40.                 /* Main colors
  41.         ---------------------------------------------- */
  42.         body.toplevel_page_wpcb_menu_page_php, body.tools_page_wpcb_menu_page_php {
  43.             background: hsl(var(--bg-hue),20%,10%) !important;
  44.             --bg-hue: 220;
  45.         }
  46.         .toplevel_page_wpcb_menu_page_php .list-container,
  47.         .toplevel_page_wpcb_menu_page_php .edit-snippet-form,
  48.         .toplevel_page_wpcb_menu_page_php .editor-wrap .actions,
  49.         .toplevel_page_wpcb_menu_page_php .conditions-builder,
  50.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap h2,
  51.         .toplevel_page_wpcb_menu_page_php .settings-wrap .settings-form,
  52.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap h3,
  53.         .tools_page_wpcb_menu_page_php .list-container,
  54.         .tools_page_wpcb_menu_page_php .edit-snippet-form,
  55.         .tools_page_wpcb_menu_page_php .editor-wrap .actions,
  56.         .tools_page_wpcb_menu_page_php .conditions-builder,
  57.         .tools_page_wpcb_menu_page_php .snippet-list-wrap h2,
  58.         .tools_page_wpcb_menu_page_php .settings-wrap .settings-form,
  59.         .tools_page_wpcb_menu_page_php .snippet-list-wrap h3
  60.         {
  61.             background-color: hsl(var(--bg-hue),20%,14%) !important;
  62.             color: hsl(var(--bg-hue),20%,74%) !important;
  63.             border-radius: 4px !important;
  64.         }
  65.        
  66.         /* Layout
  67.         ---------------------------------------------- */
  68.         .toplevel_page_wpcb_menu_page_php #wpcontent,
  69.         .tools_page_wpcb_menu_page_php #wpcontent
  70.         {
  71.             padding-left: 24px;
  72.         }
  73.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap,
  74.         .tools_page_wpcb_menu_page_php .snippet-list-wrap
  75.        
  76.         {
  77.             margin-top: 24px;
  78.         }
  79.         .toplevel_page_wpcb_menu_page_php .list-container,
  80.         .tools_page_wpcb_menu_page_php .snippet-container
  81.         {
  82.             margin-right: 0;
  83.         }
  84.        
  85.        
  86.         /* Snippet Options
  87.         ---------------------------------------------- */
  88.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap input,
  89.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap  select,
  90.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap  textarea,  
  91.         .toplevel_page_wpcb_menu_page_php .snippet-list-wrap .wpcb-select-container > div > div,
  92.         .toplevel_page_wpcb_menu_page_php .wpcb-select-container > div,
  93.         .toplevel_page_wpcb_menu_page_php .css-1r2rbfw-control,
  94.         .toplevel_page_wpcb_menu_page_php .css-1uccc91-singleValue,
  95.         .toplevel_page_wpcb_menu_page_php .css-26l3qy-menu,
  96.        
  97.         .tools_page_wpcb_menu_page_php .snippet-list-wrap input,
  98.         .tools_page_wpcb_menu_page_php .snippet-list-wrap  select,
  99.         .tools_page_wpcb_menu_page_php .snippet-list-wrap  textarea,  
  100.         .tools_page_wpcb_menu_page_php .snippet-list-wrap .wpcb-select-container > div > div,
  101.         .tools_page_wpcb_menu_page_php .wpcb-select-container > div,
  102.         .tools_page_wpcb_menu_page_php .css-1r2rbfw-control,
  103.         .tools_page_wpcb_menu_page_php .css-1uccc91-singleValue,
  104.         .tools_page_wpcb_menu_page_php .css-26l3qy-menu
  105.         {
  106.             background-color: hsl(var(--bg-hue),20%,20%) !important;
  107.             border: 1px solid hsl(var(--bg-hue),20%,25%) !important;
  108.             color: hsl(var(--bg-hue),20%,80%);
  109.         }
  110.         .toplevel_page_wpcb_menu_page_php .wpcb-select-container > div > div > div > div:hover,
  111.         .tools_page_wpcb_menu_page_php .wpcb-select-container > div > div > div > div:hover
  112.         {
  113.             background-color: hsl(160,70%,30%) !important;
  114.         }
  115.        
  116.         .toplevel_page_wpcb_menu_page_php .wpcb-select-container > div > div > div > span + div:hover,
  117.         .tools_page_wpcb_menu_page_php .wpcb-select-container > div > div > div > div:hover
  118.        
  119.         {
  120.             background-color:  hsl(0,70%,50%) !important;
  121.         }
  122.        
  123.         .toplevel_page_wpcb_menu_page_php .wpcb-select-container > div > span + div > div > div,
  124.         .tools_page_wpcb_menu_page_php .wpcb-select-container > div > span + div > div > div
  125.         {
  126.             color: hsl(var(--bg-hue),50%,90%);
  127.         }
  128.        
  129.         .toplevel_page_wpcb_menu_page_php .css-1n7v3ny-option,
  130.         .tools_page_wpcb_menu_page_php .css-1n7v3ny-option
  131.         {
  132.             background-color: hsl(var(--bg-hue),70%,30%) !important;
  133.         }
  134.        
  135.         .toplevel_page_wpcb_menu_page_php .edit-snippet-form svg:hover,
  136.         .tools_page_wpcb_menu_page_php .edit-snippet-form svg:hover
  137.         {
  138.             color: #fff;
  139.         }
  140.         .toplevel_page_wpcb_menu_page_php .edit-snippet-wrap > div:nth-child(2),
  141.         .tools_page_wpcb_menu_page_php .edit-snippet-wrap > div:nth-child(2)
  142.         {
  143.             background-color: unset !important;
  144.         }
  145.         .toplevel_page_wpcb_menu_page_php .edit-snippet-wrap > div:nth-child(2) svg,
  146.         .tools_page_wpcb_menu_page_php .edit-snippet-wrap > div:nth-child(2) svg
  147.         {
  148.             fill: #c4c4c4;
  149.         }
  150.        
  151.         /* Snippet List
  152.         ---------------------------------------------- */
  153.        
  154.         .toplevel_page_wpcb_menu_page_php .list-actions>div.active,
  155.         .toplevel_page_wpcb_menu_page_php .list-actions>div:hover,
  156.         .tools_page_wpcb_menu_page_php .list-actions>div.active,
  157.         .tools_page_wpcb_menu_page_php .list-actions>div:hover
  158.         {
  159.             color: hsl(165,70%,50%) !important;
  160.         }
  161.            
  162.         .toplevel_page_wpcb_menu_page_php .new-snippet-list,
  163.         .toplevel_page_wpcb_menu_page_php .folder-title-container,
  164.         .tools_page_wpcb_menu_page_php .new-snippet-list,
  165.         .tools_page_wpcb_menu_page_php .folder-title-container
  166.          {
  167.             background-color: hsl(var(--bg-hue),20%,20%) !important;
  168.             color: hsl(var(--bg-hue),22%,75%) !important;
  169.         }
  170.        
  171.         .toplevel_page_wpcb_menu_page_php .folder-title-container,
  172.         .tools_page_wpcb_menu_page_php .folder-title-container
  173.         {
  174.             color: hsl(var(--bg-hue),22%,85%) !important;
  175.         }
  176.         .toplevel_page_wpcb_menu_page_php .new-snippet-list li:hover,
  177.         .toplevel_page_wpcb_menu_page_php .new-snippet-list li:hover .folder-title-container,
  178.         .toplevel_page_wpcb_menu_page_php .repo-snippet-list li:hover,
  179.         .toplevel_page_wpcb_menu_page_php .filter-list li:hover,
  180.         .tools_page_wpcb_menu_page_php .new-snippet-list li:hover,
  181.         .tools_page_wpcb_menu_page_php .new-snippet-list li:hover .folder-title-container,
  182.         .tools_page_wpcb_menu_page_php .repo-snippet-list li:hover,
  183.         .tools_page_wpcb_menu_page_php  .filter-list li:hover
  184.         {
  185.             background-color: hsl(var(--bg-hue),22%,25%)  !important;
  186.         }
  187.        
  188.         /* Editor top bar
  189.         ---------------------------------------------- */
  190.         .toplevel_page_wpcb_menu_page_php .editor-wrap .actions .react-switch-bg,
  191.         .tools_page_wpcb_menu_page_php .editor-wrap .actions .react-switch-bg
  192.         {
  193.                 opacity: 0.6;
  194.         }
  195.         .toplevel_page_wpcb_menu_page_php .editor-wrap .react-switch-handle,
  196.         .tools_page_wpcb_menu_page_php .editor-wrap .react-switch-handle
  197.         {
  198.             height: 20px !important;
  199.             width: 20px !important;
  200.             top:2px !important;
  201.             background: hsl(var(--bg-hue),22%,25%)  !important;
  202.         }
  203.         .toplevel_page_wpcb_menu_page_php .actions>div:not(.first):hover,
  204.         .tools_page_wpcb_menu_page_php .actions>div:not(.first):hover
  205.         {
  206.             background-color: hsl(var(--bg-hue),20%,15%)  !important;
  207.         }
  208.        
  209.         .toplevel_page_wpcb_menu_page_php .actions>div:last-child svg,
  210.         .tools_page_wpcb_menu_page_php .actions>div:last-child svg
  211.         {
  212.             color: hsl(165,50%,75%)  !important;
  213.         }
  214.        
  215.         /* Editor
  216.         ---------------------------------------------- */
  217.        
  218.         .toplevel_page_wpcb_menu_page_php #acs-editor,
  219.         .tools_page_wpcb_menu_page_php #acs-editor
  220.         {
  221.             border-radius: 0;
  222.             line-height: 1.6;
  223.         }
  224.         .toplevel_page_wpcb_menu_page_php .ace_comment,
  225.         .toplevel_page_wpcb_menu_page_php .modal-main,
  226.         .tools_page_wpcb_menu_page_php .ace_comment,
  227.         .tools_page_wpcb_menu_page_php .modal-main
  228.         {
  229.             color: hsl(var(--bg-hue),20%,35%) !important;
  230.         }
  231.        
  232.         /* Condition builder
  233.         ----------------------------------------*/
  234.         .toplevel_page_wpcb_menu_page_php .condition-group,
  235.         .tools_page_wpcb_menu_page_php .condition-group
  236.         {
  237.             background-color: hsl(var(--bg-hue),20%,20%)  !important;
  238.         }
  239.        
  240.         /* Modal Overlay
  241.         ----------------------------*/
  242.         .toplevel_page_wpcb_menu_page_php .react-confirm-alert-overlay,
  243.         .tools_page_wpcb_menu_page_php .react-confirm-alert-overlay
  244.         {
  245.             background: rgba(49, 55, 60, 0.9) !important;
  246.         }
  247.         .toplevel_page_wpcb_menu_page_php .react-confirm-alert-body h1,
  248.         .tools_page_wpcb_menu_page_php .react-confirm-alert-body h1
  249.         {
  250.            color: rgba(255,255,255,.85) !important;
  251.         }
  252.        
  253.         .toplevel_page_wpcb_menu_page_php .react-confirm-alert-body,
  254.         .tools_page_wpcb_menu_page_php .react-confirm-alert-body
  255.         {
  256.             color: rgba(255,255,255,.85) !important;
  257.             background-color: #3D4348 !important;
  258.         }
  259.        
  260.         /* Repository
  261.         ----------------------------*/
  262.        
  263.         .toplevel_page_wpcb_menu_page_php .modal-main,
  264.         .tools_page_wpcb_menu_page_php .modal-main
  265.         {
  266.             background-color: hsl(var(--bg-hue),20%,15%) !important;
  267.             color: rgba(255,255,255,.85) !important;
  268.         }
  269.         /* Button
  270.         ----------------------------*/
  271.         body .wpcb-dialog-button {
  272.             background: hsl(165,70%,45%) !important;
  273.             padding: 10px 16px !important;
  274.             font-weight: 600;
  275.             font-size: 14px !important;
  276.             color: hsl(var(--bg-hue),20%,15%)  !important;
  277.         }
  278.         /* Top Menu Icon Hover
  279.         ----------------------------*/
  280.         .edit-snippet-wrap .wpcb-actions svg:hover, .list-container svg:not(.snippet-type):hover {
  281.             fill: hsl(165,70%,45%) !important;
  282.         }
  283.         .new-snippet-list li.active {
  284.             background-color: hsl(var(--bg-hue),22%,30%) !important;
  285.             color: #fff;
  286.         }
  287.  
  288.         .folder-li svg.delete-folder-icon, .folder-li svg.edit-folder-icon {
  289.             color: hsl(var(--bg-hue),15%,50%) !important;
  290.         }
  291.         body.toplevel_page_wpcb_menu_page_php .wpcb-select-container > div > div > div > span + div:hover, .tools_page_wpcb_menu_page_php .wpcb-select-container > div > div > div > div:hover {
  292.             background-color: hsl(var(--bg-hue),15%,25%) !important;
  293.         }
  294.         .new-snippet-list .folder-title-container:hover .delete-folder-icon:hover {
  295.             display: block;
  296.             fill: hsl(345,75%,50%) !important;
  297.         }
  298.         .new-snippet-list li div.snippet-li-item .cloud-item-icon:not(:hover) {
  299.             fill: hsl(var(--bg-hue),15%,40%) !important;
  300.             opacity: 1 !important;
  301.         }
  302.         .new-snippet-list li div.snippet-li-item .cloud-item-icon:hover {
  303.             fill: hsl(var(--bg-hue),20%,80%) !important;
  304.             opacity: 1 !important;
  305.         }
  306.         .snippet-list-wrap .list-container {
  307.             max-height: calc(100vh - 150px);
  308.             height: calc(100vh - 150px);
  309.             min-height: calc(100vh - 150px);
  310.             overflow-y: scroll;
  311.             scrollbar-width: thin;
  312.             scrollbar-color: hsl(var(--bg-hue),20%,35%) hsl(var(--bg-hue),20%,15%);
  313.             padding-top: 0px;
  314.         }
  315.         .snippet-list-wrap .list-container .list-header-container {
  316.             position: sticky;
  317.             top: 0;
  318.             padding-top: 10px;
  319.             background: hsl(var(--bg-hue),20%,15%);
  320.         }
  321.         .search-snippets-input {
  322.             position: sticky;
  323.             top: 59px;
  324.         }
  325.         .ace_scrollbar-v {
  326.             scrollbar-width: thin;
  327.             scrollbar-color: hsl(var(--bg-hue),20%,35%) hsl(var(--bg-hue),20%,20%);
  328.         }
  329.         #acs-editor {
  330.             max-height: calc(100vh - 200px) !important;
  331.             height: calc(100vh - 200px) !important;
  332.             min-height: calc(100vh - 200px) !important;
  333.         }
  334.        
  335.         .snippet-list-wrap ::-webkit-scrollbar {
  336.             width: 8px;
  337.             background: hsl(var(--bg-hue),20%,20%)
  338.         }
  339.          
  340.         .snippet-list-wrap ::-webkit-scrollbar-track {
  341.             border-radius: 0px;
  342.         }
  343.          
  344.         .snippet-list-wrap ::-webkit-scrollbar-thumb {
  345.             border-radius: 0px;
  346.             background: hsl(var(--bg-hue),20%,35%)
  347.         }
  348.         </style>
  349.        
  350. EOD;
  351.     }
  352. });
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!