From 82811e94c01084335eff1dcad6745ffa2d1df2b9 Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 17 Oct 2021 03:17:33 +0200 Subject: [PATCH] 1.0.10 - Tweaked the look of the dashboard and other menu's / tabs - Other fixes --- Gitea/theme-gitea-modern.styl | 295 +++++++++++++++++++++++----------- 1 file changed, 201 insertions(+), 94 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index a7dccff..5ee5dce 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,11 +1,9 @@ // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true // Ignore above, just compiler stuff -/* 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 +/* Update 1.0.10 +- Tweaked the look of the dashboard and other menu's / tabs +- Other fixes */ @@ -15,6 +13,7 @@ } html.theme-gitea, html.theme-arc-green { --fonts-override: var(--fonts-regular); + accent-color: var(--color-primary); } a[rel*="nofollow"]:not(.ui), .link:not(.ui) { &:hover, &:focus { @@ -128,7 +127,7 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { width: auto !important; align-items: center !important; display: flex !important; - .small, a { + .small:not(.modal), a { max-height: 40px !important; min-height: unset; display: flex; @@ -396,6 +395,39 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } } +// That menu right below the Header +.ui.secondary.pointing.menu { + background: none !important; + .new-menu-inner { + width: 1150px; + padding: 0 20px; + } + .item { + // font-weight: 600; + border: none; + } + .active { + position: relative; + &::before { + all: unset; + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 2px; + background-color: var(--color-primary) !important; + display: flex !important; + opacity: .7; + } + } + .item:last-child { + padding-right: 1.14286em !important; + } + &::after { + content: unset !important; + } +} .repository .filter.menu .menu { max-height: 80vh; @@ -432,82 +464,81 @@ html { min-height: var(--min-height); align-items: center; z-index: 99999; -} -#navbar { - padding: 0 calc(2px + 1%) !important; - background: none !important; - max-width: 100rem; - transition: padding 1s; - min-height: var(--min-height) !important; - margin: auto; - - - & > .item:not(.brand), & > .right > .item { - color: var(--color-text-dark) !important; - font-size: 1rem !important; - font-weight: 600; - - padding: 0 calc(0px + 1.1%); - height: calc(var(--min-height) + 1px) !important; - margin: 0 !important; - border-radius: 0; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - margin-bottom: -1px !important; + #navbar { + padding: 0 calc(2px + 1%) !important; background: none !important; - box-sizing: border-box; - transition: border .5s, padding .7s; - & > span { - height: 100%; - display: flex; - align-items: center; - } - &:hover, &.active, &:focus { - border-bottom: 1px solid var(--color-primary); - transition: border .1s; - outline: none; - } - } - .item.brand { - padding: 0 !important; + max-width: 100rem; + transition: padding 1s; min-height: var(--min-height) !important; - margin-right: calc(-30px + 2%)!important; - } - .item.brand a { - width: 35px; - height: 35px; - margin-right: 20px; - background-position: center; - img { - width: 100%; - height: 100%; - } - } - .right { - position: sticky; - right: 1%; - background-color: var(--color-navbar); - box-shadow: 100px 0px 0 var(--color-navbar); - width: 100%; - min-width: max-content; - justify-content: flex-end; - & > .item { - padding: 0 10px; - & > .text { + margin: auto; + + + & > .item:not(.brand), & > .right > .item { + color: var(--color-text-dark) !important; + font-size: 1rem !important; + font-weight: 600; + + padding: 0 calc(0px + 1.1%); + height: calc(var(--min-height) + 1px) !important; + margin: 0 !important; + border-radius: 0; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + margin-bottom: -1px !important; + background: none !important; + box-sizing: border-box; + transition: border .5s, padding .7s; + & > span { + height: 100%; display: flex; align-items: center; - span:not(.fitted) { - margin-left: 10px; - } - img ~ .fitted { - margin-left: 4px; + } + &:hover, &.active, &:focus { + border-bottom: 1px solid var(--color-primary); + transition: border .1s; + outline: none; + } + } + .item.brand { + padding: 0 !important; + min-height: var(--min-height) !important; + margin-right: calc(-30px + 2%)!important; + } + .item.brand a { + width: 35px; + height: 35px; + margin-right: 20px; + background-position: center; + img { + width: 100%; + height: 100%; + } + } + .right { + position: sticky; + right: 1%; + background-color: var(--color-navbar); + box-shadow: 100px 0px 0 var(--color-navbar); + width: 100%; + min-width: max-content; + justify-content: flex-end; + & > .item { + padding: 0 10px; + & > .text { + display: flex; + align-items: center; + span:not(.fitted) { + margin-left: 10px; + } + img ~ .fitted { + margin-left: 4px; + } } } } } } - /* Page content when width is larger than 850px */ @media only screen and (min-width: 850px) { // Still tweaking selectors a bit @@ -994,6 +1025,32 @@ html { } + // Issue Comments + .comment { + border-radius: 100px; + .reactions { + border: 0 !important; + padding: 0 1em; + margin-top: -.4em !important; + padding-bottom: .4em !important; + & > a { + padding: 4px 8px !important; + margin-right: .5em; + margin-bottom: .5em; + border: 1px solid var(--color-secondary); + border-radius: calc(var(--base-border-radius) * 2); + + .reaction { + font-size: 1em; + } + } + .select-reaction { + padding: 0 !important; + } + } + } + + .ui.grid > .eleven { margin-left: 1rem; } @@ -1154,8 +1211,6 @@ html { } - - /* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */ .issue.list, .milestone.list { border: 1px solid var(--color-secondary); @@ -1461,6 +1516,7 @@ html { border-radius: var(--base-border-radius) var(--base-border-radius) 0 0; padding: 12px 12px !important; position: relative; + overflow: hidden; & + .news { border-radius: 0 !important; } @@ -1492,15 +1548,22 @@ html { margin: 0 !important; padding: 0 !important; padding-top: 1px !important; + min-height: 31px; & > .column { padding: 0 !important; width: 100% !important; & > div { display: flex; flex-wrap: wrap; - min-height: 60px; + min-height: 100%; & > *:first-child { - min-width: 100%; + // min-width: 100%; + min-width: calc(100% - 200px); + margin-bottom: 0 !important; + } + & > :not(:first-child):not(:last-child) { + min-width: calc(100% - 200px); + margin-top: .3em; } & > *:last-child { margin-left: auto; @@ -1519,14 +1582,22 @@ html { & > .right.column { position: absolute; - top: 48px; + top: 35px; left: 0; - width: 52px !important; + width: 53px !important; text-align: center; + z-index: 2; svg { - width: 28px; - height: 28px; - padding: 4px; + width: 26px; + height: 26px; + padding: 3px; + fill: black !important; + background-color: var(--color-box-body); + border-radius: 100px; + border: 1px solid var(--color-secondary); + path { + fill: var(--color-primary); + } } } .title, p, ul { @@ -1709,8 +1780,6 @@ html { width: 1400px; margin-bottom: -45px; - - /* Move Navbar to the side */ .dashboard-navbar { width: auto; @@ -1793,7 +1862,6 @@ html { } } - /* Main Content */ & > .ui.container { margin: 0 auto !important; @@ -1803,7 +1871,6 @@ html { --container-padding-x: calc(2.5% + 0px); - & > .ui.stackable.grid { width: 100%; justify-content: center; @@ -1867,7 +1934,7 @@ html { } } /* Right Sidebar */ - #app { + #app, #dashboard-repo-list { height: min-content; position: sticky; @@ -1918,7 +1985,8 @@ html { margin-bottom: 0; } .dashboard-repos, .dashboard-orgs { - margin: 0 !important; + margin: 0 -10px !important; + padding: 0 10px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; @@ -1927,6 +1995,7 @@ html { height: 0; flex-grow: 1; padding-top: 15px; + scrollbar-color: var(--color-secondary) transparent; .repos-search .input { margin-bottom: 8px; } @@ -1937,8 +2006,29 @@ html { border: 0; background: none; } + + .label { + padding: 0 .5em !important; + height: 1.4em; + min-height: unset; + font-size: .9em; + min-width: 2em !important; + position: relative; + background: none; + margin-left: .5em; + &::before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-primary); + opacity: .9; + z-index: -1; + border-radius: 100px; + } + } + .header { - padding-top: 5px; + // padding-top: 10px; font-weight: 600; a { display: flex; @@ -1959,8 +2049,20 @@ html { background: none !important; } } + .repos-filter { + justify-content: flex-start; + .active { + font-weight: 600; + &::before { + content: unset !important; + } + .label { + font-size: 1em; + } + } + } .table { - margin-top: 10px; + margin-top: 4px; } li { background: none; @@ -1968,7 +2070,16 @@ html { border: 0; a { padding: 5px 5px; - + position: relative; + &:hover:before { + content: ""; + position: absolute; + inset: -2px -6px; + background-color: var(--color-primary); + border-radius: var(--base-border-radius); + z-index: -1; + opacity: .1; + } .item-name { display: flex; align-items: center; @@ -1992,10 +2103,6 @@ html { } - - - - footer { border: 0; padding: 20px;