playing with colors
[gitweb-theme-danix.git] / gitweb-danixland / gitweb.css
index 2959fc2..b77d420 100644 (file)
@@ -55,8 +55,20 @@ a { outline: none; }
   --link-visited: #e7b788;
   --border: 34,40,49,0.035;
   --accent: #FD7014;
-  --file-icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA6ElEQVQoFQXBMW5TQRgGwNnHnoE0QbiCjoIooUmTU3AuS1BwIoTSUdJBigg3GCWOg9/++zHTop078wIAsPMrE4SL5/1aIyMjIyMjz/m0tbFECFdrPeaQQw75mz/5nZH7fN7aWILmauSYfznmmIfss8vIUx7zZWsTTXM5vpWvTk5Wq9VHQP/gtgOLa0Qpw940vAQdaG6thpOhlOkG0AEuAVGmEkAH+G4YSikxXQM6wDsAMRFAB/ihDNNUmN4DOsAbBAEAdICfpmmaAt4COoj2GgCASbIkZh1NAACznhQt2itnFgAAlF3u/gMDtJXPzQxoswAAAABJRU5ErkJgggo=';
-  --dir-icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABq0lEQVQ4y8WTu4oUQRSGv+rtGVuxhwVFdFEEE2c3d0HYTEMTn8DEVxADQTDUF9DMwMxQMBMx8AEWzRQ3cBHd9TI91+2urjq/QbczY2IygSep4nD+79yqnCRWsYQVbWVACvDh5ZXdrLe15dwyT1TjT/sxFFeB6i+VA2B6+cb7kAI4Jf0LO087zjlQI8Y5Qvnj0sHug321XoC1bk+K9eHk6+s7wPMUgKAS88eqb4+Jfg2SHs7lZBvX2Nh+2EUCDGSAcMnJsx9f7NxfAGqXyDzRd5EJO/pMPT1gcviGTnYOVIN5pAAE8v7dLrKL8xnglFk4ws9Afko9HpH3b5Gd2mwb/lOBmgrSdYhJugDUCenxM6xv3p4HCsP8F0LxCsUhCkMURihOyM7fg0osASTFEpu9a4LjGIUCqwcoDiEUrX+E4hRUQb20RiokC1j9vckUhygU7X3QZh7NAVKYL7YBeMkRUfjVCotF2XGIwnghtrJpMywB5G0QZj9P1JNujuWJ1AHLQadRrACPkuZ0SSSWpeStWgDK6tHek5vbiOs48n++XQHurcf0rFng//6NvwG+iB9/4duaTgAAAABJRU5ErkJgggo=';
+  --dark-grey: #393E46;
+/* Icons */
+  --file-icon: url("file-dark.svg");
+  --dir-icon: url("folder-dark.svg");
+  --ref-icon: url("commit-dark.svg");
+  --tag-icon: url("tag-dark.svg");
+  --branch-icon: url("merge-dark.svg");
+  --rss-icon:url("rss-dark.svg");
+  --opml-icon:url("opml-dark.svg");
+/* social colors */
+  --twitter: #1DA1F2;
+  --instagram: #E4405F;
+  --spotify: #1ed760;
+  --github: #6e5494;
 }
 @media screen and (prefers-color-scheme: dark) {
   :root {
@@ -64,11 +76,18 @@ a { outline: none; }
     --bg-alt: #222831;
     --fg: #D8D9CF;
     --border: 216,217,207,0.2;
+  --file-icon: url("file.svg");
+  --dir-icon: url("folder.svg");
+  --ref-icon: url("commit.svg");
+  --tag-icon: url("tag.svg");
+  --branch-icon: url("merge.svg");
+  --rss-icon:url("rss.svg");
+  --opml-icon:url("opml.svg");
   }
 }
 
 
-/* General
+/* Main
 ---------------------------------------------------------------------------- */
 
 html {
@@ -106,21 +125,21 @@ a:hover {
 }
 
 td.list a[href*='tree'], td.list a[href*='blob'] {
-  padding-left: 20px;
+  padding-left: 40px;
   display: block;
   float: left;
-  height: 16px;
-  line-height: 16px;
+  height: 32px;
+  line-height: 32px;
 }
 
 /* Folder Icon */
 td.list a[href*='tree'] {
-  background: url(var(--dir-icon)) center left no-repeat;
+  background: var(--dir-icon) center left no-repeat;
 }
 
 /* File Icon */
 td.list a[href*='blob'] {
-  background: url(var(--file-icon)) center left no-repeat;
+  background: var(--file-icon) center left no-repeat;
 }
 
 i {
@@ -137,7 +156,7 @@ td, th {
 
 #generating_info {
   font-size: 10px;
-  color: #aaa;
+  color: var(--fg);
   text-align: center;
 }
 
@@ -155,11 +174,11 @@ td, th {
   padding: 0 27px;
   margin-bottom: 20px;
   font-size: 20px;
-  font-family: Helvetica, Arial, Freesans, Clean, sans-serif;
+  font-family: 'Montserrat', Helvetica, Arial, Freesans, Clean, sans-serif;
   background: var(--bg); /* old browsers */
-  background: -moz-linear-gradient(top, var(--bg) 0%, var(--bg-alt) 100%); /* firefox */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--bg)), color-stop(100%,var(--bg-alt))); /* webkit */
-  background: -o-linear-gradient(top, var(--bg) 0%, var(--bg-alt) 100%);
+  background: -moz-linear-gradient(top, var(--bg) 0%, var(--fg) 100%); /* firefox */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--bg)), color-stop(100%,var(--fg))); /* webkit */
+  background: -o-linear-gradient(top, var(--bg) 0%, var(--fg) 100%);
   border-bottom: 1px solid rgba(var(--border));
 }
 
@@ -186,64 +205,97 @@ td, th {
   margin-right: 5px;
 }
 
+.page_header:before {
+  content: 'You\'re in: ';
+}
+
 /* Page Footer
 ---------------------------------------------------------------------------- */
 
-.page_footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+.page_footer,
+.site-footer {
   width: 100%;
-  height: 80px;
-  line-height: 80px;
-  margin-top: 15px;
-  background: var(--bg);
+  background: var(--bg-alt);
+  margin: 0;
+}
+
+.page_footer {
+  height: 40px;
+  line-height: 40px;
   border-top: 2px solid var(--border);
   border-bottom: 1px solid var(--border);
 }
 
 .page_footer_text {
   color: var(--fg);
+  text-align: right;
+  padding-right: 2em;
   display: inline;
-  float: left;
-  margin-left: 25px;
-  width: 80%;
+  float: right;
+  width: calc(100% - 2em);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-a.rss_logo {
-  float: right;
-  padding: 3px 1px;
-  width: 35px;
-  line-height: 10px;
-  border: 1px solid;
-  border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
-  color: #ffffff;
-  background-color: #ff6600;
-  font-weight: bold;
-  font-family: sans-serif;
-  font-size: 80%;
-  text-align: center;
-  text-decoration: none;
-  margin-top: 30px;
-  margin-left: 5px;
+.site-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+  align-content: stretch;
 }
 
-a.rss_logo:hover {
-  background-color: #ee5500;
+.site-footer .columns {
+  display: block;
+  flex-grow: 1;
+  flex-basis: auto;
+  align-self: stretch;
+  order: 0;
 }
 
-.rss_logo {
-  margin-right: 25px;
-  background: yellow;
+.social-links ul li {
+  display: inline-block;
+  margin: 1em;
+  padding: 0.5em;
 }
 
-.rss_logo:last-child {
-  margin-right: 5px;
+.social-links ul li a {
+  height: 32px;
+  text-align: center;
+}
+.social-links ul li.spotify a {
+  color: var(--spotify);
+}
+.social-links ul li.twitter a {
+  color: var(--twitter);
+}
+.social-links ul li.instagram a {
+  color: var(--instagram);
+}
+.social-links ul li.github a {
+  color: var(--github);
+}
+
+a.rss_logo,
+div.social-links ul li a span,
+div.page_header a img.logo {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
+
 /* Index include
 ---------------------------------------------------------------------------- */
 
@@ -326,7 +378,7 @@ th .header {
 .projsearch {
   position: absolute;
   right: 4%;
-  top: 15px;
+  top: 40px;
 }
 
 .projsearch a {
@@ -334,7 +386,7 @@ th .header {
 }
 
 .commit_search {
-  background: #eaeaea;
+  background: var(--fg);
 }
 
 .page_nav,
@@ -416,13 +468,13 @@ th .header {
 }
 
 .readme pre {
-  font-family: monospace;
+  font-family: 'Red Hat Mono', monospace;
   margin: 1em 0;
   white-space: pre;
 }
 
 .readme tt, .readme code, .readme kbd, .readme samp {
-  font-family: monospace;
+  font-family: 'Red Hat Mono', monospace;
 }
 
 .readme blockquote {
@@ -531,8 +583,8 @@ span.refs span {
   color: #707070;
   display: inline-block;
   margin: 0;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  background-color: var(--bg);
+  border: 1px solid var(--border);
   border-radius: 3px;
   height: 18px;
   padding: 0 6px;
@@ -543,13 +595,14 @@ span.refs span.ref {
   color: #707070;
   display: inline-block;
   margin: 0;
-  background-color: #c4c4ff;
-  border: 1px solid #7878ff;
+  background-color: var(--bg-alt);
+  border: 1px solid var(--link);
   border-radius: 3px;
   height: 18px;
   padding: 0 6px;
   text-overflow: ellipsis;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIKFSUnpolg7AAAAHJQTFRFAAAAVVWqZmbMVVXVYGDgbW3td3fuc3PzdHT0cHD1d3f6dHT6dnb7dHT7dnb8dnb8dnb9d3f9dnb+eHj+d3f+eHj+d3f+d3f+d3f+eHj+d3f+eHj+d3f+eHj+d3f+d3f+eHj+d3f+d3f+d3f+eHj/////V9oQhQAAACR0Uk5TAAIEBQcNDhMVGCotNTZAT217i5CgobvExtjZ4eLr7vP09ff7uqQ6cgAAAAFiS0dEJcMByQ8AAABUSURBVBjTpc43AoAwDENRh95bgNBM1f3PyOpslD++RSJ61YgH5M2IbIkn4GocSR1MZVBL4t2n4FgkbaxI8Sqph041WknZCWAIrcmEUbpf3lNe0N9u59YFYHnZ78gAAAAASUVORK5CYII=);
+/* Node vertical */
+  background-image: var(--ref-icon);
   background-repeat: no-repeat;
   padding-left: 18px;
 }
@@ -564,7 +617,8 @@ span.refs span.tag {
   height: 18px;
   padding: 0 6px;
   text-overflow: ellipsis;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIKFSUZZ+h9RwAAAGZQTFRFAAAAtrYkwMBAwMBAx8c4yso11NQ71NQ51dU52Ng71tY519c719c719c62Ng719c719c62Ng72dk62Ng62Ng72Ng72dk62Ng72Ng62dk62dk72dk62Ng62dk72Ng72Ng72dk7////ou/AnQAAACB0Uk5TAAYHCxESLjRCWWlqa4uNkpissbrO19jc3ufs8vf6/f7atAU2AAAAAWJLR0QhxGwNFgAAAF1JREFUGFeNy0cOgCAABVGw94rY5d//lC7omhhn+ZIh5Gf1xPk0Zi5dAABROIQjSU/fsAXhDkCUljAv8jW2wlQpaixpo4Nj+dtatVpjkSJjLNaizRVpvhBCu/4h391jzw1lU12Z7wAAAABJRU5ErkJggg==);
+/* tag icon */
+  background-image: var(--tag-icon);
   background-repeat: no-repeat;
   padding-left: 18px;
 }
@@ -579,7 +633,8 @@ span.refs span.head {
   height: 18px;
   padding: 0 6px;
   text-overflow: ellipsis;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIKFSYDsafX/gAAAUpJREFUOMvVkjFLA0EQhd/s7l06MSCihbV/wC5/QBDEIFYWprRIIQQJFqKFQi4kUbBQsFSwtrUQLQULUTBFLCzVIgimCXe7z0q5yIWcqfRVwzDzMTNvgL8mSUqWw3JOtFQJdsIwLDYyjdYgkEmkazl2oVtQWk36nn8AYBYASmFpxmizGtnoqO7Vb+M9KglEkASdpWU872nvVCiPRpuTnz2JIHGyqX3d0kZfR1G0Ht+g/do+FIhOBbLW3n/FNb/28D0puZ+dyL44ur1UoH5yzt2JyIj6UGdDgwrPhYzSagNEszJaeU/lWlylbmnaeGZZICsAppxzi6nt73HK85oQCMknOuarpno+FIjglVjZDXaCS2yDv3rIHlCb88FY0BlUl3hs7ektkhckb5DFWhoz+n12zr7ZPLpYUqLm0oBMn8NUzLhpAgjpWMS/1CcSJ3ykD7Rk1QAAAABJRU5ErkJggg==);
+/* git branch */
+  background-image: var(--branch-icon);
   background-repeat: no-repeat;
   padding-left: 18px;
 }
@@ -810,6 +865,15 @@ div.site-header {
 div.site-header h1 {
   text-transform: uppercase;
   font-size: 2em;
+  padding: 0;
+  margin: 0;
+  line-height: 2em;
+}
+div.site-header h1 img.site-logo {
+  height: 50px;
+  width: auto;
+  position: relative;
+  top: 15px;
 }
 div.site-header h1 span.evident {
   background-color: var(--accent);