776 lines
17 KiB
CSS
776 lines
17 KiB
CSS
/**********************************************************************
|
|
*
|
|
*
|
|
*
|
|
**********************************************************************/
|
|
|
|
@import '../node_modules/material-symbols/outlined.css';
|
|
|
|
|
|
/********************************************************* Config ****/
|
|
|
|
:root {
|
|
/* dimensions */
|
|
--gallery-image-base-height: 18rem;
|
|
--gallery-image-margin: 0;
|
|
--gallery-current-image-border: 0.7rem;
|
|
--gallery-padding: 3rem;
|
|
--gallery-padding-horizontal: var(--gallery-padding);
|
|
--gallery-padding-vertical: var(--gallery-current-image-border);
|
|
--gallery-padding-top: var(--gallery-padding-vertical);
|
|
--gallery-padding-bottom: var(--gallery-padding-vertical);
|
|
--gallery-padding-left: var(--gallery-padding-horizontal);
|
|
--gallery-padding-right: var(--gallery-padding-horizontal);
|
|
--gallery-image-scroll-margin: calc(2 * var(--gallery-current-image-border));
|
|
--gallery-empty-height: var(--gallery-image-base-height);
|
|
--gallery-scrollbar-width: 0.5rem;
|
|
|
|
--toolbar-button-size: 2rem;
|
|
|
|
--lightbox-frame: 5vmin;
|
|
--lightbox-image-margin-top: 0.75;
|
|
--lightbox-button-size: 2em;
|
|
|
|
/* theme */
|
|
--gallery-text-color: black;
|
|
--gallery-secondary-color: silver;
|
|
--gallery-shade-color: whitesmoke;
|
|
--gallery-background-color: white;
|
|
|
|
--lightbox-text-color: black;
|
|
--lightbox-background-color: white;
|
|
/*--lightbox-background-color: rgba(0,0,0,0.8);*/
|
|
|
|
--color-transition: 1s;
|
|
}
|
|
|
|
.gallery-dark {
|
|
--gallery-text-color: silver;
|
|
--gallery-secondary-color: gray;
|
|
--gallery-shade-color: rgb(50,50,50);
|
|
--gallery-background-color: rgb(10,10,10);
|
|
}
|
|
|
|
.lightbox-dark {
|
|
--lightbox-text-color: silver;
|
|
--lightbox-background-color: rgb(10,10,10);
|
|
}
|
|
|
|
|
|
|
|
/****************************************************** Scrolling ****/
|
|
|
|
::-webkit-scrollbar {
|
|
width: var(--gallery-scrollbar-width);
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
border-radius: 100px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--gallery-secondary-color);
|
|
border-radius: 100px;
|
|
}
|
|
body {
|
|
overflow-y: scroll;
|
|
/* XXX these for some reason do not work in FF... */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent var(--gallery-secondary-color);
|
|
|
|
color: var(--gallery-text-color);
|
|
background: var(--gallery-background-color);
|
|
|
|
transition:
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
}
|
|
button {
|
|
color: var(--gallery-text-color);
|
|
background: var(--gallery-background-color);
|
|
border: solid 1px var(--gallery-secondary-color);
|
|
|
|
transition:
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
}
|
|
button:hover {
|
|
background: var(--gallery-shade-color);
|
|
border: solid 1px var(--gallery-text-color);
|
|
}
|
|
button:active {
|
|
background: var(--gallery-secondary-color);
|
|
border: solid 1px var(--gallery-text-color);
|
|
}
|
|
|
|
|
|
/******************************************************** Gallery ****/
|
|
|
|
/* XXX need to account for scrollbar popping in and out */
|
|
.gallery {
|
|
--base-layer: 10;
|
|
|
|
position: relative;
|
|
|
|
padding-top: var(--gallery-padding-top);
|
|
padding-bottom: var(--gallery-padding-bottom);
|
|
padding-left: calc(
|
|
var(--gallery-scrollbar-width)
|
|
+ var(--gallery-padding-left) );
|
|
padding-right: var(--gallery-padding-right);
|
|
|
|
color: var(--gallery-text-color);
|
|
background: var(--gallery-background-color);
|
|
font-family: sans-serif;
|
|
|
|
overflow-x: clip;
|
|
|
|
transition:
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
}
|
|
.gallery .images {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
/* empty... */
|
|
.gallery .images:empty {
|
|
height: var(--gallery-empty-height);
|
|
border: dashed 1px var(--gallery-secondary-color);
|
|
}
|
|
.gallery .images:empty:after,
|
|
.gallery .images:empty:before {
|
|
--font-size: 1.5rem;
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
line-height: var(--gallery-empty-height);
|
|
text-align: center;
|
|
opacity: 0.6;
|
|
}
|
|
.gallery .images:empty:before {
|
|
content: "Empty";
|
|
font-size: var(--font-size);
|
|
}
|
|
.gallery .images:empty:after {
|
|
content: "(drag new images here)";
|
|
font-size: small;
|
|
margin-top: calc(var(--font-size) / 1.3);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* empty otter... */
|
|
.gallery.otter .images:empty:before,
|
|
.gallery.otter .images:empty:after {
|
|
--font-size: 2em;
|
|
}
|
|
.gallery.otter .images:empty:before {
|
|
content: "🦦";
|
|
filter: saturate(0) contrast(200%);
|
|
}
|
|
.gallery.otter .images:empty:after {
|
|
margin-top: calc(var(--font-size) / 1.5);
|
|
}
|
|
|
|
/* image... */
|
|
.gallery .images img {
|
|
height: var(--gallery-image-base-height);
|
|
width: auto;
|
|
|
|
border: solid var(--gallery-image-margin) transparent;
|
|
box-sizing: border-box;
|
|
|
|
scroll-margin: var(--gallery-image-scroll-margin);
|
|
|
|
image-rendering: crisp-edges;
|
|
|
|
cursor: pointer;
|
|
}
|
|
.gallery:not(.lightboxed) .images img:not(.current):hover {
|
|
z-index: calc(var(--base-layer) + 1);
|
|
box-shadow:
|
|
0px 0px 0px calc(var(--gallery-current-image-border) / 5) rgba(255,255,255,1),
|
|
0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
|
|
}
|
|
|
|
/* current image... */
|
|
.gallery .images img.current {
|
|
z-index: 10;
|
|
box-shadow:
|
|
0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
|
|
0.4em 0.4em 2em 0em rgba(0,0,0,0.8);
|
|
}
|
|
.gallery:not(.lightboxed) .images img.current:hover {
|
|
z-index: calc(var(--base-layer) + 1);
|
|
box-shadow:
|
|
0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
|
|
0.6em 0.6em 3em 0em rgba(0,0,0,0.8);
|
|
}
|
|
|
|
|
|
/* dragged image... */
|
|
.gallery .images img.dragged {
|
|
}
|
|
.gallery .images:has(.dragged) img:not(.dragged) {
|
|
}
|
|
|
|
/* image dragged over... */
|
|
.gallery .images img.dragged-over {
|
|
filter: saturate(0);
|
|
}
|
|
|
|
/* image marked for removal... */
|
|
.gallery .images img.to-remove {
|
|
opacity: 0.3;
|
|
filter: saturate(0);
|
|
}
|
|
|
|
|
|
|
|
|
|
/*************************************************** Image markers ***/
|
|
|
|
.gallery .images img+.mark {
|
|
z-index: var(--base-layer);
|
|
position: relative;
|
|
}
|
|
.gallery .images img:hover+.mark {
|
|
z-index: calc(var(--base-layer) + 1);
|
|
}
|
|
.gallery.lightboxed .images img:not(.current)+.mark {
|
|
display: none;
|
|
}
|
|
.gallery.lightboxed .images img.current+.mark {
|
|
z-index: calc(var(--base-layer) + 1);
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* marker: marked */
|
|
.gallery .images img+.mark.marked:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
right: 0.5em;
|
|
bottom: 0.5em;
|
|
border-radius: 50%;
|
|
|
|
background: blue;
|
|
|
|
box-shadow: 0em 0em 0em 0.05em rgba(255,255,255,1);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
/******************************************************** Toolbar ****/
|
|
|
|
.gallery .toolbar-anchor {
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
margin: 0 calc(var(--gallery-padding-horizontal) * -1);
|
|
|
|
z-index: calc(var(--base-layer) + 2);
|
|
}
|
|
|
|
/* XXX make the toolbar contextual... */
|
|
.gallery .toolbar {
|
|
--move-x: 0;
|
|
--move-y: 0;
|
|
|
|
--padding: 0.5rem;
|
|
--height: calc((var(--toolbar-button-size) + var(--padding) * 2));
|
|
|
|
position: absolute;
|
|
display: inline-block;
|
|
|
|
left: var(--move-x);
|
|
top: var(--move-y);
|
|
|
|
width: fit-content;
|
|
|
|
padding: var(--padding);
|
|
padding-right: var(--height);
|
|
padding-left: var(--height);
|
|
|
|
/*scroll-margin: var(--gallery-image-scroll-margin);*/
|
|
|
|
translate: 0 0;
|
|
|
|
border: solid 1px var(--gallery-secondary-color);
|
|
border-radius: calc(var(--height) / 8);
|
|
background: var(--gallery-background-color);
|
|
|
|
box-shadow: 0.2em 0.2em 0.5em -0.3em rgba(0,0,0,0.8);
|
|
|
|
transition:
|
|
left 0.2s,
|
|
padding-right 0.2s,
|
|
opacity 0.2s,
|
|
translate 0.2s,
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
|
|
user-select: none;
|
|
}
|
|
/* XXX need to hide parts of the toolbar and make it transparent... */
|
|
.gallery.lightboxed .toolbar,
|
|
.gallery.detailed .toolbar {
|
|
display: none;
|
|
}
|
|
|
|
/* moving toolbar... */
|
|
.gallery .toolbar.moving {
|
|
transition: none;
|
|
}
|
|
|
|
/* fixed toolbar... */
|
|
.gallery .toolbar.fixed {
|
|
padding-left: var(--padding);
|
|
}
|
|
.gallery .toolbar.fixed .drag-handle {
|
|
display: none;
|
|
}
|
|
|
|
/* sticky toolbar indicator... */
|
|
.gallery .toolbar.sticky:after {
|
|
content: "lock";
|
|
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: calc(var(--toolbar-button-size) / 10);
|
|
|
|
font-family: "Material Symbols Outlined";
|
|
font-size: small;
|
|
font-weight: bold;
|
|
|
|
opacity: 0.3;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* collapsed toolbar (default)... */
|
|
/* XXX shoud the toolbar be vertical??? */
|
|
.gallery .toolbar:not(.shown) {
|
|
translate: calc(-100% + var(--toolbar-button-size) + var(--padding)) 0;
|
|
|
|
left: 0;
|
|
|
|
/*padding-right: calc(var(--padding) / 5);*/
|
|
padding-right: var(--height);
|
|
}
|
|
.gallery .toolbar:not(.shown):not(:hover) {
|
|
box-shadow: none;
|
|
|
|
z-index: var(--base-layer);
|
|
animation: 0.5s steps(1) tuck-to-backgroud;
|
|
}
|
|
@keyframes tuck-to-backgroud {
|
|
0% {
|
|
z-index: calc(var(--base-layer) + 2);
|
|
}
|
|
100% {
|
|
z-index: var(--base-layer);
|
|
}
|
|
}
|
|
|
|
|
|
/* groups... */
|
|
.gallery .toolbar>* {
|
|
display: inline-block;
|
|
}
|
|
.gallery .toolbar>*:not(:last-child) {
|
|
padding-right: calc(var(--padding) / 2);
|
|
border-right: solid 1px var(--gallery-secondary-color);
|
|
}
|
|
|
|
/* buttons... */
|
|
.gallery .toolbar button {
|
|
min-width: var(--toolbar-button-size);
|
|
|
|
border: solid 1px transparent;
|
|
background: transparent;
|
|
|
|
|
|
font-family: "Material Symbols Outlined";
|
|
font-size: var(--toolbar-button-size);
|
|
line-height: var(--toolbar-button-size);
|
|
font-weight: 300;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: "liga";
|
|
|
|
text-align: center;
|
|
|
|
color: var(--gallery-text-color);
|
|
|
|
transition:
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
}
|
|
.gallery .toolbar button sec {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
left: 0;
|
|
bottom: calc(var(--toolbar-button-size) / -6);
|
|
margin-left: calc(var(--toolbar-button-size) / -1.5625);
|
|
|
|
font-size: calc(var(--toolbar-button-size) / 1.15);
|
|
|
|
/* XXX HACK: might be better to use SVG for this... */
|
|
text-shadow:
|
|
0em 0.05em 0px var(--gallery-background-color),
|
|
0.05em 0em 0px var(--gallery-background-color),
|
|
-0.05em 0em 0px var(--gallery-background-color),
|
|
0em -0.05em 0px var(--gallery-background-color),
|
|
0.05em 0.05em 0px var(--gallery-background-color),
|
|
-0.05em -0.05em 0px var(--gallery-background-color),
|
|
-0.05em 0.05em 0px var(--gallery-background-color),
|
|
0.05em -0.05em 0px var(--gallery-background-color);
|
|
|
|
transition:
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
}
|
|
|
|
.gallery .toolbar button:hover {
|
|
border-radius: calc(var(--toolbar-button-size) / 5);
|
|
border-color: var(--gallery-secondary-color);
|
|
}
|
|
|
|
|
|
/* button: collapse... */
|
|
.gallery .toolbar button.collapse {
|
|
position: absolute;
|
|
width: var(--height);
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
opacity: 0.4;
|
|
|
|
transition:
|
|
rotate 0.2s,
|
|
text-shadow var(--color-transition) ease,
|
|
background var(--color-transition) ease,
|
|
color var(--color-transition) ease;
|
|
}
|
|
.gallery .toolbar:not(.shown) button.collapse {
|
|
rotate: 180deg;
|
|
}
|
|
.gallery .toolbar button.collapse:hover {
|
|
opacity: 1;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.gallery .toolbar button.drag-handle {
|
|
position: absolute;
|
|
height: calc(100% - var(--padding) * 2);
|
|
top: 0;
|
|
left: 0;
|
|
margin-top: var(--padding);
|
|
margin-bottom: var(--padding);
|
|
|
|
font-family: "Material Symbols Outlined";
|
|
font-size: var(--toolbar-button-size);
|
|
line-height: var(--toolbar-button-size);
|
|
font-weight: 300;
|
|
|
|
cursor: pointer;
|
|
|
|
color: var(--gallery-secondary-color);
|
|
}
|
|
.gallery .toolbar .drag-handle:hover {
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
|
|
|
|
/******************************************************* Overlays ****/
|
|
|
|
.gallery.lightboxed,
|
|
.gallery.detailed {
|
|
--base-layer: 100;
|
|
}
|
|
.gallery.lightboxed .lightbox,
|
|
.gallery.detailed .details {
|
|
display: block;
|
|
}
|
|
|
|
.gallery .lightbox,
|
|
.gallery .details {
|
|
display: none;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: var(--base-layer);
|
|
|
|
text-align: center;
|
|
|
|
color: var(--gallery-text-color);
|
|
background: var(--gallery-background-color);
|
|
}
|
|
|
|
|
|
/*------------------------------------------------------ Lightbox ---*/
|
|
|
|
.gallery .lightbox {
|
|
color: var(--lightbox-text-color);
|
|
background: var(--lightbox-background-color);
|
|
}
|
|
.gallery .lightbox.show-caption:before {
|
|
content: attr(caption);
|
|
position: absolute;
|
|
bottom: 0.5em;
|
|
left: 0.5em;
|
|
}
|
|
.gallery .lightbox.clickable {
|
|
cursor: pointer;
|
|
}
|
|
/* XXX add metadata display... */
|
|
.gallery .lightbox img {
|
|
object-fit: contain;
|
|
width: calc(
|
|
100vw
|
|
- var(--lightbox-frame) * 2);
|
|
height: calc(
|
|
100vh
|
|
- var(--lightbox-frame) * 2);
|
|
margin-top: calc(
|
|
var(--lightbox-frame)
|
|
* var(--lightbox-image-margin-top));
|
|
}
|
|
|
|
|
|
/*------------------------------------------------------- Details ---*/
|
|
|
|
.gallery .details img {
|
|
width: 20em;
|
|
height: 20em;
|
|
padding: 0.5em;
|
|
object-fit: contain;
|
|
border: solid 1px black;
|
|
}
|
|
|
|
|
|
/******************************************************* Controls ****/
|
|
/* XXX these are only used in the lightbox... */
|
|
|
|
.gallery .buttons {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
}
|
|
.gallery .button {
|
|
disbplay: inline-block;
|
|
cursor: pointer;
|
|
width: var(--lightbox-button-size);
|
|
height: var(--lightbox-button-size);
|
|
|
|
font-size: var(--lightbox-button-size);
|
|
line-height: var(--lightbox-button-size);
|
|
filter: saturate(0);
|
|
|
|
opacity: 0.1;
|
|
}
|
|
.gallery .button:hover {
|
|
opacity: 1;
|
|
filter: saturate(1);
|
|
color: var(--lightbox-text-color);
|
|
|
|
/* XXX HACK: might be better to use SVG for this... */
|
|
text-shadow:
|
|
0.02em 0.02em 0em var(--lightbox-background-color),
|
|
-0.02em -0.02em 0em var(--lightbox-background-color),
|
|
-0.02em 0.02em 0em var(--lightbox-background-color),
|
|
0.02em -0.02em 0em var(--lightbox-background-color);
|
|
}
|
|
/* controls: close... */
|
|
.gallery .button.close:after {
|
|
content: "✕";
|
|
/*color: red;*/
|
|
}
|
|
.gallery .button.fullscreen:after {
|
|
content: "⛶";
|
|
}
|
|
.gallery .button.info:after {
|
|
content: "i";
|
|
}
|
|
.gallery .button.prev:after {
|
|
content: "<";
|
|
}
|
|
.gallery .button.next:after {
|
|
content: ">";
|
|
}
|
|
|
|
|
|
|
|
/********************************************************* Splash ****/
|
|
|
|
.gallery .loading {
|
|
position: absolute;
|
|
display: block;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height:100%;
|
|
|
|
text-align: center;
|
|
|
|
z-index: calc(var(--base-layer) * 2);
|
|
|
|
background: var(--gallery-background-color);
|
|
opacity: 0.5;
|
|
}
|
|
.gallery.ready .loading {
|
|
animation: fadeOutAnimation ease 2s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes fadeOutAnimation {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.gallery.ready .loading * {
|
|
display: none;
|
|
}
|
|
|
|
/* loading bar animation... */
|
|
.gallery .loading>div {
|
|
--bar-size: 0.2rem;
|
|
|
|
position: sticky;
|
|
top: var(--bar-size);
|
|
height: var(--bar-size);
|
|
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
.gallery .loading>div:before,
|
|
.gallery .loading>div:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--bar-size);
|
|
background: var(--gallery-text-color);
|
|
opacity: 0.5;
|
|
}
|
|
.gallery .loading>div:after {
|
|
animation: loadingBarAnimation ease infinite alternate 2s;
|
|
}
|
|
.gallery .loading>div:before {
|
|
width: 50%;
|
|
animation: loadingBarAnimation ease infinite alternate 1.5s;
|
|
}
|
|
@keyframes loadingBarAnimation {
|
|
0% {
|
|
translate: -100%;
|
|
}
|
|
100% {
|
|
translate: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* loading images animation... */
|
|
.gallery:not(.ready) .images .mark {
|
|
display: none;
|
|
}
|
|
.gallery:not(.ready) .images img {
|
|
--duration: 3s;
|
|
|
|
--delay: 0s;
|
|
--extend: 1;
|
|
|
|
box-shadow: none;
|
|
|
|
animation:
|
|
loadingImagesAnimation
|
|
ease
|
|
infinite
|
|
alternate
|
|
calc(var(--duration) * var(--extend))
|
|
var(--delay);
|
|
}
|
|
/* variations... */
|
|
.gallery .images img:nth-child(2n) {
|
|
--delay: 0.2s;
|
|
--extend: 0.9;
|
|
}
|
|
.gallery .images img:nth-child(3n) {
|
|
--delay: 0.5s;
|
|
--extend: 1.3;
|
|
}
|
|
.gallery .images img:nth-child(5n) {
|
|
--delay: 0.4s;
|
|
--extend: 1.6;
|
|
}
|
|
.gallery .images img:nth-child(7n) {
|
|
--delay: 0.1s;
|
|
--extend: 0.6;
|
|
}
|
|
@keyframes loadingImagesAnimation {
|
|
0% {
|
|
filter: contrast(0);
|
|
opacity: 0.2;
|
|
}
|
|
50% {
|
|
filter: contrast(0);
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
filter: contrast(0);
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/********************************************************** Utils ****/
|
|
|
|
.gallery:not(.lightboxed):not(.detailed) .hide-in-gallery,
|
|
.gallery.lightboxed .hide-in-lightbox,
|
|
.gallery.detailed .hide-in-details {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/**********************************************************************
|
|
* vim:set ts=4 sw=4 : */
|