Theme: Move some styling to apply to all themes
Use the header.tmpl file to apply global styling (like removing the app logo).
This commit is contained in:
Pablo Vazquez
parent
de7e6ce2f1
commit
0c9d528c29
2 changed files with 167 additions and 179 deletions
|
|
@ -1,35 +1,11 @@
|
||||||
/* bthree dark theme */
|
/* bthree dark theme */
|
||||||
@font-face {
|
|
||||||
font-family: "Heebo";
|
|
||||||
src: url("../fonts/Heebo-VariableFont_wght.ttf") format("truetype-variations");
|
|
||||||
font-weight: normal;
|
|
||||||
font-variation-settings: "wght" var(--font-weight);
|
|
||||||
font-style: normal
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* 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;
|
|
||||||
|
|
||||||
--is-dark-theme: true;
|
--is-dark-theme: true;
|
||||||
|
|
||||||
/* Spacing. */
|
|
||||||
--spacer: 1rem;
|
|
||||||
--spacer-1: .25rem;
|
|
||||||
--spacer-2: .5rem;
|
|
||||||
--spacer-3: var(--spacer);
|
|
||||||
--spacer-4: 1.5rem;
|
|
||||||
--spacer-5: 3rem;
|
|
||||||
|
|
||||||
/* Borders. */
|
/* Borders. */
|
||||||
--border-radius: .33rem;
|
--border-radius: .33rem;
|
||||||
--border-radius-outer: .28571429rem;
|
--border-radius-outer: .28571429rem;
|
||||||
|
|
||||||
/* Transitions. */
|
|
||||||
--transition-speed: 150ms;
|
|
||||||
|
|
||||||
/* Colors. */
|
/* Colors. */
|
||||||
/* Some colors must be set as HEX, due to the monaco-editor no supporting
|
/* 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 */
|
* conversion of non-hex colors. https: //github.com/microsoft/monaco-editor/issues/1815 */
|
||||||
|
|
@ -179,7 +155,7 @@
|
||||||
--color-active: hsla(213, 18%, 90%, .1);
|
--color-active: hsla(213, 18%, 90%, .1);
|
||||||
|
|
||||||
--color-menu: hsl(213, 12%, 21%);
|
--color-menu: hsl(213, 12%, 21%);
|
||||||
--color-card: hsl(213, 12%, 21%);
|
--color-card: transparent;
|
||||||
|
|
||||||
--color-markup-table-row: hsla(0, 0%, 100%, 0);
|
--color-markup-table-row: hsla(0, 0%, 100%, 0);
|
||||||
--color-markup-code-block: hsla(0, 0%, 100%, 0.1);
|
--color-markup-code-block: hsla(0, 0%, 100%, 0.1);
|
||||||
|
|
@ -318,52 +294,12 @@ strong, b, h1, h2, h3, h4, h5, h6,
|
||||||
border-color: var(--color-secondary-alpha-50) !important;
|
border-color: var(--color-secondary-alpha-50) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 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-light-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: currentColor;
|
|
||||||
color: var(--color-primary-contrast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.tabular.menu {
|
|
||||||
border-color: var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Labels. e.g. issues count indicator in repo tabs. */
|
|
||||||
.ui.small.label {
|
|
||||||
border-radius: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top navigation bar.
|
/* Top navigation bar.
|
||||||
* e.g. Issues, Pull Requests, etc. */
|
* e.g. Issues, Pull Requests, etc. */
|
||||||
.ui.menu.bar {
|
.ui.menu.bar {
|
||||||
border-color: var(--color-border);
|
border-color: var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide Gitea's Help link in navbar. */
|
|
||||||
.ui.menu.bar a[href="https://docs.gitea.io"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.menu .item>.label {
|
.ui.menu .item>.label {
|
||||||
color: var(--color-label-text);
|
color: var(--color-label-text);
|
||||||
}
|
}
|
||||||
|
|
@ -372,27 +308,15 @@ strong, b, h1, h2, h3, h4, h5, h6,
|
||||||
min-height: 45px;
|
min-height: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide the first link (app logo). */
|
|
||||||
.following.bar #navbar .brand a:first-child {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.following.bar #navbar .brand #navbar-expand-toggle {
|
|
||||||
margin-left: var(--spacer-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide brand navbar completely when not in mobile. */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.following.bar #navbar .brand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Align items (notifications, dropdown toggle) to the right. */
|
/* Align items (notifications, dropdown toggle) to the right. */
|
||||||
.following.bar #navbar .brand {
|
.following.bar #navbar .brand {
|
||||||
justify-content: flex-end !important;
|
justify-content: flex-end !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.tabular.menu {
|
||||||
|
border-color: var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
/* Navbar logo. */
|
/* Navbar logo. */
|
||||||
.item.brand a {
|
.item.brand a {
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
|
|
@ -412,96 +336,12 @@ strong, b, h1, h2, h3, h4, h5, h6,
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Repository page. */
|
|
||||||
.repository .repo-title .repo-icon svg {
|
|
||||||
max-width: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository .ui.table a {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository .ui.tabs.divider {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Repository folder icon. */
|
|
||||||
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill {
|
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.repo-topic.label {
|
|
||||||
border-radius: 999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Repository stats. */
|
|
||||||
.repository-summary-language-stats {
|
|
||||||
height: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository .repository-summary .segment.language-stats {
|
|
||||||
height: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Repository: Activity page. */
|
|
||||||
.stats-table {
|
|
||||||
border-radius: 999em;
|
|
||||||
margin-bottom: var(--spacer);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.issue.list>.item+.item {
|
|
||||||
border-color: var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.repository .file-view.markdown a {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Divider. */
|
|
||||||
.ui.divider:not(.vertical, .horizontal) {
|
|
||||||
border-top-color: var(--color-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer. */
|
|
||||||
footer {
|
|
||||||
color: var(--color-footer-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
color: var(--color-footer-links);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cards. */
|
/* Cards. */
|
||||||
.ui.card {
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.card .content {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.card .content a {
|
|
||||||
color: var(--color-primary-contrast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.cards>.card>.content>a.header,
|
|
||||||
.ui.card>.content>a.header {
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.cards>.card .meta,
|
.ui.cards>.card .meta,
|
||||||
.ui.card .meta {
|
.ui.card .meta {
|
||||||
color: var(--color-text-dark-2);
|
color: var(--color-text-dark-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.card.card-with-icon .row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: var(--spacer);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.card.card-with-icon .icon svg {
|
.ui.card.card-with-icon .icon svg {
|
||||||
margin: 0 var(--spacer) 0 0;
|
margin: 0 var(--spacer) 0 0;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
@ -532,6 +372,15 @@ footer a {
|
||||||
top: 2px;
|
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. */
|
/* Homepage. */
|
||||||
.home a {
|
.home a {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,159 @@
|
||||||
<style>
|
<style>
|
||||||
.page-content.home ul,
|
/* bthree dark theme */
|
||||||
.page-content.dashboard ul{
|
@font-face {
|
||||||
padding-inline-start: 15px;
|
font-family: "Heebo";
|
||||||
}
|
src: url("../fonts/Heebo-VariableFont_wght.ttf") format("truetype-variations");
|
||||||
|
font-weight: normal;
|
||||||
|
font-variation-settings: "wght" var(--font-weight);
|
||||||
|
font-style: normal
|
||||||
|
}
|
||||||
|
|
||||||
ul.two-col {
|
:root {
|
||||||
columns: 2;
|
/* Spacing. */
|
||||||
}
|
--spacer: 1rem;
|
||||||
|
--spacer-1: .25rem;
|
||||||
|
--spacer-2: .5rem;
|
||||||
|
--spacer-3: var(--spacer);
|
||||||
|
--spacer-4: 1.5rem;
|
||||||
|
--spacer-5: 3rem;
|
||||||
|
|
||||||
.page-content.home .ui.cards>.card, .ui.card,
|
/* Override fonts. */
|
||||||
.page-content.dashboard .ui.cards>.card, .ui.card {
|
--fonts-override: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
width: 100%;
|
--font-weight-thin: 300;
|
||||||
}
|
--font-weight-bold: 600;
|
||||||
|
|
||||||
.page-content.home .hero p {
|
--border-radius: .33rem;
|
||||||
width: 70%;
|
|
||||||
font-size: 1.2rem;
|
/* Transitions. */
|
||||||
|
--transition-speed: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light-theme specific. */
|
||||||
|
.theme-gitea {
|
||||||
|
--color-primary: hsl(204deg, 90%, 52%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@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. */
|
||||||
|
.dashboard.feeds .right.stackable.menu>.item.active,
|
||||||
|
.dashboard.issues .right.stackable.menu>.item.active {
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global tweaks (all themes) */
|
||||||
|
.ui.avatar {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.user.list .ui.avatar,
|
||||||
|
.ui.user.list .ui.avatar+.content {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.user.list .ui.avatar {
|
||||||
|
vertical-align: unset !important;
|
||||||
|
margin-right: var(--spacer-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Labels. e.g. issues count indicator in repo tabs. */
|
||||||
|
.ui.small.label {
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the first link (app logo). */
|
||||||
|
.following.bar #navbar .brand a:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.following.bar #navbar .brand #navbar-expand-toggle {
|
||||||
|
margin-left: var(--spacer-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide brand navbar completely when not in mobile. */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.following.bar #navbar .brand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repository .ui.table a {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.repository .file-view.markdown a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Repository folder icon. */
|
||||||
|
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.repo-topic.label {
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Repository stats. */
|
||||||
|
.repository-summary-language-stats {
|
||||||
|
height: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repository .repository-summary .segment.language-stats {
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Repository: Activity page. */
|
||||||
|
.stats-table {
|
||||||
|
border-radius: 2em;
|
||||||
|
margin-bottom: var(--spacer);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer. */
|
||||||
|
footer {
|
||||||
|
color: var(--color-footer-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: var(--color-footer-links);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue