2021-12-21 14:51:36 +01:00
|
|
|
@import '../init/breakpoints';
|
2021-12-21 13:42:28 +01:00
|
|
|
@import '../init/mixins';
|
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
.header {
|
2020-04-30 17:01:11 +02:00
|
|
|
z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header
|
2019-04-18 18:51:15 +02:00
|
|
|
position: fixed;
|
2019-06-11 20:10:58 +02:00
|
|
|
top: 0;
|
2022-02-18 18:03:15 +01:00
|
|
|
width: 100vw;
|
2019-11-22 22:13:00 +01:00
|
|
|
background-color: var(--color-header-background);
|
2019-07-21 23:31:22 +02:00
|
|
|
font-size: var(--font-body);
|
2021-12-21 13:42:28 +01:00
|
|
|
user-select: none;
|
2019-10-09 18:34:18 +02:00
|
|
|
-webkit-user-select: none;
|
|
|
|
-webkit-app-region: drag;
|
2022-02-11 19:50:55 +01:00
|
|
|
-webkit-backdrop-filter: blur(4px);
|
|
|
|
backdrop-filter: blur(4px);
|
2019-06-28 09:33:07 +02:00
|
|
|
|
2022-02-15 16:40:19 +01:00
|
|
|
button.skip-button {
|
2021-07-15 05:08:30 +02:00
|
|
|
opacity: 0;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
overflow: hidden;
|
2021-07-15 22:14:21 +02:00
|
|
|
margin-right: var(--spacing-l);
|
|
|
|
|
2021-07-15 05:08:30 +02:00
|
|
|
&:focus {
|
|
|
|
opacity: 1;
|
|
|
|
position: relative;
|
|
|
|
overflow: unset;
|
2021-12-21 13:42:28 +01:00
|
|
|
width: unset;
|
|
|
|
height: unset;
|
2021-07-15 05:08:30 +02:00
|
|
|
}
|
|
|
|
}
|
2021-12-28 13:55:23 +01:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.header__menu--right {
|
|
|
|
.header__navigationItem--balance {
|
|
|
|
.button__label {
|
|
|
|
margin-left: var(--spacing-xxs) !important;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.button__label {
|
|
|
|
color: var(--color-odysee-contrast) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.button--link {
|
|
|
|
color: var(--color-odysee) !important;
|
|
|
|
&:hover {
|
|
|
|
color: var(--color-link-hover) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.button--primary {
|
|
|
|
background-color: var(--color-odysee) !important;
|
|
|
|
color: var(--color-odysee-contrast) !important;
|
|
|
|
}
|
|
|
|
|
2022-03-09 22:28:37 +01:00
|
|
|
.comment__badge {
|
|
|
|
padding-right: var(--spacing-xxs);
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
margin-bottom: -4px;
|
|
|
|
width: 18px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-28 13:55:23 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
.card__actions--between {
|
|
|
|
.header__menu--left,
|
|
|
|
.header__menu--right {
|
|
|
|
width: 5rem;
|
|
|
|
min-width: 5rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-02-11 19:50:55 +01:00
|
|
|
|
|
|
|
*:focus-visible:not(.wunderbar__input):not(.menu__list):not(.menu__list--header):not(.button--secondary):not(.button-like):not(.button-dislike):not(select):not(input):not(textarea):not(video) {
|
|
|
|
background-color: rgba(var(--color-primary-static), 0.2) !important;
|
|
|
|
color: var(--color-text) !important;
|
|
|
|
// outline: 2px solid var(--color-primary);
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-odysee) inset;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
stroke: var(--color-text) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
select:focus-visible,
|
|
|
|
input:focus-visible:not(.wunderbar__input),
|
|
|
|
textarea:focus-visible {
|
|
|
|
box-shadow: 0px 0px 0px 2px var(--color-odysee) inset;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ff-container {
|
|
|
|
canvas {
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
.freezeframe-img {
|
|
|
|
width: var(--height-button) !important;
|
|
|
|
height: var(--height-button) !important;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
}
|
2018-06-25 08:07:45 +02:00
|
|
|
}
|
|
|
|
|
2019-08-27 16:43:42 +02:00
|
|
|
.header--minimal {
|
|
|
|
box-shadow: none;
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: var(--color-header-background);
|
2019-08-27 16:43:42 +02:00
|
|
|
border-bottom: none;
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__navigation {
|
|
|
|
padding: var(--spacing-xs);
|
|
|
|
}
|
|
|
|
|
|
|
|
.header__navigationItem--logo {
|
|
|
|
height: 3rem;
|
|
|
|
}
|
2021-12-28 13:55:23 +01:00
|
|
|
|
|
|
|
.header__menu--left,
|
|
|
|
.header__menu--right {
|
|
|
|
width: unset;
|
|
|
|
min-width: unset;
|
|
|
|
}
|
2019-10-09 18:34:18 +02:00
|
|
|
}
|
|
|
|
|
2019-06-11 20:10:58 +02:00
|
|
|
.header__contents {
|
|
|
|
display: flex;
|
2019-12-18 06:27:08 +01:00
|
|
|
align-items: center;
|
2021-12-21 13:42:28 +01:00
|
|
|
flex: 1;
|
|
|
|
height: var(--header-height);
|
|
|
|
padding: var(--spacing-s) var(--spacing-m);
|
2022-05-10 14:01:19 +02:00
|
|
|
margin-right: var(--body-scrollbar-width);
|
|
|
|
width: unset;
|
2019-12-18 06:27:08 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
2020-08-18 16:17:45 +02:00
|
|
|
padding: var(--spacing-xs);
|
2021-12-21 14:47:24 +01:00
|
|
|
height: var(--header-height-mobile);
|
2019-12-18 06:27:08 +01:00
|
|
|
}
|
2019-06-11 20:10:58 +02:00
|
|
|
}
|
|
|
|
|
2018-12-19 06:44:53 +01:00
|
|
|
.header__navigation {
|
2018-06-25 08:07:45 +02:00
|
|
|
display: flex;
|
2019-11-22 22:13:00 +01:00
|
|
|
align-items: center;
|
2021-12-21 13:42:28 +01:00
|
|
|
justify-content: space-between;
|
|
|
|
flex: 1;
|
|
|
|
height: var(--header-height);
|
|
|
|
padding: var(--spacing-s) var(--spacing-m);
|
|
|
|
flex-wrap: nowrap;
|
2022-02-18 18:03:15 +01:00
|
|
|
margin-right: var(--body-scrollbar-width);
|
2021-12-21 13:42:28 +01:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.wunderbar__wrapper {
|
|
|
|
.wunderbar__input {
|
|
|
|
background-color: var(--color-header-button) !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.wunderbar__input {
|
|
|
|
outline: 2px solid var(--color-header-button-hover) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.wunderbar__input:focus-visible {
|
|
|
|
outline: 2px solid var(--color-header-button-hover) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.button--alt {
|
|
|
|
background-color: var(--color-header-button);
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: var(--color-odysee);
|
|
|
|
color: var(--color-odysee-contrast);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.button__content {
|
|
|
|
&:hover {
|
|
|
|
.button__label {
|
2022-02-14 10:38:43 +01:00
|
|
|
color: var(--color-text);
|
2022-02-11 19:50:55 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-21 14:47:24 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
padding: var(--spacing-xs);
|
|
|
|
height: var(--header-height-mobile);
|
2022-02-11 19:50:55 +01:00
|
|
|
|
|
|
|
.button--alt {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
.button__content {
|
|
|
|
width: unset;
|
|
|
|
height: 22px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.header__navigationItem--logo {
|
|
|
|
border-radius: 50%;
|
|
|
|
svg {
|
|
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.button,
|
|
|
|
.header__navigationItem--icon {
|
|
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
|
|
background-color: rgba(var(--color-primary-static), 0.6);
|
|
|
|
.icon {
|
|
|
|
stroke: var(--color-odysee-contrast);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.channel-thumbnail {
|
|
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.wunderbar__wrapper--mobile {
|
|
|
|
border-bottom: unset !important;
|
|
|
|
.wunderbar__input {
|
|
|
|
border-radius: var(--border-radius) !important;
|
|
|
|
background-color: var(--color-header-button) !important;
|
|
|
|
&:focus-visible,
|
|
|
|
&:focus {
|
|
|
|
outline: 2px solid var(--color-odysee) !important;
|
|
|
|
}
|
2021-12-21 13:42:28 +01:00
|
|
|
}
|
2018-06-25 08:07:45 +02:00
|
|
|
}
|
|
|
|
|
2019-08-21 22:54:44 +02:00
|
|
|
.header__menu {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2021-12-28 13:55:23 +01:00
|
|
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
width: 15rem;
|
|
|
|
min-width: 15rem;
|
|
|
|
}
|
2019-12-18 06:27:08 +01:00
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__menu--left {
|
|
|
|
@extend .header__menu;
|
|
|
|
justify-content: flex-start;
|
2022-02-11 19:50:55 +01:00
|
|
|
margin-left: var(--spacing-s);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
margin-left: unset;
|
|
|
|
}
|
2021-12-21 13:42:28 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.header__menu--right {
|
|
|
|
@extend .header__menu;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
|
2020-08-10 22:47:39 +02:00
|
|
|
.header__buttons {
|
2019-04-18 18:51:15 +02:00
|
|
|
display: flex;
|
2019-04-01 01:04:01 +02:00
|
|
|
}
|
|
|
|
|
2021-12-21 19:46:32 +01:00
|
|
|
.header__logo {
|
2021-07-30 18:07:32 +02:00
|
|
|
height: var(--height-button);
|
2021-08-01 20:11:17 +02:00
|
|
|
max-width: -webkit-fit-content;
|
|
|
|
max-width: -moz-fit-content;
|
2021-07-30 18:07:32 +02:00
|
|
|
max-width: fit-content;
|
2021-12-21 19:46:32 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
height: var(--height-button-mobile);
|
|
|
|
}
|
2021-07-30 18:07:32 +02:00
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__navigationItem {
|
2019-11-22 22:13:00 +01:00
|
|
|
height: var(--height-button);
|
2019-03-29 15:23:32 +01:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2019-11-22 22:13:00 +01:00
|
|
|
border-radius: var(--border-radius);
|
2020-07-23 16:22:57 +02:00
|
|
|
position: relative;
|
2020-08-10 22:47:39 +02:00
|
|
|
font-weight: var(--font-weight-bold);
|
2018-06-25 08:07:45 +02:00
|
|
|
|
2019-11-22 22:13:00 +01:00
|
|
|
svg {
|
|
|
|
stroke: var(--color-text);
|
2018-06-25 08:07:45 +02:00
|
|
|
}
|
2021-12-21 13:42:28 +01:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
&[aria-expanded='true']:not(.header__navigationItem--profilePic) {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
&:not(.button-rotate) {
|
|
|
|
background-color: var(--color-header-button-hover);
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
stroke: var(--color-odysee-contrast);
|
|
|
|
}
|
|
|
|
}
|
2021-12-21 13:42:28 +01:00
|
|
|
}
|
2021-12-21 14:47:24 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
height: var(--height-button-mobile);
|
|
|
|
}
|
2019-03-28 17:53:13 +01:00
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__navigationItem--icon {
|
|
|
|
@extend .header__navigationItem;
|
2020-01-02 17:30:27 +01:00
|
|
|
width: var(--height-button);
|
|
|
|
background-color: var(--color-header-button);
|
|
|
|
border-radius: 1.5rem;
|
2020-08-10 22:47:39 +02:00
|
|
|
margin-right: var(--spacing-s);
|
2020-01-02 17:30:27 +01:00
|
|
|
|
|
|
|
&:hover {
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: var(--color-odysee);
|
2020-01-02 21:36:03 +01:00
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.icon {
|
|
|
|
stroke: var(--color-odysee-contrast);
|
2020-05-11 16:21:00 +02:00
|
|
|
}
|
2020-01-02 21:36:03 +01:00
|
|
|
}
|
2020-01-30 21:55:45 +01:00
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
margin: 0;
|
2022-02-11 19:50:55 +01:00
|
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
2021-12-21 13:42:28 +01:00
|
|
|
}
|
|
|
|
|
2020-01-30 21:55:45 +01:00
|
|
|
span {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2018-12-19 06:44:53 +01:00
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__navigationItem--profilePic {
|
|
|
|
margin-right: var(--spacing-s);
|
2022-02-11 19:50:55 +01:00
|
|
|
border-radius: 50%;
|
2021-03-04 07:03:58 +01:00
|
|
|
|
2020-10-05 20:04:31 +02:00
|
|
|
.channel-thumbnail {
|
|
|
|
height: var(--height-button);
|
|
|
|
width: var(--height-button);
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
|
2022-02-11 19:50:55 +01:00
|
|
|
.channel-staked__tooltip {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2022-02-15 20:44:06 +01:00
|
|
|
.channel-staked__wrapper {
|
|
|
|
.icon {
|
|
|
|
stroke: #131213 !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-05 20:04:31 +02:00
|
|
|
&:hover {
|
2022-02-11 19:50:55 +01:00
|
|
|
.ff-canvas {
|
|
|
|
opacity: 0 !important;
|
|
|
|
transition: opacity 1s !important;
|
|
|
|
}
|
|
|
|
.ff-image {
|
|
|
|
opacity: 1 !important;
|
|
|
|
}
|
2020-10-05 20:04:31 +02:00
|
|
|
}
|
2021-12-21 14:47:24 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
.channel-thumbnail {
|
|
|
|
height: var(--height-button-mobile);
|
|
|
|
width: var(--height-button-mobile);
|
|
|
|
}
|
|
|
|
}
|
2020-10-05 20:04:31 +02:00
|
|
|
}
|
|
|
|
|
2021-12-21 14:21:14 +01:00
|
|
|
.header__navigationItem--iconSkeleton {
|
|
|
|
@extend .header__navigationItem--icon;
|
|
|
|
height: var(--height-button) !important;
|
|
|
|
width: var(--height-button) !important;
|
2021-12-21 14:47:24 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
2022-02-11 19:50:55 +01:00
|
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
2021-12-21 14:47:24 +01:00
|
|
|
}
|
2021-12-21 14:21:14 +01:00
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__navigationItem--balance {
|
|
|
|
@extend .header__navigationItem;
|
2021-03-04 07:03:58 +01:00
|
|
|
margin: 0 var(--spacing-s);
|
2022-02-11 19:50:55 +01:00
|
|
|
padding-left: var(--spacing-s);
|
|
|
|
padding-right: var(--spacing-s);
|
|
|
|
background-color: var(--color-header-button);
|
2021-03-04 07:03:58 +01:00
|
|
|
|
|
|
|
&:hover {
|
2022-02-11 19:50:55 +01:00
|
|
|
background-color: var(--color-header-button-hover);
|
|
|
|
color: var(--color-primary-contrast);
|
2021-03-04 07:03:58 +01:00
|
|
|
}
|
2021-12-21 14:47:24 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
margin: 0 !important;
|
|
|
|
padding: 0 !important;
|
|
|
|
width: 5rem;
|
|
|
|
}
|
2020-08-26 22:28:33 +02:00
|
|
|
}
|
|
|
|
|
2021-12-21 14:21:14 +01:00
|
|
|
.header__navigationItem--balanceLoading {
|
|
|
|
margin: 0 var(--spacing-s);
|
|
|
|
width: 4rem;
|
|
|
|
background-color: var(--color-header-button);
|
2021-12-21 14:47:24 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
margin: 0 !important;
|
|
|
|
width: 5rem;
|
|
|
|
}
|
2021-12-21 14:21:14 +01:00
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__navigationItem--logo {
|
|
|
|
@extend .header__navigationItem;
|
2021-04-26 21:19:17 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2021-12-21 19:46:32 +01:00
|
|
|
margin: 0 var(--spacing-s);
|
2021-07-26 00:40:53 +02:00
|
|
|
color: var(--color-text);
|
2021-12-21 14:21:14 +01:00
|
|
|
|
2021-12-21 19:46:32 +01:00
|
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
width: 150px;
|
2021-04-27 04:43:06 +02:00
|
|
|
}
|
2021-12-21 14:21:14 +01:00
|
|
|
|
2021-04-26 21:19:17 +02:00
|
|
|
@media (max-width: $breakpoint-small) {
|
2022-02-11 19:50:55 +01:00
|
|
|
// margin-right: var(--spacing-m);
|
|
|
|
margin: 0;
|
2021-04-26 21:19:17 +02:00
|
|
|
|
|
|
|
.button__label {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.header__authButtons {
|
2020-04-13 21:16:07 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
|
|
|
|
& > *:not(:last-child) {
|
2020-06-01 19:03:19 +02:00
|
|
|
margin: 0 var(--spacing-m);
|
2020-04-13 21:16:07 +02:00
|
|
|
}
|
2021-12-21 13:42:28 +01:00
|
|
|
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
.button--link {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button--primary {
|
|
|
|
padding: var(--spacing-xxs);
|
|
|
|
}
|
|
|
|
}
|
2020-04-13 21:16:07 +02:00
|
|
|
}
|
2020-08-10 22:47:39 +02:00
|
|
|
|
|
|
|
.header__center {
|
|
|
|
display: flex;
|
2021-12-21 13:42:28 +01:00
|
|
|
justify-content: center;
|
2020-08-10 22:47:39 +02:00
|
|
|
width: 100%;
|
2021-12-21 13:42:28 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.header__authTitle {
|
|
|
|
@extend .header__center;
|
|
|
|
justify-content: center;
|
2020-12-11 19:33:27 +01:00
|
|
|
|
|
|
|
@media (min-width: $breakpoint-small) {
|
2021-12-21 13:42:28 +01:00
|
|
|
font-size: var(--font-large);
|
2020-12-11 19:33:27 +01:00
|
|
|
}
|
2020-08-10 22:47:39 +02:00
|
|
|
}
|
2020-09-03 22:05:38 +02:00
|
|
|
|
2021-12-21 13:42:28 +01:00
|
|
|
.ReactModal__Overlay {
|
2022-06-13 09:16:31 +02:00
|
|
|
.ReactModal__Content {
|
|
|
|
transform: scale(0);
|
|
|
|
transition: transform 0.2s;
|
|
|
|
}
|
2021-12-21 13:42:28 +01:00
|
|
|
.button--close {
|
|
|
|
margin: 0;
|
2022-06-13 09:16:31 +02:00
|
|
|
@media (max-width: $breakpoint-small) {
|
|
|
|
width: var(--height-input);
|
|
|
|
height: var(--height-input);
|
|
|
|
margin: var(--spacing-s);
|
|
|
|
background: var(--color-primary);
|
|
|
|
.button__content {
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2022-06-23 13:53:19 +02:00
|
|
|
color: var(--color-primary-contrast);
|
2022-06-13 09:16:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ReactModal__Overlay--after-open {
|
|
|
|
.ReactModal__Content {
|
|
|
|
transform: scale(1);
|
|
|
|
transition: transform 0.4s;
|
2020-09-03 22:05:38 +02:00
|
|
|
}
|
|
|
|
}
|
2022-06-03 15:43:31 +02:00
|
|
|
|
|
|
|
.channel__selector {
|
|
|
|
width: 100%;
|
|
|
|
.menu__link {
|
|
|
|
width: 100% !important;
|
|
|
|
.claim-preview__title {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.comment__badge {
|
|
|
|
flex: 1;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.icon--ChevronDown {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|