From 2d3f276fda7e58188bf4b4c4a1ad0b17ddfbd76a Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 22 Aug 2021 02:32:07 +0200 Subject: [PATCH 1/3] 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; } } } From a8dc3517556dc2b89e6d441cb92013a8ce75d6f4 Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 22 Aug 2021 02:33:07 +0200 Subject: [PATCH 2/3] 1.0.5 --- Gitea/theme-gitea-modern.css | 119 ++++++++++++++++++++++++++++------- 1 file changed, 97 insertions(+), 22 deletions(-) diff --git a/Gitea/theme-gitea-modern.css b/Gitea/theme-gitea-modern.css index 19a3820..ca1a16d 100644 --- a/Gitea/theme-gitea-modern.css +++ b/Gitea/theme-gitea-modern.css @@ -1,7 +1,6 @@ -/* 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. */ :root { --base-border-radius: 6px; @@ -17,16 +16,16 @@ a[rel*="nofollow"]:not(.ui):focus, text-decoration: underline; text-underline-offset: 5px; } -* { +*:not(input) { outline: 0px dashed var(--color-primary); - outline-offset: -2px; + outline-offset: -3px; transition: outline-color 0.5s, outline-offset 0.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; } /*** Change Border Radius's ***/ .ui.buttons .ui.basic.button { @@ -105,8 +104,7 @@ a[rel*="nofollow"]:not(.ui):focus, border: 0 !important; } .input.action.fluid:focus-within { - outline: 1px solid var(--color-primary); - outline-offset: -1px; + border-color: var(--color-primary) !important; } .ui.form + .ui.divider { display: none; @@ -524,6 +522,17 @@ html { align-self: flex-end; align-content: flex-start; min-height: calc(100vh - 40px); + z-index: 2; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs::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: 0.8; } .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular { flex-direction: column !important; @@ -596,6 +605,33 @@ html { .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) > .ui.container { width: 100%; } + #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; + } + #project-board > .board { + overflow: visible; + margin: 0 auto; + padding-left: 100px; + box-sizing: content-box; + width: 1227px; + } + #project-board > .board::after { + content: ""; + display: flex; + min-width: 100px; + } + #project-board > .board .board-column { + height: calc(100vh - 150px); + } + #project-board > .board .card { + box-sizing: border-box; + } } /* Default Page Content, no width restraint */ .page-content.repository:not(.milestones) { @@ -875,6 +911,13 @@ html { .page-content.repository:not(.milestones) > .ui.container .issue.list { margin-top: -8px !important; } +.page-content.repository:not(.milestones) > .ui.container .diff-box.sticky { + margin: 0 -1px; + border-bottom: 0; +} +.page-content.repository:not(.milestones) > .ui.container .sticky-2nd-row { + box-shadow: 0 -2px 0 2px var(--color-body); +} .page-content.repository:not(.milestones) > .ui.container .ui.grid > .eleven { margin-left: 1rem; } @@ -1079,9 +1122,21 @@ html { padding-bottom: 6px !important; position: relative; } -.issue.list li:hover, -.milestone.list li:hover { - box-shadow: inset 0 0 600px -300px var(--color-primary); +.issue.list li:hover:before, +.milestone.list li:hover:before, +.issue.list li:focus-within:before, +.milestone.list li:focus-within:before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-primary); + z-index: 0; + opacity: 0.07; + pointer-events: none; +} +.issue.list li > *, +.milestone.list li > * { + z-index: 1; } .issue.list li .issue-item-left, .milestone.list li .issue-item-left { @@ -1316,9 +1371,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); } @@ -1346,7 +1401,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); @@ -1372,7 +1427,7 @@ html { text-overflow: ellipsis; overflow: hidden; } -/* DASHBOARD / USER FEEDS */ +/* USER FEEDS */ .ui.container > .news, .feeds > .news { border: 1px solid var(--color-secondary) !important; @@ -1475,6 +1530,7 @@ html { } .ui.container > .news .ui.grid ul, .feeds > .news .ui.grid ul { + margin-top: 0; border-left: 4px solid var(--color-secondary); } .ui.container > .news .divider, @@ -1512,7 +1568,7 @@ html { } .ui.repository.list .item:focus-within, .ui.user.list .item:focus-within { - outline: 1px solid var(--color-primary) !important; + border-color: var(--color-primary) !important; } .ui.repository.list .item .header, .ui.user.list .item .header { @@ -1602,18 +1658,28 @@ html { overflow-x: auto; scrollbar-width: none; margin-top: 8px; + border-radius: 100px; +} +.ui.repository.list .item .description .tags::-webkit-scrollbar, +.ui.user.list .item .description .tags::-webkit-scrollbar { + display: none; } .ui.repository.list .item .description .tags a > div, .ui.user.list .item .description .tags a > div { width: max-content !important; } +.ui.repository.list .item .description .tags a:last-child, +.ui.user.list .item .description .tags a:last-child { + padding-right: 100px; +} .ui.repository.list .item .description .tags::after, .ui.user.list .item .description .tags::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; @@ -1648,7 +1714,7 @@ html { margin: auto; max-width: 100%; padding: 30px 0; - width: 1300px; + width: 1400px; margin-bottom: -45px; /* Move Navbar to the side */ /* Main Content */ @@ -1753,6 +1819,7 @@ 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; } .dashboard > .ui.container > .ui.stackable.grid > .column { @@ -1760,6 +1827,9 @@ html { margin: 0 auto; flex-grow: 1; } +.dashboard > .ui.container > .ui.stackable.grid > .column #user-heatmap + .divider { + border-bottom: 0; +} .dashboard > .ui.container > .ui.stackable.grid > .column .ui.secondary.menu, .dashboard > .ui.container > .ui.stackable.grid > .column .ui.stackable.grid { margin-left: 0 !important; @@ -1777,7 +1847,7 @@ html { } .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu 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); @@ -1922,14 +1992,19 @@ html { .dashboard > .ui.container #app .dashboard-orgs li a .item-name { display: flex; align-items: center; + max-width: unset; + margin-right: 10px; } .dashboard > .ui.container #app .dashboard-repos li a .item-name svg, .dashboard > .ui.container #app .dashboard-orgs li a .item-name svg { margin-right: 8px !important; + min-width: 16px; } .dashboard > .ui.container #app .dashboard-repos li a strong, .dashboard > .ui.container #app .dashboard-orgs li a strong { font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; } footer { border: 0; From 57e3ad4c3995d60ac76e3255e4dab4b733aa4a91 Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 22 Aug 2021 02:37:34 +0200 Subject: [PATCH 3/3] 1.0.5 --- Gitea/theme-gitea-modern.user.css | 119 +++++++++++++++++++++++++----- 1 file changed, 101 insertions(+), 18 deletions(-) diff --git a/Gitea/theme-gitea-modern.user.css b/Gitea/theme-gitea-modern.user.css index 92bac14..07e3e2b 100644 --- a/Gitea/theme-gitea-modern.user.css +++ b/Gitea/theme-gitea-modern.user.css @@ -1,6 +1,6 @@ /* ==UserStyle== @name Gitea Modern -@version 1.0.4 +@version 1.0.5 @description A modern style for Gitea and Codeberg! @updateURL https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/theme-gitea-modern.user.css @homepageURL https://codeberg.org/Freeplay/CSS-Styles @@ -29,16 +29,16 @@ text-decoration: underline; text-underline-offset: 5px; } - * { + *:not(input) { outline: 0px dashed var(--color-primary); - outline-offset: -2px; + outline-offset: -3px; transition: outline-color 0.5s, outline-offset 0.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; } .ui.buttons .ui.basic.button { border-radius: 0; @@ -114,8 +114,7 @@ border: 0 !important; } .input.action.fluid:focus-within { - outline: 1px solid var(--color-primary); - outline-offset: -1px; + border-color: var(--color-primary) !important; } .ui.form + .ui.divider { display: none; @@ -520,6 +519,17 @@ align-self: flex-end; align-content: flex-start; min-height: calc(100vh - 40px); + z-index: 2; + } + .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs::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: 0.8; } .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular { flex-direction: column !important; @@ -592,6 +602,33 @@ .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) > .ui.container { width: 100%; } + #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; + } + #project-board > .board { + overflow: visible; + margin: 0 auto; + padding-left: 100px; + box-sizing: content-box; + width: 1227px; + } + #project-board > .board::after { + content: ""; + display: flex; + min-width: 100px; + } + #project-board > .board .board-column { + height: calc(100vh - 150px); + } + #project-board > .board .card { + box-sizing: border-box; + } } .page-content.repository:not(.milestones) { width: 1300px; @@ -870,6 +907,13 @@ .page-content.repository:not(.milestones) > .ui.container .issue.list { margin-top: -8px !important; } + .page-content.repository:not(.milestones) > .ui.container .diff-box.sticky { + margin: 0 -1px; + border-bottom: 0; + } + .page-content.repository:not(.milestones) > .ui.container .sticky-2nd-row { + box-shadow: 0 -2px 0 2px var(--color-body); + } .page-content.repository:not(.milestones) > .ui.container .ui.grid > .eleven { margin-left: 1rem; } @@ -1073,9 +1117,21 @@ padding-bottom: 6px !important; position: relative; } - .issue.list li:hover, - .milestone.list li:hover { - box-shadow: inset 0 0 600px -300px var(--color-primary); + .issue.list li:hover:before, + .milestone.list li:hover:before, + .issue.list li:focus-within:before, + .milestone.list li:focus-within:before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--color-primary); + z-index: 0; + opacity: 0.07; + pointer-events: none; + } + .issue.list li > *, + .milestone.list li > * { + z-index: 1; } .issue.list li .issue-item-left, .milestone.list li .issue-item-left { @@ -1308,9 +1364,9 @@ 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); } @@ -1338,7 +1394,7 @@ 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); @@ -1466,6 +1522,7 @@ } .ui.container > .news .ui.grid ul, .feeds > .news .ui.grid ul { + margin-top: 0; border-left: 4px solid var(--color-secondary); } .ui.container > .news .divider, @@ -1502,7 +1559,7 @@ } .ui.repository.list .item:focus-within, .ui.user.list .item:focus-within { - outline: 1px solid var(--color-primary) !important; + border-color: var(--color-primary) !important; } .ui.repository.list .item .header, .ui.user.list .item .header { @@ -1592,18 +1649,28 @@ overflow-x: auto; scrollbar-width: none; margin-top: 8px; + border-radius: 100px; + } + .ui.repository.list .item .description .tags::-webkit-scrollbar, + .ui.user.list .item .description .tags::-webkit-scrollbar { + display: none; } .ui.repository.list .item .description .tags a > div, .ui.user.list .item .description .tags a > div { width: max-content !important; } + .ui.repository.list .item .description .tags a:last-child, + .ui.user.list .item .description .tags a:last-child { + padding-right: 100px; + } .ui.repository.list .item .description .tags::after, .ui.user.list .item .description .tags::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; @@ -1637,7 +1704,7 @@ margin: auto; max-width: 100%; padding: 30px 0; - width: 1300px; + width: 1400px; margin-bottom: -45px; /* Move Navbar to the side */ /* Main Content */ @@ -1742,6 +1809,7 @@ flex-grow: 1; z-index: 1; padding: 15px var(--container-padding-x) !important; + padding-bottom: var(--container-padding-x) !important; margin: 0 auto !important; } .dashboard > .ui.container > .ui.stackable.grid > .column { @@ -1749,6 +1817,9 @@ margin: 0 auto; flex-grow: 1; } + .dashboard > .ui.container > .ui.stackable.grid > .column #user-heatmap + .divider { + border-bottom: 0; + } .dashboard > .ui.container > .ui.stackable.grid > .column .ui.secondary.menu, .dashboard > .ui.container > .ui.stackable.grid > .column .ui.stackable.grid { margin-left: 0 !important; @@ -1766,7 +1837,7 @@ } .dashboard > .ui.container > .ui.stackable.grid .four.wide.column > .menu 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); @@ -1911,14 +1982,19 @@ .dashboard > .ui.container #app .dashboard-orgs li a .item-name { display: flex; align-items: center; + max-width: unset; + margin-right: 10px; } .dashboard > .ui.container #app .dashboard-repos li a .item-name svg, .dashboard > .ui.container #app .dashboard-orgs li a .item-name svg { margin-right: 8px !important; + min-width: 16px; } .dashboard > .ui.container #app .dashboard-repos li a strong, .dashboard > .ui.container #app .dashboard-orgs li a strong { font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; } footer { border: 0; @@ -2014,3 +2090,10 @@ } } } +@-moz-document domain("codeberg.org") { + .item.brand a { + border-radius: 100px; + background-color: var(--color-primary) !important; + box-shadow: 0 1px 2px var(--color-primary); + } +}