diff options
Diffstat (limited to '')
| -rw-r--r-- | forged/static/style.css (renamed from static/style.css) | 317 |
1 files changed, 262 insertions, 55 deletions
diff --git a/static/style.css b/forged/static/style.css index e5398ce..51846a2 100644 --- a/static/style.css +++ b/forged/static/style.css @@ -1,15 +1,23 @@ /* * SPDX-License-Identifier: AGPL-3.0-only - * SPDX-FileContributor: Runxi Yu <https://runxiyu.org> - * SPDX-FileContributor: luk3yx <https://luk3yx.github.io> + * SPDX-FileCopyrightText: Copyright (c) 2025 Runxi Yu <https://runxiyu.org> + * SPDX-FileCopyrightText: Copyright (c) 2025 luk3yx <https://luk3yx.github.io> + * SPDX-FileCopyrightText: Copyright (c) 2017-2025 Drew DeVault <https://drewdevault.com> + * + * Drew did not directly contribute here but we took significant portions of + * SourceHut's CSS. */ +* { + box-sizing: border-box; +} + /* Base styles and variables */ html { font-family: sans-serif; background-color: var(--background-color); color: var(--text-color); - --radius-1: 0.32rem; + font-size: 1rem; --background-color: hsl(0, 0%, 100%); --text-color: hsl(0, 0%, 0%); --link-color: hsl(320, 50%, 36%); @@ -76,48 +84,12 @@ html, code, pre { display: table-row-group; } -table.rounded, table.rounded-footed { - overflow: hidden; - border-spacing: 0; - border-collapse: separate; - border-radius: var(--radius-1); - border: var(--lighter-border-color) solid 1px; -} - -table.rounded th, table.rounded td, -table.rounded-footed th, table.rounded-footed td { - border: none; -} - -table.rounded th:not(:last-child), -table.rounded td:not(:last-child), -table.rounded-footed th:not(:last-child), -table.rounded-footed td:not(:last-child) { - border-right: var(--lighter-border-color) solid 1px; -} - -table.rounded>thead>tr>th, -table.rounded>thead>tr>td, -table.rounded>tbody>tr:not(:last-child)>th, -table.rounded>tbody>tr:not(:last-child)>td { - border-bottom: var(--lighter-border-color) solid 1px; -} - -table.rounded-footed>thead>tr>th, -table.rounded-footed>thead>tr>td, -table.rounded-footed>tbody>tr>th, -table.rounded-footed>tbody>tr>td, -table.rounded-footed>tfoot>tr:not(:last-child)>th, -table.rounded-footed>tfoot>tr:not(:last-child)>td { - border-bottom: var(--lighter-border-color) solid 1px; -} - - /* Footer styles */ footer { margin-top: 1rem; margin-left: auto; margin-right: auto; + margin-bottom: 1rem; display: block; padding: 0 5px; width: fit-content; @@ -128,14 +100,8 @@ footer a:link, footer a:visited { color: inherit; } -/* Padding containers */ -.padding-wrapper { - margin: 1rem auto; - max-width: 60rem; - padding: 0 5px; -} .padding { - padding: 0 5px; + padding: 0 1rem; } /* Link styles */ @@ -303,7 +269,6 @@ textarea, input[type=text], input[type=password] { font-family: sans-serif; - font-size: smaller; background-color: var(--lighter-box-background-color); color: var(--text-color); border: none; @@ -372,9 +337,7 @@ input[type=file]::file-selector-button { display: inline-block; width: auto; min-width: fit-content; - border-radius: var(--radius-1); padding: .1rem .75rem; - font-size: 0.9rem; transition: background .1s linear; cursor: pointer; } @@ -384,18 +347,50 @@ a.btn, a.btn-white, a.btn-danger, a.btn-normal, a.btn-primary { /* Header layout */ header#main-header { - background-color: var(--lighter-box-background-color); + /* background-color: var(--lighter-box-background-color); */ display: flex; + flex-direction: row; + align-items: center; justify-content: space-between; + flex-wrap: wrap; + padding-top: 1rem; + padding-bottom: 1rem; + gap: 0.5rem; +} +#main-header a, #main-header a:link, main-header a:visited { + text-decoration: none; + color: inherit; +} +#main-header-forge-title { + white-space: nowrap; +} +#breadcrumb-nav { + display: flex; align-items: center; - padding: 10px; + flex: 1 1 auto; + min-width: 0; + overflow-x: auto; + gap: 0.25rem; + white-space: nowrap; } -header#main-header > div#main-header-forge-title { - flex-grow: 1; +.breadcrumb-separator { + margin: 0 0.25rem; } -header#main-header > div#main-header-user { +#main-header-user { display: flex; align-items: center; + white-space: nowrap; +} +@media (max-width: 37.5rem) { + header#main-header { + flex-direction: column; + align-items: flex-start; + } + + #breadcrumb-nav { + width: 100%; + overflow-x: auto; + } } /* Uncategorized */ @@ -408,3 +403,215 @@ td > ul { margin-top: 0; margin-bottom: 0; } + + + +.complete-error-page hr { + border: 0; + border-bottom: 1px dashed; +} + + + + + + +.key-val-grid { + display: grid; + grid-template-columns: auto 1fr; + gap: 0; + border: var(--lighter-border-color) 1px solid; + overflow: auto; +} + +.key-val-grid > .title-row { + grid-column: 1 / -1; + background-color: var(--lighter-box-background-color); + font-weight: bold; + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; +} + +.key-val-grid > .row-label { + background-color: var(--lighter-box-background-color); + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; + border-right: var(--lighter-border-color) 1px solid; + text-align: left; + font-weight: normal; +} + +.key-val-grid > .row-value { + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; + word-break: break-word; +} + +.key-val-grid code { + font-family: monospace; +} + +.key-val-grid ul { + margin: 0; + padding-left: 1.5rem; +} + +.key-val-grid > .row-label:nth-last-of-type(2), +.key-val-grid > .row-value:last-of-type { + border-bottom: none; +} + +@media (max-width: 37.5rem) { + .key-val-grid { + grid-template-columns: 1fr; + } + + .key-val-grid > .row-label { + border-right: none; + } +} +.key-val-grid > .title-row { + grid-column: 1 / -1; + background-color: var(--lighter-box-background-color); + font-weight: bold; + padding: 3px 5px; + border-bottom: var(--lighter-border-color) 1px solid; + margin: 0; + text-align: center; +} + +.key-val-grid-wrapper { + max-width: 100%; + width: fit-content; +} + +/* Tab navigation */ + +.nav-tabs-standalone { + border: none; + list-style: none; + margin: 0; + flex-grow: 1; + display: inline-flex; + flex-wrap: nowrap; + padding: 0; + border-bottom: 0.25rem var(--darker-box-background-color) solid; + width: 100%; + max-width: 100%; + min-width: 100%; +} + +.nav-tabs-standalone > li { + align-self: flex-end; +} +.nav-tabs-standalone > li > a { + padding: 0 0.75rem; +} + +.nav-item a.active { + background-color: var(--darker-box-background-color); +} + +.nav-item a, .nav-item a:link, .nav-item a:visited { + text-decoration: none; + color: inherit; +} + +.repo-header-extension { + margin-bottom: 1rem; + background-color: var(--darker-box-background-color); +} + +.repo-header > h2 { + display: inline; + margin: 0; + padding-right: 1rem; +} + +.repo-header > .nav-tabs-standalone { + border: none; + margin: 0; + flex-grow: 1; + display: inline-flex; + flex-wrap: nowrap; + padding: 0; +} + +.repo-header { + display: flex; + flex-wrap: nowrap; +} + +.repo-header-extension-content { + padding-top: 0.3rem; + padding-bottom: 0.2rem; +} + +.repo-header, .padding-wrapper, .repo-header-extension-content, #main-header, .readingwidth, .commit-list-small { + padding-left: 1rem; + padding-right: 1rem; + max-width: 60rem; + width: 100%; + margin-left: auto; + margin-right: auto; +} + +.padding-wrapper { + margin-bottom: 1rem; +} + +/* TODO */ + +.commit-list-small .event { + background-color: var(--lighter-box-background-color); + padding: 0.5rem; + margin-bottom: 1rem; + max-width: 30rem; +} + +.commit-list-small .event:last-child { + margin-bottom: 1rem; +} + +.commit-list-small a { + color: var(--link-color); + text-decoration: none; + font-weight: 500; +} + +.commit-list-small a:hover { + text-decoration: underline; + text-decoration-color: var(--text-decoration-color); +} + +.commit-list-small .event > div { + font-size: 0.95rem; +} + +.commit-list-small .pull-right { + float: right; + font-size: 0.85em; + margin-left: 1rem; +} + +.commit-list-small pre.commit { + margin: 0.25rem 0 0 0; + padding: 0; + font-family: inherit; + font-size: 0.95rem; + color: var(--text-color); + white-space: pre-wrap; +} + +.commit-list-small .commit-error { + color: var(--danger-color); + font-weight: bold; + margin-top: 1rem; +} + + +.breakable { + word-break: break-word; + /* overflow-wrap: break-word; + overflow: hidden; */ +} |