From f61c3cdf0bf341ff2d325844c94e1be6eec181ba Mon Sep 17 00:00:00 2001 From: Free Date: Wed, 18 Aug 2021 19:42:45 +0200 Subject: [PATCH] 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 --- Gitea/theme-gitea-modern.styl | 132 +++++++++++++++++++++++++--------- 1 file changed, 97 insertions(+), 35 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index 4f69121..c0dee6c 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,14 +1,16 @@ +// main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css - -/* Update 1.0.3 -- Fixed table stretching due to the grid -- Better keyboard accessability -- Fixed Codeberg dropdown + +/* 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 */ + :root { --base-border-radius: 6px; - + } html.theme-gitea, html.theme-arc-green { --fonts-override: var(--fonts-regular); @@ -698,7 +700,7 @@ html { #repo-topics { margin: 0 -4px; margin-bottom: 0 !important; - margin-top: -.5rem !important; + margin-top: -.5rem !important; align-items: flex-start !important; & > *:last-child { margin: 2px !important; @@ -847,7 +849,7 @@ html { display: inline-flex !important; transform: translateY(1px); } - + .message-wrapper { overflow: visible; display: inline-flex; @@ -1006,10 +1008,17 @@ html { border: 0 !important; } .language-stats { - border-radius: 100px !important; + border-radius: var(--base-border-radius) !important; overflow: hidden !important; pointer-events: none; - top: 0; + // top: unset; + // position: absolute; + // bottom: 0; + // height: 10px; + // width: 80vh; + // transform: rotate(90deg) translate(-60%, -55px); + // max-width: 500px; + // width: 100px; } .horizontal.list:not(.two) { padding-top: 1rem; @@ -1130,11 +1139,11 @@ html { } /*** USER PROFILES & EXPLORE PAGES ***/ -.explore, .user:not(.list), .profile { +.explore, .page-content.user, .profile { display: flex; flex-wrap: wrap; justify-content: center; - + /* Responsive explore page */ &.explore > .ui.container { max-width: calc(100vw - 40px); @@ -1176,7 +1185,7 @@ html { width: 320px !important; flex: 1 0 320px !important; position: sticky; - bottom: 0; + bottom: 10px; align-self: flex-end; min-height: 100vh; .card { @@ -1205,12 +1214,12 @@ html { font-weight: 600; padding-left: .7rem; margin: 1.5rem 0; - + &.header { font-weight: 500; letter-spacing: .1em; - height: 44px; - line-height: 50px; + height: 39px; + line-height: 40px; margin-bottom: -1.2em; margin-top: 0; background: var(--color-body); @@ -1271,21 +1280,32 @@ html { margin-bottom: 1.5rem; position: sticky; top: 0px !important; - margin-top: -45px; - height: 45px; + margin-top: -40px; + height: 40px; z-index: 9999; background-color: var(--color-body); + @supports (backdrop-filter: blur(10px)) { + backdrop-filter: blur(10px); + background-color: transparent; + &::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-body); + opacity: .8; + } + } } &::before { content: ""; position: sticky; margin: 0 !important; margin-left: -100vw !important; - margin-top: 45px !important; + margin-top: 40px !important; width: 200vw; display: block; border-bottom: 1px solid var(--color-secondary); - top: 44px; + top: 39px; z-index: -1; } } @@ -1309,13 +1329,32 @@ html { /* DASHBOARD / USER FEEDS */ .ui.container > .news, .feeds > .news { border: 1px solid var(--color-secondary) !important; + border-bottom: none !important; background: var(--color-box-body); - margin-bottom: 1rem; - border-radius: var(--base-border-radius); + // margin-bottom: 1rem; + border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; padding: 10px 12px !important; - position: relative; - + position: relative; + & + .news { + border-radius: 0 !important; + } + &:last-child { + border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important; + border-bottom: 1px solid var(--color-secondary) !important; + } + &::before { + content: ""; + position: absolute; + inset: 0; + background: var(--color-primary); + opacity: 0; + // z-index: -1; + } + &:hover::before, &:focus-within::before { + opacity: .05; + } .ui.left { + width: 40px; img { margin: 0 !important; margin-top: 2px !important; @@ -1326,6 +1365,7 @@ html { .ui.grid { margin: 0 !important; padding: 0 !important; + padding-top: 1px !important; & > .column { padding: 0 !important; width: 100% !important; @@ -1367,7 +1407,7 @@ html { margin-bottom: 0; } ul { - border-left: 4px solid var(--color-secondary); + border-left: 4px solid var(--color-secondary); } } .divider { @@ -1376,12 +1416,13 @@ html { } /* REPOSITORY LIST */ -.ui.repository.list { +.ui.repository.list, +.ui.user.list { margin-top: 16px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 16px; - + .item { width: 400px; width: 100%; @@ -1491,6 +1532,30 @@ html { } } } + + // User & Organization cards + .content { + padding-left: 12px; + margin-bottom: -.4em; + .header { + a { + font-weight: 600; + text-transform: capitalize; + } + } + .description { + display: flex; + flex-direction: column; + padding-left: 22px; + line-height: 1.8em; + margin-top: .5em; + svg { + margin-bottom: -1.45em !important; + margin-left: -22px !important; + } + } + } + } } @@ -1501,7 +1566,6 @@ html { flex-wrap: wrap; margin: auto; max-width: 100%; - padding: 30px 10px; padding: 30px 0; width: 1300px; margin-bottom: -45px; @@ -1539,7 +1603,7 @@ html { & > .item, & > .right > .item { flex-direction: column; - margin: 0 20px !important; + margin: 0px !important; text-align: center; flex-grow: 1; display: flex !important; @@ -1554,7 +1618,7 @@ html { & > .dropdown, .button { text-indent: 0px !important; } - span { + span { text-align: center; } @@ -1595,7 +1659,7 @@ html { margin: 0 auto !important; display: flex; flex-wrap: wrap-reverse; - flex: 9999 1 650px; + flex: 9999 1 650px; --container-padding-x: calc(2.5% + 0px); @@ -1660,7 +1724,7 @@ html { #app { height: min-content; position: sticky; - + bottom: 0; align-self: flex-end; margin: 0 auto !important; @@ -1691,7 +1755,7 @@ html { } codeberg-announcement-widget { background: none !important; - + & > div { margin-top: 0 !important; margin-right: 0 !important; @@ -1793,5 +1857,3 @@ footer { padding: 0 40px; } } - -