2249 lines
62 KiB
CSS
2249 lines
62 KiB
CSS
|
:root {
|
||
|
|
/* DEFAULT HUE */
|
||
|
|
/* --hue: 240deg; */
|
||
|
|
/* AVOCADO HUE */
|
||
|
|
/* --hue: 90deg; */
|
||
|
|
/* CURRENT HUE */
|
||
|
|
--hue: 90deg;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-panel a.column-link.column-link--logo:after {
|
||
|
|
content: "🫐";
|
||
|
|
font-size: 14px;
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 3px;
|
||
|
|
opacity: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar .logo {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 260deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
/* background: #191b22; */
|
||
|
|
/* background: hsl(227, 15%, 12%); */
|
||
|
|
background: hsl(var(--hue), 15%, 12%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs-bar__wrapper {
|
||
|
|
/* background: #17191f; */
|
||
|
|
/* background: hsl(225, 15%, 11%); */
|
||
|
|
background: hsl(var(--hue), 15%, 11%);
|
||
|
|
}
|
||
|
|
|
||
|
|
body.admin {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar-wrapper__inner {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar ul ul {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-panel hr,
|
||
|
|
.navigation-panel hr {
|
||
|
|
/* border-color: #313543; */
|
||
|
|
/* border-color: hsl(227, 16%, 23%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.getting-started__trends h4 {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusable:focus {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detailed-status {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detailed-status__action-bar {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* border-top-color: #393f4f; */
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
/* border-top-color: hsl(224, 16%, 27%); */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
border-top-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detailed-status__meta {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detailed-status__display-name {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header > .column-header__back-button {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button,
|
||
|
|
.button.logo-button,
|
||
|
|
.simple_form .block-button,
|
||
|
|
.simple_form .button,
|
||
|
|
.simple_form button {
|
||
|
|
/* background-color: #595aff; */
|
||
|
|
/* background-color: hsl(240, 100%, 67%); */
|
||
|
|
/* background-color: hsl(var(--hue), 100%, 67%); */
|
||
|
|
/* Manually changed for readibility */
|
||
|
|
background-color: hsl(var(--hue), 60%, 47%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:active,
|
||
|
|
.button:hover,
|
||
|
|
.button:focus,
|
||
|
|
.button.logo-button:active,
|
||
|
|
.button.logo-button:focus,
|
||
|
|
.button.logo-button:hover,
|
||
|
|
.simple_form .block-button:active,
|
||
|
|
.simple_form .block-button:focus,
|
||
|
|
.simple_form .block-button:hover,
|
||
|
|
.simple_form .button:active,
|
||
|
|
.simple_form .button:focus,
|
||
|
|
.simple_form .button:hover,
|
||
|
|
.simple_form button:active,
|
||
|
|
.simple_form button:focus,
|
||
|
|
.simple_form button:hover {
|
||
|
|
/* background-color: #6364ff; */
|
||
|
|
/* background-color: hsl(240, 100%, 69%); */
|
||
|
|
/* background-color: hsl(var(--hue), 100%, 69%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 60%, 69%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.disabled,
|
||
|
|
.button:disabled {
|
||
|
|
/* background-color: #9baec8; */
|
||
|
|
/* background-color: hsl(215, 29%, 70%); */
|
||
|
|
background-color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__input {
|
||
|
|
/* border-color: #9baec8; */
|
||
|
|
/* border-color: hsl(215, 29%, 70%); */
|
||
|
|
border-color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__option input[type="text"] {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__option input[type="text"]:focus {
|
||
|
|
/* border-color: #8c8dff; */
|
||
|
|
/* border-color: hsl(239, 100%, 77%); */
|
||
|
|
/* border-color: hsl(var(--hue), 100%, 77%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
border-color: hsl(var(--hue), 70%, 47%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form__poll-wrapper .button.button-secondary {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* border-color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
/* border-color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
border-color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button.inverted.active {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
/* color: hsl(var(--hue), 100%, 77%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
color: hsl(var(--hue), 70%, 47%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-dropdown.active .privacy-dropdown__value.active {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
/* background: hsl(var(--hue), 100%, 69%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 70%, 39%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-dropdown__option.active,
|
||
|
|
.privacy-dropdown__option:hover {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
/* background: hsl(var(--hue), 100%, 69%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 70%, 39%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.privacy-dropdown__option.active:hover {
|
||
|
|
/* background: #7778ff; */
|
||
|
|
/* background: hsl(240, 100%, 73%); */
|
||
|
|
/* background: hsl(var(--hue), 100%, 73%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 70%, 43%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-icon-button {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-icon-button.active {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-dropdown__dropdown__results__item.active {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
background: hsl(var(--hue), 100%, 69%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-dropdown__dropdown__results__item.active:hover {
|
||
|
|
/* background: #7778ff; */
|
||
|
|
/* background: hsl(240, 100%, 73%); */
|
||
|
|
background: hsl(var(--hue), 100%, 73%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-dropdown__dropdown__results__item {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-dropdown__dropdown__results__item__common-name {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-anchor-selected {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
/* color: hsl(var(--hue), 100%, 77%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
color: hsl(var(--hue), 80%, 37%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-anchor-selected:hover {
|
||
|
|
/* color: #7778ff; */
|
||
|
|
/* color: hsl(240, 100%, 73%); */
|
||
|
|
/* color: hsl(var(--hue), 100%, 73%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
color: hsl(var(--hue), 80%, 33%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-anchors {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-bar {
|
||
|
|
/* border-color: #c0cdd9; */
|
||
|
|
/* border-color: hsl(209, 25%, 80%); */
|
||
|
|
border-color: hsl(var(--hue), 25%, 80%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-bar:first-child {
|
||
|
|
/* background: #d9e1e8; */
|
||
|
|
/* background: hsl(208, 25%, 88%); */
|
||
|
|
background: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-anchor-bar {
|
||
|
|
/* background-color: #8c8dff; */
|
||
|
|
/* background-color: hsl(239, 100%, 77%); */
|
||
|
|
/* background-color: hsl(var(--hue), 100%, 77%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background-color: hsl(var(--hue), 80%, 37%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-search input {
|
||
|
|
/* background: rgba(217,225,232,.3); */
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* border-color: #d9e1e8; */
|
||
|
|
/* background: hsla(208, 25%, 88%, .3); */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
/* border-color: hsl(208, 25%, 88%); */
|
||
|
|
background: hsla(var(--hue), 25%, 88%, .3);
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
border-color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji-mart-category .emoji-mart-emoji:hover::before {
|
||
|
|
/* background-color: rgba(217,225,232,.7); */
|
||
|
|
/* background-color: hsla(208, 25%, 88%, .7); */
|
||
|
|
background-color: hsla(var(--hue), 25%, 88%, .7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dismissable-banner {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* border-bottom: 1px solid #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
/* border-bottom: 1px solid hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-column-indicator,
|
||
|
|
.follow_requests-unlocked_explanation {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__back-button {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-inline-form {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-link--transparent.active {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-with-badge__badge {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
/* background: hsl(var(--hue), 100%, 69%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 80%, 39%);
|
||
|
|
}
|
||
|
|
|
||
|
|
#logo-symbol-wordmark > path:first-of-type {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 260deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header.active .column-header__icon {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* text-shadow: 0 0 10px rgba(140,141,255,.4); */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
/* text-shadow: 0 0 10px hsla(239, 100%, 77%, .4); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
text-shadow: 0 0 10px hsla(var(--hue), 100%, 77%, .4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.load-more {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.trends__item__sparkline path:first-child {
|
||
|
|
/* fill: rgba(140,141,255,.25) !important; */
|
||
|
|
/* fill: hsla(239, 100%, 77%, .25) !important; */
|
||
|
|
fill: hsla(var(--hue), 100%, 77%, .25) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trends__item__sparkline path:last-child {
|
||
|
|
/* stroke: #aaabff !important; */
|
||
|
|
/* stroke: hsl(239, 100%, 83%) !important; */
|
||
|
|
stroke: hsl(var(--hue), 100%, 83%) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button.active {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__item a:active,
|
||
|
|
.dropdown-menu__item a:focus,
|
||
|
|
.dropdown-menu__item a:hover,
|
||
|
|
.dropdown-menu__item button:active,
|
||
|
|
.dropdown-menu__item button:focus,
|
||
|
|
.dropdown-menu__item button:hover {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
/* background: hsl(var(--hue), 100%, 69%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 60%, 39%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__wrapper.active::before {
|
||
|
|
/* background: radial-gradient(ellipse,rgba(99,100,255,.23) 0,rgba(99,100,255,0) 60%); */
|
||
|
|
/* background: radial-gradient(ellipse,hsla(240, 100%, 69%, .23) 0,hsla(240, 100%, 69%, 0) 60%); */
|
||
|
|
background: radial-gradient(ellipse, hsla(var(--hue), 100%, 69%, .23) 0, hsla(var(--hue), 100%, 69%, 0) 60%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__wrapper.active {
|
||
|
|
/* box-shadow: 0 1px 0 rgba(140,141,255,.3); */
|
||
|
|
/* box-shadow: 0 1px 0 hsla(239, 100%, 77%, .3); */
|
||
|
|
box-shadow: 0 1px 0 hsla(var(--hue), 100%, 77%, .3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator__content a.unhandled-link,
|
||
|
|
.status__content a.unhandled-link {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__chart.leading {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
background: hsl(var(--hue), 100%, 69%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__chart {
|
||
|
|
/* background: #8ba1bf; */
|
||
|
|
/* background: hsl(215, 29%, 65%); */
|
||
|
|
background: hsl(var(--hue), 29%, 65%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header,
|
||
|
|
.column-header__button {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__button {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__button:hover {
|
||
|
|
/* color: #b2c1d5; */
|
||
|
|
/* color: hsl(214, 29%, 77%); */
|
||
|
|
color: hsl(var(--hue), 29%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.load-gap {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.load-more:hover {
|
||
|
|
/* background: #2c313d; */
|
||
|
|
/* background: hsl(222, 16%, 21%); */
|
||
|
|
background: hsl(var(--hue), 16%, 21%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column > .scrollable {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status__relative-time {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status__display-name {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button:focus {
|
||
|
|
/* background-color: rgba(96,105,135,.3); */
|
||
|
|
/* background-color: hsla(226, 17%, 45%, .3); */
|
||
|
|
background-color: hsla(var(--hue), 17%, 45%, .3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button:active,
|
||
|
|
.icon-button:focus,
|
||
|
|
.icon-button:hover {
|
||
|
|
/* color: #707b97; */
|
||
|
|
/* color: hsl(223, 16%, 52%); */
|
||
|
|
color: hsl(var(--hue), 16%, 52%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button.inverted:active,
|
||
|
|
.icon-button.inverted:focus,
|
||
|
|
.icon-button.inverted:hover {
|
||
|
|
/* color: #51596f; */
|
||
|
|
/* background-color: rgba(96,105,132,.15); */
|
||
|
|
/* color: hsl(224, 16%, 38%); */
|
||
|
|
/* background-color: hsla(225, 16%, 45%, .15); */
|
||
|
|
color: hsl(var(--hue), 16%, 38%);
|
||
|
|
background-color: hsla(var(--hue), 16%, 45%, .15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.muted .status__content,
|
||
|
|
.muted .status__content a,
|
||
|
|
.muted .status__content p,
|
||
|
|
.muted .status__display-name strong {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator__content a,
|
||
|
|
.status__content a {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification__message {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status__content__spoiler-link {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator__content .status__content__spoiler-link,
|
||
|
|
.status__content .status__content__spoiler-link {
|
||
|
|
/* background: #606984; */
|
||
|
|
/* background: hsl(225, 16%, 45%); */
|
||
|
|
background: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator__content .status__content__spoiler-link:focus,
|
||
|
|
.reply-indicator__content .status__content__spoiler-link:hover,
|
||
|
|
.status__content .status__content__spoiler-link:focus,
|
||
|
|
.status__content .status__content__spoiler-link:hover {
|
||
|
|
/* background: #707b97; */
|
||
|
|
/* background: hsl(223, 16%, 52%); */
|
||
|
|
background: hsl(var(--hue), 16%, 52%);
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
/* scrollbar-color: #313543 rgba(0,0,0,.1); */
|
||
|
|
/* scrollbar-color: hsl(227, 16%, 23%) rgba(0,0,0,.1); */
|
||
|
|
scrollbar-color: hsl(var(--hue), 16%, 23%) rgba(0, 0, 0, .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__section-headline a.active::after,
|
||
|
|
.account__section-headline button.active::after,
|
||
|
|
.notification__filter-bar a.active::after,
|
||
|
|
.notification__filter-bar button.active::after {
|
||
|
|
/* border-color: transparent transparent #282c37; */
|
||
|
|
/* border-color: transparent transparent hsl(224, 16%, 19%); */
|
||
|
|
border-color: transparent transparent hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__section-headline,
|
||
|
|
.notification__filter-bar {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__section-headline button,
|
||
|
|
.notification__filter-bar button {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__section-headline a.active::after,
|
||
|
|
.account__section-headline a.active::before,
|
||
|
|
.account__section-headline button.active::after,
|
||
|
|
.account__section-headline button.active::before,
|
||
|
|
.notification__filter-bar a.active::after,
|
||
|
|
.notification__filter-bar a.active::before,
|
||
|
|
.notification__filter-bar button.active::after,
|
||
|
|
.notification__filter-bar button.active::before {
|
||
|
|
/* border-color: transparent transparent #393f4f; */
|
||
|
|
/* border-color: transparent transparent hsl(224, 16%, 27%); */
|
||
|
|
border-color: transparent transparent hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__section-headline a,
|
||
|
|
.account__section-headline button,
|
||
|
|
.notification__filter-bar a,
|
||
|
|
.notification__filter-bar button {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__section-headline a.active,
|
||
|
|
.account__section-headline button.active,
|
||
|
|
.notification__filter-bar a.active,
|
||
|
|
.notification__filter-bar button.active {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-link--transparent {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.getting-started__trends h4 {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.trends__item__name a {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.trends__item__name {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status__prepend .status__display-name strong {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status__prepend {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-card.compact {
|
||
|
|
/* border-color: #313543; */
|
||
|
|
/* border-color: hsl(227, 16%, 23%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-card__image {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-card {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
a.status-card.compact:hover {
|
||
|
|
/* background-color: #313543; */
|
||
|
|
/* background-color: hsl(227, 16%, 23%); */
|
||
|
|
background-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
a.status-card:hover {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-card__title {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__link {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__footer {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search__input::placeholder {
|
||
|
|
/* color: #a8b9cf; */
|
||
|
|
/* color: hsl(214, 29%, 74%); */
|
||
|
|
color: hsl(var(--hue), 29%, 74%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search__input {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search__input:focus {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search__icon .fa-times-circle {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search__icon .fa {
|
||
|
|
/* color: rgb(217, 225, 232); */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-popout h4,
|
||
|
|
.search-popout {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-popout em {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-bar a {
|
||
|
|
/* color: rgb(155, 174, 200); */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__item {
|
||
|
|
/* color: rgb(40, 44, 55); */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu {
|
||
|
|
/* background: #d9e1e8; */
|
||
|
|
/* background: hsl(208, 25%, 88%); */
|
||
|
|
background: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__arrow.bottom {
|
||
|
|
/* border-bottom-color: #d9e1e8; */
|
||
|
|
/* border-bottom-color: hsl(208, 25%, 88%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__item a,
|
||
|
|
.dropdown-menu__item button {
|
||
|
|
/* background: #d9e1e8; */
|
||
|
|
/* background: hsl(208, 25%, 88%); */
|
||
|
|
background: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__item a:active,
|
||
|
|
.dropdown-menu__item a:focus,
|
||
|
|
.dropdown-menu__item a:hover,
|
||
|
|
.dropdown-menu__item button:active,
|
||
|
|
.dropdown-menu__item button:focus,
|
||
|
|
.dropdown-menu__item button:hover {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__separator {
|
||
|
|
/* border-bottom-color: #c0cdd9; */
|
||
|
|
/* border-bottom-color: hsl(209, 25%, 80%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 25%, 80%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-footer p {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-footer p a {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-back-button {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__tabs__buttons .icon-button {
|
||
|
|
/* border-color: #42485a; */
|
||
|
|
/* border-color: hsl(225, 15%, 31%); */
|
||
|
|
border-color: hsl(var(--hue), 15%, 31%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button:active,
|
||
|
|
.icon-button:focus,
|
||
|
|
.icon-button:hover {
|
||
|
|
/* background-color: rgba(96,105,132,.15); */
|
||
|
|
/* background-color: hsla(225, 16%, 45%, .15); */
|
||
|
|
background-color: hsla(var(--hue), 16%, 45%, .15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bio .account__header__fields a {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__tabs__name h1 small {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__extra__links a {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bio .account__header__fields dt {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bio .account__header__fields dd {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bio .account__header__fields dl {
|
||
|
|
/* border-bottom-color: #313543; */
|
||
|
|
/* border-bottom-color: hsl(227, 16%, 23%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__fields dl {
|
||
|
|
/* border-bottom-color: #42485a; */
|
||
|
|
/* border-bottom-color: hsl(225, 15%, 31%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 15%, 31%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bio .account__header__fields {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bar {
|
||
|
|
/* border-bottom-color: #42485a; */
|
||
|
|
/* border-bottom-color: hsl(225, 15%, 31%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 15%, 31%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-player__volume__current {
|
||
|
|
/* background: #8c8dff; */
|
||
|
|
/* background: hsl(239, 100%, 77%); */
|
||
|
|
background: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-player__volume__handle {
|
||
|
|
/* background: #8c8dff; */
|
||
|
|
/* background: hsl(239, 100%, 77%); */
|
||
|
|
background: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-player__seek__buffer,
|
||
|
|
.video-player__seek__progress {
|
||
|
|
/* background: #8c8dff; */
|
||
|
|
/* background: hsl(239, 100%, 77%); */
|
||
|
|
background: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-player__seek__handle {
|
||
|
|
/* background: #8c8dff; */
|
||
|
|
/* background: hsl(239, 100%, 77%); */
|
||
|
|
background: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.media-modal__overlay .picture-in-picture__footer .icon-button.active {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.media-modal__overlay .picture-in-picture__footer .icon-button.active:active,
|
||
|
|
.media-modal__overlay .picture-in-picture__footer .icon-button.active:focus,
|
||
|
|
.media-modal__overlay .picture-in-picture__footer .icon-button.active:hover {
|
||
|
|
/* background: rgba(140,141,255,.15); */
|
||
|
|
/* background: hsla(239, 100%, 77%, .15); */
|
||
|
|
background: hsla(var(--hue), 100%, 77%, .15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.media-gallery__item-thumbnail img:not([alt]),
|
||
|
|
.audio-player__canvas:not([title]),
|
||
|
|
.video-player video:not([title]),
|
||
|
|
.media-gallery__gifv video:not([title]),
|
||
|
|
.media-gallery__item-thumbnail img[alt=""],
|
||
|
|
.audio-player__canvas[title=""],
|
||
|
|
.video-player video[title=""],
|
||
|
|
.media-gallery__gifv video[title=""] {
|
||
|
|
/* border-color: #1da1f2; */
|
||
|
|
/* border-color: hsl(203, 89%, 53%); */
|
||
|
|
border-color: hsl(var(--hue), 89%, 53%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__account-note textarea::placeholder {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__account-note label {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__account-note textarea:focus {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__account-note textarea {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__bar .avatar .account__avatar {
|
||
|
|
/* border-color: #313543; */
|
||
|
|
/* border-color: hsl(227, 16%, 23%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .content h4 {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.simple_form p.hint,
|
||
|
|
.simple_form .hint {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar ul a.selected {
|
||
|
|
/* background: #242731; */
|
||
|
|
/* background: hsl(226, 15%, 17%); */
|
||
|
|
background: hsl(var(--hue), 15%, 17%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
|
||
|
|
/* background-color: #595aff; */
|
||
|
|
/* background-color: hsl(240, 100%, 67%); */
|
||
|
|
/* background-color: hsl(var(--hue), 100%, 67%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background-color: hsl(var(--hue), 70%, 37%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar ul a {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar ul a:hover {
|
||
|
|
/* background-color: #1d2028; */
|
||
|
|
/* background-color: hsl(224, 16%, 14%); */
|
||
|
|
background-color: hsl(var(--hue), 16%, 14%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
|
||
|
|
/* background-color: #6364ff; */
|
||
|
|
/* background-color: hsl(240, 100%, 69%); */
|
||
|
|
background-color: hsl(var(--hue), 100%, 69%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.simple_form .hint a {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .content .muted-hint a,
|
||
|
|
body .muted-hint a {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(240, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .content .muted-hint,
|
||
|
|
body .muted-hint {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .content h6 {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.simple_form input[type="datetime-local"]::placeholder,
|
||
|
|
.simple_form input[type="email"]::placeholder,
|
||
|
|
.simple_form input[type="number"]::placeholder,
|
||
|
|
.simple_form input[type="password"]::placeholder,
|
||
|
|
.simple_form input[type="text"]::placeholder,
|
||
|
|
.simple_form input[type="url"]::placeholder,
|
||
|
|
.simple_form textarea::placeholder {
|
||
|
|
/* color: #a8b9cf; */
|
||
|
|
/* color: hsl(214, 29%, 74%); */
|
||
|
|
color: hsl(var(--hue), 29%, 74%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.simple_form input[type="datetime-local"],
|
||
|
|
.simple_form input[type="email"],
|
||
|
|
.simple_form input[type="number"],
|
||
|
|
.simple_form input[type="password"],
|
||
|
|
.simple_form input[type="text"],
|
||
|
|
.simple_form input[type="url"],
|
||
|
|
.simple_form textarea {
|
||
|
|
/* background: #131419; */
|
||
|
|
/* background: hsl(230, 14%, 9%); */
|
||
|
|
background: hsl(var(--hue), 14%, 9%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.simple_form input[type="datetime-local"]:active,
|
||
|
|
.simple_form input[type="datetime-local"]:focus,
|
||
|
|
.simple_form input[type="email"]:active,
|
||
|
|
.simple_form input[type="email"]:focus,
|
||
|
|
.simple_form input[type="number"]:active,
|
||
|
|
.simple_form input[type="number"]:focus,
|
||
|
|
.simple_form input[type="password"]:active,
|
||
|
|
.simple_form input[type="password"]:focus,
|
||
|
|
.simple_form input[type="text"]:active,
|
||
|
|
.simple_form input[type="text"]:focus,
|
||
|
|
.simple_form input[type="url"]:active,
|
||
|
|
.simple_form input[type="url"]:focus,
|
||
|
|
.simple_form textarea:active,
|
||
|
|
.simple_form textarea:focus {
|
||
|
|
/* border-color: #8c8dff; */
|
||
|
|
/* background: #17191f; */
|
||
|
|
/* border-color: hsl(239, 100%, 77%); */
|
||
|
|
/* background: hsl(225, 15%, 11%); */
|
||
|
|
border-color: hsl(var(--hue), 100%, 77%);
|
||
|
|
background: hsl(var(--hue), 15%, 11%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-copy {
|
||
|
|
/* background: #131419; */
|
||
|
|
/* border-color: #0a0b0e; */
|
||
|
|
/* background: hsl(230, 14%, 9%); */
|
||
|
|
/* border-color: hsl(225, 17%, 5%); */
|
||
|
|
background: hsl(var(--hue), 14%, 9%);
|
||
|
|
border-color: hsl(var(--hue), 17%, 5%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.simple_form .hint code {
|
||
|
|
/* background: #0e1014; */
|
||
|
|
/* background: hsl(220, 18%, 7%); */
|
||
|
|
background: hsl(var(--hue), 18%, 7%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.admin-wrapper .content hr {
|
||
|
|
/* border-bottom-color: rgba(96,105,132,.6); */
|
||
|
|
/* border-bottom-color: hsla(225, 16%, 45%, .6); */
|
||
|
|
border-bottom-color: hsla(var(--hue), 16%, 45%, .6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card__bar {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card > a:active .card__bar,
|
||
|
|
.card > a:focus .card__bar,
|
||
|
|
.card > a:hover .card__bar {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card__bar .display-name span {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filters .filter-subset a.selected {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* border-bottom-color: #6364ff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
/* border-bottom-color: hsl(240, 100%, 69%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
border-bottom-color: hsl(var(--hue), 100%, 69%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filters .filter-subset a {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* border-bottom-color: #282c37; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
a.table-action-link,
|
||
|
|
button.table-action-link {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.accounts-table__count small {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account .account__display-name {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.accounts-table .fa.active {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.batch-table__toolbar {
|
||
|
|
/* border-color: #17191f; */
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* border-color: hsl(225, 15%, 11%); */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
border-color: hsl(var(--hue), 15%, 11%);
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.batch-table__row {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* border-color: #17191f; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
/* border-color: hsl(225, 15%, 11%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
border-color: hsl(var(--hue), 15%, 11%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.batch-table__row:nth-child(2n) {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.batch-table__row:hover {
|
||
|
|
/* background: #242731; */
|
||
|
|
/* background: hsl(226, 15%, 17%); */
|
||
|
|
background: hsl(var(--hue), 15%, 17%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.batch-table__row:nth-child(2n):hover {
|
||
|
|
/* background: #2c313d; */
|
||
|
|
/* background: hsl(222, 16%, 21%); */
|
||
|
|
background: hsl(var(--hue), 16%, 21%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.announcements__item__content a.unhandled-link {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.announcements {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__button.active,
|
||
|
|
.column-header__button.active:hover {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__collapsible-inner {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reactions-bar__item {
|
||
|
|
/* background: #42485a; */
|
||
|
|
/* background: hsl(225, 15%, 31%); */
|
||
|
|
background: hsl(var(--hue), 15%, 31%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reactions-bar__item.active {
|
||
|
|
/* background-color: #494e7b; */
|
||
|
|
/* background-color: hsl(234, 26%, 38%); */
|
||
|
|
background-color: hsl(var(--hue), 26%, 38%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reactions-bar__item.active .reactions-bar__item__count {
|
||
|
|
/* color: #b5b5ff; */
|
||
|
|
/* color: hsl(240, 100%, 85%); */
|
||
|
|
color: hsl(var(--hue), 100%, 85%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.flash-message {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-footer a {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.applications-list__item,
|
||
|
|
.filters-list__item {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* border-color: #313543; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
/* border-color: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
border-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.announcements-list__item__meta,
|
||
|
|
.filters-list__item__meta {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.permissions-list__item {
|
||
|
|
/* border-bottom-color: #313543; */
|
||
|
|
/* border-bottom-color: hsl(227, 16%, 23%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.permissions-list__item__text__type {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table > tbody > tr:nth-child(2n+1) > td,
|
||
|
|
.table > tbody > tr:nth-child(2n+1) > th {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table td,
|
||
|
|
.table th {
|
||
|
|
/* border-top-color: #282c37; */
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* border-top-color: hsl(224, 16%, 19%); */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
border-top-color: hsl(var(--hue), 16%, 19%);
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.button-secondary {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* border-color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
/* border-color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
border-color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.button-secondary:active,
|
||
|
|
.button.button-secondary:focus,
|
||
|
|
.button.button-secondary:hover {
|
||
|
|
/* border-color: #a8b9cf; */
|
||
|
|
/* color: #a8b9cf; */
|
||
|
|
/* border-color: hsl(214, 29%, 74%); */
|
||
|
|
/* color: hsl(214, 29%, 74%); */
|
||
|
|
border-color: hsl(var(--hue), 29%, 74%);
|
||
|
|
color: hsl(var(--hue), 29%, 74%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.button-secondary {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-button {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
/* color: hsl(var(--hue), 100%, 77%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
color: hsl(var(--hue), 80%, 47%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator {
|
||
|
|
/* background: #9baec8; */
|
||
|
|
/* background: hsl(215, 29%, 70%); */
|
||
|
|
background: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button.inverted {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.attachment-list__list a {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.attachment-list.compact .fa {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__suggestions {
|
||
|
|
/* background: #d9e1e8; */
|
||
|
|
/* background: hsl(208, 25%, 88%); */
|
||
|
|
background: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__suggestions__item.selected,
|
||
|
|
.compose-form .autosuggest-textarea__suggestions__item:active,
|
||
|
|
.compose-form .autosuggest-textarea__suggestions__item:focus,
|
||
|
|
.compose-form .autosuggest-textarea__suggestions__item:hover {
|
||
|
|
/* background: #b9c8d5; */
|
||
|
|
/* background: hsl(208, 25%, 78%); */
|
||
|
|
background: hsl(var(--hue), 25%, 78%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__suggestions {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form__sensitive-button .checkbox {
|
||
|
|
/* border-color: #9baec8; */
|
||
|
|
/* border-color: hsl(215, 29%, 70%); */
|
||
|
|
border-color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-button:disabled {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.character-counter {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions-modal,
|
||
|
|
.block-modal,
|
||
|
|
.boost-modal,
|
||
|
|
.compare-history-modal,
|
||
|
|
.confirmation-modal,
|
||
|
|
.mute-modal,
|
||
|
|
.report-modal {
|
||
|
|
/* background: #f2f5f7; */
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* background: hsl(204, 24%, 96%); */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 24%, 96%);
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.muted .poll__chart.leading {
|
||
|
|
/* background: rgba(99,100,255,.2); */
|
||
|
|
/* background: hsla(240, 100%, 69%, .2); */
|
||
|
|
background: hsla(var(--hue), 100%, 69%, .2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.muted .poll__chart {
|
||
|
|
/* background: rgba(109,137,175,.2); */
|
||
|
|
/* background: hsla(215, 29%, 56%, .2); */
|
||
|
|
background: hsla(var(--hue), 29%, 56%, .2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.muted .poll {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification.unread::before,
|
||
|
|
.status__wrapper.unread::before {
|
||
|
|
/* border-left-color: #8c8dff; */
|
||
|
|
/* border-left-color: hsl(239, 100%, 77%); */
|
||
|
|
border-left-color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification__message .fa {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.picture-in-picture__footer,
|
||
|
|
.picture-in-picture__header {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* background: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.picture-in-picture__header .display-name span {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.explore__search-header {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.explore__search-header .search__input {
|
||
|
|
/* border-color: #393f4f; */
|
||
|
|
/* border-color: hsl(224, 16%, 27%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.explore__search-header .search .fa {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.trends__item {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.story {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.story__details__publisher {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.story__details__shared {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.story:active,
|
||
|
|
.story:focus,
|
||
|
|
.story:hover {
|
||
|
|
/* background-color: #313543; */
|
||
|
|
/* background-color: hsl(227, 16%, 23%); */
|
||
|
|
background-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scrollable .account-card {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account-card__title .display-name {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account-card__bio a {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account-card__counters__item small {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scrollable .account-card__bio::after {
|
||
|
|
/* background: linear-gradient(270deg,#393f4f,transparent); */
|
||
|
|
/* background: linear-gradient(270deg,hsl(224, 16%, 27%),transparent); */
|
||
|
|
background: linear-gradient(270deg, hsl(var(--hue), 16%, 27%), transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__collapsible {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-settings__section {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting-toggle__label {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.react-toggle--checked .react-toggle-track {
|
||
|
|
/* background-color: #595aff; */
|
||
|
|
/* background-color: hsl(240, 100%, 67%); */
|
||
|
|
/* background-color: hsl(var(--hue), 100%, 67%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background-color: hsl(var(--hue), 70%, 37%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.react-toggle-thumb {
|
||
|
|
/* border-color: #282c37; */
|
||
|
|
/* border-color: hsl(224, 16%, 19%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.react-toggle--checked .react-toggle-thumb {
|
||
|
|
/* border-color: #6364ff; */
|
||
|
|
/* border-color: hsl(240, 100%, 69%); */
|
||
|
|
/* border-color: hsl(var(--hue), 100%, 69%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
border-color: hsl(var(--hue), 70%, 39%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.react-toggle-track {
|
||
|
|
/* background-color: #282c37; */
|
||
|
|
/* background-color: hsl(224, 16%, 19%); */
|
||
|
|
background-color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__container__header {
|
||
|
|
/* border-bottom-color: #c0cdd9; */
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* border-bottom-color: hsl(209, 25%, 80%); */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 25%, 80%);
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu__item.edited-timestamp__history__item {
|
||
|
|
/* border-bottom-color: #c0cdd9; */
|
||
|
|
/* border-bottom-color: hsl(209, 25%, 80%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 25%, 80%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compare-history-modal .report-modal__target {
|
||
|
|
/* border-bottom-color: #d9e1e8; */
|
||
|
|
/* border-bottom-color: hsl(208, 25%, 88%); */
|
||
|
|
border-bottom-color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compare-history-modal .status__content {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.poll__input.disabled:active,
|
||
|
|
.poll__input.disabled:focus,
|
||
|
|
.poll__input.disabled:hover {
|
||
|
|
/* border-color: #606984; */
|
||
|
|
/* border-color: hsl(225, 16%, 45%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-hint {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-hint a {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* color: hsl(239, 100%, 77%); */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-progress {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-progress__backdrop {
|
||
|
|
/* background: #606984; */
|
||
|
|
/* background: hsl(225, 16%, 45%); */
|
||
|
|
background: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-progress__tracker {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(240, 100%, 69%); */
|
||
|
|
background: hsl(var(--hue), 80%, 49%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-modal__cancel-button,
|
||
|
|
.confirmation-modal__cancel-button,
|
||
|
|
.confirmation-modal__secondary-button,
|
||
|
|
.mute-modal__cancel-button {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-modal__cancel-button:active,
|
||
|
|
.block-modal__cancel-button:focus,
|
||
|
|
.block-modal__cancel-button:hover,
|
||
|
|
.confirmation-modal__cancel-button:active,
|
||
|
|
.confirmation-modal__cancel-button:focus,
|
||
|
|
.confirmation-modal__cancel-button:hover,
|
||
|
|
.confirmation-modal__secondary-button:active,
|
||
|
|
.confirmation-modal__secondary-button:focus,
|
||
|
|
.confirmation-modal__secondary-button:hover,
|
||
|
|
.mute-modal__cancel-button:active,
|
||
|
|
.mute-modal__cancel-button:focus,
|
||
|
|
.mute-modal__cancel-button:hover {
|
||
|
|
/* color: #576078; */
|
||
|
|
/* color: hsl(224, 16%, 41%); */
|
||
|
|
color: hsl(var(--hue), 16%, 41%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-modal__action-bar,
|
||
|
|
.boost-modal__action-bar,
|
||
|
|
.confirmation-modal__action-bar,
|
||
|
|
.mute-modal__action-bar {
|
||
|
|
/* background: #d9e1e8; */
|
||
|
|
/* background: hsl(208, 25%, 88%); */
|
||
|
|
background: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-bar {
|
||
|
|
/* background-color: #8c8dff; */
|
||
|
|
/* background-color: hsl(239, 100%, 77%); */
|
||
|
|
/* background-color: hsl(var(--hue), 100%, 77%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background-color: hsl(var(--hue), 70%, 57%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.circular-progress {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-card {
|
||
|
|
/* border-color: #393f4f; */
|
||
|
|
/* border-color: hsl(224, 16%, 27%); */
|
||
|
|
border-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-card__description {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
/* color: hsl(var(--hue), 29%, 70%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
color: hsl(var(--hue), 10%, 60%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-bar strong {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(208, 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-header__setting-btn:focus,
|
||
|
|
.column-header__setting-btn:hover {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
/* color: hsl(var(--hue), 29%, 70%); */
|
||
|
|
/* Manually changed for readability */
|
||
|
|
color: hsl(var(--hue), 19%, 90%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusable:focus .detailed-status,
|
||
|
|
.focusable:focus .detailed-status__action-bar {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator__content {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply-indicator__display-name {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__textarea::placeholder,
|
||
|
|
.compose-form .spoiler-input__input::placeholder {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
|
||
|
|
/* color: #51596f; */
|
||
|
|
/* background-color: rgba(96,105,132,.15); */
|
||
|
|
/* color: hsl(224, 16%, 38%); */
|
||
|
|
/* background-color: hsla(225, 16%, 45%, .15); */
|
||
|
|
color: hsl(var(--hue), 16%, 38%);
|
||
|
|
background-color: hsla(var(--hue), 16%, 45%, .15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-panel .compose-form__autosuggest-wrapper {
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .compose-form__warning {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* background: #9baec8; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
/* background: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
background: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .compose-form__warning a {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* brodokk's patches */
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(var(--hue), 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(var(--hue), 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form .compose-form__modifiers {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compose-form .compose-form__buttons-wrapper {
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 15%, 13%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__inner.darker {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-results__header {
|
||
|
|
/* background: #2c313d; */
|
||
|
|
/* background: hsl(222, 16%, 21%); */
|
||
|
|
background: hsl(var(--hue), 16%, 21%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-results__header {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-results__section h5 {
|
||
|
|
/* background: #1f232b; */
|
||
|
|
/* background: hsl(220, 16%, 15%); */
|
||
|
|
background: hsl(var(--hue), 16%, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-results__section h5 {
|
||
|
|
/* border-bottom: 1px solid #393f4f; */
|
||
|
|
/* border-bottom: 1px solid hsl(224, 16%, 27%); */
|
||
|
|
border-bottom: 1px solid hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-results__section h5 {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status__content__read-more-button {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .header, .public-layout .public-account-bio, .directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.activity-stream .entry, .hero-widget__text, .directory__tag > a, .directory__tag > div{
|
||
|
|
/* color: #282c37; */
|
||
|
|
/* color: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 15%, 13%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .header .nav-link, .hero-widget__text p, .trends-widget h4, .public-layout .footer h4, .public-layout .public-account-header__tabs__tabs .counter, .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra, .placeholder-widget, .directory__tag h4 .fa, .endorsements-widget h4 {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.directory__tag h4 small {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 20%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-widget__text a, .trends__item__current {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
/* color: hsl(var(--hue), 25%, 88%); */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .footer .grid .column-2 h4 a, .public-layout .footer, .public-layout .footer .legal-xs a, .public-layout .footer ul a {
|
||
|
|
/* color: #737d99; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 20%, 52%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .footer .brand svg {
|
||
|
|
/* color: #7f88a2; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
fill: hsl(var(--hue), 20%, 52%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .public-account-header__bar::before {
|
||
|
|
/* border-color: #313543; */
|
||
|
|
/* border-color: hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .public-account-header__bar .avatar img {
|
||
|
|
/* background: #17191f; */
|
||
|
|
/* border: 4px solid #313543; */
|
||
|
|
/* background: hsl(225, 15%, 11%); */
|
||
|
|
/* border: 4px solid hsl(227, 16%, 23%); */
|
||
|
|
background: hsl(var(--hue), 15%, 11%);
|
||
|
|
border: 4px solid hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .public-account-header__tabs__tabs .counter {
|
||
|
|
/* border-right: 1px solid #313543; */
|
||
|
|
/* border-right: 1px solidhsl(227, 16%, 23%); */
|
||
|
|
border-right: 1px solid hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||
|
|
/* border-bottom: 4px solid #2b90d9; */
|
||
|
|
border-bottom: 4px solid hsl(var(--hue), 60%, 50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .public-account-header__tabs__tabs .counter::after {
|
||
|
|
/* border-bottom: 4px solid #9baec8; */
|
||
|
|
border-bottom: 4px solid hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder-widget {
|
||
|
|
/* border: 2px dashed #606984; */
|
||
|
|
/* border: 2px dashedhsl(225, 16%, 45%); */
|
||
|
|
border: 2px dashed hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-widget a, .placeholder-widget a {
|
||
|
|
/* color: #2b90d9; */
|
||
|
|
color: hsl(var(--hue), 60%, 50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .public-account-bio .account__header__fields a {
|
||
|
|
/* color: #2b90d9; */
|
||
|
|
color: hsl(var(--hue), 50%, 50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .header .nav-button {
|
||
|
|
/* background-color: #595aff; */
|
||
|
|
background-color: hsl(var(--hue), 29%, 47%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
|
||
|
|
/* background-color: #535b72; */
|
||
|
|
background-color: hsl(var(--hue), 40%, 47%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__fields dd {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account__header__fields {
|
||
|
|
/* border-color: #42485a currentcolor; */
|
||
|
|
border-color: hsl(var(--hue), 15%, 31%) currentcolor;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
|
||
|
|
/* background: #42485a; */
|
||
|
|
background: hsl(var(--hue), 15%, 31%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button.disabled {
|
||
|
|
/* color: #444b5d; */
|
||
|
|
color: hsl(var(--hue), 16%, 32%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sign-in-banner p {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.button-tertiary {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
/* border-color: #8c8dff; */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
border-color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover {
|
||
|
|
/* background: #6364ff; */
|
||
|
|
/* background: hsl(var(--hue), 100%, 69%); */
|
||
|
|
|
||
|
|
/* Manually changed for readability */
|
||
|
|
background: hsl(var(--hue), 60%, 49%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.server-banner h4 {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.server-banner__number-label {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.server-banner__introduction {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__meta h4 {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__meta {
|
||
|
|
/* background: #313543; */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__meta__divider {
|
||
|
|
/* border-color: #393f4f; */
|
||
|
|
border-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__section__title {
|
||
|
|
/* background: #313543; */
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
background: hsl(var(--hue), 16%, 23%);
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__section__body {
|
||
|
|
/* border-color: #313543; */
|
||
|
|
border-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose {
|
||
|
|
/* color: #d9e1e8; */
|
||
|
|
color: hsl(var(--hue), 25%, 88%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose ul > li::before {
|
||
|
|
/* background-color: #9baec8; */
|
||
|
|
background-color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose a {
|
||
|
|
/* color: #8c8dff; */
|
||
|
|
color: hsl(var(--hue), 100%, 77%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose hr {
|
||
|
|
/* border-top-color: #313543; */
|
||
|
|
border-top-color: hsl(var(--hue), 16%, 23%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__header p {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about__footer {
|
||
|
|
/* color: #606984; */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rules-list li::before {
|
||
|
|
/* background: #8c8dff; */
|
||
|
|
/* color: #282c37; */
|
||
|
|
background: hsl(var(--hue), 100%, 77%);
|
||
|
|
color: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.rules-list li {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.account {
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-header {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-header p {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* Hue rotate for complex backgrounds */
|
||
|
|
|
||
|
|
.simple_form select {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 240deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
button.icon-button.disabled:hover i.fa-retweet,
|
||
|
|
button.icon-button.disabled i.fa-retweet {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 240deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
button.icon-button i.fa-retweet {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 240deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
button.icon-button:hover i.fa-retweet {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 240deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 240deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* Advanced Web Interface */
|
||
|
|
.drawer__header {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__header a:hover {
|
||
|
|
/* background: #2e3340; */
|
||
|
|
/* background: hsl(223, 16%, 22%); */
|
||
|
|
background: hsl(var(--hue), 16%, 22%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__tab {
|
||
|
|
/* color: #9baec8; */
|
||
|
|
/* color: hsl(215, 29%, 70%); */
|
||
|
|
color: hsl(var(--hue), 29%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__inner {
|
||
|
|
/* background: #444b5d; */
|
||
|
|
/* background: hsl(223, 16%, 32%); */
|
||
|
|
background: hsl(var(--hue), 16%, 32%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__inner__mastodon {
|
||
|
|
/* background-color: #444b5d; */
|
||
|
|
/* background-color: hsl(223, 16%, 32%); */
|
||
|
|
background-color: hsl(var(--hue), 16%, 32%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__inner__mastodon {
|
||
|
|
/* background-color: #444b5d; */
|
||
|
|
/* background-color: hsl(223, 16%, 32%); */
|
||
|
|
/* background-color: hsl(240deg, 16%, 32%); */
|
||
|
|
/* Strangely, I need to remove the space between the - and 120deg */
|
||
|
|
background-color: hsl(calc(var(--hue) -120deg), 16%, 32%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__inner__mastodon {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 240deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer__inner__mastodon > img {
|
||
|
|
filter: hue-rotate(calc(var(--hue) - 300deg));
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-spacer,
|
||
|
|
.getting-started,
|
||
|
|
.getting-started__wrapper {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-subheading {
|
||
|
|
/* color: #606984; */
|
||
|
|
/* color: hsl(225, 16%, 45%); */
|
||
|
|
color: hsl(var(--hue), 16%, 45%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-link__badge,
|
||
|
|
.column-subheading {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.getting-started__wrapper .column-link {
|
||
|
|
/* background: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.getting-started__wrapper .column-link:active,
|
||
|
|
.getting-started__wrapper .column-link:focus,
|
||
|
|
.getting-started__wrapper .column-link:hover {
|
||
|
|
/* background: #404657; */
|
||
|
|
/* background: hsl(224, 15%, 30%); */
|
||
|
|
background: hsl(var(--hue), 15%, 30%);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@media screen and (max-width: 1174px) {
|
||
|
|
.ui__header {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* border-bottom-color: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
/* border-bottom-color: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
border-bottom-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns-area__panels__pane--navigational .navigation-panel {
|
||
|
|
/* background: #282c37; */
|
||
|
|
/* border-left-color: #393f4f; */
|
||
|
|
/* background: hsl(224, 16%, 19%); */
|
||
|
|
/* border-left-color: hsl(224, 16%, 27%); */
|
||
|
|
background: hsl(var(--hue), 16%, 19%);
|
||
|
|
border-left-color: hsl(var(--hue), 16%, 27%);
|
||
|
|
}
|
||
|
|
}
|