Git Product home page Git Product logo

azuracastmods's Introduction

AzuraCastMods

Applying these mods:

https://github.com/TychoWerner/AzuraCastMods/tree/main/Applying%20these%20mods

Add a custom button to public page (JS)

https://github.com/TychoWerner/AzuraCastMods/tree/main/Add%20a%20custom%20button%20to%20public%20page

Hide a button 2nd button (JS)

https://github.com/TychoWerner/AzuraCastMods/tree/main/Hide%20a%20button%202nd%20button

Modifications to the Azuracast Embed Player Widget (CSS)

Known issues

The volume slider is not visible on Chromium based browsers (visible on Firefox), see AzuraCast/AzuraCast#5537. The volume slider's appearance cannot be modified (?) either.

CSS examples

Replace the color hex values and font weight/size with what you need. Below #FF0000 (red) is used everywhere.

/*song title color */
[data-theme] body.embed .now-playing-title {
    color:  #FF0000;
}

/* artist name*/
[data-theme] body.embed .now-playing-artist {
    color: #FF0000;
  font-weight: bold; 
  font-size: 1.1em;
}

/* stream select button color */
#btn-select-stream {
    color: #FF0000;
}

/* buttons volume & play color */
[data-theme] body.embed .material-icons {
    color: #FF0000;
}

[data-theme] body.embed .material-icons.outlined.lg {
	color: #FF0000;
}

Modifications to the Azuracast Embed Schedule Widget (CSS)

/* center h & v playlist names on schedule page */
.page-minimal.schedule.embed .fc-event-title-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1em;
}

.page-minimal.schedule.embed .fc-event-title.fc-sticky {
  text-align: center;
  color: #FF0000;
}

Modifications to the Azuracast Embed History Widget (CSS)

/* hide order column in history widget */
[data-theme] body.embed div.song strong.order {
    display:  none !important;
}

/* align "played x mn ago" to the right in history widget and add top padding */
[data-theme] body.embed div.song small.date-played.text-muted span {
  position: absolute;
  right: 5px;
  padding-top: 10px;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.