X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=gitweb-danixland%2Fgitweb.css;h=02eb7f0798b8aee933b7466e1ff12002d647db87;hb=a63053b2b31e12ab1a8498f5b491ba48f0733e2b;hp=77de653230ea6be005b507b36c80b62dd611ec9d;hpb=8cac4be7916a427c07c6b04f7d24997b5e29bf4a;p=gitweb-theme-danix.git diff --git a/gitweb-danixland/gitweb.css b/gitweb-danixland/gitweb.css index 77de653..02eb7f0 100644 --- a/gitweb-danixland/gitweb.css +++ b/gitweb-danixland/gitweb.css @@ -55,12 +55,21 @@ a { outline: none; } --link-visited: #e7b788; --border: 34,40,49,0.035; --accent: #FD7014; - --svg-color: navy; - --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"); + --bluish-grey: #3f4c77; + --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 { @@ -68,12 +77,18 @@ a { outline: none; } --bg-alt: #222831; --fg: #D8D9CF; --border: 216,217,207,0.2; - --svg-color: teal; + --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 { @@ -111,7 +126,7 @@ a:hover { } td.list a[href*='tree'], td.list a[href*='blob'] { - padding-left: 20px; + padding-left: 40px; display: block; float: left; height: 32px; @@ -119,14 +134,13 @@ td.list a[href*='tree'], td.list a[href*='blob'] { } /* Folder Icon */ -td.list a[href*='tree']:before { - color: var(--svg-color); - content: var(--dir-icon); +td.list a[href*='tree'] { + background: var(--dir-icon) center left no-repeat; } /* File Icon */ td.list a[href*='blob'] { - background: var(--svg-color) var(--file-icon) center left no-repeat; + background: var(--file-icon) center left no-repeat; } i { @@ -143,7 +157,7 @@ td, th { #generating_info { font-size: 10px; - color: #aaa; + color: var(--fg); text-align: center; } @@ -161,11 +175,10 @@ td, th { padding: 0 27px; margin-bottom: 20px; font-size: 20px; - font-family: 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%); + font-family: 'Montserrat', Helvetica, Arial, Freesans, Clean, sans-serif; + background: var(--bluish-grey); /* old browsers */ + background: -webkit-linear-gradient(bottom left, var(--accent) 0%, var(--bluish-grey) 100%); /* webkit */ + background: linear-gradient(to top right, var(--accent) 0%, var(--bluish-grey) 100%); border-bottom: 1px solid rgba(var(--border)); } @@ -192,64 +205,98 @@ 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(--bluish-grey); /* old browsers */ + background: -webkit-linear-gradient(bottom left, var(--bluish-grey) 0%, var(--accent) 100%); /* webkit */ + background: linear-gradient(to top right, var(--bluish-grey) 0%, var(--accent) 100%); + 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; } -.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 ---------------------------------------------------------------------------- */ @@ -332,7 +379,7 @@ th .header { .projsearch { position: absolute; right: 4%; - top: 15px; + top: 40px; } .projsearch a { @@ -340,7 +387,7 @@ th .header { } .commit_search { - background: #eaeaea; + background: var(--fg); } .page_nav, @@ -422,13 +469,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 { @@ -537,8 +584,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; @@ -549,8 +596,8 @@ 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; @@ -679,14 +726,13 @@ div.chunk_block div.new { ---------------------------------------------------------------------------- */ td.category { - background: #E6F1F6; /* old browsers */ - background: -moz-linear-gradient(top, #C8D8E7 0%, #E6F1F3 100%); /* firefox */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C8D8E7), color-stop(100%,#E6F1F3)); /* webkit */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C8D8E7', endColorstr='#E6F1F3',GradientType=0 ); /* ie */ - background: -o-linear-gradient(top, #C8D8E7 0%, #E6F1F3 100%); + background: var(--bg); /* old browsers */ + 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%); font-weight: bold; - border-bottom: 1px solid #D1D1D1; - border-top: 1px solid #D1D1D1; + border-bottom: 1px solid var(--border); + border-top: 1px solid var(--border); } /* Age @@ -819,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);