/* ==UserStyle==
@name           Jupyter Notebook - Monokai
@namespace      @arv_Anshul in Telegram.
@version        2.0.3
@description    A new userstyle for "Jupyter Notebook" in monokai theme which is install by terminal "pip3 install jupyterthemes" then "jt -t monokai -fs 100 -tfs 16 -fs 16 -ofs 16 -dfs 16 -cellw 85% -T -f firacode -nf ubuntu -nfs 16 -N".
@author         Anshul Raj Verma
==/UserStyle== */
@-moz-document url-prefix("http://localhost:8888/"),
url-prefix("http://localhost:8888/notebooks/") {

  @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');

  /*   @description :-  
A new userstyle for "Jupyter Notebook" in monokai theme which is install by terminal "pip3 install jupyterthemes" then "jt -t monokai -fs 100 -tfs 16 -fs 16 -ofs 16 -dfs 16 -cellw 85% -T -f firacode -nf ubuntu -nfs 16 -N". */
  /*  variables  */
  :root {
    --table-border: #555;
    --png-bg: #eee;
    --default-font: 'Ubuntu';
    --inp-border: #f92672;
    --inp-bg: #333;
    --md-color: #FFA726;
    --fz: 18px;
    --green: #A6E22E;
    --purple: #AE81FF;
    --purple-2: #784ace;
  }

  body > #header #header-container {
    display: none;
  }

  .cm-s-ipython.CodeMirror,
  div.input_area {
    background: var(--inp-bg);
  }

  div.cell.code_cell .input_prompt {
    border-right: 3px solid;
    height: 100%;
  }

  div.cell.code_cell.selected .input,
  div.cell.text_cell.rendered.selected .prompt {
    border-left: 5px solid var(--inp-border) !important;
  }

  .edit_mode div.cell.selected::before {
    border-left: 5px solid var(--green) !important;
    border-radius: 3px 0 0 3px;
  }


  div.CodeMirror-lines,
  div.cell.text_cell .CodeMirror-lines {
    padding: 8px !important;
    margin: 0;
  }

  div.CodeMirror-sizer {
    margin-bottom: 0;
  }

  /*   input prompt */
  div.prompt.input_prompt {
    font-size: 16px !important
  }

/*   .btn,
  .btn-default,
  #cell_type[role="combobox"] {
    font-size: 20px;
  } */

  div#maintoolbar {
    position: sticky;
    margin: 0 !important;
    padding: 0 !important;
  }

  #notebook-container {
    padding: 0;
  }

  /*   function dropdown */
  .smalltooltip {
    height: 200px;
  }

  div#tooltip.ipython_tooltip {
    width: 60%;
    max-width: none;
  }

  div.tooltiptext.bigtooltip {
    max-width: none;
  }

  .ipython_tooltip .tooltiptext pre {
    font-size: 18px;
  }



  /*   output */
  div.output_subarea {
    padding: 5px !important;
  }

  /*   javascript output */
  .output_subarea.output_javascript.rendered_html {
    display: none;
  }

  /*   ml model output */
  div.sk-container div.sk-dashed-wrapped{
    padding: 0.4em !important;  
    padding-top: 0 !important;
    border-radius: 5px;
  }
  
  div.sk-toggleable__content pre{
    color: black !important;
    max-width: none;
  }
  
  div.rendered_html pre{
    border: none;
    white-space: pre;
  }

  div.sk-top-container {
    background: none !important;
  }
  
/*   unrendered code output */
  div.cell.text_cell.unrendered .prompt{
    border-right: 3px solid var(--purple-2);
    border-left: none;
  }
  
  div.cell.text_cell.unrendered.selected:before{
    border: none !important;
  }
  
/*   skip-traceback-summary */
  .skip-traceback-summary {
    color: #f00 !important;
  }
  
  .skip-traceback-summary:hover{
    color: #f00a !important;
  }

  /*   png graph output  */
  div .output_subarea.output_png img:hover {
    transition: all 0.35s ease-in-out;
    background: var(--png-bg);
  }

  /*   markdown */
  div.text_cell,
  div.text_cell_render {
    background: transparent;
  }

  div.cell.text_cell.rendered .prompt {
    background: transparent;
    border: none;
  }

  div.text_cell_render p,
  div.text_cell_render ol,
  div.text_cell_render ul {
    font-size: 20px;
    color: var(--md-color);
    font-family: var(--default-font), 'chalkduster';
    letter-spacing: 0.8px;
  }

  div.text_cell_render h1 {
    color: #F44336 !important;
  }

  div.text_cell_render h3,
  div.text_cell_render h4 {
    color: #03A9F4 !important;
  }


  div.text_cell_render h5 {
    color: #AE81FF !important;
  }

  div.text_cell_render h6 {
    color: #0ff !important;
  }

  div.cell.text_cell .cm-s-default .cm-header {
    color: #fff !important;
  }

  div.inner_cell div.input_area[aria-label="Edit Markup Text here"] div,
  div.input_area {
    background: var(--inp-bg);
    padding-right: 0;
  }


  /* dataframe table */
  .rendered_html table {
    border: 1px solid var(--table-border);
  }

  .dataframe thead th {
    font-size: var(--fz);
    text-align: left;
/*     font-family: 'Fira Mono', 'ubuntu' !important; */
    border: 1px solid var(--table-border) !important;
  }

  .rendered_html tbody tr:nth-child(2n + 1) {
    border: 1px solid var(--table-border);
    background: #333;
  }

  .rendered_html tbody tr:nth-child(2n) {
    border: 1px solid var(--table-border);
    background: #222;
  }

  .rendered_html tbody tr:hover {
    background: #000 !important;
  }

  .rendered_html tbody td,
  .dataframe tbody tr th {
    border: 1px solid var(--table-border) !important;
    font-size: var(--fz);
  }
}

@-moz-document url-prefix("http://localhost:8888/tree") {

  /*  variables  */
  :root {
    --width: 65%;
    --border: 2px solid #444;
    --png-bg: #fff;
    --default-font: 'Ubuntu';
    --border-clr: #f92672;
    --magenta: #f92672;
    --red: #cc0202;
    --green: #A2DD2D;
/*     --green: var(--purple-2); */
    --bg: #333;
    --bg-hover: #3338;
    --purple: #AE81FF;
    --purple-2: #784ace;
/*     --fz: 18px; */
  }

  * {
    font-size: 18px;
    margin: 0;
    padding: 0;
  }

  body > #header #header-container {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  div#ipython-main-app.container,
  #header-container {
    width: var(--width) !important;
  }

  #shutdown,
  #logout {
    color: #fff;
    border-radius: 3px !important;
    padding: 1px 10px 3px 10px;
    font-family: 'ubuntu', 'fira mono' !important;
    font-weight: bold;
    background: var(--red) !important;
    border: none;
  }

  span#login_widget > .button:hover,
  span#login_widget > .button:active,
  #logout:hover,
  #shutdown:hover,
  #logout:active,
  #shutdown:active,
  span#login_widget > .button:focus,
  #logout:focus,
  #shutdown:focus{
    color: #fff !important;
    border: none;
    background: #f008 !important;
  }

  /* nav-bar */
  #tabs {
    background: #333;
    border: none;
    border-bottom: 1px solid var(--green);
  }

  #tabs li {
    margin-bottom: 0;
  }

  #tabs li:hover {
    background: #000;
  }

  #tab_content {
    padding-top: 8px;
  }

  #tabs li.active a,
  #tabs li a:hover {
    color: var(--green);
  }

  div#notebook_list_header {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--green);
  }

  /*   action buttons */
/*   .btn,
  .btn-defualt {
    font-size: 18px !important;
  } */

  .dynamic-buttons {
    width: initial;
  }

  #sort_buttons {
    background: var(--bg);
    padding: 4px 0;
    margin: 0px;
    line-height: 0px;
    height: inherit;
    
  }

  .btn-xs {
    background: transparent !important;
    border: none !important;
  }

  .btn-xs:hover,
  .btn-xs:active,
  .btn-xs:focus,
  .btn-xs:active:focus {
    color: var(--green) !important;
    background: transparent !important;
    border: none !important;
  }

  /* file list   */
  div.list_item.row {
    background: var(--bg);
    border-radius: 5px;
    border: none;
    margin-top: 8px;
    line-height: normal;
    transform: scale(1);
    transition: transform 0.25s ease-in-out;
  }

  div.list_item.row:hover {
    background: var(--bg-hover);
    transform: scale(1.02);
  }

  div.list_item.row > div {
    padding: 5px;
  }

  .list_item > div input {
    margin: 10px 20px;
  }
  
  .list_item div > .item_icon {
    transition: all 0.25s ease-in-out;
  }
  
  .list_item div:hover > .item_icon{
    font-size: 25px;
  }
  
  .list_item > div .item_link{
    width: 50%;
    line-height: 2em;
  }
  
/*   .list_item > div .item_link:hover{
    transform: scale(1.1);
  } */

  .item_buttons .running-indicator {
    margin-right: 20px;
    animation: running_btn 2s linear 1s infinite;
  }

  @keyframes running_btn {
    0% {
      color: var(--green);
    }
    50% {
      color: #A2DD2D88;
    }
    100% {
      color: var(--green);
    }
  }

  .file_size {
    margin-right: 20px;
    width: 90px;
  }

  div.pull-right {
    line-height: 2em;
  }
}