From 76f712d163ab98e921a4801afaeca2813d29d820 Mon Sep 17 00:00:00 2001 From: Free Date: Thu, 12 Aug 2021 21:24:57 +0200 Subject: [PATCH] 1.0.3 - Fixed table stretching due to the grid - Better keyboard accessability - Fixed Codeberg dropdown --- Gitea/theme-gitea-modern.styl | 135 +++++++++++++++++++++++++--------- 1 file changed, 99 insertions(+), 36 deletions(-) diff --git a/Gitea/theme-gitea-modern.styl b/Gitea/theme-gitea-modern.styl index 6497f6d..4f69121 100644 --- a/Gitea/theme-gitea-modern.styl +++ b/Gitea/theme-gitea-modern.styl @@ -1,7 +1,14 @@ -/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */ + + +/* Update 1.0.3 +- Fixed table stretching due to the grid +- Better keyboard accessability +- Fixed Codeberg dropdown +*/ :root { --base-border-radius: 6px; + } html.theme-gitea, html.theme-arc-green { --fonts-override: var(--fonts-regular); @@ -12,6 +19,17 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { text-underline-offset: 5px; } } +* { + outline: 0px dashed var(--color-primary); + outline-offset: -2px; + transition: outline-color .5s, outline-offset .5s; +} +:focus-visible:not(input) { + box-shadow: 0 0 18px 0px var(--color-primary) !important; + border-radius: 2px; + outline: 2px solid var(--color-primary) !important; + outline-offset: 2px; +} @keyframes slideInY { from { opacity: 0; transform: scale(.97); } @@ -145,6 +163,37 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } } + +/* No Script Message */ +.full.height > span[style="display: inline !important;"]:first-child { + margin: auto; + line-height: 40px; + padding: 30px; + text-align: center; + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 40px; + background: var(--color-navbar); + border-bottom: 1px solid var(--color-secondary); + z-index: -1; + } + + /* Remove stuff that isn't needed when JS is disabled */ + & ~ .page-content { + #app, #user-heatmap, #user-heatmap + .divider { + display: none !important; + } + } + +} + + + +/*** Popups ***/ /* Tooltips */ .popup.tiny.inverted { background: var(--color-body); @@ -186,32 +235,8 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } -/* No Script Message */ -.full.height > span[style="display: inline !important;"]:first-child { - margin: auto; - line-height: 40px; - padding: 30px; - text-align: center; - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 40px; - background: var(--color-navbar); - border-bottom: 1px solid var(--color-secondary); - z-index: -1; - } - /* Remove stuff that isn't needed when JS is disabled */ - & ~ .page-content { - #app, #user-heatmap, #user-heatmap + .divider { - display: none !important; - } - } -} /** Other Elements **/ #user-heatmap { @@ -248,6 +273,26 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) { } + +/* Alerts */ +.alert-primary.p-10 { + border: 0 !important; + padding: 20px !important; + .close { + // padding: 10px; + span { + font-size: 1.7em; + font-weight: 200; + padding-right: 6px; + } + } + h4 { + margin-right: 1.7em; + font-weight: 600; + } +} + + /*** Menu's ***/ .ui.tabular.menu, .ui.tight.menu { position: relative; @@ -402,6 +447,11 @@ html { 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; @@ -532,6 +582,7 @@ html { background: none; color: var(--color-text); opacity: .7; + border-radius: 12px !important; svg { margin: 0; width: 22px; @@ -762,7 +813,6 @@ html { #repo-files-table { margin-top: 0; - overflow: hidden; background: none !important; thead { position: relative; @@ -797,6 +847,16 @@ html { display: inline-flex !important; transform: translateY(1px); } + + .message-wrapper { + overflow: visible; + display: inline-flex; + a { + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + } .commit-body { padding: 6px; @@ -821,7 +881,13 @@ html { } .truncate { + overflow: visible; + display: inline-flex; a { + margin: -8px 0; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; width: 100%; color: var(--color-text); &:hover, &:focus { @@ -885,12 +951,14 @@ html { max-width: 100% !important; display: grid; grid-template-columns: calc(100% - 100px) 100px; + grid-template-rows: min-content !important; + align-items: flex-start; & > * { grid-column: 1; } .repository-summary { grid-column: 2; - grid-row: 1 / span 6; + grid-row: 1 / span 50; border: 0; margin-top: 12px !important; margin-left: 30px; @@ -1330,6 +1398,9 @@ html { &:hover, &:focus-within { box-shadow: var(--lm-shadow); } + &:focus-within { + outline: 1px solid var(--color-primary) !important; + } .header { display: contents !important; @@ -1625,15 +1696,6 @@ html { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 1rem !important; - .close span { - font-size: 1.7em; - font-weight: 200; - margin-right: 2px; - } - h4 { - margin-right: 1.7em; - font-weight: 600; - } } } @@ -1732,3 +1794,4 @@ footer { } } +