LightboxModern CSS

Styling LightboxModern

当前为 2023-11-25 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 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;
}