From bc81d12e68d16458fea4ee024c0168c2f33db1e6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 8 Sep 2021 08:23:46 +0200 Subject: [PATCH] Disable Fomantic's CSS tooltips (#16974) CSS-only tooltips suffer various issues with positioning and there was only one single instance of them in the templates. Replace that instance with a regular popup and exclude these `data-tooltip` styles from the Fomantic build. --- templates/repo/settings/options.tmpl | 2 +- web_src/fomantic/_site/globals/site.variables | 1 + web_src/fomantic/build/semantic.css | 435 ------------------ web_src/less/themes/theme-arc-green.less | 11 - 4 files changed, 2 insertions(+), 447 deletions(-) diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 688966d523..3a44661123 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -170,7 +170,7 @@ {{$address := MirrorRemoteAddress .}} {{$address.Address}} {{$.i18n.Tr "repo.settings.mirror_settings.direction.push"}} - {{if .LastUpdateUnix}}{{.LastUpdateUnix.AsTime}}{{else}}{{$.i18n.Tr "never"}}{{end}} {{if .LastError}}
{{$.i18n.Tr "error"}}
{{end}} + {{if .LastUpdateUnix}}{{.LastUpdateUnix.AsTime}}{{else}}{{$.i18n.Tr "never"}}{{end}} {{if .LastError}}
{{$.i18n.Tr "error"}}
{{end}}
{{$.CsrfTokenHtml}} diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index 3c1781a08f..e7e0b82918 100644 --- a/web_src/fomantic/_site/globals/site.variables +++ b/web_src/fomantic/_site/globals/site.variables @@ -5,3 +5,4 @@ @bold: 500; @useCustomScrollbars: false; @disabledOpacity: var(--opacity-disabled); +@variationPopupTooltip: false; diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 188affa116..457c3e93bd 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -34509,406 +34509,6 @@ Floated Menu / Item Types *******************************/ -/*-------------- - Tooltip - ---------------*/ - -/* Content */ - -[data-tooltip] { - position: relative; -} - -/* Arrow */ - -[data-tooltip]:before { - pointer-events: none; - position: absolute; - content: ''; - font-size: 1rem; - width: 0.71428571em; - height: 0.71428571em; - background: #FFFFFF; - transform: rotate(45deg); - z-index: 1901; - box-shadow: 1px 1px 0 0 #bababc; -} - -/* Popup */ - -[data-tooltip]:after { - pointer-events: none; - content: attr(data-tooltip); - position: absolute; - text-transform: none; - text-align: left; - text-shadow: none; - white-space: nowrap; - font-size: 1rem; - border: 1px solid #D4D4D5; - line-height: 1.4285em; - max-width: none; - background: #FFFFFF; - padding: 0.833em 1em; - font-weight: normal; - font-style: normal; - color: rgba(0, 0, 0, 0.87); - border-radius: 0.28571429rem; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); - z-index: 1900; -} - -/* Default Position (Top Center) */ - -[data-tooltip]:not([data-position]):before { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - background: #FFFFFF; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -[data-tooltip]:not([data-position]):after { - left: 50%; - transform: translateX(-50%); - bottom: 100%; - margin-bottom: 0.5em; -} - -/* Animation */ - -[data-tooltip]:before, -[data-tooltip]:after { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: transform 0.1s ease, opacity 0.1s ease; -} - -[data-tooltip]:before { - transform: rotate(45deg) scale(0) !important; - transform-origin: center top; -} - -[data-tooltip]:after { - transform-origin: center bottom; -} - -[data-tooltip]:hover:before, -[data-tooltip]:hover:after { - visibility: visible; - pointer-events: auto; - opacity: 1; -} - -[data-tooltip]:hover:before { - transform: rotate(45deg) scale(1) !important; -} - -/* Animation Position */ - -[data-tooltip]:after, -[data-tooltip][data-position="top center"]:after, -[data-tooltip][data-position="bottom center"]:after { - transform: translateX(-50%) scale(0) !important; -} - -[data-tooltip]:hover:after, -[data-tooltip][data-position="bottom center"]:hover:after { - transform: translateX(-50%) scale(1) !important; -} - -[data-tooltip][data-position="left center"]:after, -[data-tooltip][data-position="right center"]:after { - transform: translateY(-50%) scale(0) !important; -} - -[data-tooltip][data-position="left center"]:hover:after, -[data-tooltip][data-position="right center"]:hover:after { - transform: translateY(-50%) scale(1) !important; - -moz-transform: translateY(-50%) scale(1.0001) !important; -} - -[data-tooltip][data-position="top left"]:after, -[data-tooltip][data-position="top right"]:after, -[data-tooltip][data-position="bottom left"]:after, -[data-tooltip][data-position="bottom right"]:after { - transform: scale(0) !important; -} - -[data-tooltip][data-position="top left"]:hover:after, -[data-tooltip][data-position="top right"]:hover:after, -[data-tooltip][data-position="bottom left"]:hover:after, -[data-tooltip][data-position="bottom right"]:hover:after { - transform: scale(1) !important; -} - -[data-tooltip][data-variation~="fixed"]:after { - white-space: normal; - width: 250px; -} - -[data-tooltip][data-variation*="wide fixed"]:after { - width: 350px; -} - -[data-tooltip][data-variation*="very wide fixed"]:after { - width: 550px; -} - -@media only screen and (max-width: 767.98px) { - [data-tooltip][data-variation~="fixed"]:after { - width: 250px; - } -} - -/*-------------- - Inverted - ---------------*/ - -/* Arrow */ - -[data-tooltip][data-inverted]:before { - box-shadow: none !important; -} - -/* Arrow Position */ - -[data-tooltip][data-inverted]:before { - background: #1B1C1D; -} - -/* Popup */ - -[data-tooltip][data-inverted]:after { - background: #1B1C1D; - color: #FFFFFF; - border: none; - box-shadow: none; -} - -[data-tooltip][data-inverted]:after .header { - background: none; - color: #FFFFFF; -} - -/*-------------- - Position - ---------------*/ - -[data-position~="top"][data-tooltip]:before { - background: #FFFFFF; -} - -/* Top Center */ - -[data-position="top center"][data-tooltip]:after { - top: auto; - right: auto; - left: 50%; - bottom: 100%; - transform: translateX(-50%); - margin-bottom: 0.5em; -} - -[data-position="top center"][data-tooltip]:before { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - background: #FFFFFF; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -/* Top Left */ - -[data-position="top left"][data-tooltip]:after { - top: auto; - right: auto; - left: 0; - bottom: 100%; - margin-bottom: 0.5em; -} - -[data-position="top left"][data-tooltip]:before { - top: auto; - right: auto; - bottom: 100%; - left: 1em; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -/* Top Right */ - -[data-position="top right"][data-tooltip]:after { - top: auto; - left: auto; - right: 0; - bottom: 100%; - margin-bottom: 0.5em; -} - -[data-position="top right"][data-tooltip]:before { - top: auto; - left: auto; - bottom: 100%; - right: 1em; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -[data-position~="bottom"][data-tooltip]:before { - background: #FFFFFF; - box-shadow: -1px -1px 0 0 #bababc; -} - -/* Bottom Center */ - -[data-position="bottom center"][data-tooltip]:after { - bottom: auto; - right: auto; - left: 50%; - top: 100%; - transform: translateX(-50%); - margin-top: 0.5em; -} - -[data-position="bottom center"][data-tooltip]:before { - bottom: auto; - right: auto; - top: 100%; - left: 50%; - margin-left: -0.07142857rem; - margin-top: 0.14285714rem; -} - -/* Bottom Left */ - -[data-position="bottom left"][data-tooltip]:after { - left: 0; - top: 100%; - margin-top: 0.5em; -} - -[data-position="bottom left"][data-tooltip]:before { - bottom: auto; - right: auto; - top: 100%; - left: 1em; - margin-left: -0.07142857rem; - margin-top: 0.14285714rem; -} - -/* Bottom Right */ - -[data-position="bottom right"][data-tooltip]:after { - right: 0; - top: 100%; - margin-top: 0.5em; -} - -[data-position="bottom right"][data-tooltip]:before { - bottom: auto; - left: auto; - top: 100%; - right: 1em; - margin-left: -0.14285714rem; - margin-top: 0.07142857rem; -} - -/* Left Center */ - -[data-position="left center"][data-tooltip]:after { - right: 100%; - top: 50%; - margin-right: 0.5em; - transform: translateY(-50%); -} - -[data-position="left center"][data-tooltip]:before { - right: 100%; - top: 50%; - margin-top: -0.14285714rem; - margin-right: -0.07142857rem; - background: #FFFFFF; - box-shadow: 1px -1px 0 0 #bababc; -} - -/* Right Center */ - -[data-position="right center"][data-tooltip]:after { - left: 100%; - top: 50%; - margin-left: 0.5em; - transform: translateY(-50%); -} - -[data-position="right center"][data-tooltip]:before { - left: 100%; - top: 50%; - margin-top: -0.07142857rem; - margin-left: 0.14285714rem; - background: #FFFFFF; - box-shadow: -1px 1px 0 0 #bababc; -} - -/* Inverted Arrow Color */ - -[data-inverted][data-position~="bottom"][data-tooltip]:before { - background: #1B1C1D; - box-shadow: -1px -1px 0 0 #bababc; -} - -[data-inverted][data-position="left center"][data-tooltip]:before { - background: #1B1C1D; - box-shadow: 1px -1px 0 0 #bababc; -} - -[data-inverted][data-position="right center"][data-tooltip]:before { - background: #1B1C1D; - box-shadow: -1px 1px 0 0 #bababc; -} - -[data-inverted][data-position~="top"][data-tooltip]:before { - background: #1B1C1D; -} - -[data-position~="bottom"][data-tooltip]:before { - transform-origin: center bottom; -} - -[data-position~="bottom"][data-tooltip]:after { - transform-origin: center top; -} - -[data-position="left center"][data-tooltip]:before { - transform-origin: top center; -} - -[data-position="left center"][data-tooltip]:after { - transform-origin: right center; -} - -[data-position="right center"][data-tooltip]:before { - transform-origin: right center; -} - -[data-position="right center"][data-tooltip]:after { - transform-origin: left center; -} - -/*-------------- - Basic - ---------------*/ - -[data-tooltip][data-variation~="basic"]:before { - display: none; -} - /*-------------- Spacing ---------------*/ @@ -35236,65 +34836,30 @@ Floated Menu / Item font-size: 0.78571429rem; } -[data-tooltip][data-variation~="mini"]:before, -[data-tooltip][data-variation~="mini"]:after { - font-size: 0.78571429rem; -} - .ui.tiny.popup { font-size: 0.85714286rem; } -[data-tooltip][data-variation~="tiny"]:before, -[data-tooltip][data-variation~="tiny"]:after { - font-size: 0.85714286rem; -} - .ui.small.popup { font-size: 0.92857143rem; } -[data-tooltip][data-variation~="small"]:before, -[data-tooltip][data-variation~="small"]:after { - font-size: 0.92857143rem; -} - .ui.large.popup { font-size: 1.14285714rem; } -[data-tooltip][data-variation~="large"]:before, -[data-tooltip][data-variation~="large"]:after { - font-size: 1.14285714rem; -} - .ui.big.popup { font-size: 1.28571429rem; } -[data-tooltip][data-variation~="big"]:before, -[data-tooltip][data-variation~="big"]:after { - font-size: 1.28571429rem; -} - .ui.huge.popup { font-size: 1.42857143rem; } -[data-tooltip][data-variation~="huge"]:before, -[data-tooltip][data-variation~="huge"]:after { - font-size: 1.42857143rem; -} - .ui.massive.popup { font-size: 1.71428571rem; } -[data-tooltip][data-variation~="massive"]:before, -[data-tooltip][data-variation~="massive"]:after { - font-size: 1.71428571rem; -} - /******************************* Theme Overrides *******************************/ diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index b8ee6d4e84..bb1e12c471 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -123,17 +123,6 @@ background-color: #383c4a; } -[data-tooltip]::before, -[data-tooltip]::after { - background: #1b1c1d !important; /* .ui.inverted.popup */ - border-color: #1b1c1d !important; /* .ui.inverted.popup */ - color: #dbdbdb !important; -} - -[data-tooltip]::before { - box-shadow: 1px 1px 0 0 #1b1c1d !important; /* .ui.inverted.popup */ -} - .ui.green.progress .bar { background-color: #668844; }