diff --git a/.gitignore b/.gitignore index c687a8e..fada4a8 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,4 @@ .sass-cache # Directories -# it would be useful to commit the compiled CSS but let's disable this for now -dist node_modules diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..dbb1c13 --- /dev/null +++ b/dist/style.css @@ -0,0 +1 @@ +:root{--spacing-xxs:.2rem;--spacing-xs:.4rem;--spacing-s:.8rem;--spacing-m:1.6rem;--spacing-l:2.4rem;--spacing-xl:3.2rem;--spacing-xxl:6.4rem;--aspect-ratio-bluray:41.6666666667%;--aspect-ratio-panavision:36.3636363636%;--aspect-ratio-sd:75%;--aspect-ratio-standard:56.25%}html{box-sizing:border-box;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,*::before,*::after{margin:0;padding:0;border:none;box-sizing:inherit;outline:0;user-select:none}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default;pointer-events:none}h1,h2,h3,h4,h5,h6{font-weight:normal}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}ul{list-style-type:none}label[for]{cursor:pointer}table{border-collapse:collapse;border-spacing:0}dd{width:80%;float:left}dl{width:100%;overflow-x:scroll;overflow-y:hidden}dt{width:20%;float:left}img{width:auto;max-width:100%;height:auto;max-height:100%;vertical-align:middle}a{color:inherit;text-decoration:none}button{background-color:transparent;color:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.3}input:not(:disabled){color:inherit}input:not([type=checkbox]),input:not([type=file]),input:not([type=radio]),input:not([type=select]){cursor:text}input[type=checkbox]:not(:disabled),input[type=file]:not(:disabled),input[type=radio]:not(:disabled),input[type=select]:not(:disabled){cursor:pointer}input::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}@keyframes loading-animation{0%{background-position:-500px 0}100%{background-position:500px 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}100%{opacity:1}}.badge{font-weight:600;vertical-align:top;white-space:nowrap}.badge:not(.badge--large){border-radius:.2rem;display:inline-block;font-size:.8rem;letter-spacing:.05rem;line-height:2;padding-right:var(--spacing-xs);padding-left:var(--spacing-xs)}.badge--cost:not(.badge--large){background-color:#ffe685}[data-mode=dark] .badge--cost:not(.badge--large){background-color:#ffe066;color:#212529}.badge--free{background-color:#5caef3}[data-mode=dark] .badge--free{background-color:#339af0;color:#212529}.badge--large{font-size:5rem;line-height:1}.badge--nsfw{background-color:#e192f5}[data-mode=dark] .badge--nsfw{background-color:#da77f2;color:#212529}.button{fill:currentColor;position:relative}.button--alt:hover{text-decoration:underline}.button--constrict{max-width:20vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button--disabled{opacity:.3}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;color:#fff;transition:background-color .2s}.button--icon:not(:hover){background-color:rgba(33,37,41,.7)}.button--icon:hover{background-color:#51cf66}.button--icon.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--icon.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);border:1px solid #e2e5e9;border-radius:1rem;color:inherit;transition:background-color .2s}[data-mode=dark] .button--inverse{border-color:rgba(255,255,255,.1)}.button--inverse:not(:hover){background-color:transparent}.button--inverse:hover{background-color:#e2e5e9}[data-mode=dark] .button--inverse:hover{background-color:rgba(255,255,255,.1)}.button--link{transition:color .2s}.button--link:not(.button--link--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--link--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--link--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--link--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs --spacing-s);align-self:center;border-radius:1rem;color:#fff;transition:background-color .2s}.button--primary:not(:hover){background-color:#2f9176}.button--primary:hover{background-color:#38d9a9}[data-mode=dark] .button--primary:hover{background-color:#33b58f}.button--uppercase{text-transform:uppercase}.media{position:relative}.media--large{display:flex;font-size:1.5rem}.media--large .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--large .media__thumb{width:40rem;margin-bottom:var(--spacing-s)}.media--placeholder>*{animation-duration:4s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:loading-animation;animation-timing-function:linear;background-color:transparent;background-image:linear-gradient(to right, #ced4da 10%, transparent 80%, #ced4da 100%);background-repeat:repeat;background-size:500px}[data-mode=dark] .media--placeholder>*{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, transparent 80%, rgba(255, 255, 255, 0.1) 100%)}.media--placeholder .media__channel,.media--placeholder .media__date,.media--placeholder .media__title{min-height:1rem}.media--placeholder .media__channel{width:70%}.media--placeholder .media__date{width:30%}.media--placeholder .media__title{width:100%}.media--small{display:flex;justify-content:space-between}.media--small:not(:last-of-type){margin-bottom:var(--spacing-s)}.media--small .media__info{width:50%;padding-left:var(--spacing-s)}.media--small .media__properties{bottom:-1.5rem;left:calc(-100% - 1.5rem);position:absolute}.media--small .media__thumb{width:50%}.media--small .media__title{height:3rem;line-height:1.33}.media--wide{display:flex}.media--wide:not(:last-of-type){margin-bottom:var(--spacing-m)}.media--wide .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--wide .media__properties{bottom:-5.5rem;left:-20rem;position:absolute}.media--wide .media__text{padding-top:var(--spacing-s)}.media--wide .media__thumb{width:20rem}.media--wide .media__title{font-size:1.5rem}.media__actions{display:flex;padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.media__info{word-wrap:break-word}[data-mode=dark] .media__info{border-color:rgba(137,142,147,.2)}.media__message{padding:var(--spacing-s);font-size:.9rem;white-space:normal}.media__properties{vertical-align:top}.media__properties>*:not(:last-child){margin-right:var(--spacing-xs)}.media__properties:not(:empty){display:inline-block}.media__subtitle{position:relative}.media__text{font-size:2.5rem}[data-mode=dark] .media__text{color:#fff}.media__thumb::before,.media__thumb::after{content:""}.media__thumb::before{float:left;padding-top:var(--aspect-ratio-standard)}.media__thumb::after{clear:both;display:block}.media__title{font-weight:600;white-space:normal}/*# sourceMappingURL=style.css.map */ diff --git a/dist/style.css.map b/dist/style.css.map new file mode 100644 index 0000000..5679125 --- /dev/null +++ b/dist/style.css.map @@ -0,0 +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":"AAAA,MC8CI,cD7CgC,MC6ChC,aD5C+B,MC4C/B,YD3C8B,MC2C9B,YD1C8B,OC0C9B,YDzC8B,OCyC9B,aDxC+B,OCwC/B,cDvCgC,OCuChC,sBDpCwC,eCoCxC,0BDjC4C,eCiC5C,kBD9BoC,IC8BpC,wBD3B0C,OEnB9C,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UACA,iBAGF,gEAUE,0BAGF,6BAIE,oBACA,kBACA,oBAEA,iEACE,eACA,oBAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAIA,WACE,eAIJ,MACE,yBACA,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,0BACA,4BACA,sBAGF,EACE,cACA,qBAGF,OACE,6BACA,cAEA,sBACE,eAGF,gBACE,WAIJ,MACE,6BACA,cAGA,mBACE,cACA,WAGF,qBACE,cAGF,mGAIE,YAGF,uIAIE,eAGF,oCACE,wBAIJ,SACE,WACA,0BAEA,iBC1JF,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAGF,gCACE,iBCkNY,QDhNZ,iDACE,iBCgNU,QD/MV,MCdQ,QDkBZ,aACE,iBCoEU,QDlEV,8BACE,iBCkEQ,QDjER,MCvBQ,QD2BZ,cACE,eACA,cAGF,aACE,iBC+GW,QD7GX,8BACE,iBC6GS,QD5GT,MCrCQ,QCNd,QACE,kBACA,kBAGE,mBACE,0BAIJ,6BACqB,KLErB,gBACA,uBACA,mBKDA,kBACE,WAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MDpBU,KCqBV,gCAEA,0BACE,mCAGF,oBACE,iBDyOS,QCtOX,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,sCACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBD3BQ,QC6BR,wCACE,sCAKN,cACE,qBAEA,uDACE,MDhBQ,QCkBR,wEACE,MDrBM,QCyBV,iDACE,MD1BQ,QC4BR,kEACE,MD5BM,QCiCZ,iBACE,sCACA,kBACA,mBACA,MD1FU,KC2FV,gCAEA,6BACE,iBDxCQ,QC2CV,uBACE,iBD9CQ,QCgDR,wCACE,iBDhDM,QCqDZ,mBACE,yBClGJ,OACE,kBAIA,cACE,aACA,iBAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBNZF,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHMKA,uGAGE,gBAGF,oCACE,UAGF,iCACE,UAGF,kCACE,WAIJ,cACE,aACA,8BAEA,iCACE,+BAGF,2BACE,UACA,8BAGF,iCACE,yCACA,kBAGF,4BACE,UAGF,4BACE,YACA,iBAIJ,aACE,aAEA,gCACE,+BAGF,0BACE,yBACA,6BAGF,gCACE,2BACA,kBAGF,0BACE,6BAGF,2BACE,YAGF,2BACE,iBAQJ,gBACE,aACA,6BACA,gCASF,aACE,qBAEA,8BACE,kCAIJ,gBACE,yBACA,gBACA,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAGF,aACE,iBAEA,8BACE,MFpKQ,KJ+CZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cMiHF,cACE,gBACA","file":"style.css"} \ No newline at end of file diff --git a/package.json b/package.json index 54092c2..59813ab 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "npm-run-all": "^4.1.5", "sass": "^1.15.1", "sass-lint": "^1.12.1", - "updates": "^5.4.0" + "updates": "^5.4.2" }, "homepage": "https://github.com/lbryio/components#readme", "husky": { @@ -29,7 +29,6 @@ "url": "https://github.com/lbryio/components.git" }, "scripts": { - "prepublish": "TODO: Add `npm run test:sass && npm run sass:prod` to this script", "sass:dev": "sass --load-path=node_modules --watch sass:dist --style compressed", "sass:prod": "sass --load-path=node_modules --update sass:dist --style compressed", "test": "run-s test:*", diff --git a/sass/button/_index.scss b/sass/button/_index.scss new file mode 100644 index 0000000..d6ffcda --- /dev/null +++ b/sass/button/_index.scss @@ -0,0 +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; + } +} diff --git a/sass/init/_mixins.scss b/sass/init/_mixins.scss index 5d892f8..52ec026 100644 --- a/sass/init/_mixins.scss +++ b/sass/init/_mixins.scss @@ -8,7 +8,7 @@ // Omit value for basic text truncation @mixin constrict($value: null) { @if ($value) { - max-width: $value; // 20vw + max-width: $value; } overflow: hidden; diff --git a/sass/init/_reset.scss b/sass/init/_reset.scss new file mode 100644 index 0000000..888075f --- /dev/null +++ b/sass/init/_reset.scss @@ -0,0 +1,158 @@ +html { + box-sizing: border-box; + text-rendering: optimizeLegibility; + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +*, +*::before, +*::after { + margin: 0; padding: 0; + + border: none; + box-sizing: inherit; + outline: 0; + user-select: none; +} + +a, +area, +button, +[role="button"], +input, +label, +select, +summary, +textarea { + // Remove touch delay on supported devices + touch-action: manipulation; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: inherit; + font-weight: inherit; + + &:disabled { + cursor: default; + pointer-events: none; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: normal; +} + +ol, +ul { + list-style-position: inside; + + > li { + list-style-position: inside; + } +} + +ul { + list-style-type: none; +} + +label { + &[for] { + cursor: pointer; + } +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +dd { + width: 80%; + float: left; +} + +dl { + width: 100%; + overflow-x: scroll; + overflow-y: hidden; +} + +dt { + width: 20%; + float: left; +} + +img { + width: auto; max-width: 100%; + height: auto; max-height: 100%; + vertical-align: middle; +} + +a { + color: inherit; + text-decoration: none; +} + +button { + background-color: transparent; + color: inherit; + + &:not(:disabled) { + cursor: pointer; + } + + &:disabled { + opacity: 0.3; + } +} + +input { + background-color: transparent; + color: inherit; + // line-height: 1; // this can differ across apps + + &::placeholder { + color: inherit; + opacity: 0.3; + } + + &:not(:disabled) { + color: inherit; + } + + &:not([type="checkbox"]), + &:not([type="file"]), + &:not([type="radio"]), + &:not([type="select"]) { + cursor: text; + } + + &[type="checkbox"]:not(:disabled), + &[type="file"]:not(:disabled), + &[type="radio"]:not(:disabled), + &[type="select"]:not(:disabled) { + cursor: pointer; + } + + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } +} + +textarea { + width: 100%; + padding: var(--spacing-xs); + // border-color should be added in apps for blur/focus + border: 1px solid; +} diff --git a/sass/init/_variables.scss b/sass/init/_variables.scss index beb44de..5676bf8 100644 --- a/sass/init/_variables.scss +++ b/sass/init/_variables.scss @@ -18,24 +18,4 @@ // 16:9 @include root-prop(--aspect-ratio-standard, 56.25%); - - // --spacing-xxs: 0.2rem; - // --spacing-xs: 0.4rem; - // --spacing-s: 0.8rem; - // --spacing-m: 1.6rem; - // --spacing-l: 2.4rem; - // --spacing-xl: 3.2rem; - // --spacing-xxl: 6.4rem; - - // // 12:5 - // --aspect-ratio-bluray: 41.6666666667%; - - // // 11:4 - // --aspect-ratio-panavision: 36.3636363636%; - - // // 4:3 - // --aspect-ratio-sd: 75%; - - // // 16:9 - // --aspect-ratio-standard: 56.25%; } diff --git a/sass/media/_index.scss b/sass/media/_index.scss index a28c7e0..59daa60 100644 --- a/sass/media/_index.scss +++ b/sass/media/_index.scss @@ -1,30 +1,116 @@ -// sass-lint:disable no-empty-rulesets - - - // C O N T A I N E R S -.media-grid { +.media-grid { // sass-lint:disable-line no-empty-rulesets } -.media-list { +.media-list { // sass-lint:disable-line no-empty-rulesets } -.media-row { +.media-row { // sass-lint:disable-line no-empty-rulesets } .media { + position: relative; + // M O D I F I E R S &--large { + display: flex; + font-size: 1.5rem; + + .media__info { + width: calc(100% - 20rem); + margin-left: var(--spacing-s); // 1rem; + } + + .media__thumb { + width: 40rem; + margin-bottom: 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; + } } @@ -32,35 +118,64 @@ // C H I L D R E N &__actions { + display: flex; + padding-top: var(--spacing-m); // 2rem; + padding-bottom: var(--spacing-m); // 2rem; } - &__content { + &__content { // sass-lint:disable-line no-empty-rulesets } - &__date { + &__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; + font-size: 0.9rem; + white-space: normal; } &__properties { + vertical-align: top; + + > *:not(:last-child) { + margin-right: var(--spacing-xs); // 0.5rem; + } + + &:not(:empty) { + display: inline-block; + } } - &__property { + &__property { // sass-lint:disable-line no-empty-rulesets } &__subtitle { + position: relative; } &__text { + font-size: 2.5rem; + + [data-mode="dark"] & { + color: $lbry-white; + } } &__thumb { + @include thumbnail; } &__title { + font-weight: 600; + white-space: normal; } } diff --git a/sass/style.scss b/sass/style.scss index 795ed23..5aafd77 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,8 +1,10 @@ @charset "utf-8"; @import "@lbry/color/lbry-color"; -@import "init/animation"; @import "init/mixins"; @import "init/variables"; +@import "init/reset"; +@import "init/animation"; @import "badge"; +@import "button"; @import "media";