[3.3.x] Styles Support & Discussion • #variant_switch button:active

Code:

#variant_switch button:active {css}

Code:

{% if S_USER_LOGGED_IN and not S_IS_BOT %}         <li class="rightside" data-skip-responsive="true"> <div class="dropdown-container">    <a href="#" class="dropdown-trigger" role="menuitem" title="kleurenpallet">   <i class="icon fa-paint-brush fa-fw" aria-hidden="true"></i>    </a><div class="dropdown"><div class="pointer"><div class="pointer-inner"></div></div><div class="dropdown-contents" role="menu">  <div id="variant_switch" class="navbar-header" role="contentinfo">                    <button id="html_default"     title=" default"></button>                    <button id="html_Crimson"             title=" Crimson"></button>                    <button id="html_PaleVioletRed"     title=" PaleVioletRed"></button>                    <button id="html_MediumOrchid"     title=" MediumOrchid"></button>                    <button id="html_BlueViolet" title=" BlueViolet"></button>                    <button id="html_SlateBlue"             title=" SlateBlue"></button>                    <button id="html_RoyalBlue"     title=" RoyalBlue"></button>                    <button id="html_DodgerBlue"         title=" DodgerBlue"></button>                    <button id="html_DarkTurquoise" title=" DarkTurquoise"></button>                    <button id="html_DarkCyan" title="DarkCyan"></button>                    <button id="html_LimeGreen" title="LimeGreen"></button>                    <button id="html_YellowGreen"             title="YellowGreen"></button>                    <button id="html_Gold"     title=" Gold"></button>                    <button id="html_Orange"     title=" Orange"></button>                    <button id="html_Coral"         title="Coral"></button>                    <button id="html_Gray" title=" Gray"></button></div></div></div></div></li>    {% endif %}

Code:

<script>if (localStorage.getItem('prosilver')){document.head.parentNode.className=""+localStorage.getItem('prosilver')+"";}</script>

Code:

/* -------  Colour change buttons. ------- */#variant_switch {    display: grid;    grid-template-columns: repeat(5, 1fr);}#variant_switch button {display: inline-block;width: 20px;height: 20px;margin: 0.5em;border: 0;border-radius: 3px;}#variant_switch button:hover, #variant_switch button:focus {opacity: 0.5;}#html_default {background: #105289;}#html_Crimson {background: Crimson;}#html_PaleVioletRed {background: PaleVioletRed;}#html_MediumOrchid {background: MediumOrchid;}#html_BlueViolet{background: BlueViolet;}#html_SlateBlue {background: SlateBlue;}#html_RoyalBlue {background: RoyalBlue;}#html_DodgerBlue {background: DodgerBlue;}#html_DarkTurquoise {background: DarkTurquoise;}#html_DarkCyan {background: DarkCyan;}#html_LimeGreen{background: LimeGreen;}#html_YellowGreen {background: YellowGreen;}#html_Gold {background: Gold;}#html_Orange {background: Orange;}#html_Coral {background: Coral;}#html_Gray{background: Gray;}.html_default .button-secondary:focus, .html_default .button-secondary:hover, .html_default .button:focus .icon, .html_default .button:hover .icon {color: default;}.html_Crimson .button-secondary:focus, .html_Crimson .button-secondary:hover, .html_Crimson .button:focus .icon, .html_Crimson .button:hover .icon {color: Crimson;}.html_PaleVioletRed .button-secondary:focus, .html_PaleVioletRed .button-secondary:hover, .html_PaleVioletRed .button:focus .icon, .html_PaleVioletRed .button:hover .icon {color: PaleVioletRed;}.html_MediumOrchid .button-secondary:focus, .html_MediumOrchid .button-secondary:hover, .html_MediumOrchid .button:focus .icon, .html_MediumOrchid .button:hover .icon {color: MediumOrchid;}.html_BlueViolet .button-secondary:focus, .html_BlueViolet .button-secondary:hover, .html_BlueViolet .button:focus .icon, .html_BlueViolet .button:hover .icon {color: BlueViolet;}.html_SlateBlue .button-secondary:focus, .html_SlateBlue .button-secondary:hover, .html_SlateBlue .button:focus .icon, .html_SlateBlue .button:hover .icon {color: SlateBlue;}.html_RoyalBlue .button-secondary:focus, .html_RoyalBlue .button-secondary:hover, .html_RoyalBlue .button:focus .icon, .html_RoyalBlue .button:hover .icon {color: RoyalBlue;}.html_DodgerBlue .button-secondary:focus, .html_DodgerBlue .button-secondary:hover, .html_DodgerBlue .button:focus .icon, .html_DodgerBlue .button:hover .icon {color: DodgerBlue;}.html_DarkTurquoise .button-secondary:focus, .html_DarkTurquoise .button-secondary:hover, .html_DarkTurquoise .button:focus .icon, .html_DarkTurquoise .button:hover .icon {color: DarkTurquoise;}.html_DarkCyan .button-secondary:focus, .html_DarkCyan .button-secondary:hover, .html_DarkCyan .button:focus .icon, .html_DarkCyan .button:hover .icon {color: DarkCyan;}.html_LimeGreen .button-secondary:focus, .html_LimeGreen .button-secondary:hover, .html_LimeGreen .button:focus .icon, .html_LimeGreen .button:hover .icon {color: LimeGreen;}.html_YellowGreen .button-secondary:focus, .html_YellowGreen .button-secondary:hover, .html_YellowGreen .button:focus .icon, .html_YellowGreen .button:hover .icon {color: YellowGreen;}.html_Gold .button-secondary:focus, .html_Gold .button-secondary:hover, .html_Gold .button:focus .icon, .html_Gold .button:hover .icon {color: Gold;}.html_Orange .button-secondary:focus, .html_Orange .button-secondary:hover, .html_Orange .button:focus .icon, .html_Orange .button:hover .icon {color: Orange;}.html_Coral .button-secondary:focus, .html_Coral .button-secondary:hover, .html_Coral .button:focus .icon, .html_Coral .button:hover .icon {color: Coral;}.html_Gray .button-secondary:focus, .html_Gray .button-secondary:hover, .html_Gray .button:focus .icon, .html_Gray .button:hover .icon {color: Gray;}.html_default a.button1, .html_default a.button2, .html_default input.button1, .html_default input.button2, .html_default input.button3 {color: default;}.html_Crimson a.button1, .html_Crimson a.button2, .html_Crimson input.button1, .html_Crimson input.button2, .html_Crimson input.button3 {color: Crimson;}.html_PaleVioletRed a.button1, .html_PaleVioletRed a.button2, .html_PaleVioletRed input.button1, .html_PaleVioletRed input.button2, .html_PaleVioletRed input.button3 {color: PaleVioletRed;}.html_MediumOrchid a.button1, .html_MediumOrchid a.button2, .html_MediumOrchid input.button1, .html_MediumOrchid input.button2, .html_MediumOrchid input.button3 {color: MediumOrchid;}.html_BlueViolet a.button1, .html_BlueViolet a.button2, .html_BlueViolet input.button1, .html_BlueViolet input.button2, .html_BlueViolet input.button3 {color: BlueViolet;}.html_SlateBlue a.button1, .html_SlateBlue a.button2, .html_SlateBlue input.button1, .html_SlateBlue input.button2, .html_SlateBlue input.button3 {color: SlateBlue;}.html_RoyalBlue a.button1, .html_RoyalBlue a.button2, .html_RoyalBlue input.button1, .html_RoyalBlue input.button2, .html_RoyalBlue input.button3 {color: RoyalBlue;}.html_DodgerBlue a.button1, .html_DodgerBlue  a.button2, .html_DodgerBlue  input.button1, .html_DodgerBlue  input.button2, .html_DodgerBlue input.button3 {color: DodgerBlue;}.html_DarkTurquoise a.button1, .html_DarkTurquoise a.button2, .html_DarkTurquoise input.button1, .html_DarkTurquoise input.button2, .html_DarkTurquoise input.button3 {color: DarkTurquoise;}.html_DarkCyan a.button1, .html_DarkCyan a.button2, .html_DarkCyan input.button1, .html_DarkCyan input.button2, .html_DarkCyan input.button3 {color: DarkCyan;}.html_LimeGreen a.button1, .html_LimeGreen a.button2, .html_LimeGreen input.button1, .html_LimeGreen input.button2, .html_LimeGreen input.button3 {color: LimeGreen;}.html_YellowGreen a.button1, .html_YellowGreen a.button2, .html_YellowGreen input.button1, .html_YellowGreen input.button2, .html_YellowGreen input.button3 {color: YellowGreen;}.html_Gold a.button1, .html_Gold a.button2, .html_Gold input.button1, .html_Gold input.button2, .html_Gold input.button3 {color: Gold;}.html_Orange a.button1, .html_Orange a.button2, .html_Orange input.button1, .html_Orange input.button2, .html_Orange input.button3 {color: Orange;}.html_Coral a.button1, .html_Coral  a.button2, .html_Coral  input.button1, .html_Coral  input.button2, .html_Coral input.button3 {color: Coral;}.html_Gray a.button1, .html_Gray  a.button2, .html_Gray  input.button1, .html_Gray  input.button2, .html_Gray input.button3 {color: Gray;}.html_default a {color: default;}.html_Crimson a {color: Crimson;}.html_PaleVioletRed  a {color: PaleVioletRed;}.html_MediumOrchid a {color: MediumOrchid;}.html_BlueViolet a {color: BlueViolet;}.html_SlateBlue a {color: SlateBlue;}.html_RoyalBlue a {color: RoyalBlue;}.html_DodgerBlue a {color: DodgerBlue;}.html_DarkTurquoise a {color: DarkTurquoise;}.html_DarkCyan a {color: DarkCyan;}.html_LimeGreen a {color: LimeGreen;}.html_YellowGreen a {color: YellowGreen;}.html_Gold a {color: Gold;}.html_Orange a {color: Orange;}.html_Coral a {color: Coral;}.html_Gray a {color: Gray;}.html_default a.button1, a.button2, input.button1, input.button2, input.button3 {color: default;}.html_Crimson a.button1, a.button2, input.button1, input.button2, input.button3 {color: Crimson;}.html_PaleVioletRed a.button1, a.button2, input.button1, input.button2, input.button3 {color: PaleVioletRed;}.html_MediumOrchid a.button1, a.button2, input.button1, input.button2, input.button3 {color: MediumOrchid;}.html_BlueViolet a.button1, a.button2, input.button1, input.button2, input.button3 {color: BlueViolet;}.html_SlateBlue a.button1, a.button2, input.button1, input.button2, input.button3 {color: SlateBlue;}.html_RoyalBlue a.button1, a.button2, input.button1, input.button2, input.button3 {color: RoyalBlue;}.html_DodgerBlue a.button1, a.button2, input.button1, input.button2, input.button3 {color: DodgerBlue;}.html_DarkTurquoise a.button1, a.button2, input.button1, input.button2, input.button3 {color: DarkTurquoise;}.html_DarkCyan a.button1, a.button2, input.button1, input.button2, input.button3 {color: DarkCyan;}.html_LimeGreen a.button1, a.button2, input.button1, input.button2, input.button3 {color: LimeGreen;}.html_YellowGreen a.button1, a.button2, input.button1, input.button2, input.button3 {color: YellowGreen;}.html_Gold a.button1, a.button2, input.button1, input.button2, input.button3 {color: Gold;}.html_Orange a.button1, a.button2, input.button1, input.button2, input.button3 {color: Orange;}.html_Coral a.button1, a.button2, input.button1, input.button2, input.button3 {color: Coral;}.html_Gray a.button1, a.button2, input.button1, input.button2, input.button3 {color: Gray;}.html_default .pagination li.active span {color: default;}.html_Crimson .pagination li.active span {color: Crimson;}.html_PaleVioletRed .pagination li.active span {color: PaleVioletRed;}.html_MediumOrchid .pagination li.active span {color: MediumOrchid;}.html_BlueViolet .pagination li.active span {color: BlueViolet;}.html_SlateBlue .pagination li.active span {color: SlateBlue;}.html_RoyalBlue .pagination li.active span {color: RoyalBlue;}.html_DodgerBlue .pagination li.active span {color: DodgerBlue;}.html_DarkTurquoise .pagination li.active span {color: DarkTurquoise;}.html_DarkCyan .pagination li.active span {color: DarkCyan;}.html_LimeGreen .pagination li.active span {color: LimeGreen;}.html_YellowGreen .pagination li.active span {color: YellowGreen;}.html_Gold .pagination li.active span {color: Gold;}.html_Orange .pagination li.active span {color: Orange;}.html_Coral .pagination li.active span {color: Coral;}.html_Gray .pagination li.active span {color: Gray;}.html_default .tabs .activetab>a, .tabs .activetab>a:hover {color: default;}.html_Crimson .tabs .activetab>a, .tabs .activetab>a:hover {color: Crimson;}.html_PaleVioletRed .tabs .activetab>a, .tabs .activetab>a:hover {color: PaleVioletRed;}.html_MediumOrchid .tabs .activetab>a, .tabs .activetab>a:hover {color: MediumOrchid;}.html_BlueViolet .tabs .activetab>a, .tabs .activetab>a:hover {color: BlueViolet;}.html_SlateBlue .tabs .activetab>a, .tabs .activetab>a:hover {color: SlateBlue;}.html_RoyalBlue .tabs .activetab>a, .tabs .activetab>a:hover {color: RoyalBlue;}.html_DodgerBlue .tabs .activetab>a, .tabs .activetab>a:hover {color: DodgerBlue;}.html_DarkTurquoise .tabs .activetab>a, .tabs .activetab>a:hover {color: DarkTurquoise;}.html_DarkCyan .tabs .activetab>a, .tabs .activetab>a:hover {color: DarkCyan;}.html_LimeGreen .tabs .activetab>a, .tabs .activetab>a:hover {color: LimeGreen;}.html_YellowGreen .tabs .activetab>a, .tabs .activetab>a:hover {color: YellowGreen;}.html_Gold .tabs .activetab>a, .tabs .activetab>a:hover {color: Gold;}.html_Orange .tabs .activetab>a, .tabs .activetab>a:hover {color: Orange;}.html_Coral .tabs .activetab>a, .tabs .activetab>a:hover {color: Coral;}.html_Gray .tabs .activetab>a, .tabs .activetab>a:hover {color: Gray;}.html_default .quick-icon .qi-line {border-top: 2px solid default;}.html_Crimson .quick-icon .qi-line {border-top: 2px solid Crimson;}.html_PaleVioletRed .quick-icon .qi-line {border-top: 2px solid PaleVioletRed;}.html_MediumOrchid .quick-icon .qi-line {border-top: 2px solid MediumOrchid;}.html_BlueViolet .quick-icon .qi-line {border-top: 2px solid BlueViolet;}.html_SlateBlue .quick-icon .qi-line {border-top: 2px solid SlateBlue;}.html_RoyalBlue .quick-icon .qi-line {border-top: 2px solid RoyalBlue;}.html_DodgerBlue .quick-icon .qi-line {border-top: 2px solid DodgerBlue;}.html_DarkTurquoise .quick-icon .qi-line {border-top: 2px solid DarkTurquoise;}.html_DarkCyan .quick-icon .qi-line {border-top: 2px solid DarkCyan;}.html_LimeGreen .quick-icon .qi-line {border-top: 2px solid LimeGreen;}.html_YellowGreen .quick-icon .qi-line {border-top: 2px solid YellowGreen;}.html_Gold .quick-icon .qi-line {border-top: 2px solid Gold;}.html_Orange .quick-icon .qi-line {border-top: 2px solid Orange;}.html_Coral .quick-icon .qi-line {border-top: 2px solid Coral;}.html_Gray .quick-icon .qi-line {border-top: 2px solid Gray;}.html_default .badge-messages {background-color: default;}.html_Crimson .badge-messages {background-color: Crimson;}.html_PaleVioletRed .badge-messages {background-color: PaleVioletRed;}.html_MediumOrchid .badge-messages {background-color: MediumOrchid;}.html_BlueViolet .badge-messages {background-color: BlueViolet;}.html_SlateBlue .badge-messages {background-color: SlateBlue;}.html_RoyalBlue .badge-messages {background-color: RoyalBlue;}.html_DodgerBlue .badge-messages {background-color: DodgerBlue;}.html_DarkTurquoise .badge-messages {background-color: DarkTurquoise;}.html_DarkCyan .badge-messages {background-color: DarkCyan;}.html_LimeGreen .badge-messages {background-color: LimeGreen;}.html_YellowGreen .badge-messages {background-color: YellowGreen;}.html_Gold .badge-messages {background-color: Gold;}.html_Orange .badge-messages {background-color: Orange;}.html_Coral .badge-messages {background-color: Coral;}.html_Gray .badge-messages {background-color: Gray;}