Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
* TABLE OF CONTENTS
* Buttons
* Sticky Note
* Alternative Table
* Condensed Poll
* Forum Board
* Helper Classes
* Miscellanous/Other
*/
.wds-button .mw-selflink span {
border-bottom-color: var(--theme-link-color) !important;
transition-duration: 0.3s;
transition-property: border-bottom-color;
}
.wds-button:hover .mw-selflink span {
border-bottom-color: var(--theme-link-color--hover) !important;
}
/*
* Buttons *
*/
/* left half of edit button */
#ca-edit {
transition: border-radius 0.1s ease-in-out;
}
#ca-edit:hover {
border-radius: 10px 0 0 10px;
}
.wds-dropdown svg {
transition: transform 0.2s ease-in-out;
}
/*------------------------------------*\
#OBJECTS
\*------------------------------------*/
/**
* FLEX-WRAPPER
* Easy wrapping flexbox
*/
.o-flexWrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.o-flexWrapper:hover a {
text-decoration: unset;
}
/**
* ANIMATE
* adds inline support for css animations
*/
.animate {
z-index: var(--anim-z-index);
position: var(--anim-position);
visibility: var(--anim-visibility);
border-width: var(--anim-border-width);
border-style: var(--anim-border-style);
border-color: var(--anim-border-color);
background-image: var(--anim-background-image);
background-position: var(--anim-background-position);
background-size: var(--anim-background-size);
background-color: var(--anim-background-color);
color: var(--anim-color);
transform: var(--anim-transform);
filter: var(--anim-filter_);
}
.o-animation:hover {
animation: var(--anim-hover);
animation-name: var(--anim-hover-name);
animation-duration: var(--anim-hover-duration);
animation-iteration-count: var(--anim-hover-iteration-count);
}
@keyframes animate {
0% {
transform: var(--anim-transform-0);
}
20% {
transform: var(--anim-transform-2);
}
40% {
transform: var(--anim-transform-4);
}
60% {
transform: var(--anim-transform-6);
}
80% {
transform: var(--anim-transform-8);
}
100% {
transform: var(--anim-transform-10);
}
}
/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/
/**
* $linkBox
* Sets up a box for the homepage, intended for use with links
*/
.c-homePageItem__linkBox {
align-items: center;
padding: 0 1.4em;
height: 50px;
border-radius: 3px;
background-color: #690001;
font-family: rubik, sans-serif;
font-size: 14px;
line-height: 1;
color: #fff;
}
/* "grey out" colors whe hovering over the link box */
.c-homePageItem__linkBox:hover {
color: rgba(255, 255, 255, 0.8);
}
/* base styles for icons in the link box */
.c-homePageItem__linkItem--icon {
width: 1.5em;
height: 1.5em;
mask-image: var(--mask-image-url);
background-color: currentColor;
}
.c-homePageItem__linkItem--iconChat {
--mask-image-url: url(/resources-ucp/dist/svg/wds-icons-bubble.svg);
}
.c-homePageItem__linkItem--iconQuestion {
--mask-image-url: url(/resources-ucp/dist/svg/wds-icons-question.svg);
}
.c-homePageItem__linkItem--iconPlus {
--mask-image-url: url(/resources-ucp/dist/svg/wds-icons-add.svg);
}
/* Shove the title over slightly, bold text */
.c-homePageItem__linkItem--title {
margin-left: 0.5em;
font-weight: bolder;
}
/* A bar seperator that goes inbetween text */
.c-homePageItem__linkItem--seperator {
margin: 0 1em;
width: 2px;
height: 1.4em;
background-color: currentColor;
}
/* decrease font-weight of the description */
.c-homePageItem__linkItem--description {
font-weight: lighter;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
/**
* $Code Snippet
* Provides styling for code snippets.
*/
.code,
.u-code {
border: 1px solid #ccc;
padding: 1px 4px;
background-color: #f2f2f2;
font-family: monospace;
}
/**
* $Inherit Color
* Removes link color
*/
.u-no-a a {
color: currentColor;
}
/**
* $Emojify Text
* Forces the use of a color emoji font over black-and-white unicode fonts.
* Blame Fear for the name
*/
.u-thonk {
font-family: apple color emoji, segoe ui emoji, noto color emoji,
android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
segoe ui symbol;
}
/* fluid image concept */
.fluid-image img {
max-width: 100%;
height: auto;
}
.soundcloud-player {
vertical-align: middle;
}
.border-box,
.border-box * {
box-sizing: border-box;
}