feat: demo style tweaks

sampotts · Mar 24, 2023 · ae59c11 · ae59c11
1 parent 8da1a78
commit ae59c11
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 70 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -66,42 +66,46 @@
  <h1>Pl<span>a</span>y<span>e</span>r</h1>
  <p>
  A simple, accessible and customisable media player for
- <button type="button" class="faux-link" data-source="video">
+ <button type="button" class="link" data-source="video">
  <svg class="icon">
  <title>HTML5</title>
  <path
  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
- ></path></svg
- >Video</button
+ ></path>
+ </svg>
+ Video</button
  >,
- <button type="button" class="faux-link" data-source="audio">
+ <button type="button" class="link" data-source="audio">
  <svg class="icon">
  <title>HTML5</title>
  <path
  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
- ></path></svg
- >Audio</button
+ ></path>
+ </svg>
+ Audio</button
  >,
- <button type="button" class="faux-link" data-source="youtube">
+ <button type="button" class="link" data-source="youtube">
  <svg class="icon" role="presentation">
  <title>YouTube</title>
  <path
  d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
  s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
  M6,11V5l5,3L6,11z"
- ></path></svg
- >YouTube
+ ></path>
+ </svg>
+ YouTube
  </button>
  and
- <button type="button" class="faux-link" data-source="vimeo">
+ <button type="button" class="link" data-source="vimeo">
  <svg class="icon" role="presentation">
  <title>Vimeo</title>
  <path
  d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
  C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
  c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
- ></path></svg
- >Vimeo
+ ></path>
+ </svg>
+ Vimeo
  </button>
  </p>
 
@@ -177,7 +181,10 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
  ></path>
  </svg>
- <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
+ <a
+ href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
+ target="_blank"
+ class="link"
  >View From A Blue Moon</a
  >
  &copy; Brainfarm
@@ -191,7 +198,7 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
  ></path>
  </svg>
- <a href="http://www.kishibashi.com/" target="_blank"
+ <a href="http://www.kishibashi.com/" target="_blank" class="link"
  >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
  >
  &copy; Kishi Bashi
@@ -215,7 +222,7 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
  </li>
  <li class="plyr__cite plyr__cite--vimeo" hidden>
  <small>
- <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
+ <a href="https://vimeo.com/40648169" target="_blank" class="link">Toob “Wavaphon” Music Video</a>
  on&nbsp;
  <span class="color--vimeo">
  <svg class="icon" role="presentation">
@@ -248,7 +255,7 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
  <a
  href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
  target="_blank"
- class="js-shr"
+ class="link js-shr"
  >tweet it</a
  >
  👍

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
@@ -7,8 +7,7 @@
 .button__count {
  align-items: center;
  border: 0;
- border-radius: $border-radius-base;
- box-shadow: 0 1px 1px rgba(#000, 0.1);
+ border-radius: $border-radius-medium;
  display: inline-flex;
  padding: ($spacing-base * 0.75);
  position: relative;
@@ -19,27 +18,34 @@
 
 // Buttons
 .button {
- background: $color-button-background;
+ --shadow-color: 0deg 0% 20%;
+ align-items: center;
+ background-color: $color-button-background;
+ background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));
+ border: 1px solid darken($color-button-background, 5);
+ box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / 0.05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),
+ 0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);
  color: $color-button-text;
+ display: inline-flex;
  font-weight: $font-weight-bold;
+ gap: 0.25rem;
  padding-left: ($spacing-base * 1.25);
  padding-right: ($spacing-base * 1.25);
+ text-decoration: none;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
 
  &:hover,
  &:focus {
  background: $color-button-background-hover;
+ border-color: darken($color-button-background, 7);
 
  // Remove the underline/border
  &::after {
- display: none;
+ display: none !important;
  }
  }
 
- &:hover {
- box-shadow: 0 2px 2px rgba(#000, 0.1);
- }
-
  &:focus {
  outline: 0;
  }
@@ -49,15 +55,12 @@
  }
 
  &:active {
+ box-shadow: none;
  top: 1px;
  }
-}
-
-// Button group
-.button--with-count {
- display: inline-flex;
 
- .button .icon {
+ .icon {
+ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
  }
 }
@@ -66,19 +69,21 @@
 .button__count {
  animation: fade-in 0.2s ease;
  background: $color-button-count-background;
+ border: 1px solid $color-gray-100;
  color: $color-button-count-text;
  margin-left: ($spacing-base * 0.75);
 
  &::before {
- border: $arrow-size solid transparent;
- border-left-width: 0;
- border-right-color: $color-button-count-background;
+ background-color: $color-button-count-background;
+ border: inherit;
+ border-width: 0 0 1px 1px;
  content: '';
- height: 0;
+ display: block;
+ height: 8px;
  position: absolute;
  right: 100%;
  top: 50%;
- transform: translateY(-50%);
- width: 0;
+ transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);
+ width: 8px;
  }
 }
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
@@ -2,15 +2,9 @@
 // Links
 // ==========================================================================
 
-// Make a <button> look like an <a>
-button.faux-link {
- @extend a; // stylelint-disable-line
- @include cancel-button-styles;
-}
-
-// Links
-a {
- border-bottom: 1px dotted currentColor;
+.link {
+ align-items: center;
+ border-bottom: 1px dashed currentColor;
  color: $color-link;
  position: relative;
  text-decoration: none;

diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
@@ -6,8 +6,10 @@
 
 // Example players
 .plyr {
- border-radius: $border-radius-large;
- box-shadow: 0 2px 15px rgba(#000, 0.1);
+ --shadow-color: 197deg 32% 65%;
+ border-radius: $border-radius-2x-large;
+ box-shadow: 0 0.5px 0.6px hsl(var(--shadow-color) / 0.36), 0 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
+ 0 4.3px 4.8px -1.7px hsl(var(--shadow-color) / 0.36), -0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color) / 0.36);
  margin: $spacing-base auto;
 
  &.plyr--audio {
@@ -17,6 +19,7 @@
 
 .plyr__video-wrapper::after {
  border: 1px solid rgba(#000, 0.15);
+ border-bottom-color: rgba(#000, 0.25);
  border-radius: inherit;
  bottom: 0;
  content: '';

diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
@@ -37,6 +37,7 @@ main {
 aside {
  align-items: center;
  background: #fff;
+ box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-shrink: 0;
  justify-content: center;

diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
@@ -4,25 +4,6 @@
 
 @use 'sass:math';
 
-// Convert a <button> into an <a>
-// ---------------------------------------
-@mixin cancel-button-styles() {
- background: transparent;
- border: 0;
- border-radius: 0;
- cursor: pointer;
- font: inherit;
- line-height: $line-height-base;
- margin: 0;
- padding: 0;
- position: relative;
- text-align: inherit;
- text-shadow: inherit;
- user-select: text;
- vertical-align: baseline;
- width: auto;
-}
-
 // Nicer focus styles
 // ---------------------------------------
 @mixin focus-visible($color: $focus-default-color) {

diff --git a/demo/src/sass/lib/reset.scss b/demo/src/sass/lib/reset.scss
@@ -9,3 +9,7 @@
 *::before {
  box-sizing: border-box;
 }
+
+button {
+ all: unset;
+}
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
@@ -6,8 +6,9 @@
 $arrow-size: 5px;
 
 // Radii
-$border-radius-base: 4px;
-$border-radius-large: 8px;
+$border-radius-small: 4px;
+$border-radius-medium: 6px;
+$border-radius-2x-large: 12px;
 
 // Background
 $page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
diff --git a/src/sass/plugins/preview-thumbnails/settings.scss b/src/sass/plugins/preview-thumbnails/settings.scss
@@ -4,7 +4,7 @@
 
 $plyr-preview-padding: $plyr-tooltip-padding !default;
 $plyr-preview-background: $plyr-tooltip-background !default;
-$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-radius: $plyr-menu-radius !default;
 $plyr-preview-shadow: $plyr-tooltip-shadow !default;
 $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
 $plyr-preview-image-background: $plyr-color-gray-200 !default;

diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 $plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 8px) !default;
 $plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
 $plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
 $plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;