190 lines
3.8 KiB
SCSS
190 lines
3.8 KiB
SCSS
@keyframes twinkle {
|
|
from { background-position: 0 0; }
|
|
to { background-position: -10000px 5000px; }
|
|
}
|
|
|
|
@keyframes clouds {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 10000px 0; }
|
|
}
|
|
|
|
body::before,
|
|
body.app-body::after,
|
|
#gabsocial::before,
|
|
#gabsocial::after {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -100;
|
|
}
|
|
|
|
body.app-body {
|
|
background-color: $halloween-dark;
|
|
background-image: url('../images/starfield.png');
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
}
|
|
|
|
body::before {
|
|
background-image: url('../images/spiderweb.svg');
|
|
}
|
|
|
|
body.app-body::after {
|
|
z-index: -101;
|
|
background: transparent url("../images/twinkle.svg") repeat top center;
|
|
animation: twinkle 200s linear infinite;
|
|
}
|
|
|
|
#gabsocial::before {
|
|
background-image: radial-gradient(
|
|
circle,
|
|
transparent 0%,
|
|
transparent 60%,
|
|
darken($halloween-dark, 30%) 100%
|
|
);
|
|
}
|
|
|
|
#gabsocial::after {
|
|
background: transparent url("../images/clouds.png") repeat top center;
|
|
animation: clouds 200s linear infinite;
|
|
}
|
|
|
|
// Dangling spider
|
|
.ui .page__top::after,
|
|
.ui .page__columns::after {
|
|
content: '';
|
|
display: block;
|
|
width: 100px;
|
|
height: 100px;
|
|
right: 20px;
|
|
background-image: url('../images/spider.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: top right;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
.ui .page__columns::after {
|
|
position: fixed;
|
|
top: 50px;
|
|
}
|
|
.ui .page__top::after {
|
|
position: absolute;
|
|
bottom: -100px;
|
|
}
|
|
.ui .page__top + .page__columns::after {
|
|
display: none;
|
|
}
|
|
|
|
.search__input {
|
|
border-color: $halloween-dark;
|
|
color: black;
|
|
}
|
|
|
|
.search__icon .fa-times-circle,
|
|
.search__icon .fa {
|
|
color: $halloween-dark;
|
|
|
|
&:hover {
|
|
color: lighten($halloween-dark, 10%);
|
|
}
|
|
}
|
|
|
|
.search__input::placeholder {
|
|
color: darken($halloween-dark, 10%);
|
|
}
|
|
|
|
.admin-wrapper .content h2 {
|
|
color: white;
|
|
}
|
|
|
|
.compose-form .autosuggest-textarea__textarea,
|
|
.compose-form .spoiler-input__input {
|
|
color: darken($halloween-dark, 15%);
|
|
}
|
|
|
|
.tabs-bar__button-compose:hover {
|
|
background-color: $nav-ui-highlight-color !important;
|
|
}
|
|
|
|
.floating-action-button {
|
|
filter: hue-rotate(120deg);
|
|
}
|
|
|
|
.button {
|
|
background-color: $halloween-orange;
|
|
&:focus, &:hover { background-color: darken($halloween-orange, 10%);}
|
|
color: black;
|
|
}
|
|
.simple_form button, .simple_form .button, .simple_form .block-button {
|
|
color: black;
|
|
}
|
|
|
|
.getting-started__footer::before {
|
|
content: '';
|
|
display: block;
|
|
background-image: url('../images/halloween-emblem.svg');
|
|
background-size: contain;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.icon-with-badge__badge {
|
|
background-color: $halloween-dark;
|
|
}
|
|
|
|
.detailed-status,
|
|
.detailed-status__action-bar {
|
|
background-color: #282828;
|
|
}
|
|
|
|
.focusable:focus,
|
|
.focusable:focus .detailed-status,
|
|
.focusable:focus .detailed-status__action-bar {
|
|
background-color: #333;
|
|
}
|
|
|
|
.timeline-queue-header,
|
|
.notification__filter-bar,
|
|
.account__section-headline,
|
|
.notification__filter-bar button,
|
|
.account__section-headline button {
|
|
background: transparent;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-color: $halloween-orange;
|
|
}
|
|
.dropdown-menu__item a {
|
|
color: $halloween-orange;
|
|
}
|
|
.dropdown-menu__arrow.bottom {
|
|
border-bottom-color: $halloween-orange;
|
|
}
|
|
.dropdown-menu__arrow.top {
|
|
border-top-color: $halloween-orange;
|
|
}
|
|
|
|
.compose-modal {
|
|
background: $gab-background-container;
|
|
}
|
|
|
|
.boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
|
|
background: $halloween-dark;
|
|
}
|
|
.boost-modal, .confirmation-modal, .report-modal, .actions-modal, .mute-modal {
|
|
border-color: $halloween-orange;
|
|
}
|
|
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
|
|
color: black;
|
|
}
|