-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.subtitle {
font-size: 18px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.about-instance-title {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.modal-body {
text-align: left;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.peertube-contributors {
.framasoft {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
max-width: 1200px;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.margin-content {
@include grid-videos-miniature-margins;
position: absolute;
right: 0;
background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
- padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
+ padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
z-index: z(miniature) + 1;
a {
-@use '_variables';
-@use '_mixins';
-@use '_actor';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+@use '_miniature' as *;
.root {
--myGlobalTopPadding: 60px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
my-top-menu-dropdown {
flex-grow: 1;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
$form-base-input-width: 340px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
a {
@include disable-default-a-behaviour;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
a {
@include disable-default-a-behaviour;
-@use '_mixins';
+@use '_mixins' as *;
.form-sub-title {
@include margin-right(30px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
a {
@include disable-default-a-behaviour;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.label {
display: inline-block;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.unblock-button {
@include peertube-button;
-@use '_mixins';
+@use '_mixins' as *;
my-global-icon {
width: 24px;
-@use '_mixins';
+@use '_mixins' as *;
my-feed {
@include margin-left(5px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.update-button[disabled=true] ::ng-deep .action-button {
cursor: default !important;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.search-bar {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
h2 {
margin-bottom: 20px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.plugin {
margin: 15px 0;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.toggle-plugin-type {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
font-size: 15px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.select-job-state {
min-width: 120px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.logs {
font-family: monospace;
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.form-sub-title {
@include margin-right(30px);
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
$form-base-input-width: 340px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input:not([type=submit]):not([type=checkbox]) {
@include peertube-input-text(340px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.add-button {
@include create-button;
-@use '_variables';
-@use '_mixins';
-@use './_bootstrap-variables';
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
label {
display: block;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.header {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.delete-me {
button {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.custom-row {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.account-title {
@include settings-big-title;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.row {
@include sub-menu-h1;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
h1 my-global-icon {
position: relative;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.no-history {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.row {
@include sub-menu-h1;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.peertube-select-container {
@include peertube-select-container(350px);
-@use '_miniature';
-@use '_mixins';
+@use 'sass:math';
+@use '_miniature' as *;
+@use '_mixins' as *;
.chip {
@include chip;
@include margin-right(0.5rem);
height: $image-height;
- width: #{(16/9) * $image-height};
+ width: #{math.div(16, 9) * $image-height};
border-radius: 2px;
border: 0;
background: transparent;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input[type=text] {
@include peertube-input-text(300px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
pre {
font-size: 11px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.root {
display: grid;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
h1 {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
p-autocomplete {
display: block;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input[type=text] {
@include peertube-input-text(300px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
@include margin-left(auto);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input:not([type=submit]) {
@include peertube-input-text(340px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
form {
margin-top: 40px;
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
@mixin build-channel-img-size ($video-img-width) {
$image-size: min(130px, $video-img-width);
- $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
+ $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
@include actor-avatar-size($image-size);
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
$grey-color: #9CA3AB;
$index-block-height: 32px;
.connector {
flex: auto;
- margin: $index-block-height/2 10px 0 10px;
+ margin: math.div($index-block-height, 2) 10px 0 10px;
height: 2px;
background-color: $grey-color;
}
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.alert {
font-size: 15px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input:not([type=submit]) {
@include peertube-input-text(340px);
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.playlists {
display: flex;
-@use '_variables';
-@use '_mixins';
-@use '_actor';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+@use '_miniature' as *;
.root {
--myGlobalTopPadding: 60px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label,
my-dynamic-form-field ::ng-deep label {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.first-step-block {
.torrent-or-magnet {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
$width-size: 190px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.first-step-block {
.form-group-channel {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
$border-width: 3px;
$border-type: solid;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
$markdown-icon-height: 18px;
$markdown-icon-width: 30px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root-comment {
font-size: 15px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
#highlighted-comment {
margin-bottom: 25px;
@use 'node_modules/video.js/dist/video-js';
$assets-path: '../../assets/';
+
@use '../../../sass/player/index';
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.title-page-container {
display: flex;
-@use '_mixins';
+@use '_mixins' as *;
@mixin main {
@include actor-avatar-size(35px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
@use '_bootstrap-variables';
-@use '_miniature';
+@use '_miniature' as *;
.playlist {
min-width: 200px;
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
@use '_bootstrap-variables';
-@use '_miniature';
+@use '_miniature' as *;
-$player-factor: 16/9;
+$player-factor: math.div(16, 9);
$video-info-margin-left: 44px;
@function getPlayerHeight ($width) {
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.section-title {
// make the element span a full grid row within .videos grid
-@import '_mixins';
+@use '_mixins' as *;
.btn-group label {
border: 1px solid transparent;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.peertube-container {
padding-bottom: 20px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.cfp-hotkeys-container {
display: flex !important;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
my-search-typeahead {
@include margin-right(15px);
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
#search-video {
@include peertube-input-text($search-input-width);
border-end-start-radius: 0;
border-end-end-radius: 0;
- @include media-breakpoint-up(lg) {
+ @media screen and (min-width: 1000px) {
width: 500px;
}
}
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
a {
@include disable-default-a-behaviour;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.help-to-translate {
@include peertube-button-link;
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
$menu-link-icon-size: 22px;
$menu-link-icon-margin-right: 18px;
a {
$icon-size: 13px;
- $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
+ $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
font-size: 14px;
width: 100%;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.content {
scrollbar-color: auto;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.modal-body {
font-size: 15px;
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
.modal-body {
font-size: 15px;
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
.modal-body {
font-size: 15px;
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
.modal-body {
font-size: 15px;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.comment-html {
background-color: #ececec;
-@import '_mixins';
-@import '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
.comment-flagged-account,
.account-flagged-handle {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
form {
margin: 20px 20px 0 0;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
textarea {
@include peertube-textarea(100%, 100px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.actor {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.banner-placeholder {
@include block-ratio('> div, > img', $banner-inverted-ratio);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.actor ::ng-deep .popover-image-info .popover-body {
padding: 0;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.avatar {
--avatarSize: 100%;
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.channel {
padding: 20px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
my-video-playlist-miniature {
display: inline-block;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
my-video-miniature {
display: inline-block;
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.root {
@include grid-videos-miniature-layout;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input {
@include peertube-input-text(250px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input:not([type=submit]) {
@include peertube-input-text(340px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input {
position: absolute;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
input {
@include peertube-input-text(auto);
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
$nav-preview-tab-height: 30px;
$base-padding: 15px;
@include padding-right(0);
@include padding-left(0);
- padding-top: #{$nav-preview-vertical-padding / 2};
- padding-bottom: #{$nav-preview-vertical-padding / 2};
+ padding-top: math.div($nav-preview-vertical-padding, 2);
+ padding-bottom: math.div($nav-preview-vertical-padding, 2);
position: absolute;
background-color: pvar(--mainBackgroundColor);
width: 100% !important;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
height: auto;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
height: auto;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
ng-select ::ng-deep {
.ng-option {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
$form-base-input-width: auto;
-@use '_variables';
+@use '_variables' as *;
p-inputmask {
::ng-deep input {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.glyphicon-ok {
color: $green;
-@use '_variables';
-@use '_mixins';
-@use './_bootstrap-variables';
-
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
+@use '_variables' as *;
+@use '_mixins' as *;
.instance-name {
line-height: 1.7rem;
.block {
font-size: 15px;
margin-bottom: 15px;
- padding: 0 $btn-padding-x;
}
ngb-accordion ::ng-deep {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
table {
font-size: 14px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.dropdown-divider:last-child {
display: none;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
@mixin responsive-label {
.action-button {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.feed {
width: 100%;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
// Thanks to https://loading.io/css/ (CC0 License)
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.help-tooltip-button {
@include disable-outline;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
:host {
width: 100%;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.root {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.parent-entry {
span[role=button] {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.no-notification {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.chip {
@include chip;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use 'sass:math';
+@use '_mixins' as *;
+@use '_variables' as *;
+@use '_miniature' as *;
.moderation-expanded {
font-size: 90%;
@include margin-right(0.5rem);
height: $image-height;
- width: #{(16/9) * $image-height};
+ width: #{math.div(16, 9) * $image-height};
border-radius: 2px;
border: 0;
background: transparent;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.information {
margin-bottom: 20px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
a {
@include disable-default-a-behaviour;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
textarea {
@include peertube-textarea(100%, 60px);
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
textarea {
@include peertube-textarea(100%, 100px);
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
my-input-toggle-hidden {
width: 100%;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.video-thumbnail {
@include miniature-thumbnail;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
label {
font-weight: $font-regular;
-@use '_mixins';
+@use '_mixins' as *;
.btn-remote-follow {
@include peertube-button;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.btn-group-subscribe {
@include peertube-button;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
p-autocomplete {
display: block;
@use '_bootstrap-variables';
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
$icon-size: 16px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.nav-content {
margin-top: 30px;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
$more-button-width: 40px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.action-selection-mode {
display: flex;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
$optional-rows-checkbox-width: 34px;
$timestamp-width: 50px;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
$thumbnail-width: 130px;
$thumbnail-height: 72px;
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
.miniature {
display: inline-block;
$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-@use '_bootstrap-variables';
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
@use '_fonts';
$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-@use '_bootstrap';
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import './_bootstrap-variables';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/button-group';
+@import '~bootstrap/scss/input-group';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/close';
+@import '~bootstrap/scss/modal';
+@import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/utilities';
+
+@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
.glyphicon-refresh-animate {
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
.peertube-button {
@include peertube-button;
-@use '_variables';
+@use '_variables' as *;
+@use '_mixins' as *;
@mixin section-label-responsive {
color: pvar(--mainColor);
+++ /dev/null
-@use './_bootstrap-variables';
-
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
-
-@use '~bootstrap/scss/mixins';
-@use '~bootstrap/scss/root';
-@use '~bootstrap/scss/reboot';
-@use '~bootstrap/scss/type';
-//@use '~bootstrap/scss/images';
-//@use '~bootstrap/scss/code';
-@use '~bootstrap/scss/grid';
-@use '~bootstrap/scss/tables';
-@use '~bootstrap/scss/forms';
-@use '~bootstrap/scss/buttons';
-//@use '~bootstrap/scss/transitions';
-@use '~bootstrap/scss/dropdown';
-@use '~bootstrap/scss/button-group';
-@use '~bootstrap/scss/input-group';
-//@use '~bootstrap/scss/custom-forms';
-@use '~bootstrap/scss/nav';
-//@use '~bootstrap/scss/navbar';
-@use '~bootstrap/scss/card';
-//@use '~bootstrap/scss/breadcrumb';
-//@use '~bootstrap/scss/pagination';
-@use '~bootstrap/scss/badge';
-//@use '~bootstrap/scss/jumbotron';
-@use '~bootstrap/scss/alert';
-//@use '~bootstrap/scss/progress';
-//@use '~bootstrap/scss/media';
-//@use '~bootstrap/scss/list-group';
-@use '~bootstrap/scss/close';
-@use '~bootstrap/scss/modal';
-@use '~bootstrap/scss/tooltip';
-@use '~bootstrap/scss/popover';
-//@use '~bootstrap/scss/carousel';
-@use '~bootstrap/scss/utilities';
-//@use '~bootstrap/scss/print';
-
-@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
@mixin miniature-name {
@include ellipsis-multiline(1.1em, 2);
-@use '_variables';
+@use 'sass:math';
+@use '_variables' as *;
@mixin disable-default-a-behaviour {
&:hover,
> div {
box-sizing: border-box;
- flex: 0 0 percentage(1/3);
+ flex: 0 0 percentage(math.div(1, 3));
padding: 0 5px;
margin-bottom: 10px;
// applies ratio (default to 16:9) to a child element (using $selector) only using
// an immediate's parent size. This allows to set a ratio without explicit
// dimensions, as width/height cannot be computed from each other.
-@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
+@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
$padding-percent: percentage($inverted-ratio);
position: relative;
top: 50%;
transform: translate(-50%, -50%) scale(0.5);
- border-top: ($height / 2) solid transparent;
- border-bottom: ($height / 2) solid transparent;
+ border-top: #{math.div($height, 2)} solid transparent;
+ border-bottom: #{math.div($height, 2)} solid transparent;
border-left: $width solid rgba(255, 255, 255, 0.95);
}
@use 'sass:math';
-@use '_bootstrap-variables';
$small-view: 800px;
$mobile-view: 500px;
$channel-background-color: #f6ede8;
-$banner-inverted-ratio: #{math.div(1, 6)};
+// FIXME: cannot use math.div here because of compilation error
+$banner-inverted-ratio: 0.1666666666;
$max-channels-width: 1200px;
-@use '_variables';
+@use '_variables' as *;
+@use '_mixins' as *;
$ng-select-highlight: #f2690d;
// $ng-select-primary-text: #333 !default;
+@use '_mixins' as *;
+
@keyframes bezels-fadeout {
from {
opacity: 1;
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
$context-menu-width: 350px;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
/* Special mobile style */
@use 'sass:math';
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
body {
--embedForegroundColor: #{$primary-foreground-color};
@mixin big-play-button-triangle-size($triangle-size) {
width: $triangle-size;
height: $triangle-size;
- top: calc(50% - math.div($triangle-size / 2));
- left: calc(53% - math.div($triangle-size / 2));
+ top: calc(50% - math.div($triangle-size, 2));
+ left: calc(53% - math.div($triangle-size, 2));
}
.video-js.vjs-peertube-skin {
$big-play-width: 1.2em;
$big-play-height: 1.2em;
- @include margin-left(-($big-play-width / 2));
+ @include margin-left(-(math.div($big-play-width, 2)));
outline: 0;
font-size: 6em;
width: $big-play-width;
height: $big-play-height;
line-height: $big-play-height;
- margin-top: -(math.div($big-play-height / 2));
+ margin-top: -(math.div($big-play-height, 2));
transition: 0.4s opacity;
&::-moz-focus-inner {
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
$playlist-menu-width: 350px;
.vjs-playlist-menu {
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
$setting-transition-duration: 0.15s;
$setting-transition-easing: ease-out;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
// Thanks: https://projects.lukehaas.me/css-loaders/
.vjs-loading-spinner {
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
$stats-width: 420px;
$contextmenu-background-color: rgba(0, 0, 0, 0.6);
.video-js {
.vjs-stats-content {
- @include transition(opacity 0.1s);
+ transition: opacity 0.1s;
position: absolute;
background-color: $contextmenu-background-color;
@return #{$pixels/$context}em;
}
-@mixin transition($string: $transition--default) {
- transition: $string;
-}
-
.video-js {
.vjs-upnext-content {
- @include transition(opacity 0.1s);
+ transition: opacity 0.1s;
font-size: 1.8em;
pointer-events: auto;
}
.vjs-upnext-autoplay-icon {
- @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
+ transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1);
position: absolute;
top: 50%;
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
/* stylelint-disable */
-@use '~primeng/resources/primeng.css';
+@use 'primeng/resources/primeng';
// Override primeng style we don't want
input[type=button] {
background-color: pvar(--submenuBackgroundColor) !important;
.pi {
- @extend .glyphicon;
+ @extend .glyphicon !optional;
color: #000 !important;
font-size: 11px !important;
top: 0 !important;
&.pi-sort-amount-up-alt {
- @extend .glyphicon-triangle-top;
+ @extend .glyphicon-triangle-top !optional;
color: pvar(--mainForegroundColor) !important;
}
&.pi-sort-amount-down {
- @extend .glyphicon-triangle-bottom;
+ @extend .glyphicon-triangle-bottom !optional;
color: pvar(--mainForegroundColor) !important;
}
}
&.p-paginator-first {
- @extend .glyphicon-step-backward;
+ @extend .glyphicon-step-backward !optional;
}
&.p-paginator-prev {
- @extend .glyphicon-chevron-left;
+ @extend .glyphicon-chevron-left !optional;
@include margin-right(10px);
}
&.p-paginator-next {
- @extend .glyphicon-chevron-right;
+ @extend .glyphicon-chevron-right !optional;
@include margin-left(10px);
}
&.p-paginator-last {
- @extend .glyphicon-step-forward;
+ @extend .glyphicon-step-forward !optional;
}
}
}
.p-datepicker-next {
- @extend .glyphicon-chevron-right;
+ @extend .glyphicon-chevron-right !optional;
@include glyphicon-light;
color: #000 !important;
}
.p-datepicker-prev {
- @extend .glyphicon-chevron-left;
+ @extend .glyphicon-chevron-left !optional;
@include glyphicon-light;
color: #000 !important;
.p-timepicker {
.pi.pi-chevron-up {
- @extend .glyphicon-chevron-up;
+ @extend .glyphicon-chevron-up !optional;
@include glyphicon-light;
color: #000 !important;
}
.pi.pi-chevron-down {
- @extend .glyphicon-chevron-down;
+ @extend .glyphicon-chevron-down !optional;
@include glyphicon-light;
color: #000 !important;
-@use '_variables';
-@use '_mixins';
-@use '~video.js/dist/video-js.css';
-@use '~videojs-dock/dist/videojs-dock.css';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use 'video.js/dist/video-js';
+@use 'videojs-dock/dist/videojs-dock';
$assets-path: '../../assets/';
@use '../../sass/player/index';
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
* {
font-family: sans-serif;
clientConfiguration="ar-locale"
fi
-clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
+clientCommand="cd client && node --max_old_space_size=4096 node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
serverCommand="npm run build:server && NODE_ENV=test node dist/server"
if [ ! -z ${1+x} ] && [ "$1" = "--skip-server" ]; then
projects / github / Chocobozzz / PeerTube.git / commitdiff
