Removed fancy Sass stuff
This commit is contained in:
ポール ウェッブ
parent
00870180cf
commit
8ff7f663f4
2
dist/index.css.map
vendored
2
dist/index.css.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"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","file":"index.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"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","file":"index.css"}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(&--large) {
|
||||
&:not(.badge--large) {
|
||||
border-radius: 0.2rem;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -12,36 +12,36 @@
|
|||
padding-right: var(--spacing-xs); // 0.5rem;
|
||||
padding-left: var(--spacing-xs); // 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--cost:not(&--large) {
|
||||
background-color: $lbry-yellow-2;
|
||||
.badge--cost:not(.badge--large) {
|
||||
background-color: $lbry-yellow-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-yellow-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
&--free {
|
||||
background-color: $lbry-blue-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-blue-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
font-size: 5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&--nsfw {
|
||||
background-color: $lbry-grape-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-grape-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-yellow-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
background-color: $lbry-blue-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-blue-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--large {
|
||||
font-size: 5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--nsfw {
|
||||
background-color: $lbry-grape-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-grape-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,114 +1,114 @@
|
|||
.button {
|
||||
fill: currentColor;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&--alt {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&--constrict {
|
||||
@include constrict(20vw);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
border-radius: 50%;
|
||||
color: $lbry-white;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: rgba($lbry-black, 0.7);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-green-3;
|
||||
}
|
||||
|
||||
&.button--play {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-position: calc(50% + 0.1rem) center;
|
||||
}
|
||||
|
||||
&.button--view {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-position: center calc(50% + 0.1rem);
|
||||
}
|
||||
}
|
||||
|
||||
&--inverse {
|
||||
padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
|
||||
border: 1px solid $lbry-gray-1;
|
||||
border-radius: 1rem;
|
||||
color: inherit;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-gray-1;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
transition: color 0.2s;
|
||||
|
||||
&:not(&--disabled):not(:hover) {
|
||||
color: $lbry-teal-5;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&--disabled):hover {
|
||||
color: $lbry-teal-3;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
|
||||
align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
|
||||
border-radius: 1rem;
|
||||
color: $lbry-white;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $lbry-teal-5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-teal-3;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--uppercase {
|
||||
text-transform: uppercase;
|
||||
.button--alt {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button--constrict {
|
||||
@include constrict(20vw);
|
||||
}
|
||||
|
||||
.button--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.button--icon {
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
border-radius: 50%;
|
||||
color: $lbry-white;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: rgba($lbry-black, 0.7);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-green-3;
|
||||
}
|
||||
|
||||
&.button--play {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-position: calc(50% + 0.1rem) center;
|
||||
}
|
||||
|
||||
&.button--view {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-position: center calc(50% + 0.1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.button--inverse {
|
||||
padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
|
||||
border: 1px solid $lbry-gray-1;
|
||||
border-radius: 1rem;
|
||||
color: inherit;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-gray-1;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--link {
|
||||
transition: color 0.2s;
|
||||
|
||||
&:not(&--disabled):not(:hover) {
|
||||
color: $lbry-teal-5;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&--disabled):hover {
|
||||
color: $lbry-teal-3;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
|
||||
align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
|
||||
border-radius: 1rem;
|
||||
color: $lbry-white;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $lbry-teal-5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-teal-3;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,165 +26,167 @@
|
|||
|
||||
.media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// M O D I F I E R S
|
||||
|
||||
&--large {
|
||||
display: flex;
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s); // 1rem;
|
||||
}
|
||||
// M O D I F I E R S
|
||||
|
||||
.media__thumb {
|
||||
width: 40rem;
|
||||
margin-bottom: var(--spacing-s); // 1rem;
|
||||
}
|
||||
.media--large {
|
||||
display: flex;
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
&--placeholder {
|
||||
> * {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
.media__channel,
|
||||
.media__date,
|
||||
.media__title {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.media__date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: 50%;
|
||||
padding-left: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -1.5rem; left: calc(-100% - 1.5rem);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
height: 3rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
|
||||
&--wide { // .media--search-result
|
||||
display: flex;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-m); // 1.5rem;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -5.5rem; left: -20rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__text { // .media__subtext
|
||||
padding-top: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// C H I L D R E N
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
padding-top: var(--spacing-m); // 2rem;
|
||||
padding-bottom: var(--spacing-m); // 2rem;
|
||||
}
|
||||
|
||||
&__content { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
&__date { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
&__info {
|
||||
word-wrap: break-word;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-gray-5, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
padding: var(--spacing-s); // 1rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&__properties {
|
||||
vertical-align: top;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-xs); // 0.5rem;
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&__property { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__text {
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
@include thumbnail;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
.media__thumb {
|
||||
width: 40rem;
|
||||
margin-bottom: var(--spacing-s); // 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media--placeholder {
|
||||
> * {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
.media__channel,
|
||||
.media__date,
|
||||
.media__title {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.media__date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media--small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: 50%;
|
||||
padding-left: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -1.5rem; left: calc(-100% - 1.5rem);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
height: 3rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
|
||||
.media--wide { // .media--search-result
|
||||
display: flex;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-m); // 1.5rem;
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -5.5rem; left: -20rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__text { // .media__subtext
|
||||
padding-top: var(--spacing-s); // 1rem;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// C H I L D R E N
|
||||
|
||||
.media__actions {
|
||||
display: flex;
|
||||
padding-top: var(--spacing-m); // 2rem;
|
||||
padding-bottom: var(--spacing-m); // 2rem;
|
||||
}
|
||||
|
||||
.media__content { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__date { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__info {
|
||||
word-wrap: break-word;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-gray-5, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.media__message {
|
||||
padding: var(--spacing-s); // 1rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
vertical-align: top;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-xs); // 0.5rem;
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.media__property { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__subtitle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media__text {
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
@include thumbnail;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue