custom-css.css

a,
.leaflet-container a {
  color: #ff0078;
}

.form-control:focus {
  background: inherit;
}

#password {
  color: inherit;
}

.alert-danger {
  --bs-alert-color: #990000;
  --bs-alert-bg: #2f000078;
  --bs-alert-border-color: #820000;
}

.leaflet-marker-pane img {
  filter: hue-rotate(60deg) saturate(150%);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border: 1px solid var(--mainColor);
  background: #111;
  color: #eee;
}

.icon-logo {
  background-image: url(/static-extra/logo.svg);
  background-position: center;
  background-origin: initial;
  background-color: transparent;
  border-radius: 5px;
  transform: scale(1.7) translateY(0.3px);
}

.peertube-title {
  overflow: initial !important;
}

.root-header {
  background: linear-gradient(90deg, #000618e0, #2c0030e3);
  border-bottom: 1px solid #35204e;
  background-color: transparent !important;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
}

#search-video {
  backdrop-filter: grayscale(1) brightness(250%);
  -webkit-backdrop-filter: grayscale(1) brightness(250%);
}

#search-video:not(:focus) {
  background-color: transparent !important;
}

.instance-name {
  font-weight: 300;
}

.peertube-title:hover .instance-name {
  background: linear-gradient(
    to right,
    #ef5350,
    #f48fb1,
    #7e57c2,
    #2196f3,
    #26c6da,
    #43a047,
    #eeff41,
    #f9a825,
    #ff5722
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.instance-name::after {
  content: "BETA";
  display: inline-block;
  background: #ff0078;
  font-size: 0.5rem;
  transform: translateY(-0.7rem);
  margin-left: 6px;
  line-height: 1;
  padding: 2px 4px;
  font-weight: normal;
}

.peertube-title:hover .instance-name::after {
  -webkit-text-fill-color: initial;
}

.active-filters {
  display: none !important;
}

.videos-header {
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: -30px !important;
}

@media screen and (max-width: 500px) {
  .videos-header {
    display: none !important;
  }

  my-video-filters-header {
    margin-top: 2rem;
  }

  #map-container ~ p > peertube-videos-list > div {
    margin: 0 calc(-1 * var(--horizontalMarginContent));
  }
}

body {
  --mainColor: #7400ff;
  --mainColorLighter: #8724ff;
  --mainHoverColor: #4e00ac;
  --mainColorLightest: #2e0068;
  --mainBackgroundColor: #111;
  --inputBorderColor: #777;
  --videosHorizontalMarginContent: 2rem;
  --bs-border-color-translucent: #666;
}

.accordion {
  --bs-accordion-btn-color: #fff;
}

.ng-select.ng-select-opened > .ng-select-container,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked,
.ng-option-marked {
  background: var(--mainColorLightest) !important;
  color: white !important;
}

.alert .link-orange {
  color: #fff;
}

@media (max-width: 700px) {
  #typeahead-container {
    width: 100%;
  }
}

my-video-filters-header {
  width: calc(100% - 30px);
}

#search-video {
  font-size: 1rem !important;
}

.leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.leaflet-container {
  background: var(--mainBackgroundColor);
}

.footer-links > *:last-child::after {
  content: "🏳️‍🌈";
}

#map-container {
  height: 600px;
  margin: 0 calc(var(--horizontalMarginContent) * -1) 2rem;
  width: calc(100% + calc(var(--horizontalMarginContent) * 2));
  max-height: 50vh;
  min-height: 250px;
}

#map {
  width: 100%;
  height: 100%;
}

/* LEAFLET CLUSTER CSS BELOW */
.marker-cluster-small {
  background-color: rgba(255, 0, 120, 0.6);
}
.marker-cluster-small div {
  background-color: rgba(255, 0, 120, 0.2);
}

.marker-cluster-medium {
  background-color: rgba(255, 0, 120, 0.6);
}
.marker-cluster-medium div {
  background-color: rgba(255, 0, 120, 0.2);
}

.marker-cluster-large {
  background-color: rgba(255, 0, 120, 0.6);
}
.marker-cluster-large div {
  background-color: rgba(255, 0, 120, 0.2);
}

.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
}
.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;

  text-align: center;
  border-radius: 15px;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
  line-height: 30px;
}

/* LEAFLET CLUSTER CSS ABOVE */

.user-quota {
  display: none;
}

.alert-warning {
  --bs-alert-color: #d59f00;
  --bs-alert-bg: #262400;
  --bs-alert-border-color: #443714;
}

.leaflet-bar a,
.leaflet-bar a.leaflet-disabled {
  background-color: #fff5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #ccc5;
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background-color: #fff5;
}

.leaflet-container .leaflet-control-attribution {
  background: none;
  color: #aaa;
  text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px,
    rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
}

.leaflet-container .leaflet-control-attribution a {
  color: inherit;
}

@media screen and (min-width: 500px) {
  .root,
  .videos,
  .playlist {
    --miniatureMinWidth: 270px !important;
    --miniatureMaxWidth: 370px !important;
    column-gap: 16px !important;
  }

  .video-thumbnail {
    border-radius: 12px !important;
  }

  .channel .video-thumbnail {
    border-radius: 8px !important;
  }

  .other-videos .video-thumbnail {
    border-radius: 8px !important;
  }
}

.video-thumbnail-duration-overlay {
  padding: 2px 4px !important;
}

.attribute-label {
  opacity: 0.5;
}

.video-thumbnail {
  background-color: black !important;
}

/*my-user-interface-settings form {
  display: none;
}

my-user-interface-settings::after {
  content: 'No interface options available';
}*/

/* PWA changes below */

.sub-header-container {
  margin-top: calc(50px + env(safe-area-inset-top)) !important;
}

.root-header {
  height: calc(50px + env(safe-area-inset-top)) !important;
  padding-top: env(safe-area-inset-top) !important;
}

.privacy-concerns {
  padding: 0.5rem 0.5rem env(safe-area-inset-bottom) !important;
}

body {
  --videosHorizontalMarginContent: max(
    6vw,
    env(safe-area-inset-left),
    env(safe-area-inset-right)
  );
}

.publish-button {
  margin-inline-end: max(25px, env(safe-area-inset-right)) !important;
}

@media screen and (max-width: 500px) {
  .publish-button my-global-icon {
    margin-inline-end: 0 !important;
  }
}

@media screen and (max-width: 700px) {
  .publish-button {
    margin-inline-end: max(10px, env(safe-area-inset-right)) !important;
  }
}

.top-left-block {
  margin-left: env(safe-area-inset-left);
}

.menu-wrapper {
  width: calc(240px + env(safe-area-inset-left)) !important;
  padding-left: env(safe-area-inset-left);
  padding: 0 0 0 env(safe-area-inset-left) !important;
  background-color: var(--menuBackgroundColor);
}

@media screen and (max-width: 1080px) {
  .main-col,
  .main-col.expanded {
    --horizontalMarginContent: var(--videosHorizontalMarginContent);
  }
}

.video-miniature-name {
  font-size: 16px !important;
  max-height: initial !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

.other-videos:not(.display-as-row) my-video-miniature {
  max-width: 300px !important;
}

.other-videos:not(.display-as-row) my-video-miniature .video-miniature-name {
  margin-top: 6px !important;
}

.menu-block .menu-link,
.footer-block .menu-link {
  min-height: 40px;
  border-radius: 8px;
  margin: 0 13px;
}

.menu-block .menu-link.active,
.footer-block .menu-link.active {
  font-weight: 500;
  background-color: #ffffff26 !important;
}

.menu-block .menu-link.active svg,
.footer-block .menu-link.active svg {
  color: white !important;
}

.menu-wrapper {
  scrollbar-color: #8885 transparent !important;
}

/* For some reason combining these breaks... */

.leaflet-pseudo-fullscreen .leaflet-top .leaflet-control {
  margin-top: max(env(safe-area-inset-top), 10px) !important;
}

.leaflet-container:fullscreen .leaflet-top .leaflet-control {
  margin-top: max(env(safe-area-inset-top), 10px) !important;
}

.leaflet-top .leaflet-control {
  margin-left: max(env(safe-area-inset-left), 10px) !important;
}

.form-control:focus {
  color: var(--mainForegroundColor);
}

.feed a {
  color: white !important;
}

img[style="img:watermark"] {
  filter: hue-rotate(-70deg) grayscale(1);
  opacity: 0.15;
  transform: scale(10) translateX(-50%);
  transform-origin: center;
  position: absolute;
  right: 0rem;
  width: 2.5rem;
  pointer-events: none;
  margin-top: -10rem;
}

@media (max-width: 500px) {
  img[style="img:watermark"] {
    width: 9vw;
    left: 0;
    transform: scale(10) translateX(50%);
  }
}