mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-12-13 07:48:37 +00:00
abfcd2c01b
Allow RevisionSlider to work properly in both LTR and RTL contexts by making sure that when the interface language is RTL, the entire interface flips. "Backwards" and "Forwards" are reversed in RTL context, and the code and behavior should respond to that. Changes made: * Make sure the container has a direction set * Change the placement of the revision divs from absolute positioning (that requires re-calculations when the page is flipped to RTL) to divs that are display: inline-block and have no right/left setting. This means that the DOM will automatically flip its own visual order when the container is set to RTL. * Flip the calculation of positioning and the calculation of which element the pointer is on when it is dragged if the document is RTL. * Mirror all scroll animations when the page is in RTL. * Rename the scroll buttons to 'backwards' and 'forwards' for clarity, as they are flipped when the interface is RTL. * Rename pointers to 'older' and 'newer' instead of trusting their order in the DOM. Bug: T136277 Change-Id: I7c903c2e9d8ee2a0ef2eeb7b99f2251f230a794e
164 lines
3.2 KiB
CSS
164 lines
3.2 KiB
CSS
#mw-revision-slider-container {
|
|
/* This will flip with CSSJanus in case */
|
|
/* the interface is in RTL */
|
|
direction: ltr;
|
|
}
|
|
.mw-revision {
|
|
position: relative;
|
|
margin-top: 70px;
|
|
background-color: #e3e3e3;
|
|
border-color: #e3e3e3;
|
|
}
|
|
.mw-revision:hover {
|
|
background-color: #cccccc;
|
|
border-color: #cccccc;
|
|
transition: all ease 0.2s;
|
|
-webkit-transition: all ease 0.2s;
|
|
-moz-transition: all ease 0.2s;
|
|
-o-transition: all ease 0.2s;
|
|
}
|
|
.mw-revision-up {
|
|
border-bottom-width: 2px;
|
|
border-bottom-style: solid;
|
|
}
|
|
.mw-revision-down {
|
|
border-top-width: 2px;
|
|
border-top-style: solid;
|
|
}
|
|
|
|
.mw-revision-old {
|
|
background-color: #fee6a8;
|
|
border-color: #e8bd4f;
|
|
}
|
|
.mw-revision-old:hover {
|
|
background-color: #fdc44b;
|
|
border-color: #dda000;
|
|
}
|
|
.mw-revision-new {
|
|
background-color: #c3e2ff;
|
|
border-color: #1e6db8;
|
|
}
|
|
.mw-revision-new:hover {
|
|
background-color: #45a6ff;
|
|
border-color: #065cad;
|
|
}
|
|
.mw-revision-intermediate {
|
|
background-color: #bcbcbc;
|
|
border-color: #989898;
|
|
}
|
|
.mw-revision-intermediate:hover {
|
|
background-color: #a6a6a6;
|
|
border-color: #828282;
|
|
}
|
|
|
|
.mw-revision-wrapper {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
height: 140px;
|
|
}
|
|
.mw-revision-wrapper:hover {
|
|
background-color: #f2f2f2;
|
|
transition: all ease 0.2s;
|
|
-webkit-transition: all ease 0.2s;
|
|
-moz-transition: all ease 0.2s;
|
|
-o-transition: all ease 0.2s;
|
|
}
|
|
|
|
.mw-revision-border-box {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-left: solid 1px white;
|
|
}
|
|
|
|
.mw-revision-tooltip .tipsy-inner {
|
|
max-width: none;
|
|
}
|
|
|
|
.mw-revisions {
|
|
height: 140px;
|
|
white-space: nowrap;
|
|
}
|
|
.mw-revisions-container {
|
|
width: 90%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.mw-revisions-container, .mw-arrow {
|
|
float: left;
|
|
}
|
|
.mw-arrow {
|
|
width: 20px;
|
|
height: 140px;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.mw-arrow-backwards {
|
|
margin-right: 30px;
|
|
}
|
|
.mw-arrow-forwards {
|
|
margin-left: 30px;
|
|
}
|
|
.mw-arrow-enabled, .mw-arrow-disabled {
|
|
border: #ddd solid 2px;
|
|
}
|
|
.mw-arrow-hovered {
|
|
border: #ddd solid 2px;
|
|
background-color: #e5e5e5;
|
|
cursor: pointer;
|
|
}
|
|
.mw-arrow-active {
|
|
border: #ccc solid 2px;
|
|
}
|
|
|
|
.mw-revision-slider {
|
|
position: relative;
|
|
margin: auto;
|
|
}
|
|
|
|
.mw-pointer-container {
|
|
position: absolute;
|
|
clear: both;
|
|
height: 1px;
|
|
top: 57px;
|
|
margin: auto;
|
|
z-index: 10;
|
|
}
|
|
.mw-lower-pointer {
|
|
top: 15px;
|
|
}
|
|
.mw-pointer {
|
|
position: absolute !important;
|
|
z-index: 11;
|
|
width: 18px;
|
|
height: 13px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.mw-pointer-cursor {
|
|
cursor:ew-resize;
|
|
}
|
|
|
|
.mw-revisions-older {
|
|
float:left;
|
|
}
|
|
.mw-revisions-newer {
|
|
float:right;
|
|
}
|
|
|
|
#mw-revision-slider-darkness {
|
|
background-color: white;
|
|
filter:alpha(opacity=50); /* IE 5-7 */
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
|
|
-khtml-opacity: 0.5; /* Safari 1.x */
|
|
-moz-opacity:0.50; /* Netscape */
|
|
opacity: 0.5; /* Good browsers */
|
|
z-index: 200000;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
position:absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|