mirror of
https://github.com/abapGit/abapGit.git
synced 2025-04-30 11:46:38 +08:00
539 lines
14 KiB
CSS
539 lines
14 KiB
CSS
/*
|
|
* ABAPGIT COLOR THEME CSS - DEFAULT
|
|
*/
|
|
|
|
:root {
|
|
--theme-background-color: #E8E8E8;
|
|
--theme-container-background-color: #f2f2f2;
|
|
--theme-container-border-color: lightgrey;
|
|
--theme-table-background-color: white;
|
|
--theme-table-head-background-color: #edf2f9;
|
|
--theme-table-border-color: #ddd;
|
|
--theme-table-cell-border-color: #eee;
|
|
|
|
--theme-primary-font: "72", Arial, Helvetica, sans-serif;
|
|
--theme-primary-font-color: #333333;
|
|
--theme-primary-font-color-reduced: #ccc;
|
|
--theme-font-size: 12pt;
|
|
--theme-link-color: #4078c0;
|
|
|
|
--theme-greyscale-dark: #808080;
|
|
--theme-greyscale-medium: #b3b3b3;
|
|
--theme-greyscale-light: #ccc;
|
|
--theme-greyscale-lighter: lightgrey;
|
|
--theme-linkhint-background: lightgreen;
|
|
--theme-debug-color: #aaa;
|
|
}
|
|
|
|
/* GLOBALS */
|
|
|
|
body {
|
|
background-color: var(--theme-background-color);
|
|
font-family: var(--theme-primary-font);
|
|
color: var(--theme-primary-font-color);
|
|
font-size: var(--theme-font-size);
|
|
}
|
|
a, a:visited { color: var(--theme-link-color); }
|
|
.link {
|
|
color: var(--theme-link-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
input, textarea, select { border-color: #ddd; }
|
|
input:focus, textarea:focus { border-color: #8cadd9; }
|
|
|
|
/* COLOR PALETTE */
|
|
|
|
.grey { color: var(--theme-greyscale-lighter) !important; }
|
|
.grey70 { color: var(--theme-greyscale-medium) !important; }
|
|
.grey80 { color: var(--theme-greyscale-light) !important; }
|
|
.darkgrey { color: var(--theme-greyscale-dark) !important; }
|
|
.bgorange { background-color: orange; }
|
|
.attention { color: red !important; }
|
|
.error { color: #d41919 !important; }
|
|
.warning { color: #efb301 !important; }
|
|
.success { color: green !important; }
|
|
.blue { color: #5e8dc9 !important; }
|
|
.red { color: red !important; }
|
|
.white { color: white !important; }
|
|
.pink { color: pink !important; }
|
|
|
|
/* FLOATING BUTTONS AND COLOR SETS */
|
|
|
|
.blue-set {
|
|
border-color: #abc3e3;
|
|
color: #5e8dc9;
|
|
background-color: #d9e4f2;
|
|
}
|
|
.grey-set {
|
|
border-color: #c7c7c7;
|
|
color: var(--theme-greyscale-dark);
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
/* ABAPGIT OBJECTS */
|
|
|
|
span.user-box {
|
|
border-color: #c2d4ea;
|
|
background-color: #d9e4f2;
|
|
}
|
|
span.package-box {
|
|
border-color: #d3ccd2;
|
|
background-color: #ebe3ea;
|
|
}
|
|
span.path-box,
|
|
span.transport-box {
|
|
border-color: #a7e3cf;
|
|
background-color: #dbf3eb;
|
|
}
|
|
|
|
/* PANELS */
|
|
/* TODO: add warning and error colors */
|
|
|
|
div.panel.success {
|
|
color: #589a58 !important;
|
|
background-color: #c5eac5;
|
|
}
|
|
div.panel.error {
|
|
color: #d41919;
|
|
background-color: #fad6d6;
|
|
}
|
|
#debug-output { color: var(--theme-debug-color); }
|
|
div.dummydiv { background-color: var(--theme-container-background-color); }
|
|
|
|
/* STRUCTURE DIVS, HEADER & FOOTER */
|
|
|
|
div#header {
|
|
background-color: var(--theme-background-color);
|
|
border-bottom-color: var(--theme-container-border-color);
|
|
}
|
|
div#header .page-title { color: var(--theme-greyscale-medium); }
|
|
div#footer .version { color: var(--theme-greyscale-medium); }
|
|
div#footer { border-top-color: var(--theme-container-border-color); }
|
|
|
|
/* ERROR LOG */
|
|
|
|
div.log {
|
|
background-color: #fee6e6;
|
|
border-color: #fdcece;
|
|
}
|
|
|
|
/* REPOSITORY */
|
|
|
|
div.repo { background-color: var(--theme-container-background-color); }
|
|
.repo_name span.name { color: #333; }
|
|
.repo_name span.url { color: var(--theme-primary-font-color-reduced); }
|
|
.repo_name a.url { color: var(--theme-primary-font-color-reduced); }
|
|
.repo_name a.url:hover { color: var(--theme-link-color); }
|
|
.repo_attr { color: grey; }
|
|
|
|
.repo_attr span.bg_marker {
|
|
border-color: #d2d2d2;
|
|
background-color: #d8d8d8;
|
|
color: #fff;
|
|
}
|
|
|
|
.repo_attr span.branch_head {
|
|
border-color: #d8dff3;
|
|
background-color: #eceff9;
|
|
}
|
|
|
|
span.branch {
|
|
border-color: #d9d9d9;
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
span.branch_branch {
|
|
border-color: #e7d9b1;
|
|
background-color: #f8f0d8;
|
|
}
|
|
|
|
/* REPOSITORY TABLE*/
|
|
|
|
table.repo_tab {
|
|
border-color: var(--theme-table-border-color);
|
|
background-color: var(--theme-table-background-color);
|
|
}
|
|
.repo_tab th {
|
|
color: var(--theme-link-color);
|
|
background-color: #edf2f9;
|
|
border-bottom-color: var(--theme-table-border-color);
|
|
}
|
|
.repo_tab td {
|
|
color: var(--theme-primary-font-color);
|
|
}
|
|
|
|
.repo_tab tr.object_row{
|
|
border-top-color: var(--theme-table-cell-border-color);
|
|
}
|
|
.repo_tab .inactive { color: orange; }
|
|
.repo_tab tr.unsupported { color: var(--theme-greyscale-lighter); }
|
|
.repo_tab tr.modified { background-color: #fbf7e9; }
|
|
.repo_tab td.current_dir { color: var(--theme-primary-font-color-reduced); }
|
|
|
|
/* STAGE */
|
|
|
|
.stage_tab {
|
|
border-color: #ddd;
|
|
background-color: #fff;
|
|
}
|
|
.stage_tab th {
|
|
color: var(--theme-greyscale-dark);
|
|
background-color: #edf2f9;
|
|
border-bottom-color: #ddd;
|
|
}
|
|
.stage_tab td {
|
|
color: var(--theme-greyscale-medium);
|
|
border-top-color: var(--theme-table-cell-border-color);
|
|
}
|
|
.stage_tab td.status {
|
|
color: var(--theme-primary-font-color-reduced);
|
|
background-color: #fafafa;
|
|
}
|
|
.stage_tab td.highlight { color: #444 !important; }
|
|
.stage_tab td.method { font-weight: bold; }
|
|
.stage_tab mark {
|
|
color: white;
|
|
background-color: #79a0d2;
|
|
}
|
|
|
|
/* COMMIT */
|
|
|
|
div.form-container { background-color: #F8F8F8; }
|
|
form.aligned-form label { color: var(--theme-greyscale-medium); }
|
|
form.aligned-form span.sub-title { color: var(--theme-greyscale-medium); }
|
|
|
|
/* SETTINGS STYLES */
|
|
|
|
div.settings_container {
|
|
color: #444;
|
|
background-color: var(--theme-container-background-color);
|
|
}
|
|
|
|
/* DIFF */
|
|
|
|
div.diff { background-color: var(--theme-container-background-color); }
|
|
span.diff_name { color: grey; }
|
|
span.diff_name strong { color: #333; }
|
|
span.diff_changed_by { color: grey; }
|
|
span.diff_changed_by span.user {
|
|
border-color: #c2d4ea;
|
|
background-color: #d9e4f2;
|
|
}
|
|
.diff_ins {
|
|
border-color: #abf2ab;
|
|
background-color: #e0ffe0;
|
|
}
|
|
.diff_del {
|
|
border-color: #ff667d;
|
|
background-color: #ffccd4;
|
|
}
|
|
.diff_upd {
|
|
border-color: #dada00;
|
|
background-color: #ffffcc;
|
|
}
|
|
div.diff_content {
|
|
background-color: #fff;
|
|
border-top-color: #ddd;
|
|
border-bottom-color: #ddd;
|
|
}
|
|
|
|
/* STATE BLOCK COLORS */
|
|
|
|
span.state-block span.added {
|
|
background-color: #69ad74;
|
|
border-color: #579e64;
|
|
color: white;
|
|
}
|
|
span.state-block span.changed {
|
|
background-color: #e0c150;
|
|
border-color: #d4af25;
|
|
color: white;
|
|
}
|
|
span.state-block span.mixed {
|
|
background-color: #e0c150;
|
|
border-color: #579e64;
|
|
color: #69ad74;
|
|
}
|
|
span.state-block span.deleted {
|
|
background-color: #c76861;
|
|
border-color: #b8605a;
|
|
color: white;
|
|
}
|
|
span.state-block span.none {
|
|
background-color: #e8e8e8;
|
|
border-color: #dbdbdb;
|
|
color: #c8c8c8;
|
|
}
|
|
|
|
/* DIFF TABLE */
|
|
|
|
table.diff_tab td,
|
|
table.diff_tab th {
|
|
color: #444;
|
|
}
|
|
table.diff_tab thead.header th {
|
|
color: #eee;
|
|
background-color: var(--theme-greyscale-medium);
|
|
}
|
|
table.diff_tab thead.nav_line {
|
|
background-color: #edf2f9;
|
|
}
|
|
table.diff_tab thead.nav_line th {
|
|
color: var(--theme-greyscale-medium);
|
|
}
|
|
table.diff_tab td.num, th.num {
|
|
color: var(--theme-primary-font-color-reduced);
|
|
border-left-color: var(--theme-table-cell-border-color);
|
|
border-right-color: var(--theme-table-cell-border-color);
|
|
}
|
|
table.diff_tab td.patch, th.patch {
|
|
color: var(--theme-primary-font-color-reduced);
|
|
border-left-color: var(--theme-table-cell-border-color);
|
|
border-right-color: var(--theme-table-cell-border-color);
|
|
}
|
|
|
|
/* STYLES FOR SYNTAX HIGHLIGHTING */
|
|
|
|
/* ABAP */
|
|
.syntax-hl span.keyword { color: #0a69ce; }
|
|
.syntax-hl span.text { color: #48ce4f; }
|
|
.syntax-hl span.comment { color: var(--theme-greyscale-dark); font-style: italic; }
|
|
/* XML+HTML */
|
|
.syntax-hl span.xml_tag { color: #457ce3; }
|
|
.syntax-hl span.attr { color: #b777fb; }
|
|
.syntax-hl span.attr_val { color: #7a02f9; }
|
|
/* 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:darkblue; }
|
|
.syntax-hl span.at_rules { color:darkblue; }
|
|
.syntax-hl span.html { color:green; }
|
|
.syntax-hl span.variables { color:purple; }
|
|
|
|
/* DEBUG INFO STYLES */
|
|
|
|
div.debug_container {
|
|
color: #444;
|
|
background-color: var(--theme-container-background-color);
|
|
}
|
|
|
|
/* Repo overview */
|
|
|
|
.repo-overview { background-color: var(--theme-container-background-color); }
|
|
.repo-overview table {
|
|
background-color: var(--theme-table-background-color);
|
|
border-color: var(--theme-table-border-color);
|
|
}
|
|
.repo-overview th {
|
|
color: var(--theme-link-color);
|
|
}
|
|
.repo-overview thead tr {
|
|
background-color: var(--theme-table-head-background-color);
|
|
}
|
|
.repo-overview thead tr,
|
|
.repo-overview tfoot tr {
|
|
border-color: var(--theme-table-border-color);
|
|
}
|
|
.repo-overview a.remote_repo { color: var(--theme-primary-font-color-reduced); }
|
|
.repo-overview a.remote_repo:hover { color: var(--theme-link-color); }
|
|
.repo-overview tbody tr:hover td { background-color: hsla(214, 50%, 50%, 0.05); }
|
|
.repo-overview tbody tr.selected { background-color: hsla(214, 50%, 75%, 0.33); }
|
|
|
|
/* TUTORIAL */
|
|
|
|
div.tutorial { background-color: var(--theme-container-background-color); }
|
|
div.tutorial hr { border-color: var(--theme-greyscale-light); }
|
|
div.tutorial h1, h2 { color: #404040; }
|
|
|
|
/* MENU */
|
|
|
|
.nav-container ul li:hover { background-color: #fff; }
|
|
.nav-container ul ul li:hover { background-color: #f6f6f6; }
|
|
.nav-container > ul > li:hover > a { background-color: #ffffff80; }
|
|
.nav-container ul ul { background-color: #fff; }
|
|
.nav-container.corner > ul > li:hover > a { background-color: inherit; }
|
|
|
|
.nav-container ul ul li.separator {
|
|
color: var(--theme-greyscale-medium);
|
|
border-bottom-color: #eee;
|
|
border-top-color: #eee;
|
|
}
|
|
.nav-container ul ul li.separator:hover { background-color: inherit; }
|
|
|
|
/* NEWS ANNOUNCEMENT */
|
|
|
|
div.info-panel { background-color: white; }
|
|
div.info-panel div.info-hint { color: var(--theme-greyscale-light); }
|
|
div.info-panel div.info-title {
|
|
color: #f8f8f8;
|
|
background-color: #888;
|
|
}
|
|
div.info-panel div.info-title a.close-btn { color: #d8d8d8; }
|
|
div.info-panel div.info-list { color: #444; }
|
|
div.info-panel .version-marker {
|
|
color: white;
|
|
border-color: #c0c0c0;
|
|
background-color: var(--theme-greyscale-light);
|
|
}
|
|
div.info-panel .update {
|
|
border-color: #e8ba30;
|
|
background-color: #f5c538;
|
|
}
|
|
|
|
/* TOOLTIPS TEXT */
|
|
|
|
.link-hint { color: var(--theme-primary-font-color); }
|
|
.link-hint { background-color: var(--theme-linkhint-background) }
|
|
.link-hint::after { border-top-color: var(--theme-linkhint-background) }
|
|
|
|
/* HOTKEYS */
|
|
|
|
ul.hotkeys span.key-id {
|
|
background-color: #f0f0f0;
|
|
border-color: #dcdcdc;
|
|
}
|
|
div.corner-hint {
|
|
color: var(--theme-greyscale-medium);
|
|
border-color: var(--theme-greyscale-light);
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* CODE INSPECTOR */
|
|
|
|
div.ci { background-color: var(--theme-container-background-color); }
|
|
|
|
div.ci-msg span.ci-variant { color: var(--theme-primary-font-color); }
|
|
|
|
div.ci-stats span.error-count {
|
|
border-color: hsl(350, 100%, 80%);
|
|
background-color: hsl(350, 100%, 90%);
|
|
}
|
|
div.ci-stats span.warn-count {
|
|
border-color: hsl(60, 100%, 42%);
|
|
background-color: hsl(60, 100%, 90%);
|
|
}
|
|
div.ci-stats span.info-count {
|
|
border-color: hsl(120, 80%, 80%);
|
|
background-color: hsl(120, 80%, 94%);
|
|
}
|
|
div.ci-stats span.all-count {
|
|
border-color: hsl(235, 100%, 89%);
|
|
background-color: hsl(235, 100%, 93%);
|
|
}
|
|
div.ci-detail table td[data-cid="text"] {
|
|
color: hsl(0, 0%, 40%);
|
|
}
|
|
|
|
div.ci-detail table tr[data-kind="error"] td[data-cid="kind"] span {
|
|
background-color: hsl(0, 100%, 68%);
|
|
}
|
|
div.ci-detail table tr[data-kind="warning"] td[data-cid="kind"] span {
|
|
background-color:hsl(52, 100%, 49%);
|
|
}
|
|
div.ci-detail table tr[data-kind="info"] td[data-cid="kind"] span {
|
|
background-color: hsl(118, 67%, 47%);
|
|
}
|
|
|
|
/* COMMAND PALETTE */
|
|
|
|
.cmd-palette {
|
|
border-color: #ccc;
|
|
}
|
|
.cmd-palette li.selected {
|
|
background-color: hsla(214, 50%, 90%, 1);
|
|
}
|
|
.cmd-palette mark {
|
|
color: white;
|
|
background-color: #79a0d2;
|
|
/* todo merge with stage search */
|
|
}
|
|
|
|
/* SETTINGS */
|
|
|
|
table.settings_tab {
|
|
background-color: #fff;
|
|
border-color: #ddd;
|
|
}
|
|
table.settings_tab th {
|
|
color: #888888;
|
|
border-bottom-color: #ddd;
|
|
}
|
|
table.settings_tab td {
|
|
color: #333;
|
|
border-top-color: #eee;
|
|
}
|
|
table.settings_tab input {
|
|
background-color: #f8f8f8;
|
|
}
|
|
table.settings_tab input:focus {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* HTML FORMS */
|
|
|
|
.dialog input::placeholder { color: #ccc }
|
|
.dialog textarea::placeholder { color: #ccc }
|
|
.dialog input:-ms-input-placeholder { color: #ccc }
|
|
.dialog textarea:-ms-input-placeholder { color: #ccc }
|
|
.dialog {
|
|
border-color: #ccc;
|
|
background-color: #f0f0f0;
|
|
}
|
|
.dialog li.dialog-commands a,
|
|
.dialog li.dialog-commands input[type="submit"] {
|
|
border-color: #ccc;
|
|
background-color: #ddd;
|
|
color: #000;
|
|
}
|
|
.dialog li.dialog-commands a.main,
|
|
.dialog li.dialog-commands input[type="submit"].main {
|
|
background-color: #64a8ff;
|
|
color: #fff;
|
|
}
|
|
.dialog label {
|
|
color: #444;
|
|
}
|
|
.dialog label em {
|
|
color: #64a8ff;
|
|
}
|
|
.dialog li.error small {
|
|
color: #ff5959;
|
|
}
|
|
.dialog li.error input[type="number"],
|
|
.dialog li.error input[type="text"] {
|
|
border-color: #ff5959;
|
|
}
|
|
.dialog .radio-container {
|
|
border-color: #ddd;
|
|
background-color: #fff;
|
|
}
|
|
.dialog .radio-container input[type="radio"]:checked + label {
|
|
background-color: #64a8ff;
|
|
color: #fff;
|
|
}
|
|
.dialog li.with-command input[type="button"]:hover,
|
|
.dialog li.with-command input[type="submit"]:hover {
|
|
background-color: #64a8ff;
|
|
color: #fff;
|
|
}
|
|
.dialog fieldset {
|
|
border-color: #dfdfdf;
|
|
}
|
|
.dialog fieldset legend {
|
|
color: #444;
|
|
}
|
|
.dialog input:read-only {
|
|
background-color: #f4f4f4;
|
|
color: var(--theme-greyscale-dark);
|
|
}
|
|
/* for IE */
|
|
.dialog input[readonly] {
|
|
background-color: #f4f4f4;
|
|
color: var(--theme-greyscale-dark);
|
|
}
|