zammad.scss 244 KB

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