From 2d3f276fda7e58188bf4b4c4a1ad0b17ddfbd76a Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 22 Aug 2021 02:32:07 +0200 Subject: [PATCH] 1.0.5 - Projects page now uses full-width. - Fixed some stuff in chromium browsers. --- Gitea/theme-gitea-modern.styl | 124 ++++++++++++++++++++++++++++------ 1 file changed, 103 insertions(+), 21 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index c0dee6c..d3afc75 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,10 +1,9 @@ // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css -/* Update 1.0.4 -- Combined feed list to make it more compact, while still looking nice. -- Styled User / Organization lists -- Added minor blur to tabs in User page +/* Update 1.0.5 +- Projects page now uses full-width. +- Fixed some stuff in chromium browsers. */ @@ -21,16 +20,16 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { text-underline-offset: 5px; } } -* { +*:not(input) { outline: 0px dashed var(--color-primary); - outline-offset: -2px; + outline-offset: -3px; transition: outline-color .5s, outline-offset .5s; } :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; outline: 2px solid var(--color-primary) !important; - outline-offset: 2px; + outline-offset: 0px; } @keyframes slideInY { @@ -108,8 +107,9 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { border: 0 !important; } &:focus-within { - outline: 1px solid var(--color-primary); - outline-offset: -1px; + // outline: 1px solid var(--color-primary); + // outline-offset: -1px; + border-color: var(--color-primary) !important; } } .ui.form + .ui.divider { @@ -565,6 +565,17 @@ html { align-self: flex-end; align-content: flex-start; 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 { flex-direction: column !important; padding-right: 30px; @@ -639,6 +650,36 @@ html { 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 */ @@ -926,6 +967,16 @@ html { 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 { margin-left: 1rem; @@ -1079,6 +1130,8 @@ html { } + + /* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */ .issue.list, .milestone.list { border: 1px solid var(--color-secondary); @@ -1096,8 +1149,17 @@ html { padding: 10px !important; padding-bottom: 6px !important; position: relative; - &:hover { - box-shadow: inset 0 0 600px -300px var(--color-primary); + &:hover:before, &:focus-within:before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-primary); + z-index: 0; + opacity: .07; + pointer-events: none; + } + & > * { + z-index: 1; } .issue-item-left { padding-top: 2px; @@ -1179,6 +1241,7 @@ html { & > .ui.container { max-width: 1350px; + // max-width: 1400px; width: 100% !important; padding: 0 20px; &[class="ui container"] .five.wide.column { @@ -1279,9 +1342,9 @@ html { margin: 0 -2px; margin-bottom: 1.5rem; position: sticky; - top: 0px !important; - margin-top: -40px; - height: 40px; + top: -2px !important; + margin-top: -42px; + height: 42px; z-index: 9999; background-color: var(--color-body); @supports (backdrop-filter: blur(10px)) { @@ -1301,7 +1364,7 @@ html { position: sticky; margin: 0 !important; margin-left: -100vw !important; - margin-top: 40px !important; + margin-top: 42px !important; width: 200vw; display: block; border-bottom: 1px solid var(--color-secondary); @@ -1326,7 +1389,7 @@ html { } } -/* DASHBOARD / USER FEEDS */ +/* USER FEEDS */ .ui.container > .news, .feeds > .news { border: 1px solid var(--color-secondary) !important; border-bottom: none !important; @@ -1407,6 +1470,7 @@ html { margin-bottom: 0; } ul { + margin-top: 0; border-left: 4px solid var(--color-secondary); } } @@ -1440,7 +1504,8 @@ html { box-shadow: var(--lm-shadow); } &:focus-within { - outline: 1px solid var(--color-primary) !important; + // outline: 1px solid var(--color-primary) !important; + border-color: var(--color-primary) !important; } .header { @@ -1517,15 +1582,23 @@ html { overflow-x: auto; scrollbar-width: none; margin-top: 8px; + border-radius: 100px; + &::-webkit-scrollbar { + display: none; + } a > div { width: max-content !important; } + a:last-child { + padding-right: 100px; + } &::after { content: ""; min-width: 100px; - margin-left: 100px; + margin-left: -100px; height: 100%; position: sticky; + display: flex; right: 0px; background: linear-gradient(to right, transparent, var(--color-box-body)); pointer-events: none; @@ -1567,7 +1640,7 @@ html { margin: auto; max-width: 100%; padding: 30px 0; - width: 1300px; + width: 1400px; margin-bottom: -45px; @@ -1672,12 +1745,16 @@ html { flex-grow: 1; z-index: 1; padding: 15px var(--container-padding-x) !important; + padding-bottom: var(--container-padding-x) !important; margin: 0 auto !important; } & > .column { max-width: calc(100vw - 40px); margin: 0 auto; flex-grow: 1; + #user-heatmap + .divider { + border-bottom: 0; + } .ui.secondary.menu, .ui.stackable.grid { margin-left: 0 !important; margin-right: 0 !important; @@ -1694,7 +1771,7 @@ html { background: none !important; a { display: flex; - flex: 1 0 max-content; + flex: 1 0 auto; min-width: 200px; max-width: calc(100% - 12px); border: 1px solid var(--color-secondary); @@ -1825,12 +1902,17 @@ html { .item-name { display: flex; align-items: center; + max-width: unset; + margin-right: 10px; svg { margin-right: 8px !important; + min-width: 16px; } } strong { font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; } } }