third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Disable Fomantic's CSS tooltips (#16974)

Browse Source 
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.
tokarchuk/v1.17
silverwind 3 years ago committed by GitHub
parent 63d7cbcef1
commit bc81d12e68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 2 additions and 447 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/repo/settings/options.tmpl
  2. 1
      web_src/fomantic/_site/globals/site.variables
  3. 435
      web_src/fomantic/build/semantic.css
  4. 11
      web_src/less/themes/theme-arc-green.less

2
templates/repo/settings/options.tmpl
Unescape View File

@ -170,7 +170,7 @@
{{$address := MirrorRemoteAddress .}} {{$address := MirrorRemoteAddress .}}
<td>{{$address.Address}}</td> <td>{{$address.Address}}</td>
<td>{{$.i18n.Tr "repo.settings.mirror_settings.direction.push"}}</td> <td>{{$.i18n.Tr "repo.settings.mirror_settings.direction.push"}}</td>
<td>{{if .LastUpdateUnix}}{{.LastUpdateUnix.AsTime}}{{else}}{{$.i18n.Tr "never"}}{{end}} {{if .LastError}}<div class="ui red label" data-tooltip="{{.LastError}}">{{$.i18n.Tr "error"}}</div>{{end}}</td> <td>{{if .LastUpdateUnix}}{{.LastUpdateUnix.AsTime}}{{else}}{{$.i18n.Tr "never"}}{{end}} {{if .LastError}}<div class="ui red label poping up" data-content="{{.LastError}}">{{$.i18n.Tr "error"}}</div>{{end}}</td>
<td class="right aligned"> <td class="right aligned">
<form method="post" style="display: inline-block"> <form method="post" style="display: inline-block">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}

1
web_src/fomantic/_site/globals/site.variables
Unescape View File

@ -5,3 +5,4 @@
@bold: 500; @bold: 500;
@useCustomScrollbars: false; @useCustomScrollbars: false;
@disabledOpacity: var(--opacity-disabled); @disabledOpacity: var(--opacity-disabled);
@variationPopupTooltip: false;

435
web_src/fomantic/build/semantic.css generated
Unescape View File

@ -34509,406 +34509,6 @@ Floated Menu / Item
Types 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 Spacing
---------------*/ ---------------*/
@ -35236,65 +34836,30 @@ Floated Menu / Item
font-size: 0.78571429rem; font-size: 0.78571429rem;
} }
[data-tooltip][data-variation~="mini"]:before,
[data-tooltip][data-variation~="mini"]:after {
font-size: 0.78571429rem;
}
.ui.tiny.popup { .ui.tiny.popup {
font-size: 0.85714286rem; font-size: 0.85714286rem;
} }
[data-tooltip][data-variation~="tiny"]:before,
[data-tooltip][data-variation~="tiny"]:after {
font-size: 0.85714286rem;
}
.ui.small.popup { .ui.small.popup {
font-size: 0.92857143rem; font-size: 0.92857143rem;
} }
[data-tooltip][data-variation~="small"]:before,
[data-tooltip][data-variation~="small"]:after {
font-size: 0.92857143rem;
}
.ui.large.popup { .ui.large.popup {
font-size: 1.14285714rem; font-size: 1.14285714rem;
} }
[data-tooltip][data-variation~="large"]:before,
[data-tooltip][data-variation~="large"]:after {
font-size: 1.14285714rem;
}
.ui.big.popup { .ui.big.popup {
font-size: 1.28571429rem; font-size: 1.28571429rem;
} }
[data-tooltip][data-variation~="big"]:before,
[data-tooltip][data-variation~="big"]:after {
font-size: 1.28571429rem;
}
.ui.huge.popup { .ui.huge.popup {
font-size: 1.42857143rem; font-size: 1.42857143rem;
} }
[data-tooltip][data-variation~="huge"]:before,
[data-tooltip][data-variation~="huge"]:after {
font-size: 1.42857143rem;
}
.ui.massive.popup { .ui.massive.popup {
font-size: 1.71428571rem; font-size: 1.71428571rem;
} }
[data-tooltip][data-variation~="massive"]:before,
[data-tooltip][data-variation~="massive"]:after {
font-size: 1.71428571rem;
}
/******************************* /*******************************
Theme Overrides Theme Overrides
*******************************/ *******************************/

11
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -123,17 +123,6 @@
background-color: #383c4a; 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 { .ui.green.progress .bar {
background-color: #668844; background-color: #668844;
} }

Write Preview
Loading…
Cancel
Save