diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index 8d9375de75..22cb620bfe 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -53,29 +53,17 @@ {{end}} {{if and .OrderedOAuth2Names .OAuth2Providers}} -
-
- {{.locale.Tr "sign_in_with"}} -
+
+
+ {{.locale.Tr "sign_in_or"}} +
+ diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl index 20b66b2ec3..79212d82a5 100644 --- a/templates/user/dashboard/navbar.tmpl +++ b/templates/user/dashboard/navbar.tmpl @@ -77,7 +77,7 @@ {{end}} {{if .ContextUser.IsOrganization}} -
+
{{svg "octicon-rss"}} {{.locale.Tr "activities"}} diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl index 7d50ce6071..0b46e43b4f 100644 --- a/templates/user/notification/notification_div.tmpl +++ b/templates/user/notification/notification_div.tmpl @@ -74,7 +74,7 @@ {{$.CsrfTokenHtml}} - +
diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl index b9f8af34c7..e7a685bb9f 100644 --- a/templates/user/settings/security/accountlinks.tmpl +++ b/templates/user/settings/security/accountlinks.tmpl @@ -8,7 +8,7 @@ {{range $key := .OrderedOAuth2Names}} {{$provider := index $.OAuth2Providers $key}} - {{$provider.DisplayName}} + {{$provider.DisplayName}} {{$provider.DisplayName}} {{end}} diff --git a/web_src/css/admin.css b/web_src/css/admin.css index 617462542a..792b76d3e2 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -20,7 +20,7 @@ width: calc(100% - 245px); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .admin dl.admin-dl-horizontal dd { width: calc(100% - 185px); } @@ -40,7 +40,7 @@ white-space: nowrap; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .admin dl.admin-dl-horizontal dt { width: 160px; } diff --git a/web_src/css/base.css b/web_src/css/base.css index a35eccb26b..38faf2287c 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -73,8 +73,9 @@ --color-secondary-alpha-70: #dededeb3; --color-secondary-alpha-80: #dededecc; --color-secondary-alpha-90: #dededee1; - --color-secondary-hover: var(--color-secondary-dark-1); - --color-secondary-active: var(--color-secondary-dark-2); + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-5); + --color-secondary-active: var(--color-secondary-dark-6); /* console colors - used for actions console and console files */ --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; @@ -187,26 +188,24 @@ --color-text-light-3: #a0a0a0; --color-box-header: #f7f7f7; --color-box-body: #ffffff; - --color-box-body-highlight: #f8f8f8; + --color-box-body-highlight: #fafafa; --color-footer: #ffffff; --color-timeline: #ececec; --color-input-text: #212121; - --color-input-background: #ffffff; + --color-input-background: #fafafa; --color-input-toggle-background: #dedede; - --color-input-border: #dedede; - --color-input-border-hover: #cecece; - --color-navbar: #f8f8f8; - --color-navbar-transparent: #f8f8f800; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; --color-hover: #00000014; - --color-active: #0000001e; - --color-menu: #ffffff; - --color-card: #ffffff; + --color-active: #0000001b; + --color-menu: #fafafa; + --color-card: #fafafa; --color-markup-table-row: #00000008; --color-markup-code-block: #00000010; - --color-button: #ffffff; + --color-button: #fafafa; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000030; @@ -223,7 +222,8 @@ --color-reaction-active-bg: var(--color-primary-light-6); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-header-bar: #ffffff; + --color-nav-bg: #ffffff; + --color-nav-hover-bg: #ebebeb; --color-label-text: #232323; --color-label-bg: #cacaca5b; --color-label-hover-bg: #cacacaa0; @@ -414,11 +414,6 @@ a.silenced:hover { text-decoration: none; } -.delete-button, -.delete-button:hover { - color: var(--color-red); -} - a.label, .repository-menu a, .ui.search .results a, @@ -461,10 +456,8 @@ a.label, background-color: var(--color-markup-code-block); } -/* try to match button with no icons in height */ -.icon-button { - padding-top: 7.42px !important; - padding-bottom: 7.42px !important; +.ui.divider { + color: var(--color-text); } .ui.divider:not(.vertical,.horizontal) { @@ -504,8 +497,9 @@ a.label, border-right-color: transparent; } +.ui.action.input:not([class*="left action"]) > input, .ui.action.input:not([class*="left action"]) > input:hover { - border-right-color: transparent; + border-right: 1px solid transparent; } .ui.action.input:not([class*="left action"]) > input:focus { @@ -677,7 +671,7 @@ a.label, } .ui.menu .dropdown.item .menu { - background: var(--color-menu); + background: var(--color-body); } .ui.menu .ui.dropdown .menu > .item { @@ -936,7 +930,7 @@ img.ui.avatar, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .page-content .ui.ui.ui.container:not(.fluid) { width: calc(100vw - 16px); max-width: calc(100vw - 16px); @@ -946,56 +940,101 @@ img.ui.avatar, } } -.following.bar { +#navbar { + display: flex; + align-items: center; + background: var(--color-nav-bg); + border-bottom: 1px solid var(--color-secondary); + width: 100vw; + min-height: 52px; margin: 0 !important; } -.following.bar.light { - background: var(--color-header-bar); - border-bottom: 1px solid var(--color-secondary); +#navbar a.item:hover { + background: var(--color-nav-hover-bg); } -.following.bar .column .menu { - margin-top: 0; +#navbar .navbar-mobile-right { + margin-left: auto; } -.following.bar .fitted .svg { +#navbar .navbar-mobile-right a.item:hover { + background: transparent; +} + +#navbar .secondary.menu > .item > .svg, +#navbar .right.menu > .item > .svg { margin-right: 0; - vertical-align: middle; } -.following.bar .searchbox { - background-color: var(--color-input-background) !important; -} - -.following.bar .text .svg { - width: 16px; - text-align: center; -} - -.following.bar #navbar { - width: 100vw; - min-height: 52px; -} - -.following.bar #navbar .dropdown .avatar { - margin-right: 0 !important; -} - -@media (max-width: 767px) { - .following.bar #navbar:not(.shown) > *:not(:first-child) { +@media (max-width: 767.98px) { + /* hide all items */ + #navbar .item { display: none; } + /* show the first navbar item (logo and its mobile right items) */ + #navbar > .item:first-child { + display: flex; + padding-top: 5px; + padding-bottom: 5px; + } + #navbar .navbar-mobile-right > .item { + display: flex; + } + /* show items if the navbar is open */ + #navbar.navbar-menu-open .item { + display: flex; + } + #navbar.navbar-menu-open > .item:first-child { + padding-bottom: 0; + } } -.right.stackable.menu { - /* responsive fix: this makes sure that the right menu when the page */ - /* is on mobile view will have elements stacked on top of each other. */ - /* no, stackable won't work on right menus. */ - margin-left: auto; +@media (min-width: 767.98px) { + #navbar .navbar-mobile-right, + #navbar .mobile-only { + display: none; + } + #navbar .right.menu { + padding-right: 1em; + } +} + +#navbar .navbar-mobile-right .item { + width: auto !important; +} + +#navbar a.item .notification_count { + color: var(--color-nav-bg); + padding: 0 3.75px; + font-size: 12px; + line-height: 12px; + font-weight: var(--font-weight-bold); +} + +#navbar a.item:hover .notification_count, +#navbar a.item:hover .header-stopwatch-dot { + border-color: var(--color-nav-hover-bg); +} + +#navbar a.item .notification_count, +#navbar a.item .header-stopwatch-dot { + background: var(--color-primary); + border: 2px solid var(--color-nav-bg); + position: absolute; + left: 6px; + top: -9px; + min-width: 17px; + min-height: 17px; + border-radius: 17px; display: flex; - align-items: inherit; - flex-direction: inherit; + align-items: center; + justify-content: center; +} + +#navbar .right.menu { + width: 100%; + justify-content: flex-end; } .ui.pagination.menu .active.item { @@ -1450,7 +1489,7 @@ img.ui.avatar, line-height: 20px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .ui.pagination.menu .item:not(.active,.navigation), .ui.pagination.menu .item.navigation span.navigation_label { display: none; @@ -1524,59 +1563,16 @@ img.ui.avatar, text-align: center; } -/* Conditional display */ -@media (min-width: 768px) { - .mobile-only, - .ui.button.mobile-only { - display: none !important; - } - - /* has the same behaviour of sr-only, hiding the content for */ - /* non-screenreaders, but is shown on mobile devices. */ - .sr-mobile-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } -} - -@media (max-width: 767px) { +@media (max-width: 767.98px) { /* double selector so it wins over .gt-df etc */ .not-mobile.not-mobile { display: none !important; } } -/* Accessibility for screen readers */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} - .ui.menu.new-menu { margin-bottom: 15px; - background: var(--color-navbar); + background: var(--color-header-wrapper); border-bottom: 1px solid var(--color-secondary) !important; overflow: auto; } @@ -1591,7 +1587,7 @@ img.ui.avatar, .ui.menu.new-menu::after { position: absolute; display: block; - background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%); + background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%); content: ''; right: 0; height: 39px; @@ -1608,7 +1604,7 @@ img.ui.avatar, margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .ui.menu.new-menu .item { width: auto !important; } @@ -1728,6 +1724,10 @@ i.icon.centerlock { color: var(--color-label-text); } +.ui.label > a { + opacity: .75; /* increase contrast over default fomantic .5 */ +} + .ui.active.label { background: var(--color-label-active-bg); border-color: var(--color-label-active-bg); @@ -2032,7 +2032,7 @@ a.ui.ui.ui.basic.primary.label:hover { .ui.basic.labels .label, .ui.basic.label { - background: var(--color-light); + background: var(--color-button); border-color: var(--color-light-border); color: var(--color-text-light); } @@ -2119,33 +2119,6 @@ a.ui.basic.label:hover { margin-top: 1rem; } -.header-stopwatch-dot { - position: absolute; - left: 8px; - top: -8px; - width: 13px; - height: 13px; - background: var(--color-primary); - border: 2px solid var(--color-header-bar); - border-radius: 100%; -} - -.notification_count { - position: absolute; - left: 7px; - top: -9px; - min-width: 1.5em; - text-align: center; - background: var(--color-primary); - border: 2px solid var(--color-header-bar); - color: var(--color-header-bar); - padding: 2.75px; - border-radius: 1em; - font-size: 11px; - font-weight: var(--font-weight-bold); - line-height: .7; -} - .rss-icon { display: inline-flex; color: var(--color-text-light-1); @@ -2226,19 +2199,6 @@ table th[data-sortt-desc] .svg { vertical-align: -0.075em; } -@supports (-webkit-hyphens:none) { - body:not(.safari-above125) .emoji, - body:not(.safari-above125) .reaction { - font-size: inherit; - vertical-align: inherit; - } - body:not(.safari-above125) .emoji img, - body:not(.safari-above125) .reaction img { - font-size: 1.25em; - vertical-align: -0.225em !important; - } -} - .emoji img, .reaction img { border-width: 0 !important; diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css index 72c29f6686..34428c5999 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -35,7 +35,7 @@ width: 15%; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .dashboard.feeds .filter.menu .item .floating.label, .dashboard.issues .filter.menu .item .floating.label { top: 10px; @@ -60,7 +60,7 @@ left: auto !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .dashboard.feeds .filter.menu, .dashboard.issues .filter.menu { width: 100%; @@ -90,7 +90,7 @@ max-width: 100%; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .dashboard .dashboard-navbar .ui.dropdown > .menu { position: static; } diff --git a/web_src/css/explore.css b/web_src/css/explore.css index ee05918e77..f4d1eed960 100644 --- a/web_src/css/explore.css +++ b/web_src/css/explore.css @@ -1,6 +1,6 @@ .explore .navbar { margin-bottom: 15px !important; - background-color: var(--color-navbar) !important; + background-color: var(--color-header-wrapper) !important; border-width: 1px !important; } diff --git a/web_src/css/form.css b/web_src/css/form.css index dfa7208ca2..9527ef9d46 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -197,7 +197,7 @@ textarea:focus, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { #create-page-form form .optional .title { margin-left: 15px; } @@ -309,12 +309,13 @@ textarea:focus, .user.reset.password form .inline.field > textarea, .user.link-account form .inline.field > textarea, .user.signin form .inline.field > textarea, - .user.signup form .inline.field > textarea { + .user.signup form .inline.field > textarea, + .oauth-login-link { width: 50%; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.activate form .optional .title, .user.forgot.password form .optional .title, .user.reset.password form .optional .title, @@ -352,7 +353,7 @@ textarea:focus, width: 200px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.activate form .inline.field > label, .user.forgot.password form .inline.field > label, .user.reset.password form .inline.field > label, @@ -364,7 +365,8 @@ textarea:focus, .user.reset.password form input, .user.link-account form input, .user.signin form input, - .user.signup form input { + .user.signup form input, + .oauth-login-link { width: 100% !important; } } @@ -447,7 +449,7 @@ textarea:focus, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.repo form .optional .title, .repository.new.migrate form .optional .title, .repository.new.fork form .optional .title { @@ -481,7 +483,7 @@ textarea:focus, width: 50% !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.repo form label, .repository.new.migrate form label, .repository.new.fork form label, @@ -514,7 +516,7 @@ textarea:focus, width: 50% !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.repo .ui.form .selection.dropdown:not(.owner) { width: 100% !important; } @@ -532,7 +534,7 @@ textarea:focus, font-family: var(--fonts-monospace); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .new.org .ui.form .field button, .new.org .ui.form .field a { margin-bottom: 1em; diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 14ef64b252..eb0cf02068 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -11,7 +11,6 @@ Gitea's private styles use `g-` prefix. .gt-ab { align-items: baseline !important; } .gt-tc { text-align: center !important; } .gt-tl { text-align: left !important; } -.gt-tdn { text-decoration: none !important; } .gt-jc { justify-content: center !important; } .gt-js { justify-content: flex-start !important; } .gt-je { justify-content: flex-end !important; } @@ -76,6 +75,7 @@ Gitea's private styles use `g-` prefix. .gt-self-center { align-self: center !important; } .gt-self-start { align-self: flex-start !important; } .gt-self-end { align-self: flex-end !important; } +.gt-no-underline { text-decoration-line: none !important; } .gt-overflow-x-auto { overflow-x: auto !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } @@ -124,6 +124,14 @@ Gitea's private styles use `g-` prefix. .gt-text-white { color: var(--color-white) !important; } +.interact-fg { color: inherit !important; } +.interact-fg:hover { color: var(--color-primary) !important; } +.interact-fg:active { color: var(--color-primary-active) !important; } + +.interact-bg { background: transparent !important; } +.interact-bg:hover { background: var(--color-hover) !important; } +.interact-bg:active { background: var(--color-active) !important; } + .gt-m-0 { margin: 0 !important; } .gt-m-1 { margin: .125rem !important; } .gt-m-2 { margin: .25rem !important; } @@ -253,6 +261,7 @@ Gitea's private styles use `g-` prefix. .gt-shrink-0 { flex-shrink: 0 !important; } +.gt-font-12 { font-size: 12px !important } .gt-font-13 { font-size: 13px !important } .gt-font-14 { font-size: 14px !important } .gt-font-15 { font-size: 15px !important } @@ -260,7 +269,7 @@ Gitea's private styles use `g-` prefix. .gt-font-17 { font-size: 17px !important } .gt-font-18 { font-size: 18px !important } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .gt-db-small { display: block !important; } .gt-w-100-small { width: 100% !important; } .gt-js-small { justify-content: flex-start !important; } diff --git a/web_src/css/home.css b/web_src/css/home.css index 0094acc75f..a46c46ffde 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -2,7 +2,7 @@ max-width: 220px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .home .hero h1 { font-size: 3.5em; } diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index d9bc69043d..72eb1f3989 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -1,44 +1,21 @@ /* this contains override styles for buttons and related elements */ -.ui.button { +.ui.button, +.ui.button:focus { background: var(--color-button); border: 1px solid var(--color-light-border); color: var(--color-text); } -/* a ghost button is a button without border */ -.button.button-ghost { - background: transparent; - border: none; - color: inherit; - margin: 0; - padding: 0; -} - -.button.button-ghost:hover { +.ui.button:hover { background: var(--color-hover); -} - -.button.button-ghost:active { - background: var(--color-active); -} - -.ui.button.button-link { - background: transparent; - border: none; - color: inherit; + color: var(--color-text); } .page-content .ui.button { box-shadow: none !important; } -.ui.button:focus, -.ui.button:hover { - background: var(--color-hover); - color: var(--color-text); -} - .ui.active.button, .ui.button:active, .ui.active.button:active, @@ -51,6 +28,42 @@ margin: 0 !important; } +.delete-button, +.delete-button:hover { + color: var(--color-red); +} + +/* try to match button with no icons in height */ +.icon-button { + padding-top: 7.42px !important; + padding-bottom: 7.42px !important; +} + +/* btn is a plain button without any opinionated styling */ + +.btn { + background: transparent; + border-radius: var(--border-radius); + border: none; + color: inherit; + margin: 0; + padding: 0; +} + +.btn:hover, +.btn:active, +.btn:focus { + background: none; + border: none; +} + +a.btn, +a.btn:hover { + color: inherit; +} + +/* other button styles */ + .ui.buttons .button:first-child { border-left: 1px solid var(--color-light-border); } @@ -63,10 +76,6 @@ border-left: none; } -.ui.button.button-link:hover { - color: var(--color-primary); -} - .two-toggle-buttons .button:not(.active):first-of-type { border-right: none; } @@ -77,9 +86,11 @@ .ui.labeled.button.disabled > .button, .ui.basic.buttons .button, -.ui.basic.button { +.ui.basic.button, +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { color: var(--color-text-light); - background: var(--color-light); + background: var(--color-button); } .ui.basic.buttons .button:hover, @@ -88,8 +99,7 @@ background: var(--color-hover); } -.ui.basic.buttons .button:focus, -.ui.basic.button:focus, + .ui.basic.buttons .button:active, .ui.basic.button:active, .ui.basic.buttons .active.button, @@ -114,14 +124,14 @@ .ui.primary.labels .label, .ui.ui.ui.primary.label, .ui.primary.button, -.ui.primary.buttons .button { +.ui.primary.buttons .button, +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { background: var(--color-primary); } .ui.primary.button:hover, -.ui.primary.buttons .button:hover, -.ui.primary.button:focus, -.ui.primary.buttons .button:focus { +.ui.primary.buttons .button:hover { background: var(--color-primary-hover); } @@ -131,15 +141,15 @@ } .ui.basic.primary.buttons .button, -.ui.basic.primary.button { +.ui.basic.primary.button, +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { color: var(--color-primary); border-color: var(--color-primary); } .ui.basic.primary.buttons .button:hover, -.ui.basic.primary.button:hover, -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { +.ui.basic.primary.button:hover { color: var(--color-primary-hover); border-color: var(--color-primary-hover); } @@ -155,47 +165,46 @@ .ui.secondary.labels .label, .ui.ui.ui.secondary.label, .ui.secondary.button, -.ui.secondary.buttons .button { - background: var(--color-secondary); - color: var(--color-text); +.ui.secondary.buttons .button, +.ui.secondary.button:focus, +.ui.secondary.buttons .button:focus { + background: var(--color-secondary-button); } .ui.secondary.button:hover, -.ui.secondary.buttons .button:hover, -.ui.secondary.button:focus, -.ui.secondary.buttons .button:focus { - background: var(--color-secondary-dark-1); - color: var(--color-text); +.ui.secondary.buttons .button:hover { + background: var(--color-secondary-hover); } .ui.secondary.button:active, .ui.secondary.buttons .button:active { - background: var(--color-secondary-dark-2); - color: var(--color-text); + background: var(--color-secondary-active); } .ui.basic.secondary.buttons .button, -.ui.basic.secondary.button { - color: var(--color-secondary-dark-6) !important; +.ui.basic.secondary.button, +.ui.basic.secondary.button:focus, +.ui.basic.secondary.buttons .button:focus { + color: var(--color-secondary-button); + border-color: var(--color-secondary-button); } .ui.basic.secondary.buttons .button:hover, -.ui.basic.secondary.button:hover, -.ui.basic.secondary.buttons .button:active, -.ui.basic.secondary.button:active { - color: var(--color-secondary-dark-8) !important; - border-color: var(--color-secondary-dark-1) !important; +.ui.basic.secondary.button:hover { + color: var(--color-secondary-hover); + border-color: var(--color-secondary-hover); } -.ui.basic.secondary.button:focus, -.ui.basic.secondary.buttons .button:focus { - color: var(--color-secondary-dark-8) !important; - border-color: var(--color-secondary-dark-3) !important; +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + color: var(--color-secondary-active); + border-color: var(--color-secondary-active); } /* tertiary */ -.ui.tertiary.button { +.ui.tertiary.button, +.ui.tertiary.button:focus { color: var(--color-text-light); border: none; } @@ -204,7 +213,7 @@ color: var(--color-text); } -.ui.tertiary.button:focus { +.ui.tertiary.button:active { color: var(--color-text-dark); } @@ -213,14 +222,14 @@ .ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, -.ui.red.buttons .button { +.ui.red.buttons .button, +.ui.red.button:focus, +.ui.red.buttons .button:focus { background: var(--color-red); } .ui.red.button:hover, -.ui.red.buttons .button:hover, -.ui.red.button:focus, -.ui.red.buttons .button:focus { +.ui.red.buttons .button:hover { background: var(--color-red-dark-1); } @@ -230,15 +239,15 @@ } .ui.basic.red.buttons .button, -.ui.basic.red.button { +.ui.basic.red.button, +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { color: var(--color-red); border-color: var(--color-red); } .ui.basic.red.buttons .button:hover, -.ui.basic.red.button:hover, -.ui.basic.red.buttons .button:focus, -.ui.basic.red.button:focus { +.ui.basic.red.button:hover { color: var(--color-red-dark-1); border-color: var(--color-red-dark-1); } @@ -254,14 +263,14 @@ .ui.orange.labels .label, .ui.ui.ui.orange.label, .ui.orange.button, -.ui.orange.buttons .button { +.ui.orange.buttons .button, +.ui.orange.button:focus, +.ui.orange.buttons .button:focus { background: var(--color-orange); } .ui.orange.button:hover, -.ui.orange.buttons .button:hover, -.ui.orange.button:focus, -.ui.orange.buttons .button:focus { +.ui.orange.buttons .button:hover { background: var(--color-orange-dark-1); } @@ -271,15 +280,15 @@ } .ui.basic.orange.buttons .button, -.ui.basic.orange.button { +.ui.basic.orange.button, +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { color: var(--color-orange); border-color: var(--color-orange); } .ui.basic.orange.buttons .button:hover, -.ui.basic.orange.button:hover, -.ui.basic.orange.buttons .button:focus, -.ui.basic.orange.button:focus { +.ui.basic.orange.button:hover { color: var(--color-orange-dark-1); border-color: var(--color-orange-dark-1); } @@ -295,14 +304,14 @@ .ui.yellow.labels .label, .ui.ui.ui.yellow.label, .ui.yellow.button, -.ui.yellow.buttons .button { +.ui.yellow.buttons .button, +.ui.yellow.button:focus, +.ui.yellow.buttons .button:focus { background: var(--color-yellow); } .ui.yellow.button:hover, -.ui.yellow.buttons .button:hover, -.ui.yellow.button:focus, -.ui.yellow.buttons .button:focus { +.ui.yellow.buttons .button:hover { background: var(--color-yellow-dark-1); } @@ -312,15 +321,15 @@ } .ui.basic.yellow.buttons .button, -.ui.basic.yellow.button { +.ui.basic.yellow.button, +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { color: var(--color-yellow); border-color: var(--color-yellow); } .ui.basic.yellow.buttons .button:hover, -.ui.basic.yellow.button:hover, -.ui.basic.yellow.buttons .button:focus, -.ui.basic.yellow.button:focus { +.ui.basic.yellow.button:hover { color: var(--color-yellow-dark-1); border-color: var(--color-yellow-dark-1); } @@ -336,14 +345,14 @@ .ui.olive.labels .label, .ui.ui.ui.olive.label, .ui.olive.button, -.ui.olive.buttons .button { +.ui.olive.buttons .button, +.ui.olive.button:focus, +.ui.olive.buttons .button:focus { background: var(--color-olive); } .ui.olive.button:hover, -.ui.olive.buttons .button:hover, -.ui.olive.button:focus, -.ui.olive.buttons .button:focus { +.ui.olive.buttons .button:hover { background: var(--color-olive-dark-1); } @@ -353,15 +362,15 @@ } .ui.basic.olive.buttons .button, -.ui.basic.olive.button { +.ui.basic.olive.button, +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { color: var(--color-olive); border-color: var(--color-olive); } .ui.basic.olive.buttons .button:hover, -.ui.basic.olive.button:hover, -.ui.basic.olive.buttons .button:focus, -.ui.basic.olive.button:focus { +.ui.basic.olive.button:hover { color: var(--color-olive-dark-1); border-color: var(--color-olive-dark-1); } @@ -377,14 +386,14 @@ .ui.green.labels .label, .ui.ui.ui.green.label, .ui.green.button, -.ui.green.buttons .button { +.ui.green.buttons .button, +.ui.green.button:focus, +.ui.green.buttons .button:focus { background: var(--color-green); } .ui.green.button:hover, -.ui.green.buttons .button:hover, -.ui.green.button:focus, -.ui.green.buttons .button:focus { +.ui.green.buttons .button:hover { background: var(--color-green-dark-1); } @@ -394,15 +403,15 @@ } .ui.basic.green.buttons .button, -.ui.basic.green.button { +.ui.basic.green.button, +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { color: var(--color-green); border-color: var(--color-green); } .ui.basic.green.buttons .button:hover, -.ui.basic.green.button:hover, -.ui.basic.green.buttons .button:focus, -.ui.basic.green.button:focus { +.ui.basic.green.button:hover { color: var(--color-green-dark-1); border-color: var(--color-green-dark-1); } @@ -418,14 +427,14 @@ .ui.teal.labels .label, .ui.ui.ui.teal.label, .ui.teal.button, -.ui.teal.buttons .button { +.ui.teal.buttons .button, +.ui.teal.button:focus, +.ui.teal.buttons .button:focus { background: var(--color-teal); } .ui.teal.button:hover, -.ui.teal.buttons .button:hover, -.ui.teal.button:focus, -.ui.teal.buttons .button:focus { +.ui.teal.buttons .button:hover { background: var(--color-teal-dark-1); } @@ -435,15 +444,15 @@ } .ui.basic.teal.buttons .button, -.ui.basic.teal.button { +.ui.basic.teal.button, +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { color: var(--color-teal); border-color: var(--color-teal); } .ui.basic.teal.buttons .button:hover, -.ui.basic.teal.button:hover, -.ui.basic.teal.buttons .button:focus, -.ui.basic.teal.button:focus { +.ui.basic.teal.button:hover { color: var(--color-teal-dark-1); border-color: var(--color-teal-dark-1); } @@ -459,14 +468,14 @@ .ui.blue.labels .label, .ui.ui.ui.blue.label, .ui.blue.button, -.ui.blue.buttons .button { +.ui.blue.buttons .button, +.ui.blue.button:focus, +.ui.blue.buttons .button:focus { background: var(--color-blue); } .ui.blue.button:hover, -.ui.blue.buttons .button:hover, -.ui.blue.button:focus, -.ui.blue.buttons .button:focus { +.ui.blue.buttons .button:hover { background: var(--color-blue-dark-1); } @@ -476,15 +485,15 @@ } .ui.basic.blue.buttons .button, -.ui.basic.blue.button { +.ui.basic.blue.button, +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { color: var(--color-blue); border-color: var(--color-blue); } .ui.basic.blue.buttons .button:hover, -.ui.basic.blue.button:hover, -.ui.basic.blue.buttons .button:focus, -.ui.basic.blue.button:focus { +.ui.basic.blue.button:hover { color: var(--color-blue-dark-1); border-color: var(--color-blue-dark-1); } @@ -500,14 +509,14 @@ .ui.violet.labels .label, .ui.ui.ui.violet.label, .ui.violet.button, -.ui.violet.buttons .button { +.ui.violet.buttons .button, +.ui.violet.button:focus, +.ui.violet.buttons .button:focus { background: var(--color-violet); } .ui.violet.button:hover, -.ui.violet.buttons .button:hover, -.ui.violet.button:focus, -.ui.violet.buttons .button:focus { +.ui.violet.buttons .button:hover { background: var(--color-violet-dark-1); } @@ -517,15 +526,15 @@ } .ui.basic.violet.buttons .button, -.ui.basic.violet.button { +.ui.basic.violet.button, +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { color: var(--color-violet); border-color: var(--color-violet); } .ui.basic.violet.buttons .button:hover, -.ui.basic.violet.button:hover, -.ui.basic.violet.buttons .button:focus, -.ui.basic.violet.button:focus { +.ui.basic.violet.button:hover { color: var(--color-violet-dark-1); border-color: var(--color-violet-dark-1); } @@ -541,14 +550,14 @@ .ui.purple.labels .label, .ui.ui.ui.purple.label, .ui.purple.button, -.ui.purple.buttons .button { +.ui.purple.buttons .button, +.ui.purple.button:focus, +.ui.purple.buttons .button:focus { background: var(--color-purple); } .ui.purple.button:hover, -.ui.purple.buttons .button:hover, -.ui.purple.button:focus, -.ui.purple.buttons .button:focus { +.ui.purple.buttons .button:hover { background: var(--color-purple-dark-1); } @@ -558,15 +567,15 @@ } .ui.basic.purple.buttons .button, -.ui.basic.purple.button { +.ui.basic.purple.button, +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { color: var(--color-purple); border-color: var(--color-purple); } .ui.basic.purple.buttons .button:hover, -.ui.basic.purple.button:hover, -.ui.basic.purple.buttons .button:focus, -.ui.basic.purple.button:focus { +.ui.basic.purple.button:hover { color: var(--color-purple-dark-1); border-color: var(--color-purple-dark-1); } @@ -582,14 +591,14 @@ .ui.pink.labels .label, .ui.ui.ui.pink.label, .ui.pink.button, -.ui.pink.buttons .button { +.ui.pink.buttons .button, +.ui.pink.button:focus, +.ui.pink.buttons .button:focus { background: var(--color-pink); } .ui.pink.button:hover, -.ui.pink.buttons .button:hover, -.ui.pink.button:focus, -.ui.pink.buttons .button:focus { +.ui.pink.buttons .button:hover { background: var(--color-pink-dark-1); } @@ -599,15 +608,15 @@ } .ui.basic.pink.buttons .button, -.ui.basic.pink.button { +.ui.basic.pink.button, +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { color: var(--color-pink); border-color: var(--color-pink); } .ui.basic.pink.buttons .button:hover, -.ui.basic.pink.button:hover, -.ui.basic.pink.buttons .button:focus, -.ui.basic.pink.button:focus { +.ui.basic.pink.button:hover { color: var(--color-pink-dark-1); border-color: var(--color-pink-dark-1); } @@ -623,14 +632,14 @@ .ui.brown.labels .label, .ui.ui.ui.brown.label, .ui.brown.button, -.ui.brown.buttons .button { +.ui.brown.buttons .button, +.ui.brown.button:focus, +.ui.brown.buttons .button:focus { background: var(--color-brown); } .ui.brown.button:hover, -.ui.brown.buttons .button:hover, -.ui.brown.button:focus, -.ui.brown.buttons .button:focus { +.ui.brown.buttons .button:hover { background: var(--color-brown-dark-1); } @@ -640,15 +649,15 @@ } .ui.basic.brown.buttons .button, -.ui.basic.brown.button { +.ui.basic.brown.button, +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { color: var(--color-brown); border-color: var(--color-brown); } .ui.basic.brown.buttons .button:hover, -.ui.basic.brown.button:hover, -.ui.basic.brown.buttons .button:focus, -.ui.basic.brown.button:focus { +.ui.basic.brown.button:hover { color: var(--color-brown-dark-1); border-color: var(--color-brown-dark-1); } @@ -659,97 +668,17 @@ border-color: var(--color-brown-dark-2); } -/* grey */ - -.ui.grey.labels .label, -.ui.ui.ui.grey.label, -.ui.grey.button, -.ui.grey.buttons .button { - background: var(--color-grey); -} - -.ui.grey.button:hover, -.ui.grey.buttons .button:hover, -.ui.grey.button:focus, -.ui.grey.buttons .button:focus { - background: var(--color-grey-dark-1); -} - -.ui.grey.button:active, -.ui.grey.buttons .button:active { - background: var(--color-grey-dark-2); -} - -.ui.basic.grey.buttons .button, -.ui.basic.grey.button { - color: var(--color-grey); - border-color: var(--color-grey); -} - -.ui.basic.grey.buttons .button:hover, -.ui.basic.grey.button:hover, -.ui.basic.grey.buttons .button:focus, -.ui.basic.grey.button:focus { - color: var(--color-grey-dark-1); - border-color: var(--color-grey-dark-1); -} - -.ui.basic.grey.buttons .button:active, -.ui.basic.grey.button:active { - color: var(--color-grey-dark-2); - border-color: var(--color-grey-dark-2); -} - -/* black */ - -.ui.black.labels .label, -.ui.ui.ui.black.label, -.ui.black.button, -.ui.black.buttons .button { - background: var(--color-black); -} - -.ui.black.button:hover, -.ui.black.buttons .button:hover, -.ui.black.button:focus, -.ui.black.buttons .button:focus { - background: var(--color-black-dark-1); -} - -.ui.black.button:active, -.ui.black.buttons .button:active { - background: var(--color-black-dark-2); -} - -.ui.basic.black.buttons .button, -.ui.basic.black.button { - color: var(--color-black); - border-color: var(--color-black); -} - -.ui.basic.black.buttons .button:hover, -.ui.basic.black.button:hover, -.ui.basic.black.buttons .button:focus, -.ui.basic.black.button:focus { - color: var(--color-black-dark-1); - border-color: var(--color-black-dark-1); -} - -.ui.basic.black.buttons .button:active, -.ui.basic.black.button:active { - color: var(--color-black-dark-2); - border-color: var(--color-black-dark-2); -} +/* negative */ .ui.negative.buttons .button, -.ui.negative.button { +.ui.negative.button, +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { background: var(--color-red); } .ui.negative.buttons .button:hover, -.ui.negative.button:hover, -.ui.negative.buttons .button:focus, -.ui.negative.button:focus { +.ui.negative.button:hover { background: var(--color-red-dark-1); } @@ -758,18 +687,16 @@ background: var(--color-red-dark-2); } -/* negative */ - .ui.basic.negative.buttons .button, -.ui.basic.negative.button { +.ui.basic.negative.button, +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { color: var(--color-red); border-color: var(--color-red); } .ui.basic.negative.buttons .button:hover, -.ui.basic.negative.button:hover, -.ui.basic.negative.buttons .button:focus, -.ui.basic.negative.button:focus { +.ui.basic.negative.button:hover { color: var(--color-red-dark-1); border-color: var(--color-red-dark-1); } @@ -783,14 +710,14 @@ /* positive */ .ui.positive.buttons .button, -.ui.positive.button { +.ui.positive.button, +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { background: var(--color-green); } .ui.positive.buttons .button:hover, -.ui.positive.button:hover, -.ui.positive.buttons .button:focus, -.ui.positive.button:focus { +.ui.positive.button:hover { background: var(--color-green-dark-1); } @@ -800,15 +727,15 @@ } .ui.basic.positive.buttons .button, -.ui.basic.positive.button { +.ui.basic.positive.button, +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { color: var(--color-green); border-color: var(--color-green); } .ui.basic.positive.buttons .button:hover, -.ui.basic.positive.button:hover, -.ui.basic.positive.buttons .button:focus, -.ui.basic.positive.button:focus { +.ui.basic.positive.button:hover { color: var(--color-green-dark-1); border-color: var(--color-green-dark-1); } diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 8919abfec0..bd55b9d6b9 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -25,8 +25,8 @@ } .tippy-box[data-theme="menu"] { - background-color: transparent; - color: var(--color-tooltip-text); + background-color: var(--color-menu); + color: var(--color-text); } .tippy-content { diff --git a/web_src/css/org.css b/web_src/css/org.css index eb2dd8a4d9..7b73d8e572 100644 --- a/web_src/css/org.css +++ b/web_src/css/org.css @@ -31,7 +31,7 @@ } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { #create-page-form form .optional .title { margin-left: 15px; } @@ -77,7 +77,7 @@ } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .organization.new.org form .optional .title { margin-left: 15px; } @@ -222,7 +222,7 @@ height: 60px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .organization.teams #repo-top-segment { height: 100px; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4e300be878..99ef340177 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -132,7 +132,7 @@ } .repository .header-wrapper { - background-color: var(--color-navbar); + background-color: var(--color-header-wrapper); } .repository .header-wrapper .ui.tabs.divider { @@ -194,13 +194,13 @@ width: 320px; } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .repository #clone-panel #repo-clone-url { width: 200px; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository #clone-panel #repo-clone-url { width: 200px; } @@ -298,7 +298,7 @@ } } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .repository.file.list #repo-files-table td.name { max-width: 300px; } @@ -321,7 +321,7 @@ } } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .repository.file.list #repo-files-table td.message { max-width: 250px; } @@ -643,7 +643,7 @@ display: flex; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .issue-title { flex-direction: column; } @@ -939,7 +939,7 @@ border: 1px solid var(--color-light-border); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list .timeline-item .ui.segments { margin-left: -2rem; } @@ -964,7 +964,7 @@ border-radius: var(--border-radius); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list .comment .content .form .button { width: 100%; margin: 0; @@ -987,7 +987,7 @@ margin-bottom: -0.25rem; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list .comment .merge-section .item-section { align-items: flex-start; flex-direction: column; @@ -1133,7 +1133,7 @@ box-shadow: none; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list { padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */ } @@ -1597,7 +1597,7 @@ line-height: 30px; } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .repository .diff-detail-box { flex-direction: column; align-items: flex-start; @@ -1823,16 +1823,12 @@ clear: right; } -.repository .diff-file-box.file-content img { +.repository .diff-file-box.file-content .image-diff img { max-width: 100%; padding: 0; border-radius: 0; } -.repository .diff-file-box.file-content img.emoji { - padding: 0; -} - .repository .diff-file-box .ui.bottom.attached.table.segment { padding-top: 5px; padding-bottom: 5px; @@ -1853,7 +1849,7 @@ } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .diff-file-box { scroll-margin-top: 77px; /* match .repository .diff-detail-box */ } @@ -1961,14 +1957,14 @@ display: inline-block; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.wiki .dividing.header .stackable.grid .button { margin-top: 2px; margin-bottom: 2px; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.wiki #clone-panel #repo-clone-url { width: 160px; } @@ -2269,7 +2265,7 @@ border-radius: 0; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository .repository-summary .segment.language-stats { display: none; } @@ -2296,7 +2292,7 @@ width: 500px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { #cite-repo-modal #citation-panel { width: 100%; } @@ -2757,7 +2753,7 @@ tbody.commit-list { display: inline-block; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { tr.commit-list { width: 100%; } @@ -2770,7 +2766,7 @@ tbody.commit-list { } } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { tr.commit-list { width: 723px; } @@ -2866,7 +2862,7 @@ tbody.commit-list { word-break: break-word; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repo-header + .container { margin-top: 7px; } @@ -2880,7 +2876,7 @@ tbody.commit-list { word-break: keep-all; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repo-buttons { margin-top: 1em; } @@ -2927,7 +2923,7 @@ tbody.commit-list { pointer-events: none !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repo-buttons .ui.labeled.button .svg { display: none; } @@ -3025,7 +3021,7 @@ tbody.commit-list { color: var(--color-primary); } -@media (max-width: 991px) { +@media (max-width: 991.98px) { #diff-file-tree { display: none !important; } @@ -3085,8 +3081,7 @@ tbody.commit-list { } .diff-file-header { - padding-top: 5px !important; - padding-bottom: 5px !important; + padding: 5px 8px !important; } .diff-file-box[data-folded="true"] .diff-file-body { @@ -3103,7 +3098,7 @@ tbody.commit-list { z-index: 7; } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .ui.attached.header.diff-file-header.sticky-2nd-row { top: 77px; /* match .repository .diff-detail-box */ } @@ -3142,7 +3137,7 @@ tbody.commit-list { overflow: hidden; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository-summary-language-stats { height: auto; } @@ -3223,7 +3218,7 @@ tbody.commit-list { box-shadow: 0 0.5rem 1rem var(--color-shadow) !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.file.list #repo-files-table .entry, .repository.file.list #repo-files-table .commit-list { align-items: center; @@ -3345,13 +3340,13 @@ tbody.commit-list { vertical-align: bottom !important; } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .branch-dropdown-button { max-width: 185px; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .branch-dropdown-button { max-width: 165px; } @@ -3385,7 +3380,7 @@ tbody.commit-list { justify-content: flex-end; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .pr-status .status-details { flex-direction: column; align-items: flex-end; diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css index a475138e6b..1e5e51eac5 100644 --- a/web_src/css/repo/linebutton.css +++ b/web_src/css/repo/linebutton.css @@ -16,7 +16,7 @@ position: absolute; font-family: var(--fonts-regular); left: 0; - transform: translateX(-70%); + transform: translateX(-50%); cursor: pointer; } diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css index 24aa36dd89..69539b035b 100644 --- a/web_src/css/repo/list-header.css +++ b/web_src/css/repo/list-header.css @@ -28,9 +28,19 @@ .small-menu-items { min-height: 35.4px !important; /* match .small.button in height */ + background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */ } .small-menu-items .item { + background: var(--color-menu) !important; padding-top: 6px !important; padding-bottom: 6px !important; } + +.small-menu-items .item:hover { + background: var(--color-hover) !important; +} + +.small-menu-items .item.active { + background: var(--color-active) !important; +} diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index e786e5ff59..c537a7cfe0 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -119,7 +119,7 @@ } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.release .field button { margin-bottom: 1em; } diff --git a/web_src/css/review.css b/web_src/css/review.css index d44e98584e..4b35764c7a 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -67,7 +67,7 @@ max-width: 820px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .comment-code-cloud { max-width: none; padding: 0.75rem !important; @@ -91,7 +91,7 @@ padding: 0; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .comment-code-cloud .comments .comment { display: flex; } @@ -182,7 +182,7 @@ display: block; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .comment-code-cloud .button { width: 100%; margin: 0 !important; @@ -252,7 +252,7 @@ scroll-margin-top: 99px; } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .pull.files.diff .comment { scroll-margin-top: 130px; } diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index 89e1135ce9..ecbeaf1dfd 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -145,7 +145,7 @@ } .issue.list .branches .branch { - background-color: var(--color-secondary); + background-color: var(--color-secondary-alpha-40); border-radius: 3px; } diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index f6321c9ed7..6fc3d0874e 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -58,8 +58,9 @@ --color-secondary-alpha-70: #525767b3; --color-secondary-alpha-80: #525767cc; --color-secondary-alpha-90: #525767e1; - --color-secondary-hover: var(--color-secondary-light-1); - --color-secondary-active: var(--color-secondary-light-2); + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); /* console colors - used for actions console and console files */ --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; @@ -163,37 +164,37 @@ --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ - --color-body: #373b47; - --color-box-header: #404652; - --color-box-body: #2a2e3a; - --color-box-body-highlight: #353945; + --color-body: #2e323e; + --color-box-header: #303340; + --color-box-body: #222733; + --color-box-body-highlight: #262b36; --color-text-dark: #dbe0ea; --color-text: #cbd0da; --color-text-light: #bbbfca; --color-text-light-1: #aaafb9; --color-text-light-2: #9a9ea9; --color-text-light-3: #8a8e99; - --color-footer: #2e323e; + --color-footer: #232834; --color-timeline: #4c525e; --color-input-text: #dfe3ec; - --color-input-background: #232933; + --color-input-background: #1e252e; --color-input-toggle-background: #454a57; - --color-input-border: #454a57; - --color-input-border-hover: #505667; - --color-navbar: #2a2e3a; - --color-navbar-transparent: #2a2e3a00; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: #202430; + --color-header-wrapper-transparent: #20243000; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: #ffffff19; --color-active: #ffffff24; - --color-menu: #2e323e; - --color-card: #2e323e; + --color-menu: #1e252e; + --color-card: #1e252e; --color-markup-table-row: #ffffff06; --color-markup-code-block: #ffffff16; - --color-button: #353846; - --color-code-bg: #2a2e3a; - --color-code-sidebar-bg: #2e323e; + --color-button: #1e252e; + --color-code-bg: #222733; + --color-code-sidebar-bg: #232834; --color-shadow: #00000060; --color-secondary-bg: #2a2e3a; --color-text-focus: #fff; @@ -207,7 +208,8 @@ --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; - --color-header-bar: #2e323e; + --color-nav-bg: #232834; + --color-nav-hover-bg: #383c47; --color-label-text: #dfe3ec; --color-label-bg: #7c84974b; --color-label-hover-bg: #7c8497a0; diff --git a/web_src/css/user.css b/web_src/css/user.css index 7b6db8f2f8..54a966e7cb 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -48,13 +48,13 @@ height: auto; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.profile .ui.card #profile-avatar img { width: 30vw; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.profile .ui.card { width: 100%; } diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index dcd9c2f08c..b09fb90b71 100644 --- a/web_src/fomantic/_site/globals/site.variables +++ b/web_src/fomantic/_site/globals/site.variables @@ -7,3 +7,4 @@ @disabledOpacity: var(--opacity-disabled); @variationPopupTooltip: false; @linkHoverUnderline: underline; +@variationButtonSocial: false; diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 40d8b4e138..47510dbc9e 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -439,219 +439,6 @@ border-bottom-right-radius: 0; } -/*------------------- - Social - --------------------*/ - -/* Facebook */ - -.ui.facebook.button { - background-color: #3B5998; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.facebook.button:hover { - background-color: #304d8a; - color: #FFFFFF; - text-shadow: none; -} - -.ui.facebook.button:active { - background-color: #2d4373; - color: #FFFFFF; - text-shadow: none; -} - -/* Twitter */ - -.ui.twitter.button { - background-color: #1DA1F2; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.twitter.button:hover { - background-color: #0298f3; - color: #FFFFFF; - text-shadow: none; -} - -.ui.twitter.button:active { - background-color: #0c85d0; - color: #FFFFFF; - text-shadow: none; -} - -/* Google Plus */ - -.ui.google.plus.button { - background-color: #DD4B39; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.google.plus.button:hover { - background-color: #e0321c; - color: #FFFFFF; - text-shadow: none; -} - -.ui.google.plus.button:active { - background-color: #c23321; - color: #FFFFFF; - text-shadow: none; -} - -/* Linked In */ - -.ui.linkedin.button { - background-color: #0077B5; - color: #FFFFFF; - text-shadow: none; -} - -.ui.linkedin.button:hover { - background-color: #00669c; - color: #FFFFFF; - text-shadow: none; -} - -.ui.linkedin.button:active { - background-color: #005582; - color: #FFFFFF; - text-shadow: none; -} - -/* YouTube */ - -.ui.youtube.button { - background-color: #FF0000; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.youtube.button:hover { - background-color: #e60000; - color: #FFFFFF; - text-shadow: none; -} - -.ui.youtube.button:active { - background-color: #cc0000; - color: #FFFFFF; - text-shadow: none; -} - -/* Instagram */ - -.ui.instagram.button { - background-color: #49769C; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.instagram.button:hover { - background-color: #3d698e; - color: #FFFFFF; - text-shadow: none; -} - -.ui.instagram.button:active { - background-color: #395c79; - color: #FFFFFF; - text-shadow: none; -} - -/* Pinterest */ - -.ui.pinterest.button { - background-color: #BD081C; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.pinterest.button:hover { - background-color: #ac0013; - color: #FFFFFF; - text-shadow: none; -} - -.ui.pinterest.button:active { - background-color: #8c0615; - color: #FFFFFF; - text-shadow: none; -} - -/* VK */ - -.ui.vk.button { - background-color: #45668E; - color: #FFFFFF; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.vk.button:hover { - background-color: #395980; - color: #FFFFFF; -} - -.ui.vk.button:active { - background-color: #344d6c; - color: #FFFFFF; -} - -/* WhatsApp */ - -.ui.whatsapp.button { - background-color: #25D366; - color: #FFFFFF; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.whatsapp.button:hover { - background-color: #19c55a; - color: #FFFFFF; -} - -.ui.whatsapp.button:active { - background-color: #1da851; - color: #FFFFFF; -} - -/* Telegram */ - -.ui.telegram.button { - background-color: #0088CC; - color: #FFFFFF; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.telegram.button:hover { - background-color: #0077b3; - color: #FFFFFF; -} - -.ui.telegram.button:active { - background-color: #006699; - color: #FFFFFF; -} - /*-------------- Icon ---------------*/ diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index ee7d805e77..25a94c1fa7 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -12,7 +12,6 @@
- {{ textNewRepo }}
@@ -121,7 +120,6 @@
- {{ textNewOrg }}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 704ffa0706..ebc78b049b 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -14,7 +14,7 @@ -
@@ -70,7 +70,7 @@
-
@@ -415,7 +415,7 @@ const sfc = { const fullScreenEl = document.querySelector('.action-view-right'); const outerEl = document.querySelector('.full.height'); const actionBodyEl = document.querySelector('.action-view-body'); - const headerEl = document.querySelector('.ui.main.menu'); + const headerEl = document.querySelector('#navbar'); const contentEl = document.querySelector('.page-content.repository'); const footerEl = document.querySelector('.page-footer'); toggleElem(headerEl, !this.isFullScreen); diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 776e63a83d..46a80beb51 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -1,6 +1,5 @@ import $ from 'jquery'; import 'jquery.are-you-sure'; -import {mqBinarySearch} from '../utils.js'; import {createDropzone} from './dropzone.js'; import {initCompColorPicker} from './comp/ColorPicker.js'; import {showGlobalErrorMessage} from '../bootstrap.js'; @@ -20,18 +19,14 @@ export function initGlobalFormDirtyLeaveConfirm() { } export function initHeadNavbarContentToggle() { - const content = $('#navbar'); - const toggle = $('#navbar-expand-toggle'); - let isExpanded = false; - toggle.on('click', () => { - isExpanded = !isExpanded; - if (isExpanded) { - content.addClass('shown'); - toggle.addClass('active'); - } else { - content.removeClass('shown'); - toggle.removeClass('active'); - } + const navbar = document.getElementById('navbar'); + const btn = document.getElementById('navbar-expand-toggle'); + if (!navbar || !btn) return; + + btn.addEventListener('click', () => { + const isExpanded = btn.classList.contains('active'); + navbar.classList.toggle('navbar-menu-open', !isExpanded); + btn.classList.toggle('active', !isExpanded); }); } @@ -66,19 +61,6 @@ export function initGlobalButtonClickOnEnter() { } export function initGlobalCommon() { - // Undo Safari emoji glitch fix at high enough zoom levels - if (navigator.userAgent.match('Safari')) { - $(window).on('resize', () => { - const px = mqBinarySearch('width', 0, 4096, 1, 'px'); - const em = mqBinarySearch('width', 0, 1024, 0.01, 'em'); - if (em * 16 * 1.25 - px <= -1) { - $('body').addClass('safari-above125'); - } else { - $('body').removeClass('safari-above125'); - } - }); - } - // Semantic UI modules. const $uiDropdowns = $('.ui.dropdown'); diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 26d8e22472..6a01a8445b 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -108,10 +108,15 @@ function showLineButton() { createTippy(btn, { trigger: 'click', + hideOnClick: true, content: menu, placement: 'right-start', - role: 'menu', interactive: 'true', + onShow: (tippy) => { + tippy.popper.addEventListener('click', () => { + tippy.hide(); + }, {once: true}); + } }); } diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index cf6e09472e..0dc5728f58 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -358,13 +358,6 @@ export function initRepoIssueComments() { ).then(() => window.location.reload()); }); - $('.dismiss-review-btn').on('click', function (e) { - e.preventDefault(); - const $this = $(this); - const $dismissReviewModal = $this.next(); - $dismissReviewModal.modal('show'); - }); - $(document).on('click', (event) => { const urlTarget = $(':target'); if (urlTarget.length === 0) return; @@ -476,7 +469,6 @@ export function initRepoPullRequestReview() { content: $panel[0], placement: 'bottom', trigger: 'click', - role: 'menu', maxWidth: 'none', interactive: true, hideOnClick: true, diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index d9f496fb85..b424cdfd50 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -27,7 +27,8 @@ export function createTippy(target, opts = {}) { visibleInstances.add(instance); }, arrow: ``, - ...(opts?.role && {theme: opts.role}), + role: 'menu', // HTML role attribute, only tooltips should use "tooltip" + theme: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu" ...opts, }); @@ -68,6 +69,7 @@ function attachTooltip(target, content = null) { content, delay: 100, role: 'tooltip', + theme: 'tooltip', hideOnClick, placement: target.getAttribute('data-tooltip-placement') || 'top-start', ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 4f9ad452f6..4655b8eacc 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -37,19 +37,6 @@ export function stripTags(text) { return text.replace(/<[^>]*>?/g, ''); } -// searches the inclusive range [minValue, maxValue]. -// credits: https://matthiasott.com/notes/write-your-media-queries-in-pixels-not-ems -export function mqBinarySearch(feature, minValue, maxValue, step, unit) { - if (maxValue - minValue < step) { - return minValue; - } - const mid = Math.ceil((minValue + maxValue) / 2 / step) * step; - if (matchMedia(`screen and (min-${feature}:${mid}${unit})`).matches) { - return mqBinarySearch(feature, mid, maxValue, step, unit); // feature is >= mid - } - return mqBinarySearch(feature, minValue, mid - step, step, unit); // feature is < mid -} - export function parseIssueHref(href) { const path = (href || '').replace(/[#?].*$/, ''); const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];