diff --git a/package-lock.json b/package-lock.json index d4b0705b..3753c90e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10119,7 +10119,7 @@ }, "finalhandler": { "version": "1.1.2", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", + "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", "dev": true, "requires": { @@ -11167,7 +11167,7 @@ }, "got": { "version": "9.6.0", - "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", + "resolved": "http://registry.npmjs.org/got/-/got-9.6.0.tgz", "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==", "dev": true, "requires": { @@ -11511,7 +11511,7 @@ }, "http-errors": { "version": "1.7.2", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", "dev": true, "requires": { @@ -14687,7 +14687,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -17927,7 +17927,7 @@ "dependencies": { "http-errors": { "version": "1.6.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { @@ -19052,7 +19052,7 @@ }, "through": { "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, diff --git a/src/renderer/assets/img/invidious-logo-dark.svg b/src/renderer/assets/img/invidious-logo-dark.svg new file mode 100644 index 00000000..a0542d63 --- /dev/null +++ b/src/renderer/assets/img/invidious-logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/img/invidious-logo-light.svg b/src/renderer/assets/img/invidious-logo-light.svg new file mode 100644 index 00000000..d1c7c196 --- /dev/null +++ b/src/renderer/assets/img/invidious-logo-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/img/yt_logo_mono_dark.png b/src/renderer/assets/img/yt_logo_mono_dark.png new file mode 100644 index 00000000..05a4df7c Binary files /dev/null and b/src/renderer/assets/img/yt_logo_mono_dark.png differ diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css index f5378730..8da474f1 100644 --- a/src/renderer/components/ft-button/ft-button.css +++ b/src/renderer/components/ft-button/ft-button.css @@ -17,7 +17,7 @@ font-weight: 500; vertical-align: middle; margin: 5px; - box-shadow: 0 0 2px -2px rgba(29, 39, 231, .1), 0 0 3px 0 rgba(29, 39, 231, .1), 0 0 5px 0 rgba(29, 39, 231, .1), 0 2px 2px -4px rgba(29, 39, 231, .1), 0 4px 8px 0 rgba(29, 39, 231, .1), 0 2px 15px 0 rgba(29, 39, 231, .1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .ripple { diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js index 7c70ddb3..c4b66418 100644 --- a/src/renderer/components/ft-button/ft-button.js +++ b/src/renderer/components/ft-button/ft-button.js @@ -15,7 +15,7 @@ export default Vue.extend({ props: { label: { type: String, - required: true + default: "" }, textColor: { type: String, diff --git a/src/renderer/components/ft-button/ft-button.vue b/src/renderer/components/ft-button/ft-button.vue index 4ae16773..24cbfdb6 100644 --- a/src/renderer/components/ft-button/ft-button.vue +++ b/src/renderer/components/ft-button/ft-button.vue @@ -8,7 +8,9 @@ }" @click="$emit('click')" > - {{ label }} + + {{ label }} + diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.css b/src/renderer/components/ft-icon-button/ft-icon-button.css deleted file mode 100644 index bd65f661..00000000 --- a/src/renderer/components/ft-icon-button/ft-icon-button.css +++ /dev/null @@ -1,121 +0,0 @@ -.ftIconButton { - display: flex; - flex-flow: row wrap; - justify-content: space-evenly; - position: relative; -} - -.iconButton { - width: 1em; - height: 1em; - padding: 10px; - font-size: 20px; - border-radius: 50%; - cursor: pointer; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; -} - -.shadow { - box-shadow: 0 1px 2px rgba(0,0,0,.5); -} - -.iconButton:hover { - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; - transition: background 0.2s ease-in; -} - -.base { - background-color: var(--card-bg-color); - color: var(--primary-text-color); -} - -.base:hover { - background-color: var(--side-nav-hover-color); -} - -.base:active { - background-color: var(--side-nav-active-color); -} - -.primary { - background-color: var(--primary-color); - color: var(--text-with-main-color); -} - -.primary:hover { - background-color: var(--primary-color-hover); -} - -.primary:active { - background-color: var(--primary-color-active); -} - -.secondary { - background-color: var(--accent-color); - color: var(--text-with-accent-color); -} - -.secondary:hover { - background-color: var(--accent-color-hover); -} - -.secondary:active { - background-color: var(--accent-color-active); -} - -.iconDropdown { - position: absolute; - text-align: center; - list-style-type: none; - z-index: 100; - margin-top: 45px; - font-size: 12px; - box-shadow: 0 1px 2px rgba(0,0,0,.5); - background-color: var(--card-bg-color); - color: var(--secondary-text-color); -} - -.iconDropdown .dropdownItem { - padding: 10px; - margin: 0; - white-space: nowrap; - cursor: pointer; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; -} - -.iconDropdown .dropdownItem:hover { - background-color: var(--side-nav-hover-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; - transition: background 0.2s ease-in; -} - -.iconDropdown .dropdownItem:active { - background-color: var(--side-nav-active-color); - -moz-transition: background 0.1s ease-in; - -o-transition: background 0.1s ease-in; - transition: background 0.1s ease-in; -} - -.iconDropdown .dropdownItem a { - text-decoration: none; - color: inherit; -} - -.left { - right: 50%; -} - -.right { - left: 50%; -} - -.top { - margin-top: 0px; - bottom: 60px; -} diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass new file mode 100644 index 00000000..338e9228 --- /dev/null +++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass @@ -0,0 +1,85 @@ +.ftIconButton + display: flex + flex-flow: row wrap + justify-content: space-evenly + position: relative + +.iconButton + width: 1em + height: 1em + padding: 10px + font-size: 20px + border-radius: 50% + cursor: pointer + transition: background 0.15s ease-out + + &.shadow + box-shadow: 0 1px 2px rgba(0,0,0,.5) + + &.base + background-color: var(--card-bg-color) + color: var(--primary-text-color) + + &:hover + background-color: var(--side-nav-hover-color) + + &:active + background-color: var(--side-nav-active-color) + + &.primary + background-color: var(--primary-color) + color: var(--text-with-main-color) + + &:hover + background-color: var(--primary-color-hover) + + &:active + background-color: var(--primary-color-active) + + &.secondary + background-color: var(--accent-color) + color: var(--text-with-accent-color) + + &:hover + background-color: var(--accent-color-hover) + + &:active + background-color: var(--accent-color-active) + +.iconDropdown + position: absolute + text-align: center + list-style-type: none + z-index: 3 + margin-top: 45px + font-size: 12px + box-shadow: 0 1px 2px rgba(0,0,0,.5) + background-color: var(--side-nav-color) + color: var(--secondary-text-color) + user-select: none + + &.left + right: calc(50% - 20px) + + &.right + left: calc(50% - 20px) + + .list + margin: 0 + padding: 0 + list-style-type: none + + .listItem + padding: 10px + margin: 0 + white-space: nowrap + cursor: pointer + transition: background 0.2s ease-out + + &:hover + background-color: var(--side-nav-hover-color) + transition: background 0.2s ease-in + + &:active + background-color: var(--side-nav-active-color) + transition: background 0.1s ease-in diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index 913dc8e3..e445a5d2 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue @@ -24,22 +24,23 @@ }" > -
- -
+ +