utility css updates

1 files changed, 225 insertions, 169 deletions

diff --git a/css/default.css b/css/default.css
index 1846dedb6..9ca300de9 100644
--- a/css/default.css
+++ b/css/default.css
@@ -1477,43 +1477,222 @@ body.ttrss_utility.sanity_failed {
 body.ttrss_utility {
   background: #f5f5f5;
   color: black;
-  padding: 0;
-  margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
-body.ttrss_utility form {
-  margin: 10px 0px 0px 0px;
-  padding: 0px;
-}
-body.ttrss_utility div.content {
+  margin: 4em;
+  /* form {
+		margin : 10px 0px 0px 0px;
+		padding : 0px;
+	}
+
+	div.content {
+		background : white;
+		overflow : hidden;
+		border : 1px solid #ddd;
+		padding : 20px;
+		box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
+	}
+
+	div.content:not(.login-form) {
+		min-width : 600px;
+	}
+
+	p.warning {
+		color : red;
+	}
+
+	p.query, code {
+		color : green;
+	}
+
+	p.insensitive {
+		color : gray;
+	}
+
+	div.insensitive-small {
+		color : gray;
+		font-size : 10px;
+	}
+
+	a {
+		color : @color-link;
+		text-decoration : none;
+	}
+
+	a:hover,
+	a:focus {
+		color: darken(@color-link, 20%);
+		text-decoration: underline;
+	}
+
+	h1 {
+		color : gray;
+		font-family: @fonts-ui-bold;
+		font-size : 18px;
+		margin : 10px 0 0 0;
+	}
+
+	h2, h3, h4 {
+		color : @color-accent;
+	}
+
+	div.content > h2 {
+		margin-top : 0px;
+	}
+
+	div.rss h1 {
+		border-width : 0px 0px 1px 0px;
+		border-color : gray;
+		border-style : dotted;
+		color : gray;
+	}
+
+	div.rss h2 {
+		font-size : 12pt;
+	}
+
+	div.rss a.extlink {
+		color : gray;
+		border-width : 0px 0px 1px 0px;
+		border-color : #778899;
+		border-style : dotted;
+		font-size : 9pt;
+	}
+
+	div.rss img {
+		max-width : 775px;
+	}
+
+	div.rss p.description {
+		color : gray;
+		font-size : 9pt;
+	}
+
+	div.rss div.content {
+		margin-top : 0.5em;
+	}
+
+	div.rss img.feedicon {
+		float : right;
+	}
+
+	div.rss hr {
+		border-width : 0px 0px 1px 0px;
+		border-style : dashed;
+		border-color : #e0e0e0;
+	}
+
+	div.autocomplete {
+		position : absolute;
+		width : 250px;
+		background-color : white;
+		border :1px solid #778899;
+		margin : 0px;
+		padding : 0px;
+		z-index : 4;
+	}
+
+	div.autocomplete ul {
+		list-style-type : none;
+		margin : 0px;
+		padding : 0px;
+		font-size : 10px;
+	}
+
+	div.autocomplete ul li.selected {
+		background-color : #fff7d5;
+	}
+
+	div.autocomplete ul li {
+		list-style-type : none;
+		display : block;
+		margin : 0;
+		padding : 2px;
+		height : 32px;
+		cursor : pointer;
+	}
+
+	fieldset {
+		border-width : 0px;
+		padding : 5px 0px;
+	}
+
+	fieldset.narrow {
+		padding : 2px 0px;
+	}
+
+	fieldset.align-right {
+		text-align : right;
+	}
+
+	fieldset > label:first-of-type {
+		width : 120px;
+		margin-right : 20px;
+		display : inline-block;
+		text-align : right;
+		font-weight : bold;
+	}
+
+	.footer {
+		text-align : center;
+		padding-top : 10px;
+
+		a {
+			color : gray;
+		}
+
+		a:hover {
+			color : @color-accent;
+		}
+	}
+
+	body.otp {
+		margin : 1em;
+		padding : 0px;
+	}
+
+	form.otpform {
+		margin : 0px;
+		padding : 0px;
+	}
+
+	form.otpform label {
+		margin : 0px;
+		padding : 0px;
+	}
+
+	body.otp div.content {
+		display : inline-block;
+		width : auto;
+	}
+
+	span.hint {
+		font-size : 10px;
+		color : gray;
+	} */
+}
+body.ttrss_utility .content {
   background: white;
-  overflow: hidden;
   border: 1px solid #ddd;
   padding: 20px;
   box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
-body.ttrss_utility div.content:not(.login-form) {
-  min-width: 600px;
-}
-body.ttrss_utility p.warning {
-  color: red;
+body.ttrss_utility fieldset {
+  border-width: 0px;
+  padding: 5px 0px;
 }
-body.ttrss_utility p.query,
-body.ttrss_utility code {
-  color: green;
+body.ttrss_utility fieldset.narrow {
+  padding: 2px 0px;
 }
-body.ttrss_utility p.insensitive {
-  color: gray;
+body.ttrss_utility fieldset.align-right {
+  text-align: right;
 }
-body.ttrss_utility div.insensitive-small {
-  color: gray;
-  font-size: 10px;
+body.ttrss_utility fieldset > label:first-of-type {
+  width: 120px;
+  margin-right: 20px;
+  display: inline-block;
+  text-align: right;
+  font-weight: bold;
 }
 body.ttrss_utility a {
   color: #257aa7;
@@ -1535,86 +1714,6 @@ body.ttrss_utility h3,
 body.ttrss_utility h4 {
   color: #257aa7;
 }
-body.ttrss_utility div.content > h2 {
-  margin-top: 0px;
-}
-body.ttrss_utility div.rss h1 {
-  border-width: 0px 0px 1px 0px;
-  border-color: gray;
-  border-style: dotted;
-  color: gray;
-}
-body.ttrss_utility div.rss h2 {
-  font-size: 12pt;
-}
-body.ttrss_utility div.rss a.extlink {
-  color: gray;
-  border-width: 0px 0px 1px 0px;
-  border-color: #778899;
-  border-style: dotted;
-  font-size: 9pt;
-}
-body.ttrss_utility div.rss img {
-  max-width: 775px;
-}
-body.ttrss_utility div.rss p.description {
-  color: gray;
-  font-size: 9pt;
-}
-body.ttrss_utility div.rss div.content {
-  margin-top: 0.5em;
-}
-body.ttrss_utility div.rss img.feedicon {
-  float: right;
-}
-body.ttrss_utility div.rss hr {
-  border-width: 0px 0px 1px 0px;
-  border-style: dashed;
-  border-color: #e0e0e0;
-}
-body.ttrss_utility div.autocomplete {
-  position: absolute;
-  width: 250px;
-  background-color: white;
-  border: 1px solid #778899;
-  margin: 0px;
-  padding: 0px;
-  z-index: 4;
-}
-body.ttrss_utility div.autocomplete ul {
-  list-style-type: none;
-  margin: 0px;
-  padding: 0px;
-  font-size: 10px;
-}
-body.ttrss_utility div.autocomplete ul li.selected {
-  background-color: #fff7d5;
-}
-body.ttrss_utility div.autocomplete ul li {
-  list-style-type: none;
-  display: block;
-  margin: 0;
-  padding: 2px;
-  height: 32px;
-  cursor: pointer;
-}
-body.ttrss_utility fieldset {
-  border-width: 0px;
-  padding: 5px 0px;
-}
-body.ttrss_utility fieldset.narrow {
-  padding: 2px 0px;
-}
-body.ttrss_utility fieldset.align-right {
-  text-align: right;
-}
-body.ttrss_utility fieldset > label:first-of-type {
-  width: 120px;
-  margin-right: 20px;
-  display: inline-block;
-  text-align: right;
-  font-weight: bold;
-}
 body.ttrss_utility .footer {
   text-align: center;
   padding-top: 10px;
@@ -1625,29 +1724,23 @@ body.ttrss_utility .footer a {
 body.ttrss_utility .footer a:hover {
   color: #257aa7;
 }
-body.ttrss_utility body.otp {
-  margin: 1em;
-  padding: 0px;
-}
-body.ttrss_utility form.otpform {
-  margin: 0px;
-  padding: 0px;
-}
-body.ttrss_utility form.otpform label {
-  margin: 0px;
-  padding: 0px;
-}
-body.ttrss_utility body.otp div.content {
-  display: inline-block;
-  width: auto;
+body.ttrss_utility.ttrss_login {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-body.ttrss_utility span.hint {
-  font-size: 10px;
-  color: gray;
+body.ttrss_utility.ttrss_login .container {
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
 }
-body.small_margins {
-  margin: 1em;
-  max-width: none;
+body.ttrss_utility.feed_debugger {
+  margin: 2em;
 }
 body#sharepopup {
   color: black;
@@ -1811,13 +1904,6 @@ body#sharepopup input {
 .flat .dijitCheckBox {
   background: #ccc;
 }
-body.ttrss_zoom {
-  margin-left: auto;
-  margin-right: auto;
-  padding: 20px;
-  max-width: 800px;
-  background: #f5f5f5;
-}
 body.ttrss_zoom div.post {
   border: 1px solid #ddd;
   background: white;
@@ -1827,7 +1913,6 @@ body.ttrss_zoom div.post .attachments {
   display: none;
 }
 body.ttrss_zoom div.post div.header {
-  margin: 10px;
   padding-bottom: 10px;
   border: 0px solid #eee;
   border-bottom-width: 1px;
@@ -1839,48 +1924,19 @@ body.ttrss_zoom div.post div.header .row {
   display: flex;
   margin-bottom: 4px;
   flex-wrap: nowrap;
-}
-body.ttrss_zoom div.post div.header .row > * {
-  align-self: center;
-}
-body.ttrss_zoom div.post div.header .comments {
-  flex-grow: 2;
-}
-body.ttrss_zoom div.post div.header .date {
-  text-align: right;
-  white-space: nowrap;
-  align-self: flex-start;
-}
-body.ttrss_zoom div.post div.header img,
-body.ttrss_zoom div.post div.header i {
-  margin: 0px 4px;
-  vertical-align: middle;
-}
-body.ttrss_zoom div.post div.header .title {
-  flex-grow: 2;
-  align-self: flex-start;
-  font-size: 15px;
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-  font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-body.ttrss_zoom div.post div.header div.feed-title {
-  text-align: right;
+  align-items: center;
+  justify-content: space-between;
 }
 body.ttrss_zoom div.post p {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
 }
-body.ttrss_zoom div.post div.footer {
-  margin-top: 1em;
-  text-align: center;
-}
 body.ttrss_zoom div.post div.content {
   font-size: 15px;
   line-height: 1.5;
-  padding: 10px;
-  border-width: 0px;
+  border-width: 0;
+  padding: 0;
 }
 body.ttrss_zoom div.post div.content img,
 body.ttrss_zoom div.post div.content video {