mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-12-13 15:58:27 +00:00
23b5b2f112
This turns the prototype code of the Revision Slider into a MediaWiki extension. With this extension enabled the slider should appear on diff pages already but it won't actually show diffs when adjusting the slider pointers. Things that changed so far in the prototype JS code: - pulled out the rainbow function and made it use Math.floor instead of the ~~ binary operator - pulled out the API request that fetches the revisions into its own module - cleaned up and documented some parts of the code The code is still very much WIP and JSCS still has a couple of complaints. Bug: T132576 Change-Id: I2e22365f3b93a76d5b8d3997242b5fed996c6d78
99 lines
1.7 KiB
CSS
Executable file
99 lines
1.7 KiB
CSS
Executable file
.ui-slider-tick-mark {
|
|
display: inline-block;
|
|
border: 1px solid black;
|
|
height: 9px;
|
|
position: absolute;
|
|
top: -3px;
|
|
opacity: 0.35;
|
|
z-index: 10;
|
|
}
|
|
|
|
.ui-slider-tick-mark:hover {
|
|
opacity: 0.65!important;
|
|
-webkit-transition: all ease 0.2s;
|
|
-moz-transition: all ease 0.2s;
|
|
-o-transition: all ease 0.2s;
|
|
transition: all ease 0.2s;
|
|
}
|
|
|
|
.rvslider-legend-box {
|
|
opacity: 0.35;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.revisions {
|
|
height: 150px;
|
|
}
|
|
.revisions-container {
|
|
width: 90%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.revisions-container, .arrow {
|
|
float: left;
|
|
}
|
|
.arrow {
|
|
width: 5%;
|
|
margin-top: 63px;
|
|
}
|
|
.left-arrow {
|
|
width: 0;
|
|
height: 0;
|
|
margin-right: 20px;
|
|
border-style: solid;
|
|
border-width: 12px 18px 12px 0;
|
|
border-color: transparent #424242 transparent transparent;
|
|
}
|
|
.right-arrow {
|
|
margin-left: 20px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 12px 0 12px 18px;
|
|
border-color: transparent transparent transparent #424242;
|
|
}
|
|
|
|
.revision {
|
|
width: 1%;
|
|
margin-top: 75px;
|
|
}
|
|
|
|
.stopper {
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-left: -10px;
|
|
height: 50px;
|
|
width: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: relative;
|
|
}
|
|
.revision-slider {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pointer-container {
|
|
position: absolute;
|
|
clear: both;
|
|
width: 100%;
|
|
top: 77px;
|
|
z-index: 10;
|
|
}
|
|
.left-pointer {
|
|
border-color: transparent transparent #00f transparent;
|
|
}
|
|
.right-pointer {
|
|
border-color: transparent transparent #f00 transparent;
|
|
}
|
|
.pointer {
|
|
position: absolute !important;
|
|
z-index: 11;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0 10px 10px 10px;
|
|
}
|