From 650b549659473b67dd049d913664187a532e8e89 Mon Sep 17 00:00:00 2001 From: Free Date: Thu, 7 Oct 2021 02:05:40 +0200 Subject: [PATCH] 1.0.8 - Moved activies buttons to the right side - Improved some padding - Fixed CI status bar being too transparent. (https://codeberg.org/Freeplay/CSS-Styles/issues/13#issue-75978) - More changes n' stuff --- Gitea/theme-gitea-modern.styl | 102 ++++++++++++++++++++++++---------- 1 file changed, 74 insertions(+), 28 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index a9791bd..a7dccff 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,8 +1,11 @@ // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true // Ignore above, just compiler stuff -/* Update 1.0.7 -- Forms should now be fixed. I hope. +/* Update 1.0.8 +- Moved activies buttons to the right side +- Improved some padding +- Fixed CI status bar being too transparent. Issue #13 +- More changes n' stuff */ @@ -125,6 +128,12 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { width: auto !important; align-items: center !important; display: flex !important; + .small, a { + max-height: 40px !important; + min-height: unset; + display: flex; + align-items: center; + } form { width: 100%; } @@ -245,9 +254,9 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { justify-content: flex-start; max-width: 900px; margin: auto; + align-items: stretch; .vch__wrapper { - min-width: 500px; - + min-width: 600px; } } @@ -740,6 +749,10 @@ html { #repo-desc { font-size: 1.14rem; line-height: 1.6rem; + margin-bottom: 0 !important; + &:not(:empty) { + margin-bottom: .7rem !important; + } } #repo-topics { margin: 0 -4px; @@ -949,7 +962,7 @@ html { .name { padding-left: 8px; } - .message, .right { + .message, .right:not(.popup) { opacity: .8; } @@ -1012,7 +1025,9 @@ html { & > * { grid-column: 1; } - .repository-summary { + .repository-summary, + [class="ui attached segment two column grid"] + [class="ui attached segment horizontal segments"], // Activies buttons + { grid-column: 2; grid-row: 1 / span 50; border: 0; @@ -1020,7 +1035,9 @@ html { margin-left: 30px; height: min-content; position: sticky; + width: 70px; bottom: 20px; + top: unset; align-self: flex-end; background: none !important; min-height: calc(100vh - 40px); @@ -1077,22 +1094,27 @@ html { .horizontal.list:not(.two) { padding-top: 1rem; } - .list { + .list, + &.horizontal, // Activies buttons + { flex-direction: column; background: none !important; - .item { + justify-content: flex-start; + .item, & > a.attached.segment { border-radius: 12px !important; padding: 12px 0 !important; padding-bottom: 18px !important; + flex-grow: 0; position: relative; margin-right: 0 !important; + border: none; a { padding: 0 !important; } .bold, b { font-weight: 500 !important; } - &.active { + &.active, &:target { background: none !important; &::before { content: ""; @@ -1108,7 +1130,7 @@ html { } } } - a, span { + &.list a, span { & > * { margin-bottom: 5px; } @@ -1126,7 +1148,6 @@ html { } - } } } @@ -1275,6 +1296,7 @@ html { bottom: 10px; align-self: flex-end; min-height: 100vh; + line-height: 1.5em; .card { width: 100%; border: 0; @@ -1307,7 +1329,10 @@ html { letter-spacing: .1em; height: 39px; line-height: 40px; - margin-bottom: -1.2em; + margin-bottom: -1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; margin-top: 0; background: var(--color-body); position: sticky; @@ -1348,6 +1373,7 @@ html { padding: .6rem 0; padding-bottom: .7rem !important; word-break: normal !important; + line-height: 1.5em; } } .follow form { @@ -1364,6 +1390,8 @@ html { max-width: 100%; .ui.secondary.stackable.pointing.tight.menu { margin: 0 -2px; + margin: 0 -20px; + margin-left: -40px; margin-bottom: 1.5rem; position: sticky; top: -2px !important; @@ -1371,10 +1399,21 @@ html { height: 42px; z-index: 9999; background-color: var(--color-body); + &::before { + content: ""; + min-width: 40px; + display: block; + position: sticky; + left: 0px; + background: linear-gradient(to right, var(--color-body), transparent); + z-index: 1; + } @supports (backdrop-filter: blur(10px)) { backdrop-filter: blur(10px); background-color: transparent; - &::before { + &::after { + all: unset; + z-index: -1; content: ""; position: absolute; inset: 0; @@ -1420,7 +1459,7 @@ html { background: var(--color-box-body); // margin-bottom: 1rem; border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; - padding: 10px 12px !important; + padding: 12px 12px !important; position: relative; & + .news { border-radius: 0 !important; @@ -1441,11 +1480,11 @@ html { opacity: .05; } .ui.left { - width: 40px; + width: 42px; img { margin: 0 !important; - margin-top: 2px !important; - margin-right: 15px !important; + margin-top: 3px !important; + margin-right: 18px !important; border-radius: var(--base-border-radius); } } @@ -1480,7 +1519,7 @@ html { & > .right.column { position: absolute; - top: 45px; + top: 48px; left: 0; width: 52px !important; text-align: center; @@ -1496,6 +1535,9 @@ html { ul { margin-top: 0; border-left: 4px solid var(--color-secondary); + li .mr-2 { + margin-top: .1em; + } } } .divider { @@ -1674,6 +1716,7 @@ html { width: auto; position: sticky; bottom: 10px; + margin-bottom: 40px !important; align-self: flex-end; height: min-content; z-index: 2; @@ -1755,18 +1798,17 @@ html { & > .ui.container { margin: 0 auto !important; display: flex; - flex-wrap: wrap-reverse; - flex: 9999 1 650px; + flex-wrap: wrap-reverse !important; + flex: 9999 1 700px; --container-padding-x: calc(2.5% + 0px); - & > .ui.stackable.grid { width: 100%; justify-content: center; + margin: 0; & > .ten.column { - flex-grow: 1; z-index: 1; padding: 15px var(--container-padding-x) !important; padding-bottom: var(--container-padding-x) !important; @@ -1786,7 +1828,10 @@ html { } /* Change to row wrapping for better responsiveness, aswell as adding a border to better differenciate buttons */ .four.wide.column { - min-width: 250px; + min-width: 230px; + + div { + flex-grow: 9999; + } & > .menu { display: flex; flex-direction: row; @@ -1807,7 +1852,7 @@ html { width: 100%; } .label { - margin-left: 4px; + margin-left: 8px; } &:hover { background-color: var(--color-light); @@ -1835,6 +1880,7 @@ html { padding-bottom: 0 !important; z-index: 0; max-width: 100% !important; + flex-shrink: 9999; & > div { height: 100%; display: flex; @@ -1844,15 +1890,15 @@ html { &::before { content: ""; position: absolute; - bottom: 0; - border-left: 1px solid var(--color-secondary); - border-right: 1px solid var(--color-secondary); + bottom: -15px; width: 200vw; - height: 200vh; + height: calc(100vh + 25px); right: calc(100% - 15px); right: 100%; z-index: -100; background: var(--color-light); + box-shadow: 200vw 0 var(--color-body), + inset 0 0 2px rgba(0,0,0,0.2); } codeberg-announcement-widget { background: none !important;