sofia/Gitea-Modern
1
0
Fork 0
forked from mirrors/Gitea-Modern
Code Pull requests Activity

Merge pull request '1.0.3' (#6) from dev into main

Browse source 
Reviewed-on: https://codeberg.org/Freeplay/CSS-Styles/pulls/6
This commit is contained in:
Free 2021-08-12 21:33:08 +02:00
commit 990a35c242
3 changed files with 1887 additions and 1871 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
Gitea/theme-gitea-modern.css
View file

@ -1,4 +1,8 @@
/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */ /* Update 1.0.3
- Fixed table stretching due to the grid
- Better keyboard accessability
- Fixed Codeberg dropdown
*/
:root { :root {
--base-border-radius: 6px; --base-border-radius: 6px;
} }
@ -13,6 +17,17 @@ a[rel*="nofollow"]:not(.ui):focus,
text-decoration: underline; text-decoration: underline;
text-underline-offset: 5px; text-underline-offset: 5px;
} }
* {
outline: 0px dashed var(--color-primary);
outline-offset: -2px;
transition: outline-color 0.5s, outline-offset 0.5s;
}
:focus-visible:not(input) {
box-shadow: 0 0 18px 0px var(--color-primary) !important;
border-radius: 2px;
outline: 2px solid var(--color-primary) !important;
outline-offset: 2px;
}
/*** Change Border Radius's ***/ /*** Change Border Radius's ***/
.ui.buttons .ui.basic.button { .ui.buttons .ui.basic.button {
border-radius: 0; border-radius: 0;
@ -139,6 +154,31 @@ a[rel*="nofollow"]:not(.ui):focus,
.page-content:not(.home) > .middle > .column { .page-content:not(.home) > .middle > .column {
padding: 0 !important; padding: 0 !important;
} }
/* No Script Message */
.full.height > span[style="display: inline !important;"]:first-child {
margin: auto;
line-height: 40px;
padding: 30px;
text-align: center;
/* Remove stuff that isn't needed when JS is disabled */
}
.full.height > span[style="display: inline !important;"]:first-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: var(--color-navbar);
border-bottom: 1px solid var(--color-secondary);
z-index: -1;
}
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #app,
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap,
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider {
display: none !important;
}
/*** Popups ***/
/* Tooltips */ /* Tooltips */
.popup.tiny.inverted { .popup.tiny.inverted {
background: var(--color-body); background: var(--color-body);
@ -176,30 +216,6 @@ a[rel*="nofollow"]:not(.ui):focus,
.settings > .ui.container { .settings > .ui.container {
max-width: 1150px !important; max-width: 1150px !important;
} }
/* No Script Message */
.full.height > span[style="display: inline !important;"]:first-child {
margin: auto;
line-height: 40px;
padding: 30px;
text-align: center;
/* Remove stuff that isn't needed when JS is disabled */
}
.full.height > span[style="display: inline !important;"]:first-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: var(--color-navbar);
border-bottom: 1px solid var(--color-secondary);
z-index: -1;
}
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #app,
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap,
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider {
display: none !important;
}
/** Other Elements **/ /** Other Elements **/
#user-heatmap { #user-heatmap {
overflow: auto hidden; overflow: auto hidden;
@ -231,6 +247,20 @@ a[rel*="nofollow"]:not(.ui):focus,
.label:not(.basic) svg { .label:not(.basic) svg {
margin-right: 4px; margin-right: 4px;
} }
/* Alerts */
.alert-primary.p-10 {
border: 0 !important;
padding: 20px !important;
}
.alert-primary.p-10 .close span {
font-size: 1.7em;
font-weight: 200;
padding-right: 6px;
}
.alert-primary.p-10 h4 {
margin-right: 1.7em;
font-weight: 600;
}
/*** Menu's ***/ /*** Menu's ***/
.ui.tabular.menu, .ui.tabular.menu,
.ui.tight.menu { .ui.tight.menu {
@ -376,6 +406,12 @@ html {
box-sizing: border-box; box-sizing: border-box;
transition: border 0.5s, padding 0.7s; transition: border 0.5s, padding 0.7s;
} }
#navbar > .item:not(.brand) > span,
#navbar > .right > .item > span {
height: 100%;
display: flex;
align-items: center;
}
#navbar > .item:not(.brand):hover, #navbar > .item:not(.brand):hover,
#navbar > .right > .item:hover, #navbar > .right > .item:hover,
#navbar > .item:not(.brand).active, #navbar > .item:not(.brand).active,
@ -509,6 +545,7 @@ html {
background: none; background: none;
color: var(--color-text); color: var(--color-text);
opacity: 0.7; opacity: 0.7;
border-radius: 12px !important;
} }
.page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item svg { .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item svg {
margin: 0; margin: 0;
@ -732,7 +769,6 @@ html {
} }
.page-content.repository:not(.milestones) > .ui.container #repo-files-table { .page-content.repository:not(.milestones) > .ui.container #repo-files-table {
margin-top: 0; margin-top: 0;
overflow: hidden;
background: none !important; background: none !important;
} }
.page-content.repository:not(.milestones) > .ui.container #repo-files-table thead { .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead {
@ -769,6 +805,15 @@ html {
display: inline-flex !important; display: inline-flex !important;
transform: translateY(1px); transform: translateY(1px);
} }
.page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .message-wrapper {
overflow: visible;
display: inline-flex;
}
.page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .message-wrapper a {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .commit-body { .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .commit-body {
padding: 6px; padding: 6px;
padding-right: 0; padding-right: 0;
@ -789,7 +834,15 @@ html {
.page-content.repository:not(.milestones) > .ui.container #repo-files-table tr:focus-within td:nth-child(2)::before { .page-content.repository:not(.milestones) > .ui.container #repo-files-table tr:focus-within td:nth-child(2)::before {
opacity: 0.1; opacity: 0.1;
} }
.page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate {
overflow: visible;
display: inline-flex;
}
.page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate a { .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate a {
margin: -8px 0;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
width: 100%; width: 100%;
color: var(--color-text); color: var(--color-text);
} }
@ -842,6 +895,8 @@ html {
max-width: 100% !important; max-width: 100% !important;
display: grid; display: grid;
grid-template-columns: calc(100% - 100px) 100px; grid-template-columns: calc(100% - 100px) 100px;
grid-template-rows: min-content !important;
align-items: flex-start;
} }
.page-content.repository:not(.milestones).file > .ui.container > *, .page-content.repository:not(.milestones).file > .ui.container > *,
.page-content.repository:not(.milestones).commits > .ui.container > *, .page-content.repository:not(.milestones).commits > .ui.container > *,
@ -852,7 +907,7 @@ html {
.page-content.repository:not(.milestones).commits > .ui.container .repository-summary, .page-content.repository:not(.milestones).commits > .ui.container .repository-summary,
.page-content.repository:not(.milestones).branches > .ui.container .repository-summary { .page-content.repository:not(.milestones).branches > .ui.container .repository-summary {
grid-column: 2; grid-column: 2;
grid-row: 1/span 6; grid-row: 1/span 50;
border: 0; border: 0;
margin-top: 12px !important; margin-top: 12px !important;
margin-left: 30px; margin-left: 30px;
@ -1407,6 +1462,9 @@ html {
.ui.repository.list .item:focus-within { .ui.repository.list .item:focus-within {
box-shadow: var(--lm-shadow); box-shadow: var(--lm-shadow);
} }
.ui.repository.list .item:focus-within {
outline: 1px solid var(--color-primary) !important;
}
.ui.repository.list .item .header { .ui.repository.list .item .header {
display: contents !important; display: contents !important;
} }
@ -1695,15 +1753,6 @@ html {
margin-right: 0 !important; margin-right: 0 !important;
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
} }
.dashboard > .ui.container #app codeberg-announcement-widget > div .close span {
font-size: 1.7em;
font-weight: 200;
margin-right: 2px;
}
.dashboard > .ui.container #app codeberg-announcement-widget > div h4 {
margin-right: 1.7em;
font-weight: 600;
}
.dashboard > .ui.container #app .tabable { .dashboard > .ui.container #app .tabable {
background: none; background: none;
margin-right: 0 !important; margin-right: 0 !important;

135
Gitea/theme-gitea-modern.styl
View file

@ -1,7 +1,14 @@
/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */
/* Update 1.0.3
- Fixed table stretching due to the grid
- Better keyboard accessability
- Fixed Codeberg dropdown
*/
:root { :root {
--base-border-radius: 6px; --base-border-radius: 6px;
} }
html.theme-gitea, html.theme-arc-green { html.theme-gitea, html.theme-arc-green {
--fonts-override: var(--fonts-regular); --fonts-override: var(--fonts-regular);
@ -12,6 +19,17 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
text-underline-offset: 5px; text-underline-offset: 5px;
} }
} }
* {
outline: 0px dashed var(--color-primary);
outline-offset: -2px;
transition: outline-color .5s, outline-offset .5s;
}
:focus-visible:not(input) {
box-shadow: 0 0 18px 0px var(--color-primary) !important;
border-radius: 2px;
outline: 2px solid var(--color-primary) !important;
outline-offset: 2px;
}
@keyframes slideInY { @keyframes slideInY {
from { opacity: 0; transform: scale(.97); } from { opacity: 0; transform: scale(.97); }
@ -145,6 +163,37 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
} }
} }
/* No Script Message */
.full.height > span[style="display: inline !important;"]:first-child {
margin: auto;
line-height: 40px;
padding: 30px;
text-align: center;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: var(--color-navbar);
border-bottom: 1px solid var(--color-secondary);
z-index: -1;
}
/* Remove stuff that isn't needed when JS is disabled */
& ~ .page-content {
#app, #user-heatmap, #user-heatmap + .divider {
display: none !important;
}
}
}
/*** Popups ***/
/* Tooltips */ /* Tooltips */
.popup.tiny.inverted { .popup.tiny.inverted {
background: var(--color-body); background: var(--color-body);
@ -186,32 +235,8 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
} }
/* No Script Message */
.full.height > span[style="display: inline !important;"]:first-child {
margin: auto;
line-height: 40px;
padding: 30px;
text-align: center;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: var(--color-navbar);
border-bottom: 1px solid var(--color-secondary);
z-index: -1;
}
/* Remove stuff that isn't needed when JS is disabled */
& ~ .page-content {
#app, #user-heatmap, #user-heatmap + .divider {
display: none !important;
}
}
}
/** Other Elements **/ /** Other Elements **/
#user-heatmap { #user-heatmap {
@ -248,6 +273,26 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
} }
/* Alerts */
.alert-primary.p-10 {
border: 0 !important;
padding: 20px !important;
.close {
// padding: 10px;
span {
font-size: 1.7em;
font-weight: 200;
padding-right: 6px;
}
}
h4 {
margin-right: 1.7em;
font-weight: 600;
}
}
/*** Menu's ***/ /*** Menu's ***/
.ui.tabular.menu, .ui.tight.menu { .ui.tabular.menu, .ui.tight.menu {
position: relative; position: relative;
@ -402,6 +447,11 @@ html {
background: none !important; background: none !important;
box-sizing: border-box; box-sizing: border-box;
transition: border .5s, padding .7s; transition: border .5s, padding .7s;
& > span {
height: 100%;
display: flex;
align-items: center;
}
&:hover, &.active, &:focus { &:hover, &.active, &:focus {
border-bottom: 1px solid var(--color-primary); border-bottom: 1px solid var(--color-primary);
transition: border .1s; transition: border .1s;
@ -532,6 +582,7 @@ html {
background: none; background: none;
color: var(--color-text); color: var(--color-text);
opacity: .7; opacity: .7;
border-radius: 12px !important;
svg { svg {
margin: 0; margin: 0;
width: 22px; width: 22px;
@ -762,7 +813,6 @@ html {
#repo-files-table { #repo-files-table {
margin-top: 0; margin-top: 0;
overflow: hidden;
background: none !important; background: none !important;
thead { thead {
position: relative; position: relative;
@ -798,6 +848,16 @@ html {
transform: translateY(1px); transform: translateY(1px);
} }
.message-wrapper {
overflow: visible;
display: inline-flex;
a {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
}
.commit-body { .commit-body {
padding: 6px; padding: 6px;
padding-right: 0; padding-right: 0;
@ -821,7 +881,13 @@ html {
} }
.truncate { .truncate {
overflow: visible;
display: inline-flex;
a { a {
margin: -8px 0;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
width: 100%; width: 100%;
color: var(--color-text); color: var(--color-text);
&:hover, &:focus { &:hover, &:focus {
@ -885,12 +951,14 @@ html {
max-width: 100% !important; max-width: 100% !important;
display: grid; display: grid;
grid-template-columns: calc(100% - 100px) 100px; grid-template-columns: calc(100% - 100px) 100px;
grid-template-rows: min-content !important;
align-items: flex-start;
& > * { & > * {
grid-column: 1; grid-column: 1;
} }
.repository-summary { .repository-summary {
grid-column: 2; grid-column: 2;
grid-row: 1 / span 6; grid-row: 1 / span 50;
border: 0; border: 0;
margin-top: 12px !important; margin-top: 12px !important;
margin-left: 30px; margin-left: 30px;
@ -1330,6 +1398,9 @@ html {
&:hover, &:focus-within { &:hover, &:focus-within {
box-shadow: var(--lm-shadow); box-shadow: var(--lm-shadow);
} }
&:focus-within {
outline: 1px solid var(--color-primary) !important;
}
.header { .header {
display: contents !important; display: contents !important;
@ -1625,15 +1696,6 @@ html {
margin-top: 0 !important; margin-top: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
.close span {
font-size: 1.7em;
font-weight: 200;
margin-right: 2px;
}
h4 {
margin-right: 1.7em;
font-weight: 600;
}
} }
} }
@ -1732,3 +1794,4 @@ footer {
} }
} }

3500
Gitea/theme-gitea-modern.user.css
View file

File diff suppressed because it is too large Load diff