[vlc-devel] [PATCH 14/15] http: update common styles
David Loiret
loiret.d at gmail.com
Tue Jun 23 14:42:49 CEST 2020
---
share/lua/http/src/scss/bootstrap.scss | 105 ++++--
.../http/src/scss/bootstrap_variables.scss | 2 +
share/lua/http/src/scss/collapse.scss | 38 ++
share/lua/http/src/scss/components.scss | 9 +-
share/lua/http/src/scss/grid-item.scss | 201 +++++++++++
share/lua/http/src/scss/list-item.scss | 137 +++++++
share/lua/http/src/scss/main.scss | 336 +++++++++++++++++-
share/lua/http/src/scss/mixins.util.scss | 32 --
share/lua/http/src/scss/table-item.scss | 103 ++++++
share/lua/http/src/scss/tag-item.scss | 67 ++++
share/lua/http/src/scss/theme.scss | 104 ++++++
share/lua/http/src/scss/vendors.scss | 1 -
12 files changed, 1059 insertions(+), 76 deletions(-)
create mode 100644 share/lua/http/src/scss/bootstrap_variables.scss
create mode 100644 share/lua/http/src/scss/collapse.scss
create mode 100644 share/lua/http/src/scss/grid-item.scss
create mode 100644 share/lua/http/src/scss/list-item.scss
create mode 100644 share/lua/http/src/scss/table-item.scss
create mode 100644 share/lua/http/src/scss/tag-item.scss
create mode 100644 share/lua/http/src/scss/theme.scss
diff --git a/share/lua/http/src/scss/bootstrap.scss b/share/lua/http/src/scss/bootstrap.scss
index d317da84b9..b6ac4ea865 100644
--- a/share/lua/http/src/scss/bootstrap.scss
+++ b/share/lua/http/src/scss/bootstrap.scss
@@ -1,40 +1,75 @@
-// Core variables and mixins
- at import "bootstrap/variables";
- at import "bootstrap/mixins";
-// Reset and dependencies
- at import "bootstrap/normalize";
- at import "bootstrap/print";
+ at import "../vendors/bootstrap/scss/functions";
+ at import "../vendors/bootstrap/scss/variables";
+ at import "bootstrap_variables.scss";
+ at import "../vendors/bootstrap/scss/mixins";
+ at import "../vendors/bootstrap/scss/root";
+ at import "../vendors/bootstrap/scss/reboot";
+ at import "../vendors/bootstrap/scss/type";
+ at import "../vendors/bootstrap/scss/images";
+ at import "../vendors/bootstrap/scss/code";
+ at import "../vendors/bootstrap/scss/grid";
+ at import "../vendors/bootstrap/scss/tables";
+ at import "../vendors/bootstrap/scss/forms";
+ at import "../vendors/bootstrap/scss/buttons";
+ at import "../vendors/bootstrap/scss/transitions";
+ at import "../vendors/bootstrap/scss/dropdown";
+ at import "../vendors/bootstrap/scss/button-group";
+ at import "../vendors/bootstrap/scss/input-group";
+ at import "../vendors/bootstrap/scss/custom-forms";
+ at import "../vendors/bootstrap/scss/nav";
+ at import "../vendors/bootstrap/scss/navbar";
+ at import "../vendors/bootstrap/scss/card";
+ at import "../vendors/bootstrap/scss/breadcrumb";
+ at import "../vendors/bootstrap/scss/pagination";
+ at import "../vendors/bootstrap/scss/badge";
+ at import "../vendors/bootstrap/scss/jumbotron";
+ at import "../vendors/bootstrap/scss/alert";
+ at import "../vendors/bootstrap/scss/progress";
+ at import "../vendors/bootstrap/scss/media";
+ at import "../vendors/bootstrap/scss/list-group";
+ at import "../vendors/bootstrap/scss/close";
+ at import "../vendors/bootstrap/scss/toasts";
+ at import "../vendors/bootstrap/scss/modal";
+ at import "../vendors/bootstrap/scss/tooltip";
+ at import "../vendors/bootstrap/scss/popover";
+ at import "../vendors/bootstrap/scss/carousel";
+ at import "../vendors/bootstrap/scss/spinners";
+ at import "../vendors/bootstrap/scss/utilities";
+ at import "../vendors/bootstrap/scss/print";
-// Core CSS
- at import "bootstrap/scaffolding";
- at import "bootstrap/type";
- at import "bootstrap/code";
- at import "bootstrap/grid";
- at import "bootstrap/tables";
- at import "bootstrap/forms";
- at import "bootstrap/buttons";
+.embed-responsive-4by6 {
+ &::before {
+ padding-top: percentage(6 / 4);
+ }
+}
-// Components
- at import "bootstrap/component-animations";
- at import "bootstrap/dropdowns";
- at import "bootstrap/button-groups";
- at import "bootstrap/input-groups";
- at import "bootstrap/navs";
- at import "bootstrap/navbar";
- at import "bootstrap/thumbnails";
- at import "bootstrap/alerts";
- at import "bootstrap/progress-bars";
- at import "bootstrap/media";
- at import "bootstrap/list-group";
- at import "bootstrap/responsive-embed";
- at import "bootstrap/close";
+.embed-responsive-16by10 {
+ &::before {
+ padding-top: percentage(10 / 16);
+ }
+}
-// Components w/ JavaScript
- at import "bootstrap/modals";
- at import "bootstrap/tooltip";
- at import "bootstrap/popovers";
+.separator-title {
+ // font-weight: normal;
+ text-transform: uppercase;
+ font-size: 1.1rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
-// Utility classes
- at import "bootstrap/utilities";
- at import "bootstrap/responsive-utilities";
+.carousel-navigation {
+ position: absolute;
+ z-index: 999;
+ right: 8px;
+ top: -40px;
+ text-align: center;
+}
+
+.position-relative {
+ position: relative;
+}
+
+.muted-opacity {
+ opacity: 0.6;
+}
diff --git a/share/lua/http/src/scss/bootstrap_variables.scss b/share/lua/http/src/scss/bootstrap_variables.scss
new file mode 100644
index 0000000000..c2cd4de547
--- /dev/null
+++ b/share/lua/http/src/scss/bootstrap_variables.scss
@@ -0,0 +1,2 @@
+$link-color: #fff;
+$link-hover-color: darken(#fff, 15%);
diff --git a/share/lua/http/src/scss/collapse.scss b/share/lua/http/src/scss/collapse.scss
new file mode 100644
index 0000000000..42d02e1a5e
--- /dev/null
+++ b/share/lua/http/src/scss/collapse.scss
@@ -0,0 +1,38 @@
+
+.collapse-item {
+ display: inline-block;
+ float: none;
+ vertical-align: top;
+}
+
+.collapse-detail {
+ display: block;
+ float: left;
+ max-width: 100%;
+ width: 100%;
+ margin-bottom: 20px;
+ background-color: var(--collapse-detail-bg-color);
+ padding: 16px;
+ position: relative;
+ .title {
+ font-size: 20px;
+ font-weight: normal;
+ }
+
+ .subtitle {
+ font-size: 12px;
+ }
+
+ .caption {
+ font-size: 12px;
+ }
+
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ .svg-icon {
+ transform: rotate(45deg);
+ }
+ }
+}
diff --git a/share/lua/http/src/scss/components.scss b/share/lua/http/src/scss/components.scss
index 62b198ee54..ea5d6eb9e0 100644
--- a/share/lua/http/src/scss/components.scss
+++ b/share/lua/http/src/scss/components.scss
@@ -1,8 +1,11 @@
// components.scss
- at import '../components/player/plyr.lib.custom.scss';
- at import '../components/player/player.component.scss';
- at import '../components/controls/sidenav.component.scss';
@import '../components/playlist/playlist.component.scss';
@import '../components/vlm/vlm.component.scss';
@import '../components/svg-icon/svg-icon.component.scss';
+
+ at import './collapse.scss';
+ at import './grid-item.scss';
+ at import './list-item.scss';
+ at import './tag-item.scss';
+ at import './table-item.scss';
\ No newline at end of file
diff --git a/share/lua/http/src/scss/grid-item.scss b/share/lua/http/src/scss/grid-item.scss
new file mode 100644
index 0000000000..0fbdd8c04e
--- /dev/null
+++ b/share/lua/http/src/scss/grid-item.scss
@@ -0,0 +1,201 @@
+.grid-col {
+ width: 162px;
+ margin-left: 24px;
+}
+
+ at media (min-width: 1200px) {
+ .grid-col {
+ width: 201px;
+ margin-left: 34px;
+ }
+}
+
+ at media (min-width: 1100px) {
+ .grid-col {
+ width: 182px;
+ margin-left: 34px;
+ }
+}
+
+.grid-responsive {
+ margin-left: -24px;
+}
+
+ at media (min-width: 1200px) {
+ .grid-responsive {
+ margin-left: -34px;
+ }
+}
+
+ at media (min-width: 1100px) {
+ .grid-responsive {
+ margin-left: -34px;
+ }
+}
+
+.grid-item {
+ .embed-responsive-item {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ .svg-icon {
+ width: 2.8rem;
+ height: 2.8rem;
+ color: #fff;
+ &:hover, &:focus {
+ color: #fff;
+ }
+ }
+ }
+ .icon-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+ .create-item {
+ border: 1px dashed #99a4ab;
+ display: flex;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+ .quality {
+ position: absolute;
+ top: 6px;
+ left: 10px;
+ }
+ .quality-tag {
+ color: #fff;
+ background: rgba(0, 0, 0, 0.6);
+ padding: 4px 6px;
+ border-radius: 2px;
+ font-size: 0.6rem;
+ }
+ .user {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 1px solid rgba(0, 0, 0, 0.7);
+ }
+ }
+ &.item-people {
+ .item-img {
+ border-radius: 50%;
+ }
+ .item-secondary-action {
+ right: 0;
+ left: 0;
+ bottom: 20px;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+ }
+ margin-bottom: 10px;
+ .item-primary-action {
+ $icon-size: 1.5rem;
+ width: 3rem;
+ height: 3rem;
+ .svg-icon {
+ width: $icon-size;
+ }
+ }
+ .item-secondary-action {
+ display: flex;
+ position: absolute;
+ bottom: 5px;
+ right: 10px;
+ .svg-icon {
+ color: #fff;
+ transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s;
+ &:hover {
+ transform: scale3d(1.2,1.2,1.2);
+ -webkit-transform: scale3d(1.2,1.2,1.2);
+ }
+ &:active {
+ transform: scaleX(1);
+ -webkit-transform: scaleX(1);
+ }
+ }
+ .icon-wrapper {
+ width: 3rem;
+ text-align: right;
+ }
+ }
+ .item-img {
+ cursor: pointer;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--grid-item-bg-color);
+ height: auto;
+ border-radius: 3px;
+ overflow: hidden;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
+ > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ &.img-contain {
+ > img {
+ object-fit: contain;
+ }
+ }
+ &:hover {
+ .overlay {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ .overlay {
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.3);
+ transition: opacity 0.2s ease, visibility 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .item-body {
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: 5px;
+ .item-title {
+ display: block;
+ font-weight: 500;
+ color: var(--primary-text-color);
+ }
+ .item-subtitle {
+ display: block;
+ font-weight: normal;
+ color: var(--secondary-text-color);
+ font-size: 0.8rem;
+ }
+ }
+ .item-progress-bar-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.7);
+ width: 100%;
+ }
+ .item-progress-bar {
+ background-color: var(--highlight-color);
+ height: 3px;
+ }
+}
diff --git a/share/lua/http/src/scss/list-item.scss b/share/lua/http/src/scss/list-item.scss
new file mode 100644
index 0000000000..9133af8e7f
--- /dev/null
+++ b/share/lua/http/src/scss/list-item.scss
@@ -0,0 +1,137 @@
+.list-item {
+ display: flex;
+ padding-top: 0;
+ padding-bottom: 0;
+ &:hover {
+ .item-action {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ .item-action {
+ visibility: hidden;
+ opacity: 0;
+ cursor: pointer;
+ transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s;
+ &:hover {
+ visibility: visible;
+ opacity: 1;
+ transform: scale3d(1.2,1.2,1.2);
+ -webkit-transform: scale3d(1.2,1.2,1.2);
+ }
+ &:active {
+ visibility: visible;
+ opacity: 1;
+ transform: scaleX(1);
+ -webkit-transform: scaleX(1);
+ }
+ }
+ .item-primary-action {
+ $icon-size: 1.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ .svg-icon {
+ width: $icon-size;
+ }
+ }
+ .item-secondary-action {
+ display: flex;
+ position: absolute;
+ bottom: 10px;
+ right: 0;
+ text-align: center;
+ cursor: pointer;
+ .svg-icon {
+ color: #fff;
+ }
+ .icon-wrapper {
+ width: 3rem;
+ }
+ }
+ .item-img {
+ cursor: pointer;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ &.item-border-radius {
+ border-radius: 3px;
+ overflow: hidden;
+ }
+ > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ &:hover {
+ .overlay {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ .overlay {
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.4);
+ transition: opacity 0.2s ease, visibility 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ }
+ }
+ .item-body {
+ text-align: left;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1;
+ margin-left: 8px;
+ position: relative;
+ .item-title {
+ display: block;
+ font-weight: 500;
+ color: var(--primary-text-color);
+ }
+ .item-subtitle,
+ .item-subtitle a {
+ display: block;
+ font-weight: normal;
+ color: var(--secondary-text-color);
+ font-size: 0.8rem;
+ }
+ .svg-icon {
+ color: var(--primary-text-color);
+ }
+ }
+ .item-duration {
+ font-size: 11px;
+ padding: 2px 5px;
+ border-radius: 2px;
+ position: absolute;
+ bottom: 4px;
+ right: 14px;
+ opacity: 0.6;
+ }
+ .item-nb {
+ font-size: 11px;
+ position: absolute;
+ left: 11px;
+ top: 3px;
+ background-color: hsla(0, 0%, 60%, 0.8);
+ color: #fff;
+ padding: 2px 4px;
+ font-weight: bold;
+ border-radius: 2px;
+ }
+ .item-progress-bar {
+ position: absolute;
+ bottom: -3px;
+ height: 3px;
+ background-color: var(--highlight-color);
+ }
+}
diff --git a/share/lua/http/src/scss/main.scss b/share/lua/http/src/scss/main.scss
index 93ea8ea9eb..91954fdc05 100644
--- a/share/lua/http/src/scss/main.scss
+++ b/share/lua/http/src/scss/main.scss
@@ -1,15 +1,341 @@
// main.scss
+ at import 'theme.scss';
+
+html,
+body {
+ height: 100%;
+}
+
+#app {
+ height: 100%;
+}
+
// custom global styles
body {
- background-color: black;
+ background-color: var(--body-bg-color);
+ overflow-x: hidden;
+ color: var(--primary-text-color);
}
- at media screen and (min-device-width : 320px) and (max-device-width : 480px) {
- body {
- height: auto;
- }
+::-webkit-scrollbar {
+ height: 5px;
+ width: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.4);
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.05);
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+ background: rgba(0, 0, 0, 0.4);
+}
+
+.dropdown-divider {
+ border-color: var(--divider-color);
}
// component styles
@import 'components.scss';
+
+$sidenav-width: 350px;
+
+.primary-navbar {
+ z-index: 1040;
+ height: 50px;
+ box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .06);
+ .btn-icon {
+ transition: opacity 0.2s ease;
+ opacity: 0.6;
+ text-decoration: none;
+ &.active {
+ opacity: 1;
+ -webkit-text-fill-color: var(--primary-text-color);
+ -webkit-text-stroke-width: 0.6px;
+ -webkit-text-stroke-color: var(--primary-text-color);
+ svg {
+ color: var(--highlight-color);
+ }
+ }
+ }
+ a {
+ font-size: 12px;
+ }
+}
+
+.btn {
+ color: var(--primary-text-color);
+ &:hover,
+ &:focus,
+ &:visited,
+ &.active {
+ color: var(--primary-text-hover-color);
+ }
+}
+
+.secondary-navbar {
+ top: 50px;
+ height: 35px;
+ .btn-link {
+ margin-bottom: -5px;
+ padding-bottom: 1px;
+ border-radius: 0;
+ margin-top: 1px;
+ padding-top: 1px;
+ text-decoration: none;
+ border-bottom: 2px solid transparent;
+ opacity: 0.6;
+ transition: opacity 0.2s ease;
+ &:hover {
+ text-decoration: none;
+ opacity: 1;
+ }
+ &.active {
+ border-bottom: 2px solid var(--highlight-color);
+ opacity: 1;
+ }
+ }
+}
+
+.secondary-navbar {
+ background-color: var(--secondary-navbar-bg-color);
+ // border-bottom: 1px solid var(--secondary-navbar-border-color);
+ z-index: 1039;
+ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
+}
+
+.w-sidebar {
+ z-index: 1010;
+}
+
+.browse-view {
+ .w-sidebar-content {
+ position: fixed;
+ }
+ .primary-navbar {
+ background-color: var(--main-navbar-bg-color);
+ // border-bottom: 1px solid var(--divider-color);
+ }
+ $top: 85px;
+ .w-sidebar {
+ width: $sidenav-width;
+ max-width: $sidenav-width;
+ top: $top;
+ height: 100%;
+ }
+
+ .sidebar {
+ height: calc(100% - #{$top}) !important;
+ }
+}
+
+.watch-view {
+ $top: 40px;
+ background: #000;
+ .w-sidebar {
+ top: $top;
+ }
+ .sidebar {
+ height: calc(100% - 90px) !important;
+ }
+ #playlist {
+ height: calc(100vh - 200px);
+ }
+}
+
+.w-sidebar-content {
+ width: $sidenav-width;
+ max-width: $sidenav-width;
+ // border: 1px solid var(--sidenav-border-color);
+ border-top: 0;
+ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+}
+
+.btn-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0rem .75rem;
+ border-radius: 0;
+ outline: none;
+ // border-left: 1px solid var(--secondary-navbar-border-color);
+ // border-right: 1px solid var(--secondary-navbar-border-color);
+ &:first-child {
+ border-left: none;
+ }
+ &:last-child {
+ border-right: none;
+ }
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.browse-view {
+ .show,
+ .collapsing {
+ .toggler {
+ background-color: var(--sidenav-bg-color);
+ }
+ }
+}
+
+.watch-view {
+ .show,
+ .collapsing {
+ .toggler {
+ color: #fff;
+ }
+ }
+}
+
+.toggler {
+ margin-right: -15px;
+ padding: 0 12px 0 12px;
+}
+
+.push {
+ @media (min-width: 769px) {
+ .row.collapse {
+ margin-right: -$sidenav-width;
+ right: 0;
+ transition: width .15s linear, margin .15s linear;
+ }
+
+ .row.collapse.show {
+ margin-right: 0 !important;
+ }
+
+ .row.collapsing {
+ margin-right: -$sidenav-width;
+ right: -0.05%;
+ transition: width .15s linear, margin .15s linear;
+ }
+ }
+
+ @media (max-width: 768px) {
+ .w-sidebar {
+ right: 0 !important;
+ position: fixed;
+ margin-right: 0;
+ transition: width .15s linear, margin .15s linear !important;
+ }
+
+ .collapse .w-sidebar-content {
+ margin-right: -100% !important;
+ }
+
+ .collapse.show .w-sidebar-content {
+ margin-right: 0 !important;
+ }
+
+ .collapsing.show .w-sidebar-content {
+ margin-right: -10% !important;
+ }
+ }
+
+}
+
+.overlay {
+ .w-sidebar {
+ right: 0 !important;
+ position: fixed;
+ margin-right: 0;
+ transition: width .15s linear, margin .15s linear !important;
+ }
+
+ .collapse .w-sidebar-content {
+ margin-right: -100% !important;
+ }
+
+ .collapse.show .w-sidebar-content {
+ margin-right: 0 !important;
+ }
+
+ .collapsing.show .w-sidebar-content {
+ margin-right: -10% !important;
+ }
+
+}
+
+.svg-icon {
+ color: var(--icon-color);
+ &:hover,
+ &:focus {
+ color: var(--icon-hover-color);
+ }
+}
+
+.btn-link {
+ color: var(--link-color);
+ &:hover {
+ color: var(--link-hover-color);
+ }
+}
+
+.media-player-opened {
+ .container-view {
+ margin-bottom: 100px;
+ }
+ #playlist {
+ height: calc(100% - 248px);
+ }
+}
+
+.slide-fade-enter-active {
+ transition: all .2s ease;
+}
+
+.slide-fade-leave-active {
+ transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.slide-fade-enter, .slide-fade-leave-to {
+ transform: translateY(20px);
+ opacity: 0;
+}
+
+.nav-up {
+ top: -60px;
+ opacity: 0;
+}
+
+.secondary-navbar {
+ transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+button.active {
+ .svg-icon {
+ color: var(--highlight-color);
+ }
+}
+
+.w-100 {
+ width: 100%;
+}
+
+.table {
+ color: var(--primary-text-color);
+}
+
+.table-hover tbody tr:hover {
+ color: var(--primary-text-hover-color);
+}
+
+.table {
+ tbody > tr:first-child > td:first-child,
+ tbody > tr:first-child > th:first-child {
+ border-top: 0;
+ }
+}
+
+.table thead th,
+.table th, .table td {
+ border-color: var(--divider-color);
+}
diff --git a/share/lua/http/src/scss/mixins.util.scss b/share/lua/http/src/scss/mixins.util.scss
index 44e1fb398f..cd82ae58ec 100644
--- a/share/lua/http/src/scss/mixins.util.scss
+++ b/share/lua/http/src/scss/mixins.util.scss
@@ -1,35 +1,3 @@
-// ==========================================================================
-// Plyr mixins
-// https://github.com/selz/plyr
-// ==========================================================================
-
-// <input type="range"> styling
- at mixin plyr-range-track() {
- height: $plyr-range-track-height;
- background: transparent;
- border: 0;
- border-radius: ($plyr-range-track-height / 2);
- user-select: none;
-}
-
- at mixin plyr-range-thumb() {
- position: relative;
- height: $plyr-range-thumb-height;
- width: $plyr-range-thumb-width;
- background: $plyr-range-thumb-bg;
- border: $plyr-range-thumb-border;
- border-radius: 100%;
- transition: background .2s ease, border .2s ease, transform .2s ease;
- box-shadow: $plyr-range-thumb-shadow;
- box-sizing: border-box;
-}
-
- at mixin plyr-range-thumb-active() {
- background: $plyr-range-thumb-active-bg;
- border-color: $plyr-range-thumb-active-border-color;
- transform: scale($plyr-range-thumb-active-scale);
-}
-
@mixin prefix($property, $value) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
diff --git a/share/lua/http/src/scss/table-item.scss b/share/lua/http/src/scss/table-item.scss
new file mode 100644
index 0000000000..7bd5d36a67
--- /dev/null
+++ b/share/lua/http/src/scss/table-item.scss
@@ -0,0 +1,103 @@
+.table-item {
+ th {
+ font-weight: normal;
+ color: var(--secondary-text-color);
+ }
+ thead > tr > th {
+ font-size: 12px;
+ text-transform: uppercase;
+ border-top: none;
+ }
+ td a {
+ color: var(--primary-text-color);
+ }
+ tr {
+ &:hover {
+ .item-action {
+ visibility: visible;
+ opacity: 1;
+ }
+ .item-img {
+ > img {
+ visibility: hidden;
+ opacity: 0;
+ }
+ }
+ }
+ }
+ .item-action {
+ opacity: 0;
+ visibility: hidden;
+ cursor: pointer;
+ transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s;
+ &:hover {
+ transform: scale3d(1.2,1.2,1.2);
+ -webkit-transform: scale3d(1.2,1.2,1.2);
+ }
+ &:active {
+ transform: scaleX(1);
+ -webkit-transform: scaleX(1);
+ }
+ }
+ .item-img {
+ position: relative;
+ $img-size: 2rem;
+ cursor: pointer;
+ > img {
+ visibility: visible;
+ opacity: 1;
+ width: $img-size;
+ height: $img-size;
+ object-fit: cover;
+ border-radius: 3px;
+ overflow: hidden;
+ transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s;
+ }
+ .placeholder-album-icon {
+ width: $img-size;
+ height: $img-size;
+ }
+ .item-primary-action {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ $icon-size: 1.5rem;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ width: $img-size;
+ height: $img-size;
+ .svg-icon {
+ width: $icon-size;
+ color: #fff;
+ }
+ }
+ }
+}
+
+.img-16by9 {
+ width: 3rem * 16/9;
+ height: 3rem;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.list-table-view {
+ .list-header {
+ border-bottom: 1px solid rgb(242, 242, 242);
+ margin-bottom: 5px;
+ padding-bottom: 5px;
+ .track-img {
+ left: 2rem;
+ }
+ }
+}
+.list-table-item {
+ border-bottom: 1px solid rgb(242, 242, 242);
+ margin-bottom: 5px;
+ padding-bottom: 5px;
+}
diff --git a/share/lua/http/src/scss/tag-item.scss b/share/lua/http/src/scss/tag-item.scss
new file mode 100644
index 0000000000..3ade39cf7c
--- /dev/null
+++ b/share/lua/http/src/scss/tag-item.scss
@@ -0,0 +1,67 @@
+.tag-item {
+ margin-bottom: 1.2rem;
+ .item-img {
+ cursor: pointer;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--library-item-bg-color);
+ height: 110px;
+ border-radius: 3px;
+ overflow: hidden;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
+ > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: blur(4px);
+ }
+ &:hover {
+ .overlay {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ .overlay {
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.4);
+ transition: opacity 0.2s ease, visibility 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .item-body {
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ position: absolute;
+ flex-direction: column;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.4);
+ transition: opacity 0.2s ease, visibility 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ .item-title {
+ font-weight: 500;
+ color: #fff;
+ }
+ .item-subtitle {
+ font-weight: normal;
+ color: #fff;
+ font-size: 0.8rem;
+ }
+ }
+}
diff --git a/share/lua/http/src/scss/theme.scss b/share/lua/http/src/scss/theme.scss
new file mode 100644
index 0000000000..acab338f7c
--- /dev/null
+++ b/share/lua/http/src/scss/theme.scss
@@ -0,0 +1,104 @@
+:root {
+ $highlight-color: #f48b00;
+ $body-bg-color: #fbfbfb;
+ $collapse-detail-bg-color: rgb(246, 246, 246);
+ $primary-color: #fff;
+ $library-item-bg-color: #efefef;
+ $grid-item-bg-color: #ededed;
+ $main-navbar-bg-color: #fbfbfb;
+ $secondary-navbar-bg-color: #fff;
+ $secondary-navbar-border-color: #dddddd;
+ $secondary-navbar-btn-bg-color: #dcdbd9;
+ $sidenav-border-color: #efefef; // #dddddd;
+ $sidenav-bg-color: #f5f5f5;
+ $media-player-bg-color: rgba(236, 236, 236, 0.8);
+ $icon-color: #6d6d6d;
+ $icon-hover-color: #888888;
+ $primary-text-color: #000;
+ $primary-text-hover-color: lighten(#000, 15%);
+ $secondary-text-color: #6d6d6d;
+ $playlist-action-bg-color: #fff;
+ $playlist-action-text-color: #999999;
+ $playlist-active-bg-color: #fff;
+ $playlist-active-color: #000;
+ $link-color: #000;
+ $link-hover-color: lighten(#000, 15%);
+ $divider-color: #eae9e9;
+ --primary-color: #{$primary-color};
+ --collapse-detail-bg-color: #{$collapse-detail-bg-color};
+ --divider-color: #{$divider-color};
+ --library-item-bg-color: #{$library-item-bg-color};
+ --grid-item-bg-color: #{$grid-item-bg-color};
+ --link-color: #{$link-color};
+ --primary-text-color: #{$primary-text-color};
+ --primary-text-hover-color: #{$primary-text-hover-color};
+ --secondary-text-color: #{$secondary-text-color};
+ --link-hover-color: #{$link-hover-color};
+ --playlist-action-bg-color: #{$playlist-action-bg-color};
+ --playlist-action-text-color: #{$playlist-action-text-color};
+ --playlist-active-bg-color: #{$playlist-active-bg-color};
+ --playlist-active-color: #{$playlist-active-color};
+ --highlight-color: #{$highlight-color};
+ --icon-color: #{$icon-color};
+ --icon-hover-color: #{$icon-hover-color};
+ --body-bg-color: #{$body-bg-color};
+ --main-navbar-bg-color: #{$main-navbar-bg-color};
+ --secondary-navbar-bg-color: #{$secondary-navbar-bg-color};
+ --secondary-navbar-border-color: #{$secondary-navbar-border-color};
+ --secondary-navbar-btn-bg-color: #{$secondary-navbar-btn-bg-color};
+ --sidenav-bg-color: #{$sidenav-bg-color};
+ --sidenav-border-color: #{$sidenav-border-color};
+ --media-player-bg-color: #{$media-player-bg-color};
+}
+
+:root[data-theme='dark'] {
+ $highlight-color: #f48b00;
+ $body-bg-color: #211f1f;
+ $collapse-detail-bg-color: #303234;
+ $primary-color: #000;
+ $library-item-bg-color: #303234;
+ $sidenav-bg-color: #292727;
+ $media-player-bg-color: rgba(41, 39, 39, 0.8);
+ $main-navbar-bg-color: #333333;
+ $secondary-navbar-bg-color: #2d2d2d;
+ $secondary-navbar-border-color: #303234;
+ $secondary-navbar-btn-bg-color: #303234;
+ $secondary-color: #292727;
+ $secondary-text-color: #888888;
+ $sidenav-border-color: #303234;
+ $icon-color: #d0d0d0;
+ $icon-hover-color: #fff;
+ $primary-text-color: #fff;
+ $primary-text-hover-color: darken(#fff, 15%);
+ $playlist-action-bg-color: #232323;
+ $playlist-action-text-color: #999999;
+ $playlist-active-bg-color: #232323;
+ $playlist-active-color: #fff;
+ $link-color: #fff;
+ $link-hover-color: darken(#fff, 15%);
+ $divider-color: #404040;
+ --primary-color: #{$primary-color};
+ --collapse-detail-bg-color: #{$collapse-detail-bg-color};
+ --divider-color: #{$divider-color};
+ --library-item-bg-color: #{$library-item-bg-color};
+ --grid-item-bg-color: #{$library-item-bg-color};
+ --link-color: #{$link-color};
+ --link-hover-color: #{$link-hover-color};
+ --playlist-action-bg-color: #{$playlist-action-bg-color};
+ --playlist-action-text-color: #{$playlist-action-text-color};
+ --playlist-active-bg-color: #{$playlist-active-bg-color};
+ --playlist-active-color: #{$playlist-active-color};
+ --icon-color: #{$icon-color};
+ --icon-hover-color: #{$icon-hover-color};
+ --primary-text-color: #{$primary-text-color};
+ --primary-text-hover-color: #{$primary-text-hover-color};
+ --secondary-text-color: #{$secondary-text-color};
+ --body-bg-color: #{$body-bg-color};
+ --main-navbar-bg-color: #{$main-navbar-bg-color};
+ --secondary-navbar-bg-color: #{$secondary-navbar-bg-color};
+ --secondary-navbar-border-color: #{$secondary-navbar-border-color};
+ --secondary-navbar-btn-bg-color: #{$secondary-navbar-btn-bg-color};
+ --sidenav-bg-color: #{$sidenav-bg-color};
+ --sidenav-border-color: #{$sidenav-border-color};
+ --media-player-bg-color: #{$media-player-bg-color};
+}
diff --git a/share/lua/http/src/scss/vendors.scss b/share/lua/http/src/scss/vendors.scss
index 581347e3e9..4a50320770 100644
--- a/share/lua/http/src/scss/vendors.scss
+++ b/share/lua/http/src/scss/vendors.scss
@@ -1,2 +1 @@
@import './bootstrap.scss';
- at import '../vendors/jstree/themes/default/style.css';
--
2.18.0
More information about the vlc-devel
mailing list