User:Vaileasys/Sandbox: Difference between revisions

From PZwiki
(wiki dark theme css)
Line 1: Line 1:
==Final==
Notes for wiki dark theme
{| class="mw-collapsible mw-collapsed wikitable theme-red" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}" style="text-align:center; min-width:24em;"
! colspan="4" | Containers
|-
!Building/Room
!Container
! style="width: 3.2em;" |Rolls
! style="width: 3.2em;" |Chance
|-
|rowspan="6"|all
|desk
|4
|10
|-
|filingcabinet
|4
|10
|-
|locker
|4
|10
|-
|officedrawers
|4
|10
|-
|other
|1
|10
|-
|shelves
|4
|10
|-
|}


==Unused==
===Things to remember===
====Caption====
*toc uses linear-gradient for <code>.sidebar-toc:after</code> selector
{| class="mw-collapsible mw-collapsed wikitable theme-red" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}" style="text-align:center; width:400px;"
*change wikitable colours (will also modify infobox and various other templates colours)
|+ style="text-align:left;" | Container
**also wikitable caption color
|-
*check to make sure toggleboxes and navboxes use wikitable colors for background-color - otherwise modify
!Building/Room
*change sidebar heading colours
!Container
**including toc 'current' heading
! style="width: 30px;" |Rolls
*change search bar colours
! style="width: 30px;" |Chance
*some files need to be made white and uploaded
|-
**[https://pzwiki.net/w/skins/Vector/resources/common/images/search.svg?bbf78 magnifying glass]
|rowspan="6"|all
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons.js&image=speechBubbles&format=original&lang=en&skin=vector-2022&version=px0b5 talk/discuss]
|desk
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons.js&image=history&format=original&skin=vector-2022&version=px0b5 history]
|4
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons&image=unStar&format=rasterized&skin=vector-2022&version=1gny3 watchlist star]
|10
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons&image=userAvatar&format=rasterized&skin=vector-2022&version=1gny3 user avatar]
|-
**[https://pzwiki.net/w/skins/Vector/resources/common/images/arrow-down.svg?9426f down arrow]
|filingcabinet
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons&image=watchlist&format=original&lang=en&skin=vector-2022&version=1gny3 watchlist]
|4
**<code>data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E chevron %3C/title%3E %3Cpath d=%22m9 2 1.3 1.3L3.7 10l6.6 6.7L9 18l-8-8 8-8zm8.5 0L19 3.3 12.2 10l6.7 6.7-1.4 1.3-8-8 8-8z%22/%3E %3C/svg%3E</code> hide sidebar
|10
**<code>data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E</code> show sidebar
|-
|locker
|4
|10
|-
|officedrawers
|4
|10
|-
|other
|1
|10
|-
|shelves
|4
|10
|-
|}


====Custom toggle====
<span class="mw-customtoggle-DistributionBox" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}" style="background-color: #68191b; color: #ffffff; padding: 5px 20px; border-radius:8px; cursor: pointer; solid #d3d3d3; font-weight:normal;">Show / Hide</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-DistributionBox">
{| class="wikitable theme-red sortable" style="text-align:center;"
|-
!Building/Room
!Container
! style="width: 30px;" |Rolls
! style="width: 30px;" |Chance
|-
|rowspan="6"|all
|desk
|4
|10
|-
|filingcabinet
|4
|10
|-
|locker
|4
|10
|-
|officedrawers
|4
|10
|-
|other
|1
|10
|-
|shelves
|4
|10
|-
|}
</div>
====ToggleBox====
{{ToggleBox
| title = Containers
| id = distribution-containers
| collapsed = true
| content =
{{{!}} class{{=}}"wikitable theme-red sortable" style{{=}}"text-align:center;"
{{!}}-
!Building/Room
!Container
! style{{=}}"width: 30px;" {{!}}Rolls
! style{{=}}"width: 30px;" {{!}}Chance
{{!}}-
{{!}}rowspan{{=}}"6"{{!}}all
{{!}}desk
{{!}}4
{{!}}10
{{!}}-
{{!}}filingcabinet
{{!}}4
{{!}}10
{{!}}-
{{!}}locker
{{!}}4
{{!}}10
{{!}}-
{{!}}officedrawers
{{!}}4
{{!}}10
{{!}}-
{{!}}other
{{!}}1
{{!}}10
{{!}}-
{{!}}shelves
{{!}}4
{{!}}10
{{!}}-
{{!}}}
}}


{{ToggleBox
===CSS===
| title = Vehicles
====Vector-2022.css====
| id = distribution-vehicles
<syntaxhighlight lang="css">
| collapsed = true
@media screen {
| content =  
    body {
{{{!}} class{{=}}"wikitable theme-red sortable" style{{=}}"text-align:center;"
        background-color: #f8f9fa; /*vertical bar background color*/
{{!}}-
        color: #202122; /*body font color*/
!Building/Room
    }
!Container
 
! style{{=}}"width: 30px;" {{!}}Rolls
    .mw-page-container {
! style{{=}}"width: 30px;" {{!}}Chance
        background-color: #ffffff; /* body background color */
{{!}}-
    }
{{!}}rowspan{{=}}"6"{{!}}all
 
{{!}}desk
    /* sticky header that displays after scrolling */
{{!}}4
    .vector-sticky-header {
{{!}}10
        background: #ffffff;
{{!}}-
        background-color: #fffffff7;
{{!}}filingcabinet
        border-bottom: 1px solid #eaecf0;
{{!}}4
    }
{{!}}10
 
{{!}}-
    .mw-sidebar {
{{!}}locker
        background-color: #f8f9fa /* sidebar background color */
{{!}}4
    }
{{!}}10
 
{{!}}-
    .sidebar-toc {
{{!}}officedrawers
        background-color: #ffffff; /* toc background color */
{{!}}4
    }
{{!}}10
 
{{!}}-
    /* toc button */
{{!}}other
    #vector-toc-collapsed-button {
{{!}}1
        display: none;
{{!}}10
        float: left;
{{!}}-
        margin-right: 4px;
{{!}}shelves
        margin-left: -0.75em;
{{!}}4
        padding: 7px 10px 7px 10px;
{{!}}10
        background-color: #ffffff
{{!}}-
    }
{{!}}}
 
}}
    /* toc button (hover/active) */
    #vector-toc-collapsed-button:hover,#vector-toc-collapsed-button:active {
        background-color: #f8f9fa
    }
 
    /* Code */
    pre,code,.mw-code {
        background-color: #f8f9fa;
        color: #000;
        border: 1px solid #eaecf0
    }
 
    /* category links bar */
    .catlinks {
        border: 1px solid #a2a9b1;
        background-color: #f8f9fa;
    }
 
    /* headings */
    h1,h2,h3,h4,h5,h6 {
        color: #000;
    }
 
    /* gallery thumb */
    li.gallerybox div.thumb {
        border: 1px solid #c8ccd1;
        background-color: #f8f9fa
    }
}
 
@media screen and (min-width: 1000px) {
    /* weird toc gradient */
    .vector-toc-not-collapsed .sidebar-toc:after {
        background: linear-gradient(rgba(255,255,255,0),#ffffff); /* change to none */
    }
}
</syntaxhighlight>
 
====Common.css====
<syntaxhighlight lang="css">
/* gallery grow image on hover */
li.gallerybox div.thumb img {
    transition: all 0.2s ease-in-out
}
li.gallerybox div.thumb img:hover {
    transform: scale(1.05);
}
</syntaxhighlight>

Revision as of 14:48, 25 March 2024

Notes for wiki dark theme

Things to remember

  • toc uses linear-gradient for .sidebar-toc:after selector
  • change wikitable colours (will also modify infobox and various other templates colours)
    • also wikitable caption color
  • check to make sure toggleboxes and navboxes use wikitable colors for background-color - otherwise modify
  • change sidebar heading colours
    • including toc 'current' heading
  • change search bar colours
  • some files need to be made white and uploaded
    • magnifying glass
    • talk/discuss
    • history
    • watchlist star
    • user avatar
    • down arrow
    • watchlist
    • data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E chevron %3C/title%3E %3Cpath d=%22m9 2 1.3 1.3L3.7 10l6.6 6.7L9 18l-8-8 8-8zm8.5 0L19 3.3 12.2 10l6.7 6.7-1.4 1.3-8-8 8-8z%22/%3E %3C/svg%3E hide sidebar
    • data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E show sidebar


CSS

Vector-2022.css

@media screen {
    body {
        background-color: #f8f9fa; /*vertical bar background color*/
        color: #202122; /*body font color*/
    }

    .mw-page-container {
        background-color: #ffffff; /* body background color */
    }

    /* sticky header that displays after scrolling */
    .vector-sticky-header {
        background: #ffffff;
        background-color: #fffffff7;
        border-bottom: 1px solid #eaecf0;
    }

    .mw-sidebar {
        background-color: #f8f9fa /* sidebar background color */
    }

    .sidebar-toc {
        background-color: #ffffff; /* toc background color */
    }

    /* toc button */
    #vector-toc-collapsed-button {
        display: none;
        float: left;
        margin-right: 4px;
        margin-left: -0.75em;
        padding: 7px 10px 7px 10px;
        background-color: #ffffff
    }

    /* toc button (hover/active) */
    #vector-toc-collapsed-button:hover,#vector-toc-collapsed-button:active {
        background-color: #f8f9fa
    }

    /* Code */
    pre,code,.mw-code {
        background-color: #f8f9fa;
        color: #000;
        border: 1px solid #eaecf0
    }

    /* category links bar */
    .catlinks {
        border: 1px solid #a2a9b1;
        background-color: #f8f9fa;
    }

    /* headings */
    h1,h2,h3,h4,h5,h6 {
        color: #000;
    }

    /* gallery thumb */
    li.gallerybox div.thumb {
        border: 1px solid #c8ccd1;
        background-color: #f8f9fa
    }
}

@media screen and (min-width: 1000px) {
    /* weird toc gradient */
    .vector-toc-not-collapsed .sidebar-toc:after {
        background: linear-gradient(rgba(255,255,255,0),#ffffff); /* change to none */
    }
}

Common.css

/* gallery grow image on hover */
li.gallerybox div.thumb img {
    transition: all 0.2s ease-in-out
}
li.gallerybox div.thumb img:hover {
    transform: scale(1.05);
}
Retrieved from "https://pzwiki.net/w/index.php?title=User:Vaileasys/Sandbox&oldid=287865"