240 lines
4 KiB
SCSS
240 lines
4 KiB
SCSS
.search__header {
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
.card {
|
|
color: var(--color-text);
|
|
}
|
|
.placeholder {
|
|
background-color: var(--color-placeholder-background);
|
|
}
|
|
}
|
|
|
|
.search__options {
|
|
margin-top: var(--spacing-s);
|
|
display: none;
|
|
|
|
fieldset:not(:first-child) {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
|
|
table {
|
|
line-height: 1.5;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
td:nth-of-type(1) {
|
|
width: 25%;
|
|
|
|
&:not(:first-of-type) {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
.claim-type-filter {
|
|
display: inline-block;
|
|
}
|
|
|
|
.close-button {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.close-button--visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.filter-values {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.button-toggle {
|
|
margin-right: 0;
|
|
}
|
|
|
|
select {
|
|
@media (min-width: $breakpoint-small) {
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
.icon--help {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.button--close {
|
|
position: unset;
|
|
align-self: center;
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.media-types {
|
|
margin-top: var(--spacing-m);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.radio,
|
|
.checkbox {
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
&:not(:first-of-type) {
|
|
margin-left: var(--spacing-m);
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search__options--expanded {
|
|
display: block;
|
|
}
|
|
|
|
.search__legend {
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-small);
|
|
padding: var(--spacing-xxs);
|
|
}
|
|
|
|
.search__top-link {
|
|
font-weight: var(--font-weight-body);
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.search__top-links {
|
|
display: flex;
|
|
margin-bottom: 0;
|
|
.button--secondary:not(:last-child) {
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
flex-direction: column;
|
|
|
|
.button--secondary {
|
|
height: var(--height-button);
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
}
|
|
}
|
|
|
|
.recommended-content__toggles {
|
|
margin-top: var(--spacing-xs);
|
|
display: flex;
|
|
|
|
button {
|
|
padding: 0 var(--spacing-xs);
|
|
height: 2rem;
|
|
max-width: 15rem;
|
|
}
|
|
|
|
.button-toggle:nth-child(2) {
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search__channel {
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
fieldset-section {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.search__channel--popup {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.search__channel--popup-results {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(var(--color-header-background-base), 0.9);
|
|
color: var(--color-text);
|
|
|
|
.claim-preview__title {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.button--uri-indicator,
|
|
.media__subtitle {
|
|
color: rgba(var(--color-text-base), 0.6);
|
|
}
|
|
|
|
.icon--help {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.searchPage-wrapper {
|
|
.search__header {
|
|
.claim-preview__wrapper--channel {
|
|
.claim-preview__repost-author {
|
|
top: calc(var(--spacing-m) * -1);
|
|
left: calc(var(--spacing-m) * -1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper {
|
|
background-color: rgba(var(--color-header-background-base), 0.6);
|
|
.claim-tile__info {
|
|
margin-top: 0;
|
|
padding-bottom: var(--spacing-xxxs);
|
|
.claim-preview-metadata-sub-upload {
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper--channel {
|
|
position: relative;
|
|
border-radius: var(--border-radius);
|
|
background: rgba(var(--color-header-background-base), 0.6);
|
|
padding: var(--spacing-m) !important;
|
|
|
|
.claim__menu-button {
|
|
right: calc(var(--spacing-m) - 8px) !important;
|
|
margin-top: var(--spacing-xxs);
|
|
|
|
.icon {
|
|
stroke: var(--color-text);
|
|
}
|
|
|
|
&:hover {
|
|
.icon {
|
|
stroke: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.help {
|
|
color: var(--color-text);
|
|
}
|
|
}
|