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;