#app { margin-bottom: 100px; } /* Custom CSS for the overlay's background opacity and transition, as Bulma doesn't have direct classes for these combinations */ .loading-overlay { background-color: rgb(20 22 26 / 80%); /* Semi-transparent white */ transition: opacity 0.3s ease-in-out; /* Smooth transition */ z-index: 10; /* Ensures it's above the content */ border-radius: 8px; /* Match container border-radius */ } /* Hidden state for the overlay */ .loading-overlay.is-hidden { opacity: 0; pointer-events: none; /* Prevents interaction when hidden */ } /* Custom animation for the Feather icon */ .loading-overlay svg { color: #b9b9b9; /* Bulma primary color */ animation: spin 1.8s linear infinite; /* Spinning animation */ width: 4rem; /* Size of the icon */ height: 4rem; /* Size of the icon */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .notification.is-download { background-color: #2c2c2c; /* Slightly lighter dark for notification background */ border-radius: 8px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* More prominent shadow */ padding: 1.25rem 1.5rem; display: flex; /* Use flexbox for alignment */ align-items: center; /* Vertically center items */ } .media-content { overflow: hidden; /* Prevent content overflow */ } .notification-title { color: #ffffff; /* Light text for title */ margin-bottom: 0.25rem; line-height: 1.2; } .notification-status { color: #cccccc; /* Slightly darker light text for status */ font-size: 0.9rem; } /* Removed .delete styling as the button is removed */ .report-icon-wrapper { margin-left: 1rem; flex-shrink: 0; /* Prevent the icon from shrinking */ } .report-icon-wrapper a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #3f3f3f; /* Darker background for icon circle */ color: #e0e0e0; /* Light color for icon */ transition: background-color 0.2s ease, color 0.2s ease; } .report-icon-wrapper a:hover { background-color: #555555; /* Lighter background on hover */ color: #ffffff; /* Brighter icon on hover */ } .report-icon-wrapper svg { width: 18px; height: 18px; } /* Specific styles for danger notification on dark background */ .notification.is-download.is-danger { background-color: #7a1f1f; /* Darker red for danger */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); } .notification.is-download.is-danger .notification-title, .notification.is-download.is-danger .notification-status { color: #ffffff; } .notification.is-download.is-danger .report-icon-wrapper a { background-color: #a02a2a; color: #ffffff; } .notification.is-download.is-danger .report-icon-wrapper a:hover { background-color: #c03a3a; } /* Responsive adjustments */ @media screen and (max-width: 768px) { .notification.is-download { flex-direction: row; /* Keep content in a row */ align-items: center; padding: 1rem; } .notification-container { padding: 0.5rem; } /* Removed .delete styling as the button is removed */ .report-icon-wrapper { margin-left: 0.75rem; } } .footer-branding{ display: none !important; } #downloadframe { width:100%; z-index: 20; } .dnotification{ --bulma-card-shadow: none; border: var(--bulma-border-weak) 1px solid; } .expliciticon { height: 1.3em; margin-bottom: -0.3em; } .navbar-brand { z-index: 45; } .innersongtext { position: relative; overflow: clip; } #downloadmanager { position: absolute; bottom: 0; height: 70vh; border: 2px solid white; border-radius: 25px 25px 0px 0px; background-color: #14161A; width: calc(100% - 2rem); z-index: 20; overflow: scroll; } .songMenu { position: absolute; right: 40px; width: auto; background-color: #14161A; border-radius: 20px; border: 1px solid white; } .songMenuIcon { color: white; margin: 5px; } .songMenuIcon:hover { color: grey; } .podcastsimg { border-radius: 25px; } #musicrt { margin-top: 80px; } .navbar { min-height: 2em; } .bottom-border { border-bottom: 2px solid white; } .top-border { border-top: 2px solid white; } .navbar-item { color: white; } .navbar-item:hover { background-color: azure; color: black; } .activeroute { background-color: azure; color: black; } .cover-image { object-fit: cover; height: 100% !important; } /* search page */ :root { --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); --bulma-primary-rgb: 255, 255, 255; --bulma-primary-h: 0deg; --bulma-primary-s: 0%; --bulma-primary-l: 100%; --bulma-primary-00-l: 1%; --bulma-primary-05-l: 6%; --bulma-primary-10-l: 11%; --bulma-primary-15-l: 16%; --bulma-primary-20-l: 21%; --bulma-text-light: white; --bulma-link:white; } .input::placeholder{ color:white; } .input.is-loading::after{ border-color: white transparent white transparent; } .button.is-loading::after{ border-color: white transparent white transparent; } .songresult{ height: 50px; } .topmargin{ margin-top: 70px; } .songimg{ width: 50px; } .iconbtns{ border: none; } .songtext{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .audio-player-container { --bulma-card-shadow: none; border-bottom: 2px solid white; --bulma-card-radius: 0px; margin-bottom: 0px !important; padding-bottom: 10px; width: 100%; /* Make it responsive */ } .card-content { padding: 0.75rem; /* Reduced padding inside card content */ position: relative; /* Needed for absolute positioning of close button */ } .media { align-items: center; /* Vertically align media items */ margin-bottom: 0.75rem !important; /* Space below media object */ /* No margin-left needed as image is removed */ } /* Removed .media-left styles as the element is removed */ .media-content { overflow: hidden; /* Prevent text overflow */ /* Allow media-content to take full width when image is removed */ flex-grow: 1; } .media-content .title, .media-content .subtitle { white-space: nowrap; /* Prevent wrapping */ overflow: hidden; /* Hide overflowing text */ text-overflow: ellipsis; /* Add ellipsis for truncated text */ margin-bottom: 0.25rem; /* Reduced space between title and subtitle */ } .media-content .title { font-size: 1rem; /* Slightly smaller title font size */ } .media-content .subtitle { font-size: 0.875rem; /* Slightly smaller subtitle font size */ } /* Hide the default audio controls */ audio { display: none; } .custom-controls { display: flex; align-items: center; gap: 1rem; /* Space between controls */ } .control-button { background: none; border: none; cursor: pointer; padding: 0; color: #333; /* Default icon color */ font-size: 1.5rem; /* Icon size */ } .control-button:hover { color: #007bff; /* Hover color */ } .progress-bar-container { flex-grow: 1; /* Allow progress bar to take available space */ height: 8px; background-color: #e0e0e0; border-radius: 4px; cursor: pointer; position: relative; } .progress-bar { height: 100%; width: 0%; background-color: #007bff; /* Progress color */ border-radius: 4px; } .close-button { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; /* Ensure button is above other content */ } /** * Minified by jsDelivr using clean-css v5.3.2. * Original file: /npm/toastify-js@1.12.0/src/toastify.css * * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files */ /*! * Toastify js 1.12.0 * https://github.com/apvarun/toastify-js * @license MIT licensed * * Copyright (C) 2018 Varun A P */ .toastify{padding:12px 20px;color:#fff;display:inline-block;box-shadow:0 3px 6px -1px rgba(0,0,0,.12),0 10px 36px -4px rgba(77,96,232,.3);background:-webkit-linear-gradient(315deg,#73a5ff,#5477f5);background:linear-gradient(135deg,#73a5ff,#5477f5);position:fixed;opacity:0;transition:all .4s cubic-bezier(.215, .61, .355, 1);border-radius:2px;cursor:pointer;text-decoration:none;max-width:calc(50% - 20px);z-index:2147483647}.toastify.on{opacity:1}.toast-close{background:0 0;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:1em;opacity:.4;padding:0 5px}.toastify-right{right:15px}.toastify-left{left:15px}.toastify-top{top:-150px}.toastify-bottom{bottom:-150px}.toastify-rounded{border-radius:25px}.toastify-avatar{width:1.5em;height:1.5em;margin:-7px 5px;border-radius:2px}.toastify-center{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content;max-width:-moz-fit-content}@media only screen and (max-width:360px){.toastify-left,.toastify-right{margin-left:auto;margin-right:auto;left:0;right:0;max-width:fit-content}} /*# sourceMappingURL=/sm/cb4335d1b03e933ed85cb59fffa60cf51f07567ed09831438c60f59afd166464.map */ .driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}