/** * ___ _ _ _ * / __) | | | | | | * _ _ _ _ _ _ _ _ _ _| |__ _____ ____ _ _| | _ | |__ __| | * | | | | | | | | | (_ __|____ |/ ___) | | | |_/ ) | _ \ / _ | * | | | | | | | | | | | | / ___ | | | |_| | _ ( _| |_) | (_| | * \___/ \___/ \___(_)|_| \_____|_| |____/|_| \_|_)____/ \____| * * * Author: MD OMAR FARUK * Author URI: www.faruk.bd * Author Contact: https://faruk.bd/#contact * Author Email: info@faruk.bd | farukmr@gmail.com * Copyright © 2026 * ___ _ _ _ * / __) | | | | | | * _ _ _ _ _ _ _ _ _ _| |__ _____ ____ _ _| | _ | |__ __| | * | | | | | | | | | (_ __|____ |/ ___) | | | |_/ ) | _ \ / _ | * | | | | | | | | | | | | / ___ | | | |_| | _ ( _| |_) | (_| | * \___/ \___/ \___(_)|_| \_____|_| |____/|_| \_|_)____/ \____| * */ /* * Front end: pieces added in 1.2.0 that every Bootstrap-based theme shares - * the account corner of the header and the sound track chooser on the results * page. Loaded after front.css. Themes with a design of their own (Nova) bring their own rules. */ /* ----------------------------------------------------- account corner */ .account-toggle{display:inline-flex;align-items:center;gap:.45rem;width:auto;padding-inline:.3rem .55rem;border-radius:999px} .account-avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--app-primary,#f00);color:#fff;font-weight:700;font-size:.85rem;line-height:1;text-transform:uppercase} .account-avatar-lg{width:40px;height:40px;font-size:1.05rem} .account-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.9rem} .account-dropdown{min-width:15rem;padding:.5rem;border-radius:.9rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)} .account-dropdown .dropdown-item{border-radius:.55rem;padding:.5rem .7rem;font-weight:500} .account-who{display:flex;align-items:center;gap:.7rem;padding:.4rem .5rem .2rem} .account-who-text{display:flex;flex-direction:column;min-width:0;line-height:1.25} .account-who-text strong,.account-who-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11rem} .account-who-text small{color:var(--bs-secondary-color)} .account-login{font-size:1.15rem} /* -------------------------------------------------- sound track chooser */ .audio-tracks{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--app-primary-border,var(--bs-border-color));border-radius:1rem;background:var(--app-primary-subtle,var(--bs-tertiary-bg))} .audio-tracks-icon{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:.8rem;background:var(--app-primary,#f00);color:#fff;font-size:1.2rem} .audio-tracks-text{flex:1 1 14rem;min-width:0} .audio-tracks-label{display:flex;align-items:center;gap:.45rem;margin:0;font-weight:700;color:var(--bs-emphasis-color)} .audio-tracks-count{display:inline-block;min-width:1.6rem;padding:.1rem .45rem;border-radius:999px;background:var(--app-primary,#f00);color:#fff;font-size:.72rem;font-weight:700;text-align:center} .audio-tracks-hint{margin:.15rem 0 0;font-size:.84rem;color:var(--bs-secondary-color)} .audio-tracks-pick{display:flex;gap:.5rem;flex:1 1 15rem;min-width:0} .audio-tracks-select{flex:1 1 auto;min-width:0;max-width:100%;padding:.6rem 2.2rem .6rem .85rem;border:1px solid var(--bs-border-color);border-radius:.7rem;background-color:var(--bs-body-bg);color:var(--bs-body-color);font:inherit;font-weight:600;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .8rem center;background-size:14px} [dir="rtl"] .audio-tracks-select{padding:.6rem .85rem .6rem 2.2rem;background-position:left .8rem center} .audio-tracks-select:focus{outline:2px solid var(--app-primary,#f00);outline-offset:1px} .audio-tracks-apply{padding:.55rem 1rem;border:0;border-radius:.7rem;background:var(--app-primary,#f00);color:#fff;font-weight:600} @media (max-width: 575.98px){ .audio-tracks{padding:.8rem} .audio-tracks-pick{flex-basis:100%} } /* ------------------------------------------------- 1.3.0: member accounts in the header */ .account-guest{display:inline-flex;align-items:center;gap:.4rem} .account-guest .btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.38rem .85rem;font-weight:600;white-space:nowrap} .account-avatar{overflow:hidden} .account-avatar img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:575.98px){.account-guest .account-signin span{display:none}.account-guest .account-signin{padding:.38rem .6rem}.account-guest .account-join{padding:.38rem .7rem;font-size:.82rem}} @media (max-width:399.98px){.account-guest .account-join span{display:none}} /* the chooser of the sound language when it belongs to members */ .audio-tracks.is-locked .audio-tracks-lock{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:.35rem;padding:.12rem .55rem;border-radius:999px;background:rgba(var(--app-primary-rgb,225,29,72),.12);color:var(--app-primary,#e11d48);font-size:.72rem;font-weight:700;vertical-align:middle} .audio-tracks-names{margin:.3rem 0 0;font-size:.8rem;opacity:.7;overflow-wrap:anywhere} .audio-tracks-unlock{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:999px;background:var(--app-primary,#e11d48);color:#fff !important;font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap} .audio-tracks-unlock:hover{filter:brightness(.93)}@media (max-width:399.98px){.account-guest .account-join{display:none}}