| <!DOCTYPE html> |
| <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Tony电台Radio</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; |
| } |
| |
| body { |
| background: #0a0a0a; |
| color: #ffffff; |
| height: 100vh; |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .container { |
| display: flex; |
| flex: 1; |
| overflow: hidden; |
| } |
| |
| |
| .sidebar { |
| width: 160px; |
| background: #1a1a1a; |
| border-right: 1px solid #2a2a2a; |
| padding: 20px 0; |
| overflow-y: auto; |
| position: relative; |
| z-index: 10; |
| } |
| |
| .logo { |
| padding: 0 15px 20px; |
| border-bottom: 1px solid #2a2a2a; |
| margin-bottom: 20px; |
| position: sticky; |
| top: 0; |
| background: #1a1a1a; |
| z-index: 5; |
| } |
| |
| .logo h1 { |
| font-size: 20px; |
| font-weight: 600; |
| color: #ffffff; |
| } |
| |
| .nav-section { |
| padding: 0 15px; |
| margin-bottom: 25px; |
| } |
| |
| .nav-section h3 { |
| font-size: 16px; |
| color: #666; |
| margin-bottom: 12px; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .nav-list { |
| list-style: none; |
| } |
| |
| .nav-item { |
| display: block; |
| padding: 10px 12px; |
| color: #ccc; |
| text-decoration: none; |
| font-size: 16px; |
| border-radius: 6px; |
| margin-bottom: 6px; |
| transition: all 0.2s ease; |
| cursor: pointer; |
| } |
| |
| .nav-item:hover { |
| background: #2a2a2a; |
| color: #fff; |
| } |
| |
| .nav-item.active { |
| background: #d32f2f; |
| color: #fff; |
| } |
| |
| |
| .main-content { |
| flex: 1; |
| padding: 20px; |
| overflow-y: auto; |
| background: #0f0f0f; |
| padding-bottom: 100px; |
| } |
| |
| .content-section { |
| margin-bottom: 35px; |
| } |
| |
| .content-section h2 { |
| font-size: 20px; |
| font-weight: 600; |
| margin-bottom: 18px; |
| color: #fff; |
| padding-bottom: 10px; |
| border-bottom: 1px solid #2a2a2a; |
| } |
| |
| |
| .station-list { |
| display: grid; |
| gap: 10px; |
| } |
| |
| .station-item { |
| background: #1a1a1a; |
| border: 1px solid #2a2a2a; |
| border-radius: 8px; |
| padding: 15px 18px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
| |
| .station-item:hover { |
| background: #2a2a2a; |
| border-color: #d32f2f; |
| } |
| |
| .station-item.active { |
| background: #d32f2f; |
| border-color: #d32f2f; |
| } |
| |
| .station-info { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .station-name { |
| font-size: 16px; |
| color: #fff; |
| flex: 1; |
| } |
| |
| .live-badge { |
| background: #d32f2f; |
| color: #fff; |
| padding: 4px 10px; |
| border-radius: 12px; |
| font-size: 13px; |
| font-weight: 500; |
| margin-left: 10px; |
| } |
| |
| |
| .program-list { |
| display: grid; |
| gap: 10px; |
| } |
| |
| .program-item { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| padding: 12px 18px; |
| background: #1a1a1a; |
| border-radius: 6px; |
| border: 1px solid #2a2a2a; |
| } |
| |
| .program-time { |
| font-size: 14px; |
| color: #d32f2f; |
| font-weight: 500; |
| min-width: 70px; |
| } |
| |
| .program-name { |
| font-size: 16px; |
| color: #fff; |
| } |
| |
| |
| .player { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 90px; |
| background: #1a1a1a; |
| border-top: 1px solid #2a2a2a; |
| display: flex; |
| align-items: center; |
| padding: 0 20px; |
| gap: 20px; |
| z-index: 100; |
| } |
| |
| .player-info { |
| display: flex; |
| flex-direction: column; |
| flex: 1; |
| min-width: 0; |
| } |
| |
| .current-station { |
| font-size: 16px; |
| font-weight: 500; |
| color: #fff; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .current-song { |
| font-size: 14px; |
| color: #ccc; |
| margin-top: 6px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .player-time { |
| font-size: 14px; |
| color: #666; |
| margin-top: 6px; |
| } |
| |
| .player-controls { |
| display: flex; |
| align-items: center; |
| gap: 15px; |
| } |
| |
| .play-btn { |
| background: #d32f2f; |
| border: none; |
| border-radius: 50%; |
| width: 60px; |
| height: 60px; |
| color: #fff; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.2s ease; |
| font-size: 20px; |
| position: relative; |
| } |
| |
| .play-btn:hover { |
| background: #b71c1c; |
| } |
| |
| |
| .play-btn::before { |
| content: "▶"; |
| position: absolute; |
| } |
| |
| .play-btn.paused::before { |
| content: "■"; |
| letter-spacing: -3px; |
| font-weight: bold; |
| } |
| |
| .progress-container { |
| flex: 1; |
| max-width: 400px; |
| } |
| |
| .progress-bar { |
| width: 100%; |
| height: 6px; |
| background: #2a2a2a; |
| border-radius: 3px; |
| overflow: hidden; |
| cursor: pointer; |
| } |
| |
| .progress { |
| width: 30%; |
| height: 100%; |
| background: #d32f2f; |
| border-radius: 3px; |
| transition: width 0.1s ease; |
| } |
| |
| |
| .sidebar::-webkit-scrollbar, |
| .main-content::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .sidebar::-webkit-scrollbar-track, |
| .main-content::-webkit-scrollbar-track { |
| background: #1a1a1a; |
| } |
| |
| .sidebar::-webkit-scrollbar-thumb, |
| .main-content::-webkit-scrollbar-thumb { |
| background: #d32f2f; |
| border-radius: 3px; |
| } |
| |
| .sidebar::-webkit-scrollbar-thumb:hover, |
| .main-content::-webkit-scrollbar-thumb:hover { |
| background: #b71c1c; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .sidebar { |
| width: 140px; |
| padding: 15px 0; |
| } |
| |
| .logo { |
| padding: 0 12px 15px; |
| } |
| |
| .logo h1 { |
| font-size: 18px; |
| } |
| |
| .nav-section { |
| padding: 0 12px; |
| margin-bottom: 20px; |
| } |
| |
| .nav-section h3 { |
| font-size: 15px; |
| } |
| |
| .nav-item { |
| padding: 8px 10px; |
| font-size: 15px; |
| } |
| |
| .main-content { |
| padding: 15px; |
| padding-bottom: 100px; |
| } |
| |
| .content-section h2 { |
| font-size: 18px; |
| } |
| |
| .station-item { |
| padding: 12px 15px; |
| } |
| |
| .station-name { |
| font-size: 15px; |
| } |
| |
| .live-badge { |
| font-size: 12px; |
| padding: 3px 8px; |
| } |
| |
| .player { |
| padding: 0 15px; |
| gap: 15px; |
| height: 85px; |
| } |
| |
| .current-station { |
| font-size: 15px; |
| } |
| |
| .current-song { |
| font-size: 13px; |
| } |
| |
| .player-time { |
| font-size: 13px; |
| } |
| |
| .play-btn { |
| width: 55px; |
| height: 55px; |
| font-size: 18px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .sidebar { |
| width: 130px; |
| } |
| |
| .logo h1 { |
| font-size: 17px; |
| } |
| |
| .nav-section h3 { |
| font-size: 14px; |
| } |
| |
| .nav-item { |
| font-size: 14px; |
| padding: 7px 9px; |
| } |
| |
| .station-name { |
| font-size: 14px; |
| } |
| |
| .live-badge { |
| font-size: 11px; |
| padding: 2px 7px; |
| } |
| |
| .player { |
| height: 80px; |
| padding: 0 12px; |
| } |
| |
| .play-btn { |
| width: 50px; |
| height: 50px; |
| font-size: 16px; |
| } |
| |
| .current-station { |
| font-size: 14px; |
| } |
| |
| .current-song { |
| font-size: 12px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| * { |
| max-width: 100vw !important; |
| box-sizing: border-box !important; |
| } |
| |
| .container { |
| display: flex !important; |
| width: 100vw !important; |
| max-width: 100vw !important; |
| overflow-x: hidden !important; |
| } |
| |
| .sidebar { |
| width: 120px !important; |
| flex: 0 0 120px !important; |
| min-width: 120px !important; |
| max-width: 120px !important; |
| } |
| |
| .main-content { |
| flex: 1 !important; |
| width: calc(100vw - 120px) !important; |
| min-width: 0 !important; |
| padding: 12px !important; |
| padding-bottom: 100px !important; |
| overflow-x: hidden !important; |
| } |
| |
| .content-section, |
| .station-list, |
| .station-item { |
| width: 100% !important; |
| max-width: 100% !important; |
| margin-right: 0 !important; |
| padding-right: 0 !important; |
| } |
| } |
| </style> |
| <style type="text/css" id="ulaa-puvi-font"> |
| @font-face { |
| font-family: 'Zoho-Puvi-Regular'; |
| src: url('chrome-extension://licikmkfpnkmbeenopoiknbfpkkfbfkj/fonts/Puvi/Zoho-Puvi-Regular.woff') format('woff2'); |
| } |
| </style><input type="hidden" id="_o_dbjbempljhcmhlfpfacalomonjpalpko" data-inspect-config="7"><script type="text/javascript" src="chrome-extension://dbjbempljhcmhlfpfacalomonjpalpko/scripts/inspector.js"></script><style data-id="immersive-translate-input-injected-css">.immersive-translate-input { |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| bottom: 0; |
| z-index: 2147483647; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| .immersive-translate-attach-loading::after { |
| content: " "; |
| |
| --loading-color: #f78fb6; |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| display: block; |
| margin: 12px auto; |
| position: relative; |
| color: white; |
| left: -100px; |
| box-sizing: border-box; |
| animation: immersiveTranslateShadowRolling 1.5s linear infinite; |
| |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-2000%, -50%); |
| z-index: 100; |
| } |
| |
| .immersive-translate-loading-spinner { |
| vertical-align: middle !important; |
| width: 10px !important; |
| height: 10px !important; |
| display: inline-block !important; |
| margin: 0 4px !important; |
| border: 2px rgba(221, 244, 255, 0.6) solid !important; |
| border-top: 2px rgba(0, 0, 0, 0.375) solid !important; |
| border-left: 2px rgba(0, 0, 0, 0.375) solid !important; |
| border-radius: 50% !important; |
| padding: 0 !important; |
| -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important; |
| animation: immersive-translate-loading-animation 0.6s infinite linear !important; |
| } |
| |
| @-webkit-keyframes immersive-translate-loading-animation { |
| from { |
| -webkit-transform: rotate(0deg); |
| } |
| |
| to { |
| -webkit-transform: rotate(359deg); |
| } |
| } |
| |
| @keyframes immersive-translate-loading-animation { |
| from { |
| transform: rotate(0deg); |
| } |
| |
| to { |
| transform: rotate(359deg); |
| } |
| } |
| |
| .immersive-translate-input-loading { |
| --loading-color: #f78fb6; |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| display: block; |
| margin: 12px auto; |
| position: relative; |
| color: white; |
| left: -100px; |
| box-sizing: border-box; |
| animation: immersiveTranslateShadowRolling 1.5s linear infinite; |
| } |
| |
| @keyframes immersiveTranslateShadowRolling { |
| 0% { |
| box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), |
| 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); |
| } |
| |
| 12% { |
| box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0), |
| 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); |
| } |
| |
| 25% { |
| box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color), |
| 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); |
| } |
| |
| 36% { |
| box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color), |
| 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0); |
| } |
| |
| 50% { |
| box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color), |
| 110px 0 var(--loading-color), 100px 0 var(--loading-color); |
| } |
| |
| 62% { |
| box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color), |
| 120px 0 var(--loading-color), 110px 0 var(--loading-color); |
| } |
| |
| 75% { |
| box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), |
| 130px 0 var(--loading-color), 120px 0 var(--loading-color); |
| } |
| |
| 87% { |
| box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), |
| 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color); |
| } |
| |
| 100% { |
| box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), |
| 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); |
| } |
| } |
| |
| .immersive-translate-toast { |
| display: flex; |
| position: fixed; |
| z-index: 2147483647; |
| left: 0; |
| right: 0; |
| top: 1%; |
| width: fit-content; |
| padding: 12px 20px; |
| margin: auto; |
| overflow: auto; |
| background: #fef6f9; |
| box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06); |
| font-size: 15px; |
| border-radius: 8px; |
| color: #333; |
| } |
| |
| .immersive-translate-toast-content { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| } |
| |
| .immersive-translate-toast-hidden { |
| margin: 0 20px 0 72px; |
| text-decoration: underline; |
| cursor: pointer; |
| } |
| |
| .immersive-translate-toast-close { |
| color: #666666; |
| font-size: 20px; |
| font-weight: bold; |
| padding: 0 10px; |
| cursor: pointer; |
| } |
| |
| @media screen and (max-width: 768px) { |
| .immersive-translate-toast { |
| top: 0; |
| padding: 12px 0px 0 10px; |
| } |
| .immersive-translate-toast-content { |
| flex-direction: column; |
| text-align: center; |
| } |
| .immersive-translate-toast-hidden { |
| margin: 10px auto; |
| } |
| } |
| |
| .immersive-translate-dialog { |
| position: fixed; |
| z-index: 2147483647; |
| left: 0; |
| top: 0; |
| display: flex; |
| width: 300px; |
| flex-direction: column; |
| align-items: center; |
| font-size: 15px; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| margin: auto; |
| height: fit-content; |
| border-radius: 20px; |
| background-color: #fff; |
| } |
| |
| .immersive-translate-modal { |
| display: none; |
| position: fixed; |
| z-index: 2147483647; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| background-color: rgb(0, 0, 0); |
| background-color: rgba(0, 0, 0, 0.4); |
| font-size: 15px; |
| } |
| |
| .immersive-translate-modal-content { |
| background-color: #fefefe; |
| margin: 10% auto; |
| padding: 40px 24px 24px; |
| border-radius: 12px; |
| width: 350px; |
| font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", |
| "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", |
| "Segoe UI Symbol", "Noto Color Emoji"; |
| position: relative; |
| } |
| |
| @media screen and (max-width: 768px) { |
| .immersive-translate-modal-content { |
| margin: 25% auto !important; |
| } |
| } |
| |
| @media screen and (max-width: 480px) { |
| .immersive-translate-modal-content { |
| width: 80vw !important; |
| margin: 20vh auto !important; |
| padding: 20px 12px 12px !important; |
| } |
| |
| .immersive-translate-modal-title { |
| font-size: 14px !important; |
| } |
| |
| .immersive-translate-modal-body { |
| font-size: 13px !important; |
| max-height: 60vh !important; |
| } |
| |
| .immersive-translate-btn { |
| font-size: 13px !important; |
| padding: 8px 16px !important; |
| margin: 0 4px !important; |
| } |
| |
| .immersive-translate-modal-footer { |
| gap: 6px !important; |
| margin-top: 16px !important; |
| } |
| } |
| |
| .immersive-translate-modal .immersive-translate-modal-content-in-input { |
| max-width: 500px; |
| } |
| .immersive-translate-modal-content-in-input .immersive-translate-modal-body { |
| text-align: left; |
| max-height: unset; |
| } |
| |
| .immersive-translate-modal-title { |
| text-align: center; |
| font-size: 16px; |
| font-weight: 700; |
| color: #333333; |
| } |
| |
| .immersive-translate-modal-body { |
| text-align: center; |
| font-size: 14px; |
| font-weight: 400; |
| color: #333333; |
| margin-top: 24px; |
| word-break: break-all; |
| } |
| |
| @media screen and (max-width: 768px) { |
| .immersive-translate-modal-body { |
| max-height: 250px; |
| overflow-y: auto; |
| } |
| } |
| |
| .immersive-translate-close { |
| color: #666666; |
| position: absolute; |
| right: 16px; |
| top: 16px; |
| font-size: 20px; |
| font-weight: bold; |
| } |
| |
| .immersive-translate-close:hover, |
| .immersive-translate-close:focus { |
| text-decoration: none; |
| cursor: pointer; |
| } |
| |
| .immersive-translate-modal-footer { |
| display: flex; |
| justify-content: center; |
| flex-wrap: wrap; |
| margin-top: 24px; |
| } |
| |
| .immersive-translate-btn { |
| width: fit-content; |
| color: #fff; |
| background-color: #ea4c89; |
| border: none; |
| font-size: 14px; |
| margin: 0 8px; |
| padding: 9px 30px; |
| border-radius: 5px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: background-color 0.3s ease; |
| } |
| |
| .immersive-translate-btn-container { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| } |
| |
| .immersive-translate-btn:hover { |
| background-color: #f082ac; |
| } |
| .immersive-translate-btn:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| } |
| .immersive-translate-btn:disabled:hover { |
| background-color: #ea4c89; |
| } |
| |
| .immersive-translate-link-btn { |
| background-color: transparent; |
| color: #ea4c89; |
| border: none; |
| cursor: pointer; |
| height: 30px; |
| line-height: 30px; |
| } |
| |
| .immersive-translate-cancel-btn { |
| |
| background-color: rgb(89, 107, 120); |
| } |
| |
| .immersive-translate-cancel-btn:hover { |
| background-color: hsl(205, 20%, 32%); |
| } |
| |
| .immersive-translate-action-btn { |
| background-color: transparent; |
| color: #ea4c89; |
| border: 1px solid #ea4c89; |
| } |
| |
| .immersive-translate-btn svg { |
| margin-right: 5px; |
| } |
| |
| .immersive-translate-link { |
| cursor: pointer; |
| user-select: none; |
| -webkit-user-drag: none; |
| text-decoration: none; |
| color: #ea4c89; |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); |
| } |
| |
| .immersive-translate-primary-link { |
| cursor: pointer; |
| user-select: none; |
| -webkit-user-drag: none; |
| text-decoration: none; |
| color: #ea4c89; |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); |
| } |
| |
| .immersive-translate-modal input[type="radio"] { |
| margin: 0 6px; |
| cursor: pointer; |
| } |
| |
| .immersive-translate-modal label { |
| cursor: pointer; |
| } |
| |
| .immersive-translate-close-action { |
| position: absolute; |
| top: 2px; |
| right: 0px; |
| cursor: pointer; |
| } |
| |
| .imt-image-status { |
| background-color: rgba(0, 0, 0, 0.5) !important; |
| display: flex !important; |
| flex-direction: column !important; |
| align-items: center !important; |
| justify-content: center !important; |
| border-radius: 16px !important; |
| } |
| .imt-image-status img, |
| .imt-image-status svg, |
| .imt-img-loading { |
| width: 28px !important; |
| height: 28px !important; |
| margin: 0 0 8px 0 !important; |
| min-height: 28px !important; |
| min-width: 28px !important; |
| position: relative !important; |
| } |
| .imt-img-loading { |
| background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII="); |
| background-size: 28px 28px; |
| animation: image-loading-rotate 1s linear infinite !important; |
| } |
| |
| .imt-image-status span { |
| color: var(--bg-2, #fff) !important; |
| font-size: 14px !important; |
| line-height: 14px !important; |
| font-weight: 500 !important; |
| font-family: "PingFang SC", Arial, sans-serif !important; |
| } |
| |
| .imt-primary-button { |
| display: flex; |
| padding: 12px 80px; |
| justify-content: center; |
| align-items: center; |
| gap: 8px; |
| border-radius: 8px; |
| background: #ea4c89; |
| color: #fff; |
| font-size: 16px; |
| font-style: normal; |
| font-weight: 700; |
| line-height: 24px; |
| border: none; |
| cursor: pointer; |
| } |
| |
| .imt-retry-text { |
| color: #999; |
| text-align: center; |
| font-size: 14px; |
| font-style: normal; |
| font-weight: 400; |
| line-height: 21px; |
| cursor: pointer; |
| } |
| |
| .imt-action-container { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| |
| .imt-modal-content-text { |
| text-align: left; |
| color: #333; |
| font-size: 16px; |
| font-weight: 400; |
| line-height: 24px; |
| } |
| |
| @keyframes image-loading-rotate { |
| from { |
| transform: rotate(360deg); |
| } |
| to { |
| transform: rotate(0deg); |
| } |
| } |
| |
| .imt-linear-gradient-text { |
| background: linear-gradient(90deg, #00a6ff 0%, #c369ff 52.4%, #ff4590 100%); |
| background-clip: text; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .imt-flex-center { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .imt-linear-black-btn { |
| border-radius: 50px; |
| background: linear-gradient(66deg, #222 19%, #696969 94.25%); |
| height: 48px; |
| width: 100%; |
| color: #fff; |
| font-size: 16px; |
| font-weight: 700; |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| justify-content: center; |
| } |
| </style></head> |
| <div id="readview_extension"><template shadowrootmode="open"><style data-rc-order="prependQueue" data-rc-priority="-999" data-css-hash="lpotzw" data-token-hash="96e442">:where(.css-dzk82i) a{color:#1677ff;text-decoration:none;background-color:transparent;outline:none;cursor:pointer;transition:color 0.3s;-webkit-text-decoration-skip:objects;}:where(.css-dzk82i) a:hover{color:#69b1ff;}:where(.css-dzk82i) a:active{color:#0958d9;}:where(.css-dzk82i) a:active,:where(.css-dzk82i) a:hover{text-decoration:none;outline:0;}:where(.css-dzk82i) a:focus{text-decoration:none;outline:0;}:where(.css-dzk82i) a[disabled]{color:rgba(0, 0, 0, 0.25);cursor:not-allowed;}</style><style data-rc-order="prependQueue" data-rc-priority="-999" data-css-hash="hdihi4" data-token-hash="96e442">:where(.css-dzk82i).ant-drawer{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-dzk82i).ant-drawer::before,:where(.css-dzk82i).ant-drawer::after{box-sizing:border-box;}:where(.css-dzk82i).ant-drawer [class^="ant-drawer"],:where(.css-dzk82i).ant-drawer [class*=" ant-drawer"]{box-sizing:border-box;}:where(.css-dzk82i).ant-drawer [class^="ant-drawer"]::before,:where(.css-dzk82i).ant-drawer [class*=" ant-drawer"]::before,:where(.css-dzk82i).ant-drawer [class^="ant-drawer"]::after,:where(.css-dzk82i).ant-drawer [class*=" ant-drawer"]::after{box-sizing:border-box;}:where(.css-dzk82i).ant-drawer{position:fixed;inset:0;z-index:1000;pointer-events:none;}:where(.css-dzk82i).ant-drawer-pure{position:relative;background:#ffffff;display:flex;flex-direction:column;}:where(.css-dzk82i).ant-drawer-pure.ant-drawer-left{box-shadow:6px 0 16px 0 rgba(0, 0, 0, 0.08),3px 0 6px -4px rgba(0, 0, 0, 0.12),9px 0 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-pure.ant-drawer-right{box-shadow:-6px 0 16px 0 rgba(0, 0, 0, 0.08),-3px 0 6px -4px rgba(0, 0, 0, 0.12),-9px 0 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-pure.ant-drawer-top{box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-pure.ant-drawer-bottom{box-shadow:0 -6px 16px 0 rgba(0, 0, 0, 0.08),0 -3px 6px -4px rgba(0, 0, 0, 0.12),0 -9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-inline{position:absolute;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask{position:absolute;inset:0;z-index:1000;background:rgba(0, 0, 0, 0.45);pointer-events:auto;}:where(.css-dzk82i).ant-drawer .ant-drawer-content-wrapper{position:absolute;z-index:1000;max-width:100vw;transition:all 0.3s;}:where(.css-dzk82i).ant-drawer .ant-drawer-content-wrapper-hidden{display:none;}:where(.css-dzk82i).ant-drawer-left>.ant-drawer-content-wrapper{top:0;bottom:0;left:0;box-shadow:6px 0 16px 0 rgba(0, 0, 0, 0.08),3px 0 6px -4px rgba(0, 0, 0, 0.12),9px 0 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-right>.ant-drawer-content-wrapper{top:0;right:0;bottom:0;box-shadow:-6px 0 16px 0 rgba(0, 0, 0, 0.08),-3px 0 6px -4px rgba(0, 0, 0, 0.12),-9px 0 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-top>.ant-drawer-content-wrapper{top:0;inset-inline:0;box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer-bottom>.ant-drawer-content-wrapper{bottom:0;inset-inline:0;box-shadow:0 -6px 16px 0 rgba(0, 0, 0, 0.08),0 -3px 6px -4px rgba(0, 0, 0, 0.12),0 -9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-dzk82i).ant-drawer .ant-drawer-content{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;background:#ffffff;pointer-events:auto;}:where(.css-dzk82i).ant-drawer .ant-drawer-header{display:flex;flex:0;align-items:center;padding:16px 24px;font-size:16px;line-height:1.5;border-bottom:1px solid rgba(5, 5, 5, 0.06);}:where(.css-dzk82i).ant-drawer .ant-drawer-header-title{display:flex;flex:1;align-items:center;min-width:0;min-height:0;}:where(.css-dzk82i).ant-drawer .ant-drawer-extra{flex:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-close{display:inline-block;margin-inline-end:12px;color:rgba(0, 0, 0, 0.45);font-weight:600;font-size:16px;font-style:normal;line-height:1;text-align:center;text-transform:none;text-decoration:none;background:transparent;border:0;outline:0;cursor:pointer;transition:color 0.2s;text-rendering:auto;}:where(.css-dzk82i).ant-drawer .ant-drawer-close:focus,:where(.css-dzk82i).ant-drawer .ant-drawer-close:hover{color:rgba(0, 0, 0, 0.88);text-decoration:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-title{flex:1;margin:0;color:rgba(0, 0, 0, 0.88);font-weight:600;font-size:16px;line-height:1.5;}:where(.css-dzk82i).ant-drawer .ant-drawer-body{flex:1;min-width:0;min-height:0;padding:24px;overflow:auto;}:where(.css-dzk82i).ant-drawer .ant-drawer-footer{flex-shrink:0;padding:8px 16px;border-top:1px solid rgba(5, 5, 5, 0.06);}:where(.css-dzk82i).ant-drawer-rtl{direction:rtl;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-enter-start,:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-appear-start,:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-leave-start{transition:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-appear-active,:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-leave-active{transition:all 0.3s;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-appear{opacity:0;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-appear-active{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-leave{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-mask-motion-leave-active{opacity:0;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-enter-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-appear-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-leave-start{transition:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-appear-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-leave-active{transition:all 0.3s;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-appear{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-appear-active{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-leave{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-leave-active{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-appear{transform:translateX(-100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-appear-active{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-leave{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-left-leave-active{transform:translateX(-100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-enter-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-appear-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-leave-start{transition:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-appear-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-leave-active{transition:all 0.3s;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-appear{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-appear-active{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-leave{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-leave-active{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-appear{transform:translateX(100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-appear-active{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-leave{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-right-leave-active{transform:translateX(100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-enter-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-appear-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-leave-start{transition:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-appear-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-leave-active{transition:all 0.3s;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-appear{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-appear-active{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-leave{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-leave-active{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-appear{transform:translateY(-100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-appear-active{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-leave{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-top-leave-active{transform:translateY(-100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-enter-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-appear-start,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-leave-start{transition:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-appear-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-leave-active{transition:all 0.3s;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-appear{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-appear-active{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-leave{opacity:1;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-leave-active{opacity:0.7;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-enter,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-appear{transform:translateY(100%);}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-enter-active,:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-appear-active{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-leave{transform:none;}:where(.css-dzk82i).ant-drawer .ant-drawer-panel-motion-bottom-leave-active{transform:translateY(100%);}</style><style data-rc-order="prependQueue" data-rc-priority="-999" data-css-hash="eg18zu" data-token-hash="96e442">:where(.css-dzk82i).ant-app{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-dzk82i).ant-app::before,:where(.css-dzk82i).ant-app::after{box-sizing:border-box;}:where(.css-dzk82i).ant-app [class^="ant-app"],:where(.css-dzk82i).ant-app [class*=" ant-app"]{box-sizing:border-box;}:where(.css-dzk82i).ant-app [class^="ant-app"]::before,:where(.css-dzk82i).ant-app [class*=" ant-app"]::before,:where(.css-dzk82i).ant-app [class^="ant-app"]::after,:where(.css-dzk82i).ant-app [class*=" ant-app"]::after{box-sizing:border-box;}:where(.css-dzk82i).ant-app{color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';}</style><style data-rc-order="prependQueue" data-css-hash="e1ek34" data-token-hash="96e442">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style data-rc-order="prependQueue" data-css-hash="1hwnbt5" data-token-hash="ocvi0b">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><div><link href="chrome-extension://hjdlphplaahbjbjobdikfmaajhjpehof/contentScript_0.css" rel="stylesheet"><div class="css-dzk82i ant-app"><div class="html___1dSzn" style="display: none;"></div></div></div></template></div><body> |
| <div class="container"> |
| |
| <div class="sidebar"> |
| <div class="logo"> |
| <h1>Tony电台Radio</h1> |
| </div> |
| |
| <div class="nav-section"> |
| <ul class="nav-list"> |
| <li><a class="nav-item active" data-target="foreign-music">国际音乐台</a></li> |
| <li><a class="nav-item" data-target="chinese-music">中文音乐台</a></li> |
| <li><a class="nav-item" data-target="news-comprehensive">新闻综合台</a></li> |
| <li><a class="nav-item" data-target="huaijiu-musiclist">怀旧の音乐</a></li> |
| <li><a class="nav-item" data-target="qiche-musiclist">汽车の音乐</a></li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="main-content"> |
| |
| <div class="content-section" id="foreign-music"> |
| <h2>国际音乐台</h2> |
| <div class="station-list" id="foreign-music-list"> |
| <div class="station-item" data-url="https://funkyradio.streamingmedia.it/play.mp3"> |
| <div class="station-info"> |
| <span class="station-name">FUNKY RADIO</span> |
| <span class="live-badge">推荐</span> |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://rautemusik.stream37.radiohost.de/breakz?ref=radiobrowser-top100-clubcharts&_art=dD0xNzQxMDk5MzEwJmQ9OGNkMjIxNGVjNzFiZTFhZDhjMDk"> |
| <div class="station-info"> |
| <span class="station-name">TOP 100 CLUB CHARTS</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://rautemusik.stream25.radiohost.de/breakz?ref=radiobrowser-top100-djcharts&_art=dD0xNzQxNDgxNzY0JmQ9ZTFkMjUxNDIwNWVhYmYzMDUzNzM"> |
| <div class="station-info"> |
| <span class="station-name">TOP 100 DJ CHARTS</span> |
| <span class="live-badge">推荐</span> |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://uksoutha.streaming.broadcast.radio/ibiza-live-radio"> |
| <div class="station-info"> |
| <span class="station-name">Ibiza Live Radio</span> |
| <span class="live-badge">推荐</span> |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://cbcradiolive.akamaized.net/hls/live/2041055/ES_R2AHF/master.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CBC Music</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://28503.live.streamtheworld.com/OWR_INTERNATIONAL.mp3?gdpr=0&gdpr_consent=undefined"> |
| <div class="station-info"> |
| <span class="station-name">Tomorrowland Anthems</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://my.streamingmedia.it/listen/discofunk/play"> |
| <div class="station-info"> |
| <span class="station-name">DISCO FUNK</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://mangoradio.stream.laut.fm/mangoradio"> |
| <div class="station-info"> |
| <span class="station-name">MANGORADIO</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/smoothjazz_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM SmoothJazz</span> |
| <span class="live-badge">推荐</span> |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/acountry_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM热门乡村音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/ccountry_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM经典乡村音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/atr_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM激情热门音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/caferadio_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM咖啡轻摇音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/chilloutlounge_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM柔和电子音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/blues_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM布鲁斯蓝调</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/ajazz_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM爵士音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/circuitpride_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM现场DJ音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/top40_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM前40热门音乐</span> |
| <span class="live-badge">推荐</span> |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/top40ballads_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM流行音乐TOP40</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/kidsfm_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM低保真音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/oldschool_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM我们的RNB</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://strm112.1.fm/dubstep_mobile_mp3?aw_0_req.gdpr=true"> |
| <div class="station-info"> |
| <span class="station-name">1.FM快节奏音乐舞曲</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://radio.virginradio.co.uk/stream"> |
| <div class="station-info"> |
| <span class="station-name">Virgin Radio</span> |
| <span class="live-badge">推荐</span> |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://media-the.musicradio.com/RadioXLondon"> |
| <div class="station-info"> |
| <span class="station-name">Radio X</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://icecast-qmusicbe-cdp.triple-it.nl/qmusic.aac"> |
| <div class="station-info"> |
| <span class="station-name">Qmusic Belgium</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://streamssl2.chilltrax.com/index.html?sid=1"> |
| <div class="station-info"> |
| <span class="station-name">Chilltrax</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://media-ssl.musicradio.com/SmoothChill"> |
| <div class="station-info"> |
| <span class="station-name">Smooth Chill</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://radio1.streamserver.link/radio/8110/100chill-aac"> |
| <div class="station-info"> |
| <span class="station-name">100 Chill</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://s02.fjperezdj.com:8006/live"> |
| <div class="station-info"> |
| <span class="station-name">Loca FM Chill Out</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://pub0201.101.ru/stream/trust/mp3/128/24?"> |
| <div class="station-info"> |
| <span class="station-name">Relax FM Chillout</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://dancewave.online/dance.mp3"> |
| <div class="station-info"> |
| <span class="station-name">Dance Wave!</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://stream-uk1.radioparadise.com/aac-320"> |
| <div class="station-info"> |
| <span class="station-name">Radio Paradise (320k)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://s2.audiostream.hu/bdpstrock_320k"> |
| <div class="station-info"> |
| <span class="station-name">BDPST ROCK (320k)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://audio.mixcloud.stream/secure/hls/,1/e/2/3/81b2-c058-4dd6-bf18-55a088705c8d,1/e/2/3/81b2-c058-4dd6-bf18-55a088705c8d-192K,.m4a.urlset/index.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">DB Radio</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://stream.live.vc.bbcmedia.co.uk/bbc_world_service"> |
| <div class="station-info"> |
| <span class="station-name">BBC World Service</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://as-hls-ww.live.cf.md.bbci.co.uk/pool_01505109/live/ww/bbc_radio_one/bbc_radio_one.isml/bbc_radio_one-audio%3d96000.norewind.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">BBC RADIO 1 🚀</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://as-hls-ww-live.akamaized.net/pool_74208725/live/ww/bbc_radio_two/bbc_radio_two.isml/bbc_radio_two-audio%3d96000.norewind.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">BBC RADIO 2</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://as-hls-ww.live.cf.md.bbci.co.uk/pool_81827798/live/ww/bbc_6music/bbc_6music.isml/bbc_6music-audio%3d96000.norewind.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">BBC RADIO 6 🚀</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://stream.live.vc.bbcmedia.co.uk/bbc_world_service"> |
| <div class="station-info"> |
| <span class="station-name">BBC World Service</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://str3.openstream.co/1332?aw_0_1st.collectionid%3D4457%26stationId%3D4457%26publisherId%3D1356%26k%3D1741104127"> |
| <div class="station-info"> |
| <span class="station-name">ABC Lounge Radio</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://vip2.fastcast4u.com/proxy/sjrelax?mp=/1"> |
| <div class="station-info"> |
| <span class="station-name">Radio Relax Nice Côte d'Azur</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://kissfm.ice.infomaniak.ch/kissfm-128.mp3"> |
| <div class="station-info"> |
| <span class="station-name">Kiss FM</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://niceradio.ice.infomaniak.ch/niceradio.mp3"> |
| <div class="station-info"> |
| <span class="station-name">Nice Radio</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://radio.streemlion.com:2065/stream"> |
| <div class="station-info"> |
| <span class="station-name">BBR HIT 40 100.3 Mhz</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://radio.streemlion.com:1665/stream"> |
| <div class="station-info"> |
| <span class="station-name">Beautiful Music 101</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://icecast.walmradio.com:8443/classic"> |
| <div class="station-info"> |
| <span class="station-name">Classic Vinyl HD 经典黑胶唱片HD</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://epdop.hostingradio.ru:8033//epparty128.mp3"> |
| <div class="station-info"> |
| <span class="station-name">Europa Plus 派对</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://streaming.funklust.de:8443/mp3"> |
| <div class="station-info"> |
| <span class="station-name">FunkLust</span> |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="content-section" id="chinese-music"> |
| <h2>中文音乐台</h2> |
| <div class="station-list" id="chinese-music-list"> |
| <div class="station-item" data-url="https://sk.cri.cn/887.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CRI HitFM88.7劲曲调频</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/5021381/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">959年代音乐怀旧好声音</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/332/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">北京音乐广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20211619/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">1079音乐有话说</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20211620/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">流行音乐广播999正青春</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/273/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">上海流行音乐LoveRadio</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/274/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">上海动感101</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/5022341/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">上海沸点100音乐广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/4866/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">浙江音乐调频</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/15318146/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">杭州FM90.7</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://sk.cri.cn/887.m3u8?key=7276f7c9b9dd6acbbfea0896856a8000&time=1760675701"> |
| <div class="station-info"> |
| <span class="station-name">HITFM国际流行音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp.qingting.fm/live/5022038/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">怀旧金曲</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp.qtfm.cn/live/5022038/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">年代965</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500149/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">两广之声音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/4804/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">怀集音乐之声</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/4915/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">清晨音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500150/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">顺德音乐之声</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/5022107/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">动听音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20210755/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">星河音乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/15318341/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">AsiaFM HD音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/5022405/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">AsiaFM 亚洲音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/5021912/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">AsiaFM 亚洲经典台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500208/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">AsiaFM 亚洲热歌台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://n14.rcs.revma.com/044q61ha7a0uv?rj-ttl=5&rj-tok=AAABlWH5pyMAzOwdxjZ9106IxA"> |
| <div class="station-info"> |
| <span class="station-name">Mradio 全国广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://phate.io/listen.ogg"> |
| <div class="station-info"> |
| <span class="station-name">飞特电台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://stream.rcs.revma.com/ks4vsmg3qtzuv"> |
| <div class="station-info"> |
| <span class="station-name">中广音乐网</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://stream.rcs.revma.com/aw9uqyxy2tzuv"> |
| <div class="station-info"> |
| <span class="station-name">中广流行网</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20207761/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">80后音悦台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20207760/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">90后潮流音悦台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500187/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">云梦音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500163/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">湾区音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20207762/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">河南经典FM</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20207763/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">民谣音乐台</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp.qingting.fm/live/5021381/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">蜻蜓FM每日歌曲</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://ihzlh.linker.cc/ihzlh/zjnb_ts02_986.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">宁波音乐广播</span> |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="content-section" id="news-comprehensive"> |
| <h2>新闻综合台</h2> |
| <div class="station-list" id="news-comprehensive-list"> |
| <div class="station-item" data-url="https://lhttp.qtfm.cn/live/15318317/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">中国之声</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://piccpndali.v.myalicdn.com/audio/cctv13_2.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CCTV13新闻频道</span> |
| |
| <span class="live-badge">伴音</span> |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://playtv-live.ifeng.com/live/06OLEEWQKN4_audio.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">凤凰卫视资讯台</span> |
| |
| <span class="live-badge">伴音</span> |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://sk.cri.cn/905.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CRI环球资讯广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://sk.cri.cn/nhzs.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CRI南海之声广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://sk.cri.cn/915.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CRI 轻松调频CRI EZFM</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://sk.cri.cn/hyhq.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CRI华语环球广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://sk.cri.cn/hxfh.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">CRI世界华声 华语环球方言广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://19183.live.streamtheworld.com/CAPITAL958FM_PREM.aac"> |
| <div class="station-info"> |
| <span class="station-name">CAPITAL 958 城市频道</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://rthkradio1-live.akamaized.net/hls/live/2035313/radio1/index_64_a.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">香港电台第一台FM92.6 RTHK1</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://rthkradio2-live.akamaized.net/hls/live/2040078/radio2/index_64_a.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">香港电台第二台FM94.8 RTHK2</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://rthkradio5-live.akamaized.net/hls/live/2040081/radio5/index_64_a.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">香港电台第五台AM783 RTHK5</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://rthkradiopth-live.akamaized.net/hls/live/2040082/radiopth/index_64_a.m3u8"> |
| <div class="station-info"> |
| <span class="station-name">香港电台第六台RTHK6普通话频道</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/339/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">北京新闻广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/333/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">北京文艺广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/270/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">上海新闻广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/276/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">第一财经广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/4518/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">浙江之声</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/1134/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">杭州之声</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://stream.rcs.revma.com/78fm9wyy2tzuv"> |
| <div class="station-info"> |
| <span class="station-name">中广新闻网</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500172/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">国际新闻</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/1811/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">江西交通广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/5021665/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">江西财经广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/1802/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">江西音乐广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/1809/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">江西新闻广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20133/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">江西旅游广播</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lhttp-hw.qtfm.cn/live/20500092/64k.mp3"> |
| <div class="station-info"> |
| <span class="station-name">江西潮台969</span> |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="content-section" id="huaijiu-musiclist"> |
| <h2>怀旧の音乐</h2> |
| <div class="station-list" id="huaijiu-musiclist-list"> |
| <div class="station-item" data-url="https://CoolTV.com/tbhj.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 欢迎台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/120439.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王菲 - 世界赠予我的</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/119381.mp3"> |
| <div class="station-info"> |
| <span class="station-name">唐汉霄 - 再见深海</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=524148277"> |
| <div class="station-info"> |
| <span class="station-name">上海彩虹室内合唱团 - 彩虹</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/119260.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王OK/洪佩瑜 - 这条小鱼在乎</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=546723482"> |
| <div class="station-info"> |
| <span class="station-name">尼格买提·热合曼 - 我从哪里来</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1410191814"> |
| <div class="station-info"> |
| <span class="station-name">尼格买提·热合曼/好妹妹乐队 - 你好，生活</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116935.mp3"> |
| <div class="station-info"> |
| <span class="station-name">那英 - 山水间的家</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/223477/2024/10/16/437612228cbe8cda338380b86f888323.mp3"> |
| <div class="station-info"> |
| <span class="station-name">李霄云/黄英 - 不要慌太阳下山有月光</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/112033.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周杰伦 - 稻香</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1882373806"> |
| <div class="station-info"> |
| <span class="station-name">陈红 - 阳光总在风雨后</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=110771"> |
| <div class="station-info"> |
| <span class="station-name">卢冠廷/岑宁儿 - 一生所爱</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2017129217"> |
| <div class="station-info"> |
| <span class="station-name">水木年华 - 一生有你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2018409663"> |
| <div class="station-info"> |
| <span class="station-name">张小斐 - 逆光</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=139392"> |
| <div class="station-info"> |
| <span class="station-name">朴树 - 那些花儿（吉他版）</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224204/2024/11/01/c6e9f5bd04dfe3463cf07019546c3b97.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周华健 - 有没有一首歌会让你想起我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/142851/2023/04/03/d012199c0710fb59eae5b13037adf7c9.mp3"> |
| <div class="station-info"> |
| <span class="station-name">雷佳 - 人世间</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2142833817"> |
| <div class="station-info"> |
| <span class="station-name">童声 - 小美满</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/115312.mp3"> |
| <div class="station-info"> |
| <span class="station-name">朴树 - 平凡之路</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2151810343"> |
| <div class="station-info"> |
| <span class="station-name">许冠杰/张国荣 - 沉默是金</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=106368"> |
| <div class="station-info"> |
| <span class="station-name">李玟 - 想你的365天</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/115715.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张雨生 - 大海</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116153.mp3"> |
| <div class="station-info"> |
| <span class="station-name">陶喆 - 小镇姑娘</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=211015"> |
| <div class="station-info"> |
| <span class="station-name">陈慧娴 - 月半小夜曲</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=387826"> |
| <div class="station-info"> |
| <span class="station-name">小虎队 - 星光依旧灿烂</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=254829"> |
| <div class="station-info"> |
| <span class="station-name">梁咏琪 - 短发</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=145644"> |
| <div class="station-info"> |
| <span class="station-name">苏有朋 - 背包</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=255667"> |
| <div class="station-info"> |
| <span class="station-name">梁咏琪 - 胆小鬼</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=114442"> |
| <div class="station-info"> |
| <span class="station-name">林志颖 - 十七岁的雨季</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/115595.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张艾嘉 - 爱的代价</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=188071"> |
| <div class="station-info"> |
| <span class="station-name">张学友 - 一路上有你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/142719/2023/04/03/f8e80a322bf2a6780b001d5e2ec66950.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张惠妹 - 我可以抱你吗</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/113565.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周杰伦 - 晴天</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/107931.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张靓颖 - 画心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/113712.mp3"> |
| <div class="station-info"> |
| <span class="station-name">李宗盛 - 山丘</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=334940"> |
| <div class="station-info"> |
| <span class="station-name">周冰倩 - 真的好想你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/105352.mp3"> |
| <div class="station-info"> |
| <span class="station-name">姜育恒 - 再回首</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1948780823"> |
| <div class="station-info"> |
| <span class="station-name">杨钰莹 - 我不想说</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=25641871"> |
| <div class="station-info"> |
| <span class="station-name">张信哲 - 爱如潮水</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2061559576"> |
| <div class="station-info"> |
| <span class="station-name">陈百强 - 偏偏喜欢你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/109989.mp3"> |
| <div class="station-info"> |
| <span class="station-name">韩宝仪 - 粉红色的回忆</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1985130160"> |
| <div class="station-info"> |
| <span class="station-name">林淑容 - 昨夜星辰</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5273652"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 童年</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=569905056"> |
| <div class="station-info"> |
| <span class="station-name">黄莺莺 - 哭砂</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/65406/2022/12/14/00fed6f818df961b00757aa65ba76cf7.mp3"> |
| <div class="station-info"> |
| <span class="station-name">苏芮 - 一样的月光</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1984847940"> |
| <div class="station-info"> |
| <span class="station-name">蔡幸娟 - 星星知我心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1873326897"> |
| <div class="station-info"> |
| <span class="station-name">蔡琴 - 你的眼神</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1397507337"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 原来的我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=29746915"> |
| <div class="station-info"> |
| <span class="station-name">李茂山 - 无言的结局</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2153720087"> |
| <div class="station-info"> |
| <span class="station-name">邓丽君 - 我只在乎你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=259541"> |
| <div class="station-info"> |
| <span class="station-name">李翊君/李富兴 - 萍聚</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/215945/2024/05/23/e3485d4c99cd32f4a653e515743b57ac.mp3"> |
| <div class="station-info"> |
| <span class="station-name">郭有才 - 诺言</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/109581.mp3"> |
| <div class="station-info"> |
| <span class="station-name">赵传 - 我很丑可是我很温柔</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=281530"> |
| <div class="station-info"> |
| <span class="station-name">潘美辰 - 我想有个家</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2109099120"> |
| <div class="station-info"> |
| <span class="station-name">童安格 - 明天你是否依然爱我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2083394097"> |
| <div class="station-info"> |
| <span class="station-name">叶丽仪 - 上海滩</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/194779/2024/01/21/c593a26d0ae7b9d039fb1e06c8e2be94.mp3"> |
| <div class="station-info"> |
| <span class="station-name">罗文/甄妮 - 铁血丹心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/31358/2022/04/02/3ce1436e5640ae91920de94166974f01.mp3"> |
| <div class="station-info"> |
| <span class="station-name">罗文/甄妮 - 世间始终你好</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=4874712"> |
| <div class="station-info"> |
| <span class="station-name">林子祥 - 男儿当自强</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=83106"> |
| <div class="station-info"> |
| <span class="station-name">费玉清 - 一剪梅</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5284585"> |
| <div class="station-info"> |
| <span class="station-name">张明敏 - 我的中国心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5277710"> |
| <div class="station-info"> |
| <span class="station-name">陈慧娴 - 人生何处不相逢</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/392/2021/02/23/9ddee35d5a30b0c95330830a06524f30.mp3"> |
| <div class="station-info"> |
| <span class="station-name">陈慧娴 - 千千阙歌</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=32689581"> |
| <div class="station-info"> |
| <span class="station-name">李克勤 - 红日</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155752/2023/07/19/7281aa520cc45c95fab43a1c950af3ee.mp3"> |
| <div class="station-info"> |
| <span class="station-name">叶蒨文 - 潇洒走一回</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/211742/2024/04/15/7fc7469bb06eeb2ed928524d9700ba07.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 明天会更好</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=4872821"> |
| <div class="station-info"> |
| <span class="station-name">罗大佑 - 光阴的故事</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/189228/2024/01/01/22f5b368f51211d40b3fa423e46cfb14.mp3"> |
| <div class="station-info"> |
| <span class="station-name">罗大佑 - 童年</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155945/2023/07/19/853c0b53844de955681d6f5b404259a9.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张惠妹 - 听海</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5261901"> |
| <div class="station-info"> |
| <span class="station-name">林忆莲 - 至少还有你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/143333/2023/04/03/6770014220d48149478f3a28c74a23e8.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王菲 - 红豆</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/142548/2023/04/02/a7bb07a8e50223a3b81f58d642297336.mp3"> |
| <div class="station-info"> |
| <span class="station-name">范晓萱 - 我要我们在一起</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116525.mp3"> |
| <div class="station-info"> |
| <span class="station-name">范晓萱 - 你的甜蜜</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=230234"> |
| <div class="station-info"> |
| <span class="station-name">范晓萱 - Rain</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/211650/2024/04/15/b00843001cbef61bc90216a5359d3668.mp3"> |
| <div class="station-info"> |
| <span class="station-name">邰正宵 - 心要让你听见</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/185972/2023/12/29/2672d9400beff93f920be0f5daf98136.mp3"> |
| <div class="station-info"> |
| <span class="station-name">邰正宵 - 找一个字代替</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155205/2023/07/19/2855151fe67517325037b8ae8b7b5a73.mp3"> |
| <div class="station-info"> |
| <span class="station-name">邰正宵 - 一千零一夜</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=35314170"> |
| <div class="station-info"> |
| <span class="station-name">孙悦/邰正宵 - 好人好梦</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=151146"> |
| <div class="station-info"> |
| <span class="station-name">邰正宵 - 千纸鹤</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5258674"> |
| <div class="station-info"> |
| <span class="station-name">邰正宵 - 九佰九拾九朵玫瑰</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=307342"> |
| <div class="station-info"> |
| <span class="station-name">许茹芸/动力火车/李洁/齐秦/熊天平 - 蜗牛</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=351444"> |
| <div class="station-info"> |
| <span class="station-name">动力火车 - 无情的情书</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/12861/2022/01/30/1f91013c5bf50aad7c3de6ae94ec71b7.mp3"> |
| <div class="station-info"> |
| <span class="station-name">动力火车 - 明天的明天的明天</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/185710/2023/12/29/604760d0fd2f24abadc90f7ee28c7598.mp3"> |
| <div class="station-info"> |
| <span class="station-name">动力火车 - 背叛情歌</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/191859/2024/01/06/eecd1c203ee5cca211374a547129d0b2.mp3"> |
| <div class="station-info"> |
| <span class="station-name">动力火车 - 那就这样吧</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/209726/2024/04/11/3913db8d8f152ece30631c17bba71cd0.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周华健 - 花心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/221808/2024/07/18/1cfa5e62464b2b1308e7104c1780e407.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周华健 - 忘忧草</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/143152/2023/04/03/71f996fff17b8a32cb7b95a3ffd93688.mp3"> |
| <div class="station-info"> |
| <span class="station-name">孟庭苇 - 风中有朵雨做的云</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/212869/2024/04/24/3a7d2aca27c43a8207f23955a4d90337.mp3"> |
| <div class="station-info"> |
| <span class="station-name">孟庭苇 - 羞答答的玫瑰静悄悄地开</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=276709"> |
| <div class="station-info"> |
| <span class="station-name">孟庭苇 - 野百合也有春天</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/32023/2022/04/05/95e8a5d3f6d1c42e52b9add94c2efa8f.mp3"> |
| <div class="station-info"> |
| <span class="station-name">孟庭苇 - 冬季到台北来看雨</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/194088/2024/01/13/a23b27e9e0793c711c5b4ca187ab1198.mp3"> |
| <div class="station-info"> |
| <span class="station-name">吕方 - 朋友别哭</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/31126/2022/04/01/5f6f88b1b98661987b3d9b3ff64201eb.mp3"> |
| <div class="station-info"> |
| <span class="station-name">吕方 - 老情歌</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/31115/2022/04/01/1855eba9db5231b4763c5d9c8fac4e07.mp3"> |
| <div class="station-info"> |
| <span class="station-name">吕方 - 多爱你一天</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/194538/2024/01/18/78d66a529e36acdadd3c0286c9a73755.mp3"> |
| <div class="station-info"> |
| <span class="station-name">梅艳芳 - 女人花</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/12444/2022/01/28/79d0ec0efc88853b16b51c3cfc597b19.mp3"> |
| <div class="station-info"> |
| <span class="station-name">陈淑桦 - 梦醒时分</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/25351/2022/03/05/26cbb894d71a58e4cb7489b06fdadeb4.mp3"> |
| <div class="station-info"> |
| <span class="station-name">郑智化 - 星星点灯</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/28601/2022/03/21/be333654a4a79845ff43cdbcd939cafd.mp3"> |
| <div class="station-info"> |
| <span class="station-name">邝美云 - 最浪漫的事</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224440/2024/11/08/bd34e57f71e47ad71b6aed668bcdd5b4.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 世界第一等</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224450/2024/11/08/1be0605d04ab5c24bee2f937e3b4af8e.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 谢谢你的爱</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224419/2024/11/08/f4de9184bd03deb669bc1a12f59de5ab.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 一起走过的日子</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224424/2024/11/08/b88a6c796185cf33972caef9a53f53e5.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 男人哭吧哭吧不是罪</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224425/2024/11/08/3caa638c1ce55724ca890bf84b905925.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 来生缘</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224422/2024/11/08/d9a518f581d35c5818950435c85c4c7b.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 开心马骝</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=284245"> |
| <div class="station-info"> |
| <span class="station-name">千百惠 - 走过咖啡屋</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/186198/2023/12/29/bab129de501b877f2200e5d7d14a86e8.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王杰 - 一场游戏一场梦</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/191792/2024/01/05/d070600e1ca7fb0f77191c0e111a750c.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王杰 - 安妮</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155325/2023/07/19/47ac2a2cd01b0e28e14a6052dfb170a3.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王杰 - 伤心1999</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155599/2023/07/19/a26df9dd0dbe03597bcf476991eacfe3.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王杰 - 英雄泪</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/192035/2024/01/06/62c8c86b68eba06a2440d779a7a875e9.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王杰 - 忘了你忘了我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/142718/2023/04/03/1e0c72a57ac530d4641913e18aaf82e7.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周杰伦 - 七里香</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155836/2023/07/19/368411802160f03f096e298639326ec5.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张栋梁 - 当你孤单你会想起谁</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=30841974"> |
| <div class="station-info"> |
| <span class="station-name">欧得洋 - 孤单北半球</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5255640"> |
| <div class="station-info"> |
| <span class="station-name">周传雄 - 黄昏</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/9712/2021/12/25/421664b0dbbe1e17b0a99d9f4e1d5921.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张韶涵 - 隐形的翅膀</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/196585/2024/02/04/00fcf7bdd02971428687915515b9a4e0.mp3"> |
| <div class="station-info"> |
| <span class="station-name">郑少秋 - 笑看风云</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/39997/2022/05/31/4025c43f74bd6b12cfaf848f65cbbdba.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王心凌 - 爱你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116789.mp3"> |
| <div class="station-info"> |
| <span class="station-name">黑撒乐队 - 校花和流川枫live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/221848/2024/07/18/4a144846706ef67361e4987ceb201d75.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周传雄 - 青花</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/221754/2024/07/18/dcbfb9117865583b5c1566edba8763d0.mp3"> |
| <div class="station-info"> |
| <span class="station-name">伍佰 - 突然的自我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/143601/2023/04/03/13cba3b98cce88242212ca4f1fbabb03.mp3"> |
| <div class="station-info"> |
| <span class="station-name">许冠杰 - 浪子心声</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=423406145"> |
| <div class="station-info"> |
| <span class="station-name">张信哲 - 过火</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/218584/2024/06/15/53aab78fb9aa2f3619c469d3dd7fa771.mp3"> |
| <div class="station-info"> |
| <span class="station-name">陶晶莹 - 太委屈</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/30185/2022/03/28/b248b23c9ce58fc14147cc5588ec5cb6.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘若英 - 后来</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/106803.mp3"> |
| <div class="station-info"> |
| <span class="station-name">梁静茹 - 勇气</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/109005.mp3"> |
| <div class="station-info"> |
| <span class="station-name">光良 - 约定</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/583/2021/02/25/497f9230c40c7368556efd2ec5e2e4a0.mp3"> |
| <div class="station-info"> |
| <span class="station-name">光良 - 童话</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/189278/2024/01/01/2a792c01b715e32c6c61ac97a38c59d1.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周蕙 - 约定</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155605/2023/07/19/0ec23dd5bdf900ca12692859c5a17e5a.mp3"> |
| <div class="station-info"> |
| <span class="station-name">徐怀钰 - 分飞</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/143487/2023/04/03/800a26b49b3df60835d73bcf9a03fe43.mp3"> |
| <div class="station-info"> |
| <span class="station-name">郑秀文 - 值得</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/110023.mp3"> |
| <div class="station-info"> |
| <span class="station-name">许茹芸 - 独角戏</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=229557"> |
| <div class="station-info"> |
| <span class="station-name">方季惟 - 爱情的故事</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/12358/2022/01/27/6689b5ecc273d6fbebfb30365f3ea2cb.mp3"> |
| <div class="station-info"> |
| <span class="station-name">陈明 - 等你爱我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/210079/2024/04/11/fe9bce9a5c9837a5aea56edbcd688189.mp3"> |
| <div class="station-info"> |
| <span class="station-name">何静 - 月亮偷着哭</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/185973/2023/12/29/925bd14fc06ccb9b5338e285038f1ab8.mp3"> |
| <div class="station-info"> |
| <span class="station-name">裘海正 - 爱我的人和我爱的人</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=281072"> |
| <div class="station-info"> |
| <span class="station-name">欧阳菲菲 - 感恩的心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=375762"> |
| <div class="station-info"> |
| <span class="station-name">S.H.E - SuperStar</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/210540/2024/04/12/b0b45361e5028c189750ca1ffd10789f.mp3"> |
| <div class="station-info"> |
| <span class="station-name">田馥甄 - 小幸运</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/41111/2022/08/27/9227293bfb34be6e0be3822d97482a6a.mp3"> |
| <div class="station-info"> |
| <span class="station-name">彭佳慧 - 相见恨晚</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5264222"> |
| <div class="station-info"> |
| <span class="station-name">本多RuRu郭嘉露 - 美丽心情</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/156700/2023/08/04/1c2462b9ed1ad8eb1bc1e2826c842002.mp3"> |
| <div class="station-info"> |
| <span class="station-name">李丽芬 - 爱江山更爱美人</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1433617887"> |
| <div class="station-info"> |
| <span class="station-name">肖战/夏未年华 - 军港之夜</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1438908868"> |
| <div class="station-info"> |
| <span class="station-name">肖战/夏未年华 - 跟着感觉走</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/143335/2023/04/03/c51ae3b26d5934f3a59e488fbac05b8d.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王菲 - 如愿</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/199914/2024/02/25/8c6574cdb90f1824bc37a10715d76879.mp3"> |
| <div class="station-info"> |
| <span class="station-name">任素汐 - 枕着光的她</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1838919030"> |
| <div class="station-info"> |
| <span class="station-name">任素汐 - 王招君</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1325905146"> |
| <div class="station-info"> |
| <span class="station-name">任素汐 - 胡广生</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2620872938"> |
| <div class="station-info"> |
| <span class="station-name">任素汐 - 莫怕莫怕</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2016504730"> |
| <div class="station-info"> |
| <span class="station-name">周深 - 花开忘忧</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117506.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 我爱你中国</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117507.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 大中国</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117508.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - AMANI</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117509.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 后来</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117510.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 勇气</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117511.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 记得</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117512.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 明天会更好</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117513.mp3"> |
| <div class="station-info"> |
| <span class="station-name">阿兰 - 美丽的神话</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117514.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 如愿</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117518.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 海阔天空</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224979/2024/11/22/47cbd3f16a3067b5d49077676b0e0d85.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 不再犹豫</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=95410"> |
| <div class="station-info"> |
| <span class="station-name">黄安 - 新鸳鸯蝴蝶梦</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=95393"> |
| <div class="station-info"> |
| <span class="station-name">黄安 - 东南西北风</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=95385"> |
| <div class="station-info"> |
| <span class="station-name">黄安 - 样样红</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2024797493"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 雨中即景</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=119194"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 三月里的小雨</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=119409"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 外婆的澎湖湾</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=117885"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 迟到</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=119429"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 乡间的小路</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=119445"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 秋蝉</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=119248"> |
| <div class="station-info"> |
| <span class="station-name">刘文正 - 梅兰梅兰我爱你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/154992/2023/07/19/81d8a540024333eccdb4738d040bfcfa.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 夜夜夜夜</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/217868/2024/06/11/212a890bd54e7f7507d5d2c47621b1b2.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 大约在冬季</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/222892/2024/09/23/79f3062250bf37c2f390f1415ca0ca54.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 不让我的眼泪陪我过夜</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155004/2023/07/19/a669b0e00cf1ae198e480ddff632049d.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 外面的世界</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/154988/2023/07/19/6586389ac29004aa20023858e56d0aeb.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 往事随风</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/222877/2024/09/23/1c27b3f4044282fc8e415c2d80bc6049.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 原来的我</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/154956/2023/07/19/f24c537500ebb276461b27d0dcb8077d.mp3"> |
| <div class="station-info"> |
| <span class="station-name">齐秦 - 张三的歌</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/156015/2023/07/19/48c9b841cd1cae37493378c3693ddbce.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张震岳/蔡健雅 - 思念是一种病</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/224344/2024/11/05/99e9aa9cfea84390c6e36266b004ab1c.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张震岳 - 再见</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/225045/2024/11/26/125caf7dfff0084bea925da41564fb7e.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张震岳 - 小宇</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/155992/2023/07/19/dd082dde61b7e342ff6b53702fde8c3b.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张震岳 - 爱的初体验</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=22635415"> |
| <div class="station-info"> |
| <span class="station-name">大山百合香 - 光あるもの</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118478bf9b79d2.mp3"> |
| <div class="station-info"> |
| <span class="station-name">庄心妍 - 以后的以后</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/222901/2024/09/23/41f190d322774c128b897b33fd86166e.mp3"> |
| <div class="station-info"> |
| <span class="station-name">谭咏麟 - 难舍难分</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5284516"> |
| <div class="station-info"> |
| <span class="station-name">李克勤 - 深深深</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/197314/2024/02/10/c9965ace1f3a79b8221db2c0b2d7f4a1.mp3"> |
| <div class="station-info"> |
| <span class="station-name">海来阿木/单依纯 - 不如见一面(Live 2024春晚)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/196581/2024/02/04/82a61aa690cf1dfea37860b204145f97.mp3"> |
| <div class="station-info"> |
| <span class="station-name">海来阿木 - 烟雨人间</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/218572/2024/06/15/083579f221d44bf654938c2cccc96a8f.mp3"> |
| <div class="station-info"> |
| <span class="station-name">海来阿木 - 西楼儿女</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=62307"> |
| <div class="station-info"> |
| <span class="station-name">布仁巴雅尔 - 月夜</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1993357678"> |
| <div class="station-info"> |
| <span class="station-name">额尔古纳乐队 - 鸿雁</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2108827960"> |
| <div class="station-info"> |
| <span class="station-name">韩红/黄绮珊/王心凌/谭维维/郁可唯/额尔古纳乐队 -送你一朵小红花 (live)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kumeiwp.com/wj/25467/2022/03/06/234efc18177c9ce48b1d5e0495149bd7.mp3"> |
| <div class="station-info"> |
| <span class="station-name">胡海泉/谢春花 - 送你一朵小红花(Live)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=29723041"> |
| <div class="station-info"> |
| <span class="station-name">刘德华 - 17岁 (Live)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/115311.mp3"> |
| <div class="station-info"> |
| <span class="station-name">赵雷 - 成都</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=29567193"> |
| <div class="station-info"> |
| <span class="station-name">赵雷 - 我们的时光</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1974443814"> |
| <div class="station-info"> |
| <span class="station-name">赵雷 - 我记得</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/120793.mp3"> |
| <div class="station-info"> |
| <span class="station-name">陈明 - 我要找到你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbhjfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV怀旧音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5255631"> |
| <div class="station-info"> |
| <span class="station-name">伍佰 - 挪威的森林</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=240515"> |
| <div class="station-info"> |
| <span class="station-name">胡杨林 - 香水有毒</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=5238221"> |
| <div class="station-info"> |
| <span class="station-name">郑智化 - 水手</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=209643"> |
| <div class="station-info"> |
| <span class="station-name">蔡依林 - 日不落</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=108660"> |
| <div class="station-info"> |
| <span class="station-name">赵传 - 爱要怎么说出口</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1837528900"> |
| <div class="station-info"> |
| <span class="station-name">张也/周深 - 灯火里的中国</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=28387594"> |
| <div class="station-info"> |
| <span class="station-name">胡夏 - 同桌的你</span> |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="content-section" id="qiche-musiclist"> |
| <h2>汽车の音乐</h2> |
| <div class="station-list" id="qiche-musiclist-list"> |
| <div class="station-item" data-url="https://CoolTV.com/tbqc.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 欢迎台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/138316.mp3"> |
| <div class="station-info"> |
| <span class="station-name">黄龄 - 彩色复活券</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.kkkkmmmm.com/wj/152520/2023/05/01/4384f3eb6d43fe410eb45bcec80b61ec.mp3?c=99"> |
| <div class="station-info"> |
| <span class="station-name">黄龄 - High歌【玄音高端无损】</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118474.mp3"> |
| <div class="station-info"> |
| <span class="station-name">华晨宇 - 寒鸦少年live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2161934816"> |
| <div class="station-info"> |
| <span class="station-name">华晨宇 - 向阳而生（日出版）</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=29004400"> |
| <div class="station-info"> |
| <span class="station-name">华晨宇 - 烟火里的尘埃</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2648874974"> |
| <div class="station-info"> |
| <span class="station-name">赵雷 - 我们的时光+彩虹Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/112035.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周杰伦 - 告白气球</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1436709403"> |
| <div class="station-info"> |
| <span class="station-name">火羊瞌睡了 - 夏天的风</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://lw-sycdn.kuwo.cn/5feaadee995db9ae0d30684d7974e71c/6921c33b/resource/30106/trackmedia/M800000fIWGj0mNA1y.mp3"> |
| <div class="station-info"> |
| <span class="station-name">羽果 - 怒马·乘风</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1439354269"> |
| <div class="station-info"> |
| <span class="station-name">羽果 - 欢喜歌</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/111137.mp3"> |
| <div class="station-info"> |
| <span class="station-name">黄霄云 - 星辰大海</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118480.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张韶涵/王赫野 - 篇章</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118481.mp3"> |
| <div class="station-info"> |
| <span class="station-name">刘惜君/王赫野 - 大风吹</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1324880066"> |
| <div class="station-info"> |
| <span class="station-name">马赛克 - 霓虹甜心</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116773.mp3"> |
| <div class="station-info"> |
| <span class="station-name">旅行团乐队 - ByeBye</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=25731320"> |
| <div class="station-info"> |
| <span class="station-name">海龟先生 - 男孩别哭</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118482.mp3"> |
| <div class="station-info"> |
| <span class="station-name">李荣浩 - 李白</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=202369"> |
| <div class="station-info"> |
| <span class="station-name">赵雷 - 画</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=29567193"> |
| <div class="station-info"> |
| <span class="station-name">赵雷 - 我们的时光</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118483.mp3"> |
| <div class="station-info"> |
| <span class="station-name">杨宗纬/宝石/王宇宙 - 若月亮没来Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1857630559"> |
| <div class="station-info"> |
| <span class="station-name">房东的猫/陈婧霏 - NewBoy</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=18447142951987"> |
| <div class="station-info"> |
| <span class="station-name">孟慧圆/邓见超 - 我不知会遇见你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1379663217"> |
| <div class="station-info"> |
| <span class="station-name">孟慧圆 - 哈哈哈</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116780.mp3"> |
| <div class="station-info"> |
| <span class="station-name">回春丹 - 鲜花live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116783.mp3"> |
| <div class="station-info"> |
| <span class="station-name">新裤子 - 你要跳舞吗live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=387492"> |
| <div class="station-info"> |
| <span class="station-name">新裤子 - 别再问我什么是迪斯科</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116786.mp3"> |
| <div class="station-info"> |
| <span class="station-name">痛仰乐队 - 公路之歌live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116795.mp3"> |
| <div class="station-info"> |
| <span class="station-name">周杰伦 - Mojito</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1439345988"> |
| <div class="station-info"> |
| <span class="station-name">羽果 - 怒马</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1439354270"> |
| <div class="station-info"> |
| <span class="station-name">羽果 - 乘风</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=26619367"> |
| <div class="station-info"> |
| <span class="station-name">羽·泉 - 奔跑</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1880849699"> |
| <div class="station-info"> |
| <span class="station-name">李昂星 - 有谱Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=418603445"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 重返十七岁(新版)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/113139.mp3"> |
| <div class="station-info"> |
| <span class="station-name">大张伟 - 阳光彩虹小白马</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118484.mp3"> |
| <div class="station-info"> |
| <span class="station-name">大张伟 - 倍儿爽</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118485.mp3"> |
| <div class="station-info"> |
| <span class="station-name">大张伟 - 我怎么这么好看</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2639711470"> |
| <div class="station-info"> |
| <span class="station-name">大张伟 - HaHaMaker</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118486.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张韶涵 - 淋雨一直走</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118487.mp3"> |
| <div class="station-info"> |
| <span class="station-name">孙燕姿 - 绿光</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1969603661"> |
| <div class="station-info"> |
| <span class="station-name">ByTheCoast - YouareMyHomeNow</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=528272281"> |
| <div class="station-info"> |
| <span class="station-name">刺猬 - 火车驶向云外，梦安魂于九霄</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1950345110"> |
| <div class="station-info"> |
| <span class="station-name">阿梨粤 - 分分钟需要你</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/116987.mp3"> |
| <div class="station-info"> |
| <span class="station-name">古巨基 - 劲歌金曲</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118506.mp3"> |
| <div class="station-info"> |
| <span class="station-name">李克勤/周深 - 野狼disco(Live)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1894606139"> |
| <div class="station-info"> |
| <span class="station-name">易烊千玺 - 一起向未来</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118507.mp3"> |
| <div class="station-info"> |
| <span class="station-name">MichaelJackson - BeatIt</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118508.mp3"> |
| <div class="station-info"> |
| <span class="station-name">MichaelJackson - BillieJean</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118509.mp3"> |
| <div class="station-info"> |
| <span class="station-name">MichaelJackson - YouAreNotAlone</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118510.mp3"> |
| <div class="station-info"> |
| <span class="station-name">MichaelJackson - Dangerous</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118511.mp3"> |
| <div class="station-info"> |
| <span class="station-name">MichaelJackson - HealTheWorld</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1697617"> |
| <div class="station-info"> |
| <span class="station-name">MichaelJackson - SmoothCriminal</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=527855146"> |
| <div class="station-info"> |
| <span class="station-name">雪茄剪 - 蓝山</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=573168698"> |
| <div class="station-info"> |
| <span class="station-name">JahWahZoo - Freedom</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118512.mp3"> |
| <div class="station-info"> |
| <span class="station-name">TaylorSwift - LoveStory</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118513.mp3"> |
| <div class="station-info"> |
| <span class="station-name">TaylorSwift - CruelSummer</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1396305445"> |
| <div class="station-info"> |
| <span class="station-name">TaylorSwift - BlankSpace</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2028638116"> |
| <div class="station-info"> |
| <span class="station-name">Shakira/Freshlyground - WakaWaka(ThisTimeforAfrica)</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1875472"> |
| <div class="station-info"> |
| <span class="station-name">RickyMartin - TheCupOfLife</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1869271"> |
| <div class="station-info"> |
| <span class="station-name">Queen - WeWillRockYou</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=1868480"> |
| <div class="station-info"> |
| <span class="station-name">Queen - WeAretheChampions</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118514.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 直到世界尽头Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2126145413"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 像你这样的朋友（新春版）</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118515.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 快乐在哪里</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118699.mp3"> |
| <div class="station-info"> |
| <span class="station-name">王铮亮/陈楚生 -半边山半边海</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118698.mp3"> |
| <div class="station-info"> |
| <span class="station-name">群星 - 我最闪亮live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=362974"> |
| <div class="station-info"> |
| <span class="station-name">群星 -我最闪亮</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117698.mp3"> |
| <div class="station-info"> |
| <span class="station-name">再就业男团 - 活该live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117699.mp3"> |
| <div class="station-info"> |
| <span class="station-name">再就业男团 - 此生皆欢喜live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/117700.mp3"> |
| <div class="station-info"> |
| <span class="station-name">再就业男团 - 至少今天很快乐</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118696.mp3"> |
| <div class="station-info"> |
| <span class="station-name">张远 - 嘉宾</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://www.joy127.com/url/118697.mp3"> |
| <div class="station-info"> |
| <span class="station-name">苏醒/陆虎/张远 - 你曾是少年</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2637418687"> |
| <div class="station-info"> |
| <span class="station-name">杨坤/王天阳 - 你的太阳Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2637416953"> |
| <div class="station-info"> |
| <span class="station-name">李宇春/鹿先森乐队 - 我想当风Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="http://music.163.com/song/media/outer/url?id=2637418677"> |
| <div class="station-info"> |
| <span class="station-name">蔡健雅/闫泽欢 - 顺收Live</span> |
| |
| |
| </div> |
| </div> |
| |
| <div class="station-item" data-url="https://CoolTV.com/tbqcfm.mp3"> |
| <div class="station-info"> |
| <span class="station-name">CoolTV汽车音乐 - 磁带翻面台标</span> |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="player"> |
| <div class="player-info"> |
| <div class="current-station">未选择电台</div> |
| <div class="current-song">请选择电台开始播放</div> |
| <div class="player-time">00:00</div> |
| </div> |
| <div class="player-controls"> |
| <button class="play-btn"></button> |
| </div> |
| <div class="progress-container"> |
| <div class="progress-bar"> |
| <div class="progress"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| class StationDataLoader { |
| constructor() { |
| this.stationLists = {}; |
| } |
| |
| async loadStationData(sectionId, dataFile) { |
| try { |
| const response = await fetch(dataFile); |
| const data = await response.json(); |
| this.stationLists[sectionId] = data; |
| this.renderStationList(sectionId, data); |
| } catch (error) { |
| console.error(`加载 ${sectionId} 数据失败:`, error); |
| } |
| } |
| |
| renderStationList(sectionId, stations) { |
| const container = document.getElementById(`${sectionId}-list`); |
| if (!container) return; |
| |
| container.innerHTML = stations.map(station => ` |
| <div class="station-item" data-url="${station.url}"> |
| <div class="station-info"> |
| <span class="station-name">${station.name}</span> |
| ${station.recommended ? '<span class="live-badge">推荐</span>' : ''} |
| ${station.tag ? `<span class="live-badge">${station.tag}</span>` : ''} |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| async loadAllData() { |
| await Promise.all([ |
| this.loadStationData('foreign-music', 'foreign-music.json'), |
| this.loadStationData('chinese-music', 'chinese-music.json'), |
| this.loadStationData('news-comprehensive', 'news-comprehensive.json'), |
| this.loadStationData('huaijiu-musiclist', 'huaijiu-musiclist.json'), |
| this.loadStationData('qiche-musiclist', 'qiche-musiclist.json') |
| ]); |
| } |
| } |
| |
| class RadioPlayer { |
| constructor() { |
| this.audio = new Audio(); |
| this.isPlaying = false; |
| this.currentStation = null; |
| this.volume = 0.5; |
| this.dataLoader = new StationDataLoader(); |
| |
| this.init(); |
| } |
| |
| async init() { |
| await this.dataLoader.loadAllData(); |
| this.setupEventListeners(); |
| this.setupNavigation(); |
| this.setupVolume(); |
| } |
| |
| setupEventListeners() { |
| |
| document.addEventListener('click', (e) => { |
| const stationItem = e.target.closest('.station-item'); |
| if (stationItem) { |
| |
| const isHuaijiuSection = stationItem.closest('#huaijiu-musiclist'); |
| const isQicheSection = stationItem.closest('#qiche-musiclist'); |
| |
| if (isHuaijiuSection || isQicheSection) { |
| this.selectPlaylistStation(stationItem); |
| } else { |
| this.selectStation(stationItem); |
| } |
| } |
| }); |
| |
| |
| document.querySelector('.play-btn').addEventListener('click', () => { |
| this.togglePlay(); |
| }); |
| |
| |
| this.audio.addEventListener('loadstart', () => { |
| this.updateStatus('正在加载...'); |
| }); |
| |
| this.audio.addEventListener('canplay', () => { |
| this.updateStatus('可以播放'); |
| }); |
| |
| this.audio.addEventListener('playing', () => { |
| this.updateStatus('播放中'); |
| this.updatePlayButton(true); |
| }); |
| |
| this.audio.addEventListener('pause', () => { |
| this.updatePlayButton(false); |
| }); |
| |
| this.audio.addEventListener('error', () => { |
| this.updateStatus('播放失败'); |
| this.updatePlayButton(false); |
| }); |
| |
| this.audio.addEventListener('timeupdate', () => { |
| this.updateTime(); |
| }); |
| } |
| |
| setupNavigation() { |
| |
| document.querySelectorAll('.nav-item').forEach(item => { |
| item.addEventListener('click', (e) => { |
| e.preventDefault(); |
| |
| |
| document.querySelectorAll('.nav-item').forEach(nav => { |
| nav.classList.remove('active'); |
| }); |
| item.classList.add('active'); |
| |
| |
| const targetId = item.getAttribute('data-target'); |
| const targetSection = document.getElementById(targetId); |
| if (targetSection) { |
| targetSection.scrollIntoView({ behavior: 'smooth' }); |
| } |
| }); |
| }); |
| } |
| |
| setupVolume() { |
| this.audio.volume = this.volume; |
| } |
| |
| selectStation(stationElement) { |
| |
| document.querySelectorAll('.station-item').forEach(item => { |
| item.classList.remove('active'); |
| }); |
| |
| |
| stationElement.classList.add('active'); |
| |
| const stationName = stationElement.querySelector('.station-name').textContent; |
| const stationUrl = stationElement.dataset.url; |
| |
| this.currentStation = { |
| name: stationName, |
| url: stationUrl, |
| element: stationElement |
| }; |
| |
| document.querySelector('.current-station').textContent = stationName; |
| document.querySelector('.current-song').textContent = '正在加载...'; |
| this.updateStatus('已选择电台'); |
| |
| |
| this.play(); |
| } |
| |
| togglePlay() { |
| if (!this.currentStation) { |
| alert('请先选择一个电台'); |
| return; |
| } |
| |
| if (this.isPlaying) { |
| this.pause(); |
| } else { |
| this.play(); |
| } |
| } |
| |
| play() { |
| if (!this.currentStation) return; |
| |
| this.audio.src = this.currentStation.url; |
| this.audio.play() |
| .then(() => { |
| this.isPlaying = true; |
| this.updatePlayButton(true); |
| this.updateStatus('播放中'); |
| |
| setTimeout(() => { |
| if (this.currentStation.isPlaylist) { |
| |
| document.querySelector('.current-song').textContent = `正在播放: ${this.currentStation.name}`; |
| } else { |
| |
| const songs = ['经典老歌', '流行金曲', '轻音乐', '爵士乐', '新闻播报']; |
| const randomSong = songs[Math.floor(Math.random() * songs.length)]; |
| document.querySelector('.current-song').textContent = `正在播放: ${randomSong}`; |
| } |
| }, 1000); |
| }) |
| .catch(error => { |
| console.error('播放失败:', error); |
| this.updateStatus('播放失败，请检查网络'); |
| }); |
| } |
| |
| pause() { |
| this.audio.pause(); |
| this.isPlaying = false; |
| this.updatePlayButton(false); |
| this.updateStatus('已暂停'); |
| document.querySelector('.current-song').textContent = '播放已暂停'; |
| } |
| |
| updatePlayButton(playing) { |
| const playBtn = document.querySelector('.play-btn'); |
| if (playing) { |
| playBtn.classList.add('paused'); |
| } else { |
| playBtn.classList.remove('paused'); |
| } |
| } |
| |
| updateStatus(status) { |
| |
| console.log('状态:', status); |
| } |
| |
| updateTime() { |
| const timeElement = document.querySelector('.player-time'); |
| const currentTime = this.formatTime(this.audio.currentTime); |
| const duration = this.formatTime(this.audio.duration || 0); |
| timeElement.textContent = `${currentTime} / ${duration}`; |
| |
| |
| if (this.audio.duration) { |
| const progress = (this.audio.currentTime / this.audio.duration) * 100; |
| document.querySelector('.progress').style.width = `${progress}%`; |
| } |
| } |
| |
| formatTime(seconds) { |
| const mins = Math.floor(seconds / 60); |
| const secs = Math.floor(seconds % 60); |
| return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; |
| } |
| |
| |
| selectPlaylistStation(stationElement) { |
| |
| document.querySelectorAll('.station-item').forEach(item => { |
| item.classList.remove('active'); |
| }); |
| |
| |
| stationElement.classList.add('active'); |
| |
| const stationName = stationElement.querySelector('.station-name').textContent; |
| const stationUrl = stationElement.dataset.url; |
| |
| this.currentStation = { |
| name: stationName, |
| url: stationUrl, |
| element: stationElement, |
| isPlaylist: true |
| }; |
| |
| document.querySelector('.current-station').textContent = stationName; |
| document.querySelector('.current-song').textContent = '正在加载...'; |
| this.updateStatus('已选择歌曲'); |
| |
| |
| this.setupPlaylist(); |
| |
| |
| this.play(); |
| } |
| |
| |
| setupPlaylist() { |
| |
| const currentSection = this.currentStation.element.closest('.content-section'); |
| const allSongs = currentSection.querySelectorAll('.station-item'); |
| |
| this.playlist = Array.from(allSongs).map(item => ({ |
| name: item.querySelector('.station-name').textContent, |
| url: item.dataset.url, |
| element: item |
| })); |
| |
| |
| this.currentPlaylistIndex = this.playlist.findIndex(item => |
| item.element === this.currentStation.element |
| ); |
| |
| |
| this.audio.addEventListener('ended', () => { |
| this.playNextInPlaylist(); |
| }); |
| } |
| |
| |
| playNextInPlaylist() { |
| if (!this.playlist || this.currentPlaylistIndex === undefined) return; |
| |
| |
| this.currentPlaylistIndex++; |
| |
| |
| if (this.currentPlaylistIndex >= this.playlist.length) { |
| this.updateStatus('播放列表结束'); |
| document.querySelector('.current-song').textContent = '播放列表结束'; |
| return; |
| } |
| |
| |
| const nextSong = this.playlist[this.currentPlaylistIndex]; |
| |
| |
| document.querySelectorAll('.station-item').forEach(item => { |
| item.classList.remove('active'); |
| }); |
| nextSong.element.classList.add('active'); |
| |
| |
| this.currentStation = { |
| name: nextSong.name, |
| url: nextSong.url, |
| element: nextSong.element, |
| isPlaylist: true |
| }; |
| |
| document.querySelector('.current-station').textContent = nextSong.name; |
| document.querySelector('.current-song').textContent = '正在播放下一首...'; |
| |
| |
| this.play(); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| new RadioPlayer(); |
| }); |
| </script> |
|
|
| </body><div id="immersive-translate-browser-popup" style="all: initial"><template shadowrootmode="open"><style>@charset "UTF-8"; |
| |
| |
| |
| |
| |
| |
| |
| #mount { |
| --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", |
| "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", |
| "Segoe UI Symbol", "Noto Color Emoji"; |
| --line-height: 1.5; |
| --font-weight: 400; |
| --font-size: 16px; |
| --border-radius: 0.25rem; |
| --border-width: 1px; |
| --outline-width: 3px; |
| --spacing: 1rem; |
| --typography-spacing-vertical: 1.5rem; |
| --block-spacing-vertical: calc(var(--spacing) * 2); |
| --block-spacing-horizontal: var(--spacing); |
| --grid-spacing-vertical: 0; |
| --grid-spacing-horizontal: var(--spacing); |
| --form-element-spacing-vertical: 0.75rem; |
| --form-element-spacing-horizontal: 1rem; |
| --nav-element-spacing-vertical: 1rem; |
| --nav-element-spacing-horizontal: 0.5rem; |
| --nav-link-spacing-vertical: 0.5rem; |
| --nav-link-spacing-horizontal: 0.5rem; |
| --form-label-font-weight: var(--font-weight); |
| --transition: 0.2s ease-in-out; |
| --modal-overlay-backdrop-filter: blur(0.25rem); |
| } |
| @media (min-width: 576px) { |
| #mount { |
| --font-size: 17px; |
| } |
| } |
| @media (min-width: 768px) { |
| #mount { |
| --font-size: 18px; |
| } |
| } |
| @media (min-width: 992px) { |
| #mount { |
| --font-size: 19px; |
| } |
| } |
| @media (min-width: 1200px) { |
| #mount { |
| --font-size: 20px; |
| } |
| } |
| |
| @media (min-width: 576px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer, |
| section { |
| --block-spacing-vertical: calc(var(--spacing) * 2); |
| } |
| } |
| @media (min-width: 768px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer, |
| section { |
| --block-spacing-vertical: calc(var(--spacing) * 2.5); |
| } |
| } |
| @media (min-width: 992px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer, |
| section { |
| --block-spacing-vertical: calc(var(--spacing) * 3); |
| } |
| } |
| @media (min-width: 1200px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer, |
| section { |
| --block-spacing-vertical: calc(var(--spacing) * 3.5); |
| } |
| } |
| |
| @media (min-width: 576px) { |
| article { |
| --block-spacing-horizontal: calc(var(--spacing) * 1.25); |
| } |
| } |
| @media (min-width: 768px) { |
| article { |
| --block-spacing-horizontal: calc(var(--spacing) * 1.5); |
| } |
| } |
| @media (min-width: 992px) { |
| article { |
| --block-spacing-horizontal: calc(var(--spacing) * 1.75); |
| } |
| } |
| @media (min-width: 1200px) { |
| article { |
| --block-spacing-horizontal: calc(var(--spacing) * 2); |
| } |
| } |
| |
| dialog > article { |
| --block-spacing-vertical: calc(var(--spacing) * 2); |
| --block-spacing-horizontal: var(--spacing); |
| } |
| @media (min-width: 576px) { |
| dialog > article { |
| --block-spacing-vertical: calc(var(--spacing) * 2.5); |
| --block-spacing-horizontal: calc(var(--spacing) * 1.25); |
| } |
| } |
| @media (min-width: 768px) { |
| dialog > article { |
| --block-spacing-vertical: calc(var(--spacing) * 3); |
| --block-spacing-horizontal: calc(var(--spacing) * 1.5); |
| } |
| } |
| |
| a { |
| --text-decoration: none; |
| } |
| a.secondary, |
| a.contrast { |
| --text-decoration: underline; |
| } |
| |
| small { |
| --font-size: 0.875em; |
| } |
| |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| --font-weight: 700; |
| } |
| |
| h1 { |
| --font-size: 2rem; |
| --typography-spacing-vertical: 3rem; |
| } |
| |
| h2 { |
| --font-size: 1.75rem; |
| --typography-spacing-vertical: 2.625rem; |
| } |
| |
| h3 { |
| --font-size: 1.5rem; |
| --typography-spacing-vertical: 2.25rem; |
| } |
| |
| h4 { |
| --font-size: 1.25rem; |
| --typography-spacing-vertical: 1.874rem; |
| } |
| |
| h5 { |
| --font-size: 1.125rem; |
| --typography-spacing-vertical: 1.6875rem; |
| } |
| |
| [type="checkbox"], |
| [type="radio"] { |
| --border-width: 2px; |
| } |
| |
| [type="checkbox"][role="switch"] { |
| --border-width: 2px; |
| } |
| |
| thead th, |
| thead td, |
| tfoot th, |
| tfoot td { |
| --border-width: 3px; |
| } |
| |
| :not(thead, tfoot) > * > td { |
| --font-size: 0.875em; |
| } |
| |
| pre, |
| code, |
| kbd, |
| samp { |
| --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", |
| "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, |
| "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
| } |
| |
| kbd { |
| --font-weight: bolder; |
| } |
| |
| [data-theme="light"], |
| #mount:not([data-theme="dark"]) { |
| --background-color: #fff; |
| --background-light-green: #f5f7f9; |
| --color: hsl(205deg, 20%, 32%); |
| --h1-color: hsl(205deg, 30%, 15%); |
| --h2-color: #24333e; |
| --h3-color: hsl(205deg, 25%, 23%); |
| --h4-color: #374956; |
| --h5-color: hsl(205deg, 20%, 32%); |
| --h6-color: #4d606d; |
| --muted-color: hsl(205deg, 10%, 50%); |
| --muted-border-color: hsl(205deg, 20%, 94%); |
| --primary: hsl(195deg, 85%, 41%); |
| --primary-hover: hsl(195deg, 90%, 32%); |
| --primary-focus: rgba(16, 149, 193, 0.125); |
| --primary-inverse: #fff; |
| --secondary: hsl(205deg, 15%, 41%); |
| --secondary-hover: hsl(205deg, 20%, 32%); |
| --secondary-focus: rgba(89, 107, 120, 0.125); |
| --secondary-inverse: #fff; |
| --contrast: hsl(205deg, 30%, 15%); |
| --contrast-hover: #000; |
| --contrast-focus: rgba(89, 107, 120, 0.125); |
| --contrast-inverse: #fff; |
| --mark-background-color: #fff2ca; |
| --mark-color: #543a26; |
| --ins-color: #388e3c; |
| --del-color: #c62828; |
| --blockquote-border-color: var(--muted-border-color); |
| --blockquote-footer-color: var(--muted-color); |
| --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); |
| --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); |
| --form-element-background-color: transparent; |
| --form-element-border-color: hsl(205deg, 14%, 68%); |
| --form-element-color: var(--color); |
| --form-element-placeholder-color: var(--muted-color); |
| --form-element-active-background-color: transparent; |
| --form-element-active-border-color: var(--primary); |
| --form-element-focus-color: var(--primary-focus); |
| --form-element-disabled-background-color: hsl(205deg, 18%, 86%); |
| --form-element-disabled-border-color: hsl(205deg, 14%, 68%); |
| --form-element-disabled-opacity: 0.5; |
| --form-element-invalid-border-color: #c62828; |
| --form-element-invalid-active-border-color: #d32f2f; |
| --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); |
| --form-element-valid-border-color: #388e3c; |
| --form-element-valid-active-border-color: #43a047; |
| --form-element-valid-focus-color: rgba(67, 160, 71, 0.125); |
| --switch-background-color: hsl(205deg, 16%, 77%); |
| --switch-color: var(--primary-inverse); |
| --switch-checked-background-color: var(--primary); |
| --range-border-color: hsl(205deg, 18%, 86%); |
| --range-active-border-color: hsl(205deg, 16%, 77%); |
| --range-thumb-border-color: var(--background-color); |
| --range-thumb-color: var(--secondary); |
| --range-thumb-hover-color: var(--secondary-hover); |
| --range-thumb-active-color: var(--primary); |
| --table-border-color: var(--muted-border-color); |
| --table-row-stripped-background-color: #f6f8f9; |
| --code-background-color: hsl(205deg, 20%, 94%); |
| --code-color: var(--muted-color); |
| --code-kbd-background-color: var(--contrast); |
| --code-kbd-color: var(--contrast-inverse); |
| --code-tag-color: hsl(330deg, 40%, 50%); |
| --code-property-color: hsl(185deg, 40%, 40%); |
| --code-value-color: hsl(40deg, 20%, 50%); |
| --code-comment-color: hsl(205deg, 14%, 68%); |
| --accordion-border-color: var(--muted-border-color); |
| --accordion-close-summary-color: var(--color); |
| --accordion-open-summary-color: var(--muted-color); |
| --card-background-color: var(--background-color); |
| --card-border-color: var(--muted-border-color); |
| --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), |
| 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), |
| 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), |
| 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), |
| 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), |
| 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), |
| 0 0 0 0.0625rem rgba(27, 40, 50, 0.015); |
| --card-sectionning-background-color: #fbfbfc; |
| --dropdown-background-color: #fbfbfc; |
| --dropdown-border-color: #e1e6eb; |
| --dropdown-box-shadow: var(--card-box-shadow); |
| --dropdown-color: var(--color); |
| --dropdown-hover-background-color: hsl(205deg, 20%, 94%); |
| --modal-overlay-background-color: rgba(213, 220, 226, 0.7); |
| --progress-background-color: hsl(205deg, 18%, 86%); |
| --progress-color: var(--primary); |
| --loading-spinner-opacity: 0.5; |
| --tooltip-background-color: var(--contrast); |
| --tooltip-color: var(--contrast-inverse); |
| --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTguOTM0OCA4LjY0ODQ0QzIwLjg5NDEgOC42NDg0NCAyMi40ODU1IDcuMDU0NjkgMjIuNDg1NSA1LjA5NzY2QzIyLjQ4NTUgMy4xNDA2MiAyMC44OTE4IDEuNTQ2ODggMTguOTM0OCAxLjU0Njg4QzE2Ljk3NTQgMS41NDY4OCAxNS4zODQgMy4xNDA2MiAxNS4zODQgNS4wOTc2NkMxNS4zODQgNS4yOTkyMiAxNS40MDA0IDUuNDkzNzUgMTUuNDMzMiA1LjY4NTk0TDcuMzIzODMgOS4zNTM5MUM2LjcwOTc3IDguODQ1MzEgNS45MjIyNyA4LjU0MDYyIDUuMDY0NDUgOC41NDA2MkMzLjEwNTA4IDguNTQwNjIgMS41MTM2NyAxMC4xMzQ0IDEuNTEzNjcgMTIuMDkxNEMxLjUxMzY3IDE0LjA0ODQgMy4xMDc0MiAxNS42NDIyIDUuMDY0NDUgMTUuNjQyMkM1LjgzMzIgMTUuNjQyMiA2LjU0NTcgMTUuMzk2MSA3LjEyNjk1IDE0Ljk4MTNMMTIuNDk0MSAxNy45OTUzQzEyLjQxNjggMTguMjg1OSAxMi4zNzcgMTguNTg4MyAxMi4zNzcgMTguOTAyM0MxMi4zNzcgMjAuODYxNyAxMy45NzA3IDIyLjQ1MzEgMTUuOTI3NyAyMi40NTMxQzE3Ljg4NzEgMjIuNDUzMSAxOS40Nzg1IDIwLjg1OTQgMTkuNDc4NSAxOC45MDIzQzE5LjQ3ODUgMTYuOTQzIDE3Ljg4NDggMTUuMzUxNiAxNS45Mjc3IDE1LjM1MTZDMTQuOTU3NCAxNS4zNTE2IDE0LjA3ODUgMTUuNzQzIDEzLjQzNjMgMTYuMzczNEw4LjMyMjI3IDEzLjUwNDdDOC41MDk3NyAxMy4wNzExIDguNjE1MjMgMTIuNTk1MyA4LjYxNTIzIDEyLjA5MzhDOC42MTUyMyAxMS42ODEyIDguNTQ0OTIgMTEuMjg3NSA4LjQxNjAyIDEwLjkxOTVMMTYuMjIzIDcuMzg3NUMxNi44NzQ2IDguMTU2MjUgMTcuODQ5NiA4LjY0ODQ0IDE4LjkzNDggOC42NDg0NFpNNS4wNjQ0NSAxMy43Njk1QzQuMTQxMDIgMTMuNzY5NSAzLjM4ODY3IDEzLjAxNzIgMy4zODg2NyAxMi4wOTM4QzMuMzg4NjcgMTEuMTcwMyA0LjE0MTAyIDEwLjQxOCA1LjA2NDQ1IDEwLjQxOEM1Ljk4Nzg5IDEwLjQxOCA2Ljc0MDIzIDExLjE3MDMgNi43NDAyMyAxMi4wOTM4QzYuNzQwMjMgMTMuMDE3MiA1Ljk4Nzg5IDEzLjc2OTUgNS4wNjQ0NSAxMy43Njk1Wk0xNS45Mjc3IDE3LjIyNjZDMTYuODUxMiAxNy4yMjY2IDE3LjYwMzUgMTcuOTc4OSAxNy42MDM1IDE4LjkwMjNDMTcuNjAzNSAxOS44MjU4IDE2Ljg1MTIgMjAuNTc4MSAxNS45Mjc3IDIwLjU3ODFDMTUuMDA0MyAyMC41NzgxIDE0LjI1MiAxOS44MjU4IDE0LjI1MiAxOC45MDIzQzE0LjI1MiAxNy45Nzg5IDE1LjAwMiAxNy4yMjY2IDE1LjkyNzcgMTcuMjI2NlpNMTguOTM0OCAzLjQxOTUzQzE5Ljg1ODIgMy40MTk1MyAyMC42MTA1IDQuMTcxODcgMjAuNjEwNSA1LjA5NTMxQzIwLjYxMDUgNi4wMTg3NSAxOS44NTgyIDYuNzcxMDkgMTguOTM0OCA2Ljc3MTA5QzE4LjAxMTMgNi43NzEwOSAxNy4yNTkgNi4wMTg3NSAxNy4yNTkgNS4wOTUzMUMxNy4yNTkgNC4xNzE4NyAxOC4wMTEzIDMuNDE5NTMgMTguOTM0OCAzLjQxOTUzWicgZmlsbD0nIzgzODM4MycvPjwvc3ZnPiA="); |
| --float-ball-more-button-border-color: #f6f6f6; |
| --float-ball-more-button-background-color: #ffffff; |
| --float-ball-more-button-svg-color: #6c6f73; |
| color-scheme: light; |
| --service-bg-hover: #f7faff; |
| --service-bg: #fafbfb; |
| } |
| |
| @media only screen and (prefers-color-scheme: dark) { |
| #mount:not([data-theme="light"]) { |
| --background-color: #11191f; |
| --float-ball-more-button-background-color: #ffffff; |
| --background-light-green: #141e26; |
| --color: hsl(205deg, 16%, 77%); |
| --h1-color: hsl(205deg, 20%, 94%); |
| --h2-color: #e1e6eb; |
| --h3-color: hsl(205deg, 18%, 86%); |
| --h4-color: #c8d1d8; |
| --h5-color: hsl(205deg, 16%, 77%); |
| --h6-color: #afbbc4; |
| --muted-color: hsl(205deg, 10%, 50%); |
| --muted-border-color: #1f2d38; |
| --primary: hsl(195deg, 85%, 41%); |
| --primary-hover: hsl(195deg, 80%, 50%); |
| --primary-focus: rgba(16, 149, 193, 0.25); |
| --primary-inverse: #fff; |
| --secondary: hsl(205deg, 15%, 41%); |
| --secondary-hover: hsl(205deg, 10%, 50%); |
| --secondary-focus: rgba(115, 130, 140, 0.25); |
| --secondary-inverse: #fff; |
| --contrast: hsl(205deg, 20%, 94%); |
| --contrast-hover: #fff; |
| --contrast-focus: rgba(115, 130, 140, 0.25); |
| --contrast-inverse: #000; |
| --mark-background-color: #d1c284; |
| --mark-color: #11191f; |
| --ins-color: #388e3c; |
| --del-color: #c62828; |
| --blockquote-border-color: var(--muted-border-color); |
| --blockquote-footer-color: var(--muted-color); |
| --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); |
| --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); |
| --form-element-background-color: #11191f; |
| --form-element-border-color: #374956; |
| --form-element-color: var(--color); |
| --form-element-placeholder-color: var(--muted-color); |
| --form-element-active-background-color: var( |
| --form-element-background-color |
| ); |
| --form-element-active-border-color: var(--primary); |
| --form-element-focus-color: var(--primary-focus); |
| --form-element-disabled-background-color: hsl(205deg, 25%, 23%); |
| --form-element-disabled-border-color: hsl(205deg, 20%, 32%); |
| --form-element-disabled-opacity: 0.5; |
| --form-element-invalid-border-color: #b71c1c; |
| --form-element-invalid-active-border-color: #c62828; |
| --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); |
| --form-element-valid-border-color: #2e7d32; |
| --form-element-valid-active-border-color: #388e3c; |
| --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); |
| --switch-background-color: #374956; |
| --switch-color: var(--primary-inverse); |
| --switch-checked-background-color: var(--primary); |
| --range-border-color: #24333e; |
| --range-active-border-color: hsl(205deg, 25%, 23%); |
| --range-thumb-border-color: var(--background-color); |
| --range-thumb-color: var(--secondary); |
| --range-thumb-hover-color: var(--secondary-hover); |
| --range-thumb-active-color: var(--primary); |
| --table-border-color: var(--muted-border-color); |
| --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); |
| --code-background-color: #18232c; |
| --code-color: var(--muted-color); |
| --code-kbd-background-color: var(--contrast); |
| --code-kbd-color: var(--contrast-inverse); |
| --code-tag-color: hsl(330deg, 30%, 50%); |
| --code-property-color: hsl(185deg, 30%, 50%); |
| --code-value-color: hsl(40deg, 10%, 50%); |
| --code-comment-color: #4d606d; |
| --accordion-border-color: var(--muted-border-color); |
| --accordion-active-summary-color: var(--primary); |
| --accordion-close-summary-color: var(--color); |
| --accordion-open-summary-color: var(--muted-color); |
| --card-background-color: #141e26; |
| --card-border-color: var(--card-background-color); |
| --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), |
| 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), |
| 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), |
| 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), |
| 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), |
| 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); |
| --card-sectionning-background-color: #18232c; |
| --dropdown-background-color: hsl(205deg, 30%, 15%); |
| --dropdown-border-color: #24333e; |
| --dropdown-box-shadow: var(--card-box-shadow); |
| --dropdown-color: var(--color); |
| --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); |
| --modal-overlay-background-color: rgba(36, 51, 62, 0.8); |
| --progress-background-color: #24333e; |
| --progress-color: var(--primary); |
| --loading-spinner-opacity: 0.5; |
| --tooltip-background-color: var(--contrast); |
| --tooltip-color: var(--contrast-inverse); |
| --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA="); |
| color-scheme: dark; |
| --service-bg-hover: #22292f; |
| --service-bg: rgba(0, 0, 0, 0.1); |
| } |
| } |
| [data-theme="dark"] { |
| --background-color: #11191f; |
| --float-ball-more-button-background-color: #191919; |
| --background-light-green: #141e26; |
| --color: hsl(205deg, 16%, 77%); |
| --h1-color: hsl(205deg, 20%, 94%); |
| --h2-color: #e1e6eb; |
| --h3-color: hsl(205deg, 18%, 86%); |
| --h4-color: #c8d1d8; |
| --h5-color: hsl(205deg, 16%, 77%); |
| --h6-color: #afbbc4; |
| --muted-color: hsl(205deg, 10%, 50%); |
| --muted-border-color: #1f2d38; |
| --primary: hsl(195deg, 85%, 41%); |
| --primary-hover: hsl(195deg, 80%, 50%); |
| --primary-focus: rgba(16, 149, 193, 0.25); |
| --primary-inverse: #fff; |
| --secondary: hsl(205deg, 15%, 41%); |
| --secondary-hover: hsl(205deg, 10%, 50%); |
| --secondary-focus: rgba(115, 130, 140, 0.25); |
| --secondary-inverse: #fff; |
| --contrast: hsl(205deg, 20%, 94%); |
| --contrast-hover: #fff; |
| --contrast-focus: rgba(115, 130, 140, 0.25); |
| --contrast-inverse: #000; |
| --mark-background-color: #d1c284; |
| --mark-color: #11191f; |
| --ins-color: #388e3c; |
| --del-color: #c62828; |
| --blockquote-border-color: var(--muted-border-color); |
| --blockquote-footer-color: var(--muted-color); |
| --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); |
| --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); |
| --form-element-background-color: #11191f; |
| --form-element-border-color: #374956; |
| --form-element-color: var(--color); |
| --form-element-placeholder-color: var(--muted-color); |
| --form-element-active-background-color: var(--form-element-background-color); |
| --form-element-active-border-color: var(--primary); |
| --form-element-focus-color: var(--primary-focus); |
| --form-element-disabled-background-color: hsl(205deg, 25%, 23%); |
| --form-element-disabled-border-color: hsl(205deg, 20%, 32%); |
| --form-element-disabled-opacity: 0.5; |
| --form-element-invalid-border-color: #b71c1c; |
| --form-element-invalid-active-border-color: #c62828; |
| --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); |
| --form-element-valid-border-color: #2e7d32; |
| --form-element-valid-active-border-color: #388e3c; |
| --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); |
| --switch-background-color: #374956; |
| --switch-color: var(--primary-inverse); |
| --switch-checked-background-color: var(--primary); |
| --range-border-color: #24333e; |
| --range-active-border-color: hsl(205deg, 25%, 23%); |
| --range-thumb-border-color: var(--background-color); |
| --range-thumb-color: var(--secondary); |
| --range-thumb-hover-color: var(--secondary-hover); |
| --range-thumb-active-color: var(--primary); |
| --table-border-color: var(--muted-border-color); |
| --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); |
| --code-background-color: #18232c; |
| --code-color: var(--muted-color); |
| --code-kbd-background-color: var(--contrast); |
| --code-kbd-color: var(--contrast-inverse); |
| --code-tag-color: hsl(330deg, 30%, 50%); |
| --code-property-color: hsl(185deg, 30%, 50%); |
| --code-value-color: hsl(40deg, 10%, 50%); |
| --code-comment-color: #4d606d; |
| --accordion-border-color: var(--muted-border-color); |
| --accordion-active-summary-color: var(--primary); |
| --accordion-close-summary-color: var(--color); |
| --accordion-open-summary-color: var(--muted-color); |
| --card-background-color: #141e26; |
| --card-border-color: var(--card-background-color); |
| --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), |
| 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), |
| 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), |
| 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), |
| 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), |
| 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); |
| --card-sectionning-background-color: #18232c; |
| --dropdown-background-color: hsl(205deg, 30%, 15%); |
| --dropdown-border-color: #24333e; |
| --dropdown-box-shadow: var(--card-box-shadow); |
| --dropdown-color: var(--color); |
| --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); |
| --modal-overlay-background-color: rgba(36, 51, 62, 0.8); |
| --progress-background-color: #24333e; |
| --progress-color: var(--primary); |
| --loading-spinner-opacity: 0.5; |
| --tooltip-background-color: var(--contrast); |
| --tooltip-color: var(--contrast-inverse); |
| --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); |
| --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); |
| --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA="); |
| color-scheme: dark; |
| --service-bg: rgba(0, 0, 0, 0.1); |
| } |
| |
| progress, |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"] { |
| accent-color: var(--primary); |
| } |
| |
| |
| |
| |
| |
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| background-repeat: no-repeat; |
| } |
| |
| ::before, |
| ::after { |
| text-decoration: inherit; |
| vertical-align: inherit; |
| } |
| |
| :where(#mount) { |
| -webkit-tap-highlight-color: transparent; |
| -webkit-text-size-adjust: 100%; |
| -moz-text-size-adjust: 100%; |
| text-size-adjust: 100%; |
| background-color: var(--background-color); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: var(--font-size); |
| line-height: var(--line-height); |
| font-family: var(--font-family); |
| text-rendering: optimizeLegibility; |
| overflow-wrap: break-word; |
| cursor: default; |
| -moz-tab-size: 4; |
| -o-tab-size: 4; |
| tab-size: 4; |
| } |
| |
| |
| |
| |
| |
| main { |
| display: block; |
| } |
| |
| #mount { |
| width: 100%; |
| margin: 0; |
| } |
| #mount > header, |
| #mount > main, |
| #mount > footer { |
| width: 100%; |
| margin-right: auto; |
| margin-left: auto; |
| padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); |
| } |
| @media (min-width: 576px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer { |
| padding: 2px !important; |
| } |
| } |
| @media (min-width: 992px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer { |
| padding: 0 12px !important; |
| } |
| } |
| @media (min-width: 1200px) { |
| #mount > header, |
| #mount > main, |
| #mount > footer { |
| padding: 0 24px !important; |
| } |
| } |
| |
| |
| |
| |
| .container, |
| .container-fluid { |
| width: 100%; |
| margin-right: auto; |
| margin-left: auto; |
| padding-right: var(--spacing); |
| padding-left: var(--spacing); |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| @media (min-width: 992px) { |
| .container { |
| max-width: 920px; |
| } |
| } |
| @media (min-width: 1200px) { |
| .container { |
| max-width: 1130px; |
| } |
| } |
| |
| |
| |
| |
| |
| section { |
| margin-bottom: var(--block-spacing-vertical); |
| } |
| |
| |
| |
| |
| |
| .grid { |
| grid-column-gap: var(--grid-spacing-horizontal); |
| grid-row-gap: var(--grid-spacing-vertical); |
| display: grid; |
| grid-template-columns: 1fr; |
| margin: 0; |
| } |
| @media (min-width: 1280px) { |
| .grid { |
| grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); |
| } |
| } |
| .grid > * { |
| min-width: 0; |
| } |
| |
| |
| |
| |
| figure { |
| display: block; |
| margin: 0; |
| padding: 0; |
| overflow-x: auto; |
| } |
| figure figcaption { |
| padding: calc(var(--spacing) * 0.5) 0; |
| color: var(--muted-color); |
| } |
| |
| |
| |
| |
| b, |
| strong { |
| font-weight: bolder; |
| } |
| |
| sub, |
| sup { |
| position: relative; |
| font-size: 0.75em; |
| line-height: 0; |
| vertical-align: baseline; |
| } |
| |
| sub { |
| bottom: -0.25em; |
| } |
| |
| sup { |
| top: -0.5em; |
| } |
| |
| address, |
| blockquote, |
| dl, |
| figure, |
| form, |
| ol, |
| p, |
| pre, |
| table, |
| ul { |
| margin-top: 0; |
| margin-bottom: var(--typography-spacing-vertical); |
| color: var(--color); |
| font-style: normal; |
| font-weight: var(--font-weight); |
| font-size: var(--font-size); |
| } |
| |
| a, |
| [role="link"] { |
| --color: var(--primary); |
| --background-color: transparent; |
| outline: none; |
| background-color: var(--background-color); |
| color: var(--color); |
| -webkit-text-decoration: var(--text-decoration); |
| text-decoration: var(--text-decoration); |
| transition: background-color var(--transition), color var(--transition), |
| box-shadow var(--transition), -webkit-text-decoration var(--transition); |
| transition: background-color var(--transition), color var(--transition), |
| text-decoration var(--transition), box-shadow var(--transition); |
| transition: background-color var(--transition), color var(--transition), |
| text-decoration var(--transition), box-shadow var(--transition), |
| -webkit-text-decoration var(--transition); |
| } |
| a:is([aria-current], :hover, :active, :focus), |
| [role="link"]:is([aria-current], :hover, :active, :focus) { |
| --color: var(--primary-hover); |
| --text-decoration: underline; |
| } |
| a:focus, |
| [role="link"]:focus { |
| --background-color: var(--primary-focus); |
| } |
| a.secondary, |
| [role="link"].secondary { |
| --color: var(--secondary); |
| } |
| a.secondary:is([aria-current], :hover, :active, :focus), |
| [role="link"].secondary:is([aria-current], :hover, :active, :focus) { |
| --color: var(--secondary-hover); |
| } |
| a.secondary:focus, |
| [role="link"].secondary:focus { |
| --background-color: var(--secondary-focus); |
| } |
| a.contrast, |
| [role="link"].contrast { |
| --color: var(--contrast); |
| } |
| a.contrast:is([aria-current], :hover, :active, :focus), |
| [role="link"].contrast:is([aria-current], :hover, :active, :focus) { |
| --color: var(--contrast-hover); |
| } |
| a.contrast:focus, |
| [role="link"].contrast:focus { |
| --background-color: var(--contrast-focus); |
| } |
| |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| margin-top: 0; |
| margin-bottom: var(--typography-spacing-vertical); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: var(--font-size); |
| font-family: var(--font-family); |
| } |
| |
| h1 { |
| --color: var(--h1-color); |
| } |
| |
| h2 { |
| --color: var(--h2-color); |
| } |
| |
| h3 { |
| --color: var(--h3-color); |
| } |
| |
| h4 { |
| --color: var(--h4-color); |
| } |
| |
| h5 { |
| --color: var(--h5-color); |
| } |
| |
| h6 { |
| --color: var(--h6-color); |
| } |
| |
| :where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) |
| ~ :is(h1, h2, h3, h4, h5, h6) { |
| margin-top: var(--typography-spacing-vertical); |
| } |
| |
| hgroup, |
| .headings { |
| margin-bottom: var(--typography-spacing-vertical); |
| } |
| hgroup > *, |
| .headings > * { |
| margin-bottom: 0; |
| } |
| hgroup > *:last-child, |
| .headings > *:last-child { |
| --color: var(--muted-color); |
| --font-weight: unset; |
| font-size: 1rem; |
| font-family: unset; |
| } |
| |
| p { |
| margin-bottom: var(--typography-spacing-vertical); |
| } |
| |
| small { |
| font-size: var(--font-size); |
| } |
| |
| :where(dl, ol, ul) { |
| padding-right: 0; |
| padding-left: var(--spacing); |
| -webkit-padding-start: var(--spacing); |
| padding-inline-start: var(--spacing); |
| -webkit-padding-end: 0; |
| padding-inline-end: 0; |
| } |
| :where(dl, ol, ul) li { |
| margin-bottom: calc(var(--typography-spacing-vertical) * 0.25); |
| } |
| |
| :where(dl, ol, ul) :is(dl, ol, ul) { |
| margin: 0; |
| margin-top: calc(var(--typography-spacing-vertical) * 0.25); |
| } |
| |
| ul li { |
| list-style: square; |
| } |
| |
| mark { |
| padding: 0.125rem 0.25rem; |
| background-color: var(--mark-background-color); |
| color: var(--mark-color); |
| vertical-align: baseline; |
| } |
| |
| blockquote { |
| display: block; |
| margin: var(--typography-spacing-vertical) 0; |
| padding: var(--spacing); |
| border-right: none; |
| border-left: 0.25rem solid var(--blockquote-border-color); |
| -webkit-border-start: 0.25rem solid var(--blockquote-border-color); |
| border-inline-start: 0.25rem solid var(--blockquote-border-color); |
| -webkit-border-end: none; |
| border-inline-end: none; |
| } |
| blockquote footer { |
| margin-top: calc(var(--typography-spacing-vertical) * 0.5); |
| color: var(--blockquote-footer-color); |
| } |
| |
| abbr[title] { |
| border-bottom: 1px dotted; |
| text-decoration: none; |
| cursor: help; |
| } |
| |
| ins { |
| color: var(--ins-color); |
| text-decoration: none; |
| } |
| |
| del { |
| color: var(--del-color); |
| } |
| |
| ::-moz-selection { |
| background-color: var(--primary-focus); |
| } |
| |
| ::selection { |
| background-color: var(--primary-focus); |
| } |
| |
| |
| |
| |
| :where(audio, canvas, iframe, img, svg, video) { |
| vertical-align: middle; |
| } |
| |
| audio, |
| video { |
| display: inline-block; |
| } |
| |
| audio:not([controls]) { |
| display: none; |
| height: 0; |
| } |
| |
| :where(iframe) { |
| border-style: none; |
| } |
| |
| img { |
| max-width: 100%; |
| height: auto; |
| border-style: none; |
| } |
| |
| :where(svg:not([fill])) { |
| fill: currentColor; |
| } |
| |
| svg:not(#mount) { |
| overflow: hidden; |
| } |
| |
| |
| |
| |
| button { |
| margin: 0; |
| overflow: visible; |
| font-family: inherit; |
| text-transform: none; |
| } |
| |
| button, |
| [type="button"], |
| [type="reset"], |
| [type="submit"] { |
| -webkit-appearance: button; |
| } |
| |
| button { |
| display: block; |
| width: 100%; |
| margin-bottom: var(--spacing); |
| } |
| |
| [role="button"] { |
| display: inline-block; |
| text-decoration: none; |
| } |
| |
| button, |
| input[type="submit"], |
| input[type="button"], |
| input[type="reset"], |
| [role="button"] { |
| --background-color: var(--primary); |
| --border-color: var(--primary); |
| --color: var(--primary-inverse); |
| --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); |
| padding: var(--form-element-spacing-vertical) |
| var(--form-element-spacing-horizontal); |
| border: var(--border-width) solid var(--border-color); |
| border-radius: var(--border-radius); |
| outline: none; |
| background-color: var(--background-color); |
| box-shadow: var(--box-shadow); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: 1rem; |
| line-height: var(--line-height); |
| text-align: center; |
| cursor: pointer; |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| } |
| button:is([aria-current], :hover, :active, :focus), |
| input[type="submit"]:is([aria-current], :hover, :active, :focus), |
| input[type="button"]:is([aria-current], :hover, :active, :focus), |
| input[type="reset"]:is([aria-current], :hover, :active, :focus), |
| [role="button"]:is([aria-current], :hover, :active, :focus) { |
| --background-color: var(--primary-hover); |
| --border-color: var(--primary-hover); |
| --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); |
| --color: var(--primary-inverse); |
| } |
| button:focus, |
| input[type="submit"]:focus, |
| input[type="button"]:focus, |
| input[type="reset"]:focus, |
| [role="button"]:focus { |
| --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), |
| 0 0 0 var(--outline-width) var(--primary-focus); |
| } |
| |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).secondary, |
| input[type="reset"] { |
| --background-color: var(--secondary); |
| --border-color: var(--secondary); |
| --color: var(--secondary-inverse); |
| cursor: pointer; |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).secondary:is([aria-current], :hover, :active, :focus), |
| input[type="reset"]:is([aria-current], :hover, :active, :focus) { |
| --background-color: var(--secondary-hover); |
| --border-color: var(--secondary-hover); |
| --color: var(--secondary-inverse); |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).secondary:focus, |
| input[type="reset"]:focus { |
| --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), |
| 0 0 0 var(--outline-width) var(--secondary-focus); |
| } |
| |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).contrast { |
| --background-color: var(--contrast); |
| --border-color: var(--contrast); |
| --color: var(--contrast-inverse); |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).contrast:is([aria-current], :hover, :active, :focus) { |
| --background-color: var(--contrast-hover); |
| --border-color: var(--contrast-hover); |
| --color: var(--contrast-inverse); |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).contrast:focus { |
| --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), |
| 0 0 0 var(--outline-width) var(--contrast-focus); |
| } |
| |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).outline, |
| input[type="reset"].outline { |
| --background-color: transparent; |
| --color: var(--primary); |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).outline:is([aria-current], :hover, :active, :focus), |
| input[type="reset"].outline:is([aria-current], :hover, :active, :focus) { |
| --background-color: transparent; |
| --color: var(--primary-hover); |
| } |
| |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).outline.secondary, |
| input[type="reset"].outline { |
| --color: var(--secondary); |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).outline.secondary:is([aria-current], :hover, :active, :focus), |
| input[type="reset"].outline:is([aria-current], :hover, :active, :focus) { |
| --color: var(--secondary-hover); |
| } |
| |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).outline.contrast { |
| --color: var(--contrast); |
| } |
| :is( |
| button, |
| input[type="submit"], |
| input[type="button"], |
| [role="button"] |
| ).outline.contrast:is([aria-current], :hover, :active, :focus) { |
| --color: var(--contrast-hover); |
| } |
| |
| :where( |
| button, |
| [type="submit"], |
| [type="button"], |
| [type="reset"], |
| [role="button"] |
| )[disabled], |
| :where(fieldset[disabled]) |
| :is( |
| button, |
| [type="submit"], |
| [type="button"], |
| [type="reset"], |
| [role="button"] |
| ), |
| a[role="button"]:not([href]) { |
| opacity: 0.5; |
| pointer-events: none; |
| } |
| |
| |
| |
| |
| input, |
| optgroup, |
| select, |
| textarea { |
| margin: 0; |
| font-size: 1rem; |
| line-height: var(--line-height); |
| font-family: inherit; |
| letter-spacing: inherit; |
| } |
| |
| input { |
| overflow: visible; |
| } |
| |
| select { |
| text-transform: none; |
| } |
| |
| legend { |
| max-width: 100%; |
| padding: 0; |
| color: inherit; |
| white-space: normal; |
| } |
| |
| textarea { |
| overflow: auto; |
| } |
| |
| [type="checkbox"], |
| [type="radio"] { |
| padding: 0; |
| } |
| |
| ::-webkit-inner-spin-button, |
| ::-webkit-outer-spin-button { |
| height: auto; |
| } |
| |
| [type="search"] { |
| -webkit-appearance: textfield; |
| outline-offset: -2px; |
| } |
| |
| [type="search"]::-webkit-search-decoration { |
| -webkit-appearance: none; |
| } |
| |
| ::-webkit-file-upload-button { |
| -webkit-appearance: button; |
| font: inherit; |
| } |
| |
| ::-moz-focus-inner { |
| padding: 0; |
| border-style: none; |
| } |
| |
| :-moz-focusring { |
| outline: none; |
| } |
| |
| :-moz-ui-invalid { |
| box-shadow: none; |
| } |
| |
| ::-ms-expand { |
| display: none; |
| } |
| |
| [type="file"], |
| [type="range"] { |
| padding: 0; |
| border-width: 0; |
| } |
| |
| input:not([type="checkbox"], [type="radio"], [type="range"]) { |
| height: calc( |
| 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + |
| var(--border-width) * 2 |
| ); |
| } |
| |
| fieldset { |
| margin: 0; |
| margin-bottom: var(--spacing); |
| padding: 0; |
| border: 0; |
| } |
| |
| label, |
| fieldset legend { |
| display: block; |
| margin-bottom: calc(var(--spacing) * 0.25); |
| font-weight: var(--form-label-font-weight, var(--font-weight)); |
| } |
| |
| input:not([type="checkbox"], [type="radio"]), |
| select, |
| textarea { |
| width: 100%; |
| } |
| |
| input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), |
| select, |
| textarea { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| padding: var(--form-element-spacing-vertical) |
| var(--form-element-spacing-horizontal); |
| } |
| |
| input, |
| select, |
| textarea { |
| --background-color: var(--form-element-background-color); |
| --border-color: var(--form-element-border-color); |
| --color: var(--form-element-color); |
| --box-shadow: none; |
| border: var(--border-width) solid var(--border-color); |
| border-radius: var(--border-radius); |
| outline: none; |
| background-color: var(--background-color); |
| box-shadow: var(--box-shadow); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| } |
| |
| input:not( |
| [type="submit"], |
| [type="button"], |
| [type="reset"], |
| [type="checkbox"], |
| [type="radio"], |
| [readonly] |
| ):is(:active, :focus), |
| :where(select, textarea):is(:active, :focus) { |
| --background-color: var(--form-element-active-background-color); |
| } |
| |
| input:not( |
| [type="submit"], |
| [type="button"], |
| [type="reset"], |
| [role="switch"], |
| [readonly] |
| ):is(:active, :focus), |
| :where(select, textarea):is(:active, :focus) { |
| --border-color: var(--form-element-active-border-color); |
| } |
| |
| input:not( |
| [type="submit"], |
| [type="button"], |
| [type="reset"], |
| [type="range"], |
| [type="file"], |
| [readonly] |
| ):focus, |
| select:focus, |
| textarea:focus { |
| --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); |
| } |
| |
| input:not([type="submit"], [type="button"], [type="reset"])[disabled], |
| select[disabled], |
| textarea[disabled], |
| :where(fieldset[disabled]) |
| :is( |
| input:not([type="submit"], [type="button"], [type="reset"]), |
| select, |
| textarea |
| ) { |
| --background-color: var(--form-element-disabled-background-color); |
| --border-color: var(--form-element-disabled-border-color); |
| opacity: var(--form-element-disabled-opacity); |
| pointer-events: none; |
| } |
| |
| :where(input, select, textarea):not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="date"], |
| [type="datetime-local"], |
| [type="month"], |
| [type="time"], |
| [type="week"] |
| )[aria-invalid] { |
| padding-right: calc( |
| var(--form-element-spacing-horizontal) + 1.5rem |
| ) !important; |
| padding-left: var(--form-element-spacing-horizontal); |
| -webkit-padding-start: var(--form-element-spacing-horizontal) !important; |
| padding-inline-start: var(--form-element-spacing-horizontal) !important; |
| -webkit-padding-end: calc( |
| var(--form-element-spacing-horizontal) + 1.5rem |
| ) !important; |
| padding-inline-end: calc( |
| var(--form-element-spacing-horizontal) + 1.5rem |
| ) !important; |
| background-position: center right 0.75rem; |
| background-size: 1rem auto; |
| background-repeat: no-repeat; |
| } |
| :where(input, select, textarea):not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="date"], |
| [type="datetime-local"], |
| [type="month"], |
| [type="time"], |
| [type="week"] |
| )[aria-invalid="false"] { |
| background-image: var(--icon-valid); |
| } |
| :where(input, select, textarea):not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="date"], |
| [type="datetime-local"], |
| [type="month"], |
| [type="time"], |
| [type="week"] |
| )[aria-invalid="true"] { |
| background-image: var(--icon-invalid); |
| } |
| :where(input, select, textarea)[aria-invalid="false"] { |
| --border-color: var(--form-element-valid-border-color); |
| } |
| :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { |
| --border-color: var(--form-element-valid-active-border-color) !important; |
| --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important; |
| } |
| :where(input, select, textarea)[aria-invalid="true"] { |
| --border-color: var(--form-element-invalid-border-color); |
| } |
| :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { |
| --border-color: var(--form-element-invalid-active-border-color) !important; |
| --box-shadow: 0 0 0 var(--outline-width) |
| var(--form-element-invalid-focus-color) !important; |
| } |
| |
| [dir="rtl"] |
| :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( |
| [aria-invalid], |
| [aria-invalid="true"], |
| [aria-invalid="false"] |
| ) { |
| background-position: center left 0.75rem; |
| } |
| |
| input::placeholder, |
| input::-webkit-input-placeholder, |
| textarea::placeholder, |
| textarea::-webkit-input-placeholder, |
| select:invalid { |
| color: var(--form-element-placeholder-color); |
| opacity: 1; |
| } |
| |
| input:not([type="checkbox"], [type="radio"]), |
| select, |
| textarea { |
| margin-bottom: var(--spacing); |
| } |
| |
| select::-ms-expand { |
| border: 0; |
| background-color: transparent; |
| } |
| select:not([multiple], [size]) { |
| padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); |
| padding-left: var(--form-element-spacing-horizontal); |
| -webkit-padding-start: var(--form-element-spacing-horizontal); |
| padding-inline-start: var(--form-element-spacing-horizontal); |
| -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); |
| padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); |
| background-image: var(--icon-chevron); |
| background-position: center right 0.75rem; |
| background-size: 1rem auto; |
| background-repeat: no-repeat; |
| } |
| |
| [dir="rtl"] select:not([multiple], [size]) { |
| background-position: center left 0.75rem; |
| } |
| |
| :where(input, select, textarea) + small { |
| display: block; |
| width: 100%; |
| margin-top: calc(var(--spacing) * -0.75); |
| margin-bottom: var(--spacing); |
| color: var(--muted-color); |
| } |
| |
| label > :where(input, select, textarea) { |
| margin-top: calc(var(--spacing) * 0.25); |
| } |
| |
| |
| |
| |
| |
| [type="checkbox"], |
| [type="radio"] { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| width: 1.25em; |
| height: 1.25em; |
| margin-top: -0.125em; |
| margin-right: 0.375em; |
| margin-left: 0; |
| -webkit-margin-start: 0; |
| margin-inline-start: 0; |
| -webkit-margin-end: 0.375em; |
| margin-inline-end: 0.375em; |
| border-width: var(--border-width); |
| font-size: inherit; |
| vertical-align: middle; |
| cursor: pointer; |
| } |
| [type="checkbox"]::-ms-check, |
| [type="radio"]::-ms-check { |
| display: none; |
| } |
| [type="checkbox"]:checked, |
| [type="checkbox"]:checked:active, |
| [type="checkbox"]:checked:focus, |
| [type="radio"]:checked, |
| [type="radio"]:checked:active, |
| [type="radio"]:checked:focus { |
| --background-color: var(--primary); |
| --border-color: var(--primary); |
| background-image: var(--icon-checkbox); |
| background-position: center; |
| background-size: 0.75em auto; |
| background-repeat: no-repeat; |
| } |
| [type="checkbox"] ~ label, |
| [type="radio"] ~ label { |
| display: inline-block; |
| margin-right: 0.375em; |
| margin-bottom: 0; |
| cursor: pointer; |
| } |
| |
| [type="checkbox"]:indeterminate { |
| --background-color: var(--primary); |
| --border-color: var(--primary); |
| background-image: var(--icon-minus); |
| background-position: center; |
| background-size: 0.75em auto; |
| background-repeat: no-repeat; |
| } |
| |
| [type="radio"] { |
| border-radius: 50%; |
| } |
| [type="radio"]:checked, |
| [type="radio"]:checked:active, |
| [type="radio"]:checked:focus { |
| --background-color: var(--primary-inverse); |
| border-width: 0.35em; |
| background-image: none; |
| } |
| |
| [type="checkbox"][role="switch"] { |
| --background-color: var(--switch-background-color); |
| --border-color: var(--switch-background-color); |
| --color: var(--switch-color); |
| width: 2.25em; |
| height: 1.25em; |
| border: var(--border-width) solid var(--border-color); |
| border-radius: 1.25em; |
| background-color: var(--background-color); |
| line-height: 1.25em; |
| } |
| [type="checkbox"][role="switch"]:focus { |
| --background-color: var(--switch-background-color); |
| --border-color: var(--switch-background-color); |
| } |
| [type="checkbox"][role="switch"]:checked { |
| --background-color: var(--switch-checked-background-color); |
| --border-color: var(--switch-checked-background-color); |
| } |
| [type="checkbox"][role="switch"]:before { |
| display: block; |
| width: calc(1.25em - (var(--border-width) * 2)); |
| height: 100%; |
| border-radius: 50%; |
| background-color: var(--color); |
| content: ""; |
| transition: margin 0.1s ease-in-out; |
| } |
| [type="checkbox"][role="switch"]:checked { |
| background-image: none; |
| } |
| [type="checkbox"][role="switch"]:checked::before { |
| margin-left: calc(1.125em - var(--border-width)); |
| -webkit-margin-start: calc(1.125em - var(--border-width)); |
| margin-inline-start: calc(1.125em - var(--border-width)); |
| } |
| |
| [type="checkbox"][aria-invalid="false"], |
| [type="checkbox"]:checked[aria-invalid="false"], |
| [type="radio"][aria-invalid="false"], |
| [type="radio"]:checked[aria-invalid="false"], |
| [type="checkbox"][role="switch"][aria-invalid="false"], |
| [type="checkbox"][role="switch"]:checked[aria-invalid="false"] { |
| --border-color: var(--form-element-valid-border-color); |
| } |
| [type="checkbox"][aria-invalid="true"], |
| [type="checkbox"]:checked[aria-invalid="true"], |
| [type="radio"][aria-invalid="true"], |
| [type="radio"]:checked[aria-invalid="true"], |
| [type="checkbox"][role="switch"][aria-invalid="true"], |
| [type="checkbox"][role="switch"]:checked[aria-invalid="true"] { |
| --border-color: var(--form-element-invalid-border-color); |
| } |
| |
| |
| |
| |
| |
| [type="color"]::-webkit-color-swatch-wrapper { |
| padding: 0; |
| } |
| [type="color"]::-moz-focus-inner { |
| padding: 0; |
| } |
| [type="color"]::-webkit-color-swatch { |
| border: 0; |
| border-radius: calc(var(--border-radius) * 0.5); |
| } |
| [type="color"]::-moz-color-swatch { |
| border: 0; |
| border-radius: calc(var(--border-radius) * 0.5); |
| } |
| |
| input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is( |
| [type="date"], |
| [type="datetime-local"], |
| [type="month"], |
| [type="time"], |
| [type="week"] |
| ) { |
| --icon-position: 0.75rem; |
| --icon-width: 1rem; |
| padding-right: calc(var(--icon-width) + var(--icon-position)); |
| background-image: var(--icon-date); |
| background-position: center right var(--icon-position); |
| background-size: var(--icon-width) auto; |
| background-repeat: no-repeat; |
| } |
| input:not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="time"] { |
| background-image: var(--icon-time); |
| } |
| |
| [type="date"]::-webkit-calendar-picker-indicator, |
| [type="datetime-local"]::-webkit-calendar-picker-indicator, |
| [type="month"]::-webkit-calendar-picker-indicator, |
| [type="time"]::-webkit-calendar-picker-indicator, |
| [type="week"]::-webkit-calendar-picker-indicator { |
| width: var(--icon-width); |
| margin-right: calc(var(--icon-width) * -1); |
| margin-left: var(--icon-position); |
| opacity: 0; |
| } |
| |
| [dir="rtl"] |
| :is( |
| [type="date"], |
| [type="datetime-local"], |
| [type="month"], |
| [type="time"], |
| [type="week"] |
| ) { |
| text-align: right; |
| } |
| |
| [type="file"] { |
| --color: var(--muted-color); |
| padding: calc(var(--form-element-spacing-vertical) * 0.5) 0; |
| border: 0; |
| border-radius: 0; |
| background: none; |
| } |
| [type="file"]::file-selector-button { |
| --background-color: var(--secondary); |
| --border-color: var(--secondary); |
| --color: var(--secondary-inverse); |
| margin-right: calc(var(--spacing) / 2); |
| margin-left: 0; |
| -webkit-margin-start: 0; |
| margin-inline-start: 0; |
| -webkit-margin-end: calc(var(--spacing) / 2); |
| margin-inline-end: calc(var(--spacing) / 2); |
| padding: calc(var(--form-element-spacing-vertical) * 0.5) |
| calc(var(--form-element-spacing-horizontal) * 0.5); |
| border: var(--border-width) solid var(--border-color); |
| border-radius: var(--border-radius); |
| outline: none; |
| background-color: var(--background-color); |
| box-shadow: var(--box-shadow); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: 1rem; |
| line-height: var(--line-height); |
| text-align: center; |
| cursor: pointer; |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| } |
| [type="file"]::file-selector-button:is(:hover, :active, :focus) { |
| --background-color: var(--secondary-hover); |
| --border-color: var(--secondary-hover); |
| } |
| [type="file"]::-webkit-file-upload-button { |
| --background-color: var(--secondary); |
| --border-color: var(--secondary); |
| --color: var(--secondary-inverse); |
| margin-right: calc(var(--spacing) / 2); |
| margin-left: 0; |
| -webkit-margin-start: 0; |
| margin-inline-start: 0; |
| -webkit-margin-end: calc(var(--spacing) / 2); |
| margin-inline-end: calc(var(--spacing) / 2); |
| padding: calc(var(--form-element-spacing-vertical) * 0.5) |
| calc(var(--form-element-spacing-horizontal) * 0.5); |
| border: var(--border-width) solid var(--border-color); |
| border-radius: var(--border-radius); |
| outline: none; |
| background-color: var(--background-color); |
| box-shadow: var(--box-shadow); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: 1rem; |
| line-height: var(--line-height); |
| text-align: center; |
| cursor: pointer; |
| -webkit-transition: background-color var(--transition), |
| border-color var(--transition), color var(--transition), |
| box-shadow var(--transition); |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| } |
| [type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) { |
| --background-color: var(--secondary-hover); |
| --border-color: var(--secondary-hover); |
| } |
| [type="file"]::-ms-browse { |
| --background-color: var(--secondary); |
| --border-color: var(--secondary); |
| --color: var(--secondary-inverse); |
| margin-right: calc(var(--spacing) / 2); |
| margin-left: 0; |
| margin-inline-start: 0; |
| margin-inline-end: calc(var(--spacing) / 2); |
| padding: calc(var(--form-element-spacing-vertical) * 0.5) |
| calc(var(--form-element-spacing-horizontal) * 0.5); |
| border: var(--border-width) solid var(--border-color); |
| border-radius: var(--border-radius); |
| outline: none; |
| background-color: var(--background-color); |
| box-shadow: var(--box-shadow); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: 1rem; |
| line-height: var(--line-height); |
| text-align: center; |
| cursor: pointer; |
| -ms-transition: background-color var(--transition), |
| border-color var(--transition), color var(--transition), |
| box-shadow var(--transition); |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| } |
| [type="file"]::-ms-browse:is(:hover, :active, :focus) { |
| --background-color: var(--secondary-hover); |
| --border-color: var(--secondary-hover); |
| } |
| |
| [type="range"] { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| width: 100%; |
| height: 1.25rem; |
| background: none; |
| } |
| [type="range"]::-webkit-slider-runnable-track { |
| width: 100%; |
| height: 0.25rem; |
| border-radius: var(--border-radius); |
| background-color: var(--range-border-color); |
| -webkit-transition: background-color var(--transition), |
| box-shadow var(--transition); |
| transition: background-color var(--transition), box-shadow var(--transition); |
| } |
| [type="range"]::-moz-range-track { |
| width: 100%; |
| height: 0.25rem; |
| border-radius: var(--border-radius); |
| background-color: var(--range-border-color); |
| -moz-transition: background-color var(--transition), |
| box-shadow var(--transition); |
| transition: background-color var(--transition), box-shadow var(--transition); |
| } |
| [type="range"]::-ms-track { |
| width: 100%; |
| height: 0.25rem; |
| border-radius: var(--border-radius); |
| background-color: var(--range-border-color); |
| -ms-transition: background-color var(--transition), |
| box-shadow var(--transition); |
| transition: background-color var(--transition), box-shadow var(--transition); |
| } |
| [type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 1.25rem; |
| height: 1.25rem; |
| margin-top: -0.5rem; |
| border: 2px solid var(--range-thumb-border-color); |
| border-radius: 50%; |
| background-color: var(--range-thumb-color); |
| cursor: pointer; |
| -webkit-transition: background-color var(--transition), |
| transform var(--transition); |
| transition: background-color var(--transition), transform var(--transition); |
| } |
| [type="range"]::-moz-range-thumb { |
| -webkit-appearance: none; |
| width: 1.25rem; |
| height: 1.25rem; |
| margin-top: -0.5rem; |
| border: 2px solid var(--range-thumb-border-color); |
| border-radius: 50%; |
| background-color: var(--range-thumb-color); |
| cursor: pointer; |
| -moz-transition: background-color var(--transition), |
| transform var(--transition); |
| transition: background-color var(--transition), transform var(--transition); |
| } |
| [type="range"]::-ms-thumb { |
| -webkit-appearance: none; |
| width: 1.25rem; |
| height: 1.25rem; |
| margin-top: -0.5rem; |
| border: 2px solid var(--range-thumb-border-color); |
| border-radius: 50%; |
| background-color: var(--range-thumb-color); |
| cursor: pointer; |
| -ms-transition: background-color var(--transition), |
| transform var(--transition); |
| transition: background-color var(--transition), transform var(--transition); |
| } |
| [type="range"]:hover, |
| [type="range"]:focus { |
| --range-border-color: var(--range-active-border-color); |
| --range-thumb-color: var(--range-thumb-hover-color); |
| } |
| [type="range"]:active { |
| --range-thumb-color: var(--range-thumb-active-color); |
| } |
| [type="range"]:active::-webkit-slider-thumb { |
| transform: scale(1.25); |
| } |
| [type="range"]:active::-moz-range-thumb { |
| transform: scale(1.25); |
| } |
| [type="range"]:active::-ms-thumb { |
| transform: scale(1.25); |
| } |
| |
| input:not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="search"] { |
| -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); |
| padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); |
| border-radius: 5rem; |
| background-image: var(--icon-search); |
| background-position: center left 1.125rem; |
| background-size: 1rem auto; |
| background-repeat: no-repeat; |
| } |
| input:not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="search"][aria-invalid] { |
| -webkit-padding-start: calc( |
| var(--form-element-spacing-horizontal) + 1.75rem |
| ) !important; |
| padding-inline-start: calc( |
| var(--form-element-spacing-horizontal) + 1.75rem |
| ) !important; |
| background-position: center left 1.125rem, center right 0.75rem; |
| } |
| input:not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="search"][aria-invalid="false"] { |
| background-image: var(--icon-search), var(--icon-valid); |
| } |
| input:not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="search"][aria-invalid="true"] { |
| background-image: var(--icon-search), var(--icon-invalid); |
| } |
| |
| [type="search"]::-webkit-search-cancel-button { |
| -webkit-appearance: none; |
| display: none; |
| } |
| |
| [dir="rtl"] |
| :where(input):not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="search"] { |
| background-position: center right 1.125rem; |
| } |
| [dir="rtl"] |
| :where(input):not( |
| [type="checkbox"], |
| [type="radio"], |
| [type="range"], |
| [type="file"] |
| )[type="search"][aria-invalid] { |
| background-position: center right 1.125rem, center left 0.75rem; |
| } |
| |
| |
| |
| |
| :where(table) { |
| width: 100%; |
| border-collapse: collapse; |
| border-spacing: 0; |
| text-indent: 0; |
| } |
| |
| th, |
| td { |
| padding: calc(var(--spacing) / 2) var(--spacing); |
| border-bottom: var(--border-width) solid var(--table-border-color); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: var(--font-size); |
| text-align: left; |
| text-align: start; |
| } |
| |
| tfoot th, |
| tfoot td { |
| border-top: var(--border-width) solid var(--table-border-color); |
| border-bottom: 0; |
| } |
| |
| table[role="grid"] tbody tr:nth-child(odd) { |
| background-color: var(--table-row-stripped-background-color); |
| } |
| |
| |
| |
| |
| pre, |
| code, |
| kbd, |
| samp { |
| font-size: 0.875em; |
| font-family: var(--font-family); |
| } |
| |
| pre { |
| -ms-overflow-style: scrollbar; |
| overflow: auto; |
| } |
| |
| pre, |
| code, |
| kbd { |
| border-radius: var(--border-radius); |
| background: var(--code-background-color); |
| color: var(--code-color); |
| font-weight: var(--font-weight); |
| line-height: initial; |
| } |
| |
| code, |
| kbd { |
| display: inline-block; |
| padding: 0.375rem 0.5rem; |
| } |
| |
| pre { |
| display: block; |
| margin-bottom: var(--spacing); |
| overflow-x: auto; |
| } |
| pre > code { |
| display: block; |
| padding: var(--spacing); |
| background: none; |
| font-size: 14px; |
| line-height: var(--line-height); |
| } |
| |
| code b { |
| color: var(--code-tag-color); |
| font-weight: var(--font-weight); |
| } |
| code i { |
| color: var(--code-property-color); |
| font-style: normal; |
| } |
| code u { |
| color: var(--code-value-color); |
| text-decoration: none; |
| } |
| code em { |
| color: var(--code-comment-color); |
| font-style: normal; |
| } |
| |
| kbd { |
| background-color: var(--code-kbd-background-color); |
| color: var(--code-kbd-color); |
| vertical-align: baseline; |
| } |
| |
| |
| |
| |
| hr { |
| height: 0; |
| border: 0; |
| border-top: 1px solid var(--muted-border-color); |
| color: inherit; |
| } |
| |
| [hidden], |
| template { |
| display: none !important; |
| } |
| |
| canvas { |
| display: inline-block; |
| } |
| |
| |
| |
| |
| details { |
| display: block; |
| margin-bottom: var(--spacing); |
| padding-bottom: var(--spacing); |
| border-bottom: var(--border-width) solid var(--accordion-border-color); |
| } |
| details summary { |
| line-height: 1rem; |
| list-style-type: none; |
| cursor: pointer; |
| transition: color var(--transition); |
| } |
| details summary:not([role]) { |
| color: var(--accordion-close-summary-color); |
| } |
| details summary::-webkit-details-marker { |
| display: none; |
| } |
| details summary::marker { |
| display: none; |
| } |
| details summary::-moz-list-bullet { |
| list-style-type: none; |
| } |
| details summary::after { |
| display: block; |
| width: 1rem; |
| height: 1rem; |
| -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5); |
| margin-inline-start: calc(var(--spacing, 1rem) * 0.5); |
| float: right; |
| transform: rotate(-90deg); |
| background-image: var(--icon-chevron); |
| background-position: right center; |
| background-size: 1rem auto; |
| background-repeat: no-repeat; |
| content: ""; |
| transition: transform var(--transition); |
| } |
| details summary:focus { |
| outline: none; |
| } |
| details summary:focus:not([role="button"]) { |
| color: var(--accordion-active-summary-color); |
| } |
| details summary[role="button"] { |
| width: 100%; |
| text-align: left; |
| } |
| details summary[role="button"]::after { |
| height: calc(1rem * var(--line-height, 1.5)); |
| background-image: var(--icon-chevron-button); |
| } |
| details summary[role="button"]:not(.outline).contrast::after { |
| background-image: var(--icon-chevron-button-inverse); |
| } |
| details[open] > summary { |
| margin-bottom: calc(var(--spacing)); |
| } |
| details[open] > summary:not([role]):not(:focus) { |
| color: var(--accordion-open-summary-color); |
| } |
| details[open] > summary::after { |
| transform: rotate(0); |
| } |
| |
| [dir="rtl"] details summary { |
| text-align: right; |
| } |
| [dir="rtl"] details summary::after { |
| float: left; |
| background-position: left center; |
| } |
| |
| |
| |
| |
| article { |
| margin: var(--block-spacing-vertical) 0; |
| padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); |
| border-radius: var(--border-radius); |
| background: var(--card-background-color); |
| box-shadow: var(--card-box-shadow); |
| } |
| article > header, |
| article > footer { |
| margin-right: calc(var(--block-spacing-horizontal) * -1); |
| margin-left: calc(var(--block-spacing-horizontal) * -1); |
| padding: calc(var(--block-spacing-vertical) * 0.66) |
| var(--block-spacing-horizontal); |
| background-color: var(--card-sectionning-background-color); |
| } |
| article > header { |
| margin-top: calc(var(--block-spacing-vertical) * -1); |
| margin-bottom: var(--block-spacing-vertical); |
| border-bottom: var(--border-width) solid var(--card-border-color); |
| border-top-right-radius: var(--border-radius); |
| border-top-left-radius: var(--border-radius); |
| } |
| article > footer { |
| margin-top: var(--block-spacing-vertical); |
| margin-bottom: calc(var(--block-spacing-vertical) * -1); |
| border-top: var(--border-width) solid var(--card-border-color); |
| border-bottom-right-radius: var(--border-radius); |
| border-bottom-left-radius: var(--border-radius); |
| } |
| |
| |
| |
| |
| #mount { |
| --scrollbar-width: 0px; |
| } |
| |
| dialog { |
| display: flex; |
| z-index: 999; |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| align-items: center; |
| justify-content: center; |
| width: inherit; |
| min-width: 100%; |
| height: inherit; |
| min-height: 100%; |
| padding: var(--spacing); |
| border: 0; |
| -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter); |
| backdrop-filter: var(--modal-overlay-backdrop-filter); |
| background-color: var(--modal-overlay-background-color); |
| color: var(--color); |
| } |
| dialog article { |
| max-height: calc(100vh - var(--spacing) * 2); |
| overflow: auto; |
| } |
| @media (min-width: 576px) { |
| dialog article { |
| max-width: 510px; |
| } |
| } |
| @media (min-width: 768px) { |
| dialog article { |
| max-width: 700px; |
| } |
| } |
| dialog article > header, |
| dialog article > footer { |
| padding: calc(var(--block-spacing-vertical) * 0.5) |
| var(--block-spacing-horizontal); |
| } |
| dialog article > header .close { |
| margin: 0; |
| margin-left: var(--spacing); |
| float: right; |
| } |
| dialog article > footer { |
| text-align: right; |
| } |
| dialog article > footer [role="button"] { |
| margin-bottom: 0; |
| } |
| dialog article > footer [role="button"]:not(:first-of-type) { |
| margin-left: calc(var(--spacing) * 0.5); |
| } |
| dialog article p:last-of-type { |
| margin: 0; |
| } |
| dialog article .close { |
| display: block; |
| width: 1rem; |
| height: 1rem; |
| margin-top: calc(var(--block-spacing-vertical) * -0.5); |
| margin-bottom: var(--typography-spacing-vertical); |
| margin-left: auto; |
| background-image: var(--icon-close); |
| background-position: center; |
| background-size: auto 1rem; |
| background-repeat: no-repeat; |
| opacity: 0.5; |
| transition: opacity var(--transition); |
| } |
| dialog article .close:is([aria-current], :hover, :active, :focus) { |
| opacity: 1; |
| } |
| dialog:not([open]), |
| dialog[open="false"] { |
| display: none; |
| } |
| |
| .modal-is-open { |
| padding-right: var(--scrollbar-width, 0px); |
| overflow: hidden; |
| pointer-events: none; |
| } |
| .modal-is-open dialog { |
| pointer-events: auto; |
| } |
| |
| :where(.modal-is-opening, .modal-is-closing) dialog, |
| :where(.modal-is-opening, .modal-is-closing) dialog > article { |
| animation-duration: 0.2s; |
| animation-timing-function: ease-in-out; |
| animation-fill-mode: both; |
| } |
| :where(.modal-is-opening, .modal-is-closing) dialog { |
| animation-duration: 0.8s; |
| animation-name: modal-overlay; |
| } |
| :where(.modal-is-opening, .modal-is-closing) dialog > article { |
| animation-delay: 0.2s; |
| animation-name: modal; |
| } |
| |
| .modal-is-closing dialog, |
| .modal-is-closing dialog > article { |
| animation-delay: 0s; |
| animation-direction: reverse; |
| } |
| |
| @keyframes modal-overlay { |
| from { |
| -webkit-backdrop-filter: none; |
| backdrop-filter: none; |
| background-color: transparent; |
| } |
| } |
| @keyframes modal { |
| from { |
| transform: translateY(-100%); |
| opacity: 0; |
| } |
| } |
| |
| |
| |
| :where(nav li)::before { |
| float: left; |
| content: ""; |
| } |
| |
| nav, |
| nav ul { |
| display: flex; |
| } |
| |
| nav { |
| justify-content: space-between; |
| } |
| nav ol, |
| nav ul { |
| align-items: center; |
| margin-bottom: 0; |
| padding: 0; |
| list-style: none; |
| } |
| nav ol:first-of-type, |
| nav ul:first-of-type { |
| margin-left: calc(var(--nav-element-spacing-horizontal) * -1); |
| } |
| nav ol:last-of-type, |
| nav ul:last-of-type { |
| margin-right: calc(var(--nav-element-spacing-horizontal) * -1); |
| } |
| nav li { |
| display: inline-block; |
| margin: 0; |
| padding: var(--nav-element-spacing-vertical) |
| var(--nav-element-spacing-horizontal); |
| } |
| nav li > * { |
| --spacing: 0; |
| } |
| nav :where(a, [role="link"]) { |
| display: inline-block; |
| margin: calc(var(--nav-link-spacing-vertical) * -1) |
| calc(var(--nav-link-spacing-horizontal) * -1); |
| padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); |
| border-radius: var(--border-radius); |
| text-decoration: none; |
| } |
| nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) { |
| text-decoration: none; |
| } |
| nav[aria-label="breadcrumb"] { |
| align-items: center; |
| justify-content: start; |
| } |
| nav[aria-label="breadcrumb"] ul li:not(:first-child) { |
| -webkit-margin-start: var(--nav-link-spacing-horizontal); |
| margin-inline-start: var(--nav-link-spacing-horizontal); |
| } |
| nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after { |
| position: absolute; |
| width: calc(var(--nav-link-spacing-horizontal) * 2); |
| -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2); |
| margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); |
| content: "/"; |
| color: var(--muted-color); |
| text-align: center; |
| } |
| nav[aria-label="breadcrumb"] a[aria-current] { |
| background-color: transparent; |
| color: inherit; |
| text-decoration: none; |
| pointer-events: none; |
| } |
| nav [role="button"] { |
| margin-right: inherit; |
| margin-left: inherit; |
| padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); |
| } |
| |
| aside nav, |
| aside ol, |
| aside ul, |
| aside li { |
| display: block; |
| } |
| aside li { |
| padding: calc(var(--nav-element-spacing-vertical) * 0.5) |
| var(--nav-element-spacing-horizontal); |
| } |
| aside li a { |
| display: block; |
| } |
| aside li [role="button"] { |
| margin: inherit; |
| } |
| |
| [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after { |
| content: "\\"; |
| } |
| |
| |
| |
| |
| progress { |
| display: inline-block; |
| vertical-align: baseline; |
| } |
| |
| progress { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| display: inline-block; |
| appearance: none; |
| width: 100%; |
| height: 0.5rem; |
| margin-bottom: calc(var(--spacing) * 0.5); |
| overflow: hidden; |
| border: 0; |
| border-radius: var(--border-radius); |
| background-color: var(--progress-background-color); |
| color: var(--progress-color); |
| } |
| progress::-webkit-progress-bar { |
| border-radius: var(--border-radius); |
| background: none; |
| } |
| progress[value]::-webkit-progress-value { |
| background-color: var(--progress-color); |
| } |
| progress::-moz-progress-bar { |
| background-color: var(--progress-color); |
| } |
| @media (prefers-reduced-motion: no-preference) { |
| progress:indeterminate { |
| background: var(--progress-background-color) |
| linear-gradient( |
| to right, |
| var(--progress-color) 30%, |
| var(--progress-background-color) 30% |
| ) |
| top left/150% 150% no-repeat; |
| animation: progress-indeterminate 1s linear infinite; |
| } |
| progress:indeterminate[value]::-webkit-progress-value { |
| background-color: transparent; |
| } |
| progress:indeterminate::-moz-progress-bar { |
| background-color: transparent; |
| } |
| } |
| |
| @media (prefers-reduced-motion: no-preference) { |
| [dir="rtl"] progress:indeterminate { |
| animation-direction: reverse; |
| } |
| } |
| |
| @keyframes progress-indeterminate { |
| 0% { |
| background-position: 200% 0; |
| } |
| 100% { |
| background-position: -200% 0; |
| } |
| } |
| |
| |
| |
| details[role="list"], |
| li[role="list"] { |
| position: relative; |
| } |
| |
| details[role="list"] summary + ul, |
| li[role="list"] > ul { |
| display: flex; |
| z-index: 99; |
| position: absolute; |
| top: auto; |
| right: 0; |
| left: 0; |
| flex-direction: column; |
| margin: 0; |
| padding: 0; |
| border: var(--border-width) solid var(--dropdown-border-color); |
| border-radius: var(--border-radius); |
| border-top-right-radius: 0; |
| border-top-left-radius: 0; |
| background-color: var(--dropdown-background-color); |
| box-shadow: var(--card-box-shadow); |
| color: var(--dropdown-color); |
| white-space: nowrap; |
| } |
| details[role="list"] summary + ul li, |
| li[role="list"] > ul li { |
| width: 100%; |
| margin-bottom: 0; |
| padding: calc(var(--form-element-spacing-vertical) * 0.5) |
| var(--form-element-spacing-horizontal); |
| list-style: none; |
| } |
| details[role="list"] summary + ul li:first-of-type, |
| li[role="list"] > ul li:first-of-type { |
| margin-top: calc(var(--form-element-spacing-vertical) * 0.5); |
| } |
| details[role="list"] summary + ul li:last-of-type, |
| li[role="list"] > ul li:last-of-type { |
| margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); |
| } |
| details[role="list"] summary + ul li a, |
| li[role="list"] > ul li a { |
| display: block; |
| margin: calc(var(--form-element-spacing-vertical) * -0.5) |
| calc(var(--form-element-spacing-horizontal) * -1); |
| padding: calc(var(--form-element-spacing-vertical) * 0.5) |
| var(--form-element-spacing-horizontal); |
| overflow: hidden; |
| color: var(--dropdown-color); |
| text-decoration: none; |
| text-overflow: ellipsis; |
| } |
| details[role="list"] summary + ul li a:hover, |
| li[role="list"] > ul li a:hover { |
| background-color: var(--dropdown-hover-background-color); |
| } |
| |
| details[role="list"] summary::after, |
| li[role="list"] > a::after { |
| display: block; |
| width: 1rem; |
| height: calc(1rem * var(--line-height, 1.5)); |
| -webkit-margin-start: 0.5rem; |
| margin-inline-start: 0.5rem; |
| float: right; |
| transform: rotate(0deg); |
| background-position: right center; |
| background-size: 1rem auto; |
| background-repeat: no-repeat; |
| content: ""; |
| } |
| |
| details[role="list"] { |
| padding: 0; |
| border-bottom: none; |
| } |
| details[role="list"] summary { |
| margin-bottom: 0; |
| } |
| details[role="list"] summary:not([role]) { |
| height: calc( |
| 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + |
| var(--border-width) * 2 |
| ); |
| padding: var(--form-element-spacing-vertical) |
| var(--form-element-spacing-horizontal); |
| border: var(--border-width) solid var(--form-element-border-color); |
| border-radius: var(--border-radius); |
| background-color: var(--form-element-background-color); |
| color: var(--form-element-placeholder-color); |
| line-height: inherit; |
| cursor: pointer; |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| } |
| details[role="list"] summary:not([role]):active, |
| details[role="list"] summary:not([role]):focus { |
| border-color: var(--form-element-active-border-color); |
| background-color: var(--form-element-active-background-color); |
| } |
| details[role="list"] summary:not([role]):focus { |
| box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); |
| } |
| details[role="list"][open] summary { |
| border-bottom-right-radius: 0; |
| border-bottom-left-radius: 0; |
| } |
| details[role="list"][open] summary::before { |
| display: block; |
| z-index: 1; |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| background: none; |
| content: ""; |
| cursor: default; |
| } |
| |
| nav details[role="list"] summary, |
| nav li[role="list"] a { |
| display: flex; |
| direction: ltr; |
| } |
| |
| nav details[role="list"] summary + ul, |
| nav li[role="list"] > ul { |
| min-width: -moz-fit-content; |
| min-width: fit-content; |
| border-radius: var(--border-radius); |
| } |
| nav details[role="list"] summary + ul li a, |
| nav li[role="list"] > ul li a { |
| border-radius: 0; |
| } |
| |
| nav details[role="list"] summary, |
| nav details[role="list"] summary:not([role]) { |
| height: auto; |
| padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); |
| } |
| nav details[role="list"][open] summary { |
| border-radius: var(--border-radius); |
| } |
| nav details[role="list"] summary + ul { |
| margin-top: var(--outline-width); |
| -webkit-margin-start: 0; |
| margin-inline-start: 0; |
| } |
| nav details[role="list"] summary[role="link"] { |
| margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); |
| line-height: var(--line-height); |
| } |
| nav details[role="list"] summary[role="link"] + ul { |
| margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); |
| -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); |
| margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); |
| } |
| |
| li[role="list"]:hover > ul, |
| li[role="list"] a:active ~ ul, |
| li[role="list"] a:focus ~ ul { |
| display: flex; |
| } |
| li[role="list"] > ul { |
| display: none; |
| margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); |
| -webkit-margin-start: calc( |
| var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) |
| ); |
| margin-inline-start: calc( |
| var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) |
| ); |
| } |
| li[role="list"] > a::after { |
| background-image: var(--icon-chevron); |
| } |
| |
| |
| |
| |
| [aria-busy="true"] { |
| cursor: progress; |
| } |
| |
| [aria-busy="true"]:not(input, select, textarea)::before { |
| display: inline-block; |
| width: 1em; |
| height: 1em; |
| border: 0.1875em solid currentColor; |
| border-radius: 1em; |
| border-right-color: transparent; |
| content: ""; |
| vertical-align: text-bottom; |
| vertical-align: -0.125em; |
| animation: spinner 0.75s linear infinite; |
| opacity: var(--loading-spinner-opacity); |
| } |
| [aria-busy="true"]:not(input, select, textarea):not(:empty)::before { |
| margin-right: calc(var(--spacing) * 0.5); |
| margin-left: 0; |
| -webkit-margin-start: 0; |
| margin-inline-start: 0; |
| -webkit-margin-end: calc(var(--spacing) * 0.5); |
| margin-inline-end: calc(var(--spacing) * 0.5); |
| } |
| [aria-busy="true"]:not(input, select, textarea):empty { |
| text-align: center; |
| } |
| |
| button[aria-busy="true"], |
| input[type="submit"][aria-busy="true"], |
| input[type="button"][aria-busy="true"], |
| input[type="reset"][aria-busy="true"], |
| a[aria-busy="true"] { |
| pointer-events: none; |
| } |
| |
| @keyframes spinner { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| |
| |
| |
| [data-tooltip] { |
| position: relative; |
| } |
| [data-tooltip]:not(a, button, input) { |
| border-bottom: 1px dotted; |
| text-decoration: none; |
| cursor: help; |
| } |
| [data-tooltip][data-placement="top"]::before, |
| [data-tooltip][data-placement="top"]::after, |
| [data-tooltip]::before, |
| [data-tooltip]::after { |
| display: block; |
| z-index: 99; |
| position: absolute; |
| bottom: 100%; |
| left: 50%; |
| padding: 0.25rem 0.5rem; |
| overflow: hidden; |
| transform: translate(-50%, -0.25rem); |
| border-radius: var(--border-radius); |
| background: var(--tooltip-background-color); |
| content: attr(data-tooltip); |
| color: var(--tooltip-color); |
| font-style: normal; |
| font-weight: var(--font-weight); |
| font-size: 0.875rem; |
| text-decoration: none; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| opacity: 0; |
| pointer-events: none; |
| } |
| [data-tooltip][data-placement="top"]::after, |
| [data-tooltip]::after { |
| padding: 0; |
| transform: translate(-50%, 0rem); |
| border-top: 0.3rem solid; |
| border-right: 0.3rem solid transparent; |
| border-left: 0.3rem solid transparent; |
| border-radius: 0; |
| background-color: transparent; |
| content: ""; |
| color: var(--tooltip-background-color); |
| } |
| [data-tooltip][data-placement="bottom"]::before, |
| [data-tooltip][data-placement="bottom"]::after { |
| top: 100%; |
| bottom: auto; |
| transform: translate(-50%, 0.25rem); |
| } |
| [data-tooltip][data-placement="bottom"]:after { |
| transform: translate(-50%, -0.3rem); |
| border: 0.3rem solid transparent; |
| border-bottom: 0.3rem solid; |
| } |
| [data-tooltip][data-placement="left"]::before, |
| [data-tooltip][data-placement="left"]::after { |
| top: 50%; |
| right: 100%; |
| bottom: auto; |
| left: auto; |
| transform: translate(-0.25rem, -50%); |
| } |
| [data-tooltip][data-placement="left"]:after { |
| transform: translate(0.3rem, -50%); |
| border: 0.3rem solid transparent; |
| border-left: 0.3rem solid; |
| } |
| [data-tooltip][data-placement="right"]::before, |
| [data-tooltip][data-placement="right"]::after { |
| top: 50%; |
| right: auto; |
| bottom: auto; |
| left: 100%; |
| transform: translate(0.25rem, -50%); |
| } |
| [data-tooltip][data-placement="right"]:after { |
| transform: translate(-0.3rem, -50%); |
| border: 0.3rem solid transparent; |
| border-right: 0.3rem solid; |
| } |
| [data-tooltip]:focus::before, |
| [data-tooltip]:focus::after, |
| [data-tooltip]:hover::before, |
| [data-tooltip]:hover::after { |
| opacity: 1; |
| } |
| @media (hover: hover) and (pointer: fine) { |
| [data-tooltip][data-placement="bottom"]:focus::before, |
| [data-tooltip][data-placement="bottom"]:focus::after, |
| [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before, |
| [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after, |
| [data-tooltip]:hover::before, |
| [data-tooltip]:hover::after { |
| animation-duration: 0.2s; |
| animation-name: tooltip-slide-top; |
| } |
| [data-tooltip][data-placement="bottom"]:focus::after, |
| [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after, |
| [data-tooltip]:hover::after { |
| animation-name: tooltip-caret-slide-top; |
| } |
| [data-tooltip][data-placement="bottom"]:focus::before, |
| [data-tooltip][data-placement="bottom"]:focus::after, |
| [data-tooltip][data-placement="bottom"]:hover::before, |
| [data-tooltip][data-placement="bottom"]:hover::after { |
| animation-duration: 0.2s; |
| animation-name: tooltip-slide-bottom; |
| } |
| [data-tooltip][data-placement="bottom"]:focus::after, |
| [data-tooltip][data-placement="bottom"]:hover::after { |
| animation-name: tooltip-caret-slide-bottom; |
| } |
| [data-tooltip][data-placement="left"]:focus::before, |
| [data-tooltip][data-placement="left"]:focus::after, |
| [data-tooltip][data-placement="left"]:hover::before, |
| [data-tooltip][data-placement="left"]:hover::after { |
| animation-duration: 0.2s; |
| animation-name: tooltip-slide-left; |
| } |
| [data-tooltip][data-placement="left"]:focus::after, |
| [data-tooltip][data-placement="left"]:hover::after { |
| animation-name: tooltip-caret-slide-left; |
| } |
| [data-tooltip][data-placement="right"]:focus::before, |
| [data-tooltip][data-placement="right"]:focus::after, |
| [data-tooltip][data-placement="right"]:hover::before, |
| [data-tooltip][data-placement="right"]:hover::after { |
| animation-duration: 0.2s; |
| animation-name: tooltip-slide-right; |
| } |
| [data-tooltip][data-placement="right"]:focus::after, |
| [data-tooltip][data-placement="right"]:hover::after { |
| animation-name: tooltip-caret-slide-right; |
| } |
| } |
| @keyframes tooltip-slide-top { |
| from { |
| transform: translate(-50%, 0.75rem); |
| opacity: 0; |
| } |
| to { |
| transform: translate(-50%, -0.25rem); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-caret-slide-top { |
| from { |
| opacity: 0; |
| } |
| 50% { |
| transform: translate(-50%, -0.25rem); |
| opacity: 0; |
| } |
| to { |
| transform: translate(-50%, 0rem); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-slide-bottom { |
| from { |
| transform: translate(-50%, -0.75rem); |
| opacity: 0; |
| } |
| to { |
| transform: translate(-50%, 0.25rem); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-caret-slide-bottom { |
| from { |
| opacity: 0; |
| } |
| 50% { |
| transform: translate(-50%, -0.5rem); |
| opacity: 0; |
| } |
| to { |
| transform: translate(-50%, -0.3rem); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-slide-left { |
| from { |
| transform: translate(0.75rem, -50%); |
| opacity: 0; |
| } |
| to { |
| transform: translate(-0.25rem, -50%); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-caret-slide-left { |
| from { |
| opacity: 0; |
| } |
| 50% { |
| transform: translate(0.05rem, -50%); |
| opacity: 0; |
| } |
| to { |
| transform: translate(0.3rem, -50%); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-slide-right { |
| from { |
| transform: translate(-0.75rem, -50%); |
| opacity: 0; |
| } |
| to { |
| transform: translate(0.25rem, -50%); |
| opacity: 1; |
| } |
| } |
| @keyframes tooltip-caret-slide-right { |
| from { |
| opacity: 0; |
| } |
| 50% { |
| transform: translate(-0.05rem, -50%); |
| opacity: 0; |
| } |
| to { |
| transform: translate(-0.3rem, -50%); |
| opacity: 1; |
| } |
| } |
| |
| |
| |
| |
| [aria-controls] { |
| cursor: pointer; |
| } |
| |
| [aria-disabled="true"], |
| [disabled] { |
| cursor: not-allowed; |
| } |
| |
| [aria-hidden="false"][hidden] { |
| display: initial; |
| } |
| |
| [aria-hidden="false"][hidden]:not(:focus) { |
| clip: rect(0, 0, 0, 0); |
| position: absolute; |
| } |
| |
| a, |
| area, |
| button, |
| input, |
| label, |
| select, |
| summary, |
| textarea, |
| [tabindex] { |
| -ms-touch-action: manipulation; |
| } |
| |
| [dir="rtl"] { |
| direction: rtl; |
| } |
| |
| |
| |
| |
| @media (prefers-reduced-motion: reduce) { |
| *:not([aria-busy="true"]), |
| :not([aria-busy="true"])::before, |
| :not([aria-busy="true"])::after { |
| background-attachment: initial !important; |
| animation-duration: 1ms !important; |
| animation-delay: -1ms !important; |
| animation-iteration-count: 1 !important; |
| scroll-behavior: auto !important; |
| transition-delay: 0s !important; |
| transition-duration: 0s !important; |
| } |
| } |
| |
| #mount { |
| |
| --primary: #ea4c89; |
| --primary-hover: #f082ac; |
| --icon-xia: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMDAyOTEgOS42Nzk4M0wzLjgzMzM5IDUuNTEyMjFMMy4wMjUzOSA2LjMxOTgzTDguMDAzMjkgMTEuMjk1MUwxMi45NzYyIDYuMzE5ODNMMTIuMTY3OSA1LjUxMjIxTDguMDAyOTEgOS42Nzk4M1oiIGZpbGw9IiM4MzgzODMiLz4KPC9nPgo8L3N2Zz4K"); |
| --switch-checked-background-color: var(--primary); |
| } |
| |
| [data-theme="light"], |
| #mount:not([data-theme="dark"]) { |
| --primary: #e23c7c; |
| --primary-hover: #f082ac; |
| } |
| |
| [data-theme="dark"] { |
| --primary: #e23c7c; |
| --primary-hover: #f082ac; |
| } |
| |
| [data-theme="light"] { |
| --primary: #ea4c89; |
| --primary-hover: #f082ac; |
| } |
| |
| li.select-link.select-link:hover > ul { |
| display: none; |
| } |
| li.select-link.select-link > ul { |
| display: none; |
| } |
| li.select-link.select-link a:focus ~ ul { |
| display: none; |
| } |
| |
| li.select-link.select-link a:active ~ ul { |
| display: none; |
| } |
| li.select-link-active.select-link-active > ul { |
| display: flex; |
| } |
| li.select-link-active.select-link-active:hover > ul { |
| display: flex; |
| } |
| |
| li.select-link-active.select-link-active a:focus ~ ul { |
| display: flex; |
| } |
| |
| li.select-link-active.select-link-active a:active ~ ul { |
| display: flex; |
| } |
| ul.select-link-ul.select-link-ul { |
| right: 0px; |
| left: auto; |
| } |
| |
| a.select-link-selected { |
| background-color: var(--primary-focus); |
| } |
| .immersive-translate-no-select { |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| |
| |
| |
| |
| |
| li[role="list"].no-arrow { |
| margin-left: 8px; |
| padding-right: 0; |
| } |
| li[role="list"] > a::after { |
| -webkit-margin-start: 0.2rem; |
| margin-inline-start: 0.2rem; |
| } |
| |
| li[role="list"].no-arrow > a, |
| li[role="list"].no-arrow > a:link, |
| li[role="list"].no-arrow > a:visited { |
| color: var(--secondary); |
| } |
| |
| select.min-select { |
| --form-element-spacing-horizontal: 0; |
| margin-bottom: 4px; |
| max-width: 128px; |
| overflow: hidden; |
| color: var(--primary); |
| font-size: 13px; |
| border: none; |
| padding: 0; |
| padding-right: 20px; |
| padding-left: 8px; |
| text-overflow: ellipsis; |
| color: var(--color); |
| } |
| select.min-select-secondary { |
| color: var(--color); |
| } |
| select.min-select:focus { |
| outline: none; |
| border: none; |
| --box-shadow: none; |
| } |
| select.min-select-no-arrow { |
| background-image: none; |
| padding-right: 0; |
| } |
| |
| select.min-select-left { |
| padding-right: 0px; |
| |
| |
| text-overflow: ellipsis; |
| text-align: left; |
| } |
| |
| .muted { |
| color: var(--muted-color); |
| } |
| |
| .select.button-select { |
| --background-color: var(--secondary-hover); |
| --border-color: var(--secondary-hover); |
| --color: var(--secondary-inverse); |
| cursor: pointer; |
| --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); |
| padding: var(--form-element-spacing-vertical) |
| var(--form-element-spacing-horizontal); |
| border: var(--border-width) solid var(--border-color); |
| border-radius: var(--border-radius); |
| outline: none; |
| background-color: var(--background-color); |
| box-shadow: var(--box-shadow); |
| color: var(--color); |
| font-weight: var(--font-weight); |
| font-size: 16px; |
| line-height: var(--line-height); |
| text-align: center; |
| cursor: pointer; |
| transition: background-color var(--transition), border-color var(--transition), |
| color var(--transition), box-shadow var(--transition); |
| -webkit-appearance: button; |
| margin: 0; |
| margin-bottom: 0px; |
| overflow: visible; |
| font-family: inherit; |
| text-transform: none; |
| } |
| |
| body { |
| padding: 0; |
| margin: 0 auto; |
| min-width: 268px; |
| border-radius: 10px; |
| } |
| |
| .popup-container { |
| font-size: 16px; |
| --font-size: 16px; |
| color: #666; |
| background-color: var(--popup-footer-background-color); |
| width: 316px; |
| min-width: 316px; |
| } |
| |
| .popup-content { |
| background-color: var(--popup-content-background-color); |
| border-radius: 0px 0px 12px 12px; |
| padding: 16px 20px; |
| } |
| |
| .immersive-translate-popup-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| height: 100%; |
| width: 100%; |
| touch-action: none; |
| } |
| |
| .immersive-translate-popup-wrapper { |
| background: var(--background-color); |
| border-radius: 10px; |
| border: 1px solid var(--muted-border-color); |
| } |
| |
| #mount { |
| --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", |
| "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", |
| "Segoe UI Symbol", "Noto Color Emoji"; |
| --line-height: 1.5; |
| --font-weight: 400; |
| --font-size: 16px; |
| --border-radius: 4px; |
| --border-width: 1px; |
| --outline-width: 3px; |
| --spacing: 16px; |
| --typography-spacing-vertical: 24px; |
| --block-spacing-vertical: calc(var(--spacing) * 2); |
| --block-spacing-horizontal: var(--spacing); |
| --grid-spacing-vertical: 0; |
| --grid-spacing-horizontal: var(--spacing); |
| --form-element-spacing-vertical: 12px; |
| --form-element-spacing-horizontal: 16px; |
| --nav-element-spacing-vertical: 16px; |
| --nav-element-spacing-horizontal: 8px; |
| --nav-link-spacing-vertical: 8px; |
| --nav-link-spacing-horizontal: 8px; |
| --form-label-font-weight: var(--font-weight); |
| --transition: 0.2s ease-in-out; |
| --modal-overlay-backdrop-filter: blur(4px); |
| } |
| |
| [data-theme="light"], |
| #mount:not([data-theme="dark"]) { |
| --popup-footer-background-color: #e8eaeb; |
| --popup-content-background-color: #ffffff; |
| --popup-item-background-color: #f3f5f6; |
| --popup-item-hover-background-color: #eaeced; |
| --popup-trial-pro-background-color: #f9fbfc; |
| --text-black-2: #222222; |
| --text-gray-2: #222222; |
| --text-gray-6: #666666; |
| --text-gray-9: #999999; |
| --text-gray-c2: #c2c2c2; |
| --service-select-content-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.2); |
| --service-select-border-color: #fafafa; |
| --service-select-selected-background-color: #f3f5f6; |
| --download-app-background: #f3f5f6; |
| } |
| |
| @media only screen and (prefers-color-scheme: dark) { |
| #mount:not([data-theme="light"]) { |
| --popup-footer-background-color: #0d0d0d; |
| --popup-content-background-color: #191919; |
| --popup-item-background-color: #272727; |
| --popup-item-hover-background-color: #333333; |
| --popup-trial-pro-background-color: #222222; |
| --text-black-2: #ffffff; |
| --text-gray-2: #dbdbdb; |
| --text-gray-6: #b3b3b3; |
| --text-gray-9: #777777; |
| --text-gray-c2: #5b5b5b; |
| --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9); |
| --service-select-border-color: #2c2c2c; |
| --service-select-selected-background-color: #333333; |
| --download-app-background: #333; |
| } |
| } |
| |
| [data-theme="dark"] { |
| --popup-footer-background-color: #0d0d0d; |
| --popup-content-background-color: #191919; |
| --popup-item-background-color: #272727; |
| --popup-item-hover-background-color: #333333; |
| --popup-trial-pro-background-color: #222222; |
| --text-black-2: #ffffff; |
| --text-gray-2: #dbdbdb; |
| --text-gray-6: #b3b3b3; |
| --text-gray-9: #777777; |
| --text-gray-c2: #5b5b5b; |
| --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9); |
| --service-select-border-color: #2c2c2c; |
| --service-select-selected-background-color: #333333; |
| --download-app-background: #333; |
| } |
| |
| .text-balck { |
| color: var(--text-black-2); |
| } |
| |
| .text-gray-2 { |
| color: var(--text-gray-2); |
| } |
| |
| .text-gray-6 { |
| color: var(--text-gray-6); |
| } |
| |
| .text-gray-9 { |
| color: var(--text-gray-9); |
| } |
| |
| .text-gray-c2 { |
| color: var(--text-gray-c2); |
| } |
| |
| #mount { |
| min-width: 268px; |
| } |
| |
| .main-button { |
| font-size: 15px; |
| vertical-align: middle; |
| border-radius: 12px; |
| padding: unset; |
| height: 44px; |
| line-height: 44px; |
| } |
| |
| .pt-4 { |
| padding-top: 16px; |
| } |
| |
| .p-2 { |
| padding: 8px; |
| } |
| |
| .pl-5 { |
| padding-left: 48px; |
| } |
| |
| .p-0 { |
| padding: 0; |
| } |
| |
| .pl-2 { |
| padding-left: 8px; |
| } |
| |
| .pl-4 { |
| padding-left: 24px; |
| } |
| |
| .pt-2 { |
| padding-top: 8px; |
| } |
| |
| .pb-2 { |
| padding-bottom: 8px; |
| } |
| |
| .pb-4 { |
| padding-bottom: 16px; |
| } |
| |
| .pb-5 { |
| padding-bottom: 20px; |
| } |
| |
| .pr-5 { |
| padding-right: 48px; |
| } |
| |
| .text-sm { |
| font-size: 13px; |
| } |
| |
| .text-base { |
| font-size: 16px; |
| } |
| |
| .w-full { |
| width: 100%; |
| } |
| |
| .flex { |
| display: flex; |
| } |
| |
| .flex-row { |
| flex-direction: row; |
| } |
| |
| .flex-wrap { |
| flex-wrap: wrap; |
| } |
| |
| .flex-end { |
| justify-content: flex-end; |
| } |
| |
| .flex-grow { |
| flex-grow: 1; |
| } |
| |
| .justify-between { |
| justify-content: space-between; |
| } |
| |
| .mb-0 { |
| margin-bottom: 0px; |
| } |
| |
| .mb-2 { |
| margin-bottom: 8px; |
| } |
| |
| .mb-4 { |
| margin-bottom: 16px; |
| } |
| |
| .mb-3 { |
| margin-bottom: 12px; |
| } |
| |
| .inline-block { |
| display: inline-block; |
| } |
| |
| .py-2 { |
| padding-top: 8px; |
| padding-bottom: 8px; |
| } |
| |
| .py-2-5 { |
| padding-top: 6px; |
| padding-bottom: 6px; |
| } |
| |
| .mt-0 { |
| margin-top: 0; |
| } |
| |
| .mt-2 { |
| margin-top: 8px; |
| } |
| |
| .mt-3 { |
| margin-top: 12px; |
| } |
| |
| .mt-4 { |
| margin-top: 16px; |
| } |
| |
| .mt-5 { |
| margin-top: 20px; |
| } |
| |
| .mt-6 { |
| margin-top: 24px; |
| } |
| |
| .mb-1 { |
| margin-bottom: 4px; |
| } |
| |
| .ml-4 { |
| margin-left: 24px; |
| } |
| |
| .ml-3 { |
| margin-left: 16px; |
| } |
| |
| .ml-2 { |
| margin-left: 8px; |
| } |
| |
| .ml-1 { |
| margin-left: 4px; |
| } |
| |
| .mr-1 { |
| margin-right: 4px; |
| } |
| |
| .mr-2 { |
| margin-right: 8px; |
| } |
| |
| .mr-3 { |
| margin-right: 16px; |
| } |
| |
| .mx-2 { |
| margin-left: 8px; |
| margin-right: 8px; |
| } |
| |
| .pl-3 { |
| padding-left: 12px; |
| } |
| |
| .pr-3 { |
| padding-right: 12px; |
| } |
| |
| .p-3 { |
| padding: 12px; |
| } |
| |
| .px-1 { |
| padding-left: 4px; |
| padding-right: 4px; |
| } |
| |
| .px-3 { |
| padding-left: 12px; |
| padding-right: 12px; |
| } |
| |
| .pt-3 { |
| padding-top: 12px; |
| } |
| |
| .px-6 { |
| padding-left: 18px; |
| padding-right: 18px; |
| } |
| |
| .px-4 { |
| padding-left: 16px; |
| padding-right: 16px; |
| } |
| |
| .pt-6 { |
| padding-top: 20px; |
| } |
| |
| .py-3 { |
| padding-top: 12px; |
| padding-bottom: 12px; |
| } |
| |
| .py-0 { |
| padding-top: 0; |
| padding-bottom: 0; |
| } |
| |
| .left-auto { |
| left: auto !important; |
| } |
| |
| .max-h-28 { |
| max-height: 112px; |
| } |
| |
| .max-h-30 { |
| max-height: 120px; |
| } |
| |
| .overflow-y-scroll { |
| overflow-y: scroll; |
| } |
| |
| .text-xs { |
| font-size: 12px; |
| } |
| |
| .flex-1 { |
| flex: 1; |
| } |
| |
| .flex-3 { |
| flex: 3; |
| } |
| |
| .flex-4 { |
| flex: 4; |
| } |
| |
| .flex-2 { |
| flex: 2; |
| } |
| |
| .items-center { |
| align-items: center; |
| } |
| |
| .max-content { |
| width: max-content; |
| } |
| |
| .justify-center { |
| justify-content: center; |
| } |
| |
| .items-end { |
| align-items: flex-end; |
| } |
| |
| .items-baseline { |
| align-items: baseline; |
| } |
| |
| .my-5 { |
| margin-top: 48px; |
| margin-bottom: 48px; |
| } |
| |
| .my-4 { |
| margin-top: 24px; |
| margin-bottom: 24px; |
| } |
| |
| .my-3 { |
| margin-top: 16px; |
| margin-bottom: 16px; |
| } |
| |
| .pt-3 { |
| padding-top: 12px; |
| } |
| |
| .px-3 { |
| padding-left: 12px; |
| padding-right: 12px; |
| } |
| |
| .pt-2 { |
| padding-top: 8px; |
| } |
| |
| .px-2 { |
| padding-left: 8px; |
| padding-right: 8px; |
| } |
| |
| .pt-1 { |
| padding-top: 4px; |
| } |
| |
| .px-1 { |
| padding-left: 4px; |
| padding-right: 4px; |
| } |
| |
| .pb-2 { |
| padding-bottom: 8px; |
| } |
| |
| .justify-end { |
| justify-content: flex-end; |
| } |
| |
| .w-auto { |
| width: auto; |
| } |
| |
| .shrink-0 { |
| flex-shrink: 0; |
| } |
| |
| select.language-select, |
| select.translate-service, |
| select.min-select { |
| --form-element-spacing-horizontal: 0; |
| margin-bottom: 0px; |
| max-width: unset; |
| flex: 1; |
| overflow: hidden; |
| font-size: 13px; |
| border: none; |
| border-radius: 8px; |
| padding-right: 30px; |
| padding-left: 0px; |
| background-position: center right 12px; |
| background-size: 16px auto; |
| background-image: var(--icon-xia); |
| text-overflow: ellipsis; |
| color: var(--text-gray-2); |
| background-color: transparent; |
| box-shadow: unset !important; |
| cursor: pointer; |
| } |
| |
| select.more { |
| background-position: center right; |
| padding-right: 20px; |
| } |
| |
| select.transform-padding-left { |
| padding-left: 12px; |
| transform: translateX(-12px); |
| background-position: center right 0px; |
| } |
| |
| select.translate-service { |
| color: var(--text-black-2); |
| } |
| |
| .min-select-container.disabled { |
| opacity: 0.5; |
| pointer-events: none; |
| } |
| |
| |
| @media (prefers-color-scheme: dark) { |
| select.language-select option, |
| select.translate-service option, |
| select.min-select option { |
| background-color: #666666; |
| } |
| } |
| |
| .text-overflow-ellipsis { |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| .max-w-20 { |
| max-width: 180px; |
| white-space: nowrap; |
| } |
| |
| select.min-select-secondary { |
| color: var(--color); |
| } |
| |
| select.min-select:focus { |
| outline: none; |
| border: none; |
| --box-shadow: none; |
| } |
| |
| select.min-select-no-arrow { |
| background-image: none; |
| padding-right: 0; |
| } |
| |
| select.min-select-left { |
| padding-right: 0px; |
| |
| |
| text-overflow: ellipsis; |
| text-align: left; |
| } |
| |
| .popup-footer { |
| background-color: var(--popup-footer-background-color); |
| height: 40px; |
| } |
| |
| .text-right { |
| text-align: right; |
| } |
| |
| .clickable { |
| cursor: pointer; |
| } |
| |
| .close { |
| cursor: pointer; |
| width: 16px; |
| height: 16px; |
| background-image: var(--icon-close); |
| background-position: center; |
| background-size: auto 1rem; |
| background-repeat: no-repeat; |
| opacity: 0.5; |
| transition: opacity var(--transition); |
| } |
| |
| .padding-two-column { |
| padding-left: 40px; |
| padding-right: 40px; |
| } |
| |
| .muted { |
| color: #999; |
| } |
| |
| .text-label { |
| color: #666; |
| } |
| |
| .display-none { |
| display: none; |
| } |
| |
| |
| @media (prefers-color-scheme: dark) { |
| .text-label { |
| color: #9ca3af; |
| } |
| } |
| |
| .text-decoration-none { |
| text-decoration: none; |
| } |
| |
| .text-decoration-none:is([aria-current], :hover, :active, :focus), |
| [role="link"]:is([aria-current], :hover, :active, :focus) { |
| --text-decoration: none !important; |
| background-color: transparent !important; |
| } |
| |
| .language-select-container { |
| position: relative; |
| width: 100%; |
| background-color: var(--popup-item-background-color); |
| height: 55px; |
| border-radius: 12px; |
| } |
| |
| select.language-select { |
| color: var(--text-black-2); |
| font-size: 14px; |
| padding: 8px 24px 24px 16px; |
| position: absolute; |
| border-radius: 12px; |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| } |
| |
| select.text-gray-6 { |
| color: var(--text-gray-6); |
| } |
| |
| .language-select-container label { |
| position: absolute; |
| bottom: 10px; |
| left: 16px; |
| font-size: 12px; |
| color: var(--text-gray-9); |
| line-height: 12px; |
| margin: 0; |
| } |
| |
| .translation-service-container { |
| background-color: var(--popup-item-background-color); |
| border-radius: 12px; |
| } |
| |
| .min-select-container { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| height: 44px; |
| background-color: var(--popup-item-background-color); |
| padding-left: 16px; |
| } |
| |
| .min-select-container:first-child { |
| border-top-left-radius: 10px; |
| border-top-right-radius: 10px; |
| } |
| |
| .min-select-container:last-child { |
| border-bottom-left-radius: 10px; |
| border-bottom-right-radius: 10px; |
| } |
| |
| .min-select-container:only-child { |
| border-radius: 10px; |
| } |
| |
| .translate-mode { |
| width: 44px; |
| height: 44px; |
| border-radius: 22px; |
| background-color: var(--popup-item-background-color); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| cursor: pointer; |
| } |
| |
| .translate-mode svg { |
| fill: var(--text-gray-2); |
| } |
| |
| .widgets-container { |
| display: flex; |
| align-items: stretch; |
| justify-content: space-between; |
| width: 100%; |
| gap: 9px; |
| } |
| |
| |
| .widgets-container.widgets-two-items { |
| gap: 16px; |
| } |
| |
| .widgets-container.widgets-two-items .widget-item { |
| flex: 0 1 auto; |
| min-width: 93px; |
| max-width: 120px; |
| } |
| |
| .widget-item { |
| display: flex; |
| max-width: 93px; |
| flex-direction: row; |
| align-items: center; |
| justify-content: center; |
| background-color: var(--popup-item-background-color); |
| font-size: 12px; |
| min-height: 44px; |
| height: 100%; |
| border-radius: 8px; |
| cursor: pointer; |
| flex: 1; |
| padding: 8px 4px; |
| text-align: center; |
| } |
| |
| .widget-icon-text { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| color: var(--text-gray-2); |
| } |
| |
| .widgets-container svg { |
| fill: var(--text-gray-2); |
| color: var(--text-gray-2); |
| } |
| |
| .share-button-container { |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| padding: 2px 3px 0 8px; |
| } |
| |
| .share-button-container svg { |
| fill: var(--text-gray-9); |
| } |
| |
| .min-select-container:hover, |
| .language-select-container:hover, |
| .widget-item:hover, |
| .translate-mode:hover { |
| background-color: var(--popup-item-hover-background-color); |
| } |
| |
| .main-button:hover { |
| background-color: #f5508f; |
| } |
| |
| .share-button-container:hover { |
| background-color: var(--popup-item-background-color); |
| border-radius: 6px; |
| } |
| |
| .error-boundary { |
| background: #fff2f0; |
| border: 1px solid #ffccc7; |
| display: flex; |
| padding: 12px; |
| font-size: 14px; |
| color: rgba(0, 0, 0, 0.88); |
| word-break: break-all; |
| margin: 12px; |
| border-radius: 12px; |
| flex-direction: column; |
| } |
| |
| .upgrade-pro { |
| border-radius: 11px; |
| background: linear-gradient(57deg, #272727 19.8%, #696969 82.2%); |
| padding: 2px 8px; |
| transform: scale(0.85); |
| } |
| |
| .upgrade-pro span { |
| background: linear-gradient(180deg, #ffeab4 17.65%, #f8c235 85.29%); |
| background-clip: text; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| font-size: 12px; |
| margin-left: 4px; |
| } |
| |
| .upgrade-pro svg { |
| margin-top: -2px; |
| } |
| |
| .upgrade-pro:hover { |
| background: linear-gradient(57deg, #3d3d3d 19.8%, #949494 82.2%); |
| } |
| |
| .border-bottom-radius-0 { |
| border-bottom-left-radius: 0 !important; |
| border-bottom-right-radius: 0 !important; |
| } |
| |
| .trial-pro-container { |
| border-radius: 0px 0px 12px 12px; |
| background: var(--popup-trial-pro-background-color); |
| display: flex; |
| align-items: center; |
| height: 44px; |
| padding-left: 16px; |
| padding-right: 12px; |
| font-size: 12px; |
| } |
| |
| .trial-pro-container label { |
| line-height: 13px; |
| color: var(--text-black-2); |
| } |
| |
| .trial-pro-container img { |
| margin-left: 5px; |
| } |
| |
| .cursor-pointer { |
| cursor: pointer; |
| } |
| |
| .upgrade-pro-discount-act { |
| height: 25px; |
| display: flex; |
| padding: 0 4px; |
| align-items: center; |
| border-radius: 15px; |
| background: linear-gradient( |
| 90deg, |
| #cefbfa 11.33%, |
| #d7f56f 63.75%, |
| #fccd5e 100% |
| ); |
| transform: scale(0.9); |
| box-shadow: 0px 1.8px 3.6px 0px rgba(0, 0, 0, 0.1); |
| cursor: pointer; |
| } |
| |
| .upgrade-pro-discount-act span { |
| font-size: 12px; |
| font-weight: 700; |
| margin-left: 4px; |
| color: #222222; |
| } |
| |
| .upgrade-pro-discount-act:hover { |
| text-decoration: unset; |
| background: linear-gradient( |
| 90deg, |
| #e2fffe 11.33%, |
| #e6ff91 63.75%, |
| #ffdf93 100% |
| ); |
| } |
| |
| .custom-select-container { |
| width: 200px; |
| position: relative; |
| flex: 1; |
| } |
| |
| #translation-service-select { |
| padding-right: 12px; |
| padding-left: 6px; |
| } |
| |
| .custom-select-content { |
| border-radius: 12px; |
| background: var(--popup-content-background-color); |
| box-shadow: var(--service-select-content-shadow); |
| border: 1px solid var(--service-select-border-color); |
| padding: 4px 5px; |
| position: absolute; |
| left: -10px; |
| right: 0; |
| z-index: 100; |
| overflow-y: auto; |
| } |
| |
| .custom-select-item.default { |
| width: 100%; |
| padding: 0; |
| } |
| |
| .custom-select-item { |
| font-size: 13px; |
| padding: 5px 6px; |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| cursor: pointer; |
| color: var(--text-black-2); |
| width: auto; |
| overflow: hidden; |
| height: 30px; |
| line-height: 30px; |
| } |
| |
| .custom-select-item-img { |
| width: 20px; |
| height: 20px; |
| margin-right: 4px; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .custom-select-item-img { |
| margin-right: 6px; |
| } |
| } |
| |
| .custom-select-content .custom-select-item.selected, |
| .custom-select-content .custom-select-item:hover { |
| background: var(--service-select-selected-background-color); |
| } |
| |
| .custom-select-item > span { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .custom-select-item-pro { |
| font-size: 12px; |
| margin-left: 6px; |
| display: flex; |
| } |
| |
| .custom-select-item-pro img { |
| margin: 0 3px; |
| width: 20px; |
| flex-shrink: 0; |
| } |
| |
| .custom-select-group-header { |
| font-size: 12px; |
| font-weight: 500; |
| color: var(--text-gray-9); |
| padding: 6px 8px 4px; |
| margin-top: 2px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .more-container { |
| position: relative; |
| } |
| |
| .new-menu-indicator { |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| background-color: #ef3434; |
| border-radius: 50%; |
| right: 18px; |
| top: 4px; |
| } |
| |
| .download-app { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| border-radius: 8px; |
| background: var(--download-app-background); |
| padding: 4px 8px; |
| color: var(--text-gray-6); |
| font-size: 12px; |
| cursor: pointer; |
| transition: all 0.2s ease-in-out; |
| } |
| |
| |
| @keyframes popup-fade-in { |
| from { |
| opacity: 0; |
| transform: translateY(10px) scale(0.95); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| } |
| |
| @keyframes popup-fade-out { |
| from { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| to { |
| opacity: 0; |
| transform: translateY(10px) scale(0.95); |
| } |
| } |
| |
| .popup-generic-content { |
| animation: popup-fade-in 0.2s ease-out; |
| } |
| |
| .popup-generic-content.hiding { |
| animation: popup-fade-out 0.15s ease-in; |
| } |
| |
| html { |
| font-size: 17px; |
| } |
| |
| @media print { |
| .imt-fb-container { |
| display: none !important; |
| } |
| } |
| |
| #mount#mount { |
| position: absolute; |
| display: none; |
| min-width: 250px; |
| height: auto; |
| --font-size: 17px; |
| font-size: 17px; |
| } |
| |
| |
| .imt-fb-container { |
| position: fixed; |
| padding: 0; |
| top: 335px; |
| width: fit-content; |
| display: flex; |
| flex-direction: column; |
| display: none; |
| direction: ltr; |
| } |
| |
| .imt-fb-container.left { |
| align-items: flex-start; |
| left: 0; |
| } |
| |
| .imt-fb-container.right { |
| align-items: flex-end; |
| right: 0; |
| } |
| |
| .imt-fb-btn { |
| cursor: pointer; |
| background: var(--float-ball-more-button-background-color); |
| height: 36px; |
| width: 56px; |
| box-shadow: 2px 6px 10px 0px #0e121629; |
| } |
| |
| .imt-fb-btn.left { |
| border-top-right-radius: 36px; |
| border-bottom-right-radius: 36px; |
| } |
| |
| .imt-fb-btn.right { |
| border-top-left-radius: 36px; |
| border-bottom-left-radius: 36px; |
| } |
| |
| .imt-fb-btn div { |
| background: var(--float-ball-more-button-background-color); |
| height: 36px; |
| width: 54px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .imt-fb-btn.left div { |
| border-top-right-radius: 34px; |
| border-bottom-right-radius: 34px; |
| justify-content: flex-end; |
| } |
| |
| .imt-fb-btn.right div { |
| border-top-left-radius: 34px; |
| border-bottom-left-radius: 34px; |
| } |
| |
| .imt-fb-logo-img { |
| width: 20px; |
| height: 20px; |
| margin: 0 10px; |
| } |
| |
| .imt-fb-logo-img-big-bg { |
| width: 28px; |
| height: 28px; |
| margin: 0; |
| padding: 4px; |
| background-color: #ed6d8f; |
| border-radius: 50%; |
| margin: 0 5px; |
| } |
| |
| .imt-float-ball-translated { |
| position: absolute; |
| width: 11px; |
| height: 11px; |
| bottom: 4px; |
| right: 20px; |
| } |
| |
| .btn-animate { |
| -webkit-transform: translate3d(0, 0, 0); |
| transform: translate3d(0, 0, 0); |
| -webkit-transition: -webkit-transform ease-out 250ms; |
| transition: -webkit-transform ease-out 250ms; |
| transition: transform ease-out 250ms; |
| transition: transform ease-out 250ms, -webkit-transform ease-out 250ms; |
| } |
| |
| .imt-fb-setting-btn { |
| margin-right: 18px; |
| width: 28px; |
| height: 28px; |
| } |
| |
| .immersive-translate-popup-wrapper { |
| background: var(--background-color); |
| border-radius: 20px; |
| box-shadow: 2px 10px 24px 0px #0e121614; |
| border: none; |
| } |
| |
| .popup-container { |
| border-radius: 20px; |
| } |
| |
| .popup-content { |
| border-radius: 20px 20px 12px 12px; |
| } |
| .popup-footer { |
| border-radius: 20px; |
| } |
| |
| .imt-fb-close-button { |
| pointer-events: all; |
| cursor: pointer; |
| position: absolute; |
| margin-top: -10px; |
| } |
| |
| .imt-fb-close-content { |
| padding: 22px; |
| width: 320px; |
| pointer-events: all; |
| } |
| |
| .imt-fb-close-title { |
| font-weight: 500; |
| color: var(--h2-color); |
| } |
| |
| .imt-fb-close-radio-content { |
| background-color: var(--background-light-green); |
| padding: 8px 20px; |
| } |
| |
| .imt-fb-radio-sel, |
| .imt-fb-radio-nor { |
| width: 16px; |
| height: 16px; |
| border-radius: 8px; |
| flex-shrink: 0; |
| } |
| |
| .imt-fb-radio-sel { |
| border: 2px solid var(--primary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .imt-fb-radio-sel div { |
| width: 8px; |
| height: 8px; |
| border-radius: 4px; |
| background-color: var(--primary); |
| } |
| |
| .imt-fb-radio-nor { |
| border: 2px solid #d3d4d6; |
| } |
| |
| .imt-fb-primary-btn { |
| background-color: var(--primary); |
| width: 72px; |
| height: 32px; |
| color: white; |
| border-radius: 8px; |
| text-align: center; |
| line-height: 32px; |
| font-size: 16px; |
| cursor: pointer; |
| } |
| |
| .imt-fb-default-btn { |
| border: 1px solid var(--primary); |
| width: 72px; |
| height: 32px; |
| border-radius: 8px; |
| color: var(--primary); |
| line-height: 32px; |
| text-align: center; |
| font-size: 16px; |
| cursor: pointer; |
| } |
| |
| .imt-fb-guide-container { |
| width: 312px; |
| transform: translateY(-45%); |
| } |
| |
| .imt-fb-guide-bg { |
| position: absolute; |
| left: 30px; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| z-index: -1; |
| height: 100%; |
| width: 90%; |
| } |
| |
| .imt-fb-guide-bg.left { |
| transform: scaleX(-1); |
| } |
| |
| .imt-fb-guide-content { |
| margin: 16px -30px 80px 0px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .imt-fb-guide-content.left { |
| margin: 16px 21px 60px 32px; |
| } |
| |
| .imt-fb-guide-img { |
| width: 220px; |
| height: 112px; |
| } |
| |
| .imt-fb-guide-message { |
| font-size: 14px; |
| line-height: 28px; |
| color: #333333; |
| white-space: pre-wrap; |
| text-align: center; |
| font-weight: 700; |
| margin-bottom: 20px; |
| } |
| |
| .imt-manga-guide-message { |
| font-size: 16px; |
| line-height: 24px; |
| color: #333333; |
| text-align: center; |
| font-weight: 500; |
| margin-bottom: 12px; |
| } |
| |
| .imt-fb-guide-button { |
| margin-top: 16px; |
| line-height: 40px; |
| height: 40px; |
| padding: 0 20px; |
| width: unset; |
| } |
| |
| .imt-fb-more-buttons { |
| box-shadow: 0px 2px 10px 0px #00000014; |
| border: none; |
| background: var(--float-ball-more-button-background-color); |
| width: 36px; |
| display: flex; |
| flex-direction: column; |
| border-radius: 18px; |
| margin-top: 0px; |
| padding: 7px 0 7px 0; |
| } |
| |
| .imt-fb-more-buttons > div { |
| margin: auto; |
| } |
| |
| .imt-fb-side, |
| .imt-fb-reward { |
| border-radius: 50%; |
| cursor: pointer; |
| pointer-events: all; |
| position: relative; |
| } |
| |
| .imt-fb-side { |
| margin: 10px 0; |
| } |
| |
| .imt-fb-new-badge { |
| width: 26px; |
| height: 14px; |
| padding: 3px; |
| background-color: #f53f3f; |
| border-radius: 4px; |
| position: absolute; |
| top: -5px; |
| right: 15px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .imt-fb-side *, |
| .imt-fb-reward * { |
| pointer-events: all; |
| } |
| |
| .imt-fb-more-button { |
| width: 36px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| } |
| |
| .immersive-translate-sheet { |
| position: fixed; |
| transform: translateY(100%); |
| |
| left: 0; |
| right: 0; |
| background-color: white; |
| transition: transform 0.3s ease-out; |
| |
| box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1); |
| |
| bottom: 0; |
| border-top-left-radius: 16px; |
| border-top-right-radius: 16px; |
| overflow: hidden; |
| } |
| |
| .immersive-translate-sheet.visible { |
| transform: translateY(0); |
| } |
| |
| .immersive-translate-sheet-backdrop { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0, 0, 0, 0.5); |
| opacity: 0; |
| transition: opacity 0.3s ease-out; |
| } |
| |
| .immersive-translate-sheet-backdrop.visible { |
| opacity: 1; |
| } |
| |
| .popup-container-sheet { |
| max-width: 100vw; |
| width: 100vw; |
| } |
| |
| .imt-no-events svg * { |
| pointer-events: none !important; |
| } |
| |
| .imt-manga-button { |
| width: 36px; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| pointer-events: all; |
| margin: 0 0 10px 0; |
| background-color: var(--float-ball-more-button-background-color); |
| border-radius: 18px; |
| filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.08)); |
| opacity: 0.5; |
| right: 8px; |
| padding: 10px 0 4px 0; |
| } |
| |
| .imt-manga-feedback { |
| cursor: pointer; |
| margin-bottom: 10px; |
| } |
| |
| .imt-fb-feedback { |
| cursor: pointer; |
| margin-top: 10px; |
| } |
| |
| .imt-fb-upgrade-button { |
| cursor: pointer; |
| margin-top: 10px; |
| } |
| |
| .imt-manga-button:hover { |
| opacity: 1; |
| } |
| |
| .imt-manga-translated { |
| position: absolute; |
| left: 24px; |
| top: 20px; |
| } |
| |
| .imt-float-ball-loading { |
| animation: imt-loading-animation 0.6s infinite linear !important; |
| } |
| |
| .imt-manga-guide-bg { |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| z-index: -1; |
| width: 372px; |
| transform: translateY(-50%); |
| } |
| .imt-manga-guide-content { |
| position: absolute; |
| top: 15px; |
| left: 0; |
| right: 0; |
| margin: 0 40px 0; |
| } |
| |
| .img-manga-guide-button { |
| width: fit-content; |
| margin: 0 auto; |
| } |
| |
| .img-manga-close { |
| position: absolute; |
| bottom: -200px; |
| width: 32px; |
| height: 32px; |
| left: 0; |
| right: 0; |
| margin: auto; |
| cursor: pointer; |
| } |
| |
| .imt-fb-container.dragging .imt-fb-more-buttons, |
| .imt-fb-container.dragging .imt-manga-button, |
| .imt-fb-container.dragging .btn-animate:not(.imt-fb-btn) { |
| display: none !important; |
| } |
| |
| .imt-fb-container.dragging .imt-fb-btn { |
| border-radius: 50% !important; |
| width: 36px !important; |
| height: 36px !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| cursor: move !important; |
| } |
| |
| .imt-fb-container.dragging .imt-fb-btn div { |
| border-radius: 50% !important; |
| width: 36px !important; |
| height: 36px !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| margin: 0 !important; |
| } |
| |
| .imt-fb-container.dragging .imt-fb-btn.left, |
| .imt-fb-container.dragging .imt-fb-btn.right { |
| border-radius: 50% !important; |
| } |
| |
| .imt-fb-container.dragging .imt-fb-btn.left div, |
| .imt-fb-container.dragging .imt-fb-btn.right div { |
| border-radius: 50% !important; |
| } |
| |
| .imt-fb-container.dragging .imt-fb-logo-img { |
| margin: 0 !important; |
| padding: 4px !important; |
| } |
| |
| .imt-fb-container.dragging .imt-float-ball-translated { |
| right: 2px !important; |
| bottom: 2px !important; |
| } |
| |
| @-webkit-keyframes imt-loading-animation { |
| from { |
| -webkit-transform: rotate(0deg); |
| } |
| |
| to { |
| -webkit-transform: rotate(359deg); |
| } |
| } |
| |
| @keyframes imt-loading-animation { |
| from { |
| transform: rotate(0deg); |
| } |
| |
| to { |
| transform: rotate(359deg); |
| } |
| } |
| |
| .imt-fb-icon { |
| color: #666666; |
| } |
| |
| [data-theme="dark"] .imt-fb-icon { |
| color: #B3B3B3; |
| } |
| |
| [data-theme="light"] .imt-fb-icon { |
| color: #666666; |
| } |
| </style><div id="mount" style="display: block;"><div hidden="" id="immersive-translate-popup-overlay" class="immersive-translate-popup-overlay" style="z-index: 2147483647; background-color: rgba(0, 0, 0, 0.5);"><div class="immersive-translate-popup-wrapper" style="position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div></template></div></html> |
