sungmg/bthree-dark-theme
1
0
Fork 0
Code Activity

Cleanup: CSS and global styling

Browse source 
In the latest releases, Gitea has fixed a lot of the styling issues we
had manually fixed in the past.

Additionally, the recent style adjustments they did look a lot better
so it is better to remove our custom styling as much as possible, and
follow stock Gitea. Making it easier to upgrade in the future.

* Fix broken styling
* Remove custom font
* Cleanup unused variables
* Add code comments
This commit is contained in:
Pablo Vazquez 2024-05-30 12:18:04 +02:00
commit 829c083fbc
3 changed files with 28 additions and 312 deletions
Download patch file Download diff file Expand all files Collapse all files

184
templates/custom/header.tmpl
View file

@ -1,33 +1,9 @@
<style>
/* bthree dark theme */
@font-face {
font-family: "Heebo";
src: url("/assets/fonts/Heebo-VariableFont_wght.ttf") format("truetype-variations");
font-weight: normal;
font-variation-settings: "wght" var(--font-weight);
font-style: normal
}
:root {
/* Spacing. */
--spacer: 1rem;
--spacer-1: .25rem;
--spacer-2: .5rem;
--spacer-3: var(--spacer);
--spacer-4: 1.5rem;
--spacer-5: 3rem;
/* Override fonts. */
--fonts-override: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-weight-thin: 300;
--font-weight-bold: 600;
--border-radius: .33rem;
--color-border: var(--color-secondary);
/* Transitions. */
--transition-speed: 150ms;
--color-timeline: var(--color-secondary);
}
/* Light-theme specific. */
@ -35,80 +11,33 @@
--color-primary: hsl(204deg, 90%, 52%);
}
/* Set weight variations. */
strong, b, h1, h2, h3, h4, h5, h6, .bold,
a.issue-title,
.ui.tabular.menu .active.item {
font-weight: normal !important;
font-variation-settings: "wght" var(--font-weight-bold);
}
/* Bold is excessive on issue title when shown without details. */
.issue-card-title {
font-variation-settings: normal !important;
font-size: 16px;
}
.repository.view.issue .title .issue-title h1 {
font-variation-settings: "wght" var(--font-weight-thin);
}
@media (min-width: 1200px) {
/* Limit navbar width on large screens. */
.dashboard-navbar {
margin-left: auto;
margin-right: auto;
max-width: 1170px;
}
}
/* Revert the red color in dashboard eader buttons. */
/* Revert the red color in dashboard header buttons. */
.dashboard.feeds .right.stackable.menu>.item.active,
.dashboard.issues .right.stackable.menu>.item.active {
color: unset;
}
/* Global tweaks (all themes) */
.ui.avatar {
/* Buttons. */
.ui.button,
a.ui.label {
transition: background-color var(--transition-speed), color var(--transition-speed);
}
/* Avatars. */
img.ui.avatar {
border-radius: 50%;
}
.ui.user.list .ui.avatar,
.ui.user.list .ui.avatar+.content {
display: inline-block;
}
/* Fix alignment and margin issues in avatars. */
.user.list img.avatar,
.comment-list .code-comment img.avatar,
.comment-list .comment img.avatar {
vertical-align: unset !important;
}
.user.list img.avatar,
.commit-list img.avatar,
.comment-list .code-comment img.avatar,
.comment-list .comment img.avatar,
.comment-list .timeline-item img.avatar {
margin-right: var(--spacer-2) !important;
}
.commit-list .author img.avatar {
margin-right: var(--spacer-3) !important;
}
/* Labels. e.g. issues count indicator in repo tabs. */
.ui.small.label {
border-radius: 2em;
}
/* Hide the app logo (first link in "brand" div). */
.following.bar #navbar .brand > a:first-child {
display: none;
}
.following.bar #navbar .brand #navbar-expand-toggle {
margin-left: var(--spacer-4);
/* Homepage. */
/* By default Gitea colors links green */
.home a {
color: var(--color-primary);
}
/* Hide brand navbar completely when not in mobile. */
@ -123,56 +52,7 @@
display: none;
}
/* Notifications indicator. */
.notification_count {
border-radius: 0.6em;
font-size: 12px;
font-weight: normal !important;
font-variation-settings: "wght" var(--font-weight-bold);
line-height: unset;
margin-left: var(--spacer-1);
padding: 2px 4px;
}
/* Navigation tabs.
* e.g. Code, Issues pages in a repository. */
.ui.tabular.menu .item {
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
transition: border-bottom-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
}
.ui.tabular.menu .item:hover {
border-bottom-color: var(--color-text-dark);
}
.ui.tabular.menu .active.item {
background: transparent;
border: none;
border-bottom: 3px solid currentColor;
margin-bottom: unset;
}
.ui.tabular.menu .active.item:hover {
background: transparent;
border-color: var(--color-text-dark);
color: var(--color-text-dark);
}
/* Repository page. */
.repository .repo-title .repo-icon svg {
max-width: 22px;
}
.ui.table {
background: transparent;
}
.repository .ui.table a {
color: var(--color-text);
}
.repository .file-view.markdown a {
color: var(--color-primary);
}
@ -186,10 +66,6 @@
color: currentColor;
}
.ui.repo-topic.label {
border-radius: 2em;
}
/* Repository stats. */
.repository-summary-language-stats {
height: unset;
@ -201,18 +77,7 @@
/* Repository: Activity page. */
.stats-table {
border-radius: 2em;
margin-bottom: var(--spacer);
overflow: hidden;
}
.issue.list {
border-radius: var(--border-radius);
border: thin solid var(--color-border);
}
.issue.list > .item {
padding: var(--spacer-2) var(--spacer) !important;
}
/* Hide branches from PR list. */
@ -220,25 +85,6 @@
display: none !important;
}
.issue.list a.project,
.issue.list a.milestone {
margin-inline: var(--spacer-2) !important;
}
.issue.list a.project svg {
margin-right: var(--spacer-2) !important;
position: relative;
top: 2px;
}
/* Labels (badges) */
/* Hardcoded label color to make it look like a module,
* so it can be used in other contexts (e.g. static homepage content). */
.ui.label.is-module {
background-color: #514b3c !important;
color: #eee !important;
}
/* Footer. */
footer {
color: var(--color-footer-text);