/*
 * ABAPGIT THEME CSS - DARK
 */

/* https://experience.sap.com/fiori-design-web/colors/ */

:root {
  --theme-background-color: #333333;
  --theme-container-background-color: #444444;
  --theme-primary-font: "72", Arial, Helvetica, sans-serif;
  --theme-primary-font-color: #cccccc;
  --theme-primary-font-color-reduced: #EEEEEE;
  --theme-font-size: 11pt;
  --theme-link-color: #d9ffff;
  --theme-link-color-hover: #f6f6f6;
  --theme-container-border-color: #D1E0EE;
  --theme-table-border-color: #E5E5E5; /* ALV border color */
  --theme-greyscale-dark: #666666;
  --theme-greyscale-medium: #999999;
  --theme-greyscale-light: #CCCCCC;
  --theme-greyscale-lighter: #E5E5E5;
  --theme-list-hover-background-color: black;
}

/* GLOBALS */
body {
  background-color: var(--theme-background-color);
  color: var(--theme-primary-font-color);
}
select, input, textarea { 
  color: var(--theme-primary-font-color);
  border-color: #ffffff;
  background-color: var(--theme-background-color);
}
a:hover { color: var(--theme-link-color-hover); }

/* HEADER */
#header a, #header a:visited { color: var(--theme-link-color); }

/* MENU */
div#toc .favorites a { opacity: 1; }
.nav-container ul a:hover { text-decoration: underline; }
.nav-container ul ul { background-color: #555555; }
.nav-container ul ul li:hover { background-color: var(--theme-list-hover-background-color); }
table.repo_tab {
    border-color: var(--theme-container-background-color);
    background-color: var(--theme-background-color);
}

/* PANELS */
#debug-output { color: var(--theme-greyscale-dark); }

/* abapGit logo in header and footer */
#abapGitLogo>img { background-color: var(--theme-background-color); }
#footer>img { background-color: var(--theme-background-color); }

/* TUTORIAL */
div.tutorial h1, h2 { color: var(--theme-primary-font-color); }

/* REPOSITORY */
div.repo { background-color: var(--theme-container-background-color); }
.repo_name span.name { color: var(--theme-primary-font-color-reduced); }
.repo_name span.url  { color: var(--theme-greyscale-medium); }
.repo_name a.url { color: var(--theme-greyscale-medium); }
.repo_attr { color: var(--theme-primary-font-color); }
.repo_attr span.branch_branch {
  border-color: var(--theme-greyscale-medium);
  background-color: #777777;
}

/* REPOSITORY TABLE */
.repo_tab td { color: var(--theme-primary-font-color); }
.repo_tab tr.unsupported { background-color: #555; }
.repo_tab tr.modified { background-color: #555; }
.repo_tab tr:hover {background-color: var(--theme-list-hover-background-color) !important;}

.repo_tab th {
  border-top-color: var(--theme-greyscale-dark);
}
.repo_tab td {
  border-top-color: var(--theme-greyscale-dark);
}

/* STAGE */
.stage_tab { 
  border-color: var(--theme-greyscale-dark);
  background-color: var(--theme-background-color); 
}
.stage_tab td { 
  color: var(--theme-primary-font-color); 
  border-top-color:  var(--theme-greyscale-dark);
}
.stage_tab td.status.highlight { 
  color: var(--theme-primary-font-color) !important;
  background-color: var(--theme-background-color);
}
.stage_tab td.status { 
  color: #777;
  background-color: var(--theme-background-color); 
}
.stage_tab th { background-color: var(--theme-container-background-color); }
.stage_tab tr:hover {background-color: var(--theme-list-hover-background-color) !important;}


/* COMMIT */
div.form-container { background-color: var(--theme-background-color); }

/* SETTINGS STYLES */
div.settings_container { color: var(--theme-primary-font-color); }

/* DIFF */
.diff_ins { background-color: #352; }
.diff_del { background-color: #411; }
.diff_upd { background-color: #551; }
div.diff_content { background-color: var(--theme-background-color); }

/* DIFF TABLE */
table.diff_tab td,th { color: #fff; }
table.diff_tab thead.nav_line { background-color: var(--theme-container-background-color); }

/* STYLES for Syntax Highlighting */
/* abap */
.syntax-hl span.keyword  { color: #4af; }
.syntax-hl span.text     { color: #8f8; }
.syntax-hl span.comment  { color: #999; }
/* xml+html */
.syntax-hl span.xml_tag  { color: #659cff; }
.syntax-hl span.attr     { color: #bab2f9; }
.syntax-hl span.attr_val { color: #b777fb; }
/* css+js */
.syntax-hl span.properties   { color:#0a69ce; }
.syntax-hl span.values       { color:blue; }
.syntax-hl span.units        { color:maroon; }
.syntax-hl span.selectors    { color:purple; }
.syntax-hl span.functions    { color:purple; }
.syntax-hl span.colors       { color:purple; }
.syntax-hl span.extensions   { color:lightblue; }
.syntax-hl span.at_rules     { color:lightblue; }
.syntax-hl span.html         { color:green; }
.syntax-hl span.variables    { color:purple; }

/* DEBUG INFO STYLES */
div.debug_container#debug_info { color: var(--theme-primary-font-color); }

/* DB ENTRIES */
div.db_list { background-color: var(--theme-container-background-color); }
table.db_tab td      { color: var(--theme-primary-font-color); }
table.db_tab td.data { opacity: 0.5; }
table.db_tab tbody tr:hover, tr:active { background-color: var(--theme-list-hover-background-color); }
table.db_tab th {
  color: var(--theme-primary-font-color);
  border-bottom-color: #333;
}

/* ERROR LOGS */
div.log { color: var(--theme-greyscale-dark); }
.close-btn, .message-panel, .message-panel-commands a { color: var(--theme-greyscale-dark); }
.message-panel-commands a:hover { color: var(--theme-greyscale-dark); }