improve sizes/spacing on large screens
This commit is contained in:
parent
4d5c26f258
commit
627af75f43
2 changed files with 24 additions and 24 deletions
|
@ -362,7 +362,7 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
{__('to learn more.')}
|
{__('to learn more.')}
|
||||||
</div>
|
</div>
|
||||||
{(filePath || !!editingURI) && (
|
{(filePath || !!editingURI) && (
|
||||||
<div className="card-media__internal-links">
|
<div className="card__actions-top-corner">
|
||||||
<Button
|
<Button
|
||||||
button="inverse"
|
button="inverse"
|
||||||
icon={icons.CLOSE}
|
icon={icons.CLOSE}
|
||||||
|
|
|
@ -36,24 +36,6 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__media {
|
|
||||||
background-color: $lbry-gray-3;
|
|
||||||
background-position: 50% 50%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card__media--no-img {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card__media--nsfw {
|
|
||||||
background-color: $lbry-red-5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card--pending {
|
.card--pending {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
@ -85,6 +67,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card__media {
|
||||||
|
background-color: $lbry-gray-3;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__media--no-img {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__media--nsfw {
|
||||||
|
background-color: $lbry-red-5;
|
||||||
|
}
|
||||||
|
|
||||||
.card__actions {
|
.card__actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: $spacing-vertical * 2/3;
|
margin-top: $spacing-vertical * 2/3;
|
||||||
|
@ -227,12 +227,12 @@
|
||||||
|
|
||||||
.card__subtitle {
|
.card__subtitle {
|
||||||
color: $lbry-gray-5;
|
color: $lbry-gray-5;
|
||||||
font-size: 1em;
|
font-size: .9em;
|
||||||
line-height: 1em;
|
line-height: .9em;
|
||||||
padding-top: $spacing-vertical * 1/3;
|
padding-top: $spacing-vertical * 1/3;
|
||||||
|
|
||||||
@media (min-width: $large-breakpoint) {
|
@media (min-width: $large-breakpoint) {
|
||||||
font-size: 1.2em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -277,11 +277,11 @@
|
||||||
.card__title--file-card {
|
.card__title--file-card {
|
||||||
// FileCard is slightly different where the title is only slightly bigger than the subtitle
|
// FileCard is slightly different where the title is only slightly bigger than the subtitle
|
||||||
// Slightly bigger than 2 lines for consistent channel placement
|
// Slightly bigger than 2 lines for consistent channel placement
|
||||||
font-size: 1.1em;
|
font-size: 1em;
|
||||||
height: 3.3em;
|
height: 3.3em;
|
||||||
|
|
||||||
@media only screen and (min-width: $large-breakpoint) {
|
@media only screen and (min-width: $large-breakpoint) {
|
||||||
font-size: 1.3em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue