Custom CSS Template Instructions

This page provides a template for custom CSS you can share with others to override and extend the default styles for the Lycoris Music Player. Simply paste the code below into the custom CSS textarea in the settings menu.

/* Custom CSS Template for Lycoris Music Player */
/* ========================================================================== */
/* This template overrides the default styles to allow for complete customization. */
/* Adjust values as needed to fit your desired theme. */

/* Global Overrides */
body {
  background: #f4f4f9 !important;  /* Default background color */
  color: #333 !important;  /* Default text color */
  font-family: 'Inter', sans-serif !important;  /* Font for text */
  transition: background 0.3s ease !important;
}

/* Background Customization */
body.custom-background {
  background: var(--custom-background, #f4f4f9) !important;
}

body.custom-background.gradient-background {
  background: var(--custom-gradient, linear-gradient(135deg, #ff7e5f, #feb47b)) !important;
}

/* Search Bar Styling */
.search-bar {
  margin-bottom: 20px !important;
  padding-right: 70px !important;
  position: relative !important;
}

.search-bar input {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  color: #333 !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

.search-bar input:focus {
  border-color: #6200ee !important;  /* Focus color */
  outline: none !important;
}

/* Player Styling */
.player {
  background-color: #fff !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 10px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: background-color 0.3s ease !important;
}

.player .controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.controls button {
  font-size: 24px !important;
  color: #6200ee !important;  /* Color of control buttons */
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
}

.controls button:hover {
  color: #4e00c8 !important;  /* Hover color for controls */
}

/* Track Item Styling */
.track-item {
  padding: 10px !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 10px !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.track-item:hover {
  background-color: #f0f0f0 !important;  /* Hover background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;  /* Hover shadow */
}

/* Settings Menu Styling */
.settings-menu-content {
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 0 12px 12px 0 !important; /* Rounded right corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 20px !important;
}

/* Button Styling */
button, #apply-custom-css, #apply-custom-colors {
  font-family: 'Inter', sans-serif !important;
  background-color: #6200ee !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 15px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

button:hover, #apply-custom-css:hover, #apply-custom-colors:hover {
  background-color: #4e00c8 !important;
}

/* Custom Theme Dropdown */
#custom-theme-dropdown {
  padding: 8px 12px !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  margin-top: 10px !important;
}

#custom-theme-dropdown option {
  background-color: #fff !important;
  color: #333 !important;
}

/* Additional Customizations */
input[type="color"] {
  border-radius: 5px !important;
  border: none !important;
  width: 60px !important;
  height: 30px !important;
  cursor: pointer !important;
}

input[type="color"]:focus {
  outline: none !important;
}

/* Gradients Example (Optional) */
body.gradient-background {
  background: var(--custom-gradient, linear-gradient(135deg, #ff7e5f, #feb47b)) !important;
}

/* Override Other Default Styles Here */

/* End of Custom CSS */

Remember, any rules you add in the custom CSS textarea will override the default styles. Feel free to experiment!