getToolbox();
// if there are actions like "edit," etc.
// (not counting generic toolbox tools like "upload file")
// in addition to non-page-specific ones like "page" (so a "more..." link is needed)
if ( sizeof( $this->data['content_actions'] ) > 1 ) {
foreach ( $this->data['content_actions'] as $key => $action ) {
if ( !$lastLinkOutsideOfStandardToolboxDropdownHasBeenGenerated ) { // this runs until all the actions outside the dropdown have been generated (generates actions outside dropdown)
echo $this->makeLink( $key, $action );
$amountOfToolsGenerated++;
if (
sizeof( $this->data['content_actions'] ) == $amountOfToolsGenerated ||
$key == 'history' || $key == 'addsection' ||
$key == 'protect' || $key == 'unprotect'
)
{
// if this is the last action or it is the
// history, new section, or protect/unprotect action
// (whichever comes first)
$lastLinkOutsideOfStandardToolboxDropdownHasBeenGenerated = true;
?>
printTrail();
echo Html::closeElement( 'body' );
echo Html::closeElement( 'html' );
}
}
diff --git a/refreshed/big.css b/refreshed/big.css
index 9953628..7860bf2 100644
--- a/refreshed/big.css
+++ b/refreshed/big.css
@@ -1,24 +1,29 @@
/* anything 1001px and over - most laptops, desktops */
#sidebar-wrapper {
left: 0 !important; /* preventing sidebar from moving left of viewport if not on mobile */
}
#header .search {
display: block !important;
}
#content,
#footer {
margin-left: 12em;
margin-right: 1em;
}
#small-toolbox-wrapper {
display: none;
}
#searchText,
#powerSearchText { /* reset width of search/powersearch bars in Special:Search when window is large */
width: auto !important;
}
+
+#header .search-form.faded { /* show the header search, even if it has the "faded" class (the search should only be fadable on small/medium) */
+ visibility: visible;
+ opacity: 1;
+}
diff --git a/refreshed/main.css b/refreshed/main.css
index 9a744af..cda9784 100644
--- a/refreshed/main.css
+++ b/refreshed/main.css
@@ -1,892 +1,894 @@
+/********** Fonts (including WikiFont) **********/
+
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
src: url(https://fonts.gstatic.com/s/lato/v11/zLhfkPOm_5ykmdm-wXaiuw.eot?#iefix) format('embedded-opentype'),
url(https://fonts.gstatic.com/s/lato/v11/kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4.woff) format('woff'),
url(https://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype'),
url(https://fonts.gstatic.com/l/font?kit=7yKIrlBXX_AXuUv3Ts9_8g#Lato) format('svg');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
src: url(https://fonts.gstatic.com/s/lato/v11/sBtfDPlEIwvKKU53nAG7AQ.eot?#iefix) format('embedded-opentype'),
url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff'),
url(https://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype'),
url(https://fonts.gstatic.com/l/font?kit=hLECvlEj3pKlnS4NFs8NQw#Lato) format('svg');
}
@font-face {
font-family: 'Lato body';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
src: url(https://fonts.gstatic.com/s/lato/v11/nQhiC-wSiJx0pvEuJl8d8A.eot?#iefix) format('embedded-opentype'),
url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff'),
url(https://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype'),
url(https://fonts.gstatic.com/l/font?kit=H4oiIt_Ug9TU5ast0nUT-w#Lato) format('svg');
}
+.header-button .wikiglyph {
+ /*position: absolute;
+ top: -.05em; /* The glyphs have a height of 1.1em (you can see this in wikiglyph.css). However, the height of .header-button is 1em, so .1em of the glyph is under the .header-button. To vertically center the glyph, move it ((1.1em - 1em) / 2) or .05em up. */
+ /*height: 1em; /* This limits the height of the .wikiglyph span so the clickable area isn't 1.1em tall. */
+ font-size: 1em; /* make the definition of the arrow's em the same as its parent's so it's easier to position using em units... */
+ line-height: 3em;
+ height: 3em; /* line-height and height equal to the parent's height (3em) plus vertical-align:text-bottom in wikiglyphs.css vertically centers the icons */
+ transform: translateY(-3%); /* the icons themselves (i.e. the shapes inside the SVG) are subtly off vertical center; this line counterbalances that */
+}
+
+.fadable {
+ -o-transition: opacity 0.2s ease;
+ -moz-transition: opacity 0.2s ease;
+ -webkit-transition: opacity 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */
+ transition: opacity 0.2s ease;
+ opacity: 1;
+ visibility: visible;
+}
+
+.faded {
+ -o-transition: opacity 0.2s ease, visibility 0.2s;
+ -moz-transition: opacity 0.2s ease, visibility 0.2s;
+ -webkit-transition: opacity 0.2s ease, visibility 0.2s; /* -webkit- last so it's used in place of -o- if possible */
+ transition: opacity 0.2s ease, visibility 0.2s;
+ opacity: 0;
+ visibility: hidden;
+}
+
+.header-button .wikiglyph:before {
+ font-size: 2.5em; /* ...however, the actual glyph has a more appropriate font size of 2.5em (so the glyph itself is larger while it can be positioned with the smaller em units without a problem) */
+}
+
+#header .wikiglyph-caret-down {
+ font-size: 1em; /* make the definition of the arrow's em the same as its parent's so it's easier to position using em units... */
+}
+
+#header .wikiglyph-caret-down:before {
+ font-size: 1.25em; /* ...however, the actual glyph has a more appropriate font size of 1.25em (so the glyph itself is larger while it can be positioned with the smaller em units without a problem) */
+}
+
+#user-info .wikiglyph { /* arrow and user icons */
+ margin-right: -.25em;
+ margin-left: -.25em;
+}
+
+.header-button .arrow {
+ transform: translateY(0); /* we don't want the arrows to have translateY. Instead we change the transform-origin (see below) */
+
+ -ms-transform-origin: 50% 52%; /* the icon itself (i.e. the arrow inside the SVG) is subtly off vertical center, making it look slightly off when animated; this line counterbalances that for the animation */
+ -o-transform-origin: 50% 52%;
+ -moz-transform-origin: 50% 52%;
+ -webkit-transform-origin: 50% 52%; /* -webkit- last so it's used in place of -o- if possible */
+ transform-origin: 50% 52%;
+}
+
+/********** (End fonts) **********/
body {
font-family: "Lato", sans-serif;
margin: 0;
background-color: #194a8d;
-webkit-tap-highlight-color: transparent; /* preventing gray overlay when pressed on mobile webkit browsers (e.g. mobile Safari) */
}
#fade-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
opacity: 0;
-o-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */
transition: opacity 0.2s ease;
background: #fff;
}
#header {
-webkit-font-smoothing: antialiased;
width: 100%;
height: 3em;
z-index: 10000; /* very high value to guarantee no elements on wikis will appear above it */
position: fixed;
}
.header-button { /* defined at top so individual elements can override these properties */
cursor: pointer;
width: 3em;
- height: 3em;
- background-repeat: no-repeat;
- background-position: top left;
- background-size: 3em 3em;
font-family: "Lato Body", sans-serif;
+ color: #fff;
+ display: inline-block;
+}
+
+a.header-button { /* double selectors to override default a element text-decoration without use of !important */
+ text-decoration: none;
}
.header-dropdown-item a {
color: #fff;
}
.header-dropdown-item a.new {
color: #fdad9d;
}
#header-inner {
height: 100%;
background-color: #103ca2;
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, #040f28), color-stop(50%, #103ca2), color-stop(100%, #040f28));
/* IE5.5-IE7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#040f28', endColorstr='#103ca2', GradientType=1);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#040f28,EndColorStr=#103ca2)";
/* IE9+ */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #040f28), color-stop(50%, #103ca2), to(#040f28));
background-image: -webkit-linear-gradient(right, #040f28 0, #103ca2 50%, #040f28 100%);
background-image: linear-gradient(to left, #040f28 0, #103ca2 50%, #040f28 100%);
}
#header-categories {
list-style: none;
height: 3em;
margin: 0;
overflow: hidden; /* hide categories that get cut off when the window is too small */
+ line-height: 1em; /* overriding default style of line-height: 1.5em */
}
.page-item {
width: auto;
height: auto;
min-width: 8em;
display: inline-block;
text-decoration: none;
}
-.clickable-region {
- cursor: pointer;
+#header-categories .header-button {
padding-left: 0.5em;
padding-right: 0.5em;
+ width: auto;
}
-.clickable-region a {
+.header-category-name {
display: inline-block;
- height: 2em;
- padding: 0.5em 0.5em 0.5em 0;
- line-height: 2em;
- color: #fff;
+ height: 3em;
+ padding-right: 0.5em;
+ line-height: 3em;
white-space: nowrap;
+ vertical-align: text-bottom;
}
#header-categories a:hover,
#header-categories a:focus {
text-decoration: none;
}
#header-categories li img {
- margin: 0 .5em 3px 4px;
+ margin: 00.5em 3px 4px;
}
-#header-categories .children {
+#header-categories .header-category-menu {
background: #000;
background: rgba(0,0,0,0.8);
margin: 0;
}
-.children {
- display: none;
+.header-category-menu {
position: absolute;
width: 10em;
height: auto;
padding: 0 0.2em 0.2em 0.2em;
}
-.children .header-dropdown-item {
+.header-category-menu .header-dropdown-item {
display: inline-block;
padding-top: 0.2em;
padding-bottom: 0.2em;
width: 100%;
}
-.children .header-dropdown-item a {
+.header-category-menu .header-dropdown-item a {
margin-left: 0.4em; /* matching .headermenu a */
}
#firstHeading {
padding: 0 0.9em; /* 1em (#bodyContent padding-left) * 0.9em (#bodyContent font-size) */
}
#firstHeading h1 {
font-size: 32pt;
font-family: "Lato Body", sans-serif;
padding-top: 0.2em;
margin-bottom: 0.1em;
padding-bottom: 0.05em;
}
.mw-indicators {
float: right;
}
.mw-indicator {
display: inline;
}
.scroll-shadow {
background: none;
}
.standard-toolbox {
font-family: "Lato", sans-serif; /* assigning here so em values match em values of the links inside */
-o-transition: -o-transform 0.4s ease;
-moz-transition: -moz-transform 0.4s ease;
-webkit-transition: -webkit-transform 0.4s ease; /* -webkit- last so it's used in place of -o- if possible */
transition: transform 0.4s ease;
top: 0;
}
.standard-toolbox a {
margin-left: 0.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
text-transform: lowercase;
font-weight: normal;
text-decoration: none;
}
.standard-toolbox > a:first-of-type {
margin-left: 0;
}
.standard-toolbox a:hover {
border-bottom: 0.25em solid #0645ad;
}
.standard-toolbox a:visited:hover,
.standard-toolbox a.selected,
.standard-toolbox a.selected:visited {
border-bottom: 0.25em solid #0b0080;
}
.standard-toolbox a.new:hover {
border-bottom: 0.25em solid #ba0000;
}
.standard-toolbox a.new:visited:hover,
.standard-toolbox a.new.selected,
.standard-toolbox a.new.selected:visited {
border-bottom: 0.25em solid #a55858;
}
.standard-toolbox-dropdown {
left: 0.5em;
z-index: 3;
background: #fff;
position: absolute;
width: 12em;
box-shadow: 0 3px 9px 0 rgba(75, 75, 75, 0.4);
border: 1px solid #ddd;
margin-top: 0.25em;
}
.standard-toolbox-dropdown ul {
list-style-type: none;
margin-left: 0;
margin-top: 0.25em;
}
.dropdown-triangle {
width: 0;
height: 0;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid #ccc;
position: absolute;
top: -.5em;
left: 0.1em;
}
.standard-toolbox-dropdown a {
width: 100%;
height: 100%;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
}
.standard-toolbox-dropdown a:hover {
border: 0;
}
.standard-toolbox-dropdown a:hover span {
border-bottom: 0.25em solid #0645ad;
}
.standard-toolbox-dropdown a:visited:hover span {
border-bottom: 0.25em solid #0b0080;
}
.fixed-toolbox {
padding-left: 0.9em; /* 1em (#bodyContent padding-left) * 0.9em (#bodyContent font-size) */
position: fixed;
border-bottom: 0.25em solid #eee;
background: #fff;
padding-top: 0.25em;
padding-bottom: 0.25em;
+ width: -moz-calc(100% - 13.4em);
+ width: -webkit-calc(100% - 13.4em);
width: calc(100% - 13.4em);
margin-left: 12em; /* width of #sidebarwrapper */
z-index: 9999; /* very high value to guarantee no elements on wikis will appear above it */
}
.dropdown-open {
-ms-transform: translateY(3em);
-o-transform: translateY(3em);
-moz-transform: translateY(3em);
-webkit-transform: translateY(3em); /* -webkit- last so it's used in place of -o- if possible */
transform: translateY(3em);
}
#main-title-messages {
font-size: 0.9em;
padding-top: 1.25em;
padding-bottom: 0.5em;
}
#siteSub {
font-size: 0.9em;
padding-bottom: 0.25em;
}
#contentSub,
#contentSub2 {
margin: 0;
padding: 0;
font-size: 0.9em;
}
#back-to-subject {
display: none;
font-size: 1.25em;
padding-bottom: 0.25em;
}
#small-toolbox-wrapper {
display: none;
}
#site-notice {
width: 100%;
text-align: center;
}
#new-talk {
margin-left: 2em;
}
#content {
min-height: 100%;
position: relative;
top: 3em;
background-color: white;
z-index: 2;
font-family: sans-serif;
border-bottom: 0.25em solid #eee;
padding-bottom: 1em;
}
#content * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4);
}
#bodyContent {
padding: 0 1em;
line-height: 1.5em;
font-size: 0.875em;
word-wrap: break-word;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
color: #252525;
overflow: auto;
}
#sidebar-wrapper {
width: 12em;
position: fixed;
top: 0;
color: white;
z-index: 2;
height: 100%;
}
/*
* Hide the list bullet icons. This is not terribly useful by default, but there
* are extensions which can add entire portlets to the sidebarwrapper, and said portlets
* might be using the
HTML tag...
*/
#sidebar-wrapper li {
list-style-type: none;
margin: 0;
}
#sidebar-wrapper ul {
margin: 0;
padding: 0;
}
#sidebar-logo {
display: none;
}
#sidebar {
overflow-y: auto;
width: 100%;
height: -moz-calc( 100% - 3.5em );
height: -webkit-calc( 100% - 3.5em );
height: calc( 100% - 3.5em );
left: 0;
line-height: 1.5em;
position: absolute;
top: 3em;
padding-top: 0.5em;
}
#sidebar a {
display: block;
color: white;
text-decoration: none;
padding-left: 1em;
margin-left: 5px; /* px instead of em because of 5px border on hover */
}
#sidebar a:hover {
color: #CCC;
cursor: pointer;
border-left: 5px solid #CCC;
margin-left: 0;
}
#sidebar .main {
margin-left: 0.5em;
margin-top: 0.5em;
}
#sidebar .main:first-of-type {
margin-top: 0;
}
#sidebar li {
text-transform: lowercase;
}
.toolbox-container {
display: inline-block;
position: relative;
}
#user-info {
position: relative;
float: right;
- margin-right: 1em;
+ margin-right: 0.5em;
}
#user-info .header-button {
display: block;
- padding: 0.5em;
width: auto;
- height: 2em;
max-width: 320px;
- text-decoration: none;
- position: relative;
- white-space: nowrap;
- overflow-x: hidden;
-}
-
-.avatar-none {
- display: none;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
}
.username {
- display: block;
- margin-top: 0.1em;
- font-size: 15pt;
- color: white;
- padding-right: 10px;
- margin-left: 3.5em;
+ display: inline-block;
+ /* font-size: 1.25em; /* same as 15pt it seems */
+ line-height: 3em;
+ vertical-align: text-bottom; /* line-height equal to the parent's height (3em) plus vertical-align:text-bottom vertically centers the text */
}
.username-avatar-none {
margin-left: 1.75em;
}
-#user-info .arrow {
- position: absolute;
- left: 1em;
- top: 1.2em;
- vertical-align: text-bottom;
-}
-
-#toolbox-link .arrow,
#languages-link .arrow {
vertical-align: 2px;
}
-#user-info .arrow,
-#toolbox-link .arrow,
-#languages-link .arrow,
-.page-item-has-children .arrow {
+.arrow {
-o-transition: -o-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-webkit-transition: -webkit-transform 0.5s; /* -webkit- last so it's used in place of -o- if possible */
transition: transform 0.5s;
}
.arrow.rotate {
- -ms-transform: rotateZ(-180deg);
- -o-transform: rotateZ(-180deg);
- -moz-transform: rotateZ(-180deg);
- -webkit-transform: rotateZ(-180deg); /* -webkit- last so it's used in place of -o- if possible */
- transform: rotateZ(-180deg);
+ -ms-transform: rotate(-180deg);
+ -o-transform: rotate(-180deg);
+ -moz-transform: rotate(-180deg);
+ -webkit-transform: rotate(-180deg); /* -webkit- last so it's used in place of -o- if possible */
+ transform: rotate(-180deg);
}
.avatar {
- position: absolute;
- left: 2.5em;
width: 30px;
+ margin-bottom: 9px; /* height of #header is 48px, height of avatar is 30px; to vertically center, have margin-bottom of (48px - 30px) / 2 or 9px */
+ vertical-align: text-bottom;
+ padding-right: 0.25em; /* space it out from the username a bit more */
}
.no-show {
display: none;
}
.header-menu {
padding: 0 0.2em 0.2em 0.2em;
margin: 0;
z-index: 4;
list-style: none;
background-color: #000;
background-color: rgba(0, 0, 0, 0.8);
}
.header-menu a {
font-size: 14pt;
text-decoration: none;
display: block;
padding: 0.2em 0.4em 0.2em 0.4em;
}
#user-info .header-menu {
right: 0;
width: 11em;
position: absolute;
}
#user-info .header-menu a {
padding-right: 0.7em;
text-align: right;
}
-#sidebar-shower {
+.sidebar-shower {
position: absolute;
top: 0;
- right: -2.75em;
+ right: -3em;
background-color: #194a8d;
background-image: url(images/icon-rightbar.png);
+ background-size: 3em;
display: none;
-o-transition: right 0.2s ease 0s;
-moz-transition: right 0.2s ease 0s;
-webkit-transition: right 0.2s ease 0s; /* -webkit- last so it's used in place of -o- if possible */
transition: right 0.2s ease 0s;
}
#site-info .header-menu {
width: 11.6em;
position: absolute;
top: 3em;
left: 0;
}
#site-info-main {
float: left;
- margin: auto;
width: 12em;
height: 3em;
}
#site-info-main.multiple-wikis .main {
width: 10em;
+ overflow: hidden;
+ height: 2em;
+ padding: 0.5em 0;
+ vertical-align: text-bottom;
}
#site-info-main a:hover,
.site-dropdown-highlighted {
background-color: midnightblue;
}
-#site-info-main a,
-#site-info-main a.main img {
- height: 2em;
-}
-
#site-info-main a.main {
padding: 0.5em 0;
display: inline-block;
width: 12em;
}
-#site-info-main a.arrow-link {
- position: absolute;
- padding-top: 0.9em;
- padding-right: 0.5em;
- padding-bottom: 0.1em;
- padding-left: 0.5em;
- display: inline-block;
- width: 1em;
-}
-
-#site-info a span { /* for when there is no image, just text */
- font-size: 15pt;
- color: white;
+#site-info-main .header-button {
+ width: 2em;
}
#site-info a {
text-align: center;
}
-#site-info img.arrow {
- -o-transition: -o-transform 0.5s;
- -moz-transition: -moz-transform 0.5s;
- -webkit-transition: -webkit-transform 0.5s; /* -webkit- last so it's used in place of -o- if possible */
- transition: transform 0.5s;
-
- -ms-transform: rotateZ(0deg);
- -o-transform: rotateZ(0deg);
- -moz-transform: rotateZ(0deg);
- -webkit-transform: rotateZ(0deg); /* -webkit- last so it's used in place of -o- if possible */
- transform: rotateZ(0deg);
-
- vertical-align: middle;
-}
-
-#site-info img.arrow.rotate {
- -ms-transform: rotateZ(180deg);
- -o-transform: rotateZ(180deg);
- -moz-transform: rotateZ(180deg);
- -webkit-transform: rotateZ(180deg); /* -webkit- last so it's used in place of -o- if possible */
- transform: rotateZ(180deg);
-}
-
#site-info-mobile {
display: none;
height: 2.75em;
width: 2.75em;
margin-left: 3em; /* 2.75em for sidebar opener, 0.25em of padding */
padding: 0 0.25em;
}
#site-info-mobile .header-button {
display: block;
}
#search-shower {
- /* @embed */
- background-image: url(images/icon-search.png);
+ position: relative;
+ float: right;
+ text-align: center;
display: none;
}
#header .search {
width: 11em;
+ height: 2em;
position: static;
float: right;
margin-right: 0.5em; /* 0.5em right + 0.5em padding = 1em */
top: 0;
padding: 0.5em;
}
-#header .search-open {
- -o-transition: opacity 0.2s ease 0s;
- -moz-transition: opacity 0.2s ease 0s;
- -webkit-transition: opacity 0.2s ease 0s;
- transition: opacity 0.2s ease 0s;
+#header .search-form {
+ height: 100%;
}
#search-closer {
- width: 2.75em;
- height: 2.75em;
- /* @embed */
- background: url(images/icon-close.png) top left no-repeat;
- background-size: 2.75em 2.75em;
position: absolute;
top: 0;
right: 0;
- cursor: pointer;
display: none;
z-index: 1;
}
#searchInput { /* header search box */
border: none;
- font-size: 12pt;
+ font-size: 1em;
padding: 0.25em;
font-family: Lato, sans-serif;
box-sizing: border-box;
-webkit-appearance: none; /* prevent Safari from styling input box */
border-radius: 0; /* prevent iOS from adding rounded corners to input box */
width: 11em;
+ height: 100%;
+ vertical-align: text-bottom;
}
#refreshed-toc #toc-box:last-child {
display: none;
}
#preftoc li {
display: inline;
}
#preftoc li:before {
content: " - ";
}
#preftoc li:first-child:before {
content: none;
}
#footer {
position: relative;
top: 3.5em;
text-align: center;
padding-bottom: 15px;
color: #ccc;
}
#footer a {
color: white;
}
#footer * {
line-height: 1.5;
}
#footer img {
vertical-align: text-top;
}
#footer #advert {
margin-bottom: 1em; /* enough spacing after ad */
}
#footer #advert p {
margin: 0;
}
.header-button:hover,
.header-button-active,
.header-dropdown-item:hover { /* defined at bottom so this overrides individual elements' background-color properties */
background-color: midnightblue;
}
/******************************** CONTENT/OTHER THINGS BEYOND CONTROL ******************************/
h1, h2, h3, h4, h5, h6 {
font-family: "Lato", "Helvetica", "Arial", sans-serif;
line-height: 1.3;
border-color: #ddd;
}
h2, h3 {
font-weight: bold;
}
h4,
h5,
h6 {
font-weight: normal;
}
/* Fix for login/signup form pages not displaying in content section */
#userlogin,
#userloginForm {
float: none;
}
#localNotice {
margin-bottom: 0em !important;
}
.printfooter {
display: none;
}
#cats {
padding: 1em;
}
#content p:first-of-type {
margin-top: 0;
}
/* stopping wikitables from overflowing, adding .scrollshadow-type scrolling */
#bodyContent .wikitable {
overflow-x: auto;
display: block;
border: 0;
/* same as .scrollshadow, but #f9f9f9 instead of white */
background:
-webkit-linear-gradient(90deg, #f9f9f9 20%, rgba(255,255,255,0)),
-webkit-linear-gradient(270deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0,
-webkit-linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)),
-webkit-linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
linear-gradient(90deg, #f9f9f9 20%, rgba(255,255,255,0)), linear-gradient(270deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
-webkit-linear-gradient(0deg, #f9f9f9 20%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(0deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
linear-gradient(90deg, #f9f9f9 20%, rgba(255,255,255,0)),
linear-gradient(270deg, #f9f9f9 20%, rgba(255,255,255,0)) 100% 0,
linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)),
linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
/* Search suggestions */
.header-suggestions { /* there are two .suggestions elements on Special:Search; we only want to apply the CSS to the .suggestions element that appears beneath the header, which is given the .header-suggestions class in refreshed.js */
z-index: 10000 !important;
position: fixed !important;
top: 2.5em !important; /* there is some JS doing odd stuff, this forces our value */
}
/* Category links */
#catlinks {
background: none;
margin: 0 0.9em -.5em 0.9em;
padding: 0;
border: 0;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.catlinks li {
border-color: #ddd;
}
/* refresh-ify postedit, reset all the shadows and stuff */
.postedit {
font-family: "Lato", sans-serif !important;
font-size: 1.1em !important;
line-height: 1em !important;
top: 3px !important;
border: none !important;
-webkit-text-shadow: none !important;
-moz-text-shadow: none !important;
text-shadow: none !important;
border-radius: 0px !important;
box-shadow: none !important;
}
/* Fix funky diff padding to make diffs fully readable */
td.diff-addedline .diffchange, td.diff-deletedline .diffchange {
padding: 0;
}
/* Better line spacing on recent changes */
table.mw-enhanced-rc {
line-height: 1.5em;
}
/* "Updated since your last visit" marker on the page history of pages that are on your watchlist */
span.updatedmarker {
background-color: #0f0;
color: #000;
}
/* [[MediaWiki:Noarticletext]] (the notice shown on nonexistent pages) */
div.noarticletext {
border: 1px solid #ccc;
background: #fff;
color: #000;
padding: 0.2em 1em;
}
/* Extension:Echo fixes */
#pt-mytalk a.mw-echo-alert { /* "you have new messages" alert in the personal tools dropdown */
white-space: normal;
color: #555555 !important; /* 6 digits instead of 3 because Echo's CSS uses 6 to define the color in the standard state (!important to override color on hover) */
}
.pt-mytalk a.mw-echo-alert:hover {
background-color: #FAB951;
}
#pt-notifications-personaltools { /* "Notifications" item in the personal tools dropdown */
display: none;
}
#pt-notifications {
display: inline;
float: right;
margin: 0.9em 0 0 0;
}
.mw-echo-overlay {
position: fixed !important;
z-index: 999999 !important;
width: 20em !important;
top: 3em !important;
left: auto !important;
right: 1em !important;
}
.mw-echo-overlay:before,
.mw-echo-overlay::before {
left: 114px !important; /* centering dropdown arrow on notifications badge */
}
/* stopping images on file pages from overflowing */
.fullImageLink img {
max-width: 100%;
height: auto;
}
diff --git a/refreshed/medium.css b/refreshed/medium.css
index b77a2ac..6d72d0f 100644
--- a/refreshed/medium.css
+++ b/refreshed/medium.css
@@ -1,169 +1,167 @@
/* anything between 601px and 1000px - tablets, big phones in landscape, very small laptops */
#sidebar-wrapper {
width: 10em;
left: 0 !important; /* preventing sidebar from moving left of viewport if not on mobile */
}
#sidebar {
font-size: 11pt;
}
#sidebar li {
padding-top: 0.1em;
}
#content,
#footer {
margin-left: 10em;
margin-right: 1em;
}
#small-toolbox-wrapper {
display: none;
}
#header-categories {
display: none;
}
#firstHeading h1 {
white-space: nowrap;
font-size: 2.25em;
overflow-x: scroll;
}
.scroll-shadow {
background:
-webkit-linear-gradient(90deg, white 20%, rgba(255,255,255,0)),
-webkit-linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0,
-webkit-linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)),
-webkit-linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
linear-gradient(90deg, white 20%, rgba(255,255,255,0)), linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
-webkit-linear-gradient(0deg, white 20%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, white 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(0deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
linear-gradient(90deg, white 20%, rgba(255,255,255,0)),
linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0,
linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)),
linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.fixed-toolbox {
width: -webkit-calc(100% - 11.4em);
width: calc(100% - 11.4em);
margin-left: 10em;
}
#header .search {
- background: midnightblue;
- width: 15em;
- opacity: 0;
- z-index: 0;
+ width: auto;
+ height: 3em;
+ padding: 0;
+ margin-right: 1em;
+}
+
+#header .search-form {
+ display: block;
position: absolute;
top: 3em;
right: 1em;
- margin-right: 0;
-}
-
-#header .search-open {
- opacity: 1;
+ padding: 0.5em;
+ width: 15em;
+ height: auto; /* overriding 100% in main.css (used to center search bar on big) */
+ background-color: midnightblue;
}
#searchInput { /* header search box */
width: 100%;
+ height: auto; /* overriding 100% in main.css (used to center search bar on big) */
font-size: 16pt; /* enlarging and preventing zoom on input on focus */
- display: none; /* default to hidden (will be shown by adding .search-open class to #search) */
-}
-
-.search-open #searchInput {
- display: block;
}
#search-shower {
- position: relative;
display: block;
- float: right;
- margin-right: 1em;
+ visibility: visible; /* for the small version of the header search to work, the .faded class is added to .search-shower when it's clicked; this overrides it since we always want the icon visible on medium */
+ opacity: 1;
}
#searchText,
#powerSearchText { /* search and advanced search boxes on Special:Search */
font-size: 18px;
}
#mw-search-top-table {
text-align: center; /* center the search/advanced search boxes and submit button on Special:Search */
}
#mw-searchoptions td {
display: block; /* set each namespace under the advanced search preferences on its own line to prevent overflow (but if there's enough room it'll expand so there's two per line) */
}
.searchresult {
max-width: 100%; /* prevent search results from overflowing */
}
#siteSub {
display: none !important;
}
/* Hide ads on mobile until mobile ads are implemented */
#advert {
display: none;
}
.header-suggestions {
top: 6.5em !important; /* 3em for the header, 3.5em for the search bar */
right: 1em !important;
width: 16em !important;
font-size: 16px !important;
border: 0 !important;
margin-top: -3px !important; /* getting rid of gap between suggestions and search box */
}
.header-suggestions div {
font-size: 16pt !important;
}
/* Extension:Echo fixes */
#pt-notifications {
margin-right: 0.75em;
}
.mw-echo-overlay:before,
.mw-echo-overlay::before {
left: 238px !important; /* centering dropdown arrow on notifications badge */
}
/* Image thumbnails */
.thumb {
width: 100% !important;
margin: 0 !important;
}
div.thumbinner { /* need to specify div so it can overwrite the CSS in commonContent.css */
width: auto !important;
padding: 0.75em 0 !important;
margin-bottom: 0.5em;
}
.thumbinner img {
width: 50%;
height: auto;
border: 0 !important;
}
.thumbcaption {
text-align: center !important;
margin-bottom: -.75em !important;
}
.magnify {
display: none;
}
diff --git a/refreshed/refreshed.js b/refreshed/refreshed.js
index adbc68d..ed6557d 100644
--- a/refreshed/refreshed.js
+++ b/refreshed/refreshed.js
@@ -1,413 +1,276 @@
/* global $ */
window.Refreshed = {
standardToolboxIsDocked: false,
standardToolboxInitialOffset: $( '.standard-toolbox' ).offset().top,
scrollHeaderHasBeenGenerated: false,
usingIOS: false,
thresholdForSmallCSS: 601,
windowStartedSmall: false,
thresholdForBigCSS: 1001,
- searchDropdownOpen: false,
- userToolsOpen: false,
- siteNavOpen: false,
windowIsBig: false,
windowIsSmall: false,
widthOfSpecialSearchBar: 0,
widthOfSpecialSearchPowerSearchBar: 0,
- sidebarOpen: false,
+ headerSearchIsOpen: false,
+ sidebarIsOpen: false,
flyOutScrollHeader: function() {
if (
$( '#content' ).height() > $( window ).height() - $( '#header' ).height() &&
!Refreshed.standardToolboxIsDocked &&
( $( '.static-toolbox' ).offset().top - $( document ).scrollTop() - $( '#header' ).height() < 0 )
)
{
- // first condition: only move the scroll header if the article
+ // first boolean in condition: only move the scroll header if the article
// content is bigger than the page (i.e. preventing it from being
// triggered when a user "rubber band scrolls" in OS X for example)
//$( '.fixed-toolbox' ).animate({'top': $( '#header' ).height()});
$( '.fixed-toolbox' ).addClass( 'dropdown-open' );
Refreshed.standardToolboxIsDocked = true;
$( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).fadeOut();
} else if ( Refreshed.standardToolboxIsDocked && $( document ).scrollTop() + $( '#header' ).height() <= Refreshed.standardToolboxInitialOffset ) {
Refreshed.standardToolboxIsDocked = false;
//$( '.fixed-toolbox' ).animate({'top': -$( '.fixed-toolbox' ).height()});
$( '.fixed-toolbox' ).removeClass( 'dropdown-open' );
$( '.fixed-toolbox .standard-toolbox-dropdown' ).fadeOut();
}
},
generateScrollHeader: function() {
$( '.static-toolbox' ).clone().removeClass( 'static-toolbox' ).addClass( 'fixed-toolbox' ).insertBefore( '#sidebar-wrapper' );
//$( '.fixed-toolbox' ).css({'top': -$( '.fixed-toolbox' ).height()});
if ( $( '.fixed-toolbox' ).outerWidth() != $( '#bodyContent' ).outerWidth() ) { // if standard-toolboxoverlay hasn't has its width set by CSS calc
$( '.fixed-toolbox' ).css({'width': $( '#bodyContent' ).outerWidth() - ( $( '.fixed-toolbox' ).outerWidth() - $( '.fixed-toolbox' ).width() )}); // set .fixed-toolbox's width to the width of #bodyContentminus .fixed-toolbox's padding (and border, which is 0)
}
Refreshed.scrollHeaderHasBeenGenerated = true;
},
resizeScrollHeader: function() {
// set .fixed-toolbox's width to the width of #bodyContentminus .fixed-toolbox's padding (and border, which is 0)
$( '.fixed-toolbox' ).css({'width': $( '#bodyContent' ).outerWidth() - ( $( '.fixed-toolbox' ).outerWidth() - $( '.fixed-toolbox' ).width() )});
},
resizeSpecialSearchBar: function() {
if ( !Refreshed.windowIsBig && !Refreshed.windowIsSmall ) { // if running medium.css
// set width of search bar to 100% of #bodyContent- "__ of __ results" text - width of submit button - width - 1em in the search bar
Refreshed.widthOfSpecialSearchBar = $( '#bodyContent' ).width() - $( '.results-info' ).outerWidth() - $( '#bodyContent #search input[type="submit"]' ).outerWidth() - parseFloat( $( '#searchText' ).css( 'font-size' ) );
Refreshed.widthOfSpecialSearchPowerSearchBar = $( '#bodyContent' ).width() - $( '.results-info' ).outerWidth() - $( '#bodyContent #powersearch input[type="submit"]' ).outerWidth() - parseFloat( $( '#powerSearchText' ).css( 'font-size' ) );
} else if ( Refreshed.windowIsSmall ) { // if running small.css
//set width of search bar to 100% of #bodyContent - width of submit button - width - 1em in the search bar
Refreshed.widthOfSpecialSearchBar = $( '#bodyContent' ).width() - $( '#bodyContent #search input[type="submit"]' ).outerWidth() - parseFloat( $( '#searchText' ).css( 'font-size' ) );
Refreshed.widthOfSpecialSearchPowerSearchBar = $( '#bodyContent' ).width() - $( '#bodyContent #powersearch input[type="submit"]' ).outerWidth() - parseFloat( $( '#powerSearchText' ).css( 'font-size' ) );
}
$( '#searchText' ).css({'width': Refreshed.widthOfSpecialSearchBar});
$( '#powerSearchText' ).css({'width': Refreshed.widthOfSpecialSearchPowerSearchBar});
},
showHideOverflowingDropdowns: function() {
$( '.page-item-has-children' ).each(function( ) {
if ( $( this ).offset().top > $( '#header' ).height() + $( '#header' ).offset().top ) { //if the .page-item is beneath the bottom of the header (and so it's cut off by overflow:hidden)
$( this ).children( '.children' ).css({'display': 'none'});
$( this ).removeClass( 'header-button-active' );
- $( this ).children( '.clickable-region' ).children( '.arrow' ).removeClass( 'rotate' );
+ $( this ).children( '.header-button' ).children( '.arrow' ).removeClass( 'rotate' );
}
- } );
+ });
+ },
+
+ toggleFade: function( trigger ) {
+ $( trigger ).siblings( '.fadable' ).addBack( '.fadable' ).toggleClass( 'faded' );
+ $( trigger ).children( '.arrow' ).toggleClass( 'rotate' );
+ if ( $( trigger ).hasClass( 'header-button' ) ) {
+ $( trigger ).toggleClass( 'header-button-active' );
+ }
+ },
+
+ toggleHeaderSearch: function() {
+ $( '.sidebar-shower' ).toggleClass( 'sidebar-shower-hidden' );
+ $( '#fade-overlay' ).toggleClass( 'fade-overlay-active fade-overlay-below-header' ); // toggle the fade overlay
+ if ( Refreshed.windowIsSmall ) { // On small, because #search-shower is replaced by #search-closer and vice-versa instead of the buttons appearing active, they take on the .header-button-active class when they shouldn't; this gets rid of it. On medium there's only #search-shower, so it functions properly and the class shouldn't be removed.
+ $( '#search-shower' ).removeClass( 'header-button-active' );
+ $( '#search-closer' ).removeClass( 'header-button-active' );
+ }
+ $( '#searchInput' ).val( '' ).focus();
+ Refreshed.headerSearchIsOpen = !Refreshed.headerSearchIsOpen;
+ },
+
+ toggleSidebar: function() {
+ $( '#sidebar-wrapper' ).toggleClass( 'sidebar-open' );
+ $( '#fade-overlay' ).toggleClass( 'fade-overlay-active' ); // toggle the fade overlay
+ $( '.sidebar-shower' ).toggleClass( 'header-button-active' );
+ Refreshed.sidebarIsOpen = !Refreshed.sidebarIsOpen;
}
};
$( document ).ready( function() {
if ( navigator.userAgent.toLowerCase().match( /(iPad|iPhone|iPod)/i ) ) { // detect if on an iOS device
Refreshed.usingIOS = true;
}
if ( $( window ).width() < Refreshed.thresholdForSmallCSS ) {
Refreshed.windowStartedSmall = true;
}
// test if window is running big.css
if ( $( window ).width() >= Refreshed.thresholdForBigCSS ) {
Refreshed.windowIsBig = true;
} else {
Refreshed.windowIsBig = false;
}
// test if window is running small.css
if ( $( window ).width() <= Refreshed.thresholdForSmallCSS ) {
Refreshed.windowIsSmall = true;
} else {
Refreshed.windowIsSmall = false;
}
Refreshed.resizeSpecialSearchBar();
if ( !Refreshed.usingIOS && !Refreshed.windowStartedSmall ) {
// only perform if not on an iOS device (animations triggered by scroll
// cannot be played during scroll on iOS Safari) and if the window was
// running small.css when loaded
Refreshed.generateScrollHeader();
Refreshed.flyOutScrollHeader();
}
$( window ).scroll( function() {
Refreshed.flyOutScrollHeader();
- } );
+ });
$( window ).resize( function() {
if (
Refreshed.scrollHeaderHasBeenGenerated &&
$( '.fixed-toolbox' ).outerWidth() != $( '#bodyContent' ).outerWidth()
)
{
// only perform if the scroll header has already been generated and
// it needs to be resized (not already done by CSS calc)
Refreshed.resizeScrollHeader();
}
if ( $( window ).width() >= Refreshed.thresholdForBigCSS ) {
Refreshed.windowIsBig = true;
} else {
Refreshed.windowIsBig = false;
}
if ( $( window ).width() <= Refreshed.thresholdForSmallCSS ) {
Refreshed.windowIsSmall = true;
} else {
Refreshed.windowIsSmall = false;
}
Refreshed.resizeSpecialSearchBar();
Refreshed.showHideOverflowingDropdowns();
- } );
-
- /* tools dropdown attached to firstHeading */
- $( '#firstHeading > .standard-toolbox #toolbox-link' ).on( {
- 'click': function() {
- if ( !$( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) {
- $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).fadeIn();
- }
- $( this ).children().toggleClass( 'rotate' );
- },
- 'hover': function() {
- $( this ).children().toggleClass( 'no-show' );
- }
- } );
-
- $( document ).mouseup( function ( e ) {
- if ( $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) {
- if (
- !$( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).is( e.target ) &&
- $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).has( e.target ).length === 0
- )
- {
- // if the target of the click isn't the container and isn't a descendant of the container
- $( '#firstHeading > .standard-toolbox .standard-toolbox-dropdown' ).fadeOut();
- }
- }
- } );
-
- /* tools dropdown on the "scroll header" */
- $( '.fixed-toolbox #toolbox-link' ).on( {
- 'click': function() {
- if ( !$( '.fixed-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) {
- $( '.fixed-toolbox .standard-toolbox-dropdown' ).fadeIn();
- }
- $( this ).children().toggleClass( 'rotate' );
- },
- 'hover': function() {
- $( this ).children().toggleClass( 'no-show' );
- }
- } );
-
- $( document ).mouseup( function ( e ) {
- if ( $( '.fixed-toolbox .standard-toolbox-dropdown' ).is( ':visible' ) ) {
- if (
- !$( '.fixed-toolbox .standard-toolbox-dropdown' ).is( e.target ) &&
- $( '.fixed-toolbox .standard-toolbox-dropdown' ).has( e.target ).length === 0
- )
- {
- // if the target of the click isn't the container and isn't a descendant of the container
- $( '.fixed-toolbox .standard-toolbox-dropdown' ).fadeOut();
- }
- }
- } );
+ });
+ /**
+ * The "clickOrTouchend" function does as it sounds. If it can (i.e. you're on a touch screen),
+ * it performs touchend. Otherwise, it performs mouseup. Based on experience, it seems touchend
+ * has less latency than mouseup does on mobile devices. This function aims to reduce that latency.
+ */
$.fn.extend( {
- clickOrTouch: function( handler ) {
+ clickOrTouchend: function( handler ) {
return this.each( function() {
- var event = ( 'ontouchend' in document ) ? 'touchend' : 'mouseup';
+ var event = ( 'ontouchend' in document ) ? 'touchend' : 'click';
$( this ).on( event, handler );
- } );
- }
- } );
-
- /* search dropdown */
- $( '#search-shower' ).click( function() { // Unfortunately, touchend causes the search bar to lose focus on iPhones on iOS 7 and iPads on iOS 8 (haven't tested on Android), but it keeps its focus if you used the standard click event. The other menus, etc. use "touchOrClick" b/c the touchend event executes faster than the standard click on iOS (once again, haven't tested on Android).
- if ( !Refreshed.searchDropdownOpen ) {
- if ( Refreshed.usingIOS ) {
- $( window ).scrollTop( 0 ); // iOS tries to vertically center the search bar, scrolling to the top keeps the header at the top of the viewport
- }
- $( '#header .search' ).addClass( 'search-open' );
- $( '#sidebar-shower' ).addClass( 'sidebar-shower-hidden' );
- $( '#fade-overlay' ).addClass( 'fade-overlay-active fade-overlay-below-header' ); // toggle the fade overlay
- $( '#searchInput' ).focus();
- $( this ).toggleClass( 'header-button-active' );
- Refreshed.searchDropdownOpen = true;
- } else {
- // this only runs in "medium" mode (the search dropdown only
- // appears in "medium" and "small" mode, and "small" is covered
- // by the document.click function below)
- $( '#header .search' ).removeClass( 'search-open' );
- $( '#sidebar-shower' ).removeClass( 'sidebar-shower-hidden' );
- $( '#searchInput' ).blur().val( '' ); // deselect the search input and reset its contents (remove anything the user entered)
- $( '#fade-overlay' ).removeClass( 'fade-overlay-active fade-overlay-below-header' ); // toggle the fade overlay
- $( '#search-shower' ).removeClass( 'header-button-active' );
- Refreshed.searchDropdownOpen = false; // no delay needed because the spamming issue is only present on "small"
- }
- } );
-
- $( document ).click( function ( e ) { // if you use clickOrTouch, pressing the .suggestions element will cause the window to close on mobile (maybe the clickOrTouch section is executed before a plain click and thus this is run and .search is hidden before the broswer acknowledges the click event on .suggestions to load the searched-for page?)
- if ( Refreshed.searchDropdownOpen && $( window ).width() < Refreshed.thresholdForBigCSS ) { // window size must be checked because we only want to hide the search bar if we're not in "big" mode
- if (
- !$( '#header .search' ).is( e.target ) &&
- !$( '#search-shower' ).is( e.target ) &&
- !$( '.search input' ).is( e.target )
- )
- {
- // if the target of the click isn't the search container,
- // search button, or the search box itself (we can't set it to
- // all descendants of .search because #search-closer needs to
- // be able to close the search box)
- $( '#header .search' ).removeClass( 'search-open' );
- $( '#sidebar-shower' ).removeClass( 'sidebar-shower-hidden' );
- $( '#searchInput' ).blur().val( '' ); // deselect the search input and reset its contents (remove anything the user entered)
- $( '#fade-overlay' ).removeClass( 'fade-overlay-active fade-overlay-below-header' ); //toggle the fade overlay
- $( '#search-shower' ).removeClass( 'header-button-active' );
- // delay variable change for 375ms until after the animation is
- // complete so both animations don't run on one press
- setTimeout( function () {
- Refreshed.searchDropdownOpen = false;
- }, 375 );
- }
+ });
}
- } );
-
- /* user tools dropdown */
- $( '#user-info > a' ).clickOrTouch( function() {
- if ( !$( '#user-info .header-menu' ).is( ':visible' ) ) {
- $( '#user-info .header-menu' ).fadeIn();
- $( this ).addClass( 'header-button-active' );
- $( '#user-info .arrow' ).addClass( 'rotate' );
- // delay the second clickOrTouch function (which performs fadeOut)
- // to stop fadeIn and fadeOut on one click (also prevents user from
- // spamming so it constantly fades in/out)
- setTimeout( function () {
- Refreshed.userToolsOpen = true;
- }, 300 );
- }
- } );
-
- $( document ).clickOrTouch( function ( e ) {
- if ( $( '#user-info .header-menu' ).is( ':visible' ) ) {
- if (
- Refreshed.userToolsOpen &&
- !$( '#user-info .header-menu' ).is( e.target ) &&
- $( '#user-info .header-menu' ).has( e.target ).length === 0
- )
- {
- // if the target of the click isn't the button, the container, or a descendant of the container
- $( '#user-info > a' ).removeClass( 'header-button-active' );
- $( '#user-info .header-menu' ).fadeOut();
- $( '#user-info .arrow' ).removeClass( 'rotate' );
- Refreshed.userToolsOpen = false;
+ });
+
+ /**
+ * Functions for showing/hiding dropdown menus. Preconditions:
+ * 1) the menu must have classes "fadable" and "faded" to start
+ * 2) the button triggering the menu must have class "fade-trigger"
+ * 3) the menu and the button must be siblings
+ */
+ $( '.fade-trigger' ).clickOrTouchend( function() {
+ Refreshed.toggleFade( this );
+ });
+
+ $( document ).clickOrTouchend( function( e ) {
+ $( '.fadable:not( .fade-trigger ):not( .faded )' ).each( function () { // targeting all dropdowns (i.e., fadable elements that aren't fadable themselves [since ones that are fadable are the #search-shower and #search-closer])
+ if ( !$( e.target ).closest( $( this ).parent() ).length ) { // if starting from the event target (this, a child of this, or .fade-trigger) and doing up the DOM you do not run into this element's parent (so if this, a child of this, or .fade-trigger was not the target of the click)
+ Refreshed.toggleFade( $( this ).siblings( '.fade-trigger' ) );
}
+ });
+ // the below if statements control hiding the search header and dropdown. These are included here so only 1 document clickOrTouchend function is required instead of 3.
+ if ( Refreshed.headerSearchIsOpen && !$( e.target ).closest( '#header .search' ).length && !$( e.target ).closest( '.header-suggestions' ).length ) { // we do this check instead of checking if the user pressed #fade-overlay because #fade-overlay can disappear if you resize, and then if you click off afterward you still want to hide the menu, etc. even if #fade-overlay is no longer visible
+ Refreshed.toggleHeaderSearch();
}
- } );
-
- /* site navigation dropdown */
- $( '#site-info-main a.arrow-link' ).clickOrTouch( function() {
- if ( !$( '#site-info .header-menu' ).is( ':visible' ) ) {
- $( '#site-info .header-menu' ).fadeIn();
- $( '#site-info-main a.arrow-link' ).addClass( 'header-button-active' );
- $( '#site-info .arrow' ).addClass( 'rotate' );
- // delay the second clickOrTouch function (which performs fadeOut)
- // to stop fadeIn and fadeOut on one click (also prevents user from
- // spamming so it constantly fades in/out)
- setTimeout( function () {
- Refreshed.siteNavDropdown = true;
- }, 300 );
+ if ( Refreshed.sidebarIsOpen && !$( e.target ).closest( '#sidebar-wrapper' ).length ) {
+ Refreshed.toggleSidebar();
}
- } );
-
- $( document ).clickOrTouch( function ( e ) {
- if ( $( '#site-info .header-menu' ).is( ':visible' ) ) {
- if (
- Refreshed.siteNavDropdown &&
- !$( '#site-info .header-menu' ).is( e.target ) &&
- $( '#site-info .header-menu' ).has( e.target ).length === 0
- )
- {
- // if the target of the click isn't the container and isn't a descendant of the container
- $( '#site-info .header-menu' ).fadeOut();
- $( '#site-info-main a.arrow-link' ).removeClass( 'header-button-active' );
- $( '#site-info .arrow' ).removeClass( 'rotate' );
- Refreshed.siteNavDropdown = false;
- }
- }
- } );
-
- /* mobile sidebar */
- $( '#sidebar-shower' ).clickOrTouch( function() {
- //if (!Refreshed.sidebarOpen) {
- $( '#sidebar-wrapper' ).toggleClass( 'sidebar-open' );
- $( '#sidebar-shower' ).toggleClass( 'sidebar-open' );
- $( '#fade-overlay' ).toggleClass( 'fade-overlay-active' ); // toggle the fade overlay
- Refreshed.sidebarOpen = !Refreshed.sidebarOpen;
- $( this ).toggleClass( 'header-button-active' );
- //}
- } );
-
- $( document ).clickOrTouch( function ( e ) {
- if ( Refreshed.sidebarOpen && $( '#fade-overlay').is( e.target ) ) { // if the sidebar is out and the target of the click is the fade-overlay
- $( '#sidebar-wrapper' ).removeClass( 'sidebar-open' );
- $( '#sidebar-shower' ).removeClass( 'sidebar-open' );
- $( '#fade-overlay' ).removeClass( 'fade-overlay-active' ); // deactivate the fade overlay
- Refreshed.sidebarOpen = false;
- $( '#sidebar-shower' ).removeClass( 'header-button-active' );
+ });
+
+ /* header search on medium and small */
+ $( '#search-shower' ).clickOrTouchend( function() {
+ if ( Refreshed.usingIOS ) {
+ $( window ).scrollTop( 0 ); // iOS tries to vertically center the search bar, scrolling to the top keeps the header at the top of the viewport
}
- } );
+ Refreshed.toggleHeaderSearch();
+ });
+
+ $( '#search-closer' ).clickOrTouchend( function() {
+ Refreshed.toggleHeaderSearch();
+ });
+
+ /* sidebar on medium and small */
+ $( '.sidebar-shower' ).clickOrTouchend( function() {
+ Refreshed.toggleSidebar();
+ });
- $( '#small-tool-more' ).clickOrTouch( function() {
+ /* expanding the mobile */
+ $( '#small-tool-more' ).clickOrTouchend( function() {
$( '.small-toolbox' ).addClass( 'small-toolbox-expanded scroll-shadow' );
$( this ).css({'display': 'none'});
- } );
+ });
- $( '#icon-ca-watch, #icon-ca-unwatch' ).parent().clickOrTouch( function( e ) {
+ $( '#icon-ca-watch, #icon-ca-unwatch' ).parent().clickOrTouchend( function( e ) {
// AJAX for watch icons
var action, api, $link, title, otherAction;
e.preventDefault();
e.stopPropagation();
title = mw.config.get( 'wgRelevantPageName', mw.config.get( 'wgPageName' ) );
mw.loader.load( ['mediawiki.notification'], null, true );
action = mw.util.getParamValue( 'action', this.href );
otherAction = action === 'watch' ? 'unwatch' : 'watch';
$link = $( this );
$( 'div', this ).attr( 'id', 'icon-ca-' + otherAction );
$( this ).attr( 'href', this.href.replace( action, otherAction ) );
api = new mw.Api();
api[action]( title )
.done( function ( watchResponse ) {
mw.notify( $.parseHTML( watchResponse.message ), {
tag: 'watch-self'
- } );
+ });
$( '#wpWatchthis' ).prop( 'checked', watchResponse.watched !== undefined );
- } );
- } );
-
- /* user tools dropdown */
- $( '.page-item-has-children .clickable-region' ).clickOrTouch( function( e ) {
- // hide all the other page item dropdowns if they are visible
- $( '.page-item-has-children .children' ).fadeOut( 200 );
- $( '.page-item-has-children' ).removeClass( 'header-button-active' );
- $( '.page-item-has-children .arrow' ).removeClass( 'rotate' );
- if ( !$( this ).siblings( '.children' ).is( ':visible' ) ) {
- $( this ).siblings( '.children' ).fadeIn( 200 );
- $( this ).parent().addClass( 'header-button-active' );
- $( this ).children( '.arrow' ).addClass( 'rotate' );
- }
- } );
-
- $( document ).clickOrTouch( function ( e ) {
- if ( $( '.page-item-has-children .children' ).is( ':visible' ) ) {
- if ( $( '.page-item-has-children' ).has( e.target ).length === 0 ) { // if the target of the click isn't the button, the container, or a descendant of the container
- $( '.page-item-has-children .children' ).fadeOut( 200 );
- $( '.page-item-has-children' ).removeClass( 'header-button-active' );
- $( '.page-item-has-children .arrow' ).removeClass( 'rotate' );
- }
- }
- } );
+ });
+ });
+
/**
- * add "header-suggestions" class to first .suggestions element for CSS
- * targeting (there is usually one .suggestions element, but on Special:Search
- * there is one for the #header search bar and one for the #bodyContentsearch bar)
+ * Add "header-suggestions" class to first .suggestions element for CSS
+ * targeting. There is usually one .suggestions element, but on Special:Search
+ * there is one for the #header search bar and one for the #bodyContentsearch bar.
+ * We only want to target the one for the #header search bar.
*/
setTimeout( function () { // wait a bit so the .suggestions elements can be added in (if we don't wait we'll be targeting nothing and it won't work)...
$( '.suggestions' ).first().addClass( 'header-suggestions' ); // add class to first .suggestions element
}, 100 );
-} );
+});
/* Fix for Echo in Refreshed */
if ( document.getElementById( 'echo' ) ) {
$( '#pt-notifications' ).prependTo( '#echo' );
}
if ( $( '.mw-echo-notifications-badge' ).hasClass( 'mw-echo-unread-notifications' ) ) {
$( '#pt-notifications-personaltools a' ).addClass( 'pt-notifications-personaltools-unread' );
}
diff --git a/refreshed/small.css b/refreshed/small.css
index bae3fee..99db6a4 100644
--- a/refreshed/small.css
+++ b/refreshed/small.css
@@ -1,440 +1,433 @@
/* anything 600px and under - phones */
+.header-button .wikiglyph {
+ line-height: 2.75em;
+ height: 2.75em; /* line-height and height equal to the parent's height (3em) plus vertical-align:text-bottom in wikiglyphs.css vertically centers the icons */
+}
+
+.header-button .wikiglyph:before {
+ font-size: 2.75em; /* ...however, the actual glyph has a more appropriate font size of 3em (so the glyph itself is larger while it can be positioned with the smaller em units without a problem) */
+}
+
.fade-overlay-active {
opacity: 0.5 !important;
z-index: 10001; /* very high value to guarantee no elements on wikis will appear above it (except the sidebar) */
cursor: pointer;
}
.fade-overlay-below-header {
z-index: 10000 !important; /* below header but above page content (used for search) */
cursor: pointer;
}
#header {
height: 2.75em;
}
#sidebar-wrapper {
position: fixed;
background: midnightblue;
left: -15em;
width: 15em;
top: 0;
z-index: 10002; /* appear above fade-overlay, which has z-index 10001 */
-o-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-webkit-transition: 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */
transition: 0.2s ease;
}
.sidebar-open {
left: 0;
-ms-transform: translateX(15em);
-o-transform: translateX(15em);
-moz-transform: translateX(15em);
-webkit-transform: translateX(15em); /* -webkit- last so it's used in place of -o- if possible */
transform: translateX(15em);
}
#sidebar {
top: 2.75em;
font-size: 13pt;
}
#sidebar a:hover {
border: 0;
margin-left: 5px;
}
.header-button {
width: 2.75em;
height: 2.75em;
- background-size: 2.75em 2.75em;
+ padding: 0;
+ text-align: center;
}
-#sidebar-shower {
+.sidebar-shower {
display: block;
+ background-size: 2.75em;
+ right: -2.75em;
}
.sidebar-shower-hidden {
right: 0 !important;
}
#sidebar-logo {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 2.75em;
text-align: center;
padding: 0.5em 0;
}
#site-info-main {
display: none;
}
#site-info-main .arrow-link {
display: none !important;
}
#site-info-main:hover,
#site-info-main a,
#site-info-main a:hover {
background: none;
}
#site-info-mobile {
display: inline-block;
}
#header .search {
- background: midnightblue;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- padding: 0.25em 0;
- z-index: 0;
-}
-
-#header .search-open {
- z-index: 2; /* The notifications badge has a z-index of 1, this puts the search above it */
- opacity: 1;
+ width: 2.75em;
+ height: 2.75em;
+ padding: 0;
+ margin-right: 0;
}
#search-closer {
display: block;
}
-#header .search form {
- margin-right: 3em;
- margin-left: 0.25em;
+#header .search-form {
+ width: calc(100% - 3.25em); /* 100% - 2.75em for the close search button -0.25em of padding-left -0.25em of padding-right */
+ height: calc(100% - 0.5em); /* 100% -0.25em of padding-top - .35em of padding-bottom */
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0.25em;
+ z-index: 1; /* appear over the user icon, which doesn't have a specified z-index */
}
#searchInput { /* header search box */
width: 100%;
- font-size: 18px;
- float: left;
- height: 2em; /* (2.75em [height of header] - 0.5em [top + bottom padding of .search]) * (16px [font size of #header and .search] / 18px [font size of .search input]) */
- display: none; /* default to hidden (will be shown by adding .search-open class to .search) */
+ height: 100%;
+ font-size: 1.25em;
}
.search-open #searchInput {
display: block;
}
#search-shower {
display: block;
- position: absolute;
- top: 0;
- right: 0;
+ margin-right: 0;
}
#searchText,
#powerSearchText { /* search and advanced search boxes on Special:Search */
font-size: 18px;
}
#mw-search-top-table {
text-align: center; /* center the search/advanced search boxes and submit button on Special:Search */
}
.search-types {
width: 100%; /* break search types into 2 columns so the last item doesn't fall onto the next row on very small screens */
}
.search-types li {
width: 50%;
}
#mw-searchoptions td {
display: block; /* set each namespace under the advanced search preferences on its own line to prevent overflow (but if there's enough room it'll expand so there's two per line) */
}
.searchresult {
max-width: 100%; /* prevent search results from overflowing */
}
-#user-info {
- position: absolute;
- top: 0;
- right: 3em; /* search is 2.75em, 0.25em of padding */
- margin: 0;
- width: 2.75em;
- height: 2.75em;
-}
-
#user-info .header-button {
+ width: 2.75em;
padding: 0;
- height: 2.75em;
}
-#user-info .arrow {
+#user-info .arrow,
+.username {
display: none;
}
.avatar {
top: 7px; /* avatar is 30px, header is 44px */
left: 0.5em;
}
-.avatar-none {
- display: block;
-}
-
-#user-info > a {
- padding: 0;
- height: 2.75em;
-}
-
-#user-info > a span {
- display: none;
-}
-
#user-info .header-menu {
top: 2.75em;
background-color: midnightblue;
padding: 0.15em 0 0.15em 0;
}
#user-info .header-menu a {
text-align: left;
padding-left: 15px;
font-weight: normal;
}
#user-info .header-menu a:hover {
color: #CCC;
}
#user-info .header-menu a.new:hover {
color: #f47d64;
}
#site-info .header-menu img {
font-size: 16px; /* resetting font size for logos in menu so they are the same height as the one outside the menu */
}
#content {
top: 2.75em;
}
#header-categories {
display: none;
}
#firstHeading {
position: relative;
font-size: 0.9em;
padding: 0 1em;
width: auto;
}
#firstHeading h1 {
overflow-x: auto;
white-space: nowrap;
border: 0;
margin: 0;
padding: 0;
font-size: 2.25em;
}
.mw-indicator {
display: none !important;
/* to unset an individual indicator add the following:
#mw-indicator-name { display: inline-block !important; }
replacing "name" with the assigned name of the indicator */
}
.scroll-shadow {
background:
-webkit-linear-gradient(90deg, white 20%, rgba(255,255,255,0)),
-webkit-linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0,
-webkit-linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)),
-webkit-linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
linear-gradient(90deg, white 20%, rgba(255,255,255,0)), linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0, linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)), linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
-webkit-linear-gradient(0deg, white 20%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, white 20%, rgba(255,255,255,0)) 100% 0, -webkit-linear-gradient(0deg, #e3e3e3 10%, rgba(255,255,255,0)), -webkit-linear-gradient(180deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background:
linear-gradient(90deg, white 20%, rgba(255,255,255,0)),
linear-gradient(270deg, white 20%, rgba(255,255,255,0)) 100% 0,
linear-gradient(90deg, #e3e3e3 10%, rgba(255,255,255,0)),
linear-gradient(270deg, #e3e3e3 10%, rgba(255,255,255,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.standard-toolbox {
display: none;
}
#main-title-messages {
display: none;
}
#back-to-subject {
display: block;
}
#small-toolbox-wrapper {
position: relative;
display: block;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
margin: 0 0.9em 0.75em 0.9em; /* left/right: 1em (#bodyContent padding-left) * 0.9em (#bodyContent font-size) */
overflow-y: hidden;
}
.small-toolbox {
position: relative;
font-size: 2.75em;
- width: 3.75em; /* needs 1em for three icons plus .25em of padding to the right of each icon, so 3.75em */
+ width: 3.75em; /* needs 1em for three icons plus0.25em of padding to the right of each icon, so 3.75em */
height: 1em;
overflow-y: hidden; /* wikiglyphs have a bit too much bottom padding; with 1em height they're centered but you can scroll vertically, this stops the vertical scroll */
white-space: nowrap;
overflow: hidden;
display: inline-block;
-o-transition: width 0.2s ease;
-moz-transition: width 0.2s ease;
-webkit-transition: width 0.2s ease; /* -webkit- last so it's used in place of -o- if possible */
transition: width 0.2s ease;
}
.small-toolbox-expanded {
width: 100%;
overflow-x: auto;
}
a.small-tool { /* inclusion of the "a" is necessary to override the standard a element font color without using !important */
font-size: 1em;
width: 1em;
height: 1em;
color: #000;
display: inline-block;
- padding-right: .25em;
+ padding-right: 0.25em;
}
.small-tool:hover {
opacity: 0.5;
}
/* CONTENT AREA ********************************************/
.nosmall, .articleFeedbackv5 {
display: none !important;
}
/* Hide ads on mobile until mobile ads are implemented */
#advert {
display: none;
}
/* Suggestions box under search */
.header-suggestions {
top: 2.75em !important;
left: 0 !important;
width: 100% !important;
font-size: 16px !important;
z-index: 10001 !important; /* place above #fade-overlay, which has z-index of 10000 because it has the .fade-overlay-below-header class */
}
.header-suggestions div {
font-size: 16pt;
}
.header-suggestions .suggestions-result {
padding: 0.5em 0.25em !important;
border-bottom: 1px solid #ddd;
}
+.header-suggestions .suggestions-result:hover,
+.header-suggestions .suggestions-special:hover { /* making search suggestions change color when focused (e.g., tapped on mobile); this CSS is adapted from the .suggestions-result-current class */
+ background-color: #4C59A6;
+ color: white;
+}
+
+.header-suggestions .suggestions-special:hover div {
+ color: white; /* for whatever reason it doesn't want to have white text unless this is added too */
+}
+
.header-suggestions .suggestions-special {
padding: 0.5em 0.25em !important;
margin-top: 0 !important;
border: 0 !important;
border-bottom: 1px solid #ddd !important;
}
.header-suggestions .suggestions-results {
border: 0 !important;
}
/* Extension:Echo fixes */
#pt-mytalk a.mw-echo-alert { /* "you have new messages" alert in the personal tools dropdown */
margin: 0.1em;
}
#pt-notifications-personaltools { /* "Notifications" item in the personal tools dropdown */
display: list-item;
}
.pt-notifications-personaltools-unread {
background-color: #cc0000;
color: #fff;
border-radius: 2px; /* matching the notification badge itself and the "you have new messages" notice, which both have border-radius */
margin: 0.1em;
}
.pt-notifications-personaltools-unread:hover {
background-color: #bf0000 !important;
}
#pt-notifications {
position: absolute;
margin: 0;
top: 0; /* the container height is greater than that of the notification button itself so this still leaves some space above the button */
right: 2.9em; /* 2.75em for the search button, 0.25em of padding within user button */
max-width: 2.25em; /* 2.75em (width of user button) - 0.25em of padding on each side */
z-index: 1; /* above user button */
padding: 0;
width: auto;
pointer-events: none; /* prevent click event (stop notifications dropdown from appearing on click) */
}
.mw-echo-notifications-badge {
font-size: 0.5em;
min-width: 3.5px; /* min-width of 7px * 0.5em (stops badge from looking too wide when it contains a single-digit number) */
max-width: 2.25em; /* (2.75em (width of user button) - 0.25em of padding on each side) * 2 because the font size is 0.5em */
overflow: hidden;
display: none; /* hide if there are no noticiations */
}
.mw-echo-unread-notifications {
display: inline;
}
.mw-echo-overlay {
display: none; /* if pointer-events isn't supported (so #mw-echo-overlay is generated when the notifications badge is clicked), hide #mw-echo-overlay so it's not visible */
}
/* Image thumbnails */
.thumb {
width: 100% !important;
margin: 0 !important;
}
div.thumbinner { /* need to specify div so it can overwrite the CSS in commonContent.css */
width: auto !important;
padding: 0.75em 0 !important;
margin-bottom: 0.5em;
}
.thumbinner img {
width: 50%;
height: auto;
border: 0 !important;
}
.thumbcaption {
text-align: center !important;
margin-bottom: -.75em !important;
}
.magnify {
display: none;
}