|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893 |
- /**
- * Framework7 5.7.14
- * Full featured mobile HTML framework for building iOS & Android apps
- * https://framework7.io/
- *
- * Copyright 2014-2020 Vladimir Kharlampidi
- *
- * Released under the MIT License
- *
- * Released on: November 9, 2020
- */
-
- /*====================
- Core
- ==================== */
- :root {
- --f7-theme-color: #007aff;
- --f7-theme-color-rgb: 0, 122, 255;
- --f7-theme-color-shade: #0066d6;
- --f7-theme-color-tint: #298fff;
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- --f7-safe-area-top: 0px;
- --f7-safe-area-bottom: 0px;
- --f7-safe-area-outer-left: 0px;
- --f7-safe-area-outer-right: 0px;
- --f7-device-pixel-ratio: 1;
- }
- @supports (left: env(safe-area-inset-left)) {
- :root {
- --f7-safe-area-top: env(safe-area-inset-top);
- --f7-safe-area-bottom: env(safe-area-inset-bottom);
- }
- :root .ios-left-edge,
- :root .ios-edges,
- :root .safe-area-left,
- :root .safe-areas,
- :root .popup,
- :root .sheet-modal,
- :root .panel-left {
- --f7-safe-area-left: env(safe-area-inset-left);
- --f7-safe-area-outer-left: env(safe-area-inset-left);
- }
- :root .ios-right-edge,
- :root .ios-edges,
- :root .safe-area-right,
- :root .safe-areas,
- :root .popup,
- :root .sheet-modal,
- :root .panel-right {
- --f7-safe-area-right: env(safe-area-inset-right);
- --f7-safe-area-outer-right: env(safe-area-inset-right);
- }
- :root .no-safe-areas,
- :root .no-safe-area-left,
- :root .no-ios-edges,
- :root .no-ios-left-edge {
- --f7-safe-area-left: 0px;
- --f7-safe-area-outer-left: 0px;
- }
- :root .no-safe-areas,
- :root .no-safe-area-right,
- :root .no-ios-edges,
- :root .no-ios-right-edge {
- --f7-safe-area-right: 0px;
- --f7-safe-area-outer-right: 0px;
- }
- }
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
- :root {
- --f7-device-pixel-ratio: 2;
- }
- }
- @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
- :root {
- --f7-device-pixel-ratio: 3;
- }
- }
- /*====================
- Fonts & Bars
- ==================== */
- :root {
- --f7-font-size: 14px;
- /*
- --f7-bars-link-color: var(--f7-theme-color);
- */
- --f7-bars-bg-image: none;
- --f7-bars-translucent-opacity: 0.8;
- --f7-bars-translucent-blur: 20px;
- --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
- --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
- --f7-bars-text-color: #000;
- --f7-bars-bg-color: #f7f7f8;
- --f7-bars-bg-color-rgb: 247, 247, 248;
- }
- :root .theme-dark,
- :root.theme-dark {
- --f7-bars-text-color: #fff;
- }
- .ios {
- --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
- --f7-line-height: 1.4;
- --f7-text-color: #000;
- --f7-bars-border-color: rgba(0, 0, 0, 0.25);
- }
- .ios .theme-dark,
- .ios.theme-dark {
- --f7-text-color: #fff;
- --f7-bars-bg-color: #121212;
- --f7-bars-bg-color-rgb: 22, 22, 22;
- --f7-bars-border-color: rgba(255, 255, 255, 0.16);
- }
- .md {
- --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
- --f7-line-height: 1.5;
- --f7-bars-border-color: transparent;
- --f7-text-color: #212121;
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-text-color: rgba(255, 255, 255, 0.87);
- --f7-bars-bg-color: #202020;
- }
- .aurora {
- --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
- --f7-line-height: 1.5;
- --f7-text-color: #000;
- --f7-bars-border-color: rgba(0, 0, 0, 0.2);
- }
- .aurora .theme-dark,
- .aurora.theme-dark {
- --f7-text-color: #fff;
- --f7-bars-bg-color: #202020;
- --f7-bars-border-color: rgba(255, 255, 255, 0.1);
- }
- /*====================
- Color Themes
- ==================== */
- .text-color-primary {
- --f7-theme-color-text-color: var(--f7-theme-color);
- }
- .bg-color-primary {
- --f7-theme-color-bg-color: var(--f7-theme-color);
- }
- .border-color-primary {
- --f7-theme-color-border-color: var(--f7-theme-color);
- }
- .ripple-color-primary {
- --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
- }
- :root {
- --f7-color-red: #ff3b30;
- --f7-color-red-rgb: 255, 59, 48;
- --f7-color-red-shade: #ff1407;
- --f7-color-red-tint: #ff6259;
- --f7-color-green: #4cd964;
- --f7-color-green-rgb: 76, 217, 100;
- --f7-color-green-shade: #2cd048;
- --f7-color-green-tint: #6ee081;
- --f7-color-blue: #2196f3;
- --f7-color-blue-rgb: 33, 150, 243;
- --f7-color-blue-shade: #0c82df;
- --f7-color-blue-tint: #48a8f5;
- --f7-color-pink: #ff2d55;
- --f7-color-pink-rgb: 255, 45, 85;
- --f7-color-pink-shade: #ff0434;
- --f7-color-pink-tint: #ff5676;
- --f7-color-yellow: #ffcc00;
- --f7-color-yellow-rgb: 255, 204, 0;
- --f7-color-yellow-shade: #d6ab00;
- --f7-color-yellow-tint: #ffd429;
- --f7-color-orange: #ff9500;
- --f7-color-orange-rgb: 255, 149, 0;
- --f7-color-orange-shade: #d67d00;
- --f7-color-orange-tint: #ffa629;
- --f7-color-purple: #9c27b0;
- --f7-color-purple-rgb: 156, 39, 176;
- --f7-color-purple-shade: #7e208f;
- --f7-color-purple-tint: #b92fd1;
- --f7-color-deeppurple: #673ab7;
- --f7-color-deeppurple-rgb: 103, 58, 183;
- --f7-color-deeppurple-shade: #563098;
- --f7-color-deeppurple-tint: #7c52c8;
- --f7-color-lightblue: #5ac8fa;
- --f7-color-lightblue-rgb: 90, 200, 250;
- --f7-color-lightblue-shade: #32bbf9;
- --f7-color-lightblue-tint: #82d5fb;
- --f7-color-teal: #009688;
- --f7-color-teal-rgb: 0, 150, 136;
- --f7-color-teal-shade: #006d63;
- --f7-color-teal-tint: #00bfad;
- --f7-color-lime: #cddc39;
- --f7-color-lime-rgb: 205, 220, 57;
- --f7-color-lime-shade: #bac923;
- --f7-color-lime-tint: #d6e25c;
- --f7-color-deeporange: #ff6b22;
- --f7-color-deeporange-rgb: 255, 107, 34;
- --f7-color-deeporange-shade: #f85200;
- --f7-color-deeporange-tint: #ff864b;
- --f7-color-gray: #8e8e93;
- --f7-color-gray-rgb: 142, 142, 147;
- --f7-color-gray-shade: #79797f;
- --f7-color-gray-tint: #a3a3a7;
- --f7-color-white: #ffffff;
- --f7-color-white-rgb: 255, 255, 255;
- --f7-color-white-shade: #ebebeb;
- --f7-color-white-tint: #ffffff;
- --f7-color-black: #000000;
- --f7-color-black-rgb: 0, 0, 0;
- --f7-color-black-shade: #000000;
- --f7-color-black-tint: #141414;
- }
- .color-theme-red {
- --f7-theme-color: #ff3b30;
- --f7-theme-color-rgb: 255, 59, 48;
- --f7-theme-color-shade: #ff1407;
- --f7-theme-color-tint: #ff6259;
- }
- .color-theme-green {
- --f7-theme-color: #4cd964;
- --f7-theme-color-rgb: 76, 217, 100;
- --f7-theme-color-shade: #2cd048;
- --f7-theme-color-tint: #6ee081;
- }
- .color-theme-blue {
- --f7-theme-color: #2196f3;
- --f7-theme-color-rgb: 33, 150, 243;
- --f7-theme-color-shade: #0c82df;
- --f7-theme-color-tint: #48a8f5;
- }
- .color-theme-pink {
- --f7-theme-color: #ff2d55;
- --f7-theme-color-rgb: 255, 45, 85;
- --f7-theme-color-shade: #ff0434;
- --f7-theme-color-tint: #ff5676;
- }
- .color-theme-yellow {
- --f7-theme-color: #ffcc00;
- --f7-theme-color-rgb: 255, 204, 0;
- --f7-theme-color-shade: #d6ab00;
- --f7-theme-color-tint: #ffd429;
- }
- .color-theme-orange {
- --f7-theme-color: #ff9500;
- --f7-theme-color-rgb: 255, 149, 0;
- --f7-theme-color-shade: #d67d00;
- --f7-theme-color-tint: #ffa629;
- }
- .color-theme-purple {
- --f7-theme-color: #9c27b0;
- --f7-theme-color-rgb: 156, 39, 176;
- --f7-theme-color-shade: #7e208f;
- --f7-theme-color-tint: #b92fd1;
- }
- .color-theme-deeppurple {
- --f7-theme-color: #673ab7;
- --f7-theme-color-rgb: 103, 58, 183;
- --f7-theme-color-shade: #563098;
- --f7-theme-color-tint: #7c52c8;
- }
- .color-theme-lightblue {
- --f7-theme-color: #5ac8fa;
- --f7-theme-color-rgb: 90, 200, 250;
- --f7-theme-color-shade: #32bbf9;
- --f7-theme-color-tint: #82d5fb;
- }
- .color-theme-teal {
- --f7-theme-color: #009688;
- --f7-theme-color-rgb: 0, 150, 136;
- --f7-theme-color-shade: #006d63;
- --f7-theme-color-tint: #00bfad;
- }
- .color-theme-lime {
- --f7-theme-color: #cddc39;
- --f7-theme-color-rgb: 205, 220, 57;
- --f7-theme-color-shade: #bac923;
- --f7-theme-color-tint: #d6e25c;
- }
- .color-theme-deeporange {
- --f7-theme-color: #ff6b22;
- --f7-theme-color-rgb: 255, 107, 34;
- --f7-theme-color-shade: #f85200;
- --f7-theme-color-tint: #ff864b;
- }
- .color-theme-gray {
- --f7-theme-color: #8e8e93;
- --f7-theme-color-rgb: 142, 142, 147;
- --f7-theme-color-shade: #79797f;
- --f7-theme-color-tint: #a3a3a7;
- }
- .color-theme-white {
- --f7-theme-color: #ffffff;
- --f7-theme-color-rgb: 255, 255, 255;
- --f7-theme-color-shade: #ebebeb;
- --f7-theme-color-tint: #ffffff;
- }
- .color-theme-black {
- --f7-theme-color: #000000;
- --f7-theme-color-rgb: 0, 0, 0;
- --f7-theme-color-shade: #000000;
- --f7-theme-color-tint: #141414;
- }
- .color-red {
- --f7-theme-color: #ff3b30;
- --f7-theme-color-rgb: 255, 59, 48;
- --f7-theme-color-shade: #ff1407;
- --f7-theme-color-tint: #ff6259;
- }
- .text-color-red {
- --f7-theme-color-text-color: #ff3b30;
- }
- .bg-color-red {
- --f7-theme-color-bg-color: #ff3b30;
- }
- .border-color-red {
- --f7-theme-color-border-color: #ff3b30;
- }
- .ripple-color-red,
- .ripple-red {
- --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
- }
- .color-green {
- --f7-theme-color: #4cd964;
- --f7-theme-color-rgb: 76, 217, 100;
- --f7-theme-color-shade: #2cd048;
- --f7-theme-color-tint: #6ee081;
- }
- .text-color-green {
- --f7-theme-color-text-color: #4cd964;
- }
- .bg-color-green {
- --f7-theme-color-bg-color: #4cd964;
- }
- .border-color-green {
- --f7-theme-color-border-color: #4cd964;
- }
- .ripple-color-green,
- .ripple-green {
- --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
- }
- .color-blue {
- --f7-theme-color: #2196f3;
- --f7-theme-color-rgb: 33, 150, 243;
- --f7-theme-color-shade: #0c82df;
- --f7-theme-color-tint: #48a8f5;
- }
- .text-color-blue {
- --f7-theme-color-text-color: #2196f3;
- }
- .bg-color-blue {
- --f7-theme-color-bg-color: #2196f3;
- }
- .border-color-blue {
- --f7-theme-color-border-color: #2196f3;
- }
- .ripple-color-blue,
- .ripple-blue {
- --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
- }
- .color-pink {
- --f7-theme-color: #ff2d55;
- --f7-theme-color-rgb: 255, 45, 85;
- --f7-theme-color-shade: #ff0434;
- --f7-theme-color-tint: #ff5676;
- }
- .text-color-pink {
- --f7-theme-color-text-color: #ff2d55;
- }
- .bg-color-pink {
- --f7-theme-color-bg-color: #ff2d55;
- }
- .border-color-pink {
- --f7-theme-color-border-color: #ff2d55;
- }
- .ripple-color-pink,
- .ripple-pink {
- --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
- }
- .color-yellow {
- --f7-theme-color: #ffcc00;
- --f7-theme-color-rgb: 255, 204, 0;
- --f7-theme-color-shade: #d6ab00;
- --f7-theme-color-tint: #ffd429;
- }
- .text-color-yellow {
- --f7-theme-color-text-color: #ffcc00;
- }
- .bg-color-yellow {
- --f7-theme-color-bg-color: #ffcc00;
- }
- .border-color-yellow {
- --f7-theme-color-border-color: #ffcc00;
- }
- .ripple-color-yellow,
- .ripple-yellow {
- --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
- }
- .color-orange {
- --f7-theme-color: #ff9500;
- --f7-theme-color-rgb: 255, 149, 0;
- --f7-theme-color-shade: #d67d00;
- --f7-theme-color-tint: #ffa629;
- }
- .text-color-orange {
- --f7-theme-color-text-color: #ff9500;
- }
- .bg-color-orange {
- --f7-theme-color-bg-color: #ff9500;
- }
- .border-color-orange {
- --f7-theme-color-border-color: #ff9500;
- }
- .ripple-color-orange,
- .ripple-orange {
- --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
- }
- .color-purple {
- --f7-theme-color: #9c27b0;
- --f7-theme-color-rgb: 156, 39, 176;
- --f7-theme-color-shade: #7e208f;
- --f7-theme-color-tint: #b92fd1;
- }
- .text-color-purple {
- --f7-theme-color-text-color: #9c27b0;
- }
- .bg-color-purple {
- --f7-theme-color-bg-color: #9c27b0;
- }
- .border-color-purple {
- --f7-theme-color-border-color: #9c27b0;
- }
- .ripple-color-purple,
- .ripple-purple {
- --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
- }
- .color-deeppurple {
- --f7-theme-color: #673ab7;
- --f7-theme-color-rgb: 103, 58, 183;
- --f7-theme-color-shade: #563098;
- --f7-theme-color-tint: #7c52c8;
- }
- .text-color-deeppurple {
- --f7-theme-color-text-color: #673ab7;
- }
- .bg-color-deeppurple {
- --f7-theme-color-bg-color: #673ab7;
- }
- .border-color-deeppurple {
- --f7-theme-color-border-color: #673ab7;
- }
- .ripple-color-deeppurple,
- .ripple-deeppurple {
- --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
- }
- .color-lightblue {
- --f7-theme-color: #5ac8fa;
- --f7-theme-color-rgb: 90, 200, 250;
- --f7-theme-color-shade: #32bbf9;
- --f7-theme-color-tint: #82d5fb;
- }
- .text-color-lightblue {
- --f7-theme-color-text-color: #5ac8fa;
- }
- .bg-color-lightblue {
- --f7-theme-color-bg-color: #5ac8fa;
- }
- .border-color-lightblue {
- --f7-theme-color-border-color: #5ac8fa;
- }
- .ripple-color-lightblue,
- .ripple-lightblue {
- --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
- }
- .color-teal {
- --f7-theme-color: #009688;
- --f7-theme-color-rgb: 0, 150, 136;
- --f7-theme-color-shade: #006d63;
- --f7-theme-color-tint: #00bfad;
- }
- .text-color-teal {
- --f7-theme-color-text-color: #009688;
- }
- .bg-color-teal {
- --f7-theme-color-bg-color: #009688;
- }
- .border-color-teal {
- --f7-theme-color-border-color: #009688;
- }
- .ripple-color-teal,
- .ripple-teal {
- --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
- }
- .color-lime {
- --f7-theme-color: #cddc39;
- --f7-theme-color-rgb: 205, 220, 57;
- --f7-theme-color-shade: #bac923;
- --f7-theme-color-tint: #d6e25c;
- }
- .text-color-lime {
- --f7-theme-color-text-color: #cddc39;
- }
- .bg-color-lime {
- --f7-theme-color-bg-color: #cddc39;
- }
- .border-color-lime {
- --f7-theme-color-border-color: #cddc39;
- }
- .ripple-color-lime,
- .ripple-lime {
- --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
- }
- .color-deeporange {
- --f7-theme-color: #ff6b22;
- --f7-theme-color-rgb: 255, 107, 34;
- --f7-theme-color-shade: #f85200;
- --f7-theme-color-tint: #ff864b;
- }
- .text-color-deeporange {
- --f7-theme-color-text-color: #ff6b22;
- }
- .bg-color-deeporange {
- --f7-theme-color-bg-color: #ff6b22;
- }
- .border-color-deeporange {
- --f7-theme-color-border-color: #ff6b22;
- }
- .ripple-color-deeporange,
- .ripple-deeporange {
- --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
- }
- .color-gray {
- --f7-theme-color: #8e8e93;
- --f7-theme-color-rgb: 142, 142, 147;
- --f7-theme-color-shade: #79797f;
- --f7-theme-color-tint: #a3a3a7;
- }
- .text-color-gray {
- --f7-theme-color-text-color: #8e8e93;
- }
- .bg-color-gray {
- --f7-theme-color-bg-color: #8e8e93;
- }
- .border-color-gray {
- --f7-theme-color-border-color: #8e8e93;
- }
- .ripple-color-gray,
- .ripple-gray {
- --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
- }
- .color-white {
- --f7-theme-color: #ffffff;
- --f7-theme-color-rgb: 255, 255, 255;
- --f7-theme-color-shade: #ebebeb;
- --f7-theme-color-tint: #ffffff;
- }
- .text-color-white {
- --f7-theme-color-text-color: #ffffff;
- }
- .bg-color-white {
- --f7-theme-color-bg-color: #ffffff;
- }
- .border-color-white {
- --f7-theme-color-border-color: #ffffff;
- }
- .ripple-color-white,
- .ripple-white {
- --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
- }
- .color-black {
- --f7-theme-color: #000000;
- --f7-theme-color-rgb: 0, 0, 0;
- --f7-theme-color-shade: #000000;
- --f7-theme-color-tint: #141414;
- }
- .text-color-black {
- --f7-theme-color-text-color: #000000;
- }
- .bg-color-black {
- --f7-theme-color-bg-color: #000000;
- }
- .border-color-black {
- --f7-theme-color-border-color: #000000;
- }
- .ripple-color-black,
- .ripple-black {
- --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
- }
- @font-face {
- font-family: 'framework7-core-icons';
- src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAA0sABAAAAAAGRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAANEAAAABoAAAAci1jrz0dERUYAAAsIAAAAIwAAACQAfQBXR1BPUwAADOAAAAAuAAAANuAY7+xHU1VCAAALLAAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAowAAACIAAABYt6F0cBjdnQgAAADFAAAAAQAAAAEABEBRGdhc3AAAAsAAAAACAAAAAj//wADZ2x5ZgAAA6wAAASlAAAKBIq7ZiloZWFkAAABbAAAADAAAAA2FnYC32hoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABhAAABJC+cAAFsb2NhAAADGAAAAJQAAACURlRI+G1heHAAAAG8AAAAHwAAACAAjwBMbmFtZQAACFQAAAFTAAAC2WC6Sihwb3N0AAAJqAAAAVYAAAJ2B5LxL3jaY2BkYGAA4iKuLVLx/DZfGbiZGEDgZk2iIYz+/+NfL0sa02cgl4MBLA0AJsoLsnjaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGZgYQABJiBmZACJOTDogQQADdEA3AB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMb/7/Z9gNZBtDzGY6CzGHCcQHigMA2dAWtwAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DHgMwA0IDYANyA5YDtAPEA+oD/AQWBEYEZgR4BIoEsgTIBOIFAnja7VXBTyNVGP++Ke106XamnbYztYeVlukMRmWl03ZwLdAIeCCKZgOKXBY2m15Es8S03lpuSzaSGsOGQPZGoomegI0mmwjVC5uNdZPGgzGc8MDG4ImLmyxTvzfTKmX/A7PJe/O995vXN7/3+37fK3AQBIB1nAYX8NC/hXA5t813wV+pLY/7ILft4mgIWy4Guxm8zXvwaW4bGW4EjaBuBHuDy58VCjhtfRtEg3ZDajW70yg4wMbPsefY/x7jzmAuQl/nbBi6qF/A93CWKkyECCgAUsITllPZtJaSw56ElnabuoiKqX8zlctN5e4uTEwsTOCo/6YgLAqLmM9NDQ1NvT/B4CfCTT8DHQ7NH9Ggj0gAyYTIsZ1GUNfS2dSLKKOOiH/4emTf3p5PjvsOxW2OO/TJPb7dPYYeig7n5hHW8Cu6B16gXRRez+ie3gTbQ46EeSXBWBJbzC9pS3z/yPj8/O3rffx3c2Njc6MrS1olwvfN356fHx/u50fnRkfnbF6gwS6d1w0Q4mlLc7dUUjc2MGsHaHE/wQ1cAS99NRJnixQeN6wHVbVeV6u/p53YWgt+/AlvsP1MVFA3qyiqVr2qTrciYPMJafEyaUH3mZkdQaIfJkmZvJdRcyOdnM68u8vOfyg+Qtch04TmjhLsG2HYdzibREY39zfVSkX9np7lZOf7DFFV+NbrZLmi2jpaK10F7gR8LL9JnRYoJmXU1LkelQtIak+XFOC4/H52v93esH6xTtfW0IUpdK2t/blvtl+ZTw/+ha1TtuxZzZhgdP+auMF0Mr6osYCDJGBbszy+g3nw0EThB2g1vqQeLKqEUeh921mzgG+iBgEaMblsrWz3mFlMC/wyL1MXZG+x6EVNYBOGCXyxyNtnhlms0+/ZfwcMYTzizsQjWLcMrJ8Yxrph2JxrGKW8kG5JZLpitAnRx4+jNScQj+bf8CH8iq+CAECZU2QRBSQmZlaZmOsOBLo/doc8V/yCePHzL8Vun/i1F/m8eNEvOGe4hm8RB+Y1chGvb9qJQc0O4HgcZByj3Pmp+oCSd8bhnpa/j2dCM+pr5uTkJ5NbM8PDM8NLH4RmLtFs0hy4MsKQTr2Yw6jIbHvxrPA6xJKFtbZUpRJhnTxJBPKGw/Paplouq3YdrnAFPCElQwDpAJELeBJI52k76Z51754FzVih0G55hJ2dJuzg+hkQOjXPIPMqQvToKFrDluLtmirgp+RXQN4WzqaFhWpVbTd898yE8tS09rhjrgYxAHfQ1i9oDrMi49GjJ3TsJ9+kFBxU08mfpXRIkqyHkVgsZD2UMCRlpI+441gyGTsN19k8zd5yIcxKBq1scboE9/E60zfrePG/Qr7fab/+gHfZG6YekB03Or8fp/tQsz1vW95E49EN6eoPGLbD+buJ3To63UhqsYizFEqlll+as1yd0+AC8wvlwmDJ6E2EzlR1Y/VOo3FndbWcLVOrsOcr2NdoWL818G7FLJfNiv08X7f2N+OZuF5n9Wo9wMEqrrBh2q5bF+PHGcSP1RTlJphxqop1zjitO52USS/Z7bxuAceWrJadPwMy5C2ev+V1rIhXn9HtH4d0614AAAB42q2QvU7DMBSFj9u0EgyIgewe26qJnA79G6nUpQtiyB5S01ht4sqNVFW8DBsbIxtPwcLEzltw7RqJoQNDI135y/G59rkGcIVXMBy/Du49M4R48dzAJT48N5GwW88BQvbsuYVr9um5jbARkpMFF/R357osM/Tw5LmBG7x7buIBX54D9FjtuQXO3jy3Sf/GDBpbHGCgsEKBGpwy5+jSOoBAggn6xCk2yLAkV0llSFmQOyOyeklnKLeLmd4ejFoVNe/kXT4QyaTP0022VKUyfFFkZpOVW7Uk5yM121aJPYUwWGOEiK62LImU4wo7spqslHtt1qMo10ZGKtcVySe9fw1zJ9ZuNTSfdFPFNBfHlOr/EY7+BENSx1S/b4O5ruq5NivJB7HgU34yKunJMBpH9jnOMXhKPkP7yvk4ZbFpYrfa2ZBKs1O64kIksRCCn+HSH1E3hiEAeNptkAlPwkAUhGfAAxAsyCV4/hbjfd+3aWq7SiN0yXY5/rzRhVKhiZs06b5v3rzZhxTG5+cbxH/nyHxECmkUUUYFVdRQxyoaaGIN69jBLvawjwMcGu0xTnCKM5zjApe4wjVucIs73OMBj3jCM17wijemmOYc57nARWaYZY5LzLPAZVosssQVlllhlTXWucoGm1zjOje4yS1u50LhKLdl+zIsuS3RVzKwlf/Z0qNKdgI7nhWztvjQ5l5wlJKD+LZkqPv1Lofmv5hQGpNCwjY/i2uB1P6H7zraNxW3LUMx6rAi83eptewYy6xyPF+OSDnu9uQgsJ2ekspZDKUahwgHflcoOxBDbf0FijS5uK/XLUzeFIHSFEwq+dkRlifaQgtbyV7gzczoKtHPTphZRlcrO8o8m3G8gKlplMcIisk9m5UlphjFcmQW88z4haZeSXZG3r8TK74rAAAAAAAB//8AAnjaY2BkYGDgAWIZIGYCQmYGTQZGBi0GDyCbBSzGAAANdgDVAHjadVJJTgJBFH1FdwKOIKB0lEEGwSDOs+KsaDyDGzYaE+LCEA/gwjMY4zlcegbjEYwLb4HvVwM9hXS6q/q9V/+/+v9DARhGFjWoVrP9gAhMIuh0IIxq3d81icH+I2fqNQJl/CKMJJ5C7dC3YRolow6D+Dwa2EAUeT5ZlLmb4Frkk0Waf2kkqBh38XlYmEKKCptdwpiLnWGOyT4XxSyu8Yg3fOJHmaqsGupWPat39aG+1B+uqE7xndPnM77oMZQ0nufulNG8SieTW7cV0CW0s4xPV+c9vboScj7NQkDjdmcRK2CFukG+bMV5QOGv4CLXQTGE3+3ycUzr7lR8PlfZgUEZzjAaOGv7WusywawHAaZXw2WMBKKJwz3OZLCaMl9V9v+CHpM6epFvVGtKVCX6Xg65G6SQ+McY8vCCyXSv85YyrRZ9W3QV03vbQZx6iZ3sZ5ETJ6xVkfGlgs7UOvwmM8UYXZAeHiZSYx9vOMkveMU+YyT1+Thv7e3FEStU5rkcFZIlx6/UZceHZ7hW6KTKyrlj2Rlr+r4OKve9ZDUlhzNZ23TWQ+yKiNM4dxmdt/APtJZExAB42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPpmTaIhjAYAPREFnQAA") format("woff");
- font-weight: 400;
- font-style: normal;
- }
- @font-face {
- font-family: 'framework7-skeleton';
- src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
- font-weight: 300, 400, 500, 600, 700;
- font-style: normal, italic;
- }
- html,
- body,
- .framework7-root {
- position: relative;
- height: 100%;
- width: 100%;
- overflow-x: hidden;
- }
- body {
- margin: 0;
- padding: 0;
- width: 100%;
- background: #fff;
- overflow: hidden;
- -webkit-text-size-adjust: 100%;
- -webkit-font-smoothing: antialiased;
- font-family: var(--f7-font-family);
- font-size: var(--f7-font-size);
- line-height: var(--f7-line-height);
- color: var(--f7-text-color);
- }
- .theme-dark body,
- body.theme-dark {
- background: #000;
- }
- .theme-dark {
- color: var(--f7-text-color);
- }
- .framework7-root {
- overflow: hidden;
- box-sizing: border-box;
- }
- .framework7-initializing *,
- .framework7-initializing *:before,
- .framework7-initializing *:after {
- transition-duration: 0ms !important;
- }
- .device-ios,
- .device-android {
- cursor: pointer;
- }
- .device-ios {
- touch-action: manipulation;
- }
- @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
- html,
- body,
- .framework7-root {
- height: 671px;
- }
- }
- @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
- html,
- body,
- .framework7-root {
- height: 672px;
- }
- }
- * {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-touch-callout: none;
- }
- a,
- input,
- textarea,
- select {
- outline: 0;
- }
- a {
- cursor: pointer;
- text-decoration: none;
- color: var(--f7-theme-color);
- }
- .link,
- .item-link {
- cursor: pointer;
- }
- p {
- margin: 1em 0;
- }
- .disabled {
- opacity: 0.55 !important;
- pointer-events: none !important;
- }
- html.device-full-viewport,
- html.device-full-viewport body {
- height: 100vh;
- }
- .ios .md-only,
- .ios .if-md,
- .ios .aurora-only,
- .ios .if-aurora,
- .ios .if-not-ios,
- .ios .not-ios {
- display: none !important;
- }
- @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
- .ios,
- .ios body,
- .ios .framework7-root {
- height: 671px;
- }
- }
- @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
- .ios,
- .ios body,
- .ios .framework7-root {
- height: 672px;
- }
- }
- .md .ios-only,
- .md .if-ios,
- .md .aurora-only,
- .md .if-aurora,
- .md .if-not-md,
- .md .not-md {
- display: none !important;
- }
- .aurora .ios-only,
- .aurora .if-ios,
- .aurora .md-only,
- .aurora .if-md,
- .aurora .if-not-aurora,
- .aurora .not-aurora {
- display: none !important;
- }
- /* === Statusbar === */
- /* === Views === */
- .views,
- .view {
- position: relative;
- height: 100%;
- z-index: 5000;
- overflow: hidden;
- box-sizing: border-box;
- }
- .framework7-root > .view,
- .framework7-root > .views {
- height: calc(100% - var(--f7-appbar-app-offset, 0px));
- }
- .view-resize-handler {
- width: 6px;
- height: 100%;
- position: absolute;
- left: var(--f7-page-master-width);
- margin-left: -3px;
- top: 0;
- cursor: col-resize;
- z-index: 1000;
- display: none;
- }
- .view-master-detail .view-resize-handler {
- display: block;
- }
- /* === Pages === */
- :root {
- --f7-page-master-width: 320px;
- --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
- --f7-page-master-border-width: 1px;
- --f7-page-swipeback-transition-duration: 300ms;
- --f7-page-parallax-transition-duration: 500ms;
- --f7-page-cover-transition-duration: 450ms;
- --f7-page-dive-transition-duration: 500ms;
- --f7-page-fade-transition-duration: 500ms;
- --f7-page-flip-transition-duration: 700ms;
- --f7-page-push-transition-duration: 500ms;
- /*
- --f7-page-content-extra-padding-top: 0px;
- --f7-page-content-extra-padding-bottom: 0px;
- */
- }
- .ios {
- --f7-page-transition-duration: 400ms;
- --f7-page-bg-color: #efeff4;
- }
- .ios .theme-dark,
- .ios.theme-dark {
- --f7-page-bg-color: #000;
- }
- .md {
- --f7-page-transition-duration: 250ms;
- --f7-page-bg-color: #fff;
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-page-bg-color: #121212;
- }
- .aurora {
- --f7-page-transition-duration: 400ms;
- --f7-page-bg-color: #f3f3f3;
- }
- .aurora .theme-dark,
- .aurora.theme-dark {
- --f7-page-bg-color: #121212;
- }
- .theme-dark {
- --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
- }
- .pages {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- .page {
- box-sizing: border-box;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- transform: none;
- background-color: var(--f7-page-bg-color);
- z-index: 1;
- }
- .page.stacked {
- display: none;
- }
- .page-with-navbar-large-collapsed {
- --f7-navbar-large-collapse-progress: 1;
- }
- .page-previous {
- pointer-events: none;
- }
- .page-content {
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- box-sizing: border-box;
- height: 100%;
- position: relative;
- z-index: 1;
- padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
- padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
- }
- .page-transitioning,
- .page-transitioning .page-shadow-effect,
- .page-transitioning .page-opacity-effect {
- transition-duration: var(--f7-page-transition-duration);
- }
- .page-transitioning-swipeback,
- .page-transitioning-swipeback .page-shadow-effect,
- .page-transitioning-swipeback .page-opacity-effect {
- transition-duration: var(--f7-page-swipeback-transition-duration);
- }
- .router-transition-forward .page-next,
- .router-transition-backward .page-next,
- .router-transition-forward .page-current,
- .router-transition-backward .page-current,
- .router-transition-forward .page-previous:not(.stacked),
- .router-transition-backward .page-previous:not(.stacked) {
- pointer-events: none;
- }
- .page-shadow-effect {
- position: absolute;
- top: 0;
- width: 16px;
- bottom: 0;
- z-index: -1;
- content: '';
- opacity: 0;
- right: 100%;
- background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
- }
- .page-opacity-effect {
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.1);
- width: 100%;
- bottom: 0;
- content: '';
- opacity: 0;
- z-index: 10000;
- }
- .ios .page-previous {
- transform: translate3d(-20%, 0, 0);
- }
- .ios .page-next {
- transform: translate3d(100%, 0, 0);
- }
- .ios .page-previous .page-opacity-effect {
- opacity: 1;
- }
- .ios .page-previous:after {
- opacity: 1;
- }
- .ios .page-current .page-shadow-effect {
- opacity: 1;
- }
- .ios .router-transition-forward .page-next {
- animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .page-next:before {
- position: absolute;
- top: 0;
- width: 16px;
- bottom: 0;
- z-index: -1;
- content: '';
- opacity: 0;
- right: 100%;
- background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
- animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .page-current {
- animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .page-current:after {
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.1);
- width: 100%;
- bottom: 0;
- content: '';
- opacity: 0;
- z-index: 10000;
- animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .page-previous {
- animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .page-previous:after {
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.1);
- width: 100%;
- bottom: 0;
- content: '';
- opacity: 0;
- z-index: 10000;
- animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .page-current {
- animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .page-current:before {
- position: absolute;
- top: 0;
- width: 16px;
- bottom: 0;
- z-index: -1;
- content: '';
- opacity: 0;
- right: 100%;
- background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
- animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
- }
- @keyframes ios-page-next-to-current {
- from {
- transform: translate3d(100%, 0, 0);
- }
- to {
- transform: translate3d(0%, 0, 0);
- }
- }
- @keyframes ios-page-previous-to-current {
- from {
- transform: translate3d(-20%, 0, 0);
- }
- to {
- transform: translate3d(0%, 0, 0);
- }
- }
- @keyframes ios-page-current-to-previous {
- from {
- transform: translate3d(0, 0, 0);
- }
- to {
- transform: translate3d(-20%, 0, 0);
- }
- }
- @keyframes ios-page-current-to-next {
- from {
- transform: translate3d(0, 0, 0);
- }
- to {
- transform: translate3d(100%, 0, 0);
- }
- }
- @keyframes ios-page-element-fade-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes ios-page-element-fade-out {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- .md .page-next {
- transform: translate3d(0, 56px, 0);
- opacity: 0;
- pointer-events: none;
- }
- .md .page-next.page-next-on-right {
- transform: translate3d(100%, 0, 0);
- }
- .md .router-transition-forward .page-next {
- animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
- }
- .md .router-transition-forward .page-current {
- animation: none;
- }
- .md .router-transition-backward .page-current {
- animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
- }
- .md .router-transition-backward .page-previous {
- animation: none;
- }
- @keyframes md-page-next-to-current {
- from {
- transform: translate3d(0, 56px, 0);
- opacity: 0;
- }
- to {
- transform: translate3d(0, 0px, 0);
- opacity: 1;
- }
- }
- @keyframes md-page-current-to-next {
- from {
- transform: translate3d(0, 0, 0);
- opacity: 1;
- }
- to {
- transform: translate3d(0, 56px, 0);
- opacity: 0;
- }
- }
- .aurora .page-next {
- pointer-events: none;
- transform: translate3d(100%, 0px, 0);
- }
- .aurora .page-next.page-next-on-right {
- transform: translate3d(100%, 0, 0);
- }
- .aurora .page-previous .page-opacity-effect {
- opacity: 1;
- }
- .aurora .page-previous:after {
- opacity: 1;
- }
- .aurora .router-transition-forward .page-next {
- animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
- }
- .aurora .router-transition-forward .page-current {
- animation: none;
- }
- .aurora .router-transition-forward .page-current:after {
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.1);
- width: 100%;
- bottom: 0;
- content: '';
- opacity: 0;
- z-index: 10000;
- animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
- }
- .aurora .router-transition-backward .page-current {
- animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
- }
- .aurora .router-transition-backward .page-previous {
- animation: none;
- }
- .aurora .router-transition-backward .page-previous:after {
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.1);
- width: 100%;
- bottom: 0;
- content: '';
- opacity: 0;
- z-index: 10000;
- animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
- }
- @keyframes aurora-page-next-to-current {
- from {
- transform: translate3d(100%, 0, 0);
- }
- to {
- transform: translate3d(0, 0px, 0);
- }
- }
- @keyframes aurora-page-current-to-next {
- from {
- transform: translate3d(0, 0, 0);
- }
- to {
- transform: translate3d(100%, 0, 0);
- }
- }
- @keyframes aurora-page-element-fade-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes aurora-page-element-fade-out {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- .view:not(.view-master-detail) .page-master-stacked {
- display: none;
- }
- .view:not(.view-master-detail) .navbar-master-stacked {
- display: none;
- }
- .view-master-detail .page-master,
- .view-master-detail .navbar-master {
- width: var(--f7-page-master-width);
- --f7-safe-area-right: 0px;
- --f7-safe-area-outer-right: 0px;
- border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
- }
- .view-master-detail .page-master-detail,
- .view-master-detail .navbar-master-detail {
- width: calc(100% - var(--f7-page-master-width));
- --f7-safe-area-left: 0px;
- --f7-safe-area-outer-left: 0px;
- left: var(--f7-page-master-width);
- }
- .view-master-detail .page-master {
- z-index: 2;
- transform: none;
- pointer-events: auto;
- }
- .view-master-detail .page-master:before,
- .view-master-detail .page-master:after {
- display: none;
- }
- .view-master-detail.router-transition .page-master {
- animation: none;
- }
- .md .router-transition-custom .page-previous,
- .ios .router-transition-custom .page-previous,
- .aurora .router-transition-custom .page-previous,
- .md .router-transition-custom .page-next,
- .ios .router-transition-custom .page-next,
- .aurora .router-transition-custom .page-next {
- opacity: 1;
- transform: none;
- }
- .router-transition-f7-circle-forward:after,
- .router-transition-f7-circle-backward:after {
- content: '';
- position: absolute;
- left: 50%;
- top: 50%;
- width: 100vmax;
- height: 100vmax;
- margin-left: -50vmax;
- margin-top: -50vmax;
- background: var(--f7-page-bg-color);
- z-index: 100;
- }
- .router-transition-f7-circle-forward:after {
- transform: scale(0);
- border-radius: 50%;
- animation: f7-circle-circle-in 400ms forwards;
- }
- .router-transition-f7-circle-forward .page-next {
- opacity: 0 !important;
- transform: scale(0.9) !important;
- animation: f7-circle-next-to-current 300ms forwards;
- animation-delay: 300ms;
- z-index: 150;
- }
- .router-transition-f7-circle-backward:after {
- animation: f7-circle-circle-out 300ms forwards;
- animation-delay: 350ms;
- }
- .router-transition-f7-circle-backward .page-current {
- animation: f7-circle-current-to-next 700ms forwards;
- z-index: 150;
- }
- @keyframes f7-circle-circle-in {
- from {
- transform: scale(0);
- border-radius: 50%;
- }
- 50% {
- border-radius: 50%;
- }
- to {
- transform: scale(1);
- border-radius: 0%;
- }
- }
- @keyframes f7-circle-circle-out {
- from {
- transform: scale(1);
- border-radius: 0%;
- }
- 50% {
- border-radius: 50%;
- }
- to {
- transform: scale(0);
- border-radius: 50%;
- }
- }
- @keyframes f7-circle-next-to-current {
- from {
- transform: scale(0.9);
- opacity: 0;
- }
- 40% {
- transform: scale(1.035);
- opacity: 1;
- }
- to {
- transform: scale(1);
- opacity: 1;
- }
- }
- @keyframes f7-circle-current-to-next {
- from {
- transform: scale(1);
- opacity: 1;
- }
- 34% {
- transform: scale(1.035);
- opacity: 1;
- }
- 57% {
- transform: scale(0.9);
- opacity: 0;
- }
- to {
- transform: scale(0.9);
- opacity: 0;
- }
- }
- .router-transition-f7-cover-v-forward,
- .router-transition-f7-cover-v-backward {
- background: #000;
- perspective: 1200px;
- }
- .router-transition-f7-cover-v-forward .page-next {
- animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
- }
- .router-transition-f7-cover-v-forward .page-current {
- animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards;
- }
- .router-transition-f7-cover-v-backward .page-current {
- animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards;
- }
- .router-transition-f7-cover-v-backward .page-previous {
- animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards;
- }
- @keyframes f7-cover-v-next-to-current {
- from {
- transform: translateY(100%);
- }
- to {
- transform: translateY(0%);
- }
- }
- @keyframes f7-cover-v-current-to-next {
- from {
- transform: translateY(0%);
- }
- to {
- transform: translateY(100%);
- }
- }
- @keyframes f7-cover-v-current-to-prev {
- from {
- transform: translateZ(0);
- opacity: 1;
- }
- to {
- transform: translateZ(-300px);
- opacity: 0.5;
- }
- }
- @keyframes f7-cover-v-prev-to-current {
- from {
- transform: translateZ(-300px);
- opacity: 0.5;
- }
- to {
- transform: translateZ(0);
- opacity: 1;
- }
- }
- .router-transition-f7-cover-forward,
- .router-transition-f7-cover-backward {
- background: #000;
- perspective: 1200px;
- }
- .router-transition-f7-cover-forward .page-next {
- animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
- }
- .router-transition-f7-cover-forward .page-current {
- animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards;
- }
- .router-transition-f7-cover-backward .page-current {
- animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards;
- }
- .router-transition-f7-cover-backward .page-previous {
- animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards;
- }
- @keyframes f7-cover-next-to-current {
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0%);
- }
- }
- @keyframes f7-cover-current-to-next {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(100%);
- }
- }
- @keyframes f7-cover-current-to-prev {
- from {
- transform: translateZ(0);
- opacity: 1;
- }
- to {
- transform: translateZ(-300px);
- opacity: 0.5;
- }
- }
- @keyframes f7-cover-prev-to-current {
- from {
- transform: translateZ(-300px);
- opacity: 0.5;
- }
- to {
- transform: translateZ(0);
- opacity: 1;
- }
- }
- .router-transition-f7-dive-forward,
- .router-transition-f7-dive-backward {
- background: var(--f7-page-bg-color);
- perspective: 1200px;
- }
- .router-transition-f7-dive-forward .page-next {
- animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
- }
- .router-transition-f7-dive-forward .page-current {
- animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards;
- }
- .router-transition-f7-dive-backward .page-current {
- animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards;
- }
- .router-transition-f7-dive-backward .page-previous {
- animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards;
- }
- @keyframes f7-dive-next-to-current {
- from {
- opacity: 0;
- transform: translateZ(-150px);
- }
- 50% {
- opacity: 0;
- }
- to {
- opacity: 1;
- transform: translateZ(0px);
- }
- }
- @keyframes f7-dive-current-to-next {
- from {
- opacity: 1;
- transform: translateZ(0px);
- }
- 50% {
- opacity: 0;
- }
- to {
- opacity: 0;
- transform: translateZ(-150px);
- }
- }
- @keyframes f7-dive-current-to-prev {
- from {
- transform: translateZ(0px);
- opacity: 1;
- }
- 50% {
- opacity: 0;
- }
- to {
- opacity: 0;
- transform: translateZ(150px);
- }
- }
- @keyframes f7-dive-prev-to-current {
- from {
- opacity: 0;
- transform: translateZ(150px);
- }
- 50% {
- opacity: 0;
- }
- to {
- opacity: 1;
- transform: translateZ(0px);
- }
- }
- .router-transition-f7-fade-forward,
- .router-transition-f7-fade-backward {
- background: var(--f7-page-bg-color);
- }
- .router-transition-f7-fade-forward .page-next {
- opacity: 0 !important;
- animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
- }
- .router-transition-f7-fade-forward .page-current {
- animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
- }
- .router-transition-f7-fade-backward .page-current {
- animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
- }
- .router-transition-f7-fade-backward .page-previous {
- animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
- }
- @keyframes f7-fade-in {
- from {
- opacity: 0;
- }
- 50% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes f7-fade-out {
- from {
- opacity: 1;
- }
- 50% {
- opacity: 0;
- }
- to {
- opacity: 0;
- }
- }
- .router-transition-f7-flip-forward,
- .router-transition-f7-flip-backward {
- background: #000;
- perspective: 1200px;
- }
- .router-transition-f7-flip-forward .page,
- .router-transition-f7-flip-backward .page {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .router-transition-f7-flip-forward .page-next {
- animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
- }
- .router-transition-f7-flip-forward .page-current {
- animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
- }
- .router-transition-f7-flip-backward .page-current {
- animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
- }
- .router-transition-f7-flip-backward .page-previous {
- animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
- }
- @keyframes f7-flip-next-to-current {
- from {
- border-radius: 30px;
- transform: translateZ(-100vmax) rotateY(180deg);
- }
- to {
- border-radius: 0;
- transform: translateZ(0px) rotateY(0deg);
- }
- }
- @keyframes f7-flip-current-to-next {
- from {
- border-radius: 0px;
- transform: translateZ(0px) rotateY(0deg);
- }
- to {
- border-radius: 30px;
- transform: translateZ(-100vmax) rotateY(180deg);
- }
- }
- @keyframes f7-flip-current-to-prev {
- from {
- border-radius: 0px;
- transform: translateZ(0px) rotateY(0deg);
- }
- to {
- border-radius: 30px;
- transform: translateZ(-100vmax) rotateY(-180deg);
- }
- }
- @keyframes f7-flip-prev-to-current {
- from {
- border-radius: 30px;
- transform: translateZ(-100vmax) rotateY(-180deg);
- }
- to {
- border-radius: 0px;
- transform: translateZ(0px) rotateY(0deg);
- }
- }
- .router-transition-f7-parallax-forward .page-next {
- animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
- }
- .router-transition-f7-parallax-forward .page-current {
- animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
- }
- .router-transition-f7-parallax-backward .page-current {
- animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
- }
- .router-transition-f7-parallax-backward .page-previous {
- animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards;
- }
- @keyframes f7-parallax-next-to-current {
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0%);
- }
- }
- @keyframes f7-parallax-current-to-next {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(100%);
- }
- }
- @keyframes f7-parallax-current-to-prev {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-20%);
- }
- }
- @keyframes f7-parallax-prev-to-current {
- from {
- transform: translateX(-20%);
- }
- to {
- transform: translateX(0%);
- }
- }
- .router-transition-f7-push-forward .page-next {
- animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
- }
- .router-transition-f7-push-forward .page-current {
- animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
- }
- .router-transition-f7-push-backward .page-current {
- animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
- }
- .router-transition-f7-push-backward .page-previous {
- animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards;
- }
- @keyframes f7-push-next-to-current {
- from {
- transform: translateX(100%);
- }
- to {
- transform: translateX(0%);
- }
- }
- @keyframes f7-push-current-to-next {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(100%);
- }
- }
- @keyframes f7-push-current-to-prev {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-100%);
- }
- }
- @keyframes f7-push-prev-to-current {
- from {
- transform: translateX(-100%);
- }
- to {
- transform: translateX(0%);
- }
- }
- /* === Link === */
- :root {
- --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
- --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
- --f7-link-highlight-color: var(--f7-link-highlight-black);
- }
- .theme-dark {
- --f7-link-highlight-color: var(--f7-link-highlight-white);
- }
- .link,
- .tab-link {
- display: inline-flex;
- align-items: center;
- align-content: center;
- justify-content: center;
- position: relative;
- box-sizing: border-box;
- z-index: 1;
- }
- .link i + span,
- .link i + i,
- .link span + i,
- .link span + span {
- margin-left: 4px;
- }
- .ios .link {
- transition: opacity 300ms;
- }
- .ios .link.active-state {
- opacity: 0.3;
- transition-duration: 0ms;
- }
- .aurora .link {
- transition: opacity 300ms;
- }
- .aurora .link.active-state {
- opacity: 0.3;
- transition-duration: 0ms;
- }
- /* === Navbar === */
- :root {
- /*
- --f7-navbar-bg-color: var(--f7-bars-bg-color);
- --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
- --f7-navbar-bg-image: var(--f7-bars-bg-image);
- --f7-navbar-border-color: var(--f7-bars-border-color);
- --f7-navbar-link-color: var(--f7-bars-link-color);
- --f7-navbar-text-color: var(--f7-bars-text-color);
- */
- --f7-navbar-hide-show-transition-duration: 400ms;
- --f7-navbar-title-line-height: 1.2;
- --f7-navbar-title-font-size: inherit;
- --f7-navbar-subtitle-text-align: inherit;
- --f7-navbar-large-title-line-height: 1.2;
- --f7-navbar-large-title-text-color: inherit;
- --f7-navbar-large-title-padding-left: 16px;
- --f7-navbar-large-title-padding-right: 16px;
- }
- .ios {
- --f7-navbar-height: 44px;
- --f7-navbar-tablet-height: 44px;
- --f7-navbar-font-size: 17px;
- --f7-navbar-inner-padding-left: 8px;
- --f7-navbar-inner-padding-right: 8px;
- --f7-navbar-title-font-weight: 600;
- --f7-navbar-title-margin-left: 0;
- --f7-navbar-title-margin-right: 0;
- --f7-navbar-title-text-align: center;
- --f7-navbar-subtitle-font-size: 10px;
- --f7-navbar-subtitle-line-height: 1;
- --f7-navbar-shadow-image: none;
- --f7-navbar-large-title-height: 52px;
- --f7-navbar-large-title-font-size: 34px;
- --f7-navbar-large-title-font-weight: 700;
- --f7-navbar-large-title-letter-spacing: -0.03em;
- --f7-navbar-large-title-padding-vertical: 6px;
- /*
- --f7-navbar-link-height: var(--f7-navbar-height);
- --f7-navbar-link-line-height: var(--f7-navbar-height);
- */
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
- }
- .ios .theme-dark,
- .ios.theme-dark {
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
- }
- .md {
- --f7-navbar-height: 56px;
- --f7-navbar-tablet-height: 64px;
- --f7-navbar-font-size: 20px;
- --f7-navbar-inner-padding-left: 0px;
- --f7-navbar-inner-padding-right: 0px;
- --f7-navbar-title-font-weight: 500;
- --f7-navbar-title-margin-left: 16px;
- --f7-navbar-title-margin-right: 16px;
- --f7-navbar-title-text-align: left;
- --f7-navbar-subtitle-font-size: 14px;
- --f7-navbar-subtitle-line-height: 1.2;
- --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
- --f7-navbar-large-title-font-size: 34px;
- --f7-navbar-large-title-height: 56px;
- --f7-navbar-large-title-font-weight: 500;
- --f7-navbar-large-title-letter-spacing: 0;
- --f7-navbar-large-title-padding-vertical: 8px;
- /*
- --f7-navbar-link-height: var(--f7-navbar-height);
- --f7-navbar-link-line-height: var(--f7-navbar-height);
- */
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
- }
- .aurora {
- --f7-navbar-height: 38px;
- --f7-navbar-tablet-height: 38px;
- --f7-navbar-font-size: 14px;
- --f7-navbar-inner-padding-left: 16px;
- --f7-navbar-inner-padding-right: 16px;
- --f7-navbar-title-font-weight: 600;
- --f7-navbar-title-margin-left: 0;
- --f7-navbar-title-margin-right: 0;
- --f7-navbar-title-text-align: center;
- --f7-navbar-subtitle-font-size: 12px;
- --f7-navbar-subtitle-line-height: 1;
- --f7-navbar-shadow-image: none;
- --f7-navbar-large-title-height: 38px;
- --f7-navbar-large-title-font-size: 26px;
- --f7-navbar-large-title-font-weight: bold;
- --f7-navbar-large-title-letter-spacing: -0.03em;
- --f7-navbar-large-title-padding-vertical: 4px;
- --f7-navbar-link-height: auto;
- --f7-navbar-link-line-height: inherit;
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
- }
- .aurora .theme-dark,
- .aurora.theme-dark {
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
- }
- .navbars,
- .navbar {
- z-index: 500;
- left: 0;
- top: 0;
- width: 100%;
- }
- .navbars {
- position: absolute;
- }
- .navbars .navbar {
- z-index: auto;
- }
- .navbar {
- --f7-navbar-large-collapse-progress: 0;
- position: relative;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- box-sizing: border-box;
- margin: 0;
- height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
- color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
- font-size: var(--f7-navbar-font-size);
- }
- .navbar.stacked {
- display: none;
- }
- .navbar b {
- font-weight: 500;
- }
- .navbar a {
- color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
- }
- .navbar a.link {
- display: flex;
- justify-content: flex-start;
- line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
- height: var(--f7-navbar-link-height, var(--f7-navbar-height));
- }
- .navbar .title,
- .navbar .left,
- .navbar .right {
- position: relative;
- z-index: 10;
- }
- .navbar .title {
- position: relative;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex-shrink: 10;
- font-weight: var(--f7-navbar-title-font-weight);
- display: inline-block;
- line-height: var(--f7-navbar-title-line-height);
- text-align: var(--f7-navbar-title-text-align);
- font-size: var(--f7-navbar-title-font-size);
- margin-left: var(--f7-navbar-title-margin-left);
- margin-right: var(--f7-navbar-title-margin-left);
- }
- .navbar .subtitle {
- display: block;
- color: var(--f7-navbar-subtitle-text-color);
- font-weight: normal;
- font-size: var(--f7-navbar-subtitle-font-size);
- line-height: var(--f7-navbar-subtitle-line-height);
- text-align: var(--f7-navbar-subtitle-text-align);
- }
- .navbar .left,
- .navbar .right {
- flex-shrink: 0;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .navbar .right:first-child {
- position: absolute;
- height: 100%;
- }
- .navbar.no-hairline .navbar-bg:after,
- .navbar.no-border .navbar-bg:after,
- .navbar .no-hairline .navbar-bg:after,
- .navbar .no-border .navbar-bg:after {
- display: none !important;
- }
- .navbar.no-hairline .title-large:after,
- .navbar.no-border .title-large:after,
- .navbar .no-hairline .title-large:after,
- .navbar .no-border .title-large:after {
- display: none !important;
- }
- .navbar.no-shadow .navbar-bg:before,
- .navbar .no-shadow .navbar-bg:before {
- display: none !important;
- }
- .navbar.navbar-hidden .navbar-bg:before,
- .navbar-hidden .navbar .navbar-bg:before {
- opacity: 0 !important;
- }
- .navbar-bg {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 0;
- background: var(--f7-navbar-bg-color);
- background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
- background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
- transition-property: transform;
- }
- @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
- .ios-translucent-bars .navbar-bg {
- background-color: rgba(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
- -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
- backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
- }
- }
- .navbar-bg:after,
- .navbar-bg:before {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .navbar-bg:after {
- content: '';
- position: absolute;
- background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .navbar-bg:before {
- content: '';
- position: absolute;
- right: 0;
- width: 100%;
- top: 100%;
- bottom: auto;
- height: 8px;
- pointer-events: none;
- background: var(--f7-navbar-shadow-image);
- }
- .navbar-bg:after {
- z-index: 1;
- }
- @media (min-width: 768px) and (min-height: 600px) {
- :root {
- --f7-navbar-height: var(--f7-navbar-tablet-height);
- }
- }
- .navbar-transitioning,
- .navbar-transitioning .left,
- .navbar-transitioning .title,
- .navbar-transitioning .right,
- .navbar-transitioning .title-large-text,
- .navbar-transitioning .navbar-bg,
- .navbar-transitioning .subnavbar,
- .navbar-transitioning .navbar-bg:before {
- transition-duration: var(--f7-navbar-hide-show-transition-duration);
- }
- .navbar-page-transitioning {
- transition-duration: var(--f7-page-swipeback-transition-duration) !important;
- }
- .navbar-page-transitioning .title-large-text,
- .navbar-page-transitioning .navbar-bg {
- transition-duration: var(--f7-page-swipeback-transition-duration) !important;
- }
- .navbar-hidden {
- transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
- }
- .navbar-hidden .navbar-inner {
- pointer-events: none;
- }
- .navbar-hidden .navbar-inner > .left,
- .navbar-hidden .navbar-inner > .title,
- .navbar-hidden .navbar-inner > .right {
- opacity: 0 !important;
- }
- .navbar-hidden .subnavbar {
- pointer-events: auto;
- }
- .navbar-hidden-statusbar {
- transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)), 0);
- }
- .navbar-large-hidden .navbar-large {
- --f7-navbar-large-collapse-progress: 1;
- }
- .navbar-inner {
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- box-sizing: border-box;
- padding: var(--f7-safe-area-top) calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
- transform: translate3d(0, 0, 0);
- z-index: 10;
- }
- .views > .navbar,
- .view > .navbar,
- .page > .navbar,
- .navbars > .navbar {
- position: absolute;
- }
- .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
- .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
- opacity: 0;
- }
- .navbar-large .navbar-bg {
- height: calc(100% + var(--f7-navbar-large-title-height));
- transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
- }
- .navbar-large-transparent .navbar-bg,
- .navbar-large.navbar-transparent .navbar-bg {
- opacity: var(--f7-navbar-large-collapse-progress);
- height: 100%;
- transform: none;
- }
- .ios .router-navbar-transition-to-large .navbar-bg,
- .ios .router-navbar-transition-from-large .navbar-bg,
- .navbar-bg.ios-swipeback-navbar-bg-large,
- .navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
- .navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
- height: calc(100% + var(--f7-navbar-large-title-height));
- transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
- }
- .ios .navbar:not(.navbar-large) .navbar-bg {
- --f7-navbar-large-collapse-progress: 1;
- }
- .navbar-large .title {
- opacity: var(--f7-navbar-large-collapse-progress);
- }
- .navbar-large-collapsed {
- --f7-navbar-large-collapse-progress: 1;
- }
- .navbar-large-collapsed .title-large {
- pointer-events: none;
- }
- .navbar .title-large {
- box-sizing: border-box;
- position: absolute;
- left: 0;
- right: 0;
- top: 100%;
- display: flex;
- align-items: flex-end;
- white-space: nowrap;
- overflow: hidden;
- height: var(--f7-navbar-large-title-height);
- z-index: 5;
- }
- .navbar .title-large-text {
- text-overflow: ellipsis;
- white-space: nowrap;
- color: var(--f7-navbar-large-title-text-color);
- letter-spacing: var(--f7-navbar-large-title-letter-spacing);
- font-size: var(--f7-navbar-large-title-font-size);
- font-weight: var(--f7-navbar-large-title-font-weight);
- line-height: var(--f7-navbar-large-title-line-height);
- padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
- padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
- padding-top: var(--f7-navbar-large-title-padding-vertical);
- padding-bottom: var(--f7-navbar-large-title-padding-vertical);
- box-sizing: border-box;
- overflow: hidden;
- width: 100%;
- transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
- transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
- }
- .navbar-no-title-large-transition .title-large-text {
- transition-duration: 0ms;
- }
- .navbar ~ *,
- .navbars ~ * {
- --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
- }
- .navbar ~ * .page-with-navbar-large,
- .navbar ~ .page-with-navbar-large,
- .navbars ~ * .page-with-navbar-large,
- .navbars ~ .page-with-navbar-large,
- .page-with-navbar-large .navbar ~ * {
- --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
- }
- .page.no-navbar,
- .page.no-navbar .navbar ~ * {
- --f7-page-navbar-offset: var(--f7-safe-area-top);
- }
- .ios {
- --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
- --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
- --f7-navbar-large-transparent-bg-center: translateX(0);
- --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
- --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
- --f7-navbar-large-transparent-bg-left: translateX(-100%);
- --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
- --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
- --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
- --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
- }
- .ios .navbar a.icon-only {
- width: 44px;
- margin: 0;
- justify-content: center;
- }
- .ios .navbar .left a + a,
- .ios .navbar .right a + a {
- margin-left: 16px;
- }
- .ios .navbar b {
- font-weight: 600;
- }
- .ios .navbar .left {
- margin-right: 10px;
- }
- .ios .navbar .right {
- margin-left: 10px;
- }
- .ios .navbar .right:first-child {
- right: calc(8px + var(--f7-safe-area-right));
- }
- .ios .navbar-inner {
- justify-content: space-between;
- }
- .ios .navbar-inner-left-title {
- justify-content: flex-start;
- }
- .ios .navbar-inner-left-title .right {
- margin-left: auto;
- }
- .ios .navbar-inner-left-title .title {
- text-align: left;
- margin-right: 10px;
- }
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
- .ios .view:not(.view-master-detail) .navbar-previous .left,
- .ios .navbar-next .left,
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .title,
- .ios .view:not(.view-master-detail) .navbar-previous .title,
- .ios .navbar-next .title,
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
- .ios .view:not(.view-master-detail) .navbar-previous .right,
- .ios .navbar-next .right,
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
- .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
- .ios .navbar-next .subnavbar,
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
- .ios .view:not(.view-master-detail) .navbar-previous .fading,
- .ios .navbar-next .fading {
- opacity: 0;
- }
- .ios .view-master-detail .navbar-previous:not(.navbar-master),
- .ios .view:not(.view-master-detail) .navbar-previous {
- pointer-events: none;
- }
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
- .ios .view:not(.view-master-detail) .navbar-previous .title-large {
- opacity: 0;
- transition-duration: 0ms;
- }
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
- .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
- transform: scale(0.5);
- transition-duration: 0ms;
- }
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
- .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding .subnavbar,
- .ios .view:not(.view-master-detail) .navbar-previous .sliding .subnavbar {
- opacity: 1;
- transform: translate3d(-100%, 0, 0);
- }
- .ios .view:not(.view-master-detail) .navbar-previous .navbar-bg,
- .ios .view-master-detail .navbar-previous:not(.navbar-master) .navbar-bg {
- transform: translateX(-100%);
- }
- .ios .navbar-next {
- pointer-events: none;
- }
- .ios .navbar-next .navbar-bg {
- transform: translateX(100%);
- }
- .ios .navbar-next .title-large .title-large-text {
- transition-duration: 0ms;
- transform: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
- }
- .ios .navbar-next .subnavbar.sliding,
- .ios .navbar-next .sliding .subnavbar {
- opacity: 1;
- transform: translate3d(100%, 0, 0);
- }
- .ios .router-transition .navbar,
- .ios .router-transition .navbar-bg {
- transition-duration: var(--f7-page-transition-duration);
- }
- .ios .router-transition .navbar-bg {
- animation-duration: var(--f7-page-transition-duration);
- animation-fill-mode: forwards;
- }
- .ios .router-transition .title-large,
- .ios .router-transition .title-large-text {
- transition-duration: 0ms;
- }
- .ios .router-transition .navbar-current .left,
- .ios .router-transition .navbar-current .title,
- .ios .router-transition .navbar-current .right,
- .ios .router-transition .navbar-current .subnavbar {
- animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition .navbar-current .sliding.left,
- .ios .router-transition .navbar-current .sliding.left .icon + span,
- .ios .router-transition .navbar-current .sliding.title,
- .ios .router-transition .navbar-current .sliding.right,
- .ios .router-transition .navbar-current .sliding .left,
- .ios .router-transition .navbar-current .sliding .left .icon + span,
- .ios .router-transition .navbar-current .sliding .title,
- .ios .router-transition .navbar-current .sliding .right {
- transition-duration: var(--f7-page-transition-duration);
- opacity: 0 !important;
- animation: none;
- }
- .ios .router-transition .navbar-current .sliding .subnavbar,
- .ios .router-transition .navbar-current .sliding.subnavbar {
- transition-duration: var(--f7-page-transition-duration);
- animation: none;
- opacity: 1;
- }
- .ios .router-transition-forward .navbar-next .left,
- .ios .router-transition-backward .navbar-previous .left,
- .ios .router-transition-forward .navbar-next .title,
- .ios .router-transition-backward .navbar-previous .title,
- .ios .router-transition-forward .navbar-next .right,
- .ios .router-transition-backward .navbar-previous .right,
- .ios .router-transition-forward .navbar-next .subnavbar,
- .ios .router-transition-backward .navbar-previous .subnavbar {
- animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .navbar-next .sliding.left,
- .ios .router-transition-backward .navbar-previous .sliding.left,
- .ios .router-transition-forward .navbar-next .sliding.left .icon + span,
- .ios .router-transition-backward .navbar-previous .sliding.left .icon + span,
- .ios .router-transition-forward .navbar-next .sliding.title,
- .ios .router-transition-backward .navbar-previous .sliding.title,
- .ios .router-transition-forward .navbar-next .sliding.right,
- .ios .router-transition-backward .navbar-previous .sliding.right,
- .ios .router-transition-forward .navbar-next .sliding .left,
- .ios .router-transition-backward .navbar-previous .sliding .left,
- .ios .router-transition-forward .navbar-next .sliding .left .icon + span,
- .ios .router-transition-backward .navbar-previous .sliding .left .icon + span,
- .ios .router-transition-forward .navbar-next .sliding .title,
- .ios .router-transition-backward .navbar-previous .sliding .title,
- .ios .router-transition-forward .navbar-next .sliding .right,
- .ios .router-transition-backward .navbar-previous .sliding .right,
- .ios .router-transition-forward .navbar-next .sliding .subnavbar,
- .ios .router-transition-backward .navbar-previous .sliding .subnavbar {
- transition-duration: var(--f7-page-transition-duration);
- animation: none;
- transform: translate3d(0, 0, 0) !important;
- opacity: 1 !important;
- }
- .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title,
- .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
- animation: none;
- }
- .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
- .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
- .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title,
- .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title {
- opacity: 0 !important;
- }
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .left,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .left,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .title,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .title,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .right,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .right,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .subnavbar,
- .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .subnavbar {
- animation: none;
- }
- .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
- .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
- overflow: visible;
- }
- .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
- .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
- animation: ios-navbar-large-title-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-out var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large .left .back span {
- animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
- transition: none;
- transform-origin: left center;
- }
- .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
- overflow: visible;
- }
- .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
- animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
- animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-forward .navbar-next.navbar-large:not(.navbar-large-collapsed) .title,
- .ios .router-transition-forward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title {
- animation: none;
- opacity: 0 !important;
- transition-duration: 0;
- }
- .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large .left .back span {
- animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
- transition: none;
- transform-origin: left center;
- }
- .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
- overflow: visible;
- }
- .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
- animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
- animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
- opacity: 0;
- }
- .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
- .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
- overflow: visible;
- opacity: 1;
- }
- .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
- .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
- animation: ios-navbar-large-title-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-in var(--f7-page-transition-duration) forwards;
- }
- .ios .router-transition-backward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title,
- .ios .router-transition-backward .navbar-previous.navbar-large:not(.navbar-large-collapsed) .title {
- animation: none;
- opacity: 0 !important;
- transition-duration: 0;
- }
- .ios .router-transition-forward .navbar-current .navbar-bg {
- animation-name: ios-navbar-bg-from-cb-to-lb;
- }
- .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-cb-to-lb;
- }
- .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
- animation-name: ios-navbar-bg-from-cb-to-lt;
- }
- .ios .router-transition-forward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-ct-to-lb;
- }
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
- animation-name: ios-navbar-bg-from-ct-to-lt;
- }
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
- animation-name: ios-navbar-transparent-bg-from-c-to-l;
- }
- .ios .router-transition-forward .navbar-next .navbar-bg {
- animation-name: ios-navbar-bg-from-rb-to-cb;
- }
- .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-rb-to-cb;
- }
- .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
- animation-name: ios-navbar-bg-from-rb-to-ct;
- }
- .ios .router-transition-forward .navbar-next:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-rt-to-cb;
- }
- .ios .router-transition-backward .navbar-current .navbar-bg {
- animation-name: ios-navbar-bg-from-cb-to-rb;
- }
- .ios .router-transition-backward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-ct-to-rb;
- }
- .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
- animation-name: ios-navbar-bg-from-cb-to-rt;
- }
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
- animation-name: ios-navbar-bg-from-ct-to-rt;
- }
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
- animation-name: ios-navbar-bg-from-cb-to-rb;
- }
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-ct-to-rb;
- }
- .ios .router-transition-backward .navbar-previous .navbar-bg {
- animation-name: ios-navbar-bg-from-lb-to-cb;
- }
- .ios .router-transition-backward .navbar-previous:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
- animation-name: ios-navbar-bg-from-lt-to-cb;
- }
- .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
- animation-name: ios-navbar-bg-from-lb-to-ct;
- }
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
- animation-name: ios-navbar-bg-from-lt-to-ct;
- }
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
- animation-name: ios-navbar-transparent-bg-from-l-to-c;
- }
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
- animation-name: ios-navbar-bg-from-lb-to-ct;
- }
- .view-master-detail .navbars {
- z-index: auto;
- }
- .view-master-detail .page-master {
- z-index: 525;
- }
- .view-master-detail .navbar-master .navbar-inner,
- .view-master-detail .navbar-master .navbar-bg {
- z-index: 550;
- }
- .view-master-detail .navbar-master-detail .navbar-inner,
- .view-master-detail .navbar-master-detail .navbar-bg {
- z-index: 500;
- }
- .view-master-detail .navbar-master.navbar-previous {
- pointer-events: auto;
- }
- .view-master-detail .navbar-master.navbar-previous .left,
- .view-master-detail .navbar-master.navbar-previous:not(.navbar-large) .title,
- .view-master-detail .navbar-master.navbar-previous .right,
- .view-master-detail .navbar-master.navbar-previous .subnavbar {
- opacity: 1;
- }
- .view-master-detail.router-transition .navbar-master .left,
- .view-master-detail.router-transition .navbar-master .left .icon + span,
- .view-master-detail.router-transition .navbar-master:not(.navbar-large) .title,
- .view-master-detail.router-transition .navbar-master .right,
- .view-master-detail.router-transition .navbar-master .subnavbar,
- .view-master-detail.router-transition .navbar-master .fading {
- opacity: 1 !important;
- transition-duration: 0ms;
- transform: none !important;
- animation: none !important;
- }
- .view-master-detail.router-transition .navbar-master .navbar-bg {
- transition-duration: 0ms;
- animation: none !important;
- }
- .view-master-detail.router-transition .navbar-master.navbar-large .title {
- opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
- transition-duration: 0ms;
- transform: none !important;
- animation: none !important;
- }
- .view-master-detail.router-transition .navbar-master.navbar-large .title-large,
- .view-master-detail.router-transition .navbar-master.navbar-large .title-large-text {
- transition-duration: 0ms;
- animation: none !important;
- }
- .view-master-detail.router-transition .navbar-master.navbar-large-transparent .navbar-bg,
- .view-master-detail.router-transition .navbar-master.navbar-large.navbar-transparent .navbar-bg {
- height: 100% !important;
- opacity: var(--f7-navbar-large-collapse-progress) !important;
- }
- @keyframes ios-navbar-element-fade-in {
- 0% {
- opacity: 0;
- }
- 25% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes ios-navbar-element-fade-out {
- from {
- opacity: 1;
- }
- 75% {
- opacity: 0;
- }
- to {
- opacity: 0;
- }
- }
- @keyframes ios-navbar-large-title-text-slide-up {
- 0% {
- transform: translateX(0px) translateY(0%) scale(1);
- }
- 100% {
- transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
- }
- }
- @keyframes ios-navbar-large-title-text-slide-down {
- 0% {
- transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
- }
- 100% {
- transform: translateX(0px) translateY(0%) scale(1);
- }
- }
- @keyframes ios-navbar-large-title-text-slide-left {
- 0% {
- transform: translateX(100%);
- }
- 100% {
- transform: translateX(0%);
- }
- }
- @keyframes ios-navbar-large-title-text-slide-right {
- 0% {
- transform: translateX(0%);
- }
- 100% {
- transform: translateX(100%);
- }
- }
- @keyframes ios-navbar-large-title-text-fade-out {
- 0% {
- opacity: 1;
- }
- 80% {
- opacity: 0;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes ios-navbar-large-title-text-fade-in {
- 0% {
- opacity: 0;
- }
- 20% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes ios-navbar-back-text-current-to-previous {
- 0% {
- opacity: 1;
- transform: translateY(0px) translateX(0px) scale(1);
- }
- 80% {
- opacity: 0;
- }
- 100% {
- opacity: 0;
- transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
- }
- }
- @keyframes ios-navbar-back-text-next-to-current {
- 0% {
- opacity: 0;
- transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
- }
- 20% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- transform: translateX(0px) translateY(0px) scale(1);
- }
- }
- @keyframes ios-navbar-bg-from-cb-to-lb {
- from {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-left-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-cb-to-lt {
- from {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-left-top);
- }
- }
- @keyframes ios-navbar-bg-from-ct-to-lb {
- from {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-left-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-ct-to-lt {
- from {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-left-top);
- }
- }
- @keyframes ios-navbar-bg-from-rb-to-cb {
- from {
- transform: var(--f7-navbar-large-bg-right-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-rb-to-ct {
- from {
- transform: var(--f7-navbar-large-bg-right-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- }
- @keyframes ios-navbar-bg-from-rt-to-cb {
- from {
- transform: var(--f7-navbar-large-bg-right-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-cb-to-rb {
- from {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-right-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-ct-to-rb {
- from {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-right-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-cb-to-rt {
- from {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-right-top);
- }
- }
- @keyframes ios-navbar-bg-from-ct-to-rt {
- from {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-right-top);
- }
- }
- @keyframes ios-navbar-bg-from-lb-to-cb {
- from {
- transform: var(--f7-navbar-large-bg-left-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-lt-to-cb {
- from {
- transform: var(--f7-navbar-large-bg-left-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-bottom);
- }
- }
- @keyframes ios-navbar-bg-from-lb-to-ct {
- from {
- transform: var(--f7-navbar-large-bg-left-bottom);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- }
- @keyframes ios-navbar-bg-from-lt-to-ct {
- from {
- transform: var(--f7-navbar-large-bg-left-top);
- }
- to {
- transform: var(--f7-navbar-large-bg-center-top);
- }
- }
- @keyframes ios-navbar-transparent-bg-from-l-to-c {
- from {
- transform: var(--f7-navbar-large-transparent-bg-left);
- }
- to {
- transform: var(--f7-navbar-large-transparent-bg-center);
- }
- }
- @keyframes ios-navbar-transparent-bg-from-c-to-l {
- from {
- transform: var(--f7-navbar-large-transparent-bg-center);
- }
- to {
- transform: var(--f7-navbar-large-transparent-bg-left);
- }
- }
- .md .navbar a.link {
- padding: 0 16px;
- min-width: 48px;
- }
- .md .navbar a.link:before {
- content: '';
- width: 152%;
- height: 152%;
- position: absolute;
- left: -26%;
- top: -26%;
- background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% 100%;
- opacity: 0;
- pointer-events: none;
- transition-duration: 600ms;
- }
- .md .navbar a.link.active-state:before {
- opacity: 1;
- transition-duration: 150ms;
- }
- .md .navbar a.icon-only {
- min-width: 0;
- flex-shrink: 0;
- width: 56px;
- }
- .md .navbar .right {
- margin-left: auto;
- }
- .md .navbar .right:first-child {
- right: var(--f7-safe-area-right);
- }
- .md .navbar-inner {
- justify-content: flex-start;
- overflow: hidden;
- }
- .md .navbar-large:not(.navbar-large-collapsed) .navbar-inner {
- overflow: visible;
- }
- .md .page.page-with-subnavbar .navbar-inner {
- overflow: visible;
- }
- .md .navbar-inner-centered-title {
- justify-content: space-between;
- }
- .md .navbar-inner-centered-title .right {
- margin-left: 0;
- }
- .md .navbar-inner-centered-title .title {
- text-align: center;
- }
- .aurora .navbar a.icon-only {
- margin: 0;
- justify-content: center;
- }
- .aurora .navbar .left a + a,
- .aurora .navbar .right a + a {
- margin-left: 10px;
- }
- .aurora .navbar b {
- font-weight: bold;
- }
- .aurora .navbar .left {
- margin-right: 10px;
- }
- .aurora .navbar .right {
- margin-left: 10px;
- }
- .aurora .navbar .right:first-child {
- right: calc(16px + var(--f7-safe-area-right));
- }
- .aurora .navbar-inner {
- justify-content: space-between;
- }
- .aurora .navbar-inner-left-title {
- justify-content: flex-start;
- }
- .aurora .navbar-inner-left-title .right {
- margin-left: auto;
- }
- .aurora .navbar-inner-left-title .title {
- text-align: left;
- margin-right: 10px;
- }
- /* === Toolbar === */
- :root {
- /*
- --f7-toolbar-bg-color: var(--f7-bars-bg-color);
- --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
- --f7-toolbar-bg-image: var(--f7-bars-bg-image);
- --f7-toolbar-border-color: var(--f7-bars-border-color);
- --f7-toolbar-link-color: var(--f7-bars-link-color);
- --f7-toolbar-text-color: var(--f7-bars-text-color);
- --f7-tabbar-link-active-color: var(--f7-theme-color);
- */
- --f7-tabbar-link-active-bg-color: transparent;
- --f7-tabbar-label-text-transform: none;
- --f7-toolbar-hide-show-transition-duration: 400ms;
- }
- .ios {
- --f7-toolbar-height: 44px;
- --f7-toolbar-font-size: 17px;
- --f7-toolbar-inner-padding-left: 8px;
- --f7-toolbar-inner-padding-right: 8px;
- /*
- --f7-toolbar-link-height: var(--f7-toolbar-height);
- --f7-toolbar-link-line-height: var(--f7-toolbar-height);
- */
- --f7-tabbar-labels-height: 50px;
- --f7-tabbar-labels-tablet-height: 50px;
- --f7-toolbar-top-shadow-image: none;
- --f7-toolbar-bottom-shadow-image: none;
- --f7-tabbar-icon-size: 28px;
- --f7-tabbar-link-text-transform: none;
- --f7-tabbar-link-font-weight: 400;
- --f7-tabbar-link-letter-spacing: 0;
- --f7-tabbar-label-font-size: 12px;
- --f7-tabbar-label-tablet-font-size: 14px;
- --f7-tabbar-label-font-weight: 500;
- --f7-tabbar-label-letter-spacing: 0.01;
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
- }
- .ios .theme-dark,
- .ios.theme-dark {
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
- }
- .md {
- --f7-toolbar-height: 48px;
- --f7-toolbar-font-size: 14px;
- --f7-toolbar-inner-padding-left: 0px;
- --f7-toolbar-inner-padding-right: 0px;
- /*
- --f7-toolbar-link-height: var(--f7-toolbar-height);
- --f7-toolbar-link-line-height: var(--f7-toolbar-height);
- */
- --f7-tabbar-labels-height: 56px;
- --f7-tabbar-labels-tablet-height: 56px;
- /*
- --f7-tabbar-link-active-border-color: var(--f7-theme-color);
- */
- --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
- --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
- --f7-tabbar-icon-size: 24px;
- --f7-tabbar-link-text-transform: uppercase;
- --f7-tabbar-link-font-weight: 500;
- --f7-tabbar-link-letter-spacing: 0.03em;
- --f7-tabbar-label-font-size: 14px;
- --f7-tabbar-label-tablet-font-size: 14px;
- --f7-tabbar-label-font-weight: 400;
- --f7-tabbar-label-letter-spacing: 0;
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
- }
- .aurora {
- --f7-toolbar-height: 38px;
- --f7-toolbar-font-size: 14px;
- --f7-toolbar-inner-padding-left: 16px;
- --f7-toolbar-inner-padding-right: 16px;
- --f7-toolbar-link-height: auto;
- --f7-toolbar-link-line-height: inherit;
- --f7-tabbar-labels-height: 44px;
- --f7-tabbar-labels-tablet-height: 44px;
- --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
- --f7-toolbar-top-shadow-image: none;
- --f7-toolbar-bottom-shadow-image: none;
- --f7-tabbar-icon-size: 18px;
- --f7-tabbar-link-text-transform: none;
- --f7-tabbar-link-font-weight: 400;
- --f7-tabbar-link-letter-spacing: 0;
- --f7-tabbar-label-font-size: 12px;
- --f7-tabbar-label-tablet-font-size: 12px;
- --f7-tabbar-label-font-weight: 500;
- --f7-tabbar-label-letter-spacing: 0.01;
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
- }
- .aurora .theme-dark,
- .aurora.theme-dark {
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
- }
- .toolbar {
- width: 100%;
- position: relative;
- margin: 0;
- transform: translate3d(0, 0, 0);
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- z-index: 600;
- box-sizing: border-box;
- left: 0;
- height: var(--f7-toolbar-height);
- background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
- background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
- color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
- font-size: var(--f7-toolbar-font-size);
- }
- @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
- .ios-translucent-bars .toolbar {
- background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
- -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
- backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
- }
- }
- .toolbar b {
- font-weight: 600;
- }
- .toolbar a {
- color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
- box-sizing: border-box;
- flex-shrink: 1;
- position: relative;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .toolbar .link {
- display: flex;
- line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
- height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
- }
- .toolbar i.icon {
- display: block;
- }
- .toolbar:after,
- .toolbar:before {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .views > .toolbar,
- .view > .toolbar,
- .page > .toolbar {
- position: absolute;
- }
- .toolbar-top,
- .ios .toolbar-top-ios,
- .md .toolbar-top-md,
- .aurora .toolbar-top-aurora {
- top: 0;
- }
- .toolbar-top .tab-link-highlight,
- .ios .toolbar-top-ios .tab-link-highlight,
- .md .toolbar-top-md .tab-link-highlight,
- .aurora .toolbar-top-aurora .tab-link-highlight {
- bottom: 0;
- }
- .toolbar-top.no-hairline:after,
- .ios .toolbar-top-ios.no-hairline:after,
- .md .toolbar-top-md.no-hairline:after,
- .aurora .toolbar-top-aurora.no-hairline:after,
- .toolbar-top.no-border:after,
- .ios .toolbar-top-ios.no-border:after,
- .md .toolbar-top-md.no-border:after,
- .aurora .toolbar-top-aurora.no-border:after {
- display: none !important;
- }
- .toolbar-top.no-shadow:before,
- .ios .toolbar-top-ios.no-shadow:before,
- .md .toolbar-top-md.no-shadow:before,
- .aurora .toolbar-top-aurora.no-shadow:before,
- .toolbar-top.toolbar-hidden:before,
- .ios .toolbar-top-ios.toolbar-hidden:before,
- .md .toolbar-top-md.toolbar-hidden:before,
- .aurora .toolbar-top-aurora.toolbar-hidden:before {
- display: none !important;
- }
- .toolbar-top:after,
- .ios .toolbar-top-ios:after,
- .md .toolbar-top-md:after,
- .aurora .toolbar-top-aurora:after,
- .toolbar-top:before,
- .ios .toolbar-top-ios:before,
- .md .toolbar-top-md:before,
- .aurora .toolbar-top-aurora:before {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .toolbar-top:after,
- .ios .toolbar-top-ios:after,
- .md .toolbar-top-md:after,
- .aurora .toolbar-top-aurora:after {
- content: '';
- position: absolute;
- background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .toolbar-top:before,
- .ios .toolbar-top-ios:before,
- .md .toolbar-top-md:before,
- .aurora .toolbar-top-aurora:before {
- content: '';
- position: absolute;
- right: 0;
- width: 100%;
- top: 100%;
- bottom: auto;
- height: 8px;
- pointer-events: none;
- background: var(--f7-toolbar-top-shadow-image);
- }
- .toolbar-bottom,
- .ios .toolbar-bottom-ios,
- .md .toolbar-bottom-md,
- .aurora .toolbar-bottom-aurora {
- bottom: 0;
- height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
- }
- .toolbar-bottom .tab-link-highlight,
- .ios .toolbar-bottom-ios .tab-link-highlight,
- .md .toolbar-bottom-md .tab-link-highlight,
- .aurora .toolbar-bottom-aurora .tab-link-highlight {
- top: 0;
- }
- .toolbar-bottom .toolbar-inner,
- .ios .toolbar-bottom-ios .toolbar-inner,
- .md .toolbar-bottom-md .toolbar-inner,
- .aurora .toolbar-bottom-aurora .toolbar-inner {
- height: auto;
- top: 0;
- bottom: var(--f7-safe-area-bottom);
- }
- .toolbar-bottom.no-hairline:before,
- .ios .toolbar-bottom-ios.no-hairline:before,
- .md .toolbar-bottom-md.no-hairline:before,
- .aurora .toolbar-bottom-aurora.no-hairline:before,
- .toolbar-bottom.no-border:before,
- .ios .toolbar-bottom-ios.no-border:before,
- .md .toolbar-bottom-md.no-border:before,
- .aurora .toolbar-bottom-aurora.no-border:before {
- display: none !important;
- }
- .toolbar-bottom.no-shadow:after,
- .ios .toolbar-bottom-ios.no-shadow:after,
- .md .toolbar-bottom-md.no-shadow:after,
- .aurora .toolbar-bottom-aurora.no-shadow:after,
- .toolbar-bottom.toolbar-hidden:after,
- .ios .toolbar-bottom-ios.toolbar-hidden:after,
- .md .toolbar-bottom-md.toolbar-hidden:after,
- .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
- display: none !important;
- }
- .toolbar-bottom:before,
- .ios .toolbar-bottom-ios:before,
- .md .toolbar-bottom-md:before,
- .aurora .toolbar-bottom-aurora:before {
- content: '';
- position: absolute;
- background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
- display: block;
- z-index: 15;
- top: 0;
- right: auto;
- bottom: auto;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 0%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .toolbar-bottom:after,
- .ios .toolbar-bottom-ios:after,
- .md .toolbar-bottom-md:after,
- .aurora .toolbar-bottom-aurora:after {
- content: '';
- position: absolute;
- right: 0;
- width: 100%;
- bottom: 100%;
- height: 8px;
- top: auto;
- pointer-events: none;
- background: var(--f7-toolbar-bottom-shadow-image);
- transform: translate3d(0, 0, 0);
- }
- .toolbar-inner {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-between;
- box-sizing: border-box;
- align-items: center;
- align-content: center;
- overflow: hidden;
- padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
- }
- .views > .tabbar,
- .views > .tabbar-labels {
- z-index: 5001;
- }
- .tabbar a,
- .tabbar-labels a {
- color: var(--f7-tabbar-link-inactive-color);
- }
- .tabbar .tab-link:not(.tab-link-active),
- .tabbar-labels .tab-link:not(.tab-link-active) {
- background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
- }
- .tabbar .link,
- .tabbar-labels .link {
- line-height: 1.4;
- }
- .tabbar .tab-link,
- .tabbar-labels .tab-link,
- .tabbar .link,
- .tabbar-labels .link {
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- text-transform: var(--f7-tabbar-link-text-transform);
- font-weight: var(--f7-tabbar-link-font-weight);
- letter-spacing: var(--f7-tabbar-link-letter-spacing);
- overflow: hidden;
- }
- .tabbar .tab-link-active,
- .tabbar-labels .tab-link-active {
- color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
- background-color: var(--f7-tabbar-link-active-bg-color, transparent);
- }
- .tabbar i.icon,
- .tabbar-labels i.icon {
- font-size: var(--f7-tabbar-icon-size);
- height: var(--f7-tabbar-icon-size);
- line-height: var(--f7-tabbar-icon-size);
- }
- .tabbar-labels {
- --f7-toolbar-height: var(--f7-tabbar-labels-height);
- }
- .tabbar-labels .tab-link,
- .tabbar-labels .link {
- height: 100%;
- justify-content: space-between;
- align-items: center;
- }
- .tabbar-labels .tabbar-label {
- display: block;
- line-height: 1;
- margin: 0;
- position: relative;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: var(--f7-tabbar-label-font-size);
- text-transform: var(--f7-tabbar-label-text-transform);
- font-weight: var(--f7-tabbar-label-font-weight);
- letter-spacing: var(--f7-tabbar-label-letter-spacing);
- }
- @media (min-width: 768px) and (min-height: 600px) {
- :root {
- --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
- --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
- }
- }
- .tabbar-scrollable .toolbar-inner {
- justify-content: flex-start;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
- display: none !important;
- width: 0 !important;
- height: 0 !important;
- -webkit-appearance: none;
- opacity: 0 !important;
- }
- .tabbar-scrollable .tab-link,
- .tabbar-scrollable .link {
- width: auto;
- flex-shrink: 0;
- }
- .toolbar-transitioning,
- .navbar-transitioning + .toolbar,
- .navbar-transitioning ~ * .toolbar {
- transition-duration: var(--f7-toolbar-hide-show-transition-duration);
- }
- .toolbar-bottom ~ *,
- .ios .toolbar-bottom-ios ~ *,
- .md .toolbar-bottom-md ~ *,
- .aurora .toolbar-bottom-aurora ~ * {
- --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
- }
- .toolbar-bottom.tabbar-labels ~ *,
- .ios .toolbar-bottom-ios.tabbar-labels ~ *,
- .md .toolbar-bottom-md.tabbar-labels ~ *,
- .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
- --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
- }
- .toolbar-bottom.toolbar-hidden,
- .ios .toolbar-bottom-ios.toolbar-hidden,
- .md .toolbar-bottom-md.toolbar-hidden,
- .aurora .toolbar-bottom-aurora.toolbar-hidden {
- transform: translate3d(0, 100%, 0);
- }
- .toolbar-top ~ *,
- .ios .toolbar-top-ios ~ *,
- .md .toolbar-top-md ~ *,
- .aurora .toolbar-top-aurora ~ * {
- --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
- }
- .toolbar-top.tabbar-labels ~ *,
- .ios .toolbar-top-ios.tabbar-labels ~ *,
- .md .toolbar-top-md.tabbar-labels ~ *,
- .aurora .toolbar-top-aurora.tabbar-labels ~ * {
- --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
- }
- .toolbar-top.toolbar-hidden,
- .ios .toolbar-top-ios.toolbar-hidden,
- .md .toolbar-top-md.toolbar-hidden,
- .aurora .toolbar-top-aurora.toolbar-hidden {
- transform: translate3d(0, -100%, 0);
- }
- .navbar ~ .toolbar-top,
- .navbars ~ .toolbar-top,
- .ios .navbar ~ .toolbar-top-ios,
- .ios .navbars ~ .toolbar-top-ios,
- .md .navbar ~ .toolbar-top-md,
- .aurora .navbar ~ .toolbar-top-aurora,
- .navbar ~ * .toolbar-top,
- .navbars ~ * .toolbar-top,
- .ios .navbar ~ * .toolbar-top-ios,
- .ios .navbars ~ * .toolbar-top-ios,
- .md .navbar ~ * .toolbar-top-md,
- .aurora .navbar ~ * .toolbar-top-aurora,
- .navbar ~ .page:not(.no-navbar) .toolbar-top,
- .navbars ~ .page:not(.no-navbar) .toolbar-top,
- .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
- .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
- top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
- }
- .navbar ~ .toolbar-top.toolbar-hidden,
- .navbars ~ .toolbar-top.toolbar-hidden,
- .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
- .ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
- .md .navbar ~ .toolbar-top-md.toolbar-hidden,
- .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
- .navbar ~ * .toolbar-top.toolbar-hidden,
- .navbars ~ * .toolbar-top.toolbar-hidden,
- .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
- .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
- .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
- .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
- .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
- .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
- .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
- .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
- transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
- }
- .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
- .navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
- .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
- .ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
- .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
- .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
- .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
- .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
- .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
- .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
- .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
- .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
- .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
- .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
- .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
- .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
- transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
- }
- .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
- .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
- .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
- .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
- .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
- .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
- .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
- .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
- transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
- }
- .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
- .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
- .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
- .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
- .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
- .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
- .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
- transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
- }
- .ios .toolbar a.icon-only {
- min-height: var(--f7-toolbar-height);
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0;
- min-width: 44px;
- }
- .ios .tabbar-labels .tab-link,
- .ios .tabbar-labels .link {
- padding-top: 4px;
- padding-bottom: 4px;
- }
- .ios .tabbar-labels .tab-link i + span,
- .ios .tabbar-labels .link i + span {
- margin: 0;
- }
- @media (min-width: 768px) and (min-height: 600px) {
- .ios .tabbar .tab-link,
- .ios .tabbar-labels .tab-link,
- .ios .tabbar .link,
- .ios .tabbar-labels .link {
- justify-content: center;
- flex-direction: row;
- }
- .ios .tabbar .tab-link i + span,
- .ios .tabbar-labels .tab-link i + span,
- .ios .tabbar .link i + span,
- .ios .tabbar-labels .link i + span {
- margin-left: 5px;
- }
- }
- .ios .tabbar-scrollable .toolbar-inner {
- justify-content: flex-start;
- }
- .ios .tabbar-scrollable .tab-link,
- .ios .tabbar-scrollable .link {
- padding: 0 8px;
- }
- .md .toolbar .link {
- justify-content: center;
- padding: 0 16px;
- min-width: 48px;
- }
- .md .toolbar .link:before {
- content: '';
- width: 152%;
- height: 152%;
- position: absolute;
- left: -26%;
- top: -26%;
- background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% 100%;
- opacity: 0;
- pointer-events: none;
- transition-duration: 600ms;
- }
- .md .toolbar .link.active-state:before {
- opacity: 1;
- transition-duration: 150ms;
- }
- .md .toolbar a.icon-only {
- min-width: 0;
- flex-shrink: 0;
- }
- .md .tabbar .tab-link,
- .md .tabbar-labels .tab-link,
- .md .tabbar .link,
- .md .tabbar-labels .link {
- padding-left: 0;
- padding-right: 0;
- }
- .md .tabbar a.icon-only,
- .md .tabbar-labels a.icon-only {
- flex-shrink: initial;
- }
- .md .tabbar .tab-link,
- .md .tabbar-labels .tab-link {
- transition-duration: 300ms;
- overflow: hidden;
- position: relative;
- }
- .md .tabbar .tab-link-highlight,
- .md .tabbar-labels .tab-link-highlight {
- position: absolute;
- height: 2px;
- background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
- transition-duration: 300ms;
- left: 0;
- }
- .md .tabbar-labels .tab-link,
- .md .tabbar-labels .link {
- padding-top: 7px;
- padding-bottom: 7px;
- }
- .md .tabbar-label {
- max-width: 100%;
- overflow: hidden;
- line-height: 1.2;
- }
- .md .tabbar-scrollable .toolbar-inner {
- overflow: auto;
- }
- .md .tabbar-scrollable .tab-link,
- .md .tabbar-scrollable .link {
- padding: 0 16px;
- }
- .aurora .toolbar a.icon-only {
- min-height: var(--f7-toolbar-height);
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0;
- }
- .aurora .tabbar .toolbar-inner,
- .aurora .tabbar-labels .toolbar-inner {
- padding-left: 0;
- padding-right: 0;
- }
- .aurora .tabbar .tab-link,
- .aurora .tabbar-labels .tab-link,
- .aurora .tabbar .link,
- .aurora .tabbar-labels .link {
- transition-duration: 200ms;
- }
- .aurora .tabbar-labels .tab-link,
- .aurora .tabbar-labels .link {
- padding-top: 5px;
- padding-bottom: 5px;
- }
- .aurora .tabbar-labels .tab-link i + span,
- .aurora .tabbar-labels .link i + span {
- margin: 0;
- }
- .aurora .tabbar-scrollable .toolbar-inner {
- justify-content: flex-start;
- }
- .aurora .tabbar-scrollable .tab-link,
- .aurora .tabbar-scrollable .link {
- padding: 0 16px;
- }
- /* === Subnavbar === */
- :root {
- /*
- --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
- --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
- --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
- --f7-subnavbar-border-color: var(--f7-bars-border-color);
- --f7-subnavbar-link-color: var(--f7-bars-link-color);
- --f7-subnavbar-text-color: var(--f7-bars-text-color);
- */
- --f7-subnavbar-title-line-height: 1.2;
- }
- .ios {
- --f7-subnavbar-height: 44px;
- --f7-subnavbar-inner-padding-left: 8px;
- --f7-subnavbar-inner-padding-right: 8px;
- --f7-subnavbar-title-font-size: 34px;
- --f7-subnavbar-title-font-weight: 700;
- --f7-subnavbar-title-letter-spacing: -0.03em;
- --f7-subnavbar-title-margin-left: 8px;
- --f7-subnavbar-shadow-image: none;
- /*
- --f7-subnavbar-link-height: var(--f7-subnavbar-height);
- --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
- */
- }
- .md {
- --f7-subnavbar-height: 48px;
- --f7-subnavbar-inner-padding-left: 16px;
- --f7-subnavbar-inner-padding-right: 16px;
- --f7-subnavbar-title-font-size: 20px;
- --f7-subnavbar-title-font-weight: 500;
- --f7-subnavbar-title-letter-spacing: 0;
- --f7-subnavbar-title-margin-left: 0px;
- --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
- /*
- --f7-subnavbar-link-height: var(--f7-subnavbar-height);
- --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
- */
- }
- .aurora {
- --f7-subnavbar-height: 38px;
- --f7-subnavbar-inner-padding-left: 16px;
- --f7-subnavbar-inner-padding-right: 16px;
- --f7-subnavbar-title-font-size: 26px;
- --f7-subnavbar-title-font-weight: bold;
- --f7-subnavbar-title-letter-spacing: -0.03em;
- --f7-subnavbar-title-margin-left: 0px;
- --f7-subnavbar-shadow-image: none;
- --f7-subnavbar-link-height: auto;
- --f7-subnavbar-link-line-height: inherit;
- }
- .subnavbar {
- width: 100%;
- position: absolute;
- left: 0;
- top: 0;
- z-index: 600;
- box-sizing: border-box;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
- background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
- color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
- }
- @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
- .ios-translucent-bars .subnavbar {
- background-color: rgba(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
- -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
- backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
- }
- }
- .subnavbar .subnavbar-title {
- position: relative;
- overflow: hidden;
- text-overflow: ellpsis;
- white-space: nowrap;
- font-size: var(--f7-subnavbar-title-font-size);
- font-weight: var(--f7-subnavbar-title-font-weight);
- text-align: left;
- display: inline-block;
- line-height: var(--f7-subnavbar-title-line-height);
- letter-spacing: var(--f7-subnavbar-title-letter-spacing);
- margin-left: var(--f7-subnavbar-title-margin-left);
- }
- .subnavbar .left,
- .subnavbar .right {
- flex-shrink: 0;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .subnavbar .right:first-child {
- position: absolute;
- height: 100%;
- }
- .subnavbar a {
- color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
- }
- .subnavbar a.link {
- line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
- height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
- }
- .subnavbar a.icon-only {
- min-width: var(--f7-subnavbar-height);
- }
- .subnavbar.no-hairline:after,
- .subnavbar.no-border:after {
- display: none !important;
- }
- .subnavbar.no-shadow:before,
- .subnavbar.navbar-hidden:before {
- display: none !important;
- }
- .subnavbar:after,
- .subnavbar:before {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .subnavbar:after {
- content: '';
- position: absolute;
- background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .subnavbar:before {
- content: '';
- position: absolute;
- right: 0;
- width: 100%;
- top: 100%;
- bottom: auto;
- height: 8px;
- pointer-events: none;
- background: var(--f7-subnavbar-shadow-image);
- }
- .subnavbar-inner {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- box-sizing: border-box;
- justify-content: space-between;
- overflow: hidden;
- padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
- }
- .subnavbar-inner.stacked {
- display: none;
- }
- .navbar .subnavbar {
- top: 100%;
- }
- .views > .subnavbar,
- .view > .subnavbar,
- .page > .subnavbar {
- position: absolute;
- }
- .navbar ~ * .subnavbar,
- .navbars ~ * .subnavbar,
- .page-with-subnavbar .navbar ~ .subnavbar,
- .page-with-subnavbar .navbar ~ * .subnavbar,
- .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
- .navbar ~ .subnavbar,
- .navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
- .navbars ~ .subnavbar {
- top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
- }
- .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
- .navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
- .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
- .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
- .navbar .title-large ~ .subnavbar {
- top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
- transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
- }
- .page-with-subnavbar,
- .subnavbar ~ * {
- --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
- }
- .ios .subnavbar {
- height: calc(var(--f7-subnavbar-height) + 1px);
- margin-top: -1px;
- padding-top: 1px;
- }
- .ios .subnavbar .title {
- align-self: flex-start;
- flex-shrink: 10;
- }
- .ios .subnavbar .left a + a,
- .ios .subnavbar .right a + a {
- margin-left: 16px;
- }
- .ios .subnavbar .left {
- margin-right: 10px;
- }
- .ios .subnavbar .right {
- margin-left: 10px;
- }
- .ios .subnavbar .right:first-child {
- right: 8px;
- }
- .ios .subnavbar a.link {
- justify-content: flex-start;
- }
- .ios .subnavbar a.icon-only {
- justify-content: center;
- margin: 0;
- }
- .md .subnavbar {
- height: var(--f7-subnavbar-height);
- }
- .md .subnavbar .right {
- margin-left: auto;
- }
- .md .subnavbar .right:first-child {
- right: 16px;
- }
- .md .subnavbar a.link {
- justify-content: center;
- padding: 0 16px;
- }
- .md .subnavbar a.link:before {
- content: '';
- width: 152%;
- height: 152%;
- position: absolute;
- left: -26%;
- top: -26%;
- background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% 100%;
- opacity: 0;
- pointer-events: none;
- transition-duration: 600ms;
- }
- .md .subnavbar a.link.active-state:before {
- opacity: 1;
- transition-duration: 150ms;
- }
- .md .subnavbar a.icon-only {
- flex-shrink: 0;
- }
- .md .subnavbar-inner > a.link:first-child {
- margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
- }
- .md .subnavbar-inner > a.link:last-child {
- margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
- }
- .aurora .subnavbar {
- height: calc(var(--f7-subnavbar-height) + 1px);
- margin-top: -1px;
- padding-top: 1px;
- }
- .aurora .subnavbar .title {
- align-self: flex-start;
- flex-shrink: 10;
- }
- .aurora .subnavbar .left a + a,
- .aurora .subnavbar .right a + a {
- margin-left: 10px;
- }
- .aurora .subnavbar .left {
- margin-right: 10px;
- }
- .aurora .subnavbar .right {
- margin-left: 10px;
- }
- .aurora .subnavbar .right:first-child {
- right: 16px;
- }
- .aurora .subnavbar a.link {
- justify-content: flex-start;
- }
- .aurora .subnavbar a.icon-only {
- justify-content: center;
- margin: 0;
- }
- /* === Content Block === */
- :root {
- --f7-block-padding-horizontal: 16px;
- --f7-block-padding-vertical: 16px;
- --f7-block-font-size: inherit;
- --f7-block-text-color: inherit;
- --f7-block-header-margin: 10px;
- --f7-block-footer-margin: 10px;
- --f7-block-header-font-size: 14px;
- --f7-block-footer-font-size: 14px;
- --f7-block-title-text-transform: none;
- --f7-block-title-white-space: nowrap;
- --f7-block-title-medium-text-transform: none;
- --f7-block-title-large-text-transform: none;
- --f7-block-inset-side-margin: 16px;
- --f7-block-title-medium-text-color: #000;
- --f7-block-title-large-text-color: #000;
- --f7-block-strong-bg-color: #fff;
- }
- :root .theme-dark,
- :root.theme-dark {
- --f7-block-title-text-color: #fff;
- --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
- --f7-block-title-medium-text-color: #fff;
- --f7-block-title-large-text-color: #fff;
- --f7-block-strong-bg-color: #1c1c1d;
- }
- .ios {
- --f7-block-margin-vertical: 35px;
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
- --f7-block-title-text-color: #000;
- --f7-block-title-font-size: 16px;
- --f7-block-title-font-weight: 600;
- --f7-block-title-line-height: 20px;
- --f7-block-title-margin-bottom: 10px;
- --f7-block-title-medium-font-size: 22px;
- --f7-block-title-medium-font-weight: bold;
- --f7-block-title-medium-line-height: 1.4;
- --f7-block-title-large-font-size: 30px;
- --f7-block-title-large-font-weight: bold;
- --f7-block-title-large-line-height: 1.3;
- --f7-block-inset-border-radius: 8px;
- --f7-block-strong-text-color: #000;
- --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
- }
- .ios .theme-dark,
- .ios.theme-dark {
- --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
- --f7-block-strong-text-color: #fff;
- }
- .md {
- --f7-block-margin-vertical: 32px;
- --f7-block-strong-text-color: inherit;
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
- --f7-block-title-font-size: inherit;
- --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
- --f7-block-title-font-weight: 500;
- --f7-block-title-line-height: 16px;
- --f7-block-title-margin-bottom: 16px;
- --f7-block-title-medium-font-size: 24px;
- --f7-block-title-medium-font-weight: 500;
- --f7-block-title-medium-line-height: 1.3;
- --f7-block-title-large-font-size: 34px;
- --f7-block-title-large-font-weight: 500;
- --f7-block-title-large-line-height: 1.2;
- --f7-block-inset-border-radius: 4px;
- --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
- }
- .aurora {
- --f7-block-margin-vertical: 15px;
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
- --f7-block-title-font-size: inherit;
- --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
- --f7-block-title-font-weight: 600;
- --f7-block-title-line-height: 1.5;
- --f7-block-title-margin-bottom: 5px;
- --f7-block-title-medium-font-size: 20px;
- --f7-block-title-medium-font-weight: 600;
- --f7-block-title-medium-line-height: 1.4;
- --f7-block-title-large-font-size: 28px;
- --f7-block-title-large-font-weight: bold;
- --f7-block-title-large-line-height: 1.3;
- --f7-block-inset-border-radius: 4px;
- --f7-block-strong-text-color: inherit;
- --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
- }
- .aurora .theme-dark,
- .aurora.theme-dark {
- --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
- --f7-block-strong-text-color: #fff;
- }
- .block {
- box-sizing: border-box;
- position: relative;
- z-index: 1;
- color: var(--f7-block-text-color);
- margin: var(--f7-block-margin-vertical) 0;
- padding-top: 0;
- padding-bottom: 0;
- padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
- padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
- font-size: var(--f7-block-font-size);
- }
- .block.no-hairlines:before,
- .block.no-hairlines ul:before,
- .md .block.no-hairlines-md:before,
- .md .block.no-hairlines-md ul:before,
- .ios .block.no-hairlines-ios:before,
- .ios .block.no-hairlines-ios ul:before,
- .aurora .block.no-hairlines-aurora:before,
- .aurora .block.no-hairlines-aurora ul:before,
- .block.no-hairlines:after,
- .block.no-hairlines ul:after,
- .md .block.no-hairlines-md:after,
- .md .block.no-hairlines-md ul:after,
- .ios .block.no-hairlines-ios:after,
- .ios .block.no-hairlines-ios ul:after,
- .aurora .block.no-hairlines-aurora:after,
- .aurora .block.no-hairlines-aurora ul:after {
- display: none !important;
- }
- .block.no-hairline-top:before,
- .block.no-hairline-top ul:before,
- .md .block.no-hairline-top-md:before,
- .md .block.no-hairline-top-md ul:before,
- .ios .block.no-hairline-top-ios:before,
- .ios .block.no-hairline-top-ios ul:before,
- .aurora .block.no-hairline-top-aurora:before,
- .aurora .block.no-hairline-top-aurora ul:before {
- display: none !important;
- }
- .block.no-hairline-bottom:after,
- .block.no-hairline-bottom ul:after,
- .md .block.no-hairline-bottom-md:after,
- .md .block.no-hairline-bottom-md ul:after,
- .ios .block.no-hairline-bottom-ios:after,
- .ios .block.no-hairline-bottom-ios ul:after,
- .aurora .block.no-hairline-bottom-aurora:after,
- .aurora .block.no-hairline-bottom-aurora ul:after {
- display: none !important;
- }
- .block > h1:first-child,
- .block > h2:first-child,
- .block > h3:first-child,
- .block > h4:first-child,
- .block > p:first-child {
- margin-top: 0;
- }
- .block > h1:last-child,
- .block > h2:last-child,
- .block > h3:last-child,
- .block > h4:last-child,
- .block > p:last-child {
- margin-bottom: 0;
- }
- .block-strong {
- color: var(--f7-block-strong-text-color);
- padding-top: var(--f7-block-padding-vertical);
- padding-bottom: var(--f7-block-padding-vertical);
- background-color: var(--f7-block-strong-bg-color);
- }
- .block-strong:before {
- content: '';
- position: absolute;
- background-color: var(--f7-block-strong-border-color);
- display: block;
- z-index: 15;
- top: 0;
- right: auto;
- bottom: auto;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 0%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .block-strong:after {
- content: '';
- position: absolute;
- background-color: var(--f7-block-strong-border-color);
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .block-title {
- position: relative;
- overflow: hidden;
- margin: 0;
- white-space: var(--f7-block-title-white-space);
- text-overflow: ellipsis;
- text-transform: var(--f7-block-title-text-transform);
- color: var(--f7-block-title-text-color);
- font-size: var(--f7-block-title-font-size, inherit);
- font-weight: var(--f7-block-title-font-weight);
- line-height: var(--f7-block-title-line-height);
- margin-top: var(--f7-block-margin-vertical);
- margin-bottom: var(--f7-block-title-margin-bottom);
- margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
- margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
- }
- .block-title + .list,
- .block-title + .block,
- .block-title + .card,
- .block-title + .timeline,
- .block-title + .block-header {
- margin-top: 0px;
- }
- .block-title-medium {
- font-size: var(--f7-block-title-medium-font-size);
- text-transform: var(--f7-block-title-medium-text-transform);
- color: var(--f7-block-title-medium-text-color);
- font-weight: var(--f7-block-title-medium-font-weight);
- line-height: var(--f7-block-title-medium-line-height);
- }
- .block-title-large {
- font-size: var(--f7-block-title-large-font-size);
- text-transform: var(--f7-block-title-large-text-transform);
- color: var(--f7-block-title-large-text-color);
- font-weight: var(--f7-block-title-large-font-weight);
- line-height: var(--f7-block-title-large-line-height);
- }
- .block > .block-title:first-child,
- .list > .block-title:first-child {
- margin-top: 0;
- margin-left: 0;
- margin-right: 0;
- }
- .block-header {
- color: var(--f7-block-header-text-color);
- font-size: var(--f7-block-header-font-size);
- margin-bottom: var(--f7-block-header-margin);
- margin-top: var(--f7-block-margin-vertical);
- }
- .block-header + .list,
- .block-header + .block,
- .block-header + .card,
- .block-header + .timeline {
- margin-top: var(--f7-block-header-margin);
- }
- .block-footer {
- color: var(--f7-block-footer-text-color);
- font-size: var(--f7-block-footer-font-size);
- margin-top: var(--f7-block-footer-margin);
- margin-bottom: var(--f7-block-margin-vertical);
- }
- .block-footer,
- .block-header {
- padding-top: 0;
- padding-bottom: 0;
- padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
- padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
- }
- .block-footer ul:first-child,
- .block-header ul:first-child,
- .block-footer p:first-child,
- .block-header p:first-child,
- .block-footer h1:first-child,
- .block-header h1:first-child,
- .block-footer h2:first-child,
- .block-header h2:first-child,
- .block-footer h3:first-child,
- .block-header h3:first-child,
- .block-footer h4:first-child,
- .block-header h4:first-child {
- margin-top: 0;
- }
- .block-footer ul:last-child,
- .block-header ul:last-child,
- .block-footer p:last-child,
- .block-header p:last-child,
- .block-footer h1:last-child,
- .block-header h1:last-child,
- .block-footer h2:last-child,
- .block-header h2:last-child,
- .block-footer h3:last-child,
- .block-header h3:last-child,
- .block-footer h4:last-child,
- .block-header h4:last-child {
- margin-bottom: 0;
- }
- .block-footer ul:first-child:last-child,
- .block-header ul:first-child:last-child,
- .block-footer p:first-child:last-child,
- .block-header p:first-child:last-child,
- .block-footer h1:first-child:last-child,
- .block-header h1:first-child:last-child,
- .block-footer h2:first-child:last-child,
- .block-header h2:first-child:last-child,
- .block-footer h3:first-child:last-child,
- .block-header h3:first-child:last-child,
- .block-footer h4:first-child:last-child,
- .block-header h4:first-child:last-child {
- margin-top: 0;
- margin-bottom: 0;
- }
- .list .block-header,
- .block .block-header,
- .card .block-header,
- .timeline .block-header {
- margin-top: 0;
- }
- .list .block-footer,
- .block .block-footer,
- .card .block-footer,
- .timeline .block-footer {
- margin-bottom: 0;
- }
- .list + .block-footer,
- .block + .block-footer,
- .card + .block-footer,
- .timeline + .block-footer {
- margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
- }
- .block + .block-footer {
- margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
- margin-bottom: var(--f7-block-margin-vertical);
- }
- .block .block-header,
- .block .block-footer {
- padding: 0;
- }
- .block.inset {
- border-radius: var(--f7-block-inset-border-radius);
- margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .block-strong.inset:before,
- .block-strong.inset:after {
- display: none !important;
- }
- @media (min-width: 480px) {
- .block.xsmall-inset {
- border-radius: var(--f7-block-inset-border-radius);
- margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .block-strong.xsmall-inset:before,
- .block-strong.xsmall-inset:after {
- display: none !important;
- }
- }
- @media (min-width: 568px) {
- .block.small-inset {
- border-radius: var(--f7-block-inset-border-radius);
- margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .block-strong.small-inset:before,
- .block-strong.small-inset:after {
- display: none !important;
- }
- }
- @media (min-width: 768px) {
- .block.medium-inset {
- border-radius: var(--f7-block-inset-border-radius);
- margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .block-strong.medium-inset:before,
- .block-strong.medium-inset:after {
- display: none !important;
- }
- }
- @media (min-width: 1024px) {
- .block.large-inset {
- border-radius: var(--f7-block-inset-border-radius);
- margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .block-strong.large-inset:before,
- .block-strong.large-inset:after {
- display: none !important;
- }
- }
- @media (min-width: 1200px) {
- .block.xlarge-inset {
- border-radius: var(--f7-block-inset-border-radius);
- margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .block-strong.xlarge-inset:before,
- .block-strong.xlarge-inset:after {
- display: none !important;
- }
- }
- /* === List View === */
- :root {
- --f7-list-inset-side-margin: 16px;
- --f7-list-item-cell-margin: 16px;
- --f7-list-item-padding-horizontal: 16px;
- --f7-list-media-item-padding-horizontal: 16px;
- --f7-list-item-text-max-lines: 2;
- --f7-list-chevron-icon-font-size: 20px;
- --f7-list-item-title-font-size: inherit;
- --f7-list-item-title-font-weight: 400;
- --f7-list-item-title-text-color: inherit;
- --f7-list-item-title-line-height: inherit;
- --f7-list-item-title-white-space: nowrap;
- --f7-list-item-subtitle-font-weight: 400;
- --f7-list-item-subtitle-text-color: inherit;
- --f7-list-item-subtitle-line-height: inherit;
- --f7-list-item-text-font-weight: 400;
- --f7-list-item-after-font-weight: 400;
- --f7-list-item-header-text-color: inherit;
- --f7-list-item-header-font-size: 12px;
- --f7-list-item-header-font-weight: 400;
- --f7-list-item-header-line-height: 1.2;
- --f7-list-item-footer-font-size: 12px;
- --f7-list-item-footer-font-weight: 400;
- --f7-list-item-footer-line-height: 1.2;
- --f7-list-button-font-size: inherit;
- --f7-list-button-font-weight: 400;
- --f7-list-item-divider-line-height: inherit;
- --f7-list-group-title-line-height: inherit;
- --f7-list-bg-color: #fff;
- --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
- }
- :root .theme-dark,
- :root.theme-dark {
- --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
- --f7-list-bg-color: #1c1c1d;
- --f7-list-border-color: rgba(255, 255, 255, 0.15);
- --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
- --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
- --f7-list-item-divider-bg-color: #232323;
- --f7-list-group-title-bg-color: #232323;
- --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
- }
- .ios {
- --f7-list-in-list-padding-left: 30px;
- --f7-list-inset-border-radius: 8px;
- --f7-list-margin-vertical: 35px;
- --f7-list-font-size: 17px;
- --f7-list-chevron-icon-area: 20px;
- --f7-list-border-color: rgba(0, 0, 0, 0.22);
- --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
- --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
- --f7-list-item-subtitle-font-size: 15px;
- --f7-list-item-text-font-size: 15px;
- --f7-list-item-text-line-height: 21px;
- --f7-list-item-after-font-size: inherit;
- --f7-list-item-after-line-height: inherit;
- --f7-list-item-after-padding: 5px;
- --f7-list-item-min-height: 44px;
- --f7-list-item-media-margin: 16px;
- --f7-list-item-media-icons-margin: 5px;
- --f7-list-item-padding-vertical: 8px;
- --f7-list-media-item-padding-vertical: 10px;
- --f7-list-media-item-title-font-weight: 600;
- /*
- --f7-list-button-text-color: var(--f7-theme-color);
- */
- --f7-list-button-text-align: center;
- --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
- --f7-list-item-divider-height: 31px;
- --f7-list-item-divider-font-size: inherit;
- --f7-list-item-divider-font-weight: 400;
- --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
- --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
- --f7-list-group-title-height: 31px;
- --f7-list-group-title-font-size: inherit;
- --f7-list-group-title-font-weight: 400;
- --f7-list-group-title-bg-color: #f7f7f7;
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
- --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.15);
- }
- .ios .theme-dark,
- .ios.theme-dark {
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
- --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
- --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
- --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
- --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
- --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.08);
- }
- .md {
- --f7-list-in-list-padding-left: 40px;
- --f7-list-inset-border-radius: 4px;
- --f7-list-margin-vertical: 32px;
- --f7-list-font-size: 16px;
- --f7-list-chevron-icon-area: 26px;
- --f7-list-border-color: rgba(0, 0, 0, 0.12);
- --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
- --f7-list-item-subtitle-font-size: 14px;
- --f7-list-item-text-font-size: 14px;
- --f7-list-item-text-line-height: 20px;
- --f7-list-item-after-font-size: 14px;
- --f7-list-item-after-line-height: inherit;
- --f7-list-item-after-padding: 8px;
- --f7-list-item-min-height: 48px;
- --f7-list-item-media-margin: 16px;
- --f7-list-item-media-icons-margin: 8px;
- --f7-list-item-padding-vertical: 8px;
- --f7-list-media-item-padding-vertical: 14px;
- /*
- --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
- */
- --f7-list-button-text-align: left;
- --f7-list-button-border-color: transparent;
- --f7-list-item-divider-height: 48px;
- --f7-list-item-divider-font-size: 14px;
- --f7-list-item-divider-font-weight: 400;
- --f7-list-item-divider-bg-color: #f4f4f4;
- --f7-list-item-divider-border-color: transparent;
- --f7-list-group-title-height: 48px;
- --f7-list-group-title-font-size: 14px;
- --f7-list-group-title-font-weight: 400;
- --f7-list-group-title-bg-color: #f4f4f4;
- --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
- --f7-list-button-text-color: #212121;
- --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-list-button-text-color: #fff;
- --f7-list-item-divider-text-color: #fff;
- --f7-list-group-title-text-color: #fff;
- --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
- --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
- }
- .aurora {
- --f7-list-in-list-padding-left: 16px;
- --f7-list-inset-border-radius: 4px;
- --f7-list-margin-vertical: 15px;
- --f7-list-font-size: 14px;
- --f7-list-chevron-icon-area: 15px;
- --f7-list-chevron-icon-font-size: 16px;
- --f7-list-border-color: rgba(0, 0, 0, 0.12);
- --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
- --f7-list-item-title-line-height: 1.3;
- --f7-list-item-subtitle-font-size: 14px;
- --f7-list-item-subtitle-line-height: 1.3;
- --f7-list-item-text-font-size: 12px;
- --f7-list-item-text-line-height: 16px;
- --f7-list-item-after-font-size: 13px;
- --f7-list-item-after-line-height: 1.2;
- --f7-list-item-after-padding: 5px;
- --f7-list-item-min-height: 32px;
- --f7-list-item-media-margin: 10px;
- --f7-list-item-media-icons-margin: 5px;
- --f7-list-item-padding-vertical: 5px;
- --f7-list-media-item-padding-vertical: 5px;
- --f7-list-media-item-title-font-weight: 600;
- /*
- --f7-list-button-text-color: var(--f7-theme-color);
- */
- --f7-list-button-text-align: center;
- --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
- --f7-list-item-divider-height: 19px;
- --f7-list-item-divider-font-size: inherit;
- --f7-list-item-divider-font-weight: 500;
- --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
- --f7-list-item-divider-border-color: transparent;
- --f7-list-group-title-height: 19px;
- --f7-list-group-title-font-size: inherit;
- --f7-list-group-title-font-weight: 500;
- --f7-list-group-title-bg-color: #f7f7f7;
- --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
- --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
- --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
- --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
- }
- .aurora .theme-dark,
- .aurora.theme-dark {
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
- --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
- --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
- --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
- --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
- --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
- --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
- }
- :root {
- --f7-list-chevron-icon-left: 'chevron_left';
- --f7-list-chevron-icon-right: 'chevron_right';
- }
- .aurora {
- --f7-list-chevron-icon-left: 'chevron_left_aurora';
- --f7-list-chevron-icon-right: 'chevron_right_aurora';
- }
- .list {
- position: relative;
- z-index: 1;
- font-size: var(--f7-list-font-size);
- margin: var(--f7-list-margin-vertical) 0;
- }
- .list ul {
- list-style: none;
- margin: 0;
- padding: 0;
- position: relative;
- background: var(--f7-list-bg-color);
- }
- .list ul:before {
- content: '';
- position: absolute;
- background-color: var(--f7-list-border-color);
- display: block;
- z-index: 15;
- top: 0;
- right: auto;
- bottom: auto;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 0%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .list ul:after {
- content: '';
- position: absolute;
- background-color: var(--f7-list-border-color);
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .list ul ul {
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
- }
- .list ul ul:before,
- .list ul ul:after {
- display: none !important;
- }
- .list li {
- position: relative;
- box-sizing: border-box;
- }
- .list .item-media {
- display: flex;
- flex-shrink: 0;
- flex-wrap: nowrap;
- align-items: center;
- box-sizing: border-box;
- padding-bottom: var(--f7-list-item-padding-vertical);
- padding-top: var(--f7-list-item-padding-vertical);
- }
- .list .item-media + .item-inner {
- margin-left: var(--f7-list-item-media-margin);
- }
- .list .item-media i + i,
- .list .item-media i + img {
- margin-left: var(--f7-list-item-media-icons-margin);
- }
- .list .item-after {
- padding-left: var(--f7-list-item-after-padding);
- }
- .list .item-inner {
- position: relative;
- width: 100%;
- min-width: 0;
- display: flex;
- justify-content: space-between;
- box-sizing: border-box;
- align-items: center;
- align-self: stretch;
- padding-top: var(--f7-list-item-padding-vertical);
- padding-bottom: var(--f7-list-item-padding-vertical);
- min-height: var(--f7-list-item-min-height);
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- }
- .list .item-title {
- min-width: 0;
- flex-shrink: 1;
- white-space: var(--f7-list-item-title-white-space);
- position: relative;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
- font-size: var(--f7-list-item-title-font-size);
- font-weight: var(--f7-list-item-title-font-weight);
- color: var(--f7-list-item-title-text-color);
- line-height: var(--f7-list-item-title-line-height);
- }
- .list .item-after {
- white-space: nowrap;
- flex-shrink: 0;
- display: flex;
- font-size: var(--f7-list-item-after-font-size);
- font-weight: var(--f7-list-item-after-font-weight);
- color: var(--f7-list-item-after-text-color);
- line-height: var(--f7-list-item-after-line-height);
- margin-left: auto;
- }
- .list .item-header,
- .list .item-footer {
- white-space: normal;
- }
- .list .item-header {
- color: var(--f7-list-item-header-text-color);
- font-size: var(--f7-list-item-header-font-size);
- font-weight: var(--f7-list-item-header-font-weight);
- line-height: var(--f7-list-item-header-line-height);
- }
- .list .item-footer {
- color: var(--f7-list-item-footer-text-color);
- font-size: var(--f7-list-item-footer-font-size);
- font-weight: var(--f7-list-item-footer-font-weight);
- line-height: var(--f7-list-item-footer-line-height);
- }
- .list .item-link,
- .list .list-button {
- transition-duration: 300ms;
- transition-property: background-color;
- display: block;
- position: relative;
- overflow: hidden;
- z-index: 0;
- }
- .list .item-link {
- color: inherit;
- }
- .list .item-link.active-state {
- background-color: var(--f7-list-link-pressed-bg-color);
- }
- .list .item-link .item-inner {
- padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- }
- .list .item-content {
- display: flex;
- justify-content: space-between;
- box-sizing: border-box;
- align-items: center;
- min-height: var(--f7-list-item-min-height);
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
- }
- .list .item-subtitle {
- position: relative;
- overflow: hidden;
- white-space: nowrap;
- max-width: 100%;
- text-overflow: ellipsis;
- font-size: var(--f7-list-item-subtitle-font-size);
- font-weight: var(--f7-list-item-subtitle-font-weight);
- color: var(--f7-list-item-subtitle-text-color);
- line-height: var(--f7-list-item-subtitle-line-height);
- }
- .list .item-text {
- position: relative;
- overflow: hidden;
- text-overflow: ellipsis;
- /* autoprefixer: ignore next */
- -webkit-line-clamp: var(--f7-list-item-text-max-lines);
- /* autoprefixer: ignore next */
- -webkit-box-orient: vertical;
- display: -webkit-box;
- font-size: var(--f7-list-item-text-font-size);
- font-weight: var(--f7-list-item-text-font-weight);
- color: var(--f7-list-item-text-text-color);
- line-height: var(--f7-list-item-text-line-height);
- max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
- }
- .list .item-title-row {
- position: relative;
- display: flex;
- justify-content: space-between;
- box-sizing: border-box;
- }
- .list .item-title-row .item-after {
- align-self: center;
- }
- .list .item-row {
- display: flex;
- justify-content: space-between;
- box-sizing: border-box;
- }
- .list .item-cell {
- display: block;
- align-self: center;
- box-sizing: border-box;
- width: 100%;
- min-width: 0;
- margin-left: var(--f7-list-item-cell-margin);
- flex-shrink: 1;
- }
- .list .item-cell:first-child {
- margin-left: 0;
- }
- .list .ripple-wave + .item-cell {
- margin-left: 0;
- }
- .list li:last-child .list-button:after {
- display: none !important;
- }
- .list li:last-child > .item-inner:after,
- .list li:last-child li:last-child > .item-inner:after,
- .list li:last-child > .item-content > .item-inner:after,
- .list li:last-child li:last-child > .item-content > .item-inner:after,
- .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
- .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
- .list li:last-child > .item-link > .item-content > .item-inner:after,
- .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
- display: none !important;
- }
- .list li li:last-child .item-inner:after,
- .list li:last-child li .item-inner:after {
- content: '';
- position: absolute;
- background-color: var(--f7-list-item-border-color);
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .list.no-hairlines:before,
- .list.no-hairlines ul:before,
- .md .list.no-hairlines-md:before,
- .md .list.no-hairlines-md ul:before,
- .ios .list.no-hairlines-ios:before,
- .ios .list.no-hairlines-ios ul:before,
- .aurora .list.no-hairlines-aurora:before,
- .aurora .list.no-hairlines-aurora ul:before,
- .list.no-hairlines:after,
- .list.no-hairlines ul:after,
- .md .list.no-hairlines-md:after,
- .md .list.no-hairlines-md ul:after,
- .ios .list.no-hairlines-ios:after,
- .ios .list.no-hairlines-ios ul:after,
- .aurora .list.no-hairlines-aurora:after,
- .aurora .list.no-hairlines-aurora ul:after {
- display: none !important;
- }
- .list.no-hairline-top:before,
- .list.no-hairline-top ul:before,
- .md .list.no-hairline-top-md:before,
- .md .list.no-hairline-top-md ul:before,
- .ios .list.no-hairline-top-ios:before,
- .ios .list.no-hairline-top-ios ul:before,
- .aurora .list.no-hairline-top-aurora:before,
- .aurora .list.no-hairline-top-aurora ul:before {
- display: none !important;
- }
- .list.no-hairline-bottom:after,
- .list.no-hairline-bottom ul:after,
- .md .list.no-hairline-bottom-md:after,
- .md .list.no-hairline-bottom-md ul:after,
- .ios .list.no-hairline-bottom-ios:after,
- .ios .list.no-hairline-bottom-ios ul:after,
- .aurora .list.no-hairline-bottom-aurora:after,
- .aurora .list.no-hairline-bottom-aurora ul:after {
- display: none !important;
- }
- .list.no-hairlines-between .item-inner:after,
- .md .list.no-hairlines-between-md .item-inner:after,
- .ios .list.no-hairlines-between-ios .item-inner:after,
- .aurora .list.no-hairlines-between-aurora .item-inner:after,
- .list.no-hairlines-between .list-button:after,
- .md .list.no-hairlines-between-md .list-button:after,
- .ios .list.no-hairlines-between-ios .list-button:after,
- .aurora .list.no-hairlines-between-aurora .list-button:after,
- .list.no-hairlines-between .item-divider:after,
- .md .list.no-hairlines-between-md .item-divider:after,
- .ios .list.no-hairlines-between-ios .item-divider:after,
- .aurora .list.no-hairlines-between-aurora .item-divider:after,
- .list.no-hairlines-between .list-group-title:after,
- .md .list.no-hairlines-between-md .list-group-title:after,
- .ios .list.no-hairlines-between-ios .list-group-title:after,
- .aurora .list.no-hairlines-between-aurora .list-group-title:after,
- .list.no-hairlines-between .list-group-title:after,
- .md .list.no-hairlines-between-md .list-group-title:after,
- .ios .list.no-hairlines-between-ios .list-group-title:after,
- .aurora .list.no-hairlines-between-aurora .list-group-title:after {
- display: none !important;
- }
- .list.no-hairlines-between.simple-list li:after,
- .md .list.no-hairlines-between-md.simple-list li:after,
- .ios .list.no-hairlines-between-ios.simple-list li:after,
- .aurora .list.no-hairlines-between-aurora.simple-list li:after {
- display: none !important;
- }
- .list.no-hairlines-between.links-list a:after,
- .md .list.no-hairlines-between-md.links-list a:after,
- .ios .list.no-hairlines-between-ios.links-list a:after,
- .aurora .list.no-hairlines-between-aurora.links-list a:after {
- display: none !important;
- }
- .list-button {
- padding: 0 var(--f7-list-item-padding-horizontal);
- line-height: var(--f7-list-item-min-height);
- color: var(--f7-list-button-text-color, var(--f7-theme-color));
- font-size: var(--f7-list-button-font-size);
- font-weight: var(--f7-list-button-font-weight);
- text-align: var(--f7-list-button-text-align);
- }
- .list-button:after {
- content: '';
- position: absolute;
- background-color: var(--f7-list-button-border-color);
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .list-button.active-state {
- background-color: var(--f7-list-button-pressed-bg-color);
- }
- .list-button[class*="color-"] {
- --f7-list-button-text-color: var(--f7-theme-color);
- }
- .simple-list li {
- position: relative;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: 100%;
- box-sizing: border-box;
- display: flex;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- line-height: var(--f7-list-item-min-height);
- height: var(--f7-list-item-min-height);
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- }
- .simple-list li:after {
- left: var(--f7-list-item-padding-horizontal);
- width: auto;
- left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
- right: 0;
- }
- .simple-list li:last-child:after {
- display: none !important;
- }
- .links-list li {
- z-index: 1;
- }
- .links-list a {
- transition-duration: 300ms;
- transition-property: background-color;
- display: block;
- position: relative;
- overflow: hidden;
- display: flex;
- align-items: center;
- align-content: center;
- justify-content: space-between;
- box-sizing: border-box;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: 100%;
- height: var(--f7-list-item-min-height);
- color: inherit;
- }
- .links-list a .ripple-wave {
- z-index: 0;
- }
- .links-list a:after {
- width: auto;
- }
- .links-list a.active-state {
- background-color: var(--f7-list-link-pressed-bg-color);
- }
- .links-list a {
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
- padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- }
- .links-list a:after {
- left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
- right: 0;
- }
- .links-list li:last-child a:after {
- display: none !important;
- }
- .simple-list li:after,
- .links-list a:after,
- .list .item-inner:after {
- content: '';
- position: absolute;
- background-color: var(--f7-list-item-border-color);
- display: block;
- z-index: 15;
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 100%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- .media-list,
- li.media-item {
- --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
- --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
- }
- .media-list .item-title,
- li.media-item .item-title {
- font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
- }
- .media-list .item-inner,
- li.media-item .item-inner {
- display: block;
- align-self: stretch;
- }
- .media-list .item-media,
- li.media-item .item-media {
- align-self: flex-start;
- }
- .media-list .item-media img,
- li.media-item .item-media img {
- display: block;
- }
- .media-list .item-link .item-inner,
- li.media-item .item-link .item-inner {
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- }
- .media-list .item-link .item-title-row,
- li.media-item .item-link .item-title-row {
- padding-right: calc(var(--f7-list-chevron-icon-area));
- }
- .media-list.chevron-center .item-link .item-inner,
- .media-list .chevron-center .item-link .item-inner,
- .media-list .item-link.chevron-center .item-inner,
- li.media-item.chevron-center .item-link .item-inner,
- li.media-item .item-link.chevron-center .item-inner,
- li.media-item .chevron-center .item-link .item-inner {
- padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- }
- .media-list.chevron-center .item-title-row,
- .media-list .chevron-center .item-title-row,
- li.media-item.chevron-center .item-title-row,
- li.media-item .chevron-center .item-title-row {
- padding-right: 0;
- }
- .list .item-link .item-inner:before,
- .links-list a:before,
- .media-list .item-link .item-title-row:before,
- li.media-item .item-link .item-title-row:before,
- .media-list.chevron-center .item-link .item-inner:before,
- .media-list .chevron-center .item-link .item-inner:before,
- .media-list .item-link.chevron-center .item-inner:before,
- li.media-item.chevron-center .item-link .item-inner:before,
- li.media-item .chevron-center .item-link .item-inner:before,
- li.media-item .item-link.chevron-center .item-inner:before {
- font-family: 'framework7-core-icons';
- font-weight: normal;
- font-style: normal;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- -moz-osx-font-smoothing: grayscale;
- font-feature-settings: "liga";
- text-align: center;
- display: block;
- width: 100%;
- height: 100%;
- font-size: 20px;
- position: absolute;
- top: 50%;
- width: 8px;
- height: 14px;
- margin-top: -7px;
- font-size: var(--f7-list-chevron-icon-font-size);
- line-height: 14px;
- color: var(--f7-list-chevron-icon-color);
- pointer-events: none;
- right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- content: var(--f7-list-chevron-icon-right);
- }
- .media-list.chevron-center .item-title-row:before,
- .media-list .chevron-center .item-title-row:before,
- li.media-item.chevron-center .item-title-row:before,
- li.media-item .chevron-center .item-title-row:before {
- display: none;
- }
- .media-list .item-link .item-inner:before,
- li.media-item .item-link .item-inner:before {
- display: none;
- }
- .media-list .item-link .item-title-row:before,
- li.media-item .item-link .item-title-row:before {
- right: 0;
- }
- .list-group ul:after,
- .list-group ul:before {
- z-index: 25 !important;
- }
- .list-group + .list-group ul:before {
- display: none !important;
- }
- li.item-divider,
- .item-divider,
- li.list-group-title {
- white-space: nowrap;
- position: relative;
- max-width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- z-index: 15;
- padding-top: 0;
- padding-bottom: 0;
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
- box-sizing: border-box;
- display: flex;
- align-items: center;
- align-content: center;
- }
- li.item-divider:after,
- .item-divider:after,
- li.list-group-title:after {
- display: none !important;
- }
- li.item-divider,
- .item-divider {
- margin-top: -1px;
- height: var(--f7-list-item-divider-height);
- color: var(--f7-list-item-divider-text-color);
- font-size: var(--f7-list-item-divider-font-size);
- font-weight: var(--f7-list-item-divider-font-weight);
- background-color: var(--f7-list-item-divider-bg-color);
- line-height: var(--f7-list-item-divider-line-height);
- }
- li.item-divider:before,
- .item-divider:before {
- content: '';
- position: absolute;
- background-color: var(--f7-list-item-divider-border-color);
- display: block;
- z-index: 15;
- top: 0;
- right: auto;
- bottom: auto;
- left: 0;
- height: 1px;
- width: 100%;
- transform-origin: 50% 0%;
- transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
- }
- li.list-group-title,
- .list li.list-group-title {
- position: relative;
- position: -webkit-sticky;
- position: sticky;
- top: 0;
- margin-top: 0;
- z-index: 20;
- height: var(--f7-list-group-title-height);
- color: var(--f7-list-group-title-text-color);
- font-size: var(--f7-list-group-title-font-size);
- font-weight: var(--f7-list-group-title-font-weight);
- background-color: var(--f7-list-group-title-bg-color);
- line-height: var(--f7-list-group-title-line-height);
- }
- .page-with-navbar-large li.list-group-title,
- .page-with-navbar-large .list li.list-group-title {
- top: calc(-1 * var(--f7-navbar-large-title-height));
- }
- .list.inset {
- margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
- border-radius: var(--f7-list-inset-border-radius);
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .list.inset .block-title {
- margin-left: 0;
- margin-right: 0;
- }
- .list.inset ul {
- border-radius: var(--f7-list-inset-border-radius);
- }
- .list.inset ul:before,
- .list.inset ul:after {
- display: none !important;
- }
- .list.inset li.swipeout:first-child,
- .list.inset li:first-child > a {
- border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
- }
- .list.inset li.swipeout:last-child,
- .list.inset li:last-child > a {
- border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
- }
- .list.inset li.swipeout:first-child:last-child,
- .list.inset li:first-child:last-child > a {
- border-radius: var(--f7-list-inset-border-radius);
- }
- @media (min-width: 480px) {
- .list.xsmall-inset {
- margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
- border-radius: var(--f7-list-inset-border-radius);
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .list.xsmall-inset .block-title {
- margin-left: 0;
- margin-right: 0;
- }
- .list.xsmall-inset ul {
- border-radius: var(--f7-list-inset-border-radius);
- }
- .list.xsmall-inset ul:before,
- .list.xsmall-inset ul:after {
- display: none !important;
- }
- .list.xsmall-inset li:first-child > a {
- border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
- }
- .list.xsmall-inset li:last-child > a {
- border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
- }
- .list.xsmall-inset li:first-child:last-child > a {
- border-radius: var(--f7-list-inset-border-radius);
- }
- }
- @media (min-width: 568px) {
- .list.small-inset {
- margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
- border-radius: var(--f7-list-inset-border-radius);
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .list.small-inset .block-title {
- margin-left: 0;
- margin-right: 0;
- }
- .list.small-inset ul {
- border-radius: var(--f7-list-inset-border-radius);
- }
- .list.small-inset ul:before,
- .list.small-inset ul:after {
- display: none !important;
- }
- .list.small-inset li:first-child > a {
- border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
- }
- .list.small-inset li:last-child > a {
- border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
- }
- .list.small-inset li:first-child:last-child > a {
- border-radius: var(--f7-list-inset-border-radius);
- }
- }
- @media (min-width: 768px) {
- .list.medium-inset {
- margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
- border-radius: var(--f7-list-inset-border-radius);
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .list.medium-inset .block-title {
- margin-left: 0;
- margin-right: 0;
- }
- .list.medium-inset ul {
- border-radius: var(--f7-list-inset-border-radius);
- }
- .list.medium-inset ul:before,
- .list.medium-inset ul:after {
- display: none !important;
- }
- .list.medium-inset li:first-child > a {
- border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
- }
- .list.medium-inset li:last-child > a {
- border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
- }
- .list.medium-inset li:first-child:last-child > a {
- border-radius: var(--f7-list-inset-border-radius);
- }
- }
- @media (min-width: 1024px) {
- .list.large-inset {
- margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
- border-radius: var(--f7-list-inset-border-radius);
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .list.large-inset .block-title {
- margin-left: 0;
- margin-right: 0;
- }
- .list.large-inset ul {
- border-radius: var(--f7-list-inset-border-radius);
- }
- .list.large-inset ul:before,
- .list.large-inset ul:after {
- display: none !important;
- }
- .list.large-inset li:first-child > a {
- border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
- }
- .list.large-inset li:last-child > a {
- border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
- }
- .list.large-inset li:first-child:last-child > a {
- border-radius: var(--f7-list-inset-border-radius);
- }
- }
- @media (min-width: 1200px) {
- .list.xlarge-inset {
- margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
- margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
- border-radius: var(--f7-list-inset-border-radius);
- --f7-safe-area-left: 0px;
- --f7-safe-area-right: 0px;
- }
- .list.xlarge-inset .block-title {
- margin-left: 0;
- margin-right: 0;
- }
- .list.xlarge-inset ul {
- border-radius: var(--f7-list-inset-border-radius);
- }
- .list.xlarge-inset ul:before,
- .list.xlarge-inset ul:after {
- display: none !important;
- }
- .list.xlarge-inset li:first-child > a {
- border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
- }
- .list.xlarge-inset li:last-child > a {
- border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
- }
- .list.xlarge-inset li:first-child:last-child > a {
- border-radius: var(--f7-list-inset-border-radius);
- }
- }
- .list.no-chevron,
- .list .no-chevron {
- --f7-list-chevron-icon-color: transparent;
- --f7-list-chevron-icon-area: 0px;
- }
- .ios .item-link.active-state .item-inner:after,
- .ios .list-button.active-state:after,
- .ios .links-list a.active-state:after {
- background-color: transparent;
- }
- .ios .links-list a.active-state,
- .ios .list .item-link.active-state,
- .ios .list .list-button.active-state {
- transition-duration: 0ms;
- }
- .md .list .item-media {
- min-width: 40px;
- }
- .aurora .list .item-media {
- min-width: 18px;
- }
- .aurora .links-list a,
- .aurora .list .item-link,
- .aurora .list .list-button {
- transition-duration: 0ms;
- }
- .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
- .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
- background: var(--f7-list-link-hover-bg-color);
- }
- .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
- background: var(--f7-list-button-hover-bg-color);
- }
- /* === Badge === */
- :root {
- --f7-badge-text-color: #fff;
- --f7-badge-bg-color: #8e8e93;
- --f7-badge-padding: 0 4px;
- --f7-badge-in-icon-size: 16px;
- --f7-badge-in-icon-font-size: 10px;
- --f7-badge-font-weight: normal;
- --f7-badge-font-size: 12px;
- }
- .ios {
- --f7-badge-size: 20px;
- }
- .md {
- --f7-badge-size: 18px;
- }
- .aurora {
- --f7-badge-size: 18px;
- --f7-badge-font-weight: 600;
- --f7-badge-in-icon-size: 15px;
- }
- .badge {
- display: inline-flex;
- align-items: center;
- align-content: center;
- justify-content: center;
- color: var(--f7-badge-text-color);
- background: var(--f7-badge-bg-color);
- position: relative;
- box-sizing: border-box;
- text-align: center;
- vertical-align: middle;
- font-weight: var(--f7-badge-font-weight);
- font-size: var(--f7-badge-font-size);
- border-radius: var(--f7-badge-size);
- padding: var(--f7-badge-padding);
- height: var(--f7-badge-size);
- min-width: var(--f7-badge-size);
- }
- .icon .badge,
- .f7-icons .badge,
- .framework7-icons .badge,
- .material-icons .badge {
- position: absolute;
- left: 100%;
- margin-left: -10px;
- top: -2px;
- font-family: var(--f7-font-family);
- --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
- --f7-badge-size: var(--f7-badge-in-icon-size);
- }
- .badge[class*="color-"] {
- --f7-badge-bg-color: var(--f7-theme-color);
- }
- :root {
- --f7-button-min-width: 32px;
- --f7-button-bg-color: transparent;
- --f7-button-border-width: 0px;
- /*
- --f7-button-text-color: var(--f7-theme-color);
- --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
- --f7-button-border-color: var(--f7-theme-color);
- --f7-button-fill-text-color: #fff;
- --f7-button-fill-bg-color: var(--f7-theme-color);
- --f7-button-outline-border-color: var(--f7-theme-color);
- */
- --f7-button-outline-border-width: 2px;
- --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
- --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
- --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
- --f7-segmented-strong-padding: 2px;
- --f7-segmented-strong-between-buttons: 4px;
- --f7-segmented-strong-button-font-weight: 500;
- --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
- --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
- --f7-segmented-strong-button-text-color: #000;
- --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
- --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
- --f7-segmented-strong-button-active-text-color: #000;
- --f7-segmented-strong-button-active-bg-color: #fff;
- }
- :root .theme-dark,
- :root.theme-dark {
- --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
- --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
- --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
- --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
- --f7-segmented-strong-button-text-color: #fff;
- --f7-segmented-strong-button-active-text-color: #fff;
- }
- .ios {
- --f7-button-font-size: 13px;
- --f7-button-height: 28px;
- --f7-button-padding-horizontal: 10px;
- --f7-button-border-radius: 5px;
- --f7-button-font-weight: 600;
- --f7-button-letter-spacing: 0;
- --f7-button-text-transform: uppercase;
- /*
- --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
- --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
- */
- --f7-button-large-height: 44px;
- --f7-button-large-font-size: 17px;
- --f7-button-large-font-weight: 500;
- --f7-button-large-text-transform: none;
- --f7-button-small-height: 26px;
- --f7-button-small-font-size: 13px;
- --f7-button-small-font-weight: 600;
- --f7-button-small-text-transform: uppercase;
- --f7-button-small-outline-border-width: 2px;
- --f7-segmented-strong-button-text-transform: none;
- --f7-segmented-strong-button-active-font-weight: 600;
- }
- .md {
- --f7-button-font-size: 14px;
- --f7-button-height: 36px;
- --f7-button-padding-horizontal: 8px;
- --f7-button-border-radius: 4px;
- --f7-button-font-weight: 500;
- --f7-button-letter-spacing: 0.03em;
- --f7-button-text-transform: uppercase;
- /*
- --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
- */
- --f7-button-large-height: 48px;
- --f7-button-large-font-size: 14px;
- --f7-button-large-font-weight: 500;
- --f7-button-large-text-transform: uppercase;
- --f7-button-small-height: 28px;
- --f7-button-small-font-size: 12px;
- --f7-button-small-font-weight: 500;
- --f7-button-small-text-transform: uppercase;
- --f7-button-small-outline-border-width: 2px;
- --f7-segmented-strong-button-text-transform: uppercase;
- --f7-segmented-strong-button-active-font-weight: 500;
- --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
- }
- .md .theme-dark,
- .md.theme-dark {
- --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
- }
- .aurora {
- /*
- --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
- --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
- */
- --f7-button-font-size: 14px;
- --f7-button-height: 28px;
- --f7-button-min-width: 24px;
- --f7-button-padding-horizontal: 10px;
- --f7-button-border-radius: 4px;
- --f7-button-font-weight: 500;
- --f7-button-letter-spacing: 0.02;
- --f7-button-text-transform: none;
- /*
- --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
- --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
- */
- --f7-button-large-height: 34px;
- --f7-button-large-font-size: 14px;
- --f7-button-large-font-weight: 600;
- --f7-button-large-text-transform: none;
- --f7-button-small-height: 24px;
- --f7-button-small-font-size: 12px;
- --f7-button-small-font-weight: 600;
- --f7-button-small-text-transform: none;
- --f7-button-small-outline-border-width: 1px;
- --f7-segmented-strong-button-text-transform: none;
- --f7-segmented-strong-button-active-font-weight: 600;
- }
- button {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- }
- .button {
- text-decoration: none;
- text-align: center;
- display: block;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background: none;
- margin: 0;
- white-space: nowrap;
- text-overflow: ellipsis;
- position: relative;
- overflow: hidden;
- font-family: inherit;
- cursor: pointer;
- outline: 0;
- box-sizing: border-box;
- vertical-align: middle;
- justify-content: center;
- align-items: center;
- border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
- font-size: var(--f7-button-font-size);
- color: var(--f7-button-text-color, var(--f7-theme-color));
- height: var(--f7-button-height);
- line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
- padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
- border-radius: var(--f7-button-border-radius);
- min-width: var(--f7-button-min-width);
- font-weight: var(--f7-button-font-weight);
- letter-spacing: var(--f7-button-letter-spacing);
- text-transform: var(--f7-button-text-transform);
- background-color: var(--f7-button-bg-color);
- box-shadow: var(--f7-button-box-shadow);
- }
- .button.active-state {
- background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
- color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
- }
- input[type="submit"].button,
- input[type="button"].button {
- width: 100%;
- }
- .button > i + span,
- .button > span + span,
- .button > span + i,
- .button > i + i {
- margin-left: 4px;
- }
- .subnavbar .button,
- .navbar .button,
- .toolbar .button,
- .searchbar .button,
- .appbar .button {
- color: var(--f7-button-text-color, var(--f7-theme-color));
- }
- .button-round,
- .ios .button-round-ios,
- .md .button-round-md,
- .aurora .button-round-aurora {
- --f7-button-border-radius: var(--f7-button-height);
- }
- .button-fill,
- .ios .button-fill-ios,
- .md .button-fill-md,
- .aurora .button-fill-aurora,
- .button-active,
- .button.tab-link-active {
- --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
- --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
- --f7-touch-ripple-color: var(--f7-touch-ripple-white);
- }
- .button-fill,
- .ios .button-fill-ios,
- .md .button-fill-md,
- .aurora .button-fill-aurora {
- --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
- }
- .button-active,
- .button.tab-link-active {
- --f7-button-pressed-bg-color: var(--f7-button-bg-color);
- }
- .button-outline,
- .ios .button-outline-ios,
- .md .button-outline-md,
- .aurora .button-outline-aurora {
- --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
- --f7-button-border-width: var(--f7-button-outline-border-width);
- }
- .button-large,
- .ios .button-large-ios,
- .md .button-large-md,
- .aurora .button-large-aurora {
- --f7-button-height: var(--f7-button-large-height);
- --f7-button-font-size: var(--f7-button-large-font-size);
- --f7-button-font-weight: var(--f7-button-large-font-weight);
- --f7-button-text-transform: var(--f7-button-large-text-transform);
- }
- .button-small,
- .ios .button-small-ios,
- .md .button-small-md,
- .aurora .button-small-aurora {
- --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
- --f7-button-height: var(--f7-button-small-height);
- --f7-button-font-size: var(--f7-button-small-font-size);
- --f7-button-font-weight: var(--f7-button-small-font-weight);
- --f7-button-text-transform: var(--f7-button-small-text-transform);
- }
- .ios .button-small.button-fill,
- .ios .button-small-ios.button-fill,
- .ios .button-small.button-fill-ios {
- --f7-button-border-width: var(--f7-button-small-outline-border-width);
- --f7-button-pressed-text-color: var(--f7-theme-color);
- --f7-button-pressed-bg-color: transparent;
- }
- .segmented {
- align-self: center;
- display: flex;
- flex-wrap: nowrap;
- border-radius: var(--f7-button-border-radius);
- box-shadow: var(--f7-button-box-shadow);
- box-sizing: border-box;
- }
- .segmented .button,
- .segmented button {
- width: 100%;
- flex-shrink: 1;
- min-width: 0;
- border-radius: 0;
- }
- .segmented .button:first-child {
- border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
- }
- .segmented .button:not(.button-outline):first-child {
- border-left: none;
- }
- .segmented .button.button-outline:nth-child(n + 2) {
- border-left: none;
- }
- .segmented .button:last-child {
- border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
- }
- .segmented .button-round:first-child {
- border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
- }
- .segmented .button-round:last-child {
- border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
- }
- .segmented .button:first-child:last-child {
- border-radius: var(--f7-button-border-radius);
- }
- .segmented-raised,
- .ios .segmented-raised-ios,
- .md .segmented-raised-md,
- .aurora .segmented-raised-aurora {
- box-shadow: var(--f7-button-raised-box-shadow);
- }
- .segmented-raised .button:not(.button-outline),
- .ios .segmented-raised-ios .button:not(.button-outline),
- .md .segmented-raised-md .button:not(.button-outline),
- .aurora .segmented-raised-aurora .button:not(.button-outline) {
- border-left: 1px solid var(--f7-segmented-raised-divider-color);
- }
- .button-raised,
- .ios .button-raised-ios,
- .md .button-raised-md,
- .aurora .button-raised-aurora {
- --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
- }
- .button-raised.active-state,
- .ios .button-raised-ios.active-state,
- .md .button-raised-md.active-state,
- .aurora .button-raised-aurora.active-state {
- --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
- }
- .segmented-strong,
- .ios .segmented-strong-ios,
- .md .segmented-strong-md,
- .aurora .segmented-strong-aurora {
- --f7-button-bg-color: transparent;
- --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
- --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
- --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
- --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
- --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
- position: relative;
- background: var(--f7-segmented-strong-bg-color);
- border-radius: calc(var(--f7-button-border-radius) + 2px);
- box-shadow: none;
- padding: var(--f7-segmented-strong-padding);
- overflow: hidden;
- }
- .segmented-strong .button,
- .ios .segmented-strong-ios .button,
- .md .segmented-strong-md .button,
- .aurora .segmented-strong-aurora .button {
- z-index: 1;
- transform: translate3d(0, 0, 0);
- }
- .segmented-strong .button,
- .ios .segmented-strong-ios .button,
- .md .segmented-strong-md .button,
- .aurora .segmented-strong-aurora .button,
- .segmented-strong .button:first-child,
- .ios .segmented-strong-ios .button:first-child,
- .md .segmented-strong-md .button:first-child,
- .aurora .segmented-strong-aurora .button:first-child,
- .segmented-strong .button:last-child,
- .ios .segmented-strong-ios .button:last-child,
- .md .segmented-strong-md .button:last-child,
- .aurora .segmented-strong-aurora .button:last-child {
- border-radius: var(--f7-button-border-radius);
- }
- .segmented-strong .button + .button,
- .ios .segmented-strong-ios .button + .button,
- .md .segmented-strong-md .button + .button,
- .aurora .segmented-strong-aurora .button + .button {
- margin-left: var(--f7-segmented-strong-between-buttons);
- }
- .segmented-strong .button.button-active,
- .ios .segmented-strong-ios .button.button-active,
- .md .segmented-strong-md .button.button-active,
- .aurora .segmented-strong-aurora .button.button-active,
- .segmented-strong .button.tab-link-active,
- .ios .segmented-strong-ios .button.tab-link-active,
- .md .segmented-strong-md .button.tab-link-active,
- .aurora .segmented-strong-aurora .button.tab-link-active {
- --f7-button-hover-bg-color: transparent;
- --f7-button-bg-color: transparent;
- --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
- --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
- }
- .segmented-strong .segmented-highlight,
- .ios .segmented-strong-ios .segmented-highlight,
- .md .segmented-strong-md .segmented-highlight,
- .aurora .segmented-strong-aurora .segmented-highlight {
- --f7-segmented-highlight-num: 1;
- --f7-segmented-highlight-active: 0;
- --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
- --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
- --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
- position: absolute;
- background-color: var(--f7-segmented-strong-button-active-bg-color);
- border-radius: var(--f7-button-border-radius);
- box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
- left: var(--f7-segmented-strong-padding);
- top: var(--f7-segmented-strong-padding);
- height: calc(100% - var(--f7-segmented-strong-padding) * 2);
- width: var(--f7-segmented-highlight-width);
- z-index: 0;
- transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
- transition: 200ms;
- }
- .button:nth-child(2) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 2;
- }
- .button:nth-child(3) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 3;
- }
- .button:nth-child(4) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 4;
- }
- .button:nth-child(5) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 5;
- }
- .button:nth-child(6) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 6;
- }
- .button:nth-child(7) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 7;
- }
- .button:nth-child(8) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 8;
- }
- .button:nth-child(9) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 9;
- }
- .button:nth-child(10) ~ .segmented-highlight {
- --f7-segmented-highlight-num: 10;
- }
- .button-active:nth-child(2) ~ .segmented-highlight,
- .tab-link-active:nth-child(2) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 1;
- }
- .button-active:nth-child(3) ~ .segmented-highlight,
- .tab-link-active:nth-child(3) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 2;
- }
- .button-active:nth-child(4) ~ .segmented-highlight,
- .tab-link-active:nth-child(4) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 3;
- }
- .button-active:nth-child(5) ~ .segmented-highlight,
- .tab-link-active:nth-child(5) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 4;
- }
- .button-active:nth-child(6) ~ .segmented-highlight,
- .tab-link-active:nth-child(6) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 5;
- }
- .button-active:nth-child(7) ~ .segmented-highlight,
- .tab-link-active:nth-child(7) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 6;
- }
- .button-active:nth-child(8) ~ .segmented-highlight,
- .tab-link-active:nth-child(8) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 7;
- }
- .button-active:nth-child(9) ~ .segmented-highlight,
- .tab-link-active:nth-child(9) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 8;
- }
- .button-active:nth-child(10) ~ .segmented-highlight,
- .tab-link-active:nth-child(10) ~ .segmented-highlight {
- --f7-segmented-highlight-active: 9;
- }
- .segmented-round,
- .ios .segmented-round-ios,
- .md .segmented-round-md,
- .aurora .segmented-round-aurora {
- border-radius: var(--f7-button-height);
- }
- .segmented-round .segmented-highlight,
- .ios .segmented-round-ios .segmented-highlight,
- .md .segmented-round-md .segmented-highlight,
- .aurora .segmented-round-aurora .segmented-highlight {
- border-radius: var(--f7-button-height);
- }
- .subnavbar .segmented {
- width: 100%;
- }
- .ios .button {
- transition-duration: 100ms;
- }
- .ios .button-fill,
- .ios .button-fill-ios {
- --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
- }
- .ios .button-small,
- .ios .button-small-ios {
- transition-duration: 200ms;
- }
- .md .button {
- transition-duration: 300ms;
- transform: translate3d(0, 0, 0);
- }
- .md .button-fill,
- .md .button-fill-md {
- --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
- }
- .aurora .button {
- transition-duration: 100ms;
- transform: translate3d(0, 0, 0);
- }
- .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
- background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
- }
- .aurora .button-fill,
- .aurora .button-fill-aurora {
- --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
- }
- .aurora .button-fill,
- .aurora .button-active,
- .aurora .button.tab-link-active,
- .aurora .button-fill-aurora {
- --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
- }
- /* === Touch Ripple === */
- :root {
- --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
- --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
- --f7-touch-ripple-color: var(--f7-touch-ripple-black);
- }
- .theme-dark {
- --f7-touch-ripple-color: var(--f7-touch-ripple-white);
- }
- .ripple,
- .fab a,
- .link,
- .item-link,
- .list-button,
- .button,
- .dialog-button,
- .tab-link,
- .radio,
- .checkbox,
- .actions-button,
- .speed-dial-buttons a {
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- }
- .ripple-wave {
- left: 0;
- top: 0;
- position: absolute !important;
- border-radius: 50%;
- pointer-events: none;
- z-index: -1;
- padding: 0;
- margin: 0;
- font-size: 0;
- transform: translate3d(0px, 0px, 0) scale(0);
- transition-duration: 1400ms;
- background-color: var(--f7-touch-ripple-color);
- }
- .ripple-wave.ripple-wave-fill {
- transition-duration: 300ms;
- opacity: 0.35;
- }
- .ripple-wave.ripple-wave-out {
- transition-duration: 600ms;
- opacity: 0;
- }
- .button-fill .ripple-wave,
- .picker-calendar-day .ripple-wave,
- .menu .ripple-wave {
- z-index: 1;
- }
- .checkbox .ripple-wave,
- .radio .ripple-wave,
- .data-table .sortable-cell .ripple-wave {
- z-index: 0;
- }
- [class*="ripple-color-"] {
- --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
- }
- /* === Icon === */
- .f7-icons,
- .material-icons {
- width: 1em;
- height: 1em;
- }
- i.icon {
- display: inline-block;
- vertical-align: middle;
- background-size: 100% auto;
- background-position: center;
- background-repeat: no-repeat;
- font-style: normal;
- position: relative;
- }
- .icon-back:after,
- .icon-prev:after,
- .icon-forward:after,
- .icon-next:after {
- font-family: 'framework7-core-icons';
- font-weight: normal;
- font-style: normal;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- -moz-osx-font-smoothing: grayscale;
- font-feature-settings: "liga";
- text-align: center;
- display: block;
- width: 100%;
- height: 100%;
- font-size: 20px;
- }
- .icon[class*="color-"] {
- color: var(--f7-theme-color);
- }
- .ios .icon-back,
- .ios .icon-prev,
- .ios .icon-forward,
- .ios .icon-next {
- width: 12px;
- height: 20px;
- line-height: 20px;
- }
- .ios .icon-back:after,
- .ios .icon-prev:after,
- .ios .icon-forward:after,
- .ios .icon-next:after {
- line-height: inherit;
- }
- .ios .icon-prev:after,
- .ios .icon-next:after {
- font-size: 16px;
- }
- .ios .icon-back:after,
- .ios .icon-prev:after {
- content: 'chevron_left_ios';
- }
- .ios .icon-forward:after,
- .ios .icon-next:after {
- content: 'chevron_right_ios';
- }
- .md .icon-back,
- .md .icon-forward,
- .md .icon-next,
- .md .icon-prev {
- width: 24px;
- height: 24px;
- }
- .md .icon-back:after,
- .md .icon-forward:after,
- .md .icon-next:after,
- .md .icon-prev:after {
- line-height: 1.2;
- }
- .md .icon-back:after {
- content: 'arrow_left_md';
- }
- .md .icon-forward:after {
- content: 'arrow_right_md';
- }
- .md .icon-next:after {
- content: 'chevron_right_md';
- }
- .md .icon-prev:after {
- content: 'chevron_left_md';
- }
- .aurora .f7-icons,
- .aurora .material-icons {
- font-size: 18px;
- }
- .aurora .icon-back,
- .aurora .icon-prev,
- .aurora .icon-forward,
- .aurora .icon-next {
- width: 9px;
- height: 14px;
- line-height: 14px;
- }
- .aurora .icon-back:after,
- .aurora .icon-prev:after,
- .aurora .icon-forward:after,
- .aurora .icon-next:after {
- line-height: inherit;
- }
- .aurora .icon-back:after,
- .aurora .icon-prev:after {
- content: 'chevron_left_aurora';
- }
- .aurora .icon-forward:after,
- .aurora .icon-next:after {
- content: 'chevron_right_aurora';
- }
- .custom-modal-backdrop {
- z-index: 10500;
- }
- .custom-modal-backdrop,
- .actions-backdrop,
- .dialog-backdrop,
- .popover-backdrop,
- .popup-backdrop,
- .preloader-backdrop,
- .sheet-backdrop,
- .fab-backdrop {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.4);
- z-index: 13000;
- visibility: hidden;
- opacity: 0;
- transition-duration: 400ms;
- }
- .custom-modal-backdrop.not-animated,
- .actions-backdrop.not-animated,
- .dialog-backdrop.not-animated,
- .popover-backdrop.not-animated,
- .popup-backdrop.not-animated,
- .preloader-backdrop.not-animated,
- .sheet-backdrop.not-animated,
- .fab-backdrop.not-animated {
- transition-duration: 0ms;
- }
- .custom-modal-backdrop.backdrop-in,
- .actions-backdrop.backdrop-in,
- .dialog-backdrop.backdrop-in,
- .popover-backdrop.backdrop-in,
- .popup-backdrop.backdrop-in,
- .preloader-backdrop.backdrop-in,
- .sheet-backdrop.backdrop-in,
- .fab-backdrop.backdrop-in {
- visibility: visible;
- opacity: 1;
- }
|