MediaWiki:Mobile.css: Difference between revisions

MediaWiki:Mobile.css (view source)

Revision as of 15:05, 24 August 2019

520 bytes added , 15:05, 24 August 2019

revamp collapsibles

Egocarib

Bureaucrats, Interface administrators, Administrators

8,290

edits

@@ Line 169: / Line 169: @@
    --qud-font-icon1: 'Source Code Pro','Calibri','Courier New','Courier','Arial';
    --qud-font-icon2: 'Source Code Pro','Calibri','Consolas','Lucida Console';
-   --qud-font-infobox-title: 'Source Code Pro','Segoe UI','Consolas','Lucida Console','Courier New','Courier';
+   --qud-font-infobox-title: 'Source Code Pro','Open Sans','Segoe UI','Consolas','Lucida Console','Courier New','Courier';
-   --qud-font-infobox-content: 'Segoe UI','Consolas','Lucida Console','Courier New','Courier','Source Code Pro';
+   --qud-font-infobox-content: 'Open Sans','Segoe UI','Consolas','Lucida Console','Courier New','Courier','Source Code Pro';
    --qud-font-collapser-arrows: 'Source Code Pro, Lucida Console, Consolas';
+  --qud-bg-color-semidark: rgba(6,28,23,0.7);
    --qud-bg-color-dark: rgba(6,28,23,0.8);
    --qud-bg-color-darker: rgba(6,28,23,0.9);
-  --qud-bg-color-arrow: rgb(9,31,25);
 }
 /*
@@ Line 225: / Line 225: @@
   *  ============================
   */
-td.qud-collapser {
+.qud-collapser {
-   background: var(--qud-bg-color-dark);
+   position: relative;
-  color: var(--infobox-label-color);
    font-weight: bold;
+  font-family: 'Open Sans';
    height: 2.6em;
+  background: var(--qud-bg-color-semidark);
+  transition: background-color 0.2s, color 0.5s;
 }
-.qud-collapser-head {
+tr:hover > .qud-collapser {
-   display: flex;
+   background: var(--qud-bg-color-darker);
-  font-weight: bold;
-  font-size: 1.1em;
-  font-family: var(--qud-font-terminal2);
-}
-.qud-collapser-title {
-  margin-left:1.5em;
 }
 .qud-collapser-content {
    padding: 0 4px;
-   background: var(--code-background); /*#0f3b3a;*/
+   background: var(--code-background);
 }
 .qud-collapser-content div,
@@ Line 248: / Line 244: @@
      font-family: var(--qud-font-infobox-content);
 }
-.qud-collapser-arrow-right {
+.qud-collapser > .qud-collapser-arrow {
-   text-align: center;
+  display: block !important; /* override display:none applied by mw-collapsible */
+}
+.qud-collapser > .qud-collapser-arrow:after {
+   font-size: 0.95em;
+  font-weight: normal;
    position: absolute;
-   line-height: 1.8em;
+   top: .8em;
-   font-family: var(--qud-font-collapser-arrows);
+   letter-spacing: 0.02em;
-   left: 0.6em;
+  content:'[hide]';
-   z-index: 10;
+  color: var(--qud-color-c-dark);
+  opacity: 0.5;
+  transition: color 0.4s, transform 0.1s;
+  transform: perspective(1px); /* fixes some hover bluriness in Chrome */
+}
+.qud-collapser > .qud-collapser-arrow.mw-collapsed:after,
+.qud-collapser > .qud-collapser-arrow.collapsed:after {
+  content:'[show]';
+}
+tr:hover > .qud-collapser > .qud-collapser-arrow:after {
+  text-decoration: underline;
+  color: var(--qud-color-c);
+   opacity: 1;
+}
+.qud-collapser > .qud-collapser-title {
+  margin-left: 0;
+   color: var(--qud-color-y-dark);
+  transition: color 0.5s;
 }
-.qud-collapser-arrow-down {
+tr:hover > .qud-collapser > .qud-collapser-title {
-  text-align: center;
+   color: var(--qud-color-y);
-  position: absolute;
-  line-height: 1.8em;
-  font-family: var(--qud-font-collapser-arrows);
-   background: var(--qud-bg-color-arrow);
-  left: 0.6em;
-  z-index: 20;
 }
-/* Mobile-specific stylings: */
+/* Mobile-only collapsible adjustments */
-.qud-collapser-title {
+.qud-collapser > .qud-collapser-title {
-    width: 99%;
+  height: 2.5em;
-    padding-left: 1.5em;
+  line-height: 2.5;
-    margin-left: 0;
-    z-index: 30;
 }
-.qud-collapser-arrow-down {
+.qud-collapser-arrow:after {
-    background: none;
+  top: .8em;
+  right: 1em;
 }
 /*