mirrors/Gitea-Modern
1
0
Fork 1
mirror of https://codeberg.org/Freeplay/Gitea-Modern synced 2023-10-25 19:10:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

1.0.5

Browse source 
- Projects page now uses full-width.
- Fixed some stuff in chromium browsers.
This commit is contained in:
Free 2021-08-22 02:32:07 +02:00
parent 972c1e6f04
commit 2d3f276fda
1 changed files with 103 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,9 @@
// main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css
/* Update 1.0.4 /* Update 1.0.5
- Combined feed list to make it more compact, while still looking nice. - Projects page now uses full-width.
- Styled User / Organization lists - Fixed some stuff in chromium browsers.
- Added minor blur to tabs in User page
*/ */
@ -21,16 +20,16 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
text-underline-offset: 5px; text-underline-offset: 5px;
} }
} }
* { *:not(input) {
outline: 0px dashed var(--color-primary); outline: 0px dashed var(--color-primary);
outline-offset: -2px; outline-offset: -3px;
transition: outline-color .5s, outline-offset .5s; transition: outline-color .5s, outline-offset .5s;
} }
:focus-visible:not(input) { :focus-visible:not(input) {
box-shadow: 0 0 18px 0px var(--color-primary) !important; box-shadow: 0 0 5px 0px var(--color-primary) !important;
border-radius: 2px; border-radius: 2px;
outline: 2px solid var(--color-primary) !important; outline: 2px solid var(--color-primary) !important;
outline-offset: 2px; outline-offset: 0px;
} }
@keyframes slideInY { @keyframes slideInY {
@ -108,8 +107,9 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
border: 0 !important; border: 0 !important;
} }
&:focus-within { &:focus-within {
outline: 1px solid var(--color-primary); // outline: 1px solid var(--color-primary);
outline-offset: -1px; // outline-offset: -1px;
border-color: var(--color-primary) !important;
} }
} }
.ui.form + .ui.divider { .ui.form + .ui.divider {
@ -565,6 +565,17 @@ html {
align-self: flex-end; align-self: flex-end;
align-content: flex-start; align-content: flex-start;
min-height: calc(100vh - 40px); min-height: calc(100vh - 40px);
z-index: 2;
&::before {
content: "";
position: absolute;
inset: 0;
left: 20px;
right: 50px;
background-color: var(--color-body);
box-shadow: 0 0 20px 20px var(--color-body);
opacity: .8;
}
.tabular { .tabular {
flex-direction: column !important; flex-direction: column !important;
padding-right: 30px; padding-right: 30px;
@ -639,6 +650,36 @@ html {
width: 100%; width: 100%;
} }
} }
/* PROJECTS BOARD */
#project-board {
width: calc(100vw + 10px);
max-width: unset;
justify-self: center;
margin-left: -100px;
margin-bottom: calc(-100vh + 350px);
overflow-x: auto;
scrollbar-color: var(--color-primary) transparent;
& > .board {
overflow: visible;
margin: 0 auto;
padding-left: 100px;
box-sizing: content-box;
width: 1227px;
&::after {
content: "";
display: flex;
min-width: 100px;
}
.board-column {
height: calc(100vh - 150px);
}
.card {
box-sizing: border-box;
}
}
}
} }
/* Default Page Content, no width restraint */ /* Default Page Content, no width restraint */
@ -926,6 +967,16 @@ html {
margin-top: -8px !important; margin-top: -8px !important;
} }
// Fix pull req header showing borders on the sides
.diff-box.sticky {
margin: 0 -1px;
border-bottom: 0;
}
.sticky-2nd-row {
// margin-top: 2px;
box-shadow: 0 -2px 0 2px var(--color-body);
}
.ui.grid > .eleven { .ui.grid > .eleven {
margin-left: 1rem; margin-left: 1rem;
@ -1079,6 +1130,8 @@ html {
} }
/* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */ /* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */
.issue.list, .milestone.list { .issue.list, .milestone.list {
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
@ -1096,8 +1149,17 @@ html {
padding: 10px !important; padding: 10px !important;
padding-bottom: 6px !important; padding-bottom: 6px !important;
position: relative; position: relative;
&:hover { &:hover:before, &:focus-within:before {
box-shadow: inset 0 0 600px -300px var(--color-primary); content: "";
position: absolute;
inset: 0;
background-color: var(--color-primary);
z-index: 0;
opacity: .07;
pointer-events: none;
}
& > * {
z-index: 1;
} }
.issue-item-left { .issue-item-left {
padding-top: 2px; padding-top: 2px;
@ -1179,6 +1241,7 @@ html {
& > .ui.container { & > .ui.container {
max-width: 1350px; max-width: 1350px;
// max-width: 1400px;
width: 100% !important; width: 100% !important;
padding: 0 20px; padding: 0 20px;
&[class="ui container"] .five.wide.column { &[class="ui container"] .five.wide.column {
@ -1279,9 +1342,9 @@ html {
margin: 0 -2px; margin: 0 -2px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
position: sticky; position: sticky;
top: 0px !important; top: -2px !important;
margin-top: -40px; margin-top: -42px;
height: 40px; height: 42px;
z-index: 9999; z-index: 9999;
background-color: var(--color-body); background-color: var(--color-body);
@supports (backdrop-filter: blur(10px)) { @supports (backdrop-filter: blur(10px)) {
@ -1301,7 +1364,7 @@ html {
position: sticky; position: sticky;
margin: 0 !important; margin: 0 !important;
margin-left: -100vw !important; margin-left: -100vw !important;
margin-top: 40px !important; margin-top: 42px !important;
width: 200vw; width: 200vw;
display: block; display: block;
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
@ -1326,7 +1389,7 @@ html {
} }
} }
/* DASHBOARD / USER FEEDS */ /* USER FEEDS */
.ui.container > .news, .feeds > .news { .ui.container > .news, .feeds > .news {
border: 1px solid var(--color-secondary) !important; border: 1px solid var(--color-secondary) !important;
border-bottom: none !important; border-bottom: none !important;
@ -1407,6 +1470,7 @@ html {
margin-bottom: 0; margin-bottom: 0;
} }
ul { ul {
margin-top: 0;
border-left: 4px solid var(--color-secondary); border-left: 4px solid var(--color-secondary);
} }
} }
@ -1440,7 +1504,8 @@ html {
box-shadow: var(--lm-shadow); box-shadow: var(--lm-shadow);
} }
&:focus-within { &:focus-within {
outline: 1px solid var(--color-primary) !important; // outline: 1px solid var(--color-primary) !important;
border-color: var(--color-primary) !important;
} }
.header { .header {
@ -1517,15 +1582,23 @@ html {
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
margin-top: 8px; margin-top: 8px;
border-radius: 100px;
&::-webkit-scrollbar {
display: none;
}
a > div { a > div {
width: max-content !important; width: max-content !important;
} }
a:last-child {
padding-right: 100px;
}
&::after { &::after {
content: ""; content: "";
min-width: 100px; min-width: 100px;
margin-left: 100px; margin-left: -100px;
height: 100%; height: 100%;
position: sticky; position: sticky;
display: flex;
right: 0px; right: 0px;
background: linear-gradient(to right, transparent, var(--color-box-body)); background: linear-gradient(to right, transparent, var(--color-box-body));
pointer-events: none; pointer-events: none;
@ -1567,7 +1640,7 @@ html {
margin: auto; margin: auto;
max-width: 100%; max-width: 100%;
padding: 30px 0; padding: 30px 0;
width: 1300px; width: 1400px;
margin-bottom: -45px; margin-bottom: -45px;
@ -1672,12 +1745,16 @@ html {
flex-grow: 1; flex-grow: 1;
z-index: 1; z-index: 1;
padding: 15px var(--container-padding-x) !important; padding: 15px var(--container-padding-x) !important;
padding-bottom: var(--container-padding-x) !important;
margin: 0 auto !important; margin: 0 auto !important;
} }
& > .column { & > .column {
max-width: calc(100vw - 40px); max-width: calc(100vw - 40px);
margin: 0 auto; margin: 0 auto;
flex-grow: 1; flex-grow: 1;
#user-heatmap + .divider {
border-bottom: 0;
}
.ui.secondary.menu, .ui.stackable.grid { .ui.secondary.menu, .ui.stackable.grid {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
@ -1694,7 +1771,7 @@ html {
background: none !important; background: none !important;
a { a {
display: flex; display: flex;
flex: 1 0 max-content; flex: 1 0 auto;
min-width: 200px; min-width: 200px;
max-width: calc(100% - 12px); max-width: calc(100% - 12px);
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
@ -1825,12 +1902,17 @@ html {
.item-name { .item-name {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: unset;
margin-right: 10px;
svg { svg {
margin-right: 8px !important; margin-right: 8px !important;
min-width: 16px;
} }
} }
strong { strong {
font-weight: 700; font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
} }
} }
} }