mirror of
https://github.com/abapGit/abapGit.git
synced 2025-05-01 12:20:51 +08:00
733 lines
16 KiB
CSS
733 lines
16 KiB
CSS
/*
|
|
* ABAPGIT COMMON CSS
|
|
*/
|
|
|
|
/* GLOBALS */
|
|
|
|
body {
|
|
font-family: Arial,Helvetica,sans-serif;
|
|
font-size: 12pt;
|
|
background: #E8E8E8;
|
|
}
|
|
|
|
a, a:visited {
|
|
color: #4078c0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:active {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
img { border: 0px; vertical-align: middle; }
|
|
table { border-collapse: collapse; }
|
|
pre { display: inline; }
|
|
|
|
input, textarea, select {
|
|
padding: 3px 6px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
input:focus, textarea:focus {
|
|
border: 1px solid #8cadd9;
|
|
}
|
|
|
|
/* COLOR PALETTE */
|
|
.grey { color: lightgrey !important; }
|
|
.grey70 { color: #b3b3b3 !important; }
|
|
.bgorange { background-color: orange; }
|
|
.darkgrey { color: #808080 !important; }
|
|
.attention { color: red !important; }
|
|
.error { color: #d41919 !important; }
|
|
.warning { color: #e4ae0d !important; }
|
|
.blue { color: #5e8dc9 !important; }
|
|
.red { color: red !important; }
|
|
|
|
/* MODIFIERS */
|
|
.emphasis { font-weight: bold !important; }
|
|
.crossout { text-decoration: line-through !important; }
|
|
.right { text-align:right; }
|
|
.center { text-align:center; }
|
|
.paddings { padding: 0.5em 0.5em; }
|
|
.pad-sides { padding-left: 0.3em; padding-right: 0.3em; }
|
|
.margin-v5 { margin-top: 0.5em; margin-bottom: 0.5em; }
|
|
.indent5em { padding-left: 0.5em; }
|
|
.pad4px { padding: 4px; }
|
|
.w100 { width: 100%; }
|
|
.w40 { width: 40%; }
|
|
|
|
/* STRUCTURE DIVS, HEADER & FOOTER */
|
|
div#header {
|
|
padding: 0.5em 0.5em;
|
|
border-bottom: 3px double lightgrey;
|
|
}
|
|
div#header td.logo { width: 164px; }
|
|
div#header td:not(.logo) { padding-top: 11px; } /* align with logo H */
|
|
div#header span.page_title {
|
|
font-weight: normal;
|
|
font-size: 18pt;
|
|
color: #bbb;
|
|
padding-left: 0.4em;
|
|
}
|
|
|
|
div#toc {
|
|
padding: 0.5em 1em;
|
|
background-color: #f2f2f2;
|
|
}
|
|
div#toc .favorites a { opacity: 0.5; }
|
|
div#toc .favorites:hover a { opacity: 1; }
|
|
|
|
div#footer {
|
|
padding: 0.5em 1em;
|
|
border-top: 3px double lightgrey;
|
|
text-align: center;
|
|
}
|
|
div#footer span.version {
|
|
display: block;
|
|
color: grey;
|
|
margin-top: 0.3em;
|
|
}
|
|
|
|
#debug-output {
|
|
text-align: right;
|
|
padding-right: 0.5em;
|
|
color: #ccc;
|
|
font-style: italic;
|
|
font-size: small;
|
|
}
|
|
|
|
div.dummydiv {
|
|
background-color: #f2f2f2;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ERROR LOG */
|
|
|
|
div.log {
|
|
padding: 6px;
|
|
margin: 4px;
|
|
background-color: #fee6e6;
|
|
border: 1px #fdcece solid;
|
|
border-radius: 4px;
|
|
}
|
|
div.log > span { display:block; }
|
|
div.log .octicon { padding-right: 6px; }
|
|
|
|
/* REPOSITORY */
|
|
div.repo {
|
|
margin-top: 3px;
|
|
background-color: #f2f2f2;
|
|
padding: 0.5em 1em 0.5em 1em;
|
|
}
|
|
.repo_name span.name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 14pt;
|
|
}
|
|
.repo_name span.url {
|
|
color: #ccc;
|
|
font-size: 12pt;
|
|
margin-left: 0.5em;
|
|
}
|
|
.repo_name img {
|
|
vertical-align: baseline;
|
|
margin: 0 5px 0 5px;
|
|
}
|
|
.repo_attr {
|
|
color: grey;
|
|
font-size: 12pt;
|
|
}
|
|
.repo_attr span {
|
|
margin-left: 0.2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
.repo_attr span.bg_marker {
|
|
border: 1px solid #d2d2d2;
|
|
border-radius: 3px;
|
|
background: #d8d8d8;
|
|
color: #fff;
|
|
font-size: 8pt;
|
|
padding: 4px 2px 3px 2px;
|
|
}
|
|
.repo_attr span.branch {
|
|
padding: 2px 4px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
background-color: #e2e2e2;
|
|
}
|
|
.repo_attr span.branch_head {
|
|
border-color: #d8dff3;
|
|
background-color: #eceff9;
|
|
}
|
|
.repo_attr span.branch_branch {
|
|
border-color: #e7d9b1;
|
|
background-color: #f8f0d8;
|
|
}
|
|
|
|
/* MISC AND REFACTOR */
|
|
.hidden-submit {
|
|
border: 0 none;
|
|
height: 0;
|
|
width: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* REPOSITORY TABLE*/
|
|
div.repo_container {
|
|
position: relative;
|
|
}
|
|
table.repo_tab {
|
|
border: 1px solid #DDD;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
width: 100%;
|
|
}
|
|
.repo_tab td {
|
|
border-top: 1px solid #eee;
|
|
vertical-align: middle;
|
|
color: #333;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.repo_tab td.icon {
|
|
width: 32px;
|
|
text-align: center;
|
|
}
|
|
.repo_tab td.type {
|
|
width: 3em;
|
|
}
|
|
.repo_tab td.object {
|
|
padding-left: 0.5em;
|
|
}
|
|
.repo_tab td.files {
|
|
padding-left: 0.5em;
|
|
}
|
|
.repo_tab td.cmd {
|
|
text-align: right;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.7em;
|
|
}
|
|
.repo_tab tr.unsupported { color: lightgrey; }
|
|
.repo_tab tr.modified { background: #fbf7e9; }
|
|
.repo_tab tr:first-child td { border-top: 0px; }
|
|
.repo_tab td.current_dir { color: #ccc; }
|
|
.repo_tab td.cmd span.state-block {
|
|
margin-left: 1em;
|
|
font-family: Consolas, Lucida Console, Courier, monospace;
|
|
font-size: x-small;
|
|
vertical-align: 13%;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.repo_tab td.cmd span.state-block span {
|
|
display: inline-block;
|
|
padding: 0px 2px;
|
|
border: 1px solid #000;
|
|
}
|
|
.repo_tab td.cmd span.state-block span.added {
|
|
background-color: #69ad74;
|
|
border-color: #579e64;
|
|
color: white;
|
|
}
|
|
.repo_tab td.cmd span.state-block span.changed {
|
|
background-color: #e0c150;
|
|
border-color: #d4af25;
|
|
color: white;
|
|
}
|
|
.repo_tab td.cmd span.state-block span.mixed {
|
|
background-color: #e0c150;
|
|
border-color: #579e64;
|
|
color: #69ad74;
|
|
}
|
|
.repo_tab td.cmd span.state-block span.deleted {
|
|
background-color: #c76861;
|
|
border-color: #b8605a;
|
|
color: white;
|
|
}
|
|
.repo_tab td.cmd span.state-block span.none {
|
|
background-color: #e8e8e8;
|
|
border-color: #dbdbdb;
|
|
color: #c8c8c8;
|
|
}
|
|
|
|
/* STAGE */
|
|
div.stage-container { width: 850px; }
|
|
input.stage-filter { width: 18em; }
|
|
|
|
.stage_tab {
|
|
border: 1px solid #DDD;
|
|
background: #fff;
|
|
margin-top: 0.2em;
|
|
}
|
|
.stage_tab td {
|
|
border-top: 1px solid #eee;
|
|
color: #333;
|
|
vertical-align: middle;
|
|
padding: 2px 0.5em;
|
|
}
|
|
.stage_tab th {
|
|
color: #BBB;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
background-color: #edf2f9;
|
|
padding: 4px 0.5em;
|
|
}
|
|
.stage_tab td.status {
|
|
width: 2em;
|
|
text-align: center;
|
|
color: #ccc;
|
|
background-color: #fafafa;
|
|
}
|
|
.stage_tab td.highlight {
|
|
color: #444 !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stage_tab td.cmd { cursor: pointer; }
|
|
.stage_tab td.cmd a { padding: 0px 4px; }
|
|
.stage_tab th.cmd a { padding: 0px 4px; }
|
|
.stage_tab td.method { color: #ccc; }
|
|
.stage_tab td.user { color: #aaa; }
|
|
.stage_tab td.type { color: #aaa; }
|
|
.stage_tab tbody tr:first-child td { padding-top: 0.5em; }
|
|
.stage_tab tbody tr:last-child td { padding-bottom: 0.5em; }
|
|
.stage_tab mark {
|
|
color: white;
|
|
background-color: #79a0d2;
|
|
}
|
|
|
|
/* COMMIT */
|
|
div.form-container {
|
|
background-color: #F8F8F8;
|
|
padding: 1em 1em;
|
|
}
|
|
|
|
form.aligned-form {
|
|
display: table;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
form.aligned-form label {
|
|
color: #BBB;
|
|
padding-right: 1em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
form.aligned-form span.sub-title {
|
|
color: #BBB;
|
|
font-size: smaller;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
form.aligned-form div.row { display: table-row; }
|
|
form.aligned-form label { display: table-cell; }
|
|
form.aligned-form input { display: table-cell; }
|
|
form.aligned-form input[type="text"] { width: 25em; }
|
|
form.aligned-form span.cell { display: table-cell; }
|
|
|
|
/* SETTINGS STYLES */
|
|
div.settings_container {
|
|
padding: 0.5em;
|
|
font-size: 10pt;
|
|
color: #444;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
/* DIFF */
|
|
div.diff {
|
|
background-color: #f2f2f2;
|
|
padding: 0.7em
|
|
}
|
|
div.diff_head {
|
|
padding-bottom: 0.7em;
|
|
}
|
|
span.diff_name {
|
|
padding-left: 0.5em;
|
|
color: grey;
|
|
}
|
|
span.diff_changed_by {
|
|
color: grey;
|
|
float: right;
|
|
}
|
|
span.diff_changed_by span.user {
|
|
border-radius: 3px;
|
|
border: solid 1px #c2d4ea;
|
|
background-color: #d9e4f2;
|
|
padding: 1px 0.4em;
|
|
}
|
|
span.diff_name strong {
|
|
color: #333;
|
|
}
|
|
span.diff_banner {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 3px;
|
|
padding-left: 0.3em;
|
|
padding-right: 0.3em;
|
|
}
|
|
.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: #fff;
|
|
border-top: 1px solid #DDD;
|
|
border-bottom: 1px solid #DDD;
|
|
}
|
|
div.diff_head span.state-block {
|
|
margin-left: 0.5em;
|
|
font-family: Consolas, Lucida Console, Courier, monospace;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
div.diff_head span.state-block span {
|
|
display: inline-block;
|
|
padding: 0px 4px;
|
|
border: 1px solid #000;
|
|
}
|
|
div.diff_head span.state-block span.added {
|
|
background-color: #69ad74;
|
|
border-color: #579e64;
|
|
color: white;
|
|
}
|
|
div.diff_head span.state-block span.changed {
|
|
background-color: #e0c150;
|
|
border-color: #d4af25;
|
|
color: white;
|
|
}
|
|
div.diff_head span.state-block span.mixed {
|
|
background-color: #e0c150;
|
|
border-color: #579e64;
|
|
color: #69ad74;
|
|
}
|
|
div.diff_head span.state-block span.deleted {
|
|
background-color: #c76861;
|
|
border-color: #b8605a;
|
|
color: white;
|
|
}
|
|
div.diff_head span.state-block span.none {
|
|
background-color: #e8e8e8;
|
|
border-color: #dbdbdb;
|
|
color: #c8c8c8;
|
|
}
|
|
|
|
/* DIFF TABLE */
|
|
table.diff_tab {
|
|
font-family: Consolas, Courier, monospace;
|
|
font-size: 10pt;
|
|
width: 100%;
|
|
}
|
|
table.diff_tab td,th {
|
|
color: #444;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
}
|
|
table.diff_tab th {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
table.diff_tab thead.header th {
|
|
color: #EEE;
|
|
background-color: #BBB;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
padding-left: 0.5em;
|
|
font-size: 9pt;
|
|
}
|
|
table.diff_tab thead.nav_line {
|
|
background-color: #edf2f9;
|
|
}
|
|
table.diff_tab thead.nav_line th {
|
|
color: #bbb;
|
|
}
|
|
table.diff_tab td.num, th.num {
|
|
width: 1%;
|
|
min-width: 2em;
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
text-align: right !important;
|
|
color: #ccc;
|
|
border-left: 1px solid #eee;
|
|
border-right: 1px solid #eee;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
table.diff_tab td.num::before {
|
|
content: attr(line-num);
|
|
}
|
|
table.diff_tab code {
|
|
font-family: inherit;
|
|
white-space: pre;
|
|
}
|
|
table.diff_tab td.code {
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
overflow: visible;
|
|
}
|
|
|
|
table.diff_tab tbody tr:first-child td { padding-top: 0.5em; }
|
|
table.diff_tab tbody tr:last-child td { padding-bottom: 0.5em; }
|
|
|
|
/* STYLES for Syntax Highlighting */
|
|
.syntax-hl span.keyword { color: #0a69ce; }
|
|
.syntax-hl span.text { color: #48ce4f; }
|
|
.syntax-hl span.comment { color: #808080; font-style: italic; }
|
|
.syntax-hl span.xml_tag { color: #457ce3; }
|
|
.syntax-hl span.attr { color: #b777fb; }
|
|
.syntax-hl span.attr_val { color: #7a02f9; }
|
|
|
|
/* DEBUG INFO STYLES */
|
|
div.debug_container {
|
|
padding: 0.5em;
|
|
font-size: 10pt;
|
|
color: #444;
|
|
font-family: Consolas, Courier, monospace;
|
|
}
|
|
|
|
div.debug_container p {
|
|
margin: 0px;
|
|
}
|
|
|
|
/* DB ENTRIES */
|
|
div.db_list {
|
|
background-color: #fff;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
table.db_tab pre {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
word-wrap:break-word;
|
|
white-space: pre-wrap;
|
|
margin: 0px;
|
|
width: 30em;
|
|
}
|
|
|
|
table.db_tab tr.firstrow td { padding-top: 0.5em; }
|
|
table.db_tab th {
|
|
color: #888888;
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
border-bottom: 1px #ddd solid;
|
|
}
|
|
table.db_tab td {
|
|
color: #333;
|
|
padding: 0.5em;
|
|
vertical-align: top;
|
|
}
|
|
table.db_tab td.data {
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
table.db_tab tbody tr:hover, tr:active {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
/* DB ENTRY DISPLAY */
|
|
div.db_entry {
|
|
background-color: #f2f2f2;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
div.db_entry pre {
|
|
display: block;
|
|
font-size: 10pt;
|
|
overflow: hidden;
|
|
word-wrap:break-word;
|
|
white-space: pre-wrap;
|
|
background-color: #fcfcfc;
|
|
border: 1px #eaeaea solid;
|
|
border-radius: 3px;
|
|
padding: 0.5em;
|
|
margin: 0.5em 0em;
|
|
width: 60em;
|
|
}
|
|
|
|
div.db_entry table.toolbar {
|
|
width: 50em;
|
|
}
|
|
|
|
table.tag {
|
|
display: inline-block;
|
|
border: 1px #b3c1cc solid;
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
margin-right: 0.5em;
|
|
}
|
|
table.tag td { padding: 0.2em 0.5em; }
|
|
table.tag td.label { background-color: #b3c1cc; }
|
|
|
|
/* DB ENTRY DISPLAY */
|
|
div.db_entry textarea { margin: 0.5em 0em; }
|
|
table.tag {
|
|
display: inline-block;
|
|
border: 1px #b3c1cc solid;
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
margin-right: 0.5em;
|
|
}
|
|
table.tag td { padding: 0.2em 0.5em; }
|
|
table.tag td.label { background-color: #b3c1cc; }
|
|
|
|
/* TUTORIAL */
|
|
|
|
div.tutorial {
|
|
margin-top: 3px;
|
|
background-color: #f2f2f2;
|
|
padding: 0.5em 1em 0.5em 1em;
|
|
}
|
|
|
|
div.tutorial hr { border-color: #CCC; }
|
|
div.tutorial li { margin: 2px 0px }
|
|
div.tutorial h1 {
|
|
font-size: 18pt;
|
|
color: #404040;
|
|
}
|
|
div.tutorial h2 {
|
|
font-size: 14pt;
|
|
color: #404040;
|
|
}
|
|
|
|
/* NEW MENU */
|
|
/* Special credits to example at https://codepen.io/philhoyt/pen/ujHzd */
|
|
/* container div, aligned left,
|
|
but with .float-right modifier alignes right */
|
|
.nav-container ul
|
|
{
|
|
list-style: none;
|
|
position: relative;
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.nav-container.float-right ul { float: right; }
|
|
|
|
.nav-container ul a
|
|
{
|
|
display: block;
|
|
text-decoration: none;
|
|
line-height: 30px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* clearfix https://css-tricks.com/snippets/css/clear-fix/ */
|
|
.nav-container:after { clear: both; display: block; content: ""; }
|
|
|
|
/* submenues align to left or right border of the active item
|
|
depending on .float-right modifier */
|
|
.nav-container ul li
|
|
{
|
|
position: relative;
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.nav-container.float-right ul ul { left: auto; right: 0; }
|
|
|
|
.nav-container ul li.current-menu-item { font-weight: 700; }
|
|
.nav-container ul li:hover > ul { display: block; }
|
|
.nav-container ul ul li:hover { background-color: #f6f6f6; }
|
|
|
|
/* special selection style for 1st level items (see also .corner below) */
|
|
.nav-container > ul > li:hover > a {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.nav-container ul ul
|
|
{
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 1;
|
|
background: #fff;
|
|
padding: 0;
|
|
box-shadow: 1px 1px 3px 0px #bbb;
|
|
}
|
|
|
|
.nav-container ul ul li
|
|
{
|
|
float: none;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.nav-container ul ul a
|
|
{
|
|
line-height: 120%;
|
|
padding: 8px 15px;
|
|
}
|
|
|
|
.nav-container ul ul ul
|
|
{
|
|
top: 0;
|
|
left: 100%;
|
|
}
|
|
|
|
/* Minizone to extent hover area,
|
|
aligned to the left or to the right of the selected item
|
|
depending on .float-right modifier */
|
|
.nav-container > ul > li > div.minizone {
|
|
display: none;
|
|
z-index: 1;
|
|
position: absolute;
|
|
padding: 0px;
|
|
width: 16px;
|
|
height: 100%;
|
|
bottom: 0px;
|
|
left: 100%;
|
|
}
|
|
.nav-container > ul > li:hover div.minizone { display: block; }
|
|
.nav-container.float-right > ul > li > div.minizone {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
|
|
/* icons - text-align strictly left - otherwise look ugly
|
|
+ bite a bit of left padding for nicer look
|
|
+ forbids item text wrapping (maybe can be done differently) */
|
|
.nav-container ul ul li a .octicon {
|
|
padding-right: 10px;
|
|
margin-left: -3px;
|
|
}
|
|
.nav-container ul.with-icons li {
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Special .corner modifier - hangs menu at the top right corner
|
|
and cancels 1st level background coloring */
|
|
.nav-container.corner {
|
|
position: absolute;
|
|
right: 0px;
|
|
}
|
|
.nav-container.corner > ul > li:hover > a { background-color: inherit; }
|
|
|
|
/* Toolbar separator style */
|
|
.nav-container ul ul li.separator
|
|
{
|
|
font-size: x-small;
|
|
text-align: center;
|
|
padding: 4px 0;
|
|
text-transform: uppercase;
|
|
color: #bbb;
|
|
border-bottom: 1px solid #eee;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.nav-container ul ul li.separator:first-child { border-top: none; }
|
|
.nav-container ul ul li.separator:hover { background-color: inherit; }
|