Merge branch 'develop' into 'icon_picker_admin_config'
# Conflicts: # app/soapbox/features/forms/index.js # app/soapbox/features/soapbox_config/index.js
This commit is contained in:
Sean King
@ -76,3 +76,6 @@
|
||||
@import 'components/profile_hover_card';
|
||||
@import 'components/filters';
|
||||
@import 'components/mfa_form';
|
||||
|
||||
// Holiday
|
||||
@import 'holiday/halloween';
|
||||
|
||||
@ -94,6 +94,41 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-toggle .react-toggle-thumb {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border: 1px solid var(--brand-color--med);
|
||||
}
|
||||
|
||||
.audio-toggle .react-toggle {
|
||||
height: 16px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.audio-toggle .react-toggle-track {
|
||||
height: 16px;
|
||||
width: 34px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.audio-toggle .react-toggle-track-check {
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 19px;
|
||||
}
|
||||
|
||||
.audio-toggle .react-toggle-track-x {
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
@ -111,14 +146,23 @@
|
||||
max-width: 70%;
|
||||
border-radius: 10px;
|
||||
background-color: var(--background-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
white-space: break-spaces;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
color: var(--brand-color--hicontrast);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active, {
|
||||
.chat-message__menu {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--me .chat-message__bubble {
|
||||
@ -129,6 +173,17 @@
|
||||
&--pending .chat-message__bubble {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: var(--background-color);
|
||||
border-radius: 999px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
@ -152,6 +207,10 @@
|
||||
.display-name {
|
||||
display: flex;
|
||||
|
||||
.hover-ref-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
bdi {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -274,7 +333,38 @@
|
||||
border-radius: 0 0 10px 10px;
|
||||
|
||||
&__actions textarea {
|
||||
padding: 10px;
|
||||
padding: 10px 40px 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 630px) {
|
||||
.columns-area__panels__main .columns-area {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.columns-area--mobile .column {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
.chat-box {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--foreground-color);
|
||||
|
||||
&__actions {
|
||||
padding: 0;
|
||||
|
||||
textarea {
|
||||
height: 4em;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -297,6 +387,7 @@
|
||||
margin-left: auto;
|
||||
padding-right: 15px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
.account__avatar {
|
||||
margin-right: 7px;
|
||||
@ -368,3 +459,11 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages__divider {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
padding: 14px 0 2px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@ -703,3 +703,16 @@
|
||||
.column-link--transparent .icon-with-badge__badge {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
|
||||
.column__switch .audio-toggle {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 12px;
|
||||
right: 14px;
|
||||
|
||||
.react-toggle-track-check,
|
||||
.react-toggle-track-x {
|
||||
height: 16px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,16 +105,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
.profile-hover-card {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the popper when the reference is hidden */
|
||||
#popper[data-popper-reference-hidden] {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
width: 275px;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -30,12 +29,10 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: column;
|
||||
padding-bottom: 40px;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__section {
|
||||
|
||||
158
app/styles/holiday/halloween.scss
Normal file
158
app/styles/holiday/halloween.scss
Normal file
@ -0,0 +1,158 @@
|
||||
body.halloween {
|
||||
// Set brand color to orange
|
||||
--brand-color_h: 29.727272727272727;
|
||||
--brand-color_s: 100%;
|
||||
--brand-color_l: 43.13725490196079%;
|
||||
|
||||
// Stars BG
|
||||
background-color: #904700; // Color matches twinkle.svg
|
||||
background-image: url('../images/halloween/starfield.png');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
|
||||
// Full-screen pseudo-elements to hold BG graphics
|
||||
&::before,
|
||||
&::after,
|
||||
.app-holder::before,
|
||||
.app-holder::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;
|
||||
}
|
||||
|
||||
// Spiderweb BG
|
||||
&::before {
|
||||
background-image: url('../images/halloween/spiderweb.svg');
|
||||
}
|
||||
|
||||
// Twinkle effect by masking with semi-transparent animated circles
|
||||
&::after {
|
||||
z-index: -101;
|
||||
background: transparent url("../images/halloween/twinkle.svg") repeat top center;
|
||||
animation: halloween-twinkle 200s linear infinite;
|
||||
}
|
||||
|
||||
.app-holder {
|
||||
// Black vignette
|
||||
&::before {
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
transparent 0%,
|
||||
transparent 60%,
|
||||
#000 100%
|
||||
);
|
||||
}
|
||||
|
||||
// Floating clouds BG
|
||||
&::after {
|
||||
background: transparent url("../images/halloween/clouds.png") repeat top center;
|
||||
animation: halloween-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/halloween/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;
|
||||
}
|
||||
|
||||
// Witch emblem
|
||||
.getting-started__footer::before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-image: url('../images/halloween/halloween-emblem.svg');
|
||||
background-size: contain;
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// Color fixes
|
||||
// Elements directly over the BG need static colors that don't change
|
||||
// regardless of the theme-mode
|
||||
.getting-started__footer {
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: hsla(0, 0%, 100%, 0.4);
|
||||
}
|
||||
|
||||
p {
|
||||
color: hsla(0, 0%, 100%, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.profile-info-panel {
|
||||
color: #fff;
|
||||
|
||||
&-content__name h1 {
|
||||
span:first-of-type {
|
||||
color: hsla(0, 0%, 100%, 0.6);
|
||||
}
|
||||
|
||||
small {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-content__bio {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-content__bio a,
|
||||
&-content__fields a {
|
||||
color: hsl(
|
||||
var(--brand-color_h),
|
||||
var(--brand-color_s),
|
||||
calc(var(--brand-color_l) + 8%)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes halloween-twinkle {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: -10000px 5000px; }
|
||||
}
|
||||
|
||||
@keyframes halloween-clouds {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 10000px 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user