From 3dda574bc619312c2720c44f8cf20c4e39042430 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 12 Aug 2023 16:30:26 +0200 Subject: [PATCH 01/15] Remove fomantic transition module --- web_src/css/base.css | 10 + web_src/fomantic/build/semantic.css | 2063 --------------------------- web_src/fomantic/build/semantic.js | 1110 -------------- web_src/fomantic/semantic.json | 3 +- web_src/js/modules/fomantic.js | 35 + 5 files changed, 46 insertions(+), 3175 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index bdc1234bc9a8..b0b1b1bf42cc 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -705,6 +705,16 @@ a.label, background: var(--color-active) !important; } +.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); diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index c96c33798878..4004415fae3c 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -20973,2067 +20973,4 @@ span.ui.massive.text { /******************************* Theme Overrides -*******************************/ -/*! - * # Fomantic-UI - Transition - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Transitions -*******************************/ - -.transition { - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 300ms; - animation-duration: 300ms; - -webkit-animation-timing-function: ease; - animation-timing-function: ease; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -/******************************* - States -*******************************/ - -/* Animating */ - -.animating.transition { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - visibility: visible !important; -} - -/* Loading */ - -.loading.transition { - position: absolute; - top: -99999px; - left: -99999px; -} - -/* Hidden */ - -.hidden.transition { - display: none; - visibility: hidden; -} - -/* Visible */ - -.visible.transition { - display: block !important; - visibility: visible !important; - /* backface-visibility: @backfaceVisibility; - transform: @use3DAcceleration;*/ -} - -/* Disabled */ - -.disabled.transition { - -webkit-animation-play-state: paused; - animation-play-state: paused; -} - -/******************************* - Variations -*******************************/ - -.looping.transition { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - -/******************************* - Transitions -*******************************/ - -/* - Some transitions adapted from Animate CSS - https://github.com/daneden/animate.css - - Additional transitions adapted from Glide - by Nick Pettit - https://github.com/nickpettit/glide -*/ - -/*-------------- - Browse - ---------------*/ - -.transition.browse { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; -} - -.transition.browse.in { - -webkit-animation-name: browseIn; - animation-name: browseIn; -} - -.transition.browse.out, -.transition.browse.left.out { - -webkit-animation-name: browseOutLeft; - animation-name: browseOutLeft; -} - -.transition.browse.right.out { - -webkit-animation-name: browseOutRight; - animation-name: browseOutRight; -} - -/* In */ - -@-webkit-keyframes browseIn { - 0% { - transform: scale(0.8) translateZ(0px); - z-index: -1; - } - - 10% { - transform: scale(0.8) translateZ(0px); - z-index: -1; - opacity: 0.7; - } - - 80% { - transform: scale(1.05) translateZ(0px); - opacity: 1; - z-index: 999; - } - - 100% { - transform: scale(1) translateZ(0px); - z-index: 999; - } -} - -@keyframes browseIn { - 0% { - transform: scale(0.8) translateZ(0px); - z-index: -1; - } - - 10% { - transform: scale(0.8) translateZ(0px); - z-index: -1; - opacity: 0.7; - } - - 80% { - transform: scale(1.05) translateZ(0px); - opacity: 1; - z-index: 999; - } - - 100% { - transform: scale(1) translateZ(0px); - z-index: 999; - } -} - -/* Out */ - -@-webkit-keyframes browseOutLeft { - 0% { - z-index: 999; - transform: translateX(0%) rotateY(0deg) rotateX(0deg); - } - - 50% { - z-index: -1; - transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - - 80% { - opacity: 1; - } - - 100% { - z-index: -1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); - opacity: 0; - } -} - -@keyframes browseOutLeft { - 0% { - z-index: 999; - transform: translateX(0%) rotateY(0deg) rotateX(0deg); - } - - 50% { - z-index: -1; - transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - - 80% { - opacity: 1; - } - - 100% { - z-index: -1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); - opacity: 0; - } -} - -@-webkit-keyframes browseOutRight { - 0% { - z-index: 999; - transform: translateX(0%) rotateY(0deg) rotateX(0deg); - } - - 50% { - z-index: 1; - transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - - 80% { - opacity: 1; - } - - 100% { - z-index: 1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); - opacity: 0; - } -} - -@keyframes browseOutRight { - 0% { - z-index: 999; - transform: translateX(0%) rotateY(0deg) rotateX(0deg); - } - - 50% { - z-index: 1; - transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - - 80% { - opacity: 1; - } - - 100% { - z-index: 1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); - opacity: 0; - } -} - -/*-------------- - Drop - ---------------*/ - -.drop.transition { - transform-origin: top center; - -webkit-animation-duration: 400ms; - animation-duration: 400ms; - -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); - animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); -} - -.drop.transition.in { - -webkit-animation-name: dropIn; - animation-name: dropIn; -} - -.drop.transition.out { - -webkit-animation-name: dropOut; - animation-name: dropOut; -} - -/* Drop */ - -@-webkit-keyframes dropIn { - 0% { - opacity: 0; - transform: scale(0); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes dropIn { - 0% { - opacity: 0; - transform: scale(0); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@-webkit-keyframes dropOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 0; - transform: scale(0); - } -} - -@keyframes dropOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 0; - transform: scale(0); - } -} - -/*-------------- - Fade - ---------------*/ - -.transition.fade.in { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; -} - -.transition[class*="fade up"].in { - -webkit-animation-name: fadeInUp; - animation-name: fadeInUp; -} - -.transition[class*="fade down"].in { - -webkit-animation-name: fadeInDown; - animation-name: fadeInDown; -} - -.transition[class*="fade left"].in { - -webkit-animation-name: fadeInLeft; - animation-name: fadeInLeft; -} - -.transition[class*="fade right"].in { - -webkit-animation-name: fadeInRight; - animation-name: fadeInRight; -} - -.transition.fade.out { - -webkit-animation-name: fadeOut; - animation-name: fadeOut; -} - -.transition[class*="fade up"].out { - -webkit-animation-name: fadeOutUp; - animation-name: fadeOutUp; -} - -.transition[class*="fade down"].out { - -webkit-animation-name: fadeOutDown; - animation-name: fadeOutDown; -} - -.transition[class*="fade left"].out { - -webkit-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; -} - -.transition[class*="fade right"].out { - -webkit-animation-name: fadeOutRight; - animation-name: fadeOutRight; -} - -/* In */ - -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(10%); - } - - 100% { - opacity: 1; - transform: translateY(0%); - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(10%); - } - - 100% { - opacity: 1; - transform: translateY(0%); - } -} - -@-webkit-keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-10%); - } - - 100% { - opacity: 1; - transform: translateY(0%); - } -} - -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-10%); - } - - 100% { - opacity: 1; - transform: translateY(0%); - } -} - -@-webkit-keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(10%); - } - - 100% { - opacity: 1; - transform: translateX(0%); - } -} - -@keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(10%); - } - - 100% { - opacity: 1; - transform: translateX(0%); - } -} - -@-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(-10%); - } - - 100% { - opacity: 1; - transform: translateX(0%); - } -} - -@keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(-10%); - } - - 100% { - opacity: 1; - transform: translateX(0%); - } -} - -/* Out */ - -@-webkit-keyframes fadeOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes fadeOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@-webkit-keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0%); - } - - 100% { - opacity: 0; - transform: translateY(5%); - } -} - -@keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0%); - } - - 100% { - opacity: 0; - transform: translateY(5%); - } -} - -@-webkit-keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0%); - } - - 100% { - opacity: 0; - transform: translateY(-5%); - } -} - -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0%); - } - - 100% { - opacity: 0; - transform: translateY(-5%); - } -} - -@-webkit-keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0%); - } - - 100% { - opacity: 0; - transform: translateX(5%); - } -} - -@keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0%); - } - - 100% { - opacity: 0; - transform: translateX(5%); - } -} - -@-webkit-keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0%); - } - - 100% { - opacity: 0; - transform: translateX(-5%); - } -} - -@keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0%); - } - - 100% { - opacity: 0; - transform: translateX(-5%); - } -} - -/*-------------- - Flips - ---------------*/ - -.flip.transition.in, -.flip.transition.out { - -webkit-animation-duration: 600ms; - animation-duration: 600ms; -} - -.horizontal.flip.transition.in { - -webkit-animation-name: horizontalFlipIn; - animation-name: horizontalFlipIn; -} - -.horizontal.flip.transition.out { - -webkit-animation-name: horizontalFlipOut; - animation-name: horizontalFlipOut; -} - -.vertical.flip.transition.in { - -webkit-animation-name: verticalFlipIn; - animation-name: verticalFlipIn; -} - -.vertical.flip.transition.out { - -webkit-animation-name: verticalFlipOut; - animation-name: verticalFlipOut; -} - -/* In */ - -@-webkit-keyframes horizontalFlipIn { - 0% { - transform: perspective(2000px) rotateY(-90deg); - opacity: 0; - } - - 100% { - transform: perspective(2000px) rotateY(0deg); - opacity: 1; - } -} - -@keyframes horizontalFlipIn { - 0% { - transform: perspective(2000px) rotateY(-90deg); - opacity: 0; - } - - 100% { - transform: perspective(2000px) rotateY(0deg); - opacity: 1; - } -} - -@-webkit-keyframes verticalFlipIn { - 0% { - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; - } - - 100% { - transform: perspective(2000px) rotateX(0deg); - opacity: 1; - } -} - -@keyframes verticalFlipIn { - 0% { - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; - } - - 100% { - transform: perspective(2000px) rotateX(0deg); - opacity: 1; - } -} - -/* Out */ - -@-webkit-keyframes horizontalFlipOut { - 0% { - transform: perspective(2000px) rotateY(0deg); - opacity: 1; - } - - 100% { - transform: perspective(2000px) rotateY(90deg); - opacity: 0; - } -} - -@keyframes horizontalFlipOut { - 0% { - transform: perspective(2000px) rotateY(0deg); - opacity: 1; - } - - 100% { - transform: perspective(2000px) rotateY(90deg); - opacity: 0; - } -} - -@-webkit-keyframes verticalFlipOut { - 0% { - transform: perspective(2000px) rotateX(0deg); - opacity: 1; - } - - 100% { - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; - } -} - -@keyframes verticalFlipOut { - 0% { - transform: perspective(2000px) rotateX(0deg); - opacity: 1; - } - - 100% { - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; - } -} - -/*-------------- - Scale - ---------------*/ - -.scale.transition.in { - -webkit-animation-name: scaleIn; - animation-name: scaleIn; -} - -.scale.transition.out { - -webkit-animation-name: scaleOut; - animation-name: scaleOut; -} - -@-webkit-keyframes scaleIn { - 0% { - opacity: 0; - transform: scale(0.8); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes scaleIn { - 0% { - opacity: 0; - transform: scale(0.8); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -/* Out */ - -@-webkit-keyframes scaleOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 0; - transform: scale(0.9); - } -} - -@keyframes scaleOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 0; - transform: scale(0.9); - } -} - -/*-------------- - Fly - ---------------*/ - -/* Inward */ - -.transition.fly { - -webkit-animation-duration: 0.6s; - animation-duration: 0.6s; - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -} - -.transition.fly.in { - -webkit-animation-name: flyIn; - animation-name: flyIn; -} - -.transition[class*="fly up"].in { - -webkit-animation-name: flyInUp; - animation-name: flyInUp; -} - -.transition[class*="fly down"].in { - -webkit-animation-name: flyInDown; - animation-name: flyInDown; -} - -.transition[class*="fly left"].in { - -webkit-animation-name: flyInLeft; - animation-name: flyInLeft; -} - -.transition[class*="fly right"].in { - -webkit-animation-name: flyInRight; - animation-name: flyInRight; -} - -/* Outward */ - -.transition.fly.out { - -webkit-animation-name: flyOut; - animation-name: flyOut; -} - -.transition[class*="fly up"].out { - -webkit-animation-name: flyOutUp; - animation-name: flyOutUp; -} - -.transition[class*="fly down"].out { - -webkit-animation-name: flyOutDown; - animation-name: flyOutDown; -} - -.transition[class*="fly left"].out { - -webkit-animation-name: flyOutLeft; - animation-name: flyOutLeft; -} - -.transition[class*="fly right"].out { - -webkit-animation-name: flyOutRight; - animation-name: flyOutRight; -} - -/* In */ - -@-webkit-keyframes flyIn { - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - transform: scale3d(0.97, 0.97, 0.97); - } - - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} - -@keyframes flyIn { - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - transform: scale3d(0.97, 0.97, 0.97); - } - - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} - -@-webkit-keyframes flyInUp { - 0% { - opacity: 0; - transform: translate3d(0, 1500px, 0); - } - - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - - 75% { - transform: translate3d(0, 10px, 0); - } - - 90% { - transform: translate3d(0, -5px, 0); - } - - 100% { - transform: translate3d(0, 0, 0); - } -} - -@keyframes flyInUp { - 0% { - opacity: 0; - transform: translate3d(0, 1500px, 0); - } - - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - - 75% { - transform: translate3d(0, 10px, 0); - } - - 90% { - transform: translate3d(0, -5px, 0); - } - - 100% { - transform: translate3d(0, 0, 0); - } -} - -@-webkit-keyframes flyInDown { - 0% { - opacity: 0; - transform: translate3d(0, -1500px, 0); - } - - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); - } - - 75% { - transform: translate3d(0, -10px, 0); - } - - 90% { - transform: translate3d(0, 5px, 0); - } - - 100% { - transform: none; - } -} - -@keyframes flyInDown { - 0% { - opacity: 0; - transform: translate3d(0, -1500px, 0); - } - - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); - } - - 75% { - transform: translate3d(0, -10px, 0); - } - - 90% { - transform: translate3d(0, 5px, 0); - } - - 100% { - transform: none; - } -} - -@-webkit-keyframes flyInLeft { - 0% { - opacity: 0; - transform: translate3d(1500px, 0, 0); - } - - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); - } - - 75% { - transform: translate3d(10px, 0, 0); - } - - 90% { - transform: translate3d(-5px, 0, 0); - } - - 100% { - transform: none; - } -} - -@keyframes flyInLeft { - 0% { - opacity: 0; - transform: translate3d(1500px, 0, 0); - } - - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); - } - - 75% { - transform: translate3d(10px, 0, 0); - } - - 90% { - transform: translate3d(-5px, 0, 0); - } - - 100% { - transform: none; - } -} - -@-webkit-keyframes flyInRight { - 0% { - opacity: 0; - transform: translate3d(-1500px, 0, 0); - } - - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); - } - - 75% { - transform: translate3d(-10px, 0, 0); - } - - 90% { - transform: translate3d(5px, 0, 0); - } - - 100% { - transform: none; - } -} - -@keyframes flyInRight { - 0% { - opacity: 0; - transform: translate3d(-1500px, 0, 0); - } - - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); - } - - 75% { - transform: translate3d(-10px, 0, 0); - } - - 90% { - transform: translate3d(5px, 0, 0); - } - - 100% { - transform: none; - } -} - -/* Out */ - -@-webkit-keyframes flyOut { - 20% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); - } - - 100% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } -} - -@keyframes flyOut { - 20% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); - } - - 100% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } -} - -@-webkit-keyframes flyOutUp { - 20% { - transform: translate3d(0, 10px, 0); - } - - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - - 100% { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } -} - -@keyframes flyOutUp { - 20% { - transform: translate3d(0, 10px, 0); - } - - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - - 100% { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } -} - -@-webkit-keyframes flyOutDown { - 20% { - transform: translate3d(0, -10px, 0); - } - - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); - } - - 100% { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } -} - -@keyframes flyOutDown { - 20% { - transform: translate3d(0, -10px, 0); - } - - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); - } - - 100% { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } -} - -@-webkit-keyframes flyOutRight { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); - } - - 100% { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } -} - -@keyframes flyOutRight { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); - } - - 100% { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } -} - -@-webkit-keyframes flyOutLeft { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); - } - - 100% { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } -} - -@keyframes flyOutLeft { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); - } - - 100% { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } -} - -/*-------------- - Slide - ---------------*/ - -.transition.slide.in, -.transition[class*="slide down"].in { - -webkit-animation-name: slideInY; - animation-name: slideInY; - transform-origin: top center; -} - -.transition[class*="slide up"].in { - -webkit-animation-name: slideInY; - animation-name: slideInY; - transform-origin: bottom center; -} - -.transition[class*="slide left"].in { - -webkit-animation-name: slideInX; - animation-name: slideInX; - transform-origin: right center; -} - -.transition[class*="slide right"].in { - -webkit-animation-name: slideInX; - animation-name: slideInX; - transform-origin: left center; -} - -.transition.slide.out, -.transition[class*="slide down"].out { - -webkit-animation-name: slideOutY; - animation-name: slideOutY; - transform-origin: top center; -} - -.transition[class*="slide up"].out { - -webkit-animation-name: slideOutY; - animation-name: slideOutY; - transform-origin: bottom center; -} - -.transition[class*="slide left"].out { - -webkit-animation-name: slideOutX; - animation-name: slideOutX; - transform-origin: right center; -} - -.transition[class*="slide right"].out { - -webkit-animation-name: slideOutX; - animation-name: slideOutX; - transform-origin: left center; -} - -/* In */ - -@-webkit-keyframes slideInY { - 0% { - opacity: 0; - transform: scaleY(0); - } - - 100% { - opacity: 1; - transform: scaleY(1); - } -} - -@keyframes slideInY { - 0% { - opacity: 0; - transform: scaleY(0); - } - - 100% { - opacity: 1; - transform: scaleY(1); - } -} - -@-webkit-keyframes slideInX { - 0% { - opacity: 0; - transform: scaleX(0); - } - - 100% { - opacity: 1; - transform: scaleX(1); - } -} - -@keyframes slideInX { - 0% { - opacity: 0; - transform: scaleX(0); - } - - 100% { - opacity: 1; - transform: scaleX(1); - } -} - -/* Out */ - -@-webkit-keyframes slideOutY { - 0% { - opacity: 1; - transform: scaleY(1); - } - - 100% { - opacity: 0; - transform: scaleY(0); - } -} - -@keyframes slideOutY { - 0% { - opacity: 1; - transform: scaleY(1); - } - - 100% { - opacity: 0; - transform: scaleY(0); - } -} - -@-webkit-keyframes slideOutX { - 0% { - opacity: 1; - transform: scaleX(1); - } - - 100% { - opacity: 0; - transform: scaleX(0); - } -} - -@keyframes slideOutX { - 0% { - opacity: 1; - transform: scaleX(1); - } - - 100% { - opacity: 0; - transform: scaleX(0); - } -} - -/*-------------- - Swing - ---------------*/ - -.transition.swing { - -webkit-animation-duration: 800ms; - animation-duration: 800ms; -} - -.transition[class*="swing down"].in { - -webkit-animation-name: swingInX; - animation-name: swingInX; - transform-origin: top center; -} - -.transition[class*="swing up"].in { - -webkit-animation-name: swingInX; - animation-name: swingInX; - transform-origin: bottom center; -} - -.transition[class*="swing left"].in { - -webkit-animation-name: swingInY; - animation-name: swingInY; - transform-origin: right center; -} - -.transition[class*="swing right"].in { - -webkit-animation-name: swingInY; - animation-name: swingInY; - transform-origin: left center; -} - -.transition.swing.out, -.transition[class*="swing down"].out { - -webkit-animation-name: swingOutX; - animation-name: swingOutX; - transform-origin: top center; -} - -.transition[class*="swing up"].out { - -webkit-animation-name: swingOutX; - animation-name: swingOutX; - transform-origin: bottom center; -} - -.transition[class*="swing left"].out { - -webkit-animation-name: swingOutY; - animation-name: swingOutY; - transform-origin: right center; -} - -.transition[class*="swing right"].out { - -webkit-animation-name: swingOutY; - animation-name: swingOutY; - transform-origin: left center; -} - -/* In */ - -@-webkit-keyframes swingInX { - 0% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(1000px) rotateX(-30deg); - opacity: 1; - } - - 60% { - transform: perspective(1000px) rotateX(15deg); - } - - 80% { - transform: perspective(1000px) rotateX(-7.5deg); - } - - 100% { - transform: perspective(1000px) rotateX(0deg); - } -} - -@keyframes swingInX { - 0% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(1000px) rotateX(-30deg); - opacity: 1; - } - - 60% { - transform: perspective(1000px) rotateX(15deg); - } - - 80% { - transform: perspective(1000px) rotateX(-7.5deg); - } - - 100% { - transform: perspective(1000px) rotateX(0deg); - } -} - -@-webkit-keyframes swingInY { - 0% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; - } - - 40% { - transform: perspective(1000px) rotateY(30deg); - opacity: 1; - } - - 60% { - transform: perspective(1000px) rotateY(-17.5deg); - } - - 80% { - transform: perspective(1000px) rotateY(7.5deg); - } - - 100% { - transform: perspective(1000px) rotateY(0deg); - } -} - -@keyframes swingInY { - 0% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; - } - - 40% { - transform: perspective(1000px) rotateY(30deg); - opacity: 1; - } - - 60% { - transform: perspective(1000px) rotateY(-17.5deg); - } - - 80% { - transform: perspective(1000px) rotateY(7.5deg); - } - - 100% { - transform: perspective(1000px) rotateY(0deg); - } -} - -/* Out */ - -@-webkit-keyframes swingOutX { - 0% { - transform: perspective(1000px) rotateX(0deg); - } - - 40% { - transform: perspective(1000px) rotateX(-7.5deg); - } - - 60% { - transform: perspective(1000px) rotateX(17.5deg); - } - - 80% { - transform: perspective(1000px) rotateX(-30deg); - opacity: 1; - } - - 100% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; - } -} - -@keyframes swingOutX { - 0% { - transform: perspective(1000px) rotateX(0deg); - } - - 40% { - transform: perspective(1000px) rotateX(-7.5deg); - } - - 60% { - transform: perspective(1000px) rotateX(17.5deg); - } - - 80% { - transform: perspective(1000px) rotateX(-30deg); - opacity: 1; - } - - 100% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; - } -} - -@-webkit-keyframes swingOutY { - 0% { - transform: perspective(1000px) rotateY(0deg); - } - - 40% { - transform: perspective(1000px) rotateY(7.5deg); - } - - 60% { - transform: perspective(1000px) rotateY(-10deg); - } - - 80% { - transform: perspective(1000px) rotateY(30deg); - opacity: 1; - } - - 100% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; - } -} - -@keyframes swingOutY { - 0% { - transform: perspective(1000px) rotateY(0deg); - } - - 40% { - transform: perspective(1000px) rotateY(7.5deg); - } - - 60% { - transform: perspective(1000px) rotateY(-10deg); - } - - 80% { - transform: perspective(1000px) rotateY(30deg); - opacity: 1; - } - - 100% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; - } -} - -/*-------------- - Zoom - ---------------*/ - -.transition.zoom.in { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; -} - -.transition.zoom.out { - -webkit-animation-name: zoomOut; - animation-name: zoomOut; -} - -@-webkit-keyframes zoomIn { - 0% { - opacity: 1; - transform: scale(0); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes zoomIn { - 0% { - opacity: 1; - transform: scale(0); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@-webkit-keyframes zoomOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 1; - transform: scale(0); - } -} - -@keyframes zoomOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 1; - transform: scale(0); - } -} - -/******************************* - Static Animations -*******************************/ - -/*-------------- - Emphasis ----------------*/ - -.flash.transition { - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: flash; - animation-name: flash; -} - -.shake.transition { - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: shake; - animation-name: shake; -} - -.bounce.transition { - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: bounce; - animation-name: bounce; -} - -.tada.transition { - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: tada; - animation-name: tada; -} - -.pulse.transition { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-name: pulse; - animation-name: pulse; -} - -.jiggle.transition { - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: jiggle; - animation-name: jiggle; -} - -.transition.glow { - -webkit-animation-duration: 2000ms; - animation-duration: 2000ms; - -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -} - -.transition.glow { - -webkit-animation-name: glow; - animation-name: glow; -} - -/* Flash */ - -@-webkit-keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - - 25%, 75% { - opacity: 0; - } -} - -@keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - - 25%, 75% { - opacity: 0; - } -} - -/* Shake */ - -@-webkit-keyframes shake { - 0%, 100% { - transform: translateX(0); - } - - 10%, 30%, 50%, 70%, 90% { - transform: translateX(-10px); - } - - 20%, 40%, 60%, 80% { - transform: translateX(10px); - } -} - -@keyframes shake { - 0%, 100% { - transform: translateX(0); - } - - 10%, 30%, 50%, 70%, 90% { - transform: translateX(-10px); - } - - 20%, 40%, 60%, 80% { - transform: translateX(10px); - } -} - -/* Bounce */ - -@-webkit-keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-30px); - } - - 60% { - transform: translateY(-15px); - } -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-30px); - } - - 60% { - transform: translateY(-15px); - } -} - -/* Tada */ - -@-webkit-keyframes tada { - 0% { - transform: scale(1); - } - - 10%, 20% { - transform: scale(0.9) rotate(-3deg); - } - - 30%, 50%, 70%, 90% { - transform: scale(1.1) rotate(3deg); - } - - 40%, 60%, 80% { - transform: scale(1.1) rotate(-3deg); - } - - 100% { - transform: scale(1) rotate(0); - } -} - -@keyframes tada { - 0% { - transform: scale(1); - } - - 10%, 20% { - transform: scale(0.9) rotate(-3deg); - } - - 30%, 50%, 70%, 90% { - transform: scale(1.1) rotate(3deg); - } - - 40%, 60%, 80% { - transform: scale(1.1) rotate(-3deg); - } - - 100% { - transform: scale(1) rotate(0); - } -} - -/* Pulse */ - -@-webkit-keyframes pulse { - 0% { - transform: scale(1); - opacity: 1; - } - - 50% { - transform: scale(0.9); - opacity: 0.7; - } - - 100% { - transform: scale(1); - opacity: 1; - } -} - -@keyframes pulse { - 0% { - transform: scale(1); - opacity: 1; - } - - 50% { - transform: scale(0.9); - opacity: 0.7; - } - - 100% { - transform: scale(1); - opacity: 1; - } -} - -/* Jiggle */ - -@-webkit-keyframes jiggle { - 0% { - transform: scale3d(1, 1, 1); - } - - 30% { - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - transform: scale3d(1.05, 0.95, 1); - } - - 100% { - transform: scale3d(1, 1, 1); - } -} - -@keyframes jiggle { - 0% { - transform: scale3d(1, 1, 1); - } - - 30% { - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - transform: scale3d(1.05, 0.95, 1); - } - - 100% { - transform: scale3d(1, 1, 1); - } -} - -/* Glow */ - -@-webkit-keyframes glow { - 0% { - background-color: #FCFCFD; - } - - 30% { - background-color: #FFF6CD; - } - - 100% { - background-color: #FCFCFD; - } -} - -@keyframes glow { - 0% { - background-color: #FCFCFD; - } - - 30% { - background-color: #FFF6CD; - } - - 100% { - background-color: #FCFCFD; - } -} - -/******************************* - Site Overrides *******************************/ \ No newline at end of file diff --git a/web_src/fomantic/build/semantic.js b/web_src/fomantic/build/semantic.js index 6304c6faf49e..2a05d94d72a8 100644 --- a/web_src/fomantic/build/semantic.js +++ b/web_src/fomantic/build/semantic.js @@ -13360,1114 +13360,4 @@ $.fn.tab.settings = { }; -})( jQuery, window, document ); - -/*! - * # Fomantic-UI - Transition - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -;(function ($, window, document, undefined) { - -'use strict'; - -$.isFunction = $.isFunction || function(obj) { - return typeof obj === "function" && typeof obj.nodeType !== "number"; -}; - -window = (typeof window != 'undefined' && window.Math == Math) - ? window - : (typeof self != 'undefined' && self.Math == Math) - ? self - : Function('return this')() -; - -$.fn.transition = function() { - var - $allModules = $(this), - moduleSelector = $allModules.selector || '', - - time = new Date().getTime(), - performance = [], - - moduleArguments = arguments, - query = moduleArguments[0], - queryArguments = [].slice.call(arguments, 1), - methodInvoked = (typeof query === 'string'), - - returnedValue - ; - $allModules - .each(function(index) { - var - $module = $(this), - element = this, - - // set at run time - settings, - instance, - - error, - className, - metadata, - animationEnd, - - moduleNamespace, - eventNamespace, - module - ; - - module = { - - initialize: function() { - - // get full settings - settings = module.get.settings.apply(element, moduleArguments); - - // shorthand - className = settings.className; - error = settings.error; - metadata = settings.metadata; - - // define namespace - eventNamespace = '.' + settings.namespace; - moduleNamespace = 'module-' + settings.namespace; - instance = $module.data(moduleNamespace) || module; - - // get vendor specific events - animationEnd = module.get.animationEndEvent(); - - if(methodInvoked) { - methodInvoked = module.invoke(query); - } - - // method not invoked, lets run an animation - if(methodInvoked === false) { - module.verbose('Converted arguments into settings object', settings); - if(settings.interval) { - module.delay(settings.animate); - } - else { - module.animate(); - } - module.instantiate(); - } - }, - - instantiate: function() { - module.verbose('Storing instance of module', module); - instance = module; - $module - .data(moduleNamespace, instance) - ; - }, - - destroy: function() { - module.verbose('Destroying previous module for', element); - $module - .removeData(moduleNamespace) - ; - }, - - refresh: function() { - module.verbose('Refreshing display type on next animation'); - delete module.displayType; - }, - - forceRepaint: function() { - module.verbose('Forcing element repaint'); - var - $parentElement = $module.parent(), - $nextElement = $module.next() - ; - if($nextElement.length === 0) { - $module.detach().appendTo($parentElement); - } - else { - $module.detach().insertBefore($nextElement); - } - }, - - repaint: function() { - module.verbose('Repainting element'); - var - fakeAssignment = element.offsetWidth - ; - }, - - delay: function(interval) { - var - direction = module.get.animationDirection(), - shouldReverse, - delay - ; - if(!direction) { - direction = module.can.transition() - ? module.get.direction() - : 'static' - ; - } - interval = (interval !== undefined) - ? interval - : settings.interval - ; - shouldReverse = (settings.reverse == 'auto' && direction == className.outward); - delay = (shouldReverse || settings.reverse == true) - ? ($allModules.length - index) * settings.interval - : index * settings.interval - ; - module.debug('Delaying animation by', delay); - setTimeout(module.animate, delay); - }, - - animate: function(overrideSettings) { - settings = overrideSettings || settings; - if(!module.is.supported()) { - module.error(error.support); - return false; - } - module.debug('Preparing animation', settings.animation); - if(module.is.animating()) { - if(settings.queue) { - if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) { - module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation); - } - else { - module.queue(settings.animation); - } - return false; - } - else if(!settings.allowRepeats && module.is.occurring()) { - module.debug('Animation is already occurring, will not execute repeated animation', settings.animation); - return false; - } - else { - module.debug('New animation started, completing previous early', settings.animation); - instance.complete(); - } - } - if( module.can.animate() ) { - module.set.animating(settings.animation); - } - else { - module.error(error.noAnimation, settings.animation, element); - } - }, - - reset: function() { - module.debug('Resetting animation to beginning conditions'); - module.remove.animationCallbacks(); - module.restore.conditions(); - module.remove.animating(); - }, - - queue: function(animation) { - module.debug('Queueing animation of', animation); - module.queuing = true; - $module - .one(animationEnd + '.queue' + eventNamespace, function() { - module.queuing = false; - module.repaint(); - module.animate.apply(this, settings); - }) - ; - }, - - complete: function (event) { - if(event && event.target === element) { - event.stopPropagation(); - } - module.debug('Animation complete', settings.animation); - module.remove.completeCallback(); - module.remove.failSafe(); - if(!module.is.looping()) { - if( module.is.outward() ) { - module.verbose('Animation is outward, hiding element'); - module.restore.conditions(); - module.hide(); - } - else if( module.is.inward() ) { - module.verbose('Animation is outward, showing element'); - module.restore.conditions(); - module.show(); - } - else { - module.verbose('Static animation completed'); - module.restore.conditions(); - settings.onComplete.call(element); - } - } - }, - - force: { - visible: function() { - var - style = $module.attr('style'), - userStyle = module.get.userStyle(style), - displayType = module.get.displayType(), - overrideStyle = userStyle + 'display: ' + displayType + ' !important;', - inlineDisplay = $module[0].style.display, - mustStayHidden = !displayType || (inlineDisplay === 'none' && settings.skipInlineHidden) || $module[0].tagName.match(/(script|link|style)/i) - ; - if (mustStayHidden){ - module.remove.transition(); - return false; - } - module.verbose('Overriding default display to show element', displayType); - $module - .attr('style', overrideStyle) - ; - return true; - }, - hidden: function() { - var - style = $module.attr('style'), - currentDisplay = $module.css('display'), - emptyStyle = (style === undefined || style === '') - ; - if(currentDisplay !== 'none' && !module.is.hidden()) { - module.verbose('Overriding default display to hide element'); - $module - .css('display', 'none') - ; - } - else if(emptyStyle) { - $module - .removeAttr('style') - ; - } - } - }, - - has: { - direction: function(animation) { - var - hasDirection = false - ; - animation = animation || settings.animation; - if(typeof animation === 'string') { - animation = animation.split(' '); - $.each(animation, function(index, word){ - if(word === className.inward || word === className.outward) { - hasDirection = true; - } - }); - } - return hasDirection; - }, - inlineDisplay: function() { - var - style = $module.attr('style') || '' - ; - return Array.isArray(style.match(/display.*?;/, '')); - } - }, - - set: { - animating: function(animation) { - // remove previous callbacks - module.remove.completeCallback(); - - // determine exact animation - animation = animation || settings.animation; - var animationClass = module.get.animationClass(animation); - - // save animation class in cache to restore class names - module.save.animation(animationClass); - - if(module.force.visible()) { - module.remove.hidden(); - module.remove.direction(); - - module.start.animation(animationClass); - } - }, - duration: function(animationName, duration) { - duration = duration || settings.duration; - duration = (typeof duration == 'number') - ? duration + 'ms' - : duration - ; - if(duration || duration === 0) { - module.verbose('Setting animation duration', duration); - $module - .css({ - 'animation-duration': duration - }) - ; - } - }, - direction: function(direction) { - direction = direction || module.get.direction(); - if(direction == className.inward) { - module.set.inward(); - } - else { - module.set.outward(); - } - }, - looping: function() { - module.debug('Transition set to loop'); - $module - .addClass(className.looping) - ; - }, - hidden: function() { - $module - .addClass(className.transition) - .addClass(className.hidden) - ; - }, - inward: function() { - module.debug('Setting direction to inward'); - $module - .removeClass(className.outward) - .addClass(className.inward) - ; - }, - outward: function() { - module.debug('Setting direction to outward'); - $module - .removeClass(className.inward) - .addClass(className.outward) - ; - }, - visible: function() { - $module - .addClass(className.transition) - .addClass(className.visible) - ; - } - }, - - start: { - animation: function(animationClass) { - animationClass = animationClass || module.get.animationClass(); - module.debug('Starting tween', animationClass); - $module - .addClass(animationClass) - .one(animationEnd + '.complete' + eventNamespace, module.complete) - ; - if(settings.useFailSafe) { - module.add.failSafe(); - } - module.set.duration(settings.duration); - settings.onStart.call(element); - } - }, - - save: { - animation: function(animation) { - if(!module.cache) { - module.cache = {}; - } - module.cache.animation = animation; - }, - displayType: function(displayType) { - if(displayType !== 'none') { - $module.data(metadata.displayType, displayType); - } - }, - transitionExists: function(animation, exists) { - $.fn.transition.exists[animation] = exists; - module.verbose('Saving existence of transition', animation, exists); - } - }, - - restore: { - conditions: function() { - var - animation = module.get.currentAnimation() - ; - if(animation) { - $module - .removeClass(animation) - ; - module.verbose('Removing animation class', module.cache); - } - module.remove.duration(); - } - }, - - add: { - failSafe: function() { - var - duration = module.get.duration() - ; - module.timer = setTimeout(function() { - $module.triggerHandler(animationEnd); - }, duration + settings.failSafeDelay); - module.verbose('Adding fail safe timer', module.timer); - } - }, - - remove: { - animating: function() { - $module.removeClass(className.animating); - }, - animationCallbacks: function() { - module.remove.queueCallback(); - module.remove.completeCallback(); - }, - queueCallback: function() { - $module.off('.queue' + eventNamespace); - }, - completeCallback: function() { - $module.off('.complete' + eventNamespace); - }, - display: function() { - $module.css('display', ''); - }, - direction: function() { - $module - .removeClass(className.inward) - .removeClass(className.outward) - ; - }, - duration: function() { - $module - .css('animation-duration', '') - ; - }, - failSafe: function() { - module.verbose('Removing fail safe timer', module.timer); - if(module.timer) { - clearTimeout(module.timer); - } - }, - hidden: function() { - $module.removeClass(className.hidden); - }, - visible: function() { - $module.removeClass(className.visible); - }, - looping: function() { - module.debug('Transitions are no longer looping'); - if( module.is.looping() ) { - module.reset(); - $module - .removeClass(className.looping) - ; - } - }, - transition: function() { - $module - .removeClass(className.transition) - .removeClass(className.visible) - .removeClass(className.hidden) - ; - } - }, - get: { - settings: function(animation, duration, onComplete) { - // single settings object - if(typeof animation == 'object') { - return $.extend(true, {}, $.fn.transition.settings, animation); - } - // all arguments provided - else if(typeof onComplete == 'function') { - return $.extend({}, $.fn.transition.settings, { - animation : animation, - onComplete : onComplete, - duration : duration - }); - } - // only duration provided - else if(typeof duration == 'string' || typeof duration == 'number') { - return $.extend({}, $.fn.transition.settings, { - animation : animation, - duration : duration - }); - } - // duration is actually settings object - else if(typeof duration == 'object') { - return $.extend({}, $.fn.transition.settings, duration, { - animation : animation - }); - } - // duration is actually callback - else if(typeof duration == 'function') { - return $.extend({}, $.fn.transition.settings, { - animation : animation, - onComplete : duration - }); - } - // only animation provided - else { - return $.extend({}, $.fn.transition.settings, { - animation : animation - }); - } - }, - animationClass: function(animation) { - var - animationClass = animation || settings.animation, - directionClass = (module.can.transition() && !module.has.direction()) - ? module.get.direction() + ' ' - : '' - ; - return className.animating + ' ' - + className.transition + ' ' - + directionClass - + animationClass - ; - }, - currentAnimation: function() { - return (module.cache && module.cache.animation !== undefined) - ? module.cache.animation - : false - ; - }, - currentDirection: function() { - return module.is.inward() - ? className.inward - : className.outward - ; - }, - direction: function() { - return module.is.hidden() || !module.is.visible() - ? className.inward - : className.outward - ; - }, - animationDirection: function(animation) { - var - direction - ; - animation = animation || settings.animation; - if(typeof animation === 'string') { - animation = animation.split(' '); - // search animation name for out/in class - $.each(animation, function(index, word){ - if(word === className.inward) { - direction = className.inward; - } - else if(word === className.outward) { - direction = className.outward; - } - }); - } - // return found direction - if(direction) { - return direction; - } - return false; - }, - duration: function(duration) { - duration = duration || settings.duration; - if(duration === false) { - duration = $module.css('animation-duration') || 0; - } - return (typeof duration === 'string') - ? (duration.indexOf('ms') > -1) - ? parseFloat(duration) - : parseFloat(duration) * 1000 - : duration - ; - }, - displayType: function(shouldDetermine) { - shouldDetermine = (shouldDetermine !== undefined) - ? shouldDetermine - : true - ; - if(settings.displayType) { - return settings.displayType; - } - if(shouldDetermine && $module.data(metadata.displayType) === undefined) { - var currentDisplay = $module.css('display'); - if(currentDisplay === '' || currentDisplay === 'none'){ - // create fake element to determine display state - module.can.transition(true); - } else { - module.save.displayType(currentDisplay); - } - } - return $module.data(metadata.displayType); - }, - userStyle: function(style) { - style = style || $module.attr('style') || ''; - return style.replace(/display.*?;/, ''); - }, - transitionExists: function(animation) { - return $.fn.transition.exists[animation]; - }, - animationStartEvent: function() { - var - element = document.createElement('div'), - animations = { - 'animation' :'animationstart', - 'OAnimation' :'oAnimationStart', - 'MozAnimation' :'mozAnimationStart', - 'WebkitAnimation' :'webkitAnimationStart' - }, - animation - ; - for(animation in animations){ - if( element.style[animation] !== undefined ){ - return animations[animation]; - } - } - return false; - }, - animationEndEvent: function() { - var - element = document.createElement('div'), - animations = { - 'animation' :'animationend', - 'OAnimation' :'oAnimationEnd', - 'MozAnimation' :'mozAnimationEnd', - 'WebkitAnimation' :'webkitAnimationEnd' - }, - animation - ; - for(animation in animations){ - if( element.style[animation] !== undefined ){ - return animations[animation]; - } - } - return false; - } - - }, - - can: { - transition: function(forced) { - var - animation = settings.animation, - transitionExists = module.get.transitionExists(animation), - displayType = module.get.displayType(false), - elementClass, - tagName, - $clone, - currentAnimation, - inAnimation, - directionExists - ; - if( transitionExists === undefined || forced) { - module.verbose('Determining whether animation exists'); - elementClass = $module.attr('class'); - tagName = $module.prop('tagName'); - - $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module); - currentAnimation = $clone - .addClass(animation) - .removeClass(className.inward) - .removeClass(className.outward) - .addClass(className.animating) - .addClass(className.transition) - .css('animationName') - ; - inAnimation = $clone - .addClass(className.inward) - .css('animationName') - ; - if(!displayType) { - displayType = $clone - .attr('class', elementClass) - .removeAttr('style') - .removeClass(className.hidden) - .removeClass(className.visible) - .show() - .css('display') - ; - module.verbose('Determining final display state', displayType); - module.save.displayType(displayType); - } - - $clone.remove(); - if(currentAnimation != inAnimation) { - module.debug('Direction exists for animation', animation); - directionExists = true; - } - else if(currentAnimation == 'none' || !currentAnimation) { - module.debug('No animation defined in css', animation); - return; - } - else { - module.debug('Static animation found', animation, displayType); - directionExists = false; - } - module.save.transitionExists(animation, directionExists); - } - return (transitionExists !== undefined) - ? transitionExists - : directionExists - ; - }, - animate: function() { - // can transition does not return a value if animation does not exist - return (module.can.transition() !== undefined); - } - }, - - is: { - animating: function() { - return $module.hasClass(className.animating); - }, - inward: function() { - return $module.hasClass(className.inward); - }, - outward: function() { - return $module.hasClass(className.outward); - }, - looping: function() { - return $module.hasClass(className.looping); - }, - occurring: function(animation) { - animation = animation || settings.animation; - animation = '.' + animation.replace(' ', '.'); - return ( $module.filter(animation).length > 0 ); - }, - visible: function() { - return $module.is(':visible'); - }, - hidden: function() { - return $module.css('visibility') === 'hidden'; - }, - supported: function() { - return(animationEnd !== false); - } - }, - - hide: function() { - module.verbose('Hiding element'); - if( module.is.animating() ) { - module.reset(); - } - element.blur(); // IE will trigger focus change if element is not blurred before hiding - module.remove.display(); - module.remove.visible(); - if($.isFunction(settings.onBeforeHide)){ - settings.onBeforeHide.call(element,function(){ - module.hideNow(); - }); - } else { - module.hideNow(); - } - - }, - - hideNow: function() { - module.set.hidden(); - module.force.hidden(); - settings.onHide.call(element); - settings.onComplete.call(element); - // module.repaint(); - }, - - show: function(display) { - module.verbose('Showing element', display); - if(module.force.visible()) { - module.remove.hidden(); - module.set.visible(); - settings.onShow.call(element); - settings.onComplete.call(element); - // module.repaint(); - } - }, - - toggle: function() { - if( module.is.visible() ) { - module.hide(); - } - else { - module.show(); - } - }, - - stop: function() { - module.debug('Stopping current animation'); - $module.triggerHandler(animationEnd); - }, - - stopAll: function() { - module.debug('Stopping all animation'); - module.remove.queueCallback(); - $module.triggerHandler(animationEnd); - }, - - clear: { - queue: function() { - module.debug('Clearing animation queue'); - module.remove.queueCallback(); - } - }, - - enable: function() { - module.verbose('Starting animation'); - $module.removeClass(className.disabled); - }, - - disable: function() { - module.debug('Stopping animation'); - $module.addClass(className.disabled); - }, - - setting: function(name, value) { - module.debug('Changing setting', name, value); - if( $.isPlainObject(name) ) { - $.extend(true, settings, name); - } - else if(value !== undefined) { - if($.isPlainObject(settings[name])) { - $.extend(true, settings[name], value); - } - else { - settings[name] = value; - } - } - else { - return settings[name]; - } - }, - internal: function(name, value) { - if( $.isPlainObject(name) ) { - $.extend(true, module, name); - } - else if(value !== undefined) { - module[name] = value; - } - else { - return module[name]; - } - }, - debug: function() { - if(!settings.silent && settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.debug.apply(console, arguments); - } - } - }, - verbose: function() { - if(!settings.silent && settings.verbose && settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.verbose.apply(console, arguments); - } - } - }, - error: function() { - if(!settings.silent) { - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); - module.error.apply(console, arguments); - } - }, - performance: { - log: function(message) { - var - currentTime, - executionTime, - previousTime - ; - if(settings.performance) { - currentTime = new Date().getTime(); - previousTime = time || currentTime; - executionTime = currentTime - previousTime; - time = currentTime; - performance.push({ - 'Name' : message[0], - 'Arguments' : [].slice.call(message, 1) || '', - 'Element' : element, - 'Execution Time' : executionTime - }); - } - clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); - }, - display: function() { - var - title = settings.name + ':', - totalTime = 0 - ; - time = false; - clearTimeout(module.performance.timer); - $.each(performance, function(index, data) { - totalTime += data['Execution Time']; - }); - title += ' ' + totalTime + 'ms'; - if(moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } - if($allModules.length > 1) { - title += ' ' + '(' + $allModules.length + ')'; - } - if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { - console.groupCollapsed(title); - if(console.table) { - console.table(performance); - } - else { - $.each(performance, function(index, data) { - console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); - }); - } - console.groupEnd(); - } - performance = []; - } - }, - // modified for transition to return invoke success - invoke: function(query, passedArguments, context) { - var - object = instance, - maxDepth, - found, - response - ; - passedArguments = passedArguments || queryArguments; - context = element || context; - if(typeof query == 'string' && object !== undefined) { - query = query.split(/[\. ]/); - maxDepth = query.length - 1; - $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; - if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { - object = object[camelCaseValue]; - } - else if( object[camelCaseValue] !== undefined ) { - found = object[camelCaseValue]; - return false; - } - else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { - object = object[value]; - } - else if( object[value] !== undefined ) { - found = object[value]; - return false; - } - else { - return false; - } - }); - } - if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - - if(Array.isArray(returnedValue)) { - returnedValue.push(response); - } - else if(returnedValue !== undefined) { - returnedValue = [returnedValue, response]; - } - else if(response !== undefined) { - returnedValue = response; - } - return (found !== undefined) - ? found - : false - ; - } - }; - module.initialize(); - }) - ; - return (returnedValue !== undefined) - ? returnedValue - : this - ; -}; - -// Records if CSS transition is available -$.fn.transition.exists = {}; - -$.fn.transition.settings = { - - // module info - name : 'Transition', - - // hide all output from this component regardless of other settings - silent : false, - - // debug content outputted to console - debug : false, - - // verbose debug output - verbose : false, - - // performance data output - performance : true, - - // event namespace - namespace : 'transition', - - // delay between animations in group - interval : 0, - - // whether group animations should be reversed - reverse : 'auto', - - // animation callback event - onStart : function() {}, - onComplete : function() {}, - onShow : function() {}, - onHide : function() {}, - - // whether timeout should be used to ensure callback fires in cases animationend does not - useFailSafe : true, - - // delay in ms for fail safe - failSafeDelay : 100, - - // whether EXACT animation can occur twice in a row - allowRepeats : false, - - // Override final display type on visible - displayType : false, - - // animation duration - animation : 'fade', - duration : false, - - // new animations will occur after previous ones - queue : true, - -// whether initially inline hidden objects should be skipped for transition - skipInlineHidden: false, - - metadata : { - displayType: 'display' - }, - - className : { - animating : 'animating', - disabled : 'disabled', - hidden : 'hidden', - inward : 'in', - loading : 'loading', - looping : 'looping', - outward : 'out', - transition : 'transition', - visible : 'visible' - }, - - // possible errors - error: { - noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.', - repeated : 'That animation is already occurring, cancelling repeated animation', - method : 'The method you called is not defined', - support : 'This browser does not support CSS animations' - } - -}; - - })( jQuery, window, document ); diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index d18ace5aa71b..2902dbf34ed7 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -43,7 +43,6 @@ "site", "tab", "table", - "text", - "transition" + "text" ] } diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index b78a5fbf9528..f9253b05f740 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -22,6 +22,41 @@ 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).removeClass('hidden'); + $(el).addClass('visible'); + if (isIn) $(el).addClass('transition'); + arg?.onShow?.(this); + }); + arg?.onComplete?.(this); + } else if (arg === 'hide' || isOut) { + arg?.onStart?.(this); + ret = this.each((_, el) => { + $(el).addClass('hidden'); + $(el).removeClass('visible'); + if (isOut) $(el).removeClass('transition'); + 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. From dda509791db5c561a144ff3027684c95ed651867 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 12 Aug 2023 16:52:12 +0200 Subject: [PATCH 02/15] fix bug by not removing the transition class --- web_src/js/modules/fomantic.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index f9253b05f740..949fab4af1c0 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -48,7 +48,6 @@ export function initGiteaFomantic() { ret = this.each((_, el) => { $(el).addClass('hidden'); $(el).removeClass('visible'); - if (isOut) $(el).removeClass('transition'); arg?.onHidden?.(this); }); arg?.onComplete?.(this); From 49ac8b6b87dea7dcb86a45904da976a513654d04 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 12 Aug 2023 16:54:20 +0200 Subject: [PATCH 03/15] add comment --- web_src/js/modules/fomantic.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index 949fab4af1c0..8738605b0951 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -48,6 +48,7 @@ export function initGiteaFomantic() { ret = this.each((_, el) => { $(el).addClass('hidden'); $(el).removeClass('visible'); + // don't remove the transition class because fomantic didn't do it either arg?.onHidden?.(this); }); arg?.onComplete?.(this); From dc9bd3487a2158bedaf32e6e9193e2b26f826205 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 14 Aug 2023 15:22:32 +0200 Subject: [PATCH 04/15] handle displayType, fix modal --- web_src/js/modules/fomantic.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index 8738605b0951..8d6d813d59b0 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -40,6 +40,9 @@ export function initGiteaFomantic() { $(el).removeClass('hidden'); $(el).addClass('visible'); if (isIn) $(el).addClass('transition'); + if (arg?.displayType) { + el.style.setProperty("display", arg.displayType, "important"); + } arg?.onShow?.(this); }); arg?.onComplete?.(this); @@ -49,6 +52,7 @@ export function initGiteaFomantic() { $(el).addClass('hidden'); $(el).removeClass('visible'); // don't remove the transition class because fomantic didn't do it either + el.style.removeProperty("display"); arg?.onHidden?.(this); }); arg?.onComplete?.(this); From 85607f6ddfea0b6c431d555f5310de29dcc4aa6c Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 14 Aug 2023 15:24:49 +0200 Subject: [PATCH 05/15] use native dom functions --- web_src/js/modules/fomantic.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index 8d6d813d59b0..88c65b8e807e 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -37,20 +37,18 @@ export function initGiteaFomantic() { if (arg === 'show' || isIn) { arg?.onStart?.(this); ret = this.each((_, el) => { - $(el).removeClass('hidden'); - $(el).addClass('visible'); - if (isIn) $(el).addClass('transition'); - if (arg?.displayType) { - el.style.setProperty("display", arg.displayType, "important"); - } + 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).addClass('hidden'); - $(el).removeClass('visible'); + 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); From bc2b2f5bf4f176a55b69fceaa4e0296da08f7d4c Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 14 Aug 2023 15:25:49 +0200 Subject: [PATCH 06/15] fix lint --- web_src/js/modules/fomantic.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index 88c65b8e807e..ab5f842bc6ca 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -40,7 +40,7 @@ export function initGiteaFomantic() { el.classList.remove('hidden'); el.classList.add('visible'); if (isIn) el.classList.add('transition'); - if (arg?.displayType) el.style.setProperty("display", arg.displayType, "important"); + if (arg?.displayType) el.style.setProperty('display', arg.displayType, 'important'); arg?.onShow?.(this); }); arg?.onComplete?.(this); @@ -50,7 +50,7 @@ export function initGiteaFomantic() { 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"); + el.style.removeProperty('display'); arg?.onHidden?.(this); }); arg?.onComplete?.(this); From 523f3332f6f549c344899c1fe1e759e2af0f9ef1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 14 Aug 2023 15:33:06 +0200 Subject: [PATCH 07/15] add comment --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index b0b1b1bf42cc..60e4ea368e42 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -705,11 +705,11 @@ 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; From b64e900c3a8afe5d1141727f971cbd973437f2d3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Aug 2023 15:22:34 +0200 Subject: [PATCH 08/15] add fade-in to modal, add --color-dialog-backdrop --- web_src/css/base.css | 10 ++++++++++ web_src/css/themes/theme-arc-green.css | 1 + 2 files changed, 11 insertions(+) diff --git a/web_src/css/base.css b/web_src/css/base.css index 60e4ea368e42..1694a338fc73 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -248,6 +248,7 @@ --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-6); --color-active-line: #fffbdd; + --color-dialog-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: light; } @@ -1196,6 +1197,15 @@ img.ui.avatar, box-shadow: none; } +.ui.modal { + animation-name: fadein; + animation-duration: 300ms; +} + +.ui.dimmer { + background: var(--color-dialog-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 */ diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 31752ccad6ce..965e1d05828a 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -233,6 +233,7 @@ --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; + --color-dialog-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; } From b346618b3f2880eb55047995c547234343ffef3e Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Aug 2023 15:25:48 +0200 Subject: [PATCH 09/15] rename variable to --color-overlay-backdrop --- web_src/css/base.css | 4 ++-- web_src/css/themes/theme-arc-green.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 1694a338fc73..0b59b0ad25f5 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -248,7 +248,7 @@ --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-6); --color-active-line: #fffbdd; - --color-dialog-backdrop: #080808c0; + --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: light; } @@ -1203,7 +1203,7 @@ img.ui.avatar, } .ui.dimmer { - background: var(--color-dialog-backdrop); + background: var(--color-overlay-backdrop); } /* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 965e1d05828a..088e92d12caa 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -233,7 +233,7 @@ --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; - --color-dialog-backdrop: #080808c0; + --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; } From bd93673b200d96746c821f52d07b99dacc1748f0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Aug 2023 15:27:54 +0200 Subject: [PATCH 10/15] move animation to animations.css --- web_src/css/base.css | 5 ----- web_src/css/modules/animations.css | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 0b59b0ad25f5..cc4e6285a999 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1197,11 +1197,6 @@ img.ui.avatar, box-shadow: none; } -.ui.modal { - animation-name: fadein; - animation-duration: 300ms; -} - .ui.dimmer { background: var(--color-overlay-backdrop); } diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 876758d8bfb3..9d7d4148ad0c 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -105,3 +105,8 @@ code.language-math.is-loading::after { .pulse { animation: pulse 2s linear; } + +.ui.modal { + animation-name: fadein; + animation-duration: 300ms; +} \ No newline at end of file From 9bfe1f1ff5f3815bff1eaf63e5ad3fa11100bddc Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Aug 2023 15:28:45 +0200 Subject: [PATCH 11/15] add newline --- web_src/css/modules/animations.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 9d7d4148ad0c..97d723531aa6 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -109,4 +109,4 @@ code.language-math.is-loading::after { .ui.modal { animation-name: fadein; animation-duration: 300ms; -} \ No newline at end of file +} From 29ffe24ddfa7bf6e842cf79f8e9a5e1ae14b4fa9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Aug 2023 15:42:53 +0200 Subject: [PATCH 12/15] add animation-timing-function --- web_src/css/modules/animations.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 97d723531aa6..2f69117928e8 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -109,4 +109,5 @@ code.language-math.is-loading::after { .ui.modal { animation-name: fadein; animation-duration: 300ms; + animation-timing-function: ease-in-out; } From ca7be519f2289b15c9aaa376c75fcd3daa645940 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Aug 2023 00:37:14 +0200 Subject: [PATCH 13/15] add box-shadow to dropdowns, fix border color issue --- web_src/css/base.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index cc4e6285a999..8f1f209fb1ad 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -225,7 +225,7 @@ --color-button: #fafafa; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000030; + --color-shadow: #00000024; --color-secondary-bg: #f4f4f4; --color-expand-button: #d8efff; --color-placeholder-text: #aaa; @@ -807,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 { @@ -1197,6 +1197,16 @@ 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); } From 886ede974dbaeced65f7cae49d8ac126b1cca8bb Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Aug 2023 00:40:15 +0200 Subject: [PATCH 14/15] slightly darken --color-shadow --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 8f1f209fb1ad..402461a4a150 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -225,7 +225,7 @@ --color-button: #fafafa; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000024; + --color-shadow: #00000028; --color-secondary-bg: #f4f4f4; --color-expand-button: #d8efff; --color-placeholder-text: #aaa; From 1444a4b3c0d5597f744c4ee8646cf35a918778d5 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Aug 2023 00:40:47 +0200 Subject: [PATCH 15/15] slightly brighten --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 402461a4a150..0ea0c8186410 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -225,7 +225,7 @@ --color-button: #fafafa; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000028; + --color-shadow: #00000026; --color-secondary-bg: #f4f4f4; --color-expand-button: #d8efff; --color-placeholder-text: #aaa;