Difference between revisions of "MediaWiki:Common.css"

From Waltharius
Jump to: navigation, search
 
(7 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
/* .picturescont { border-left: 3px dotted lightblue; } */
 
/* .picturescont { border-left: 3px dotted lightblue; } */
  
.picturescont
+
.picturescont {
{
+
margin-top: -1.5em;
      margin-top: -1.5em;
+
height: 2.25em;
      height: 2.25em;
+
padding: 0;
      padding: 0;
+
position: absolute;
      position: absolute;
+
z-index: inherit;
      z-index: inherit;
 
 
}
 
}
  
Line 17: Line 16:
 
.outline,
 
.outline,
 
.comment,
 
.comment,
.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 0.5em;
 
display: inline;
 
display: inline;
 
position: relative;
 
position: relative;
 
}
 
}
  
.word
+
.word {
{
+
background-image: none;
      background-image: none;
+
padding: 0;
      padding: 0;
 
 
}
 
}
  
.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');
 
}
 
}
  
.outline
+
.outline {
{
+
background-image: url('images/edit-list.png');
        background-image: url('images/edit-list.png');
 
 
}
 
}
  
Line 63: Line 55:
 
.comment .commenttext,
 
.comment .commenttext,
 
.outline .outlinetext,
 
.outline .outlinetext,
.word .wordtext
+
.word .wordtext {
{
 
 
display: none;
 
display: none;
 
}
 
}
Line 74: Line 65:
 
.outline.open .outlinetext,
 
.outline.open .outlinetext,
 
.comment.open .commenttext,
 
.comment.open .commenttext,
.word.open .wordtext
+
.word.open .wordtext {
{
 
 
display: block;
 
display: block;
 
position: absolute;
 
position: absolute;
 
top: 100%;
 
top: 100%;
 
left: 0;
 
left: 0;
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.6);
+
background-color: #fff;
pointer-events: none;
 
 
z-index: 500;
 
z-index: 500;
 
width: var(--popup-width, 70vw);
 
width: var(--popup-width, 70vw);
Line 95: Line 82:
 
}
 
}
  
/* Allow popup content to be selected and interacted with */
+
.pictures.open .picturestext {
.meter.open .metertext *,
+
text-align: left !important;
.parallel.open .paralleltext *,
+
}
.commentary.open .commentarytext *,
+
 
.pictures.open .picturestext *,
+
.pictures.open .picturestext figure,
.outline.open .outlinetext *,
+
.pictures.open .picturestext .thumb,
.comment.open .commenttext *,
+
.pictures.open .picturestext .thumbinner,
.word.open .wordtext *
+
.pictures.open .picturestext .center,
{
+
.pictures.open .picturestext a.image,
pointer-events: auto;
+
.pictures.open .picturestext img {
user-select: text;
+
float: none !important;
 +
text-align: left !important;
 +
margin-left: 0 !important;
 +
margin-right: auto !important;
 
}
 
}
  
.pictures.open .picturestext img
+
.pictures.open .picturestext img {
{
+
display: block !important;
        display: block;
 
        width: auto;
 
        height: auto;
 
        max-width: 100%;
 
        max-height: calc(100vh - 4rem);
 
        margin-left: 0;
 
        margin-right: auto;
 
        object-fit: contain;
 
 
}
 
}
  
.outline.open .outlinetext
+
.outline.open .outlinetext {
{
+
height: 250px;
      height: 250px;
+
overflow-y: auto;
      overflow-y: auto;
 
 
}
 
}
  
#bodyContent table td
+
#bodyContent table td {
{
+
padding: 0.25em 1em;
      padding: .25em 1em;
 
 
}
 
}

Latest revision as of 17:20, 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 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;
	margin-top: 0;
	border: 2px dotted darkslategray;
	padding: 1em;
	background-color: #fff;
	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 {
	text-align: left !important;
}

.pictures.open .picturestext figure,
.pictures.open .picturestext .thumb,
.pictures.open .picturestext .thumbinner,
.pictures.open .picturestext .center,
.pictures.open .picturestext a.image,
.pictures.open .picturestext img {
	float: none !important;
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.pictures.open .picturestext img {
	display: block !important;
}

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

#bodyContent table td {
	padding: 0.25em 1em;
}