mirror of
https://github.com/abapGit/abapGit.git
synced 2025-05-01 04:08:27 +08:00
493bb969b2
* Add logo for dark theme * Dark theme fixes * Dark theme fixes * Solve conflict * Remove logo changes Co-authored-by: Lars Hvam <larshp@hotmail.com> Co-authored-by: Frederik Hudák <frederik.hudak@sap.com>
159 lines
5.4 KiB
CSS
159 lines
5.4 KiB
CSS
/*
|
|
* 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); }
|