zammad.scss 238 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518751975207521752275237524752575267527752875297530753175327533753475357536753775387539754075417542754375447545754675477548754975507551755275537554755575567557755875597560756175627563756475657566756775687569757075717572757375747575757675777578757975807581758275837584758575867587758875897590759175927593759475957596759775987599760076017602760376047605760676077608760976107611761276137614761576167617761876197620762176227623762476257626762776287629763076317632763376347635763676377638763976407641764276437644764576467647764876497650765176527653765476557656765776587659766076617662766376647665766676677668766976707671767276737674767576767677767876797680768176827683768476857686768776887689769076917692769376947695769676977698769977007701770277037704770577067707770877097710771177127713771477157716771777187719772077217722772377247725772677277728772977307731773277337734773577367737773877397740774177427743774477457746774777487749775077517752775377547755775677577758775977607761776277637764776577667767776877697770777177727773777477757776777777787779778077817782778377847785778677877788778977907791779277937794779577967797779877997800780178027803780478057806780778087809781078117812781378147815781678177818781978207821782278237824782578267827782878297830783178327833783478357836783778387839784078417842784378447845784678477848784978507851785278537854785578567857785878597860786178627863786478657866786778687869787078717872787378747875787678777878787978807881788278837884788578867887788878897890789178927893789478957896789778987899790079017902790379047905790679077908790979107911791279137914791579167917791879197920792179227923792479257926792779287929793079317932793379347935793679377938793979407941794279437944794579467947794879497950795179527953795479557956795779587959796079617962796379647965796679677968796979707971797279737974797579767977797879797980798179827983798479857986798779887989799079917992799379947995799679977998799980008001800280038004800580068007800880098010801180128013801480158016801780188019802080218022802380248025802680278028802980308031803280338034803580368037803880398040804180428043804480458046804780488049805080518052805380548055805680578058805980608061806280638064806580668067806880698070807180728073807480758076807780788079808080818082808380848085808680878088808980908091809280938094809580968097809880998100810181028103810481058106810781088109811081118112811381148115811681178118811981208121812281238124812581268127812881298130813181328133813481358136813781388139814081418142814381448145814681478148814981508151815281538154815581568157815881598160816181628163816481658166816781688169817081718172817381748175817681778178817981808181818281838184818581868187818881898190819181928193819481958196819781988199820082018202820382048205820682078208820982108211821282138214821582168217821882198220822182228223822482258226822782288229823082318232823382348235823682378238823982408241824282438244824582468247824882498250825182528253825482558256825782588259826082618262826382648265826682678268826982708271827282738274827582768277827882798280828182828283828482858286828782888289829082918292829382948295829682978298829983008301830283038304830583068307830883098310831183128313831483158316831783188319832083218322832383248325832683278328832983308331833283338334833583368337833883398340834183428343834483458346834783488349835083518352835383548355835683578358835983608361836283638364836583668367836883698370837183728373837483758376837783788379838083818382838383848385838683878388838983908391839283938394839583968397839883998400840184028403840484058406840784088409841084118412841384148415841684178418841984208421842284238424842584268427842884298430843184328433843484358436843784388439844084418442844384448445844684478448844984508451845284538454845584568457845884598460846184628463846484658466846784688469847084718472847384748475847684778478847984808481848284838484848584868487848884898490849184928493849484958496849784988499850085018502850385048505850685078508850985108511851285138514851585168517851885198520852185228523852485258526852785288529853085318532853385348535853685378538853985408541854285438544854585468547854885498550855185528553855485558556855785588559856085618562856385648565856685678568856985708571857285738574857585768577857885798580858185828583858485858586858785888589859085918592859385948595859685978598859986008601860286038604860586068607860886098610861186128613861486158616861786188619862086218622862386248625862686278628862986308631863286338634863586368637863886398640864186428643864486458646864786488649865086518652865386548655865686578658865986608661866286638664866586668667866886698670867186728673867486758676867786788679868086818682868386848685868686878688868986908691869286938694869586968697869886998700870187028703870487058706870787088709871087118712871387148715871687178718871987208721872287238724872587268727872887298730873187328733873487358736873787388739874087418742874387448745874687478748874987508751875287538754875587568757875887598760876187628763876487658766876787688769877087718772877387748775877687778778877987808781878287838784878587868787878887898790879187928793879487958796879787988799880088018802880388048805880688078808880988108811881288138814881588168817881888198820882188228823882488258826882788288829883088318832883388348835883688378838883988408841884288438844884588468847884888498850885188528853885488558856885788588859886088618862886388648865886688678868886988708871887288738874887588768877887888798880888188828883888488858886888788888889889088918892889388948895889688978898889989008901890289038904890589068907890889098910891189128913891489158916891789188919892089218922892389248925892689278928892989308931893289338934893589368937893889398940894189428943894489458946894789488949895089518952895389548955895689578958895989608961896289638964896589668967896889698970897189728973897489758976897789788979898089818982898389848985898689878988898989908991899289938994899589968997899889999000900190029003900490059006900790089009901090119012901390149015901690179018901990209021902290239024902590269027902890299030903190329033903490359036903790389039904090419042904390449045904690479048904990509051905290539054905590569057905890599060906190629063906490659066906790689069907090719072907390749075907690779078907990809081908290839084908590869087908890899090909190929093909490959096909790989099910091019102910391049105910691079108910991109111911291139114911591169117911891199120912191229123912491259126912791289129913091319132913391349135913691379138913991409141914291439144914591469147914891499150915191529153915491559156915791589159916091619162916391649165916691679168916991709171917291739174917591769177917891799180918191829183918491859186918791889189919091919192919391949195919691979198919992009201920292039204920592069207920892099210921192129213921492159216921792189219922092219222922392249225922692279228922992309231923292339234923592369237923892399240924192429243924492459246924792489249925092519252925392549255925692579258925992609261926292639264926592669267926892699270927192729273927492759276927792789279928092819282928392849285928692879288928992909291929292939294929592969297929892999300930193029303930493059306930793089309931093119312931393149315931693179318931993209321932293239324932593269327932893299330933193329333933493359336933793389339934093419342934393449345934693479348934993509351935293539354935593569357935893599360936193629363936493659366936793689369937093719372937393749375937693779378937993809381938293839384938593869387938893899390939193929393939493959396939793989399940094019402940394049405940694079408940994109411941294139414941594169417941894199420942194229423942494259426942794289429943094319432943394349435943694379438943994409441944294439444944594469447944894499450945194529453945494559456945794589459946094619462946394649465946694679468946994709471947294739474947594769477947894799480948194829483948494859486948794889489949094919492949394949495949694979498949995009501950295039504950595069507950895099510951195129513951495159516951795189519952095219522952395249525952695279528952995309531953295339534953595369537953895399540954195429543954495459546954795489549955095519552955395549555955695579558955995609561956295639564956595669567956895699570957195729573957495759576957795789579958095819582958395849585958695879588958995909591959295939594959595969597959895999600960196029603960496059606960796089609961096119612961396149615961696179618961996209621962296239624962596269627962896299630963196329633963496359636963796389639964096419642964396449645964696479648964996509651965296539654965596569657965896599660966196629663966496659666966796689669967096719672967396749675967696779678967996809681968296839684968596869687968896899690969196929693969496959696969796989699970097019702970397049705970697079708970997109711971297139714971597169717971897199720972197229723972497259726972797289729973097319732973397349735973697379738973997409741974297439744974597469747974897499750975197529753975497559756975797589759976097619762976397649765976697679768976997709771977297739774977597769777977897799780978197829783978497859786978797889789979097919792979397949795979697979798979998009801980298039804980598069807980898099810981198129813981498159816981798189819982098219822982398249825982698279828982998309831983298339834983598369837983898399840984198429843984498459846984798489849985098519852985398549855985698579858985998609861986298639864986598669867986898699870987198729873987498759876987798789879988098819882988398849885988698879888988998909891989298939894989598969897989898999900990199029903990499059906990799089909991099119912991399149915991699179918991999209921992299239924992599269927992899299930993199329933993499359936993799389939994099419942994399449945994699479948994999509951995299539954995599569957995899599960996199629963996499659966996799689969997099719972997399749975997699779978997999809981998299839984998599869987998899899990999199929993999499959996999799989999100001000110002100031000410005100061000710008100091001010011100121001310014100151001610017100181001910020100211002210023100241002510026100271002810029100301003110032100331003410035100361003710038100391004010041100421004310044100451004610047100481004910050100511005210053100541005510056100571005810059100601006110062100631006410065100661006710068100691007010071100721007310074100751007610077100781007910080100811008210083100841008510086100871008810089100901009110092100931009410095100961009710098100991010010101101021010310104101051010610107101081010910110101111011210113101141011510116101171011810119101201012110122101231012410125101261012710128101291013010131101321013310134101351013610137101381013910140101411014210143101441014510146101471014810149101501015110152101531015410155101561015710158101591016010161101621016310164101651016610167101681016910170101711017210173101741017510176101771017810179101801018110182101831018410185101861018710188101891019010191101921019310194101951019610197101981019910200102011020210203102041020510206102071020810209102101021110212102131021410215102161021710218102191022010221102221022310224102251022610227102281022910230102311023210233102341023510236102371023810239102401024110242102431024410245102461024710248102491025010251102521025310254102551025610257102581025910260102611026210263102641026510266102671026810269102701027110272102731027410275102761027710278102791028010281102821028310284102851028610287102881028910290102911029210293102941029510296102971029810299103001030110302103031030410305103061030710308103091031010311103121031310314103151031610317103181031910320103211032210323103241032510326103271032810329103301033110332103331033410335103361033710338103391034010341103421034310344103451034610347103481034910350103511035210353103541035510356103571035810359103601036110362103631036410365103661036710368103691037010371103721037310374103751037610377103781037910380103811038210383103841038510386103871038810389103901039110392103931039410395103961039710398103991040010401104021040310404104051040610407104081040910410104111041210413104141041510416104171041810419104201042110422104231042410425104261042710428104291043010431104321043310434104351043610437104381043910440104411044210443104441044510446104471044810449104501045110452104531045410455104561045710458104591046010461104621046310464104651046610467104681046910470104711047210473104741047510476104771047810479104801048110482104831048410485104861048710488104891049010491104921049310494104951049610497104981049910500105011050210503105041050510506105071050810509105101051110512105131051410515105161051710518105191052010521105221052310524105251052610527105281052910530105311053210533105341053510536105371053810539105401054110542105431054410545105461054710548105491055010551105521055310554105551055610557105581055910560105611056210563105641056510566105671056810569105701057110572105731057410575105761057710578105791058010581105821058310584105851058610587105881058910590105911059210593105941059510596105971059810599106001060110602106031060410605106061060710608106091061010611106121061310614106151061610617106181061910620106211062210623106241062510626106271062810629106301063110632106331063410635106361063710638106391064010641106421064310644106451064610647106481064910650106511065210653106541065510656106571065810659106601066110662106631066410665106661066710668106691067010671106721067310674106751067610677106781067910680106811068210683106841068510686106871068810689106901069110692106931069410695106961069710698106991070010701107021070310704107051070610707107081070910710107111071210713107141071510716107171071810719107201072110722107231072410725107261072710728107291073010731107321073310734107351073610737107381073910740107411074210743107441074510746107471074810749107501075110752107531075410755107561075710758107591076010761107621076310764107651076610767107681076910770107711077210773107741077510776107771077810779107801078110782107831078410785107861078710788107891079010791107921079310794107951079610797107981079910800108011080210803108041080510806108071080810809108101081110812108131081410815108161081710818108191082010821108221082310824108251082610827108281082910830108311083210833108341083510836108371083810839108401084110842108431084410845108461084710848108491085010851108521085310854108551085610857108581085910860108611086210863108641086510866108671086810869108701087110872108731087410875108761087710878108791088010881108821088310884108851088610887108881088910890108911089210893108941089510896108971089810899109001090110902109031090410905109061090710908109091091010911109121091310914109151091610917109181091910920109211092210923109241092510926109271092810929109301093110932109331093410935109361093710938109391094010941109421094310944109451094610947109481094910950109511095210953109541095510956109571095810959109601096110962109631096410965109661096710968109691097010971109721097310974109751097610977109781097910980109811098210983109841098510986109871098810989109901099110992109931099410995109961099710998109991100011001110021100311004110051100611007110081100911010110111101211013110141101511016110171101811019110201102111022110231102411025110261102711028110291103011031110321103311034110351103611037110381103911040110411104211043110441104511046110471104811049110501105111052110531105411055110561105711058110591106011061110621106311064110651106611067110681106911070110711107211073110741107511076110771107811079110801108111082110831108411085110861108711088110891109011091110921109311094110951109611097110981109911100111011110211103111041110511106111071110811109111101111111112111131111411115111161111711118111191112011121111221112311124111251112611127111281112911130111311113211133111341113511136111371113811139111401114111142111431114411145111461114711148111491115011151111521115311154111551115611157111581115911160111611116211163111641116511166111671116811169111701117111172111731117411175111761117711178111791118011181111821118311184111851118611187111881118911190111911119211193111941119511196111971119811199112001120111202112031120411205112061120711208112091121011211112121121311214112151121611217112181121911220112211122211223112241122511226112271122811229112301123111232112331123411235112361123711238112391124011241112421124311244112451124611247112481124911250112511125211253112541125511256112571125811259112601126111262112631126411265112661126711268112691127011271112721127311274112751127611277112781127911280112811128211283112841128511286112871128811289112901129111292112931129411295112961129711298112991130011301113021130311304113051130611307113081130911310113111131211313113141131511316113171131811319113201132111322113231132411325113261132711328113291133011331113321133311334113351133611337113381133911340113411134211343113441134511346113471134811349113501135111352113531135411355113561135711358113591136011361113621136311364113651136611367113681136911370113711137211373113741137511376113771137811379113801138111382113831138411385113861138711388113891139011391113921139311394113951139611397113981139911400114011140211403114041140511406114071140811409114101141111412114131141411415114161141711418114191142011421114221142311424114251142611427114281142911430114311143211433114341143511436114371143811439114401144111442114431144411445114461144711448114491145011451114521145311454114551145611457114581145911460114611146211463114641146511466114671146811469114701147111472114731147411475114761147711478114791148011481114821148311484114851148611487114881148911490114911149211493114941149511496114971149811499115001150111502115031150411505115061150711508115091151011511115121151311514115151151611517115181151911520115211152211523115241152511526115271152811529115301153111532115331153411535115361153711538115391154011541115421154311544115451154611547115481154911550115511155211553115541155511556115571155811559115601156111562115631156411565115661156711568115691157011571115721157311574115751157611577115781157911580115811158211583115841158511586115871158811589115901159111592115931159411595115961159711598115991160011601116021160311604116051160611607116081160911610116111161211613116141161511616116171161811619116201162111622116231162411625116261162711628116291163011631116321163311634116351163611637116381163911640116411164211643116441164511646116471164811649116501165111652116531165411655116561165711658116591166011661116621166311664116651166611667116681166911670116711167211673116741167511676116771167811679116801168111682116831168411685116861168711688116891169011691116921169311694116951169611697116981169911700117011170211703117041170511706117071170811709117101171111712117131171411715117161171711718117191172011721117221172311724117251172611727117281172911730117311173211733117341173511736117371173811739117401174111742117431174411745117461174711748117491175011751117521175311754117551175611757117581175911760117611176211763117641176511766117671176811769117701177111772117731177411775117761177711778117791178011781117821178311784117851178611787117881178911790117911179211793117941179511796117971179811799118001180111802118031180411805118061180711808118091181011811118121181311814118151181611817118181181911820118211182211823118241182511826118271182811829118301183111832118331183411835118361183711838118391184011841118421184311844118451184611847118481184911850118511185211853118541185511856118571185811859118601186111862118631186411865118661186711868118691187011871118721187311874118751187611877118781187911880118811188211883118841188511886118871188811889118901189111892118931189411895118961189711898118991190011901119021190311904119051190611907119081190911910119111191211913119141191511916119171191811919119201192111922119231192411925119261192711928119291193011931119321193311934119351193611937119381193911940119411194211943119441194511946119471194811949119501195111952119531195411955119561195711958119591196011961119621196311964119651196611967119681196911970119711197211973119741197511976119771197811979119801198111982119831198411985119861198711988119891199011991119921199311994119951199611997119981199912000120011200212003120041200512006120071200812009120101201112012120131201412015120161201712018120191202012021120221202312024120251202612027120281202912030120311203212033120341203512036120371203812039120401204112042120431204412045120461204712048120491205012051120521205312054120551205612057120581205912060120611206212063120641206512066120671206812069120701207112072120731207412075120761207712078120791208012081120821208312084120851208612087120881208912090120911209212093120941209512096120971209812099121001210112102121031210412105121061210712108121091211012111121121211312114121151211612117121181211912120121211212212123121241212512126121271212812129121301213112132121331213412135121361213712138121391214012141121421214312144121451214612147121481214912150121511215212153121541215512156121571215812159121601216112162121631216412165121661216712168121691217012171121721217312174121751217612177121781217912180121811218212183121841218512186121871218812189121901219112192121931219412195121961219712198121991220012201122021220312204122051220612207122081220912210122111221212213122141221512216122171221812219122201222112222122231222412225122261222712228122291223012231122321223312234122351223612237122381223912240122411224212243122441224512246122471224812249122501225112252122531225412255122561225712258122591226012261122621226312264122651226612267122681226912270122711227212273122741227512276122771227812279122801228112282122831228412285122861228712288122891229012291122921229312294122951229612297122981229912300123011230212303123041230512306123071230812309123101231112312123131231412315123161231712318123191232012321123221232312324123251232612327123281232912330123311233212333123341233512336123371233812339123401234112342123431234412345123461234712348123491235012351123521235312354123551235612357123581235912360123611236212363123641236512366123671236812369123701237112372123731237412375123761237712378123791238012381123821238312384123851238612387123881238912390123911239212393123941239512396123971239812399124001240112402124031240412405124061240712408124091241012411124121241312414124151241612417124181241912420124211242212423124241242512426124271242812429124301243112432124331243412435124361243712438124391244012441124421244312444124451244612447124481244912450124511245212453124541245512456124571245812459124601246112462124631246412465124661246712468124691247012471124721247312474124751247612477124781247912480124811248212483124841248512486124871248812489124901249112492124931249412495124961249712498124991250012501125021250312504125051250612507125081250912510125111251212513125141251512516125171251812519125201252112522125231252412525125261252712528125291253012531125321253312534125351253612537125381253912540125411254212543125441254512546125471254812549125501255112552125531255412555125561255712558125591256012561125621256312564125651256612567125681256912570125711257212573125741257512576125771257812579125801258112582125831258412585125861258712588125891259012591125921259312594125951259612597125981259912600126011260212603126041260512606126071260812609126101261112612126131261412615126161261712618126191262012621126221262312624126251262612627126281262912630126311263212633126341263512636126371263812639126401264112642126431264412645126461264712648126491265012651126521265312654126551265612657126581265912660126611266212663126641266512666126671266812669126701267112672126731267412675126761267712678126791268012681126821268312684126851268612687126881268912690126911269212693126941269512696126971269812699127001270112702127031270412705127061270712708127091271012711127121271312714127151271612717127181271912720127211272212723127241272512726127271272812729127301273112732127331273412735127361273712738127391274012741127421274312744127451274612747127481274912750127511275212753127541275512756127571275812759127601276112762127631276412765127661276712768127691277012771127721277312774127751277612777127781277912780127811278212783127841278512786127871278812789127901279112792127931279412795127961279712798127991280012801128021280312804128051280612807128081280912810128111281212813128141281512816128171281812819128201282112822128231282412825128261282712828128291283012831128321283312834128351283612837128381283912840128411284212843128441284512846128471284812849128501285112852128531285412855128561285712858128591286012861128621286312864128651286612867128681286912870128711287212873128741287512876128771287812879128801288112882128831288412885128861288712888128891289012891128921289312894128951289612897128981289912900129011290212903129041290512906129071290812909129101291112912129131291412915129161291712918129191292012921129221292312924129251292612927129281292912930129311293212933129341293512936129371293812939129401294112942129431294412945129461294712948129491295012951129521295312954129551295612957129581295912960129611296212963129641296512966129671296812969129701297112972129731297412975129761297712978129791298012981129821298312984129851298612987129881298912990129911299212993129941299512996129971299812999130001300113002130031300413005130061300713008130091301013011130121301313014130151301613017130181301913020130211302213023130241302513026130271302813029130301303113032130331303413035130361303713038130391304013041130421304313044130451304613047130481304913050130511305213053130541305513056130571305813059130601306113062130631306413065130661306713068130691307013071130721307313074130751307613077130781307913080130811308213083130841308513086130871308813089130901309113092130931309413095130961309713098130991310013101131021310313104131051310613107131081310913110131111311213113131141311513116131171311813119131201312113122131231312413125131261312713128131291313013131131321313313134131351313613137131381313913140131411314213143131441314513146131471314813149131501315113152131531315413155131561315713158131591316013161131621316313164131651316613167131681316913170131711317213173131741317513176131771317813179131801318113182131831318413185131861318713188131891319013191131921319313194131951319613197131981319913200132011320213203132041320513206132071320813209132101321113212132131321413215132161321713218132191322013221132221322313224132251322613227132281322913230132311323213233132341323513236132371323813239132401324113242132431324413245132461324713248132491325013251132521325313254132551325613257132581325913260132611326213263132641326513266132671326813269132701327113272132731327413275132761327713278132791328013281132821328313284132851328613287132881328913290132911329213293132941329513296132971329813299133001330113302133031330413305133061330713308133091331013311133121331313314133151331613317133181331913320133211332213323133241332513326133271332813329133301333113332133331333413335133361333713338133391334013341133421334313344133451334613347133481334913350133511335213353133541335513356133571335813359133601336113362133631336413365133661336713368133691337013371133721337313374133751337613377133781337913380133811338213383133841338513386133871338813389133901339113392133931339413395133961339713398133991340013401134021340313404134051340613407134081340913410134111341213413134141341513416134171341813419134201342113422134231342413425134261342713428134291343013431134321343313434134351343613437134381343913440134411344213443134441344513446134471344813449134501345113452134531345413455134561345713458134591346013461134621346313464134651346613467134681346913470134711347213473134741347513476134771347813479134801348113482134831348413485134861348713488134891349013491134921349313494134951349613497134981349913500135011350213503135041350513506135071350813509135101351113512135131351413515135161351713518135191352013521135221352313524135251352613527135281352913530135311353213533135341353513536135371353813539135401354113542135431354413545135461354713548135491355013551135521355313554135551355613557135581355913560135611356213563135641356513566135671356813569135701357113572135731357413575135761357713578135791358013581135821358313584135851358613587135881358913590135911359213593135941359513596135971359813599136001360113602136031360413605136061360713608136091361013611136121361313614136151361613617136181361913620136211362213623136241362513626136271362813629136301363113632136331363413635136361363713638136391364013641136421364313644136451364613647136481364913650136511365213653136541365513656136571365813659136601366113662136631366413665136661366713668136691367013671136721367313674136751367613677136781367913680136811368213683136841368513686136871368813689136901369113692136931369413695136961369713698136991370013701137021370313704137051370613707137081370913710137111371213713137141371513716137171371813719137201372113722137231372413725137261372713728137291373013731137321373313734137351373613737137381373913740137411374213743137441374513746137471374813749137501375113752137531375413755137561375713758137591376013761137621376313764137651376613767137681376913770137711377213773137741377513776137771377813779137801378113782137831378413785137861378713788137891379013791137921379313794137951379613797137981379913800138011380213803138041380513806138071380813809138101381113812138131381413815138161381713818138191382013821138221382313824138251382613827138281382913830138311383213833138341383513836138371383813839138401384113842138431384413845138461384713848138491385013851138521385313854138551385613857138581385913860138611386213863138641386513866138671386813869138701387113872138731387413875138761387713878138791388013881138821388313884138851388613887138881388913890138911389213893138941389513896138971389813899139001390113902139031390413905139061390713908139091391013911139121391313914139151391613917139181391913920139211392213923139241392513926139271392813929139301393113932139331393413935139361393713938139391394013941139421394313944139451394613947139481394913950139511395213953139541395513956139571395813959139601396113962139631396413965139661396713968139691397013971139721397313974139751397613977139781397913980139811398213983139841398513986139871398813989139901399113992139931399413995139961399713998139991400014001140021400314004140051400614007140081400914010140111401214013140141401514016140171401814019140201402114022140231402414025140261402714028140291403014031140321403314034140351403614037140381403914040140411404214043140441404514046140471404814049140501405114052140531405414055140561405714058140591406014061140621406314064140651406614067140681406914070140711407214073140741407514076140771407814079140801408114082140831408414085140861408714088140891409014091140921409314094140951409614097140981409914100141011410214103141041410514106141071410814109141101411114112141131411414115141161411714118141191412014121141221412314124141251412614127141281412914130141311413214133141341413514136141371413814139141401414114142141431414414145141461414714148141491415014151141521415314154141551415614157141581415914160141611416214163141641416514166141671416814169141701417114172141731417414175141761417714178141791418014181141821418314184141851418614187141881418914190141911419214193141941419514196141971419814199142001420114202142031420414205142061420714208142091421014211142121421314214142151421614217142181421914220142211422214223142241422514226142271422814229142301423114232142331423414235142361423714238142391424014241142421424314244142451424614247142481424914250142511425214253142541425514256142571425814259142601426114262142631426414265142661426714268142691427014271142721427314274142751427614277142781427914280142811428214283142841428514286142871428814289142901429114292142931429414295142961429714298142991430014301143021430314304143051430614307143081430914310143111431214313143141431514316143171431814319143201432114322143231432414325143261432714328143291433014331143321433314334143351433614337143381433914340143411434214343143441434514346143471434814349143501435114352143531435414355143561435714358143591436014361143621436314364143651436614367143681436914370143711437214373143741437514376143771437814379143801438114382143831438414385143861438714388143891439014391143921439314394143951439614397143981439914400144011440214403144041440514406144071440814409144101441114412144131441414415144161441714418144191442014421144221442314424144251442614427144281442914430144311443214433144341443514436144371443814439144401444114442144431444414445144461444714448144491445014451144521445314454144551445614457144581445914460144611446214463144641446514466144671446814469144701447114472144731447414475144761447714478144791448014481144821448314484144851448614487144881448914490144911449214493144941449514496144971449814499145001450114502145031450414505145061450714508145091451014511145121451314514145151451614517145181451914520145211452214523145241452514526145271452814529145301453114532145331453414535145361453714538145391454014541145421454314544145451454614547145481454914550145511455214553145541455514556145571455814559145601456114562145631456414565145661456714568145691457014571145721457314574145751457614577145781457914580145811458214583145841458514586145871458814589145901459114592145931459414595145961459714598145991460014601146021460314604146051460614607146081460914610146111461214613146141461514616146171461814619146201462114622146231462414625146261462714628146291463014631146321463314634146351463614637146381463914640146411464214643146441464514646146471464814649146501465114652146531465414655146561465714658146591466014661146621466314664146651466614667146681466914670146711467214673146741467514676146771467814679146801468114682146831468414685146861468714688146891469014691146921469314694146951469614697146981469914700147011470214703147041470514706147071470814709147101471114712147131471414715147161471714718147191472014721147221472314724147251472614727147281472914730147311473214733147341473514736147371473814739147401474114742147431474414745147461474714748147491475014751147521475314754147551475614757147581475914760147611476214763147641476514766147671476814769147701477114772147731477414775147761477714778147791478014781147821478314784147851478614787147881478914790147911479214793147941479514796147971479814799
  1. $high-priority-color: hsl(360, 71%, 60%);
  2. $low-priority-color: hsl(200, 68%, 73%);
  3. $minWidth: 1024px;
  4. $sidebarWidth: 280px;
  5. $desktopSidebarWidth: 360px;
  6. $navigationWidth: 260px;
  7. $mobileNavigationWidth: 50px;
  8. $mobileNavigationWidthOpen: 220px;
  9. :root {
  10. --button-action-color: hsl(0, 0%, 60%);
  11. --button-background: white;
  12. --button-background-active: hsl(0, 0, 98%);
  13. --button-active: hsl(204, 7%, 28%);
  14. --button-active-active: hsla(0, 0%, 0%, 0.55);
  15. --button-primary-text: var(--text-inverted);
  16. --button-primary-background: hsl(203, 65%, 55%);
  17. --button-primary-background-active: hsl(203, 65%, 45%);
  18. --header-primary: hsl(202, 8%, 28%);
  19. --header-secondary: hsl(198, 10%, 69%);
  20. --text-normal: hsl(60, 1%, 34%);
  21. --text-muted: hsl(213, 3%, 64%);
  22. --text-muted-highlight: hsl(205, 90%, 90%);
  23. --text-muted-alt: hsl(197, 16%, 65%);
  24. --text-link: hsl(204, 72%, 50%);
  25. --text-inverted: white;
  26. --text-active: white;
  27. --text-nav: hsl(204, 72%, 50%);
  28. --text-button-primary: var(--button-primary-background);
  29. --text-button-primary-active: var(--button-primary-background-active);
  30. --text-button-secondary: var(--interactive-muted);
  31. --nav-icon: hsl(0, 0%, 50%);
  32. --highlight: hsl(205, 90%, 60%);
  33. --interactive-primary: black;
  34. --interactive-muted: hsl(210, 3%, 71%);
  35. --interactive-muted-active: hsl(210, 4%, 71%);
  36. --interactive-muted-alt: hsl(197, 19%, 78%);
  37. --interactive-muted-alt-selected: hsl(206, 7%, 37%);
  38. --background-primary: hsl(210, 17%, 98%);
  39. --background-primary-alt: hsl(197, 16%, 94%);
  40. --background-secondary: white;
  41. --background-secondary-hover: hsl(239, 4%, 95%);
  42. --background-tertiary: hsl(233, 9%, 19%);
  43. --background-quaternary: hsl(231, 9%, 16%);
  44. --background-quaternary-alt: hsl(228, 17%, 91%);
  45. --background-popover: white;
  46. --background-active: hsl(233, 9%, 19%);
  47. --background-highlight: hsl(200, 100%, 91%);
  48. --background-article-meta: hsl(212, 14%, 99%);
  49. --background-article-customer: hsl(201, 46%, 93%);
  50. --background-article-customer-meta: hsl(201, 43%, 96%);
  51. --background-modifier-accent: hsla(0, 0%, 0%, 0.04);
  52. --background-modifier-accent-light: hsla(0, 0%, 0%, 0.02);
  53. --background-modifier-accent-dark: hsla(0, 0%, 0%, 0.3);
  54. --background-modifier-lighter: hsla(0, 0%, 100%, 0.06);
  55. --background-modifier-border: hsla(0, 0%, 0%, 0.1);
  56. --background-modifier-hover: hsla(240, 3%, 50%, 0.1);
  57. --backdrop-clue-start: hsla(202, 68%, 54%, 0.1);
  58. --backdrop-clue-end: hsla(202, 68%, 54%, 0.9);
  59. --border: hsl(0, 0%, 90%);
  60. --border-alt: hsl(198, 18%, 86%);
  61. --border-highlight: hsl(200, 71%, 59%);
  62. --border-internal: hsl(18, 91%, 89%);
  63. --border-internal-stripe: hsl(18, 94%, 95%);
  64. --border-article-customer: hsl(199, 38%, 90%);
  65. --border-article-customer-selected: hsl(199, 44%, 85%);
  66. --shadow-highlight: hsl(201, 62%, 90%);
  67. --supergood-color: hsl(145, 51%, 45%);
  68. --good-color: hsl(62, 45%, 46%);
  69. --ok-color: hsl(41, 100%, 49%);
  70. --bad-color: hsl(30, 93%, 50%);
  71. --superbad-color: hsl(19, 90%, 51%);
  72. --ghost-color: hsl(0, 0%, 74%);
  73. --danger-color: hsl(0, 65%, 55%);
  74. --pending-color: hsl(206, 7%, 28%);
  75. --elevation-stroke: 0 1px hsl(210, 7%, 94%);
  76. --elevation-low: 0 1px 5px hsla(205, 30%, 30%, 0.1);
  77. --elevation-high: 0 1px 14px hsla(208, 95%, 3%, 0.25);
  78. --highlighter-yellow: hsl(48, 81%, 82%);
  79. --highlighter-green: hsl(105, 54%, 80%);
  80. --highlighter-blue: hsl(207, 92%, 85%);
  81. --highlighter-pink: hsl(338, 90%, 82%);
  82. --highlighter-purple: hsl(288, 62%, 86%);
  83. --file-icon-background: white;
  84. --file-icon-color: hsl(198, 18%, 86%);
  85. --tag-text: hsl(198, 5%, 41%);
  86. --tag-background: hsl(198, 19%, 92%);
  87. --fullscreen-background: var(--background-tertiary);
  88. --fullscreen-text: var(--text-muted);
  89. --fullscreen-text-link: var(--text-inverted);
  90. --fullscreen-text-muted: hsl(233, 7%, 26%);
  91. --fullscreen-drop-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
  92. 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  93. --menu-text: hsl(0, 0%, 74%);
  94. --menu-text-active: white;
  95. --menu-text-open: white;
  96. --menu-text-closed: white;
  97. --menu-text-escalating: white;
  98. --menu-background-active: var(--button-primary-background);
  99. --menu-icon: hsl(206, 5%, 42%);
  100. --menu-icon-secondary: hsl(0, 0%, 30%);
  101. --menu-icon-secondary-hover-background: var(--text-inverted);
  102. --menu-switch-background: hsl(0, 0%, 5%);
  103. --menu-switch-pointer: var(--background-tertiary);
  104. --menu-switch-pointer-active: var(--menu-text-active);
  105. --menu-background-primary: var(--background-quaternary);
  106. --menu-background-primary-hover: hsla(0, 0%, 0%, 0.3);
  107. --menu-background-secondary: var(--background-tertiary);
  108. --menu-close-tab-background: var(--background-tertiary);
  109. --menu-close-tab-opacity: 0.3;
  110. --menu-border: none;
  111. --menu-border-secondary: none;
  112. }
  113. // dark mode
  114. [data-theme='dark'] {
  115. --button-action-color: hsl(0, 0%, 80%);
  116. --button-background: hsla(0, 0%, 100%, 0.03);
  117. --button-background-active: hsla(0, 0%, 100%, 0.015);
  118. --button-active: hsla(0, 0%, 100%, 0.1);
  119. --button-active-active: hsla(0, 0%, 100%, 0.08);
  120. --header-primary: white;
  121. --header-secondary: hsl(198, 5%, 73%);
  122. --text-normal: hsl(205, 1%, 86%);
  123. --text-muted: hsl(213, 3%, 60%);
  124. --text-muted-alt: hsl(213, 8%, 61%);
  125. --text-link: hsl(202, 72%, 50%);
  126. --text-nav: hsl(205, 1%, 84%);
  127. --nav-icon: hsl(0, 0%, 50%);
  128. --highlight: hsl(205, 90%, 60%);
  129. --interactive-primary: white;
  130. --interactive-muted: hsl(213, 3%, 64%);
  131. --interactive-muted-active: hsl(213, 3%, 35%);
  132. --interactive-muted-alt: hsl(209, 5%, 35%);
  133. --interactive-muted-alt-selected: hsl(205, 4%, 75%);
  134. --background-primary: hsl(230, 5%, 19%);
  135. --background-primary-alt: hsl(230, 5%, 21%);
  136. --background-secondary: hsl(230, 5%, 23%);
  137. --background-secondary-hover: hsl(230, 5%, 20%);
  138. --background-tertiary: hsl(230, 7%, 17%);
  139. --background-quaternary: hsl(230, 7%, 13%);
  140. --background-quaternary-alt: hsl(230, 4%, 30%);
  141. --background-popover: hsl(216, 3%, 30%);
  142. --background-active: var(--highlight);
  143. --background-highlight: hsl(205, 30%, 27%);
  144. --background-article-meta: hsl(230, 7%, 25%);
  145. --background-article-customer: hsl(218, 8%, 32%);
  146. --background-article-customer-meta: hsl(218, 6%, 30%);
  147. --background-modifier-accent: hsla(0, 0%, 0%, 0.12);
  148. --background-modifier-accent-light: hsla(0, 0%, 0%, 0.06);
  149. --background-modifier-accent-dark: hsla(0, 0%, 0%, 0.3);
  150. --background-modifier-lighter: hsla(0, 0%, 100%, 0.08);
  151. --background-modifier-border: hsla(0, 0%, 0%, 0.17);
  152. --background-modifier-hover: hsla(230, 5%, 36%, 0.4);
  153. --backdrop-clue-start: hsla(202, 68%, 54%, 0.1);
  154. --backdrop-clue-end: hsla(202, 68%, 54%, 0.9);
  155. --border: hsl(230, 4%, 17%);
  156. --border-alt: hsl(230, 7%, 18%);
  157. --border-highlight: hsl(205, 70%, 50%);
  158. --border-internal: hsl(18, 30%, 39%);
  159. --border-internal-stripe: hsl(18, 30%, 30%);
  160. --border-article-customer: hsl(209, 6%, 30%);
  161. --border-article-customer-selected: hsl(199, 10%, 33%);
  162. --shadow-highlight: hsl(205, 42%, 36%);
  163. --supergood-color: hsl(145, 51%, 45%);
  164. --good-color: hsl(62, 45%, 46%);
  165. --ok-color: hsl(41, 100%, 49%);
  166. --bad-color: hsl(30, 93%, 50%);
  167. --superbad-color: hsl(19, 90%, 51%);
  168. --ghost-color: hsl(0, 0%, 50%);
  169. --danger-color: hsl(0, 82%, 59%);
  170. --pending-color: hsl(205, 1%, 44%);
  171. --elevation-stroke: 0 1px hsla(0, 0%, 0%, 0.13);
  172. --elevation-low: 0 1px 5px hsla(0, 0%, 0%, 0.15);
  173. --elevation-high: 0 1px 14px hsla(0, 0%, 0%, 0.25);
  174. --highlighter-yellow: hsl(48, 34%, 30%);
  175. --highlighter-green: hsl(105, 34%, 27%);
  176. --highlighter-blue: hsl(207, 41%, 30%);
  177. --highlighter-pink: hsl(338, 28%, 30%);
  178. --highlighter-purple: hsl(288, 22%, 36%);
  179. --file-icon-background: hsl(216, 5%, 77%);
  180. --file-icon-color: hsl(230, 7%, 21%);
  181. --tag-text: var(--text-normal);
  182. --tag-background: hsl(230, 5%, 32%);
  183. }
  184. @mixin dark {
  185. [data-theme='dark'] & {
  186. @content;
  187. }
  188. }
  189. @mixin desktop {
  190. @media screen and (min-width: 1260px) {
  191. @content;
  192. }
  193. }
  194. @mixin small-desktop {
  195. @media screen and (max-width: 1260px) {
  196. @content;
  197. }
  198. }
  199. @mixin tablet {
  200. @media screen and (min-width: 768px) {
  201. @content;
  202. }
  203. }
  204. @mixin phone {
  205. #app.navigation-collapsed & {
  206. @content;
  207. }
  208. @media screen and (max-width: 767px) {
  209. @content;
  210. }
  211. }
  212. /* sets LTR and RTL within the same style call */
  213. @mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
  214. #{$prop}: $value;
  215. html[dir='rtl'] & {
  216. #{$inverse-prop}: $value;
  217. #{$prop}: $default-value;
  218. }
  219. }
  220. /* adds a property only in RTL */
  221. @mixin rtl($prop, $value) {
  222. html[dir='rtl'] & {
  223. #{$prop}: $value;
  224. }
  225. }
  226. /* adds a property only in LTR */
  227. @mixin ltr($prop, $value) {
  228. html[dir='ltr'] & {
  229. #{$prop}: $value;
  230. }
  231. }
  232. %clickable {
  233. cursor: pointer;
  234. user-select: none;
  235. touch-action: manipulation;
  236. }
  237. html {
  238. height: 100%;
  239. }
  240. body {
  241. font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  242. font-weight: normal;
  243. font-variant-ligatures: none;
  244. line-height: 1.45;
  245. background: var(--background-primary);
  246. height: 100%;
  247. color: var(--text-normal);
  248. word-wrap: break-word;
  249. overflow-wrap: break-word;
  250. display: flex;
  251. flex-direction: column;
  252. }
  253. /* prevent clickable <use xlink:href="#icon-abc"></use> */
  254. use {
  255. pointer-events: none;
  256. }
  257. p {
  258. margin: 12px 0;
  259. &.subtle {
  260. color: var(--text-muted);
  261. }
  262. &.description {
  263. color: var(--text-muted);
  264. }
  265. }
  266. h3 + .description {
  267. margin-top: 0;
  268. }
  269. strong {
  270. font-weight: 500;
  271. }
  272. hr {
  273. border-top-color: var(--background-modifier-border);
  274. }
  275. .inherit-color {
  276. color: inherit;
  277. }
  278. .text-muted {
  279. color: var(--text-muted);
  280. }
  281. .text-placeholder {
  282. color: var(--interactive-muted);
  283. }
  284. .text-small {
  285. font-size: 12px;
  286. }
  287. .u-highlight {
  288. color: var(--text-link);
  289. }
  290. .u-dontfold {
  291. flex-shrink: 0;
  292. }
  293. .u-invisible {
  294. opacity: 0;
  295. pointer-events: none;
  296. position: absolute !important;
  297. }
  298. [data-dir='ltr'] {
  299. direction: ltr;
  300. }
  301. [data-dir='rtl'] {
  302. direction: rtl;
  303. }
  304. a {
  305. outline: none !important;
  306. @extend .u-highlight;
  307. &.is-disabled,
  308. &[disabled] {
  309. pointer-events: none;
  310. cursor: not-allowed !important;
  311. opacity: 0.33;
  312. }
  313. }
  314. a.create {
  315. color: hsl(145, 51%, 45%);
  316. text-decoration: underline;
  317. }
  318. small {
  319. color: var(--text-muted);
  320. font-size: 12px;
  321. }
  322. blockquote {
  323. font-size: inherit;
  324. }
  325. ol,
  326. ul {
  327. padding-inline-start: 20px;
  328. }
  329. #app {
  330. display: flex;
  331. flex: 1;
  332. min-width: $minWidth;
  333. overflow: auto;
  334. -webkit-overflow-scrolling: touch;
  335. @include phone {
  336. min-width: auto;
  337. position: absolute;
  338. left: 0;
  339. top: 0;
  340. width: 100%;
  341. height: 100%;
  342. }
  343. }
  344. .u-unclickable {
  345. pointer-events: none;
  346. }
  347. .u-clickable {
  348. @extend %clickable;
  349. }
  350. .u-unselectable {
  351. pointer-events: none;
  352. user-select: none;
  353. }
  354. .u-no-userselect {
  355. user-select: none;
  356. }
  357. .u-textTruncate {
  358. white-space: nowrap;
  359. overflow: hidden;
  360. text-overflow: ellipsis;
  361. }
  362. .u-positionOrigin {
  363. position: relative;
  364. }
  365. .u-inlineBlock {
  366. display: inline-block;
  367. }
  368. .u-inlinePad {
  369. margin: 0 5px;
  370. }
  371. .u-notAllowed {
  372. cursor: not-allowed;
  373. }
  374. .u-overflow-wrap {
  375. word-break: break-word;
  376. @supports (overflow-wrap: anywhere) {
  377. overflow-wrap: anywhere;
  378. word-break: unset;
  379. }
  380. }
  381. .u-breakNormal.u-breakNormal {
  382. word-break: normal;
  383. @supports (overflow-wrap: normal) {
  384. overflow-wrap: normal;
  385. }
  386. }
  387. .u-breakWords.u-breakWords {
  388. word-break: break-word;
  389. @supports (overflow-wrap: break-word) {
  390. overflow-wrap: break-word;
  391. word-break: unset;
  392. }
  393. }
  394. .zIndex-1 {
  395. z-index: 100;
  396. }
  397. .zIndex-2 {
  398. z-index: 200;
  399. }
  400. .zIndex-3 {
  401. z-index: 300;
  402. }
  403. .zIndex-4 {
  404. z-index: 400;
  405. }
  406. .zIndex-5 {
  407. z-index: 500;
  408. }
  409. .zIndex-6 {
  410. z-index: 600;
  411. }
  412. .zIndex-7 {
  413. z-index: 700;
  414. }
  415. .zIndex-8 {
  416. z-index: 800;
  417. }
  418. .zIndex-9 {
  419. z-index: 900;
  420. }
  421. .zIndex-10 {
  422. z-index: 1000;
  423. }
  424. .zIndex-11 {
  425. z-index: 1100;
  426. }
  427. .zIndex-12 {
  428. z-index: 1200;
  429. }
  430. .clickCatcher {
  431. top: 0;
  432. left: 0;
  433. width: 100%;
  434. height: 100%;
  435. position: absolute;
  436. cursor: default;
  437. }
  438. .debug .clickCatcher {
  439. background: hsla(0, 100%, 50%, 0.13);
  440. }
  441. .debug .clickCatcher + .clickCatcher {
  442. background: hsla(50, 100%, 50%, 0.13);
  443. }
  444. .clearfix::after {
  445. visibility: hidden;
  446. display: block;
  447. font-size: 0;
  448. content: ' ';
  449. clear: both;
  450. height: 0;
  451. }
  452. .clearfix {
  453. display: inline-block;
  454. }
  455. /* start commented backslash hack \ */
  456. * html .clearfix {
  457. height: 1%;
  458. }
  459. .clearfix {
  460. display: block;
  461. }
  462. /* close commented backslash hack */
  463. /* Avoid too broad selectors, since they can affect unintended elements in third-party extensions (#5073). */
  464. [contenteditable='true'],
  465. .richtext-content[contenteditable] {
  466. display: block;
  467. outline-style: none;
  468. border-radius: 3px;
  469. /* needed to make empty tags editable, otherwise no focus can be set */
  470. min-height: 10px;
  471. min-width: 20px;
  472. &:hover,
  473. &:focus {
  474. background: var(--background-primary);
  475. }
  476. &:focus {
  477. text-overflow: clip !important;
  478. }
  479. &.invalid {
  480. background: #f92;
  481. }
  482. & > .placeholder {
  483. color: var(--text-muted);
  484. }
  485. p {
  486. margin: 0;
  487. }
  488. }
  489. /* fix for placeholder */
  490. .Medium-placeholder {
  491. position: relative;
  492. }
  493. .close,
  494. .close:hover {
  495. float: none;
  496. opacity: 1;
  497. }
  498. #app > nav {
  499. position: relative;
  500. z-index: 1;
  501. }
  502. code {
  503. background: var(--background-modifier-accent);
  504. border-radius: 3px;
  505. box-decoration-break: clone;
  506. }
  507. code,
  508. .hljs {
  509. padding: 2px 4px;
  510. font-size: 0.88em;
  511. }
  512. .hljs {
  513. background: none;
  514. @include dark {
  515. filter: invert(1);
  516. }
  517. }
  518. pre code.hljs {
  519. font-size: 1em;
  520. }
  521. pre {
  522. display: block;
  523. padding: 9.5px;
  524. margin: 0 0 20px;
  525. font-size: 13px;
  526. line-height: 1.42857143;
  527. word-break: break-all;
  528. word-wrap: break-word;
  529. background: var(--background-secondary);
  530. border: 1px solid var(--border);
  531. border-radius: 3px;
  532. }
  533. .modal-content pre {
  534. background: var(--background-modifier-accent);
  535. border-color: var(--background-modifier-border);
  536. }
  537. pre code {
  538. padding: 0;
  539. font-size: inherit;
  540. color: inherit;
  541. white-space: pre-wrap;
  542. background: none;
  543. border-radius: 0;
  544. border: none;
  545. overflow-x: auto;
  546. &.hljs {
  547. padding: 0;
  548. background: none;
  549. }
  550. }
  551. .textarea::placeholder,
  552. .form-control::placeholder,
  553. .token-input::placeholder,
  554. .u-placeholder {
  555. color: var(--ghost-color);
  556. }
  557. .btn {
  558. display: inline-block;
  559. font-size: 14px;
  560. padding: 10px 24px 9px;
  561. color: var(--text-normal);
  562. background: var(--button-background);
  563. border: 1px solid var(--border);
  564. outline: none !important;
  565. border-radius: 4px;
  566. text-align: center;
  567. white-space: nowrap;
  568. vertical-align: middle;
  569. text-decoration: none;
  570. @extend %clickable;
  571. @include phone {
  572. padding-left: 12px;
  573. padding-right: 12px;
  574. }
  575. .icon {
  576. vertical-align: middle;
  577. margin-top: -2px;
  578. @include bidi-style(margin-right, 5px, margin-right, -2px);
  579. @include bidi-style(margin-left, -2px, margin-right, 5px);
  580. flex-shrink: 0;
  581. &.icon-arrow-up {
  582. margin-top: -3px;
  583. }
  584. }
  585. span {
  586. min-width: 0;
  587. overflow: hidden;
  588. text-overflow: ellipsis;
  589. display: block;
  590. }
  591. &--only-icon .icon,
  592. &--icon-only .icon {
  593. margin-left: 0 !important;
  594. margin-right: 0 !important;
  595. }
  596. &--icon--last .icon {
  597. @include bidi-style(
  598. margin-left,
  599. 5px,
  600. margin-right,
  601. 0
  602. ); // so far only used in ticket_zoom secondaryAction dropup
  603. }
  604. &:focus {
  605. box-shadow: 0 0 0 3px var(--shadow-highlight);
  606. }
  607. &--small {
  608. padding-top: 5px;
  609. padding-bottom: 4px;
  610. &.btn--quad {
  611. padding: 4px 5px;
  612. }
  613. }
  614. &--slim {
  615. padding-left: 12px;
  616. padding-right: 12px;
  617. }
  618. &--fullWidth {
  619. width: 100%;
  620. text-align: center;
  621. justify-content: center;
  622. }
  623. &.is-disabled,
  624. &[disabled],
  625. &:disabled {
  626. pointer-events: none;
  627. cursor: not-allowed;
  628. opacity: 0.33;
  629. }
  630. &:active {
  631. box-shadow: none;
  632. background: var(--button-background-active);
  633. }
  634. &--capitalized {
  635. text-transform: capitalize;
  636. }
  637. &--action {
  638. text-transform: uppercase;
  639. color: var(--button-action-color);
  640. font-size: 12px;
  641. letter-spacing: 0.05em;
  642. height: 31px;
  643. padding: 0 11px !important;
  644. display: inline-flex;
  645. align-items: center;
  646. min-width: 0;
  647. .icon {
  648. @include ltr(margin, -2px 5px 0 -2px);
  649. @include rtl(margin, -2px -2px 0 5px);
  650. }
  651. .icon:only-child {
  652. margin: 0 !important;
  653. }
  654. &.btn--slim {
  655. padding-left: 7px !important;
  656. padding-right: 7px !important;
  657. .btn-label {
  658. @include bidi-style(margin-left, 0, margin-right, 0);
  659. }
  660. &.btn--small {
  661. padding-left: 5px !important;
  662. padding-right: 5px !important;
  663. }
  664. }
  665. &.btn--small {
  666. height: 26px;
  667. font-size: 11px;
  668. padding-left: 8px !important;
  669. padding-right: 8px !important;
  670. }
  671. }
  672. &-active-icon {
  673. display: none;
  674. }
  675. &--active {
  676. background: var(--button-active);
  677. color: var(--text-inverted);
  678. &:active {
  679. background: var(--button-active-active);
  680. }
  681. .btn-inactive-icon {
  682. display: none;
  683. }
  684. .btn-active-icon {
  685. display: inline;
  686. }
  687. }
  688. // used in .recipientList-controls
  689. &--onDark {
  690. background: var(--background-modifier-lighter);
  691. border-color: var(--background-modifier-accent-dark);
  692. color: var(--text-inverted);
  693. .icon {
  694. opacity: 1;
  695. }
  696. }
  697. &--primary {
  698. color: var(--button-primary-text);
  699. background: var(--button-primary-background);
  700. &:active {
  701. background: var(--button-primary-background-active);
  702. }
  703. .icon {
  704. opacity: 1;
  705. fill: currentColor;
  706. }
  707. }
  708. &--secondary {
  709. color: var(--button-primary-background);
  710. }
  711. &--positive,
  712. &--create,
  713. &--success {
  714. color: var(--text-inverted);
  715. background: hsl(145, 51%, 45%);
  716. &:active {
  717. background: hsl(145, 51%, 35%);
  718. }
  719. &.btn--secondary {
  720. background: var(--background-secondary);
  721. color: hsl(145, 51%, 45%);
  722. &:active {
  723. background: var(--button-background-active);
  724. }
  725. }
  726. &.btn--text {
  727. color: var(--supergood-color);
  728. }
  729. }
  730. &--danger {
  731. color: var(--text-inverted);
  732. background: var(--danger-color);
  733. &:active {
  734. background: linear-gradient(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.1)),
  735. linear-gradient(var(--danger-color), var(--danger-color));
  736. }
  737. &.btn--secondary {
  738. background: var(--background-secondary);
  739. color: var(--danger-color);
  740. &:active {
  741. background: var(--button-background-active);
  742. }
  743. }
  744. }
  745. &--text {
  746. display: inline-flex;
  747. align-items: center;
  748. font-size: inherit;
  749. margin: -10px;
  750. padding: 10px;
  751. color: var(--text-button-primary);
  752. border: none;
  753. background: none;
  754. vertical-align: baseline;
  755. text-align: start;
  756. .table & {
  757. margin: 0;
  758. min-height: 38px;
  759. }
  760. &.no-padding {
  761. padding: 0;
  762. margin: 0;
  763. min-height: auto;
  764. }
  765. .icon {
  766. opacity: 1;
  767. @include bidi-style(margin-left, -2px, margin-right, 6px);
  768. @include bidi-style(margin-right, 6px, margin-right, -2px);
  769. width: 16px;
  770. max-height: 16px;
  771. object-fit: contain;
  772. }
  773. &.btn--icon--last .icon {
  774. @include bidi-style(margin-left, 6px, margin-right, -2px);
  775. @include bidi-style(margin-right, -2px, margin-right, 6px);
  776. }
  777. &:active {
  778. color: var(--text-button-primary-active);
  779. background: none;
  780. }
  781. &.btn--secondary {
  782. color: var(--text-button-secondary);
  783. text-decoration: underline;
  784. &:active {
  785. opacity: 0.75;
  786. }
  787. }
  788. &.btn--positive {
  789. color: hsl(145, 51%, 45%);
  790. &:active {
  791. color: hsl(145, 51%, 30%);
  792. background: none;
  793. }
  794. }
  795. &.btn--danger {
  796. color: var(--danger-color);
  797. &:active {
  798. color: hsl(0, 65%, 40%);
  799. background: none;
  800. }
  801. }
  802. &.btn--subtle {
  803. text-decoration: underline;
  804. color: var(--text-button-secondary);
  805. &:active {
  806. opacity: 0.75;
  807. }
  808. }
  809. &.space-left {
  810. @include bidi-style(margin-left, 0, margin-right, -10px);
  811. }
  812. &.space-right {
  813. @include bidi-style(margin-right, 0, margin-left, -10px);
  814. }
  815. }
  816. &--large {
  817. &.btn--text {
  818. margin: 0;
  819. }
  820. }
  821. &--quad {
  822. padding: 10px 12px 9px;
  823. .icon {
  824. margin: -1px;
  825. }
  826. }
  827. &--split--first {
  828. @include bidi-style(border-radius, 3px 0 0 3px, border-radius, 0 3px 3px 0);
  829. }
  830. &--split,
  831. &--split--last {
  832. border-radius: 0;
  833. @include bidi-style(border-left-width, 0, border-right-width, 1px);
  834. @include ltr(margin-left, 0 !important);
  835. @include rtl(margin-right, 0 !important);
  836. .icon {
  837. margin-left: 2px !important;
  838. margin-right: 2px !important;
  839. }
  840. }
  841. &--split--last {
  842. @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);
  843. }
  844. &--dropdown {
  845. position: relative;
  846. select {
  847. opacity: 0;
  848. width: 100%;
  849. height: 100%;
  850. left: 0;
  851. top: 0;
  852. position: absolute;
  853. @extend %clickable;
  854. }
  855. }
  856. }
  857. .btn + .btn,
  858. .btn + .buttonDropdown,
  859. .buttonDropdown + .buttonDropdown {
  860. @include bidi-style(margin-left, 10px, margin-right, 0);
  861. }
  862. .btn + .btn.align-right {
  863. @include bidi-style(margin-left, auto, margin-right, 0);
  864. }
  865. .btn.align-right ~ .btn {
  866. @include bidi-style(margin-left, 15px, margin-right, 0);
  867. }
  868. .vertical > .btn:not(.hidden) + .btn {
  869. @include bidi-style(margin-left, 0, margin-right, 0);
  870. margin-top: 10px;
  871. &--text {
  872. @include bidi-style(margin-left, -10px, margin-right, -10px);
  873. margin-top: 0;
  874. }
  875. }
  876. .btn--download .icon-download {
  877. margin-right: 6px;
  878. @include rtl(margin-right, -10px);
  879. margin-top: 4px;
  880. margin-left: -10px;
  881. @include rtl(margin-left, 6px);
  882. vertical-align: top;
  883. fill: var(--text-inverted);
  884. }
  885. .btn-label {
  886. @include bidi-style(margin-left, 7px, margin-right, 0);
  887. }
  888. .btn-show-all {
  889. &[aria-expanded='false'] [data-show='collapsed'],
  890. &[aria-expanded='true'] [data-show='open'] {
  891. display: none;
  892. }
  893. .icon {
  894. margin-left: 0;
  895. margin-right: 0;
  896. }
  897. }
  898. .visibility-change {
  899. /*
  900. Interactive Visibility Change Classes:
  901. <div class="visibility-change">
  902. <svg class="icon-marker" data-visible="active"><use xlink:href="#icon-marker" /></svg>
  903. </div>
  904. Important: HTML Order active > hover > normal
  905. */
  906. [data-visible='active'],
  907. [data-visible='hover'] {
  908. display: none;
  909. }
  910. &.is-active [data-visible='active'] {
  911. display: block;
  912. & ~ [data-visible='normal'] {
  913. display: none;
  914. }
  915. }
  916. &:hover [data-visible='hover'] {
  917. display: block;
  918. & ~ [data-visible='normal'] {
  919. display: none;
  920. }
  921. }
  922. }
  923. .btn-group {
  924. display: inline-flex;
  925. flex-wrap: wrap;
  926. &--full {
  927. display: flex;
  928. }
  929. & + .btn-group {
  930. margin-top: 10px;
  931. padding-top: 10px;
  932. border-top: 1px solid var(--border);
  933. }
  934. .btn {
  935. &:not(:first-child) {
  936. border-top-left-radius: 0;
  937. border-bottom-left-radius: 0;
  938. }
  939. &:not(:last-child) {
  940. border-top-right-radius: 0;
  941. border-bottom-right-radius: 0;
  942. border-right-width: 0;
  943. }
  944. + .btn {
  945. @include bidi-style(margin-left, 0, margin-right, 10px);
  946. }
  947. }
  948. .btn--text {
  949. padding: 6px 10px 5px; /* reporting main.eco */
  950. display: inline-block;
  951. border-radius: 3px;
  952. &.is-selected {
  953. background: var(--button-primary-background);
  954. color: var(--text-inverted);
  955. }
  956. }
  957. }
  958. .buttonDropdown {
  959. display: flex;
  960. align-items: center;
  961. position: relative;
  962. user-select: none;
  963. .dropdown-menu {
  964. margin-bottom: 0;
  965. }
  966. &.is-open .dropdown-menu {
  967. display: block;
  968. }
  969. .btn--text {
  970. padding-left: 13px;
  971. padding-right: 13px;
  972. }
  973. .dropdown-menu-accessories {
  974. cursor: pointer;
  975. &:focus {
  976. outline: none;
  977. .dropdown-menu {
  978. display: block;
  979. }
  980. .btn--split--last {
  981. box-shadow: 0 0 0 3px var(--shadow-highlight);
  982. pointer-events: initial;
  983. }
  984. }
  985. .btn--split--last {
  986. pointer-events: none;
  987. &:focus {
  988. box-shadow: none;
  989. pointer-events: none;
  990. }
  991. &:active {
  992. background-color: #429ed7;
  993. }
  994. }
  995. }
  996. }
  997. .dropdown-menu-right {
  998. @include rtl(right, auto);
  999. @include rtl(left, 0);
  1000. }
  1001. .dropdown-menu-left {
  1002. @include rtl(left, auto);
  1003. @include rtl(right, 0);
  1004. }
  1005. .status-fields {
  1006. display: flex;
  1007. max-width: 100%;
  1008. @include phone {
  1009. display: block;
  1010. }
  1011. .dropdown li {
  1012. display: flex;
  1013. align-items: center;
  1014. padding: 0 10px;
  1015. }
  1016. .dropdown-menu .status-badge {
  1017. margin-left: 10px;
  1018. }
  1019. .dropdown-menu .badge {
  1020. margin-top: -2px;
  1021. margin-right: 7px;
  1022. background: hsla(0, 0%, 0%, 0.5);
  1023. }
  1024. }
  1025. .status-field {
  1026. border: 1px solid var(--border);
  1027. background: var(--button-background);
  1028. display: flex;
  1029. height: 34px;
  1030. flex-shrink: 1;
  1031. min-width: 20px;
  1032. padding: 5px 0;
  1033. align-items: center;
  1034. white-space: nowrap;
  1035. text-overflow: ellipsis;
  1036. overflow: hidden;
  1037. @include phone {
  1038. border-bottom-width: 0;
  1039. }
  1040. &.is-active {
  1041. background: var(--button-primary-background);
  1042. color: var(--text-inverted);
  1043. border-color: var(--button-primary-background-active);
  1044. box-shadow: 1px 0 var(--button-primary-background-active);
  1045. position: relative;
  1046. @extend %clickable;
  1047. .icon {
  1048. fill: currentColor;
  1049. opacity: 1;
  1050. }
  1051. }
  1052. &:not(:last-child, :only-child) {
  1053. @include bidi-style(border-right-width, 0, border-left-width, 1px);
  1054. @include phone {
  1055. border-right-width: 1px !important;
  1056. }
  1057. }
  1058. &:first-child {
  1059. border-radius: 5px 0 0 5px;
  1060. @include rtl(border-radius, 0 5px 5px 0);
  1061. @include phone {
  1062. border-radius: 5px 5px 0 0 !important;
  1063. .dropdown & {
  1064. flex: 1;
  1065. border-top-right-radius: 0 !important;
  1066. border-right-width: 0 !important;
  1067. }
  1068. }
  1069. .dropdown.open & {
  1070. border-radius: 5px 0 0;
  1071. @include rtl(border-radius, 0 5px 0 0);
  1072. @include phone {
  1073. border-radius: 5px 0 0 !important;
  1074. }
  1075. }
  1076. }
  1077. &:last-child {
  1078. border-radius: 0 5px 5px 0;
  1079. @include rtl(border-radius, 5px 0 0 5px);
  1080. @include phone {
  1081. border-radius: 0 0 5px 5px !important;
  1082. border-bottom-width: 1px;
  1083. }
  1084. }
  1085. &:only-child {
  1086. border-radius: 5px;
  1087. @include phone {
  1088. border-radius: 5px !important;
  1089. }
  1090. }
  1091. .badge {
  1092. @include bidi-style(margin, 0 7px 0 10px, margin, 0 10px 0 7px);
  1093. background: hsla(210, 50%, 10%, 0.24);
  1094. }
  1095. .status-badge {
  1096. width: 32px;
  1097. display: inline-flex;
  1098. align-items: center;
  1099. justify-content: center;
  1100. align-self: stretch;
  1101. }
  1102. &--arrow {
  1103. @extend %clickable;
  1104. border-left: none;
  1105. width: 34px;
  1106. justify-content: center;
  1107. @include phone {
  1108. border-top-right-radius: 5px !important;
  1109. }
  1110. }
  1111. &--spacer {
  1112. padding-left: 16px;
  1113. padding-right: 2px;
  1114. }
  1115. }
  1116. .status-badge {
  1117. display: inline-block;
  1118. }
  1119. .info-badge {
  1120. fill: currentColor;
  1121. padding: 3px 6px 1px;
  1122. line-height: 12px;
  1123. opacity: 0.5;
  1124. position: relative;
  1125. /*
  1126. border in its own layer to make it more
  1127. translucend but still depend on the currentColor
  1128. */
  1129. &::after {
  1130. content: '';
  1131. position: absolute;
  1132. width: 100%;
  1133. height: 100%;
  1134. left: 0;
  1135. top: 0;
  1136. border: 1px solid currentColor;
  1137. opacity: 0.5;
  1138. border-radius: 100%;
  1139. }
  1140. }
  1141. @keyframes pulsate {
  1142. to {
  1143. filter: brightness(1.2);
  1144. }
  1145. }
  1146. .badge {
  1147. display: inline-block;
  1148. min-width: 18px;
  1149. padding: 3px 5px;
  1150. font-size: 12px;
  1151. font-weight: 500;
  1152. line-height: 1;
  1153. color: var(--text-inverted);
  1154. text-align: center;
  1155. white-space: nowrap;
  1156. vertical-align: top;
  1157. border-radius: 9px;
  1158. background: var(--border-alt);
  1159. @include bidi-style(margin-right, 3px, margin-left, 0);
  1160. flex-shrink: 0;
  1161. &:empty {
  1162. display: none;
  1163. }
  1164. &.badge--big {
  1165. min-width: 22px;
  1166. font-size: 14px;
  1167. border-radius: 11px;
  1168. padding: 5px 7px 3px;
  1169. }
  1170. &.badge--text {
  1171. min-width: 0;
  1172. padding: 0;
  1173. margin-right: 0;
  1174. @include bidi-style(margin-right, 0, margin-left, 0);
  1175. font-size: inherit;
  1176. font-weight: inherit;
  1177. text-align: inherit;
  1178. line-height: inherit;
  1179. color: var(--text-muted);
  1180. background: none;
  1181. border-radius: 0;
  1182. vertical-align: baseline;
  1183. }
  1184. &.badge--primary {
  1185. background: var(--highlight);
  1186. }
  1187. }
  1188. .key-value {
  1189. td:first-child {
  1190. @include bidi-style(padding-right, 10px, padding-left, 0);
  1191. color: var(--text-muted);
  1192. }
  1193. }
  1194. table {
  1195. table-layout: fixed;
  1196. }
  1197. .scroll-table-container {
  1198. overflow: hidden;
  1199. overflow-y: scroll;
  1200. max-height: 244px;
  1201. table > thead > tr > th {
  1202. @extend .zIndex-2;
  1203. top: 0;
  1204. position: sticky;
  1205. }
  1206. }
  1207. .table {
  1208. display: table;
  1209. small {
  1210. color: inherit;
  1211. }
  1212. &-icon {
  1213. max-width: 20px;
  1214. max-height: 20px;
  1215. object-fit: contain;
  1216. vertical-align: middle;
  1217. fill: hsla(0, 0%, 0%, 0.3);
  1218. }
  1219. &-buttons {
  1220. padding-top: 0 !important;
  1221. padding-bottom: 0 !important;
  1222. height: 38px;
  1223. display: flex;
  1224. align-items: center;
  1225. justify-content: flex-end;
  1226. text-align: right;
  1227. }
  1228. }
  1229. .table--light {
  1230. color: var(--text-muted);
  1231. }
  1232. .table-fluid {
  1233. table-layout: auto;
  1234. }
  1235. .table .table-row {
  1236. display: table-row;
  1237. }
  1238. .table.table--placeholder {
  1239. th {
  1240. text-align: center;
  1241. }
  1242. td {
  1243. height: 40px;
  1244. }
  1245. > thead > tr > th {
  1246. background: var(--background-modifier-accent);
  1247. }
  1248. }
  1249. .table th:not(.noTruncate) .table-column-title,
  1250. .table td:not(.noTruncate) {
  1251. @extend .u-textTruncate;
  1252. }
  1253. .table > thead > tr > th {
  1254. padding: 12px 9px 10px;
  1255. border-bottom: none;
  1256. border-top: 1px solid #ececec;
  1257. background: var(--background-primary-alt);
  1258. color: var(--text-normal);
  1259. font-weight: normal;
  1260. font-size: 12px;
  1261. text-transform: uppercase;
  1262. letter-spacing: 0.05em;
  1263. position: relative;
  1264. user-select: none;
  1265. }
  1266. .table-column-head {
  1267. display: flex;
  1268. @extend %clickable;
  1269. &-unclickable {
  1270. cursor: default;
  1271. }
  1272. }
  1273. .table-column-sortIcon {
  1274. @include bidi-style(margin-left, auto, margin-right, 0);
  1275. }
  1276. th.align-right {
  1277. .table-column-title {
  1278. @include bidi-style(margin-left, auto, margin-right, 0);
  1279. }
  1280. .table-column-sortIcon {
  1281. @include bidi-style(margin-left, 0, margin-right, 0);
  1282. }
  1283. }
  1284. td.align-right {
  1285. @include bidi-style(text-align, right, text-align, left);
  1286. }
  1287. .table-striped > tbody > tr:nth-child(2n + 1) {
  1288. background-color: var(--background-secondary);
  1289. }
  1290. .table > tbody > tr > td {
  1291. padding: 10px 10px 8px;
  1292. border-color: var(--background-modifier-accent);
  1293. &.no-side-padding {
  1294. padding-left: 0;
  1295. padding-right: 0;
  1296. text-align: center;
  1297. }
  1298. }
  1299. .table > tbody > tr.u-center > td {
  1300. vertical-align: middle;
  1301. }
  1302. .table-hover > tbody > tr:hover,
  1303. .table-hover > tbody > tr.is-hover {
  1304. background: var(--background-secondary);
  1305. }
  1306. .table-hover-in-modal > tbody > tr:hover > td {
  1307. background-color: var(--background-primary);
  1308. }
  1309. .table-hover > tbody > tr:hover > th {
  1310. background: rgba(0, 8, 14, 0.015);
  1311. }
  1312. .table-col-resize {
  1313. position: absolute;
  1314. @include bidi-style(right, 0, left, auto);
  1315. top: 0;
  1316. height: 100%;
  1317. cursor: col-resize;
  1318. padding: 10px;
  1319. @include bidi-style(margin-right, -10px, margin-left, 0);
  1320. z-index: 1;
  1321. &::after {
  1322. content: '';
  1323. display: block;
  1324. width: 1px;
  1325. height: 100%;
  1326. background: var(--border);
  1327. }
  1328. }
  1329. .table > thead:first-child > tr:first-child > th.no-padding,
  1330. .table > thead > tr > th.no-padding,
  1331. .table > tbody > tr > td.no-padding {
  1332. padding: 0;
  1333. }
  1334. .table tr.is-inactive,
  1335. .table tr td span.is-inactive {
  1336. color: var(--text-muted);
  1337. text-decoration: line-through;
  1338. a {
  1339. color: inherit;
  1340. }
  1341. }
  1342. .table tr.is-grayed-out {
  1343. color: var(--text-muted);
  1344. .icon:not(.u-highlight),
  1345. .btn span {
  1346. opacity: 0.33;
  1347. }
  1348. .avatar {
  1349. opacity: 0.5;
  1350. }
  1351. .avatar--unique {
  1352. background: var(--background-secondary-hover);
  1353. text-shadow: none;
  1354. opacity: initial;
  1355. }
  1356. }
  1357. td .icon {
  1358. vertical-align: middle;
  1359. margin-top: -3px;
  1360. }
  1361. td .icon-draggable,
  1362. td .icon-trash {
  1363. vertical-align: middle;
  1364. }
  1365. td .prefix-icon > .icon {
  1366. vertical-align: top;
  1367. }
  1368. td .icon-cog {
  1369. width: 16px;
  1370. }
  1371. .table-checkbox,
  1372. .table-radio {
  1373. padding: 0 !important;
  1374. .icon {
  1375. margin-top: 0;
  1376. }
  1377. }
  1378. .table .table-sort-arrow {
  1379. opacity: 1;
  1380. width: 8px;
  1381. height: 8px;
  1382. @include bidi-style(margin-left, 3px, margin-right, 0);
  1383. margin-top: -2px;
  1384. vertical-align: middle;
  1385. }
  1386. .item {
  1387. &--high-priority {
  1388. a {
  1389. color: $high-priority-color;
  1390. }
  1391. }
  1392. &--low-priority {
  1393. a {
  1394. color: $low-priority-color;
  1395. }
  1396. }
  1397. }
  1398. .checkbox-list {
  1399. list-style: none;
  1400. margin-bottom: 15px;
  1401. padding: 3px 12px;
  1402. font-size: 14px;
  1403. line-height: 25px;
  1404. color: var(--text-normal);
  1405. background: var(--background-secondary);
  1406. border: 1px solid var(--border);
  1407. border-radius: 3px;
  1408. }
  1409. .checkbox-replacement,
  1410. .radio-replacement {
  1411. padding: 0;
  1412. margin: 0;
  1413. display: flex;
  1414. align-items: center;
  1415. justify-content: center;
  1416. position: relative;
  1417. @extend .u-clickable;
  1418. > .icon {
  1419. vertical-align: middle;
  1420. margin-top: -2px;
  1421. fill: var(--button-background);
  1422. @include dark {
  1423. fill: transparent;
  1424. }
  1425. }
  1426. .icon-checked {
  1427. color: var(--interactive-primary);
  1428. }
  1429. .icon-unchecked {
  1430. color: var(--text-muted);
  1431. }
  1432. .icon-indeterminate {
  1433. display: none;
  1434. color: var(--text-muted);
  1435. }
  1436. &.is-disabled {
  1437. cursor: not-allowed;
  1438. }
  1439. &.checkbox-replacement--fullscreen,
  1440. &.radio-replacement--fullscreen {
  1441. position: absolute;
  1442. left: 0;
  1443. top: 0;
  1444. width: 100%;
  1445. height: 100%;
  1446. }
  1447. &.checkbox-replacement--inline,
  1448. &.radio-replacement--inline {
  1449. display: inline-flex;
  1450. @include bidi-style(margin-right, 3px, margin-left, 0);
  1451. }
  1452. input[type='checkbox'],
  1453. input[type='radio'] {
  1454. position: absolute;
  1455. opacity: 0;
  1456. cursor: pointer;
  1457. &:disabled {
  1458. cursor: not-allowed;
  1459. ~ .icon {
  1460. opacity: 0.33;
  1461. fill: none;
  1462. }
  1463. }
  1464. &:not(:checked) ~ .icon-checked,
  1465. &:checked ~ .icon-unchecked {
  1466. display: none;
  1467. }
  1468. &:focus:not(.is-active) ~ .icon-checked,
  1469. &:focus:not(.is-active) ~ .icon-unchecked {
  1470. box-shadow:
  1471. 0 0 0 2px var(--border-highlight),
  1472. 0 0 0 3px var(--shadow-highlight);
  1473. }
  1474. }
  1475. + .label-text {
  1476. @include bidi-style(margin-left, 0, margin-right, 3px);
  1477. }
  1478. }
  1479. .checkbox-replacement {
  1480. &:indeterminate {
  1481. ~ .icon-checked,
  1482. ~ .icon-unchecked {
  1483. display: none;
  1484. }
  1485. ~ .icon-indeterminate {
  1486. display: block;
  1487. }
  1488. }
  1489. }
  1490. .radio-replacement {
  1491. input:focus ~ .icon-checked,
  1492. input:focus ~ .icon-unchecked {
  1493. border-radius: 100%;
  1494. }
  1495. > .icon {
  1496. margin-top: -3px;
  1497. }
  1498. }
  1499. .table .checkbox-replacement,
  1500. .table .radio-replacement {
  1501. height: 40px;
  1502. width: 40px;
  1503. &.checkbox-replacement--fullscreen {
  1504. width: 100%;
  1505. height: 100%;
  1506. }
  1507. }
  1508. .table-overview tbody .icon-checkbox,
  1509. .table-overview tbody .icon-radio,
  1510. .table-overview tbody .icon-checkbox-checked,
  1511. .table-overview tbody .icon-radio-checked {
  1512. fill: transparent;
  1513. }
  1514. .table .table-cell {
  1515. vertical-align: top;
  1516. display: table-cell;
  1517. border-bottom: 1px solid var(--background-primary-alt);
  1518. }
  1519. .hero-two {
  1520. width: 100%;
  1521. }
  1522. .hero-two .hero-left {
  1523. width: 50%;
  1524. float: left;
  1525. }
  1526. .hero-two .hero-right {
  1527. width: 50%;
  1528. float: right;
  1529. }
  1530. .max-size-scroll {
  1531. max-height: 240px;
  1532. overflow-y: scroll;
  1533. }
  1534. /*
  1535. #content > *:not(.active) {
  1536. display: none !important;
  1537. }
  1538. */
  1539. h1,
  1540. h2,
  1541. h3,
  1542. h4,
  1543. h5,
  1544. h6 {
  1545. font-weight: normal;
  1546. color: var(--header-primary);
  1547. }
  1548. h1 {
  1549. font-size: 24px;
  1550. line-height: 30px;
  1551. }
  1552. h2,
  1553. h2.popover-title {
  1554. font-size: 20px;
  1555. line-height: 25px;
  1556. }
  1557. h3 {
  1558. font-size: 16px;
  1559. margin: 20px 0 8px;
  1560. font-weight: normal;
  1561. .subtitle {
  1562. display: inline;
  1563. font-size: 12px;
  1564. text-transform: none;
  1565. color: var(--text-muted);
  1566. letter-spacing: initial;
  1567. }
  1568. }
  1569. h4 {
  1570. font-size: 13px;
  1571. text-transform: uppercase;
  1572. }
  1573. h5 {
  1574. font-size: 13px;
  1575. font-weight: bold;
  1576. }
  1577. label,
  1578. .checkbox.form-group label,
  1579. .label {
  1580. text-transform: uppercase;
  1581. color: var(--text-muted);
  1582. display: block;
  1583. font-size: 13px;
  1584. font-weight: normal;
  1585. letter-spacing: 0.05em;
  1586. margin-bottom: 4px;
  1587. text-align: start;
  1588. padding: 0;
  1589. &.input-group-addon {
  1590. color: var(--text-muted);
  1591. }
  1592. /* user-select: none; disabled because of chrome51 https://github.com/martini/zammad/issues/183 */
  1593. h2 & {
  1594. color: inherit !important;
  1595. font-size: inherit;
  1596. font-weight: inherit;
  1597. letter-spacing: 0;
  1598. margin-bottom: 0;
  1599. padding: 0 !important;
  1600. text-transform: inherit;
  1601. }
  1602. }
  1603. /* circumventing the label:not(.inline-label) selector because it's too strong */
  1604. .inline-label,
  1605. .label-success,
  1606. .label-warning,
  1607. .label-danger {
  1608. font-size: inherit;
  1609. font-weight: inherit;
  1610. text-align: inherit;
  1611. color: inherit;
  1612. letter-spacing: 0;
  1613. margin: 0;
  1614. text-transform: none;
  1615. display: inline;
  1616. }
  1617. table {
  1618. .inline-label,
  1619. .label-success,
  1620. .label-warning,
  1621. .label-danger {
  1622. white-space: nowrap; /* for labels in tables that might get crushed view: calendar_subscriptions */
  1623. }
  1624. }
  1625. .label-text {
  1626. @include bidi-style(margin-left, 3px, margin-right, 0);
  1627. @extend %clickable;
  1628. }
  1629. .label-success,
  1630. .label-warning,
  1631. .label-danger {
  1632. background: none;
  1633. }
  1634. .label-success {
  1635. color: var(--supergood-color);
  1636. }
  1637. .label-highlight {
  1638. color: var(--highlight);
  1639. }
  1640. .label-warning {
  1641. color: var(--ok-color);
  1642. }
  1643. .label-danger {
  1644. color: var(--superbad-color);
  1645. }
  1646. .label-subtle {
  1647. color: var(--ghost-color);
  1648. }
  1649. .state-archived,
  1650. .state-draft {
  1651. color: hsl(0, 0%, 68%);
  1652. }
  1653. .state-published {
  1654. color: var(--supergood-color);
  1655. }
  1656. .state-internal {
  1657. color: var(--highlight);
  1658. }
  1659. fieldset {
  1660. margin: 0 -4px;
  1661. @extend .clearfix;
  1662. @include phone {
  1663. width: calc(100% + 8px);
  1664. }
  1665. h2,
  1666. .help-text {
  1667. margin-left: 4px;
  1668. margin-right: 4px;
  1669. }
  1670. }
  1671. .form-field-group {
  1672. padding: 20px;
  1673. background: var(--background-secondary);
  1674. border-radius: 4px;
  1675. margin-bottom: 16px;
  1676. border: 1px solid var(--border);
  1677. .modal-body & {
  1678. background: var(--background-primary);
  1679. }
  1680. > .form-group:last-child {
  1681. margin-bottom: 0;
  1682. }
  1683. }
  1684. fieldset > .form-group {
  1685. padding: 0 4px;
  1686. }
  1687. .form-group {
  1688. margin-bottom: 16px;
  1689. &.form-group--inactive {
  1690. opacity: 0.5;
  1691. }
  1692. &.is-readonly .controls:not(.ignore-readonly) {
  1693. pointer-events: none;
  1694. cursor: not-allowed !important;
  1695. }
  1696. &.form-group--nested {
  1697. @include bidi-style(padding-left, 30px, padding-right, 30px);
  1698. }
  1699. &.form-group--wide {
  1700. @include bidi-style(margin-left, -30px, margin-right, -30px);
  1701. }
  1702. }
  1703. .date.form-group .controls {
  1704. position: relative;
  1705. }
  1706. .form-group + .form-group {
  1707. margin-top: 0;
  1708. }
  1709. .merge-group {
  1710. display: flex;
  1711. align-items: stretch;
  1712. &.merge-group--header {
  1713. h2 {
  1714. margin-bottom: 0;
  1715. }
  1716. label {
  1717. display: inline;
  1718. }
  1719. .merge-source,
  1720. .merge-target {
  1721. border-bottom: 1px solid var(--border);
  1722. }
  1723. }
  1724. .merge-target,
  1725. .merge-source {
  1726. flex: 1;
  1727. width: 33%;
  1728. display: flex;
  1729. flex-direction: column;
  1730. justify-content: flex-end;
  1731. }
  1732. .merge-source,
  1733. .merge-target {
  1734. padding-bottom: 3px;
  1735. border-left: 1px solid var(--border);
  1736. border-right: 1px solid var(--border);
  1737. padding: 7px 13px;
  1738. }
  1739. &:first-of-type {
  1740. margin-top: 6px;
  1741. .merge-source,
  1742. .merge-target {
  1743. border-top: 1px solid var(--border);
  1744. border-radius: 3px 3px 0 0;
  1745. }
  1746. }
  1747. &:last-of-type {
  1748. margin-bottom: 6px;
  1749. .merge-source,
  1750. .merge-target {
  1751. border-bottom: 1px solid var(--border);
  1752. border-radius: 0 0 3px 3px;
  1753. }
  1754. }
  1755. .merge-value {
  1756. margin-bottom: 3px;
  1757. }
  1758. .form-group {
  1759. padding: 0;
  1760. }
  1761. .form-control {
  1762. margin: 0 !important;
  1763. }
  1764. &.merge-group--multi {
  1765. .merge-value + .merge-value {
  1766. margin-top: 12px;
  1767. }
  1768. }
  1769. }
  1770. .merge-controls {
  1771. flex: 1;
  1772. align-self: flex-end;
  1773. }
  1774. .merge-control {
  1775. margin-bottom: 5px;
  1776. height: 31px;
  1777. text-align: center;
  1778. display: flex;
  1779. flex: 1;
  1780. justify-content: space-between;
  1781. align-items: center;
  1782. align-self: flex-end;
  1783. }
  1784. .merge-control-input {
  1785. flex: 1;
  1786. }
  1787. .merge-arrow {
  1788. margin: 0 12px;
  1789. display: flex;
  1790. align-items: center;
  1791. justify-content: center;
  1792. .line-arrow {
  1793. fill: var(--border);
  1794. }
  1795. }
  1796. .formGroup-label {
  1797. padding: 0 2px;
  1798. margin-bottom: 5px;
  1799. position: relative;
  1800. display: flex;
  1801. align-items: center;
  1802. h2 & {
  1803. padding: 0;
  1804. margin: 0;
  1805. }
  1806. label {
  1807. margin: 0;
  1808. }
  1809. a[data-toggle='collapse'] > label {
  1810. cursor: pointer;
  1811. color: var(--text-link);
  1812. }
  1813. a[data-toggle='collapse'] {
  1814. &:focus,
  1815. &:active {
  1816. text-decoration: underline;
  1817. }
  1818. &.collapsed {
  1819. & svg {
  1820. &.icon-arrow-right {
  1821. display: inline;
  1822. }
  1823. &.icon-arrow-down {
  1824. display: none;
  1825. }
  1826. }
  1827. }
  1828. &:not(.collapsed) {
  1829. & svg {
  1830. &.icon-arrow-right {
  1831. display: none;
  1832. }
  1833. &.icon-arrow-down {
  1834. display: inline;
  1835. }
  1836. }
  1837. }
  1838. }
  1839. .bookmark.icon {
  1840. margin-bottom: -1px;
  1841. }
  1842. .formGroup-metaControl {
  1843. @extend .u-clickable;
  1844. padding: 6px 4px;
  1845. margin: -6px 0 -6px auto;
  1846. font-size: 20px;
  1847. line-height: 1;
  1848. color: var(--interactive-muted);
  1849. }
  1850. }
  1851. .formGroup-bookmark {
  1852. @extend .u-clickable;
  1853. display: flex;
  1854. align-items: center;
  1855. flex-direction: row-reverse;
  1856. width: 30px;
  1857. height: 30px;
  1858. position: absolute;
  1859. right: 0;
  1860. top: -10px;
  1861. }
  1862. .form-group .controls .richtext {
  1863. position: relative;
  1864. height: auto;
  1865. }
  1866. .form-group .help-message {
  1867. cursor: help;
  1868. color: var(--interactive-muted);
  1869. top: -2px;
  1870. position: relative;
  1871. @include bidi-style(margin-left, auto, margin-right, 0);
  1872. .icon-help {
  1873. display: block;
  1874. }
  1875. }
  1876. .form-group:not(.formGroup--halfSize) {
  1877. clear: left;
  1878. }
  1879. .form-group.formGroup--halfSize {
  1880. width: 50%;
  1881. float: left;
  1882. @include phone {
  1883. width: auto;
  1884. float: none;
  1885. }
  1886. .form-control {
  1887. min-width: initial;
  1888. }
  1889. }
  1890. .formGroup--standalone .form-control {
  1891. margin-bottom: 0;
  1892. }
  1893. .controls--select {
  1894. position: relative;
  1895. }
  1896. .controls--datetime {
  1897. position: relative;
  1898. display: flex;
  1899. }
  1900. .controls--date {
  1901. position: relative;
  1902. }
  1903. .controls--datetime {
  1904. position: relative;
  1905. display: flex;
  1906. }
  1907. .controls--date {
  1908. position: relative;
  1909. }
  1910. .controls--grow {
  1911. flex-grow: 1;
  1912. }
  1913. .controls-label {
  1914. margin: 11px 10px 0;
  1915. flex-shrink: 0;
  1916. .form-control--small + & {
  1917. margin-top: 7px;
  1918. }
  1919. }
  1920. /* do not show safari auto fill icon - see issue #962 */
  1921. input::-webkit-contacts-auto-fill-button {
  1922. visibility: hidden;
  1923. display: none !important;
  1924. pointer-events: none;
  1925. position: absolute;
  1926. right: 0;
  1927. }
  1928. input[type='radio'],
  1929. input[type='checkbox'] {
  1930. margin: 0;
  1931. }
  1932. input[type='text'],
  1933. input[type='password'],
  1934. input[type='email'],
  1935. input[type='date'],
  1936. input[type='url'],
  1937. textarea,
  1938. .form-control,
  1939. .form-group .checkbox,
  1940. .form-group .radio {
  1941. display: block;
  1942. padding: 7px 12px;
  1943. width: 100%;
  1944. height: 41px;
  1945. font-size: 14px;
  1946. font-weight: normal;
  1947. line-height: 25px;
  1948. color: var(--text-normal);
  1949. background: var(--background-secondary);
  1950. border: 1px solid var(--border);
  1951. border-radius: 3px;
  1952. transition: none;
  1953. box-shadow: none;
  1954. outline: none;
  1955. appearance: none;
  1956. @include phone {
  1957. font-size: 16px;
  1958. }
  1959. .modal-body &,
  1960. .box &,
  1961. .sidebar &,
  1962. .hero-unit &,
  1963. .form-field-group &,
  1964. .popover & {
  1965. background: var(--background-primary);
  1966. }
  1967. .modal-body .form-field-group &,
  1968. .formset-inset & {
  1969. background: var(--background-secondary);
  1970. }
  1971. &.form-control--small {
  1972. padding: 5px 8px 4px;
  1973. height: 30px;
  1974. line-height: 20px;
  1975. &[multiple] {
  1976. height: auto;
  1977. }
  1978. &.form-control--multiline {
  1979. min-height: 30px;
  1980. }
  1981. }
  1982. &.form-control--inline {
  1983. display: inline-block;
  1984. width: auto;
  1985. }
  1986. &.form-control--multiline {
  1987. height: auto;
  1988. min-height: 41px;
  1989. }
  1990. &:focus,
  1991. &:focus-within,
  1992. &.focus {
  1993. border-color: var(--border-highlight);
  1994. box-shadow: 0 0 0 3px var(--shadow-highlight);
  1995. }
  1996. &.is-disabled, // .is-disabled should not be used - legacy support
  1997. &[disabled],
  1998. &[readonly] {
  1999. background: var(--background-secondary);
  2000. opacity: 0.38;
  2001. &:focus,
  2002. &.focus {
  2003. border-color: var(--border-highlight);
  2004. }
  2005. }
  2006. &.is-disabled, // .is-disabled should not be used
  2007. &[disabled] {
  2008. cursor: not-allowed;
  2009. }
  2010. }
  2011. input[type='url'] {
  2012. min-width: 400px;
  2013. }
  2014. .sidebar-content input[type='url'] {
  2015. min-width: inherit;
  2016. }
  2017. .user-select.form-control {
  2018. padding-right: 35px;
  2019. min-width: 300px;
  2020. }
  2021. input[type='time'] {
  2022. width: auto;
  2023. padding-left: 6px;
  2024. padding-right: 6px;
  2025. }
  2026. input.timeframe,
  2027. input.time {
  2028. box-sizing: content-box;
  2029. padding: 0 6px;
  2030. height: 39px;
  2031. line-height: 42px;
  2032. flex-shrink: 0;
  2033. &.form-control--small {
  2034. line-height: 20px;
  2035. padding-top: 0;
  2036. padding-bottom: 0;
  2037. }
  2038. }
  2039. input.timeframe {
  2040. width: 5.5ch;
  2041. }
  2042. input.time {
  2043. width: 4.5ch;
  2044. }
  2045. input.time.time--12 {
  2046. width: 7.5ch;
  2047. }
  2048. .tokenfield.focus {
  2049. border-color: var(--border-highlight);
  2050. box-shadow: 0 0 0 3px var(--shadow-highlight);
  2051. }
  2052. .richtext.form-control {
  2053. padding: 0;
  2054. }
  2055. .richtext.form-control [contenteditable] {
  2056. height: auto;
  2057. min-height: 82px;
  2058. background: none;
  2059. padding: 7px 12px 35px;
  2060. }
  2061. .richtext.form-control [contenteditable='false'] {
  2062. cursor: not-allowed;
  2063. opacity: 0.38;
  2064. border-color: var(--border);
  2065. padding: unset;
  2066. &:focus,
  2067. &.focus {
  2068. border-color: var(--border-highlight);
  2069. }
  2070. }
  2071. .richtext.is-readonly [contenteditable='false'] {
  2072. cursor: default;
  2073. opacity: 1;
  2074. padding: 7px 12px;
  2075. }
  2076. .richtext.form-control .attachments.attachments--list:not(:empty) {
  2077. border-top: 1px solid var(--background-modifier-border);
  2078. white-space: normal;
  2079. margin: 0 -12px -28px;
  2080. padding: 25px 20px 21px 72px;
  2081. position: relative;
  2082. line-height: 1;
  2083. }
  2084. .richtext-controls {
  2085. display: flex;
  2086. margin: 7px 7px 0;
  2087. padding: 3px 5px 10px;
  2088. border-bottom: 1px solid var(--background-modifier-border);
  2089. @include phone {
  2090. flex-wrap: nowrap;
  2091. }
  2092. }
  2093. textarea.form-control {
  2094. height: 118px;
  2095. resize: vertical;
  2096. &[rows] {
  2097. height: auto;
  2098. }
  2099. }
  2100. select.form-control:not([multiple]) {
  2101. @include bidi-style(padding-right, 34px, padding-left, 12px);
  2102. word-wrap: normal;
  2103. }
  2104. .form-control.is-hidden {
  2105. display: none;
  2106. }
  2107. .form-control.form-control--borderless {
  2108. border: none;
  2109. padding: 0;
  2110. line-height: inherit;
  2111. height: auto;
  2112. &:focus {
  2113. box-shadow: none;
  2114. }
  2115. }
  2116. select[multiple],
  2117. select[multiple]:focus {
  2118. option:checked {
  2119. color: var(--interactive-primary);
  2120. background: var(--ghost-color);
  2121. }
  2122. }
  2123. .select.form-group,
  2124. .user_autocompletion.form-group {
  2125. .form-control:not([multiple]) {
  2126. @include ltr(padding-right, 21px);
  2127. }
  2128. }
  2129. .form-control + .icon-arrow-down,
  2130. .dropdown-arrow {
  2131. position: absolute;
  2132. @include bidi-style(right, 12px, left, auto);
  2133. top: 50%;
  2134. margin-top: -3px;
  2135. width: 13px;
  2136. height: 7px;
  2137. @extend .u-unclickable;
  2138. }
  2139. .dropdown-clear {
  2140. position: absolute;
  2141. padding: 1px;
  2142. @include bidi-style(right, 12px, left, auto);
  2143. &--with-arrow-icon {
  2144. @include bidi-style(right, 35px, left, auto);
  2145. }
  2146. top: 50%;
  2147. margin-top: -7px;
  2148. border: 1px solid transparent;
  2149. .icon-diagonal-cross {
  2150. display: block;
  2151. width: 10px;
  2152. height: 10px;
  2153. fill: var(--interactive-muted);
  2154. }
  2155. &:focus {
  2156. outline: none;
  2157. border-radius: 3px;
  2158. border-color: var(--border-highlight);
  2159. box-shadow: 0 0 0 3px var(--shadow-highlight);
  2160. }
  2161. }
  2162. select::-ms-expand {
  2163. display: none;
  2164. }
  2165. .has-error .form-control,
  2166. .has-error .form-control:focus,
  2167. .has-error .form-control.focus {
  2168. box-shadow: none;
  2169. border-color: var(--danger-color) !important;
  2170. }
  2171. input.has-error {
  2172. box-shadow: none;
  2173. border-color: var(--danger-color) !important;
  2174. }
  2175. .help-inline:not(:empty) {
  2176. color: var(--danger-color);
  2177. padding: 2px;
  2178. font-size: 13px;
  2179. }
  2180. .zammad-form-modal-body {
  2181. background: var(--background-primary) !important;
  2182. }
  2183. /* use on input[type=radio] */
  2184. .primary-email-switch {
  2185. display: none;
  2186. & + label {
  2187. font-size: 11px;
  2188. color: var(--interactive-muted);
  2189. margin: 0;
  2190. @extend %clickable;
  2191. }
  2192. &:checked + label {
  2193. color: var(--highlight);
  2194. }
  2195. }
  2196. .primary-email-switch-label {
  2197. text-overflow: ellipsis;
  2198. overflow: hidden;
  2199. white-space: nowrap;
  2200. }
  2201. .primary-email-switch + label {
  2202. align-self: stretch;
  2203. padding: 0 5px;
  2204. display: flex;
  2205. align-items: center;
  2206. }
  2207. .controls--button {
  2208. display: flex;
  2209. flex-wrap: wrap;
  2210. .controls {
  2211. flex: 1;
  2212. }
  2213. .help-inline,
  2214. .help-block {
  2215. flex-basis: 100%;
  2216. }
  2217. input,
  2218. .form-control {
  2219. flex: 1 1 0%;
  2220. @include bidi-style(border-right-width, 0, border-left-width, 1px);
  2221. @include bidi-style(
  2222. border-top-right-radius,
  2223. 0,
  2224. border-top-left-radius,
  2225. 3px
  2226. );
  2227. @include bidi-style(
  2228. border-bottom-right-radius,
  2229. 0,
  2230. border-bottom-left-radius,
  2231. 3px
  2232. );
  2233. &:focus + .controls-button {
  2234. .controls-button-inner {
  2235. border-color: var(--border-highlight);
  2236. }
  2237. /*
  2238. fake the form-control outline
  2239. */
  2240. &::before {
  2241. content: '';
  2242. position: absolute;
  2243. left: 0;
  2244. @include rtl(left, -3px);
  2245. top: -3px;
  2246. right: -3px;
  2247. @include rtl(right, 0);
  2248. bottom: -3px;
  2249. background: var(--shadow-highlight);
  2250. @include bidi-style(
  2251. border-radius,
  2252. 0 7px 7px 0,
  2253. border-radius,
  2254. 7px 0 0 7px
  2255. );
  2256. }
  2257. }
  2258. }
  2259. }
  2260. .controls-button {
  2261. position: relative;
  2262. display: flex;
  2263. &.is-active .icon {
  2264. fill: var(--highlight);
  2265. }
  2266. }
  2267. .controls-button-inner {
  2268. display: flex;
  2269. justify-content: center;
  2270. align-items: center;
  2271. padding: 0 10px;
  2272. background: var(--background-secondary);
  2273. position: relative;
  2274. border: 1px solid var(--border);
  2275. @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);
  2276. .icon {
  2277. fill: var(--text-muted);
  2278. }
  2279. &:hover .icon {
  2280. fill: currentColor;
  2281. }
  2282. }
  2283. .searchfield {
  2284. position: relative;
  2285. margin-bottom: 20px;
  2286. .icon-magnifier,
  2287. .search-loader {
  2288. @include bidi-style(left, 15px, right, auto);
  2289. top: 12px;
  2290. width: 17px;
  2291. height: 17px;
  2292. position: absolute;
  2293. fill: var(--text-muted);
  2294. transition: 0.1s 0s;
  2295. pointer-events: none;
  2296. }
  2297. .search-loader {
  2298. z-index: 2;
  2299. opacity: 0;
  2300. .icon {
  2301. width: 17px;
  2302. height: 17px;
  2303. }
  2304. }
  2305. input[type='search'] {
  2306. appearance: textfield;
  2307. border-radius: 19px;
  2308. padding: 0 17px 0 42px;
  2309. @include rtl(padding, 0 42px 0 17px);
  2310. will-change: transform;
  2311. &.is-empty ~ .empty-search,
  2312. &:placeholder-shown ~ .empty-search {
  2313. visibility: hidden;
  2314. }
  2315. &.loading {
  2316. ~ .search-loader {
  2317. opacity: 1;
  2318. transition: 0.2s 0.5s;
  2319. }
  2320. ~ .icon-magnifier {
  2321. opacity: 0;
  2322. transition: 0.2s 0.5s;
  2323. }
  2324. }
  2325. }
  2326. input[type='search']::-webkit-search-cancel-button,
  2327. input[type='search']::-webkit-search-decoration {
  2328. -webkit-appearance: none;
  2329. }
  2330. .empty-search {
  2331. height: 100%;
  2332. width: 50px;
  2333. visibility: visible;
  2334. .icon {
  2335. width: 13px;
  2336. height: 13px;
  2337. fill: var(--text-muted);
  2338. opacity: 0.5;
  2339. }
  2340. }
  2341. }
  2342. .content {
  2343. overflow: auto;
  2344. -webkit-overflow-scrolling: touch;
  2345. position: relative;
  2346. background-color: var(--background-primary);
  2347. @include phone {
  2348. @include bidi-style(margin-left, $mobileNavigationWidth, margin-right, 0);
  2349. -webkit-overflow-scrolling: touch;
  2350. .navigation.is-not-collapsed ~ & {
  2351. transform: translateX(
  2352. #{$mobileNavigationWidthOpen - $mobileNavigationWidth}
  2353. );
  2354. @include rtl(
  2355. transform,
  2356. translateX(-#{$mobileNavigationWidthOpen - $mobileNavigationWidth})
  2357. );
  2358. }
  2359. }
  2360. }
  2361. .content.fit {
  2362. padding: 10px;
  2363. background: var(--background-tertiary);
  2364. z-index: 501;
  2365. }
  2366. .fullscreenMessage {
  2367. padding: 22px;
  2368. display: flex;
  2369. align-items: center;
  2370. justify-content: center;
  2371. flex: 1;
  2372. .icon {
  2373. @include bidi-style(margin-right, 14px, margin-left, 0);
  2374. }
  2375. .icon-error {
  2376. margin-top: -2px;
  2377. width: 19px;
  2378. height: 19px;
  2379. }
  2380. .icon-checkmark {
  2381. width: 21px;
  2382. height: 18px;
  2383. margin-right: 11px;
  2384. margin-top: -2px;
  2385. }
  2386. h2 {
  2387. margin: 0;
  2388. }
  2389. }
  2390. .fullscreenMessage--placeholder {
  2391. flex-direction: column;
  2392. .icon {
  2393. width: 100px;
  2394. height: 100px;
  2395. }
  2396. h2 {
  2397. margin: 15px;
  2398. color: var(--text-muted);
  2399. }
  2400. }
  2401. .selected-clue {
  2402. position: relative;
  2403. @extend .zIndex-11;
  2404. pointer-events: none;
  2405. }
  2406. .modal--clue {
  2407. display: flex;
  2408. align-items: center;
  2409. justify-content: center;
  2410. z-index: 500;
  2411. .modal-backdrop {
  2412. bottom: 0;
  2413. width: 200%;
  2414. height: 200%;
  2415. left: -100%;
  2416. top: -100%;
  2417. background: radial-gradient(
  2418. var(--backdrop-clue-start),
  2419. var(--backdrop-clue-end)
  2420. );
  2421. }
  2422. .modal-spacer {
  2423. position: absolute;
  2424. opacity: 0;
  2425. padding: 18px;
  2426. @extend .zIndex-11;
  2427. }
  2428. .modal-arrow {
  2429. background: inherit;
  2430. width: 20px;
  2431. height: 20px;
  2432. position: absolute;
  2433. margin: -10px 0 53px -10px;
  2434. left: 0;
  2435. top: 50%;
  2436. transform: rotate(45deg);
  2437. }
  2438. .modal-spacer[data-position='above'] .modal-arrow {
  2439. left: 50%;
  2440. top: 100%;
  2441. background: var(--background-primary);
  2442. }
  2443. .modal-spacer[data-position='below'] .modal-arrow {
  2444. left: 50%;
  2445. top: 0;
  2446. }
  2447. .modal-spacer[data-position='left'] .modal-arrow {
  2448. left: 100%;
  2449. top: 50%;
  2450. }
  2451. .modal-content {
  2452. border: none;
  2453. width: 300px;
  2454. box-shadow:
  2455. 0 8px 17px 0 rgba(0, 0, 0, 0.1),
  2456. 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  2457. @include phone {
  2458. width: 280px;
  2459. }
  2460. }
  2461. .modal-controls {
  2462. background: var(--background-primary);
  2463. margin: 23px 0 0;
  2464. padding: 10px;
  2465. display: flex;
  2466. align-items: center;
  2467. justify-content: space-between;
  2468. }
  2469. .modal-control {
  2470. padding-left: 14px;
  2471. padding-right: 14px;
  2472. .btn.is-disabled {
  2473. color: var(--text-normal);
  2474. }
  2475. }
  2476. .modal-header {
  2477. padding-bottom: 7px;
  2478. font-size: 18px;
  2479. }
  2480. .modal-body {
  2481. max-width: 340px;
  2482. }
  2483. }
  2484. .knowledge-base-content-can-be-published-dialog-current {
  2485. margin-bottom: 20px;
  2486. text-align: center;
  2487. }
  2488. .knowledge-base-content-can-be-published-dialog {
  2489. display: flex;
  2490. .side-panel {
  2491. flex-grow: 1;
  2492. width: 300px;
  2493. }
  2494. .call-to-action {
  2495. display: flex;
  2496. align-items: center;
  2497. justify-content: center;
  2498. }
  2499. }
  2500. .kb-sidebar-block-content {
  2501. & .kb-item--invisible {
  2502. opacity: 0.5;
  2503. }
  2504. & .kb-item--missing-translation,
  2505. & .kb-item--missing-translation:active,
  2506. & .kb-item--missing-translation:focus {
  2507. color: hsl(45, 98%, 63%);
  2508. }
  2509. }
  2510. .kb-menu-preview {
  2511. margin-bottom: 1em;
  2512. &-container {
  2513. display: flex;
  2514. flex-wrap: wrap;
  2515. justify-content: flex-end;
  2516. border: 1px solid var(--border-alt);
  2517. &--footer {
  2518. justify-content: center;
  2519. }
  2520. }
  2521. a,
  2522. span {
  2523. font-size: 14px;
  2524. padding: 0.5em 1em;
  2525. white-space: nowrap;
  2526. text-decoration: none;
  2527. line-height: 2em;
  2528. }
  2529. a {
  2530. color: inherit;
  2531. }
  2532. .label {
  2533. text-transform: none;
  2534. }
  2535. }
  2536. .modified-icon {
  2537. position: relative;
  2538. line-height: 1;
  2539. display: block;
  2540. .nav-pills > li > a & {
  2541. align-self: center;
  2542. }
  2543. .modified-icon-modifier {
  2544. bottom: 0;
  2545. right: 0;
  2546. position: absolute;
  2547. z-index: 1;
  2548. fill: var(--background-primary);
  2549. margin: 0 -2px -1px 0;
  2550. .nav-pills > li > a & {
  2551. fill: var(--background-secondary);
  2552. }
  2553. .nav-pills > li:hover > a & {
  2554. fill: var(--background-secondary-hover);
  2555. }
  2556. }
  2557. .icon-knowledge-base-answer + .modified-icon-modifier {
  2558. margin: 0 -1px 2px 0;
  2559. }
  2560. .icon-published-modifier {
  2561. display: none;
  2562. }
  2563. }
  2564. kbd {
  2565. background: var(--background-modifier-accent);
  2566. border-radius: 3px;
  2567. border: 1px solid var(--background-modifier-border);
  2568. box-shadow: var(--elevation-stroke);
  2569. display: inline-block;
  2570. font-size: 12px;
  2571. margin: 0 1px;
  2572. padding: 0 4px;
  2573. vertical-align: top;
  2574. }
  2575. .form-stacked .checkbox label {
  2576. color: inherit;
  2577. font-size: 13px;
  2578. text-transform: inherit;
  2579. vertical-align: baseline;
  2580. letter-spacing: inherit;
  2581. }
  2582. .pagination {
  2583. margin: 0 0 0 19px;
  2584. @include rtl(margin, 0 19px 0 0);
  2585. display: flex;
  2586. }
  2587. .pagination-counter {
  2588. margin: 0 0 0 19px;
  2589. @include rtl(margin, 0 19px 0 0);
  2590. line-height: 33px;
  2591. color: var(--text-muted);
  2592. }
  2593. .page-header {
  2594. margin: 0 0 15px;
  2595. padding: 0;
  2596. display: flex;
  2597. align-items: center;
  2598. flex-wrap: wrap;
  2599. width: 100%;
  2600. @include phone {
  2601. align-items: flex-start;
  2602. flex-wrap: nowrap;
  2603. }
  2604. }
  2605. .page-header--center {
  2606. justify-content: center;
  2607. }
  2608. .page-header-title {
  2609. display: flex;
  2610. align-items: center;
  2611. .zammad-switch {
  2612. @include bidi-style(margin-right, 9px, margin-left, 0);
  2613. }
  2614. h1,
  2615. h2 {
  2616. margin-top: 9px;
  2617. margin-bottom: 7px;
  2618. @include phone {
  2619. margin-top: 4px;
  2620. }
  2621. }
  2622. .suffix {
  2623. margin-left: 5px;
  2624. margin-top: 6px;
  2625. display: inline-block;
  2626. @include phone {
  2627. margin-top: 4px;
  2628. }
  2629. }
  2630. }
  2631. .page-header-center {
  2632. justify-self: center;
  2633. @include bidi-style(padding-left, 9px, padding-right, 0);
  2634. margin: 0 auto;
  2635. & + .page-header-meta {
  2636. @include bidi-style(margin-left, 0, margin-right, auto);
  2637. flex: none;
  2638. }
  2639. }
  2640. .page-header-meta {
  2641. @include bidi-style(margin-left, auto, margin-right, 0);
  2642. @include bidi-style(padding-left, 20px, padding-right, 0);
  2643. display: flex;
  2644. justify-content: flex-end;
  2645. flex: 1;
  2646. min-width: 0; /* firefox flexbug */
  2647. @include phone {
  2648. flex: 0 1 auto;
  2649. min-width: auto;
  2650. }
  2651. .btn {
  2652. overflow: hidden;
  2653. text-overflow: ellipsis;
  2654. white-space: nowrap;
  2655. @include phone {
  2656. flex-shrink: 0;
  2657. }
  2658. }
  2659. .btn + .btn {
  2660. @include bidi-style(margin-left, 9px, margin-right, 0);
  2661. }
  2662. }
  2663. .page-content {
  2664. .formGroup-label label,
  2665. .label {
  2666. color: var(--header-secondary);
  2667. }
  2668. .content-controls-align-right {
  2669. display: flex;
  2670. justify-content: flex-end;
  2671. }
  2672. }
  2673. .page-body--two-column {
  2674. display: flex;
  2675. }
  2676. .page-aside {
  2677. @include bidi-style(padding-right, 20px, padding-left, 0);
  2678. @include bidi-style(border-right, 1px solid var(--border), border-left, none);
  2679. @include bidi-style(margin-right, 20px, margin-left, 0);
  2680. width: 240px;
  2681. flex-shrink: 0;
  2682. flex-grow: 0;
  2683. }
  2684. .page-main {
  2685. flex: 1;
  2686. }
  2687. .page-loading {
  2688. min-height: 500px;
  2689. flex-grow: 1;
  2690. display: flex;
  2691. align-items: center;
  2692. justify-content: center;
  2693. }
  2694. .popover .page-loading {
  2695. min-height: 100px;
  2696. }
  2697. .page-loading-label {
  2698. @include bidi-style(margin-left, 10px, margin-right, 0);
  2699. margin-top: 1px;
  2700. }
  2701. .dropdown-menu .count {
  2702. padding-top: 1px;
  2703. @include bidi-style(margin-left, 10px, margin-right, 0);
  2704. }
  2705. .help-text,
  2706. .help-block {
  2707. color: var(--text-muted);
  2708. }
  2709. .help-block {
  2710. margin: 0;
  2711. font-size: 13px;
  2712. &.help-block--center {
  2713. text-align: center;
  2714. }
  2715. }
  2716. .help-block:not(:empty) {
  2717. margin: 8px 2px 0;
  2718. }
  2719. /* replace music icon with attachment */
  2720. .icon-attachment {
  2721. background-position: -24px 0;
  2722. }
  2723. /*
  2724. * hero-unit (used on getstarted, login, signup)
  2725. */
  2726. .hero-unit {
  2727. width: 500px;
  2728. margin: 10px 0;
  2729. padding: 23px 25px;
  2730. border: 1px solid var(--border);
  2731. color: var(--text-normal);
  2732. background-color: var(--background-secondary);
  2733. border-radius: 6px;
  2734. box-shadow: var(--fullscreen-drop-shadow);
  2735. @include phone {
  2736. width: auto;
  2737. padding: 12px 15px;
  2738. }
  2739. .inline-label {
  2740. font-size: inherit;
  2741. }
  2742. }
  2743. .hero-unit h1,
  2744. .hero-unit h2 {
  2745. margin-top: 0;
  2746. }
  2747. .getstarted,
  2748. .reset_password,
  2749. .request_admin_password_auth,
  2750. .signup,
  2751. .darkBackground,
  2752. .login {
  2753. padding: 10px;
  2754. background: var(--fullscreen-background);
  2755. }
  2756. .content.getstarted {
  2757. padding: 0;
  2758. .main {
  2759. padding: 20px 10px;
  2760. }
  2761. }
  2762. .login,
  2763. .reset_password,
  2764. .request_admin_password_auth,
  2765. .signup {
  2766. padding: 24px;
  2767. color: var(--fullscreen-text);
  2768. a {
  2769. color: var(--fullscreen-text-link);
  2770. &.text-muted {
  2771. color: inherit;
  2772. }
  2773. }
  2774. }
  2775. .login {
  2776. .form-controls {
  2777. flex-direction: column;
  2778. .btn {
  2779. width: 100%;
  2780. }
  2781. .btn--text {
  2782. display: block;
  2783. overflow: hidden;
  2784. text-overflow: ellipsis;
  2785. margin: initial;
  2786. text-align: center;
  2787. }
  2788. .btn + .btn:not(.align-right) {
  2789. margin-left: initial;
  2790. margin-right: initial;
  2791. }
  2792. }
  2793. .help-text {
  2794. margin-top: 10px;
  2795. text-align: left;
  2796. }
  2797. }
  2798. .login .hero-unit {
  2799. width: 430px;
  2800. margin: 0 0 28px;
  2801. @include phone {
  2802. width: auto;
  2803. }
  2804. }
  2805. .login .company-logo {
  2806. max-height: 100px;
  2807. max-width: 200px;
  2808. margin: 20px auto 42px;
  2809. display: block;
  2810. @include phone {
  2811. margin: 15px auto 28px;
  2812. }
  2813. }
  2814. .login p,
  2815. .reset_password p,
  2816. .signup p {
  2817. margin: 0 auto 22px;
  2818. max-width: 400px;
  2819. text-align: center;
  2820. @include phone {
  2821. margin: 0 auto 15px;
  2822. }
  2823. }
  2824. .reset_password p,
  2825. .signup p {
  2826. padding-top: 28px;
  2827. }
  2828. .login hr {
  2829. margin: 0 auto 22px;
  2830. width: 100%;
  2831. max-width: 400px;
  2832. }
  2833. .login p a,
  2834. .reset_password p a,
  2835. .signup p a {
  2836. text-decoration: underline;
  2837. }
  2838. .poweredBy {
  2839. display: flex;
  2840. align-items: center;
  2841. justify-content: center;
  2842. color: var(--fullscreen-text-muted);
  2843. margin: 34px 0 10px -16px;
  2844. @include rtl(margin, 34px -16px 10px 0);
  2845. cursor: default;
  2846. a {
  2847. color: inherit;
  2848. }
  2849. .icon-logo {
  2850. @include bidi-style(margin-right, 8px, margin-left, 0);
  2851. margin-top: -11px;
  2852. }
  2853. .logotype {
  2854. @include bidi-style(margin-left, 7px, margin-left, 0);
  2855. margin-top: -3px;
  2856. }
  2857. }
  2858. .fullscreen {
  2859. @extend .fit;
  2860. display: flex;
  2861. flex-direction: column;
  2862. align-items: center;
  2863. width: 100%;
  2864. height: 100%;
  2865. min-height: 100vh;
  2866. overflow: auto;
  2867. -webkit-overflow-scrolling: touch;
  2868. }
  2869. .fullscreen p {
  2870. color: var(--fullscreen-text);
  2871. }
  2872. .fullscreen-center {
  2873. margin: auto;
  2874. }
  2875. .fullscreen-body {
  2876. text-align: start;
  2877. display: inline-block;
  2878. }
  2879. ol.tabs {
  2880. list-style: decimal inside;
  2881. }
  2882. ol.tabs li {
  2883. display: list-item;
  2884. }
  2885. .tabs {
  2886. display: flex;
  2887. flex-flow: wrap;
  2888. padding: 0;
  2889. margin-bottom: 20px;
  2890. color: var(--interactive-muted);
  2891. border: 1px solid var(--border);
  2892. border-right: 0;
  2893. border-bottom: 0;
  2894. border-radius: 3px;
  2895. background: var(--background-secondary);
  2896. @include phone {
  2897. overflow: auto;
  2898. -webkit-overflow-scrolling: touch;
  2899. }
  2900. }
  2901. .tabs-condensed .tab {
  2902. padding-left: 5px;
  2903. padding-right: 5px;
  2904. }
  2905. .progress-tabs .tab {
  2906. cursor: default;
  2907. }
  2908. .tab {
  2909. color: inherit;
  2910. height: 35px;
  2911. padding: 8px 20px;
  2912. display: flex;
  2913. justify-content: center;
  2914. align-items: center;
  2915. min-width: 0;
  2916. flex-grow: 1;
  2917. @extend .u-clickable;
  2918. @include phone {
  2919. flex-shrink: 0;
  2920. display: block;
  2921. text-align: center;
  2922. }
  2923. &.active {
  2924. color: var(--text-inverted);
  2925. background: var(--button-active);
  2926. box-shadow: none;
  2927. flex-shrink: 0;
  2928. }
  2929. &-name {
  2930. min-width: 20px;
  2931. text-align: center;
  2932. white-space: nowrap;
  2933. overflow: hidden;
  2934. text-overflow: ellipsis;
  2935. }
  2936. &-badge {
  2937. flex-shrink: 0;
  2938. @include bidi-style(margin-left, 6px, margin-right, 0);
  2939. font-size: 13px;
  2940. margin-right: -7px;
  2941. background: var(--background-modifier-accent);
  2942. min-width: 21px;
  2943. padding: 0 7px;
  2944. height: 21px;
  2945. line-height: 21px;
  2946. white-space: nowrap;
  2947. text-align: center;
  2948. display: inline-block;
  2949. border-radius: 999px;
  2950. }
  2951. }
  2952. .tab-dropdown {
  2953. position: relative;
  2954. display: flex;
  2955. align-items: center;
  2956. justify-content: center;
  2957. .arrow {
  2958. @include bidi-style(margin-left, 10px, margin-right, 0);
  2959. opacity: 0.75;
  2960. }
  2961. .icon {
  2962. fill: var(--text-muted);
  2963. }
  2964. &.active {
  2965. background: var(--background-secondary);
  2966. .icon {
  2967. opacity: 1;
  2968. }
  2969. }
  2970. }
  2971. .tab:nth-child(n) {
  2972. border-right: 1px solid var(--border);
  2973. border-bottom: 1px solid var(--border);
  2974. }
  2975. .tabs.tabs--inline {
  2976. display: inline-flex;
  2977. margin-left: 0;
  2978. margin-right: 0;
  2979. .tab {
  2980. flex: none;
  2981. &:nth-last-child(2) {
  2982. @include bidi-style(border-right-width, 0, border-right-width, 1px);
  2983. }
  2984. }
  2985. }
  2986. .tabs--big {
  2987. margin: 28px auto;
  2988. font-size: 14px;
  2989. border-radius: 8px;
  2990. @include phone {
  2991. margin: 5px auto 28px;
  2992. }
  2993. .tab {
  2994. height: auto;
  2995. padding: 10px 23px 9px;
  2996. @include phone {
  2997. padding: 8px 20px;
  2998. }
  2999. &:first-child {
  3000. border-radius: 8px 0 0 8px;
  3001. @include rtl(border-radius, 0 8px 8px 0);
  3002. }
  3003. &:last-child {
  3004. border-radius: 0 8px 8px 0;
  3005. @include rtl(border-radius, 8px 0 0 8px);
  3006. }
  3007. &:only-child {
  3008. border-radius: 8px;
  3009. }
  3010. }
  3011. .tab-dropdown {
  3012. padding-left: 18px;
  3013. padding-right: 15px;
  3014. @include rtl(padding-left, 15px);
  3015. @include rtl(padding-right, 18px);
  3016. }
  3017. }
  3018. .dashboard .tabs--big {
  3019. width: 50%;
  3020. @include phone {
  3021. width: auto;
  3022. }
  3023. }
  3024. .separator {
  3025. margin: 20px 0;
  3026. position: relative;
  3027. text-align: center;
  3028. }
  3029. .separator::before {
  3030. content: '';
  3031. position: absolute;
  3032. width: 100%;
  3033. height: 1px;
  3034. top: 50%;
  3035. left: 0;
  3036. background: var(--border);
  3037. }
  3038. .separator-text {
  3039. padding: 0 10px;
  3040. color: var(--text-muted);
  3041. font-size: 12px;
  3042. letter-spacing: 0.05em;
  3043. text-transform: uppercase;
  3044. background: var(--background-secondary);
  3045. display: inline-block;
  3046. position: relative;
  3047. }
  3048. .auth-providers {
  3049. display: flex;
  3050. flex-wrap: wrap;
  3051. padding: 7px;
  3052. margin: -14px;
  3053. > form {
  3054. display: flex;
  3055. flex-grow: 1;
  3056. min-width: 50%;
  3057. }
  3058. }
  3059. .auth-provider {
  3060. height: 40px;
  3061. padding: 0 10px 0 7px;
  3062. margin: 7px;
  3063. color: white !important;
  3064. line-height: 23px;
  3065. border-radius: 4px;
  3066. display: flex;
  3067. flex-grow: 1;
  3068. justify-content: center;
  3069. align-items: center;
  3070. text-decoration: none;
  3071. border: none;
  3072. text-align: initial;
  3073. white-space: nowrap;
  3074. overflow: hidden;
  3075. @extend %clickable;
  3076. &.auth-provider--wide {
  3077. padding-right: 25px;
  3078. }
  3079. &.auth-provider--facebook {
  3080. background: #4f699c;
  3081. }
  3082. &.auth-provider--google {
  3083. background: hsl(0, 0%, 93%);
  3084. color: hsl(0, 0%, 46%) !important;
  3085. }
  3086. &.auth-provider--twitter {
  3087. background: #2daee1;
  3088. }
  3089. &.auth-provider--email {
  3090. background: #ffd22e;
  3091. }
  3092. &.auth-provider--linkedin {
  3093. background: #006087;
  3094. }
  3095. &.auth-provider--github {
  3096. background: hsl(0, 0%, 27%);
  3097. }
  3098. &.auth-provider--gitlab {
  3099. background: hsl(10, 78%, 53%);
  3100. }
  3101. &.auth-provider--microsoft {
  3102. background: hsl(0, 0%, 93%);
  3103. color: hsl(0, 0%, 46%) !important;
  3104. }
  3105. &.auth-provider--weibo {
  3106. background: hsl(0, 0%, 27%);
  3107. }
  3108. &.auth-provider--saml {
  3109. background: hsl(0, 0%, 27%);
  3110. }
  3111. &.auth-provider--sso {
  3112. background: #454545;
  3113. }
  3114. .provider-icon {
  3115. width: 29px;
  3116. height: 24px;
  3117. flex-shrink: 0;
  3118. @include bidi-style(margin-right, 10px, margin-left, 0);
  3119. }
  3120. .provider-name {
  3121. overflow: hidden;
  3122. text-overflow: ellipsis;
  3123. }
  3124. }
  3125. /*
  3126. global icon definitions
  3127. =======================
  3128. */
  3129. [data-font] {
  3130. font-style: normal;
  3131. text-rendering: auto;
  3132. font-feature-settings: 'liga';
  3133. -webkit-font-smoothing: antialiased;
  3134. -moz-osx-font-smoothing: grayscale;
  3135. font-size: 16px;
  3136. }
  3137. [data-font='FontAwesome'] {
  3138. font-size: 14px;
  3139. }
  3140. [data-font='material'] {
  3141. font-size: 18px;
  3142. }
  3143. [data-font='ionicons'] {
  3144. font-size: 18px;
  3145. }
  3146. .icon {
  3147. fill: currentColor;
  3148. &--md {
  3149. width: 2rem;
  3150. height: 2rem;
  3151. }
  3152. }
  3153. [class*='icon-file-'] {
  3154. color: var(--file-icon-background);
  3155. fill: var(--file-icon-color);
  3156. }
  3157. .icon-arrow-down,
  3158. .icon-arrow-up,
  3159. .icon-arrow-left,
  3160. .icon-arrow-right {
  3161. fill: var(--text-muted);
  3162. opacity: 0.39;
  3163. .btn--action & {
  3164. opacity: var(--interactive-primary);
  3165. }
  3166. .btn--success & {
  3167. fill: var(--text-inverted);
  3168. opacity: 1;
  3169. }
  3170. }
  3171. .icon-arrow-left,
  3172. .icon-arrow-right {
  3173. &.arrow--x2 {
  3174. width: 14px;
  3175. height: 26px;
  3176. }
  3177. }
  3178. .icon-arrow-left,
  3179. .icon-arrow-right,
  3180. .icon-line-left-arrow,
  3181. .icon-line-right-arrow,
  3182. .icon-long-arrow-right {
  3183. @include rtl(transform, scaleX(-1));
  3184. }
  3185. .arrow--disabled {
  3186. opacity: 0.23;
  3187. }
  3188. .icon-checkmark {
  3189. fill: var(--supergood-color);
  3190. }
  3191. .icon-error {
  3192. fill: var(--superbad-color);
  3193. }
  3194. .icon-danger {
  3195. color: hsl(41, 100%, 49%);
  3196. .alert.alert--warning & {
  3197. color: inherit;
  3198. }
  3199. }
  3200. .icon-draggable {
  3201. opacity: 0.3;
  3202. .table-draggable & {
  3203. vertical-align: middle;
  3204. cursor: move;
  3205. }
  3206. }
  3207. .loading.icon {
  3208. display: inline-block;
  3209. width: 30px;
  3210. height: 30px;
  3211. background: hsl(145, 51%, 45%);
  3212. animation: rotateplane 1.2s infinite ease-in-out;
  3213. }
  3214. .small.loading.icon {
  3215. width: 20px;
  3216. height: 20px;
  3217. }
  3218. .tiny.loading.icon {
  3219. width: 12px;
  3220. height: 12px;
  3221. }
  3222. .loading.icon.muted {
  3223. background: var(--ghost-color);
  3224. }
  3225. @keyframes rotateplane {
  3226. 0% {
  3227. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  3228. }
  3229. 50% {
  3230. transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  3231. }
  3232. 100% {
  3233. transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  3234. }
  3235. }
  3236. .icon-spinner-medium {
  3237. animation: spinIcon 0.9s steps(12) infinite;
  3238. }
  3239. .icon-spinner-small {
  3240. animation: spinIcon 0.9s steps(8) infinite;
  3241. }
  3242. @keyframes spinIcon {
  3243. to {
  3244. transform: rotate(-1turn);
  3245. }
  3246. }
  3247. .color-swatch {
  3248. padding: 2px;
  3249. margin: -2px 0 -4px;
  3250. @extend %clickable;
  3251. /* :after technique for bigger click area */
  3252. &::after {
  3253. content: '';
  3254. display: inline-block;
  3255. height: 11px;
  3256. width: 11px;
  3257. border-radius: 100%;
  3258. background: currentColor;
  3259. }
  3260. }
  3261. .icon-status {
  3262. fill: var(--ok-color);
  3263. &.inline {
  3264. margin-top: -3px;
  3265. vertical-align: middle;
  3266. }
  3267. &.inactive {
  3268. fill: var(--ghost-color);
  3269. }
  3270. &.ok {
  3271. fill: var(--supergood-color);
  3272. }
  3273. &.error {
  3274. fill: var(--superbad-color);
  3275. }
  3276. &.neutral {
  3277. fill: var(--ok-color);
  3278. }
  3279. }
  3280. .icon-status-modified-inner-circle {
  3281. position: absolute;
  3282. left: 50%;
  3283. top: 0;
  3284. will-change: opacity;
  3285. transform: translate3d(-50%, 0, 0);
  3286. animation: fade 1.8s ease-in-out infinite;
  3287. }
  3288. @keyframes fade {
  3289. 54% {
  3290. opacity: 1;
  3291. }
  3292. 90% {
  3293. opacity: 0;
  3294. }
  3295. 100% {
  3296. opacity: 1;
  3297. }
  3298. }
  3299. .icon-checkbox,
  3300. .icon-checkbox-checked,
  3301. .icon-checkbox-indeterminate {
  3302. fill: var(--text-inverted);
  3303. }
  3304. .icon-sso-button {
  3305. fill: var(--text-inverted);
  3306. }
  3307. /*
  3308. * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
  3309. */
  3310. .form {
  3311. margin: 0;
  3312. &--flexibleWidth .controls {
  3313. display: table;
  3314. }
  3315. &--horizontal {
  3316. display: flex;
  3317. flex-wrap: wrap;
  3318. align-items: flex-end;
  3319. .alert {
  3320. flex-basis: 100%;
  3321. }
  3322. fieldset {
  3323. flex: 1 1 auto;
  3324. margin-right: 6px;
  3325. }
  3326. .form-group:last-child {
  3327. margin-bottom: 0;
  3328. }
  3329. .form-buttons {
  3330. margin: 10px 10px 0 auto;
  3331. }
  3332. .controls {
  3333. min-width: 250px;
  3334. }
  3335. }
  3336. &--grid {
  3337. display: flex;
  3338. flex-wrap: wrap;
  3339. width: calc(100% + 20px);
  3340. margin-left: -10px;
  3341. margin-right: -10px;
  3342. @include phone {
  3343. display: block;
  3344. }
  3345. fieldset {
  3346. flex-basis: 100%;
  3347. display: flex;
  3348. flex-wrap: wrap;
  3349. }
  3350. .alert {
  3351. width: 100%;
  3352. margin-left: 10px;
  3353. margin-right: 10px;
  3354. margin-bottom: 10px;
  3355. margin-top: 0;
  3356. }
  3357. .form-group {
  3358. display: block;
  3359. padding: 0 10px;
  3360. width: 100%;
  3361. $sizes: '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5',
  3362. '4/5';
  3363. @each $size in $sizes {
  3364. &[data-width='#{$size}'] {
  3365. width: calc(#{$size} * 100%);
  3366. @include phone {
  3367. width: 100%;
  3368. }
  3369. }
  3370. }
  3371. }
  3372. }
  3373. }
  3374. .form-controls {
  3375. @extend .clearfix;
  3376. display: flex;
  3377. align-items: center;
  3378. margin-top: 10px;
  3379. .btn + .btn:not(.align-right) {
  3380. @include bidi-style(margin-left, 20px, margin-right, 10px);
  3381. }
  3382. &--inline {
  3383. margin-top: 0;
  3384. & > * {
  3385. @include bidi-style(margin-right, 10px, margin-left, 10px);
  3386. }
  3387. }
  3388. }
  3389. .form-buttons {
  3390. display: flex;
  3391. }
  3392. form a.standalone {
  3393. line-height: 40px;
  3394. margin: 0 5px;
  3395. }
  3396. form a.standalone.align-right {
  3397. @include bidi-style(margin-left, auto, margin-right, 0);
  3398. }
  3399. footer {
  3400. clear: both;
  3401. padding-top: 10px;
  3402. padding-left: 10px;
  3403. padding-right: 22px;
  3404. @include rtl(padding-left, 22px);
  3405. @include rtl(padding-right, 10px);
  3406. }
  3407. .overviews {
  3408. .sidebar {
  3409. @include small-desktop {
  3410. display: none;
  3411. }
  3412. }
  3413. .table > tbody > tr > td {
  3414. user-select: none;
  3415. }
  3416. }
  3417. .overview-header {
  3418. position: relative;
  3419. margin: 20px 0 32px;
  3420. height: 41px;
  3421. display: none;
  3422. align-items: center;
  3423. @include phone {
  3424. margin-top: 0;
  3425. }
  3426. .tabsHolder {
  3427. flex: 1;
  3428. @include bidi-style(margin-right, 20px, margin-left, 0);
  3429. min-width: 0; /* Firefox bug fix */
  3430. }
  3431. .tabs {
  3432. margin: 0;
  3433. position: relative;
  3434. @include phone {
  3435. overflow: visible;
  3436. }
  3437. }
  3438. .tab {
  3439. @include phone {
  3440. flex-shrink: 1;
  3441. }
  3442. }
  3443. .tabs-clone {
  3444. right: 0;
  3445. }
  3446. .dropdown {
  3447. min-width: 0;
  3448. width: 336px;
  3449. @include phone {
  3450. left: -1px;
  3451. right: auto;
  3452. width: calc(100vw - 70px);
  3453. }
  3454. }
  3455. @include small-desktop {
  3456. display: flex;
  3457. }
  3458. }
  3459. .table-overview {
  3460. @include phone {
  3461. margin-left: -10px;
  3462. margin-right: -10px;
  3463. }
  3464. }
  3465. .tableOverview-edit {
  3466. @extend .u-clickable, .u-highlight;
  3467. }
  3468. .bulkAction {
  3469. position: fixed;
  3470. bottom: 0;
  3471. @include bidi-style(left, $sidebarWidth + $navigationWidth, right, 0);
  3472. min-width: $minWidth - $sidebarWidth - $navigationWidth;
  3473. background: var(--background-secondary);
  3474. z-index: 1;
  3475. box-shadow:
  3476. 0 -1px rgba(0, 0, 0, 0.05),
  3477. 0 -2px rgba(0, 0, 0, 0.03),
  3478. 0 -3px rgba(0, 0, 0, 0.01);
  3479. @include small-desktop {
  3480. @include bidi-style(left, $navigationWidth, right, 0);
  3481. min-width: $minWidth - $sidebarWidth;
  3482. }
  3483. @include desktop {
  3484. @include bidi-style(
  3485. left,
  3486. $desktopSidebarWidth + $navigationWidth,
  3487. right,
  3488. 0
  3489. );
  3490. min-width: $minWidth - $desktopSidebarWidth;
  3491. }
  3492. &.no-sidebar {
  3493. @include bidi-style(left, $navigationWidth, right, 0);
  3494. min-width: $minWidth - $navigationWidth;
  3495. @include small-desktop {
  3496. min-width: $minWidth;
  3497. }
  3498. }
  3499. @include phone {
  3500. @include bidi-style(left, $mobileNavigationWidth, right, 0);
  3501. min-width: 0;
  3502. .navigation.is-not-collapsed ~ & {
  3503. @include bidi-style(left, $mobileNavigationWidthOpen, right, 0);
  3504. }
  3505. }
  3506. }
  3507. .bulkAction-firstStep {
  3508. display: flex;
  3509. align-items: center;
  3510. @include phone {
  3511. flex-direction: column;
  3512. align-items: flex-end;
  3513. }
  3514. .form-group.tree_select {
  3515. overflow: visible;
  3516. }
  3517. }
  3518. .bulkAction-firstStep .has-error {
  3519. border-color: red !important;
  3520. border: 1px solid;
  3521. }
  3522. .bulkAction-secondStep {
  3523. display: flex;
  3524. flex-direction: column;
  3525. &-bottom {
  3526. display: flex;
  3527. @include phone {
  3528. display: block;
  3529. }
  3530. }
  3531. }
  3532. .bulkAction .btn {
  3533. margin: 0 16px;
  3534. @include phone {
  3535. margin: 10px;
  3536. }
  3537. }
  3538. .bulkAction .btn--text {
  3539. @include bidi-style(margin-right, 0, margin-left, 16px);
  3540. }
  3541. .bulkAction-controls {
  3542. margin-top: 10px;
  3543. @include bidi-style(margin-left, auto, margin-right, 0);
  3544. @include phone {
  3545. margin-top: 0;
  3546. display: flex;
  3547. justify-content: space-between;
  3548. }
  3549. }
  3550. .panel {
  3551. box-shadow: none;
  3552. background: var(--background-secondary);
  3553. color: var(--text-normal);
  3554. }
  3555. .panel-default {
  3556. border-color: var(--border-alt);
  3557. }
  3558. .panel-default > .panel-heading {
  3559. padding-bottom: 8px;
  3560. font-weight: normal;
  3561. text-transform: uppercase;
  3562. font-size: 12px;
  3563. line-height: 17px;
  3564. letter-spacing: 0.05em;
  3565. color: inherit;
  3566. background: var(--background-primary-alt);
  3567. border-color: var(--border-alt);
  3568. + .panel-collapse > .panel-body {
  3569. border-top-color: var(--border-alt);
  3570. }
  3571. }
  3572. .panel-title {
  3573. font-size: inherit;
  3574. }
  3575. .panel-group .panel-heading {
  3576. display: block;
  3577. }
  3578. .panel-body ul {
  3579. list-style: none;
  3580. padding: 0;
  3581. margin: 0;
  3582. }
  3583. .well {
  3584. background: var(--background-secondary);
  3585. border: 1px solid var(--border);
  3586. border-radius: 3px;
  3587. padding: 10px;
  3588. }
  3589. .well-muted {
  3590. background-color: var(--background-secondary);
  3591. border: 1px solid rgba(0, 0, 0, 0.05);
  3592. border-radius: 4px;
  3593. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  3594. }
  3595. .merged,
  3596. .merge:hover {
  3597. text-decoration: line-through;
  3598. }
  3599. .translation {
  3600. border: 1px dotted #f92;
  3601. border-radius: 3px;
  3602. cursor: text;
  3603. }
  3604. .translation[contenteditable='true'] {
  3605. display: inline;
  3606. }
  3607. .translation[contenteditable='true']:hover,
  3608. .translation[contenteditable='true']:focus {
  3609. background: none;
  3610. }
  3611. .translation .icon-edit {
  3612. display: none;
  3613. }
  3614. .translation:hover .icon-edit {
  3615. display: inline-block;
  3616. }
  3617. .translationOverview .btn + .btn {
  3618. margin: -10px;
  3619. }
  3620. .sub_attribute .control-label {
  3621. width: 60px;
  3622. }
  3623. .sub_attribute .controls {
  3624. @include bidi-style(margin-left, 80px, margin-right, 0);
  3625. }
  3626. .splash {
  3627. position: absolute;
  3628. left: 0;
  3629. top: 0;
  3630. width: 100%;
  3631. height: 100%;
  3632. background: var(--background-primary);
  3633. display: flex;
  3634. align-items: center;
  3635. justify-content: center;
  3636. font-size: 16px;
  3637. color: var(--text-normal);
  3638. .icon {
  3639. @include bidi-style(margin-right, 10px, margin-left, 0);
  3640. }
  3641. }
  3642. .navigation {
  3643. width: $navigationWidth;
  3644. background: var(--menu-background-primary);
  3645. border: var(--menu-border);
  3646. position: relative;
  3647. container-name: navigation;
  3648. container-type: inline-size;
  3649. @include phone {
  3650. position: absolute;
  3651. @include bidi-style(left, 0, right, auto);
  3652. top: 0;
  3653. left: 0;
  3654. width: $mobileNavigationWidth;
  3655. height: 100%;
  3656. z-index: 999;
  3657. &:empty {
  3658. display: none !important;
  3659. }
  3660. &.is-not-collapsed {
  3661. width: $mobileNavigationWidthOpen;
  3662. .menu-item-name {
  3663. display: block;
  3664. padding-left: 15px;
  3665. }
  3666. }
  3667. }
  3668. }
  3669. @container navigation (width = 50px) {
  3670. .icon-double-arrow-left {
  3671. display: none;
  3672. }
  3673. }
  3674. @container navigation (width > 50px) {
  3675. .icon-double-arrow-right {
  3676. display: none;
  3677. }
  3678. }
  3679. .menu {
  3680. padding: 0;
  3681. margin: 0;
  3682. list-style: none;
  3683. flex-shrink: 0;
  3684. }
  3685. .menu .badge {
  3686. background: var(--ok-color);
  3687. color: hsl(233, 10%, 16%);
  3688. @include bidi-style(margin-right, 8px, margin-left, 0);
  3689. }
  3690. .menu .zammad-switch {
  3691. height: 22px;
  3692. }
  3693. .menu .dropdown-menu {
  3694. left: 10px;
  3695. right: 15px;
  3696. min-width: 0;
  3697. }
  3698. .menu-item {
  3699. padding: 0 15px;
  3700. height: 48px;
  3701. color: var(--menu-text);
  3702. border-bottom: 1px solid hsla(230, 4%, 84%, 0.05);
  3703. text-decoration: none;
  3704. display: flex;
  3705. align-items: center;
  3706. @extend %clickable;
  3707. @include phone {
  3708. padding: 0 13px;
  3709. position: relative;
  3710. }
  3711. .icon {
  3712. fill: var(--menu-icon);
  3713. &.accessory-icon {
  3714. opacity: 0.7;
  3715. }
  3716. }
  3717. &:hover {
  3718. background: var(--menu-background-primary-hover);
  3719. border-bottom-color: hsla(230, 4%, 84%, 0.1);
  3720. }
  3721. &.is-active,
  3722. &.is-hovered {
  3723. background: var(--menu-background-active);
  3724. color: var(--menu-text-active);
  3725. }
  3726. &.is-active .menu-item-icon,
  3727. &.is-active .dropdown-icon,
  3728. &.is-hovered .menu-item-icon {
  3729. fill: currentColor;
  3730. }
  3731. &.is-active .zammad-switch {
  3732. input:not(:checked) + label {
  3733. // switch background
  3734. background: var(--button-primary-background-active);
  3735. }
  3736. label::after {
  3737. background: var(--menu-switch-pointer-active);
  3738. }
  3739. }
  3740. .dropdown-icon {
  3741. fill: currentColor;
  3742. }
  3743. .zammad-switch {
  3744. @include phone {
  3745. .navigation:not(:hover, :active, .is-not-collapsed) & {
  3746. position: absolute;
  3747. right: 12px;
  3748. top: 12px;
  3749. width: auto;
  3750. height: auto;
  3751. border-radius: 0;
  3752. input:checked + label {
  3753. background: var(--supergood-color);
  3754. }
  3755. label {
  3756. width: 8px;
  3757. height: 8px;
  3758. background: red;
  3759. border-radius: 100%;
  3760. transition: none;
  3761. &::after {
  3762. display: none;
  3763. }
  3764. }
  3765. }
  3766. }
  3767. }
  3768. &-navigation-toggle-button {
  3769. justify-content: center;
  3770. border-top: 1px solid rgba(213, 213, 216, 0.05);
  3771. border-bottom: none;
  3772. @include desktop {
  3773. display: none;
  3774. }
  3775. @container navigation (width > 50px) {
  3776. justify-content: flex-end;
  3777. }
  3778. }
  3779. }
  3780. .menu-item-icon {
  3781. @include bidi-style(margin-right, 15px, margin-left, 0);
  3782. width: 24px;
  3783. height: 24px;
  3784. @include phone {
  3785. @include bidi-style(margin-right, 0, margin-left, 0);
  3786. }
  3787. }
  3788. .menu-item-name {
  3789. flex: 1;
  3790. margin-top: 2px;
  3791. @include phone {
  3792. display: none;
  3793. }
  3794. }
  3795. .call-widgets {
  3796. overflow-y: auto;
  3797. max-height: 30vh;
  3798. }
  3799. .call-widget {
  3800. background: var(--background-quaternary-alt);
  3801. padding: 8px 10px;
  3802. & + & {
  3803. border-top: 1px solid var(--background-modifier-border);
  3804. }
  3805. &-header {
  3806. display: flex;
  3807. color: inherit;
  3808. margin-bottom: 3px;
  3809. .label {
  3810. color: inherit;
  3811. margin: 0;
  3812. }
  3813. .btn--text {
  3814. color: inherit;
  3815. opacity: 0.5;
  3816. &:hover {
  3817. opacity: 1;
  3818. }
  3819. }
  3820. .icon-diagonal-cross {
  3821. width: 9px;
  3822. height: 9px;
  3823. margin-top: -5px;
  3824. }
  3825. }
  3826. }
  3827. .tasks {
  3828. background: var(--menu-background-secondary);
  3829. border-right: var(--menu-border-secondary);
  3830. flex: 1;
  3831. overflow: auto;
  3832. -webkit-overflow-scrolling: touch;
  3833. @include phone {
  3834. overflow-x: hidden;
  3835. min-height: 60px;
  3836. }
  3837. }
  3838. .tasks.tasks--standalone {
  3839. background: none;
  3840. margin: 8px 0 0;
  3841. padding: 0;
  3842. overflow: visible;
  3843. }
  3844. .tasks--standalone .task {
  3845. padding: 0;
  3846. margin-bottom: 9px;
  3847. display: flex;
  3848. .icon-holder {
  3849. &:first-child .icon-task-state {
  3850. margin-left: -2px;
  3851. }
  3852. .icon {
  3853. width: 16px;
  3854. height: 16px;
  3855. vertical-align: middle;
  3856. margin-top: -3px;
  3857. @include bidi-style(margin-right, 4px, margin-left, 0);
  3858. }
  3859. }
  3860. }
  3861. .tasks--standalone .task-text {
  3862. flex: 1;
  3863. min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
  3864. }
  3865. .tasks--standalone .task-id {
  3866. &::after {
  3867. content: ' - ';
  3868. }
  3869. }
  3870. .tasks--standalone .name {
  3871. @extend .u-highlight, .u-textTruncate;
  3872. display: block;
  3873. }
  3874. .tasks--standalone .time {
  3875. color: var(--text-muted);
  3876. }
  3877. .tasks--standalone .btn-show-all {
  3878. margin-bottom: 9px;
  3879. }
  3880. .nav-tab {
  3881. @include bidi-style(padding, 10px 15px 9px 0, padding, 10px 0 9px 15px);
  3882. position: relative;
  3883. color: var(--menu-text);
  3884. display: flex;
  3885. align-items: center;
  3886. @extend .u-clickable;
  3887. @include phone {
  3888. width: $mobileNavigationWidthOpen;
  3889. }
  3890. }
  3891. .tasks-navigation .nav-tab {
  3892. height: 40px;
  3893. border-bottom: 1px solid hsla(230, 4%, 84%, 0.05);
  3894. }
  3895. .tasks-navigation .nav-tab:not(.is-active):hover {
  3896. background: var(--menu-background-primary);
  3897. border-bottom-color: hsla(230, 4%, 84%, 0.1);
  3898. }
  3899. .navigation .nav-tab-name {
  3900. text-align: start;
  3901. &.is-inactive {
  3902. text-decoration: line-through;
  3903. opacity: 0.73;
  3904. }
  3905. }
  3906. .tasks-navigation .nav-tab-icon .error {
  3907. transform: scale(0.85);
  3908. }
  3909. .nav-tab.is-active,
  3910. .nav-tab.nav-tab--search:hover,
  3911. .nav-tab.nav-tab--search.is-hover {
  3912. background: var(--menu-background-active);
  3913. color: var(--menu-text-active);
  3914. .nav-tab-icon .icon {
  3915. fill: currentColor;
  3916. }
  3917. }
  3918. .nav-tab.ui-sortable-helper {
  3919. border-bottom-color: transparent;
  3920. }
  3921. .nav-tab.nav-tab--search {
  3922. height: 30px;
  3923. padding-top: 9px;
  3924. &.is-inactive {
  3925. text-decoration: line-through;
  3926. opacity: 0.73;
  3927. }
  3928. }
  3929. .nav-tab-icon {
  3930. margin-top: -3px;
  3931. display: flex;
  3932. align-items: center;
  3933. justify-content: center;
  3934. position: relative;
  3935. width: 30px;
  3936. }
  3937. .nav-tab-icon .icon {
  3938. max-width: 18px;
  3939. max-height: 18px;
  3940. fill: var(--nav-icon);
  3941. }
  3942. .nav-tab-icon .icon-diagonal-cross {
  3943. fill: #f35910;
  3944. width: 12px;
  3945. height: 12px;
  3946. }
  3947. .nav-tab-icon .icon.icon-loading {
  3948. animation: rotateplane 1.2s infinite ease-in-out;
  3949. fill: var(--supergood-color);
  3950. /*
  3951. Safari font rendering bugfix while animating
  3952. http://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running
  3953. */
  3954. @extend .zIndex-5; // stay beneath .global-search-menu
  3955. position: relative;
  3956. }
  3957. .nav-tab-close {
  3958. position: absolute;
  3959. @include bidi-style(right, 0, left, auto);
  3960. top: 0;
  3961. height: 100%;
  3962. @include bidi-style(padding-right, 16px, padding-left, 0);
  3963. visibility: hidden;
  3964. @extend .u-clickable;
  3965. display: flex;
  3966. align-items: center;
  3967. @include phone {
  3968. visibility: visible;
  3969. }
  3970. }
  3971. .nav-tab:hover .nav-tab-close {
  3972. visibility: visible;
  3973. }
  3974. .nav-tab-close-inner {
  3975. width: 19px;
  3976. height: 19px;
  3977. background-color: var(--menu-close-tab-background);
  3978. border-radius: 100%;
  3979. display: flex;
  3980. align-items: center;
  3981. justify-content: center;
  3982. }
  3983. .nav-tab-close:hover .nav-tab-close-inner {
  3984. background-color: #972e29;
  3985. }
  3986. .nav-tab-close svg {
  3987. width: 9px;
  3988. height: 9px;
  3989. fill: var(--text-inverted);
  3990. opacity: var(--menu-close-tab-opacity);
  3991. }
  3992. .nav-tab-close:hover svg {
  3993. opacity: 1;
  3994. }
  3995. .icon-task-state {
  3996. vertical-align: middle;
  3997. }
  3998. .nav-tab-icon .icon-task-state {
  3999. margin: 0;
  4000. }
  4001. .nav-tab.task-state-open.is-active {
  4002. background-color: var(--ok-color);
  4003. color: var(--menu-text-open);
  4004. }
  4005. .task-state-open-color {
  4006. color: var(--ok-color);
  4007. }
  4008. .icon-task-state.open {
  4009. fill: var(--ok-color);
  4010. }
  4011. .nav-tab.task-state-closed.is-active {
  4012. background-color: var(--supergood-color);
  4013. color: var(--menu-text-closed);
  4014. }
  4015. .task-state-closed-color {
  4016. color: var(--supergood-color);
  4017. }
  4018. .icon-task-state.closed {
  4019. fill: var(--supergood-color);
  4020. }
  4021. .nav-tab.task-state-escalating.is-active {
  4022. background-color: var(--superbad-color);
  4023. color: var(--menu-text-escalating);
  4024. }
  4025. .task-state-escalating-color {
  4026. color: var(--superbad-color);
  4027. }
  4028. .icon-task-state.escalating {
  4029. fill: var(--superbad-color);
  4030. }
  4031. // TODO: rename to knowledgebase icon when it's available
  4032. .icon-task-state.archived {
  4033. fill: var(--superbad-color);
  4034. }
  4035. .icon-task-state.published {
  4036. fill: var(--supergood-color);
  4037. }
  4038. .icon-task-state.draft {
  4039. fill: var(--ghost-color);
  4040. }
  4041. // pending: stays blue
  4042. // .nav-tab.task-state-pending.is-active {
  4043. // background-color: var(--pending-color);
  4044. // }
  4045. .task-state-pending-color {
  4046. color: var(--text-muted);
  4047. }
  4048. .icon-task-state.pending {
  4049. fill: var(--pending-color);
  4050. }
  4051. .state-badge {
  4052. display: flex;
  4053. align-items: center;
  4054. .icon-task-state {
  4055. @include bidi-style(margin-right, 2px, margin-left, 0);
  4056. }
  4057. }
  4058. .search {
  4059. padding: 11px 5px 4px 10px;
  4060. @include rtl(padding, 11px 10px 4px 0);
  4061. border-bottom: 1px solid rgba(240, 250, 255, 0.05);
  4062. flex-shrink: 0;
  4063. display: flex;
  4064. align-items: flex-start;
  4065. background-color: inherit;
  4066. @include phone {
  4067. padding: 10px 5px 5px;
  4068. @include rtl(padding, 10px 5px 5px);
  4069. display: block;
  4070. }
  4071. }
  4072. .search-holder {
  4073. flex: 1;
  4074. border-radius: 15px;
  4075. position: relative;
  4076. transition: margin-right 120ms;
  4077. will-change: margin-right;
  4078. @include phone {
  4079. transition: none;
  4080. will-change: initial;
  4081. }
  4082. }
  4083. .empty-search {
  4084. position: absolute;
  4085. @include bidi-style(right, 0, left, auto);
  4086. top: 0;
  4087. height: 30px;
  4088. width: 40px;
  4089. z-index: 1;
  4090. visibility: hidden;
  4091. display: flex;
  4092. align-items: center;
  4093. justify-content: center;
  4094. @extend %clickable;
  4095. }
  4096. .search .empty-search .icon-diagonal-cross {
  4097. fill: var(--text-inverted);
  4098. opacity: 0.5;
  4099. }
  4100. .filled.search .empty-search {
  4101. visibility: visible;
  4102. }
  4103. .search input[type='search'] {
  4104. width: 100%;
  4105. padding: 5px 33px;
  4106. height: 30px;
  4107. color: var(--menu-text);
  4108. background: var(--menu-background-secondary);
  4109. line-height: 20px;
  4110. outline: none;
  4111. border: none;
  4112. border-radius: 15px;
  4113. position: relative;
  4114. z-index: 1;
  4115. appearance: textfield;
  4116. @include phone {
  4117. padding: 5px 33px;
  4118. font-size: 16px;
  4119. }
  4120. }
  4121. .navigation:not(.is-not-collapsed)
  4122. .search:not(.filled, .focused)
  4123. input[type='search'] {
  4124. @include phone {
  4125. padding: 0;
  4126. }
  4127. }
  4128. input[type='search']::-webkit-search-cancel-button,
  4129. input[type='search']::-webkit-search-decoration {
  4130. -webkit-appearance: none;
  4131. }
  4132. .search .search-loader {
  4133. position: absolute;
  4134. top: 8px;
  4135. left: 10px;
  4136. z-index: 2;
  4137. opacity: 0;
  4138. transition: 0.1s 0s;
  4139. pointer-events: none;
  4140. .icon {
  4141. fill: var(--text-inverted);
  4142. opacity: 0.5;
  4143. }
  4144. }
  4145. .search.loading .search-loader {
  4146. opacity: 1;
  4147. transition: 0.2s 0.5s;
  4148. }
  4149. .search .icon-magnifier {
  4150. position: absolute;
  4151. top: 8px;
  4152. left: 10px;
  4153. @include bidi-style(left, 10px, right, auto);
  4154. z-index: 2;
  4155. fill: var(--menu-icon);
  4156. transition: opacity 0.1s;
  4157. pointer-events: none;
  4158. }
  4159. .search.loading .icon-magnifier {
  4160. opacity: 0;
  4161. transition: 0.2s 0.5s;
  4162. }
  4163. .search.focused .search-holder {
  4164. transition: margin-right 240ms;
  4165. @include bidi-style(margin-right, -59px, margin-left, 0);
  4166. @include phone {
  4167. margin: 0 !important;
  4168. }
  4169. }
  4170. .search.focused .logo {
  4171. opacity: 0;
  4172. z-index: -1;
  4173. @include phone {
  4174. opacity: 1;
  4175. z-index: initial;
  4176. }
  4177. }
  4178. .search.filled {
  4179. .search-holder {
  4180. @include phone {
  4181. .navigation:not(:hover, :active, .is-not-collapsed) & {
  4182. width: 210px;
  4183. }
  4184. }
  4185. }
  4186. .logo {
  4187. @include phone {
  4188. opacity: 0;
  4189. }
  4190. }
  4191. }
  4192. .search .logo {
  4193. display: inline-block;
  4194. position: relative;
  4195. @extend .u-clickable, .zIndex-3;
  4196. margin: -4px 10px 0 12px;
  4197. transition: 240ms;
  4198. @include phone {
  4199. margin: 10px 0 0;
  4200. }
  4201. }
  4202. .search .logo .icon-logo {
  4203. position: relative;
  4204. @include phone {
  4205. width: 35px;
  4206. height: 30px;
  4207. margin-left: 4px;
  4208. }
  4209. }
  4210. .search .logo .activity-counter {
  4211. min-width: 21px;
  4212. position: absolute;
  4213. right: -3px;
  4214. bottom: 2px;
  4215. padding: 0 4px;
  4216. font-size: 12px;
  4217. font-weight: 300;
  4218. line-height: 16px;
  4219. text-align: center;
  4220. color: var(--text-inverted);
  4221. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
  4222. background: hsl(360, 71%, 60%);
  4223. border-radius: 10px;
  4224. border: 2px solid var(--menu-background-primary);
  4225. }
  4226. .search .logo .activity-counter:empty {
  4227. display: none;
  4228. }
  4229. .global-search-menu {
  4230. @extend .zIndex-7;
  4231. background: var(--menu-background-primary);
  4232. position: absolute;
  4233. left: 0;
  4234. right: 0;
  4235. bottom: 0;
  4236. top: 53px;
  4237. display: none;
  4238. overflow: auto;
  4239. -webkit-overflow-scrolling: touch;
  4240. .divider {
  4241. height: 1px;
  4242. background: var(--menu-background-secondary);
  4243. margin: 14px 0 17px;
  4244. }
  4245. }
  4246. .search.open .global-search-menu {
  4247. display: block;
  4248. }
  4249. .global-search-detail-link {
  4250. padding: 9px 15px 8px 0;
  4251. margin-bottom: 7px;
  4252. height: auto !important;
  4253. .no-match & {
  4254. display: none;
  4255. }
  4256. .nav-tab-icon {
  4257. width: 18px;
  4258. margin-left: 10px;
  4259. margin-right: 10px;
  4260. .icon {
  4261. width: 18px;
  4262. height: 14px;
  4263. }
  4264. }
  4265. .nav-tab-name {
  4266. .icon {
  4267. fill: currentColor;
  4268. margin: -2px 0 0 3px;
  4269. vertical-align: middle;
  4270. }
  4271. }
  4272. }
  4273. .global-search-result {
  4274. margin: 0;
  4275. padding: 0;
  4276. list-style: none;
  4277. }
  4278. .global-search-detail-no-result {
  4279. margin: 0 10px;
  4280. .icon {
  4281. width: 30px;
  4282. height: 29px;
  4283. }
  4284. }
  4285. .user-menu {
  4286. padding: 0;
  4287. margin: 0;
  4288. list-style: none;
  4289. position: relative;
  4290. flex-shrink: 0;
  4291. display: flex;
  4292. @include phone {
  4293. flex-direction: column;
  4294. }
  4295. }
  4296. .user-menu > li {
  4297. flex: 1;
  4298. background: var(--menu-background-primary);
  4299. }
  4300. .user-menu .list-button {
  4301. height: 60px;
  4302. position: relative;
  4303. text-decoration: none;
  4304. @extend .u-clickable;
  4305. display: flex;
  4306. align-items: center;
  4307. justify-content: center;
  4308. @include phone {
  4309. height: 46px;
  4310. }
  4311. }
  4312. .user-menu .list-button *:not(.dropdown-nose, .icon-crown),
  4313. .user-menu .list-button *:not(.dropdown-nose, .icon-crown-silver) {
  4314. position: relative;
  4315. }
  4316. .user-menu > li:hover .list-button::before,
  4317. .user-menu > li.open .list-button::before,
  4318. .user-menu > li.is-active .list-button::before,
  4319. .user-menu > li.is-hovered .list-button::before {
  4320. content: '';
  4321. position: absolute;
  4322. top: 4px;
  4323. right: 4px;
  4324. bottom: 4px;
  4325. left: 4px;
  4326. background: var(--menu-icon-secondary-hover-background);
  4327. }
  4328. .user-menu > li.is-active .list-button::before {
  4329. background: var(--highlight);
  4330. }
  4331. .user-menu li.add:hover .list-button::before,
  4332. .user-menu li.add.is-active .list-button::before,
  4333. .user-menu li.add.is-hovered .list-button::before {
  4334. background: #38ae6a;
  4335. }
  4336. .user-menu-icon {
  4337. width: 20px;
  4338. height: 20px;
  4339. fill: var(--menu-icon-secondary);
  4340. }
  4341. .user-menu-icon.icon-plus {
  4342. fill: hsl(145, 51%, 45%);
  4343. }
  4344. .user-menu > li:hover .user-menu-icon {
  4345. fill: var(--menu-background-primary);
  4346. }
  4347. .user-menu > li.is-active .user-menu-icon {
  4348. fill: var(--text-inverted);
  4349. }
  4350. .user-menu > li.add:hover .user-menu-icon.icon-plus,
  4351. .user-menu > li.add.is-hovered .user-menu-icon.icon-plus,
  4352. .user-menu > li.add.is-active .user-menu-icon.icon-plus {
  4353. fill: var(--text-inverted);
  4354. }
  4355. .user-menu > li:not(:last-child) {
  4356. border-right: 1px solid var(--background-modifier-accent);
  4357. @include phone {
  4358. border: none;
  4359. }
  4360. }
  4361. .dropdown-nose {
  4362. position: absolute;
  4363. border: 7px solid transparent;
  4364. border-bottom: none;
  4365. border-top: 7px solid var(--background-secondary);
  4366. left: 50%;
  4367. margin-left: -7px;
  4368. top: -6px;
  4369. display: none;
  4370. }
  4371. li.add .dropdown-nose {
  4372. border-top-color: #38af6e;
  4373. }
  4374. .open.dropdown .dropdown-nose,
  4375. .open.dropup .dropdown-nose {
  4376. display: block;
  4377. }
  4378. .user-menu .dropdown-menu {
  4379. padding: 0;
  4380. border-radius: 0;
  4381. margin-bottom: 5px;
  4382. min-width: 0;
  4383. left: 10px;
  4384. right: 15px;
  4385. width: 235px;
  4386. box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28);
  4387. &.selected-clue {
  4388. position: absolute;
  4389. }
  4390. }
  4391. .user-menu li.add .dropdown-menu {
  4392. background-color: #38af6e;
  4393. }
  4394. .user-menu li.add .dropdown-menu li > a {
  4395. color: var(--text-inverted);
  4396. }
  4397. .user-menu li.add .dropdown-menu .divider {
  4398. background: #4cb77c;
  4399. }
  4400. .user-menu .dropdown-menu .divider {
  4401. margin: 0;
  4402. }
  4403. .user-menu .dropdown-menu > li > a {
  4404. display: flex;
  4405. }
  4406. .avatar {
  4407. width: 40px;
  4408. height: 40px;
  4409. background-size: cover;
  4410. background-position: center;
  4411. border-radius: 100%;
  4412. display: inline-block;
  4413. vertical-align: bottom;
  4414. position: relative;
  4415. flex-shrink: 0;
  4416. @include phone {
  4417. width: 30px;
  4418. height: 30px;
  4419. }
  4420. a {
  4421. color: inherit;
  4422. }
  4423. &.size-30 {
  4424. width: 30px;
  4425. height: 30px;
  4426. @include phone {
  4427. width: 22px;
  4428. height: 22px;
  4429. }
  4430. }
  4431. .icon-crown,
  4432. .icon-crown-silver {
  4433. position: absolute;
  4434. width: 28px;
  4435. left: 50%;
  4436. margin-left: -14px;
  4437. top: -15px;
  4438. @include phone {
  4439. width: 20px;
  4440. margin-left: -10px;
  4441. }
  4442. }
  4443. .icon-crown {
  4444. fill: hsl(47, 100%, 59%);
  4445. }
  4446. &-status {
  4447. position: absolute;
  4448. right: -4px;
  4449. bottom: -4px;
  4450. border-radius: 999px;
  4451. background: var(--background-tertiary);
  4452. fill: var(--text-inverted);
  4453. width: 21px;
  4454. height: 21px;
  4455. display: flex;
  4456. align-items: center;
  4457. justify-content: center;
  4458. }
  4459. &.size-50 {
  4460. width: 50px;
  4461. height: 50px;
  4462. @include phone {
  4463. width: 36px;
  4464. height: 36px;
  4465. }
  4466. .icon-crown,
  4467. .icon-crown-silver {
  4468. width: 36px;
  4469. margin-left: -18px;
  4470. @include phone {
  4471. width: 26px;
  4472. margin-left: -13px;
  4473. }
  4474. }
  4475. }
  4476. &.size-80 {
  4477. width: 82px;
  4478. height: 82px;
  4479. @include phone {
  4480. width: 60px;
  4481. height: 60px;
  4482. }
  4483. .icon-crown,
  4484. .icon-crown-silver {
  4485. width: 64px;
  4486. margin-left: -32px;
  4487. top: -16px;
  4488. @include phone {
  4489. width: 46px;
  4490. margin-left: -43px;
  4491. top: -15px;
  4492. }
  4493. }
  4494. }
  4495. &--vacation {
  4496. filter: grayscale(70%);
  4497. opacity: 1;
  4498. }
  4499. &--idle {
  4500. filter: grayscale(100%);
  4501. opacity: 0.5;
  4502. }
  4503. &--inactive {
  4504. filter: grayscale(100%);
  4505. opacity: 0.2;
  4506. }
  4507. &--organization {
  4508. background: var(--background-modifier-accent);
  4509. color: var(--text-muted);
  4510. }
  4511. &--unique {
  4512. background-image: image_url('/assets/images/avatar-bg.png');
  4513. background-size: 300px 226px;
  4514. color: var(--text-inverted);
  4515. line-height: 40px;
  4516. text-align: center;
  4517. font-size: 13px;
  4518. letter-spacing: 0.05em;
  4519. text-transform: uppercase;
  4520. text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  4521. @include phone {
  4522. line-height: 30px;
  4523. }
  4524. &.size-30 {
  4525. font-size: 10px;
  4526. line-height: 32px;
  4527. background-size: 225px 170px;
  4528. @include phone {
  4529. line-height: 22px;
  4530. }
  4531. }
  4532. &.size-50 {
  4533. font-size: 16px;
  4534. line-height: 52px;
  4535. background-size: 375px 283px;
  4536. @include phone {
  4537. line-height: 38px;
  4538. }
  4539. }
  4540. &.size-80 {
  4541. font-size: 26px;
  4542. line-height: 84px;
  4543. background-size: 600px 452px;
  4544. @include phone {
  4545. line-height: 62px;
  4546. }
  4547. }
  4548. }
  4549. &--not-linked {
  4550. cursor: default;
  4551. }
  4552. &--organization {
  4553. display: flex;
  4554. align-items: center;
  4555. justify-content: center;
  4556. .icon-organization {
  4557. fill: currentColor;
  4558. }
  4559. &.size-80 {
  4560. .icon-inactive-organization,
  4561. .icon-organization {
  4562. width: 32px;
  4563. height: 32px;
  4564. }
  4565. }
  4566. }
  4567. &--group {
  4568. overflow: hidden;
  4569. .icon {
  4570. fill: var(--text-inverted);
  4571. position: absolute;
  4572. left: 50%;
  4573. transform: translateX(-50%);
  4574. width: 44px;
  4575. height: 44px;
  4576. bottom: -8px;
  4577. }
  4578. &.size-30 .icon {
  4579. width: 33px;
  4580. height: 33px;
  4581. bottom: -6px;
  4582. }
  4583. &.size-50 .icon {
  4584. width: 55px;
  4585. height: 55px;
  4586. bottom: -10px;
  4587. }
  4588. &.size-80 .icon {
  4589. width: 88px;
  4590. height: 88px;
  4591. bottom: -15px;
  4592. }
  4593. &-color-0 {
  4594. background: hsl(192, 100%, 38%);
  4595. }
  4596. &-color-1 {
  4597. background: hsl(148, 100%, 38%);
  4598. }
  4599. &-color-2 {
  4600. background: hsl(57, 100%, 37%);
  4601. }
  4602. }
  4603. .icon-logo {
  4604. width: 100%;
  4605. height: 100%;
  4606. }
  4607. }
  4608. .sidebar {
  4609. position: relative;
  4610. width: 280px;
  4611. padding: 20px;
  4612. color: var(--text-normal);
  4613. background: var(--background-secondary);
  4614. @include bidi-style(border-right, 1px solid var(--border), border-left, none);
  4615. overflow: auto;
  4616. -webkit-overflow-scrolling: touch;
  4617. @include small-desktop {
  4618. &.optional {
  4619. display: none;
  4620. }
  4621. }
  4622. h2 {
  4623. margin-top: 0;
  4624. }
  4625. h3 {
  4626. margin: 0;
  4627. font-weight: normal;
  4628. font-size: 16px;
  4629. text-transform: initial;
  4630. letter-spacing: 0;
  4631. }
  4632. }
  4633. .sidebar-block {
  4634. margin: 20px 0;
  4635. &:first-child {
  4636. margin-top: 0;
  4637. }
  4638. &-actions {
  4639. margin-bottom: 7px;
  4640. }
  4641. &-header {
  4642. margin-bottom: 7px;
  4643. h2 {
  4644. margin: 0;
  4645. }
  4646. }
  4647. [contenteditable='true'] {
  4648. white-space: normal; // do no u-textTruncate, we want to edit it inline
  4649. }
  4650. .btn-list {
  4651. margin-bottom: 5px;
  4652. }
  4653. &-button {
  4654. .sidebar-block-header + &.text-muted {
  4655. margin-top: 3px;
  4656. }
  4657. }
  4658. }
  4659. .sidebar-git-issue-delete {
  4660. text-align: right;
  4661. @include rtl(text-align, left);
  4662. float: right;
  4663. @include rtl(float, left);
  4664. }
  4665. .sidebar-git-issue-content {
  4666. width: 90%;
  4667. }
  4668. .main + .sidebar {
  4669. border-right: none;
  4670. border-left: 1px solid var(--border);
  4671. @include dark {
  4672. border-left: none;
  4673. }
  4674. }
  4675. .NavBarAdmin.sidebar,
  4676. .NavBarProfile.sidebar {
  4677. width: $sidebarWidth;
  4678. @include phone {
  4679. width: 50px;
  4680. padding-left: 10px;
  4681. padding-right: 10px;
  4682. &:hover,
  4683. &:active {
  4684. width: 165px;
  4685. padding-left: 15px;
  4686. padding-right: 15px;
  4687. }
  4688. }
  4689. h2 {
  4690. margin: 21px 0 12px;
  4691. @include phone {
  4692. white-space: nowrap;
  4693. }
  4694. }
  4695. h2:first-child {
  4696. margin-top: 0;
  4697. }
  4698. }
  4699. .nav-stacked > li + li {
  4700. margin-top: 0;
  4701. }
  4702. .nav-pills > li > a,
  4703. .nav-pills > li > a:focus,
  4704. .nav-pills > li > a:active,
  4705. .nav-pills .nav-pills-placeholder {
  4706. color: var(--text-nav);
  4707. border-radius: 0;
  4708. background: transparent; /* a:focus, a:active with bg: transparent fixes gray focus bg in IE 10 */
  4709. display: flex;
  4710. @extend .u-textTruncate;
  4711. }
  4712. .nav-pills.nav-stacked > li > a,
  4713. .nav-pills.nav-stacked > li > a:focus,
  4714. .nav-pills.nav-stacked > li > a:active,
  4715. .nav-pills.nav-stacked .nav-pills-placeholder {
  4716. padding: 0;
  4717. height: 40px;
  4718. line-height: 39px;
  4719. border-top: 1px solid var(--background-modifier-border);
  4720. }
  4721. .nav-pills.nav-stacked .nav-pills-placeholder {
  4722. display: block;
  4723. border-top: none;
  4724. @extend .label-subtle;
  4725. @extend .u-textTruncate;
  4726. }
  4727. .nav-pills > li:hover > a {
  4728. background: var(--background-secondary-hover);
  4729. }
  4730. .nav-pills.nav-stacked > li:hover > a,
  4731. .nav-pills.nav-stacked > li.active + li:not(.active) > a,
  4732. .nav-pills.nav-stacked > li:hover + li:not(.active) > a {
  4733. border-color: transparent;
  4734. }
  4735. .nav-pills > li.active > a,
  4736. .nav-pills > li.active > a:hover,
  4737. .nav-pills > li.active > a:focus {
  4738. color: var(--text-active);
  4739. background: var(--background-active);
  4740. border-color: var(--background-modifier-border);
  4741. }
  4742. .nav-pills.nav-stacked > li:hover > a,
  4743. .nav-pills.nav-stacked > li.active > a,
  4744. .nav-pills.nav-stacked > li.active > a:hover,
  4745. .nav-pills.nav-stacked > li.active > a:focus {
  4746. padding-left: 10px;
  4747. padding-right: 10px;
  4748. margin-left: -10px;
  4749. margin-right: -10px;
  4750. }
  4751. .sidebar:not(.NavBarAdmin) .nav-pills > li:first-child > a {
  4752. border-top: none;
  4753. }
  4754. .nav-pills > li > a > .icon {
  4755. fill: currentColor;
  4756. flex-shrink: 0;
  4757. align-self: center;
  4758. margin-top: -2px;
  4759. &:first-child {
  4760. @include bidi-style(margin-right, 5px, margin-left, 0);
  4761. &[data-font] {
  4762. @include bidi-style(margin-right, 10px, margin-left, 0);
  4763. @include bidi-style(margin-left, 5px, margin-right, 0);
  4764. }
  4765. }
  4766. }
  4767. .nav-pills > li > a > .badge {
  4768. margin-left: auto;
  4769. margin-right: 5px;
  4770. @include bidi-style(padding-left, 10px, padding-right, 0);
  4771. @include rtl(margin-left, 5px);
  4772. @include rtl(margin-right, auto);
  4773. }
  4774. a.list-group-item.active > .badge,
  4775. .nav-pills > .active > a > .badge {
  4776. color: var(--text-active);
  4777. background: none;
  4778. }
  4779. .main {
  4780. padding: 10px 20px;
  4781. overflow: auto;
  4782. -webkit-overflow-scrolling: touch;
  4783. position: relative;
  4784. @include phone {
  4785. padding: 10px;
  4786. }
  4787. &--large-padding {
  4788. padding: 30px 40px;
  4789. }
  4790. }
  4791. .main--tabs,
  4792. .main.no-padding {
  4793. padding: 0;
  4794. }
  4795. .tooltip {
  4796. font-family: inherit;
  4797. }
  4798. .tooltip-inner {
  4799. max-width: 400px;
  4800. }
  4801. .popover {
  4802. @extend .zIndex-12;
  4803. position: absolute;
  4804. font-family: inherit;
  4805. width: 372px;
  4806. max-width: 9999px;
  4807. border-radius: 0;
  4808. margin: 0 5px;
  4809. background: var(--background-popover);
  4810. border: none;
  4811. box-shadow: var(--elevation-high);
  4812. @include rtl(text-align, right);
  4813. @include phone {
  4814. width: auto;
  4815. }
  4816. > .arrow::after {
  4817. border-color: var(--background-popover);
  4818. }
  4819. }
  4820. .popover--has-horizontal-form {
  4821. width: auto;
  4822. }
  4823. .popover-body {
  4824. overflow: auto;
  4825. -webkit-overflow-scrolling: touch;
  4826. }
  4827. .popover-title {
  4828. display: flex;
  4829. align-items: center;
  4830. border: none;
  4831. background: none;
  4832. padding: 21px 17px 4px;
  4833. .is-inactive {
  4834. text-decoration: line-through;
  4835. color: var(--interactive-muted);
  4836. }
  4837. h2 {
  4838. margin: 0;
  4839. }
  4840. .popover-avatar {
  4841. @include bidi-style(margin-right, 8px, margin-left, 0);
  4842. }
  4843. .popover-headline {
  4844. display: flex;
  4845. flex-direction: column;
  4846. }
  4847. }
  4848. .popover-content {
  4849. padding: 0 17px;
  4850. margin-bottom: 21px;
  4851. .popover--has-horizontal-form & {
  4852. padding: 10px 5px 15px 15px;
  4853. margin-bottom: 0;
  4854. }
  4855. }
  4856. .popover.right {
  4857. margin-left: 4px;
  4858. }
  4859. .popover.right > .arrow {
  4860. border-right: none;
  4861. left: -9px;
  4862. }
  4863. .popover.top {
  4864. margin-bottom: 9px;
  4865. }
  4866. .popover.top > .arrow {
  4867. border-top: none;
  4868. bottom: -9px;
  4869. }
  4870. .popover.left {
  4871. margin-right: 9px;
  4872. margin-left: 0;
  4873. }
  4874. .popover.left > .arrow {
  4875. border-left: none;
  4876. right: -9px;
  4877. }
  4878. .popover.bottom {
  4879. margin-top: 9px;
  4880. }
  4881. .popover.bottom > .arrow {
  4882. border-bottom: none;
  4883. top: -9px;
  4884. }
  4885. .popover > .arrow::after {
  4886. border-width: 8px;
  4887. }
  4888. .popover .priority.icon::after {
  4889. background: var(--background-secondary);
  4890. }
  4891. .popover .person .organization {
  4892. color: var(--text-muted);
  4893. }
  4894. .popover .person {
  4895. &.is-inactive {
  4896. text-decoration: line-through;
  4897. color: var(--ghost-color);
  4898. }
  4899. }
  4900. .popover .user-organization {
  4901. @extend .u-textTruncate;
  4902. &.is-inactive {
  4903. text-decoration: line-through;
  4904. color: var(--ghost-color);
  4905. }
  4906. }
  4907. .popover-block {
  4908. @extend .sidebar-block;
  4909. margin: 10px 0;
  4910. }
  4911. .popover hr {
  4912. margin: 8px 0;
  4913. }
  4914. .popover .person .organization::before {
  4915. content: '(';
  4916. }
  4917. .popover .person .organization::after {
  4918. content: ')';
  4919. }
  4920. .popover label {
  4921. font-size: 13px;
  4922. color: var(--header-secondary);
  4923. font-weight: 300;
  4924. text-transform: uppercase;
  4925. letter-spacing: 0.05em;
  4926. }
  4927. .popover .two-columns,
  4928. .popover .three-columns {
  4929. margin-top: -8px;
  4930. }
  4931. .popover .column label {
  4932. margin: 8px 0 1px;
  4933. }
  4934. .popover .column {
  4935. margin-top: 8px;
  4936. }
  4937. .popover--notifications {
  4938. padding: 0;
  4939. left: $navigationWidth;
  4940. @include rtl(right, $navigationWidth);
  4941. margin: 8px 2px;
  4942. max-height: calc(100% - 16px);
  4943. width: auto;
  4944. max-width: 400px;
  4945. min-width: 350px;
  4946. flex-direction: column;
  4947. @extend .zIndex-10;
  4948. @include phone {
  4949. left: $mobileNavigationWidth;
  4950. @include rtl(right, $mobileNavigationWidth);
  4951. min-width: auto;
  4952. width: calc(100% - #{$mobileNavigationWidth} - 8px);
  4953. }
  4954. &.is-visible {
  4955. display: flex;
  4956. }
  4957. &.is-empty .popover-notificationsHeader {
  4958. box-shadow: none;
  4959. }
  4960. .arrow {
  4961. top: 23px !important;
  4962. left: -11px;
  4963. @include rtl(left, 408px);
  4964. @include rtl(transform, rotate(180deg));
  4965. @include phone {
  4966. top: 61px !important;
  4967. }
  4968. }
  4969. .popover-content {
  4970. padding-left: 0;
  4971. padding-right: 0;
  4972. margin-bottom: 0;
  4973. overflow-y: auto;
  4974. }
  4975. .popover-notificationsHeader {
  4976. border-bottom: 1px solid var(--background-modifier-accent);
  4977. padding-bottom: 14px;
  4978. flex-shrink: 0;
  4979. .btn {
  4980. padding-top: 3px;
  4981. padding-bottom: 5px;
  4982. }
  4983. }
  4984. .activity-placeholder {
  4985. margin-bottom: 21px;
  4986. }
  4987. }
  4988. .popover-notificationsHeader {
  4989. padding-bottom: 8px;
  4990. margin: 21px 17px 0;
  4991. .popover-title {
  4992. @extend h1;
  4993. padding: 0;
  4994. line-height: 1;
  4995. }
  4996. .btn {
  4997. margin-top: 3px;
  4998. }
  4999. }
  5000. .popover-notificationsCounter {
  5001. color: #e25253;
  5002. @include bidi-style(padding-left, 3px, padding-right, 0);
  5003. }
  5004. .user-popover,
  5005. .ticket-popover,
  5006. .organization-popover {
  5007. @extend .u-clickable;
  5008. }
  5009. .user-card {
  5010. padding: 2px 0 0 50px;
  5011. position: relative;
  5012. min-height: 40px;
  5013. padding-right: 48px;
  5014. display: flex;
  5015. flex-direction: column;
  5016. justify-content: center;
  5017. min-width: 192px;
  5018. .avatar {
  5019. position: absolute;
  5020. left: 0;
  5021. top: 0;
  5022. }
  5023. .user-popover.is-inactive {
  5024. text-decoration: line-through;
  5025. opacity: 0.73;
  5026. }
  5027. .btn.js-newTicket {
  5028. position: absolute;
  5029. right: 0;
  5030. }
  5031. }
  5032. .stat-icon {
  5033. position: relative;
  5034. }
  5035. .mood-icon {
  5036. width: 60px;
  5037. height: 59px;
  5038. }
  5039. .stopwatch-icon {
  5040. position: absolute;
  5041. left: 0;
  5042. top: 0;
  5043. width: 100%;
  5044. height: 100%;
  5045. }
  5046. .stat-stopwatch {
  5047. width: 77px;
  5048. height: 83px;
  5049. position: relative;
  5050. }
  5051. .stat-channel-icon {
  5052. width: 16px;
  5053. height: 16px;
  5054. fill: var(--text-muted);
  5055. }
  5056. .total-tickets {
  5057. height: 83px;
  5058. width: 48px;
  5059. @include bidi-style(margin-right, 4px, margin-left, 0);
  5060. margin-bottom: -9px;
  5061. fill: hsl(196, 19%, 89%);
  5062. color: var(--background-secondary);
  5063. @include dark {
  5064. fill: hsl(196, 9%, 70%);
  5065. }
  5066. }
  5067. .one-ticket {
  5068. width: 48px;
  5069. height: 10px;
  5070. margin-top: -7px;
  5071. margin-bottom: 2px;
  5072. position: relative;
  5073. }
  5074. .stat-tickets {
  5075. height: 100px;
  5076. color: var(--background-secondary);
  5077. }
  5078. .in-process-icon {
  5079. width: 64px;
  5080. height: 64px;
  5081. }
  5082. .reopening-icon {
  5083. width: 68px;
  5084. height: 47px;
  5085. }
  5086. .supergood-color {
  5087. fill: var(--supergood-color);
  5088. }
  5089. .good-color {
  5090. fill: var(--good-color);
  5091. }
  5092. .ok-color {
  5093. fill: var(--ok-color);
  5094. }
  5095. .bad-color {
  5096. fill: var(--bad-color);
  5097. }
  5098. .superbad-color {
  5099. fill: var(--superbad-color);
  5100. }
  5101. .danger-color {
  5102. color: var(--danger-color);
  5103. }
  5104. .u-high-priority-color {
  5105. fill: $high-priority-color;
  5106. }
  5107. .u-low-priority-color {
  5108. fill: $low-priority-color;
  5109. }
  5110. .stat-widgets {
  5111. margin: -7px -7px 20px;
  5112. }
  5113. .stat-widget {
  5114. height: 200px;
  5115. padding: 10px 10px 8px;
  5116. text-align: center;
  5117. line-height: 20px;
  5118. }
  5119. .dashboard .stat-widget {
  5120. margin: 7px;
  5121. background: var(--background-secondary);
  5122. border: 1px solid var(--border);
  5123. border-radius: 1px;
  5124. box-shadow: var(--elevation-low);
  5125. }
  5126. .stat-title {
  5127. font-size: 13px;
  5128. margin: 2px 0 8px;
  5129. text-transform: uppercase;
  5130. font-weight: normal;
  5131. position: relative;
  5132. padding: 0 24px;
  5133. .tooltip {
  5134. text-transform: none;
  5135. width: 200px;
  5136. }
  5137. }
  5138. .stat-icon-help {
  5139. position: absolute;
  5140. right: 3px;
  5141. top: 1px;
  5142. cursor: help;
  5143. fill: var(--interactive-muted);
  5144. }
  5145. .notification-icon-help {
  5146. fill: var(--interactive-muted);
  5147. }
  5148. .stat-label {
  5149. @extend .u-textTruncate;
  5150. }
  5151. .stat-detail {
  5152. color: var(--text-muted);
  5153. @extend .u-textTruncate;
  5154. }
  5155. .stat-graphic {
  5156. flex: 1;
  5157. display: flex;
  5158. justify-content: center;
  5159. align-items: center;
  5160. user-select: none;
  5161. }
  5162. .time.stat-widget .stat-amount {
  5163. margin-top: 12px;
  5164. text-align: center;
  5165. font-size: 30px;
  5166. color: var(--text-inverted);
  5167. text-shadow: 0 2px rgba(0, 8, 14, 0.2);
  5168. position: relative;
  5169. cursor: default;
  5170. }
  5171. .time.stat-widget .stat-dial {
  5172. position: absolute;
  5173. top: 21px;
  5174. left: 14px;
  5175. width: 52px;
  5176. height: 52px;
  5177. }
  5178. .stats-row {
  5179. padding: 8px 0 7px;
  5180. border-radius: 3px;
  5181. display: flex;
  5182. flex-direction: column;
  5183. align-items: center;
  5184. flex: 0 1 38px;
  5185. height: 100%;
  5186. .icon {
  5187. display: block;
  5188. }
  5189. }
  5190. .stats-row:hover {
  5191. background: rgba(0, 8, 14, 0.03);
  5192. }
  5193. .stats-row .stat-bars {
  5194. flex: 1;
  5195. margin: 10px 0 13px;
  5196. padding: 2px 5px;
  5197. width: 100%;
  5198. background: linear-gradient(
  5199. to top,
  5200. var(--background-modifier-accent),
  5201. var(--background-modifier-accent) 1px,
  5202. transparent 1px
  5203. );
  5204. background-position: center bottom;
  5205. background-size: 100% 12px;
  5206. display: flex;
  5207. align-items: flex-end;
  5208. justify-content: center;
  5209. }
  5210. .stat-bars .stat-bar {
  5211. border-radius: 5px;
  5212. max-width: 10px;
  5213. flex: 1;
  5214. color: #a9bcc4;
  5215. background: #a9bcc4;
  5216. &--outbound {
  5217. opacity: 0.38;
  5218. color: #a9bcc4;
  5219. background: #a9bcc4;
  5220. }
  5221. }
  5222. .stat-legend {
  5223. margin-top: 30px;
  5224. @include bidi-style(margin-left, auto, margin-right, 0);
  5225. display: flex;
  5226. }
  5227. .stat-legendEntry {
  5228. font-size: 11px;
  5229. line-height: 1;
  5230. @include bidi-style(margin-left, 20px, margin-right, 0);
  5231. background: none !important;
  5232. }
  5233. .stat-circle {
  5234. margin-bottom: -1px;
  5235. @include bidi-style(margin-right, 3px, margin-left, 0);
  5236. width: 10px;
  5237. height: 10px;
  5238. border-radius: 100%;
  5239. display: inline-block;
  5240. }
  5241. .ticket_channel_distribution {
  5242. .stat-graphic {
  5243. align-items: stretch;
  5244. }
  5245. .stats-row {
  5246. margin-bottom: -4px;
  5247. position: relative;
  5248. }
  5249. }
  5250. .frequency.stat-widget {
  5251. .stat-bars {
  5252. margin-top: 0;
  5253. }
  5254. .stats-row {
  5255. margin-bottom: 0;
  5256. }
  5257. .stat-label {
  5258. color: var(--text-muted);
  5259. }
  5260. .primary {
  5261. color: hsl(145, 51%, 45%);
  5262. background: hsl(145, 51%, 45%);
  5263. }
  5264. }
  5265. .activity.sidebar {
  5266. width: 370px;
  5267. padding: 0;
  5268. border-left: 1px solid var(--border);
  5269. }
  5270. .activity h2 {
  5271. margin-left: 19px;
  5272. margin-bottom: 15px;
  5273. margin-right: 26px;
  5274. @include rtl(margin-right, 19px);
  5275. @include rtl(margin-left, 26px);
  5276. }
  5277. .activity-entries {
  5278. margin: 0 -17px;
  5279. }
  5280. .activity-placeholder {
  5281. @extend .u-textTruncate;
  5282. padding: 0 17px;
  5283. }
  5284. .activity-entry {
  5285. display: flex;
  5286. padding: 0 17px;
  5287. &.is-inactive {
  5288. opacity: 0.5;
  5289. }
  5290. &.is-hover {
  5291. background-color: var(--background-primary);
  5292. }
  5293. &.activity-entry--removeable {
  5294. @include bidi-style(padding-right, 0, margin-left, 17px);
  5295. }
  5296. &:not(:hover) .activity-remove {
  5297. opacity: 0;
  5298. }
  5299. &:not(:last-child) .activity-body::after {
  5300. content: '';
  5301. position: absolute;
  5302. bottom: 0;
  5303. right: 0;
  5304. left: 0;
  5305. border-bottom: 1px solid var(--background-modifier-accent);
  5306. }
  5307. &.activity-entry--removeable:not(:last-child) .activity-body::after {
  5308. right: 17px;
  5309. @include bidi-style(right, 17px, left, 0);
  5310. }
  5311. }
  5312. .activity-avatar {
  5313. padding: 16px 2px 0;
  5314. @include bidi-style(margin-right, 10px, margin-left, 0);
  5315. flex-shrink: 0;
  5316. }
  5317. .activity-body {
  5318. padding: 16px 0 16px 2px;
  5319. @include rtl(padding, 16px 2px 16px 0);
  5320. position: relative;
  5321. display: flex;
  5322. flex: 1;
  5323. min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
  5324. color: inherit;
  5325. }
  5326. .activity-message {
  5327. color: inherit;
  5328. flex: 1;
  5329. min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
  5330. &:hover .activity-text {
  5331. text-decoration: underline;
  5332. }
  5333. }
  5334. .activity-time {
  5335. margin-top: 2px;
  5336. color: var(--text-muted);
  5337. display: block;
  5338. }
  5339. .activity-remove {
  5340. display: flex;
  5341. align-items: center;
  5342. justify-content: center;
  5343. @extend %clickable;
  5344. padding-left: 10px;
  5345. padding-right: 27px;
  5346. @include rtl(padding-left, 27px);
  5347. @include rtl(padding-right, 10px);
  5348. .activity-remove-icon-holder {
  5349. width: 19px;
  5350. height: 19px;
  5351. border-radius: 100%;
  5352. display: flex;
  5353. align-items: center;
  5354. justify-content: center;
  5355. background: var(--ghost-color);
  5356. }
  5357. .icon {
  5358. fill: var(--text-inverted);
  5359. width: 9px;
  5360. height: 9px;
  5361. }
  5362. &:hover {
  5363. .activity-remove-icon-holder {
  5364. background: #972e29;
  5365. }
  5366. .icon {
  5367. opacity: 1;
  5368. }
  5369. }
  5370. }
  5371. .form-inline {
  5372. display: flex;
  5373. @include phone {
  5374. flex-wrap: wrap;
  5375. .alert {
  5376. flex-basis: 100%;
  5377. }
  5378. }
  5379. }
  5380. .form-inline .input-group-addon,
  5381. .form-inline .form-control:not(textarea) {
  5382. background: var(--background-secondary);
  5383. border: none;
  5384. line-height: 1;
  5385. }
  5386. .form-inline .form-group {
  5387. overflow: hidden;
  5388. position: relative;
  5389. height: 60px;
  5390. flex: 1 1 auto;
  5391. @include phone {
  5392. width: 50%;
  5393. margin-bottom: 0;
  5394. }
  5395. &.datetime {
  5396. min-width: 140px;
  5397. overflow: visible; // datepicker popup needs to be visible
  5398. }
  5399. }
  5400. .form-group.is-changed {
  5401. position: relative;
  5402. }
  5403. .form-group.is-changed::before {
  5404. content: '';
  5405. position: absolute;
  5406. top: 23px;
  5407. left: -12px;
  5408. bottom: 0;
  5409. width: 3px;
  5410. background: repeating-linear-gradient(
  5411. 45deg,
  5412. var(--background-modifier-border),
  5413. var(--background-modifier-border) 5px,
  5414. transparent 5px,
  5415. transparent 9px
  5416. )
  5417. repeat center;
  5418. background-size: 11px 11px;
  5419. }
  5420. .form-inline .form-group.is-changed::before {
  5421. width: 100%;
  5422. height: 3px;
  5423. top: 0;
  5424. left: 0;
  5425. bottom: auto;
  5426. }
  5427. .form-group.is-changed label {
  5428. color: var(--text-muted);
  5429. position: relative;
  5430. }
  5431. .form-group.is-changed label::before {
  5432. position: absolute;
  5433. content: '';
  5434. left: -10px;
  5435. width: 5px;
  5436. height: 5px;
  5437. top: 50%;
  5438. margin-top: -3px;
  5439. border-radius: 100%;
  5440. background: var(--interactive-muted-alt);
  5441. }
  5442. .form-inline .form-group .btn {
  5443. margin: 10px;
  5444. }
  5445. .form-inline .form-group:not(:last-child),
  5446. .form-inline.form-inline--enclosed .form-group {
  5447. border-right: 1px solid var(--border);
  5448. }
  5449. .form-inline .form-group,
  5450. .form-inline.form-inline--enclosed .form-group {
  5451. @include phone {
  5452. border-bottom: 1px solid var(--border);
  5453. &:nth-child(even) {
  5454. border-right-width: 0;
  5455. }
  5456. }
  5457. }
  5458. .form-inline .input-group-addon {
  5459. width: auto;
  5460. padding: 0;
  5461. margin: 10px 18px 0;
  5462. font-size: 13px;
  5463. letter-spacing: 0.05em;
  5464. display: inline-block;
  5465. position: relative;
  5466. }
  5467. .form-inline .form-control:not(textarea) {
  5468. width: 100%;
  5469. height: 100%;
  5470. left: 0;
  5471. top: 0;
  5472. position: absolute;
  5473. padding: 28px 5px 12px 20px;
  5474. float: none;
  5475. display: block;
  5476. border-radius: 0;
  5477. }
  5478. .form-inline {
  5479. .formGroup-label {
  5480. z-index: 1;
  5481. pointer-events: none;
  5482. }
  5483. .controls--datetime,
  5484. .controls--date,
  5485. .controls--select {
  5486. position: static;
  5487. }
  5488. .controls--datetime {
  5489. position: absolute;
  5490. bottom: 12px;
  5491. left: 0;
  5492. padding: 0 5px 0 20px;
  5493. width: 100%;
  5494. .controls-label {
  5495. display: none;
  5496. }
  5497. .form-control {
  5498. width: 70px;
  5499. line-height: inherit;
  5500. position: static;
  5501. padding: 0;
  5502. height: auto;
  5503. &.time {
  5504. margin-left: 5px;
  5505. width: 38px;
  5506. }
  5507. }
  5508. }
  5509. }
  5510. .bulkAction-secondStep .form-group {
  5511. min-width: 140px;
  5512. @include phone {
  5513. min-width: 0;
  5514. &.textarea {
  5515. border-bottom-width: 0;
  5516. }
  5517. }
  5518. }
  5519. .bulkAction-secondStep .form-inline .textarea.form-group {
  5520. padding: 5px 10px;
  5521. height: auto;
  5522. }
  5523. .bulkAction-secondStep .form-inline .textarea.form-group .input-group-addon {
  5524. margin-left: 8px;
  5525. margin-right: 8px;
  5526. margin-bottom: 5px;
  5527. }
  5528. .bulkAction-secondStep .form-inline textarea.form-control {
  5529. display: block;
  5530. width: 100%;
  5531. resize: vertical;
  5532. }
  5533. .bulkAction-secondStep .form-inline .textarea .controls {
  5534. margin: 0 6px;
  5535. }
  5536. .bulkAction-secondStep .form-inline textarea.form-control:not(:focus) {
  5537. border-color: #f0f0f0;
  5538. }
  5539. .ticketZoom {
  5540. background: var(--background-primary);
  5541. }
  5542. .ticketZoom-controls {
  5543. display: flex;
  5544. justify-content: flex-end;
  5545. align-items: center;
  5546. padding: 28px 0 0;
  5547. @include bidi-style(margin-right, -40px, margin-left, 0);
  5548. @include phone {
  5549. padding: 10px;
  5550. @include bidi-style(margin-right, 0, margin-left, 0);
  5551. }
  5552. }
  5553. .icon-marker {
  5554. fill: hsl(0, 0%, 61%);
  5555. width: 17px;
  5556. height: 19px;
  5557. }
  5558. .ticketNumberCopy-icon {
  5559. vertical-align: top;
  5560. fill: currentColor;
  5561. }
  5562. .ticketZoom .ticketZoom-header {
  5563. margin-top: 6px;
  5564. padding: 0;
  5565. @include phone {
  5566. margin-top: 10px;
  5567. }
  5568. }
  5569. .ticketZoom .ticket-article {
  5570. margin-top: 55px;
  5571. @include phone {
  5572. margin-top: 40px;
  5573. }
  5574. }
  5575. .ticketZoom > .overview-navigator {
  5576. margin-top: 32px;
  5577. @include bidi-style(padding-left, 20px, padding-right, 0);
  5578. }
  5579. .scrollPageAlert {
  5580. @extend .zIndex-5;
  5581. position: absolute;
  5582. top: 0;
  5583. left: 0;
  5584. right: 0;
  5585. transform: translateY(0);
  5586. border-bottom: 1px solid var(--border);
  5587. & > .alert {
  5588. margin-bottom: 0;
  5589. border-radius: 0;
  5590. text-align: center;
  5591. }
  5592. }
  5593. .ticket-article,
  5594. .article-new {
  5595. max-width: 1080px;
  5596. margin: 0 auto;
  5597. padding: 0 21px;
  5598. @include phone {
  5599. padding: 0 10px;
  5600. }
  5601. }
  5602. .ticket-title {
  5603. max-width: 1080px;
  5604. padding: 0 81px;
  5605. @include phone {
  5606. padding: 0 10px;
  5607. }
  5608. }
  5609. .ticket-title-update {
  5610. @extend h1;
  5611. white-space: normal;
  5612. margin-top: 15px;
  5613. margin-bottom: 8px;
  5614. padding: 0 7px;
  5615. text-align: center;
  5616. .ticketZoom-header & {
  5617. &:hover,
  5618. &:focus {
  5619. background: var(--background-modifier-hover);
  5620. }
  5621. }
  5622. }
  5623. .task-subline {
  5624. text-align: center;
  5625. display: block;
  5626. }
  5627. .ticket-article-item {
  5628. padding-bottom: 33px;
  5629. position: relative;
  5630. z-index: 1; // fixed chrome 49 + flex issue, not shown article
  5631. .avatar {
  5632. position: absolute;
  5633. right: 0;
  5634. top: 5px;
  5635. @include phone {
  5636. position: static;
  5637. margin: 0 5px 7px;
  5638. }
  5639. }
  5640. &.agent .avatar {
  5641. right: auto;
  5642. left: 0;
  5643. }
  5644. }
  5645. /*
  5646. clip the article-meta to not stand out on the other side
  5647. of the textBubble if the text bubble is small
  5648. */
  5649. .article-meta-clip {
  5650. overflow: hidden;
  5651. position: relative;
  5652. height: 100%;
  5653. margin: 0 55px;
  5654. @include phone {
  5655. margin: 0;
  5656. }
  5657. }
  5658. .article-content {
  5659. color: var(--text-normal);
  5660. position: relative;
  5661. z-index: 1;
  5662. padding: 0 55px;
  5663. @include phone {
  5664. padding: 0;
  5665. }
  5666. &.article-actions {
  5667. justify-content: space-around;
  5668. }
  5669. }
  5670. .article-content-meta {
  5671. position: absolute;
  5672. width: 100%;
  5673. }
  5674. .article-meta {
  5675. background: var(--background-tertiary);
  5676. color: var(--text-inverted);
  5677. padding: 21px 25px 11px;
  5678. margin: 0 12px;
  5679. @include phone {
  5680. margin: 0 5px;
  5681. padding: 10px 10px 5px;
  5682. }
  5683. }
  5684. .article-meta.bottom {
  5685. padding-top: 17px;
  5686. padding-bottom: 8px;
  5687. @include phone {
  5688. padding-top: 10px;
  5689. padding-bottom: 5px;
  5690. }
  5691. }
  5692. .article-meta-row {
  5693. margin-bottom: 5px;
  5694. }
  5695. .article-meta-key {
  5696. width: 20%;
  5697. text-transform: uppercase;
  5698. flex-shrink: 0;
  5699. @include phone {
  5700. width: 50px;
  5701. }
  5702. }
  5703. .article-meta-value {
  5704. @include bidi-style(margin-left, 8px, margin-right, 0);
  5705. overflow: hidden;
  5706. text-overflow: ellipsis;
  5707. span {
  5708. white-space: nowrap;
  5709. }
  5710. }
  5711. .article-meta-icon {
  5712. fill: var(--text-inverted);
  5713. vertical-align: top;
  5714. margin: 2px 3px 0 0;
  5715. @include rtl(margin, 2px 0 0 3px);
  5716. &.icon-lock,
  5717. &.icon-encryption-error {
  5718. margin: 0;
  5719. }
  5720. }
  5721. .article-meta-permanent {
  5722. margin: 0 55px;
  5723. + .article-content .textBubble {
  5724. border-top-left-radius: 0;
  5725. border-top-right-radius: 0;
  5726. border-top-width: 0;
  5727. }
  5728. .alert {
  5729. margin-bottom: 0;
  5730. padding-left: 20px;
  5731. padding-right: 20px;
  5732. border-radius: 0;
  5733. box-shadow: 0 0 0 1px inset hsla(0, 0%, 0%, 0.04);
  5734. &:first-child {
  5735. border-top-left-radius: 2px;
  5736. border-top-right-radius: 2px;
  5737. }
  5738. &--blank {
  5739. background: var(--background-article-meta);
  5740. color: var(--text-muted-alt);
  5741. border: 1px solid var(--border-alt);
  5742. .customer.ticket-article-item & {
  5743. background: var(--background-article-customer-meta);
  5744. border-color: var(--border-article-customer);
  5745. }
  5746. .customer.state--folde-out & {
  5747. border-color: var(--border-article-customer-selected);
  5748. }
  5749. }
  5750. .icon {
  5751. fill: currentColor;
  5752. margin: 2px 6px 0 0;
  5753. vertical-align: top;
  5754. width: 14px;
  5755. height: 14px;
  5756. }
  5757. .icon-lock {
  5758. margin-top: 1px;
  5759. width: 16px;
  5760. height: 16px;
  5761. }
  5762. }
  5763. }
  5764. .internal-border {
  5765. padding: 5px;
  5766. border-radius: 5px;
  5767. margin: -5px;
  5768. }
  5769. .is-internal .internal-border {
  5770. background: repeating-linear-gradient(
  5771. 45deg,
  5772. var(--border-internal),
  5773. var(--border-internal) 5px,
  5774. var(--border-internal-stripe) 5px,
  5775. var(--border-internal-stripe) 10px
  5776. );
  5777. background-size: 14px 14px;
  5778. background-position: -1px;
  5779. }
  5780. .is-internal .bubble-arrow {
  5781. display: none;
  5782. }
  5783. .article-visibility-text-wrapper {
  5784. padding: 0 55px;
  5785. opacity: 0;
  5786. height: 0;
  5787. .article-visibility-text {
  5788. margin-bottom: 17px;
  5789. &.is-hidden {
  5790. display: none;
  5791. }
  5792. }
  5793. }
  5794. .textBubble {
  5795. padding: 10px 20px;
  5796. background: var(--background-secondary);
  5797. border-radius: 2px;
  5798. border: 1px solid var(--border-alt);
  5799. box-shadow: 0 0 1px rgba(0, 0, 0, 0.06) inset;
  5800. position: relative;
  5801. @include phone {
  5802. padding: 10px;
  5803. }
  5804. /* email css reset */
  5805. p {
  5806. margin: 0;
  5807. }
  5808. .is-internal & {
  5809. border-color: var(--border-internal) !important;
  5810. }
  5811. }
  5812. .textBubble-content {
  5813. overflow: hidden;
  5814. position: relative;
  5815. }
  5816. .textBubble-footer {
  5817. display: flex;
  5818. justify-content: space-between;
  5819. align-items: center;
  5820. margin: 0 -12px -28px;
  5821. padding: 6px 12px;
  5822. border-radius: 0 0 4px 4px;
  5823. }
  5824. .textBubble-footer:has(+ .attachments .attachment) {
  5825. margin-bottom: -10px;
  5826. }
  5827. .textBubble-footer:not(.is-open .textBubble-footer) {
  5828. visibility: hidden;
  5829. }
  5830. .textBubble-control {
  5831. display: flex;
  5832. }
  5833. .textBubble-letterCount:not(.label-danger, .label-warning) {
  5834. color: var(--ghost-color);
  5835. }
  5836. .textBubble-overflowContainer {
  5837. position: absolute;
  5838. bottom: 0;
  5839. left: 0;
  5840. right: 0;
  5841. background: var(--background-secondary);
  5842. &.is-open {
  5843. &::before {
  5844. display: none;
  5845. }
  5846. }
  5847. .btn {
  5848. padding-top: 15px;
  5849. padding-bottom: 15px;
  5850. font-size: 10px;
  5851. }
  5852. &::before {
  5853. content: '';
  5854. position: absolute;
  5855. left: 0;
  5856. right: 0;
  5857. top: -30px;
  5858. height: 30px;
  5859. background: linear-gradient(
  5860. rgba(255, 255, 255, 0),
  5861. var(--background-secondary)
  5862. );
  5863. pointer-events: none;
  5864. }
  5865. }
  5866. .customer .textBubble-overflowContainer {
  5867. background: var(--background-article-customer);
  5868. &::before {
  5869. background: linear-gradient(
  5870. hsla(199, 44%, 93%, 0),
  5871. var(--background-article-customer)
  5872. );
  5873. }
  5874. }
  5875. .customer.ticket-article-item .textBubble {
  5876. background: var(--background-article-customer);
  5877. border-color: var(--border-article-customer);
  5878. box-shadow: none;
  5879. }
  5880. .customer .richtext-content blockquote {
  5881. border-left: 5px solid var(--background-modifier-border);
  5882. }
  5883. .customer.ticket-article-item.state--folde-out .textBubble {
  5884. border-color: var(--border-article-customer-selected);
  5885. }
  5886. .bubble-arrow {
  5887. position: absolute;
  5888. width: 6px;
  5889. height: 9px;
  5890. left: -6px;
  5891. top: 15px;
  5892. overflow: hidden;
  5893. @include phone {
  5894. left: 14px !important;
  5895. top: -5px;
  5896. width: 9px;
  5897. height: 6px;
  5898. }
  5899. }
  5900. .bubble-arrow::after {
  5901. content: '';
  5902. position: absolute;
  5903. top: -1px;
  5904. left: 1px;
  5905. width: 11px;
  5906. height: 11px;
  5907. background: var(--background-secondary);
  5908. border: 1px solid var(--border-alt);
  5909. box-shadow: 0 0 1px rgba(0, 0, 0, 0.06) inset;
  5910. transform: rotate(-45deg);
  5911. @include phone {
  5912. top: 2px;
  5913. left: -1px;
  5914. }
  5915. }
  5916. .customer.ticket-article-item .bubble-arrow {
  5917. left: auto;
  5918. right: -6px;
  5919. @include phone {
  5920. left: 14px;
  5921. right: auto;
  5922. top: -4px;
  5923. }
  5924. }
  5925. .customer.ticket-article-item .bubble-arrow::after {
  5926. background: var(--background-article-customer);
  5927. left: auto;
  5928. right: 2px;
  5929. border-color: var(--border-article-customer);
  5930. box-shadow: none;
  5931. @include phone {
  5932. left: -1px;
  5933. right: auto;
  5934. }
  5935. }
  5936. .customer.ticket-article-item.state--folde-out .bubble-arrow::after {
  5937. border-color: var(--border-article-customer-selected);
  5938. }
  5939. .attachments.attachments--list:not(:empty) {
  5940. border-top: 1px solid var(--background-modifier-border);
  5941. white-space: normal;
  5942. margin: 10px -20px 0;
  5943. padding: 26px 20px 7px 72px;
  5944. position: relative;
  5945. @include phone {
  5946. margin-left: -10px;
  5947. margin-right: -10px;
  5948. padding: 20px 15px 7px 30px;
  5949. }
  5950. &.attachments--wo-body {
  5951. border-top: none;
  5952. margin-top: 0;
  5953. padding-top: 12px;
  5954. }
  5955. }
  5956. .attachments.attachments--list .attachments-title {
  5957. font-size: 13px;
  5958. font-weight: 500;
  5959. text-transform: uppercase;
  5960. padding: 0 7px;
  5961. .badge {
  5962. margin: -1px 0 0 5px;
  5963. }
  5964. }
  5965. .attachments > .icon:first-child {
  5966. position: absolute;
  5967. left: 33px;
  5968. top: 27px;
  5969. fill: var(--ghost-color);
  5970. @include phone {
  5971. width: 16px;
  5972. height: 16px;
  5973. left: 12px;
  5974. top: 20px;
  5975. }
  5976. }
  5977. .attachments-block {
  5978. margin-bottom: 12px;
  5979. &:last-child {
  5980. margin-bottom: 0;
  5981. }
  5982. &-headline {
  5983. font-size: 13px;
  5984. color: var(--text-normal);
  5985. font-weight: 500;
  5986. text-transform: uppercase;
  5987. margin: 0 7px;
  5988. }
  5989. }
  5990. .ticket-article-item .task-subline {
  5991. margin-top: 7px;
  5992. }
  5993. .article-action {
  5994. padding: 5px 16px;
  5995. margin-top: 5px;
  5996. color: var(--interactive-muted);
  5997. font-size: 12px;
  5998. text-align: center;
  5999. @extend .u-clickable;
  6000. }
  6001. .article-action:hover {
  6002. color: var(--text-primary);
  6003. text-decoration: none;
  6004. }
  6005. .article-action-icon {
  6006. @include bidi-style(margin-right, 5px, margin-left, 0);
  6007. vertical-align: top;
  6008. width: 17px;
  6009. height: 17px;
  6010. fill: currentColor;
  6011. }
  6012. .article-action-name {
  6013. @media screen and (max-width: 1080px) {
  6014. display: none;
  6015. }
  6016. @media screen and (max-width: 1358px) {
  6017. .main:not(.is-closed) & {
  6018. display: none;
  6019. }
  6020. }
  6021. }
  6022. .article-add {
  6023. position: relative;
  6024. z-index: 1; // fixed chrome 49 + flex issue, not shown article
  6025. }
  6026. .article-new {
  6027. margin-top: auto;
  6028. margin-bottom: 36px;
  6029. }
  6030. .dropArea {
  6031. background: var(--background-secondary);
  6032. border: 5px solid;
  6033. color: hsl(202, 66%, 55%);
  6034. font-size: 20px;
  6035. margin: 5px;
  6036. display: none;
  6037. @extend .fit;
  6038. &--small {
  6039. margin: 0;
  6040. font-size: inherit;
  6041. border-width: 3px;
  6042. min-height: 38px;
  6043. }
  6044. }
  6045. .is-dropTarget .dropArea {
  6046. display: block;
  6047. }
  6048. .dropContainer {
  6049. position: relative;
  6050. }
  6051. .dropArea-inner {
  6052. @extend .fit;
  6053. display: flex;
  6054. align-items: center;
  6055. justify-content: center;
  6056. }
  6057. .shortcut .dropdown-menu > .is-active > a {
  6058. background: none;
  6059. }
  6060. .shortcut > .dropdown-menu {
  6061. overflow: auto;
  6062. -webkit-overflow-scrolling: touch;
  6063. position: absolute;
  6064. max-width: 100%;
  6065. min-width: 0;
  6066. }
  6067. .editControls {
  6068. position: absolute;
  6069. left: 0;
  6070. top: 5px;
  6071. @include phone {
  6072. position: static;
  6073. margin: 0 0 10px;
  6074. display: flex;
  6075. align-items: center;
  6076. }
  6077. }
  6078. .article-add[data-type='email'] .editControls {
  6079. top: 159px;
  6080. }
  6081. .editControls-item {
  6082. position: absolute;
  6083. top: 43px;
  6084. @extend .u-clickable, .zIndex-4;
  6085. @include phone {
  6086. position: relative;
  6087. z-index: initial;
  6088. top: 0 !important;
  6089. transform: none !important;
  6090. opacity: 1 !important;
  6091. }
  6092. &.is-hidden {
  6093. display: none;
  6094. @include phone {
  6095. display: block;
  6096. }
  6097. }
  6098. }
  6099. .editControls-item:nth-child(2) {
  6100. @include phone {
  6101. z-index: 1;
  6102. }
  6103. }
  6104. .editControls-item:nth-child(3) {
  6105. top: 79px;
  6106. }
  6107. .editControls-item:nth-child(4) {
  6108. top: 115px;
  6109. }
  6110. .editControls-item:not(:last-child) {
  6111. border-bottom: 1px solid var(--border);
  6112. @include phone {
  6113. border-bottom: 0;
  6114. border-right: 1px solid var(--border);
  6115. }
  6116. }
  6117. .editControls-iconHolder {
  6118. width: 38px;
  6119. height: 35px;
  6120. display: flex;
  6121. align-items: center;
  6122. justify-content: center;
  6123. @include phone {
  6124. width: 48px;
  6125. height: 32px;
  6126. }
  6127. }
  6128. .editControls-icon {
  6129. @include phone {
  6130. line-height: 0.7;
  6131. }
  6132. }
  6133. .editControls-icon .icon {
  6134. fill: var(--interactive-muted);
  6135. }
  6136. .pop-selector {
  6137. position: absolute;
  6138. top: 0;
  6139. left: 0;
  6140. display: flex;
  6141. align-items: center;
  6142. justify-content: center;
  6143. border-radius: 4px;
  6144. box-shadow: var(--elevation-low);
  6145. @include phone {
  6146. top: -4px;
  6147. left: 7px;
  6148. }
  6149. &.is-hidden {
  6150. display: none;
  6151. }
  6152. }
  6153. .pop-selectable {
  6154. width: 35px;
  6155. height: 35px;
  6156. display: flex;
  6157. align-items: center;
  6158. justify-content: center;
  6159. @extend .u-clickable;
  6160. background: var(--background-tertiary);
  6161. }
  6162. .pop-selectable:hover {
  6163. background: var(--highlight);
  6164. }
  6165. .pop-selectable:first-child {
  6166. @include bidi-style(border-radius, 4px 0 0 4px, border-radius, 0 4px 4px 0);
  6167. }
  6168. .pop-selectable:last-child {
  6169. @include bidi-style(border-radius, 0 4px 4px 0, border-radius, 4px 0 0 4px);
  6170. }
  6171. .pop-selectable:only-child {
  6172. border-radius: 4px;
  6173. }
  6174. .pop-selectable:hover .pop-selectable-icon {
  6175. fill: var(--text-inverted);
  6176. }
  6177. .article-add .icon-internal {
  6178. fill: hsl(18, 87%, 65%);
  6179. }
  6180. .article-add.is-public .icon-internal,
  6181. .article-add.is-internal .icon-public {
  6182. display: none;
  6183. }
  6184. .article-new .textBubble {
  6185. border-radius: 5px;
  6186. padding-left: 12px;
  6187. padding-right: 12px;
  6188. cursor: text;
  6189. }
  6190. .articleNewEdit-body {
  6191. width: 100%;
  6192. position: relative;
  6193. min-height: 20px;
  6194. vertical-align: bottom;
  6195. border: none;
  6196. outline: none;
  6197. resize: none;
  6198. height: auto;
  6199. @include phone {
  6200. font-size: 16px;
  6201. }
  6202. }
  6203. .article-new .bubble-arrow::after {
  6204. box-shadow: none;
  6205. }
  6206. .article-attachment {
  6207. position: absolute;
  6208. bottom: -4px;
  6209. left: 10px;
  6210. right: 10px;
  6211. height: 42px;
  6212. padding: 10px 0;
  6213. color: var(--text-muted);
  6214. overflow: hidden;
  6215. @extend .u-textTruncate;
  6216. }
  6217. .attachments:not(:empty) {
  6218. padding: 9px 5px;
  6219. border-top: 1px solid var(--background-modifier-border);
  6220. margin: 6px -12px 30px;
  6221. }
  6222. .ticket-create .attachments:not(:empty) {
  6223. margin-left: 0;
  6224. margin-right: 0;
  6225. margin-bottom: 56px;
  6226. }
  6227. .ticket-create .attachment--row {
  6228. line-height: 1.45;
  6229. }
  6230. .attachment.attachment--row {
  6231. font-size: 13px;
  6232. padding: 1px 10px 1px 7px;
  6233. @include rtl(padding, 1px 7px 1px 10px);
  6234. cursor: default;
  6235. position: relative;
  6236. display: flex;
  6237. }
  6238. .attachment.attachment--preview {
  6239. display: flex;
  6240. font-size: 13px;
  6241. padding: 9px 4px;
  6242. position: relative;
  6243. min-height: 42px;
  6244. color: inherit;
  6245. align-items: flex-start;
  6246. border-bottom: 1px solid var(--background-modifier-border);
  6247. &:last-child {
  6248. border-bottom: none;
  6249. }
  6250. }
  6251. .attachment-icon {
  6252. margin-top: 2px;
  6253. width: 38px;
  6254. text-align: center;
  6255. flex-shrink: 0;
  6256. .icon {
  6257. vertical-align: bottom;
  6258. }
  6259. img {
  6260. width: 30px;
  6261. height: 30px;
  6262. object-fit: cover;
  6263. }
  6264. }
  6265. .attachment--preview {
  6266. .attachment-text {
  6267. margin: 0 4px;
  6268. }
  6269. }
  6270. .attachment--preview .attachment-name {
  6271. min-width: 0;
  6272. display: block;
  6273. @extend .u-highlight;
  6274. word-break: break-all;
  6275. }
  6276. .attachment--preview .attachment-size {
  6277. white-space: nowrap;
  6278. font-size: 11px;
  6279. color: var(--text-muted);
  6280. }
  6281. .attachment--preview .attachment-delete {
  6282. color: var(--interactive-muted);
  6283. text-decoration: underline;
  6284. display: none;
  6285. white-space: nowrap;
  6286. @include bidi-style(margin-left, auto, margin-right, 0);
  6287. @extend .u-clickable;
  6288. @include phone {
  6289. display: block;
  6290. }
  6291. }
  6292. .attachment:hover .attachment--preview .attachment-delete {
  6293. padding: 0 10px 0 30px;
  6294. float: right;
  6295. display: block;
  6296. position: absolute;
  6297. right: 0;
  6298. background: linear-gradient(
  6299. to right,
  6300. transparent,
  6301. var(--background-secondary-hover) 20px
  6302. );
  6303. }
  6304. .attachment--preview .attachment-delete .icon {
  6305. fill: var(--interactive-muted);
  6306. width: 9px;
  6307. height: 9px;
  6308. @include bidi-style(margin-right, 5px, margin-left, 0);
  6309. }
  6310. .attachment:hover {
  6311. background: var(--background-secondary-hover);
  6312. }
  6313. .attachment--row .attachment-name {
  6314. @include bidi-style(margin-right, 5px, margin-left, 0);
  6315. min-width: 0;
  6316. @extend .u-highlight;
  6317. }
  6318. .attachment--row .attachment-size {
  6319. white-space: nowrap;
  6320. float: right;
  6321. @include bidi-style(margin-right, 10px, margin-left, 0);
  6322. }
  6323. .attachment--row .attachment-delete {
  6324. color: var(--interactive-muted);
  6325. text-decoration: underline;
  6326. display: none;
  6327. white-space: nowrap;
  6328. @include bidi-style(margin-left, auto, margin-right, 0);
  6329. @extend %clickable;
  6330. }
  6331. .attachment:hover.attachment--row .attachment-delete {
  6332. padding: 0 10px 0 30px;
  6333. float: right;
  6334. display: block;
  6335. position: absolute;
  6336. right: 0;
  6337. background: linear-gradient(
  6338. to right,
  6339. transparent,
  6340. var(--background-secondary-hover) 20px
  6341. );
  6342. }
  6343. .attachment--row .attachment-delete .icon {
  6344. width: 9px;
  6345. height: 9px;
  6346. @include bidi-style(margin-right, 5px, margin-left, 0);
  6347. }
  6348. .attachmentPlaceholder-inputHolder {
  6349. position: relative;
  6350. display: inline-block;
  6351. overflow: hidden;
  6352. vertical-align: bottom;
  6353. pointer-events: auto;
  6354. @extend .u-highlight;
  6355. &:has(input[type='file'][disabled]) {
  6356. color: var(--text-muted-alt);
  6357. pointer-events: none;
  6358. }
  6359. }
  6360. .attachmentUpload {
  6361. color: var(--text-muted);
  6362. }
  6363. .attachmentUpload-cancel {
  6364. @extend .u-clickable;
  6365. @include bidi-style(margin-left, auto, margin-right, 0);
  6366. text-decoration: underline;
  6367. }
  6368. .attachmentUpload .icon {
  6369. fill: var(--interactive-muted);
  6370. width: 9px;
  6371. height: 9px;
  6372. @include bidi-style(margin-right, 5px, margin-left, 0);
  6373. }
  6374. .attachmentUpload-progressBar {
  6375. position: absolute;
  6376. height: 4px;
  6377. background: hsl(202, 66%, 55%);
  6378. left: 0;
  6379. bottom: 0;
  6380. }
  6381. .attachmentUpload--standalone {
  6382. position: relative;
  6383. margin-bottom: 7px;
  6384. padding-bottom: 2px;
  6385. box-shadow: 0 -4px var(--border) inset;
  6386. &:last-child {
  6387. margin-bottom: 0;
  6388. }
  6389. .attachmentUpload-cancel {
  6390. padding: 0 2px 0 7px;
  6391. }
  6392. }
  6393. .attachmentUploadContainer {
  6394. .attachmentUpload-progressBar {
  6395. position: inherit;
  6396. }
  6397. }
  6398. .tabsSidebar-tabsSpacer {
  6399. @include bidi-style(padding-right, 62px !important, padding-left, 0);
  6400. /*
  6401. force div to show scrollbars
  6402. because we offset the sidebar tabs when the os shows scrollbars
  6403. */
  6404. overflow-x: hidden;
  6405. overflow-y: scroll;
  6406. @include phone {
  6407. @include bidi-style(padding-right, 0 !important, padding-left, 0);
  6408. }
  6409. }
  6410. .tabsSidebar-sidebarSpacer {
  6411. @include bidi-style(margin-right, $sidebarWidth, margin-left, 0);
  6412. transition: margin-right 500ms;
  6413. @include rtl(transition, margin-left 500ms);
  6414. @include desktop {
  6415. @include bidi-style(margin-right, $desktopSidebarWidth, margin-left, 0);
  6416. }
  6417. }
  6418. .tabsSidebar-sidebarSpacer.is-closed {
  6419. margin-right: 0;
  6420. @include rtl(margin-left, 0);
  6421. }
  6422. .tabsSidebar-holder {
  6423. overflow: hidden;
  6424. position: relative;
  6425. flex: 1;
  6426. display: flex;
  6427. flex-direction: column;
  6428. }
  6429. .tabsSidebar .sidebar {
  6430. width: $sidebarWidth;
  6431. border-left: 1px solid var(--border);
  6432. padding: 0;
  6433. margin-bottom: 1px;
  6434. @include desktop {
  6435. width: $desktopSidebarWidth;
  6436. }
  6437. }
  6438. .tabsSidebar .sidebar > hr {
  6439. margin: 20px;
  6440. }
  6441. .tabsSidebar .sidebar-header {
  6442. display: flex;
  6443. align-content: stretch;
  6444. position: relative;
  6445. margin: 0 20px;
  6446. + hr {
  6447. margin-top: 0;
  6448. }
  6449. }
  6450. .sidebar-header-headline {
  6451. padding: 33px 8px 17px 25px;
  6452. @include rtl(padding, 33px 25px 17px 8px);
  6453. margin: 0 0 0 -20px;
  6454. @include rtl(margin, 0 -20px 0 0);
  6455. line-height: 1;
  6456. @extend .u-clickable, .u-textTruncate;
  6457. }
  6458. .sidebar-header-actions {
  6459. flex: 1;
  6460. @include bidi-style(margin-right, 5px, margin-left, 0);
  6461. display: flex;
  6462. align-items: center;
  6463. .dropdown {
  6464. flex: 1;
  6465. position: static;
  6466. }
  6467. .dropdown-toggle {
  6468. padding-top: 38px;
  6469. padding-bottom: 24px;
  6470. }
  6471. }
  6472. .tabsSidebar-close {
  6473. padding: 27px 35px 12px 0;
  6474. margin: 0 -20px 0 0;
  6475. @extend .u-clickable;
  6476. display: flex;
  6477. align-items: center;
  6478. justify-content: center;
  6479. .icon {
  6480. fill: var(--interactive-primary);
  6481. }
  6482. }
  6483. .tabsSidebar .sidebar-content {
  6484. padding: 0 20px 20px;
  6485. }
  6486. .sidebar.bottom-form-shadow {
  6487. box-shadow:
  6488. 0 -1px rgba(0, 0, 0, 0.005) inset,
  6489. 0 -2px rgba(0, 0, 0, 0.005) inset,
  6490. 0 -3px rgba(0, 0, 0, 0.005) inset,
  6491. 0 -4px rgba(0, 0, 0, 0.005) inset;
  6492. }
  6493. .tabsSidebar {
  6494. position: absolute;
  6495. @include bidi-style(right, 0, left, auto);
  6496. top: 0;
  6497. bottom: 0;
  6498. transition: 500ms;
  6499. z-index: 300;
  6500. &.tabsSidebar--attributeBarSpacer {
  6501. bottom: 60px;
  6502. }
  6503. }
  6504. .tabsSidebar.is-closed {
  6505. transform: translateX($sidebarWidth);
  6506. @include rtl(transform, translateX(-$sidebarWidth));
  6507. @include desktop {
  6508. transform: translateX($desktopSidebarWidth);
  6509. @include rtl(transform, translateX(-$desktopSidebarWidth));
  6510. }
  6511. }
  6512. .tabsSidebar-tabs {
  6513. display: flex;
  6514. flex-direction: column;
  6515. justify-content: center;
  6516. position: absolute;
  6517. @include bidi-style(left, -56px, right, auto);
  6518. top: 0;
  6519. bottom: 0;
  6520. pointer-events: none;
  6521. @include phone {
  6522. @include bidi-style(left, -47px, right, auto);
  6523. }
  6524. }
  6525. .test {
  6526. position: absolute;
  6527. width: 100%;
  6528. }
  6529. .tabsSidebar-tab {
  6530. width: 56px;
  6531. height: 60px;
  6532. background: var(--background-primary-alt);
  6533. position: relative;
  6534. border-top: 1px solid var(--border-alt);
  6535. @extend .u-clickable;
  6536. pointer-events: auto;
  6537. display: flex;
  6538. align-items: center;
  6539. justify-content: center;
  6540. @include phone {
  6541. width: 47px;
  6542. height: 50px;
  6543. }
  6544. }
  6545. .tabsSidebar-tab.is-changed::before {
  6546. position: absolute;
  6547. content: '';
  6548. left: -3px;
  6549. width: 6px;
  6550. height: 6px;
  6551. top: 50%;
  6552. margin-top: -3px;
  6553. border-radius: 100%;
  6554. background: var(--interactive-muted-alt);
  6555. box-shadow: 0 0 0 2px var(--background-primary);
  6556. }
  6557. .tabsSidebar-tab:first-child {
  6558. @include bidi-style(border-top-left-radius, 8px, border-top-right-radius, 0);
  6559. border-top: none;
  6560. }
  6561. .tabsSidebar-tab:last-child {
  6562. @include bidi-style(
  6563. border-bottom-left-radius,
  6564. 8px,
  6565. border-bottom-right-radius,
  6566. 0
  6567. );
  6568. }
  6569. .tabsSidebar-tab .icon {
  6570. width: 24px;
  6571. height: 24px;
  6572. fill: var(--interactive-muted-alt);
  6573. }
  6574. .tabsSidebar-tab.active {
  6575. .tabsSidebar-tab-count {
  6576. background: var(--interactive-muted-alt-selected);
  6577. &::after {
  6578. border-right-color: var(--interactive-muted-alt-selected);
  6579. }
  6580. &.tabsSidebar-tab-count--info {
  6581. background: var(--button-primary-background);
  6582. opacity: 1;
  6583. &::after {
  6584. border-right-color: var(--button-primary-background);
  6585. }
  6586. }
  6587. &.tabsSidebar-tab-count--success {
  6588. background: hsl(145, 51%, 45%);
  6589. opacity: 1;
  6590. &::after {
  6591. border-right-color: hsl(145, 51%, 45%);
  6592. }
  6593. }
  6594. &.tabsSidebar-tab-count--warning {
  6595. background: hsl(45, 98%, 63%);
  6596. opacity: 1;
  6597. &::after {
  6598. border-right-color: hsl(45, 98%, 63%);
  6599. }
  6600. }
  6601. &.tabsSidebar-tab-count--danger {
  6602. background: hsl(11, 85%, 48%);
  6603. opacity: 1;
  6604. &::after {
  6605. border-right-color: hsl(11, 85%, 48%);
  6606. }
  6607. }
  6608. }
  6609. .icon {
  6610. fill: var(--interactive-muted-alt-selected);
  6611. }
  6612. }
  6613. .tabsSidebar-tab-count {
  6614. position: absolute;
  6615. left: 9px;
  6616. top: 5px;
  6617. background: var(--interactive-muted-alt);
  6618. width: 16px;
  6619. height: 13px;
  6620. text-align: center;
  6621. border-radius: 2px;
  6622. font-size: 9px;
  6623. line-height: 14px;
  6624. color: var(--background-primary-alt);
  6625. @include phone {
  6626. left: 4px;
  6627. top: 4px;
  6628. }
  6629. [data-tab='organization'] & {
  6630. left: 7px;
  6631. + .icon {
  6632. margin-left: 3px;
  6633. }
  6634. }
  6635. + .icon {
  6636. margin-top: 6px;
  6637. }
  6638. &::after {
  6639. content: '';
  6640. position: absolute;
  6641. top: 100%;
  6642. right: 20%;
  6643. border-bottom: 3px solid transparent;
  6644. border-right: 5px solid var(--interactive-muted-alt);
  6645. }
  6646. &.tabsSidebar-tab-count--info {
  6647. background: var(--button-primary-background);
  6648. opacity: 0.5;
  6649. &::after {
  6650. border-right-color: var(--button-primary-background);
  6651. }
  6652. }
  6653. &.tabsSidebar-tab-count--success {
  6654. background: hsl(145, 51%, 45%);
  6655. opacity: 0.5;
  6656. &::after {
  6657. border-right-color: hsl(145, 51%, 45%);
  6658. }
  6659. }
  6660. &.tabsSidebar-tab-count--warning {
  6661. background: hsl(45, 98%, 63%);
  6662. opacity: 0.5;
  6663. &::after {
  6664. border-right-color: hsl(45, 98%, 63%);
  6665. }
  6666. }
  6667. &.tabsSidebar-tab-count--danger {
  6668. background: hsl(11, 85%, 48%);
  6669. opacity: 0.5;
  6670. &::after {
  6671. border-right-color: hsl(11, 85%, 48%);
  6672. }
  6673. }
  6674. }
  6675. .alert {
  6676. padding: 10px 15px 8px;
  6677. border-radius: 3px;
  6678. color: var(--text-inverted);
  6679. border: none;
  6680. background: hsla(0, 0%, 0%, 0.3);
  6681. .icon {
  6682. @include bidi-style(margin-right, 10px, margin-left, 0);
  6683. fill: currentColor;
  6684. }
  6685. .btn {
  6686. background: hsla(0, 0%, 0%, 0.2);
  6687. border-color: hsla(0, 0%, 0%, 0.1);
  6688. color: inherit;
  6689. }
  6690. &--info {
  6691. background: var(--button-primary-background);
  6692. }
  6693. &--success {
  6694. &,
  6695. &[contenteditable]:hover,
  6696. &[contenteditable]:focus {
  6697. background: hsl(145, 51%, 45%);
  6698. }
  6699. }
  6700. &--warning {
  6701. color: hsl(45, 98%, 17%);
  6702. background: hsl(45, 98%, 63%);
  6703. .btn {
  6704. background: hsla(0, 0%, 100%, 0.2);
  6705. }
  6706. }
  6707. &--danger {
  6708. background: hsl(11, 85%, 48%);
  6709. }
  6710. &--square {
  6711. border-radius: 0;
  6712. }
  6713. &.horizontal .btn {
  6714. margin-top: -5px;
  6715. margin-bottom: -4px;
  6716. &:last-child {
  6717. margin-right: -5px;
  6718. }
  6719. }
  6720. &-row {
  6721. margin: 3px 0;
  6722. + .btn {
  6723. margin-top: 3px;
  6724. }
  6725. }
  6726. }
  6727. .tags,
  6728. .links,
  6729. .time-units,
  6730. .link_kb_answers {
  6731. margin: 20px 0;
  6732. }
  6733. .tags {
  6734. margin-top: 10px;
  6735. }
  6736. .userNotifications label + .btn {
  6737. margin-top: 1px;
  6738. }
  6739. .list {
  6740. padding: 0;
  6741. margin-bottom: 5px;
  6742. }
  6743. .list-title {
  6744. margin-top: 7px;
  6745. margin-bottom: 4px;
  6746. text-transform: uppercase;
  6747. color: var(--ghost-color);
  6748. display: block;
  6749. font-size: 12px;
  6750. font-weight: normal;
  6751. letter-spacing: 0.05em;
  6752. }
  6753. .list-item {
  6754. display: flex;
  6755. align-items: center;
  6756. border-bottom: 1px solid var(--background-modifier-border);
  6757. }
  6758. .list-item-name {
  6759. flex: 1;
  6760. padding: 4px 1px;
  6761. }
  6762. .list-item-delete {
  6763. padding: 0 10px;
  6764. @include bidi-style(margin-right, -3px, margin-left, 0);
  6765. display: flex;
  6766. align-items: center;
  6767. justify-content: center;
  6768. align-self: stretch;
  6769. @extend .u-clickable;
  6770. .icon {
  6771. width: 9px;
  6772. height: 9px;
  6773. fill: var(--interactive-muted);
  6774. }
  6775. }
  6776. .list-item-delete:hover .icon {
  6777. fill: hsl(1, 77%, 47%);
  6778. }
  6779. li.list-item-none {
  6780. list-style-type: none;
  6781. }
  6782. .ticket-id {
  6783. color: var(--text-inverted);
  6784. background: var(--interactive-muted-alt);
  6785. font-size: 11px;
  6786. border-radius: 7px;
  6787. padding: 0 5px;
  6788. @include bidi-style(margin-right, 2px, margin-left, 0);
  6789. }
  6790. .attributeBar {
  6791. background: var(--background-secondary);
  6792. transition: margin 250ms;
  6793. flex-shrink: 0;
  6794. border-top: 1px solid var(--border);
  6795. &.is-closed {
  6796. margin-bottom: -60px;
  6797. }
  6798. @include phone {
  6799. &-reset {
  6800. flex-shrink: 5;
  6801. }
  6802. .btn,
  6803. .buttonDropdown {
  6804. min-width: 20px;
  6805. &--only-icon {
  6806. min-width: 36px;
  6807. }
  6808. }
  6809. }
  6810. &-inner {
  6811. height: 60px;
  6812. display: flex;
  6813. align-items: center;
  6814. justify-content: flex-end;
  6815. padding: 10px;
  6816. }
  6817. &-avatars {
  6818. margin-right: 10px;
  6819. }
  6820. &-draft-spacer {
  6821. width: 1px;
  6822. height: 60px;
  6823. margin-right: 15px;
  6824. background: var(--background-modifier-accent);
  6825. }
  6826. &-avatars:empty + &-draft-spacer {
  6827. display: none;
  6828. }
  6829. &--border {
  6830. border-top: 1px solid var(--border);
  6831. }
  6832. &--spacer-after {
  6833. margin-right: auto;
  6834. }
  6835. }
  6836. .newTicket {
  6837. padding: 14px 34px;
  6838. @include phone {
  6839. padding: 0;
  6840. }
  6841. }
  6842. .newTicket .sidebar {
  6843. width: 290px;
  6844. }
  6845. .newTicket .form-control {
  6846. border-color: var(--border);
  6847. &:focus,
  6848. &.focus {
  6849. border-color: var(--border-highlight);
  6850. }
  6851. }
  6852. .newTicket .article-form-top {
  6853. margin-top: 15px;
  6854. }
  6855. .newTicket--chatTicket {
  6856. flex: 1;
  6857. display: flex;
  6858. padding: 0;
  6859. height: 100%;
  6860. & > .icon {
  6861. position: absolute;
  6862. top: 50%;
  6863. transform: translateY(-50%) translateX(-50%);
  6864. }
  6865. & > .box {
  6866. width: calc(50% - 47px);
  6867. margin: 34px;
  6868. }
  6869. .chatHistory {
  6870. display: flex;
  6871. flex-direction: column;
  6872. }
  6873. .boxFade {
  6874. width: 94px;
  6875. top: 34px;
  6876. height: 100%;
  6877. position: absolute;
  6878. @include bidi-style(margin-left, -34px, margin-right, 0);
  6879. z-index: 1;
  6880. }
  6881. }
  6882. .box {
  6883. background: var(--background-secondary);
  6884. margin: 20px 0;
  6885. border: 1px solid var(--border);
  6886. padding: 20px 24px;
  6887. }
  6888. .box.box--newTicket {
  6889. max-width: 1080px;
  6890. margin-left: auto;
  6891. margin-right: auto;
  6892. @include phone {
  6893. margin: 0;
  6894. border: none;
  6895. padding: 15px;
  6896. }
  6897. }
  6898. .box .page-header {
  6899. text-align: center;
  6900. margin-bottom: 12px;
  6901. }
  6902. .box--paper {
  6903. background-image: linear-gradient(
  6904. transparent 30px,
  6905. var(--background-modifier-border) 31px
  6906. );
  6907. background-size: 100% 31px;
  6908. line-height: 31px;
  6909. padding-top: 31px;
  6910. padding-bottom: 31px;
  6911. h1,
  6912. h2,
  6913. h3 {
  6914. margin: 0;
  6915. line-height: inherit;
  6916. }
  6917. h3:not(:first-child) {
  6918. margin-top: 31px;
  6919. }
  6920. }
  6921. .box h1 {
  6922. margin-top: 10px;
  6923. margin-bottom: 12px;
  6924. color: var(--text-normal);
  6925. flex: 1;
  6926. }
  6927. .box h2 {
  6928. margin-top: 12px;
  6929. }
  6930. .box .two-columns {
  6931. margin-left: -4px;
  6932. margin-right: -4px;
  6933. }
  6934. .box .two-columns .column {
  6935. margin-left: 4px;
  6936. margin-right: 4px;
  6937. width: calc(50% - 8px);
  6938. @include phone {
  6939. width: auto;
  6940. }
  6941. }
  6942. .box-controls {
  6943. margin-top: 20px;
  6944. display: flex;
  6945. align-items: center;
  6946. }
  6947. .box--yellow {
  6948. background: hsl(47, 100%, 93%);
  6949. border-color: hsl(47, 100%, 75%);
  6950. color: hsl(47, 20%, 67%);
  6951. h1,
  6952. h2 {
  6953. color: hsl(47, 3%, 28%);
  6954. }
  6955. }
  6956. .box-progress {
  6957. display: flex;
  6958. align-items: center;
  6959. justify-content: center;
  6960. }
  6961. .box-progress-title {
  6962. color: hsl(47, 3%, 28%);
  6963. }
  6964. .box-progress-body {
  6965. flex: 1;
  6966. @include bidi-style(margin-left, 24px, margin-right, 0);
  6967. display: flex;
  6968. align-items: center;
  6969. justify-content: center;
  6970. progress {
  6971. width: 100%;
  6972. }
  6973. }
  6974. .horizontal > .box {
  6975. margin-top: 4px;
  6976. margin-bottom: 4px;
  6977. & + .box {
  6978. border-left-width: 0;
  6979. }
  6980. }
  6981. .formset-inset {
  6982. margin: 34px -24px 24px;
  6983. padding: 19px 24px 24px;
  6984. background: var(--background-primary-alt);
  6985. border-top: 1px solid var(--border);
  6986. border-bottom: 1px solid var(--border);
  6987. }
  6988. .type-tabs {
  6989. @include phone {
  6990. overflow: hidden;
  6991. -webkit-overflow-scrolling: none;
  6992. }
  6993. }
  6994. .type-tabs .tab {
  6995. height: 40px;
  6996. line-height: 42px;
  6997. padding: 0 12px;
  6998. list-style: none;
  6999. align-items: flex-start;
  7000. @include phone {
  7001. display: block;
  7002. text-align: center;
  7003. flex-shrink: 1;
  7004. }
  7005. }
  7006. .type-tabs .tab-icon {
  7007. width: 17px;
  7008. height: 17px;
  7009. fill: var(--interactive-muted);
  7010. vertical-align: top;
  7011. @include bidi-style(margin-right, 9px, margin-left, 0);
  7012. margin-top: 11px;
  7013. transform: scale(1.2);
  7014. flex-shrink: 0;
  7015. }
  7016. .type-tabs .tab.active .tab-icon {
  7017. fill: var(--text-inverted);
  7018. }
  7019. .token {
  7020. @include ltr(padding, 0 0 0 10px);
  7021. margin: 0 5px 6px 0;
  7022. height: 26px;
  7023. color: var(--tag-text);
  7024. border-radius: 3px;
  7025. background: var(--tag-background);
  7026. border: none;
  7027. float: none;
  7028. display: inline-flex;
  7029. align-items: center;
  7030. cursor: default;
  7031. max-width: 100%;
  7032. &.active {
  7033. background: var(--highlight);
  7034. color: var(--text-inverted);
  7035. .close,
  7036. .token-close {
  7037. opacity: 1;
  7038. }
  7039. }
  7040. }
  7041. /*
  7042. selector needs to be stronger than .token-input
  7043. in order to override input[type=text]
  7044. */
  7045. .tokenfield .token-input {
  7046. vertical-align: top;
  7047. padding: 0 10px 7px 5px;
  7048. margin: 0;
  7049. min-width: 60px;
  7050. height: 32px;
  7051. display: inline-block;
  7052. border: none;
  7053. background: none;
  7054. box-shadow: none;
  7055. outline: none;
  7056. flex: 1;
  7057. &:focus {
  7058. box-shadow: none;
  7059. }
  7060. &[disabled] {
  7061. background: none;
  7062. }
  7063. }
  7064. .tokenfield .token ~ .token-input {
  7065. padding: 0 5px 7px 0;
  7066. }
  7067. .token-label {
  7068. padding: 0;
  7069. @include rtl(padding, 0 10px 0 0);
  7070. white-space: nowrap;
  7071. overflow: hidden;
  7072. text-overflow: ellipsis;
  7073. }
  7074. .tokenfield.form-control {
  7075. padding: 7px 7px 0;
  7076. height: auto;
  7077. display: flex;
  7078. flex-wrap: wrap;
  7079. }
  7080. .token .close,
  7081. .token-close {
  7082. margin: 0;
  7083. padding: 0 9px 1px 6px;
  7084. font-family: inherit;
  7085. font-weight: 100;
  7086. font-size: 28px;
  7087. line-height: 1;
  7088. color: inherit;
  7089. text-shadow: none;
  7090. opacity: 0.5;
  7091. outline: none;
  7092. height: auto;
  7093. @extend %clickable;
  7094. }
  7095. .token .close:hover,
  7096. .token-close:hover {
  7097. opacity: 0.5;
  7098. }
  7099. /* allow/show autocomplete in modal dialog */
  7100. .ui-autocomplete.ui-widget-content {
  7101. @extend .zIndex-11;
  7102. position: absolute;
  7103. max-height: 380px;
  7104. overflow: auto;
  7105. -webkit-overflow-scrolling: touch;
  7106. }
  7107. .ui-menu {
  7108. background: var(--background-tertiary);
  7109. border: none;
  7110. color: var(--text-inverted);
  7111. font-family: inherit;
  7112. font-size: inherit;
  7113. .ui-menu-item {
  7114. padding: 9px 15px;
  7115. list-style-image: none;
  7116. &.is-inactive {
  7117. text-decoration: line-through;
  7118. opacity: 0.73;
  7119. }
  7120. &:not(:first-child) {
  7121. box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  7122. }
  7123. &.ui-state-focus {
  7124. margin: 0;
  7125. border: none;
  7126. background: var(--highlight);
  7127. color: inherit;
  7128. + li {
  7129. box-shadow: none;
  7130. }
  7131. }
  7132. }
  7133. }
  7134. .drox {
  7135. color: var(--text-muted);
  7136. }
  7137. .drox .drox-header {
  7138. padding-bottom: 2px;
  7139. margin-bottom: 16px;
  7140. border-bottom: 1px solid var(--background-modifier-border);
  7141. }
  7142. .drox a.create {
  7143. margin-top: 2px;
  7144. display: inline-block;
  7145. }
  7146. .drox .form-group {
  7147. margin-bottom: 22px;
  7148. }
  7149. .drox .drox-body p:first-child {
  7150. margin-top: 20px;
  7151. }
  7152. .newTicket .templates {
  7153. border-bottom: 1px solid var(--background-modifier-border);
  7154. padding-bottom: 14px;
  7155. }
  7156. .templates-manage fieldset {
  7157. margin: 0;
  7158. }
  7159. .template-attributes {
  7160. margin: 17px 0 19px;
  7161. }
  7162. .template-attribute {
  7163. height: 24px;
  7164. line-height: 25px;
  7165. @include bidi-style(padding-left, 10px, padding-right, 0);
  7166. margin-bottom: 2px;
  7167. font-size: 13px;
  7168. color: var(--text-muted-alt);
  7169. background: var(--background-primary-alt);
  7170. border: 1px solid var(--border);
  7171. border-radius: 3px;
  7172. }
  7173. .template-attribute .key {
  7174. text-transform: uppercase;
  7175. @include bidi-style(margin-right, 3px, margin-left, 0);
  7176. }
  7177. .template-attribute .value {
  7178. @include bidi-style(margin-left, 3px, margin-right, 0);
  7179. }
  7180. .template-attribute .delete {
  7181. padding: 0 7px;
  7182. margin-top: 4px;
  7183. line-height: 19px;
  7184. font-size: 28px;
  7185. font-weight: 300;
  7186. opacity: 0.4;
  7187. }
  7188. .customer-name {
  7189. color: var(--text-normal);
  7190. }
  7191. .customer-email {
  7192. margin-top: 5px;
  7193. margin-bottom: 20px;
  7194. display: block;
  7195. }
  7196. .table.user-list {
  7197. tr:hover .switchView {
  7198. visibility: visible;
  7199. }
  7200. td .list {
  7201. margin-top: -4px;
  7202. }
  7203. .switchView {
  7204. visibility: hidden;
  7205. display: block;
  7206. text-overflow: ellipsis;
  7207. overflow: hidden;
  7208. }
  7209. .btn {
  7210. margin: 3px 5px 0;
  7211. }
  7212. }
  7213. .switchBackToUser {
  7214. display: flex;
  7215. align-items: center;
  7216. background: hsl(200, 87%, 45%);
  7217. color: var(--text-inverted);
  7218. height: 45px;
  7219. padding: 0 17px;
  7220. /* top: -45px !important; */
  7221. border-bottom: 5px solid hsl(205, 90%, 60%);
  7222. }
  7223. .switchBackToUser-icon {
  7224. width: 19px;
  7225. height: 18px;
  7226. }
  7227. .switchBackToUser-text {
  7228. @include bidi-style(margin-left, 10px, margin-right, 0);
  7229. }
  7230. .switchBackToUser-close {
  7231. width: 40px;
  7232. height: 40px;
  7233. @include bidi-style(margin-right, -10px, margin-left, 0);
  7234. display: flex;
  7235. align-items: center;
  7236. justify-content: center;
  7237. svg {
  7238. fill: var(--text-inverted);
  7239. }
  7240. }
  7241. .modal {
  7242. @extend .zIndex-11;
  7243. &-loader {
  7244. text-align: center;
  7245. padding: 70px;
  7246. }
  7247. &-backdrop--local {
  7248. background: var(--background-primary-alt);
  7249. }
  7250. }
  7251. .modal-dialog {
  7252. width: auto;
  7253. max-width: 660px;
  7254. margin-top: 35px;
  7255. margin-bottom: 35px;
  7256. @extend .zIndex-11;
  7257. @include phone {
  7258. max-width: calc(100% - 20px) !important;
  7259. margin: 10px;
  7260. }
  7261. &.wizard {
  7262. margin: 35px auto;
  7263. }
  7264. }
  7265. .modal--veryLarge .modal-dialog {
  7266. max-width: 990px;
  7267. }
  7268. .modal--large .modal-dialog {
  7269. max-width: 740px;
  7270. }
  7271. .modal--small .modal-dialog {
  7272. max-width: 440px;
  7273. }
  7274. .modal--dynamicSize .modal-dialog {
  7275. max-width: 100%;
  7276. width: max-content;
  7277. padding: 0 35px;
  7278. @include phone {
  7279. padding: 0;
  7280. margin: 10px;
  7281. }
  7282. }
  7283. .modal-dialog.wizard {
  7284. max-width: 460px;
  7285. }
  7286. .modal-content {
  7287. border-radius: 0;
  7288. border: 1px solid var(--border);
  7289. box-shadow: none;
  7290. color: var(--text-normal);
  7291. background: var(--background-secondary);
  7292. }
  7293. .modal-header {
  7294. padding: 30px 23px 23px;
  7295. border: none;
  7296. @include phone {
  7297. padding: 14px 15px;
  7298. }
  7299. &--empty {
  7300. padding: 0;
  7301. }
  7302. }
  7303. .modal-header h1 {
  7304. text-align: center;
  7305. @include phone {
  7306. text-align: initial;
  7307. line-height: 1.2;
  7308. }
  7309. }
  7310. .modal-close {
  7311. padding: 23px;
  7312. position: absolute;
  7313. z-index: 1;
  7314. right: 0;
  7315. color: var(--interactive-muted);
  7316. @include rtl(right, auto);
  7317. @include rtl(left, 0);
  7318. top: 0;
  7319. @extend .u-clickable;
  7320. @include phone {
  7321. position: static;
  7322. padding: 21px;
  7323. margin: -14px -15px 0 0;
  7324. float: right;
  7325. }
  7326. &:active {
  7327. color: var(--interactive-muted-active);
  7328. }
  7329. .icon-diagonal-cross {
  7330. fill: currentColor;
  7331. }
  7332. }
  7333. .modal-alerts-container {
  7334. padding: 0 23px;
  7335. }
  7336. .modal-body {
  7337. padding: 0 23px;
  7338. clear: both;
  7339. @include phone {
  7340. padding: 0 15px;
  7341. }
  7342. h2:first-child {
  7343. margin-top: 0;
  7344. }
  7345. p:first-child,
  7346. .alert.hidden:first-child + p {
  7347. margin-top: 0;
  7348. }
  7349. .table > thead > tr > th {
  7350. background: var(--background-primary-alt);
  7351. }
  7352. }
  7353. .modal-footer {
  7354. padding: 23px 23px 20px;
  7355. border: none;
  7356. display: flex;
  7357. @include rtl(text-align, left);
  7358. @include phone {
  7359. padding: 15px;
  7360. }
  7361. .btn--text + .btn--text {
  7362. margin-bottom: -10px;
  7363. }
  7364. }
  7365. .modal-leftFooter,
  7366. .modal-centerFooter,
  7367. .modal-rightFooter {
  7368. display: flex;
  7369. align-items: center; /* because of btn--text btn--subtle being thinner than the rest */
  7370. flex: 1;
  7371. }
  7372. .modal.modal--local {
  7373. display: block;
  7374. padding: 0 40px;
  7375. @extend .zIndex-11;
  7376. @include bidi-style(padding-left, 40px, padding-right, 0);
  7377. @include phone {
  7378. padding: 0 !important;
  7379. }
  7380. .modal-dialog {
  7381. box-shadow: 0 0 40px hsla(210, 17%, 40%, 0.34);
  7382. @include dark {
  7383. box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.34);
  7384. }
  7385. }
  7386. }
  7387. .caret {
  7388. position: absolute;
  7389. top: 50%;
  7390. margin-top: -3px;
  7391. right: 10px;
  7392. }
  7393. .dropdown-backdrop {
  7394. @extend .zIndex-5; // has to be behind dropdown-menu
  7395. }
  7396. .dropdown-menu {
  7397. @extend .zIndex-6; // has to be behind modal windows and beneath notifications (popover)
  7398. margin: 0;
  7399. padding: 0;
  7400. min-width: 100%;
  7401. color: var(--text-inverted);
  7402. text-transform: initial;
  7403. letter-spacing: 0;
  7404. background: var(--background-tertiary);
  7405. border-radius: 0;
  7406. border: none;
  7407. box-shadow: none;
  7408. overflow: hidden;
  7409. @include rtl(text-align, right);
  7410. overscroll-behavior: contain;
  7411. }
  7412. .dropdown-menu .divider {
  7413. background: var(--background-modifier-border);
  7414. }
  7415. .dropdown-menu kbd {
  7416. background: none;
  7417. color: inherit;
  7418. padding: 2px 5px;
  7419. @include bidi-style(margin-left, 7px, margin-right, 0);
  7420. line-height: 1;
  7421. vertical-align: baseline;
  7422. opacity: 0.5;
  7423. }
  7424. .dropdown-toggle {
  7425. display: flex;
  7426. align-items: center;
  7427. @extend .u-clickable;
  7428. }
  7429. .dropdown-icon {
  7430. width: 16px;
  7431. height: 16px;
  7432. }
  7433. .dropdown-menu.dropdown-menu--light {
  7434. background: var(--background-secondary);
  7435. color: var(--text-muted);
  7436. }
  7437. .dropdown-menu.dropdown-menu--light > li {
  7438. color: var(--text-nav);
  7439. &.dropdown-header {
  7440. color: var(--text-muted);
  7441. }
  7442. }
  7443. .dropdown-menu.dropdown-menu--light > li > a:hover {
  7444. background: var(--background-secondary-hover);
  7445. }
  7446. .user-menu li.add .dropdown-menu.dropdown-menu--light li > a:hover {
  7447. color: var(--text-normal);
  7448. }
  7449. .dropdown-menu.dropdown-menu--light li:hover {
  7450. background: none;
  7451. }
  7452. .dropdown-menu.dropdown-menu--light li.is-active {
  7453. color: var(--text-inverted);
  7454. }
  7455. .dropdown ul {
  7456. margin: 0;
  7457. padding: 0;
  7458. }
  7459. .dropdown li,
  7460. .dropup li {
  7461. height: 39px;
  7462. line-height: 39px;
  7463. padding: 0 15px;
  7464. @extend %clickable;
  7465. white-space: nowrap;
  7466. &:focus {
  7467. outline: none;
  7468. }
  7469. &.is-active {
  7470. small {
  7471. color: var(--text-muted-highlight);
  7472. }
  7473. }
  7474. }
  7475. .dropdown.dropdown--actions li.with-category {
  7476. height: 39px;
  7477. padding: 2.5px 15px;
  7478. display: block;
  7479. }
  7480. .dropdown li:not(:first-child) {
  7481. box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  7482. }
  7483. .dropdown li.label {
  7484. box-shadow: none;
  7485. + li {
  7486. box-shadow: none;
  7487. }
  7488. }
  7489. .dropdown li:hover,
  7490. .dropdown li.is-active {
  7491. background: var(--highlight);
  7492. + li {
  7493. box-shadow: none;
  7494. }
  7495. }
  7496. .dropdown-menu > li.danger:hover,
  7497. .dropdown-menu > li.danger.is-active {
  7498. background: var(--danger-color);
  7499. }
  7500. .dropdown-menu > li.create:hover,
  7501. .dropdown-menu > li.create.is-active {
  7502. background: hsl(145, 51%, 45%);
  7503. }
  7504. .dropdown-menu > li[disabled] {
  7505. opacity: 0.33;
  7506. &:hover,
  7507. &.is-active {
  7508. background: none;
  7509. cursor: default;
  7510. }
  7511. }
  7512. .dropdown-menu > li > a {
  7513. color: inherit;
  7514. padding: 0 15px;
  7515. margin: 0 -15px;
  7516. line-height: inherit;
  7517. }
  7518. .dropdown-menu > li > a:hover {
  7519. color: inherit;
  7520. background: none;
  7521. }
  7522. .dropdown-menu > li > a span {
  7523. display: block;
  7524. }
  7525. .dropdown-menu .badge--text {
  7526. @include bidi-style(padding-left, 10px, padding-right, 0);
  7527. }
  7528. .dropdown.dropdown--actions {
  7529. li {
  7530. line-height: initial;
  7531. height: auto;
  7532. padding: 11px 15px;
  7533. display: flex;
  7534. align-items: center;
  7535. word-break: break-all;
  7536. }
  7537. .dropdown-iconSpacer,
  7538. .dropdown-selectedSpacer {
  7539. display: flex;
  7540. align-items: center;
  7541. }
  7542. .dropdown-iconSpacer {
  7543. width: 25px;
  7544. }
  7545. .dropdown-selectedSpacer {
  7546. width: 34px;
  7547. @include bidi-style(margin-left, auto, margin-right, 0);
  7548. justify-content: flex-end;
  7549. opacity: 0;
  7550. .icon {
  7551. fill: var(--text-inverted);
  7552. }
  7553. &.is-selected {
  7554. opacity: 1;
  7555. }
  7556. }
  7557. a {
  7558. @extend .u-clickable;
  7559. display: flex;
  7560. flex: 1;
  7561. padding: 0 18px;
  7562. }
  7563. li.dropdown-highlight-list {
  7564. padding: 0 10px;
  7565. a {
  7566. padding: 11px 18px;
  7567. }
  7568. }
  7569. }
  7570. .dropdown.dropdown--wide {
  7571. li {
  7572. padding-top: 12px;
  7573. padding-bottom: 12px;
  7574. }
  7575. }
  7576. li.dropdown-header {
  7577. line-height: 34px;
  7578. height: 30px;
  7579. color: var(--text-muted);
  7580. box-shadow: none !important;
  7581. pointer-events: none;
  7582. }
  7583. .dropdown-menu--has-submenu {
  7584. overflow: hidden;
  7585. background: none;
  7586. ul {
  7587. background: var(--background-tertiary);
  7588. }
  7589. }
  7590. .dropdown-submenu {
  7591. position: absolute;
  7592. top: 0;
  7593. left: 0;
  7594. width: 100%;
  7595. }
  7596. .dropdown.dropdown--actions .dropdown-controls {
  7597. @extend .u-clickable;
  7598. display: flex;
  7599. .icon {
  7600. fill: var(--text-inverted);
  7601. @include bidi-style(margin-right, 10px, margin-left, 0);
  7602. flex-shrink: 0;
  7603. }
  7604. }
  7605. .dropdown-title {
  7606. flex-shrink: 1;
  7607. overflow: hidden;
  7608. text-overflow: ellipsis;
  7609. white-space: nowrap;
  7610. }
  7611. .dropdown-detail {
  7612. opacity: 0.5;
  7613. }
  7614. .dropdown {
  7615. .dropdown-menu-full-height {
  7616. li {
  7617. padding: 0;
  7618. }
  7619. a {
  7620. padding: 11px 18px;
  7621. margin: 0;
  7622. }
  7623. }
  7624. }
  7625. .recipientList,
  7626. .recipientList-organizationMembers {
  7627. list-style: none;
  7628. padding: 0;
  7629. }
  7630. .recipientList-entry {
  7631. display: flex;
  7632. align-items: center;
  7633. @extend .u-clickable;
  7634. &.is-inactive {
  7635. .recipientList-name {
  7636. text-decoration: line-through;
  7637. opacity: 0.73;
  7638. }
  7639. }
  7640. }
  7641. .recipientList-entry .recipientList-iconSpacer {
  7642. width: 20px;
  7643. @include bidi-style(margin-left, -5px, margin-right, 0);
  7644. display: flex;
  7645. align-items: center;
  7646. justify-content: center;
  7647. flex-shrink: 0;
  7648. }
  7649. .recipientList-icon {
  7650. width: 16px;
  7651. height: 16px;
  7652. fill: var(--text-inverted);
  7653. opacity: 0.2;
  7654. }
  7655. .recipientList--new,
  7656. .recipientList-entry:hover,
  7657. .recipientList-entry.is-active {
  7658. .recipientList-icon {
  7659. opacity: 1;
  7660. }
  7661. }
  7662. .recipientList-name {
  7663. color: var(--text-inverted);
  7664. @include bidi-style(margin-left, 10px, margin-right, 0);
  7665. flex: 1;
  7666. @extend .u-textTruncate;
  7667. }
  7668. .recipientList-status {
  7669. opacity: 0.5;
  7670. margin: 0 10px;
  7671. flex-shrink: 1;
  7672. &:last-child {
  7673. margin-right: 0;
  7674. }
  7675. }
  7676. .recipientList-arrow {
  7677. fill: var(--text-inverted);
  7678. opacity: 0.39;
  7679. }
  7680. .recipientList-entry:hover .recipientList-arrow {
  7681. opacity: 1;
  7682. }
  7683. .recipientList-detail {
  7684. opacity: 0.5;
  7685. &.is-inactive > span {
  7686. text-decoration: line-through;
  7687. }
  7688. }
  7689. .recipientList-icon.plus {
  7690. @include bidi-style(margin-left, 13px, margin-right, 0);
  7691. }
  7692. .recipientList--new {
  7693. background: hsl(145, 51%, 45%);
  7694. }
  7695. .dropdown .recipientList--new:hover {
  7696. background: hsl(147, 52%, 43%);
  7697. }
  7698. .recipientList-controls {
  7699. @extend .u-clickable;
  7700. padding: 0 10px !important;
  7701. .dropdown &:hover {
  7702. background: var(--supergood-color);
  7703. .icon-arrow-left {
  7704. fill: var(--text-inverted);
  7705. }
  7706. }
  7707. & + li {
  7708. box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  7709. }
  7710. }
  7711. .recipientList-organizationMembers {
  7712. position: absolute;
  7713. top: 0;
  7714. left: 0;
  7715. right: 0;
  7716. }
  7717. .organizationInfo-avatar,
  7718. .userInfo-avatar {
  7719. float: right;
  7720. @include rtl(float, left);
  7721. position: relative;
  7722. }
  7723. .userList {
  7724. list-style: none;
  7725. padding: 0;
  7726. .userList-entry {
  7727. margin: 10px 0;
  7728. display: flex;
  7729. align-items: center;
  7730. &:last-child {
  7731. margin-bottom: 0;
  7732. }
  7733. }
  7734. .userList-name {
  7735. @extend .u-textTruncate;
  7736. @include bidi-style(margin-left, 7px, margin-right, 0);
  7737. }
  7738. }
  7739. .checkbox,
  7740. .radio {
  7741. font-size: 14px;
  7742. padding: 0 6px;
  7743. .form-group & {
  7744. padding: 10px 12px;
  7745. margin: 0;
  7746. list-style: none;
  7747. height: auto;
  7748. display: flex;
  7749. flex-direction: column;
  7750. align-items: flex-start;
  7751. background: var(--background-secondary);
  7752. border: 1px solid var(--border);
  7753. }
  7754. .checkbox-replacement {
  7755. display: inline-block;
  7756. }
  7757. label {
  7758. padding-left: 0;
  7759. min-height: 0;
  7760. }
  7761. > label,
  7762. &-child {
  7763. margin-top: 5px;
  7764. font-family: inherit;
  7765. font-size: 14px;
  7766. color: inherit;
  7767. text-transform: inherit;
  7768. letter-spacing: 0;
  7769. line-height: 1.2;
  7770. &:first-child {
  7771. margin-top: 0;
  7772. }
  7773. &.is-disabled {
  7774. cursor: default;
  7775. touch-action: default;
  7776. span {
  7777. opacity: 0.33;
  7778. }
  7779. }
  7780. &.additional-radio-controls {
  7781. margin-top: 0;
  7782. .controls {
  7783. display: inline-flex;
  7784. margin-left: 5px;
  7785. }
  7786. }
  7787. }
  7788. &-child {
  7789. padding-left: 20px;
  7790. }
  7791. .help-text {
  7792. display: table;
  7793. font-size: 0.92em;
  7794. margin: 2px 0 3px 18px;
  7795. }
  7796. }
  7797. .checkbox.form-group .checkbox--list,
  7798. .radio.form-group .radio--list {
  7799. margin-top: 0;
  7800. margin-bottom: 15px;
  7801. height: auto;
  7802. padding-top: 3px;
  7803. padding-bottom: 3px;
  7804. }
  7805. .checkbox,
  7806. .radio {
  7807. &.form-group .controls label {
  7808. padding: 2px 0;
  7809. font: inherit;
  7810. margin-bottom: 0;
  7811. color: inherit;
  7812. text-transform: inherit;
  7813. letter-spacing: 0;
  7814. line-height: 1.2;
  7815. &:first-child {
  7816. margin-top: 0;
  7817. }
  7818. &.is-disabled {
  7819. cursor: default;
  7820. touch-action: default;
  7821. span {
  7822. opacity: 0.33;
  7823. }
  7824. }
  7825. }
  7826. &-child {
  7827. padding-left: 20px;
  7828. }
  7829. }
  7830. .radio_graphic .selections-container {
  7831. display: grid;
  7832. grid-gap: 10px;
  7833. // fit as many as possible in one line, they must at least be 112px wide
  7834. grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  7835. label {
  7836. margin-top: 0;
  7837. position: relative;
  7838. }
  7839. .icon {
  7840. flex-shrink: 0;
  7841. }
  7842. .icon-checked {
  7843. display: none;
  7844. }
  7845. .label-box {
  7846. display: block;
  7847. background: var(--background-secondary);
  7848. border: 1px solid var(--border);
  7849. border-radius: 5px;
  7850. overflow: hidden;
  7851. }
  7852. .label-row {
  7853. display: flex;
  7854. align-items: center;
  7855. padding: 5px 10px;
  7856. }
  7857. .label-text {
  7858. display: block;
  7859. margin-left: 5px;
  7860. white-space: nowrap;
  7861. overflow: hidden;
  7862. text-overflow: ellipsis;
  7863. }
  7864. .radio-illustration {
  7865. display: block;
  7866. width: 100%;
  7867. padding-bottom: 100%;
  7868. position: relative;
  7869. img {
  7870. width: 100%;
  7871. height: 100%;
  7872. position: absolute;
  7873. left: 0;
  7874. top: 0;
  7875. object-fit: cover;
  7876. }
  7877. }
  7878. input {
  7879. &:checked {
  7880. ~ .label-box {
  7881. border-color: var(--border-highlight);
  7882. box-shadow: 0 0 0 3px var(--shadow-highlight);
  7883. .icon-checked {
  7884. display: inline;
  7885. }
  7886. .icon-unchecked {
  7887. display: none;
  7888. }
  7889. }
  7890. }
  7891. }
  7892. }
  7893. .userSearch-label {
  7894. margin-top: 11px;
  7895. @include bidi-style(margin-right, 10px, margin-left, 0);
  7896. }
  7897. .userSearch .tab:not(.active) {
  7898. background: var(--background-secondary);
  7899. }
  7900. .userSearch {
  7901. margin: 0 0 20px;
  7902. }
  7903. .userSearch .tabs {
  7904. margin: 0;
  7905. }
  7906. .nav {
  7907. list-style: none;
  7908. padding: 0;
  7909. margin: 0;
  7910. }
  7911. .nav a {
  7912. padding: 10px 15px;
  7913. display: block;
  7914. }
  7915. .nav-tabs {
  7916. display: flex;
  7917. margin: 10px -20px 20px;
  7918. padding: 0 20px 0 21px; /* margin-left: -1px */
  7919. @include rtl(padding, 0 21px 0 20px);
  7920. position: relative;
  7921. }
  7922. .nav-tabs li {
  7923. margin: 0;
  7924. color: var(--interactive-muted);
  7925. border: 1px solid var(--border);
  7926. margin-left: -1px;
  7927. background: var(--background-secondary);
  7928. position: relative;
  7929. &:first-child {
  7930. border-radius: 7px 0 0 7px;
  7931. @include rtl(border-radius, 0 7px 7px 0);
  7932. }
  7933. &:last-child {
  7934. border-radius: 0 7px 7px 0;
  7935. @include rtl(border-radius, 7px 0 0 7px);
  7936. }
  7937. &:only-child {
  7938. border-radius: 7px;
  7939. }
  7940. &.active {
  7941. color: var(--text-inverted);
  7942. background: var(--button-active);
  7943. }
  7944. a {
  7945. padding: 10px 24px 8px;
  7946. color: inherit;
  7947. color: inherit;
  7948. }
  7949. }
  7950. .tab-content {
  7951. h2:first-child {
  7952. margin-top: 0;
  7953. }
  7954. }
  7955. .or-divider {
  7956. position: relative;
  7957. margin: 16px 0;
  7958. text-align: center;
  7959. &::before {
  7960. content: '';
  7961. position: absolute;
  7962. left: 0;
  7963. width: 100%;
  7964. top: 50%;
  7965. margin-top: -1px;
  7966. height: 1px;
  7967. background: hsla(0, 0%, 0%, 0.1);
  7968. }
  7969. span {
  7970. position: relative;
  7971. background: var(--background-secondary);
  7972. padding: 0 10px;
  7973. .modal-body & {
  7974. background: var(--background-primary);
  7975. }
  7976. }
  7977. }
  7978. .settings-entry {
  7979. margin-bottom: 42px;
  7980. max-width: 700px;
  7981. @include phone {
  7982. overflow: auto;
  7983. -webkit-overflow-scrolling: touch;
  7984. }
  7985. &--stretched {
  7986. max-width: none;
  7987. }
  7988. }
  7989. .setting-controls {
  7990. margin-top: 14px;
  7991. display: flex;
  7992. justify-content: flex-end;
  7993. }
  7994. .form-item .form-group {
  7995. margin-bottom: 0;
  7996. }
  7997. .form-item .form-group + .form-group {
  7998. margin-top: 15px;
  7999. }
  8000. .form-item + .btn {
  8001. @include bidi-style(margin-left, 23px, margin-right, 0);
  8002. }
  8003. .scrollPageHeader {
  8004. @extend .zIndex-5;
  8005. display: flex;
  8006. align-items: center;
  8007. background: var(--background-secondary);
  8008. border-bottom: 1px solid var(--border);
  8009. height: 64px;
  8010. top: 0;
  8011. left: 0;
  8012. right: 0;
  8013. padding: 0 22px;
  8014. position: absolute;
  8015. transform: translateY(-100%);
  8016. @include phone {
  8017. height: 50px;
  8018. padding: 0 6px;
  8019. overflow: hidden;
  8020. &.is-closed {
  8021. overflow: visible;
  8022. }
  8023. }
  8024. }
  8025. .scrollPageHeader small {
  8026. color: var(--text-muted-alt);
  8027. @include phone {
  8028. margin-top: 1px;
  8029. @include bidi-style(margin-left, 3px, margin-right, 0);
  8030. }
  8031. }
  8032. .scrollPageHeader .ticket-title {
  8033. max-width: initial;
  8034. padding: 0;
  8035. min-width: 0;
  8036. flex: 1;
  8037. }
  8038. .scrollPageHeader h1 {
  8039. font-size: 19px;
  8040. margin: 0 15px;
  8041. @extend .u-textTruncate;
  8042. @include phone {
  8043. font-size: 17px;
  8044. margin: 0 5px;
  8045. }
  8046. }
  8047. .wizard {
  8048. margin: auto; // makes sure that the wizard is scrollable
  8049. }
  8050. .wizard-logo {
  8051. fill: var(--text-inverted);
  8052. @include bidi-style(margin-left, -25px, margin-right, 0);
  8053. margin-bottom: 5px;
  8054. }
  8055. .wizard-slide {
  8056. @extend .hero-unit;
  8057. display: flex;
  8058. flex-direction: column;
  8059. width: 400px;
  8060. padding-bottom: 18px;
  8061. margin-bottom: 20px;
  8062. &.wizard-slide--large {
  8063. width: 460px;
  8064. }
  8065. &.wizard-slide--very-large {
  8066. width: auto;
  8067. max-width: 990px;
  8068. }
  8069. }
  8070. .wizard h2 {
  8071. text-align: center;
  8072. border-bottom: 1px solid rgba(0, 0, 0, 0.13);
  8073. padding-bottom: 8px;
  8074. margin-bottom: 16px;
  8075. & + p {
  8076. margin-top: 0;
  8077. }
  8078. }
  8079. .wizard-body {
  8080. flex: 1;
  8081. padding-bottom: 15px;
  8082. @include phone {
  8083. width: 100%;
  8084. }
  8085. .form-control {
  8086. min-width: 0;
  8087. }
  8088. }
  8089. .wizard-controls {
  8090. display: flex;
  8091. margin-top: 15px;
  8092. height: 39px;
  8093. }
  8094. .wizard-buttonList {
  8095. margin-top: 15px;
  8096. min-width: 200px;
  8097. }
  8098. p + .wizard-buttonList,
  8099. label + .wizard-buttonList {
  8100. margin-top: 5px;
  8101. }
  8102. .wizard-loadingText {
  8103. text-align: center;
  8104. margin: 0;
  8105. }
  8106. .wizard-loadingText .loading {
  8107. vertical-align: middle;
  8108. @include bidi-style(margin-right, 10px, margin-left, 0);
  8109. }
  8110. .wizard-aside {
  8111. padding-top: 15px;
  8112. text-align: center;
  8113. border-top: 1px solid rgba(0, 0, 0, 0.13);
  8114. }
  8115. .setup.wizard .wizard-body {
  8116. min-height: 140px;
  8117. & > p:first-child {
  8118. margin-top: 0;
  8119. }
  8120. }
  8121. .setup.wizard .logo-preview,
  8122. .branding .logo-preview {
  8123. display: block;
  8124. height: 0;
  8125. max-width: 200px;
  8126. max-height: 100px;
  8127. &[src=''] {
  8128. visibility: hidden;
  8129. }
  8130. + .logo-preview-placeholder {
  8131. height: 100px;
  8132. color: var(--text-muted);
  8133. background: var(--background-modifier-accent);
  8134. margin-bottom: 10px;
  8135. display: flex;
  8136. align-items: center;
  8137. justify-content: center;
  8138. }
  8139. }
  8140. .setup.wizard .logo-preview:not([src='']) {
  8141. margin: 0 auto 15px;
  8142. height: auto;
  8143. + .logo-preview-placeholder {
  8144. display: none;
  8145. }
  8146. }
  8147. .setup.wizard .base-outbound-settings {
  8148. margin-top: 15px;
  8149. }
  8150. .branding .logo-preview:not([src='']) {
  8151. margin: 20px auto 12px;
  8152. height: auto;
  8153. + .logo-preview-placeholder {
  8154. display: none;
  8155. }
  8156. }
  8157. .branding.login {
  8158. padding: 24px 24px 0;
  8159. }
  8160. .import.wizard .wizard-slide {
  8161. min-height: 300px;
  8162. }
  8163. .import-source {
  8164. border-radius: 5px;
  8165. border: 1px solid rgba(0, 0, 0, 0.13);
  8166. height: 50px;
  8167. margin: 5px 0;
  8168. @extend .u-clickable;
  8169. }
  8170. .input-feedback {
  8171. position: absolute;
  8172. @include bidi-style(padding-left, 10px, padding-right, 0);
  8173. right: 1px;
  8174. top: 1px;
  8175. bottom: 1px;
  8176. width: 52px;
  8177. border-radius: 0 5px 5px 0;
  8178. background: linear-gradient(to right, rgba(255, 255, 255, 0), white 33%);
  8179. &--no-background {
  8180. background: none;
  8181. }
  8182. }
  8183. .input-group-addon {
  8184. color: inherit;
  8185. }
  8186. .input-feedback--no-background {
  8187. background: none;
  8188. }
  8189. .input-feedback .icon {
  8190. display: none;
  8191. }
  8192. .input-feedback[data-state='loading'] .loading.icon,
  8193. .input-feedback[data-state='error'] .icon-error,
  8194. .input-feedback[data-state='success'] .icon-checkmark {
  8195. display: block;
  8196. }
  8197. .progressTable {
  8198. width: 100%;
  8199. margin: 0 auto;
  8200. }
  8201. .progressTable td {
  8202. padding: 8px;
  8203. overflow: auto;
  8204. -webkit-overflow-scrolling: touch;
  8205. width: 33%;
  8206. }
  8207. .progressTable tr:not(:last-child) {
  8208. border-bottom: 1px solid #eee;
  8209. }
  8210. .progressTable td:first-child {
  8211. text-align: end;
  8212. }
  8213. .progressTable progress {
  8214. width: 100%;
  8215. min-width: 60px;
  8216. display: block;
  8217. }
  8218. .progressTable .icon-checkmark {
  8219. @include bidi-style(margin-left, 10px, margin-right, 0);
  8220. opacity: 0;
  8221. }
  8222. .progressTable tr.is-done .icon-checkmark {
  8223. opacity: 1;
  8224. }
  8225. .channelList {
  8226. flex: 1;
  8227. display: flex;
  8228. flex-direction: column;
  8229. background: var(--background-secondary);
  8230. border-radius: 2px;
  8231. margin: 5px 0 20px;
  8232. box-shadow: var(--elevation-low);
  8233. }
  8234. .channelList,
  8235. .channelList-controls,
  8236. .channelList-controlEntry {
  8237. border: 1px solid var(--border);
  8238. }
  8239. .channelList-entry {
  8240. display: flex;
  8241. cursor: default;
  8242. padding: 5px 8px;
  8243. &:not(:last-child) {
  8244. border-bottom: 1px solid var(--border);
  8245. }
  8246. }
  8247. .channelList-label {
  8248. margin: 0 10px;
  8249. flex: 1;
  8250. & > * {
  8251. @extend .u-textTruncate;
  8252. }
  8253. }
  8254. .channelList-status {
  8255. font-size: 12px;
  8256. color: var(--text-muted);
  8257. }
  8258. .channelList-placeholder {
  8259. display: flex;
  8260. align-items: center;
  8261. justify-content: center;
  8262. flex: 1;
  8263. color: var(--text-muted);
  8264. }
  8265. .channelList-controls {
  8266. margin-top: auto;
  8267. display: flex;
  8268. background: var(--background-quaternary-alt);
  8269. border-left: none;
  8270. border-right: none;
  8271. border-bottom: none;
  8272. }
  8273. .channelList-controlEntry {
  8274. display: flex;
  8275. justify-content: center;
  8276. width: 26px;
  8277. height: 26px;
  8278. border-left: none;
  8279. border-top: none;
  8280. border-bottom: none;
  8281. position: relative;
  8282. [data-toggle='dropdown'] {
  8283. position: relative;
  8284. }
  8285. .icon {
  8286. opacity: 0.8;
  8287. }
  8288. }
  8289. .avatar-gallery {
  8290. display: flex;
  8291. flex-wrap: wrap;
  8292. }
  8293. .avatar-holder {
  8294. display: inline-block;
  8295. position: relative;
  8296. margin: 0 32px 32px 0;
  8297. border-radius: 100%;
  8298. box-shadow: 0 0 0 4px var(--background-secondary);
  8299. .avatar {
  8300. @extend .u-clickable;
  8301. &.is-active {
  8302. box-shadow: 0 0 0 4px var(--border-highlight);
  8303. }
  8304. }
  8305. }
  8306. .avatar--new {
  8307. background: hsl(145, 51%, 45%);
  8308. @extend .u-clickable;
  8309. }
  8310. .avatar-holder .avatar-delete {
  8311. position: absolute;
  8312. right: -15px;
  8313. top: -15px;
  8314. width: 40px;
  8315. height: 40px;
  8316. pointer-events: none;
  8317. visibility: hidden;
  8318. background: var(--background-secondary);
  8319. display: flex;
  8320. align-items: center;
  8321. justify-content: center;
  8322. border-radius: 100%;
  8323. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  8324. @extend .u-clickable;
  8325. svg {
  8326. opacity: 0.5;
  8327. fill: var(--interactive-primary);
  8328. }
  8329. &:hover svg {
  8330. opacity: 1;
  8331. }
  8332. }
  8333. .avatar-holder:hover .avatar-delete {
  8334. visibility: visible;
  8335. pointer-events: auto;
  8336. }
  8337. .camera video {
  8338. position: absolute;
  8339. visibility: hidden;
  8340. pointer-events: none;
  8341. }
  8342. .camera-preview {
  8343. display: block;
  8344. margin: 0 auto;
  8345. }
  8346. .camera-flash {
  8347. @extend .fit;
  8348. background: var(--background-secondary);
  8349. opacity: 0;
  8350. @extend .u-unclickable;
  8351. }
  8352. .camera-flash.is-active {
  8353. animation: flash 500ms ease;
  8354. }
  8355. @keyframes flash {
  8356. 0% {
  8357. opacity: 0;
  8358. }
  8359. 50% {
  8360. opacity: 1;
  8361. }
  8362. 100% {
  8363. opacity: 0;
  8364. }
  8365. }
  8366. .fileUpload {
  8367. position: relative;
  8368. overflow: hidden;
  8369. &.btn input:focus + label {
  8370. text-decoration: none;
  8371. }
  8372. }
  8373. .fileUpload label {
  8374. font-size: inherit;
  8375. color: inherit;
  8376. letter-spacing: inherit;
  8377. text-transform: inherit;
  8378. display: inline;
  8379. margin: 0;
  8380. }
  8381. .fileUpload input {
  8382. position: absolute;
  8383. right: 0;
  8384. top: 0;
  8385. font-size: 118px;
  8386. margin: 0;
  8387. padding: 0;
  8388. @extend %clickable;
  8389. opacity: 0;
  8390. &:focus + label {
  8391. text-decoration: underline;
  8392. }
  8393. }
  8394. .imagePreview {
  8395. margin-top: 45px;
  8396. @include phone {
  8397. margin-top: 0;
  8398. }
  8399. img {
  8400. width: auto !important;
  8401. max-width: 100% !important;
  8402. max-height: calc(100vh - 218px) !important;
  8403. }
  8404. }
  8405. .imageCropper p {
  8406. margin: 0;
  8407. }
  8408. .imageCropper-holder {
  8409. height: 340px;
  8410. margin: 15px 0;
  8411. }
  8412. .imageCropper-image {
  8413. max-width: 100%;
  8414. max-height: 100%;
  8415. opacity: 0;
  8416. }
  8417. .imageCropper-preview {
  8418. width: 40px;
  8419. height: 40px;
  8420. border-radius: 100%;
  8421. overflow: hidden;
  8422. margin: 0 10px;
  8423. }
  8424. .cropper-container {
  8425. /* prevent cropper.js's centering – we center via flex */
  8426. left: 0 !important;
  8427. }
  8428. .profile {
  8429. padding: 60px;
  8430. overflow: auto;
  8431. -webkit-overflow-scrolling: touch;
  8432. flex: 1;
  8433. @include phone {
  8434. padding: 0;
  8435. margin: 0;
  8436. }
  8437. h1 {
  8438. margin: 18px 0 0;
  8439. }
  8440. .tabs {
  8441. margin-top: 2px;
  8442. margin-bottom: 25px;
  8443. }
  8444. }
  8445. .profile-window {
  8446. color: var(--text-normal);
  8447. background: var(--background-secondary);
  8448. max-width: 660px;
  8449. margin: 0 auto;
  8450. border: 1px solid var(--border);
  8451. }
  8452. .profile-section {
  8453. padding: 20px 50px;
  8454. @include phone {
  8455. padding: 10px;
  8456. }
  8457. &.profile-memberSection {
  8458. margin-bottom: 10px;
  8459. }
  8460. }
  8461. .profile-section:not(:last-child) {
  8462. border-bottom: 1px solid var(--background-modifier-border);
  8463. }
  8464. .profile-action {
  8465. @include bidi-style(margin-right, -20px, margin-left, 0);
  8466. @include phone {
  8467. @include bidi-style(margin-right, 0, margin-left, 0);
  8468. }
  8469. .dropdown-toggle {
  8470. margin-top: -20px;
  8471. @include bidi-style(margin-right, -30px, margin-left, 0);
  8472. margin-bottom: 8px;
  8473. padding: 26px 40px 2px;
  8474. @include phone {
  8475. margin-top: -5px;
  8476. padding: 10px 0 5px;
  8477. @include bidi-style(margin-right, 0, margin-left, 0);
  8478. }
  8479. }
  8480. label {
  8481. margin: 0 8px;
  8482. padding: 0;
  8483. cursor: inherit;
  8484. }
  8485. }
  8486. .profile-subtitle {
  8487. font-size: 16px;
  8488. @extend .u-highlight;
  8489. }
  8490. .profile-details {
  8491. @include bidi-style(margin-left, -50px, margin-right, 0);
  8492. }
  8493. .profile-ticketsPlaceholder {
  8494. flex: 1;
  8495. margin: 8px 0 22px;
  8496. color: var(--text-muted);
  8497. .stat-icon {
  8498. margin-bottom: 10px;
  8499. }
  8500. }
  8501. .profile-detailsEntry {
  8502. margin: 8px 0;
  8503. @include bidi-style(padding-left, 50px, padding-right, 0);
  8504. width: 50%;
  8505. }
  8506. .profile-detailsEntry label {
  8507. padding: 0;
  8508. margin-bottom: 2px;
  8509. display: block;
  8510. }
  8511. .profile-organizationMember {
  8512. @extend .profile-detailsEntry;
  8513. display: flex;
  8514. align-items: center;
  8515. .avatar {
  8516. @include bidi-style(margin-right, 10px, margin-left, 0);
  8517. }
  8518. }
  8519. .profile-ticketLists {
  8520. display: flex;
  8521. margin: 0 -25px;
  8522. @include phone {
  8523. display: block;
  8524. margin: 0;
  8525. }
  8526. }
  8527. .profile-ticketList {
  8528. display: flex;
  8529. flex-direction: column;
  8530. flex: 1 1 50%;
  8531. padding: 0 25px;
  8532. min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
  8533. @include phone {
  8534. padding: 0;
  8535. margin-bottom: 10px;
  8536. &:last-child {
  8537. margin-bottom: 0;
  8538. }
  8539. }
  8540. .tasks {
  8541. margin-bottom: 10px;
  8542. display: flex;
  8543. flex-basis: auto;
  8544. flex-direction: column;
  8545. }
  8546. }
  8547. .profile .frequency.stat-widget {
  8548. height: 230px;
  8549. @include phone {
  8550. display: none;
  8551. }
  8552. .stat-bars {
  8553. height: 100px;
  8554. }
  8555. }
  8556. .highlighter {
  8557. display: flex;
  8558. }
  8559. [data-highlightcolor='Yellow']::selection {
  8560. background: var(--highlighter-yellow);
  8561. }
  8562. .highlight-Yellow {
  8563. background: var(--highlighter-yellow);
  8564. }
  8565. [data-highlightcolor='Green']::selection {
  8566. background: var(--highlighter-green);
  8567. }
  8568. .highlight-Green {
  8569. background: var(--highlighter-green);
  8570. }
  8571. [data-highlightcolor='Blue']::selection {
  8572. background: var(--highlighter-blue);
  8573. }
  8574. .highlight-Blue {
  8575. background: var(--highlighter-blue);
  8576. }
  8577. [data-highlightcolor='Pink']::selection {
  8578. background: var(--highlighter-pink);
  8579. }
  8580. .highlight-Pink {
  8581. background: var(--highlighter-pink);
  8582. }
  8583. [data-highlightcolor='Purple']::selection {
  8584. background: var(--highlighter-purple);
  8585. }
  8586. .highlight-Purple {
  8587. background: var(--highlighter-purple);
  8588. }
  8589. .translationOverview {
  8590. tbody > tr > td {
  8591. padding: 20px 0 0 10px;
  8592. }
  8593. .translationOverview-itemContainer {
  8594. padding: 10px 0 10px 10px;
  8595. }
  8596. .translationOverview-source {
  8597. width: 25%;
  8598. }
  8599. .translationOverview-target {
  8600. width: 35%;
  8601. }
  8602. .translationOverview-initial {
  8603. width: 25%;
  8604. }
  8605. .translationOverview-item {
  8606. width: 100%;
  8607. }
  8608. }
  8609. .overview-navigator {
  8610. display: flex;
  8611. }
  8612. .overview-navigator .pagination {
  8613. margin: 0 0 0 10px;
  8614. @include rtl(margin, 0 10px 0 0);
  8615. }
  8616. .empty-space {
  8617. padding: 50px;
  8618. svg {
  8619. width: 200px;
  8620. height: auto;
  8621. }
  8622. .empty-space-tagline {
  8623. color: var(--text-muted);
  8624. margin-top: 15px;
  8625. font-size: 18px;
  8626. }
  8627. }
  8628. .horizontal-filters-alert {
  8629. margin-bottom: 10px;
  8630. }
  8631. .horizontal-filters {
  8632. margin-bottom: 20px;
  8633. &--with-switch {
  8634. margin-bottom: 10px;
  8635. }
  8636. .alert {
  8637. margin-top: 10px;
  8638. margin-bottom: 10px;
  8639. }
  8640. .alert + .horizontal-filter {
  8641. border-radius: 4px 4px 0 0;
  8642. }
  8643. .alert + .horizontal-filter:last-child {
  8644. border-radius: 4px;
  8645. }
  8646. }
  8647. .horizontal-filter {
  8648. position: relative;
  8649. display: flex;
  8650. background: var(--background-primary-alt);
  8651. padding: 7px;
  8652. border: 1px solid var(--border-alt);
  8653. &:first-child {
  8654. border-radius: 4px 4px 0 0;
  8655. }
  8656. &:last-child {
  8657. border-radius: 0 0 4px 4px;
  8658. }
  8659. &:only-child {
  8660. border-radius: 4px;
  8661. }
  8662. & + .horizontal-filter {
  8663. border-top: none;
  8664. }
  8665. &-attribute {
  8666. max-width: 250px;
  8667. .modal--veryLarge & {
  8668. max-width: 400px;
  8669. }
  8670. }
  8671. select,
  8672. input {
  8673. border-color: var(--border-alt);
  8674. }
  8675. input[type='text'] {
  8676. width: 100%;
  8677. }
  8678. input[data-item='time'] {
  8679. width: 4.5ch;
  8680. }
  8681. &[data-level] {
  8682. padding-left: 54px;
  8683. @include rtl(padding-left, 7px);
  8684. @include rtl(padding-right, 54px);
  8685. }
  8686. &[data-level='1'] {
  8687. padding-left: 0;
  8688. @include rtl(padding-left, 7px);
  8689. @include rtl(padding-right, 0);
  8690. }
  8691. &[data-level='2'] {
  8692. padding-left: 27px;
  8693. @include rtl(padding-left, 7px);
  8694. @include rtl(padding-right, 27px);
  8695. }
  8696. &[data-level]::before {
  8697. content: '';
  8698. background-color: var(--border-alt);
  8699. width: 54px;
  8700. position: absolute;
  8701. top: 0;
  8702. left: 0;
  8703. bottom: 0;
  8704. @include rtl(right, 0);
  8705. }
  8706. &[data-level='1']::before {
  8707. width: 0;
  8708. }
  8709. &[data-level='2']::before {
  8710. width: 27px;
  8711. }
  8712. .draggable {
  8713. display: flex;
  8714. align-items: center;
  8715. justify-content: center;
  8716. width: 36px;
  8717. height: 39px;
  8718. vertical-align: middle;
  8719. cursor: move;
  8720. }
  8721. .ui-sortable-helper & {
  8722. border-color: transparent;
  8723. border-radius: none;
  8724. background: var(--background-modifier-lighter);
  8725. &[data-level]::before {
  8726. background-color: transparent;
  8727. }
  8728. }
  8729. &.ui-sortable-placeholder {
  8730. visibility: visible !important;
  8731. background: var(--background-primary-alt);
  8732. &[data-level]::before {
  8733. background-color: var(--border-highlight);
  8734. }
  8735. }
  8736. }
  8737. .horizontal-filter-body {
  8738. display: flex;
  8739. flex: 1;
  8740. min-width: 100px;
  8741. @include phone {
  8742. display: block;
  8743. margin-right: 5px;
  8744. }
  8745. > .controls,
  8746. > input {
  8747. @include bidi-style(margin-right, 5px, margin-left, 0);
  8748. @include phone {
  8749. margin: 0 0 5px !important;
  8750. }
  8751. > .controls-label {
  8752. margin-left: 0;
  8753. margin-right: 5px;
  8754. @include rtl(margin-left, 5px);
  8755. @include rtl(margin-right, 0);
  8756. }
  8757. .horizontal-filter-value {
  8758. max-width: 100%;
  8759. }
  8760. }
  8761. > .controls > .controls {
  8762. max-width: 100%;
  8763. + .controls {
  8764. @include bidi-style(margin-left, 5px, margin-right, 0);
  8765. }
  8766. }
  8767. }
  8768. .horizontal-filter-group {
  8769. padding: 10px;
  8770. background: var(--background-secondary);
  8771. border: 1px solid var(--border-alt);
  8772. border-radius: 5px;
  8773. margin: 0 5px;
  8774. > .form-group:last-child {
  8775. margin-bottom: 0;
  8776. }
  8777. }
  8778. .horizontal-filter-value {
  8779. max-width: 60%;
  8780. flex-grow: 1;
  8781. margin-bottom: 0;
  8782. @include phone {
  8783. max-width: 100%;
  8784. }
  8785. // lower the min-width of url input fields (normally 400px) so that it fits in
  8786. input[type='url'] {
  8787. min-width: 200px;
  8788. }
  8789. .dropdown:only-child {
  8790. flex-grow: 1;
  8791. }
  8792. }
  8793. .horizontal-filters-switch {
  8794. display: flex;
  8795. justify-content: flex-end;
  8796. & > label {
  8797. display: flex;
  8798. align-items: center;
  8799. margin-bottom: 0;
  8800. .zammad-switch {
  8801. margin-top: 0;
  8802. margin-left: 10px;
  8803. @include rtl(margin-left, 0);
  8804. @include rtl(margin-right, 10px);
  8805. }
  8806. }
  8807. &--align-start {
  8808. justify-content: flex-start;
  8809. & > label {
  8810. flex-direction: row-reverse;
  8811. .zammad-switch {
  8812. margin-left: 0;
  8813. margin-right: 10px;
  8814. @include rtl(margin-right, 0);
  8815. @include rtl(margin-left, 10px);
  8816. }
  8817. }
  8818. }
  8819. & + .js-preview h3 {
  8820. margin-top: 0;
  8821. }
  8822. }
  8823. .output-input {
  8824. margin: 0 0 14px;
  8825. output {
  8826. margin: 0;
  8827. border-radius: 3px 3px 0 0;
  8828. border: 1px solid var(--border-highlight);
  8829. border-bottom: none;
  8830. display: block;
  8831. }
  8832. input {
  8833. flex: 1;
  8834. border-top-left-radius: 0;
  8835. border-top-right-radius: 0;
  8836. border-top: none;
  8837. &:focus {
  8838. border-color: var(--border);
  8839. box-shadow: none;
  8840. }
  8841. }
  8842. }
  8843. output {
  8844. border-bottom: 1px solid var(--border-highlight);
  8845. margin: 0 0 19px;
  8846. display: inline-block;
  8847. padding: 10px 12px 8px;
  8848. color: inherit;
  8849. background: var(--background-article-customer);
  8850. &[disabled] {
  8851. border-color: hsl(358, 53%, 56%);
  8852. background: hsl(358, 53%, 76%);
  8853. color: var(--text-inverted);
  8854. }
  8855. p {
  8856. margin: 0;
  8857. }
  8858. }
  8859. .zammad-switch {
  8860. overflow: hidden;
  8861. width: 50px;
  8862. height: 30px;
  8863. border-radius: 15px;
  8864. &.zammad-switch--small {
  8865. width: 40px;
  8866. height: 24px;
  8867. border-radius: 12px;
  8868. }
  8869. &.zammad-switch--tiny {
  8870. width: 30px;
  8871. height: 18px;
  8872. border-radius: 9px;
  8873. }
  8874. &.zammad-switch--dark {
  8875. label {
  8876. background: var(--menu-switch-background);
  8877. }
  8878. label::after {
  8879. background: var(--menu-switch-pointer);
  8880. }
  8881. }
  8882. &.zammad-switch--green input:checked + label {
  8883. background: var(--supergood-color);
  8884. }
  8885. }
  8886. .zammad-switch label {
  8887. margin: 0;
  8888. position: relative;
  8889. width: 100%;
  8890. height: 100%;
  8891. border-radius: inherit;
  8892. outline: none;
  8893. background: var(--background-secondary);
  8894. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  8895. transition: background 200ms;
  8896. @extend %clickable;
  8897. &::after {
  8898. content: '';
  8899. position: absolute;
  8900. transition: transform 200ms;
  8901. width: calc(60% - 2px);
  8902. height: calc(100% - 2px);
  8903. border-radius: inherit;
  8904. left: 1px;
  8905. top: 1px;
  8906. box-shadow:
  8907. 0 0 0 1px rgba(0, 0, 0, 0.05),
  8908. 0 1px 3px rgba(0, 0, 0, 0.2);
  8909. background: var(--background-secondary);
  8910. @include rtl(transform, translateX(70%));
  8911. }
  8912. }
  8913. .dropdown-menu.dropdown-menu--light .zammad-switch input:not(:checked) + label {
  8914. background: var(--background-primary);
  8915. }
  8916. .zammad-switch input {
  8917. display: none;
  8918. &[disabled] + label {
  8919. cursor: not-allowed;
  8920. opacity: 0.38;
  8921. border-color: var(--border);
  8922. }
  8923. &[disabled] + label::after {
  8924. background: hsl(210, 17%, 97%);
  8925. }
  8926. &:focus + label {
  8927. transition: none;
  8928. background: var(--border-highlight);
  8929. box-shadow: 0 0 0 3px var();
  8930. }
  8931. &:checked + label {
  8932. background: var(--highlight);
  8933. }
  8934. &:checked + label::after {
  8935. transform: translateX(70%);
  8936. @include rtl(transform, none);
  8937. }
  8938. }
  8939. .controls .zammad-switch {
  8940. margin-top: 10px;
  8941. }
  8942. .horizontal-filter-text {
  8943. @include bidi-style(margin-right, 5px, margin-left, 0);
  8944. }
  8945. .filter-controls {
  8946. display: flex;
  8947. margin: 5.5px 0;
  8948. }
  8949. .filter-control {
  8950. display: flex;
  8951. align-items: center;
  8952. justify-content: center;
  8953. width: 30px;
  8954. height: 30px;
  8955. box-shadow: 0 0 0 1px var(--border-alt) inset;
  8956. border-radius: 100%;
  8957. background: var(--background-secondary);
  8958. @extend %clickable;
  8959. &:hover:not(.is-disabled) {
  8960. .icon {
  8961. fill: var(--interactive-primary);
  8962. }
  8963. }
  8964. &.is-disabled {
  8965. cursor: not-allowed;
  8966. opacity: 0.5;
  8967. }
  8968. &:not(:last-child) {
  8969. @include bidi-style(margin-right, 7px, margin-left, 0);
  8970. }
  8971. .icon {
  8972. fill: var(--interactive-muted);
  8973. }
  8974. }
  8975. .filter-preview {
  8976. margin: 20px 0;
  8977. }
  8978. .day-name {
  8979. text-align: center;
  8980. margin-bottom: 0;
  8981. color: inherit;
  8982. white-space: nowrap;
  8983. }
  8984. .form-group.day-time {
  8985. padding: 10px 5px 6px;
  8986. margin: 0;
  8987. label {
  8988. text-align: center;
  8989. }
  8990. .form-control {
  8991. margin-left: auto;
  8992. margin-right: auto;
  8993. margin-bottom: 8px;
  8994. }
  8995. }
  8996. .settings-row {
  8997. margin-bottom: 10px;
  8998. }
  8999. .settings-list {
  9000. border-collapse: separate;
  9001. color: var(--text-normal);
  9002. table-layout: auto;
  9003. margin-bottom: 20px;
  9004. & > caption {
  9005. color: var(--text-normal);
  9006. }
  9007. &.is-invalid {
  9008. border-radius: 3px;
  9009. box-shadow:
  9010. 0 0 0 2px var(--background-primary),
  9011. 0 0 0 4px hsl(0, 90%, 70%);
  9012. }
  9013. &.settings-list--fixed {
  9014. table-layout: fixed;
  9015. }
  9016. &.settings-list--stretch {
  9017. width: 100%;
  9018. }
  9019. &:not(:last-child) {
  9020. margin-bottom: 34px;
  9021. }
  9022. .form-group & {
  9023. margin-bottom: 0;
  9024. }
  9025. &.settings-list--toggleRow {
  9026. tr:not(.is-active) td > *:not(.dont-grey-out) {
  9027. opacity: 0.33;
  9028. }
  9029. }
  9030. &.settings-list--toggleColumn {
  9031. td:not(.is-active) * {
  9032. opacity: 0.33;
  9033. }
  9034. }
  9035. &.settings-list--placeholder {
  9036. th {
  9037. text-align: center;
  9038. border-bottom: 1px solid var(--border-alt);
  9039. border-radius: 4px;
  9040. }
  9041. td {
  9042. height: 40px;
  9043. }
  9044. }
  9045. .settings-list--deleted {
  9046. td {
  9047. text-decoration: line-through;
  9048. }
  9049. }
  9050. th,
  9051. td {
  9052. vertical-align: top;
  9053. padding: 10px;
  9054. border: 1px solid var(--border-alt);
  9055. background: var(--background-secondary);
  9056. }
  9057. th {
  9058. font-weight: normal;
  9059. text-transform: uppercase;
  9060. font-size: 12px;
  9061. line-height: 17px;
  9062. letter-spacing: 0.05em;
  9063. background: var(--background-primary-alt);
  9064. border-bottom: none;
  9065. word-break: normal;
  9066. }
  9067. td {
  9068. word-break: break-word;
  9069. > fieldset {
  9070. margin: 0;
  9071. > .form-group {
  9072. margin-left: 0;
  9073. margin-right: 0;
  9074. }
  9075. > .checkbox,
  9076. > .radio {
  9077. margin: 7px 0;
  9078. }
  9079. }
  9080. }
  9081. td.empty-cell {
  9082. border-top: none;
  9083. }
  9084. .settings-list-separator {
  9085. @include bidi-style(border-left-width, 3px, border-right-width, 1px);
  9086. }
  9087. .text-muted {
  9088. text-transform: none;
  9089. font-size: 10px;
  9090. letter-spacing: 0;
  9091. color: var(--text-muted-alt);
  9092. }
  9093. .inline-label {
  9094. color: inherit;
  9095. }
  9096. th:not(:last-child),
  9097. td:not(:last-child) {
  9098. @include bidi-style(border-right-width, 0, border-left-width, 1px);
  9099. }
  9100. .ui-sortable-placeholder {
  9101. visibility: visible !important;
  9102. td {
  9103. background: none;
  9104. border-left-width: 0;
  9105. border-right-width: 0;
  9106. }
  9107. }
  9108. .ui-sortable-helper td {
  9109. border-bottom-width: 1px !important;
  9110. }
  9111. tr:not(:last-child) td,
  9112. & > tbody:not(:last-child) tr td {
  9113. border-bottom-width: 0;
  9114. }
  9115. tr.is-inactive td {
  9116. color: hsl(199, 19%, 80%);
  9117. text-decoration: line-through;
  9118. }
  9119. & > thead > tr > th:first-child {
  9120. @include bidi-style(
  9121. border-top-left-radius,
  9122. 4px,
  9123. border-top-right-radius,
  9124. 0
  9125. );
  9126. }
  9127. & > thead > tr > th:last-child {
  9128. @include bidi-style(
  9129. border-top-right-radius,
  9130. 4px,
  9131. border-top-left-radius,
  9132. 0
  9133. );
  9134. }
  9135. & > tbody:last-child > tr:last-child > td:first-child,
  9136. & > tfoot:last-child > tr:last-child > td:first-child {
  9137. @include bidi-style(
  9138. border-bottom-left-radius,
  9139. 4px,
  9140. border-bottom-right-radius,
  9141. 0
  9142. );
  9143. }
  9144. & > tbody:last-child > tr:last-child > td:last-child,
  9145. & > tfoot:last-child > tr:last-child > td:last-child {
  9146. @include bidi-style(
  9147. border-bottom-right-radius,
  9148. 4px,
  9149. border-bottom-left-radius,
  9150. 0
  9151. );
  9152. }
  9153. p {
  9154. margin: 0;
  9155. }
  9156. .settings-list-action-cell {
  9157. @extend .u-clickable;
  9158. text-align: center;
  9159. color: var(--interactive-muted);
  9160. background: linear-gradient(
  9161. hsla(0, 0%, 100%, 0.02),
  9162. hsla(0, 0%, 100%, 0.02)
  9163. ),
  9164. linear-gradient(
  9165. var(--background-primary-alt),
  9166. var(--background-primary-alt)
  9167. );
  9168. line-height: 1;
  9169. padding-top: 11px;
  9170. padding-bottom: 9px;
  9171. &:hover {
  9172. color: var(--text-normal);
  9173. }
  9174. .icon {
  9175. fill: currentColor;
  9176. vertical-align: top;
  9177. margin-top: -2px;
  9178. }
  9179. }
  9180. .settings-list-controls {
  9181. padding: 0;
  9182. & > div,
  9183. & > a {
  9184. display: flex;
  9185. min-height: 40px;
  9186. }
  9187. .settings-list-control {
  9188. display: flex;
  9189. align-items: center;
  9190. justify-content: center;
  9191. padding: 0 10px;
  9192. @extend %clickable;
  9193. .icon {
  9194. fill: currentColor;
  9195. }
  9196. }
  9197. }
  9198. .settings-list-control-cell {
  9199. padding: 5px;
  9200. .btn--text {
  9201. margin: -5px;
  9202. }
  9203. & ~ .settings-list-row-control {
  9204. padding-bottom: 7px;
  9205. }
  9206. }
  9207. .settings-list-checkbox-cell,
  9208. .settings-list-radio-cell {
  9209. vertical-align: middle;
  9210. padding-left: 8px;
  9211. }
  9212. .settings-list-radio-cell {
  9213. text-align: center;
  9214. }
  9215. .settings-list-wrapping-cell {
  9216. display: flex;
  9217. align-items: center;
  9218. flex-wrap: wrap;
  9219. }
  9220. .settings-list--bottom-button {
  9221. margin-top: 10px;
  9222. }
  9223. .settings-list-middle {
  9224. vertical-align: middle;
  9225. }
  9226. }
  9227. .settings-list--roles-permissions {
  9228. margin-left: 18px;
  9229. margin-right: 18px;
  9230. margin-top: 10px;
  9231. th:first-child {
  9232. min-width: 150px;
  9233. }
  9234. }
  9235. .select-boxes {
  9236. display: flex;
  9237. align-items: flex-start;
  9238. }
  9239. .select-box {
  9240. display: flex;
  9241. flex-wrap: wrap;
  9242. margin: 0 14px;
  9243. background: var(--background-secondary);
  9244. color: var(--text-normal);
  9245. @include bidi-style(
  9246. border-right,
  9247. 1px solid var(--border-alt),
  9248. border-left,
  9249. none
  9250. );
  9251. border-bottom: 1px solid var(--border-alt);
  9252. border-radius: 3px 3px 0 0;
  9253. &.select-box--vertical .select-value {
  9254. flex-basis: 100%;
  9255. }
  9256. &.select-box--four .select-value {
  9257. flex-basis: 25%;
  9258. }
  9259. &.select-box--six .select-value {
  9260. flex-basis: calc(100% / 6);
  9261. }
  9262. .select-box-header {
  9263. @extend label;
  9264. margin: 0;
  9265. color: inherit;
  9266. display: flex;
  9267. align-items: center;
  9268. padding: 8px 10px;
  9269. flex-basis: 100%;
  9270. white-space: nowrap;
  9271. background: var(--background-primary-alt);
  9272. @include bidi-style(
  9273. border-left,
  9274. 1px solid var(--border-alt),
  9275. border-right,
  9276. none
  9277. );
  9278. border-top: 1px solid var(--border-alt);
  9279. border-radius: 3px 3px 0 0;
  9280. }
  9281. .select-value {
  9282. display: flex;
  9283. align-items: center;
  9284. justify-content: center;
  9285. min-height: 34px;
  9286. background-clip: content-box;
  9287. box-shadow:
  9288. 1px 0 var(--border-alt) inset,
  9289. 0 1px var(--border-alt) inset;
  9290. @extend %clickable;
  9291. &.is-selected {
  9292. background-color: var(--highlight);
  9293. box-shadow: none;
  9294. color: var(--text-inverted);
  9295. }
  9296. }
  9297. &:first-child {
  9298. @include bidi-style(margin-left, 0, margin-left, 14px);
  9299. }
  9300. &:last-child {
  9301. @include bidi-style(margin-right, 0, margin-left, 14px);
  9302. }
  9303. }
  9304. .searchableSelect {
  9305. position: relative;
  9306. .form-control {
  9307. padding-right: 37px;
  9308. @include bidi-style(padding-right, 37px, padding-left, 12px);
  9309. }
  9310. .searchableSelect-main {
  9311. position: relative;
  9312. line-height: 19px;
  9313. &--with-clear-button {
  9314. padding-right: 60px;
  9315. @include bidi-style(padding-right, 60px, padding-left, 12px);
  9316. }
  9317. &.form-control--small ~ .searchableSelect-autocomplete {
  9318. top: 6px;
  9319. left: 9px;
  9320. }
  9321. }
  9322. .searchableSelect-shadow {
  9323. position: absolute;
  9324. @include bidi-style(left, -9999px, right, -9999px);
  9325. }
  9326. .dropdown-menu {
  9327. margin-top: -3px;
  9328. max-width: 100%;
  9329. }
  9330. &-option-text {
  9331. flex: 1 1 0%;
  9332. text-overflow: ellipsis;
  9333. overflow: hidden;
  9334. white-space: nowrap;
  9335. display: block;
  9336. & + .icon {
  9337. @include bidi-style(margin-left, 10px, margin-right, 0);
  9338. }
  9339. &.is-inactive {
  9340. opacity: 0.33;
  9341. cursor: not-allowed;
  9342. }
  9343. }
  9344. &.dropdown li {
  9345. &.has-inactive {
  9346. cursor: unset;
  9347. }
  9348. &.is-selected {
  9349. @include bidi-style(
  9350. border-left,
  9351. 5px solid var(--highlight),
  9352. border-right,
  9353. 5px solid var(--highlight)
  9354. );
  9355. }
  9356. &.js-enter:hover,
  9357. &.js-enter.is-active {
  9358. background: none;
  9359. + li {
  9360. box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  9361. }
  9362. }
  9363. &.js-enter.is-highlighted {
  9364. span.searchableSelect-option-text {
  9365. background: var(--highlight);
  9366. }
  9367. }
  9368. &.js-back:hover,
  9369. &.js-back.is-active {
  9370. background: var(--supergood-color);
  9371. .icon-arrow-left,
  9372. .icon-arrow-right {
  9373. opacity: 1;
  9374. }
  9375. }
  9376. &.is-hidden {
  9377. display: none;
  9378. }
  9379. &.js-enter {
  9380. padding: 0;
  9381. span.searchableSelect-option-text {
  9382. padding: 11px 15px;
  9383. }
  9384. span.searchableSelect-option-arrow {
  9385. padding: 11px 15px;
  9386. cursor: pointer;
  9387. &:hover {
  9388. background: var(--supergood-color);
  9389. .recipientList-arrow {
  9390. opacity: 1;
  9391. }
  9392. }
  9393. }
  9394. }
  9395. span.searchableSelect-option-text {
  9396. letter-spacing: -0.02rem;
  9397. &:hover {
  9398. background: var(--highlight);
  9399. }
  9400. }
  9401. }
  9402. li:not(.is-active):hover + li {
  9403. box-shadow: 0 1px rgba(255, 255, 255, 0.13) inset;
  9404. }
  9405. .searchableSelect-autocomplete {
  9406. position: absolute;
  9407. left: 13px;
  9408. top: 11px;
  9409. right: 37px;
  9410. white-space: nowrap;
  9411. overflow: hidden;
  9412. display: flex;
  9413. pointer-events: none;
  9414. white-space: pre;
  9415. line-height: 19px;
  9416. }
  9417. .searchableSelect-autocomplete-invisible {
  9418. color: transparent;
  9419. }
  9420. .searchableSelect-autocomplete-visible {
  9421. color: hsl(0, 0%, 33%);
  9422. background: hsl(201, 61%, 90%);
  9423. }
  9424. .loading.icon {
  9425. position: absolute;
  9426. right: 11px;
  9427. top: 11px;
  9428. display: none;
  9429. }
  9430. &.is-loading {
  9431. .loading.icon {
  9432. display: block;
  9433. }
  9434. .icon-arrow-down {
  9435. display: none;
  9436. }
  9437. }
  9438. }
  9439. .action {
  9440. background: var(--background-secondary);
  9441. border: 1px solid var(--border);
  9442. box-shadow: var(--elevation-stroke);
  9443. display: flex;
  9444. flex-wrap: wrap;
  9445. padding: 10px;
  9446. margin-bottom: 17px;
  9447. &.is-inactive {
  9448. background: none;
  9449. box-shadow: none;
  9450. position: relative;
  9451. top: 2px;
  9452. border-color: var(--border-alt);
  9453. & > *:not(.action-controls) {
  9454. opacity: 0.33;
  9455. }
  9456. }
  9457. &--placeholder {
  9458. padding: 30px;
  9459. align-items: center;
  9460. justify-content: center;
  9461. color: hsl(206, 9%, 69%);
  9462. box-shadow: none;
  9463. background: none;
  9464. border-style: dashed;
  9465. font-style: italic;
  9466. }
  9467. &-alert {
  9468. width: calc(100% + 20px);
  9469. margin: -10px -10px 10px;
  9470. }
  9471. &-flow {
  9472. display: flex;
  9473. flex-wrap: wrap;
  9474. &.action-flow--noWrap {
  9475. flex-wrap: nowrap;
  9476. }
  9477. &.action-flow--row {
  9478. flex-basis: 100%;
  9479. }
  9480. &.action-flow--vertically-centered {
  9481. align-items: center;
  9482. }
  9483. }
  9484. &-separator {
  9485. width: 1px;
  9486. background: hsl(0, 0%, 97%);
  9487. margin: 0 10px;
  9488. }
  9489. .table {
  9490. margin-left: -9px;
  9491. margin-right: -9px;
  9492. }
  9493. h2 {
  9494. margin-bottom: 0;
  9495. .action-form-status .icon {
  9496. margin-top: 0;
  9497. }
  9498. }
  9499. &-block,
  9500. &-controls,
  9501. &-row {
  9502. padding: 10px;
  9503. h2:first-child,
  9504. h3:first-child {
  9505. margin-top: 0;
  9506. }
  9507. }
  9508. &-block {
  9509. &.action-block--flex {
  9510. flex: 1;
  9511. }
  9512. }
  9513. &-row {
  9514. flex-basis: 100%;
  9515. }
  9516. h3 {
  9517. color: var(--text-muted);
  9518. margin-top: 0;
  9519. + .btn--text {
  9520. position: relative;
  9521. top: -1px;
  9522. }
  9523. }
  9524. &-label {
  9525. background: var(--background-primary-alt);
  9526. border: 1px solid var(--border-alt);
  9527. align-self: flex-start;
  9528. padding: 5px 10px;
  9529. margin: -4px 0 -5px auto;
  9530. @include rtl(margin, -4px auto -5px 0);
  9531. color: var(--text-muted-alt);
  9532. cursor: default;
  9533. }
  9534. &-flow-icon {
  9535. width: 15px;
  9536. height: 24px;
  9537. margin-top: 16px; /* compensate for h3 height */
  9538. margin-left: 20px;
  9539. margin-right: 20px;
  9540. }
  9541. &-controls {
  9542. display: flex;
  9543. @include bidi-style(margin-left, auto, margin-right, 0);
  9544. align-self: flex-end;
  9545. .btn {
  9546. align-self: center;
  9547. }
  9548. }
  9549. }
  9550. /*
  9551. datepicker resets some css it potentially inherits when its rendered inside a table
  9552. */
  9553. .datepicker {
  9554. background: var(--background-tertiary);
  9555. color: var(--text-inverted);
  9556. padding: 0 14px 11px;
  9557. position: absolute;
  9558. min-width: 0;
  9559. cursor: default;
  9560. &.datepicker-rtl {
  9561. left: auto;
  9562. right: 0;
  9563. }
  9564. .datepicker-switch {
  9565. padding: 12px 0;
  9566. font-weight: bold;
  9567. font-size: 15px;
  9568. text-align: center;
  9569. letter-spacing: 0;
  9570. line-height: 1.5;
  9571. text-transform: none;
  9572. @extend %clickable;
  9573. &:hover {
  9574. background: hsl(240, 10%, 14%);
  9575. }
  9576. }
  9577. th {
  9578. background: none;
  9579. font-weight: 500;
  9580. }
  9581. th,
  9582. td {
  9583. border: none;
  9584. }
  9585. .next,
  9586. .prev {
  9587. padding: 12px 9px 0;
  9588. vertical-align: top;
  9589. text-align: center;
  9590. @extend %clickable;
  9591. .icon {
  9592. margin-top: 4px;
  9593. fill: var(--text-inverted);
  9594. opacity: 1;
  9595. }
  9596. &:hover {
  9597. background: hsl(240, 10%, 14%);
  9598. }
  9599. }
  9600. .dow {
  9601. text-transform: uppercase;
  9602. font-size: 12px;
  9603. padding: 0;
  9604. text-align: center;
  9605. vertical-align: inherit;
  9606. }
  9607. td.cw {
  9608. // background: 1px gap on the right towards the days + 1px border
  9609. background: linear-gradient(
  9610. to right,
  9611. var(--background-modifier-lighter),
  9612. var(--background-modifier-lighter) calc(100% - 2px),
  9613. transparent calc(100% - 2px),
  9614. var(--background-modifier-accent) calc(100% - 1px),
  9615. transparent calc(100% - 1px)
  9616. );
  9617. padding: 0 5px 0 3px !important;
  9618. text-align: center;
  9619. border-radius: 0;
  9620. }
  9621. tbody td {
  9622. width: 27px;
  9623. height: 27px;
  9624. border-radius: 14px;
  9625. padding: 1px 0 0 !important;
  9626. background-color: inherit;
  9627. vertical-align: inherit;
  9628. }
  9629. .month,
  9630. .year {
  9631. float: left;
  9632. width: 23%;
  9633. margin: 1%;
  9634. padding: 5px 0;
  9635. }
  9636. .day,
  9637. .month,
  9638. .year {
  9639. text-align: center;
  9640. &:not(.disabled) {
  9641. @extend %clickable;
  9642. }
  9643. &.disabled,
  9644. &.old,
  9645. &.new {
  9646. color: hsl(0, 0%, 33%);
  9647. }
  9648. &.today {
  9649. background: #777;
  9650. }
  9651. &.focused {
  9652. box-shadow: 0 0 0 1px hsl(207, 82%, 64%) inset;
  9653. }
  9654. &.active {
  9655. color: var(--text-inverted);
  9656. background: hsl(207, 82%, 64%);
  9657. }
  9658. }
  9659. .today,
  9660. .clear {
  9661. text-align: center;
  9662. padding: 2px 0 0;
  9663. @extend %clickable;
  9664. &.hidden {
  9665. display: none;
  9666. }
  9667. }
  9668. .datepicker-footer-buttons {
  9669. display: flex;
  9670. justify-content: space-between;
  9671. gap: 20px;
  9672. align-items: stretch;
  9673. height: 31px;
  9674. margin-top: 15px;
  9675. div {
  9676. flex-grow: 1;
  9677. border: 1px solid #56575e;
  9678. border-radius: 3px;
  9679. display: flex;
  9680. align-items: center;
  9681. justify-content: center;
  9682. }
  9683. }
  9684. }
  9685. #notify {
  9686. position: absolute;
  9687. top: 10px;
  9688. left: 0;
  9689. right: 0;
  9690. @extend .zIndex-9;
  9691. pointer-events: none;
  9692. .noty_bar {
  9693. max-width: 500px;
  9694. text-align: center;
  9695. margin: 0 auto 10px;
  9696. .noty_message {
  9697. pointer-events: auto;
  9698. display: inline-block;
  9699. background: rgba(0, 0, 0, 0.75);
  9700. padding: 10px 15px 8px;
  9701. border-radius: 3px;
  9702. color: var(--text-inverted);
  9703. }
  9704. .icon {
  9705. vertical-align: middle;
  9706. margin-top: -3px;
  9707. @include bidi-style(margin-right, 5px, margin-left, 0);
  9708. }
  9709. a {
  9710. color: inherit;
  9711. text-decoration: none;
  9712. }
  9713. }
  9714. }
  9715. .animated {
  9716. animation-duration: 300ms;
  9717. animation-fill-mode: both;
  9718. }
  9719. .fadeInDown {
  9720. animation-name: fadeInDown;
  9721. }
  9722. @keyframes fadeInDown {
  9723. from {
  9724. opacity: 0;
  9725. transform: translate3d(0, -50%, 0);
  9726. }
  9727. to {
  9728. opacity: 1;
  9729. transform: none;
  9730. }
  9731. }
  9732. .fadeOutDown {
  9733. animation-name: fadeOutDown;
  9734. }
  9735. @keyframes fadeOutDown {
  9736. from {
  9737. opacity: 1;
  9738. }
  9739. to {
  9740. opacity: 0;
  9741. transform: translate3d(0, 50%, 0);
  9742. }
  9743. }
  9744. .loading-placeholder {
  9745. display: flex;
  9746. align-items: center;
  9747. justify-content: center;
  9748. height: 133px;
  9749. .loading-text {
  9750. @include bidi-style(margin-left, 10px, margin-right, 0);
  9751. }
  9752. }
  9753. .chat {
  9754. flex: 1;
  9755. display: flex;
  9756. flex-direction: column;
  9757. padding: 0 14px;
  9758. @include phone {
  9759. padding: 0;
  9760. }
  9761. .page-header {
  9762. margin: 15px 0 5px;
  9763. padding: 0 6px;
  9764. @include phone {
  9765. flex-wrap: wrap;
  9766. margin: 0;
  9767. padding: 5px 8px;
  9768. }
  9769. }
  9770. .page-header-title {
  9771. @include phone {
  9772. order: 1;
  9773. }
  9774. }
  9775. .page-header-center {
  9776. @include phone {
  9777. flex-basis: 100%;
  9778. padding: 0;
  9779. order: 3;
  9780. }
  9781. }
  9782. .page-header-meta {
  9783. @include phone {
  9784. order: 2;
  9785. @include bidi-style(margin-left, auto, margin-right, auto);
  9786. padding-top: 4px;
  9787. @include bidi-style(padding-left, 10px, padding-right, 0);
  9788. }
  9789. }
  9790. }
  9791. .chat-workspace {
  9792. display: flex;
  9793. flex-wrap: wrap;
  9794. padding: 0 0 10px;
  9795. margin: 0 -4px;
  9796. flex: 1;
  9797. @include phone {
  9798. margin: 0;
  9799. padding: 0;
  9800. flex-wrap: nowrap;
  9801. overflow: auto;
  9802. -webkit-overflow-scrolling: touch;
  9803. scroll-snap-mode: x mandatory;
  9804. }
  9805. }
  9806. .chat-window {
  9807. flex: 0 1 0;
  9808. overflow: hidden;
  9809. display: flex;
  9810. flex-direction: column;
  9811. transition-duration: 500ms;
  9812. transition-property: transform, flex, padding;
  9813. transform: scale(0);
  9814. @include phone {
  9815. min-width: calc(100vw - #{$mobileNavigationWidth} - 16px);
  9816. scroll-snap-align: center;
  9817. }
  9818. &.is-open {
  9819. flex: 1 0 25%;
  9820. transform: scale(1);
  9821. padding: 10px;
  9822. @include phone {
  9823. padding: 8px;
  9824. }
  9825. }
  9826. &.is-offline {
  9827. .chat-controls {
  9828. opacity: 0.5;
  9829. }
  9830. }
  9831. }
  9832. .chat-header {
  9833. background: var(--background-primary-alt);
  9834. border: 1px solid var(--border-alt);
  9835. border-radius: 3px 3px 0 0;
  9836. height: 43px;
  9837. line-height: 13px;
  9838. flex-shrink: 0;
  9839. display: flex;
  9840. justify-content: space-between;
  9841. align-items: center;
  9842. }
  9843. .chat-name {
  9844. margin: 0 2px;
  9845. overflow: hidden;
  9846. text-overflow: ellipsis;
  9847. white-space: nowrap;
  9848. .status-badge {
  9849. @include bidi-style(margin-left, 2px, margin-right, 0);
  9850. vertical-align: middle;
  9851. height: 100%;
  9852. }
  9853. }
  9854. .chat-status {
  9855. @include bidi-style(margin-left, 10px, margin-right, 0);
  9856. &[data-status='online'] .icon {
  9857. fill: var(--supergood-color);
  9858. }
  9859. &[data-status='offline'] .icon {
  9860. fill: var(--superbad-color);
  9861. }
  9862. .icon-status-modified-inner-circle,
  9863. .icon-status-modified-outer-circle {
  9864. display: none;
  9865. }
  9866. &.is-modified {
  9867. .icon-status {
  9868. display: none;
  9869. }
  9870. .icon-status-modified-inner-circle,
  9871. .icon-status-modified-outer-circle {
  9872. display: block;
  9873. }
  9874. }
  9875. }
  9876. .chat-status-holder {
  9877. position: relative;
  9878. }
  9879. .chat-disconnect,
  9880. .chat-close {
  9881. @extend %clickable;
  9882. padding: 10px;
  9883. .btn {
  9884. min-width: 80px;
  9885. justify-content: center;
  9886. }
  9887. }
  9888. .chat-disconnect.is-hidden,
  9889. .chat-close.is-hidden {
  9890. display: none;
  9891. }
  9892. .chat-scroll-hint {
  9893. background: var(--background-primary);
  9894. display: flex;
  9895. align-items: center;
  9896. border: 1px solid var(--border-alt);
  9897. border-top: none;
  9898. padding: 7px 10px 6px;
  9899. color: var(--text-muted);
  9900. @extend %clickable;
  9901. &.is-hidden {
  9902. display: none;
  9903. }
  9904. .icon {
  9905. fill: hsl(210, 5%, 78%);
  9906. @include bidi-style(margin-right, 8px, margin-left, 0);
  9907. }
  9908. }
  9909. .chat-body-holder {
  9910. flex: 1;
  9911. background: var(--background-secondary);
  9912. font-size: 13px;
  9913. line-height: 18px;
  9914. overflow: auto;
  9915. -webkit-overflow-scrolling: touch;
  9916. border-left: 1px solid var(--border-alt);
  9917. border-right: 1px solid var(--border-alt);
  9918. position: relative;
  9919. }
  9920. .chat-body-holder--standalone {
  9921. border-top: 1px solid var(--border-alt);
  9922. border-bottom: 1px solid var(--border-alt);
  9923. }
  9924. .chat-body {
  9925. padding: 10px;
  9926. display: flex;
  9927. flex-direction: column;
  9928. align-items: flex-start;
  9929. position: absolute;
  9930. width: 100%;
  9931. top: 0;
  9932. left: 0;
  9933. }
  9934. .chat-timestamp,
  9935. .chat-notice-message {
  9936. font-size: 12px;
  9937. color: var(--text-muted);
  9938. margin-bottom: 4px;
  9939. align-self: center;
  9940. word-break: break-word;
  9941. }
  9942. .chat-timestamp-label {
  9943. font-weight: 500;
  9944. }
  9945. .chat-message {
  9946. max-width: 90%;
  9947. background: var(--background-primary);
  9948. padding: 6px 12px;
  9949. border-radius: 16px;
  9950. margin-bottom: 4px;
  9951. }
  9952. .chat-message img {
  9953. @extend %clickable;
  9954. }
  9955. .chat-message--customer.chat-message--new {
  9956. font-weight: bold;
  9957. }
  9958. .chat-message--agent {
  9959. @include bidi-style(margin-left, auto, margin-right, 0);
  9960. background: var(--background-article-customer);
  9961. align-self: flex-end;
  9962. }
  9963. .chat-message--agent + .chat-message--customer,
  9964. .chat-message--customer + .chat-message--agent {
  9965. margin-top: 10px;
  9966. }
  9967. .chat-status-message {
  9968. align-self: center;
  9969. background: var(--background-primary-alt);
  9970. padding: 6px 12px;
  9971. margin: 4px 0 10px;
  9972. border-radius: 3px;
  9973. }
  9974. .chat-loader {
  9975. @include bidi-style(margin-right, -4px, margin-left, 0);
  9976. .icon {
  9977. width: 12px;
  9978. height: 12px;
  9979. fill: var(--border);
  9980. @include bidi-style(margin-left, -4px, margin-right, 0);
  9981. vertical-align: middle;
  9982. animation: ease-in-out load-fade 600ms infinite alternate;
  9983. }
  9984. .icon + .icon {
  9985. animation-delay: 0.13s;
  9986. }
  9987. .icon + .icon + .icon {
  9988. animation-delay: 0.26s;
  9989. }
  9990. }
  9991. @keyframes load-fade {
  9992. 0% {
  9993. opacity: 0.5;
  9994. transform: scale(0.6);
  9995. }
  9996. 67% {
  9997. opacity: 1;
  9998. transform: scale(1);
  9999. }
  10000. }
  10001. .chat-footer {
  10002. border-top: 1px solid var(--border-alt);
  10003. padding: 10px 10px 0;
  10004. display: flex;
  10005. justify-content: center;
  10006. align-self: stretch;
  10007. margin: 0 -10px;
  10008. }
  10009. .chat-controls {
  10010. display: flex;
  10011. align-items: flex-start;
  10012. padding: 10px;
  10013. background: var(--background-primary-alt);
  10014. border: 1px solid var(--border-alt);
  10015. border-radius: 0 0 3px 3px;
  10016. flex-shrink: 0;
  10017. }
  10018. .chat-input {
  10019. @include bidi-style(margin-right, 10px, margin-left, 0);
  10020. flex-grow: 1;
  10021. position: relative;
  10022. .form-control {
  10023. overflow: auto;
  10024. -webkit-overflow-scrolling: touch;
  10025. max-height: 50vh;
  10026. }
  10027. }
  10028. .manage-chat-jquery-switch-container {
  10029. display: flex;
  10030. flex-direction: row;
  10031. align-items: center;
  10032. .zammad-switch {
  10033. @include bidi-style(margin-right, 8px, margin-left, 8px);
  10034. }
  10035. }
  10036. .browser {
  10037. margin: 0 0 20px;
  10038. position: relative;
  10039. &[data-size] {
  10040. padding-bottom: 65%; // 16:10 aspect ratio;
  10041. .browser-ratio {
  10042. width: 100%;
  10043. height: 100%;
  10044. position: absolute;
  10045. left: 0;
  10046. top: 0;
  10047. transition: width 500ms;
  10048. display: flex;
  10049. flex-direction: column;
  10050. }
  10051. .browser-body {
  10052. padding: 0;
  10053. }
  10054. }
  10055. &[data-size='mobile'] .browser-ratio {
  10056. width: 375px;
  10057. }
  10058. &-ratio {
  10059. border: 1px solid var(--border);
  10060. border-radius: 5px;
  10061. }
  10062. }
  10063. /* stylelint-disable media-query-no-invalid */
  10064. @media screen and (min-width: #{1280 + $sidebarWidth + $navigationWidth}) {
  10065. // hide 1:1 button when it gets inrelevant
  10066. [data-size='1:1'] {
  10067. display: none;
  10068. }
  10069. .browser[data-size='mobile'] .browser-ratio {
  10070. width: 500px;
  10071. }
  10072. }
  10073. /* stylelint-enable media-query-no-invalid */
  10074. .browser-body {
  10075. flex: 1;
  10076. position: relative;
  10077. overflow: hidden;
  10078. padding: 20px;
  10079. &-inner {
  10080. position: absolute;
  10081. left: 0;
  10082. top: 0;
  10083. width: 100%;
  10084. height: 100%;
  10085. }
  10086. .browser-website {
  10087. position: relative;
  10088. height: 100%;
  10089. transform-origin: right bottom;
  10090. transition: 500ms;
  10091. overflow: hidden;
  10092. &.is-picking {
  10093. cursor:
  10094. image_url('/assets/images/eyedropper.gif') 0 15,
  10095. auto;
  10096. }
  10097. &-background {
  10098. position: absolute;
  10099. top: 0;
  10100. left: 0;
  10101. width: 100%;
  10102. height: 100%;
  10103. object-fit: cover;
  10104. object-position: left top;
  10105. }
  10106. }
  10107. }
  10108. .browser-head {
  10109. display: flex;
  10110. padding: 10px;
  10111. border-bottom: 1px solid var(--border);
  10112. .browser-input {
  10113. position: relative;
  10114. flex: 1;
  10115. @include bidi-style(margin-right, 10px, margin-left, 0);
  10116. input {
  10117. min-width: 0;
  10118. @include bidi-style(padding-right, 40px, padding-left, 12px);
  10119. &.is-loading + .loading.icon {
  10120. display: block;
  10121. }
  10122. }
  10123. .loading.icon {
  10124. position: absolute;
  10125. @include bidi-style(right, 11px, left, auto);
  10126. top: 10px;
  10127. display: none;
  10128. }
  10129. }
  10130. .help-block {
  10131. margin-bottom: -3px;
  10132. }
  10133. }
  10134. .browser-inline-form {
  10135. width: 300px;
  10136. &.no-css {
  10137. all: initial;
  10138. * {
  10139. all: unset;
  10140. }
  10141. input,
  10142. textarea,
  10143. button {
  10144. padding: 2px;
  10145. background: var(--background-secondary);
  10146. border: 1px solid;
  10147. font: 400 11px system-ui;
  10148. }
  10149. button {
  10150. padding: 2px 6px 3px;
  10151. background-color: buttonface;
  10152. border: 2px outset buttonface;
  10153. }
  10154. }
  10155. }
  10156. .chat-demo {
  10157. .zammad-chat {
  10158. position: absolute;
  10159. transform-origin: right bottom;
  10160. transition: 500ms;
  10161. user-select: none;
  10162. will-change: transform;
  10163. &.is-fullscreen {
  10164. right: 0;
  10165. width: 100%;
  10166. height: 100%;
  10167. border-radius: 0 !important;
  10168. .zammad-chat-header {
  10169. border-radius: 0 !important;
  10170. box-shadow:
  10171. 0 -1px rgba(0, 0, 0, 0.1),
  10172. 0 -1px rgba(0, 0, 0, 0.1) inset,
  10173. 0 1px 1px rgba(0, 0, 0, 0.13);
  10174. }
  10175. .zammad-chat-controls {
  10176. border-radius: 0 0 5px 5px;
  10177. }
  10178. }
  10179. &.no-transition {
  10180. transition: none;
  10181. }
  10182. .zammad-chat-welcome {
  10183. display: block !important;
  10184. }
  10185. .zammad-chat-header-icon-open {
  10186. display: inline !important;
  10187. }
  10188. .zammad-chat-agent-status,
  10189. .zammad-chat-header-icon-close,
  10190. .zammad-chat-agent {
  10191. display: none !important;
  10192. }
  10193. &.is-open {
  10194. .zammad-chat-agent {
  10195. display: block !important;
  10196. }
  10197. .zammad-chat-header-icon-close,
  10198. .zammad-chat-agent-status {
  10199. display: inline-block !important;
  10200. }
  10201. .zammad-chat-welcome,
  10202. .zammad-chat-header-icon-open {
  10203. display: none !important;
  10204. }
  10205. }
  10206. &.is-fullscreen {
  10207. height: 100%;
  10208. .zammad-chat-controls {
  10209. border-radius: 0 0 5px 5px;
  10210. }
  10211. }
  10212. }
  10213. .zammad-chat-header {
  10214. pointer-events: auto;
  10215. }
  10216. .chat-demo-animationHolder {
  10217. position: absolute;
  10218. bottom: 0;
  10219. left: 0;
  10220. width: 100%;
  10221. height: 100%;
  10222. animation: slide-up 500ms;
  10223. pointer-events: none;
  10224. }
  10225. }
  10226. @keyframes slide-up {
  10227. from {
  10228. transform: translateY(100%);
  10229. }
  10230. }
  10231. .todo {
  10232. position: relative;
  10233. display: block;
  10234. &:not(a) {
  10235. cursor: default !important;
  10236. }
  10237. .icon {
  10238. fill: var(--ghost-color) !important;
  10239. vertical-align: middle;
  10240. margin: -2px 3px 0 0;
  10241. }
  10242. &.is-done .icon {
  10243. fill: var(--supergood-color) !important;
  10244. }
  10245. }
  10246. .columnSelect {
  10247. height: 234px;
  10248. display: flex;
  10249. padding: 0;
  10250. line-height: 22px;
  10251. &-shadow {
  10252. display: none;
  10253. }
  10254. &-column--selected {
  10255. flex: 1 1 66%;
  10256. overflow: auto;
  10257. -webkit-overflow-scrolling: touch;
  10258. padding: 7px;
  10259. }
  10260. &-column--sidebar {
  10261. flex-basis: 33%;
  10262. flex-shrink: 1;
  10263. border-left: 1px solid var(--border);
  10264. background: var(--background-modifier-accent);
  10265. display: flex;
  10266. flex-direction: column;
  10267. min-width: 0;
  10268. .columnSelect-option:hover {
  10269. background: var(--background-modifier-hover);
  10270. }
  10271. }
  10272. &-pool {
  10273. flex: 1 1 auto;
  10274. overflow: auto;
  10275. -webkit-overflow-scrolling: touch;
  10276. padding: 7px;
  10277. }
  10278. &-option {
  10279. @extend %clickable;
  10280. padding: 0 5px;
  10281. border-radius: 1px;
  10282. overflow: hidden;
  10283. white-space: nowrap;
  10284. text-overflow: ellipsis;
  10285. &:hover {
  10286. background: var(--background-modifier-hover);
  10287. }
  10288. }
  10289. &-group-label {
  10290. opacity: 0.5;
  10291. .filter-active & {
  10292. display: none;
  10293. }
  10294. ~ .columnSelect-option {
  10295. padding-left: 10px;
  10296. }
  10297. }
  10298. .is-hidden,
  10299. .is-filtered {
  10300. display: none;
  10301. }
  10302. &-search {
  10303. position: relative;
  10304. .icon-magnifier {
  10305. left: 7px;
  10306. top: 5px;
  10307. position: absolute;
  10308. opacity: 0.3;
  10309. }
  10310. &-clear {
  10311. position: absolute;
  10312. right: 0;
  10313. top: 0;
  10314. padding: 6px 7px 4px;
  10315. @extend %clickable;
  10316. line-height: 1;
  10317. .icon {
  10318. opacity: 0.6;
  10319. }
  10320. }
  10321. input {
  10322. width: 100%;
  10323. padding: 2px 30px 1px;
  10324. border: none;
  10325. outline: none;
  10326. border-bottom: 1px solid var(--border);
  10327. background: none;
  10328. }
  10329. }
  10330. }
  10331. .pulsate-animation {
  10332. animation: pulsate 667ms ease-in-out infinite alternate;
  10333. }
  10334. .richtext-content {
  10335. overflow-x: auto;
  10336. &[contenteditable] {
  10337. &,
  10338. &:hover,
  10339. &:focus {
  10340. background: none;
  10341. }
  10342. }
  10343. h1,
  10344. h2,
  10345. h3,
  10346. h4 {
  10347. &:first-child {
  10348. margin-top: 6px;
  10349. }
  10350. }
  10351. table,
  10352. pre,
  10353. blockquote {
  10354. margin-bottom: 16px;
  10355. }
  10356. & > p,
  10357. & > table,
  10358. & > pre,
  10359. & > blockquote {
  10360. &:first-child {
  10361. margin-top: 6px;
  10362. }
  10363. &:last-child {
  10364. margin-bottom: 6px;
  10365. }
  10366. }
  10367. table {
  10368. table-layout: auto;
  10369. width: 100%;
  10370. overflow: auto;
  10371. -webkit-overflow-scrolling: touch;
  10372. word-break: keep-all;
  10373. col {
  10374. width: auto;
  10375. }
  10376. span,
  10377. p,
  10378. a {
  10379. overflow-wrap: anywhere;
  10380. }
  10381. }
  10382. blockquote {
  10383. padding: 8px 12px;
  10384. border-left: 5px solid var(--background-primary-alt);
  10385. }
  10386. code {
  10387. border: none;
  10388. white-space: pre-wrap;
  10389. }
  10390. pre {
  10391. padding: 12px 15px;
  10392. font-size: 13px;
  10393. line-height: 1.45;
  10394. background: var(--background-modifier-accent-light);
  10395. white-space: pre-wrap;
  10396. border-radius: 3px;
  10397. border: none;
  10398. overflow: auto;
  10399. -webkit-overflow-scrolling: touch;
  10400. }
  10401. hr {
  10402. margin-top: 6px;
  10403. margin-bottom: 6px;
  10404. border: 0;
  10405. border-top: 1px solid var(--background-modifier-border);
  10406. }
  10407. @include dark {
  10408. // remove custom backgrounds and colors
  10409. [style*='background'] {
  10410. background: none !important;
  10411. }
  10412. [style*='color'] {
  10413. color: inherit !important;
  10414. }
  10415. }
  10416. }
  10417. .detail-search-header {
  10418. margin: 20px 0 32px;
  10419. }
  10420. .batch-overlay {
  10421. @extend .fit, .zIndex-1;
  10422. color: var(--text-inverted);
  10423. text-transform: uppercase;
  10424. text-align: center;
  10425. letter-spacing: 0.07em;
  10426. font-size: 0.95em;
  10427. line-height: 1.3;
  10428. display: none;
  10429. will-change: display;
  10430. cursor: grabbing;
  10431. overflow: hidden;
  10432. user-select: none;
  10433. &.is-visible {
  10434. display: block;
  10435. }
  10436. &-backdrop {
  10437. @extend .fit;
  10438. background: hsla(231, 20%, 8%, 0.8);
  10439. opacity: 0;
  10440. will-change: opacity;
  10441. }
  10442. &-circle {
  10443. margin: 35px auto;
  10444. background: hsl(207, 7%, 29%);
  10445. border-radius: 100%;
  10446. border: 4px solid var(--background-secondary);
  10447. width: 140px;
  10448. height: 140px;
  10449. padding: 20px 0;
  10450. display: flex;
  10451. flex-direction: column;
  10452. justify-content: space-around;
  10453. align-items: center;
  10454. position: absolute;
  10455. left: 0;
  10456. right: 0;
  10457. will-change: transform, opacity;
  10458. visibility: hidden;
  10459. &--top {
  10460. top: 0;
  10461. }
  10462. &--bottom {
  10463. bottom: 0;
  10464. }
  10465. .icon {
  10466. fill: currentColor;
  10467. opacity: 1;
  10468. }
  10469. &-label {
  10470. width: 80%;
  10471. margin: 10px 0;
  10472. }
  10473. }
  10474. &-cancel {
  10475. background: hsla(0, 0%, 100%, 0.21);
  10476. background-clip: padding-box;
  10477. border: 2px dashed hsla(0, 0%, 100%, 0.3);
  10478. border-radius: 8px;
  10479. padding: 28px;
  10480. margin: auto 200px;
  10481. position: absolute;
  10482. left: 0;
  10483. right: 0;
  10484. max-height: 100px;
  10485. visibility: hidden;
  10486. will-change: opacity;
  10487. display: flex;
  10488. justify-content: center;
  10489. align-items: center;
  10490. }
  10491. &-box {
  10492. background: hsl(232, 9%, 17%);
  10493. width: 100%;
  10494. position: absolute;
  10495. visibility: hidden;
  10496. will-change: opacity, transition;
  10497. &-inner {
  10498. margin: 37px 25px;
  10499. display: flex;
  10500. flex-wrap: wrap;
  10501. justify-content: center;
  10502. overflow: hidden;
  10503. }
  10504. }
  10505. &-assign {
  10506. padding-bottom: 50px;
  10507. bottom: -50px; // extra space for bounce animation
  10508. .batch-overlay-box-inner {
  10509. max-height: 40vh;
  10510. }
  10511. &-group {
  10512. box-shadow: 0 0 35px hsla(0, 0%, 0%, 0.5);
  10513. .batch-overlay-box-inner {
  10514. margin-top: 42px;
  10515. margin-bottom: 10px;
  10516. }
  10517. &-name {
  10518. position: absolute;
  10519. left: 0;
  10520. right: 0;
  10521. top: 0;
  10522. padding: 11px 13px 8px;
  10523. line-height: 1;
  10524. position: absolute;
  10525. background: hsl(233, 10%, 15%);
  10526. }
  10527. }
  10528. &-entry {
  10529. padding: 13px;
  10530. width: 116px;
  10531. height: 155px;
  10532. &.is-hovered {
  10533. .avatar {
  10534. border-color: var(--highlight);
  10535. transform: scale(1.05);
  10536. }
  10537. }
  10538. .avatar {
  10539. border: 4px solid hsl(231, 5%, 30%);
  10540. margin-bottom: 10px;
  10541. box-sizing: content-box;
  10542. transition: transform 120ms;
  10543. cursor: inherit;
  10544. z-index: 1;
  10545. }
  10546. &-name {
  10547. max-height: 34px;
  10548. overflow: hidden;
  10549. display: -webkit-box;
  10550. -webkit-box-orient: vertical;
  10551. -webkit-line-clamp: 2;
  10552. overflow: hidden;
  10553. word-break: break-word;
  10554. }
  10555. &-detail {
  10556. color: gray;
  10557. }
  10558. }
  10559. }
  10560. &-macro {
  10561. padding-top: 50px;
  10562. top: -50px; // extra space for bounce animation
  10563. .batch-overlay-box-inner {
  10564. max-height: 55vh;
  10565. margin: 24px 12px;
  10566. }
  10567. &-entry {
  10568. margin: 13px;
  10569. border: 4px solid hsl(231, 5%, 30%);
  10570. background: hsl(233, 9%, 24%);
  10571. border-radius: 100%;
  10572. height: 120px;
  10573. width: 120px;
  10574. padding: 13px 13px 10px;
  10575. display: flex;
  10576. align-items: center;
  10577. justify-content: center;
  10578. font-size: 0.9em;
  10579. &.is-hovered {
  10580. border-color: var(--highlight);
  10581. transform: scale(1.05);
  10582. }
  10583. &.small {
  10584. @include small-desktop {
  10585. height: 80px;
  10586. width: 80px;
  10587. padding: 11px 11px 8px;
  10588. }
  10589. }
  10590. }
  10591. &-error-message {
  10592. margin: 13px;
  10593. height: 120px;
  10594. padding: 13px 13px 10px;
  10595. display: flex;
  10596. align-items: center;
  10597. justify-content: center;
  10598. font-size: 0.9em;
  10599. }
  10600. }
  10601. }
  10602. .batch-dragger {
  10603. position: absolute;
  10604. left: 0;
  10605. top: 0;
  10606. pointer-events: none;
  10607. width: 250px;
  10608. height: 40px;
  10609. will-change: transform;
  10610. @extend .zIndex-10;
  10611. &-item {
  10612. position: absolute;
  10613. left: 0;
  10614. width: 100%;
  10615. background: var(--background-highlight);
  10616. border-radius: 4px;
  10617. display: flex;
  10618. align-items: center;
  10619. padding: 11px 0 9px 11px;
  10620. box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28);
  10621. will-change: transform;
  10622. a {
  10623. color: inherit;
  10624. }
  10625. td:not(:first-child) {
  10626. display: block;
  10627. padding: 0 12px;
  10628. white-space: nowrap;
  10629. text-overflow: ellipsis;
  10630. overflow: hidden;
  10631. flex-shrink: 0;
  10632. &:nth-child(3) {
  10633. flex-shrink: 1;
  10634. }
  10635. &:nth-child(n + 4) {
  10636. display: none;
  10637. }
  10638. }
  10639. .checkbox-replacement > .icon,
  10640. .radio-replacement > .icon {
  10641. fill: none;
  10642. }
  10643. }
  10644. &-counter {
  10645. position: absolute;
  10646. right: -8px;
  10647. bottom: -8px;
  10648. width: 25px;
  10649. height: 25px;
  10650. border-radius: 99px;
  10651. z-index: 1;
  10652. color: var(--text-inverted);
  10653. background: var(--highlight);
  10654. display: flex;
  10655. align-items: center;
  10656. justify-content: center;
  10657. box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.28);
  10658. will-change: transform;
  10659. &:empty {
  10660. display: none;
  10661. }
  10662. }
  10663. }
  10664. /*
  10665. -------------
  10666. breadcrumbs
  10667. -------------
  10668. */
  10669. .breadcrumbs {
  10670. display: flex;
  10671. align-items: center;
  10672. min-width: 88px;
  10673. @include phone {
  10674. overflow: hidden;
  10675. }
  10676. &-menu {
  10677. display: flex;
  10678. @include ltr(margin-left, auto);
  10679. @include rtl(margin-right, auto);
  10680. @include bidi-style(padding-left, 20px, padding-right, 0);
  10681. @include phone {
  10682. @include bidi-style(padding-left, 10px, padding-right, 0);
  10683. }
  10684. }
  10685. }
  10686. .breadcrumb {
  10687. position: relative;
  10688. padding-top: 11px;
  10689. padding-bottom: 8px;
  10690. @include ltr(padding-right, 21px);
  10691. @include ltr(padding-left, 13px);
  10692. @include rtl(padding-left, 21px);
  10693. @include rtl(padding-right, 13px);
  10694. color: inherit;
  10695. cursor: pointer;
  10696. @extend .u-textTruncate;
  10697. @include phone {
  10698. flex-shrink: 0;
  10699. }
  10700. &::before,
  10701. &::after {
  10702. content: '';
  10703. position: absolute;
  10704. width: 1px;
  10705. height: 50%;
  10706. background: currentColor;
  10707. opacity: 0.33;
  10708. @include ltr(right, 0);
  10709. @include rtl(left, 0);
  10710. top: 0;
  10711. transform-origin: bottom;
  10712. @include ltr(transform, rotate(-37deg));
  10713. @include rtl(transform, rotate(37deg));
  10714. }
  10715. &::after {
  10716. top: 50%;
  10717. transform-origin: top;
  10718. @include ltr(transform, rotate(37deg));
  10719. @include rtl(transform, rotate(-37deg));
  10720. }
  10721. &:last-child {
  10722. &::before,
  10723. &::after {
  10724. display: none;
  10725. }
  10726. }
  10727. .modified-icon {
  10728. @include bidi-style(margin-right, 3px, margin-left, 0);
  10729. display: inline-block;
  10730. vertical-align: middle;
  10731. line-height: 1;
  10732. margin-top: -3px;
  10733. }
  10734. &-icon {
  10735. fill: currentColor;
  10736. width: 20px;
  10737. height: 20px;
  10738. object-fit: contain;
  10739. }
  10740. .modified-icon-modifier {
  10741. fill: var(--background-primary-alt);
  10742. }
  10743. }
  10744. /*
  10745. ---------------------
  10746. iconfont icon picker
  10747. ---------------------
  10748. */
  10749. .icon_picker {
  10750. .dropdown-menu {
  10751. max-height: 500px;
  10752. width: 420px;
  10753. min-width: 0;
  10754. overflow-y: auto;
  10755. }
  10756. .controls {
  10757. position: relative;
  10758. }
  10759. &-shadow {
  10760. display: none;
  10761. }
  10762. .dropdown-grid {
  10763. &:empty {
  10764. padding: 0;
  10765. & + .dropdown-filter-placeholder {
  10766. display: block;
  10767. }
  10768. }
  10769. li:hover:not(.is-active) {
  10770. background: none;
  10771. }
  10772. .icon {
  10773. width: 40px;
  10774. line-height: 40px;
  10775. text-align: center;
  10776. }
  10777. }
  10778. .dropdown-filter-placeholder {
  10779. display: none;
  10780. padding: 10px;
  10781. text-align: center;
  10782. text-rendering: auto;
  10783. font-feature-settings: 'liga';
  10784. -webkit-font-smoothing: antialiased;
  10785. -moz-osx-font-smoothing: grayscale;
  10786. transition: letter-spacing 200ms;
  10787. cursor: default;
  10788. line-height: 40px;
  10789. &:hover {
  10790. letter-spacing: -2px;
  10791. }
  10792. span {
  10793. display: none;
  10794. &.is-active {
  10795. display: block;
  10796. }
  10797. }
  10798. }
  10799. .dropdown-filter {
  10800. background: none;
  10801. width: 100%;
  10802. background: var(--background-modifier-accent);
  10803. border: none;
  10804. padding: 13px 20px 11px;
  10805. outline: none;
  10806. }
  10807. .dropdown-grid {
  10808. display: flex;
  10809. flex-wrap: wrap;
  10810. padding: 10px;
  10811. margin: 0;
  10812. li {
  10813. list-style: none;
  10814. cursor: pointer;
  10815. user-select: none;
  10816. border-radius: 2px;
  10817. &:hover,
  10818. &.is-active {
  10819. background: var(--highlight);
  10820. }
  10821. }
  10822. }
  10823. }
  10824. /*
  10825. --------------
  10826. color picker
  10827. --------------
  10828. */
  10829. .color {
  10830. .controls {
  10831. position: relative;
  10832. }
  10833. .controls-button {
  10834. align-self: stretch;
  10835. }
  10836. .controls-button-inner {
  10837. padding: 4px;
  10838. }
  10839. .color-field {
  10840. width: 31px;
  10841. height: 100%;
  10842. position: relative;
  10843. // unparsable color
  10844. &[style='']::before {
  10845. content: '';
  10846. position: absolute;
  10847. left: 10%;
  10848. top: 10%;
  10849. width: 80%;
  10850. height: 80%;
  10851. background: var(--background-primary-alt);
  10852. animation: rotateplane 1.2s infinite ease-in-out;
  10853. }
  10854. }
  10855. }
  10856. .colorpicker {
  10857. &.dropdown-menu {
  10858. box-sizing: content-box;
  10859. width: 380px;
  10860. min-width: 0;
  10861. }
  10862. .open > & {
  10863. display: flex;
  10864. }
  10865. &-hue-saturation {
  10866. flex-grow: 1;
  10867. width: 200px;
  10868. height: 150px;
  10869. margin: 14px;
  10870. @include ltr(margin-right, 0);
  10871. @include rtl(margin-left, 0);
  10872. $i: 0;
  10873. $rainbow: ();
  10874. @while $i <= 360 {
  10875. $rainbow: append($rainbow, unquote('hsl(#{$i},100%,50%)'), comma);
  10876. $i: $i + 60;
  10877. }
  10878. background: linear-gradient(to right, $rainbow);
  10879. position: relative;
  10880. overflow: hidden;
  10881. cursor:
  10882. image_url('/assets/images/colorcircle.gif') 8 8,
  10883. auto;
  10884. user-select: none;
  10885. }
  10886. &-lightness-plane,
  10887. &-saturation-gradient {
  10888. position: absolute;
  10889. left: 0;
  10890. top: 0;
  10891. height: 100%;
  10892. width: 100%;
  10893. }
  10894. &-circle {
  10895. position: absolute;
  10896. left: 0;
  10897. top: 0;
  10898. border: 1px solid black;
  10899. width: 12px;
  10900. height: 12px;
  10901. margin: -6px 0 0 -6px;
  10902. border-radius: 100%;
  10903. }
  10904. &-lightness {
  10905. height: 150px;
  10906. margin: 14px;
  10907. position: relative;
  10908. user-select: none;
  10909. }
  10910. &-hue-plane {
  10911. height: 100%;
  10912. width: 20px;
  10913. background: red;
  10914. }
  10915. &-hue-gradient {
  10916. height: 100%;
  10917. width: 100%;
  10918. background: linear-gradient(white, transparent, black);
  10919. }
  10920. &-slider {
  10921. position: absolute;
  10922. top: 0;
  10923. left: -7px;
  10924. right: -7px;
  10925. &-arrow {
  10926. position: absolute;
  10927. top: 0;
  10928. margin-top: -4px;
  10929. border: 4px solid transparent;
  10930. border-left: 7px solid hsl(240, 8%, 100%);
  10931. border-right: 7px solid hsl(240, 8%, 100%);
  10932. &--left {
  10933. left: 0;
  10934. border-right: none;
  10935. }
  10936. &--right {
  10937. right: 0;
  10938. border-left: none;
  10939. }
  10940. }
  10941. }
  10942. }
  10943. /*
  10944. ----------------
  10945. iconset picker
  10946. ----------------
  10947. */
  10948. .iconset_picker {
  10949. .controls input {
  10950. display: none;
  10951. }
  10952. }
  10953. .icon-sets {
  10954. margin: 0 -10px;
  10955. }
  10956. .icon-set {
  10957. margin: 10px;
  10958. display: flex;
  10959. border: 1px solid var(--border);
  10960. border-radius: 3px;
  10961. &.is-active {
  10962. border-color: var(--border-highlight);
  10963. box-shadow: 0 0 0 3px var(--shadow-highlight);
  10964. }
  10965. &-preview {
  10966. flex-grow: 1;
  10967. display: flex;
  10968. flex-wrap: wrap;
  10969. align-items: center;
  10970. justify-content: center;
  10971. overflow: hidden;
  10972. cursor: pointer;
  10973. user-select: none;
  10974. height: 250px;
  10975. border-radius: 0 3px 3px 0;
  10976. border-left: 1px solid var(--border);
  10977. background: var(--background-primary);
  10978. color: var(--text-muted);
  10979. position: relative;
  10980. }
  10981. &-meta {
  10982. flex-basis: 197px;
  10983. order: -1;
  10984. display: flex;
  10985. flex-direction: column;
  10986. flex-shrink: 0;
  10987. padding: 10px;
  10988. background: var(--background-secondary);
  10989. border-radius: 3px 0 0 3px;
  10990. }
  10991. &-version {
  10992. color: var(--text-muted);
  10993. }
  10994. &-website {
  10995. margin-top: auto;
  10996. display: block;
  10997. }
  10998. .icon {
  10999. width: 50px;
  11000. line-height: 50px;
  11001. text-align: center;
  11002. font-size: 18px;
  11003. &:not(.loading).do-flash {
  11004. animation: iconset-flash 0.7s ease-out;
  11005. }
  11006. }
  11007. }
  11008. @keyframes iconset-flash {
  11009. from {
  11010. background: var(--background-modifier-hover);
  11011. color: var(--text-normal);
  11012. }
  11013. to {
  11014. background: transparent;
  11015. color: inherit;
  11016. }
  11017. }
  11018. /*
  11019. -----------------------------
  11020. generic flex layout classes
  11021. -----------------------------
  11022. */
  11023. .horizontal,
  11024. .vertical,
  11025. .centered {
  11026. display: flex;
  11027. }
  11028. .horizontal.hide,
  11029. .vertical.hide,
  11030. .centered.hide {
  11031. display: none;
  11032. }
  11033. .horizontal {
  11034. flex-direction: row;
  11035. }
  11036. .horizontal.multiline {
  11037. flex-wrap: wrap;
  11038. }
  11039. .horizontal.reverse {
  11040. flex-direction: row-reverse;
  11041. }
  11042. .vertical {
  11043. flex-direction: column;
  11044. }
  11045. .vertical.reverse {
  11046. flex-direction: column-reverse;
  11047. }
  11048. .vertical.stretch > *,
  11049. .horizontal.stretch > * {
  11050. flex: 1;
  11051. }
  11052. .stretch {
  11053. align-self: stretch;
  11054. }
  11055. .relative {
  11056. position: relative;
  11057. }
  11058. .fit {
  11059. position: absolute;
  11060. top: 0;
  11061. left: 0;
  11062. bottom: 0;
  11063. right: 0;
  11064. }
  11065. body.fit {
  11066. margin: 0;
  11067. }
  11068. .scrollable {
  11069. overflow: auto;
  11070. -webkit-overflow-scrolling: touch;
  11071. }
  11072. .flex {
  11073. flex: 1;
  11074. }
  11075. .margin-bottom-5 {
  11076. margin-bottom: 5px;
  11077. }
  11078. /*
  11079. Firefox minimum content bugfix
  11080. https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
  11081. "By default, flex items won’t shrink below their minimum
  11082. content size (the length of the longest word or fixed-size element).
  11083. To change this, set the min-width or min-height property."
  11084. */
  11085. .flex-shrink-horizontal {
  11086. min-width: 0;
  11087. }
  11088. .flex-full {
  11089. flex: 1 1 100%;
  11090. }
  11091. .flex-auto {
  11092. flex: 1 1 auto;
  11093. }
  11094. .flex-shrink {
  11095. flex: 0 1 auto;
  11096. }
  11097. .flex-no-shrink {
  11098. flex-shrink: 0;
  11099. }
  11100. .flex-none {
  11101. flex: none;
  11102. }
  11103. .flex-1 {
  11104. flex: 1;
  11105. }
  11106. .flex-2 {
  11107. flex: 2;
  11108. }
  11109. .flex-3 {
  11110. flex: 3;
  11111. }
  11112. .justify-start {
  11113. justify-content: flex-start;
  11114. }
  11115. .justified {
  11116. justify-content: center;
  11117. }
  11118. .justify-end {
  11119. justify-content: flex-end;
  11120. }
  11121. .justify-between {
  11122. justify-content: space-between;
  11123. }
  11124. .start {
  11125. align-items: flex-start;
  11126. }
  11127. .center {
  11128. align-items: center;
  11129. }
  11130. .baseline {
  11131. align-items: baseline;
  11132. }
  11133. .centered {
  11134. align-items: center;
  11135. justify-content: center;
  11136. }
  11137. .end {
  11138. align-items: flex-end;
  11139. }
  11140. .self-start {
  11141. align-self: start;
  11142. }
  11143. .self-end {
  11144. align-self: end;
  11145. }
  11146. .span-width {
  11147. flex-basis: 100%;
  11148. }
  11149. .two-columns,
  11150. .three-columns,
  11151. .wrap {
  11152. flex-wrap: wrap;
  11153. }
  11154. .two-columns,
  11155. .three-columns {
  11156. @include phone {
  11157. display: block;
  11158. }
  11159. }
  11160. .two-columns > .column {
  11161. width: 50%;
  11162. @include phone {
  11163. width: auto;
  11164. }
  11165. }
  11166. .three-columns > .column {
  11167. width: 33.33%;
  11168. @include phone {
  11169. width: auto;
  11170. }
  11171. }
  11172. .align-left {
  11173. @include bidi-style(margin-right, auto, margin-left, 0);
  11174. }
  11175. .align-right {
  11176. @include bidi-style(margin-left, auto, margin-right, 0);
  11177. }
  11178. .space-left {
  11179. @include bidi-style(margin-left, 10px, margin-right, 0);
  11180. }
  11181. .space-right {
  11182. @include bidi-style(margin-right, 10px, margin-left, 0);
  11183. }
  11184. .half-space-left {
  11185. @include bidi-style(margin-left, 5px, margin-right, 0);
  11186. }
  11187. .half-space-right {
  11188. @include bidi-style(margin-right, 5px, margin-left, 0);
  11189. }
  11190. .align-center {
  11191. margin-left: auto;
  11192. margin-right: auto;
  11193. }
  11194. .flex-space-after {
  11195. @include bidi-style(margin-right, auto, margin-left, 0);
  11196. }
  11197. .flex-space-before {
  11198. @include bidi-style(margin-left, auto, margin-right, 0);
  11199. }
  11200. .half-spacer {
  11201. width: 5px;
  11202. height: 5px;
  11203. }
  11204. .spacer {
  11205. width: 10px;
  11206. height: 10px;
  11207. }
  11208. .double-spacer {
  11209. width: 20px;
  11210. height: 20px;
  11211. }
  11212. .flex-spacer {
  11213. flex: 1;
  11214. }
  11215. span.is-disabled {
  11216. cursor: not-allowed;
  11217. opacity: 0.5;
  11218. }
  11219. .inline-label + .scheduled-widget {
  11220. margin-left: 18px;
  11221. }
  11222. .scheduled-widget {
  11223. display: flex;
  11224. align-items: center;
  11225. padding: 5px 5px 5px 10px;
  11226. border: 1px solid rgba(0, 0, 0, 0.1);
  11227. border-radius: 4px;
  11228. &[data-state='published'] {
  11229. color: var(--supergood-color);
  11230. border-color: currentColor;
  11231. .btn {
  11232. border-color: currentColor;
  11233. }
  11234. }
  11235. &[data-state='archived'] {
  11236. border-color: var(--ghost-color);
  11237. .btn {
  11238. border-color: var(--ghost-color);
  11239. }
  11240. }
  11241. &[data-state='internal'] {
  11242. color: var(--highlight);
  11243. border-color: currentColor;
  11244. .btn {
  11245. border-color: currentColor;
  11246. }
  11247. }
  11248. .help-text & {
  11249. margin-top: 4px;
  11250. }
  11251. .icon {
  11252. color: inherit;
  11253. fill: currentColor;
  11254. vertical-align: middle;
  11255. }
  11256. &-label {
  11257. margin: 0 10px 0 6px;
  11258. }
  11259. .icon-diagonal-cross {
  11260. width: 10px;
  11261. height: 10px;
  11262. }
  11263. .btn {
  11264. color: inherit;
  11265. }
  11266. }
  11267. .knowledge-base {
  11268. &-navigation {
  11269. display: flex;
  11270. align-items: center;
  11271. color: var(--interactive-muted);
  11272. background: var(--background-primary-alt);
  11273. border-bottom: 1px solid var(--border);
  11274. padding: 7px;
  11275. @include phone {
  11276. flex-shrink: 0;
  11277. overflow: auto;
  11278. -webkit-overflow-scrolling: touch;
  11279. }
  11280. .breadcrumb:not(:first-child) .breadcrumb-icon {
  11281. width: 16px;
  11282. height: 16px;
  11283. }
  11284. }
  11285. &-body {
  11286. position: relative;
  11287. overflow-x: hidden;
  11288. @include phone {
  11289. flex-direction: column-reverse;
  11290. overflow: visible;
  11291. }
  11292. }
  11293. &-sidebar {
  11294. position: absolute;
  11295. @include ltr(right, 0);
  11296. @include rtl(left, 0);
  11297. top: 0;
  11298. width: 280px;
  11299. height: 100%;
  11300. overflow: auto;
  11301. -webkit-overflow-scrolling: touch;
  11302. transition: transform 500ms;
  11303. @include bidi-style(
  11304. border-left,
  11305. 1px solid var(--border),
  11306. border-right,
  11307. none
  11308. );
  11309. @include phone {
  11310. width: auto;
  11311. position: static;
  11312. @include bidi-style(border-left, none, border-right, none);
  11313. border-top: 1px solid var(--border);
  11314. overflow: visible;
  11315. }
  11316. @include desktop {
  11317. width: 28%;
  11318. }
  11319. &.hidden {
  11320. display: block !important;
  11321. visibility: visible !important;
  11322. @include ltr(transform, translateX(100%));
  11323. @include rtl(transform, translateX(-100%));
  11324. @include phone {
  11325. transform: none !important;
  11326. display: none !important;
  11327. }
  11328. + .knowledge-base-main {
  11329. @include ltr(margin-right, 0);
  11330. @include rtl(margin-left, 0);
  11331. }
  11332. }
  11333. h2 {
  11334. font-size: 17px;
  11335. line-height: 1;
  11336. }
  11337. }
  11338. &-main {
  11339. width: 100%;
  11340. @include ltr(transition, margin-right 500ms);
  11341. @include ltr(margin-right, 280px);
  11342. @include rtl(transition, margin-left 500ms);
  11343. @include rtl(margin-left, 280px);
  11344. @include phone {
  11345. margin: 0 0 10px !important;
  11346. }
  11347. @include desktop {
  11348. @include ltr(margin-right, 28%);
  11349. @include rtl(margin-left, 28%);
  11350. }
  11351. }
  11352. form {
  11353. flex-shrink: 0;
  11354. }
  11355. .richtext-content {
  11356. word-break: break-word;
  11357. word-wrap: anywhere;
  11358. }
  11359. .page-header {
  11360. margin: 1px 0 3px;
  11361. flex-shrink: 0;
  11362. }
  11363. }
  11364. .modal-manage-attachments {
  11365. input:focus + label {
  11366. text-decoration: none;
  11367. }
  11368. }
  11369. .modal-knowledge-base-server-snippet {
  11370. label.radio-replacement:first-child {
  11371. padding-left: 0;
  11372. }
  11373. }
  11374. .container {
  11375. max-width: 960px;
  11376. width: 100%;
  11377. margin: 20px auto;
  11378. }
  11379. .sections {
  11380. list-style: none;
  11381. padding: 0;
  11382. margin: 0 -10px;
  11383. &:not(:empty) + &:not(:empty) {
  11384. border-top: 1px solid var(--border);
  11385. margin-top: 20px;
  11386. padding-top: 20px;
  11387. }
  11388. &--grid {
  11389. display: flex;
  11390. flex-wrap: wrap;
  11391. .section {
  11392. a {
  11393. padding-bottom: 72%;
  11394. position: relative;
  11395. line-height: 1.3;
  11396. }
  11397. [data-font] {
  11398. font-size: 60px;
  11399. }
  11400. .modified-icon {
  11401. margin: 10px 0 20px;
  11402. }
  11403. &--subsection {
  11404. display: none;
  11405. }
  11406. &-inner {
  11407. position: absolute;
  11408. padding: 10px;
  11409. left: 0;
  11410. top: 0;
  11411. right: 0;
  11412. bottom: 0;
  11413. align-items: center;
  11414. justify-content: center;
  11415. flex-direction: column;
  11416. text-align: center;
  11417. .title {
  11418. display: -webkit-box;
  11419. overflow: auto;
  11420. -webkit-box-orient: vertical;
  11421. -webkit-line-clamp: 5;
  11422. }
  11423. }
  11424. }
  11425. &[data-size='medium'] {
  11426. .section {
  11427. width: 25%;
  11428. @include phone {
  11429. width: 100%;
  11430. }
  11431. a {
  11432. font-size: 14px;
  11433. }
  11434. [data-font] {
  11435. font-size: 42px;
  11436. }
  11437. .modified-icon-modifier {
  11438. width: 18px;
  11439. height: 18px;
  11440. margin: 0 -6px -2px 0;
  11441. }
  11442. }
  11443. }
  11444. &[data-size='large'] {
  11445. .section {
  11446. width: 33.33%;
  11447. @include phone {
  11448. width: 100%;
  11449. }
  11450. a {
  11451. font-size: 15px;
  11452. }
  11453. .modified-icon-modifier {
  11454. width: 22.5px;
  11455. height: 22.5px;
  11456. margin: 0 -8px -5px 0;
  11457. }
  11458. }
  11459. }
  11460. }
  11461. &--list {
  11462. .section-detail {
  11463. margin-left: 0.2em;
  11464. }
  11465. }
  11466. }
  11467. .section {
  11468. &.kb-item--invisible {
  11469. opacity: 0.5;
  11470. }
  11471. &.kb-item--missing-translation,
  11472. &.kb-item--missing-translation:active,
  11473. &.kb-item--missing-translation:focus {
  11474. color: hsl(45, 98%, 63%);
  11475. }
  11476. a {
  11477. display: block;
  11478. text-decoration: none;
  11479. color: inherit;
  11480. }
  11481. &-title {
  11482. color: #444a4f;
  11483. }
  11484. &-detail {
  11485. color: #b4b7b9;
  11486. }
  11487. }
  11488. .section-inner {
  11489. position: relative;
  11490. display: flex;
  11491. align-items: flex-start;
  11492. padding: 10px 14px;
  11493. margin: 10px;
  11494. background: var(--background-secondary);
  11495. border-radius: 3px;
  11496. border: 1px solid var(--border);
  11497. box-shadow: var(--elevation-low);
  11498. @include phone {
  11499. margin: 5px;
  11500. }
  11501. &:active {
  11502. box-shadow: none;
  11503. }
  11504. &-title {
  11505. font-weight: 500;
  11506. font-size: 15px;
  11507. line-height: 1.15;
  11508. }
  11509. &-date {
  11510. display: inline;
  11511. color: hsl(0, 0%, 75%);
  11512. &::after {
  11513. content: ' — ';
  11514. color: var(--text-normal);
  11515. }
  11516. &:only-child::after {
  11517. content: '';
  11518. }
  11519. }
  11520. &-detail {
  11521. display: block;
  11522. margin-top: 5px;
  11523. }
  11524. &-icon {
  11525. flex-shrink: 0;
  11526. vertical-align: middle;
  11527. &-holder {
  11528. @include ltr(margin-right, 11px);
  11529. @include rtl(margin-left, 11px);
  11530. margin-top: 1px;
  11531. .nav-pills & {
  11532. @include ltr(margin-right, 7px);
  11533. @include rtl(margin-left, 7px);
  11534. }
  11535. }
  11536. &[data-font] {
  11537. font-size: 16px;
  11538. line-height: 1;
  11539. }
  11540. &.icon {
  11541. fill: currentColor;
  11542. width: 16px;
  11543. height: 16px;
  11544. object-fit: contain;
  11545. object-position: center top;
  11546. }
  11547. }
  11548. em {
  11549. font-style: normal;
  11550. background: hsla(205, 90%, 60%, 0.75);
  11551. }
  11552. }
  11553. .knowledge-base-article {
  11554. &-header {
  11555. text-align: center;
  11556. }
  11557. &-meta {
  11558. display: block;
  11559. text-align: center;
  11560. > * {
  11561. &:first-child {
  11562. text-transform: capitalize;
  11563. }
  11564. &::after {
  11565. content: ' · ';
  11566. }
  11567. &:last-child::after {
  11568. display: none;
  11569. }
  11570. }
  11571. }
  11572. &-body {
  11573. margin-top: 20px;
  11574. background: var(--background-secondary);
  11575. border-radius: 2px;
  11576. padding: 50px 50px 10px;
  11577. border: 1px solid var(--border);
  11578. @include phone {
  11579. padding: 15px 15px 5px;
  11580. }
  11581. }
  11582. &-content {
  11583. margin-bottom: 40px;
  11584. @include phone {
  11585. margin-bottom: 10px;
  11586. }
  11587. }
  11588. &-attachments,
  11589. &-tags,
  11590. &-linked-tickets {
  11591. margin: 0 -30px;
  11592. @include phone {
  11593. margin: 0 -5px;
  11594. }
  11595. }
  11596. .tasks {
  11597. @include bidi-style(margin-left, 7px, margin-right, 0);
  11598. }
  11599. &-tags--container {
  11600. padding: 6px 5px 11px;
  11601. display: flex;
  11602. flex-wrap: wrap;
  11603. .tag {
  11604. margin: 2px;
  11605. display: inline-block;
  11606. background: #0f94d6;
  11607. color: var(--text-inverted);
  11608. border-radius: 999px;
  11609. padding: 2px 12px 1px;
  11610. &:hover {
  11611. background: hsl(200deg, 87%, 34%);
  11612. }
  11613. }
  11614. }
  11615. &-nav {
  11616. display: flex;
  11617. &-link {
  11618. padding: 15px;
  11619. max-width: 50%;
  11620. display: flex;
  11621. align-items: center;
  11622. .knowledge-base-article > & {
  11623. margin-top: -10px;
  11624. }
  11625. .spacer {
  11626. width: 5px;
  11627. }
  11628. .icon {
  11629. flex-shrink: 0;
  11630. fill: currentColor;
  11631. opacity: 1;
  11632. vertical-align: top;
  11633. }
  11634. &--next {
  11635. @include bidi-style(margin-left, auto, margin-right, inherit);
  11636. }
  11637. &-title {
  11638. @extend .u-textTruncate;
  11639. }
  11640. }
  11641. }
  11642. }
  11643. .miller-columns {
  11644. display: flex;
  11645. font-size: 12px;
  11646. border: 1px solid var(--border);
  11647. border-radius: 3px;
  11648. .column {
  11649. list-style: none;
  11650. padding: 0;
  11651. margin: 0;
  11652. flex: 1 1 33%;
  11653. height: 300px;
  11654. overflow: auto;
  11655. -webkit-overflow-scrolling: touch;
  11656. border-right: 1px solid var(--border);
  11657. &:last-child {
  11658. border-right-width: 0;
  11659. }
  11660. &-item {
  11661. display: flex;
  11662. align-items: center;
  11663. padding: 5px 10px;
  11664. cursor: default;
  11665. &:hover {
  11666. background: var(--background-modifier-accent-light);
  11667. }
  11668. &.is-selected {
  11669. background: var(--background-secondary-hover);
  11670. }
  11671. &--has-children {
  11672. @extend %clickable;
  11673. cursor: pointer;
  11674. }
  11675. span {
  11676. @extend .u-textTruncate;
  11677. margin-right: 10px;
  11678. }
  11679. > .icon:first-child,
  11680. [data-font] {
  11681. fill: currentColor;
  11682. margin-right: 8px;
  11683. vertical-align: middle;
  11684. flex-shrink: 0;
  11685. }
  11686. .icon-arrow-right {
  11687. margin-left: auto;
  11688. flex-shrink: 0;
  11689. }
  11690. .btn {
  11691. margin-left: auto;
  11692. }
  11693. }
  11694. }
  11695. }
  11696. .highlight-emulator {
  11697. background-color: highlight;
  11698. }
  11699. .videoWrapper {
  11700. position: relative;
  11701. padding-bottom: 56.25%; /* 16:9 */
  11702. padding-top: 25px;
  11703. height: 0;
  11704. }
  11705. .videoWrapper iframe {
  11706. position: absolute;
  11707. top: 0;
  11708. left: 0;
  11709. width: 100%;
  11710. height: 100%;
  11711. }
  11712. .btn-manage-public-menu-edit {
  11713. margin-top: 0;
  11714. }
  11715. .kb-menu-settings-entry {
  11716. margin-bottom: 12px;
  11717. }
  11718. .text-modules-box {
  11719. max-height: 40vh;
  11720. }
  11721. .sla_times {
  11722. .sla_radio_container {
  11723. padding-top: 0.5em;
  11724. padding-left: 0.5em;
  11725. }
  11726. }
  11727. .calendar-preview {
  11728. .calendar-events {
  11729. margin-top: 12px;
  11730. p {
  11731. margin: 0;
  11732. }
  11733. h2 {
  11734. margin-bottom: 24px;
  11735. }
  11736. h4 {
  11737. margin-bottom: 4px;
  11738. }
  11739. section.description {
  11740. margin: 24px 0 0;
  11741. padding: 4px;
  11742. }
  11743. .event-row {
  11744. display: flex;
  11745. div {
  11746. width: 50%;
  11747. margin-bottom: 4px;
  11748. }
  11749. }
  11750. }
  11751. div.divider {
  11752. margin-top: 18px;
  11753. margin-bottom: 6px;
  11754. border-top: 1px solid #dfdfdf;
  11755. &:last-of-type {
  11756. display: none;
  11757. }
  11758. }
  11759. }
  11760. .reporting {
  11761. .legend > div {
  11762. background: var(--background-secondary) !important;
  11763. }
  11764. .legendColorBox {
  11765. padding-right: 4px;
  11766. }
  11767. }
  11768. .duplicate-ticket-detection {
  11769. position: relative;
  11770. margin-bottom: 0;
  11771. .close {
  11772. position: absolute;
  11773. top: 2px;
  11774. opacity: 0.39;
  11775. @include bidi-style(right, 0, left, 0);
  11776. &:hover {
  11777. opacity: 1;
  11778. }
  11779. svg {
  11780. width: 9px;
  11781. height: 9px;
  11782. }
  11783. }
  11784. h4 {
  11785. text-transform: none;
  11786. font-size: 16px;
  11787. }
  11788. p {
  11789. word-wrap: break-word;
  11790. overflow-wrap: break-word;
  11791. white-space: pre-wrap;
  11792. }
  11793. p,
  11794. ul {
  11795. margin-bottom: 6px;
  11796. }
  11797. .btn {
  11798. font-size: 10px;
  11799. color: var(--text-link);
  11800. background: none;
  11801. }
  11802. }
  11803. .profile-settings-notifications-content {
  11804. .zammad-switch {
  11805. float: left;
  11806. margin-right: 10px;
  11807. }
  11808. .profile-groups-limit-settings {
  11809. min-height: 1px;
  11810. }
  11811. .settings-list {
  11812. margin-bottom: 0;
  11813. }
  11814. .profile-groups-all-unchecked {
  11815. margin-bottom: 10px;
  11816. }
  11817. }
  11818. .profile-two-factor {
  11819. table {
  11820. margin-bottom: 16px;
  11821. }
  11822. .recovery-codes {
  11823. p {
  11824. margin: 12px 0;
  11825. }
  11826. p:last-of-type {
  11827. margin: 0;
  11828. }
  11829. }
  11830. }
  11831. .two-factor-auth {
  11832. .loading {
  11833. display: block;
  11834. margin: 25px auto;
  11835. }
  11836. &-method-buttons {
  11837. display: flex;
  11838. flex-direction: column;
  11839. max-width: 382px;
  11840. margin: 25px auto 0;
  11841. }
  11842. &-method {
  11843. display: flex;
  11844. flex-direction: column;
  11845. margin-bottom: 15px;
  11846. }
  11847. .is-disabled {
  11848. opacity: 0.33;
  11849. }
  11850. .method-form .form-group {
  11851. margin-bottom: 4px;
  11852. }
  11853. .authenticator-app {
  11854. --width: 306px;
  11855. --height: 306px;
  11856. position: relative;
  11857. width: var(--width);
  11858. margin: 0 auto;
  11859. .qr-code-canvas {
  11860. width: var(--width);
  11861. height: var(--height);
  11862. cursor: pointer;
  11863. }
  11864. .secret {
  11865. position: absolute;
  11866. top: 0;
  11867. left: 0;
  11868. width: var(--width);
  11869. height: var(--height);
  11870. background: rgba(0, 0, 0, 0.9);
  11871. color: var(--text-inverted);
  11872. font-family: monospace;
  11873. display: flex;
  11874. justify-content: center;
  11875. align-items: center;
  11876. cursor: pointer;
  11877. }
  11878. }
  11879. }
  11880. .history-row-list {
  11881. padding-left: 10px;
  11882. span {
  11883. text-decoration: underline;
  11884. }
  11885. }
  11886. .btn--split--last.js-securitySign {
  11887. .icon {
  11888. @include ltr(margin, -2px 5px 0 -2px !important);
  11889. @include rtl(margin, -2px -2px 0 5px !important);
  11890. }
  11891. }
  11892. .overlap-x-6 {
  11893. @include ltr(margin-left, -6px);
  11894. @include rtl(margin-right, -6px);
  11895. }
  11896. div.accounted-time-value {
  11897. &-container {
  11898. display: flex;
  11899. flex-direction: column;
  11900. }
  11901. &-row {
  11902. display: flex;
  11903. flex-direction: row;
  11904. }
  11905. &-item {
  11906. padding: 1px;
  11907. flex: 0 0 auto;
  11908. }
  11909. &-item:first-child {
  11910. flex: 1 1 auto;
  11911. white-space: nowrap;
  11912. text-overflow: ellipsis;
  11913. overflow: hidden;
  11914. @include bidi-style(margin-right, 6px, margin-left, 0);
  11915. }
  11916. }