minor css global define tweaks to better match claro (2)

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

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

--- a/css/tt-rss.less
+++ b/css/tt-rss.less
@@ -217,6 +217,10 @@ body.ttrss_main {
 		}
 	}

+	.hl:nth-child(odd) {
+		background : #F0F0F0 ! important;
+	}
+
 	.hl {
 		border: 0px solid @border-default;
 		border-bottom-width: 1px;
@@ -784,11 +788,11 @@ body.ttrss_main {
 		font-size : 12px;

 		#toolbar {
-			background : white;
+			//background : white;
 			border: 0px solid @border-default;
 			border-bottom-width: 1px;
 			padding-left : 4px;
-			height : 32px;
+			height : 28px;
 			display : flex;
 			flex-direction : row;
 			flex-wrap : nowrap;
--- a/index.php
+++ b/index.php
@@ -120,7 +120,7 @@
 	<meta name="referrer" content="no-referrer"/>
 </head>

-<body class="flat ttrss_main ttrss_index">
+<body class="claro ttrss_main ttrss_index">

 <div id="overlay" style="display : block">
 	<div id="overlay_inner">
--- a/prefs.php
+++ b/prefs.php
@@ -102,7 +102,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>

-<body class="flat ttrss_main ttrss_prefs">
+<body class="claro ttrss_main ttrss_prefs">

 <div id="notify" class="notify"></div>
 <div id="cmdline" style="display : none"></div>
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