sm.css 110 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830
  1. /*!
  2. * =====================================================
  3. * SUI Mobile - http://m.sui.taobao.org/
  4. *
  5. * =====================================================
  6. */
  7. /*.transition(@d) {
  8. -webkit-transition-duration: @d;
  9. transition-duration: @d;
  10. }
  11. .delay(@d) {
  12. -webkit-transition-delay: @d;
  13. transition-delay: @d;
  14. }
  15. .transform(@t) {
  16. -webkit-transform: @t;
  17. transform: @t;
  18. }
  19. .transform-origin(@to) {
  20. -webkit-transform-origin: @to;
  21. transform-origin: @to;
  22. }
  23. .translate3d(@x:0, @y:0, @z:0) {
  24. -webkit-transform: translate3d(@x,@y,@z);
  25. transform: translate3d(@x,@y,@z);
  26. }
  27. .animation(@a) {
  28. -webkit-animation: @a;
  29. animation: @a;
  30. }
  31. .border-box(){
  32. -webkit-box-sizing: border-box;
  33. -moz-box-sizing: border-box;
  34. box-sizing: border-box;
  35. }
  36. .box-shadow(@bs) {
  37. -webkit-box-shadow: @bs;
  38. box-shadow: @bs;
  39. }
  40. .animation-name(@name) {
  41. -webkit-animation-name: @name;
  42. -moz-animation-name: @name;
  43. animation-name: @name;
  44. }
  45. .animation-duration(@duration) {
  46. -webkit-animation-duration: @duration;
  47. -moz-animation-duration: @duration;
  48. animation-duration: @duration;
  49. }
  50. .animation-direction(@direction) {
  51. -webkit-animation-direction: @direction;
  52. -moz-animation-direction: @direction;
  53. animation-direction: @direction;
  54. }
  55. */
  56. html {
  57. font-size: 20px;
  58. }
  59. @media only screen and (min-width: 400px) {
  60. html {
  61. font-size: 21.33333333px !important;
  62. }
  63. }
  64. @media only screen and (min-width: 414px) {
  65. html {
  66. font-size: 22.08px !important;
  67. }
  68. }
  69. @media only screen and (min-width: 480px) {
  70. html {
  71. font-size: 25.6px !important;
  72. }
  73. }
  74. /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  75. html {
  76. font-family: sans-serif;
  77. -ms-text-size-adjust: 100%;
  78. -webkit-text-size-adjust: 100%;
  79. }
  80. body {
  81. margin: 0;
  82. }
  83. article,
  84. aside,
  85. details,
  86. figcaption,
  87. figure,
  88. footer,
  89. header,
  90. hgroup,
  91. main,
  92. menu,
  93. nav,
  94. section,
  95. summary {
  96. display: block;
  97. }
  98. audio,
  99. canvas,
  100. progress,
  101. video {
  102. display: inline-block;
  103. vertical-align: baseline;
  104. }
  105. audio:not([controls]) {
  106. display: none;
  107. height: 0;
  108. }
  109. [hidden],
  110. template {
  111. display: none;
  112. }
  113. a {
  114. background-color: transparent;
  115. }
  116. a:active,
  117. a:hover {
  118. outline: 0;
  119. }
  120. abbr[title] {
  121. border-bottom: 1px dotted;
  122. }
  123. b,
  124. strong {
  125. font-weight: bold;
  126. }
  127. dfn {
  128. font-style: italic;
  129. }
  130. h1 {
  131. font-size: 2em;
  132. margin: 0.67em 0;
  133. }
  134. mark {
  135. background: #ff0;
  136. color: #000;
  137. }
  138. small {
  139. font-size: 80%;
  140. }
  141. sub,
  142. sup {
  143. font-size: 75%;
  144. line-height: 0;
  145. position: relative;
  146. vertical-align: baseline;
  147. }
  148. sup {
  149. top: -0.5em;
  150. }
  151. sub {
  152. bottom: -0.25em;
  153. }
  154. img {
  155. border: 0;
  156. }
  157. svg:not(:root) {
  158. overflow: hidden;
  159. }
  160. figure {
  161. margin: 1em 40px;
  162. }
  163. hr {
  164. box-sizing: content-box;
  165. height: 0;
  166. }
  167. pre {
  168. overflow: auto;
  169. }
  170. code,
  171. kbd,
  172. pre,
  173. samp {
  174. font-family: monospace, monospace;
  175. font-size: 1em;
  176. }
  177. button,
  178. input,
  179. optgroup,
  180. select,
  181. textarea {
  182. color: inherit;
  183. font: inherit;
  184. margin: 0;
  185. }
  186. button {
  187. overflow: visible;
  188. }
  189. button,
  190. select {
  191. text-transform: none;
  192. }
  193. button,
  194. html input[type="button"],
  195. input[type="reset"],
  196. input[type="submit"] {
  197. -webkit-appearance: button;
  198. cursor: pointer;
  199. }
  200. button[disabled],
  201. html input[disabled] {
  202. cursor: default;
  203. }
  204. button::-moz-focus-inner,
  205. input::-moz-focus-inner {
  206. border: 0;
  207. padding: 0;
  208. }
  209. input {
  210. line-height: normal;
  211. }
  212. input[type="checkbox"],
  213. input[type="radio"] {
  214. box-sizing: border-box;
  215. padding: 0;
  216. }
  217. input[type="number"]::-webkit-inner-spin-button,
  218. input[type="number"]::-webkit-outer-spin-button {
  219. height: auto;
  220. }
  221. input[type="search"] {
  222. -webkit-appearance: textfield;
  223. box-sizing: content-box;
  224. }
  225. input[type="search"]::-webkit-search-cancel-button,
  226. input[type="search"]::-webkit-search-decoration {
  227. -webkit-appearance: none;
  228. }
  229. fieldset {
  230. border: 1px solid #c0c0c0;
  231. margin: 0 2px;
  232. padding: 0.35em 0.625em 0.75em;
  233. }
  234. legend {
  235. border: 0;
  236. padding: 0;
  237. }
  238. textarea {
  239. overflow: auto;
  240. }
  241. optgroup {
  242. font-weight: bold;
  243. }
  244. table {
  245. border-collapse: collapse;
  246. border-spacing: 0;
  247. }
  248. td,
  249. th {
  250. padding: 0;
  251. }
  252. * {
  253. box-sizing: border-box;
  254. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  255. -webkit-touch-callout: none;
  256. }
  257. body {
  258. position: absolute;
  259. top: 0;
  260. right: 0;
  261. bottom: 0;
  262. left: 0;
  263. font-family: "Helvetica Neue", Helvetica, sans-serif;
  264. font-size: 0.85rem;
  265. line-height: 1.5;
  266. color: #3d4145;
  267. background: #eee;
  268. overflow: hidden;
  269. }
  270. a,
  271. input,
  272. textarea,
  273. select,
  274. button {
  275. outline: 0;
  276. }
  277. p {
  278. margin: 1em 0;
  279. }
  280. a {
  281. color: #0894ec;
  282. text-decoration: none;
  283. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  284. }
  285. a:active {
  286. color: #0a8ddf;
  287. }
  288. .page {
  289. position: absolute;
  290. top: 0;
  291. right: 0;
  292. bottom: 0;
  293. left: 0;
  294. background: #eee;
  295. z-index: 2000;
  296. }
  297. .content {
  298. position: absolute;
  299. top: 0;
  300. right: 0;
  301. bottom: 0;
  302. left: 0;
  303. overflow: auto;
  304. -webkit-overflow-scrolling: touch;
  305. }
  306. .bar-nav ~ .content {
  307. top: 2.2rem;
  308. }
  309. .bar-header-secondary ~ .content {
  310. top: 4.4rem;
  311. }
  312. .bar-footer ~ .content {
  313. bottom: 2.2rem;
  314. }
  315. .bar-footer-secondary ~ .content {
  316. bottom: 4.4rem;
  317. }
  318. .bar-tab ~ .content {
  319. bottom: 2.5rem;
  320. }
  321. .bar-footer-secondary-tab ~ .content {
  322. bottom: 4.7rem;
  323. }
  324. .content-padded {
  325. margin: 0.5rem;
  326. }
  327. .text-center {
  328. text-align: center;
  329. }
  330. .pull-left {
  331. float: left;
  332. }
  333. .pull-right {
  334. float: right;
  335. }
  336. .clearfix:before,
  337. .clearfix:after {
  338. content: " ";
  339. display: table;
  340. }
  341. .clearfix:after {
  342. clear: both;
  343. }
  344. /* === Content Block === */
  345. .content-block {
  346. margin: 1.75rem 0;
  347. padding: 0 0.75rem;
  348. color: #6d6d72;
  349. }
  350. .content-block-title {
  351. position: relative;
  352. overflow: hidden;
  353. margin: 0;
  354. white-space: nowrap;
  355. text-overflow: ellipsis;
  356. font-size: 0.7rem;
  357. text-transform: uppercase;
  358. line-height: 1;
  359. color: #6d6d72;
  360. margin: 1.75rem 0.75rem 0.5rem;
  361. }
  362. .content-block-title + .list-block,
  363. .content-block-title + .content-block,
  364. .content-block-title + .card {
  365. margin-top: 0.5rem;
  366. }
  367. .content-block-inner {
  368. background: #fff;
  369. padding: 0.5rem 0.75rem;
  370. margin-left: -0.75rem;
  371. width: 100%;
  372. position: relative;
  373. color: #3d4145;
  374. }
  375. .content-block-inner:before {
  376. content: '';
  377. position: absolute;
  378. left: 0;
  379. top: 0;
  380. bottom: auto;
  381. right: auto;
  382. height: 1px;
  383. width: 100%;
  384. background-color: #c8c7cc;
  385. display: block;
  386. z-index: 15;
  387. -webkit-transform-origin: 50% 0%;
  388. transform-origin: 50% 0%;
  389. }
  390. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  391. .content-block-inner:before {
  392. -webkit-transform: scaleY(0.5);
  393. transform: scaleY(0.5);
  394. }
  395. }
  396. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  397. .content-block-inner:before {
  398. -webkit-transform: scaleY(0.33);
  399. transform: scaleY(0.33);
  400. }
  401. }
  402. .content-block-inner:after {
  403. content: '';
  404. position: absolute;
  405. left: 0;
  406. bottom: 0;
  407. right: auto;
  408. top: auto;
  409. height: 1px;
  410. width: 100%;
  411. background-color: #c8c7cc;
  412. display: block;
  413. z-index: 15;
  414. -webkit-transform-origin: 50% 100%;
  415. transform-origin: 50% 100%;
  416. }
  417. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  418. .content-block-inner:after {
  419. -webkit-transform: scaleY(0.5);
  420. transform: scaleY(0.5);
  421. }
  422. }
  423. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  424. .content-block-inner:after {
  425. -webkit-transform: scaleY(0.33);
  426. transform: scaleY(0.33);
  427. }
  428. }
  429. .content-block.inset {
  430. margin-left: 0.75rem;
  431. margin-right: 0.75rem;
  432. border-radius: 0.35rem;
  433. }
  434. .content-block.inset .content-block-inner {
  435. border-radius: 0.35rem;
  436. }
  437. .content-block.inset .content-block-inner:before {
  438. display: none;
  439. }
  440. .content-block.inset .content-block-inner:after {
  441. display: none;
  442. }
  443. @media all and (min-width: 768px) {
  444. .content-block.tablet-inset {
  445. margin-left: 0.75rem;
  446. margin-right: 0.75rem;
  447. border-radius: 0.35rem;
  448. }
  449. .content-block.tablet-inset .content-block-inner {
  450. border-radius: 0.35rem;
  451. }
  452. .content-block.tablet-inset .content-block-inner:before {
  453. display: none;
  454. }
  455. .content-block.tablet-inset .content-block-inner:after {
  456. display: none;
  457. }
  458. }
  459. /* === Grid === */
  460. .row {
  461. overflow: hidden;
  462. margin-left: -4%;
  463. }
  464. .row > [class*="col-"],
  465. .row > [class*="tablet-"] {
  466. box-sizing: border-box;
  467. float: left;
  468. }
  469. .row.no-gutter {
  470. margin-left: 0;
  471. }
  472. .row .col-100 {
  473. width: 96%;
  474. margin-left: 4%;
  475. }
  476. .row.no-gutter .col-100 {
  477. width: 100%;
  478. margin: 0;
  479. }
  480. .row .col-95 {
  481. width: 91%;
  482. margin-left: 4%;
  483. }
  484. .row.no-gutter .col-95 {
  485. width: 95%;
  486. margin: 0;
  487. }
  488. .row .col-90 {
  489. width: 86%;
  490. margin-left: 4%;
  491. }
  492. .row.no-gutter .col-90 {
  493. width: 90%;
  494. margin: 0;
  495. }
  496. .row .col-85 {
  497. width: 81%;
  498. margin-left: 4%;
  499. }
  500. .row.no-gutter .col-85 {
  501. width: 85%;
  502. margin: 0;
  503. }
  504. .row .col-80 {
  505. width: 76%;
  506. margin-left: 4%;
  507. }
  508. .row.no-gutter .col-80 {
  509. width: 80%;
  510. margin: 0;
  511. }
  512. .row .col-75 {
  513. width: 71.00000000000001%;
  514. margin-left: 4%;
  515. }
  516. .row.no-gutter .col-75 {
  517. width: 75%;
  518. margin: 0;
  519. }
  520. .row .col-66 {
  521. width: 62.66666666666666%;
  522. margin-left: 4%;
  523. }
  524. .row.no-gutter .col-66 {
  525. width: 66.66666666666666%;
  526. margin: 0;
  527. }
  528. .row .col-60 {
  529. width: 55.99999999999999%;
  530. margin-left: 4%;
  531. }
  532. .row.no-gutter .col-60 {
  533. width: 60%;
  534. margin: 0;
  535. }
  536. .row .col-50 {
  537. width: 46%;
  538. margin-left: 4%;
  539. }
  540. .row.no-gutter .col-50 {
  541. width: 50%;
  542. margin: 0;
  543. }
  544. .row .col-40 {
  545. width: 36%;
  546. margin-left: 4%;
  547. }
  548. .row.no-gutter .col-40 {
  549. width: 40%;
  550. margin: 0;
  551. }
  552. .row .col-33 {
  553. width: 29.333333333333332%;
  554. margin-left: 4%;
  555. }
  556. .row.no-gutter .col-33 {
  557. width: 33.333333333333336%;
  558. margin: 0;
  559. }
  560. .row .col-25 {
  561. width: 21%;
  562. margin-left: 4%;
  563. }
  564. .row.no-gutter .col-25 {
  565. width: 25%;
  566. margin: 0;
  567. }
  568. .row .col-20 {
  569. width: 16%;
  570. margin-left: 4%;
  571. }
  572. .row.no-gutter .col-20 {
  573. width: 20%;
  574. margin: 0;
  575. }
  576. .row .col-15 {
  577. width: 10.999999999999998%;
  578. margin-left: 4%;
  579. }
  580. .row.no-gutter .col-15 {
  581. width: 15%;
  582. margin: 0;
  583. }
  584. .row .col-10 {
  585. width: 6%;
  586. margin-left: 4%;
  587. }
  588. .row.no-gutter .col-10 {
  589. width: 10%;
  590. margin: 0;
  591. }
  592. .row .col-5 {
  593. width: 1%;
  594. margin-left: 4%;
  595. }
  596. .row.no-gutter .col-5 {
  597. width: 5%;
  598. margin: 0;
  599. }
  600. @media all and (min-width: 768px) {
  601. .row {
  602. margin-left: -2%;
  603. }
  604. .row .col-100 {
  605. width: 98%;
  606. margin-left: 2%;
  607. }
  608. .row.no-gutter .col-100 {
  609. width: 100%;
  610. margin: 0;
  611. }
  612. .row .col-95 {
  613. width: 93%;
  614. margin-left: 2%;
  615. }
  616. .row.no-gutter .col-95 {
  617. width: 95%;
  618. margin: 0;
  619. }
  620. .row .col-90 {
  621. width: 87.99999999999999%;
  622. margin-left: 2%;
  623. }
  624. .row.no-gutter .col-90 {
  625. width: 90%;
  626. margin: 0;
  627. }
  628. .row .col-85 {
  629. width: 82.99999999999999%;
  630. margin-left: 2%;
  631. }
  632. .row.no-gutter .col-85 {
  633. width: 85%;
  634. margin: 0;
  635. }
  636. .row .col-80 {
  637. width: 78%;
  638. margin-left: 2%;
  639. }
  640. .row.no-gutter .col-80 {
  641. width: 80%;
  642. margin: 0;
  643. }
  644. .row .col-75 {
  645. width: 73%;
  646. margin-left: 2%;
  647. }
  648. .row.no-gutter .col-75 {
  649. width: 75%;
  650. margin: 0;
  651. }
  652. .row .col-66 {
  653. width: 64.66666666666666%;
  654. margin-left: 2%;
  655. }
  656. .row.no-gutter .col-66 {
  657. width: 66.66666666666666%;
  658. margin: 0;
  659. }
  660. .row .col-60 {
  661. width: 58%;
  662. margin-left: 2%;
  663. }
  664. .row.no-gutter .col-60 {
  665. width: 60%;
  666. margin: 0;
  667. }
  668. .row .col-50 {
  669. width: 48%;
  670. margin-left: 2%;
  671. }
  672. .row.no-gutter .col-50 {
  673. width: 50%;
  674. margin: 0;
  675. }
  676. .row .col-40 {
  677. width: 38%;
  678. margin-left: 2%;
  679. }
  680. .row.no-gutter .col-40 {
  681. width: 40%;
  682. margin: 0;
  683. }
  684. .row .col-33 {
  685. width: 31.333333333333332%;
  686. margin-left: 2%;
  687. }
  688. .row.no-gutter .col-33 {
  689. width: 33.333333333333336%;
  690. margin: 0;
  691. }
  692. .row .col-25 {
  693. width: 23%;
  694. margin-left: 2%;
  695. }
  696. .row.no-gutter .col-25 {
  697. width: 25%;
  698. margin: 0;
  699. }
  700. .row .col-20 {
  701. width: 18%;
  702. margin-left: 2%;
  703. }
  704. .row.no-gutter .col-20 {
  705. width: 20%;
  706. margin: 0;
  707. }
  708. .row .col-15 {
  709. width: 13%;
  710. margin-left: 2%;
  711. }
  712. .row.no-gutter .col-15 {
  713. width: 15%;
  714. margin: 0;
  715. }
  716. .row .col-10 {
  717. width: 8%;
  718. margin-left: 2%;
  719. }
  720. .row.no-gutter .col-10 {
  721. width: 10%;
  722. margin: 0;
  723. }
  724. .row .col-5 {
  725. width: 3%;
  726. margin-left: 2%;
  727. }
  728. .row.no-gutter .col-5 {
  729. width: 5%;
  730. margin: 0;
  731. }
  732. .row .tablet-100 {
  733. width: 98%;
  734. margin-left: 2%;
  735. }
  736. .row.no-gutter .tablet-100 {
  737. width: 100%;
  738. margin: 0;
  739. }
  740. .row .tablet-95 {
  741. width: 93%;
  742. margin-left: 2%;
  743. }
  744. .row.no-gutter .tablet-95 {
  745. width: 95%;
  746. margin: 0;
  747. }
  748. .row .tablet-90 {
  749. width: 87.99999999999999%;
  750. margin-left: 2%;
  751. }
  752. .row.no-gutter .tablet-90 {
  753. width: 90%;
  754. margin: 0;
  755. }
  756. .row .tablet-85 {
  757. width: 82.99999999999999%;
  758. margin-left: 2%;
  759. }
  760. .row.no-gutter .tablet-85 {
  761. width: 85%;
  762. margin: 0;
  763. }
  764. .row .tablet-80 {
  765. width: 78%;
  766. margin-left: 2%;
  767. }
  768. .row.no-gutter .tablet-80 {
  769. width: 80%;
  770. margin: 0;
  771. }
  772. .row .tablet-75 {
  773. width: 73%;
  774. margin-left: 2%;
  775. }
  776. .row.no-gutter .tablet-75 {
  777. width: 75%;
  778. margin: 0;
  779. }
  780. .row .tablet-66 {
  781. width: 64.66666666666666%;
  782. margin-left: 2%;
  783. }
  784. .row.no-gutter .tablet-66 {
  785. width: 66.66666666666666%;
  786. margin: 0;
  787. }
  788. .row .tablet-60 {
  789. width: 58%;
  790. margin-left: 2%;
  791. }
  792. .row.no-gutter .tablet-60 {
  793. width: 60%;
  794. margin: 0;
  795. }
  796. .row .tablet-50 {
  797. width: 48%;
  798. margin-left: 2%;
  799. }
  800. .row.no-gutter .tablet-50 {
  801. width: 50%;
  802. margin: 0;
  803. }
  804. .row .tablet-40 {
  805. width: 38%;
  806. margin-left: 2%;
  807. }
  808. .row.no-gutter .tablet-40 {
  809. width: 40%;
  810. margin: 0;
  811. }
  812. .row .tablet-33 {
  813. width: 31.333333333333332%;
  814. margin-left: 2%;
  815. }
  816. .row.no-gutter .tablet-33 {
  817. width: 33.333333333333336%;
  818. margin: 0;
  819. }
  820. .row .tablet-25 {
  821. width: 23%;
  822. margin-left: 2%;
  823. }
  824. .row.no-gutter .tablet-25 {
  825. width: 25%;
  826. margin: 0;
  827. }
  828. .row .tablet-20 {
  829. width: 18%;
  830. margin-left: 2%;
  831. }
  832. .row.no-gutter .tablet-20 {
  833. width: 20%;
  834. margin: 0;
  835. }
  836. .row .tablet-15 {
  837. width: 13%;
  838. margin-left: 2%;
  839. }
  840. .row.no-gutter .tablet-15 {
  841. width: 15%;
  842. margin: 0;
  843. }
  844. .row .tablet-10 {
  845. width: 8%;
  846. margin-left: 2%;
  847. }
  848. .row.no-gutter .tablet-10 {
  849. width: 10%;
  850. margin: 0;
  851. }
  852. .row .tablet-5 {
  853. width: 3%;
  854. margin-left: 2%;
  855. }
  856. .row.no-gutter .tablet-5 {
  857. width: 5%;
  858. margin: 0;
  859. }
  860. }
  861. .color-default {
  862. color: #3d4145;
  863. }
  864. .color-gray {
  865. color: #999;
  866. }
  867. .color-primary {
  868. color: #0894ec;
  869. }
  870. .color-success {
  871. color: #4cd964;
  872. }
  873. .color-danger {
  874. color: #f6383a;
  875. }
  876. .color-warning {
  877. color: #f60;
  878. }
  879. .text-center {
  880. text-align: center;
  881. }
  882. .bar {
  883. position: absolute;
  884. right: 0;
  885. left: 0;
  886. z-index: 10;
  887. height: 2.2rem;
  888. padding-right: 0.5rem;
  889. padding-left: 0.5rem;
  890. background-color: #f7f7f8;
  891. -webkit-backface-visibility: hidden;
  892. backface-visibility: hidden;
  893. }
  894. .bar:after {
  895. content: '';
  896. position: absolute;
  897. left: 0;
  898. bottom: 0;
  899. right: auto;
  900. top: auto;
  901. height: 1px;
  902. width: 100%;
  903. background-color: #e7e7e7;
  904. display: block;
  905. z-index: 15;
  906. -webkit-transform-origin: 50% 100%;
  907. transform-origin: 50% 100%;
  908. }
  909. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  910. .bar:after {
  911. -webkit-transform: scaleY(0.5);
  912. transform: scaleY(0.5);
  913. }
  914. }
  915. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  916. .bar:after {
  917. -webkit-transform: scaleY(0.33);
  918. transform: scaleY(0.33);
  919. }
  920. }
  921. .bar-header-secondary {
  922. top: 2.2rem;
  923. }
  924. .bar-footer {
  925. bottom: 0;
  926. }
  927. .bar-footer-secondary {
  928. bottom: 2.2rem;
  929. }
  930. .bar-footer-secondary-tab {
  931. bottom: 2.5rem;
  932. }
  933. .bar-footer:before,
  934. .bar-footer-secondary:before,
  935. .bar-footer-secondary-tab:before {
  936. content: '';
  937. position: absolute;
  938. left: 0;
  939. top: 0;
  940. bottom: auto;
  941. right: auto;
  942. height: 1px;
  943. width: 100%;
  944. background-color: #e7e7e7;
  945. display: block;
  946. z-index: 15;
  947. -webkit-transform-origin: 50% 0%;
  948. transform-origin: 50% 0%;
  949. }
  950. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  951. .bar-footer:before,
  952. .bar-footer-secondary:before,
  953. .bar-footer-secondary-tab:before {
  954. -webkit-transform: scaleY(0.5);
  955. transform: scaleY(0.5);
  956. }
  957. }
  958. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  959. .bar-footer:before,
  960. .bar-footer-secondary:before,
  961. .bar-footer-secondary-tab:before {
  962. -webkit-transform: scaleY(0.33);
  963. transform: scaleY(0.33);
  964. }
  965. }
  966. .bar-footer:after,
  967. .bar-footer-secondary:after,
  968. .bar-footer-secondary-tab:after {
  969. display: none;
  970. }
  971. .bar-nav {
  972. top: 0;
  973. }
  974. .title {
  975. position: absolute;
  976. display: block;
  977. width: 100%;
  978. padding: 0;
  979. margin: 0 -0.5rem;
  980. font-size: 0.85rem;
  981. font-weight: 500;
  982. line-height: 2.2rem;
  983. color: #3d4145;
  984. text-align: center;
  985. white-space: nowrap;
  986. }
  987. .title a {
  988. color: inherit;
  989. }
  990. .bar-tab {
  991. bottom: 0;
  992. width: 100%;
  993. height: 2.5rem;
  994. padding: 0;
  995. table-layout: fixed;
  996. }
  997. .bar-tab:before {
  998. content: '';
  999. position: absolute;
  1000. left: 0;
  1001. top: 0;
  1002. bottom: auto;
  1003. right: auto;
  1004. height: 1px;
  1005. width: 100%;
  1006. background-color: #e7e7e7;
  1007. display: block;
  1008. z-index: 15;
  1009. -webkit-transform-origin: 50% 0%;
  1010. transform-origin: 50% 0%;
  1011. }
  1012. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1013. .bar-tab:before {
  1014. -webkit-transform: scaleY(0.5);
  1015. transform: scaleY(0.5);
  1016. }
  1017. }
  1018. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1019. .bar-tab:before {
  1020. -webkit-transform: scaleY(0.33);
  1021. transform: scaleY(0.33);
  1022. }
  1023. }
  1024. .bar-tab:after {
  1025. display: none;
  1026. }
  1027. .bar-tab .tab-item {
  1028. position: relative;
  1029. display: table-cell;
  1030. width: 1%;
  1031. height: 2.5rem;
  1032. color: #929292;
  1033. text-align: center;
  1034. vertical-align: middle;
  1035. }
  1036. .bar-tab .tab-item.active,
  1037. .bar-tab .tab-item:active {
  1038. color: #0894ec;
  1039. }
  1040. .bar-tab .tab-item .badge {
  1041. position: absolute;
  1042. top: .1rem;
  1043. left: 50%;
  1044. z-index: 100;
  1045. height: .8rem;
  1046. min-width: .8rem;
  1047. padding: 0 .2rem;
  1048. font-size: .6rem;
  1049. line-height: .8rem;
  1050. color: white;
  1051. vertical-align: top;
  1052. background: red;
  1053. border-radius: .5rem;
  1054. margin-left: .1rem;
  1055. }
  1056. .bar-tab .tab-item .icon {
  1057. top: 0.05rem;
  1058. height: 1.2rem;
  1059. font-size: 1.2rem;
  1060. line-height: 1.2rem;
  1061. padding-top: 0;
  1062. padding-bottom: 0;
  1063. }
  1064. .bar-tab .tab-item .icon ~ .tab-label {
  1065. display: block;
  1066. font-size: 0.55rem;
  1067. position: relative;
  1068. top: 0.15rem;
  1069. }
  1070. .bar .button {
  1071. position: relative;
  1072. top: 0.35rem;
  1073. z-index: 20;
  1074. margin-top: 0;
  1075. font-weight: 400;
  1076. }
  1077. .bar .button.pull-right {
  1078. margin-left: 0.5rem;
  1079. }
  1080. .bar .button.pull-left {
  1081. margin-right: 0.5rem;
  1082. }
  1083. .bar .button-link {
  1084. top: 0;
  1085. padding: 0;
  1086. font-size: 0.8rem;
  1087. line-height: 2.2rem;
  1088. height: 2.2rem;
  1089. color: #0894ec;
  1090. border: 0;
  1091. }
  1092. .bar .button-link:active,
  1093. .bar .button-link.active {
  1094. color: #0675bb;
  1095. }
  1096. .bar .button-block {
  1097. top: 0.35rem;
  1098. font-size: 0.8rem;
  1099. width: 100%;
  1100. }
  1101. .bar .button-nav.pull-left {
  1102. margin-left: -0.25rem;
  1103. }
  1104. .bar .button-nav.pull-left .icon-left-nav {
  1105. margin-right: -0.15rem;
  1106. }
  1107. .bar .button-nav.pull-right {
  1108. margin-right: -0.25rem;
  1109. }
  1110. .bar .button-nav.pull-right .icon-right-nav {
  1111. margin-left: -0.15rem;
  1112. }
  1113. .bar .icon {
  1114. position: relative;
  1115. z-index: 20;
  1116. padding: .5rem .1rem;
  1117. font-size: 1rem;
  1118. line-height: 1.2rem;
  1119. }
  1120. .bar .button .icon {
  1121. padding: 0;
  1122. }
  1123. .bar .title .icon {
  1124. padding: 0;
  1125. }
  1126. .bar .title .icon.icon-caret {
  1127. top: 0.2rem;
  1128. margin-left: -0.25rem;
  1129. }
  1130. .bar-footer .icon {
  1131. font-size: 1.2rem;
  1132. line-height: 1.2rem;
  1133. }
  1134. .bar input[type="search"] {
  1135. height: 1.45rem;
  1136. margin: 0.3rem 0;
  1137. }
  1138. .badge {
  1139. display: inline-block;
  1140. padding: 0.1rem 0.45rem 0.15rem;
  1141. font-size: 0.6rem;
  1142. line-height: 1;
  1143. color: #3d4145;
  1144. background-color: rgba(0, 0, 0, 0.15);
  1145. border-radius: 5rem;
  1146. }
  1147. .badge.badge-inverted {
  1148. padding: 0 0.25rem 0 0;
  1149. background-color: transparent;
  1150. }
  1151. /* === Lists === */
  1152. .list-block {
  1153. margin: 1.75rem 0;
  1154. font-size: 0.85rem;
  1155. /*
  1156. .swipeout {
  1157. overflow: hidden;
  1158. -webkit-transform-style: preserve-3d;
  1159. transform-style: preserve-3d;
  1160. }
  1161. .swipeout.deleting {
  1162. transition-duration: 300ms;
  1163. .swipeout-content {
  1164. transform: translateX(-100%);
  1165. }
  1166. }
  1167. .swipeout.transitioning {
  1168. .swipeout-content, .swipeout-actions-right a, .swipeout-actions-left a, .swipeout-overswipe {
  1169. -webkit-transition: 300ms;
  1170. transition: 300ms;
  1171. }
  1172. }
  1173. .swipeout-content {
  1174. position: relative;
  1175. z-index: 10;
  1176. }
  1177. .swipeout-overswipe {
  1178. -webkit-transition: 200ms left;
  1179. transition: 200ms left;
  1180. }
  1181. .swipeout-actions-left, .swipeout-actions-right {
  1182. position: absolute;
  1183. top: 0;
  1184. height: 100%;
  1185. .flexbox();
  1186. a {
  1187. padding: 0 1.5rem;
  1188. color:#fff;
  1189. background: #c7c7cc;
  1190. .flexbox();
  1191. .align-items(center);
  1192. position: relative;
  1193. left: 0;
  1194. &:after {
  1195. content:'';
  1196. position: absolute;
  1197. top: 0;
  1198. width: 600%;
  1199. height: 100%;
  1200. background: inherit;
  1201. z-index: -1;
  1202. }
  1203. }
  1204. a.swipeout-delete {
  1205. background: @color-danger;
  1206. }
  1207. }
  1208. .swipeout-actions-right {
  1209. right: 0%;
  1210. transform: translateX(100%);
  1211. a:after {
  1212. left: 100%;
  1213. margin-left: -1px;
  1214. }
  1215. }
  1216. .swipeout-actions-left {
  1217. left: 0%;
  1218. transform: translateX(-100%);
  1219. a:after {
  1220. right: 100%;
  1221. margin-right: -1px;
  1222. }
  1223. }
  1224. */
  1225. /*
  1226. .sortable-handler {
  1227. position: absolute;
  1228. right: 0;
  1229. top: 0;
  1230. bottom: 1px;
  1231. z-index: 10;
  1232. background-repeat: no-repeat;
  1233. background-size: 0.9rem 0.6rem;
  1234. background-image: url("@{imgBaseUrl}/i-sortable-handler.png");
  1235. background-position: center;
  1236. width: 1.75rem;
  1237. opacity: 0;
  1238. visibility: hidden;
  1239. right: 0;
  1240. }
  1241. &.sortable {
  1242. .item-inner {
  1243. transition-duration: 300ms;
  1244. }
  1245. }
  1246. &.sortable-opened {
  1247. .sortable-handler {
  1248. visibility: visible;
  1249. opacity: 1;
  1250. }
  1251. .item-inner, .item-link .item-inner {
  1252. padding-right: 1.5rem;
  1253. }
  1254. .item-link .item-inner, .item-link .item-title-row {
  1255. background-image: none;
  1256. }
  1257. }
  1258. &.sortable-sorting {
  1259. li {
  1260. transition-duration: 300ms;
  1261. }
  1262. }
  1263. li.sorting {
  1264. z-index: 50;
  1265. background: rgba(255,255,255,0.8);
  1266. box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.6);
  1267. transition-duration: 0ms;
  1268. .item-inner {
  1269. .hairline-remove(bottom);
  1270. }
  1271. }
  1272. */
  1273. }
  1274. .list-block ul {
  1275. background: #fff;
  1276. list-style: none;
  1277. padding: 0;
  1278. margin: 0;
  1279. position: relative;
  1280. }
  1281. .list-block ul:before {
  1282. content: '';
  1283. position: absolute;
  1284. left: 0;
  1285. top: 0;
  1286. bottom: auto;
  1287. right: auto;
  1288. height: 1px;
  1289. width: 100%;
  1290. background-color: #e7e7e7;
  1291. display: block;
  1292. z-index: 15;
  1293. -webkit-transform-origin: 50% 0%;
  1294. transform-origin: 50% 0%;
  1295. }
  1296. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1297. .list-block ul:before {
  1298. -webkit-transform: scaleY(0.5);
  1299. transform: scaleY(0.5);
  1300. }
  1301. }
  1302. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1303. .list-block ul:before {
  1304. -webkit-transform: scaleY(0.33);
  1305. transform: scaleY(0.33);
  1306. }
  1307. }
  1308. .list-block ul:after {
  1309. content: '';
  1310. position: absolute;
  1311. left: 0;
  1312. bottom: 0;
  1313. right: auto;
  1314. top: auto;
  1315. height: 1px;
  1316. width: 100%;
  1317. background-color: #e7e7e7;
  1318. display: block;
  1319. z-index: 15;
  1320. -webkit-transform-origin: 50% 100%;
  1321. transform-origin: 50% 100%;
  1322. }
  1323. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1324. .list-block ul:after {
  1325. -webkit-transform: scaleY(0.5);
  1326. transform: scaleY(0.5);
  1327. }
  1328. }
  1329. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1330. .list-block ul:after {
  1331. -webkit-transform: scaleY(0.33);
  1332. transform: scaleY(0.33);
  1333. }
  1334. }
  1335. .list-block ul ul {
  1336. padding-left: 2.25rem;
  1337. }
  1338. .list-block ul ul:before {
  1339. display: none;
  1340. }
  1341. .list-block ul ul:after {
  1342. display: none;
  1343. }
  1344. .list-block .align-top,
  1345. .list-block .align-top .item-content,
  1346. .list-block .align-top .item-inner {
  1347. -webkit-box-align: start;
  1348. -webkit-align-items: flex-start;
  1349. align-items: flex-start;
  1350. }
  1351. .list-block.inset {
  1352. margin-left: 0.75rem;
  1353. margin-right: 0.75rem;
  1354. border-radius: 0.35rem;
  1355. }
  1356. .list-block.inset .content-block-title {
  1357. margin-left: 0;
  1358. margin-right: 0;
  1359. }
  1360. .list-block.inset ul {
  1361. border-radius: 0.35rem;
  1362. }
  1363. .list-block.inset ul:before {
  1364. display: none;
  1365. }
  1366. .list-block.inset ul:after {
  1367. display: none;
  1368. }
  1369. .list-block.inset li:first-child > a {
  1370. border-radius: 0.35rem 0.35rem 0 0;
  1371. }
  1372. .list-block.inset li:last-child > a {
  1373. border-radius: 0 0 0.35rem 0.35rem;
  1374. }
  1375. .list-block.inset li:first-child:last-child > a {
  1376. border-radius: 0.35rem;
  1377. }
  1378. @media all and (min-width: 768px) {
  1379. .list-block.tablet-inset {
  1380. margin-left: 0.75rem;
  1381. margin-right: 0.75rem;
  1382. border-radius: 0.35rem;
  1383. }
  1384. .list-block.tablet-inset .content-block-title {
  1385. margin-left: 0;
  1386. margin-right: 0;
  1387. }
  1388. .list-block.tablet-inset ul {
  1389. border-radius: 0.35rem;
  1390. }
  1391. .list-block.tablet-inset ul:before {
  1392. display: none;
  1393. }
  1394. .list-block.tablet-inset ul:after {
  1395. display: none;
  1396. }
  1397. .list-block.tablet-inset li:first-child > a {
  1398. border-radius: 0.35rem 0.35rem 0 0;
  1399. }
  1400. .list-block.tablet-inset li:last-child > a {
  1401. border-radius: 0 0 0.35rem 0.35rem;
  1402. }
  1403. .list-block.tablet-inset li:first-child:last-child > a {
  1404. border-radius: 0.35rem;
  1405. }
  1406. .list-block.tablet-inset .content-block-title {
  1407. margin-left: 0;
  1408. margin-right: 0;
  1409. }
  1410. .list-block.tablet-inset ul {
  1411. border-radius: 0.35rem;
  1412. }
  1413. .list-block.tablet-inset ul:before {
  1414. display: none;
  1415. }
  1416. .list-block.tablet-inset ul:after {
  1417. display: none;
  1418. }
  1419. .list-block.tablet-inset li:first-child > a {
  1420. border-radius: 0.35rem 0.35rem 0 0;
  1421. }
  1422. .list-block.tablet-inset li:last-child > a {
  1423. border-radius: 0 0 0.35rem 0.35rem;
  1424. }
  1425. .list-block.tablet-inset li:first-child:last-child > a {
  1426. border-radius: 0.35rem;
  1427. }
  1428. }
  1429. .list-block li {
  1430. box-sizing: border-box;
  1431. position: relative;
  1432. }
  1433. .list-block .item-media {
  1434. display: -webkit-box;
  1435. display: -webkit-flex;
  1436. display: flex;
  1437. -webkit-flex-shrink: 0;
  1438. -ms-flex: 0 0 auto;
  1439. -webkit-flex-shrink: 0;
  1440. flex-shrink: 0;
  1441. -webkit-box-lines: single;
  1442. -moz-box-lines: single;
  1443. -webkit-flex-wrap: nowrap;
  1444. flex-wrap: nowrap;
  1445. box-sizing: border-box;
  1446. -webkit-box-align: center;
  1447. -webkit-align-items: center;
  1448. align-items: center;
  1449. padding-top: 0.35rem;
  1450. padding-bottom: 0.4rem;
  1451. }
  1452. .list-block .item-media i + i {
  1453. margin-left: 0.25rem;
  1454. }
  1455. .list-block .item-media i + img {
  1456. margin-left: 0.25rem;
  1457. }
  1458. .list-block .item-media + .item-inner {
  1459. margin-left: 0.75rem;
  1460. }
  1461. .list-block .item-inner {
  1462. padding-right: 0.75rem;
  1463. position: relative;
  1464. width: 100%;
  1465. padding-top: 0.4rem;
  1466. padding-bottom: 0.35rem;
  1467. min-height: 2.2rem;
  1468. overflow: hidden;
  1469. box-sizing: border-box;
  1470. display: -webkit-box;
  1471. display: -webkit-flex;
  1472. display: flex;
  1473. -webkit-box-flex: 1;
  1474. -ms-flex: 1;
  1475. -webkit-box-pack: justify;
  1476. -webkit-justify-content: space-between;
  1477. justify-content: space-between;
  1478. -webkit-box-align: center;
  1479. -webkit-align-items: center;
  1480. align-items: center;
  1481. }
  1482. .list-block .item-inner:after {
  1483. content: '';
  1484. position: absolute;
  1485. left: 0;
  1486. bottom: 0;
  1487. right: auto;
  1488. top: auto;
  1489. height: 1px;
  1490. width: 100%;
  1491. background-color: #e7e7e7;
  1492. display: block;
  1493. z-index: 15;
  1494. -webkit-transform-origin: 50% 100%;
  1495. transform-origin: 50% 100%;
  1496. }
  1497. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1498. .list-block .item-inner:after {
  1499. -webkit-transform: scaleY(0.5);
  1500. transform: scaleY(0.5);
  1501. }
  1502. }
  1503. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1504. .list-block .item-inner:after {
  1505. -webkit-transform: scaleY(0.33);
  1506. transform: scaleY(0.33);
  1507. }
  1508. }
  1509. .list-block .item-title {
  1510. -webkit-flex-shrink: 1;
  1511. -ms-flex: 0 1 auto;
  1512. -webkit-flex-shrink: 1;
  1513. flex-shrink: 1;
  1514. white-space: nowrap;
  1515. position: relative;
  1516. overflow: hidden;
  1517. text-overflow: ellipsis;
  1518. max-width: 100%;
  1519. }
  1520. .list-block .item-title.label {
  1521. width: 35%;
  1522. -webkit-flex-shrink: 0;
  1523. -ms-flex: 0 0 auto;
  1524. -webkit-flex-shrink: 0;
  1525. flex-shrink: 0;
  1526. margin: 4px 0;
  1527. }
  1528. .list-block .item-input {
  1529. width: 100%;
  1530. margin-top: -0.4rem;
  1531. margin-bottom: -0.35rem;
  1532. -webkit-box-flex: 1;
  1533. -ms-flex: 1;
  1534. -webkit-flex-shrink: 1;
  1535. -ms-flex: 0 1 auto;
  1536. -webkit-flex-shrink: 1;
  1537. flex-shrink: 1;
  1538. }
  1539. .list-block .item-after {
  1540. white-space: nowrap;
  1541. color: #5f646e;
  1542. -webkit-flex-shrink: 0;
  1543. -ms-flex: 0 0 auto;
  1544. -webkit-flex-shrink: 0;
  1545. flex-shrink: 0;
  1546. margin-left: 0.25rem;
  1547. display: -webkit-box;
  1548. display: -webkit-flex;
  1549. display: flex;
  1550. max-height: 1.4rem;
  1551. }
  1552. .list-block .smart-select .item-after {
  1553. max-width: 70%;
  1554. overflow: hidden;
  1555. text-overflow: ellipsis;
  1556. position: relative;
  1557. }
  1558. .list-block .item-link {
  1559. -webkit-transition-duration: 300ms;
  1560. transition-duration: 300ms;
  1561. display: block;
  1562. color: inherit;
  1563. }
  1564. .list-block .item-link .item-inner {
  1565. padding-right: 1.5rem;
  1566. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUM0QzFDNzMyREM0MTFFNUJDNTI4OTMzMEE0RjBENzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUM0QzFDNzQyREM0MTFFNUJDNTI4OTMzMEE0RjBENzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1QzRDMUM3MTJEQzQxMUU1QkM1Mjg5MzMwQTRGMEQ3MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1QzRDMUM3MjJEQzQxMUU1QkM1Mjg5MzMwQTRGMEQ3MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjs2Bb4AAAItSURBVHjazJhbK0RRGIb3DIOU/AG5kUTOgxmHceFGKf6BO+Vf+E8KKYcYg3FuMpNIDhFJXJAcp/GtvKumrzVs+zBrvfU2u689q6d3rb33+lYgl8tZvymZ3JOX7eQp8gT50fJA0Wj4z3tKbY5VR14hV5ObyWLkZ6sICtq4p4V8CjihevIWucoUQJFUmtUayTvkShMAL5DiGqs3IMlK3YBSgwrIZkBWmAAoIRMKyG2/IIMO/hMjbygepCS53ARAoQHyOqu1YbrLTADMAXJbASmSDOkGlOpTQHaQN72CdAuYBeQuq4cBWaIbUEJGC0Am3UIGPVoqMsk9Vu/CwxTQDSj0iSQPWD2C6Q7oBhT6AmRKAZkwAVDoowBkn+LdqQVQ6A2QhwrIuAmAEjKi2KrF/jPdfgIKveI7Pcfq/eSMCYBSD4pakymA0+RxVrsn15oAOEMeY7Vbcif5ys4ApT7CzZJHWO2G3I1fSyfgPHmY1a7x6bvT/ZpZUMBdOoHzI8El8pCiK+wq8CQXNcFlBdw51tyD00G9SnAVHV++zgDn6hzHiwTjCrgTTKvrQya3Ca5jA5CvY3IP+UlnTxJEb8zhjpDck1cL20mCAcBFWD2D2ovOvjiERojDpTGtnsL9N8EQegt+LJrC5vRN59lMORp0DrePNH2BswvYivXVzuoHSO7dz+2QHcAa6+eMOl87WHOffm8m7QCK7foog+tFi2mZACg3npPkRUxrtkitgvUtwAA5A3LWdzPizwAAAABJRU5ErkJggg==);
  1567. background-size: 0.7rem;
  1568. background-repeat: no-repeat;
  1569. background-position: 97% center;
  1570. background-position: -webkit-calc(100% - .5rem) center;
  1571. background-position: calc(100% - .5rem) center;
  1572. }
  1573. html:not(.watch-active-state) .list-block .item-link:active,
  1574. .list-block .item-link.active-state {
  1575. -webkit-transition-duration: 0ms;
  1576. transition-duration: 0ms;
  1577. background-color: #d9d9d9;
  1578. }
  1579. html:not(.watch-active-state) .list-block .item-link:active .item-inner:after,
  1580. .list-block .item-link.active-state .item-inner:after {
  1581. background-color: transparent;
  1582. }
  1583. .list-block .item-link.list-button {
  1584. padding: 0 0.75rem;
  1585. text-align: center;
  1586. color: #0894ec;
  1587. display: block;
  1588. line-height: 2.15rem;
  1589. }
  1590. .list-block .item-link.list-button:after {
  1591. content: '';
  1592. position: absolute;
  1593. left: 0;
  1594. bottom: 0;
  1595. right: auto;
  1596. top: auto;
  1597. height: 1px;
  1598. width: 100%;
  1599. background-color: #e7e7e7;
  1600. display: block;
  1601. z-index: 15;
  1602. -webkit-transform-origin: 50% 100%;
  1603. transform-origin: 50% 100%;
  1604. }
  1605. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1606. .list-block .item-link.list-button:after {
  1607. -webkit-transform: scaleY(0.5);
  1608. transform: scaleY(0.5);
  1609. }
  1610. }
  1611. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1612. .list-block .item-link.list-button:after {
  1613. -webkit-transform: scaleY(0.33);
  1614. transform: scaleY(0.33);
  1615. }
  1616. }
  1617. .list-block .item-content {
  1618. box-sizing: border-box;
  1619. padding-left: 0.75rem;
  1620. min-height: 2.2rem;
  1621. display: -webkit-box;
  1622. display: -webkit-flex;
  1623. display: flex;
  1624. -webkit-box-pack: justify;
  1625. -webkit-justify-content: space-between;
  1626. justify-content: space-between;
  1627. -webkit-box-align: center;
  1628. -webkit-align-items: center;
  1629. align-items: center;
  1630. }
  1631. .list-block .list-block-label {
  1632. margin: 0.5rem 0 1.75rem;
  1633. padding: 0 0.75rem;
  1634. font-size: 0.7rem;
  1635. color: #5f646e;
  1636. }
  1637. .list-block .item-subtitle {
  1638. font-size: 0.75rem;
  1639. position: relative;
  1640. overflow: hidden;
  1641. white-space: nowrap;
  1642. max-width: 100%;
  1643. text-overflow: ellipsis;
  1644. }
  1645. .list-block .item-text {
  1646. font-size: 0.75rem;
  1647. color: #5f646e;
  1648. line-height: 1.05rem;
  1649. position: relative;
  1650. overflow: hidden;
  1651. height: 2.1rem;
  1652. text-overflow: ellipsis;
  1653. -webkit-line-clamp: 2;
  1654. -webkit-box-orient: vertical;
  1655. display: -webkit-box;
  1656. }
  1657. .list-block.media-list .item-title {
  1658. font-weight: 500;
  1659. }
  1660. .list-block.media-list .item-inner {
  1661. display: block;
  1662. padding-top: 0.5rem;
  1663. padding-bottom: 0.45rem;
  1664. -webkit-align-self: stretch;
  1665. align-self: stretch;
  1666. }
  1667. .list-block.media-list .item-media {
  1668. padding-top: 0.45rem;
  1669. padding-bottom: 0.5rem;
  1670. }
  1671. .list-block.media-list .item-media img {
  1672. display: block;
  1673. }
  1674. .list-block.media-list .item-title-row {
  1675. display: -webkit-box;
  1676. display: -webkit-flex;
  1677. display: flex;
  1678. -webkit-box-pack: justify;
  1679. -webkit-justify-content: space-between;
  1680. justify-content: space-between;
  1681. }
  1682. .list-block .list-group ul:after,
  1683. .list-block .list-group ul:before {
  1684. z-index: 11;
  1685. }
  1686. .list-block .list-group + .list-group ul:before {
  1687. display: none;
  1688. }
  1689. .list-block .item-divider,
  1690. .list-block .list-group-title {
  1691. background: #F7F7F7;
  1692. margin-top: -1px;
  1693. padding: 0.2rem 0.75rem;
  1694. white-space: nowrap;
  1695. position: relative;
  1696. max-width: 100%;
  1697. text-overflow: ellipsis;
  1698. overflow: hidden;
  1699. color: #e7e7e7;
  1700. }
  1701. .list-block .item-divider:before,
  1702. .list-block .list-group-title:before {
  1703. content: '';
  1704. position: absolute;
  1705. left: 0;
  1706. top: 0;
  1707. bottom: auto;
  1708. right: auto;
  1709. height: 1px;
  1710. width: 100%;
  1711. background-color: #e7e7e7;
  1712. display: block;
  1713. z-index: 15;
  1714. -webkit-transform-origin: 50% 0%;
  1715. transform-origin: 50% 0%;
  1716. }
  1717. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1718. .list-block .item-divider:before,
  1719. .list-block .list-group-title:before {
  1720. -webkit-transform: scaleY(0.5);
  1721. transform: scaleY(0.5);
  1722. }
  1723. }
  1724. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1725. .list-block .item-divider:before,
  1726. .list-block .list-group-title:before {
  1727. -webkit-transform: scaleY(0.33);
  1728. transform: scaleY(0.33);
  1729. }
  1730. }
  1731. .list-block .list-group-title {
  1732. position: relative;
  1733. position: -webkit-sticky;
  1734. position: -moz-sticky;
  1735. position: sticky;
  1736. top: 0;
  1737. z-index: 20;
  1738. margin-top: 0;
  1739. }
  1740. .list-block .list-group-title:before {
  1741. display: none;
  1742. }
  1743. .list-block li:last-child .list-button:after {
  1744. display: none;
  1745. }
  1746. .list-block li:last-child .item-inner:after,
  1747. .list-block li:last-child li:last-child .item-inner:after {
  1748. display: none;
  1749. }
  1750. .list-block li li:last-child .item-inner:after,
  1751. .list-block li:last-child li .item-inner:after {
  1752. content: '';
  1753. position: absolute;
  1754. left: 0;
  1755. bottom: 0;
  1756. right: auto;
  1757. top: auto;
  1758. height: 1px;
  1759. width: 100%;
  1760. background-color: #e7e7e7;
  1761. display: block;
  1762. z-index: 15;
  1763. -webkit-transform-origin: 50% 100%;
  1764. transform-origin: 50% 100%;
  1765. }
  1766. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1767. .list-block li li:last-child .item-inner:after,
  1768. .list-block li:last-child li .item-inner:after {
  1769. -webkit-transform: scaleY(0.5);
  1770. transform: scaleY(0.5);
  1771. }
  1772. }
  1773. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1774. .list-block li li:last-child .item-inner:after,
  1775. .list-block li:last-child li .item-inner:after {
  1776. -webkit-transform: scaleY(0.33);
  1777. transform: scaleY(0.33);
  1778. }
  1779. }
  1780. /* === Forms === */
  1781. .list-block input[type="text"],
  1782. .list-block input[type="password"],
  1783. .list-block input[type="search"],
  1784. .list-block input[type="email"],
  1785. .list-block input[type="tel"],
  1786. .list-block input[type="url"],
  1787. .list-block input[type="date"],
  1788. .list-block input[type="datetime-local"],
  1789. .list-block input[type="time"],
  1790. .list-block input[type="number"],
  1791. .list-block select,
  1792. .list-block textarea {
  1793. -webkit-appearance: none;
  1794. -moz-appearance: none;
  1795. -ms-appearance: none;
  1796. appearance: none;
  1797. box-sizing: border-box;
  1798. border: none;
  1799. background: none;
  1800. border-radius: 0 0 0 0;
  1801. box-shadow: none;
  1802. display: block;
  1803. padding: 0 0 0 0.25rem;
  1804. margin: 0;
  1805. width: 100%;
  1806. height: 2.15rem;
  1807. color: #3d4145;
  1808. font-size: 0.85rem;
  1809. font-family: inherit;
  1810. }
  1811. .list-block input[type="date"],
  1812. .list-block input[type="datetime-local"] {
  1813. line-height: 2.2rem;
  1814. }
  1815. .list-block select {
  1816. -webkit-appearance: none;
  1817. -moz-appearance: none;
  1818. -ms-appearance: none;
  1819. appearance: none;
  1820. }
  1821. .list-block .label {
  1822. vertical-align: top;
  1823. }
  1824. .list-block textarea {
  1825. height: 5rem;
  1826. resize: none;
  1827. line-height: 1.4;
  1828. padding-top: 0.4rem;
  1829. padding-bottom: 0.35rem;
  1830. }
  1831. .label-switch {
  1832. display: inline-block;
  1833. vertical-align: middle;
  1834. width: 2.6rem;
  1835. border-radius: 0.8rem;
  1836. box-sizing: border-box;
  1837. height: 1.6rem;
  1838. position: relative;
  1839. cursor: pointer;
  1840. -webkit-align-self: center;
  1841. align-self: center;
  1842. }
  1843. .label-switch .checkbox {
  1844. width: 2.6rem;
  1845. border-radius: 0.8rem;
  1846. box-sizing: border-box;
  1847. height: 1.6rem;
  1848. background: #e5e5e5;
  1849. z-index: 0;
  1850. margin: 0;
  1851. padding: 0;
  1852. -webkit-appearance: none;
  1853. -moz-appearance: none;
  1854. -ms-appearance: none;
  1855. appearance: none;
  1856. border: none;
  1857. cursor: pointer;
  1858. position: relative;
  1859. -webkit-transition-duration: 300ms;
  1860. transition-duration: 300ms;
  1861. }
  1862. .label-switch .checkbox:before {
  1863. content: ' ';
  1864. position: absolute;
  1865. left: 0.1rem;
  1866. top: 0.1rem;
  1867. width: 2.4rem;
  1868. border-radius: 0.8rem;
  1869. box-sizing: border-box;
  1870. height: 1.4rem;
  1871. background: #fff;
  1872. z-index: 1;
  1873. -webkit-transition-duration: 300ms;
  1874. transition-duration: 300ms;
  1875. -webkit-transform: scale(1);
  1876. transform: scale(1);
  1877. }
  1878. .label-switch .checkbox:after {
  1879. content: ' ';
  1880. height: 1.4rem;
  1881. width: 1.4rem;
  1882. border-radius: 1.4rem;
  1883. background: #fff;
  1884. position: absolute;
  1885. z-index: 2;
  1886. top: 0.1rem;
  1887. left: 0.1rem;
  1888. box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.4);
  1889. -webkit-transform: translateX(0px);
  1890. transform: translateX(0px);
  1891. -webkit-transition-duration: 300ms;
  1892. transition-duration: 300ms;
  1893. }
  1894. .label-switch input[type="checkbox"] {
  1895. display: none;
  1896. }
  1897. .label-switch input[type="checkbox"]:checked + .checkbox {
  1898. background: #4cd964;
  1899. }
  1900. .label-switch input[type="checkbox"]:checked + .checkbox:before {
  1901. -webkit-transform: scale(0);
  1902. transform: scale(0);
  1903. }
  1904. .label-switch input[type="checkbox"]:checked + .checkbox:after {
  1905. -webkit-transform: translateX(1.1rem);
  1906. transform: translateX(1.1rem);
  1907. }
  1908. html.android .label-switch input[type="checkbox"] + .checkbox {
  1909. -webkit-transition-duration: 0;
  1910. transition-duration: 0;
  1911. }
  1912. html.android .label-switch input[type="checkbox"] + .checkbox:after,
  1913. html.android .label-switch input[type="checkbox"] + .checkbox:before {
  1914. -webkit-transition-duration: 0;
  1915. transition-duration: 0;
  1916. }
  1917. .range-slider {
  1918. width: 100%;
  1919. position: relative;
  1920. overflow: hidden;
  1921. padding-left: 0.15rem;
  1922. padding-right: 0.15rem;
  1923. margin-left: -1px;
  1924. -webkit-align-self: center;
  1925. align-self: center;
  1926. }
  1927. .range-slider input[type="range"] {
  1928. position: relative;
  1929. height: 1.4rem;
  1930. width: 100%;
  1931. margin: 0.2rem 0 0.25rem 0;
  1932. -webkit-appearance: none;
  1933. -moz-appearance: none;
  1934. -ms-appearance: none;
  1935. appearance: none;
  1936. background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
  1937. background: -webkit-linear-gradient(left, #b7b8b7 0, #b7b8b7 100%);
  1938. background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
  1939. background-position: center;
  1940. background-size: 100% 0.1rem;
  1941. background-repeat: no-repeat;
  1942. outline: 0;
  1943. }
  1944. .range-slider input[type="range"]:after {
  1945. height: 0.1rem;
  1946. background: #fff;
  1947. content: ' ';
  1948. width: 0.25rem;
  1949. top: 50%;
  1950. margin-top: -1px;
  1951. left: -0.25rem;
  1952. z-index: 1;
  1953. position: absolute;
  1954. }
  1955. .range-slider input[type="range"]::-webkit-slider-thumb {
  1956. -webkit-appearance: none;
  1957. -moz-appearance: none;
  1958. -ms-appearance: none;
  1959. appearance: none;
  1960. border: none;
  1961. height: 1.4rem;
  1962. width: 1.4rem;
  1963. position: relative;
  1964. background: none;
  1965. }
  1966. .range-slider input[type="range"]::-webkit-slider-thumb:after {
  1967. height: 1.4rem;
  1968. width: 1.4rem;
  1969. border-radius: 1.4rem;
  1970. background: #fff;
  1971. z-index: 10;
  1972. box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4);
  1973. position: absolute;
  1974. left: 0;
  1975. top: 0;
  1976. content: ' ';
  1977. }
  1978. .range-slider input[type="range"]::-webkit-slider-thumb:before {
  1979. position: absolute;
  1980. top: 50%;
  1981. right: 100%;
  1982. width: 100rem;
  1983. height: 0.1rem;
  1984. margin-top: -1px;
  1985. z-index: 1;
  1986. background: #0894ec;
  1987. content: ' ';
  1988. }
  1989. label.label-checkbox {
  1990. cursor: pointer;
  1991. }
  1992. label.label-checkbox i.icon-form-checkbox {
  1993. width: 1.1rem;
  1994. height: 1.1rem;
  1995. position: relative;
  1996. border-radius: 1.1rem;
  1997. border: 1px solid #c7c7cc;
  1998. box-sizing: border-box;
  1999. }
  2000. label.label-checkbox i.icon-form-checkbox:after {
  2001. content: ' ';
  2002. position: absolute;
  2003. left: 50%;
  2004. margin-left: -0.3rem;
  2005. top: 50%;
  2006. margin-top: -0.2rem;
  2007. width: 0.6rem;
  2008. height: 0.45rem;
  2009. }
  2010. label.label-checkbox input[type="checkbox"],
  2011. label.label-checkbox input[type="radio"] {
  2012. display: none;
  2013. }
  2014. label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
  2015. label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
  2016. border: none;
  2017. background-color: #0894ec;
  2018. }
  2019. label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox:after,
  2020. label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox:after {
  2021. background: no-repeat center;
  2022. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");
  2023. background-size: 0.6rem 0.45rem;
  2024. }
  2025. label.label-checkbox {
  2026. -webkit-transition-duration: 300ms;
  2027. transition-duration: 300ms;
  2028. }
  2029. html:not(.watch-active-state) label.label-checkbox:active,
  2030. label.label-checkbox.active-state {
  2031. -webkit-transition: 0ms;
  2032. transition: 0ms;
  2033. background-color: #d9d9d9;
  2034. }
  2035. html:not(.watch-active-state) label.label-checkbox:active .item-inner:after,
  2036. label.label-checkbox.active-state .item-inner:after {
  2037. background-color: transparent;
  2038. }
  2039. .smart-select select {
  2040. display: none;
  2041. }
  2042. /* === Search Bar === */
  2043. .searchbar {
  2044. padding: 8px 0;
  2045. overflow: hidden;
  2046. height: 2.2rem;
  2047. -webkit-box-align: center;
  2048. -webkit-align-items: center;
  2049. align-items: center;
  2050. }
  2051. .searchbar .searchbar-cancel {
  2052. margin-right: -3rem;
  2053. width: 2.2rem;
  2054. float: right;
  2055. height: 1.4rem;
  2056. line-height: 1.4rem;
  2057. text-align: center;
  2058. -webkit-transition: all .3s;
  2059. transition: all .3s;
  2060. opacity: 0;
  2061. -webkit-transform: translate3d(0, 0, 0);
  2062. transform: translate3d(0, 0, 0);
  2063. }
  2064. .searchbar .search-input {
  2065. -webkit-transform: translate3d(0, 0, 0);
  2066. transform: translate3d(0, 0, 0);
  2067. margin-right: 0;
  2068. -webkit-transition: all .3s;
  2069. transition: all .3s;
  2070. }
  2071. .searchbar .search-input input {
  2072. margin: 0;
  2073. height: 1.4rem;
  2074. }
  2075. .searchbar.searchbar-active .searchbar-cancel {
  2076. margin-right: 0;
  2077. opacity: 1;
  2078. }
  2079. .searchbar.searchbar-active .searchbar-cancel + .search-input {
  2080. margin-right: 2.5rem;
  2081. }
  2082. .search-input {
  2083. position: relative;
  2084. }
  2085. .search-input input {
  2086. box-sizing: border-box;
  2087. width: 100%;
  2088. height: 1.4rem;
  2089. display: block;
  2090. border: none;
  2091. -webkit-appearance: none;
  2092. -moz-appearance: none;
  2093. appearance: none;
  2094. border-radius: 0.25rem;
  2095. font-family: inherit;
  2096. color: #3d4145;
  2097. font-size: 0.7rem;
  2098. font-weight: normal;
  2099. padding: 0 0.5rem;
  2100. background-color: #fff;
  2101. border: 1px solid #b4b4b4;
  2102. }
  2103. .search-input input::-webkit-input-placeholder {
  2104. color: #ccc;
  2105. opacity: 1;
  2106. }
  2107. .search-input .icon {
  2108. position: absolute;
  2109. font-size: 0.9rem;
  2110. color: #b4b4b4;
  2111. top: 50%;
  2112. left: 0.3rem;
  2113. -webkit-transform: translate3D(0, -50%, 0);
  2114. transform: translate3D(0, -50%, 0);
  2115. }
  2116. .search-input label + input {
  2117. padding-left: 1.4rem;
  2118. }
  2119. .bar .searchbar {
  2120. margin: 0 -0.5rem;
  2121. padding: 0.4rem 0.5rem;
  2122. background: rgba(0, 0, 0, 0.1);
  2123. }
  2124. .bar .searchbar .search-input input {
  2125. border: 0;
  2126. }
  2127. .bar .searchbar .searchbar-cancel {
  2128. color: #5f646e;
  2129. }
  2130. .button {
  2131. border: 1px solid #0894ec;
  2132. color: #0894ec;
  2133. text-decoration: none;
  2134. text-align: center;
  2135. display: block;
  2136. border-radius: 0.25rem;
  2137. line-height: 1.25rem;
  2138. box-sizing: border-box;
  2139. -webkit-appearance: none;
  2140. -moz-appearance: none;
  2141. -ms-appearance: none;
  2142. appearance: none;
  2143. background: none;
  2144. padding: 0 0.5rem;
  2145. margin: 0;
  2146. height: 1.35rem;
  2147. white-space: nowrap;
  2148. position: relative;
  2149. text-overflow: ellipsis;
  2150. font-size: 0.7rem;
  2151. font-family: inherit;
  2152. cursor: pointer;
  2153. }
  2154. input[type="submit"].button,
  2155. input[type="button"].button {
  2156. width: 100%;
  2157. }
  2158. .button:active {
  2159. color: #0a8ddf;
  2160. border-color: #0a8ddf;
  2161. }
  2162. .button.button-round {
  2163. border-radius: 1.25rem;
  2164. }
  2165. .button.active,
  2166. .button.active:active {
  2167. color: #0a8ddf;
  2168. border-color: #0a8ddf;
  2169. }
  2170. .button.button-big {
  2171. font-size: 0.85rem;
  2172. height: 2.4rem;
  2173. line-height: 2.3rem;
  2174. }
  2175. .button.button-fill {
  2176. color: #fff;
  2177. background: #0894ec;
  2178. border: none;
  2179. line-height: 1.35rem;
  2180. }
  2181. .button.button-fill.active,
  2182. .button.button-fill:active {
  2183. background: #0a8ddf;
  2184. }
  2185. .button.button-fill.button-big {
  2186. line-height: 2.4rem;
  2187. }
  2188. .button .button-link {
  2189. padding-top: 0.3rem;
  2190. padding-bottom: 0.3rem;
  2191. color: #0894ec;
  2192. background-color: transparent;
  2193. border: 0;
  2194. }
  2195. .button i.icon:first-child {
  2196. margin-right: 0.5rem;
  2197. }
  2198. .button i.icon:last-child {
  2199. margin-left: 0.5rem;
  2200. }
  2201. .button i.icon:first-child:last-child {
  2202. margin-left: 0;
  2203. margin-right: 0;
  2204. }
  2205. .button-light {
  2206. border-color: #ccc;
  2207. color: #ccc;
  2208. color: #5f646e;
  2209. }
  2210. .button-light:active {
  2211. border-color: #0a8ddf;
  2212. color: #0a8ddf;
  2213. }
  2214. .button-light.button-fill {
  2215. color: white;
  2216. background-color: #ccc;
  2217. }
  2218. .button-light.button-fill:active {
  2219. background-color: #0a8ddf;
  2220. }
  2221. .button-dark {
  2222. border-color: #6e727b;
  2223. color: #6e727b;
  2224. color: #5f646e;
  2225. }
  2226. .button-dark:active {
  2227. border-color: #0a8ddf;
  2228. color: #0a8ddf;
  2229. }
  2230. .button-dark.button-fill {
  2231. color: white;
  2232. background-color: #6e727b;
  2233. }
  2234. .button-dark.button-fill:active {
  2235. background-color: #0a8ddf;
  2236. }
  2237. .button-success {
  2238. border-color: #4cd964;
  2239. color: #4cd964;
  2240. }
  2241. .button-success:active {
  2242. border-color: #2ac845;
  2243. color: #2ac845;
  2244. }
  2245. .button-success.button-fill {
  2246. color: white;
  2247. background-color: #4cd964;
  2248. }
  2249. .button-success.button-fill:active {
  2250. background-color: #2ac845;
  2251. }
  2252. .button-danger {
  2253. border-color: #f6383a;
  2254. color: #f6383a;
  2255. }
  2256. .button-danger:active {
  2257. border-color: #f00b0d;
  2258. color: #f00b0d;
  2259. }
  2260. .button-danger.button-fill {
  2261. color: white;
  2262. background-color: #f6383a;
  2263. }
  2264. .button-danger.button-fill:active {
  2265. background-color: #f00b0d;
  2266. }
  2267. .button-warning {
  2268. border-color: #f60;
  2269. color: #f60;
  2270. }
  2271. .button-warning:active {
  2272. border-color: #cc5200;
  2273. color: #cc5200;
  2274. }
  2275. .button-warning.button-fill {
  2276. color: white;
  2277. background-color: #f60;
  2278. }
  2279. .button-warning.button-fill:active {
  2280. background-color: #cc5200;
  2281. }
  2282. .button.disabled,
  2283. .button.button-primary.disabled,
  2284. .button.button-success.disabled,
  2285. .button.button-danger.disabled,
  2286. .button.button-warning.disabled {
  2287. border-color: #c8c9cb;
  2288. color: #c8c9cb;
  2289. cursor: not-allowed;
  2290. }
  2291. .button.disabled:active,
  2292. .button.button-primary.disabled:active,
  2293. .button.button-success.disabled:active,
  2294. .button.button-danger.disabled:active,
  2295. .button.button-warning.disabled:active {
  2296. border-color: #c8c9cb;
  2297. color: #c8c9cb;
  2298. }
  2299. .button.disabled.button-fill,
  2300. .button.button-primary.disabled.button-fill,
  2301. .button.button-success.disabled.button-fill,
  2302. .button.button-danger.disabled.button-fill,
  2303. .button.button-warning.disabled.button-fill {
  2304. color: white;
  2305. background-color: #c8c9cb;
  2306. }
  2307. .button.disabled.button-fill:active,
  2308. .button.button-primary.disabled.button-fill:active,
  2309. .button.button-success.disabled.button-fill:active,
  2310. .button.button-danger.disabled.button-fill:active,
  2311. .button.button-warning.disabled.button-fill:active {
  2312. background-color: #c8c9cb;
  2313. }
  2314. .buttons-row,
  2315. .buttons-tab {
  2316. -webkit-align-self: center;
  2317. align-self: center;
  2318. display: -webkit-box;
  2319. display: -webkit-flex;
  2320. display: flex;
  2321. -webkit-box-lines: single;
  2322. -moz-box-lines: single;
  2323. -webkit-flex-wrap: nowrap;
  2324. flex-wrap: nowrap;
  2325. }
  2326. .buttons-row .button {
  2327. border-radius: 0 0 0 0;
  2328. margin-left: -1px;
  2329. width: 100%;
  2330. -webkit-box-flex: 1;
  2331. -ms-flex: 1;
  2332. border-color: #0894ec;
  2333. color: #0894ec;
  2334. }
  2335. .buttons-row .button.active {
  2336. background-color: #0894ec;
  2337. color: white;
  2338. z-index: 90;
  2339. }
  2340. .buttons-row .button:first-child {
  2341. border-radius: 0.25rem 0 0 0.25rem;
  2342. margin-left: 0;
  2343. border-left-width: 1px;
  2344. border-left-style: solid;
  2345. }
  2346. .buttons-row .button:last-child {
  2347. border-radius: 0 0.25rem 0.25rem 0;
  2348. }
  2349. .buttons-row .button.button-round:first-child {
  2350. border-radius: 1.35rem 0 0 1.35rem;
  2351. }
  2352. .buttons-row .button.button-round:last-child {
  2353. border-radius: 0 1.35rem 1.35rem 0;
  2354. }
  2355. .buttons-tab {
  2356. background: white;
  2357. position: relative;
  2358. }
  2359. .buttons-tab:after {
  2360. content: '';
  2361. position: absolute;
  2362. left: 0;
  2363. bottom: 0;
  2364. right: auto;
  2365. top: auto;
  2366. height: 1px;
  2367. width: 100%;
  2368. background-color: #d0d0d0;
  2369. display: block;
  2370. z-index: 15;
  2371. -webkit-transform-origin: 50% 100%;
  2372. transform-origin: 50% 100%;
  2373. }
  2374. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  2375. .buttons-tab:after {
  2376. -webkit-transform: scaleY(0.5);
  2377. transform: scaleY(0.5);
  2378. }
  2379. }
  2380. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  2381. .buttons-tab:after {
  2382. -webkit-transform: scaleY(0.33);
  2383. transform: scaleY(0.33);
  2384. }
  2385. }
  2386. .buttons-tab .button {
  2387. color: #5f646e;
  2388. font-size: 0.8rem;
  2389. width: 100%;
  2390. height: 2rem;
  2391. line-height: 2rem;
  2392. -webkit-box-flex: 1;
  2393. -ms-flex: 1;
  2394. border: 0;
  2395. border-bottom: 2px solid transparent;
  2396. border-radius: 0;
  2397. }
  2398. .buttons-tab .button.active {
  2399. color: #0894ec;
  2400. border-color: #0894ec;
  2401. z-index: 100;
  2402. }
  2403. .buttons-fixed {
  2404. position: fixed;
  2405. z-index: 99;
  2406. width: 100%;
  2407. }
  2408. /* === Tabs === */
  2409. .tabs .tab {
  2410. display: none;
  2411. }
  2412. .tabs .tab.active {
  2413. display: block;
  2414. }
  2415. .tabs-animated-wrap {
  2416. position: relative;
  2417. width: 100%;
  2418. overflow: hidden;
  2419. height: 100%;
  2420. }
  2421. .tabs-animated-wrap > .tabs {
  2422. display: -webkit-box;
  2423. display: -webkit-flex;
  2424. display: flex;
  2425. height: 100%;
  2426. -webkit-transition: 300ms;
  2427. transition: 300ms;
  2428. }
  2429. .tabs-animated-wrap > .tabs > .tab {
  2430. width: 100%;
  2431. display: block;
  2432. -webkit-flex-shrink: 0;
  2433. -ms-flex: 0 0 auto;
  2434. -webkit-flex-shrink: 0;
  2435. flex-shrink: 0;
  2436. }
  2437. /* === Pages === */
  2438. .page,
  2439. .page-group {
  2440. box-sizing: border-box;
  2441. position: absolute;
  2442. left: 0;
  2443. top: 0;
  2444. width: 100%;
  2445. height: 100%;
  2446. background: #efeff4;
  2447. display: none;
  2448. overflow: hidden;
  2449. }
  2450. .page.page-current,
  2451. .page-group.page-current,
  2452. .page.page-visible,
  2453. .page-group.page-visible,
  2454. .page.page-from-center-to-left,
  2455. .page-group.page-from-center-to-left,
  2456. .page.page-from-center-to-right,
  2457. .page-group.page-from-center-to-right,
  2458. .page.page-from-right-to-center,
  2459. .page-group.page-from-right-to-center,
  2460. .page.page-from-left-to-center,
  2461. .page-group.page-from-left-to-center {
  2462. display: block;
  2463. }
  2464. .page.page-current,
  2465. .page-group.page-current {
  2466. overflow: hidden;
  2467. }
  2468. .page-group {
  2469. display: block;
  2470. }
  2471. .page-transitioning,
  2472. .page-transitioning .swipeback-page-shadow {
  2473. -webkit-transition: 400ms;
  2474. transition: 400ms;
  2475. }
  2476. .page-from-right-to-center {
  2477. -webkit-animation: pageFromRightToCenter 400ms forwards;
  2478. animation: pageFromRightToCenter 400ms forwards;
  2479. z-index: 2002;
  2480. }
  2481. .page-from-center-to-right {
  2482. -webkit-animation: pageFromCenterToRight 400ms forwards;
  2483. animation: pageFromCenterToRight 400ms forwards;
  2484. z-index: 2002;
  2485. }
  2486. @-webkit-keyframes pageFromRightToCenter {
  2487. from {
  2488. -webkit-transform: translate3d(100%, 0, 0);
  2489. transform: translate3d(100%, 0, 0);
  2490. opacity: .9;
  2491. }
  2492. to {
  2493. -webkit-transform: translate3d(0, 0, 0);
  2494. transform: translate3d(0, 0, 0);
  2495. opacity: 1;
  2496. }
  2497. }
  2498. @keyframes pageFromRightToCenter {
  2499. from {
  2500. -webkit-transform: translate3d(100%, 0, 0);
  2501. transform: translate3d(100%, 0, 0);
  2502. opacity: .9;
  2503. }
  2504. to {
  2505. -webkit-transform: translate3d(0, 0, 0);
  2506. transform: translate3d(0, 0, 0);
  2507. opacity: 1;
  2508. }
  2509. }
  2510. @-webkit-keyframes pageFromCenterToRight {
  2511. from {
  2512. -webkit-transform: translate3d(0, 0, 0);
  2513. transform: translate3d(0, 0, 0);
  2514. opacity: 1;
  2515. }
  2516. to {
  2517. -webkit-transform: translate3d(100%, 0, 0);
  2518. transform: translate3d(100%, 0, 0);
  2519. opacity: .9;
  2520. }
  2521. }
  2522. @keyframes pageFromCenterToRight {
  2523. from {
  2524. -webkit-transform: translate3d(0, 0, 0);
  2525. transform: translate3d(0, 0, 0);
  2526. opacity: 1;
  2527. }
  2528. to {
  2529. -webkit-transform: translate3d(100%, 0, 0);
  2530. transform: translate3d(100%, 0, 0);
  2531. opacity: .9;
  2532. }
  2533. }
  2534. .page-from-center-to-left {
  2535. -webkit-animation: pageFromCenterToLeft 400ms forwards;
  2536. animation: pageFromCenterToLeft 400ms forwards;
  2537. }
  2538. .page-from-left-to-center {
  2539. -webkit-animation: pageFromLeftToCenter 400ms forwards;
  2540. animation: pageFromLeftToCenter 400ms forwards;
  2541. }
  2542. @-webkit-keyframes pageFromCenterToLeft {
  2543. from {
  2544. opacity: 1;
  2545. -webkit-transform: translate3d(0, 0, 0);
  2546. transform: translate3d(0, 0, 0);
  2547. }
  2548. to {
  2549. opacity: 0.5;
  2550. -webkit-transform: translate3d(-20%, 0, 0);
  2551. transform: translate3d(-20%, 0, 0);
  2552. }
  2553. }
  2554. @keyframes pageFromCenterToLeft {
  2555. from {
  2556. opacity: 1;
  2557. -webkit-transform: translate3d(0, 0, 0);
  2558. transform: translate3d(0, 0, 0);
  2559. }
  2560. to {
  2561. opacity: 0.5;
  2562. -webkit-transform: translate3d(-20%, 0, 0);
  2563. transform: translate3d(-20%, 0, 0);
  2564. }
  2565. }
  2566. @-webkit-keyframes pageFromLeftToCenter {
  2567. from {
  2568. opacity: .5;
  2569. -webkit-transform: translate3d(-20%, 0, 0);
  2570. transform: translate3d(-20%, 0, 0);
  2571. }
  2572. to {
  2573. opacity: 1;
  2574. -webkit-transform: translate3d(0, 0, 0);
  2575. transform: translate3d(0, 0, 0);
  2576. }
  2577. }
  2578. @keyframes pageFromLeftToCenter {
  2579. from {
  2580. opacity: .5;
  2581. -webkit-transform: translate3d(-20%, 0, 0);
  2582. transform: translate3d(-20%, 0, 0);
  2583. }
  2584. to {
  2585. opacity: 1;
  2586. -webkit-transform: translate3d(0, 0, 0);
  2587. transform: translate3d(0, 0, 0);
  2588. }
  2589. }
  2590. .content-inner {
  2591. box-sizing: border-box;
  2592. border-top: 1px solid transparent;
  2593. margin-top: -1px;
  2594. padding-bottom: 0.5rem;
  2595. }
  2596. .javascript-scroll {
  2597. overflow: hidden;
  2598. }
  2599. /* === Pull To Refresh === */
  2600. .pull-to-refresh-layer {
  2601. position: relative;
  2602. left: 0;
  2603. top: 0;
  2604. width: 100%;
  2605. height: 2.2rem;
  2606. }
  2607. .pull-to-refresh-layer .preloader {
  2608. position: absolute;
  2609. left: 50%;
  2610. top: 50%;
  2611. margin-left: -0.5rem;
  2612. margin-top: -0.5rem;
  2613. visibility: hidden;
  2614. }
  2615. .pull-to-refresh-layer .pull-to-refresh-arrow {
  2616. width: 0.65rem;
  2617. height: 1rem;
  2618. position: absolute;
  2619. left: 50%;
  2620. top: 50%;
  2621. margin-left: -0.15rem;
  2622. margin-top: -0.5rem;
  2623. background: no-repeat center;
  2624. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E");
  2625. background-size: 0.65rem 1rem;
  2626. z-index: 10;
  2627. -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
  2628. transform: rotate(0deg) translate3d(0, 0, 0);
  2629. -webkit-transition-duration: 300ms;
  2630. transition-duration: 300ms;
  2631. }
  2632. .pull-to-refresh-content {
  2633. -webkit-transform: translate3d(0, 0, 0);
  2634. transform: translate3d(0, 0, 0);
  2635. }
  2636. .pull-to-refresh-content.transitioning,
  2637. .pull-to-refresh-content.refreshing {
  2638. -webkit-transition: -webkit-transform 400ms;
  2639. transition: transform 400ms;
  2640. }
  2641. .pull-to-refresh-content:not(.refreshing) .pull-to-refresh-layer .preloader {
  2642. -webkit-animation: none;
  2643. animation: none;
  2644. }
  2645. .pull-to-refresh-content.refreshing .pull-to-refresh-arrow {
  2646. visibility: hidden;
  2647. -webkit-transition-duration: 0ms;
  2648. transition-duration: 0ms;
  2649. }
  2650. .pull-to-refresh-content.refreshing .preloader {
  2651. visibility: visible;
  2652. }
  2653. .pull-to-refresh-content.pull-up .pull-to-refresh-arrow {
  2654. -webkit-transform: rotate(180deg) translate3d(0, 0, 0);
  2655. transform: rotate(180deg) translate3d(0, 0, 0);
  2656. }
  2657. .pull-to-refresh-content {
  2658. top: -2.2rem;
  2659. }
  2660. .pull-to-refresh-content.refreshing {
  2661. -webkit-transform: translate3d(0, 2.2rem, 0);
  2662. transform: translate3d(0, 2.2rem, 0);
  2663. }
  2664. .bar-nav ~ .pull-to-refresh-content,
  2665. .bar-footer ~ .pull-to-refresh-content,
  2666. .bar-tab ~ .pull-to-refresh-content {
  2667. top: 0;
  2668. }
  2669. .bar-nav ~ .pull-to-refresh-content.refreshing,
  2670. .bar-footer ~ .pull-to-refresh-content.refreshing,
  2671. .bar-tab ~ .pull-to-refresh-content.refreshing {
  2672. -webkit-transform: translate3d(0, 2.2rem, 0);
  2673. transform: translate3d(0, 2.2rem, 0);
  2674. }
  2675. .bar-header-secondary ~ .pull-to-refresh-content,
  2676. .bar-footer-secondary ~ .pull-to-refresh-content {
  2677. top: 2.2rem;
  2678. }
  2679. .infinite-scroll-preloader {
  2680. margin: 0.5rem;
  2681. text-align: center;
  2682. }
  2683. .infinite-scroll-preloader .preloader {
  2684. width: 1.5rem;
  2685. height: 1.5rem;
  2686. }
  2687. .infinite-scroll-top .infinite-scroll-preloader {
  2688. position: absolute;
  2689. width: 100%;
  2690. top: 0;
  2691. margin: 0;
  2692. }
  2693. /* === Modals === */
  2694. .modal-overlay,
  2695. .preloader-indicator-overlay,
  2696. .popup-overlay {
  2697. position: absolute;
  2698. left: 0;
  2699. top: 0;
  2700. width: 100%;
  2701. height: 100%;
  2702. background: rgba(0, 0, 0, 0.4);
  2703. z-index: 10600;
  2704. visibility: hidden;
  2705. opacity: 0;
  2706. -webkit-transition-duration: 400ms;
  2707. transition-duration: 400ms;
  2708. }
  2709. .modal-overlay.modal-overlay-visible,
  2710. .preloader-indicator-overlay.modal-overlay-visible,
  2711. .popup-overlay.modal-overlay-visible {
  2712. visibility: visible;
  2713. opacity: 1;
  2714. }
  2715. .popup-overlay {
  2716. z-index: 10200;
  2717. }
  2718. .modal {
  2719. width: 13.5rem;
  2720. position: absolute;
  2721. z-index: 11000;
  2722. left: 50%;
  2723. margin-left: -6.75rem;
  2724. margin-top: 0;
  2725. top: 50%;
  2726. text-align: center;
  2727. border-radius: 0.35rem;
  2728. opacity: 0;
  2729. -webkit-transform: translate3d(0, 0, 0) scale(1.185);
  2730. transform: translate3d(0, 0, 0) scale(1.185);
  2731. -webkit-transition-property: -webkit-transform, opacity;
  2732. transition-property: transform, opacity;
  2733. color: #3d4145;
  2734. display: none;
  2735. }
  2736. .modal.modal-in {
  2737. opacity: 1;
  2738. -webkit-transition-duration: 400ms;
  2739. transition-duration: 400ms;
  2740. -webkit-transform: translate3d(0, 0, 0) scale(1);
  2741. transform: translate3d(0, 0, 0) scale(1);
  2742. }
  2743. .modal.modal-out {
  2744. opacity: 0;
  2745. z-index: 10999;
  2746. -webkit-transition-duration: 400ms;
  2747. transition-duration: 400ms;
  2748. -webkit-transform: translate3d(0, 0, 0) scale(0.815);
  2749. transform: translate3d(0, 0, 0) scale(0.815);
  2750. }
  2751. .modal-inner {
  2752. padding: 0.75rem;
  2753. border-radius: 0.35rem 0.35rem 0 0;
  2754. position: relative;
  2755. background: #e8e8e8;
  2756. }
  2757. .modal-inner:after {
  2758. content: '';
  2759. position: absolute;
  2760. left: 0;
  2761. bottom: 0;
  2762. right: auto;
  2763. top: auto;
  2764. height: 1px;
  2765. width: 100%;
  2766. background-color: #b5b5b5;
  2767. display: block;
  2768. z-index: 15;
  2769. -webkit-transform-origin: 50% 100%;
  2770. transform-origin: 50% 100%;
  2771. }
  2772. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  2773. .modal-inner:after {
  2774. -webkit-transform: scaleY(0.5);
  2775. transform: scaleY(0.5);
  2776. }
  2777. }
  2778. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  2779. .modal-inner:after {
  2780. -webkit-transform: scaleY(0.33);
  2781. transform: scaleY(0.33);
  2782. }
  2783. }
  2784. .modal-title {
  2785. font-weight: 500;
  2786. font-size: 0.9rem;
  2787. text-align: center;
  2788. }
  2789. .modal-title + .modal-text {
  2790. margin-top: 0.25rem;
  2791. }
  2792. .modal-buttons {
  2793. height: 2.2rem;
  2794. overflow: hidden;
  2795. display: -webkit-box;
  2796. display: -webkit-flex;
  2797. display: flex;
  2798. -webkit-box-pack: center;
  2799. -webkit-justify-content: center;
  2800. justify-content: center;
  2801. }
  2802. .modal-buttons.modal-buttons-vertical {
  2803. display: block;
  2804. height: auto;
  2805. }
  2806. .modal-button {
  2807. width: 100%;
  2808. padding: 0 0.25rem;
  2809. height: 2.2rem;
  2810. font-size: 0.85rem;
  2811. line-height: 2.2rem;
  2812. text-align: center;
  2813. color: #0894ec;
  2814. background: #e8e8e8;
  2815. display: block;
  2816. position: relative;
  2817. white-space: nowrap;
  2818. text-overflow: ellipsis;
  2819. overflow: hidden;
  2820. cursor: pointer;
  2821. box-sizing: border-box;
  2822. -webkit-box-flex: 1;
  2823. -ms-flex: 1;
  2824. }
  2825. .modal-button:after {
  2826. content: '';
  2827. position: absolute;
  2828. right: 0;
  2829. top: 0;
  2830. left: auto;
  2831. bottom: auto;
  2832. width: 1px;
  2833. height: 100%;
  2834. background-color: #b5b5b5;
  2835. display: block;
  2836. z-index: 15;
  2837. -webkit-transform-origin: 100% 50%;
  2838. transform-origin: 100% 50%;
  2839. }
  2840. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  2841. .modal-button:after {
  2842. -webkit-transform: scaleY(0.5);
  2843. transform: scaleY(0.5);
  2844. }
  2845. }
  2846. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  2847. .modal-button:after {
  2848. -webkit-transform: scaleY(0.33);
  2849. transform: scaleY(0.33);
  2850. }
  2851. }
  2852. .modal-button:first-child {
  2853. border-radius: 0 0 0 0.35rem;
  2854. }
  2855. .modal-button:last-child {
  2856. border-radius: 0 0 0.35rem 0;
  2857. }
  2858. .modal-button:last-child:after {
  2859. display: none;
  2860. }
  2861. .modal-button:first-child:last-child {
  2862. border-radius: 0 0 0.35rem 0.35rem;
  2863. }
  2864. .modal-button.modal-button-bold {
  2865. font-weight: 500;
  2866. }
  2867. html:not(.watch-active-state) .modal-button:active,
  2868. .modal-button.active-state {
  2869. background: #d4d4d4;
  2870. }
  2871. .modal-buttons-vertical .modal-button {
  2872. border-radius: 0;
  2873. }
  2874. .modal-buttons-vertical .modal-button:after {
  2875. display: none;
  2876. }
  2877. .modal-buttons-vertical .modal-button:before {
  2878. display: none;
  2879. }
  2880. .modal-buttons-vertical .modal-button:after {
  2881. content: '';
  2882. position: absolute;
  2883. left: 0;
  2884. bottom: 0;
  2885. right: auto;
  2886. top: auto;
  2887. height: 1px;
  2888. width: 100%;
  2889. background-color: #b5b5b5;
  2890. display: block;
  2891. z-index: 15;
  2892. -webkit-transform-origin: 50% 100%;
  2893. transform-origin: 50% 100%;
  2894. }
  2895. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  2896. .modal-buttons-vertical .modal-button:after {
  2897. -webkit-transform: scaleY(0.5);
  2898. transform: scaleY(0.5);
  2899. }
  2900. }
  2901. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  2902. .modal-buttons-vertical .modal-button:after {
  2903. -webkit-transform: scaleY(0.33);
  2904. transform: scaleY(0.33);
  2905. }
  2906. }
  2907. .modal-buttons-vertical .modal-button:last-child {
  2908. border-radius: 0 0 0.35rem 0.35rem;
  2909. }
  2910. .modal-buttons-vertical .modal-button:last-child:after {
  2911. display: none;
  2912. }
  2913. .modal-no-buttons .modal-inner {
  2914. border-radius: 0.35rem;
  2915. }
  2916. .modal-no-buttons .modal-inner:after {
  2917. display: none;
  2918. }
  2919. .modal-no-buttons .modal-buttons {
  2920. display: none;
  2921. }
  2922. .actions-modal {
  2923. position: absolute;
  2924. left: 0;
  2925. bottom: 0;
  2926. z-index: 11000;
  2927. width: 100%;
  2928. -webkit-transform: translate3d(0, 100%, 0);
  2929. transform: translate3d(0, 100%, 0);
  2930. }
  2931. .actions-modal.modal-in {
  2932. -webkit-transition-duration: 300ms;
  2933. transition-duration: 300ms;
  2934. -webkit-transform: translate3d(0, 0, 0);
  2935. transform: translate3d(0, 0, 0);
  2936. }
  2937. .actions-modal.modal-out {
  2938. z-index: 10999;
  2939. -webkit-transition-duration: 300ms;
  2940. transition-duration: 300ms;
  2941. -webkit-transform: translate3d(0, 100%, 0);
  2942. transform: translate3d(0, 100%, 0);
  2943. }
  2944. .actions-modal-group {
  2945. margin: 0.4rem;
  2946. }
  2947. .actions-modal-button,
  2948. .actions-modal-label {
  2949. width: 100%;
  2950. text-align: center;
  2951. font-weight: normal;
  2952. margin: 0;
  2953. background: rgba(243, 243, 243, 0.95);
  2954. box-sizing: border-box;
  2955. display: block;
  2956. position: relative;
  2957. }
  2958. .actions-modal-button:after,
  2959. .actions-modal-label:after {
  2960. content: '';
  2961. position: absolute;
  2962. left: 0;
  2963. bottom: 0;
  2964. right: auto;
  2965. top: auto;
  2966. height: 1px;
  2967. width: 100%;
  2968. background-color: #d2d2d6;
  2969. display: block;
  2970. z-index: 15;
  2971. -webkit-transform-origin: 50% 100%;
  2972. transform-origin: 50% 100%;
  2973. }
  2974. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  2975. .actions-modal-button:after,
  2976. .actions-modal-label:after {
  2977. -webkit-transform: scaleY(0.5);
  2978. transform: scaleY(0.5);
  2979. }
  2980. }
  2981. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  2982. .actions-modal-button:after,
  2983. .actions-modal-label:after {
  2984. -webkit-transform: scaleY(0.33);
  2985. transform: scaleY(0.33);
  2986. }
  2987. }
  2988. .actions-modal-button a,
  2989. .actions-modal-label a {
  2990. text-decoration: none;
  2991. color: inherit;
  2992. }
  2993. .actions-modal-button b,
  2994. .actions-modal-label b {
  2995. font-weight: 500;
  2996. }
  2997. .actions-modal-button.actions-modal-button-bold,
  2998. .actions-modal-label.actions-modal-button-bold {
  2999. font-weight: 500;
  3000. }
  3001. .actions-modal-button.actions-modal-button-danger,
  3002. .actions-modal-label.actions-modal-button-danger {
  3003. color: #f6383a;
  3004. }
  3005. .actions-modal-button.color-danger,
  3006. .actions-modal-label.color-danger {
  3007. color: #f6383a;
  3008. }
  3009. .actions-modal-button.bg-danger,
  3010. .actions-modal-label.bg-danger {
  3011. background: #f6383a;
  3012. color: white;
  3013. }
  3014. .actions-modal-button.bg-danger:active,
  3015. .actions-modal-label.bg-danger:active {
  3016. background: #f00b0d;
  3017. }
  3018. .actions-modal-button:first-child,
  3019. .actions-modal-label:first-child {
  3020. border-radius: 0.2rem 0.2rem 0 0;
  3021. }
  3022. .actions-modal-button:last-child,
  3023. .actions-modal-label:last-child {
  3024. border-radius: 0 0 0.2rem 0.2rem;
  3025. }
  3026. .actions-modal-button:last-child:after,
  3027. .actions-modal-label:last-child:after {
  3028. display: none;
  3029. }
  3030. .actions-modal-button:first-child:last-child,
  3031. .actions-modal-label:first-child:last-child {
  3032. border-radius: 0.2rem;
  3033. }
  3034. .actions-modal-button.disabled,
  3035. .actions-modal-label.disabled {
  3036. opacity: 0.95;
  3037. color: #8e8e93;
  3038. }
  3039. .actions-modal-button {
  3040. cursor: pointer;
  3041. line-height: 2.15rem;
  3042. font-size: 1rem;
  3043. color: #0894ec;
  3044. }
  3045. .actions-modal-button:active,
  3046. .actions-modal-button.active-state {
  3047. background: #dcdcdc;
  3048. }
  3049. .actions-modal-label {
  3050. font-size: 0.7rem;
  3051. line-height: 1.3;
  3052. min-height: 2.2rem;
  3053. padding: 0.4rem 0.5rem;
  3054. color: #5f646e;
  3055. display: -webkit-box;
  3056. display: -webkit-flex;
  3057. display: flex;
  3058. -webkit-box-pack: center;
  3059. -webkit-justify-content: center;
  3060. justify-content: center;
  3061. -webkit-box-align: center;
  3062. -webkit-align-items: center;
  3063. align-items: center;
  3064. }
  3065. input.modal-text-input {
  3066. box-sizing: border-box;
  3067. height: 1.5rem;
  3068. background: #fff;
  3069. margin: 0;
  3070. margin-top: 0.75rem;
  3071. padding: 0 0.25rem;
  3072. border: 1px solid #a0a0a0;
  3073. border-radius: 0.25rem;
  3074. width: 100%;
  3075. font-size: 0.7rem;
  3076. font-family: inherit;
  3077. display: block;
  3078. box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  3079. -webkit-appearance: none;
  3080. -moz-appearance: none;
  3081. appearance: none;
  3082. }
  3083. input.modal-text-input + input.modal-text-input {
  3084. margin-top: 0.25rem;
  3085. }
  3086. input.modal-text-input.modal-text-input-double {
  3087. border-radius: 0.25rem 0.25rem 0 0;
  3088. }
  3089. input.modal-text-input.modal-text-input-double + input.modal-text-input {
  3090. margin-top: 0;
  3091. border-top: 0;
  3092. border-radius: 0 0 0.25rem 0.25rem;
  3093. }
  3094. .popup,
  3095. .login-screen {
  3096. position: absolute;
  3097. left: 0;
  3098. top: 0;
  3099. width: 100%;
  3100. height: 100%;
  3101. z-index: 10400;
  3102. background: #fff;
  3103. box-sizing: border-box;
  3104. display: none;
  3105. overflow: auto;
  3106. -webkit-overflow-scrolling: touch;
  3107. -webkit-transition-property: -webkit-transform;
  3108. transition-property: transform;
  3109. -webkit-transform: translate3d(0, 100%, 0);
  3110. transform: translate3d(0, 100%, 0);
  3111. }
  3112. .popup.modal-in,
  3113. .login-screen.modal-in,
  3114. .popup.modal-out,
  3115. .login-screen.modal-out {
  3116. -webkit-transition-duration: 400ms;
  3117. transition-duration: 400ms;
  3118. }
  3119. .popup.modal-in,
  3120. .login-screen.modal-in {
  3121. -webkit-transform: translate3d(0, 0, 0);
  3122. transform: translate3d(0, 0, 0);
  3123. }
  3124. .popup.modal-out,
  3125. .login-screen.modal-out {
  3126. -webkit-transform: translate3d(0, 100%, 0);
  3127. transform: translate3d(0, 100%, 0);
  3128. }
  3129. .login-screen.modal-in,
  3130. .login-screen.modal-out {
  3131. display: block;
  3132. }
  3133. html.with-statusbar-overlay .popup {
  3134. height: -webkit-calc(100% - 1rem);
  3135. height: calc(100% - 1rem);
  3136. top: 1rem;
  3137. }
  3138. html.with-statusbar-overlay .popup-overlay {
  3139. z-index: 9800;
  3140. }
  3141. @media all and (max-width: 629px), (max-height: 629px) {
  3142. html.with-statusbar-overlay .popup {
  3143. height: -webkit-calc(100% - 1rem);
  3144. height: calc(100% - 1rem);
  3145. top: 1rem;
  3146. }
  3147. html.with-statusbar-overlay .popup-overlay {
  3148. z-index: 9800;
  3149. }
  3150. }
  3151. html.with-statusbar-overlay .login-screen,
  3152. html.with-statusbar-overlay .popup.tablet-fullscreen {
  3153. height: -webkit-calc(100% - 1rem);
  3154. height: calc(100% - 1rem);
  3155. top: 1rem;
  3156. }
  3157. .modal .preloader {
  3158. width: 1.7rem;
  3159. height: 1.7rem;
  3160. }
  3161. .preloader-indicator-overlay {
  3162. visibility: visible;
  3163. opacity: 0;
  3164. background: none;
  3165. }
  3166. .preloader-indicator-modal {
  3167. position: absolute;
  3168. left: 50%;
  3169. top: 50%;
  3170. padding: 0.4rem;
  3171. margin-left: -1.25rem;
  3172. margin-top: -1.25rem;
  3173. background: rgba(0, 0, 0, 0.8);
  3174. z-index: 11000;
  3175. border-radius: 0.25rem;
  3176. }
  3177. .preloader-indicator-modal .preloader {
  3178. display: block;
  3179. width: 1.7rem;
  3180. height: 1.7rem;
  3181. }
  3182. .picker-modal {
  3183. position: fixed;
  3184. left: 0;
  3185. bottom: 0;
  3186. width: 100%;
  3187. height: 13rem;
  3188. z-index: 11500;
  3189. display: none;
  3190. -webkit-transition-property: -webkit-transform;
  3191. transition-property: transform;
  3192. background: #cfd5da;
  3193. -webkit-transform: translate3d(0, 100%, 0);
  3194. transform: translate3d(0, 100%, 0);
  3195. }
  3196. .picker-modal.modal-in,
  3197. .picker-modal.modal-out {
  3198. -webkit-transition-duration: 400ms;
  3199. transition-duration: 400ms;
  3200. }
  3201. .picker-modal.modal-in {
  3202. -webkit-transform: translate3d(0, 0, 0);
  3203. transform: translate3d(0, 0, 0);
  3204. }
  3205. .picker-modal.modal-out {
  3206. -webkit-transform: translate3d(0, 100%, 0);
  3207. transform: translate3d(0, 100%, 0);
  3208. }
  3209. .picker-modal .picker-modal-inner {
  3210. height: 100%;
  3211. position: relative;
  3212. }
  3213. .picker-modal .toolbar {
  3214. position: relative;
  3215. width: 100%;
  3216. }
  3217. .picker-modal .toolbar:before {
  3218. content: '';
  3219. position: absolute;
  3220. left: 0;
  3221. top: 0;
  3222. bottom: auto;
  3223. right: auto;
  3224. height: 1px;
  3225. width: 100%;
  3226. background-color: #999;
  3227. display: block;
  3228. z-index: 15;
  3229. -webkit-transform-origin: 50% 0%;
  3230. transform-origin: 50% 0%;
  3231. }
  3232. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3233. .picker-modal .toolbar:before {
  3234. -webkit-transform: scaleY(0.5);
  3235. transform: scaleY(0.5);
  3236. }
  3237. }
  3238. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3239. .picker-modal .toolbar:before {
  3240. -webkit-transform: scaleY(0.33);
  3241. transform: scaleY(0.33);
  3242. }
  3243. }
  3244. .picker-modal .toolbar + .picker-modal-inner {
  3245. height: -webkit-calc(100% - 2.2rem);
  3246. height: calc(100% - 2.2rem);
  3247. }
  3248. .picker-modal.picker-modal-inline {
  3249. display: block;
  3250. position: relative;
  3251. background: none;
  3252. z-index: inherit;
  3253. -webkit-transform: translate3d(0, 0, 0);
  3254. transform: translate3d(0, 0, 0);
  3255. }
  3256. .picker-modal.picker-modal-inline .toolbar:before {
  3257. display: none;
  3258. }
  3259. .picker-modal.picker-modal-inline .toolbar:after {
  3260. content: '';
  3261. position: absolute;
  3262. left: 0;
  3263. bottom: 0;
  3264. right: auto;
  3265. top: auto;
  3266. height: 1px;
  3267. width: 100%;
  3268. background-color: #999;
  3269. display: block;
  3270. z-index: 15;
  3271. -webkit-transform-origin: 50% 100%;
  3272. transform-origin: 50% 100%;
  3273. }
  3274. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3275. .picker-modal.picker-modal-inline .toolbar:after {
  3276. -webkit-transform: scaleY(0.5);
  3277. transform: scaleY(0.5);
  3278. }
  3279. }
  3280. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3281. .picker-modal.picker-modal-inline .toolbar:after {
  3282. -webkit-transform: scaleY(0.33);
  3283. transform: scaleY(0.33);
  3284. }
  3285. }
  3286. .toast {
  3287. background: rgba(0, 0, 0, 0.8);
  3288. border-radius: 1rem;
  3289. color: white;
  3290. padding: 0 .8rem;
  3291. height: 2rem;
  3292. line-height: 2rem;
  3293. font-size: 0.8rem;
  3294. width: auto;
  3295. }
  3296. /* === Preloader === */
  3297. .preloader {
  3298. display: inline-block;
  3299. width: 1rem;
  3300. height: 1rem;
  3301. -webkit-transform-origin: 50%;
  3302. transform-origin: 50%;
  3303. -webkit-animation: preloader-spin 1s steps(12, end) infinite;
  3304. animation: preloader-spin 1s steps(12, end) infinite;
  3305. }
  3306. .preloader:after {
  3307. display: block;
  3308. content: "";
  3309. width: 100%;
  3310. height: 100%;
  3311. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  3312. background-position: 50%;
  3313. background-size: 100%;
  3314. background-repeat: no-repeat;
  3315. }
  3316. .preloader-white:after {
  3317. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  3318. }
  3319. @-webkit-keyframes preloader-spin {
  3320. 100% {
  3321. -webkit-transform: rotate(360deg);
  3322. }
  3323. }
  3324. @keyframes preloader-spin {
  3325. 100% {
  3326. -webkit-transform: rotate(360deg);
  3327. transform: rotate(360deg);
  3328. }
  3329. }
  3330. /* === Cards === */
  3331. .cards-list ul,
  3332. .card .list-block ul {
  3333. background: none;
  3334. }
  3335. .cards-list > ul:before,
  3336. .card .list-block > ul:before {
  3337. display: none;
  3338. }
  3339. .cards-list > ul:after,
  3340. .card .list-block > ul:after {
  3341. display: none;
  3342. }
  3343. .card {
  3344. background: #fff;
  3345. box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.3);
  3346. margin: 0.5rem;
  3347. position: relative;
  3348. border-radius: 0.1rem;
  3349. font-size: 0.7rem;
  3350. }
  3351. .card .list-block,
  3352. .card .content-block {
  3353. margin: 0;
  3354. }
  3355. .row:not(.no-gutter) .col > .card {
  3356. margin-left: 0;
  3357. margin-right: 0;
  3358. }
  3359. .card-content {
  3360. position: relative;
  3361. }
  3362. .card-content-inner {
  3363. padding: 0.75rem;
  3364. position: relative;
  3365. }
  3366. .card-content-inner > p:first-child {
  3367. margin-top: 0;
  3368. }
  3369. .card-content-inner > p:last-child {
  3370. margin-bottom: 0;
  3371. }
  3372. .card-content-inner > .list-block,
  3373. .card-content-inner > .content-block {
  3374. margin: -0.75rem;
  3375. }
  3376. .card-header,
  3377. .card-footer {
  3378. min-height: 2.2rem;
  3379. position: relative;
  3380. padding: 0.5rem 0.75rem;
  3381. box-sizing: border-box;
  3382. display: -webkit-box;
  3383. display: -webkit-flex;
  3384. display: flex;
  3385. -webkit-box-pack: justify;
  3386. -webkit-justify-content: space-between;
  3387. justify-content: space-between;
  3388. -webkit-box-align: center;
  3389. -webkit-align-items: center;
  3390. align-items: center;
  3391. }
  3392. .card-header[valign="top"],
  3393. .card-footer[valign="top"] {
  3394. -webkit-box-align: start;
  3395. -webkit-align-items: flex-start;
  3396. align-items: flex-start;
  3397. }
  3398. .card-header[valign="bottom"],
  3399. .card-footer[valign="bottom"] {
  3400. -webkit-box-align: end;
  3401. -webkit-align-items: flex-end;
  3402. align-items: flex-end;
  3403. }
  3404. .card-header a.link,
  3405. .card-footer a.link {
  3406. line-height: 2.2rem;
  3407. height: 2.2rem;
  3408. text-decoration: none;
  3409. position: relative;
  3410. margin-top: -0.5rem;
  3411. margin-bottom: -0.5rem;
  3412. display: -webkit-box;
  3413. display: -webkit-flex;
  3414. display: flex;
  3415. -webkit-box-pack: start;
  3416. -webkit-justify-content: flex-start;
  3417. justify-content: flex-start;
  3418. -webkit-box-align: center;
  3419. -webkit-align-items: center;
  3420. align-items: center;
  3421. -webkit-transition-duration: 300ms;
  3422. transition-duration: 300ms;
  3423. }
  3424. html:not(.watch-active-state) .card-header a.link:active,
  3425. html:not(.watch-active-state) .card-footer a.link:active,
  3426. .card-header a.link.active-state,
  3427. .card-footer a.link.active-state {
  3428. opacity: 0.3;
  3429. -webkit-transition-duration: 0ms;
  3430. transition-duration: 0ms;
  3431. }
  3432. .card-header a.link i + span,
  3433. .card-footer a.link i + span,
  3434. .card-header a.link i + i,
  3435. .card-footer a.link i + i,
  3436. .card-header a.link span + i,
  3437. .card-footer a.link span + i,
  3438. .card-header a.link span + span,
  3439. .card-footer a.link span + span {
  3440. margin-left: 0.35rem;
  3441. }
  3442. .card-header a.link i.icon,
  3443. .card-footer a.link i.icon {
  3444. display: block;
  3445. }
  3446. .card-header a.icon-only,
  3447. .card-footer a.icon-only {
  3448. min-width: 2.2rem;
  3449. display: -webkit-box;
  3450. display: -webkit-flex;
  3451. display: flex;
  3452. -webkit-box-pack: center;
  3453. -webkit-justify-content: center;
  3454. justify-content: center;
  3455. -webkit-box-align: center;
  3456. -webkit-align-items: center;
  3457. align-items: center;
  3458. margin: 0;
  3459. }
  3460. .card-header {
  3461. border-radius: 0.1rem 0.1rem 0 0;
  3462. font-size: 0.85rem;
  3463. }
  3464. .card-header:after {
  3465. content: '';
  3466. position: absolute;
  3467. left: 0;
  3468. bottom: 0;
  3469. right: auto;
  3470. top: auto;
  3471. height: 1px;
  3472. width: 100%;
  3473. background-color: #e1e1e1;
  3474. display: block;
  3475. z-index: 15;
  3476. -webkit-transform-origin: 50% 100%;
  3477. transform-origin: 50% 100%;
  3478. }
  3479. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3480. .card-header:after {
  3481. -webkit-transform: scaleY(0.5);
  3482. transform: scaleY(0.5);
  3483. }
  3484. }
  3485. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3486. .card-header:after {
  3487. -webkit-transform: scaleY(0.33);
  3488. transform: scaleY(0.33);
  3489. }
  3490. }
  3491. .card-header .card-cover {
  3492. width: 100%;
  3493. display: block;
  3494. }
  3495. .card-header.no-border:after {
  3496. display: none;
  3497. }
  3498. .card-header.no-padding {
  3499. padding: 0;
  3500. }
  3501. .card-footer {
  3502. border-radius: 0 0 0.1rem 0.1rem;
  3503. color: #5f646e;
  3504. }
  3505. .card-footer:before {
  3506. content: '';
  3507. position: absolute;
  3508. left: 0;
  3509. top: 0;
  3510. bottom: auto;
  3511. right: auto;
  3512. height: 1px;
  3513. width: 100%;
  3514. background-color: #e1e1e1;
  3515. display: block;
  3516. z-index: 15;
  3517. -webkit-transform-origin: 50% 0%;
  3518. transform-origin: 50% 0%;
  3519. }
  3520. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3521. .card-footer:before {
  3522. -webkit-transform: scaleY(0.5);
  3523. transform: scaleY(0.5);
  3524. }
  3525. }
  3526. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3527. .card-footer:before {
  3528. -webkit-transform: scaleY(0.33);
  3529. transform: scaleY(0.33);
  3530. }
  3531. }
  3532. .card-footer.no-border:before {
  3533. display: none;
  3534. }
  3535. .facebook-card .card-header {
  3536. display: block;
  3537. padding: 0.5rem;
  3538. }
  3539. .facebook-card .facebook-avatar {
  3540. float: left;
  3541. }
  3542. .facebook-card .facebook-name {
  3543. margin-left: 2.2rem;
  3544. font-size: 0.7rem;
  3545. font-weight: 500;
  3546. }
  3547. .facebook-card .facebook-date {
  3548. margin-left: 2.2rem;
  3549. font-size: 0.65rem;
  3550. color: #5f646e;
  3551. }
  3552. .facebook-card .card-footer {
  3553. background: #fafafa;
  3554. }
  3555. .facebook-card .card-footer a {
  3556. color: #5f646e;
  3557. font-weight: 500;
  3558. }
  3559. .facebook-card .card-content img {
  3560. display: block;
  3561. }
  3562. .facebook-card .card-content-inner {
  3563. padding: 0.75rem 0.5rem;
  3564. }
  3565. /* === Panels === */
  3566. .panel-overlay {
  3567. position: absolute;
  3568. left: 0;
  3569. top: 0;
  3570. width: 100%;
  3571. height: 100%;
  3572. background: rgba(0, 0, 0, 0);
  3573. opacity: 0;
  3574. z-index: 5999;
  3575. display: none;
  3576. }
  3577. .panel {
  3578. z-index: 1000;
  3579. display: none;
  3580. background: #111;
  3581. color: white;
  3582. box-sizing: border-box;
  3583. overflow: auto;
  3584. -webkit-overflow-scrolling: touch;
  3585. position: absolute;
  3586. width: 12rem;
  3587. top: 0;
  3588. height: 100%;
  3589. -webkit-transform: translate3d(0, 0, 0);
  3590. transform: translate3d(0, 0, 0);
  3591. -webkit-transition: -webkit-transform 400ms;
  3592. transition: transform 400ms;
  3593. }
  3594. .panel.panel-left.panel-cover {
  3595. z-index: 6000;
  3596. left: -12rem;
  3597. }
  3598. .panel.panel-left.panel-reveal {
  3599. left: 0;
  3600. }
  3601. .panel.panel-right.panel-cover {
  3602. z-index: 6000;
  3603. right: -12rem;
  3604. }
  3605. .panel.panel-right.panel-reveal {
  3606. right: 0;
  3607. }
  3608. body.with-panel-left-cover .page,
  3609. body.with-panel-right-cover .page {
  3610. -webkit-transform: translate3d(0, 0, 0);
  3611. transform: translate3d(0, 0, 0);
  3612. -webkit-transition: -webkit-transform 400ms;
  3613. transition: transform 400ms;
  3614. }
  3615. body.with-panel-left-cover .panel-overlay,
  3616. body.with-panel-right-cover .panel-overlay {
  3617. display: block;
  3618. }
  3619. body.with-panel-left-reveal .page,
  3620. body.with-panel-right-reveal .page {
  3621. -webkit-transition: 400ms;
  3622. transition: 400ms;
  3623. -webkit-transition-property: -webkit-transform;
  3624. transition-property: transform;
  3625. }
  3626. body.with-panel-left-reveal .panel-overlay,
  3627. body.with-panel-right-reveal .panel-overlay {
  3628. display: block;
  3629. }
  3630. body.with-panel-left-reveal .page {
  3631. -webkit-transform: translate3d(12rem, 0, 0);
  3632. transform: translate3d(12rem, 0, 0);
  3633. }
  3634. body.with-panel-left-reveal .panel-overlay {
  3635. margin-left: 12rem;
  3636. }
  3637. body.with-panel-left-cover .panel-left {
  3638. -webkit-transform: translate3d(12rem, 0, 0);
  3639. transform: translate3d(12rem, 0, 0);
  3640. }
  3641. body.with-panel-right-reveal .page {
  3642. -webkit-transform: translate3d(-12rem, 0, 0);
  3643. transform: translate3d(-12rem, 0, 0);
  3644. }
  3645. body.with-panel-right-reveal .panel-overlay {
  3646. margin-left: -12rem;
  3647. }
  3648. body.with-panel-right-cover .panel-right {
  3649. -webkit-transform: translate3d(-12rem, 0, 0);
  3650. transform: translate3d(-12rem, 0, 0);
  3651. }
  3652. body.panel-closing .page {
  3653. -webkit-transition: 400ms;
  3654. transition: 400ms;
  3655. -webkit-transition-property: -webkit-transform;
  3656. transition-property: transform;
  3657. }
  3658. /* === Calendar === */
  3659. .picker-calendar {
  3660. background: #fff;
  3661. height: 300px;
  3662. width: 100%;
  3663. overflow: hidden;
  3664. }
  3665. @media (orientation: landscape) and (max-height: 415px) {
  3666. .picker-calendar:not(.picker-modal-inline) {
  3667. height: 220px;
  3668. }
  3669. }
  3670. .picker-calendar .picker-modal-inner {
  3671. overflow: hidden;
  3672. }
  3673. .picker-calendar-week-days {
  3674. height: 18px;
  3675. background: #f7f7f8;
  3676. display: -webkit-box;
  3677. display: -webkit-flex;
  3678. display: flex;
  3679. font-size: 11px;
  3680. box-sizing: border-box;
  3681. position: relative;
  3682. }
  3683. .picker-calendar-week-days:after {
  3684. content: '';
  3685. position: absolute;
  3686. left: 0;
  3687. bottom: 0;
  3688. right: auto;
  3689. top: auto;
  3690. height: 1px;
  3691. width: 100%;
  3692. background-color: #c4c4c4;
  3693. display: block;
  3694. z-index: 15;
  3695. -webkit-transform-origin: 50% 100%;
  3696. transform-origin: 50% 100%;
  3697. }
  3698. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3699. .picker-calendar-week-days:after {
  3700. -webkit-transform: scaleY(0.5);
  3701. transform: scaleY(0.5);
  3702. }
  3703. }
  3704. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3705. .picker-calendar-week-days:after {
  3706. -webkit-transform: scaleY(0.33);
  3707. transform: scaleY(0.33);
  3708. }
  3709. }
  3710. .picker-calendar-week-days .picker-calendar-week-day {
  3711. -webkit-flex-shrink: 1;
  3712. -ms-flex: 0 1 auto;
  3713. -webkit-flex-shrink: 1;
  3714. flex-shrink: 1;
  3715. width: 14.28571429%;
  3716. width: -webkit-calc(100% / 7);
  3717. width: calc(100% / 7);
  3718. line-height: 17px;
  3719. text-align: center;
  3720. }
  3721. .picker-calendar-week-days + .picker-calendar-months {
  3722. height: -webkit-calc(100% - 18px);
  3723. height: calc(100% - 18px);
  3724. }
  3725. .picker-calendar-months {
  3726. width: 100%;
  3727. height: 100%;
  3728. overflow: hidden;
  3729. position: relative;
  3730. }
  3731. .picker-calendar-months-wrapper {
  3732. position: relative;
  3733. width: 100%;
  3734. height: 100%;
  3735. -webkit-transition: 300ms;
  3736. transition: 300ms;
  3737. }
  3738. .picker-calendar-month {
  3739. display: -webkit-box;
  3740. display: -webkit-flex;
  3741. display: flex;
  3742. -webkit-box-orient: vertical;
  3743. -webkit-flex-direction: column;
  3744. flex-direction: column;
  3745. width: 100%;
  3746. height: 100%;
  3747. position: absolute;
  3748. left: 0;
  3749. top: 0;
  3750. }
  3751. .picker-calendar-row {
  3752. height: 16.66666667%;
  3753. height: -webkit-calc(100% / 6);
  3754. height: calc(100% / 6);
  3755. display: -webkit-box;
  3756. display: -webkit-flex;
  3757. display: flex;
  3758. -webkit-flex-shrink: 1;
  3759. -ms-flex: 0 1 auto;
  3760. -webkit-flex-shrink: 1;
  3761. flex-shrink: 1;
  3762. width: 100%;
  3763. position: relative;
  3764. }
  3765. .picker-calendar-row:after {
  3766. content: '';
  3767. position: absolute;
  3768. left: 0;
  3769. bottom: 0;
  3770. right: auto;
  3771. top: auto;
  3772. height: 1px;
  3773. width: 100%;
  3774. background-color: #ccc;
  3775. display: block;
  3776. z-index: 15;
  3777. -webkit-transform-origin: 50% 100%;
  3778. transform-origin: 50% 100%;
  3779. }
  3780. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3781. .picker-calendar-row:after {
  3782. -webkit-transform: scaleY(0.5);
  3783. transform: scaleY(0.5);
  3784. }
  3785. }
  3786. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3787. .picker-calendar-row:after {
  3788. -webkit-transform: scaleY(0.33);
  3789. transform: scaleY(0.33);
  3790. }
  3791. }
  3792. .picker-calendar-row:last-child:after {
  3793. display: none;
  3794. }
  3795. .picker-calendar-day {
  3796. -webkit-flex-shrink: 1;
  3797. -ms-flex: 0 1 auto;
  3798. -webkit-flex-shrink: 1;
  3799. flex-shrink: 1;
  3800. display: -webkit-box;
  3801. display: -webkit-flex;
  3802. display: flex;
  3803. -webkit-box-pack: center;
  3804. -webkit-justify-content: center;
  3805. justify-content: center;
  3806. -webkit-box-align: center;
  3807. -webkit-align-items: center;
  3808. align-items: center;
  3809. box-sizing: border-box;
  3810. width: 14.28571429%;
  3811. width: -webkit-calc(100% / 7);
  3812. width: calc(100% / 7);
  3813. text-align: center;
  3814. color: #3d4145;
  3815. font-size: 15px;
  3816. cursor: pointer;
  3817. }
  3818. .picker-calendar-day.picker-calendar-day-prev,
  3819. .picker-calendar-day.picker-calendar-day-next {
  3820. color: #ccc;
  3821. }
  3822. .picker-calendar-day.picker-calendar-day-disabled {
  3823. color: #d4d4d4;
  3824. cursor: auto;
  3825. }
  3826. .picker-calendar-day.picker-calendar-day-today span {
  3827. background: #e3e3e3;
  3828. }
  3829. .picker-calendar-day.picker-calendar-day-selected span {
  3830. background: #0894ec;
  3831. color: #fff;
  3832. }
  3833. .picker-calendar-day span {
  3834. display: inline-block;
  3835. border-radius: 100%;
  3836. width: 30px;
  3837. height: 30px;
  3838. line-height: 30px;
  3839. }
  3840. .picker-calendar-month-picker,
  3841. .picker-calendar-year-picker {
  3842. display: -webkit-box;
  3843. display: -webkit-flex;
  3844. display: flex;
  3845. -webkit-box-align: center;
  3846. -webkit-align-items: center;
  3847. align-items: center;
  3848. -webkit-box-pack: justify;
  3849. -webkit-justify-content: space-between;
  3850. justify-content: space-between;
  3851. width: 50%;
  3852. max-width: 200px;
  3853. -webkit-flex-shrink: 10;
  3854. -ms-flex: 0 10 auto;
  3855. -webkit-flex-shrink: 10;
  3856. flex-shrink: 10;
  3857. }
  3858. .picker-calendar-month-picker a.icon-only,
  3859. .picker-calendar-year-picker a.icon-only {
  3860. min-width: 36px;
  3861. }
  3862. .picker-calendar-month-picker span,
  3863. .picker-calendar-year-picker span {
  3864. -webkit-flex-shrink: 1;
  3865. -ms-flex: 0 1 auto;
  3866. -webkit-flex-shrink: 1;
  3867. flex-shrink: 1;
  3868. position: relative;
  3869. overflow: hidden;
  3870. text-overflow: ellipsis;
  3871. }
  3872. .picker-calendar-years-picker,
  3873. .picker-calendar-months-picker {
  3874. position: absolute;
  3875. top: 0;
  3876. right: 0;
  3877. bottom: 0;
  3878. left: 0;
  3879. width: 100%;
  3880. height: 100%;
  3881. background: #fff;
  3882. z-index: 15;
  3883. -webkit-transition-property: -webkit-transform;
  3884. transition-property: transform;
  3885. -webkit-transition-duration: .3s;
  3886. transition-duration: .3s;
  3887. -webkit-transform: translate3d(0, 100%, 0);
  3888. transform: translate3d(0, 100%, 0);
  3889. }
  3890. .picker-calendar-years-picker:before,
  3891. .picker-calendar-months-picker:before {
  3892. content: '';
  3893. position: absolute;
  3894. left: 0;
  3895. top: 0;
  3896. bottom: auto;
  3897. right: auto;
  3898. height: 1px;
  3899. width: 100%;
  3900. background-color: #999;
  3901. display: block;
  3902. z-index: 15;
  3903. -webkit-transform-origin: 50% 0%;
  3904. transform-origin: 50% 0%;
  3905. }
  3906. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  3907. .picker-calendar-years-picker:before,
  3908. .picker-calendar-months-picker:before {
  3909. -webkit-transform: scaleY(0.5);
  3910. transform: scaleY(0.5);
  3911. }
  3912. }
  3913. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  3914. .picker-calendar-years-picker:before,
  3915. .picker-calendar-months-picker:before {
  3916. -webkit-transform: scaleY(0.33);
  3917. transform: scaleY(0.33);
  3918. }
  3919. }
  3920. .picker-calendar-years-picker .picker-calendar-years-picker-wrapper {
  3921. position: relative;
  3922. width: 100%;
  3923. height: 100%;
  3924. -webkit-transition-property: -webkit-transform;
  3925. transition-property: transform;
  3926. -webkit-transition-duration: .3s;
  3927. transition-duration: .3s;
  3928. }
  3929. .picker-calendar-years-picker .picker-calendar-years-group {
  3930. position: absolute;
  3931. top: 0;
  3932. width: 100%;
  3933. height: 100%;
  3934. }
  3935. .picker-calendar-years-picker .picker-calendar-row {
  3936. height: 20%;
  3937. height: -webkit-calc(100% / 5);
  3938. height: calc(100% / 5);
  3939. }
  3940. .picker-calendar-years-picker .picker-calendar-year-unit {
  3941. display: -webkit-box;
  3942. display: -webkit-flex;
  3943. display: flex;
  3944. -webkit-box-align: center;
  3945. -webkit-align-items: center;
  3946. align-items: center;
  3947. -webkit-box-flex: 1;
  3948. -webkit-flex: 1;
  3949. flex: 1;
  3950. text-align: center;
  3951. }
  3952. .picker-calendar-years-picker .picker-calendar-year-unit span {
  3953. display: block;
  3954. width: 100%;
  3955. }
  3956. .picker-calendar-years-picker .picker-calendar-year-unit.current-calendar-year-unit {
  3957. background: #e3e3e3;
  3958. }
  3959. .picker-calendar-years-picker .picker-calendar-year-unit.picker-calendar-year-unit-selected {
  3960. color: #fff;
  3961. background: #0894ec;
  3962. }
  3963. .picker-calendar-months-picker .picker-calendar-months-picker-wrapper {
  3964. position: relative;
  3965. width: 100%;
  3966. height: 100%;
  3967. -webkit-transition-property: -webkit-transform;
  3968. transition-property: transform;
  3969. -webkit-transition-duration: .3s;
  3970. transition-duration: .3s;
  3971. }
  3972. .picker-calendar-months-picker .picker-calendar-months-group {
  3973. position: absolute;
  3974. top: 0;
  3975. width: 100%;
  3976. height: 100%;
  3977. }
  3978. .picker-calendar-months-picker .picker-calendar-row {
  3979. height: 33.33333333%;
  3980. height: -webkit-calc(100% / 3);
  3981. height: calc(100% / 3);
  3982. }
  3983. .picker-calendar-months-picker .picker-calendar-month-unit {
  3984. display: -webkit-box;
  3985. display: -webkit-flex;
  3986. display: flex;
  3987. -webkit-box-align: center;
  3988. -webkit-align-items: center;
  3989. align-items: center;
  3990. -webkit-box-flex: 1;
  3991. -webkit-flex: 1;
  3992. flex: 1;
  3993. text-align: center;
  3994. }
  3995. .picker-calendar-months-picker .picker-calendar-month-unit span {
  3996. display: block;
  3997. width: 100%;
  3998. }
  3999. .picker-calendar-months-picker .picker-calendar-month-unit.current-calendar-month-unit {
  4000. background: #e3e3e3;
  4001. }
  4002. .picker-calendar-months-picker .picker-calendar-month-unit.picker-calendar-month-unit-selected {
  4003. color: #fff;
  4004. background: #0894ec;
  4005. }
  4006. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  4007. .picker-calendar-years-picker:before,
  4008. .picker-calendar-months-picker:before {
  4009. -webkit-transform: scaleY(0.5);
  4010. transform: scaleY(0.5);
  4011. }
  4012. }
  4013. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  4014. .picker-calendar-years-picker:before,
  4015. .picker-calendar-months-picker:before {
  4016. -webkit-transform: scaleY(0.33);
  4017. transform: scaleY(0.33);
  4018. }
  4019. }
  4020. .picker-modal .toolbar-inner {
  4021. height: 2.2rem;
  4022. display: -webkit-box;
  4023. display: -webkit-flex;
  4024. display: flex;
  4025. text-align: center;
  4026. }
  4027. .picker-calendar-month-picker,
  4028. .picker-calendar-year-picker {
  4029. display: block;
  4030. line-height: 2.2rem;
  4031. }
  4032. .picker-calendar-month-picker a.icon-only,
  4033. .picker-calendar-year-picker a.icon-only {
  4034. float: left;
  4035. width: 25%;
  4036. height: 2.2rem;
  4037. line-height: 2rem;
  4038. }
  4039. .picker-calendar-month-picker .current-month-value,
  4040. .picker-calendar-year-picker .current-month-value,
  4041. .picker-calendar-month-picker .current-year-value,
  4042. .picker-calendar-year-picker .current-year-value {
  4043. float: left;
  4044. width: 50%;
  4045. height: 2.2rem;
  4046. }
  4047. /* === Columns Picker === */
  4048. .picker-columns {
  4049. width: 100%;
  4050. height: 13rem;
  4051. z-index: 11500;
  4052. }
  4053. .picker-columns.picker-modal-inline {
  4054. height: 10rem;
  4055. }
  4056. @media (orientation: landscape) and (max-height: 415px) {
  4057. .picker-columns:not(.picker-modal-inline) {
  4058. height: 10rem;
  4059. }
  4060. }
  4061. .picker-items {
  4062. display: -webkit-box;
  4063. display: -webkit-flex;
  4064. display: flex;
  4065. -webkit-box-pack: center;
  4066. -webkit-justify-content: center;
  4067. justify-content: center;
  4068. padding: 0;
  4069. text-align: right;
  4070. font-size: 1.2rem;
  4071. -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  4072. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  4073. }
  4074. .bar + .picker-items {
  4075. height: 10.8rem;
  4076. }
  4077. .picker-items-col {
  4078. overflow: hidden;
  4079. position: relative;
  4080. max-height: 100%;
  4081. }
  4082. .picker-items-col.picker-items-col-left {
  4083. text-align: left;
  4084. }
  4085. .picker-items-col.picker-items-col-center {
  4086. text-align: center;
  4087. }
  4088. .picker-items-col.picker-items-col-right {
  4089. text-align: right;
  4090. }
  4091. .picker-items-col.picker-items-col-divider {
  4092. color: #3d4145;
  4093. display: -webkit-box;
  4094. display: -webkit-flex;
  4095. display: flex;
  4096. -webkit-box-align: center;
  4097. -webkit-align-items: center;
  4098. align-items: center;
  4099. }
  4100. .picker-items-col-normal {
  4101. width: 100%;
  4102. }
  4103. .picker-items-col-wrapper {
  4104. -webkit-transition: 300ms;
  4105. transition: 300ms;
  4106. -webkit-transition-timing-function: ease-out;
  4107. transition-timing-function: ease-out;
  4108. }
  4109. .picker-item {
  4110. height: 36px;
  4111. line-height: 36px;
  4112. padding: 0 10px;
  4113. white-space: nowrap;
  4114. position: relative;
  4115. overflow: hidden;
  4116. text-overflow: ellipsis;
  4117. color: #999;
  4118. left: 0;
  4119. top: 0;
  4120. width: 100%;
  4121. box-sizing: border-box;
  4122. -webkit-transition: 300ms;
  4123. transition: 300ms;
  4124. }
  4125. .picker-items-col-absolute .picker-item {
  4126. position: absolute;
  4127. }
  4128. .picker-item.picker-item-far {
  4129. pointer-events: none;
  4130. }
  4131. .picker-item.picker-selected {
  4132. color: #3d4145;
  4133. -webkit-transform: translate3d(0, 0, 0);
  4134. transform: translate3d(0, 0, 0);
  4135. -webkit-transform: rotateX(0deg);
  4136. transform: rotateX(0deg);
  4137. }
  4138. .picker-center-highlight {
  4139. height: 36px;
  4140. box-sizing: border-box;
  4141. position: absolute;
  4142. left: 0;
  4143. width: 100%;
  4144. top: 50%;
  4145. margin-top: -18px;
  4146. pointer-events: none;
  4147. }
  4148. .picker-center-highlight:before {
  4149. content: '';
  4150. position: absolute;
  4151. left: 0;
  4152. top: 0;
  4153. bottom: auto;
  4154. right: auto;
  4155. height: 1px;
  4156. width: 100%;
  4157. background-color: #a8abb0;
  4158. display: block;
  4159. z-index: 15;
  4160. -webkit-transform-origin: 50% 0%;
  4161. transform-origin: 50% 0%;
  4162. }
  4163. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  4164. .picker-center-highlight:before {
  4165. -webkit-transform: scaleY(0.5);
  4166. transform: scaleY(0.5);
  4167. }
  4168. }
  4169. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  4170. .picker-center-highlight:before {
  4171. -webkit-transform: scaleY(0.33);
  4172. transform: scaleY(0.33);
  4173. }
  4174. }
  4175. .picker-center-highlight:after {
  4176. content: '';
  4177. position: absolute;
  4178. left: 0;
  4179. bottom: 0;
  4180. right: auto;
  4181. top: auto;
  4182. height: 1px;
  4183. width: 100%;
  4184. background-color: #a8abb0;
  4185. display: block;
  4186. z-index: 15;
  4187. -webkit-transform-origin: 50% 100%;
  4188. transform-origin: 50% 100%;
  4189. }
  4190. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  4191. .picker-center-highlight:after {
  4192. -webkit-transform: scaleY(0.5);
  4193. transform: scaleY(0.5);
  4194. }
  4195. }
  4196. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  4197. .picker-center-highlight:after {
  4198. -webkit-transform: scaleY(0.33);
  4199. transform: scaleY(0.33);
  4200. }
  4201. }
  4202. .picker-3d .picker-items {
  4203. overflow: hidden;
  4204. -webkit-perspective: 1200px;
  4205. perspective: 1200px;
  4206. }
  4207. .picker-3d .picker-items-col,
  4208. .picker-3d .picker-items-col-wrapper,
  4209. .picker-3d .picker-item {
  4210. -webkit-transform-style: preserve-3d;
  4211. transform-style: preserve-3d;
  4212. }
  4213. .picker-3d .picker-items-col {
  4214. overflow: visible;
  4215. }
  4216. .picker-3d .picker-item {
  4217. -webkit-transform-origin: center center -110px;
  4218. transform-origin: center center -110px;
  4219. -webkit-backface-visibility: hidden;
  4220. backface-visibility: hidden;
  4221. -webkit-transition-timing-function: ease-out;
  4222. transition-timing-function: ease-out;
  4223. }
  4224. .picker-modal .bar {
  4225. position: relative;
  4226. top: 0;
  4227. }
  4228. .picker-modal .bar:before {
  4229. content: '';
  4230. position: absolute;
  4231. left: 0;
  4232. top: 0;
  4233. bottom: auto;
  4234. right: auto;
  4235. height: 1px;
  4236. width: 100%;
  4237. background-color: #a8abb0;
  4238. display: block;
  4239. z-index: 15;
  4240. -webkit-transform-origin: 50% 0%;
  4241. transform-origin: 50% 0%;
  4242. }
  4243. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  4244. .picker-modal .bar:before {
  4245. -webkit-transform: scaleY(0.5);
  4246. transform: scaleY(0.5);
  4247. }
  4248. }
  4249. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  4250. .picker-modal .bar:before {
  4251. -webkit-transform: scaleY(0.33);
  4252. transform: scaleY(0.33);
  4253. }
  4254. }
  4255. .picker-modal .bar:after {
  4256. content: '';
  4257. position: absolute;
  4258. left: 0;
  4259. bottom: 0;
  4260. right: auto;
  4261. top: auto;
  4262. height: 1px;
  4263. width: 100%;
  4264. background-color: #a8abb0;
  4265. display: block;
  4266. z-index: 15;
  4267. -webkit-transform-origin: 50% 100%;
  4268. transform-origin: 50% 100%;
  4269. }
  4270. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  4271. .picker-modal .bar:after {
  4272. -webkit-transform: scaleY(0.5);
  4273. transform: scaleY(0.5);
  4274. }
  4275. }
  4276. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  4277. .picker-modal .bar:after {
  4278. -webkit-transform: scaleY(0.33);
  4279. transform: scaleY(0.33);
  4280. }
  4281. }
  4282. .picker-modal .bar .title {
  4283. color: #5f646e;
  4284. font-weight: normal;
  4285. }
  4286. .city-picker .col-province {
  4287. width: 5rem;
  4288. }
  4289. .city-picker .col-city {
  4290. width: 6rem;
  4291. }
  4292. .city-picker .col-district {
  4293. width: 5rem;
  4294. }
  4295. @font-face {
  4296. font-family: "iconfont-sm";
  4297. src: url('//at.alicdn.com/t/font_1433401008_2229297.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1433401008_2229297.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1433401008_2229297.svg#iconfont') format('svg');
  4298. /* iOS 4.1- */
  4299. }
  4300. .icon {
  4301. font-family: "iconfont-sm" !important;
  4302. font-style: normal;
  4303. display: inline-block;
  4304. vertical-align: middle;
  4305. background-size: 100% auto;
  4306. background-position: center;
  4307. -webkit-font-smoothing: antialiased;
  4308. -webkit-text-stroke-width: 0.2px;
  4309. -moz-osx-font-smoothing: grayscale;
  4310. }
  4311. .icon-app:before {
  4312. content: "\e605";
  4313. }
  4314. .icon-browser:before {
  4315. content: "\e606";
  4316. }
  4317. .icon-card:before {
  4318. content: "\e607";
  4319. }
  4320. .icon-cart:before {
  4321. content: "\e600";
  4322. }
  4323. .icon-code:before {
  4324. content: "\e609";
  4325. }
  4326. .icon-computer:before {
  4327. content: "\e616";
  4328. }
  4329. .icon-remove:before {
  4330. content: "\e60a";
  4331. }
  4332. .icon-download:before {
  4333. content: "\e60b";
  4334. }
  4335. .icon-edit:before {
  4336. content: "\e60c";
  4337. }
  4338. .icon-emoji:before {
  4339. content: "\e615";
  4340. }
  4341. .icon-star:before {
  4342. content: "\e60e";
  4343. }
  4344. .icon-friends:before {
  4345. content: "\e601";
  4346. }
  4347. .icon-gift:before {
  4348. content: "\e618";
  4349. }
  4350. .icon-phone:before {
  4351. content: "\e60f";
  4352. }
  4353. .icon-clock:before {
  4354. content: "\e619";
  4355. }
  4356. .icon-home:before {
  4357. content: "\e602";
  4358. }
  4359. .icon-menu:before {
  4360. content: "\e60d";
  4361. }
  4362. .icon-message:before {
  4363. content: "\e617";
  4364. }
  4365. .icon-me:before {
  4366. content: "\e603";
  4367. }
  4368. .icon-picture:before {
  4369. content: "\e61a";
  4370. }
  4371. .icon-share:before {
  4372. content: "\e61b";
  4373. }
  4374. .icon-settings:before {
  4375. content: "\e604";
  4376. }
  4377. .icon-refresh:before {
  4378. content: "\e61c";
  4379. }
  4380. .icon-caret:before {
  4381. content: "\e610";
  4382. }
  4383. .icon-down:before {
  4384. content: "\e611";
  4385. }
  4386. .icon-up:before {
  4387. content: "\e612";
  4388. }
  4389. .icon-right:before {
  4390. content: "\e613";
  4391. }
  4392. .icon-left:before {
  4393. content: "\e614";
  4394. }
  4395. .icon-check:before {
  4396. content: "\e608";
  4397. }
  4398. .icon-search:before {
  4399. content: "\e61d";
  4400. }
  4401. .icon-new:before {
  4402. content: "\e61e";
  4403. }
  4404. .icon-next,
  4405. .icon-prev {
  4406. width: 0.75rem;
  4407. height: 0.75rem;
  4408. }
  4409. .icon-next {
  4410. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  4411. }
  4412. .icon-prev {
  4413. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  4414. }
  4415. /*
  4416. .icon-plus {
  4417. width: 1.25rem;
  4418. height: 1.25rem;
  4419. font-size: 1.55rem;
  4420. line-height: 1rem;
  4421. text-align: center;
  4422. font-weight: 100;
  4423. }
  4424. */
  4425. /*==========================
  4426. Framework7 Layouts Themes
  4427. ==========================*/
  4428. /* === Dark layout === */
  4429. .theme-dark {
  4430. background-color: #222426;
  4431. }
  4432. .theme-dark .bar,
  4433. .bar.theme-dark {
  4434. background-color: #131313;
  4435. color: #fff;
  4436. }
  4437. .theme-dark .bar:after,
  4438. .bar.theme-dark:after {
  4439. background-color: #333;
  4440. }
  4441. .theme-dark .title {
  4442. color: #fff;
  4443. }
  4444. .theme-dark .bar-nav,
  4445. .theme-dark .bar-tab,
  4446. .bar-nav.theme-dark,
  4447. .bar-tab.theme-dark {
  4448. background-color: #131313;
  4449. color: #fff;
  4450. }
  4451. .theme-dark .bar-nav:before,
  4452. .theme-dark .bar-tab:before,
  4453. .bar-nav.theme-dark:before,
  4454. .bar-tab.theme-dark:before {
  4455. background-color: #333;
  4456. }
  4457. .theme-dark .tab-item {
  4458. color: #fff;
  4459. }
  4460. .theme-dark .tab-item.active {
  4461. color: #0894ec;
  4462. }
  4463. .theme-dark .picker-calendar-week-days {
  4464. color: #fff;
  4465. background-color: #131313;
  4466. }
  4467. .theme-dark .picker-modal.picker-modal-inline .picker-center-highlight:before {
  4468. background-color: #333;
  4469. }
  4470. .theme-dark .picker-modal.picker-modal-inline .picker-center-highlight:after {
  4471. background-color: #333;
  4472. }
  4473. .theme-dark .picker-modal.picker-modal-inline .picker-item.picker-selected {
  4474. color: #fff;
  4475. }
  4476. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-week-days {
  4477. color: #fff;
  4478. }
  4479. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-day {
  4480. color: #fff;
  4481. }
  4482. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-prev,
  4483. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-next {
  4484. color: #777;
  4485. }
  4486. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-disabled {
  4487. color: #555;
  4488. }
  4489. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-today span {
  4490. background: #444;
  4491. }
  4492. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-week-days:after,
  4493. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-row:after {
  4494. background-color: #333;
  4495. }
  4496. .theme-dark .picker-modal.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  4497. .theme-dark .picker-modal.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  4498. background-color: #333;
  4499. }
  4500. .theme-dark .photo-browser .navbar,
  4501. .photo-browser.theme-dark .navbar,
  4502. .theme-dark .view[data-page="photo-browser-slides"] .navbar,
  4503. .view[data-page="photo-browser-slides"].theme-dark .navbar,
  4504. .theme-dark .photo-browser .toolbar,
  4505. .photo-browser.theme-dark .toolbar,
  4506. .theme-dark .view[data-page="photo-browser-slides"] .toolbar,
  4507. .view[data-page="photo-browser-slides"].theme-dark .toolbar {
  4508. background: rgba(19, 19, 19, 0.95);
  4509. }
  4510. .theme-dark .tabbar a:not(.active) {
  4511. color: #fff;
  4512. }
  4513. .theme-dark .page,
  4514. .theme-dark .login-screen-content,
  4515. .page.theme-dark,
  4516. .theme-dark .panel,
  4517. .panel.theme-dark,
  4518. .theme-dark .content {
  4519. background-color: #222426;
  4520. color: #ddd;
  4521. }
  4522. .theme-dark .content-block-title {
  4523. color: #fff;
  4524. }
  4525. .theme-dark .content-block,
  4526. .content-block.theme-dark {
  4527. color: #bbb;
  4528. }
  4529. .theme-dark .content-block-inner {
  4530. background: #1c1d1f;
  4531. color: #ddd;
  4532. }
  4533. .theme-dark .content-block-inner:before {
  4534. background-color: #393939;
  4535. }
  4536. .theme-dark .content-block-inner:after {
  4537. background-color: #393939;
  4538. }
  4539. .theme-dark .list-block ul,
  4540. .list-block.theme-dark ul {
  4541. background: #1c1d1f;
  4542. }
  4543. .theme-dark .list-block ul:before,
  4544. .list-block.theme-dark ul:before {
  4545. background-color: #393939;
  4546. }
  4547. .theme-dark .list-block ul:after,
  4548. .list-block.theme-dark ul:after {
  4549. background-color: #393939;
  4550. }
  4551. .theme-dark .list-block.inset ul,
  4552. .list-block.theme-dark.inset ul {
  4553. background: #1c1d1f;
  4554. }
  4555. .theme-dark .list-block.notifications > ul,
  4556. .list-block.theme-dark.notifications > ul {
  4557. background: none;
  4558. }
  4559. .theme-dark .list-block .item-title,
  4560. .list-block.theme-dark .item-title,
  4561. .theme-dark .list-block .item-subtitle,
  4562. .list-block.theme-dark .item-subtitle {
  4563. color: #bbb;
  4564. }
  4565. .theme-dark .card {
  4566. background: #1c1d1f;
  4567. }
  4568. .theme-dark .card-header:after {
  4569. background-color: #393939;
  4570. }
  4571. .theme-dark .card-footer {
  4572. color: #bbb;
  4573. }
  4574. .theme-dark .card-footer:before {
  4575. background-color: #393939;
  4576. }
  4577. .theme-dark li.sorting {
  4578. background-color: #29292f;
  4579. }
  4580. .theme-dark .swipeout-actions-left a,
  4581. .theme-dark .swipeout-actions-right a {
  4582. background-color: #444;
  4583. }
  4584. .theme-dark .item-inner:after,
  4585. .theme-dark .list-block ul ul li:last-child .item-inner:after {
  4586. background-color: #393939;
  4587. }
  4588. .theme-dark .item-after {
  4589. color: #bbb;
  4590. }
  4591. html:not(.watch-active-state) .theme-dark .item-link:active,
  4592. html:not(.watch-active-state) .theme-dark label.label-checkbox:active,
  4593. html:not(.watch-active-state) .theme-dark label.label-radio:active,
  4594. .theme-dark .item-link.active-state,
  4595. .theme-dark label.label-checkbox.active-state,
  4596. .theme-dark label.label-radio.active-state {
  4597. background-color: #29292f;
  4598. }
  4599. .theme-dark .item-link.list-button:after {
  4600. background-color: #393939;
  4601. }
  4602. .theme-dark .list-block-label {
  4603. color: #bbb;
  4604. }
  4605. .theme-dark .item-divider,
  4606. .theme-dark .list-group-title {
  4607. background: #1a1a1a;
  4608. color: #bbb;
  4609. }
  4610. .theme-dark .item-divider:before,
  4611. .theme-dark .list-group-title:before {
  4612. background-color: #393939;
  4613. }
  4614. .theme-dark .searchbar {
  4615. background: #333;
  4616. }
  4617. .theme-dark .searchbar:after {
  4618. background-color: #333;
  4619. }
  4620. .theme-dark .list-block input[type="text"],
  4621. .list-block.theme-dark input[type="text"],
  4622. .theme-dark .list-block input[type="password"],
  4623. .list-block.theme-dark input[type="password"],
  4624. .theme-dark .list-block input[type="email"],
  4625. .list-block.theme-dark input[type="email"],
  4626. .theme-dark .list-block input[type="tel"],
  4627. .list-block.theme-dark input[type="tel"],
  4628. .theme-dark .list-block input[type="url"],
  4629. .list-block.theme-dark input[type="url"],
  4630. .theme-dark .list-block input[type="date"],
  4631. .list-block.theme-dark input[type="date"],
  4632. .theme-dark .list-block input[type="datetime-local"],
  4633. .list-block.theme-dark input[type="datetime-local"],
  4634. .theme-dark .list-block input[type="number"],
  4635. .list-block.theme-dark input[type="number"],
  4636. .theme-dark .list-block select,
  4637. .list-block.theme-dark select,
  4638. .theme-dark .list-block textarea,
  4639. .list-block.theme-dark textarea {
  4640. color: #fff;
  4641. }
  4642. .theme-dark .label-switch .checkbox {
  4643. background-color: #393939;
  4644. }
  4645. .theme-dark .label-switch .checkbox:before {
  4646. background-color: #1c1d1f;
  4647. }
  4648. .theme-dark .range-slider input[type="range"]:after {
  4649. background: #1c1d1f;
  4650. }
  4651. .theme-dark .buttons-tab {
  4652. background: #131313;
  4653. }
  4654. .theme-dark .buttons-tab .tab-link:not(.active) {
  4655. color: #ddd;
  4656. }
  4657. /* === White layout === */
  4658. .theme-white .navbar,
  4659. .navbar.theme-white,
  4660. .theme-white .subnavbar,
  4661. .subnavbar.theme-white {
  4662. background-color: #fff;
  4663. color: #000;
  4664. }
  4665. .theme-white .navbar:after,
  4666. .navbar.theme-white:after,
  4667. .theme-white .subnavbar:after,
  4668. .subnavbar.theme-white:after {
  4669. background-color: #ddd;
  4670. }
  4671. .theme-white .toolbar,
  4672. .toolbar.theme-white {
  4673. background-color: #fff;
  4674. color: #000;
  4675. }
  4676. .theme-white .toolbar:before,
  4677. .toolbar.theme-white:before {
  4678. background-color: #ddd;
  4679. }
  4680. .theme-white .picker-modal.picker-modal-inline .picker-center-highlight:before {
  4681. background-color: #ddd;
  4682. }
  4683. .theme-white .picker-modal.picker-modal-inline .picker-center-highlight:after {
  4684. background-color: #ddd;
  4685. }
  4686. .theme-white .picker-modal.picker-modal-inline .picker-calendar-week-days:after,
  4687. .theme-white .picker-modal.picker-modal-inline .picker-calendar-row:after {
  4688. background-color: #ddd;
  4689. }
  4690. .theme-white .picker-modal.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  4691. .theme-white .picker-modal.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  4692. background-color: #ddd;
  4693. }
  4694. .theme-white .photo-browser .navbar,
  4695. .photo-browser.theme-white .navbar,
  4696. .theme-white .view[data-page="photo-browser-slides"] .navbar,
  4697. .view[data-page="photo-browser-slides"].theme-white .navbar,
  4698. .theme-white .photo-browser .toolbar,
  4699. .photo-browser.theme-white .toolbar,
  4700. .theme-white .view[data-page="photo-browser-slides"] .toolbar,
  4701. .view[data-page="photo-browser-slides"].theme-white .toolbar {
  4702. background: rgba(255, 255, 255, 0.95);
  4703. }
  4704. .theme-white .tabbar a:not(.active) {
  4705. color: #777;
  4706. }
  4707. .theme-white .page,
  4708. .theme-white .login-screen-content,
  4709. .page.theme-white,
  4710. .theme-white .panel,
  4711. .panel.theme-white {
  4712. background-color: #fff;
  4713. color: #000;
  4714. }
  4715. .theme-white .content-block-title {
  4716. color: #777;
  4717. }
  4718. .theme-white .content-block,
  4719. .content-block.theme-white {
  4720. color: #777;
  4721. }
  4722. .theme-white .content-block-inner {
  4723. background: #fafafa;
  4724. color: #000;
  4725. }
  4726. .theme-white .content-block-inner:after {
  4727. background-color: #ddd;
  4728. }
  4729. .theme-white .content-block-inner:before {
  4730. background-color: #ddd;
  4731. }
  4732. .theme-white .list-block ul,
  4733. .list-block.theme-white ul {
  4734. background: #fff;
  4735. }
  4736. .theme-white .list-block ul:after,
  4737. .list-block.theme-white ul:after {
  4738. background-color: #ddd;
  4739. }
  4740. .theme-white .list-block ul:before,
  4741. .list-block.theme-white ul:before {
  4742. background-color: #ddd;
  4743. }
  4744. .theme-white .list-block.inset ul,
  4745. .list-block.theme-white.inset ul {
  4746. background: #fafafa;
  4747. }
  4748. .theme-white .list-block.notifications > ul,
  4749. .list-block.theme-white.notifications > ul {
  4750. background: none;
  4751. }
  4752. .theme-white li.sorting {
  4753. background-color: #eee;
  4754. }
  4755. .theme-white .swipeout-actions-left a,
  4756. .theme-white .swipeout-actions-right a {
  4757. background-color: #c7c7cc;
  4758. }
  4759. .theme-white .item-inner,
  4760. .theme-white .list-block ul ul li:last-child .item-inner {
  4761. border-color: #ddd;
  4762. }
  4763. .theme-white .item-inner:after,
  4764. .theme-white .list-block ul ul li:last-child .item-inner:after {
  4765. background-color: #ddd;
  4766. }
  4767. .theme-white .item-after {
  4768. color: #8e8e93;
  4769. }
  4770. html:not(.watch-active-state) .theme-white .item-link:active,
  4771. html:not(.watch-active-state) .theme-white label.label-checkbox:active,
  4772. html:not(.watch-active-state) .theme-white label.label-radio:active,
  4773. .theme-white .item-link.active-state,
  4774. .theme-white label.label-checkbox.active-state,
  4775. .theme-white label.label-radio.active-state {
  4776. background-color: #eee;
  4777. }
  4778. .theme-white .item-link.list-button:after {
  4779. background-color: #ddd;
  4780. }
  4781. .theme-white .list-block-label {
  4782. color: #777;
  4783. }
  4784. .theme-white .item-divider,
  4785. .theme-white .list-group-title {
  4786. background: #f7f7f7;
  4787. color: #777;
  4788. }
  4789. .theme-white .item-divider:before,
  4790. .theme-white .list-group-title:before {
  4791. background-color: #ddd;
  4792. }
  4793. .theme-white .searchbar {
  4794. background: #c9c9ce;
  4795. }
  4796. .theme-white .searchbar:after {
  4797. background-color: #b4b4b4;
  4798. }
  4799. .theme-white .list-block input[type="text"],
  4800. .list-block.theme-white input[type="text"],
  4801. .theme-white .list-block input[type="password"],
  4802. .list-block.theme-white input[type="password"],
  4803. .theme-white .list-block input[type="email"],
  4804. .list-block.theme-white input[type="email"],
  4805. .theme-white .list-block input[type="tel"],
  4806. .list-block.theme-white input[type="tel"],
  4807. .theme-white .list-block input[type="url"],
  4808. .list-block.theme-white input[type="url"],
  4809. .theme-white .list-block input[type="date"],
  4810. .list-block.theme-white input[type="date"],
  4811. .theme-white .list-block input[type="datetime-local"],
  4812. .list-block.theme-white input[type="datetime-local"],
  4813. .theme-white .list-block input[type="number"],
  4814. .list-block.theme-white input[type="number"],
  4815. .theme-white .list-block select,
  4816. .list-block.theme-white select,
  4817. .theme-white .list-block textarea,
  4818. .list-block.theme-white textarea {
  4819. color: #777;
  4820. }
  4821. .theme-white .label-switch .checkbox {
  4822. background-color: #e5e5e5;
  4823. }
  4824. .theme-white .label-switch .checkbox:before {
  4825. background-color: #fff;
  4826. }
  4827. .theme-white .range-slider input[type="range"]:after {
  4828. background: #fff;
  4829. }