Difference between revisions of "MediaWiki:Common.css"

From Waltharius
Jump to: navigation, search
Line 19: Line 19:
 
.word
 
.word
 
{
 
{
background-image: url('images/metrical.png');
+
background-image: url( 'images/metrical.png');
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
padding: 0 .5em;
 
padding: 0 .5em;
Line 34: Line 34:
 
.parallel
 
.parallel
 
{
 
{
background-image: url('images/layout-2-equal.png');
+
background-image: url( 'images/layout-2-equal.png');
 
}
 
}
  
 
.commentary
 
.commentary
 
{
 
{
background-image: url('images/book-open.png');
+
background-image: url( 'images/book-open.png');
 
}
 
}
  
 
.pictures
 
.pictures
 
{
 
{
background-image: url('images/image.png');
+
background-image: url( 'images/image.png');
 
}
 
}
  
 
.comment
 
.comment
 
{
 
{
background-image: url('images/balloon-left.png');
+
background-image: url( 'images/balloon-left.png');
 
}
 
}
  
Line 82: Line 82:
 
right: auto;
 
right: auto;
 
margin-top: 0;
 
margin-top: 0;
transform: translateY(var(--popup-offset, 0px));
 
 
border: 2px dotted darkslategray;
 
border: 2px dotted darkslategray;
 
padding: 1em;
 
padding: 1em;
background-color: rgba(255,255,255,0.5);
+
background-color:rgb(255,255,255);
pointer-events: none;
+
        z-index: 500;
z-index: 500;
+
        width: var(--popup-width, 70vw);
width: var(--popup-width, 70vw);
+
        max-width: var(--popup-width, 70vw);
max-width: var(--popup-width, 70vw);
+
        min-width: 0;
min-width: 0;
+
        box-sizing: border-box;
box-sizing: border-box;
+
        overflow-wrap: break-word;
overflow-wrap: break-word;
 
 
}
 
}
  
/* Allow popup content to be selected and interacted with */
+
.pictures.open .picturestext *
.meter.open .metertext *,
 
.parallel.open .paralleltext *,
 
.commentary.open .commentarytext *,
 
.pictures.open .picturestext *,
 
.outline.open .outlinetext *,
 
.comment.open .commenttext *,
 
.word.open .wordtext *
 
 
{
 
{
pointer-events: auto;
+
         position: relative;
user-select: text;
+
         margin-left: auto;
}
 
 
 
.pictures.open .picturestext img
 
{
 
         display: block;
 
        width: auto;
 
        height: auto;
 
        max-width: 100%;
 
        max-height: calc(100vh - 4rem);
 
         margin-left: 0;
 
 
         margin-right: auto;
 
         margin-right: auto;
        object-fit: contain;
 
 
}
 
}
  

Revision as of 17:15, 24 July 2026

/* CSS placed here will be applied to all skins */
/* .picturescont { border-left: 3px dotted lightblue; } */

.picturescont
{
       margin-top: -1.5em;
       height: 2.25em;
       padding: 0;
       position: absolute;
       z-index: inherit;
}

.meter,
.parallel,
.commentary,
.pictures,
.outline,
.comment,
.word
{
	background-image: url( 'images/metrical.png');
	background-repeat: no-repeat;
	padding: 0 .5em;
	display: inline;
	position: relative;
}

.word
{
      background-image: none;
      padding: 0;
}

.parallel
{
	background-image: url( 'images/layout-2-equal.png');
}

.commentary
{
	background-image: url( 'images/book-open.png');
}

.pictures
{
	background-image: url( 'images/image.png');
}

.comment
{
	background-image: url( 'images/balloon-left.png');
}

.outline
{
        background-image: url('images/edit-list.png');
}

.meter .metertext,
.parallel .paralleltext,
.commentary .commentarytext,
.pictures .picturestext,
.comment .commenttext,
.outline .outlinetext,
.word .wordtext
{
	display: none;
}

.meter.open .metertext,
.parallel.open .paralleltext,
.commentary.open .commentarytext,
.pictures.open .picturestext,
.outline.open .outlinetext,
.comment.open .commenttext,
.word.open .wordtext
{
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	margin-top: 0;
	border: 2px dotted darkslategray;
	padding: 1em;
	background-color:rgb(255,255,255);
        z-index: 500;
        width: var(--popup-width, 70vw);
        max-width: var(--popup-width, 70vw);
        min-width: 0;
        box-sizing: border-box;
        overflow-wrap: break-word;
}

.pictures.open .picturestext *
{
        position: relative;
        margin-left: auto;
        margin-right: auto;
}

.outline.open .outlinetext
{
       height: 250px;
       overflow-y: auto;
}

#bodyContent table td
{
       padding: .25em 1em;
}