903 lines
15 KiB
SCSS
903 lines
15 KiB
SCSS
$success-green: #B64579; // Padua
|
|
|
|
$ui-base-color: #fafafa; // "darkest"
|
|
$ui-base-alt: #fafafa;
|
|
$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
|
|
$ui-secondary-color: darken($ui-base-color, 15%); // "lightest"
|
|
$ui-primary-color: #5f4770; // "lighter"
|
|
$ui-highlight-color: #5f4770; // "vibrant"
|
|
$dark-text-color: #333;
|
|
$darker-text-color: #333;
|
|
$secondary-text-color: #333;
|
|
$primary-text-color: #333;
|
|
|
|
$header-color: $ui-primary-color;
|
|
$header-text-color: #fff;
|
|
$icon-button-inactive-color: lighten(desaturate($ui-primary-color, 20%), 20%);
|
|
|
|
|
|
$about-page-text: $primary-text-color;
|
|
|
|
@import 'cybre-base';
|
|
|
|
$ui-base-lighter-color: $icon-button-inactive-color;
|
|
@import 'mastodon/boost';
|
|
$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
|
|
|
|
$gold-star: #dd9d08;
|
|
|
|
.landing .hero-widget__img {
|
|
position:relative;
|
|
overflow:visible;
|
|
}
|
|
|
|
.landing .hero-widget__img::before {
|
|
content: " ";
|
|
display:block;
|
|
background-image:url("../images/handshake.png");
|
|
background-size:100% auto;
|
|
background-repeat:no-repeat;
|
|
background-position:bottom center;
|
|
width:465px;
|
|
height:300px;
|
|
position:absolute;
|
|
bottom:-50px;
|
|
}
|
|
|
|
/* about.scss */
|
|
|
|
.public-layout .header .nav-link {
|
|
color: white;
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
&.nav-button {
|
|
color: $ui-highlight-color;
|
|
&:hover {
|
|
color: $ui-highlight-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.information-board__section span:last-child {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.landing-page {
|
|
h1, h3, h6 {
|
|
color: $about-page-text;
|
|
small {
|
|
color: lighten($about-page-text, 10%);
|
|
span {
|
|
font-weight:bold;
|
|
color: $about-page-text;
|
|
}
|
|
}
|
|
}
|
|
p, li {
|
|
color: $about-page-text;
|
|
}
|
|
|
|
.information-board__section span:last-child {
|
|
color: $about-page-text;
|
|
}
|
|
|
|
.header-wrapper {
|
|
padding-top:0px;
|
|
|
|
background-size:cover;
|
|
background-position:50% 55%;
|
|
}
|
|
|
|
.header-wrapper {
|
|
.mascot {
|
|
width:500px;
|
|
bottom:-52px;
|
|
left:-120px;
|
|
}
|
|
}
|
|
|
|
.landing-page__logo img {
|
|
mix-blend-mode: initial;
|
|
}
|
|
|
|
.container.links {
|
|
background-color: $ui-base-color;
|
|
border-top: 5px solid $ui-primary-color;
|
|
width:100%;
|
|
max-width:100%;
|
|
padding:0px calc(50% - 400px);
|
|
|
|
a {
|
|
&:hover {
|
|
color: lighten($ui-primary-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.container.hero {
|
|
.floats {
|
|
display:none;
|
|
}
|
|
|
|
.closed-registrations-message, form {
|
|
border-top: 50px solid #5f4770;
|
|
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
|
|
box-shadow: 0 0 6px rgba(0,0,0,.1);
|
|
|
|
&:before {
|
|
font-size: 16px;
|
|
font-family:inherit;
|
|
line-height:inherit;
|
|
font-weight:normal;
|
|
color:white;
|
|
position:absolute;
|
|
top:-35px;
|
|
}
|
|
}
|
|
|
|
.closed-registrations-message:before {
|
|
content: "Registrations closed";
|
|
}
|
|
|
|
form:before {
|
|
content: "Register now";
|
|
}
|
|
}
|
|
|
|
#mastodon-timeline {
|
|
.column-header {
|
|
color:white;
|
|
}
|
|
|
|
p a {
|
|
color: $ui-primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.features-list__row {
|
|
.text {
|
|
color: $about-page-text;
|
|
}
|
|
}
|
|
|
|
.information-board {
|
|
.panel {
|
|
.panel-header {
|
|
color: $primary-text-color;
|
|
border-bottom: 1px solid lighten($ui-secondary-color, 4%);
|
|
|
|
a,
|
|
span {
|
|
font-weight: 400;
|
|
color: lighten($ui-primary-color, 4%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* components.scss */
|
|
|
|
.drawer__inner__mastodon {
|
|
display: none;
|
|
}
|
|
|
|
.onboarding-modal__page {
|
|
p {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.column-header {
|
|
background: $header-color;
|
|
color: $header-text-color;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.column-header__button {
|
|
background: $header-color;
|
|
color: $header-text-color;
|
|
border-top-right-radius: 3px;
|
|
|
|
&:hover {
|
|
color: darken($ui-base-color, 10%);
|
|
}
|
|
|
|
&.active {
|
|
color: $primary-text-color;
|
|
background: darken($ui-base-color, 5%);
|
|
|
|
&:hover {
|
|
background: darken($ui-base-color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-card, .status-card.compact {
|
|
border-color: $ui-highlight-color;
|
|
}
|
|
|
|
// selectivity -- needs to override .column-header > button
|
|
.column-header .column-header__back-button {
|
|
background: $header-color;
|
|
color:$header-text-color;
|
|
}
|
|
|
|
.column-back-button {
|
|
background: $header-color;
|
|
color:$header-text-color;
|
|
}
|
|
|
|
.column-header__collapsible-inner {
|
|
background: darken($ui-base-alt, 2%);
|
|
}
|
|
|
|
.empty-column-indicator,
|
|
.error-column {
|
|
color: darken($ui-base-lighter-color, 15%);
|
|
}
|
|
|
|
.navigation-bar strong
|
|
{
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.compose-form {
|
|
.autosuggest-textarea__textarea,
|
|
.spoiler-input__input {
|
|
color: $primary-text-color;
|
|
border: 1px solid $ui-primary-color;
|
|
}
|
|
|
|
.autosuggest-textarea__textarea {
|
|
border-bottom-width:0px;
|
|
}
|
|
.compose-form__modifiers {
|
|
border: 1px solid $ui-primary-color;
|
|
border-top-width:0px;
|
|
}
|
|
|
|
.compose-form__buttons button.active:last-child {
|
|
border-radius:3px;
|
|
background: $ui-base-color;
|
|
color: $ui-primary-color;
|
|
}
|
|
.compose-form__buttons-wrapper {
|
|
background-color:$ui-primary-color;
|
|
.character-counter__wrapper .character-counter {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.icon-button.inverted {
|
|
color:white;
|
|
|
|
&:hover {
|
|
color:$ui-secondary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
button.icon-button {
|
|
&.disabled {
|
|
}
|
|
}
|
|
|
|
.icon-button {
|
|
&.inverted {
|
|
color: darken($ui-base-lighter-color, 10%);
|
|
}
|
|
|
|
&.overlayed {
|
|
background: rgba($base-overlay-background, 0.2);
|
|
color: rgba($white, 0.7);
|
|
|
|
&:hover {
|
|
background: rgba($base-overlay-background, 0.4);
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
color: desaturate($icon-button-inactive-color, 5%);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: desaturate($icon-button-inactive-color, 5%);
|
|
}
|
|
}
|
|
|
|
color: $icon-button-inactive-color;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: darken($icon-button-inactive-color, 5%);
|
|
}
|
|
}
|
|
|
|
.icon-button.star-icon,
|
|
.icon-button.star-icon:active {
|
|
background:transparent;
|
|
border:none;
|
|
}
|
|
|
|
.icon-button.star-icon.active {
|
|
color: $gold-star;
|
|
&:active, &:hover, &:focus {
|
|
color: $gold-star;
|
|
}
|
|
}
|
|
|
|
.text-icon-button {
|
|
color: $white;
|
|
&.active {
|
|
background: $ui-base-color;
|
|
color: $ui-primary-color;
|
|
}
|
|
&:focus, &:hover {
|
|
color: darken($ui-base-color, 3%);
|
|
}
|
|
}
|
|
.status.status-direct {
|
|
background: darken($ui-base-alt, 5%);
|
|
.icon-button.disabled {
|
|
color: lighten($ui-base-lighter-color, 10%);
|
|
}
|
|
}
|
|
|
|
.account__header {
|
|
& > div {
|
|
background: rgba(lighten($ui-base-color, 4%), 0.6);
|
|
}
|
|
|
|
.account__header__content {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.account__header__fields dt {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.account__section-headline a.active {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
|
color: $ui-primary-color;
|
|
}
|
|
|
|
.privacy-dropdown__option {
|
|
color: $primary-text-color;
|
|
|
|
strong {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: $white;
|
|
|
|
.privacy-dropdown__option__content {
|
|
color: $white;
|
|
|
|
strong {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.emoji-picker-dropdown__menu {
|
|
.emoji-search-wrapper {
|
|
border-color: darken($ui-base-color, 10%);
|
|
}
|
|
.emoji-search {
|
|
background: darken($ui-base-color, 5%);
|
|
border-color: darken($ui-base-color, 10%);
|
|
}
|
|
.emoji-mart {
|
|
color: $ui-primary-color;
|
|
}
|
|
}
|
|
|
|
.search-popout {
|
|
background: $ui-base-color;
|
|
color: $ui-primary-color;
|
|
|
|
h4 {
|
|
color: $ui-primary-color;
|
|
}
|
|
|
|
em {
|
|
color: $ui-highlight-color;
|
|
}
|
|
}
|
|
.search__icon .fa.active {
|
|
opacity:1.0;
|
|
}
|
|
.search-results__hashtag {
|
|
color: darken($ui-primary-color, 10%);
|
|
&:hover {
|
|
color: lighten($ui-primary-color, 5%);
|
|
}
|
|
}
|
|
|
|
.static-content {
|
|
/*color: $primary-text-color;*/
|
|
}
|
|
|
|
#Getting-started {
|
|
background: $ui-primary-color;
|
|
border-bottom:0px;
|
|
color:white;
|
|
}
|
|
|
|
.getting-started {
|
|
p {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
a {
|
|
color: darken($ui-base-lighter-color, 10%);
|
|
}
|
|
}
|
|
.getting-started__wrapper {
|
|
flex: 0 0.5 auto;
|
|
}
|
|
|
|
.getting-started {
|
|
.column-link {
|
|
background: lighten($ui-primary-color, 5%);
|
|
color:$white;
|
|
&:hover {
|
|
background: lighten($ui-primary-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
.column-link__badge {
|
|
background: lighten($ui-primary-color, 25%);
|
|
}
|
|
|
|
.column-subheading {
|
|
background: darken($ui-primary-color, 5%);
|
|
color:$white;
|
|
}
|
|
|
|
.media-spoiler,
|
|
.video-player__spoiler.active {
|
|
color: $white;
|
|
&:hover {
|
|
color: darken($white, 5%);
|
|
}
|
|
}
|
|
|
|
.status {
|
|
border-bottom: 1px solid $ui-secondary-color;
|
|
}
|
|
|
|
.status__relative-time, .status__display-name {
|
|
color: darken($ui-base-color, 40%);
|
|
}
|
|
|
|
.status__content {
|
|
.status__content__spoiler-link {
|
|
background: $ui-base-lighter-color;
|
|
|
|
&:hover {
|
|
background: lighten($ui-base-lighter-color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.muted .status__content p {
|
|
color: $icon-button-inactive-color;
|
|
}
|
|
|
|
.dropdown-menu__item {
|
|
& > a {
|
|
color: $primary-text-color;
|
|
&:hover, &:active, &:focus {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown--active .dropdown__content {
|
|
& > ul {
|
|
background: $ui-base-color;
|
|
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
|
& > li > a {
|
|
background: $ui-base-color;
|
|
color: $primary-text-color;
|
|
|
|
&:hover {
|
|
background: $ui-highlight-color;
|
|
color: $ui-base-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.boost-modal,
|
|
.confirmation-modal,
|
|
.report-modal,
|
|
.actions-modal {
|
|
color: $primary-text-color;
|
|
}
|
|
.boost-modal__action-bar,
|
|
.confirmation-modal__action-bar,
|
|
.mute-modal__action-bar,
|
|
.report-modal__action-bar {
|
|
& > div {
|
|
color: $ui-primary-color;
|
|
}
|
|
}
|
|
|
|
.actions-modal
|
|
{
|
|
ul {
|
|
li:not(:empty) {
|
|
a {
|
|
color: $primary-text-color;
|
|
button {
|
|
|
|
}
|
|
&.active, &:hover, &:active, &:focus {
|
|
color: $white;
|
|
button {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.report-modal__comment .setting-text {
|
|
color: $primary-text-color;
|
|
border-bottom-color: lighten($ui-primary-color, 10%);
|
|
&:focus, &:active {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.status.light {
|
|
.status__content {
|
|
color: $primary-text-color;
|
|
}
|
|
.display-name strong {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.reply-indicator__content {
|
|
color: lighten($ui-highlight-color, 30%);
|
|
}
|
|
|
|
.status__content
|
|
{
|
|
a {
|
|
color: $ui-highlight-color;
|
|
|
|
&:hover {
|
|
.fa {
|
|
color: darken($ui-base-color, 40%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detailed-status__display-name {
|
|
color: $ui-base-lighter-color;
|
|
}
|
|
|
|
.drawer .drawer__inner {
|
|
overflow: visible;
|
|
height:inherit;
|
|
background:$ui-base-alt;
|
|
}
|
|
|
|
.search__icon .fa {
|
|
color: $ui-highlight-color;
|
|
}
|
|
|
|
.drawer__pager {
|
|
overflow-y:auto;
|
|
}
|
|
|
|
.drawer .drawer__header {
|
|
background: $ui-base-color;
|
|
border-radius:3px;
|
|
}
|
|
|
|
.onboarding-modal__page h1 {
|
|
background-color: darken($ui-primary-color, 5%);
|
|
}
|
|
|
|
.poll__text input[type="text"],
|
|
.compose-form__poll-wrapper select {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.compose-form__poll-wrapper .button.button-secondary {
|
|
color: $ui-highlight-color;
|
|
}
|
|
|
|
/* polls.scss */
|
|
|
|
.poll__chart {
|
|
background: saturate(lighten($ui-highlight-color, 50%), 10%);
|
|
&.leading {
|
|
background: saturate(lighten($ui-highlight-color, 40%), 20%);
|
|
}
|
|
}
|
|
|
|
/* forms.scss */
|
|
.block-button, .button, button {
|
|
background-color: $ui-primary-color;
|
|
color: $white;
|
|
|
|
&.button-alternative {
|
|
color: $ui-base-color;
|
|
}
|
|
|
|
&.logo-button {
|
|
color: $white;
|
|
svg path:first-child {
|
|
fill: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple_form {
|
|
p.hint {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.block-button, .button, button {
|
|
background-color: $ui-primary-color;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background-color: lighten($ui-primary-color, 5%);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: darken($ui-primary-color, 5%);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/* admin.scss */
|
|
|
|
.table > thead > tr > th {
|
|
border-bottom-color: $ui-secondary-color;
|
|
}
|
|
|
|
.simple_form h4 {
|
|
border-bottom: 1px solid $ui-highlight-color;
|
|
}
|
|
|
|
.admin-wrapper {
|
|
.content {
|
|
h2, p.hint, h4, h6 {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.muted-hint {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
ul {
|
|
ul {
|
|
a {
|
|
&.selected {
|
|
background-color: $ui-primary-color;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background-color: lighten($ui-primary-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
&.selected {
|
|
background-color: $ui-primary-color;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
background-color: lighten($ui-primary-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a.name-tag, .name-tag, a.inline-name-tag, .inline-name-tag {
|
|
color: $ui-primary-color;
|
|
}
|
|
|
|
.report-accounts__item > strong {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.admin-wrapper .content {
|
|
& > p {
|
|
color: $primary-text-color;
|
|
}
|
|
hr {
|
|
border-color: $ui-highlight-color;
|
|
}
|
|
}
|
|
|
|
.pagination .current {
|
|
color: $ui-primary-color;
|
|
}
|
|
|
|
/* accounts.scss */
|
|
.card {
|
|
.name {
|
|
color: $white;
|
|
}
|
|
|
|
.counter {
|
|
.counter-number {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stream_entries.scss */
|
|
.activity-stream {
|
|
.entry {
|
|
}
|
|
.status.light {
|
|
.display-name {
|
|
strong {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
.status__content {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
.detailed-status.light {
|
|
.detailed-status__display-name {
|
|
.display-name {
|
|
strong {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
.status__content {
|
|
color: $primary-text-color;
|
|
}
|
|
.status-card,
|
|
.status-card__title,
|
|
.status-card__description {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* accounts.scss */
|
|
.card {
|
|
.name {
|
|
color: darken($ui-primary-color, 15%);
|
|
}
|
|
.counter {
|
|
.counter-number {
|
|
color: darken($ui-primary-color, 15%);
|
|
}
|
|
border-color: $ui-primary-color;
|
|
}
|
|
}
|
|
|
|
.account-card {
|
|
.counter .counter-number,
|
|
& > .detailed-status__display-name .display-name strong
|
|
{
|
|
color:$primary-text-color;
|
|
}
|
|
}
|
|
|
|
.activity-stream-tabs {
|
|
a {
|
|
color: lighten($ui-primary-color, 10%);
|
|
&.active {
|
|
color: darken($ui-primary-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* uncategorized */
|
|
|
|
@media screen and (min-width: 1300px) {
|
|
.column {
|
|
flex-grow: 1 !important;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.drawer {
|
|
width: 17%;
|
|
max-width: 400px;
|
|
min-width: 330px;
|
|
}
|
|
}
|
|
|
|
.status time:after,
|
|
.detailed-status__datetime span:after {
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
content: "\00a0\00a0\f08e";
|
|
}
|
|
|
|
|
|
.column {
|
|
max-height:100vh;
|
|
& > .scrollable {
|
|
background-color: $ui-base-alt;
|
|
}
|
|
}
|
|
|
|
.empty-column-indicator, .error-column {
|
|
background-color: $ui-base-alt;
|
|
}
|
|
|
|
.actions .button.button-alternative {
|
|
background: $ui-highlight-color;
|
|
color: $white;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
background-color: lighten($ui-highlight-color, 4%);
|
|
}
|
|
}
|
|
|
|
.public-layout .header {
|
|
background: $ui-highlight-color;
|
|
color: $white;
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__name h1 {
|
|
color: $white;
|
|
small {
|
|
color: $white;
|
|
}
|
|
}
|
|
.public-layout .header .brand:hover,
|
|
.public-layout .header .brand:focus,
|
|
.public-layout .header .brand:active {
|
|
background: lighten($ui-highlight-color, 5%);
|
|
}
|
|
|
|
.public-layout .container:last-child {
|
|
background:$ui-highlight-color;
|
|
padding-left: 100px;
|
|
padding-right: 100px;
|
|
border-radius: 4px;
|
|
h4 {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.modal-layout, .modal-layout__mastodon > * {
|
|
background: none;
|
|
}
|
|
|
|
.dashboard__widgets a:not(.name-tag) {
|
|
color: $primary-text-color;
|
|
}
|