xle/tt-rss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: xle:main
Branches Tags
xle:main xle:app-rootless xle:claro-throwback
...
pull from: xle:claro-throwback
Branches Tags
xle:main xle:app-rootless xle:claro-throwback

3 Commits
main ... claro-thro

Author SHA1 Message Date
Andrew Dolgov
c0aa9d0548 minor css global define tweaks to better match claro (2) 2019-07-08 14:58:16 +03:00
Andrew Dolgov
3c7414cee1 minor css global define tweaks to better match claro 2019-07-08 14:46:39 +03:00
Andrew Dolgov
4d265a4deb use claro theme instead of flat 2019-07-08 14:29:19 +03:00
6 changed files with 68 additions and 63 deletions
Expand all files Collapse all files

113
css/default.css
View File

@@ -1,4 +1,4 @@
@import "../lib/flat-ttrss/flat_combined.css"; @import "../lib/dijit/themes/claro/claro.css";
body.ttrss_main, body.ttrss_main,
body.ttrss_prefs, body.ttrss_prefs,
#main { #main {
@@ -26,7 +26,7 @@ body.ttrss_main div.post {
body.ttrss_main div.post div.header { body.ttrss_main div.post div.header {
padding: 5px; padding: 5px;
color: #909090; color: #909090;
border: 0px solid #ddd; border: 0px solid #C0C0C0;
border-bottom-width: 1px; border-bottom-width: 1px;
background: #f5f5f5; background: #f5f5f5;
} }
@@ -119,11 +119,11 @@ body.ttrss_main h4 {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
} }
body.ttrss_main a { body.ttrss_main a {
color: #257aa7; color: #5F89AD;
text-decoration: none; text-decoration: none;
} }
body.ttrss_main a:hover { body.ttrss_main a:hover {
color: #133d54; color: #38556e;
text-decoration: underline; text-decoration: underline;
} }
body.ttrss_main #notify.visible { body.ttrss_main #notify.visible {
@@ -166,11 +166,11 @@ body.ttrss_main .notify.notify_progress {
background-color: #fff7d5; background-color: #fff7d5;
} }
body.ttrss_main .notify.notify_info { body.ttrss_main .notify.notify_info {
border-color: #257aa7; border-color: #5F89AD;
background-color: #d5ebf6; background-color: #ffffff;
} }
body.ttrss_main .notify.notify_info i.icon-notify { body.ttrss_main .notify.notify_info i.icon-notify {
color: #257aa7; color: #5F89AD;
} }
body.ttrss_main .notify.notify_error { body.ttrss_main .notify.notify_error {
background-color: #c00; background-color: #c00;
@@ -187,8 +187,11 @@ body.ttrss_main .action-chooser .action-button .dijitButtonText {
body.ttrss_main .action-chooser .action-button .dijitArrowButtonInner { body.ttrss_main .action-chooser .action-button .dijitArrowButtonInner {
display: none; display: none;
} }
body.ttrss_main .hl:nth-child(odd) {
background: #F0F0F0 ! important;
}
body.ttrss_main .hl { body.ttrss_main .hl {
border: 0px solid #ddd; border: 0px solid #C0C0C0;
border-bottom-width: 1px; border-bottom-width: 1px;
transition: color 0.2s, background 0.2s; transition: color 0.2s, background 0.2s;
display: flex; display: flex;
@@ -246,7 +249,7 @@ body.ttrss_main .hl span.feed a {
color: #555; color: #555;
} }
body.ttrss_main .hl span.feed a:hover { body.ttrss_main .hl span.feed a:hover {
color: #257aa7; color: #5F89AD;
} }
body.ttrss_main .hl span.updated { body.ttrss_main .hl span.updated {
color: #555; color: #555;
@@ -284,16 +287,16 @@ body.ttrss_main .hl.Unread div.title a {
color: black; color: black;
} }
body.ttrss_main .hl.active div.title a { body.ttrss_main .hl.active div.title a {
color: #257aa7; color: #5F89AD;
/* text-shadow : 1px 1px 2px #fff; */ /* text-shadow : 1px 1px 2px #fff; */
} }
body.ttrss_main .hl.active { body.ttrss_main .hl.active {
background: #257aa7 ! important; background: #5F89AD ! important;
} }
body.ttrss_main .hl.active, body.ttrss_main .hl.active,
body.ttrss_main .hl.Selected { body.ttrss_main .hl.Selected {
color: white; color: white;
background: #3f728e; background: #7d878f;
} }
body.ttrss_main .hl.active a, body.ttrss_main .hl.active a,
body.ttrss_main .hl.Selected a, body.ttrss_main .hl.Selected a,
@@ -364,7 +367,7 @@ body.ttrss_main i.pub-pic {
color: #ccc; color: #ccc;
} }
body.ttrss_main div.errorExplained { body.ttrss_main div.errorExplained {
border: 1px solid #ddd; border: 1px solid #C0C0C0;
margin: 5px 0px 5px 0px; margin: 5px 0px 5px 0px;
padding: 5px; padding: 5px;
} }
@@ -373,7 +376,7 @@ body.ttrss_main ul.browseFeedList {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
border-width: 0px 1px 1px 1px; border-width: 0px 1px 1px 1px;
border-color: #ddd; border-color: #C0C0C0;
border-style: solid; border-style: solid;
margin: 0px 0px 5px 0px; margin: 0px 0px 5px 0px;
background-color: white; background-color: white;
@@ -425,7 +428,7 @@ body.ttrss_main div.whiteBox {
text-align: center; text-align: center;
padding: 1em 1em 0px 1em; padding: 1em 1em 0px 1em;
font-size: 11px; font-size: 11px;
border: 0px solid #ddd; border: 0px solid #C0C0C0;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
body.ttrss_main div#headlines-frame.wide .title { body.ttrss_main div#headlines-frame.wide .title {
@@ -509,7 +512,7 @@ body.ttrss_main div#cmdline {
color: #555; color: #555;
font-weight: bold; font-weight: bold;
background-color: white; background-color: white;
border: 1px solid #257aa7; border: 1px solid #5F89AD;
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
z-index: 5; z-index: 5;
} }
@@ -542,7 +545,7 @@ body.ttrss_main #content-wrap {
} }
body.ttrss_main #feeds-holder { body.ttrss_main #feeds-holder {
padding: 0px; padding: 0px;
border: 0px solid #ddd; border: 0px solid #C0C0C0;
overflow: hidden; overflow: hidden;
background: #f5f5f5; background: #f5f5f5;
box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1); box-shadow: inset -1px 0px 2px -1px rgba(0, 0, 0, 0.1);
@@ -564,9 +567,9 @@ body.ttrss_main #feeds-holder #feedTree .counterNode {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
text-align: center; text-align: center;
border: 1px solid #2a89bc; border: 1px solid #7095b6;
color: white; color: white;
background: #2a89bc; background: #7095b6;
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
float: right; float: right;
@@ -594,7 +597,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected {
box-shadow: -1px 0px 2px -1px rgba(0, 0, 0, 0.1); box-shadow: -1px 0px 2px -1px rgba(0, 0, 0, 0.1);
border-color: #ddd transparent; border-color: #C0C0C0 transparent;
background: white; background: white;
color: #333; color: #333;
} }
@@ -623,7 +626,7 @@ body.ttrss_main #feeds-holder #feedTree i.icon.icon-restore {
position: relative; position: relative;
top: -1px; top: -1px;
font-weight: bold; font-weight: bold;
color: #257aa7; color: #5F89AD;
} }
body.ttrss_main #headlines-wrap-inner { body.ttrss_main #headlines-wrap-inner {
padding: 0px; padding: 0px;
@@ -635,14 +638,14 @@ body.ttrss_main #headlines-frame[is-vfeed="0"] .header .feed {
} }
body.ttrss_main #headlines-frame { body.ttrss_main #headlines-frame {
padding: 0px; padding: 0px;
border: 0px #ddd; border: 0px #C0C0C0;
margin-top: 0px; margin-top: 0px;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
} }
body.ttrss_main #headlines-frame div.feed-title { body.ttrss_main #headlines-frame div.feed-title {
border: 0px solid #257aa7; border: 0px solid #5F89AD;
border-bottom-width: 1px; border-bottom-width: 1px;
padding: 5px 8px; padding: 5px 8px;
} }
@@ -654,7 +657,7 @@ body.ttrss_main #headlines-frame div.feed-title a {
color: #555; color: #555;
} }
body.ttrss_main #headlines-frame div.feed-title a:hover { body.ttrss_main #headlines-frame div.feed-title a:hover {
color: #257aa7; color: #5F89AD;
} }
body.ttrss_main #toolbar-frame_splitter { body.ttrss_main #toolbar-frame_splitter {
display: none; display: none;
@@ -667,11 +670,10 @@ body.ttrss_main #toolbar-frame {
font-size: 12px; font-size: 12px;
} }
body.ttrss_main #toolbar-frame #toolbar { body.ttrss_main #toolbar-frame #toolbar {
background: white; border: 0px solid #C0C0C0;
border: 0px solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
padding-left: 4px; padding-left: 4px;
height: 32px; height: 28px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -717,7 +719,7 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
font-style: italic; font-style: italic;
text-align: right; text-align: right;
margin-right: 4px; margin-right: 4px;
color: #257aa7; color: #5F89AD;
} }
@media (max-width: 992px) { @media (max-width: 992px) {
body.ttrss_main #toolbar-frame #toolbar #selected_prompt { body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
@@ -737,7 +739,7 @@ body.ttrss_main #header {
} }
body.ttrss_main #content-insert { body.ttrss_main #content-insert {
padding: 0px; padding: 0px;
border-color: #ddd; border-color: #C0C0C0;
border-width: 0px; border-width: 0px;
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
@@ -788,7 +790,7 @@ body.ttrss_main #headlines-spacer span {
display: block; display: block;
} }
body.ttrss_main #headlines-spacer a:hover { body.ttrss_main #headlines-spacer a:hover {
color: #257aa7; color: #5F89AD;
} }
body.ttrss_main ul#filterDlg_Matches, body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions { body.ttrss_main ul#filterDlg_Actions {
@@ -796,7 +798,7 @@ body.ttrss_main ul#filterDlg_Actions {
overflow: auto; overflow: auto;
list-style-type: none; list-style-type: none;
border-style: solid; border-style: solid;
border-color: #ddd; border-color: #C0C0C0;
border-width: 1px 1px 1px 1px; border-width: 1px 1px 1px 1px;
background-color: white; background-color: white;
margin: 0px 0px 5px 0px; margin: 0px 0px 5px 0px;
@@ -818,7 +820,7 @@ body.ttrss_main ul.hotkeys-help li.desc {
flex-grow: 2; flex-grow: 2;
} }
body.ttrss_main ul.hotkeys-help .hk { body.ttrss_main ul.hotkeys-help .hk {
color: #257aa7; color: #5F89AD;
width: 100px; width: 100px;
} }
body.ttrss_main ul.hotkeys-help h3 { body.ttrss_main ul.hotkeys-help h3 {
@@ -893,7 +895,7 @@ body.ttrss_main i.icon-score {
cursor: pointer; cursor: pointer;
} }
body.ttrss_main .panel { body.ttrss_main .panel {
border: 1px solid #ddd; border: 1px solid #C0C0C0;
background: #f5f5f5; background: #f5f5f5;
padding: 4px; padding: 4px;
} }
@@ -923,7 +925,7 @@ body.ttrss_main #prefFilterTestResultList .title {
font-weight: bold; font-weight: bold;
} }
body.ttrss_main #prefFilterTestResultList .feed { body.ttrss_main #prefFilterTestResultList .feed {
color: #257aa7; color: #5F89AD;
} }
body.ttrss_main .alert, body.ttrss_main .alert,
body.ttrss_utility .alert { body.ttrss_utility .alert {
@@ -1028,7 +1030,7 @@ body.ttrss_utility div.autocomplete {
position: absolute; position: absolute;
width: 250px; width: 250px;
background-color: white; background-color: white;
border: 1px solid #ddd; border: 1px solid #C0C0C0;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
@@ -1051,14 +1053,14 @@ body.ttrss_utility div.autocomplete ul li {
cursor: pointer; cursor: pointer;
} }
::selection { ::selection {
background: #257aa7; background: #5F89AD;
color: white; color: white;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 4px; width: 4px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #257aa7; background-color: #5F89AD;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #eee; background-color: #eee;
@@ -1153,7 +1155,7 @@ video::-webkit-media-controls-overlay-play-button {
white-space: normal; white-space: normal;
} }
.cdm.expanded .footer { .cdm.expanded .footer {
border: 0px solid #ddd; border: 0px solid #C0C0C0;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.cdm.expanded > hr { .cdm.expanded > hr {
@@ -1175,7 +1177,7 @@ div.cdm.expanded.active {
background: white; background: white;
} }
div.cdm.expanded.active div.header a.title { div.cdm.expanded.active div.header a.title {
color: #257aa7; color: #5F89AD;
} }
div.cdm.expanded.Unread div.header a.title { div.cdm.expanded.Unread div.header a.title {
color: black; color: black;
@@ -1193,7 +1195,7 @@ div.cdm.vgrlf .feed {
display: none; display: none;
} }
.cdm div.feed-title { .cdm div.feed-title {
border: 0px solid #257aa7; border: 0px solid #5F89AD;
border-bottom-width: 1px; border-bottom-width: 1px;
padding: 5px 3px 5px 5px; padding: 5px 3px 5px 5px;
} }
@@ -1205,7 +1207,7 @@ div.cdm.vgrlf .feed {
color: #555; color: #555;
} }
.cdm div.feed-title a:hover { .cdm div.feed-title a:hover {
color: #257aa7; color: #5F89AD;
} }
.cdm div.header span.feed { .cdm div.header span.feed {
float: right; float: right;
@@ -1250,7 +1252,7 @@ div#floatingTitle {
top: 0px; top: 0px;
right: 0px; right: 0px;
left: 0px; left: 0px;
border: 0px solid #ddd; border: 0px solid #C0C0C0;
border-bottom-width: 1px; border-bottom-width: 1px;
background: white; background: white;
color: #555; color: #555;
@@ -1288,7 +1290,7 @@ div#floatingTitle .excerpt {
display: none; display: none;
} }
div#floatingTitle .collapse i.material-icons { div#floatingTitle .collapse i.material-icons {
color: #257aa7; color: #5F89AD;
cursor: pointer; cursor: pointer;
} }
div#floatingTitle span.author { div#floatingTitle span.author {
@@ -1345,14 +1347,14 @@ div#floatingTitle .feed-title a.catchup {
white-space: nowrap; white-space: nowrap;
} }
div#floatingTitle .feed-title a.catchup:hover { div#floatingTitle .feed-title a.catchup:hover {
color: #257aa7; color: #5F89AD;
} }
div#floatingTitle.Unread a.title { div#floatingTitle.Unread a.title {
color: black; color: black;
} }
.cdm.expandable { .cdm.expandable {
background-color: #f5f5f5; background-color: #f5f5f5;
border: 0px solid #ddd; border: 0px solid #C0C0C0;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.cdm.expandable > hr { .cdm.expandable > hr {
@@ -1377,7 +1379,7 @@ div#floatingTitle.Unread a.title {
background: white; background: white;
} }
.cdm.expandable.Selected:not(.active) { .cdm.expandable.Selected:not(.active) {
background: #3f728e; background: #7d878f;
} }
.cdm.expandable.Selected:not(.active) a, .cdm.expandable.Selected:not(.active) a,
.cdm.expandable.Selected:not(.active) .header a.title, .cdm.expandable.Selected:not(.active) .header a.title,
@@ -1402,14 +1404,14 @@ div.cdm.expandable.Unread div.header a.title {
color: black; color: black;
} }
div.cdm.expandable.active .collapse i.material-icons { div.cdm.expandable.active .collapse i.material-icons {
color: #257aa7; color: #5F89AD;
cursor: pointer; cursor: pointer;
} }
div.cdm.expandable.active .excerpt { div.cdm.expandable.active .excerpt {
display: none; display: none;
} }
div.cdm.expandable.active div.header a.title { div.cdm.expandable.active div.header a.title {
color: #257aa7; color: #5F89AD;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
@@ -1595,7 +1597,7 @@ body.ttrss_utility .content h2:first-of-type {
body.ttrss_utility .content h2, body.ttrss_utility .content h2,
body.ttrss_utility .content h3, body.ttrss_utility .content h3,
body.ttrss_utility .content h4 { body.ttrss_utility .content h4 {
color: #257aa7; color: #5F89AD;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_utility .content h2 { body.ttrss_utility .content h2 {
@@ -1605,12 +1607,12 @@ body.ttrss_utility .content h3 {
font-size: 16px; font-size: 16px;
} }
body.ttrss_utility a { body.ttrss_utility a {
color: #257aa7; color: #5F89AD;
text-decoration: none; text-decoration: none;
} }
body.ttrss_utility a:hover, body.ttrss_utility a:hover,
body.ttrss_utility a:focus { body.ttrss_utility a:focus {
color: #133d54; color: #38556e;
text-decoration: underline; text-decoration: underline;
} }
body.ttrss_utility h1 { body.ttrss_utility h1 {
@@ -1627,7 +1629,7 @@ body.ttrss_utility .footer a {
color: gray; color: gray;
} }
body.ttrss_utility .footer a:hover { body.ttrss_utility .footer a:hover {
color: #257aa7; color: #5F89AD;
} }
body.ttrss_utility form { body.ttrss_utility form {
margin: 0; margin: 0;
@@ -1704,7 +1706,7 @@ body.ttrss_utility.share_popup .content {
font-size: 13px; font-size: 13px;
} }
.flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel { .flat .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel {
color: #2e99d1; color: #81a2be;
} }
.flat .dijitMenu .dijitMenuItem td { .flat .dijitMenu .dijitMenuItem td {
padding: 0px; padding: 0px;
@@ -1719,7 +1721,7 @@ body.ttrss_utility.share_popup .content {
} }
.flat .dijitTab i.material-icons, .flat .dijitTab i.material-icons,
.flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons { .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
color: #257aa7; color: #5F89AD;
} }
.flat .dijitTree .dijitFolderClosed, .flat .dijitTree .dijitFolderClosed,
.flat .dijitTree .dijitFolderOpened { .flat .dijitTree .dijitFolderOpened {
@@ -1729,7 +1731,7 @@ body.ttrss_utility.share_popup .content {
color: white; color: white;
} }
.flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando { .flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
color: #257aa7; color: #5F89AD;
} }
.flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected { .flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
color: white; color: white;
@@ -1891,4 +1893,3 @@ body.ttrss_zoom div.post div.content pre {
max-width: 98%; max-width: 98%;
overflow: auto; overflow: auto;
} }
/*# sourceMappingURL=default.css.map */

2
css/default.less
View File

@@ -1,4 +1,4 @@
@import "defines.less"; @import "defines.less";
@import "dijit_light.less"; @import "dijit_light.less";
@import "zoom.less"; @import "zoom.less";
@import "../lib/flat-ttrss/flat_combined.css"; @import "../lib/dijit/themes/claro/claro.css";

4
css/defines.less
View File

@@ -3,14 +3,14 @@
@default-fg: black; @default-fg: black;
@default-bg: white; @default-bg: white;
@color-accent: #257aa7; @color-accent: #5F89AD;
@color-accent-light: lighten(@color-accent, 50%); @color-accent-light: lighten(@color-accent, 50%);
@color-link: @color-accent; @color-link: @color-accent;
@color-published: lighten(#ff5718, 10%); @color-published: lighten(#ff5718, 10%);
@color-marked: #ffc069; @color-marked: #ffc069;
@color-panel-bg: #f5f5f5; @color-panel-bg: #f5f5f5;
@color-checked: #69C671; @color-checked: #69C671;
@border-default : #ddd; @border-default : #C0C0C0;
@default-text: #555; @default-text: #555;
@color-icon: #777; @color-icon: #777;

8
css/tt-rss.less
View File

@@ -217,6 +217,10 @@ body.ttrss_main {
} }
} }
.hl:nth-child(odd) {
background : #F0F0F0 ! important;
}
.hl { .hl {
border: 0px solid @border-default; border: 0px solid @border-default;
border-bottom-width: 1px; border-bottom-width: 1px;
@@ -784,11 +788,11 @@ body.ttrss_main {
font-size : 12px; font-size : 12px;
#toolbar { #toolbar {
background : white; //background : white;
border: 0px solid @border-default; border: 0px solid @border-default;
border-bottom-width: 1px; border-bottom-width: 1px;
padding-left : 4px; padding-left : 4px;
height : 32px; height : 28px;
display : flex; display : flex;
flex-direction : row; flex-direction : row;
flex-wrap : nowrap; flex-wrap : nowrap;

2
index.php
View File

@@ -120,7 +120,7 @@
<meta name="referrer" content="no-referrer"/> <meta name="referrer" content="no-referrer"/>
</head> </head>
<body class="flat ttrss_main ttrss_index"> <body class="claro ttrss_main ttrss_index">
<div id="overlay" style="display : block"> <div id="overlay" style="display : block">
<div id="overlay_inner"> <div id="overlay_inner">

2
prefs.php
View File

@@ -102,7 +102,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head> </head>
<body class="flat ttrss_main ttrss_prefs"> <body class="claro ttrss_main ttrss_prefs">
<div id="notify" class="notify"></div> <div id="notify" class="notify"></div>
<div id="cmdline" style="display : none"></div> <div id="cmdline" style="display : none"></div>