Initial
This commit is contained in:
121
public/css/gallerydeluxe/styles.css
Normal file
121
public/css/gallerydeluxe/styles.css
Normal file
@@ -0,0 +1,121 @@
|
||||
.gd-figure:hover {
|
||||
filter: brightness(1.25);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gd-modal-target {
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.gd-modal-target:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.gd-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.gd-modal-content-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Modal Content (image) */
|
||||
.gd-modal-content {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.gd-modal-content.gd-modal-thumbnail {
|
||||
backdrop-filter: blur(5px);
|
||||
transition: opacity 0.75s ease;
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gd-modal-content.gd-modal-loaded.gd-modal-thumbnail {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gd-modal-exif {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
color: #fff;
|
||||
background-color: #8a8a8a;
|
||||
padding: 0.75rem;
|
||||
opacity: 0.75;
|
||||
filter: drop-shadow(-1px -1px 2px #ccc);
|
||||
}
|
||||
|
||||
.gd-modal-exif-ontimeout {
|
||||
transition: opacity 2s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gd-modal-exif:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gd-modal-exif dl dd {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gd-modal-exif dl dd:after {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.gd-modal-exif dl dt {
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.gd-modal-close {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 0px;
|
||||
right: 10px;
|
||||
color: #8a8a8a;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 800px) {
|
||||
.gd-modal-close {
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.gd-modal-close:hover,
|
||||
.gd-modal-close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.gd-figure:hover{filter:brightness(1.25);cursor:pointer}.gd-modal-target{width:300px;border-radius:5px;cursor:pointer;transition:.3s}.gd-modal-target:hover{opacity:.7}.gd-modal{display:none;position:fixed;z-index:5;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.8)}.gd-modal-content-wrapper{position:relative;width:100%;height:100%}.gd-modal-content{max-width:100%;max-height:100%;bottom:0;left:0;margin:auto;overflow:auto;position:fixed;right:0;top:0;object-fit:contain}.gd-modal-content.gd-modal-thumbnail{backdrop-filter:blur(5px);transition:opacity .75s ease;z-index:10;opacity:1}.gd-modal-content.gd-modal-loaded.gd-modal-thumbnail{opacity:0;pointer-events:none}.gd-modal-exif{position:absolute;z-index:20;bottom:10px;right:10px;color:#fff;background-color:#8a8a8a;padding:.75rem;opacity:.75;filter:drop-shadow(-1px -1px 2px #ccc)}.gd-modal-exif-ontimeout{transition:opacity 2s ease-out;opacity:0}.gd-modal-exif:hover{opacity:1;cursor:pointer}.gd-modal-exif dl dd{display:inline;margin:0}.gd-modal-exif dl dd:after{display:block;content:""}.gd-modal-exif dl dt{display:inline-block;min-width:100px}.gd-modal-close{position:absolute;z-index:20;top:0;right:10px;color:#8a8a8a;font-size:40px;font-weight:700;transition:.3s}@media only screen and (max-device-width:800px){.gd-modal-close{font-size:45px}}.gd-modal-close:hover,.gd-modal-close:focus{color:#bbb;text-decoration:none;cursor:pointer}
|
||||
Reference in New Issue
Block a user