mirror of
https://github.com/abapGit/abapGit.git
synced 2025-04-30 11:46:38 +08:00
ff4d126856
* Vimium like link hint navigation After this commit is applied, the link hint navigation can be used. The feature can be activated and configured in the user settings. Role model is the link hint navigation in the Google Chrome plugin Vimium. * refactoring: introduce KeyNavigation prototype * refactoring: introduce LinkHints prototype
868 lines
18 KiB
CSS
868 lines
18 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;
|
|
}
|
|
|
|
#abapGitLogo {
|
|
outline: none;
|
|
}
|
|
|
|
img { border: 0px; vertical-align: middle; }
|
|
table { border-collapse: collapse; }
|
|
pre { display: inline; }
|
|
sup {
|
|
vertical-align: top;
|
|
position: relative;
|
|
top: -0.5em;
|
|
font-size: 75%;
|
|
}
|
|
|
|
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; }
|
|
.grey80 { color: #ccc !important; }
|
|
.bgorange { background-color: orange; }
|
|
.darkgrey { color: #808080 !important; }
|
|
.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; }
|
|
|
|
/* 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%; }
|
|
.float-right { float: right; }
|
|
.pad-right { padding-right: 6px; }
|
|
|
|
/* 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;
|
|
position: relative;
|
|
}
|
|
.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 select {
|
|
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;
|
|
}
|
|
|
|
div.settings_section {
|
|
margin-left:50px
|
|
}
|
|
|
|
/* 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: 4px 8px;
|
|
vertical-align: middle;
|
|
}
|
|
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.block ul { display: block; }
|
|
.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%;
|
|
}
|
|
|
|
.nav-container.float-right ul ul ul
|
|
{
|
|
left: auto;
|
|
right: 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; }
|
|
|
|
/* News Announcement */
|
|
|
|
div.news {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: 36px;
|
|
left: 50%;
|
|
width: 40em;
|
|
margin-left: -20em;
|
|
background-color: white;
|
|
box-shadow: 1px 1px 3px 2px #dcdcdc;
|
|
}
|
|
|
|
div.news div.headbar {
|
|
text-transform: uppercase;
|
|
font-size: small;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
div.news div.title {
|
|
color: #f8f8f8;
|
|
background-color: #888;
|
|
}
|
|
|
|
div.news div.title a.close-btn {
|
|
color: #d8d8d8;
|
|
padding-left: 12px;
|
|
padding-right: 2px;
|
|
position: relative;
|
|
bottom: 1px;
|
|
}
|
|
|
|
div.news div.important { color: #aaa; }
|
|
div.news div.newslist {
|
|
padding: 0.5em 0.7em;
|
|
color: #444;
|
|
}
|
|
|
|
div.news li {
|
|
padding-left: 10px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
div.news h1:first-child { margin: auto; }
|
|
div.news h1 {
|
|
font-size: inherit;
|
|
padding: 6px 4px;
|
|
margin: 4px auto auto;
|
|
text-decoration: underline;
|
|
font-weight: normal;
|
|
}
|
|
|
|
div.news .version-marker {
|
|
color: white;
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
border-radius: 3px;
|
|
padding: 0px 6px;
|
|
border: #c0c0c0 1px solid;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
div.news .update {
|
|
border: #e8ba30 1px solid;
|
|
background-color: #f5c538;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.tooltiptext {
|
|
line-height: 15px;
|
|
width: 60px;
|
|
color: #000;
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
border-radius: 6px;
|
|
|
|
/* Position the tooltip text */
|
|
position: absolute;
|
|
z-index: 1;
|
|
margin-left: -60px;
|
|
margin-top: -30px;
|
|
|
|
/* Fade in tooltip */
|
|
opacity: 1;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Tooltip arrow */
|
|
.tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: #555 transparent transparent transparent;
|
|
}
|