diff --git a/dist/index.css b/dist/index.css index 5b956a7..ca78497 100644 --- a/dist/index.css +++ b/dist/index.css @@ -1 +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}[disabled]{pointer-events:none;resize:none}[readonly]{cursor:not-allowed}[for],[type=button],[type=checkbox],[type=file],[type=radio],[type=select],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default}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}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::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid #999 !important;page-break-inside:avoid !important}tr,img{page-break-inside:avoid !important}img{max-width:100% !important}@page{margin:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background-color:transparent !important;background-image:none !important;color:#000 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@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}.badge--primary{background-color:#2f9176;color:#fff}.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;pointer-events:none}.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) var(--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--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs) var(--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}form,.form{margin-bottom:1rem}fieldset,.fieldset{display:flex;font-size:1rem;justify-content:center;margin-bottom:.5rem}fieldset button,fieldset input,.fieldset button,.fieldset input{height:2.5rem;border-style:solid;border-width:1px}fieldset button:not([type=button]):not([type=submit]),fieldset input:not([type=button]):not([type=submit]),.fieldset button:not([type=button]):not([type=submit]),.fieldset input:not([type=button]):not([type=submit]){flex:1;padding-right:1rem;padding-left:1rem;transition:border .2s}fieldset button:not([type=button]):not([type=submit]):not(:focus),fieldset input:not([type=button]):not([type=submit]):not(:focus),.fieldset button:not([type=button]):not([type=submit]):not(:focus),.fieldset input:not([type=button]):not([type=submit]):not(:focus){border-top-color:#212529;border-right-color:transparent;border-bottom-color:#212529;border-left-color:#212529}fieldset button:not([type=button]):not([type=submit]):focus,fieldset input:not([type=button]):not([type=submit]):focus,.fieldset button:not([type=button]):not([type=submit]):focus,.fieldset input:not([type=button]):not([type=submit]):focus{border-top-color:#2f9176;border-right-color:transparent;border-bottom-color:#2f9176;border-left-color:#2f9176}fieldset button[type=button],fieldset button[type=submit],fieldset input[type=button],fieldset input[type=submit],.fieldset button[type=button],.fieldset button[type=submit],.fieldset input[type=button],.fieldset input[type=submit]{color:#fff;padding-right:1.5rem;padding-left:1.5rem;transition:all .2s}fieldset button[type=button]:not(:hover),fieldset button[type=submit]:not(:hover),fieldset input[type=button]:not(:hover),fieldset input[type=submit]:not(:hover),.fieldset button[type=button]:not(:hover),.fieldset button[type=submit]:not(:hover),.fieldset input[type=button]:not(:hover),.fieldset input[type=submit]:not(:hover){background-color:#212529;border-color:#212529}fieldset button[type=button]:hover,fieldset button[type=submit]:hover,fieldset input[type=button]:hover,fieldset input[type=submit]:hover,.fieldset button[type=button]:hover,.fieldset button[type=submit]:hover,.fieldset input[type=button]:hover,.fieldset input[type=submit]:hover{background-color:#38d9a9;border-color:#2f9176}.media-grid{display:grid}.media-grid .media{width:100%;cursor:pointer;vertical-align:top}.media{position:relative}.media--large{display:flex}.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);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}[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=index.css.map */ +: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%;--lbry-gray-1:#e2e5e9;--lbry-gray-2:#d8dde1;--lbry-gray-3:#ced4da;--lbry-gray-4:#abb1b7;--lbry-gray-5:#898e93;--lbry-teal-1:#88e8cb;--lbry-teal-2:#60e1ba;--lbry-teal-3:#38d9a9;--lbry-teal-4:#33b58f;--lbry-teal-5:#2f9176;--lbry-cyan-1:#89dfe9;--lbry-cyan-2:#62d4e2;--lbry-cyan-3:#3bc9db;--lbry-cyan-4:#36a8b7;--lbry-cyan-5:#318794;--lbry-blue-1:#85c2f6;--lbry-blue-2:#5caef3;--lbry-blue-3:#339af0;--lbry-blue-4:#2f83c8;--lbry-blue-5:#2c6ba0;--lbry-indigo-1:#acbcfd;--lbry-indigo-2:#90a5fd;--lbry-indigo-3:#748ffc;--lbry-indigo-4:#637ad2;--lbry-indigo-5:#5365a8;--lbry-violet-1:#c1acfc;--lbry-violet-2:#ac91fb;--lbry-violet-3:#9775fa;--lbry-violet-4:#7f65d0;--lbry-violet-5:#6855a6;--lbry-grape-1:#e9adf7;--lbry-grape-2:#e192f5;--lbry-grape-3:#da77f2;--lbry-grape-4:#b567ca;--lbry-grape-5:#9056a2;--lbry-pink-1:#fab5cd;--lbry-pink-2:#f99cbd;--lbry-pink-3:#f783ac;--lbry-pink-4:#cc7092;--lbry-pink-5:#a15d78;--lbry-red-1:#ec8383;--lbry-red-2:#e65a5a;--lbry-red-3:#e03131;--lbry-red-4:#ba2f2f;--lbry-red-5:#942c2e;--lbry-orange-1:#ffbe80;--lbry-orange-2:#ffa855;--lbry-orange-3:#ff922b;--lbry-orange-4:#d37c2b;--lbry-orange-5:#a6662a;--lbry-yellow-1:#ffeca3;--lbry-yellow-2:#ffe685;--lbry-yellow-3:#ffe066;--lbry-yellow-4:#d3bb5a;--lbry-yellow-5:#a6954e;--lbry-lime-1:#cbee93;--lbry-lime-2:#bae96f;--lbry-lime-3:#a9e34b;--lbry-lime-4:#8ebd44;--lbry-lime-5:#73973d;--lbry-green-1:#97e2a3;--lbry-green-2:#74d985;--lbry-green-3:#51cf66;--lbry-green-4:#47ad5a;--lbry-green-5:#3e8b4e;--font-mono:"Fira Code";--font-sans:Inter;--font-serif:Georgia}html{box-sizing:border-box;font-size:12px;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}[disabled]{pointer-events:none;resize:none}[readonly]{cursor:not-allowed}[for],[role=button],[type=button],[type=checkbox],[type=file],[type=radio],[type=select],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default}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}table{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}hr{width:100%;height:1px;background-color:#e2e5e9}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.3}input:not(:disabled){color:inherit}input::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid #999 !important;page-break-inside:avoid !important}tr,img{page-break-inside:avoid !important}img{max-width:100% !important}@page{margin:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background-color:transparent !important;background-image:none !important;color:#000 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@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}.badge--primary{background-color:#2f9176;color:#fff}.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;pointer-events:none}.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) var(--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--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs) var(--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}form,.form{margin-bottom:1rem}fieldset,.fieldset{font-size:1rem;margin-bottom:.5rem;position:relative}fieldset button:not([type=button]):not([type=radio]):not([type=submit]),.fieldset button:not([type=button]):not([type=radio]):not([type=submit]),fieldset input:not([type=button]):not([type=radio]):not([type=submit]),.fieldset input:not([type=button]):not([type=radio]):not([type=submit]){padding-right:1rem;padding-left:1rem;transition:border .2s}fieldset button:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),.fieldset button:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),fieldset input:not([type=button]):not([type=radio]):not([type=submit]):not(:focus),.fieldset input:not([type=button]):not([type=radio]):not([type=submit]):not(:focus){border-top-color:#212529;border-right-color:transparent;border-bottom-color:#212529;border-left-color:#212529}fieldset button:not([type=button]):not([type=radio]):not([type=submit]):focus,.fieldset button:not([type=button]):not([type=radio]):not([type=submit]):focus,fieldset input:not([type=button]):not([type=radio]):not([type=submit]):focus,.fieldset input:not([type=button]):not([type=radio]):not([type=submit]):focus{border-top-color:#2f9176;border-right-color:transparent;border-bottom-color:#2f9176;border-left-color:#2f9176}fieldset button[type=button],.fieldset button[type=button],fieldset button[type=submit],.fieldset button[type=submit],fieldset input[type=button],.fieldset input[type=button],fieldset input[type=submit],.fieldset input[type=submit]{color:#fff;padding-right:1.5rem;padding-left:1.5rem;transition:all .2s}fieldset button[type=button]:not(:hover),.fieldset button[type=button]:not(:hover),fieldset button[type=submit]:not(:hover),.fieldset button[type=submit]:not(:hover),fieldset input[type=button]:not(:hover),.fieldset input[type=button]:not(:hover),fieldset input[type=submit]:not(:hover),.fieldset input[type=submit]:not(:hover){background-color:#212529;border-color:#212529}fieldset button[type=button]:hover,.fieldset button[type=button]:hover,fieldset button[type=submit]:hover,.fieldset button[type=submit]:hover,fieldset input[type=button]:hover,.fieldset input[type=button]:hover,fieldset input[type=submit]:hover,.fieldset input[type=submit]:hover{background-color:#38d9a9;border-color:#2f9176}radio,.radio-group{min-height:2rem;align-items:center;display:inline-flex;flex-direction:row-reverse;position:relative}radio:hover label,.radio-group:hover label{color:#38d9a9}radio:hover check,.radio-group:hover check,radio:hover .check,.radio-group:hover .check{border-color:#38d9a9}radio label,.radio-group label{padding-left:.5rem;transition:color .2s}radio input[type=radio],.radio-group input[type=radio]{width:0;height:0;visibility:hidden}radio input[type=radio]:not(:checked)+label+check::before,.radio-group input[type=radio]:not(:checked)+label+check::before,radio input[type=radio]:not(:checked)+label+.check::before,.radio-group input[type=radio]:not(:checked)+label+.check::before{background-color:transparent}radio input[type=radio]:checked+label,.radio-group input[type=radio]:checked+label{color:#38d9a9}radio input[type=radio]:checked+label+check::before,.radio-group input[type=radio]:checked+label+check::before,radio input[type=radio]:checked+label+.check::before,.radio-group input[type=radio]:checked+label+.check::before{background-color:#38d9a9}check,.check{width:1.5rem;height:1.5rem;top:0;left:0;border:2px solid;border-radius:50%;display:block;position:relative;transition:border .2s;z-index:5}check::before,.check::before{width:.75rem;height:.75rem;top:.24rem;left:.24rem;border-radius:50%;content:"";display:block;position:absolute;transition:background-color .2s}.media-grid{display:grid}.media-grid .media{width:100%;cursor:pointer;vertical-align:top}.media{position:relative}.media--large{display:flex}.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);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}[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}table{width:100%;background-color:#fff;border:1px solid #212529;position:relative}table thead{background-color:#212529;color:#fff;cursor:default;position:relative}table thead tr{position:relative;z-index:1}table tbody{line-height:1.55}table tr:nth-of-type(even){background-color:#e2e5e9}table th,table td{padding:.5rem 1rem}table th{letter-spacing:.1rem;text-align:left;text-transform:uppercase}table tbody tr:not(:last-of-type) td{border-bottom:1px solid #e2e5e9}table a{font-weight:bolder}/*# sourceMappingURL=index.css.map */ diff --git a/dist/index.css.map b/dist/index.css.map index eb344b3..5aa8dc1 100644 --- a/dist/index.css.map +++ b/dist/index.css.map @@ -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/form/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDvC8B,YCuC9B,uCErIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MAEE,iBAKF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,0BACA,4BACA,sBAGF,EACE,cACA,qBAGF,OACE,6BACA,cAEA,sBACE,eAGF,gBACE,WAIJ,GACE,sBACA,iBD3GY,QC8Gd,MACE,6BACA,cAEA,mBACE,cACA,WAGF,qBACE,cAGF,oCACE,wBAIJ,SACE,WACA,0BAEA,iBAEA,yBACE,gBAMJ,aAEE,eAEE,iCACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,sBACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCCnPN,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAIJ,gCACE,iBHiNc,QG/Md,iDACE,iBH+MY,QG9MZ,MHfU,QGmBd,aACE,iBHmEY,QGjEZ,8BACE,iBHiEU,QGhEV,MHxBU,QG4Bd,cACE,eACA,cAGF,aACE,iBH8Ga,QG5Gb,8BACE,iBH4GW,QG3GX,MHtCU,QG0Cd,gBACE,iBHSY,QGRZ,MH9CY,KIJd,QACE,kBACA,kBAIA,mBACE,0BAIJ,mBLWI,UKViB,KLanB,gBACA,uBACA,mBKZF,kBACE,WACA,oBAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MJtBY,KIuBZ,gCAEA,0BACE,mCAGF,oBACE,iBJuOW,QIpOb,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,2CACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBJ7BU,QI+BV,wCACE,sCAKN,cACE,qBAEA,iDACE,MJlBU,QIoBV,kEACE,MJvBQ,QI2BZ,2CACE,MJ5BU,QI8BV,4DACE,MJ9BQ,QImCd,iBACE,2CACA,kBACA,mBACA,MJ5FY,KI6FZ,gCAEA,6BACE,iBJ1CU,QI6CZ,uBACE,iBJhDU,QIkDV,wCACE,iBJlDQ,QIuDd,mBACE,yBCjHF,WACE,mBAGF,mBAOE,eACA,oBACA,kBAYE,gSAEE,mBACA,kBACA,sBAOA,gVACE,iBL/BM,QKgCN,+BACA,oBLjCM,QKkCN,kBLlCM,QKqCR,wTACE,iBLcM,QKbN,+BACA,oBLYM,QKXN,kBLWM,QKPV,wOAEE,MLjDQ,KKkDR,qBACA,oBACA,mBAOA,wUACE,iBL1DM,QK2DN,aL3DM,QK8DR,wRACE,iBLbM,QKcN,aLZM,QKoBd,mBACE,gBACA,mBACA,oBACA,2BACA,kBAGE,2CACE,ML/BQ,QKkCV,wFACE,aLnCQ,QKuCZ,+BACE,mBACA,qBAIA,uDACE,iBACA,kBAGE,wPACE,6BAKF,mFACE,MLzDI,QK4DN,gOACE,iBL7DI,QKoEd,aACE,2BACA,aAEA,iBACA,kBACA,cACA,kBACA,sBACA,UAEA,6BACE,2BACA,uBAEA,kBACA,WACA,cACA,kBACA,gCC7IJ,YACE,aAQA,mBACE,WACA,eACA,mBAYJ,OACE,kBAOF,cACE,aAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBP8DA,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHOrEF,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,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAIA,8BACE,MNhLU,KDsJZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cOsBJ,cACE,gBACA,mBC7LF,MACE,WAEA,sBACA,yBACA,kBAEA,YACE,iBPHU,QOIV,MPNU,KOOV,eACA,kBAEA,eACE,kBACA,UAIJ,YACE,iBAGF,2BACE,iBPUU,QOPZ,kBAEE,mBAGF,SACE,qBACA,gBACA,yBAGF,qCACE,gCAGF,QACE","file":"index.css"} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..0686e75 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,147 @@ + + + + + Components by LBRY + + + + + + + + + +
+

@lbry/components

+

Styling for shared components across LBRY properties

+
+ +
+
+

Hello and whaddup!

+
+ +
+

Form

+ +
+
+ Subscribe to our newsletter + + + + + +
+ +
+ Click some buttons + + + + + + +
+
+
+ +
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentLanguage (Toolset)What Is It
lbrycrdC++A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle lbrycrd directly, and instead bundle lbry-sdk.
lbry-sdkPython (asyncio)A daemon that can be used directly or to develop other applications. Provides convenience APIs, bundles an SPV wallet (torba), and contains an implementation of the LBRY data network.
torbaPythonAn SPV (Simple Payment Verification) wallet. Bundled with lbry-sdk.
wallet serverProtobuf, PythonThe wallet server used by torba.
schemaProtobuf, PythonDefines the structure of the metadata stored in the LBRY blockchain.
+
+
+ + + + diff --git a/sass/form/_index.scss b/sass/form/_index.scss index 41e75c3..7f1c211 100644 --- a/sass/form/_index.scss +++ b/sass/form/_index.scss @@ -1,30 +1,39 @@ -form, -.form { +form { margin-bottom: 1rem; } -fieldset, -.fieldset { +fieldset { // Flexbox is broken for fieldset elements in Chromium // Source: https://bugs.chromium.org/p/chromium/issues/detail?id=375693 // Example: https://codepen.io/Garbee/pen/oYKMYp - display: flex; + // display: flex; // + // justify-content: center; // + font-size: 1rem; - justify-content: center; margin-bottom: 0.5rem; + position: relative; + + // @supports (not (-moz-appearance: none)) { + // display: block; + // } button, input { - height: 2.5rem; - border-style: solid; - border-width: 1px; + // height: 2.5rem; + // border-style: solid; + // border-width: 1px; - &:not([type="button"]):not([type="submit"]) { - flex: 1; + &:not([type="button"]):not([type="radio"]):not([type="submit"]) { + // flex: 1; // padding-right: 1rem; padding-left: 1rem; transition: border 0.2s; + // @supports (not (-moz-appearance: none)) { + // width: calc(100% - 10rem); + // float: left; + // } + &:not(:focus) { border-top-color: $lbry-black; border-right-color: transparent; @@ -47,6 +56,11 @@ fieldset, padding-left: 1.5rem; transition: all 0.2s; + // @supports (not (-moz-appearance: none)) { + // width: 10rem; + // float: right; + // } + &:not(:hover) { background-color: $lbry-black; border-color: $lbry-black; @@ -59,3 +73,92 @@ fieldset, } } } + + + +radio { + min-height: 2rem; + align-items: center; + display: inline-flex; + flex-direction: row-reverse; + position: relative; + + &:hover { + label { + color: $lbry-teal-3; + } + + check { + border-color: $lbry-teal-3; + } + } + + label { + padding-left: 0.5rem; + transition: color 0.2s; + } + + input { + &[type="radio"] { + width: 0; height: 0; + visibility: hidden; + + &:not(:checked) { + + label + check::before { + background-color: transparent; + } + } + + &:checked { + + label { + color: $lbry-teal-3; + } + + + label + check::before { + background-color: $lbry-teal-3; + } + } + } + } +} + +check { + width: 1.5rem; height: 1.5rem; + top: 0; left: 0; + + border: 2px solid; + border-radius: 50%; + display: block; + position: relative; + transition: border 0.2s; + z-index: 5; + + &::before { + width: 0.75rem; height: 0.75rem; + top: 0.24rem; left: 0.24rem; + + border-radius: 50%; + content: ""; + display: block; + position: absolute; + transition: background-color 0.2s; + } +} + + + +.check { + @extend check; +} + +.fieldset { + @extend fieldset; +} + +.form { + @extend form; +} + +.radio-group { + @extend radio; +} diff --git a/sass/index.scss b/sass/index.scss index 2c3001a..fbd4d0e 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -9,3 +9,4 @@ @import "button"; @import "form"; @import "media"; +@import "table"; diff --git a/sass/init/_mixins.scss b/sass/init/_mixins.scss index b1b6ccf..5fe7783 100644 --- a/sass/init/_mixins.scss +++ b/sass/init/_mixins.scss @@ -58,11 +58,11 @@ } @mixin font-mono { - font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace; + font-family: "Fira Code", "Courier New", monospace; } @mixin font-sans { - font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } @mixin font-serif { diff --git a/sass/init/_reset.scss b/sass/init/_reset.scss index 8d3cff8..d35527e 100644 --- a/sass/init/_reset.scss +++ b/sass/init/_reset.scss @@ -2,6 +2,7 @@ html { box-sizing: border-box; + font-size: 12px; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; @@ -28,6 +29,7 @@ html { } [for], +[role="button"], [type="button"], [type="checkbox"], [type="file"], @@ -90,8 +92,10 @@ ul { } table { - border-collapse: collapse; + // border-collapse: collapse; border-spacing: 0; + + // -webkit-appearance: none; } dd { @@ -134,6 +138,11 @@ button { } } +hr { + width: 100%; height: 1px; + background-color: $lbry-gray-1; +} + input { background-color: transparent; color: inherit; diff --git a/sass/init/_variables.scss b/sass/init/_variables.scss index 5676bf8..feeb591 100644 --- a/sass/init/_variables.scss +++ b/sass/init/_variables.scss @@ -1,4 +1,5 @@ :root { + // Spacing @include root-prop(--spacing-xxs, 0.2rem); @include root-prop(--spacing-xs, 0.4rem); @include root-prop(--spacing-s, 0.8rem); @@ -7,15 +8,93 @@ @include root-prop(--spacing-xl, 3.2rem); @include root-prop(--spacing-xxl, 6.4rem); - // 12:5 - @include root-prop(--aspect-ratio-bluray, 41.6666666667%); + // Aspect ratio + @include root-prop(--aspect-ratio-bluray, 41.6666666667%); // 12:5 + @include root-prop(--aspect-ratio-panavision, 36.3636363636%); // 11:4 + @include root-prop(--aspect-ratio-sd, 75%); // 4:3 + @include root-prop(--aspect-ratio-standard, 56.25%); // 16:9 - // 11:4 - @include root-prop(--aspect-ratio-panavision, 36.3636363636%); + // Color + @include root-prop(--lbry-gray-1, $lbry-gray-1); + @include root-prop(--lbry-gray-2, $lbry-gray-2); + @include root-prop(--lbry-gray-3, $lbry-gray-3); + @include root-prop(--lbry-gray-4, $lbry-gray-4); + @include root-prop(--lbry-gray-5, $lbry-gray-5); - // 4:3 - @include root-prop(--aspect-ratio-sd, 75%); + @include root-prop(--lbry-teal-1, $lbry-teal-1); + @include root-prop(--lbry-teal-2, $lbry-teal-2); + @include root-prop(--lbry-teal-3, $lbry-teal-3); + @include root-prop(--lbry-teal-4, $lbry-teal-4); + @include root-prop(--lbry-teal-5, $lbry-teal-5); - // 16:9 - @include root-prop(--aspect-ratio-standard, 56.25%); + @include root-prop(--lbry-cyan-1, $lbry-cyan-1); + @include root-prop(--lbry-cyan-2, $lbry-cyan-2); + @include root-prop(--lbry-cyan-3, $lbry-cyan-3); + @include root-prop(--lbry-cyan-4, $lbry-cyan-4); + @include root-prop(--lbry-cyan-5, $lbry-cyan-5); + + @include root-prop(--lbry-blue-1, $lbry-blue-1); + @include root-prop(--lbry-blue-2, $lbry-blue-2); + @include root-prop(--lbry-blue-3, $lbry-blue-3); + @include root-prop(--lbry-blue-4, $lbry-blue-4); + @include root-prop(--lbry-blue-5, $lbry-blue-5); + + @include root-prop(--lbry-indigo-1, $lbry-indigo-1); + @include root-prop(--lbry-indigo-2, $lbry-indigo-2); + @include root-prop(--lbry-indigo-3, $lbry-indigo-3); + @include root-prop(--lbry-indigo-4, $lbry-indigo-4); + @include root-prop(--lbry-indigo-5, $lbry-indigo-5); + + @include root-prop(--lbry-violet-1, $lbry-violet-1); + @include root-prop(--lbry-violet-2, $lbry-violet-2); + @include root-prop(--lbry-violet-3, $lbry-violet-3); + @include root-prop(--lbry-violet-4, $lbry-violet-4); + @include root-prop(--lbry-violet-5, $lbry-violet-5); + + @include root-prop(--lbry-grape-1, $lbry-grape-1); + @include root-prop(--lbry-grape-2, $lbry-grape-2); + @include root-prop(--lbry-grape-3, $lbry-grape-3); + @include root-prop(--lbry-grape-4, $lbry-grape-4); + @include root-prop(--lbry-grape-5, $lbry-grape-5); + + @include root-prop(--lbry-pink-1, $lbry-pink-1); + @include root-prop(--lbry-pink-2, $lbry-pink-2); + @include root-prop(--lbry-pink-3, $lbry-pink-3); + @include root-prop(--lbry-pink-4, $lbry-pink-4); + @include root-prop(--lbry-pink-5, $lbry-pink-5); + + @include root-prop(--lbry-red-1, $lbry-red-1); + @include root-prop(--lbry-red-2, $lbry-red-2); + @include root-prop(--lbry-red-3, $lbry-red-3); + @include root-prop(--lbry-red-4, $lbry-red-4); + @include root-prop(--lbry-red-5, $lbry-red-5); + + @include root-prop(--lbry-orange-1, $lbry-orange-1); + @include root-prop(--lbry-orange-2, $lbry-orange-2); + @include root-prop(--lbry-orange-3, $lbry-orange-3); + @include root-prop(--lbry-orange-4, $lbry-orange-4); + @include root-prop(--lbry-orange-5, $lbry-orange-5); + + @include root-prop(--lbry-yellow-1, $lbry-yellow-1); + @include root-prop(--lbry-yellow-2, $lbry-yellow-2); + @include root-prop(--lbry-yellow-3, $lbry-yellow-3); + @include root-prop(--lbry-yellow-4, $lbry-yellow-4); + @include root-prop(--lbry-yellow-5, $lbry-yellow-5); + + @include root-prop(--lbry-lime-1, $lbry-lime-1); + @include root-prop(--lbry-lime-2, $lbry-lime-2); + @include root-prop(--lbry-lime-3, $lbry-lime-3); + @include root-prop(--lbry-lime-4, $lbry-lime-4); + @include root-prop(--lbry-lime-5, $lbry-lime-5); + + @include root-prop(--lbry-green-1, $lbry-green-1); + @include root-prop(--lbry-green-2, $lbry-green-2); + @include root-prop(--lbry-green-3, $lbry-green-3); + @include root-prop(--lbry-green-4, $lbry-green-4); + @include root-prop(--lbry-green-5, $lbry-green-5); + + // Type + @include root-prop(--font-mono, "Fira Code"); + @include root-prop(--font-sans, Inter); + @include root-prop(--font-serif, Georgia); } diff --git a/sass/table/_index.scss b/sass/table/_index.scss new file mode 100644 index 0000000..e84b8ea --- /dev/null +++ b/sass/table/_index.scss @@ -0,0 +1,47 @@ + +table { + width: 100%; + + background-color: $lbry-white; + border: 1px solid $lbry-black; + position: relative; + + thead { + background-color: $lbry-black; + color: $lbry-white; + cursor: default; + position: relative; + + tr { + position: relative; + z-index: 1; + } + } + + tbody { + line-height: 1.55; + } + + tr:nth-of-type(even) { + background-color: $lbry-gray-1; + } + + th, + td { + padding: 0.5rem 1rem; + } + + th { + letter-spacing: 0.1rem; + text-align: left; + text-transform: uppercase; + } + + tbody tr:not(:last-of-type) td { + border-bottom: 1px solid $lbry-gray-1; + } + + a { + font-weight: bolder; + } +}