components/dist/index.css
2020-05-01 13:30:47 -04:00

1 line
18 KiB
CSS

:root{--color-primary: #257761;--color-primary-alt: #e4f4ef;--color-primary-alt-2: #4b8576;--color-secondary: #295284;--color-secondary-alt: #d9eaff;--color-tertiary: #552470;--color-tertiary-alt: #f7e8ff;--color-danger: #9b2023;--color-danger-alt: #fccdce;--color-warning: #fff58c;--color-cost: #f4e866;--color-focus: #93cff2;--color-border: #ddd;--color-black: #111;--color-white: #fdfdfd;--color-white-alt: #fafafa;--color-gray-1: #eff1f4;--color-gray-2: #d8dde1;--color-gray-3: #ced4da;--color-gray-4: #abb1b7;--color-gray-5: #666a6d;--color-text: var(--color-black);--color-text-subtitle: var(--color-gray-5);--color-text-inverse: #fdfdfd;--color-button-primary-bg: var(--color-primary);--color-button-primary-text: var(--color-primary-alt);--color-button-primary-bg-hover: var(--color-primary-alt-2);--color-button-primary-hover-text: var(--color-primary-alt);--color-button-secondary-bg: var(--color-secondary-alt);--color-button-secondary-text: var(--color-secondary);--color-button-secondary-bg-hover: var(--color-gray-3);--color-button-alt-bg: var(--color-gray-1);--color-button-alt-text: var(--color-text);--color-button-alt-bg-hover: var(--color-gray-2);--color-link: var(--color-primary);--color-link-hover: var(--color-black);--color-input-color: #111111;--color-input-label: var(--color-gray-5);--color-input-placeholder: #212529;--color-input-bg: #f2f2f2;--color-input-bg-copyable: #434b53;--color-input-border: var(--color-border);--color-input-border-active: var(--color-secondary);--color-input-toggle: var(--color-secondary);--color-input-toggle-bg: var(--color-gray-1);--color-input-toggle-bg-hover: var(--color-secondary-alt);--color-table-highlight: var(--color-white-alt);--color-tag: var(--color-primary);--color-tag-bg: var(--color-primary-alt);--color-tag-hover: var(--color-white);--color-tag-bg-hover: var(--color-primary-alt-2)}:root{--border-radius: 5px;--height-input: 2.5rem;--height-button: 2.5rem;--height-checkbox: 24px;--height-radio: 24px;--height-badge: 24px;--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;--aspect-ratio-bluray: 41.6666666667%;--aspect-ratio-panavision: 36.3636363636%;--aspect-ratio-sd: 75%;--aspect-ratio-standard: 56.25%;--font-mono: "Fira Code";--font-sans: Inter;--font-serif: Georgia;--font-weight-base: 400;--font-weight-light: 300;--font-weight-bold: 700;--font-base: 14px;--font-body: 1rem;--font-xsmall: 0.7344rem;--font-small: 0.8571rem;--font-large: 1.3rem;--font-title: 1.71rem;--font-heading: 2.94rem}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],[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;border-radius:0;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;font-size:1em}ol,ul{list-style-position:inside}ol>li,ul>li{list-style-position:inside}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{text-decoration:none}button{background-color:transparent;line-height:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}hr{width:100%;height:1px;background-color:var(--color-gray-1)}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.2}input::-webkit-search-cancel-button{-webkit-appearance:none}select{outline:none}textarea{width:100%;min-height:var(--spacing-xxl);padding:var(--spacing-s);border:1px solid}textarea:not([disabled]){resize:vertical}@media print{pre,blockquote{border:1px solid var(--color-gray-5) !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:var(--lbry-black) !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,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{height:var(--height-badge);border-radius:var(--border-radius);font-size:var(--font-small);padding:var(--spacing-xs) var(--spacing-xs);white-space:nowrap;user-select:none;cursor:pointer;align-items:center}.badge--tag{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black);line-height:1}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-m);line-height:1.2;font-weight:var(--font-weight-bold)}.button--alt{padding:var(--spacing-s) var(--spacing-s)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.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--link{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover{text-decoration:underline;color:var(--color-link-hover)}input,textarea,select{height:var(--height-input);border-radius:var(--border-radius);border:1px solid;color:var(--color-input);border-color:var(--color-input-border);background-color:var(--color-input-bg);padding-right:var(--spacing-s);padding-left:var(--spacing-s)}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px var(--color-focus)}input::placeholder,textarea::placeholder,select::placeholder{color:var(--color-input-placeholder);opacity:.4}input:disabled,textarea:disabled,select:disabled{opacity:.4}input:disabled+label,textarea:disabled+label,select:disabled+label{opacity:.4}input[type=range],textarea[type=range],select[type=range]{height:auto;height:.5rem;background-color:var(--color-secondary)}checkbox-element,radio-element,select{cursor:pointer}select{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");background-position:99% center;background-repeat:no-repeat;background-size:1rem;padding-right:var(--spacing-l);padding-left:var(--spacing-s)}fieldset-group,.fieldset-group{display:flex;flex-direction:row;justify-content:space-between}fieldset-group.fieldset-group--smushed fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+fieldset-section,fieldset-group.fieldset-group--smushed fieldset-section+.fieldset-section,fieldset-group.fieldset-group--smushed .fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+fieldset-section,.fieldset-group--smushed.fieldset-group fieldset-section+.fieldset-section,.fieldset-group--smushed.fieldset-group .fieldset-section+.fieldset-section{margin-top:0}fieldset-section+fieldset-section,.fieldset-section+fieldset-section,fieldset-section+.fieldset-section,.fieldset-section+.fieldset-section,fieldset-section+form,.fieldset-section+form,fieldset-section+.checkbox,.fieldset-section+.checkbox,fieldset-section+.radio,.fieldset-section+.radio,form+fieldset-section,form+.fieldset-section,form+form,form+.checkbox,form+.radio,.checkbox+fieldset-section,.checkbox+.fieldset-section,.checkbox+form,.checkbox+.checkbox,.checkbox+.radio,.radio+fieldset-section,.radio+.fieldset-section,.radio+form,.radio+.checkbox,.radio+.radio{margin-top:var(--spacing-s)}fieldset-section:last-child,.fieldset-section:last-child,form:last-child,.checkbox:last-child,.radio:last-child{margin-bottom:0}fieldset-section input,.fieldset-section input,fieldset-section select,.fieldset-section select,form input,form select,.checkbox input,.checkbox select,.radio input,.radio select{width:100%}fieldset-section,.fieldset-section,.checkbox,.radio{display:flex;flex-direction:column}label{font-size:var(--font-small);color:var(--color-input-label);display:inline-block;margin-bottom:var(--spacing-xxs)}input-submit,.input-submit{display:flex}input-submit>*:first-child,.input-submit>*:first-child,input-submit>*:nth-child(2),.input-submit>*:nth-child(2){margin:0}input-submit>*:first-child,.input-submit>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}input-submit>*:nth-child(2),.input-submit>*:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-border)}.checkbox,.radio{position:relative}.checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{height:var(--height-checkbox);width:var(--height-checkbox);position:absolute;border:none;left:0;padding:0;background-color:transparent}.checkbox input[type=checkbox]:disabled+label,.checkbox input[type=radio]:disabled+label,.radio input[type=checkbox]:disabled+label,.radio input[type=radio]:disabled+label{cursor:default;pointer-events:none}.checkbox label,.radio label{position:relative;display:inline-block;margin:0;font-size:var(--font-base);padding-left:calc(var(--height-checkbox) + var(--spacing-s));min-height:var(--height-checkbox)}.checkbox label::before,.radio label::before{background-color:var(--color-input-toggle-bg)}.checkbox label:hover::before,.radio label:hover::before{background-color:var(--color-input-toggle-bg-hover)}.checkbox label::before,.checkbox label::after,.radio label::before,.radio label::after{position:absolute;content:""}.checkbox input[type=checkbox]+label::after,.checkbox input[type=radio]+label::after,.radio input[type=checkbox]+label::after,.radio input[type=radio]+label::after{content:none}.checkbox input[type=checkbox]:checked+label::after,.checkbox input[type=radio]:checked+label::after,.radio input[type=checkbox]:checked+label::after,.radio input[type=radio]:checked+label::after{content:""}.checkbox input[type=checkbox]:focus+label::before,.checkbox input[type=radio]:focus+label::before,.radio input[type=checkbox]:focus+label::before,.radio input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--color-focus)}.checkbox label::before{height:var(--height-checkbox);width:var(--height-checkbox);border:1px solid var(--color-input-border);border-radius:var(--border-radius);left:0px;top:-1px}.checkbox label::after{height:6px;width:12px;border-left:2px solid;border-bottom:2px solid;border-color:var(--color-input-toggle);transform:rotate(-45deg);left:6px;top:6px}.radio input[type=radio]{border-radius:50%}.radio label::before{height:var(--height-radio);width:var(--height-radio);border:1px solid var(--color-input-border);border-radius:calc(var(--height-radio) * 0.5);left:0px;top:-1px}.radio label::after{height:12px;width:12px;border-radius:50%;background-color:var(--color-secondary);left:6px;top:5px}.range__label{display:flex;justify-content:space-between;width:100%}.range__label>*{width:33%;text-align:center}.range__label>*:first-of-type{text-align:left}.range__label>*:last-of-type{text-align:right}.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed tr:nth-child(2n){background-color:transparent}.table__item-label{font-size:var(--font-multiplier-small);font-weight:300;color:var(--color-text-subtitle)}.table__item--align-right{text-align:right}drawer-navigation{width:100%;height:5rem;display:inline-flex;flex:1;font-size:inherit;justify-content:center;position:relative;z-index:10}drawer-navigation-helper{width:0;height:0;top:3rem;left:-5rem;border-right:8rem solid transparent;border-bottom:5rem solid transparent;border-left:8rem solid transparent;position:absolute}drawer-section{padding-right:1rem;padding-left:1rem}drawer-section:not(:hover):not(.active) drawer-title::after{background-color:transparent}drawer-section:not(:hover):not(.active) drawer-navigation-helper,drawer-section:not(:hover):not(.active) drawer-wrap{display:none}drawer-section:hover,drawer-section.active{z-index:3}drawer-section:hover drawer-title::after,drawer-section.active drawer-title::after{background-color:var(--color-primary)}drawer-title{height:100%;align-items:center;cursor:default;display:flex;line-height:3;position:relative;z-index:1}drawer-title::after{width:100%;height:1px;bottom:-1px;left:0;content:"";position:absolute;z-index:1}drawer-wrap{width:100%;top:5rem;left:0;background-color:var(--color-white);border-top:1px solid var(--color-gray-1);padding-top:2rem;padding-bottom:2rem;position:absolute}drawer-wrap::after{width:100vw;height:calc(100vh - 5rem);top:5rem;left:0;background-color:var(--color-black);content:"";opacity:.3;pointer-events:none;position:absolute;z-index:-1}drawer-children{display:flex;flex-wrap:wrap;position:relative}drawer-child{padding:var(--spacing-s);border:2px solid;transition:all .2s}drawer-child:not(:hover){border-color:transparent}drawer-child:hover{border-color:var(--color-gray-1);padding-left:var(--spacing-m)}drawer-child:hover>a{color:var(--lbry-primary)}drawer-child:not([full-width]){width:50%}drawer-child[full-width]{width:100%}drawer-child span{display:flex;padding-top:.25rem;padding-bottom:.25rem}body{cursor:default;font-weight:var(--font-weight-base);font-size:var(--font-base);line-height:1.5;font-weight:400;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}hr{height:1px;background-color:var(--color-gray-2)}/*# sourceMappingURL=index.css.map */