matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'soapbox/develop' into mastodon-groups

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2023-01-27 23:04:42 +01:00
parent dba963a6ce 82b6f55ac2
commit 1f39ddf0ec
443 changed files with 10101 additions and 30568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/styles/components/account-header.scss
View File

@@ -1,24 +0,0 @@
.account__header__content {
font-size: 14px;
font-weight: 400;
overflow: hidden;
word-break: normal;
word-wrap: break-word;
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
a {
color: inherit;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}

10
app/styles/components/audio-player.scss
View File

@@ -14,23 +14,23 @@
.video-player__volume::before,
.video-player__seek::before {
background: currentColor;
background: currentcolor;
opacity: 0.15;
}
.video-player__seek__buffer {
background: currentColor;
background: currentcolor;
opacity: 0.2;
}
.video-player__buttons button {
color: currentColor;
color: currentcolor;
opacity: 0.75;
&:active,
&:hover,
&:focus {
color: currentColor;
color: currentcolor;
opacity: 1;
}
}
@@ -38,7 +38,7 @@
.video-player__time-sep,
.video-player__time-total,
.video-player__time-current {
color: currentColor;
color: currentcolor;
}
.video-player__seek::before,

12
app/styles/components/backups.scss
View File

@@ -1,12 +0,0 @@
.backup {
padding: 15px;
border-bottom: 1px solid var(--brand-color--faint);
a {
color: var(--brand-color--hicontrast);
}
&--pending {
@apply text-gray-400 italic;
}
}

107
app/styles/components/buttons.scss
View File

@@ -6,110 +6,3 @@ button {
outline: none;
}
}
.button {
align-items: center;
border-color: transparent;
border-radius: 999px;
border-width: 1px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font-size: 14px;
font-weight: 500;
justify-content: center;
line-height: 20px;
padding: 8px 16px;
transition: 0.2s;
.svg-icon,
i.fa {
margin-right: 5px;
}
&__link {
text-decoration: none;
}
&--destructive {
background-color: var(--brand-color);
}
&--small {
font-size: 13px;
height: auto;
line-height: normal;
padding: 6px 10px;
}
&--large {
font-size: 16px;
padding: 10px 20px;
}
&:disabled,
&.disabled,
&:disabled:hover,
&.disabled:hover {
opacity: 0.75;
user-select: none;
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: #fff;
background: var(--brand-color);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color);
}
}
&.button-alternative-2 {
background: var(--accent-color);
&:active,
&:focus,
&:hover {
background-color: var(--accent-color--bright);
}
}
}
button,
a.button {
&.standard {
// NOTE - will define the larger standard buttons here and apply class where used.
&-small {
@include font-size(11);
@include line-height(11);
@include font-weight(bold);
height: 20px;
padding: 5px 15px;
border: 0;
border-radius: 4px;
text-transform: uppercase;
color: #fff;
background: #607cf5;
}
}
i.fa {
margin-right: 0.6em;
}
}

4
app/styles/components/columns.scss
View File

@@ -67,10 +67,6 @@
.column-header__setting-btn {
&--link {
text-decoration: none;
.fa {
@apply ml-2.5;
}
}
&:hover {

13
app/styles/components/datepicker.scss
View File

@@ -10,12 +10,12 @@
}
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
@apply border-b-white dark:border-b-gray-900;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
@apply border-b-gray-200 dark:border-b-gray-700;
}
@@ -25,7 +25,6 @@
.react-datepicker__header {
@apply bg-white dark:bg-gray-900 border-b-0 py-1 px-0;
@apply rounded-tl-lg;
}
.react-datepicker__current-month,
@@ -137,9 +136,13 @@
@apply bg-primary-50 hover:bg-primary-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-primary-600 dark:text-primary-400;
}
.react-datepicker__close-icon {
@apply rtl:left-0 rtl:right-auto rtl:pr-0 rtl:pl-[6px];
}
.react-datepicker__close-icon::after {
@apply bg-transparent text-gray-600 dark:text-gray-400 text-base;
font-family: 'Font Awesome 5 Free';
content: "";
content: '';
font-weight: 900;
}

29
app/styles/components/detailed-status.scss
View File

@@ -10,36 +10,11 @@
}
.status__content-wrapper {
padding-left: calc(42px + 12px);
@apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
}
// &__descendants &__status:first-child {
// margin-top: 10px;
// .status__wrapper--filtered {
// margin-top: -10px;
// }
// }
// &__status--focused:first-child,
// &__ancestors &__status:first-child {
// margin-top: 10px;
// .status__wrapper--filtered {
// margin-top: -10px;
// }
// }
// &__descendants &__status:last-child {
// margin-bottom: 10px;
// .status__wrapper--filtered {
// margin-bottom: -10px;
// }
// }
&__connector {
@apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1];
@apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1] rtl:right-5 rtl:left-auto;
&--bottom {
@apply block;

10
app/styles/components/display-name.scss
View File

@@ -9,10 +9,10 @@
bdi {
min-width: 0;
}
}
.display-name__account {
position: relative;
font-size: 14px;
font-weight: 600;
&__account {
position: relative;
font-weight: 600;
font-size: 14px;
}
}

1
app/styles/components/dropdown-menu.scss
View File

@@ -67,4 +67,3 @@
@apply block my-2 h-[1px] bg-gray-100 dark:bg-gray-800;
}
}
// end .dropdown-menu

6
app/styles/components/filters.scss
View File

@@ -39,7 +39,7 @@
@apply static;
}
input[type="checkbox"] {
input[type='checkbox'] {
position: absolute;
top: 3px;
left: 0;
@@ -68,12 +68,12 @@
@apply pr-1 capitalize;
&::after {
content: ",";
content: ',';
}
&:last-of-type {
&::after {
content: "";
content: '';
}
}
}

10
app/styles/components/icon.scss
View File

@@ -15,7 +15,7 @@
&--active {
&.svg-icon--home svg {
fill: currentColor;
fill: currentcolor;
}
svg.icon-tabler-search,
@@ -26,14 +26,14 @@
svg.icon-tabler-bell,
svg.icon-tabler-messages {
path:nth-child(2) {
fill: currentColor;
fill: currentcolor;
}
}
svg.icon-tabler-users {
circle,
circle + path {
fill: currentColor;
fill: currentcolor;
}
}
@@ -41,8 +41,8 @@
stroke: var(--background-color);
rect {
fill: currentColor;
stroke: currentColor;
fill: currentcolor;
stroke: currentcolor;
}
}
}

17
app/styles/components/inputs.scss
View File

@@ -1,17 +0,0 @@
input[type='text'],
textarea {
&.standard {
@apply border-gray-400;
@include font-size(16);
@include line-height(18);
@include input-placeholder(#868393);
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid;
border-radius: 4px;
color: var(--brand-color);
background: var(--foreground-color);
&:focus { outline: none; }
}
}
textarea.standard { resize: vertical; }

1
app/styles/components/media-gallery.scss
View File

@@ -2,6 +2,7 @@
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
isolation: isolate;
position: relative;
width: 100%;
height: auto;

23
app/styles/components/modal.scss
View File

@@ -7,8 +7,8 @@
}
.media-modal {
width: 100%;
height: 100%;
// https://stackoverflow.com/a/8468131
@apply w-full h-full absolute inset-0;
.audio-player.detailed,
.extended-video-player {
@@ -234,17 +234,6 @@
@apply text-gray-400;
background-color: var(--background-color);
}
&.onboarding-modal__done,
&.onboarding-modal__next {
@apply text-gray-900;
&:hover,
&:focus,
&:active {
@apply text-gray-900;
}
}
}
}
@@ -253,10 +242,6 @@
border-radius: 10px;
border: 1px solid var(--background-color);
.status__display-name {
@apply block w-full pr-6;
}
.dropdown-menu__separator {
@apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
}
@@ -302,7 +287,7 @@
}
}
button[type="button"] {
button[type='button'] {
@apply w-full justify-center text-center;
}
}
@@ -344,7 +329,7 @@
&::before,
&::after {
@apply border-b border-gray-300 dark:border-gray-600;
content: "";
content: '';
flex: 1;
}
}

3
app/styles/components/reply-mentions.scss
View File

@@ -2,7 +2,8 @@
@apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
&__account {
@apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline;
@apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
direction: ltr;
}
}

18
app/styles/components/sidebar-menu.scss
View File

@@ -1,18 +0,0 @@
.sidebar-menu {
@apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000;
@media (max-width: 400px) {
width: 90vw;
transform: translateX(-90vw);
}
hr {
@apply border-gray-200 dark:border-gray-700;
}
}
.sidebar-menu__root--visible {
.sidebar-menu {
transform: translateX(0);
}
}

59
app/styles/components/snackbar.scss
View File

@@ -1,59 +0,0 @@
.notification-list {
@apply w-full flex flex-col items-center space-y-2 sm:items-end z-[1001] relative;
}
.notification-bar {
@apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-gray-900 shadow-lg rounded-lg pointer-events-auto dark:ring-2 dark:ring-gray-800 overflow-hidden;
&::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 20px;
}
}
.notification-bar-success {
@apply text-success-500;
&::before {
@apply ml-4 rtl:ml-0 rtl:mr-4;
content: '\f058';
}
}
.notification-bar-error {
@apply text-danger-500 ml-4;
&::before {
@apply ml-4 rtl:ml-0 rtl:mr-4;
content: '\f057';
}
}
.notification-bar-info {
@apply text-primary-500 ml-4 rtl:ml-0 rtl:mr-4;
&::before {
@apply ml-4;
content: '\f05a';
}
}
.notification-bar-wrapper {
@apply p-4 flex items-center justify-between w-full space-x-2 rtl:space-x-reverse;
}
.notification-bar-title {
@apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-100;
}
.notification-bar-message {
@apply text-sm text-gray-800 dark:text-gray-200;
}
.notification-bar-action a {
@apply inline-flex items-center px-2.5 py-1 border border-solid border-gray-300
shadow-sm text-xs font-medium rounded-full text-gray-700 bg-white
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-primary-500;
}

93
app/styles/components/status.scss
View File

@@ -13,44 +13,10 @@
}
opacity: 1;
animation: fade 150ms linear;
&.light {
.display-name {
strong {
@apply text-gray-900;
}
span {
@apply text-gray-400;
}
}
.status__content {
@apply text-gray-900;
a {
color: var(--highlight-text-color);
}
}
}
&__meta {
@apply text-gray-400 text-sm;
a {
color: var(--brand-color);
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
[column-type=filled] .status__wrapper,
[column-type=filled] .status-placeholder {
[column-type='filled'] .status__wrapper,
[column-type='filled'] .status-placeholder {
@apply rounded-none shadow-none p-4;
}
@@ -92,26 +58,16 @@
.focusable-within:focus-within {
outline: 0; /* Required b/c HotKeys lib sets this outline */
@apply ring-2 ring-primary-300;
.status.status-direct {
&.muted {
background: transparent;
}
}
}
.status-card {
@apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 min-h-[150px] no-underline overflow-hidden;
@apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 no-underline overflow-hidden;
}
a.status-card {
@apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
}
.status-card-photo {
@apply cursor-zoom-in block no-underline w-full h-auto;
}
.status-card-video,
.status-card-audio {
iframe {
@@ -120,23 +76,6 @@ a.status-card {
}
}
.status-card__host {
@apply text-primary-600 dark:text-accent-blue;
display: flex;
margin-top: 10px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
.svg-icon {
height: 15px;
width: 15px;
margin-right: 3px;
}
}
.status-card__image {
flex: 0 0 40%;
background: var(--brand-color--med);
@@ -156,18 +95,10 @@ a.status-card {
stroke-width: 1px;
}
}
&--empty {
flex: 0 0 80px;
}
}
.status-card.horizontal {
display: block;
.status-card__title {
white-space: inherit;
}
}
.status-card.compact {
@@ -193,27 +124,9 @@ a.status-card {
.status {
padding: 8px 10px;
&__avatar {
position: relative;
margin-right: 10px;
top: 0;
left: 0;
}
&__profile {
display: flex;
align-items: center;
}
&__content {
padding-top: 10px;
}
&__display-name {
.display-name__account {
display: block;
}
}
}
}

4
app/styles/components/video-player.scss
View File

@@ -165,7 +165,7 @@
}
&::before {
content: "";
content: '';
width: 50px;
background: rgba(#fff, 0.35);
border-radius: 4px;
@@ -235,7 +235,7 @@
position: relative;
&::before {
content: "";
content: '';
width: 100%;
background: rgba(#fff, 0.35);
border-radius: 4px;