| 1 |
- :root { --background: #212121; --text: #FFFFFF; --secondary-hover: #73828c; --secondary-focus: #606060; --secondary-inverse: #FFF; --primary-background: #757575; --secondary-background: #424242; --link: #00B0FF; --link-visited: #40C4FF; --buttom: #dcdcdb; --buttom-text: #415462; --button-border: #91918c; --buttom-hover: #BBB; --search-text: #FFF; --time-background: #212121; --time-text: #FFF;}.simple-modal { --gutter: 14px; --modal-color: #212121; --soft-color: #fafafa; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2000; position: fixed; background-color: rgba(0, 0, 0, 0.7); padding-top: 2%;}.simple-modal__content { width: 95vw; height: 90vh; max-height: 700px; max-width: 600px; position: relative; overflow: hidden; border-radius: 4px; margin: 0 auto; background-color: #ffffff; display: flex; flex-direction: column;}.simple-modal__content header { min-height: 60px; height: 60px; color: #ffffff; background-color: var(--modal-color); display: grid; padding-left: var(--gutter); align-items: center; grid-template-columns: auto 60px;}.simple-modal__content header h4 { margin: 0; text-align: left;}.simple-modal__content header span { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 20px; opacity: 0.8; cursor: pointer;}.simple-modal__content header span:hover { opacity: 1;}.simple-modal__content .modal-main { flex: 1; text-align: left; overflow: auto; padding: var(--gutter); color: #212121;}.simple-modal__content footer { height: auto; text-align: right; border-top: solid 1px #cccccc; padding: var(--gutter); background-color: #ffffff; background-color: var(--soft-color);}.simple-modal__content footer button, .simple-modal__content footer input { margin: 0;}.simple-modal__content footer button:not(:last-child), .simple-modal__content footer input:not(:last-child) { margin-right: var(--gutter);}.container { width: 100vw; height: 100vh; background-size: cover; background-repeat: no-repeat;}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */}/* Sections ========================================================================== *//** * Remove the margin in all browsers. */body { margin: 0;}/** * Render the `main` element consistently in IE. */main { display: block;}/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */h1 { font-size: 2em; margin: 0.67em 0;}/* Grouping content ========================================================================== *//** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */}/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */}/* Text-level semantics ========================================================================== *//** * Remove the gray background on active links in IE 10. */a { background-color: transparent;}/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */}/** * Add the correct font weight in Chrome, Edge, and Safari. */b,strong { font-weight: bolder;}/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */code,kbd,samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */}/** * Add the correct font size in all browsers. */small { font-size: 80%;}/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}/* Embedded content ========================================================================== *//** * Remove the border on images inside links in IE 10. */img { border-style: none;}/* Forms ========================================================================== *//** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */button,input,optgroup,select,textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */}/** * Show the overflow in IE. * 1. Show the overflow in Edge. */button,input { /* 1 */ overflow: visible;}/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */button,select { /* 1 */ text-transform: none;}/** * Correct the inability to style clickable types in iOS and Safari. */button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}/** * Remove the inner border and padding in Firefox. */button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}/** * Restore the focus styles unset by the previous rule. */button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}/** * Correct the padding in Firefox. */fieldset { padding: 0.35em 0.75em 0.625em;}/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */}/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */progress { vertical-align: baseline;}/** * Remove the default vertical scrollbar in IE 10+. */textarea { overflow: auto;}/** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */[type="checkbox"],[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */}/** * Correct the cursor style of increment and decrement buttons in Chrome. */[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto;}/** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */}/** * Remove the inner padding in Chrome and Safari on macOS. */[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */}/* Interactive ========================================================================== *//* * Add the correct display in Edge, IE 10+, and Firefox. */details { display: block;}/* * Add the correct display in all browsers. */summary { display: list-item;}/* Misc ========================================================================== *//** * Add the correct display in IE 10+. */template { display: none;}/** * Add the correct display in IE 10. */[hidden] { display: none;}html { font-family: "liberation serif", "times new roman", calibri, carlito, serif; background: var(--background); color: var(--text);}body { display: grid; grid-gap: 20px; grid-template-areas: "header" "main" "footer"; /* Fix height */ height: 100vh; grid-template-rows: auto 1fr auto; /* fix top and bottom */ margin-left: 1rem; margin-right: 1rem;}img { width: 100%; height: auto;}a:link { color: var(--link);}a:visited { color: var(--link-visited);}input[type="text"],input[type="search"] { background: var(--background); border: 1px solid var(--button-border); padding: 0.4rem 0.4rem; font-size: 15px; color: var(--search-text);}input[type='search'] { border-bottom: 1px solid var(--button-border); border-top: 0px; border-left: 0px; border-right: 0px; border-radius: 0px;}header { display: grid; grid-gap: 1px; grid-template-areas: "home" "form" "playlist"; grid-area: header;}.home { grid-area: home; margin-left: auto; margin-right: auto; margin-bottom: 1rem; margin-top: 1rem;}.form { display: grid; grid-gap: 4px; grid-template-areas: "search-box" "search-button" "dropdown"; grid-area: form;}.search-box { grid-area: search-box;}.search-button { grid-area: search-button; cursor: pointer; padding-bottom: 6px; padding-left: .75em; padding-right: .75em; padding-top: 6px; text-align: center; white-space: nowrap; background-color: var(--buttom); border: 1px solid var(--button-border); color: var(--buttom-text); border-radius: 5px;}.search-button:hover { background-color: var(--buttom-hover);}.dropdown { display: grid; grid-gap: 1px; grid-template-areas: "dropdown-label" "dropdown-content"; grid-area: dropdown; z-index: 1;}.dropdown-label { grid-area: dropdown-label; padding-bottom: 6px; padding-left: .75em; padding-right: .75em; padding-top: 6px; text-align: center; white-space: nowrap; background-color: var(--buttom); border: 1px solid var(--button-border); color: var(--buttom-text); border-radius: 5px;}.dropdown-label:hover { background-color: var(--buttom-hover);}/* playlist */.playlist { display: grid; grid-gap: 4px; grid-template-areas: "play-box" "play-hidden" "play-add" "play-clean"; grid-area: playlist;}.play-box { grid-area: play-box;}.play-hidden { grid-area: play-hidden;}.play-add { grid-area: play-add; cursor: pointer; padding-bottom: 6px; padding-left: .75em; padding-right: .75em; padding-top: 6px; text-align: center; white-space: nowrap; background-color: var(--buttom); border: 1px solid var(--button-border); color: var(--buttom-text); border-radius: 5px;}.play-add:hover { background-color: var(--buttom-hover);}.play-clean { display: grid; grid-area: play-clean;}.play-clean > button { padding-bottom: 6px; padding-left: .75em; padding-right: .75em; padding-top: 6px; text-align: center; white-space: nowrap; background-color: var(--buttom); border: 1px solid var(--button-border); color: var(--buttom-text); border-radius: 5px;}.play-clean > button:hover { background-color: var(--buttom-hover);}/* /playlist *//* ------------- Menu Mobile sin JS ---------------- *//* input hidden */.opt-box { display: none;}.dropdown-content { display: none; grid-area: dropdown-content;}label[for=options-toggle-cbox] { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}#options-toggle-cbox:checked ~ .dropdown-content { display: inline-grid; white-space: nowrap;}/*- ----------- End Menu Mobile sin JS ------------- */.main { grid-area: main; display: grid; grid-row-gap: 1rem;}/* fix hr when is children of grid */hr { width: 100%;}.result-info { justify-self: center;}/* pagination */.main .pagination-container { display: grid; justify-content: center;}.main .pagination-container .pagination-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}.main .pagination-container .pagination-list .page-link { border-style: none; font-weight: bold; text-align: center; background: var(--secondary-focus); text-decoration: none; align-self: center; padding: .5rem; margin: 0.2rem; width: 1rem;}.main .pagination-container .pagination-list .page-link.is-current { background: var(--secondary-background);}/* Country list item */.country-container { display: grid; grid-row-gap: 0.5rem;}.length { position: absolute; background-color: rgba(35, 35, 35, 0.75); color: #fff; border-radius: 2px; padding: 2px; font-size: 16px; right: 0.25em; bottom: -0.75em;}.item-box { display: grid; grid-template-columns: 1.9fr 0.1fr; grid-template-rows: 1fr; grid-gap: 1px; grid-template-areas: "item-country item-checkbox";}.item-country { grid-area: item-country; display: grid; grid-template-columns: auto; grid-template-rows: repeat(4, auto); grid-row-gap: 0.4rem; grid-template-areas: "thumbnail-box" "info-box"; align-items: center; font-size: 0.7rem;}.item-country a { text-decoration: none; cursor: pointer;}.item-country.channel-item .thumbnail.channel { display: flex; justify-content: center; align-items: center; padding: 0px; text-align: center;}.item-country.channel-item .thumbnail-img.channel { width: 56.25%; position: relative;}.thumbnail-box { grid-area: thumbnail-box; position: relative;}.playlist-item .thumbnail-info { position: absolute; right: 0px; bottom: 0px; height: 100%; width: 50%; text-align: center; white-space: pre-line; opacity: .8; color: var(--text); font-size: 0.8125rem; background: var(--secondary-background); padding: 0;}.playlist-item .thumbnail-info span { position: absolute; top: 50%; transform: translate(-50%, -50%); text-transform: none;}.thumbnail { padding: 28.125%; position: relative; box-sizing: border-box;}.thumbnail-img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; background-color: var(--primary-background);}.title { font-size: 0.8rem; margin: 0px; font-weight: normal; overflow: hidden; text-overflow: ellipsis;}.info-box address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.thumbnail-info { background-color: var(--time-background); color: #fff; padding: 2px 5px; text-transform: uppercase; font-weight: 700; font-size: 12px; position: absolute; right: 0; bottom: .2rem;}.item-checkbox { grid-area: item-checkbox; justify-self: start; align-self: center; min-width: 30px; margin: 0px;}.stats { display: flex; justify-content: space-between;}.horizontal-stats > li { display: inline;}.horizontal-stats > li:first-child::after { content: " | ";}/* /country list item */.footer { grid-area: footer; display: grid; grid-template-columns: auto; align-items: center; justify-content: center; margin: auto; text-align: center;}.footer > p { text-align: center;}@media (min-width: 480px) { .item-country { font-size: 0.85rem; } .info-box { grid-gap: 2px; } .title { font-size: 1rem; }}@media (min-width: 600px) { .country-container { display: grid; grid-row-gap: 0.5rem; grid-template-columns: 1fr 1fr; }}@media (min-width: 992px) { body { display: grid; grid-template-columns: 0.3fr 2fr 1fr 0.3fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header header" "main main main main" "footer footer footer footer"; } .form { display: grid; grid-gap: 1px; grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; grid-template-areas: ". search-box search-button dropdown"; grid-area: form; position: relative; } .dropdown { display: grid; grid-gap: 1px; grid-template-columns: minmax(50px, 100px); grid-template-areas: "dropdown-label" "dropdown-content"; grid-area: dropdown; background: var(--background); padding-right: 4rem; z-index: 1; position: absolute; } /* playlist */ .playlist { display: grid; grid-gap: 1px; grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; grid-template-areas: ". play-box play-add play-clean"; grid-area: playlist; } .play-clean { grid-template-columns: minmax(50px, 100px); } .play-clean > button { padding-left: 0px; padding-right: 0px; padding-bottom: 6px; padding-top: 6px; text-align: center; white-space: nowrap; background-color: var(--buttom); color: var(--buttom-text); border-radius: 5px; cursor: pointer; } .country-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-row-gap: 1rem; grid-column-gap: 1rem; } .footer { display: grid; grid-template-columns: repeat(3, auto); grid-column-gap: 2rem; align-items: center; justify-content: center; text-align: center; margin-top: 1rem; margin-bottom: 1rem; }}
|
