Templates Wiki
No edit summary
No edit summary
Line 1: Line 1:
  +
:root {
  +
--color-cc-primary: #404a57;
  +
--color-cc-primary-active: #6b7c92;
  +
--color-cc-primary-text: #3a3a3a;
  +
--color-cc-secondary: #3a3a3a;
  +
--color-cc-secondary-active: #6d6d6d;
  +
--color-cc-secondary-text: #6d6d6d;
  +
  +
--color-oasis-primary: #006cb0;
  +
--color-oasis-primary-active: #17a5ff;
  +
--color-oasis-secondary: #3a3a3a;
  +
--color-oasis-secondary-active: #6d6d6d;
  +
--color-oasis-text: #3a3a3a;
  +
--color-oasis-text-active: #6d6d6d;
  +
  +
--color-jade-primary: #25883d;
  +
--color-jade-primary-active: #46cd67;
  +
--color-jade-secondary: #3a3a3a;
  +
--color-jade-secondary-active: #6d6d6d;
  +
--color-jade-text: #3a3a3a;
  +
--color-jade-text-active: #6d6d6d;
  +
  +
--color-babygirl-primary: #6f027c;
  +
--color-babygirl-primary-active: #c904e0;
  +
--color-babygirl-secondary: #3a3a3a;
  +
--color-babygirl-secondary-active: #6d6d6d;
  +
--color-babygirl-text: #3a3a3a;
  +
--color-babygirl-text-active: #6d6d6d;
  +
  +
--color-carbon-primary: #012e59;
  +
--color-carbon-primary-active: #0262be;
  +
--color-carbon-secondary: #d5d4d4;
  +
--color-carbon-secondary-active: #a3a0a0;
  +
--color-carbon-text: #d5d4d4;
  +
--color-carbon-text-active: #a3a0a0;
  +
  +
--color-rockgarden-primary: #1f5d04;
  +
--color-rockgarden-primary-active: #40bf08;
  +
--color-rockgarden-secondary: #3a3a3a;
  +
--color-rockgarden-secondary-active: #6d6d6d;
  +
--color-rockgarden-text: #3a3a3a;
  +
--color-rockgarden-text-active: #6d6d6d;
  +
  +
--color-opulence-primary: #de1c4e;
  +
--color-opulence-primary-active: #ed7392;
  +
--color-opulence-secondary: #3a3a3a;
  +
--color-opulence-secondary-active: #6d6d6d;
  +
--color-opulence-text: #3a3a3a;
  +
--color-opulence-text-active: #6d6d6d;
  +
  +
--color-bluesteel-primary: #0a3073;
  +
--color-bluesteel-primary-active: #1257d1;
  +
--color-bluesteel-secondary: #3a3a3a;
  +
--color-bluesteel-secondary-active: #6d6d6d;
  +
--color-bluesteel-text: #3a3a3a;
  +
--color-bluesteel-text-active: #6d6d6d;
  +
  +
--color-creamsicle-primary: #fe7e03;
  +
--color-creamsicle-primary-active: #9a4c01;
  +
--color-creamsicle-secondary: #3a3a3a;
  +
--color-creamsicle-secondary-active: #6d6d6d;
  +
--color-creamsicle-text: #3a3a3a;
  +
--color-creamsicle-text-active: #6d6d6d;
  +
  +
--color-plated-primary: #092f71;
  +
--color-plated-primary-active: #1156cf;
  +
--color-plated-secondary: #d5d4d4;
  +
--color-plated-secondary-active: #a3a0a0;
  +
--color-plated-text: #d5d4d4;
  +
--color-plated-text-active: #a3a0a0;
  +
  +
--color-police-primary: #1a52ac;
  +
--color-police-primary-active: #4984e3;
  +
--color-police-secondary: #d5d4d4;
  +
--color-police-secondary-active: #a3a0a0;
  +
--color-police-text: #d5d4d4;
  +
--color-police-text-active: #a3a0a0;
  +
  +
--color-aliencrate-primary: #653f03;
  +
--color-aliencrate-primary-active: #c87d06;
  +
--color-aliencrate-secondary: #3a3a3a;
  +
--color-aliencrate-secondary-active: #6d6d6d;
  +
--color-aliencrate-text: #3a3a3a;
  +
--color-aliencrate-text-active: #6d6d6d;
  +
  +
--color-fandom-primary: #00cdd0;
  +
--color-fandom-primary-active: #00686a;
  +
--color-fandom-secondary: #5f7a7b;
  +
--color-fandom-secondary-active: #94abac;
  +
--color-fandom-secondary-light: #bed1cf;
  +
--color-fandom-secondary-light-active: #82a7a3;
  +
--color-fandom-text: #5f7a7b;
  +
--color-fandom-text-active: #9da5a5;
  +
--color-fandom-text-light: #bed1cf;
  +
--color-fandom-text-light-active: #82a7a3;
  +
  +
--color-primary-only-primary: #092344;
  +
--color-primary-only-primary-active: #15519e;
  +
--color-primary-only-secondary: #092344;
  +
--color-primary-only-secondary-active: #15519e;
  +
--color-primary-only-text: #092344;
  +
--color-primary-only-text-active: #15519e;
  +
  +
--color-different-secondary-primary: #656e78;
  +
--color-different-secondary-primary-active: #15519e;
  +
--color-different-secondary-secondary: #99a1aa;
  +
--color-different-secondary-secondary-active: #0ee2e8;
  +
--color-different-secondary-text: #088488;
  +
--color-different-secondary-text-active: #0ee2e8;
  +
}
  +
 
/* wds-button-community-central */
 
/* wds-button-community-central */
 
.wds-button.wds-is-cc-color {
 
.wds-button.wds-is-cc-color {
Line 47: Line 158:
 
}
 
}
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary) {
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary) {
background-color: #006cb0;
+
background-color: var(--color-oasis-primary);
 
}
 
}
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
Line 53: Line 164:
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):active,
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):active,
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
 
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
background-color: #17a5ff;
+
background-color: var(--color-oasis-primary-active);
border-color: #17a5ff;
+
border-color: var(--color-oasis-primary-active);
 
}
 
}
 
.wds-button.wds-is-oasis-color:not(.wds-is-text) {
 
.wds-button.wds-is-oasis-color:not(.wds-is-text) {
border-color: #006cb0;
+
border-color: var(--color-oasis-primary);
 
}
 
}
 
.wds-button.wds-is-oasis-color.wds-is-secondary{
 
.wds-button.wds-is-oasis-color.wds-is-secondary{
border-color: #3a3a3a;
+
border-color: var(--color-oasis-secondary);
color: #3a3a3a;
+
color: var(--color-oasis-secondary);
 
}
 
}
 
.wds-button.wds-is-oasis-color.wds-is-secondary:focus:not(:disabled),
 
.wds-button.wds-is-oasis-color.wds-is-secondary:focus:not(:disabled),
Line 67: Line 178:
 
.wds-button.wds-is-oasis-color.wds-is-secondary:active,
 
.wds-button.wds-is-oasis-color.wds-is-secondary:active,
 
.wds-button.wds-is-oasis-color.wds-is-secondary.wds-is-active {
 
.wds-button.wds-is-oasis-color.wds-is-secondary.wds-is-active {
border-color: #6d6d6d;
+
border-color: var(--color-oasis-secondary-active);
color: #6d6d6d;
+
color: var(--color-oasis-secondary-active);
 
}
 
}
 
.wds-button.wds-is-oasis-color.wds-is-text{
 
.wds-button.wds-is-oasis-color.wds-is-text{
color: #3a3a3a;
+
color: var(--color-oasis-primary-text);
 
}
 
}
 
.wds-button.wds-is-oasis-color.wds-is-text:focus:not(:disabled),
 
.wds-button.wds-is-oasis-color.wds-is-text:focus:not(:disabled),
Line 77: Line 188:
 
.wds-button.wds-is-oasis-color.wds-is-text:active,
 
.wds-button.wds-is-oasis-color.wds-is-text:active,
 
.wds-button.wds-is-oasis-color.wds-is-text.wds-is-active{
 
.wds-button.wds-is-oasis-color.wds-is-text.wds-is-active{
color: #6d6d6d;
+
color: var(--color-oasis-primary-text-active);
 
}
 
}
 
.wds-button.wds-is-oasis-color.wds-is-secondary {
 
.wds-button.wds-is-oasis-color.wds-is-secondary {

Revision as of 05:12, 21 April 2020

:root {
  --color-cc-primary: #404a57;
  --color-cc-primary-active: #6b7c92;
  --color-cc-primary-text: #3a3a3a;
  --color-cc-secondary: #3a3a3a;
  --color-cc-secondary-active: #6d6d6d;
  --color-cc-secondary-text: #6d6d6d;

  --color-oasis-primary: #006cb0;
  --color-oasis-primary-active: #17a5ff;
  --color-oasis-secondary: #3a3a3a;
  --color-oasis-secondary-active: #6d6d6d;
  --color-oasis-text: #3a3a3a;
  --color-oasis-text-active: #6d6d6d;

  --color-jade-primary: #25883d;
  --color-jade-primary-active: #46cd67;
  --color-jade-secondary: #3a3a3a;
  --color-jade-secondary-active: #6d6d6d;
  --color-jade-text: #3a3a3a;
  --color-jade-text-active: #6d6d6d;

  --color-babygirl-primary: #6f027c;
  --color-babygirl-primary-active: #c904e0;
  --color-babygirl-secondary: #3a3a3a;
  --color-babygirl-secondary-active: #6d6d6d;
  --color-babygirl-text: #3a3a3a;
  --color-babygirl-text-active: #6d6d6d;

  --color-carbon-primary: #012e59;
  --color-carbon-primary-active: #0262be;
  --color-carbon-secondary: #d5d4d4;
  --color-carbon-secondary-active: #a3a0a0;
  --color-carbon-text: #d5d4d4;
  --color-carbon-text-active: #a3a0a0;

  --color-rockgarden-primary: #1f5d04;
  --color-rockgarden-primary-active: #40bf08;
  --color-rockgarden-secondary: #3a3a3a;
  --color-rockgarden-secondary-active: #6d6d6d;
  --color-rockgarden-text: #3a3a3a;
  --color-rockgarden-text-active: #6d6d6d;

  --color-opulence-primary: #de1c4e;
  --color-opulence-primary-active: #ed7392;
  --color-opulence-secondary: #3a3a3a;
  --color-opulence-secondary-active: #6d6d6d;
  --color-opulence-text: #3a3a3a;
  --color-opulence-text-active: #6d6d6d;

  --color-bluesteel-primary: #0a3073;
  --color-bluesteel-primary-active: #1257d1;
  --color-bluesteel-secondary: #3a3a3a;
  --color-bluesteel-secondary-active: #6d6d6d;
  --color-bluesteel-text: #3a3a3a;
  --color-bluesteel-text-active: #6d6d6d;

  --color-creamsicle-primary: #fe7e03;
  --color-creamsicle-primary-active: #9a4c01;
  --color-creamsicle-secondary: #3a3a3a;
  --color-creamsicle-secondary-active: #6d6d6d;
  --color-creamsicle-text: #3a3a3a;
  --color-creamsicle-text-active: #6d6d6d;

  --color-plated-primary: #092f71;
  --color-plated-primary-active: #1156cf;
  --color-plated-secondary: #d5d4d4;
  --color-plated-secondary-active: #a3a0a0;
  --color-plated-text: #d5d4d4;
  --color-plated-text-active: #a3a0a0;

  --color-police-primary: #1a52ac;
  --color-police-primary-active: #4984e3;
  --color-police-secondary: #d5d4d4;
  --color-police-secondary-active: #a3a0a0;
  --color-police-text: #d5d4d4;
  --color-police-text-active: #a3a0a0;

  --color-aliencrate-primary: #653f03;
  --color-aliencrate-primary-active: #c87d06;
  --color-aliencrate-secondary: #3a3a3a;
  --color-aliencrate-secondary-active: #6d6d6d;
  --color-aliencrate-text: #3a3a3a;
  --color-aliencrate-text-active: #6d6d6d;

  --color-fandom-primary: #00cdd0;
  --color-fandom-primary-active: #00686a;
  --color-fandom-secondary: #5f7a7b;
  --color-fandom-secondary-active: #94abac;
  --color-fandom-secondary-light: #bed1cf;
  --color-fandom-secondary-light-active: #82a7a3;
  --color-fandom-text: #5f7a7b;
  --color-fandom-text-active: #9da5a5;
  --color-fandom-text-light: #bed1cf;
  --color-fandom-text-light-active: #82a7a3;

  --color-primary-only-primary: #092344;
  --color-primary-only-primary-active: #15519e;
  --color-primary-only-secondary: #092344;
  --color-primary-only-secondary-active: #15519e;
  --color-primary-only-text: #092344;
  --color-primary-only-text-active: #15519e;

  --color-different-secondary-primary: #656e78;
  --color-different-secondary-primary-active: #15519e;
  --color-different-secondary-secondary: #99a1aa;
  --color-different-secondary-secondary-active: #0ee2e8;
  --color-different-secondary-text: #088488;
  --color-different-secondary-text-active: #0ee2e8;
}

/* wds-button-community-central */
.wds-button.wds-is-cc-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #404a57;
}
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-cc-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #6b7c92;
    border-color: #6b7c92;
}
.wds-button.wds-is-cc-color:not(.wds-is-text) {
    border-color: #404a57;
}
.wds-button.wds-is-cc-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-cc-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-secondary:active,
.wds-button.wds-is-cc-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-cc-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-cc-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-cc-color.wds-is-text:active,
.wds-button.wds-is-cc-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-cc-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-oasis */
.wds-button.wds-is-oasis-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: var(--color-oasis-primary);
}
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-oasis-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: var(--color-oasis-primary-active);
    border-color: var(--color-oasis-primary-active);
}
.wds-button.wds-is-oasis-color:not(.wds-is-text) {
    border-color: var(--color-oasis-primary);
}
.wds-button.wds-is-oasis-color.wds-is-secondary{
    border-color: var(--color-oasis-secondary);
    color: var(--color-oasis-secondary);
}
.wds-button.wds-is-oasis-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-secondary:active,
.wds-button.wds-is-oasis-color.wds-is-secondary.wds-is-active {
    border-color: var(--color-oasis-secondary-active);
    color: var(--color-oasis-secondary-active);
}
.wds-button.wds-is-oasis-color.wds-is-text{
    color: var(--color-oasis-primary-text);
}
.wds-button.wds-is-oasis-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-oasis-color.wds-is-text:active,
.wds-button.wds-is-oasis-color.wds-is-text.wds-is-active{
    color: var(--color-oasis-primary-text-active);
}
.wds-button.wds-is-oasis-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-jade */
.wds-button.wds-is-jade-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #25883d;
}
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-jade-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #46cd67;
    border-color: #46cd67;
}
.wds-button.wds-is-jade-color:not(.wds-is-text) {
    border-color: #25883d;
}
.wds-button.wds-is-jade-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-jade-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-secondary:active,
.wds-button.wds-is-jade-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-jade-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-jade-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-jade-color.wds-is-text:active,
.wds-button.wds-is-jade-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-jade-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-babygirl */
.wds-button.wds-is-babygirl-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #6f027c;
}
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-babygirl-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #c904e0;
    border-color: #c904e0;
}
.wds-button.wds-is-babygirl-color:not(.wds-is-text) {
    border-color: #6f027c;
}
.wds-button.wds-is-babygirl-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-babygirl-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-secondary:active,
.wds-button.wds-is-babygirl-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-babygirl-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-babygirl-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-babygirl-color.wds-is-text:active,
.wds-button.wds-is-babygirl-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-babygirl-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-carbon */
.wds-button.wds-is-carbon-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #012e59;
}
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-carbon-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #0262be;
    border-color: #0262be;
}
.wds-button.wds-is-carbon-color:not(.wds-is-text) {
    border-color: #012e59;
}
.wds-button.wds-is-carbon-color.wds-is-secondary{
    border-color: #d5d4d4;
    color: #d5d4d4;
}
.wds-button.wds-is-carbon-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-secondary:active,
.wds-button.wds-is-carbon-color.wds-is-secondary.wds-is-active {
    border-color: #a3a0a0;
    color: #a3a0a0;
}
.wds-button.wds-is-carbon-color.wds-is-text{
    color: #d5d4d4;
}
.wds-button.wds-is-carbon-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-carbon-color.wds-is-text:active,
.wds-button.wds-is-carbon-color.wds-is-text.wds-is-active{
    color: #a3a0a0;
}
.wds-button.wds-is-carbon-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-rockgarden */
.wds-button.wds-is-rockgarden-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #1f5d04;
}
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-rockgarden-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #40bf08;
    border-color: #40bf08;
}
.wds-button.wds-is-rockgarden-color:not(.wds-is-text) {
    border-color: #1f5d04;
}
.wds-button.wds-is-rockgarden-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-rockgarden-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-secondary:active,
.wds-button.wds-is-rockgarden-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-rockgarden-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-rockgarden-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-rockgarden-color.wds-is-text:active,
.wds-button.wds-is-rockgarden-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-rockgarden-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-opulence */
.wds-button.wds-is-opulence-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #de1c4e;
}
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-opulence-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #ed7392;
    border-color: #ed7392;
}
.wds-button.wds-is-opulence-color:not(.wds-is-text) {
    border-color: #de1c4e;
}
.wds-button.wds-is-opulence-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-opulence-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-secondary:active,
.wds-button.wds-is-opulence-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-opulence-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-opulence-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-opulence-color.wds-is-text:active,
.wds-button.wds-is-opulence-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-opulence-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-bluesteel */
.wds-button.wds-is-bluesteel-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #0a3073;
}
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-bluesteel-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #1257d1;
    border-color: #1257d1;
}
.wds-button.wds-is-bluesteel-color:not(.wds-is-text) {
    border-color: #0a3073;
}
.wds-button.wds-is-bluesteel-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-bluesteel-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-secondary:active,
.wds-button.wds-is-bluesteel-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-bluesteel-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-bluesteel-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-bluesteel-color.wds-is-text:active,
.wds-button.wds-is-bluesteel-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-bluesteel-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-creamsicle */
.wds-button.wds-is-creamsicle-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #fe7e03;
}
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-creamsicle-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #9a4c01;
    border-color: #9a4c01;
}
.wds-button.wds-is-creamsicle-color:not(.wds-is-text) {
    border-color: #fe7e03;
}
.wds-button.wds-is-creamsicle -color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-creamsicle -color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-creamsicle -color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-creamsicle -color.wds-is-secondary:active,
.wds-button.wds-is-creamsicle -color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-creamsicle -color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-creamsicle -color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-creamsicle -color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-creamsicle -color.wds-is-text:active,
.wds-button.wds-is-creamsicle -color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-creamsicle -color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-plated */
.wds-button.wds-is-plated-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #092f71;
}
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-plated-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #1156cf;
    border-color: #1156cf;
}
.wds-button.wds-is-plated-color:not(.wds-is-text) {
    border-color: #092f71;
}
.wds-button.wds-is-plated-color.wds-is-secondary{
    border-color: #d5d4d4;
    color: #d5d4d4;
}
.wds-button.wds-is-plated-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-secondary:active,
.wds-button.wds-is-plated-color.wds-is-secondary.wds-is-active {
    border-color: #a3a0a0;
    color: #a3a0a0;
}
.wds-button.wds-is-plated-color.wds-is-text{
    color: #d5d4d4;
}
.wds-button.wds-is-plated-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-plated-color.wds-is-text:active,
.wds-button.wds-is-plated-color.wds-is-text.wds-is-active{
    color: #a3a0a0;
}

/* wds-button-police */
.wds-button.wds-is-police-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #1a52ac;
}
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-police-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #4984e3;
    border-color: #4984e3;
}
.wds-button.wds-is-police-color:not(.wds-is-text) {
    border-color: #1a52ac;
}
.wds-button.wds-is-police-color.wds-is-secondary{
    border-color: #d5d4d4;
    color: #d5d4d4;
}
.wds-button.wds-is-police-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-police-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-police-color.wds-is-secondary:active,
.wds-button.wds-is-police-color.wds-is-secondary.wds-is-active {
    border-color: #a3a0a0;
    color: #a3a0a0;
}
.wds-button.wds-is-police-color.wds-is-text{
    color: #d5d4d4;
}
.wds-button.wds-is-police-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-police-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-police-color.wds-is-text:active,
.wds-button.wds-is-police-color.wds-is-text.wds-is-active{
    color: #a3a0a0;
}
.wds-button.wds-is-police-color.wds-is-secondary {
    margin-left: 12px;
}

/* wds-button-aliencrate */
.wds-button.wds-is-aliencrate-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #653f03;
}
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-aliencrate-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #c87d06;
    border-color: #c87d06;
}
.wds-button.wds-is-aliencrate-color:not(.wds-is-text) {
    border-color: #653f03;
}
.wds-button.wds-is-aliencrate-color.wds-is-secondary{
    border-color: #3a3a3a;
    color: #3a3a3a;
}
.wds-button.wds-is-aliencrate-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-secondary:active,
.wds-button.wds-is-aliencrate-color.wds-is-secondary.wds-is-active {
    border-color: #6d6d6d;
    color: #6d6d6d;
}
.wds-button.wds-is-aliencrate-color.wds-is-text{
    color: #3a3a3a;
}
.wds-button.wds-is-aliencrate-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-aliencrate-color.wds-is-text:active,
.wds-button.wds-is-aliencrate-color.wds-is-text.wds-is-active{
    color: #6d6d6d;
}
.wds-button.wds-is-aliencrate-color.wds-is-secondary {
    margin-left: 12px;
}


/* wds-button-fandom */
.wds-button.wds-is-fandom-color {
    color: #fff;
    background: none;
}
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: #00cdd0;
}
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-fandom-color:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #00686a;
    border-color: #00686a;
}
.wds-button.wds-is-fandom-color:not(.wds-is-text) {
    border-color: #00cdd0;
}
.wds-button.wds-is-fandom-color.wds-is-secondary{
    border-color: #5f7a7b;
    color: #5f7a7b;
}
.wds-button.wds-is-fandom-color.wds-is-secondary:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary:active,
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-active {
    border-color: #94abac;
    color: #94abac;
}
.wds-button.wds-is-fandom-color.wds-is-text{
    color: #5f7a7b;
}
.wds-button.wds-is-fandom-color.wds-is-text:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text:active,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-active{
    color: #9da5a5;
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-light {
    color: #bed1cf;
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-light:not(.wds-is-text):not(.wds-is-secondary) {

    background-color: #bed1cf;
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: #82a7a3;
    border-color: #82a7a3;
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:not(.wds-is-text),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-light:not(.wds-is-text) {
    border-color: #bed1cf;
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light {
    border-color: #bed1cf;
    color: #bed1cf;
}
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light:active,
.wds-button.wds-is-fandom-color.wds-is-secondary.wds-is-light.wds-is-active,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light:focus:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light:hover:not(:disabled),
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light:active,
.wds-button.wds-is-fandom-color.wds-is-text.wds-is-secondary.wds-is-light.wds-is-active {
    border-color: #82a7a3;
    color: #82a7a3;
}


/* wds-button.primary-only */
.wds-button.primary-only:not(.wds-is-light) {
    color: #fff;
    background: none;
}
.wds-button.primary-only:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light) {
    background-color: #092344;
}
.wds-button.primary-only:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light):focus:not(:disabled),
.wds-button.primary-only:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light):hover:not(:disabled),
.wds-button.primary-only:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light):active,
.wds-button.primary-only:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light).wds-is-active {
    background-color: #15519e;
    border-color: #15519e;
}
.wds-button.primary-only:not(.wds-is-text):not(.wds-is-light) {
    border-color: #092344;
}
.wds-button.primary-only.wds-is-secondary:not(.wds-is-light) {
    border-color: #092344;
    color: #092344;
}
.wds-button.primary-only.wds-is-secondary:not(.wds-is-light):focus:not(:disabled),
.wds-button.primary-only.wds-is-secondary:not(.wds-is-light):hover:not(:disabled),
.wds-button.primary-only.wds-is-secondary:not(.wds-is-light):active,
.wds-button.primary-only.wds-is-secondary:not(.wds-is-light).wds-is-active {
    border-color: #15519e;
    color: #15519e;
}
.wds-button.primary-only.wds-is-text:not(.wds-is-light) {
    color: #092344;
}
.wds-button.primary-only.wds-is-text:not(.wds-is-light):focus:not(:disabled),
.wds-button.primary-only.wds-is-text:not(.wds-is-light):hover:not(:disabled),
.wds-button.primary-only.wds-is-text:not(.wds-is-light):active,
.wds-button.primary-only.wds-is-text:not(.wds-is-light).wds-is-active {
    border-color: #15519e;
    color: #15519e;
}
.wds-button.primary-only.wds-is-secondary:not(.wds-is-light) {
    margin-left: 12px;
}

/* wds-button.different-secondary */
.wds-button.different-secondary:not(.wds-is-light) {
    color: #fff;
    background: none;
}
.wds-button.different-secondary:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light) {
    background-color: #656e78;
}
.wds-button.different-secondary:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light):focus:not(:disabled),
.wds-button.different-secondary:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light):hover:not(:disabled),
.wds-button.different-secondary:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light):active,
.wds-button.different-secondary:not(.wds-is-text):not(.wds-is-secondary):not(.wds-is-light).wds-is-active {
    background-color: #99a1aa;
    border-color: #99a1aa;
}
.wds-button.different-secondary:not(.wds-is-text):not(.wds-is-light) {
    border-color: #656e78;
}
.wds-button.different-secondary.wds-is-secondary:not(.wds-is-light){
    border-color: #088488;
    color: #088488;
}
.wds-button.different-secondary.wds-is-secondary:not(.wds-is-light):focus:not(:disabled),
.wds-button.different-secondary.wds-is-secondary:not(.wds-is-light):hover:not(:disabled),
.wds-button.different-secondary.wds-is-secondary:not(.wds-is-light):active,
.wds-button.different-secondary.wds-is-secondary:not(.wds-is-light).wds-is-active {
    border-color: #0ee2e8;
    color: #0ee2e8;
}
.wds-button.different-secondary.wds-is-text:not(.wds-is-light) {
    color: #088488;
}
.wds-button.different-secondary.wds-is-text:not(.wds-is-light):focus:not(:disabled),
.wds-button.different-secondary.wds-is-text:not(.wds-is-light):hover:not(:disabled),
.wds-button.different-secondary.wds-is-text:not(.wds-is-light):active,
.wds-button.different-secondary.wds-is-text:not(.wds-is-light).wds-is-active{
    border-color: #0ee2e8;
    color: #0ee2e8;
}
.wds-button.different-secondary.wds-is-secondary:not(.wds-is-light) {
    margin-left: 12px;
}