diff options
| -rw-r--r-- | scss/main.scss | 22 | ||||
| -rw-r--r-- | scss/tree.scss | 399 | ||||
| -rw-r--r-- | templates/base.qtpl | 6 | ||||
| -rw-r--r-- | templates/base.qtpl.go | 44 |
4 files changed, 449 insertions, 22 deletions
diff --git a/scss/main.scss b/scss/main.scss index e0fecf1..a98c0a2 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -12,7 +12,7 @@ $btn-border-radius: 0; // basic functionality @import "bootstrap/scss/_functions.scss"; @import "bootstrap/scss/_variables.scss"; -@import "bootstrap/scss/_variables-dark.scss"; +//@import "bootstrap/scss/_variables-dark.scss"; @import "bootstrap/scss/_maps.scss"; @import "bootstrap/scss/_mixins.scss"; @import "bootstrap/scss/_utilities.scss"; @@ -27,6 +27,7 @@ $navbar-nav-link-padding-x: $spacer; @import "bootstrap/scss/_grid.scss"; @import "bootstrap/scss/_forms.scss"; @import "bootstrap/scss/_buttons.scss"; +@import "bootstrap/scss/mixins/_color-mode.scss"; @import "tree.scss"; // overwrite to reduce the ammount of css generated by loading all utilities @@ -80,6 +81,12 @@ body { margin: 0; } +@include color-mode(dark) { + body { + background: #212529; + } +} + // prevert wierd input overflowing 100% input { width: 100%; @@ -116,6 +123,12 @@ a[href]:not([href=""]):not(.nav-link) { background: #f8f9fa; } +@include color-mode(dark) { + .event { + background: #131618; + } +} + .event-commit { background: #dadada; padding: 5px; @@ -136,6 +149,13 @@ a[href]:not([href=""]):not(.nav-link) { } +@include color-mode(dark) { + .event-commit { + background: #000; + } +} + + .selected { text-decoration: underline; } diff --git a/scss/tree.scss b/scss/tree.scss index 05828dc..58258bd 100644 --- a/scss/tree.scss +++ b/scss/tree.scss @@ -53,6 +53,20 @@ color: $gray-700; } + @media(prefers-color-scheme: dark) { + .name.blob a { + color: inherit; + } + + .mode, + .commit, + .commit a, + .date, + .size { + color: inherit; + } + } + .name.blob { text-overflow: ellipsis; white-space: nowrap; @@ -85,7 +99,392 @@ // Striped rows &:nth-child(10n+#{$i}) { background: rgba(0, 0, 0, .05); + + @media(prefers-color-scheme: dark) { + background: lighten($gray-900, 5); + } + } + } + } +} + +.code-view { + display: grid; + grid-template-columns: auto auto auto 1fr; + grid-template-rows: auto; + + .blame-user { + grid-column-start: 1; + grid-row-start: 1; + background: #ddd; + + @media(prefers-color-scheme: dark) { + background: $gray-900; + } + + .hunk { + padding-left: 0.5rem; + } + } + + .blame-time { + grid-column-start: 2; + grid-row-start: 1; + background: #ddd; + border-right: 1px solid #444; + text-align: right; + + @media(prefers-color-scheme: dark) { + background: $gray-900; + } + + .hunk { + padding-right: 0.5rem; + } + } + + .hunk:nth-child(2n) { + background: #eee; + + @media(prefers-color-scheme: dark) { + background: lighten($gray-900, 5); + } + } + + .lines { + grid-column-start: 3; + grid-row-start: 1; + text-align: right; + padding-left: 0.5rem; + padding-right: 0.5rem; + + background: #eee; + border-right: 1px solid #444; + + @media(prefers-color-scheme: dark) { + background: lighten($gray-900, 5); + } + + a:target::before, + a.selected::before { + display: block; + content: ""; + // +6px to connect multiple selected lines + height: calc(1rem + 6px); + width: 100%; + z-index: -1; + position: absolute; + left: 0; + background: lighten($blue, 35); + + @media(prefers-color-scheme: dark) { + background: $black; + } + } + } + + .highlight { + grid-column-start: 4; + grid-row-start: 1; + padding-left: 1rem; + background: transparent; + overflow-x: hidden; + + pre { + background: transparent; + } + } + + .ruler { + background: transparent; + grid-column-start: 4; + grid-row-start: 1; + display: block; + padding-left: calc(1rem + 4px); + height: 100%; + pointer-events: none; + overflow-x: hidden; + + pre { + background: transparent; + } + + &>span { + height: 100%; + display: inline-block; + border-right: 1px solid $gray-200; + + @media(prefers-color-scheme: dark) { + border-right: 1px solid #343a40; } } } } + +.ref { + border-width: 1px; + border-style: solid; + padding: 0.1rem 0.2rem; + + &.branch { + border-color: darken($info, 20); + background: $info; + color: $white !important; + } + + &.tag { + border-color: darken($primary, 20); + background: $primary; + color: $white; + } + + &.tag.annotated { + border-color: darken($success, 20); + background: $success; + color: $white; + } +} + +.diff { + .lineno { + text-decoration: none; + } + + .text-success { + color: color_adjust_contrast_AERT(darken($success, 10), white) !important; + } + + .text-danger { + color: color_adjust_contrast_AERT(darken($danger, 10), white) !important; + } + + pre { + background: transparent; + } + + @media(prefers-color-scheme: dark) { + $success-dark: #2bb34b; + $danger-dark: #ff3e3e; + + .text-success { + color: $success-dark !important; + } + + .text-danger { + color: $danger-dark !important; + } + } +} + +img { + max-width: 100%; +} + +.prepare-patchset { + legend { + font-weight: bold; + } + + label { + margin-right: 1rem; + cursor: pointer; + } + + details { + display: inline; + color: $gray-600; + + &[open] { + display: block; + color: $black; + + summary { + color: $black; + } + } + + ul { + list-style: none; + padding-left: 0; + } + + li { + margin-top: 1rem; + } + + @media(prefers-color-scheme: dark) { + color: $gray-500; + + &[open] { + color: $gray-100; + + summary { + color: $gray-100; + } + } + } + } + + .event-list { + display: flex; + flex-direction: column; + + &.reverse { + flex-direction: column-reverse; + } + + input[type="radio"] { + display: none; + } + + &>.commit-diff { + margin-top: 1rem; + order: -2; + } + + &>.form-controls { + order: -1; + margin-top: 1rem; + align-self: flex-end; + + &.last { + order: -3; + } + } + + &>details { + order: 0; + } + + &>.event { + order: 1; + display: block; + margin: 0.25rem 0; + + // Because the order is reversed + &:last-child { + margin: 0.25rem 0; + } + + &:first-child { + margin: 0; + } + } + + input[type="radio"]:checked~.event { + background: lighten($info, 50) !important; + } + + input[type="radio"]:checked+.event { + background: lighten($info, 45) !important; + } + + @media(prefers-color-scheme: dark) { + input[type="radio"]:checked~.event { + background: #131a3c !important; + } + + input[type="radio"]:checked+.event { + background: #003038 !important; + } + } + } +} + +.markdown-nav { + padding-left: 0; + padding-right: 0; + + .nav-tabs { + padding-left: 0; + margin-bottom: 0; + border-left: 1rem #ddd solid; + } +} + +.blob-nav { + display: inline-block; + padding-left: 0; + padding-right: 0; + + .nav-item:hover { + background: #fff; + } + + @media(prefers-color-scheme: dark) { + .nav-item:hover { + background: inherit; + } + } + + .nav-tabs { + padding-left: 0; + margin-bottom: -3px; + border-bottom: 3px transparent solid; + + .nav-link { + padding: 0 0.5rem; + + &:hover { + color: black; + } + + &.active { + border-bottom: 3px #fff solid; + background: #fff; + } + + @media(prefers-color-scheme: dark) { + color: $gray-400; + + &.active, + &:hover { + border-bottom: 3px $gray-900 solid; + background: $gray-900; + color: $white; + } + } + } + } +} + +.tree-header { + display: flex; + + .breadcrumb { + flex-grow: 1; + width: 100%; + } + + .commit-info { + margin-left: 1rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + min-width: 0; + } +} + +dl { + dd { + text-overflow: ellipsis; + overflow-x: hidden; + } +} + +@include media-breakpoint-up(md) { + .blob { + padding-left: 2rem; + + .commit { + float: right; + } + } +} + +.code-viewport { + display: flex; + flex: 1 0 auto; + padding-left: 0; + padding-right: 0; +} diff --git a/templates/base.qtpl b/templates/base.qtpl index db9deee..b3df94a 100644 --- a/templates/base.qtpl +++ b/templates/base.qtpl @@ -54,12 +54,13 @@ Page { Page prints a page implementing Page interface. {% func PageTemplate(p Page, ctx context.Context) %} <!DOCTYPE html> -<html lang="en"> +<html lang="en" data-bs-theme="light"> <head> <meta charset="utf-8"> <link rel="icon" href="data:,"> <title>{%= p.Title(ctx) %}</title> <link rel="stylesheet" href="/static/main{%s Slug %}.css"> + <html data-bs-theme="dark"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> @@ -70,5 +71,8 @@ Page prints a page implementing Page interface. </div> </body> {%= p.Script(ctx) %} + <script> + function a(){const e=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.setAttribute("data-bs-theme",e?"dark":"light")}a(),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",a); + </script> </html> {% endfunc %} diff --git a/templates/base.qtpl.go b/templates/base.qtpl.go index 796538e..dce4cbc 100644 --- a/templates/base.qtpl.go +++ b/templates/base.qtpl.go @@ -98,7 +98,7 @@ func StreamPageTemplate(qw422016 *qt422016.Writer, p Page, ctx context.Context) //line templates/base.qtpl:55 qw422016.N().S(` <!DOCTYPE html> -<html lang="en"> +<html lang="en" data-bs-theme="light"> <head> <meta charset="utf-8"> <link rel="icon" href="data:,"> @@ -112,55 +112,59 @@ func StreamPageTemplate(qw422016 *qt422016.Writer, p Page, ctx context.Context) qw422016.E().S(Slug) //line templates/base.qtpl:62 qw422016.N().S(`.css"> + <html data-bs-theme="dark"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> `) -//line templates/base.qtpl:67 +//line templates/base.qtpl:68 p.StreamNavbar(qw422016, ctx) -//line templates/base.qtpl:67 +//line templates/base.qtpl:68 qw422016.N().S(` <div class="container"> `) -//line templates/base.qtpl:69 +//line templates/base.qtpl:70 p.StreamContent(qw422016, ctx) -//line templates/base.qtpl:69 +//line templates/base.qtpl:70 qw422016.N().S(` </div> </body> `) -//line templates/base.qtpl:72 +//line templates/base.qtpl:73 p.StreamScript(qw422016, ctx) -//line templates/base.qtpl:72 +//line templates/base.qtpl:73 qw422016.N().S(` + <script> + function a(){const e=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.setAttribute("data-bs-theme",e?"dark":"light")}a(),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",a); + </script> </html> `) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 } -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 func WritePageTemplate(qq422016 qtio422016.Writer, p Page, ctx context.Context) { -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 qw422016 := qt422016.AcquireWriter(qq422016) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 StreamPageTemplate(qw422016, p, ctx) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 qt422016.ReleaseWriter(qw422016) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 } -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 func PageTemplate(p Page, ctx context.Context) string { -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 qb422016 := qt422016.AcquireByteBuffer() -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 WritePageTemplate(qb422016, p, ctx) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 qs422016 := string(qb422016.B) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 qt422016.ReleaseByteBuffer(qb422016) -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 return qs422016 -//line templates/base.qtpl:74 +//line templates/base.qtpl:78 } |