mirror of
https://projects.blender.org/infrastructure/gitea-custom.git
synced 2024-12-22 07:13:09 -05:00
Cleanup: CSS and global styling
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
parent
949885ab5e
commit
829c083fbc
3 changed files with 28 additions and 312 deletions
|
|
@ -2,16 +2,14 @@
|
|||
:root {
|
||||
--is-dark-theme: true;
|
||||
|
||||
/* Borders. */
|
||||
--border-radius: .33rem;
|
||||
--border-radius-outer: .28571429rem;
|
||||
|
||||
/* Colors. */
|
||||
/* Some colors must be set as HEX, due to the monaco-editor no supporting
|
||||
* conversion of non-hex colors. https: //github.com/microsoft/monaco-editor/issues/1815 */
|
||||
color-scheme: dark;
|
||||
--color-primary: hsl(204deg, 90%, 56%);
|
||||
--color-primary-bg: hsla(204deg, 100%, 36%, .2);
|
||||
--color-primary: hsl(204deg, 90%, 60%);
|
||||
--color-primary-hover: hsl(204deg, 90%, 50%);
|
||||
--color-primary-bg: hsla(204deg, 100%, 36%, .6);
|
||||
--color-primary-text: hsl(204deg, 90%, 72%);
|
||||
|
||||
--color-primary-contrast: hsl(0, 0%, 100%);
|
||||
--color-primary-dark-1: #14a1ff;
|
||||
|
|
@ -164,8 +162,6 @@
|
|||
--color-code-line-bg-hover: hsl(213, 16%, 16%);
|
||||
--color-code-sidebar-bg: hsl(213, 15%, 21%);
|
||||
|
||||
--color-timeline: hsl(220, 10%, 33%);
|
||||
|
||||
--color-tooltip-text: #fbfdff;
|
||||
--color-tooltip-bg: #000017f0;
|
||||
|
||||
|
|
@ -177,15 +173,6 @@
|
|||
--color-navbar-transparent: hsla(213, 10%, 14%, 0);
|
||||
--color-header-bar: hsl(213, 10%, 18%);
|
||||
|
||||
/* Buttons. */
|
||||
--color-button: hsl(213, 14%, 24%);
|
||||
--color-expand-button: hsl(213.9, 12.4%, 26.9%);
|
||||
|
||||
--color-button-basic-border: hsl(213, 14%, 30%);
|
||||
--color-button-basic-bg: hsl(213, 14%, 22%);
|
||||
--color-button-basic-bg: var(--color-light);
|
||||
--color-button-basic-text: var(--color-text);
|
||||
|
||||
/* Inputs. */
|
||||
--color-input-text: #d6dbe6;
|
||||
--color-input-background: #17191c;
|
||||
|
|
@ -201,7 +188,7 @@
|
|||
--color-border: var(--color-secondary-alpha-40);
|
||||
|
||||
--color-reaction-bg: hsla(0, 0%, 100%, 0.1);
|
||||
--color-reaction-active-bg: var(--color-primary-alpha-40);
|
||||
--color-reaction-active-bg: var(--color-primary-alpha-30);
|
||||
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-active-line: hsl(53.6, 50.9%, 22%);
|
||||
|
|
@ -220,142 +207,25 @@
|
|||
/* Custom styling of individual elements.
|
||||
* Using !important is bad, but unfortunately gitea does it already in _base.less. */
|
||||
|
||||
/* Buttons. */
|
||||
.ui.basic.button {
|
||||
color: var(--color-button-basic-text);
|
||||
background: var(--color-button-basic-bg);
|
||||
border-color: var(--color-button-basic-border);
|
||||
}
|
||||
|
||||
/* Primary button. */
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button {
|
||||
background-color: var(--color-primary-bg) !important;
|
||||
border-color: var(--color-primary-bg) !important;
|
||||
color: var(--color-primary) !important;
|
||||
color: var(--color-primary-text) !important;
|
||||
}
|
||||
|
||||
a.ui.primary.label:hover,
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover {
|
||||
background-color: var(--color-primary) !important;
|
||||
background-color: var(--color-primary-hover) !important;
|
||||
color: var(--color-primary-contrast) !important;
|
||||
}
|
||||
|
||||
/* Small buttons
|
||||
* e.g. HTTP/SSH clone buttons in repo homepage. */
|
||||
.ui.basic.primary.button,
|
||||
.ui.basic.primary.buttons .button {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.menu,
|
||||
.ui.vertical.menu {
|
||||
border-color: var(--color-secondary-alpha-30) !important;
|
||||
}
|
||||
|
||||
/* Vertical menu.
|
||||
* Used in: /issues */
|
||||
.ui.vertical.menu {
|
||||
padding: var(--spacer-1);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* Vertical menu: active item.
|
||||
* Gitea adds a "primary" class to what would be the active item. */
|
||||
.ui.vertical.menu > .item.primary {
|
||||
background-color: var(--color-active) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Dropdown menus.
|
||||
* e.g. user menu. */
|
||||
.ui.dropdown .menu {
|
||||
border-radius: var(--border-radius) !important;
|
||||
box-shadow: var(--box-shadow-dropdown-menu) !important;
|
||||
}
|
||||
|
||||
/* Replace gitea's hardcoded border-radius with variables. */
|
||||
.ui.compact.menu {
|
||||
border-radius: var(--border-radius-outer);
|
||||
}
|
||||
|
||||
.ui.compact.menu>.item:first-child {
|
||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.compact.menu>.item:last-child {
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
}
|
||||
|
||||
.ui.menu.new-menu {
|
||||
border-color: var(--color-secondary-alpha-50) !important;
|
||||
}
|
||||
|
||||
/* Top navigation bar.
|
||||
* e.g. Issues, Pull Requests, etc. */
|
||||
.ui.menu.bar {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.ui.menu .item>.label {
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.ui.tabular.menu {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.ui.breadcrumb a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Cards. */
|
||||
.ui.cards>.card .meta,
|
||||
.ui.card .meta {
|
||||
color: var(--color-text-dark-2);
|
||||
}
|
||||
|
||||
.ui.card.card-with-icon .icon svg {
|
||||
margin: 0 var(--spacer) 0 0;
|
||||
width: 50px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
/* Users/Organizations list. */
|
||||
/* Fix alignment issue since */
|
||||
.ui.user.list img.avatar,
|
||||
.ui.user.list img.avatar+.content {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.user.list img.avatar {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
vertical-align: initial !important;
|
||||
}
|
||||
|
||||
.ui.user.list .content {
|
||||
margin-left: var(--spacer-2);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui.user.list .content .description .svg {
|
||||
margin-right: var(--spacer-1);
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.issue.list>.item+.item {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
/* Divider. */
|
||||
.ui.divider:not(.vertical, .horizontal) {
|
||||
border-top-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
/* Homepage. */
|
||||
.home a {
|
||||
color: var(--color-accent);
|
||||
.ui.primary.label {
|
||||
background-color: var(--color-primary-bg) !important;
|
||||
border-color: var(--color-primary-bg) !important;
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
/* (from arc-green)
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue