LightboxModern CSS

Styling LightboxModern

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

/* ==UserStyle==
@name         LightboxModern CSS
@description  Styling LightboxModern
@namespace    yu
@version      1.0
@preprocessor default
@license      MIT
==/UserStyle== */

.LightboxModern {
  position: fixed;
  top: 0;
  left: 0;
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
}

.LightboxModern .Progress {
  width: 0%;
  height: 12px;
  background-color: aquamarine;
}

.LightboxModern .ImageWrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0%;
  transition: opacity .5s ease;
}

.LightboxModern .ImageWrapper.FadeIn {
  opacity: 100%;
}

.LightboxModern .ImageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.LightboxModern .ImageWrapper .ImagePadding {
  padding: 20em;
  position: absolute;
  z-index: 10;
} 

.LightboxModern .Swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}