aboutsummaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
m---------scss/bootstrap0
-rw-r--r--scss/main.scss226
-rw-r--r--scss/tree.scss517
3 files changed, 626 insertions, 117 deletions
diff --git a/scss/bootstrap b/scss/bootstrap
-Subproject 6e1f75f420f68e1d52733b8e407fc7c3766c9db
+Subproject 25aa8cc0b32f0d1a54be575347e6d84b70b1acd
diff --git a/scss/main.scss b/scss/main.scss
index 0766f82..a98c0a2 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -5,10 +5,14 @@ $base-font-size: 1rem;
$font-family-monospace: monospace;
$headings-margin-bottom: 0;
+$input-border-radius: 0;
+
+$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";
@@ -21,73 +25,86 @@ $navbar-nav-link-padding-x: $spacer;
@import "bootstrap/scss/_nav.scss";
@import "bootstrap/scss/_navbar.scss";
@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";
-// TODO remove once is not needed
-$alert-border-radius: 0;
-@import "bootstrap/scss/_alert.scss";
-
// overwrite to reduce the ammount of css generated by loading all utilities
$utilities: (
- "order": (
- responsive: true,
- property: order,
- values: (
- first: -1,
- 0: 0,
- 1: 1,
- 2: 2,
- 3: 3,
- 4: 4,
- 5: 5,
- last: 6,
+ "order": (responsive: true,
+ property: order,
+ values: (first: -1,
+ 0: 0,
+ 1: 1,
+ 2: 2,
+ 3: 3,
+ 4: 4,
+ 5: 5,
+ last: 6,
+ ),
),
- ),
- "float": (
- responsive: true,
- property: float,
- values: (
- start: left,
- end: right,
- none: none,
- )
- ),
- "text-align": (
- responsive: true,
- property: text-align,
- class: text,
- values: (
- start: left,
- end: right,
- center: center,
- )
- ),
- "margin": (
- responsive: true,
- property: margin,
- class: m,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-end": (
- responsive: true,
- property: margin-right,
- class: me,
- values: map-merge($spacers, (auto: auto))
- ),
+ "float": (responsive: true,
+ property: float,
+ values: (start: left,
+ end: right,
+ none: none,
+ )),
+ "text-align": (responsive: true,
+ property: text-align,
+ class: text,
+ values: (start: left,
+ end: right,
+ center: center,
+ )),
+ "margin": (responsive: true,
+ property: margin,
+ class: m,
+ values: map-merge($spacers, (auto: auto))),
+ "margin-end": (responsive: true,
+ property: margin-right,
+ class: me,
+ values: map-merge($spacers, (auto: auto))),
+ "margin-start": (responsive: true,
+ property: margin-left,
+ class: ms,
+ values: map-merge($spacers, (auto: auto))),
);
@import "bootstrap/scss/utilities/_api.scss";
+// prevents wierd font resizing on overflow
body {
- // prevents wierd font resizing on overflow
-webkit-text-size-adjust: 100%;
font-family: $font-family-monospace;
font-size: $base-font-size;
margin: 0;
}
+@include color-mode(dark) {
+ body {
+ background: #212529;
+ }
+}
+
+// prevert wierd input overflowing 100%
+input {
+ width: 100%;
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+}
+
+a[href]:not([href=""]):not(.nav-link) {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
.navbar-nav {
- margin-top: 0px
+ margin-top: 0px
}
.event-list {
@@ -106,29 +123,63 @@ body {
background: #f8f9fa;
}
+@include color-mode(dark) {
+ .event {
+ background: #131618;
+ }
+}
+
+.event-commit {
+ background: #dadada;
+ padding: 5px;
+
+ a {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+}
+
+.event-commit a:nth-child(3) {
+ text-align: end;
+
+ @include media-breakpoint-down(xl) {
+ text-align: start;
+ }
+}
+
+
+@include color-mode(dark) {
+ .event-commit {
+ background: #000;
+ }
+}
+
+
.selected {
- text-decoration: underline;
+ text-decoration: underline;
}
-.event > h4 {
- margin: 0;
+.event>h4 {
+ margin: 0;
}
-.event > p {
- margin: 0.5rem 0;
+
+.event>p {
+ margin: 0.5rem 0;
}
.code-view {
display: grid;
overflow-x: auto;
- > pre {
- margin: 0;
+ >pre {
+ margin: 0;
}
}
-.pathing{
- margin-left: $spacer;
- display: inline-block
+.pathing {
+ margin-left: $spacer;
+ display: inline-block
}
pre {
@@ -137,21 +188,48 @@ pre {
}
#name {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- padding-left: $spacer;
- max-width: calc(100% - calc(2 * #{$spacer}));
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-left: $spacer;
+ max-width: calc(100% - calc(2 * #{$spacer}));
}
#about {
- padding: 0 $spacer $spacer $spacer;
- > p:first-child {
- margin-top: 0
- }
+ padding: 0 $spacer $spacer $spacer;
- @include media-breakpoint-down(md) {
- padding: $spacer;
- max-width: calc(100% - calc(2 * #{$spacer}));
- }
+ >p:first-child {
+ margin-top: 0
+ }
+
+ @include media-breakpoint-down(md) {
+ padding: $spacer;
+ max-width: calc(100% - calc(2 * #{$spacer}));
+ }
+}
+
+.ref {
+ padding: 2px;
+ margin: 2px;
+ color: white;
+ text-decoration: none;
+
+ &.branch {
+ background: #25a525;
+ }
+
+ &.tag {
+ background: #5874e2;
+
+ }
+}
+
+.more {
+ margin: -15px 4px 10px 0;
+ padding: 5px 0 5px 0;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
diff --git a/scss/tree.scss b/scss/tree.scss
index bbca162..58258bd 100644
--- a/scss/tree.scss
+++ b/scss/tree.scss
@@ -1,59 +1,490 @@
-// TODO: refer to sourcehut code AGPL
+// This code includes software originally developed by Drew DeVault.
+//
+// Copyright 2017 Drew DeVault <sir@cmpwn.com>
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are met:
+//
+// 1. Redistributions of source code must retain the above copyright notice, this
+// list of conditions and the following disclaimer.
+//
+// 2. Redistributions in binary form must reproduce the above copyright notice,
+// this list of conditions and the following disclaimer in the documentation
+// and/or other materials provided with the distribution.
+//
+// 3. Neither the name of the copyright holder nor the names of its contributors
+// may be used to endorse or promote products derived from this software without
+// specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+// ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+// WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+// DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+// FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+// DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+// SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+// CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+// OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
.tree-list {
- display: grid;
- // mode name
- grid-template-columns: auto 1fr fit-content(40em) auto auto;
- font-family: $font-family-monospace;
+ display: grid;
+ // mode name
+ grid-template-columns: auto 1fr fit-content(40em) auto auto;
+ font-family: $font-family-monospace;
+
+ svg {
+ color: #777;
+ }
+
+ .size {
+ text-align: right;
+ }
+
+ .name.blob a {
+ color: $gray-900;
+ }
+
+ .mode,
+ .commit,
+ .commit a,
+ .date,
+ .size {
+ 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;
+ overflow: hidden;
+ }
+
+ .commit {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ &>div {
+ padding: 0.1rem 0.5rem;
+ background: transparent;
+
+ &.id {
+ text-align: right;
+ }
+
+ &.comments {
+ text-align: center;
+ }
+
+ @for $i from 1 through 5 {
+ &:nth-child(5n+#{$i}) {
+ grid-column-start: $i;
+ }
+
+ // 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;
+ }
- svg {
- color: #777;
- }
+ &>.commit-diff {
+ margin-top: 1rem;
+ order: -2;
+ }
- .size {
- text-align: right;
- }
+ &>.form-controls {
+ order: -1;
+ margin-top: 1rem;
+ align-self: flex-end;
- .name.blob a {
- color: $gray-900;
- }
+ &.last {
+ order: -3;
+ }
+ }
- .mode, .commit, .commit a, .date, .size {
- color: $gray-700;
- }
+ &>details {
+ order: 0;
+ }
- .name.blob {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
+ &>.event {
+ order: 1;
+ display: block;
+ margin: 0.25rem 0;
- .commit {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
+ // Because the order is reversed
+ &:last-child {
+ margin: 0.25rem 0;
+ }
- & > div {
- padding: 0.1rem 0.5rem;
- background: transparent;
+ &:first-child {
+ margin: 0;
+ }
+ }
- &.id {
- text-align: right;
+ 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;
+ }
+ }
+ }
}
+}
- &.comments {
- text-align: center;
+.tree-header {
+ display: flex;
+
+ .breadcrumb {
+ flex-grow: 1;
+ width: 100%;
}
- @for $i from 1 through 5 {
- &:nth-child(5n+#{$i}) {
- grid-column-start: $i;
- }
+ .commit-info {
+ margin-left: 1rem;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ min-width: 0;
+ }
+}
- // Striped rows
- &:nth-child(10n+#{$i}) {
- background: rgba(0,0,0,.05);
- }
+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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-30 23:52:30 +0000