e4264f837f
Deature request: #012801 Discourse: https://gramps.discourse.group/t/narrated-website-browsing-media-in-person-page/3195
159 lines
3.2 KiB
CSS
159 lines
3.2 KiB
CSS
/*
|
|
#
|
|
# Gramps - a GTK+/GNOME based genealogy program
|
|
#
|
|
# Copyright 2023- Serge Noiraud
|
|
#
|
|
# This program is free software; you can redistribute it and/or modify
|
|
# it under the terms of the GNU General Public License as published by
|
|
# the Free Software Foundation; either version 2 of the License, or
|
|
# (at your option) any later version.
|
|
#
|
|
# This program is distributed in the hope that it will be useful,
|
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
# GNU General Public License for more details.
|
|
#
|
|
# You should have received a copy of the GNU General Public License
|
|
# along with this program; if not, write to the Free Software
|
|
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
|
#
|
|
|
|
**************************************************************************************************
|
|
GRAMPS cascading style sheet for common lightbox
|
|
Style Name: n/a (used by many different styles)
|
|
Style Author: Serge Noiraud based on W3C: https://www.w3schools.com/howto/howto_js_lightbox.asp
|
|
**************************************************************************************************/
|
|
|
|
.MediaRow {
|
|
z-index: 999;
|
|
}
|
|
|
|
.MediaRow > .MediaColumn {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.MediaRow:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.MediaColumn {
|
|
float: left;
|
|
width: 15%;
|
|
height: 100px;
|
|
}
|
|
|
|
/* The Modal (background) */
|
|
.ModalClass {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 900;
|
|
padding-top: 5px;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Modal Content */
|
|
.ModalContent {
|
|
position: relative;
|
|
background-color: #fefefe;
|
|
margin: auto;
|
|
padding: 0;
|
|
width: 95%;
|
|
}
|
|
|
|
/* The Close Button */
|
|
.MediaClose {
|
|
color: black;
|
|
position: absolute;
|
|
z-index: 960;
|
|
top: 10px;
|
|
right: 1%;
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.MediaClose:hover,
|
|
.MediaClose:focus {
|
|
color: #999;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.MediaSlide {
|
|
display: none;
|
|
}
|
|
|
|
.MediaCursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Next & previous buttons */
|
|
.MediaPrev,
|
|
.MediaNext {
|
|
cursor: pointer;
|
|
position: fixed;
|
|
width: auto;
|
|
top: 300px;
|
|
padding: 16px;
|
|
margin-top: -50px;
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 48px;
|
|
transition: 0.6s ease;
|
|
border-radius: 0 3px 3px 0;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Position the "next button" to the right */
|
|
.MediaNext {
|
|
right: 2%;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
/* On hover, add a black background color with a little bit see-through */
|
|
.MediaPrev:hover,
|
|
.MediaNext:hover {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Number text (1/3 etc) */
|
|
.MediaNumber {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
padding: 8px 12px;
|
|
position: absolute;
|
|
color: black;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Less whitespace on smaller real estate. */
|
|
@media only screen and (max-width: 1080px) {
|
|
.MediaNumber {
|
|
font-size: 12px;
|
|
}
|
|
.MediaPrev,
|
|
.MediaNext {
|
|
top: 100px;
|
|
font-size: 24px;
|
|
}
|
|
.MediaClose {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
img.hover-shadow {
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.hover-shadow:hover {
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|