diff --git a/base/options/options.css b/base/options/options.css index 1041cf4..5b3a106 100644 --- a/base/options/options.css +++ b/base/options/options.css @@ -1,56 +1,300 @@ +:root{ + --bs-blue: #0d6efd; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #d63384; + --bs-red: #dc3545; + --bs-orange: #fd7e14; + --bs-yellow: #ffc107; + --bs-green: #198754; + --bs-teal: #20c997; + --bs-cyan: #0dcaf0; + --bs-black: #000; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #0d6efd; + --bs-secondary: #6c757d; + --bs-success: #198754; + --bs-info: #0dcaf0; + --bs-warning: #ffc107; + --bs-danger: #dc3545; + --bs-light: #f8f9fa; + --bs-dark: #212529; + --bs-primary-rgb: 13,110,253; + --bs-secondary-rgb: 108,117,125; + --bs-success-rgb: 25,135,84; + --bs-info-rgb: 13,202,240; + --bs-warning-rgb: 255,193,7; + --bs-danger-rgb: 220,53,69; + --bs-light-rgb: 248,249,250; + --bs-dark-rgb: 33,37,41; + --bs-white-rgb: 255,255,255; + --bs-black-rgb: 0,0,0; + --bs-body-color-rgb: 33,37,41; + --bs-body-bg-rgb: 255,255,255; + --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: var(--bs-font-sans-serif); + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; + --bs-border-width: 1px; + --bs-border-style: solid; + --bs-border-color: #dee2e6; + --bs-border-color-translucent: rgba(0, 0, 0, 0.175); + --bs-border-radius: 0.375rem; + --bs-border-radius-sm: 0.25rem; + --bs-border-radius-lg: 0.5rem; + --bs-border-radius-xl: 1rem; + --bs-border-radius-2xl: 2rem; + --bs-border-radius-pill: 50rem; + --bs-link-color: #0d6efd; + --bs-link-hover-color: #0a58ca; + --bs-code-color: #d63384; + --bs-highlight-bg: #fff3cd; +} + +*, ::after, ::before { + box-sizing: border-box; +} + body { color: #ffffff; font-family: 'Courier New', monospace; + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important; + + margin: 0; + font-size: var(--bs-body-font-size); + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; } -.stv-blurimagemask { - opacity: 0.5; +.mb-5 { + margin-bottom: 3rem!important; +} +.mb-3 { + margin-bottom: 1rem!important; +} +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: .5rem; + font-weight: 500; + line-height: 1.2; } -.stv-blurimagemask > img { - filter: blur(2px); - -webkit-filter: blur(2px); - -moz-filter: blur(2px); - -o-filter: blur(2px); - -ms-filter: blur(2px); +.h1, h1 { + font-size: 2.5rem; } -.stv-playlist { - overflow: scroll hidden; - -ms-overflow-style: none; - scrollbar-width: none; - flex-flow: row; +.text-center { + text-align: center!important; } -.stv-main-grid { - display: grid; - grid-template-areas: - "player player clients" - "player player clients" - "playlist playlist clients"; +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-.5 * var(--bs-gutter-x)); + margin-left: calc(-.5 * var(--bs-gutter-x)); } -.stv-main-grid > .stv-player-grid { - min-height: 721px; - min-width: 1422px; - padding-left: 128px; - margin-bottom: 40px; - grid-area: player; +.col-form-label { + padding-top: calc(.375rem + 1px); + padding-bottom: calc(.375rem + 1px); + margin-bottom: 0; + font-size: inherit; + line-height: 1.5; +} +.col-sm-2 { + flex: 0 0 auto; + width: 16.66666667%; +} +.col-sm-10 { + flex: 0 0 auto; + width: 83.33333333%; +} +.row>* { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * .5); + padding-left: calc(var(--bs-gutter-x) * .5); + margin-top: var(--bs-gutter-y); } -.stv-main-grid > .stv-clients-grid { - padding-right: 20px; - text-align: end; - grid-area: clients; + +label { + display: inline-block; } -.stv-main-grid > .stv-playlist-grid { - padding-left: 128px; - min-width: 1422px; - grid-area: playlist; +.form-control { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: .375rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } -#playlist > div > div.card-img-overlay.p-2 > h5 > a { - color: white; +button, input, optgroup, select, textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.form-control.is-valid, .was-validated .form-control:valid { + border-color: #198754; + padding-right: calc(1.5em + .75rem); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right calc(.375em + .1875rem) center; + background-size: calc(.75em + .375rem) calc(.75em + .375rem); +} +.form-control.is-invalid, .was-validated .form-control:invalid { + border-color: #dc3545; + padding-right: calc(1.5em + .75rem); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right calc(.375em + .1875rem) center; + background-size: calc(.75em + .375rem) calc(.75em + .375rem); +} + +.text-white { + --bs-text-opacity: 1; + color: rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important; +} +.form-text { + margin-top: .25rem; + font-size: .875em; + color: #6c757d; +} +.small, small { + font-size: .875em; +} + +[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { + cursor: pointer; +} + +.btn-danger { + --bs-btn-color: #fff; + --bs-btn-bg: #dc3545; + --bs-btn-border-color: #dc3545; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #bb2d3b; + --bs-btn-hover-border-color: #b02a37; + --bs-btn-focus-shadow-rgb: 225,83,97; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #b02a37; + --bs-btn-active-border-color: #a52834; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: #dc3545; + --bs-btn-disabled-border-color: #dc3545; +} +.btn-success { + --bs-btn-color: #fff; + --bs-btn-bg: #198754; + --bs-btn-border-color: #198754; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #157347; + --bs-btn-hover-border-color: #146c43; + --bs-btn-focus-shadow-rgb: 60,153,110; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #146c43; + --bs-btn-active-border-color: #13653f; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: #198754; + --bs-btn-disabled-border-color: #198754; +} +.btn-primary { + --bs-btn-color: #fff; + --bs-btn-bg: #0d6efd; + --bs-btn-border-color: #0d6efd; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #0b5ed7; + --bs-btn-hover-border-color: #0a58ca; + --bs-btn-focus-shadow-rgb: 49,132,253; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #0a58ca; + --bs-btn-active-border-color: #0a53be; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: #0d6efd; + --bs-btn-disabled-border-color: #0d6efd; +} + +.btn { + --bs-btn-padding-x: 0.75rem; + --bs-btn-padding-y: 0.375rem; + /* --bs-btn-font-family: + "Courier New", monospace; */ + --bs-btn-font-size: 1rem; + --bs-btn-font-weight: 400; + --bs-btn-line-height: 1.5; + /* --bs-btn-color: #212529; */ + /* --bs-btn-bg: transparent; */ + --bs-btn-border-width: 1px; + --bs-btn-border-color: transparent; + --bs-btn-border-radius: 0.375rem; + --bs-btn-box-shadow: inset 0 1px 0 + rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075); + --bs-btn-disabled-opacity: 0.65; + --bs-btn-focus-box-shadow: 0 0 0 0.25rem + rgba(var(--bs-btn-focus-shadow-rgb), .5); + display: inline-block; + padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); + font-size: var(--bs-btn-font-size); + font-weight: var(--bs-btn-font-weight); + line-height: var(--bs-btn-line-height); + color: var(--bs-btn-color); + text-align: center; text-decoration: none; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); + border-radius: var(--bs-btn-border-radius); + background-color: var(--bs-btn-bg); + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} +[type=button], [type=reset], [type=submit], button { + -webkit-appearance: button; +} +button, select { + text-transform: none; +} +button:focus:not(:focus-visible) { + outline: 0; } \ No newline at end of file diff --git a/base/options/options.html b/base/options/options.html index 034d8dc..00e9a10 100644 --- a/base/options/options.html +++ b/base/options/options.html @@ -3,11 +3,9 @@ Options for StammTV Chrome Extension - - +

StammTV Extension Settings StammTV Logo

diff --git a/base/options/options.js b/base/options/options.js index 4c6f936..64e8105 100644 --- a/base/options/options.js +++ b/base/options/options.js @@ -22,16 +22,21 @@ function save_options() { } if(valid) { - chrome.storage.local.set({ - baseURL: stammTVBaseUrl.value, - wssURL: stammTVWSSUrl.value - }, function () { - // Update form controls to let user know options were saved. - saveButton.classList.replace('btn-primary', 'btn-success'); - saveButton.classList.replace('btn-danger', 'btn-success'); - saveButton.textContent = '... saved!'; - }); + if(chrome && chrome.storage && chrome.storage.local) { + chrome.storage.local.set({ + baseURL: stammTVBaseUrl.value, + wssURL: stammTVWSSUrl.value + }, function () { + // Update form controls to let user know options were saved. + saveButton.classList.replace('btn-primary', 'btn-success'); + saveButton.classList.replace('btn-danger', 'btn-success'); + saveButton.textContent = '... saved!'; + }); + } else { + console.error('Unsupported browser or no access to localStorage') + } } else { + console.error('Failed to save - wrong information given.') saveButton.classList.replace('btn-primary', 'btn-danger'); saveButton.classList.replace('btn-success', 'btn-danger'); saveButton.textContent = '... failed to save!'; @@ -41,13 +46,17 @@ function save_options() { // Restores select box and checkbox state using the preferences // stored in chrome.storage. function load_options() { - chrome.storage.local.get({ - baseURL: 'Please fill in.', - wssURL: 'Please fill in.' - }, function (items) { - stammTVBaseUrl.value = items.baseURL; - stammTVWSSUrl.value = items.wssURL; - }); + if(chrome && chrome.storage && chrome.storage.local) { + chrome.storage.local.get({ + baseURL: 'Please fill in.', + wssURL: 'Please fill in.' + }, function (items) { + stammTVBaseUrl.value = items.baseURL; + stammTVWSSUrl.value = items.wssURL; + }); + } else { + console.error('Unsupported browser or no access to localStorage') + } } document.addEventListener('DOMContentLoaded', load_options);