From d212c404d229c0827e6951ad808a787b8de63da0 Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Wed, 23 Oct 2024 10:00:05 +0200 Subject: [PATCH] Remove unused `imageViewer.scss` --- .../install/files/style/ui/imageViewer.scss | 434 ------------------ 1 file changed, 434 deletions(-) delete mode 100644 wcfsetup/install/files/style/ui/imageViewer.scss diff --git a/wcfsetup/install/files/style/ui/imageViewer.scss b/wcfsetup/install/files/style/ui/imageViewer.scss deleted file mode 100644 index a42a989e4a..0000000000 --- a/wcfsetup/install/files/style/ui/imageViewer.scss +++ /dev/null @@ -1,434 +0,0 @@ -/* ImageViewer for WCF */ -.wcfImageViewer { - --wcfImageViewerBorderColor: rgba(51, 51, 51, 1); - --wcfImageViewerBorderColor-rgb: 51 51 51; - --wcfImageViewerFontColor: rgba(211, 211, 211, 1); - - background-color: rgba(0, 0, 0, 1); - bottom: 0; - display: none; - left: 0; - opacity: 0; - position: fixed; - right: 0; - top: 0; - z-index: 399; - - fa-icon { - color: rgb(158, 158, 158); - } - - &.open { - display: block; - opacity: 1; - } - - &.maximized:not(.wcfImageViewerMobile) { - > header { - top: -100px; - } - - > div { - bottom: 0; - border-color: rgba(var(--wcfImageViewerBorderColor-rgb) / 0); - top: 0; - } - - > footer { - bottom: -100px; - } - } - - &.wcfImageViewerMobile { - > header, - > footer { - background-color: rgba(0, 0, 0, 1); - opacity: 1; - position: absolute; - visibility: visible; - z-index: 402; - } - - &.maximized { - > header, - > footer { - opacity: 0; - visibility: hidden; - - transition: - visibility 0s linear 0.24s, - opacity 0.24s linear; - } - - > div > ul > li.pointer { - opacity: 0; - } - } - - > div { - bottom: 0; - top: 0; - - > ul { - > li { - background-color: rgba(224, 224, 224, 1); - border-radius: 30px; - display: block; - margin-top: -24px; - opacity: 0; - position: absolute; - top: 50%; - transition: opacity 0.24s; - - &.pointer { - opacity: 1; - } - - &.wcfImageViewerSlideshowButtonFull, - &.wcfImageViewerSlideshowButtonNext, - &.wcfImageViewerSlideshowButtonPrevious { - /* places buttons above images at all times */ - z-index: 30; - } - - &.wcfImageViewerSlideshowButtonPrevious { - left: 10px; - - > span { - left: -3px; - position: relative; - top: 2px; - } - } - - &.wcfImageViewerSlideshowButtonNext { - right: 10px; - - > span { - position: relative; - right: -1px; - top: 2px; - } - } - - &.wcfImageViewerSlideshowButtonFull { - bottom: 80px; - left: 50%; - top: auto; - transform: translateX(-50%); - - > span { - font-size: 32px; - left: 2px; - position: relative; - top: 3px; - } - } - - &.wcfImageViewerSlideshowButtonToggle, - &.wcfImageViewerSlideshowButtonEnlarge { - display: none; - } - } - } - } - - > footer { - > .wcfImageViewerButtonPrevious, - > .wcfImageViewerButtonNext { - display: none; - } - - > div { - margin: 0; - } - } - } - - > header, - > div, - > footer { - -moz-box-sizing: border-box; - box-sizing: border-box; - left: 0; - position: fixed; - right: 0; - z-index: 400; - } - - > header { - height: 100px; - overflow: hidden; - padding: 1rem; - top: 0; - - > div { - > a > img { - height: 64px; - width: 64px; - } - } - - h1, - h2, - h3 { - color: var(--wcfImageViewerFontColor); - - > a { - color: var(--wcfImageViewerFontColor); - } - } - - h1 { - font-size: 1.75rem; - max-width: calc(100% - 70px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - h2 { - font-size: 1.25rem; - } - - h3 { - color: var(--wcfImageViewerFontColor); - font-size: 0.85rem; - margin-top: 0.25rem; - } - - > .wcfImageViewerButtonClose { - position: absolute; - right: 26px; - top: 26px; - } - } - - > div { - background-color: rgba(0, 0, 0, 1); - border-bottom: 1px solid var(--wcfImageViewerBorderColor); - border-top: 1px solid var(--wcfImageViewerBorderColor); - bottom: 100px; - top: 100px; - transition-property: top, bottom, border-color; - transition-timing-function: linear; - transition-duration: 0.24s; - z-index: 401; - - &.loading:before { - /* - TODO: Migrate this or replace the image viewer. - @extend .icon48; - @extend .fa-spinner; - */ - - content: "" !important; - display: block; - left: calc(50% - 34px); - position: absolute; - top: calc(50% - 34px); - } - - > img { - opacity: 0; - position: absolute; - top: 50%; - transition: opacity 0.24s linear; - z-index: 10; - - &.animateTransformation { - transition: - left 0.24s, - margin-top 0.24s, - height 0.24s, - width 0.24s, - opacity 0.24s; - } - - &.active { - opacity: 1; - z-index: 20; - } - } - } - - &:not(.wcfImageViewerMobile) { - .pointer:hover fa-icon, - .wcfImageViewerButtonClose:hover fa-icon { - color: rgb(255, 255, 255); - } - - > header { - transition: top 0.24s linear; - } - - > footer { - transition: bottom 0.24s linear; - } - - > div { - cursor: pointer; - - > img, - > ul { - cursor: default; - } - - > ul { - background-color: rgba(0, 0, 0, 0.9); - border: 1px solid var(--wcfImageViewerBorderColor); - border-bottom-width: 0; - border-radius: 2px 2px 0 0; - display: flex; - bottom: 0; - left: 50%; - position: absolute; - transform: translateX(-50%); - z-index: 30; - - > li { - display: flex; - flex: 0 0 auto; - padding: 5px; - - &:not(.pointer) fa-icon { - color: rgb(66, 66, 66) !important; - } - - &.wcfImageViewerSlideshowButtonEnlarge, - &.wcfImageViewerSlideshowButtonFull { - border-left: 1px solid var(--wcfImageViewerBorderColor); - box-sizing: border-box; - } - } - } - } - } - - > footer { - bottom: 0; - height: 100px; - padding: 10px; - - &:hover > div > ul > li > img { - -webkit-filter: none; - filter: none; - } - - > span { - bottom: 0; - font-size: 48px; - padding-top: 26px; - opacity: 0; - position: absolute; - top: 0; - transition: opacity 0.24s; - width: 30px; - z-index: 2; - - &.pointer { - opacity: 0.6; - - &:hover { - opacity: 1; - } - } - - &.wcfImageViewerButtonPrevious { - left: 5px; - } - - &.wcfImageViewerButtonNext { - right: 5px; - } - } - - > div { - height: 80px; - margin: 0 35px; - overflow: hidden; - white-space: nowrap; - - > ul { - display: flex; - font-size: 0; - height: 80px; - z-index: 1; - - transition: margin-left cubic-bezier(0.5, 1.595, 0.56, 0.98) 0.24s; - - > li { - align-items: center; - display: flex; - flex: 0 0 80px; - opacity: 0.6; - position: relative; - transition: opacity 0.24s; - - &.active, - &:hover { - opacity: 1; - } - - &:not(:last-child) { - margin-right: 10px; - } - - &.active > img { - -webkit-filter: none; - filter: none; - } - - &.loading { - &:before { - /* - TODO: Migrate this or replace the image viewer. - @extend .icon48; - @extend .fa-spinner; - */ - } - - > img { - opacity: 0; - } - } - - > img { - max-height: 80px; - max-width: 80px; - object-fit: contain; - } - } - } - } - } -} - -@media only screen and (max-width: 800px) { - .wcfImageViewer { - > header { - height: 80px; - - > .wcfImageViewerButtonClose { - right: 16px; - top: 16px; - } - } - - > footer { - height: 80px; - - > div { - height: 60px; - - > ul { - height: 60px; - - > li { - height: 60px; - } - } - } - } - } -} -- 2.20.1