/* Quick History/Spectrum switches — top-left, part of the meter (scrolls with it) */ #quick-toggles{ position: absolute; left: 18px; top: 16px; z-index: 40; /* below the settings panel (50) so it doesn't cover it */ display: flex; flex-direction: column; gap: 14px; } /* collapse button — hides the whole left panel (state not persisted) */ #qt-collapse{ align-self: center; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: #2a2d33; color: #cfd3d9; border: 1px solid #3a3d44; border-radius: 6px; cursor: pointer; outline: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } #qt-collapse:hover{ background: #343842; } #qt-collapse .material-icons{ font-size: 20px; } /* colored when the panel is collapsed, so the lone button reads as "show" */ #quick-toggles.collapsed #qt-collapse{ background: #40E0D0; color: #14342f; border-color: #40E0D0; } #quick-toggles.collapsed #qt-collapse:hover{ background: #5fe9dc; } #qt-body{ display: flex; flex-direction: column; gap: 14px; } #quick-toggles.collapsed #qt-body{ display: none; } .qt-item{ display: flex; flex-direction: column-reverse; /* control on top, label underneath */ align-items: center; gap: 6px; } .qt-label{ color: #8a9099; font-weight: 700; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; } #quick-toggles .toggle{ margin-bottom: 0; } /* Calibrate / Export PDF — gray icon buttons with labels underneath, like the switches */ .qt-actions{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); /* divider between the switches and the action buttons */ } .qt-btn{ width: 38px; height: 34px; padding: 0; -webkit-tap-highlight-color: transparent; } .qt-btn .material-icons{ font-size: 19px; } /* Export fills gold while pressed */ #export-pdf:active{ background: #E7B43C; border-color: #E7B43C; color: #4a2f00; } body, html{ font-family: 'Open Sans', sans-serif; } /* Embed wrapper. position:relative makes it the containing block for the meter's absolutely-positioned elements (so they anchor here, not the page viewport). Its height is set by sizeEmbed() in JS to fit the currently-visible content, so the Divi column grows/shrinks to match — like the file meter. The dark background lives here (not on body) so it doesn't tint the whole Divi page. */ #ylm-app{ position: relative; width: 100%; overflow: hidden; /* Transparent on purpose — inherits the Divi section's background, same as the file meter. The dark look for standalone/local viewing comes from the inline style (which Divi strips). Don't set a background on `body` in this stylesheet: that would darken the whole WordPress page. */ background: transparent; /* Floor so the meter is visible before sizeEmbed() runs (and even if the JS fails to load) — JS grows this to fit the full content. Without it an absolute-only container is 0px tall and clips everything. */ min-height: 520px; } /* Form controls don't inherit font-family by default — force them to use the page font everywhere */ button, input, textarea, select{ font-family: inherit; } /* Wrapper around all the meter elements. Full-width by default so the meter (positioned with right:50%) stays centered; in the wide-screen media query it becomes a fixed left column so the meter shifts left and the graph sits beside it. */ #meter-wrap { position: absolute; top: 0; left: 0; right: 0; } /* @font-face { font-family: 'inherit'; src: url('https://fonts.googleapis.com/css?family=Lato:400,700'); } */ /* Here we are gonna add style meter --------------------------------------------------------------------*/ #meter { position: absolute; top:5px; right:50%; margin-right: -45px; } /* Here we are gonna add style for click behaviour --------------------------------------------------------------------*/ #average, #hold-max, .settings-icon, .reset-icon{ -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } /* #average:hover, #hold-max:hover, .settings-icon:hover, .reset-icon:hover{ color: LightSkyBlue; } */ #average:active, #hold-max:active, .settings-icon:active, .reset-icon:active{ color: rgb(180, 180, 180); } /* Here we are gonna add style settings button --------------------------------------------------------------------*/ .settings-icon{ font-size: 40px; transition: transform 0.18s ease; } #settings_button { position: absolute; top:15px; right:50%; margin-right: -126px; color: #FFFFFF; background: rgba(250, 128, 114, 0); border: none; cursor: pointer; outline: none; z-index: 60; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { #settings_button:hover .settings-icon { transform: scale(1.15); } } /* Here we are gonna add style readouts --------------------------------------------------------------------*/ #readout { position: absolute; top:400px; width:200px; right:50%; margin-right: -100px; color: #FFFFFF; /* font-weight: normal; */ /* font-family: 'inherit'; */ font-size: 24px; background: #14342f; border: 2px solid #40E0D0; border-radius: 29px; padding: 5px 0px 5px 0px; outline: none; box-sizing: border-box; display: flex; align-items: baseline; justify-content: center; } /* number is right-aligned; its half is widened by 20px so the number/unit meeting point sits 20px right of center */ .readout-value { flex: 0 0 calc(50% + 15px); text-align: right; font-size: 24px; } /* unit is left-aligned; its half is narrowed by 20px to match */ .readout-unit { flex: 0 0 calc(50% - 15px); text-align: left; margin-left: 5px; font-size: 17px; white-space: nowrap; } /* small label under the meter showing the active standard (dBA Volume / LUFS Momentary / LUFS Short-Term) */ #meter-mode { position: absolute; top: 446px; width: 360px; right: 50%; margin-right: -180px; color: #6a6f77; font-size: 11px; text-align: center; outline: none; } #loudness_text { position: absolute; margin-top:365px; width:200px; right:50%; margin-right: -100px; color: #9aa0a8; /* font-weight: normal; */ /* font-family: 'Open Sans, inherit'; */ font-size: 16px; text-align: center; padding: 6px 0px 6px 0px; outline: none; } .readout-group { position: absolute; top:70px; right:50%; margin-right: -160px; width: 120px; outline: none; -webkit-tap-highlight-color: transparent; } /* card behind just the AVG / MAX readouts */ .stats-card { width: 90px; margin: 0 auto; box-sizing: border-box; padding: 7px 0 8px 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; display: flex; flex-direction: column; } #label-average { position: relative; top:0px; line-height: 1; margin-top: 4px; /* small gap below the number */ width:100%; color: #8a9099; font-weight: 700; letter-spacing: 2px; font-size: 12px; background: none; border: none; outline: none; } #average { position: relative; top:0px; line-height: 1; width:100%; color: #FFFFFF; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 22px; background: rgba(39, 202, 183, 0); border: none; /* padding: 0px 0px 0px 0px; */ cursor: pointer; outline: none; } #label-hold-max { position: relative; top:0px; line-height: 1; margin-top: 4px; /* small gap below the number */ width:100%; color: #8a9099; font-weight: 700; letter-spacing: 2px; font-size: 12px; background: none; border: none; outline: none; } #hold-max { position: relative; top:0px; margin-top:10px; /* gap between the AVERAGE group above and the MAX group */ line-height: 1; width:100%; color: #FFFFFF; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 22px; background: rgba(39, 202, 183, 0); border: none; /* padding: 0px 0px 0px 0px; */ cursor: pointer; outline: none; } #reset, #pause { position: relative; width: 34px; height: 34px; padding: 0; color: transparent; background: #23262b; border: 1px solid #3a3d44; border-radius: 50%; cursor: pointer; outline: none; margin: 0 auto; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.15s; transition: all 0.15s; } #reset { margin-top: 14px; } #pause { margin-top: 10px; } /* labels under the reset / pause buttons */ .ctrl-label { text-align: center; color: #8a9099; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; } #reset:hover, #pause:hover { background: #2e3a38; border-color: #40E0D0; } #reset:active, #pause:active { transform: scale(0.92); } /* paused state: fill the pause button instead of just reddening the icon */ #pause.paused { background: #40E0D0; border-color: #40E0D0; } #pause.paused .pause-icon { color: #14342f; } .reset-icon, .pause-icon { color: #FFFFFF; font-size: 20px; } /* info button (circle "i") below Pause — opens the dB level guide */ #info-button { position: relative; width: 26px; height: 26px; margin: 12px auto 0 auto; padding: 0; background: #23262b; border: 1px solid #3a3d44; border-radius: 50%; color: #8a9099; cursor: pointer; outline: none; display: flex; align-items: center; justify-content: center; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 15px; line-height: 1; transition: all 0.15s; } #info-button:hover { border-color: #40E0D0; color: #40E0D0; } #info-button:active { transform: scale(0.92); } /* dB level guide popup */ #threshold-info { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 100; width: 320px; max-height: calc(100vh - 20px); overflow-y: auto; box-sizing: border-box; padding: 14px 16px 12px 16px; background: #20232a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6); color: #e6e8ea; font-family: 'Open Sans', sans-serif; } .ti-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; font-size: 15px; } .ti-close { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 8px; color: #cfd3d8; font-size: 26px; line-height: 1; cursor: pointer; outline: none; padding: 0; } .ti-close:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; } .ti-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .ti-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .ti-db { width: 70px; flex-shrink: 0; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .ti-label { color: #b8bcc4; font-size: 13px; white-space: nowrap; } .ti-subhead { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 8px; font-weight: 700; font-size: 15px; color: #e6e8ea; } /* Calibration popup ------------------------------------------------------------------------------------------------- */ #calibration-panel, #export-menu { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 100; width: 300px; max-height: calc(100vh - 20px); overflow-y: auto; box-sizing: border-box; padding: 14px 16px 14px 16px; background: #20232a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6); color: #e6e8ea; font-family: 'Open Sans', sans-serif; } .cal-intro { margin: 4px 0 12px 0; font-size: 12px; line-height: 1.5; color: #b8bcc4; } /* export menu — download buttons appear only after Generate */ .export-actions { display: none; flex-direction: column; gap: 8px; margin-top: 10px; } #export-menu.generated .export-actions { display: flex; } .export-opt { width: 100%; justify-content: flex-start; gap: 10px; padding: 9px 12px; } .export-opt .material-icons { font-size: 18px; } /* gold warning when some panels are disabled (shown only when relevant) */ .export-warn { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; line-height: 1.45; color: #E7B43C; } .export-warn.show { display: block; } .export-toggle { font-size: 13px; color: #cfd3d9; margin-bottom: 12px; } /* note field — starts at one line, grows with content (height set by JS) */ .export-note { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px 0; padding: 8px 10px; min-height: 36px; max-height: 200px; background: #15171b; border: 1px solid #3a3d44; border-radius: 6px; color: #FFFFFF; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 1.4; resize: none; overflow-y: auto; outline: none; } .export-note:focus { border-color: #40E0D0; } /* Report gate — shown when Generate is clicked while logged out / unlicensed --------------------------------------- */ .report-gate { position: absolute; /* was fixed; absolute so it overlays the embedded meter area, not the page viewport */ inset: 0; z-index: 200; display: flex; align-items: flex-start; /* anchor to the top, same as the export menu (top: 5px) */ justify-content: center; padding: 5px 16px 16px; box-sizing: border-box; background: rgba(0, 0, 0, 0.55); } .report-gate-card { width: 300px; max-width: 100%; max-height: calc(100vh - 21px); overflow-y: auto; box-sizing: border-box; padding: 14px 16px; background: #20232a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6); color: #e6e8ea; font-family: 'Open Sans', sans-serif; } .gate-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 11px 14px; margin-top: 8px; } .gate-btn .material-icons { font-size: 18px; } /* primary: buy — gold rectangle, two-line label (one-time purchase) */ .gate-buy { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 4px; padding: 13px 16px; border: none; border-radius: 12px; background: linear-gradient(180deg, #F6CB5E 0%, #E2A62F 100%); color: #3d2a06; font-family: 'Open Sans', sans-serif; cursor: pointer; outline: none; box-shadow: 0 6px 16px rgba(224, 165, 46, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: filter 0.15s, box-shadow 0.15s, transform 0.06s; } .gate-buy:hover { filter: brightness(1.04); box-shadow: 0 8px 22px rgba(224, 165, 46, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .gate-buy:active { transform: scale(0.99); } .gate-buy-icon { font-size: 26px; flex-shrink: 0; } .gate-buy-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .gate-buy-main { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; } .gate-buy-sub { font-size: 11.5px; font-weight: 600; opacity: 0.82; font-variant-numeric: tabular-nums; } /* separates the paid action from the free demo below */ .gate-or { display: flex; align-items: center; gap: 10px; margin: 16px 2px 8px; color: #6b7178; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.10); } /* secondary: free demo, intentionally quiet */ .gate-demo { background: transparent; border-color: #3a3d44; color: #cfd3d9; font-weight: 400; } .gate-demo:hover { background: rgba(255, 255, 255, 0.06); } /* post-purchase confirmation (sign in to claim the unlock) */ .gate-confirm-icon { display: flex; justify-content: center; margin: 6px 0 10px; } .gate-confirm-icon .material-icons { font-size: 44px; color: #40E0D0; } .gate-confirm-title { text-align: center; font-size: 17px; font-weight: 800; margin-bottom: 10px; } #gate-confirm .cal-intro { text-align: center; } .gate-confirm-signin { width: 100%; margin-top: 14px; justify-content: center; gap: 8px; padding: 11px 14px; background: #40E0D0; border-color: #40E0D0; color: #14342f; } .gate-confirm-signin:hover { background: #5fe9dc; } .gate-confirm-signin .material-icons { font-size: 18px; } /* tertiary: sign in — small text link, not a button */ .gate-signin-link { display: block; width: 100%; margin-top: 12px; padding: 2px; background: none; border: none; color: #9aa0a8; font-family: 'Open Sans', sans-serif; font-size: 12px; text-align: center; cursor: pointer; outline: none; } .gate-signin-link span { color: #40E0D0; font-weight: 700; } .gate-signin-link:hover span { color: #5fe9dc; text-decoration: underline; } .cal-live { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; background: #15171b; border-radius: 6px; font-size: 13px; color: #9aa0a8; } #cal-current { font-size: 20px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; } .cal-row { display: flex; gap: 8px; margin-top: 12px; } #cal-ref, #cal-offset-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 7px 10px; background: #15171b; border: 1px solid #3a3d44; border-radius: 6px; color: #FFFFFF; font-family: 'Open Sans', sans-serif; font-size: 14px; outline: none; } #cal-ref:focus, #cal-offset-input:focus { border-color: #40E0D0; } .cal-manual { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .cal-manual-head { margin-bottom: 8px; font-size: 12px; color: #9aa0a8; } .cal-measure { width: 100%; margin-top: 10px; padding: 9px 12px; } .cal-status { min-height: 16px; margin-top: 10px; font-size: 12px; color: #cfd3d9; } .cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; color: #b8bcc4; } /* Calibrate button turns teal once calibrated against a reference */ #calibrate-btn.calibrated { background: #40E0D0; border-color: #40E0D0; color: #14342f; } #calibrate-btn.calibrated:hover { background: #5fe9dc; } /* Here we are gonna add style for radio buttons --------------------------------------------------------------------*/ .settings-group { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(460px, 94vw); max-width: 96vw; max-height: calc(100vh - 16px); box-sizing: border-box; padding: 14px 18px; text-align: left; color: #e6e8ea; background: #20232a; border: 1px solid #2e323a; box-shadow: 0 10px 34px rgba(0,0,0,.5); border-radius: 12px; z-index: 50; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3a3d44 transparent; -webkit-tap-highlight-color: transparent; } .settings-group::-webkit-scrollbar-corner { background: transparent; } .settings-group::-webkit-scrollbar { width: 9px; height: 9px; } .settings-group::-webkit-scrollbar-track { background: transparent; } .settings-group::-webkit-scrollbar-thumb { background: #3a3d44; border-radius: 5px; border: 2px solid #20232a; } .settings-group::-webkit-scrollbar-thumb:hover { background: #4a505a; } /* lay the sections out in up to two columns (drops to one on narrow/mobile); grid avoids the multi-column fragmentation that was clipping the last radio */ /* two independent columns when there's room (each stacks its own sections); wraps to one column when narrow */ .settings-grid { display: flex; flex-direction: column; /* single column — sections stack top to bottom */ gap: 6px; align-items: stretch; } .settings-col { min-width: 0; display: flex; flex-direction: column; } .settings-section { margin-bottom: 6px; } /* Standard: dB weightings (left) and LUFS (right) side by side */ .standard-cols { display: flex; gap: 24px; } .standard-col { display: flex; flex-direction: column; } .control { font-size: 15px; position: relative; display: block; margin-bottom: 9px; padding-left: 30px; min-height: 20px; line-height: 20px; color: #e6e8ea; cursor: pointer; } .control input { position: absolute; z-index: -1; opacity: 0; } .control__indicator { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: #2a2d33; border: 1px solid #3a3d44; transition: background 0.15s, border-color 0.15s; } .control--radio .control__indicator { border-radius: 50%; } /* Hover and focus states */ .control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator { border-color: #40E0D0; background: #2e3a38; } /* Checked state — turquoise ring with a turquoise dot (not a filled blob) */ .control input:checked ~ .control__indicator { border-color: #40E0D0; } /* Radio button inner dot — centered with a transform so it stays aligned regardless of box-sizing/border */ .control--radio .control__indicator:after { top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #40E0D0; } /* Check mark */ .control__indicator:after { position: absolute; display: none; content: ''; } /* Show check mark */ .control input:checked ~ .control__indicator:after { display: block; } /* toggle switch (used for the warning-threshold enable — big, easy to tap on mobile) */ .toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 15px; color: #e6e8ea; cursor: pointer; -webkit-tap-highlight-color: transparent; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { position: relative; flex: 0 0 auto; width: 38px; height: 20px; background: #3a3d44; border-radius: 20px; transition: background 0.2s; } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #FFFFFF; border-radius: 50%; transition: transform 0.2s; } input:checked + .toggle-track { background: #3a3d44; /* keep the track gray when on */ } input:checked + .toggle-track .toggle-thumb { background: #40E0D0; /* teal circle indicates "on" */ transform: translateX(18px); } hr { display: block; height: 1px; border: 0; border-top: 1px solid #2e323a; margin: 16px 0; padding: 0; } .settings-group h1 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #8a9099; margin: 0 0 8px 0; } /* graph range sliders in the settings panel */ .range-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .range-label { width: 48px; flex-shrink: 0; font-size: 14px; color: #e6e8ea; } /* settings sliders (Min / Max / warning Level): rounded pill track + circular green thumb */ .range-row input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 999px; background: #3a3d44; accent-color: auto; outline: none; cursor: pointer; } .range-row input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: #3a3d44; } .range-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #40E0D0; border: none; box-shadow: none; cursor: pointer; transition: transform 0.15s ease; } .range-row input[type="range"]:hover::-webkit-slider-thumb, .range-row input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); } .range-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #40E0D0; border: none; box-shadow: none; cursor: pointer; transition: transform 0.15s ease; } .range-row input[type="range"]:hover::-moz-range-thumb, .range-row input[type="range"]:active::-moz-range-thumb { transform: scale(1.25); } .range-row input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #3a3d44; } /* warning-threshold sliders: colour the thumbs to match their zone */ #warn-yellow::-webkit-slider-thumb { background: rgb(250, 229, 135); } #warn-yellow::-moz-range-thumb { background: rgb(250, 229, 135); } #warn-red::-webkit-slider-thumb { background: #FA8787; } #warn-red::-moz-range-thumb { background: #FA8787; } .range-value { width: 30px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: #FFFFFF; } /* Here we are gonna add style for text area --------------------------------------------------------------------*/ /* Here we are gonna add style for loading --------------------------------------------------------------------*/ .progress { position: absolute; top: 67px; right: 50%; width: 145px; margin-right: 5px; height: 1rem; /* border: 1px solid white; */ /* font-family: 'inherit', sans-serif; */ font-size: 18px; } .analyze-text { text-align: left; color: white; } .spinner { position: relative; top: -1.3rem; left: 155px; text-align: right; color: white; /* font-family: 'inherit', sans-serif; */ font-size: 18px; } .spinner > div { width: 1rem; height: 1rem; background-color: rgb(255, 255, 255); /* border: 2px solid #FFFFFF; */ border-radius: 50%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } .button-style { cursor: pointer; overflow: hidden; position: absolute; /* border: 2px solid #FFFFFF; */ color: #FFFFFF; display: inline-block; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; font-size: 20px; text-align: center; } /* Button Hover */ .button-style:active { /* border: 2px solid #FFFFFF; */ } .use-mic{ position: absolute; /* anchored to #ylm-app (was fixed-to-viewport) so it sits inside the embed */ top: 190px; right: 50%; margin-right: -140px; z-index: 70; cursor: pointer; outline: none; border-radius: 40px; background-image: linear-gradient(120deg, #14342f, #2b8c80, #14342f, #2b8c80, #14342f); background-size: 300% 100%; border: 2px solid #40E0D0; box-shadow: 0 40px 100px rgba(0, 0, 0, 1), 0 20px 60px rgba(0, 0, 0, 0.9); animation: useMicFlow 5s ease-in-out infinite; transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .use-mic:hover{ transform: scale(1.06); } .use-mic:active{ transform: scale(1.02); transition: transform 0.1s ease; } @keyframes useMicFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #audio-from-mic{ width: 275px; padding: 13px 20px; background: transparent; outline: none; border: none; font-size: 19px; font-weight: 600; color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; -webkit-tap-highlight-color: transparent; } #audio-from-mic:hover, #audio-from-mic:focus, #audio-from-mic:active{ background: transparent; } .mic-icon{ font-size: 22px; } #mic-hint{ position: absolute; /* anchored to #ylm-app (was fixed-to-viewport) so it sits inside the embed */ top: 256px; width: 320px; right: 50%; margin-right: -160px; z-index: 70; color: #aab0b8; font-size: 12px; line-height: 1.4; text-align: center; } /* Here we are gonna add style for the history graph --------------------------------------------------------------------*/ #history-panel{ position: absolute; top: 505px; left: 50%; transform: translateX(-50%); width: min(920px, 92vw); color: #FFFFFF; font-family: 'Open Sans', sans-serif; /* divider separating the history section from the meter above (stacked layout) */ border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px; } body.graph-collapsed #history-panel { display: none; } body.spectrum-collapsed #spectrum-panel { display: none; } body.health-collapsed #health-panel { display: none; } body.spectrum-collapsed.health-collapsed #bottom-row { display: none; } /* bottom row — spectrum + health side by side; each fills the row when the other is hidden */ #bottom-row{ position: absolute; top: 920px; left: 50%; transform: translateX(-50%); width: min(920px, 92vw); color: #FFFFFF; font-family: 'Open Sans', sans-serif; border-top: 1px solid rgba(255, 255, 255, 0.1); /* divider above the row */ margin-top: 22px; padding-top: 16px; display: flex; gap: 18px; align-items: stretch; } #spectrum-panel, #health-panel{ flex: 1 1 0; min-width: 0; } /* stacked layout: when the history is hidden, move the row up into its place */ body.graph-collapsed #bottom-row{ top: 505px; } /* narrow screens — stack health below the spectrum instead of side by side */ @media (max-width: 760px) { #bottom-row{ flex-direction: column; align-items: stretch; } } /* Health panel — title sits outside a dark rect, matching the spectrum panel (title + canvas) */ #health-panel{ display: flex; flex-direction: column; } #health-toolbar{ display: flex; align-items: center; min-height: 30px; /* match the spectrum toolbar height so the two dark rects line up */ margin-bottom: 6px; } #health-title{ font-size: 13px; font-weight: 700; color: #cfd3d9; } #health-body{ flex: 1 1 auto; background: #15171b; border-radius: 3px; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; } .health-stats{ display: flex; flex-direction: column; gap: 9px; } .health-stat{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .health-label{ font-size: 13px; color: #9aa0a8; } .health-value{ font-size: 19px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; } .health-status{ align-self: flex-start; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 6px; } .health-ok{ background: rgba(64, 224, 208, 0.15); color: #40E0D0; } .health-warn{ background: rgba(250, 229, 135, 0.15); color: rgb(250, 229, 135); } .health-danger{ background: rgba(250, 135, 135, 0.18); color: #FA8787; } #health-note{ font-size: 13px; color: #b8bcc4; line-height: 1.4; } #health-foot{ font-size: 11px; color: #6a6f77; line-height: 1.4; } #spectrum-toolbar{ display: flex; align-items: center; justify-content: space-between; /* title left, Peak Hold right */ gap: 12px; min-height: 30px; /* same as the health toolbar so the dark rects line up */ margin-bottom: 6px; } #spectrum-title{ font-size: 13px; font-weight: 700; color: #cfd3d9; } /* Peak Hold uses a teal "on" state instead of the default salmon */ #spectrum-hold.active{ background: #40E0D0; border-color: #40E0D0; color: #14342f; } #spectrum-graph{ display: block; width: 100%; height: 280px; background: #15171b; border-radius: 3px; } /* When there's enough horizontal room, move the meter into a fixed left column and place the graph beside it on the right. Below this width the meter stays centered and the graph drops below it. */ @media (min-width: 1100px) { #meter-wrap { right: auto; width: 460px; /* narrower column so the meter isn't floating with big side margins (460 = the settings panel's width; going narrower clips it) */ } /* re-center the meter full width when history and spectrum are both hidden — unless health has taken the slot beside the meter (then keep the meter in its left column) */ body.graph-collapsed.spectrum-collapsed:not(.health-beside) #meter-wrap { right: 0; width: auto; } /* Graph sits beside the meter and spans the same vertical range (meter goes from top:5 down to the explanation text at ~462). The panel is a flex column whose graph canvas fills the space between the toolbar and the overview, so the panel's hint text lines up with the meter's explanation text. */ #history-panel{ top: 10px; left: 484px; right: 24px; height: 462px; width: auto; transform: none; display: flex; flex-direction: column; /* beside the meter here (nothing above/below it in this column) — drop the stacked-layout dividers */ border-top: none; border-bottom: none; padding-top: 0; padding-bottom: 0; } #history-graph{ flex: 1 1 auto; min-height: 0; height: auto; } /* meter (left) + history (right) end around 472; the bottom row spans full width below them */ #bottom-row{ top: 500px; left: 24px; right: 24px; width: auto; transform: none; } /* history off → spectrum is lifted out of the bottom row to sit beside the meter (same slot history used); health then fills the full-width bottom row on its own */ body.spectrum-beside #spectrum-panel{ position: absolute; top: 10px; left: 484px; right: 24px; width: auto; height: 462px; margin: 0; display: flex; flex-direction: column; } body.spectrum-beside #spectrum-graph{ flex: 1 1 auto; min-height: 0; height: auto; } /* history and spectrum both off → health takes the slot beside the meter, the bottom row is empty */ body.health-beside #health-panel{ position: absolute; top: 10px; left: 484px; right: 24px; width: auto; margin: 0; /* size to its content — a compact card, not stretched to the meter's full height */ } } /* spectrum is beside the meter and health is hidden → nothing left for the bottom row */ body.spectrum-beside.health-collapsed #bottom-row{ display: none; } /* health is beside the meter → the bottom row has nothing left */ body.health-beside #bottom-row{ display: none; } #history-toolbar{ display: flex; align-items: stretch; /* all controls share the tallest one's height */ gap: 12px; margin-bottom: 6px; font-size: 13px; } #history-readout{ display: flex; align-items: center; gap: 12px; flex: 0 1 auto; /* shrinks so the buttons always keep their space */ min-width: 0; overflow: hidden; white-space: nowrap; padding: 3px 10px; border-radius: 6px; font-size: 17px; font-variant-numeric: tabular-nums; margin-right: auto; /* left-aligned; pushes the toolbar buttons to the right */ align-self: center; background: rgba(255, 255, 255, 0.06); transition: background 0.15s; } #history-readout.active{ background: rgba(255, 255, 255, 0.10); } #history-value:empty{ display: none; /* no trailing gap when there's no value (not hovering) */ } #history-time{ color: #eef0f3; } #history-value{ color: #FFFFFF; font-weight: 600; } .h-btn{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #2a2d33; color: #FFFFFF; border: 1px solid #3a3d44; border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; outline: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .h-btn:hover{ background: #343842; } .h-btn.active{ background: #FA8787; border-color: #FA8787; } /* Clock-time switch: plain like the other toolbar buttons, teal "on" state (same as Peak Hold) */ .h-clock.active{ background: #40E0D0; border-color: #40E0D0; color: #14342f; } /* Live / Fit all as a segmented tab control */ .h-tabs{ display: inline-flex; flex-shrink: 0; border: 1px solid #3a3d44; border-radius: 6px; overflow: hidden; } .h-tab{ display: flex; align-items: center; justify-content: center; background: #2a2d33; color: #cfd3d9; border: none; border-right: 1px solid #3a3d44; padding: 5px 14px; font-size: 13px; font-weight: 700; cursor: pointer; outline: none; transition: background 0.15s, color 0.15s; } .h-tab:last-child{ border-right: none; } .h-tab:hover{ background: #343842; } .h-tab.active{ background: #40E0D0; color: #14342f; } /* on narrow screens stack the Live / Fit All tabs vertically to save horizontal space */ /* Export + Clock Time: side by side normally, Export stacked on top when cramped */ .h-export-clock{ display: flex; align-items: stretch; gap: 12px; flex-shrink: 0; } @media (max-width: 480px) { /* don't stretch controls to a common height once things stack — keep each its natural size */ #history-toolbar { align-items: flex-start; } .h-tabs { flex-direction: column; } .h-tab { border-right: none; border-bottom: 1px solid #3a3d44; } .h-tab:last-child { border-bottom: none; } .h-export-clock { flex-direction: column; gap: 6px; } } #history-graph{ display: block; width: 100%; height: 280px; background: #15171b; border-radius: 3px; cursor: crosshair; touch-action: auto; /* fingers scroll the page over the graph; navigation is via the track below */ } #history-overview{ display: block; width: 100%; height: 46px; margin-top: 6px; background: #15171b; border-radius: 3px; cursor: pointer; touch-action: none; } #history-hint{ margin: 14px 0 0 0; font-size: 11px; color: #6a6f77; text-align: center; }