peertube-theme-black-red/assets/style.css

Mostly black and red PeerTube-theme

body {
    --mainColor: #ff1e00;
    --mainColorLighter: #fd5039;
    --mainColorLightest: #ff6956;
    --mainHoverColor: #fd5f5f;
    --mainBackgroundColor: #ffffff;
    --mainForegroundColor: #000000;
    --submenuColor: #ffffff;
    --inputColor: #ffffff;
    --inputPlaceholderColor: #1b2733;
    --menuAndHeaderBackgroundColor: #ffffff;
    --menuForegroundColor: #ffffff;
    --menuBackgroundColor: #000000;
    --whiteColor: #ffffff;
    --dangerBackgroundColor: #b8312c;
  }

  
  #custom-css #search-video{
    background: var(--mainBackgroundColor) !important;
  }
  #custom-css .footer-links a,
  #custom-css .footer-copyleft a{
    color: var(--menuForegroundColor) !important
  }
  /* Dropdowns & inputs */
  #custom-css .dropdown-menu{
    background-color: var(--menuBackgroundColor) !important;
    color: var(--menuForegroundColor) !important;
  }

  #custom-css .dropdown-menu a{
    color: var(--menuForegroundColor) !important;
  }

  #custom-css .text-muted {
    color: #c2c6ca!important;
}

#custom-css .video-actions {
 color: black !important;
}

  #custom-css menu {
    color: var(--mainColor) !important;
  }

  span.icon.icon-menu{
    background-color: var(--mainColor) !important;
  }
  .top-left-block {
    background-color: black;
    color: var(--mainColor);
  }

  #custom-css span.icon.icon-menu{
    background-color: var(--mainColor) !important;
    }


  #custom-css .dropdown-item:focus:not(.new-playlist-block), 
  #custom-css .dropdown-item:hover:not(.new-playlist-block),
  #custom-css .videos-header a button{
    color: var(--whiteColor) !important; 
    background-color: var(--mainColor);
  }
  #custom-css .dropdown-item:focus:not(.new-playlist-block),
  #custom-css .dropdown-item:hover:not(.new-playlist-block),
  #custom-css .dropdown-item:active:not(.new-playlist-block),
  #custom-css span.dropdown-item.custom-action:hover,

  #custom-css a.dropdown-item.with-icon:hover{
    color: var(--whiteColor) !important; 
    background-color: var(--mainColor) !important;
  }
  #custom-css .header{
    background-color: var(--menuBackgroundColor);
  }
  #custom-css .upload-button, #custom-css .upload-button:active, #custom-css .upload-button:focus{
    color: var(--whiteColor) !important; 
    background-color: var(--mainColor) !important;
  }
  
  #custom-css .root .form-group-checkbox input:checked + span{
    background: var(--mainColor) !important;
  }
  
  #custom-css .dropdown-menu .dropdown-item:hover span[role="checkbox"],
  #custom-css .dropdown-menu .dropdown-item span[role="checkbox"]:checked{
    border: 1px solid var(--mainBackgroundColor) !important
  }
  #custom-css .peertube-select-container, input[type="text"], textarea{
    border: 1px solid var(--mainBackgroundColor) !important;
  }
  #custom-css .dropdown-menu input[type="submit"]{
    border: 1px solid transparent !important; /* Removing black border in buttons */
  }
  #custom-css .header .options-row{
    padding-left: 0;
  }
  #custom-css .header .options-row > div{
    justify-content: space-between;
  }
  #custom-css .sub-header-container my-menu .menu-wrapper{
    margin-top: 2px;
  }

  #custom-css > div.dropdown > div > a:nth-child(6) > my-global-icon > svg {
    filter: invert(100%);
    -webkit-filter: invert(100%);
  }

  #custom-css > div.dropdown > div > a:nth-child(12) > i {
    filter: invert(100%);
    -webkit-filter: invert(100%);
  }

  #content .dropdown-menu .dropdown-item  {
    color: var(--menuForegroundColor) !important;
  }

  /* Icons && Icon hovers */
  #custom-css  a my-global-icon svg circle[stroke="#000000"],
  #custom-css  a my-global-icon svg g[stroke="#000000"],
  #custom-css  a my-global-icon svg path[stroke="#000000"],
  #custom-css  a my-global-icon svg polygon[stroke="#000000"],
  #custom-css  a my-global-icon svg rect[stroke="#000000"],
  #custom-css  a my-global-icon svg ellipse[stroke="#000000"]{
    stroke: var(--mainForegroundColor) !important;
  }
  #custom-css .dropdown-item:hover my-global-icon svg circle[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg g[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg path[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg polygon[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg rect[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg ellipse[stroke="#000000"],
  #custom-css .videos-header a button my-global-icon svg g[stroke="#000000"]{
    stroke: var(--whiteColor) !important;
  }
  
  
  #custom-css  a my-global-icon svg circle[fill="#000000"],
  #custom-css  a my-global-icon svg g[fill="#000000"],
  #custom-css  a my-global-icon svg path[fill="#000000"],
  #custom-css  a my-global-icon svg polygon[fill="#000000"],
  #custom-css  a my-global-icon svg rect[fill="#000000"]{
    fill: var(--mainForegroundColor) !important;
  }
  #custom-css .dropdown-item:hover my-global-icon svg circle[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg g[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg path[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg polygon[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg rect[fill="#000000"]{
    fill: var(--whiteColor) !important;
  }
  
  #custom-css .upload-button my-global-icon svg g[stroke="#000000"] {
    stroke: var(--whiteColor) !important;
  }
   /* Delete buttons */
   #custom-css .delete-me button:hover,
   #custom-css .delete-me button,
   #custom-css .action-button-delete,
   #custom-css .action-button-delete:active,
   #custom-css .action-button-delete-selection{
     background-color: var(--dangerBackgroundColor);
     color: var(--whiteColor);
   }
   #custom-css .top-buttons .delete-history{
     background-color: var(--dangerBackgroundColor);
     color: var(--whiteColor);
   }
  
   /* Register button */
   #custom-css .create-account-button{
     background-color: var(--mainForegroundColor);
   }
  
   /* Icons from buttons */
  #custom-css .upload-button my-global-icon svg g[stroke="#000000"],
  #custom-css a.add-button my-global-icon svg circle[stroke="#000000"],
  #custom-css a.create-button my-global-icon svg circle[stroke="#000000"],
  #custom-css a.create-caption my-global-icon svg circle[stroke="#000000"]{
    stroke: var(--whiteColor) !important;
  }
  #custom-css a.add-button my-global-icon svg rect[fill="#000000"],
  #custom-css a.create-button my-global-icon svg rect[fill="#000000"],
  #custom-css a.create-caption my-global-icon svg rect[fill="#000000"]{
    fill: var(--whiteColor) !important;
  }
    /* Trash bin icon */
    #custom-css my-global-icon[iconname="delete"] svg path[stroke="#000000"]{
      stroke: var(--whiteColor) !important;
    }
    #custom-css my-global-icon[iconname="delete"] svg path[fill="#000000"],
    #custom-css my-global-icon[iconname="delete"] svg rect[fill="#000000"]{
      fill: var(--whiteColor) !important;
    }
  
    /* Pagination */
  #custom-css .ui-paginator .ui-paginator-element:hover:not(.ui-state-disabled){
    color: var(--whiteColor) !important;
    background-color: var(--mainHoverColor) !important;
  }