Removes all dropdown and dimmer animations. Works everywhere as far as I can tell, but need to give this thorough testing. Removes around 70kb JS/CSS. Note, I'm not 100% sure regarding the various callbacks, those will need more investigation, but it appears to work nonetheless. Fixes: https://github.com/go-gitea/gitea/issues/15709tags/v1.21.0-rc0
@@ -225,7 +225,7 @@ | |||
--color-button: #fafafa; | |||
--color-code-bg: #ffffff; | |||
--color-code-sidebar-bg: #f5f5f5; | |||
--color-shadow: #00000030; | |||
--color-shadow: #00000026; | |||
--color-secondary-bg: #f4f4f4; | |||
--color-expand-button: #d8efff; | |||
--color-placeholder-text: #aaa; | |||
@@ -248,6 +248,7 @@ | |||
--color-accent: var(--color-primary-light-1); | |||
--color-small-accent: var(--color-primary-light-6); | |||
--color-active-line: #fffbdd; | |||
--color-overlay-backdrop: #080808c0; | |||
accent-color: var(--color-accent); | |||
color-scheme: light; | |||
} | |||
@@ -705,6 +706,16 @@ a.label, | |||
background: var(--color-active) !important; | |||
} | |||
/* styles from removed fomantic transition module */ | |||
.hidden.transition { | |||
visibility: hidden; | |||
display: none; | |||
} | |||
.visible.transition { | |||
display: block !important; | |||
visibility: visible !important; | |||
} | |||
.ui.message { | |||
background: var(--color-box-body); | |||
color: var(--color-text); | |||
@@ -796,7 +807,7 @@ a.label, | |||
.ui.selection.active.dropdown:hover, | |||
.ui.selection.active.dropdown .menu, | |||
.ui.selection.active.dropdown:hover .menu { | |||
border-color: var(--color-primary-light-2); | |||
border-color: var(--color-primary); | |||
} | |||
.ui.selection.dropdown .menu { | |||
@@ -1186,6 +1197,20 @@ img.ui.avatar, | |||
box-shadow: none; | |||
} | |||
.ui.dropdown .menu, | |||
.ui.upward.dropdown > .menu, | |||
.ui.menu .dropdown.item .menu, | |||
.ui.selection.active.dropdown .menu, | |||
.ui.upward.selection.dropdown .menu, | |||
.ui.selection.active.dropdown:hover .menu, | |||
.ui.upward.active.selection.dropdown:hover .menu { | |||
box-shadow: 0 6px 18px var(--color-shadow); | |||
} | |||
.ui.dimmer { | |||
background: var(--color-overlay-backdrop); | |||
} | |||
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ | |||
/* This fixes the commit graph button on the commits page */ | |||
/* modal svg icons, copied from fomantic except width and height */ |
@@ -105,3 +105,9 @@ code.language-math.is-loading::after { | |||
.pulse { | |||
animation: pulse 2s linear; | |||
} | |||
.ui.modal { | |||
animation-name: fadein; | |||
animation-duration: 300ms; | |||
animation-timing-function: ease-in-out; | |||
} |
@@ -233,6 +233,7 @@ | |||
--color-accent: var(--color-primary-light-1); | |||
--color-small-accent: var(--color-primary-light-5); | |||
--color-active-line: #534d1b; | |||
--color-overlay-backdrop: #080808c0; | |||
accent-color: var(--color-accent); | |||
color-scheme: dark; | |||
} |
@@ -43,7 +43,6 @@ | |||
"site", | |||
"tab", | |||
"table", | |||
"text", | |||
"transition" | |||
"text" | |||
] | |||
} |
@@ -22,6 +22,43 @@ export function initGiteaFomantic() { | |||
return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`); | |||
}; | |||
// stand-in for removed transition module | |||
$.fn.transition = function (arg) { | |||
if (arg === 'is supported') return true; | |||
if (arg === 'is animating') return false; | |||
if (arg === 'is inward') return false; | |||
if (arg === 'is outward') return false; | |||
if (arg === 'stop all') return; | |||
const isIn = arg?.animation?.endsWith(' in'); | |||
const isOut = arg?.animation?.endsWith(' out'); | |||
let ret; | |||
if (arg === 'show' || isIn) { | |||
arg?.onStart?.(this); | |||
ret = this.each((_, el) => { | |||
el.classList.remove('hidden'); | |||
el.classList.add('visible'); | |||
if (isIn) el.classList.add('transition'); | |||
if (arg?.displayType) el.style.setProperty('display', arg.displayType, 'important'); | |||
arg?.onShow?.(this); | |||
}); | |||
arg?.onComplete?.(this); | |||
} else if (arg === 'hide' || isOut) { | |||
arg?.onStart?.(this); | |||
ret = this.each((_, el) => { | |||
el.classList.add('hidden'); | |||
el.classList.remove('visible'); | |||
// don't remove the transition class because fomantic didn't do it either | |||
el.style.removeProperty('display'); | |||
arg?.onHidden?.(this); | |||
}); | |||
arg?.onComplete?.(this); | |||
} | |||
return ret; | |||
}; | |||
initFomanticApiPatch(); | |||
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. |