User:Vaileasys/Sandbox: Difference between revisions

From PZwiki
(added color values)
(mark off completed items)
 
(9 intermediate revisions by the same user not shown)
Line 2: Line 2:


==Things to remember==
==Things to remember==
*toc uses linear-gradient for <code>.sidebar-toc:after</code> selector
*<s>toc uses linear-gradient for <code>.sidebar-toc:after</code> selector</s>
*change wikitable colours (will also modify infobox and various other templates colours)
*<s>change wikitable colours (will also modify infobox and various other templates colours)</s>
**also wikitable caption color
**<s>also wikitable caption color</s>
*check to make sure toggleboxes and navboxes use wikitable colors for background-color - otherwise modify
*check to make sure toggleboxes and navboxes use wikitable colors for background-color - otherwise modify
*change sidebar heading colours
*change sidebar heading colours
**including toc 'current' heading
**including toc 'current' heading
*change search bar colours
*<s>change search bar colours</s>
*edit window
*<s>edit window</s>
*some files need to be made white and uploaded
*<s>some files need to be made white and uploaded</s>
**[https://pzwiki.net/w/skins/Vector/resources/common/images/search.svg?bbf78 magnifying glass]
**<s>[[:File:Search.png|search]]</s>
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons.js&image=speechBubbles&format=original&lang=en&skin=vector-2022&version=px0b5 talk/discuss]
**<s>[[:File:SpeechBubbles.png|talk/discuss]]</s>
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons.js&image=history&format=original&skin=vector-2022&version=px0b5 history]
**<s>[[:File:History.png|history]]</s>
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons&image=unStar&format=rasterized&skin=vector-2022&version=1gny3 watchlist star]
**<s>[[:File:UnStar.png|watchlist on]] & [[:File:Star.png|watchlist off]]</s>
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons&image=userAvatar&format=rasterized&skin=vector-2022&version=1gny3 user avatar]
**<s>[[:File:UserAvatar.png|user avatar]]</s>
**[https://pzwiki.net/w/skins/Vector/resources/common/images/arrow-down.svg?9426f down arrow]
**<s>[[:File:Expand.png|expand]] & [[:File:Arrow-down.png|down arrow (toc)]]</s>
**[https://pzwiki.net/w/load.php?modules=skins.vector.icons&image=watchlist&format=original&lang=en&skin=vector-2022&version=1gny3 watchlist]
**<s>[[:File:Watchlist.png|watchlist]]</s>
**<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
**<s>[[:File:MenuHamburger.png|show sidebar]] & [[:File:ChevronBack.png|hide sidebar]]</s>
**<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


==Values==
==Values==
Line 36: Line 35:


==CSS==
==CSS==
===To change===
===To-do===
*Edit
**chevrons, e.g. before Advanced & after heading (use: /w/images/f/fb/Arrow-down.png)
**search & replace widget in edit
**<s>edit widget top elements, e.g. <code>.wikiEditor-ui-toolbar</code></s>
**<s>heading dropdown</s>
**<s>hover background-color, e.g. Bold and Italic</s>
**<s>icons, e.g. Bold and Italic</s>
*wiki notices, e.g. when editing
*infobox icon selected: <code>div.infobox div.infobox-image > div.infobox-gallery img.selected</code>
*<s>preferences</s> and watchlist
*recent changes
*"more" dropdown (i.e. move, etc.)
*disabled textbox, dropdown, checkbox (e.g. protection window)
*add variables for reoccurring colors
*<s>change toc hidden button to be same as background & add hover color</s>
*<s>update [[Template:Sup]] colors</s>
*<s>toc link colors, needs to be the same as others</s>
====Vector-2022.css====
====Vector-2022.css====
<syntaxhighlight lang="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 */
    }
}
</syntaxhighlight>
===Final===
====Common.css====
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">


Latest revision as of 15:08, 31 March 2024

Notes for wiki dark theme

Things to remember

Values

  • font (body): #c1ccc1
  • font (heading): e3e1df
  • font (interface heading): b0a99f
  • font (interface selected): d3cfca
  • background (body): #1f1f1f
  • background (sidebar & vertical bar): #181818
  • border: 2b2b2b
  • wikitable border: 484e51
  • table row1: 1c1c1c
  • table row2: 212121
  • wikitable header: 2b2b2b


CSS

To-do

  • Edit
    • chevrons, e.g. before Advanced & after heading (use: /w/images/f/fb/Arrow-down.png)
    • search & replace widget in edit
    • edit widget top elements, e.g. .wikiEditor-ui-toolbar
    • heading dropdown
    • hover background-color, e.g. Bold and Italic
    • icons, e.g. Bold and Italic
  • wiki notices, e.g. when editing
  • infobox icon selected: div.infobox div.infobox-image > div.infobox-gallery img.selected
  • preferences and watchlist
  • recent changes
  • "more" dropdown (i.e. move, etc.)
  • disabled textbox, dropdown, checkbox (e.g. protection window)
  • add variables for reoccurring colors
  • change toc hidden button to be same as background & add hover color
  • update Template:Sup colors
  • toc link colors, needs to be the same as others

Vector-2022.css

No longer adding

/* 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=294587"