[github/Chocobozzz/PeerTube.git] / client / src / sass / player / peertube-skin.scss

@import '_variables';
@import '_mixins';
@import './_player-variables';

@mixin big-play-button-triangle-size($triangle-size) {
  width: $triangle-size;
  height: $triangle-size;
  top: calc(50% - #{$triangle-size / 2});
  left: calc(53% - #{($triangle-size / 2)});
}

.video-js.vjs-peertube-skin {
  font-size: $font-size;
  color: $primary-foreground-color;

  .vjs-dock-text {
    padding-right: 10px;
  }

  .vjs-dock-description {
    font-size: 11px;

    &::before, &::after {
      display: inline-block;
      content: '\1F308';
    }

    &::before {
      margin-right: 4px;
    }

    &::after {
      margin-left: 4px;
      transform: scale(-1, 1);
    }
  }

  .vjs-button > .vjs-icon-placeholder::before {
    line-height: $control-bar-height;
  }

  .vjs-volume-level::before {
    content: ''; /* Remove Circle From Progress Bar */
  }

  .vjs-audio-button {
    display: none;
  }

  .vjs-big-play-button {
    outline: 0;
    font-size: 6em;

    $big-play-width: 1.2em;
    $big-play-height: 1.2em;

    border: 6px solid #fff;
    border-radius: 100%;

    left: 50%;
    top: 50%;
    width: $big-play-width;
    height: $big-play-height;
    line-height: $big-play-height;
    margin-left: -($big-play-width / 2);
    margin-top: -($big-play-height / 2);
    transition: 0.4s opacity;

    &::-moz-focus-inner {
      border: 0;
      padding: 0
    }

    .vjs-icon-placeholder::before {
      @include big-play-button-triangle-size(45px);

      content: '';
      background-image: url('#{$assets-path}/player/images/big-play-button.svg');
    }

    &:hover {
      opacity: 0.8;
    }
  }

  // Small effect when we click on the play button
  &.vjs-has-big-play-button-clicked {

    .vjs-big-play-button, .vjs-poster {
      display: block;
      visibility: hidden;

      &.vjs-big-play-button, &.vjs-big-play-button::before {
        opacity: 0;
        transition: visibility 0.2s, opacity 0.2s;
      }

      &.vjs-poster, &.vjs-poster::before {
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s;
        transition-delay: 0.05s;
      }
    }
  }

  // Hide the big play button on autoplay
  &.vjs-has-autoplay {
    .vjs-big-play-button {
      display: none !important;
    }
  }

  .vjs-control-bar,
  .vjs-big-play-button,
  .vjs-settings-dialog {
    background-color: rgba($primary-background-color, 0.5);
  }

  .vjs-poster {
    outline: none; /* Remove Blue Outline on Click*/
    outline: 0;
  }

  .vjs-control-bar {
    height: $control-bar-height;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

    .vjs-progress-control,
    .vjs-play-control,
    .vjs-playback-rate,
    .vjs-mute-control,
    .vjs-volume-control,
    .vjs-resolution-control,
    .vjs-fullscreen-control,
    .vjs-peertube-link,
    .vjs-settings
    {
      color: $primary-foreground-color !important;
      opacity: $primary-foreground-opacity;
      transition: opacity .1s;

      &:hover {
        opacity: $primary-foreground-opacity-hover;
      }
    }

    .vjs-current-time,
    .vjs-duration,
    .vjs-peertube {
      color: $primary-foreground-color;
      opacity: $primary-foreground-opacity;
    }

    .vjs-progress-control {
      position: absolute;
      z-index: 100; // On top of the progress bar
      bottom: 29px;
      width: calc(100% - (2 * #{$progress-margin}));
      margin-left: $progress-margin;
      height: 14px;

      .vjs-slider {
        margin: 0;
        border-radius: 0;
        background-color: rgba(255, 255, 255, .2);
        height: 3px;
        transition: none;

        .vjs-play-progress {
          background: $primary-foreground-color;

          // Not display the circle if the progress is not hovered
          &::before {
            opacity: 0;
            transition: opacity 0.1s ease;
            font-size: 14px;

            top: -0.3em;
          }

          .vjs-time-tooltip {
            display: none;
          }
        }

        .vjs-load-progress {
          &, & div {
            background: rgba(255, 255, 255, .2);
          }
        }
      }
    }

    .vjs-progress-control:hover .vjs-slider,
    .vjs-slider.vjs-sliding {
      height: 5px;

      .vjs-play-progress::before {
        opacity: 1;
      }
    }


    .vjs-play-control {
      @include disable-outline;

      cursor: pointer;
      font-size: $font-size;
      margin-right: 5px;
    }

    .vjs-time-control {
      line-height: inherit;

      &.vjs-current-time {
        font-size: $font-size;
        display: inline-block;
        padding: 0;

        .vjs-current-time-display {
          line-height: calc(#{$control-bar-height} + 1px);

          &::after {
            content: "/";
            margin: 0 1px 0 2px;
          }
        }
      }

      &.vjs-duration {
        font-size: $font-size;
        display: inline-block;
        padding: 0;
        .vjs-duration-display {
          line-height: calc(#{$control-bar-height} + 1px);
        }
      }

      &.vjs-remaining-time {
        display: none;
      }
    }

    .vjs-peertube {
      width: 100%;
      line-height: $control-bar-height;
      text-align: right;

      .vjs-peertube-displayed {
        display: block;
      }

      .vjs-peertube-hidden {
        display: none;
      }

      .download-speed-number, .upload-speed-number, .peers-number {
        font-weight: $font-semibold;
      }

      .download-speed-text, .upload-speed-text, .peers-text {
        margin-right: 15px;
      }

      .icon {
        display: inline-block;
        width: 15px;
        height: 15px;
        background-size: contain;
        vertical-align: middle;
        background-repeat: no-repeat;
        margin-right: 6px;
        position: relative;
        top: -1px;

        &.icon-download {
          background-image: url('#{$assets-path}/player/images/arrow-down.svg');
        }

        &.icon-upload {
          background-image: url('#{$assets-path}/player/images/arrow-up.svg');
        }
      }
    }

    .vjs-playback-rate {
      font-size: 10px;
      width: 37px !important;

      .vjs-playback-rate-value {
        font-size: 13px;
        line-height: $control-bar-height;
      }

      .vjs-menu .vjs-menu-content {
        width: 37px !important;
      }
    }

    .vjs-mute-control {
      @include disable-outline;

      line-height: $control-bar-height;
      padding: 0;
      width: 30px;

      .vjs-icon-placeholder {
        display: inline-block;
        width: 22px;
        height: 22px;
        vertical-align: middle;
        background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
        background-size: contain;

        &::before {
          content: '';
        }
      }

      &.vjs-vol-0 .vjs-icon-placeholder {
        background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
        background-size: contain;
      }
    }

    .vjs-volume-control {
      width: 30px;
      margin: 0 5px 0 0;
    }

    .vjs-volume-bar {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
      background-size: 22px 14px;
      height: 100%;
      width: 100%;
      max-width: 22px;
      max-height: 14px;
      margin: 7px 4px;
      border-radius: 0;
      top: 3px;

      .vjs-volume-level {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
        background-size: 22px 14px;
        max-width: 22px;
        max-height: 14px;
        height: 100%;
      }
    }

    .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
    .vjs-volume-panel.vjs-volume-panel-horizontal:active,
    .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
    .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
      width: 6em;
      transition-property: none;
    }

    .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
      width: 3em;
      height: auto;
    }

    .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
      transition-property: none;
    }

    .vjs-volume-panel {
      .vjs-mute-control {
        width: 2em;
        z-index: 1;
        padding: 0;
      }

      .vjs-volume-control {
        display: inline-block;
        position: relative;
        left: 5px;
        opacity: 1;
        width: 3em;
        height: auto;
      }
    }

    .vjs-peertube-link {
      @include disable-outline;
      @include disable-default-a-behaviour;

      text-decoration: none;
      line-height: $control-bar-height;
      font-weight: $font-semibold;
      padding: 0 5px;
    }

    .vjs-fullscreen-control {
      @include disable-outline;

      width: 37px;
      margin-right: 11px;

      .vjs-icon-placeholder {
        display: inline-block;
        width: 22px;
        height: 22px;
        vertical-align: middle;
        background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
        background-size: contain;

        &::before {
          content: '';
        }
      }
    }

    .vjs-menu-button-popup {
      font-weight: $font-semibold;
      width: 50px;

      .vjs-resolution-button {
        @include disable-outline;
      }

      .vjs-menu {
        top: 20px;
        left: 0;

        .vjs-menu-content {
          width: 50px;
          bottom: 20px;
        }

        li {
          text-transform: none;
          font-size: 13px;
        }
      }
    }
  }

  @media screen and (max-width: 750px) {
    .vjs-dock-text {
      font-size: 16px;
    }

    .vjs-dock-description {
      font-size: 9px;
    }

    .vjs-big-play-button {
      font-size: 5em;
      border-width: 5px;

      .vjs-icon-placeholder::before {
        @include big-play-button-triangle-size(32px);
      }
    }
  }

  @media screen and (max-width: 570px) {
    .vjs-dock-text {
      font-size: 14px;
    }

    .vjs-big-play-button {
      font-size: 4.5em;
      border-width: 4.5px;

      .vjs-icon-placeholder::before {
        @include big-play-button-triangle-size(27px);
      }
    }

    .vjs-playback-rate {
      display: none;
    }

    .vjs-peertube {
      padding: 0 !important;

      .vjs-peertube-displayed {
        display: none !important;
      }
    }
  }

  @media screen and (max-width: 300px) {
    .vjs-dock-text {
      font-size: 13px;
    }

    .vjs-big-play-button {
      font-size: 3em;
      border-width: 3px;

      .vjs-icon-placeholder::before {
        @include big-play-button-triangle-size(20px);
      }
    }

    .vjs-volume-control {
      display: none !important;
    }

    .vjs-peertube-link {
      padding: 0 !important;
    }

    .vjs-settings {
      width: 33px;
    }
  }
}

// Play/pause animations
.vjs-has-started .vjs-play-control {
  &.vjs-playing {
    animation: remove-pause-button 0.25s ease;
  }

  &.vjs-paused {
    animation: add-play-button 0.25s ease;
  }

  @keyframes remove-pause-button {
    0% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes add-play-button {
    0% {
      transform: rotate(-90deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}

// Error display disabled
.vjs-error:not(.vjs-error-display-enabled) {
  .vjs-error-display {
    display: none;
  }

  .vjs-loading-spinner {
    display: block;
  }
}

// Error display enabled
.vjs-error.vjs-error-display-enabled {
  .vjs-error-display {
    display: block;
  }
}
Commit	Line	Data
	1	@import '_variables';
	2	@import '_mixins';
	3	@import './_player-variables';
	4
	5	@mixin big-play-button-triangle-size($triangle-size) {
	6	width: $triangle-size;
	7	height: $triangle-size;
	8	top: calc(50% - #{$triangle-size / 2});
	9	left: calc(53% - #{($triangle-size / 2)});
	10	}
	11
	12	.video-js.vjs-peertube-skin {
	13	font-size: $font-size;
	14	color: $primary-foreground-color;
	15
	16	.vjs-dock-text {
	17	padding-right: 10px;
	18	}
	19
	20	.vjs-dock-description {
	21	font-size: 11px;
	22
	23	&::before, &::after {
	24	display: inline-block;
	25	content: '\1F308';
	26	}
	27
	28	&::before {
	29	margin-right: 4px;
	30	}
	31
	32	&::after {
	33	margin-left: 4px;
	34	transform: scale(-1, 1);
	35	}
	36	}
	37
	38	.vjs-button > .vjs-icon-placeholder::before {
	39	line-height: $control-bar-height;
	40	}
	41
	42	.vjs-volume-level::before {
	43	content: ''; /* Remove Circle From Progress Bar */
	44	}
	45
	46	.vjs-audio-button {
	47	display: none;
	48	}
	49
	50	.vjs-big-play-button {
	51	outline: 0;
	52	font-size: 6em;
	53
	54	$big-play-width: 1.2em;
	55	$big-play-height: 1.2em;
	56
	57	border: 6px solid #fff;
	58	border-radius: 100%;
	59
	60	left: 50%;
	61	top: 50%;
	62	width: $big-play-width;
	63	height: $big-play-height;
	64	line-height: $big-play-height;
	65	margin-left: -($big-play-width / 2);
	66	margin-top: -($big-play-height / 2);
	67	transition: 0.4s opacity;
	68
	69	&::-moz-focus-inner {
	70	border: 0;
	71	padding: 0
	72	}
	73
	74	.vjs-icon-placeholder::before {
	75	@include big-play-button-triangle-size(45px);
	76
	77	content: '';
	78	background-image: url('#{$assets-path}/player/images/big-play-button.svg');
	79	}
	80
	81	&:hover {
	82	opacity: 0.8;
	83	}
	84	}
	85
	86	// Small effect when we click on the play button
	87	&.vjs-has-big-play-button-clicked {
	88
	89	.vjs-big-play-button, .vjs-poster {
	90	display: block;
	91	visibility: hidden;
	92
	93	&.vjs-big-play-button, &.vjs-big-play-button::before {
	94	opacity: 0;
	95	transition: visibility 0.2s, opacity 0.2s;
	96	}
	97
	98	&.vjs-poster, &.vjs-poster::before {
	99	opacity: 0;
	100	transition: visibility 0.3s, opacity 0.3s;
	101	transition-delay: 0.05s;
	102	}
	103	}
	104	}
	105
	106	// Hide the big play button on autoplay
	107	&.vjs-has-autoplay {
	108	.vjs-big-play-button {
	109	display: none !important;
	110	}
	111	}
	112
	113	.vjs-control-bar,
	114	.vjs-big-play-button,
	115	.vjs-settings-dialog {
	116	background-color: rgba($primary-background-color, 0.5);
	117	}
	118
	119	.vjs-poster {
	120	outline: none; /* Remove Blue Outline on Click*/
	121	outline: 0;
	122	}
	123
	124	.vjs-control-bar {
	125	height: $control-bar-height;
	126	background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
	127	box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
	128	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	129
	130	.vjs-progress-control,
	131	.vjs-play-control,
	132	.vjs-playback-rate,
	133	.vjs-mute-control,
	134	.vjs-volume-control,
	135	.vjs-resolution-control,
	136	.vjs-fullscreen-control,
	137	.vjs-peertube-link,
	138	.vjs-settings
	139	{
	140	color: $primary-foreground-color !important;
	141	opacity: $primary-foreground-opacity;
	142	transition: opacity .1s;
	143
	144	&:hover {
	145	opacity: $primary-foreground-opacity-hover;
	146	}
	147	}
	148
	149	.vjs-current-time,
	150	.vjs-duration,
	151	.vjs-peertube {
	152	color: $primary-foreground-color;
	153	opacity: $primary-foreground-opacity;
	154	}
	155
	156	.vjs-progress-control {
	157	position: absolute;
	158	z-index: 100; // On top of the progress bar
	159	bottom: 29px;
	160	width: calc(100% - (2 * #{$progress-margin}));
	161	margin-left: $progress-margin;
	162	height: 14px;
	163
	164	.vjs-slider {
	165	margin: 0;
	166	border-radius: 0;
	167	background-color: rgba(255, 255, 255, .2);
	168	height: 3px;
	169	transition: none;
	170
	171	.vjs-play-progress {
	172	background: $primary-foreground-color;
	173
	174	// Not display the circle if the progress is not hovered
	175	&::before {
	176	opacity: 0;
	177	transition: opacity 0.1s ease;
	178	font-size: 14px;
	179
	180	top: -0.3em;
	181	}
	182
	183	.vjs-time-tooltip {
	184	display: none;
	185	}
	186	}
	187
	188	.vjs-load-progress {
	189	&, & div {
	190	background: rgba(255, 255, 255, .2);
	191	}
	192	}
	193	}
	194	}
	195
	196	.vjs-progress-control:hover .vjs-slider,
	197	.vjs-slider.vjs-sliding {
	198	height: 5px;
	199
	200	.vjs-play-progress::before {
	201	opacity: 1;
	202	}
	203	}
	204
	205
	206	.vjs-play-control {
	207	@include disable-outline;
	208
	209	cursor: pointer;
	210	font-size: $font-size;
	211	margin-right: 5px;
	212	}
	213
	214	.vjs-time-control {
	215	line-height: inherit;
	216
	217	&.vjs-current-time {
	218	font-size: $font-size;
	219	display: inline-block;
	220	padding: 0;
	221
	222	.vjs-current-time-display {
	223	line-height: calc(#{$control-bar-height} + 1px);
	224
	225	&::after {
	226	content: "/";
	227	margin: 0 1px 0 2px;
	228	}
	229	}
	230	}
	231
	232	&.vjs-duration {
	233	font-size: $font-size;
	234	display: inline-block;
	235	padding: 0;
	236	.vjs-duration-display {
	237	line-height: calc(#{$control-bar-height} + 1px);
	238	}
	239	}
	240
	241	&.vjs-remaining-time {
	242	display: none;
	243	}
	244	}
	245
	246	.vjs-peertube {
	247	width: 100%;
	248	line-height: $control-bar-height;
	249	text-align: right;
	250
	251	.vjs-peertube-displayed {
	252	display: block;
	253	}
	254
	255	.vjs-peertube-hidden {
	256	display: none;
	257	}
	258
	259	.download-speed-number, .upload-speed-number, .peers-number {
	260	font-weight: $font-semibold;
	261	}
	262
	263	.download-speed-text, .upload-speed-text, .peers-text {
	264	margin-right: 15px;
	265	}
	266
	267	.icon {
	268	display: inline-block;
	269	width: 15px;
	270	height: 15px;
	271	background-size: contain;
	272	vertical-align: middle;
	273	background-repeat: no-repeat;
	274	margin-right: 6px;
	275	position: relative;
	276	top: -1px;
	277
	278	&.icon-download {
	279	background-image: url('#{$assets-path}/player/images/arrow-down.svg');
	280	}
	281
	282	&.icon-upload {
	283	background-image: url('#{$assets-path}/player/images/arrow-up.svg');
	284	}
	285	}
	286	}
	287
	288	.vjs-playback-rate {
	289	font-size: 10px;
	290	width: 37px !important;
	291
	292	.vjs-playback-rate-value {
	293	font-size: 13px;
	294	line-height: $control-bar-height;
	295	}
	296
	297	.vjs-menu .vjs-menu-content {
	298	width: 37px !important;
	299	}
	300	}
	301
	302	.vjs-mute-control {
	303	@include disable-outline;
	304
	305	line-height: $control-bar-height;
	306	padding: 0;
	307	width: 30px;
	308
	309	.vjs-icon-placeholder {
	310	display: inline-block;
	311	width: 22px;
	312	height: 22px;
	313	vertical-align: middle;
	314	background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
	315	background-size: contain;
	316
	317	&::before {
	318	content: '';
	319	}
	320	}
	321
	322	&.vjs-vol-0 .vjs-icon-placeholder {
	323	background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
	324	background-size: contain;
	325	}
	326	}
	327
	328	.vjs-volume-control {
	329	width: 30px;
	330	margin: 0 5px 0 0;
	331	}
	332
	333	.vjs-volume-bar {
	334	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
	335	background-size: 22px 14px;
	336	height: 100%;
	337	width: 100%;
	338	max-width: 22px;
	339	max-height: 14px;
	340	margin: 7px 4px;
	341	border-radius: 0;
	342	top: 3px;
	343
	344	.vjs-volume-level {
	345	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
	346	background-size: 22px 14px;
	347	max-width: 22px;
	348	max-height: 14px;
	349	height: 100%;
	350	}
	351	}
	352
	353	.vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
	354	.vjs-volume-panel.vjs-volume-panel-horizontal:active,
	355	.vjs-volume-panel.vjs-volume-panel-horizontal:focus,
	356	.vjs-volume-panel.vjs-volume-panel-horizontal:hover {
	357	width: 6em;
	358	transition-property: none;
	359	}
	360
	361	.vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
	362	width: 3em;
	363	height: auto;
	364	}
	365
	366	.vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
	367	transition-property: none;
	368	}
	369
	370	.vjs-volume-panel {
	371	.vjs-mute-control {
	372	width: 2em;
	373	z-index: 1;
	374	padding: 0;
	375	}
	376
	377	.vjs-volume-control {
	378	display: inline-block;
	379	position: relative;
	380	left: 5px;
	381	opacity: 1;
	382	width: 3em;
	383	height: auto;
	384	}
	385	}
	386
	387	.vjs-peertube-link {
	388	@include disable-outline;
	389	@include disable-default-a-behaviour;
	390
	391	text-decoration: none;
	392	line-height: $control-bar-height;
	393	font-weight: $font-semibold;
	394	padding: 0 5px;
	395	}
	396
	397	.vjs-fullscreen-control {
	398	@include disable-outline;
	399
	400	width: 37px;
	401	margin-right: 11px;
	402
	403	.vjs-icon-placeholder {
	404	display: inline-block;
	405	width: 22px;
	406	height: 22px;
	407	vertical-align: middle;
	408	background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
	409	background-size: contain;
	410
	411	&::before {
	412	content: '';
	413	}
	414	}
	415	}
	416
	417	.vjs-menu-button-popup {
	418	font-weight: $font-semibold;
	419	width: 50px;
	420
	421	.vjs-resolution-button {
	422	@include disable-outline;
	423	}
	424
	425	.vjs-menu {
	426	top: 20px;
	427	left: 0;
	428
	429	.vjs-menu-content {
	430	width: 50px;
	431	bottom: 20px;
	432	}
	433
	434	li {
	435	text-transform: none;
	436	font-size: 13px;
	437	}
	438	}
	439	}
	440	}
	441
	442	@media screen and (max-width: 750px) {
	443	.vjs-dock-text {
	444	font-size: 16px;
	445	}
	446
	447	.vjs-dock-description {
	448	font-size: 9px;
	449	}
	450
	451	.vjs-big-play-button {
	452	font-size: 5em;
	453	border-width: 5px;
	454
	455	.vjs-icon-placeholder::before {
	456	@include big-play-button-triangle-size(32px);
	457	}
	458	}
	459	}
	460
	461	@media screen and (max-width: 570px) {
	462	.vjs-dock-text {
	463	font-size: 14px;
	464	}
	465
	466	.vjs-big-play-button {
	467	font-size: 4.5em;
	468	border-width: 4.5px;
	469
	470	.vjs-icon-placeholder::before {
	471	@include big-play-button-triangle-size(27px);
	472	}
	473	}
	474
	475	.vjs-playback-rate {
	476	display: none;
	477	}
	478
	479	.vjs-peertube {
	480	padding: 0 !important;
	481
	482	.vjs-peertube-displayed {
	483	display: none !important;
	484	}
	485	}
	486	}
	487
	488	@media screen and (max-width: 300px) {
	489	.vjs-dock-text {
	490	font-size: 13px;
	491	}
	492
	493	.vjs-big-play-button {
	494	font-size: 3em;
	495	border-width: 3px;
	496
	497	.vjs-icon-placeholder::before {
	498	@include big-play-button-triangle-size(20px);
	499	}
	500	}
	501
	502	.vjs-volume-control {
	503	display: none !important;
	504	}
	505
	506	.vjs-peertube-link {
	507	padding: 0 !important;
	508	}
	509
	510	.vjs-settings {
	511	width: 33px;
	512	}
	513	}
	514	}
	515
	516	// Play/pause animations
	517	.vjs-has-started .vjs-play-control {
	518	&.vjs-playing {
	519	animation: remove-pause-button 0.25s ease;
	520	}
	521
	522	&.vjs-paused {
	523	animation: add-play-button 0.25s ease;
	524	}
	525
	526	@keyframes remove-pause-button {
	527	0% {
	528	transform: rotate(90deg);
	529	}
	530	100% {
	531	transform: rotate(0deg);
	532	}
	533	}
	534
	535	@keyframes add-play-button {
	536	0% {
	537	transform: rotate(-90deg);
	538	}
	539	100% {
	540	transform: rotate(0deg);
	541	}
	542	}
	543	}
	544
	545	// Error display disabled
	546	.vjs-error:not(.vjs-error-display-enabled) {
	547	.vjs-error-display {
	548	display: none;
	549	}
	550
	551	.vjs-loading-spinner {
	552	display: block;
	553	}
	554	}
	555
	556	// Error display enabled
	557	.vjs-error.vjs-error-display-enabled {
	558	.vjs-error-display {
	559	display: block;
	560	}
	561	}