API tools faq
paste
Advertisement
Guest User

pseudomonobook with FullWidthOasis.css

a guest
May 26th, 2018
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.28 KB | None | 0 0
raw download clone embed print report
  1. @-moz-document domain('wikia.com')
  2. /** <nowiki>
  3.  *
  4.  * @title           PseudoMonobook
  5.  * @description     Introduces Monobook visual design cues to the Oasis skin.
  6.  * @author          Speedit
  7.  * @version         1.2.7
  8.  * @license         CC-BY-SA 3.0
  9.  *
  10.  */
  11.  
  12. /**
  13.  * @section         Skin container styling
  14.  * @element         .WikiaSiteWrapper
  15.  */
  16. .skin-oasis:not(.editor) .WikiaSiteWrapper {
  17.     padding-left: 150px;
  18. }
  19. .skin-oasis #WikiaPage,
  20. .skin-oasis .wds-global-footer {
  21.     margin: 0;
  22.     min-width: 758px;
  23.     width: 100%;
  24. }
  25. .skin-oasis:not(.editor) #WikiaPage {
  26.     box-sizing: border-box;
  27.     padding: 0 20px;
  28. }
  29. .skin-oasis #WikiaPage .WikiaPageContentWrapper {
  30.     padding-top: 38px;
  31. }
  32. @media only screen and (max-width: 1313px) {
  33.     .skin-oasis:not(.editor) .wds-global-footer {
  34.         padding: 0 25px;
  35.     }
  36. }
  37. @media only screen and (max-width: 1243px) {
  38.     .skin-oasis .WikiaMainContent {
  39.         width: 100%;
  40.     }
  41.     .skin-oasis .WikiaRail,
  42.     .skin-oasis .main-page-tag-rcs {
  43.         box-sizing: border-box;
  44.         clear: both;
  45.         column-count: 2;
  46.         float: none;
  47.         padding: 13px 10px 0;
  48.         width: auto;
  49.     }
  50. }
  51.  
  52. /**
  53.  * @section         Ad & recirculation removal
  54.  * @element         .wikia-ad
  55.  */
  56. .skin-oasis .WikiaSiteWrapper #WikiaTopAds,
  57. .skin-oasis .wds-global-navigation .wds-global-navigation__link,
  58. .skin-oasis .mw-content-text .home-top-right-ads,
  59. .skin-oasis .WikiaPage #WikiaArticleBottomAd,
  60. .skin-oasis .WikiaPage #mixed-content-footer,
  61. .skin-oasis .WikiaRail #WikiaAdInContentPlaceHolder,
  62. .skin-oasis .WikiaRail .side-articles.fandom-stories,
  63. .skin-oasis .wikia-ad,
  64. .skin-oasis .wds-global-footer .wds-global-footer__fandom-sections,
  65. .skin-oasis .wds-global-footer .wds-global-footer__wikia-section.wds-is-follow-us {
  66.     display: none !important;
  67. }
  68.  
  69. /**
  70.  * @section         Global navigation styling
  71.  * @element         .wds-global-navigation
  72.  */
  73. .skin-oasis .wds-global-navigation {
  74.     left: 0;
  75.     right: 0;
  76. }
  77. .skin-oasis .wds-global-navigation:not(.wds-search-is-active) .wds-global-navigation__wikis-menu {
  78.     flex: 0 1 auto;
  79.     padding: 0 17px;
  80. }
  81. .skin-oasis .wds-global-navigation .wds-global-navigation__search {
  82.     flex: 1;
  83. }
  84. .skin-oasis .wds-global-navigation .wds-global-navigation__search-input-wrapper {
  85.     border-bottom: 1px solid currentColor;
  86. }
  87.  
  88. /**
  89.  * @section         Community header styling
  90.  * @element         .wds-community-header
  91.  * @modifier        wordmark
  92.  * @type            descendant
  93.  */
  94. .skin-oasis .wds-community-header {
  95.     background-image: none !important;
  96.     background-size: auto;
  97.     display: flex;
  98.     flex-flow: column nowrap;
  99.     height: calc(100% - 55px);
  100.     margin: 0;
  101.     top: 55px;
  102.     left: 0;
  103.     position: absolute;
  104.     width: 150px;
  105. }
  106. .skin-oasis .wds-community-header .wds-community-header__wordmark {
  107.     float: none;
  108.     height: auto;
  109.     margin: 68px auto 20px;
  110.     max-width: 110px;
  111. }
  112.  
  113. /**
  114.  * @subsection      Community header wiki styling
  115.  * @element         .wds-community-header
  116.  * @modifier        top-container
  117.  * @type            descendant
  118.  */
  119. .skin-oasis .wds-community-header .wds-community-header__top-container {
  120.     flex-flow: column;
  121.     height: auto;
  122. }
  123. .skin-oasis .wds-community-header .wds-community-header__sitename {
  124.     margin: 0 20px 20px;
  125.     text-align: center;
  126.     text-overflow: initial;
  127.     white-space: normal;
  128. }
  129. .skin-oasis .wds-community-header .wds-community-header__sitename a {
  130.     font-size: 14px;
  131. }
  132. .skin-oasis .wds-community-header .wds-community-header__counter {
  133.     display: none;
  134. }
  135.  
  136. /**
  137.  * @subsection      Community header navigation styling
  138.  * @element         .wds-community-header
  139.  * @modifier        local-navigation
  140.  * @type            descendant
  141.  */
  142. .skin-oasis .wds-community-header .wds-community-header__local-navigation {
  143.     flex-flow: column nowrap;
  144.     margin-top: 0;
  145.     padding:  0;
  146.     position: sticky;
  147.     top: 55px;
  148. }
  149. .skin-oasis .wds-community-header .wds-community-header__local-navigation .wds-tabs {
  150.     flex-flow: column;
  151. }
  152. .skin-oasis .wds-community-header .wds-community-header__local-navigation .wds-tabs__tab,
  153. .skin-oasis .wds-community-header .wds-community-header__local-navigation .wds-dropdown {
  154.     width: 100%;
  155. }
  156. .skin-oasis .wds-community-header .wds-community-header__local-navigation .wds-tabs__tab-label {
  157.     font-size: 12px;
  158.     justify-content: center;
  159.     margin: 0 auto;
  160.     white-space: normal;
  161.     width: 100%;
  162. }
  163. .skin-oasis .wds-community-header .wds-community-header__local-navigation .wds-dropdown__toggle-chevron {
  164.     position: absolute;
  165.     right: 8px;
  166.     transform: rotate(270deg);
  167. }
  168. .skin-oasis .wds-community-header .wds-community-header__local-navigation .wds-dropdown:hover .wds-dropdown__toggle-chevron {
  169.     transform: rotate(90deg);
  170. }
  171.  
  172. /**
  173.  * @subsection      Community header dropdown styling
  174.  * @element         .wds-community-header .wds-dropdown
  175.  * @type            descendant
  176.  */
  177. .skin-oasis .wds-community-header .wds-dropdown::after,
  178. .skin-oasis .wds-community-header .wds-dropdown::before {
  179.     bottom: auto;
  180.     top: 12px;
  181.     transform: rotate(270deg);
  182. }
  183. .skin-oasis .wds-community-header .wds-dropdown::after {
  184.     left: calc(100% - 7px);
  185. }
  186. .skin-oasis .wds-community-header .wds-dropdown::before {
  187.     left: calc(100% - 8px);
  188.     top: 11px;
  189. }
  190. .skin-oasis .wds-community-header .wds-dropdown__content {
  191.     top: 0;
  192.     right: auto;
  193.     left: 100%;
  194. }
  195.  
  196. /**
  197.  * @subsection      Community header tool styling
  198.  * @element         .wds-community-header
  199.  * @modifier        wiki-buttons
  200.  * @type            descendant
  201.  */
  202. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons {
  203.     justify-content: stretch;
  204.     margin: 1px;
  205.     position: absolute;
  206.     top: 0;
  207.     width: 150px;
  208. }
  209. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-button {
  210.     border-top: none;
  211.     flex: 1;
  212.     padding: 9px 0;
  213.     margin: 0 0 0 -1px;
  214. }
  215. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-button:first-child {
  216.     border-left: none;
  217. }
  218. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-button svg {
  219.     margin: 0;
  220. }
  221. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-button span {
  222.     display: none;
  223. }
  224. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-dropdown {
  225.     display:  flex;
  226.     flex: 1;
  227.     position: static;
  228. }
  229. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-dropdown::after,
  230. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-dropdown::before {
  231.     display: none;
  232. }
  233. .skin-oasis .wds-community-header__wiki-buttons .wds-dropdown__content {
  234.     border-radius: 0;
  235.     left: calc(100% - 1px);
  236.     padding: 0;
  237.     top: -1px;
  238.     width: calc(100vw - 150px);
  239. }
  240. .skin-oasis.ns--1 .wds-community-header__wiki-buttons .wds-dropdown__content,
  241. .skin-oasis.ns-3 .wds-community-header__wiki-buttons .wds-dropdown__content,
  242. .skin-oasis.ns-500:not(.MiniEditor) .wds-community-header__wiki-buttons .wds-dropdown__content,
  243. .skin-oasis.ns-1200 .wds-community-header__wiki-buttons .wds-dropdown__content,
  244. .skin-oasis.ns-1201 .wds-community-header__wiki-buttons .wds-dropdown__content,
  245. .skin-oasis.ns-2000 .wds-community-header__wiki-buttons .wds-dropdown__content {
  246.     display: inline-block;
  247. }
  248. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-list {
  249.     display: flex;
  250. }
  251. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-list > li {
  252.     margin: 0;
  253. }
  254. .skin-oasis .wds-community-header .wds-community-header__wiki-buttons .wds-list > li > a {
  255.     font-size: 10px;
  256.     font-weight: bold;
  257.     line-height: 1em;
  258.     padding: 13px 12px;
  259.     text-transform: uppercase;
  260. }
  261.  
  262. /**
  263.  * Page header contribution button styling
  264.  * @element         .page-header
  265.  * @modifier        contribution-buttons
  266.  * @type            descendant
  267.  */
  268. .skin-oasis #WikiaPage .page-header {
  269.     position: static;
  270. }
  271. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-button-group {
  272.     position: absolute;
  273.     top: 0;
  274.     left: -20px;
  275.     right: -24px;
  276. }
  277. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-dropdown__content {
  278.     padding: 0;
  279.     position: static;
  280.     display: flex;
  281.     flex: 1;
  282.     border-radius: 0;
  283. }
  284. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-dropdown {
  285.     display: flex;
  286.     flex: 1;
  287. }
  288. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-dropdown__toggle,
  289. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-dropdown:before,
  290. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-dropdown:after {
  291.     display: none;
  292. }
  293. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-list {
  294.     display: flex;
  295.     flex-flow: row nowrap;
  296.     overflow: hidden;
  297. }
  298. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-list > li {
  299.     margin: 0;
  300. }
  301. .skin-oasis #WikiaPage .page-header .page-header__contribution-buttons .wds-list > li > a {
  302.     padding: 11px 12px;
  303.     font-size: 10px;
  304.     text-transform: uppercase;
  305.     font-weight: bold;
  306. }
  307.  
  308. /**
  309.  * @section         Global footer modifications
  310.  * @element         .wds-global-footer
  311.  */
  312. .skin-oasis .wds-global-footer__main {
  313.     flex-direction: row;
  314.     margin: 0 auto;
  315.     padding-bottom: 5px;
  316.     zoom: 0.85;
  317. }
  318. .skin-oasis .wds-global-footer .wds-global-footer__header {
  319.     height: 36px;
  320.     display: flex;
  321.     zoom: .85;
  322.     padding: 40px 0;
  323. }
  324. .skin-oasis .wds-global-footer .wds-global-footer__header-logo {
  325.     height: 36px;
  326. }
  327. .skin-oasis .wds-global-footer__fandom-sections,
  328. .skin-oasis .wds-global-footer__wikia-sections {
  329.     align-content: flex-start;
  330.     order: 4;
  331.     width: 720px;
  332.     margin: 0 auto;
  333. }
  334. .skin-oasis .wds-global-footer .wds-global-footer__bottom-bar {
  335.     min-height: 3em;
  336. }
  337. .skin-oasis .wds-global-footer .wds-global-footer__bottom-bar-row {
  338.     padding: 10px 0;
  339. }
  340. .skin-oasis:not(.editor) .wds-global-footer .wds-global-footer__bottom-bar {
  341.     margin: 0 -25px;
  342. }
  343. @media only screen and (max-width: 1313px) {
  344.     .skin-oasis .wds-global-footer .wds-global-footer__wikia-section {
  345.         margin-right: 25px;
  346.         flex: 1;
  347.         width: 25%;
  348.     }
  349.     .skin-oasis .wds-global-footer .wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__links-list {
  350.         flex-direction: column;
  351.     }
  352.     .skin-oasis .wds-global-footer .wds-global-footer__wikia-section.wds-is-community-apps .wds-global-footer__links-list-item {
  353.         margin: 0;
  354.     }
  355.     .skin-oasis .wds-global-footer .wds-global-footer__wikia-section.wds-is-create-wiki,
  356.     .skin-oasis .wds-global-footer .wds-global-footer__wikia-section.wds-is-advertise {
  357.         display: none !important;
  358.     }
  359.     .skin-oasis .wds-global-footer__wikia-sections .wds-global-footer__links-list-item {
  360.         margin-bottom: 8px;
  361.     }
  362. }
  363. /* </nowiki> */
  364.  
  365. .WikiaPage,
  366. .wds-community-header {
  367.     border: none !important;
  368.     margin: 0 auto;
  369.     width: initial;
  370. }
  371.  
  372. /* Full width for Global Navigation and toolbar - optional */
  373. .wds-global-navigation__content-bar,
  374. .WikiaBarWrapper .wikia-bar {
  375.     width: 100%;
  376. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!