diff --git a/ui/common/css/abstract/_z-index.scss b/ui/common/css/abstract/_z-index.scss index aaa2da44d3..0578cdad15 100644 --- a/ui/common/css/abstract/_z-index.scss +++ b/ui/common/css/abstract/_z-index.scss @@ -24,6 +24,7 @@ $z-indexes: ( 'site-header': 106, 'reconnecting': 105, 'tour-reminder': 104, + 'nag-circle': 103, 'above-link-overlay': 3, 'friend-box': 2, 'link-overlay': 2, diff --git a/ui/common/css/component/_board-resize.scss b/ui/common/css/component/_board-resize.scss index de80ed167e..c213a59c9d 100644 --- a/ui/common/css/component/_board-resize.scss +++ b/ui/common/css/component/_board-resize.scss @@ -31,10 +31,13 @@ body.resizing { translate(1px, 6px) rotate(-45deg); } - &:hover, - &:active { + &:hover { border-radius: 50%; background: fade-out($c-accent, 0.5); } + .resizing & { + border-radius: 50%; + background: fade-out($c-secondary, 0.5); + } } } diff --git a/ui/common/css/component/_nag-circle.scss b/ui/common/css/component/_nag-circle.scss new file mode 100644 index 0000000000..850b6dad09 --- /dev/null +++ b/ui/common/css/component/_nag-circle.scss @@ -0,0 +1,66 @@ +$c-circle: 'd64f00'; +$scale-out: 1.15; + +@keyframes inner-circle-loop { + 0% { + opacity: .2; + transform: scale(#{$scale-out}) + } + + 42% { + opacity: .8; + transform: scale(.9) + } + + to { + opacity: .2; + transform: scale(#{$scale-out}) + } +} + +@keyframes outer-circle-loop { + 0% { + opacity: 0; + transform: scale(#{$scale-out}) + } + + 51% { + opacity: .9; + transform: scale(.9) + } + + to { + opacity: 0; + transform: scale(#{$scale-out}) + } +} + +.nag-circle { + position: absolute; + z-index: z('nag-circle'); + top: -8px; + left: -8px; + + &::before { + content: ' '; + animation: inner-circle-loop 1.5s infinite; + position: absolute; + background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 17 17' enable-background='new 0 0 17 17' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23#{$c-circle}' d='M8.495,2c0.566,0,1.133,0.075,1.687,0.223c3.461,0.928,5.522,4.498,4.595,7.958 C14.016,13.019,11.437,15,8.505,15c-0.566,0-1.134-0.075-1.687-0.223c-1.677-0.449-3.078-1.524-3.946-3.027 c-0.868-1.503-1.098-3.254-0.649-4.931C2.984,3.981,5.562,2,8.495,2 M8.495,0C4.743,0,1.309,2.504,0.292,6.301 c-1.215,4.533,1.475,9.193,6.009,10.408C7.037,16.906,7.777,17,8.505,17c3.752,0,7.186-2.504,8.203-6.301 c1.215-4.533-1.476-9.193-6.009-10.408C9.963,0.094,9.223,0,8.495,0L8.495,0z'/%3E%3C/g%3E%3C/svg%3E%0A"); + background-size: contain; + width: 30px; + height: 30px; + top: 3px; + left: 3px; + } + + + &::after { + content: ' '; + animation: outer-circle-loop 1.5s infinite; + position: absolute; + background: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23#{$c-circle}' d='M9.994,1c0.784,0,1.569,0.104,2.335,0.309c4.792,1.284,7.646,6.228,6.362,11.02 C17.638,16.257,14.067,19,10.006,19c-0.784,0-1.57-0.104-2.335-0.309c-2.322-0.622-4.262-2.111-5.463-4.192 c-1.202-2.081-1.521-4.506-0.899-6.828C2.362,3.743,5.933,1,9.994,1 M9.994,0C5.58,0,1.54,2.946,0.343,7.412 c-1.429,5.333,1.736,10.815,7.069,12.244C8.279,19.889,9.15,20,10.006,20c4.414,0,8.454-2.946,9.651-7.412 c1.429-5.333-1.736-10.815-7.069-12.244C11.721,0.111,10.85,0,9.994,0L9.994,0z'/%3E%3C/g%3E%3C/svg%3E ") 50% no-repeat; + background-size: contain; + width: 36px; + height: 36px; + } +} diff --git a/ui/common/src/resize.ts b/ui/common/src/resize.ts index b46679423d..d74fd9ae7a 100644 --- a/ui/common/src/resize.ts +++ b/ui/common/src/resize.ts @@ -39,6 +39,8 @@ export default function resizeHandle(el: HTMLElement) { document.body.classList.remove('resizing'); }, { once: true }); }); + + addNag(el); } function eventPosition(e: MouchEvent): [number, number] | undefined { @@ -46,3 +48,17 @@ function eventPosition(e: MouchEvent): [number, number] | undefined { if (e.touches && e.targetTouches[0]) return [e.targetTouches[0].clientX, e.targetTouches[0].clientY]; return undefined; } + +function addNag(el: HTMLElement) { + + const storage = window.lichess.storage.makeBoolean('resize-nag'); + if (storage.get()) return; + + window.lichess.loadCssPath('nag-circle'); + el.title = 'Drag to resize'; + el.innerHTML = '
'; + el.addEventListener(window.lichess.mousedownEvent, () => { + storage.set(true); + el.innerHTML = ''; + }, { once: true }); +} diff --git a/ui/site/css/build/_nag-circle.scss b/ui/site/css/build/_nag-circle.scss new file mode 100644 index 0000000000..b2b372b5a1 --- /dev/null +++ b/ui/site/css/build/_nag-circle.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/plugin'; +@import '../../../common/css/component/nag-circle'; diff --git a/ui/site/css/build/nag-circle.dark.scss b/ui/site/css/build/nag-circle.dark.scss new file mode 100644 index 0000000000..53aa2c789b --- /dev/null +++ b/ui/site/css/build/nag-circle.dark.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/theme/dark'; +@import 'nag-circle'; diff --git a/ui/site/css/build/nag-circle.light.scss b/ui/site/css/build/nag-circle.light.scss new file mode 100644 index 0000000000..46f758083f --- /dev/null +++ b/ui/site/css/build/nag-circle.light.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/theme/light'; +@import 'nag-circle'; diff --git a/ui/site/css/build/nag-circle.transp.scss b/ui/site/css/build/nag-circle.transp.scss new file mode 100644 index 0000000000..6063bcf71e --- /dev/null +++ b/ui/site/css/build/nag-circle.transp.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/theme/transp'; +@import 'nag-circle';