ckeditor5.css 385 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745774677477748774977507751775277537754775577567757775877597760776177627763776477657766776777687769777077717772777377747775777677777778777977807781778277837784778577867787778877897790779177927793779477957796779777987799780078017802780378047805780678077808780978107811781278137814781578167817781878197820782178227823782478257826782778287829783078317832783378347835783678377838783978407841784278437844784578467847784878497850785178527853785478557856785778587859786078617862786378647865786678677868786978707871787278737874787578767877787878797880788178827883788478857886788778887889789078917892789378947895789678977898789979007901790279037904790579067907790879097910791179127913791479157916791779187919792079217922792379247925792679277928792979307931793279337934793579367937793879397940794179427943794479457946794779487949795079517952795379547955795679577958795979607961796279637964796579667967796879697970797179727973797479757976797779787979798079817982798379847985798679877988798979907991799279937994799579967997799879998000800180028003800480058006800780088009801080118012801380148015801680178018801980208021802280238024802580268027802880298030803180328033803480358036803780388039804080418042804380448045804680478048804980508051805280538054805580568057805880598060806180628063806480658066806780688069807080718072807380748075807680778078807980808081808280838084808580868087808880898090809180928093809480958096809780988099810081018102810381048105810681078108810981108111811281138114811581168117811881198120812181228123812481258126812781288129813081318132813381348135813681378138813981408141814281438144814581468147814881498150815181528153815481558156815781588159816081618162816381648165816681678168816981708171817281738174817581768177817881798180818181828183818481858186818781888189819081918192819381948195819681978198819982008201820282038204820582068207820882098210821182128213821482158216821782188219822082218222822382248225822682278228822982308231823282338234823582368237823882398240824182428243824482458246824782488249825082518252825382548255825682578258825982608261826282638264826582668267826882698270827182728273827482758276827782788279828082818282828382848285828682878288828982908291829282938294829582968297829882998300830183028303830483058306830783088309831083118312831383148315831683178318831983208321832283238324832583268327832883298330833183328333833483358336833783388339834083418342834383448345834683478348834983508351835283538354835583568357835883598360836183628363836483658366836783688369837083718372837383748375837683778378837983808381838283838384838583868387838883898390839183928393839483958396839783988399840084018402840384048405840684078408840984108411841284138414841584168417841884198420842184228423842484258426842784288429843084318432843384348435843684378438843984408441844284438444844584468447844884498450845184528453845484558456845784588459846084618462846384648465846684678468846984708471847284738474847584768477847884798480848184828483848484858486848784888489849084918492849384948495849684978498849985008501850285038504850585068507850885098510851185128513851485158516851785188519852085218522852385248525852685278528852985308531853285338534853585368537853885398540854185428543854485458546854785488549855085518552855385548555855685578558855985608561856285638564856585668567856885698570857185728573857485758576857785788579858085818582858385848585858685878588858985908591859285938594859585968597859885998600860186028603860486058606860786088609861086118612861386148615861686178618861986208621862286238624862586268627862886298630863186328633863486358636863786388639864086418642864386448645864686478648864986508651865286538654865586568657865886598660866186628663866486658666866786688669867086718672867386748675867686778678867986808681868286838684868586868687868886898690869186928693869486958696869786988699870087018702870387048705870687078708870987108711871287138714871587168717871887198720872187228723872487258726872787288729873087318732873387348735873687378738873987408741874287438744874587468747874887498750875187528753875487558756875787588759876087618762876387648765876687678768876987708771877287738774877587768777877887798780878187828783878487858786878787888789879087918792879387948795879687978798879988008801880288038804880588068807880888098810881188128813881488158816881788188819882088218822882388248825882688278828882988308831883288338834883588368837883888398840884188428843884488458846884788488849885088518852885388548855885688578858885988608861886288638864886588668867886888698870887188728873887488758876887788788879888088818882888388848885888688878888888988908891889288938894889588968897889888998900890189028903890489058906890789088909891089118912891389148915891689178918891989208921892289238924892589268927892889298930893189328933893489358936893789388939894089418942894389448945894689478948894989508951895289538954895589568957895889598960896189628963896489658966896789688969897089718972897389748975897689778978897989808981898289838984898589868987898889898990899189928993899489958996899789988999900090019002900390049005900690079008900990109011901290139014901590169017901890199020902190229023902490259026902790289029903090319032903390349035903690379038903990409041904290439044904590469047904890499050905190529053905490559056905790589059906090619062906390649065906690679068906990709071907290739074907590769077907890799080908190829083908490859086908790889089909090919092909390949095909690979098909991009101910291039104910591069107910891099110911191129113911491159116911791189119912091219122912391249125912691279128912991309131913291339134913591369137913891399140914191429143914491459146914791489149915091519152915391549155915691579158915991609161916291639164916591669167916891699170917191729173917491759176917791789179918091819182918391849185918691879188918991909191919291939194919591969197919891999200920192029203920492059206920792089209921092119212921392149215921692179218921992209221922292239224922592269227922892299230923192329233923492359236923792389239924092419242924392449245924692479248924992509251925292539254925592569257925892599260926192629263926492659266926792689269927092719272927392749275927692779278927992809281928292839284928592869287928892899290929192929293929492959296929792989299930093019302930393049305930693079308930993109311931293139314931593169317931893199320932193229323932493259326932793289329933093319332933393349335933693379338933993409341934293439344934593469347934893499350935193529353935493559356935793589359936093619362936393649365936693679368936993709371937293739374937593769377937893799380938193829383938493859386938793889389939093919392939393949395939693979398939994009401940294039404940594069407940894099410941194129413941494159416941794189419942094219422942394249425942694279428942994309431943294339434943594369437943894399440944194429443944494459446944794489449945094519452945394549455945694579458945994609461946294639464946594669467946894699470947194729473947494759476947794789479948094819482948394849485948694879488948994909491949294939494949594969497949894999500950195029503950495059506950795089509951095119512951395149515951695179518951995209521952295239524952595269527952895299530953195329533953495359536953795389539954095419542954395449545954695479548954995509551955295539554955595569557955895599560956195629563956495659566956795689569957095719572957395749575957695779578957995809581958295839584958595869587958895899590959195929593959495959596959795989599960096019602960396049605960696079608960996109611961296139614961596169617961896199620962196229623962496259626962796289629963096319632963396349635963696379638963996409641964296439644964596469647964896499650965196529653965496559656965796589659966096619662966396649665966696679668966996709671967296739674967596769677967896799680968196829683968496859686968796889689969096919692969396949695969696979698969997009701970297039704970597069707970897099710971197129713971497159716971797189719972097219722972397249725972697279728972997309731973297339734973597369737973897399740974197429743974497459746974797489749975097519752975397549755975697579758975997609761976297639764976597669767976897699770977197729773977497759776977797789779978097819782978397849785978697879788978997909791979297939794979597969797979897999800980198029803980498059806980798089809981098119812981398149815981698179818981998209821982298239824982598269827982898299830983198329833983498359836983798389839984098419842984398449845984698479848984998509851985298539854985598569857985898599860986198629863986498659866986798689869987098719872987398749875987698779878987998809881988298839884988598869887988898899890989198929893989498959896989798989899990099019902990399049905990699079908990999109911991299139914991599169917991899199920992199229923992499259926992799289929993099319932993399349935993699379938993999409941994299439944994599469947
  1. /**
  2. * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4. */
  5. /*
  6. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8. */
  9. /* Reset */
  10. /*
  11. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  12. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  13. */
  14. /*
  15. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  16. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  17. */
  18. :root {
  19. --ck-color-base-foreground: hsl(0, 0%, 98%);
  20. --ck-color-base-background: hsl(0, 0%, 100%);
  21. --ck-color-base-border: hsl(220, 6%, 81%);
  22. --ck-color-base-action: hsl(104, 50.2%, 42.5%);
  23. --ck-color-base-focus: hsl(209, 92%, 70%);
  24. --ck-color-base-text: hsl(0, 0%, 20%);
  25. --ck-color-base-active: hsl(218.1, 100%, 58%);
  26. --ck-color-base-active-focus: hsl(218.2, 100%, 52.5%);
  27. --ck-color-base-error: hsl(15, 100%, 43%);
  28. /* -- Generic colors ------------------------------------------------------------------------ */
  29. --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%;
  30. --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates));
  31. --ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%);
  32. --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3);
  33. --ck-color-focus-error-shadow: hsla(9,100%,56%,.3);
  34. --ck-color-text: var(--ck-color-base-text);
  35. --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15);
  36. --ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2);
  37. --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
  38. /* -- Buttons ------------------------------------------------------------------------------- */
  39. --ck-color-button-default-background: transparent;
  40. --ck-color-button-default-hover-background: hsl(0, 0%, 94.1%);
  41. --ck-color-button-default-active-background: hsl(0, 0%, 94.1%);
  42. --ck-color-button-default-disabled-background: transparent;
  43. --ck-color-button-on-background: hsl(212, 100%, 97.1%);
  44. --ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%);
  45. --ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%);
  46. --ck-color-button-on-disabled-background: hsl(211, 15%, 95%);
  47. --ck-color-button-on-color: hsl(218.1, 100%, 58%);
  48. --ck-color-button-action-background: var(--ck-color-base-action);
  49. --ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%);
  50. --ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%);
  51. --ck-color-button-action-disabled-background: hsl(104, 44%, 58%);
  52. --ck-color-button-action-text: var(--ck-color-base-background);
  53. --ck-color-button-save: hsl(120, 100%, 27%);
  54. --ck-color-button-cancel: hsl(15, 100%, 43%);
  55. --ck-color-switch-button-off-background: hsl(0, 0%, 57.6%);
  56. --ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%);
  57. --ck-color-switch-button-on-background: var(--ck-color-button-action-background);
  58. --ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%);
  59. --ck-color-switch-button-inner-background: var(--ck-color-base-background);
  60. --ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1);
  61. /* -- Dropdown ------------------------------------------------------------------------------ */
  62. --ck-color-dropdown-panel-background: var(--ck-color-base-background);
  63. --ck-color-dropdown-panel-border: var(--ck-color-base-border);
  64. /* -- Dialog -------------------------------------------------------------------------------- */
  65. --ck-color-dialog-background: var(--ck-custom-background);
  66. --ck-color-dialog-form-header-border: var(--ck-custom-border);
  67. /* -- Input --------------------------------------------------------------------------------- */
  68. --ck-color-input-background: var(--ck-color-base-background);
  69. --ck-color-input-border: var(--ck-color-base-border);
  70. --ck-color-input-error-border: var(--ck-color-base-error);
  71. --ck-color-input-text: var(--ck-color-base-text);
  72. --ck-color-input-disabled-background: hsl(0, 0%, 95%);
  73. --ck-color-input-disabled-border: var(--ck-color-base-border);
  74. --ck-color-input-disabled-text: hsl(0, 0%, 46%);
  75. /* -- List ---------------------------------------------------------------------------------- */
  76. --ck-color-list-background: var(--ck-color-base-background);
  77. --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
  78. --ck-color-list-button-on-background: var(--ck-color-button-on-color);
  79. --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color);
  80. --ck-color-list-button-on-text: var(--ck-color-base-background);
  81. /* -- Panel --------------------------------------------------------------------------------- */
  82. --ck-color-panel-background: var(--ck-color-base-background);
  83. --ck-color-panel-border: var(--ck-color-base-border);
  84. /* -- Toolbar ------------------------------------------------------------------------------- */
  85. --ck-color-toolbar-background: var(--ck-color-base-background);
  86. --ck-color-toolbar-border: var(--ck-color-base-border);
  87. /* -- Tooltip ------------------------------------------------------------------------------- */
  88. --ck-color-tooltip-background: var(--ck-color-base-text);
  89. --ck-color-tooltip-text: var(--ck-color-base-background);
  90. /* -- Engine -------------------------------------------------------------------------------- */
  91. --ck-color-engine-placeholder-text: hsl(0, 0%, 44%);
  92. /* -- Upload -------------------------------------------------------------------------------- */
  93. --ck-color-upload-bar-background: hsl(209, 92%, 70%);
  94. /* -- Link -------------------------------------------------------------------------------- */
  95. --ck-color-link-default: hsl(240, 100%, 47%);
  96. --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1);
  97. --ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3);
  98. /* -- Search result highlight ---------------------------------------------------------------- */
  99. --ck-color-highlight-background: hsl(60, 100%, 50%);
  100. /* -- Generic colors ------------------------------------------------------------------------- */
  101. --ck-color-light-red: hsl(0, 100%, 90%);
  102. }
  103. /*
  104. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  105. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  106. */
  107. :root {
  108. /**
  109. * An opacity value of disabled UI item.
  110. */
  111. --ck-disabled-opacity: .5;
  112. }
  113. /*
  114. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  115. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  116. */
  117. :root {
  118. /**
  119. * The geometry of the of focused element's outer shadow.
  120. */
  121. --ck-focus-outer-shadow-geometry: 0 0 0 3px;
  122. /**
  123. * A visual style of focused element's outer shadow.
  124. */
  125. --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
  126. /**
  127. * A visual style of focused element's outer shadow (when disabled).
  128. */
  129. --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
  130. /**
  131. * A visual style of focused element's outer shadow (when has errors).
  132. */
  133. --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);
  134. /**
  135. * A visual style of focused element's border or outline.
  136. */
  137. --ck-focus-ring: 1px solid var(--ck-color-focus-border);
  138. }
  139. /*
  140. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  141. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  142. */
  143. :root {
  144. --ck-font-size-base: 13px;
  145. --ck-line-height-base: 1.84615;
  146. --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  147. --ck-font-size-tiny: 0.7em;
  148. --ck-font-size-small: 0.75em;
  149. --ck-font-size-normal: 1em;
  150. --ck-font-size-big: 1.4em;
  151. --ck-font-size-large: 1.8em;
  152. }
  153. /*
  154. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  155. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  156. */
  157. :root {
  158. /* This is super-important. This is **manually** adjusted so a button without an icon
  159. is never smaller than a button with icon, additionally making sure that text-less buttons
  160. are perfect squares. The value is also shared by other components which should stay "in-line"
  161. with buttons. */
  162. --ck-ui-component-min-height: 2.3em;
  163. }
  164. /**
  165. * Resets an element, ignoring its children.
  166. */
  167. .ck.ck-reset,
  168. .ck.ck-reset_all,
  169. .ck-reset_all *:not(.ck-reset_all-excluded *) {
  170. box-sizing: border-box;
  171. width: auto;
  172. height: auto;
  173. position: static;
  174. /* Do not include inheritable rules here. */
  175. margin: 0;
  176. padding: 0;
  177. border: 0;
  178. background: transparent;
  179. text-decoration: none;
  180. vertical-align: middle;
  181. transition: none;
  182. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */
  183. word-wrap: break-word;
  184. }
  185. /**
  186. * Resets an element AND its children.
  187. */
  188. .ck.ck-reset_all,
  189. .ck-reset_all *:not(.ck-reset_all-excluded *) {
  190. /* These are rule inherited by all children elements. */
  191. border-collapse: collapse;
  192. font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
  193. color: var(--ck-color-text);
  194. text-align: left;
  195. white-space: nowrap;
  196. cursor: auto;
  197. float: none;
  198. }
  199. .ck-reset_all .ck-rtl *:not(.ck-reset_all-excluded *) {
  200. text-align: right;
  201. }
  202. .ck-reset_all iframe:not(.ck-reset_all-excluded *) {
  203. /* For IE */
  204. vertical-align: inherit;
  205. }
  206. .ck-reset_all textarea:not(.ck-reset_all-excluded *) {
  207. white-space: pre-wrap;
  208. }
  209. .ck-reset_all textarea:not(.ck-reset_all-excluded *),
  210. .ck-reset_all input[type="text"]:not(.ck-reset_all-excluded *),
  211. .ck-reset_all input[type="password"]:not(.ck-reset_all-excluded *) {
  212. cursor: text;
  213. }
  214. .ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *),
  215. .ck-reset_all input[type="text"][disabled]:not(.ck-reset_all-excluded *),
  216. .ck-reset_all input[type="password"][disabled]:not(.ck-reset_all-excluded *) {
  217. cursor: default;
  218. }
  219. .ck-reset_all fieldset:not(.ck-reset_all-excluded *) {
  220. padding: 10px;
  221. border: 2px groove hsl(255, 7%, 88%);
  222. }
  223. .ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner {
  224. /* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
  225. padding: 0;
  226. border: 0
  227. }
  228. /**
  229. * Default UI rules for RTL languages.
  230. */
  231. .ck[dir="rtl"],
  232. .ck[dir="rtl"] .ck {
  233. text-align: right;
  234. }
  235. /*
  236. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  237. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  238. */
  239. /**
  240. * Default border-radius value.
  241. */
  242. :root{
  243. --ck-border-radius: 2px;
  244. }
  245. /*
  246. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  247. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  248. */
  249. :root {
  250. /**
  251. * A visual style of element's inner shadow (i.e. input).
  252. */
  253. --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
  254. /**
  255. * A visual style of element's drop shadow (i.e. panel).
  256. */
  257. --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop);
  258. /**
  259. * A visual style of element's active shadow (i.e. comment or suggestion).
  260. */
  261. --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active);
  262. }
  263. /*
  264. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  265. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  266. */
  267. :root {
  268. --ck-spacing-unit: 0.6em;
  269. --ck-spacing-large: calc(var(--ck-spacing-unit) * 1.5);
  270. --ck-spacing-standard: var(--ck-spacing-unit);
  271. --ck-spacing-medium: calc(var(--ck-spacing-unit) * 0.8);
  272. --ck-spacing-small: calc(var(--ck-spacing-unit) * 0.5);
  273. --ck-spacing-tiny: calc(var(--ck-spacing-unit) * 0.3);
  274. --ck-spacing-extra-tiny: calc(var(--ck-spacing-unit) * 0.16);
  275. }
  276. /* Components */
  277. /*
  278. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  279. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  280. */
  281. /*
  282. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  283. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  284. */
  285. /**
  286. * Implements rounded corner interface for .ck-rounded-corners class.
  287. *
  288. * @see $ck-border-radius
  289. */
  290. /*
  291. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  292. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  293. */
  294. /**
  295. * A helper to combine multiple shadows.
  296. */
  297. /**
  298. * Gives an element a drop shadow so it looks like a floating panel.
  299. */
  300. .ck.ck-autocomplete > .ck-search__results {
  301. border-radius: 0;
  302. max-height: 200px;
  303. overflow-y: auto;
  304. background: var(--ck-color-base-background);
  305. border: 1px solid var(--ck-color-dropdown-panel-border);
  306. min-width: auto;
  307. }
  308. .ck-rounded-corners .ck.ck-autocomplete > .ck-search__results,
  309. .ck.ck-autocomplete > .ck-search__results.ck-rounded-corners {
  310. border-radius: var(--ck-border-radius);
  311. }
  312. .ck.ck-autocomplete > .ck-search__results {
  313. box-shadow: var(--ck-drop-shadow), 0 0;
  314. }
  315. .ck.ck-autocomplete > .ck-search__results.ck-search__results_n {
  316. border-bottom-left-radius: 0;
  317. border-bottom-right-radius: 0;
  318. /* Prevent duplicated borders between the input and the results pane. */
  319. margin-bottom: -1px;
  320. }
  321. .ck.ck-autocomplete > .ck-search__results.ck-search__results_s {
  322. border-top-left-radius: 0;
  323. border-top-right-radius: 0;
  324. /* Prevent duplicated borders between the input and the results pane. */
  325. margin-top: -1px;
  326. }
  327. /*
  328. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  329. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  330. */
  331. /*
  332. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  333. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  334. */
  335. /**
  336. * A visual style of focused element's border.
  337. */
  338. /*
  339. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  340. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  341. */
  342. /**
  343. * A helper to combine multiple shadows.
  344. */
  345. /**
  346. * Gives an element a drop shadow so it looks like a floating panel.
  347. */
  348. /*
  349. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  350. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  351. */
  352. /**
  353. * A class which indicates that an element holding it is disabled.
  354. */
  355. /*
  356. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  357. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  358. */
  359. /**
  360. * Implements rounded corner interface for .ck-rounded-corners class.
  361. *
  362. * @see $ck-border-radius
  363. */
  364. /*
  365. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  366. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  367. */
  368. /**
  369. * Implements a button of given background color.
  370. *
  371. * @param {String} $background - Background color of the button.
  372. * @param {String} $border - Border color of the button.
  373. */
  374. /*
  375. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  376. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  377. */
  378. .ck.ck-button,
  379. a.ck.ck-button {
  380. background: var(--ck-color-button-default-background);
  381. border-radius: 0;
  382. white-space: nowrap;
  383. cursor: default;
  384. vertical-align: middle;
  385. padding: var(--ck-spacing-tiny);
  386. text-align: center;
  387. /* A very important piece of styling. Go to variable declaration to learn more. */
  388. min-width: var(--ck-ui-component-min-height);
  389. min-height: var(--ck-ui-component-min-height);
  390. /* Normalize the height of the line. Removing this will break consistent height
  391. among text and text-less buttons (with icons). */
  392. line-height: 1;
  393. /* Enable font size inheritance, which allows fluid UI scaling. */
  394. font-size: inherit;
  395. /* Avoid flickering when the foucs border shows up. */
  396. border: 1px solid transparent;
  397. /* Apply some smooth transition to the box-shadow and border. */
  398. transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
  399. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
  400. -webkit-appearance: none;
  401. }
  402. .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
  403. background: var(--ck-color-button-default-hover-background);
  404. }
  405. .ck.ck-button:not(.ck-disabled):active, a.ck.ck-button:not(.ck-disabled):active {
  406. background: var(--ck-color-button-default-active-background);
  407. }
  408. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
  409. .ck.ck-button.ck-disabled, a.ck.ck-button.ck-disabled {
  410. background: var(--ck-color-button-default-disabled-background);
  411. }
  412. .ck-rounded-corners .ck.ck-button,
  413. .ck-rounded-corners a.ck.ck-button,
  414. .ck.ck-button.ck-rounded-corners,
  415. a.ck.ck-button.ck-rounded-corners {
  416. border-radius: var(--ck-border-radius);
  417. }
  418. @media (prefers-reduced-motion: reduce) {
  419. .ck.ck-button,
  420. a.ck.ck-button {
  421. transition: none;
  422. }
  423. }
  424. .ck.ck-button:active,
  425. a.ck.ck-button:active,
  426. .ck.ck-button:focus,
  427. a.ck.ck-button:focus {
  428. /* Disable native outline. */
  429. outline: none;
  430. border: var(--ck-focus-ring);
  431. box-shadow: var(--ck-focus-outer-shadow), 0 0;
  432. }
  433. /* Allow icon coloring using the text "color" property. */
  434. .ck.ck-button .ck-button__icon use,
  435. a.ck.ck-button .ck-button__icon use,
  436. .ck.ck-button .ck-button__icon use *,
  437. a.ck.ck-button .ck-button__icon use * {
  438. color: inherit;
  439. }
  440. .ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label {
  441. /* Enable font size inheritance, which allows fluid UI scaling. */
  442. font-size: inherit;
  443. font-weight: inherit;
  444. color: inherit;
  445. cursor: inherit;
  446. /* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
  447. without labels (but with icons) have different sizes in Chrome */
  448. vertical-align: middle;
  449. }
  450. [dir="ltr"] .ck.ck-button .ck-button__label, [dir="ltr"] a.ck.ck-button .ck-button__label {
  451. text-align: left;
  452. }
  453. [dir="rtl"] .ck.ck-button .ck-button__label, [dir="rtl"] a.ck.ck-button .ck-button__label {
  454. text-align: right;
  455. }
  456. .ck.ck-button .ck-button__keystroke, a.ck.ck-button .ck-button__keystroke {
  457. color: inherit;
  458. opacity: .5;
  459. }
  460. [dir="ltr"] .ck.ck-button .ck-button__keystroke, [dir="ltr"] a.ck.ck-button .ck-button__keystroke {
  461. margin-left: var(--ck-spacing-large);
  462. }
  463. [dir="rtl"] .ck.ck-button .ck-button__keystroke, [dir="rtl"] a.ck.ck-button .ck-button__keystroke {
  464. margin-right: var(--ck-spacing-large);
  465. }
  466. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
  467. .ck.ck-button.ck-disabled:active,
  468. a.ck.ck-button.ck-disabled:active,
  469. .ck.ck-button.ck-disabled:focus,
  470. a.ck.ck-button.ck-disabled:focus {
  471. /* The disabled button should have a slightly less visible shadow when focused. */
  472. box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
  473. }
  474. .ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__icon {
  475. opacity: var(--ck-disabled-opacity);
  476. }
  477. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
  478. .ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__label {
  479. opacity: var(--ck-disabled-opacity);
  480. }
  481. .ck.ck-button.ck-disabled .ck-button__keystroke, a.ck.ck-button.ck-disabled .ck-button__keystroke {
  482. opacity: .3;
  483. }
  484. .ck.ck-button.ck-button_with-text, a.ck.ck-button.ck-button_with-text {
  485. padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
  486. /* stylelint-disable-next-line no-descending-specificity */
  487. }
  488. [dir="ltr"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="ltr"] a.ck.ck-button.ck-button_with-text .ck-button__icon {
  489. margin-right: var(--ck-spacing-medium);
  490. }
  491. [dir="rtl"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="rtl"] a.ck.ck-button.ck-button_with-text .ck-button__icon {
  492. margin-left: var(--ck-spacing-medium);
  493. }
  494. /* stylelint-disable-next-line no-descending-specificity */
  495. .ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label {
  496. flex-grow: 1;
  497. }
  498. /* A style of the button which is currently on, e.g. its feature is active. */
  499. .ck.ck-button.ck-on, a.ck.ck-button.ck-on {
  500. background: var(--ck-color-button-on-background);
  501. color: var(--ck-color-button-on-color);
  502. }
  503. .ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover {
  504. background: var(--ck-color-button-on-hover-background);
  505. }
  506. .ck.ck-button.ck-on:not(.ck-disabled):active, a.ck.ck-button.ck-on:not(.ck-disabled):active {
  507. background: var(--ck-color-button-on-active-background);
  508. }
  509. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
  510. .ck.ck-button.ck-on.ck-disabled, a.ck.ck-button.ck-on.ck-disabled {
  511. background: var(--ck-color-button-on-disabled-background);
  512. }
  513. .ck.ck-button.ck-button-save, a.ck.ck-button.ck-button-save {
  514. color: var(--ck-color-button-save);
  515. }
  516. .ck.ck-button.ck-button-cancel, a.ck.ck-button.ck-button-cancel {
  517. color: var(--ck-color-button-cancel);
  518. }
  519. /* A style of the button which handles the primary action. */
  520. .ck.ck-button-action,
  521. a.ck.ck-button-action {
  522. background: var(--ck-color-button-action-background);
  523. color: var(--ck-color-button-action-text);
  524. }
  525. .ck.ck-button-action:not(.ck-disabled):hover, a.ck.ck-button-action:not(.ck-disabled):hover {
  526. background: var(--ck-color-button-action-hover-background);
  527. }
  528. .ck.ck-button-action:not(.ck-disabled):active, a.ck.ck-button-action:not(.ck-disabled):active {
  529. background: var(--ck-color-button-action-active-background);
  530. }
  531. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
  532. .ck.ck-button-action.ck-disabled, a.ck.ck-button-action.ck-disabled {
  533. background: var(--ck-color-button-action-disabled-background);
  534. }
  535. .ck.ck-button-bold,
  536. a.ck.ck-button-bold {
  537. font-weight: bold;
  538. }
  539. /*
  540. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  541. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  542. */
  543. /*
  544. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  545. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  546. */
  547. /**
  548. * Implements rounded corner interface for .ck-rounded-corners class.
  549. *
  550. * @see $ck-border-radius
  551. */
  552. /*
  553. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  554. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  555. */
  556. /**
  557. * A class which indicates that an element holding it is disabled.
  558. */
  559. /*
  560. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  561. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  562. */
  563. /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
  564. of the component, floating–point numbers have been used which, for the default font size
  565. (see: --ck-font-size-base), will generate simple integers. */
  566. :root {
  567. /* 34px at 13px font-size */
  568. --ck-switch-button-toggle-width: 2.6153846154em;
  569. /* 14px at 13px font-size */
  570. --ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
  571. --ck-switch-button-translation: calc(
  572. var(--ck-switch-button-toggle-width) -
  573. var(--ck-switch-button-toggle-inner-size) -
  574. 2px /* Border */
  575. );
  576. --ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
  577. }
  578. /* Unlike a regular button, the switch button text color and background should never change.
  579. * Changing toggle switch (background, outline) is enough to carry the information about the
  580. * state of the entire component (https://github.com/ckeditor/ckeditor5/issues/12519)
  581. */
  582. .ck.ck-button.ck-switchbutton, .ck.ck-button.ck-switchbutton:hover, .ck.ck-button.ck-switchbutton:focus, .ck.ck-button.ck-switchbutton:active, .ck.ck-button.ck-switchbutton.ck-on:hover, .ck.ck-button.ck-switchbutton.ck-on:focus, .ck.ck-button.ck-switchbutton.ck-on:active {
  583. color: inherit;
  584. background: transparent;
  585. }
  586. [dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__label {
  587. /* Separate the label from the switch */
  588. margin-right: calc(2 * var(--ck-spacing-large));
  589. }
  590. [dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__label {
  591. /* Separate the label from the switch */
  592. margin-left: calc(2 * var(--ck-spacing-large));
  593. }
  594. .ck.ck-button.ck-switchbutton .ck-button__toggle {
  595. border-radius: 0;
  596. /* Apply some smooth transition to the box-shadow and border. */
  597. /* Gently animate the background color of the toggle switch */
  598. transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out;
  599. border: 1px solid transparent;
  600. width: var(--ck-switch-button-toggle-width);
  601. background: var(--ck-color-switch-button-off-background);
  602. }
  603. .ck-rounded-corners .ck.ck-button.ck-switchbutton .ck-button__toggle,
  604. .ck.ck-button.ck-switchbutton .ck-button__toggle.ck-rounded-corners {
  605. border-radius: var(--ck-border-radius);
  606. }
  607. [dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__toggle {
  608. /* Make sure the toggle is always to the right as far as possible. */
  609. margin-left: auto;
  610. }
  611. [dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__toggle {
  612. /* Make sure the toggle is always to the left as far as possible. */
  613. margin-right: auto;
  614. }
  615. .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
  616. border-radius: 0;
  617. width: var(--ck-switch-button-toggle-inner-size);
  618. height: var(--ck-switch-button-toggle-inner-size);
  619. background: var(--ck-color-switch-button-inner-background);
  620. /* Gently animate the inner part of the toggle switch */
  621. transition: all 300ms ease;
  622. }
  623. .ck-rounded-corners .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner,
  624. .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner.ck-rounded-corners {
  625. border-radius: var(--ck-border-radius);
  626. border-radius: calc(.5 * var(--ck-border-radius));
  627. }
  628. @media (prefers-reduced-motion: reduce) {
  629. .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
  630. transition: none;
  631. }
  632. }
  633. .ck.ck-button.ck-switchbutton .ck-button__toggle:hover {
  634. background: var(--ck-color-switch-button-off-hover-background);
  635. }
  636. .ck.ck-button.ck-switchbutton .ck-button__toggle:hover .ck-button__toggle__inner {
  637. box-shadow: var(--ck-switch-button-inner-hover-shadow);
  638. }
  639. .ck.ck-button.ck-switchbutton.ck-disabled .ck-button__toggle {
  640. opacity: var(--ck-disabled-opacity);
  641. }
  642. /* Overriding default .ck-button:focus styles + an outline around the toogle */
  643. .ck.ck-button.ck-switchbutton:focus {
  644. border-color: transparent;
  645. outline: none;
  646. box-shadow: none;
  647. }
  648. .ck.ck-button.ck-switchbutton:focus .ck-button__toggle {
  649. box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
  650. outline-offset: 1px;
  651. outline: var(--ck-focus-ring);
  652. }
  653. /* stylelint-disable-next-line no-descending-specificity */
  654. .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle {
  655. background: var(--ck-color-switch-button-on-background);
  656. }
  657. .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle:hover {
  658. background: var(--ck-color-switch-button-on-hover-background);
  659. }
  660. /*
  661. * Move the toggle switch to the right. It will be animated.
  662. */
  663. [dir="ltr"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner {
  664. transform: translateX( var( --ck-switch-button-translation ) );
  665. }
  666. [dir="rtl"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner {
  667. transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
  668. }
  669. /*
  670. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  671. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  672. */
  673. /*
  674. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  675. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  676. */
  677. .ck.ck-button.ck-list-item-button {
  678. padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
  679. }
  680. .ck.ck-button.ck-list-item-button,
  681. .ck.ck-button.ck-list-item-button.ck-on {
  682. background: var(--ck-color-list-background);
  683. color: var(--ck-color-text);
  684. }
  685. [dir="ltr"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) {
  686. padding-left: var(--ck-spacing-small);
  687. }
  688. [dir="rtl"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) {
  689. padding-right: var(--ck-spacing-small);
  690. }
  691. /*
  692. * `.ck-on` class and background styling is overridden for `ck-button` in many places.
  693. * This is a workaround to make sure that the background is not overridden and uses similar
  694. * selector specificity as the other overrides.
  695. */
  696. .ck.ck-button.ck-list-item-button:hover:not(.ck-disabled),
  697. .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover,
  698. .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable),
  699. .ck.ck-button.ck-list-item-button.ck-on:hover {
  700. background: var(--ck-color-list-button-hover-background);
  701. }
  702. .ck.ck-button.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:hover:not(.ck-disabled) {
  703. color: var(--ck-color-text);
  704. }
  705. /*
  706. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  707. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  708. */
  709. :root {
  710. --ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
  711. }
  712. .ck.ck-collapsible > .ck.ck-button {
  713. width: 100%;
  714. font-weight: bold;
  715. border-radius: 0;
  716. color: inherit;
  717. }
  718. .ck.ck-collapsible > .ck.ck-button:focus {
  719. background: transparent;
  720. }
  721. .ck.ck-collapsible > .ck.ck-button:active, .ck.ck-collapsible > .ck.ck-button:not(:focus), .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) {
  722. background: transparent;
  723. border-color: transparent;
  724. box-shadow: none;
  725. }
  726. .ck.ck-collapsible > .ck.ck-button > .ck-icon {
  727. margin-right: var(--ck-spacing-medium);
  728. width: var(--ck-collapsible-arrow-size);
  729. }
  730. .ck.ck-collapsible > .ck-collapsible__children {
  731. padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large);
  732. }
  733. .ck.ck-collapsible.ck-collapsible_collapsed > .ck.ck-button .ck-icon {
  734. transform: rotate(-90deg);
  735. }
  736. /*
  737. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  738. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  739. */
  740. /*
  741. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  742. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  743. */
  744. /**
  745. * Implements rounded corner interface for .ck-rounded-corners class.
  746. *
  747. * @see $ck-border-radius
  748. */
  749. /*
  750. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  751. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  752. */
  753. :root {
  754. --ck-color-grid-tile-size: 24px;
  755. /* Not using global colors here because these may change but some colors in a pallette
  756. * require special treatment. For instance, this ensures no matter what the UI text color is,
  757. * the check icon will look good on the black color tile. */
  758. --ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
  759. }
  760. .ck.ck-color-grid {
  761. grid-gap: 5px;
  762. padding: 8px;
  763. }
  764. .ck.ck-color-grid__tile {
  765. transition: .2s ease box-shadow;
  766. }
  767. @media (forced-colors: none) {
  768. .ck.ck-color-grid__tile {
  769. width: var(--ck-color-grid-tile-size);
  770. height: var(--ck-color-grid-tile-size);
  771. min-width: var(--ck-color-grid-tile-size);
  772. min-height: var(--ck-color-grid-tile-size);
  773. padding: 0;
  774. border: 0;
  775. }
  776. .ck.ck-color-grid__tile.ck-on,
  777. .ck.ck-color-grid__tile:focus:not( .ck-disabled ),
  778. .ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
  779. /* Disable the default .ck-button's border ring. */
  780. border: 0;
  781. }
  782. .ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered {
  783. box-shadow: 0 0 0 1px var(--ck-color-base-border);
  784. }
  785. .ck.ck-color-grid__tile.ck-on {
  786. box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
  787. }
  788. .ck.ck-color-grid__tile:focus:not( .ck-disabled ),
  789. .ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
  790. box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
  791. }
  792. }
  793. /*
  794. * In high contrast mode, the colors are replaced with text labels.
  795. * See https://github.com/ckeditor/ckeditor5/issues/14907.
  796. */
  797. @media (forced-colors: active) {
  798. .ck.ck-color-grid__tile {
  799. width: unset;
  800. height: unset;
  801. min-width: unset;
  802. min-height: unset;
  803. padding: 0 var(--ck-spacing-small);
  804. }
  805. .ck.ck-color-grid__tile .ck-button__label {
  806. display: inline-block;
  807. }
  808. }
  809. @media (prefers-reduced-motion: reduce) {
  810. .ck.ck-color-grid__tile {
  811. transition: none;
  812. }
  813. }
  814. .ck.ck-color-grid__tile.ck-disabled {
  815. cursor: unset;
  816. transition: unset;
  817. }
  818. .ck.ck-color-grid__tile .ck.ck-icon {
  819. display: none;
  820. color: var(--ck-color-color-grid-check-icon);
  821. }
  822. .ck.ck-color-grid__tile.ck-on .ck.ck-icon {
  823. display: block;
  824. }
  825. .ck.ck-color-grid__label {
  826. padding: 0 var(--ck-spacing-standard);
  827. }
  828. /*
  829. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  830. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  831. */
  832. /*
  833. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  834. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  835. */
  836. /* View fragment with color grids. */
  837. .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color,
  838. .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
  839. width: 100%;
  840. }
  841. .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
  842. padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
  843. border-bottom-left-radius: 0;
  844. border-bottom-right-radius: 0;
  845. }
  846. .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker:not(:focus) {
  847. border-top: 1px solid var(--ck-color-base-border);
  848. }
  849. [dir="ltr"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon {
  850. margin-right: var(--ck-spacing-standard);
  851. }
  852. [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon {
  853. margin-left: var(--ck-spacing-standard);
  854. }
  855. .ck.ck-color-selector .ck-color-grids-fragment label.ck.ck-color-grid__label {
  856. font-weight: unset;
  857. }
  858. /* View fragment with a color picker. */
  859. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker {
  860. padding: 8px;
  861. }
  862. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker {
  863. height: 100px;
  864. min-width: 180px;
  865. }
  866. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation) {
  867. border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
  868. }
  869. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue) {
  870. border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
  871. }
  872. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation-pointer),
  873. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue-pointer) {
  874. width: 15px;
  875. height: 15px;
  876. }
  877. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar {
  878. padding: 0 8px 8px;
  879. }
  880. /*
  881. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  882. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  883. */
  884. /*
  885. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  886. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  887. */
  888. /**
  889. * Implements rounded corner interface for .ck-rounded-corners class.
  890. *
  891. * @see $ck-border-radius
  892. */
  893. /*
  894. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  895. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  896. */
  897. /**
  898. * A helper to combine multiple shadows.
  899. */
  900. /**
  901. * Gives an element a drop shadow so it looks like a floating panel.
  902. */
  903. /*
  904. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  905. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  906. */
  907. :root {
  908. --ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 );
  909. --ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%);
  910. --ck-dialog-max-width: 100vw;
  911. --ck-dialog-max-height: 90vh;
  912. --ck-color-dialog-background: var(--ck-color-base-background);
  913. --ck-color-dialog-form-header-border: var(--ck-color-base-border);
  914. }
  915. .ck.ck-dialog-overlay {
  916. animation: ck-dialog-fade-in .3s;
  917. background: var(--ck-dialog-overlay-background-color);
  918. z-index: var(--ck-z-dialog);
  919. }
  920. .ck.ck-dialog {
  921. border-radius: 0;
  922. --ck-drop-shadow: var(--ck-dialog-drop-shadow);
  923. background: var(--ck-color-dialog-background);
  924. max-height: var(--ck-dialog-max-height);
  925. max-width: var(--ck-dialog-max-width);
  926. border: 1px solid var(--ck-color-base-border);
  927. overscroll-behavior: contain;
  928. }
  929. .ck-rounded-corners .ck.ck-dialog,
  930. .ck.ck-dialog.ck-rounded-corners {
  931. border-radius: var(--ck-border-radius);
  932. }
  933. .ck.ck-dialog {
  934. box-shadow: var(--ck-drop-shadow), 0 0;
  935. }
  936. .ck.ck-dialog .ck.ck-form__header {
  937. border-bottom: 1px solid var(--ck-color-dialog-form-header-border);
  938. }
  939. .ck-dialog-scroll-locked {
  940. overflow: hidden;
  941. }
  942. @keyframes ck-dialog-fade-in {
  943. 0% {
  944. background: hsla( 0, 0%, 0%, 0 );
  945. }
  946. 100% {
  947. background: var(--ck-dialog-overlay-background-color);
  948. }
  949. }
  950. /*
  951. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  952. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  953. */
  954. .ck.ck-dialog .ck.ck-dialog__actions {
  955. padding: var(--ck-spacing-large);
  956. }
  957. .ck.ck-dialog .ck.ck-dialog__actions > * + * {
  958. margin-left: var(--ck-spacing-large);
  959. }
  960. /*
  961. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  962. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  963. */
  964. /*
  965. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  966. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  967. */
  968. /**
  969. * Implements rounded corner interface for .ck-rounded-corners class.
  970. *
  971. * @see $ck-border-radius
  972. */
  973. /*
  974. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  975. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  976. */
  977. /**
  978. * A class which indicates that an element holding it is disabled.
  979. */
  980. /*
  981. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  982. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  983. */
  984. /**
  985. * A helper to combine multiple shadows.
  986. */
  987. /**
  988. * Gives an element a drop shadow so it looks like a floating panel.
  989. */
  990. /*
  991. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  992. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  993. */
  994. :root {
  995. --ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
  996. }
  997. .ck.ck-dropdown {
  998. /* Enable font size inheritance, which allows fluid UI scaling. */
  999. font-size: inherit;
  1000. }
  1001. .ck.ck-dropdown .ck-dropdown__arrow {
  1002. width: var(--ck-dropdown-arrow-size);
  1003. }
  1004. [dir="ltr"] .ck.ck-dropdown .ck-dropdown__arrow {
  1005. right: var(--ck-spacing-standard);
  1006. /* A space to accommodate the triangle. */
  1007. margin-left: var(--ck-spacing-standard);
  1008. }
  1009. [dir="rtl"] .ck.ck-dropdown .ck-dropdown__arrow {
  1010. left: var(--ck-spacing-standard);
  1011. /* A space to accommodate the triangle. */
  1012. margin-right: var(--ck-spacing-small);
  1013. }
  1014. .ck.ck-dropdown.ck-disabled .ck-dropdown__arrow {
  1015. opacity: var(--ck-disabled-opacity);
  1016. }
  1017. [dir="ltr"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
  1018. /* Make sure dropdowns with just an icon have the right inner spacing */
  1019. padding-left: var(--ck-spacing-small);
  1020. }
  1021. [dir="rtl"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
  1022. /* Make sure dropdowns with just an icon have the right inner spacing */
  1023. padding-right: var(--ck-spacing-small);
  1024. }
  1025. /* #23 */
  1026. .ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label {
  1027. width: 7em;
  1028. overflow: hidden;
  1029. text-overflow: ellipsis;
  1030. }
  1031. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
  1032. .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-disabled .ck-button__label {
  1033. opacity: var(--ck-disabled-opacity);
  1034. }
  1035. /* https://github.com/ckeditor/ckeditor5/issues/816 */
  1036. .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on {
  1037. border-bottom-left-radius: 0;
  1038. border-bottom-right-radius: 0;
  1039. }
  1040. .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-dropdown__button_label-width_auto .ck-button__label {
  1041. width: auto;
  1042. }
  1043. /* https://github.com/ckeditor/ckeditor5/issues/8699 */
  1044. .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active,
  1045. .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active {
  1046. box-shadow: none;
  1047. }
  1048. .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus {
  1049. box-shadow: var(--ck-focus-outer-shadow), 0 0;
  1050. }
  1051. .ck.ck-dropdown__panel {
  1052. border-radius: 0;
  1053. background: var(--ck-color-dropdown-panel-background);
  1054. border: 1px solid var(--ck-color-dropdown-panel-border);
  1055. bottom: 0;
  1056. /* Make sure the panel is at least as wide as the drop-down's button. */
  1057. min-width: 100%;
  1058. }
  1059. .ck-rounded-corners .ck.ck-dropdown__panel,
  1060. .ck.ck-dropdown__panel.ck-rounded-corners {
  1061. border-radius: var(--ck-border-radius);
  1062. }
  1063. .ck.ck-dropdown__panel {
  1064. box-shadow: var(--ck-drop-shadow), 0 0;
  1065. /* Disabled corner border radius to be consistent with the .dropdown__button
  1066. https://github.com/ckeditor/ckeditor5/issues/816 */
  1067. }
  1068. .ck.ck-dropdown__panel.ck-dropdown__panel_se {
  1069. border-top-left-radius: 0;
  1070. }
  1071. .ck.ck-dropdown__panel.ck-dropdown__panel_sw {
  1072. border-top-right-radius: 0;
  1073. }
  1074. .ck.ck-dropdown__panel.ck-dropdown__panel_ne {
  1075. border-bottom-left-radius: 0;
  1076. }
  1077. .ck.ck-dropdown__panel.ck-dropdown__panel_nw {
  1078. border-bottom-right-radius: 0;
  1079. }
  1080. .ck.ck-dropdown__panel:focus {
  1081. outline: none;
  1082. }
  1083. /*
  1084. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1085. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1086. */
  1087. /*
  1088. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1089. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1090. */
  1091. /**
  1092. * Implements rounded corner interface for .ck-rounded-corners class.
  1093. *
  1094. * @see $ck-border-radius
  1095. */
  1096. .ck.ck-dropdown > .ck-dropdown__panel > .ck-list {
  1097. /* Disabled radius of top-left border to be consistent with .dropdown__button
  1098. https://github.com/ckeditor/ckeditor5/issues/816 */
  1099. border-radius: 0;
  1100. }
  1101. .ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list,
  1102. .ck.ck-dropdown > .ck-dropdown__panel > .ck-list.ck-rounded-corners {
  1103. border-radius: var(--ck-border-radius);
  1104. border-top-left-radius: 0;
  1105. }
  1106. /* Make sure the button belonging to the first/last child of the list goes well with the
  1107. border radius of the entire panel. */
  1108. .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button {
  1109. border-radius: 0;
  1110. }
  1111. .ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button,
  1112. .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button.ck-rounded-corners {
  1113. border-radius: var(--ck-border-radius);
  1114. border-top-left-radius: 0;
  1115. border-bottom-left-radius: 0;
  1116. border-bottom-right-radius: 0;
  1117. }
  1118. .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button {
  1119. border-radius: 0;
  1120. }
  1121. .ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button,
  1122. .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button.ck-rounded-corners {
  1123. border-radius: var(--ck-border-radius);
  1124. border-top-left-radius: 0;
  1125. border-top-right-radius: 0;
  1126. }
  1127. /*
  1128. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1129. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1130. */
  1131. /*
  1132. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1133. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1134. */
  1135. /**
  1136. * Implements rounded corner interface for .ck-rounded-corners class.
  1137. *
  1138. * @see $ck-border-radius
  1139. */
  1140. :root {
  1141. --ck-color-split-button-hover-background: hsl(0, 0%, 92%);
  1142. --ck-color-split-button-hover-border: hsl(0, 0%, 70%);
  1143. }
  1144. /*
  1145. * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
  1146. */
  1147. [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action {
  1148. /* Don't round the action button on the right side */
  1149. border-top-right-radius: unset;
  1150. border-bottom-right-radius: unset;
  1151. }
  1152. [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action {
  1153. /* Don't round the action button on the left side */
  1154. border-top-left-radius: unset;
  1155. border-bottom-left-radius: unset;
  1156. }
  1157. .ck.ck-splitbutton > .ck-splitbutton__arrow {
  1158. /* It's a text-less button and since the icon is positioned absolutely in such situation,
  1159. it must get some arbitrary min-width. */
  1160. min-width: unset;
  1161. }
  1162. [dir="ltr"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
  1163. /* Don't round the arrow button on the left side */
  1164. border-top-left-radius: unset;
  1165. border-bottom-left-radius: unset;
  1166. }
  1167. [dir="rtl"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
  1168. /* Don't round the arrow button on the right side */
  1169. border-top-right-radius: unset;
  1170. border-bottom-right-radius: unset;
  1171. }
  1172. .ck.ck-splitbutton > .ck-splitbutton__arrow svg {
  1173. width: var(--ck-dropdown-arrow-size);
  1174. }
  1175. /* Make sure the divider stretches 100% height of the button
  1176. https://github.com/ckeditor/ckeditor5/issues/10936 */
  1177. .ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) {
  1178. border-top-width: 0px;
  1179. border-bottom-width: 0px;
  1180. }
  1181. /* Don't round the bottom left and right corners of the buttons when "open"
  1182. https://github.com/ckeditor/ckeditor5/issues/816 */
  1183. .ck.ck-splitbutton.ck-splitbutton_open {
  1184. border-radius: 0;
  1185. }
  1186. .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open,
  1187. .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners {
  1188. border-radius: var(--ck-border-radius);
  1189. }
  1190. .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__action {
  1191. border-bottom-left-radius: 0;
  1192. }
  1193. .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow {
  1194. border-bottom-right-radius: 0;
  1195. }
  1196. /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
  1197. as a whole. The background of both buttons should stand out and there should be a visual
  1198. separation between both buttons. */
  1199. /* When the split button hovered as a whole, not as individual buttons. */
  1200. .ck.ck-splitbutton.ck-splitbutton_open > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
  1201. background: var(--ck-color-split-button-hover-background);
  1202. }
  1203. /* Splitbutton separator needs to be set with the ::after pseudoselector
  1204. to display properly the borders on focus */
  1205. .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
  1206. content: '';
  1207. position: absolute;
  1208. width: 1px;
  1209. height: 100%;
  1210. background-color: var(--ck-color-split-button-hover-border);
  1211. }
  1212. /* Make sure the divider between the buttons looks fine when the button is focused */
  1213. .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:focus::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:focus::after {
  1214. --ck-color-split-button-hover-border: var(--ck-color-focus-border);
  1215. }
  1216. [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
  1217. left: -1px;
  1218. }
  1219. [dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
  1220. right: -1px;
  1221. }
  1222. /*
  1223. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1224. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1225. */
  1226. .ck.ck-toolbar-dropdown .ck-toolbar {
  1227. border: 0;
  1228. }
  1229. /*
  1230. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1231. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1232. */
  1233. /*
  1234. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1235. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1236. */
  1237. /**
  1238. * A class which indicates that an element holding it is disabled.
  1239. */
  1240. /*
  1241. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1242. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1243. */
  1244. /**
  1245. * Implements a button of given background color.
  1246. *
  1247. * @param {String} $background - Background color of the button.
  1248. * @param {String} $border - Border color of the button.
  1249. */
  1250. /*
  1251. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1252. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1253. */
  1254. /*
  1255. * All menu buttons.
  1256. */
  1257. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button {
  1258. width: 100%;
  1259. padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
  1260. border-radius: 0;
  1261. }
  1262. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:focus {
  1263. border-color: transparent;
  1264. box-shadow: none;
  1265. }
  1266. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:focus:not(.ck-on) {
  1267. background: var(--ck-color-button-default-hover-background);
  1268. }
  1269. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-button__label {
  1270. flex-grow: 1;
  1271. overflow: hidden;
  1272. text-overflow: ellipsis;
  1273. }
  1274. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-disabled > .ck-button__label {
  1275. opacity: var(--ck-disabled-opacity);
  1276. }
  1277. /* Spacing in buttons that miss the icon. */
  1278. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-icon-spacing:not(:has(.ck-button__icon)) > .ck-button__label {
  1279. margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
  1280. }
  1281. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
  1282. width: var(--ck-dropdown-arrow-size);
  1283. }
  1284. [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
  1285. transform: rotate(-90deg);
  1286. /* Nudge the arrow gently to the right because its center of gravity is to the left */
  1287. margin-right: calc(-1 * var(--ck-spacing-small));
  1288. }
  1289. [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
  1290. transform: rotate(90deg);
  1291. /* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */
  1292. margin-left: calc(-1 * var(--ck-spacing-small));
  1293. }
  1294. .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-disabled > .ck-dropdown-menu-list__nested-menu__button__arrow {
  1295. opacity: var(--ck-disabled-opacity);
  1296. }
  1297. [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text) {
  1298. padding-left: var(--ck-spacing-small);
  1299. }
  1300. [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
  1301. right: var(--ck-spacing-standard);
  1302. /* A space to accommodate the triangle. */
  1303. margin-left: var(--ck-spacing-standard);
  1304. }
  1305. [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text) {
  1306. padding-right: var(--ck-spacing-small);
  1307. }
  1308. [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
  1309. left: var(--ck-spacing-standard);
  1310. /* A space to accommodate the triangle. */
  1311. margin-right: var(--ck-spacing-small);
  1312. }
  1313. /*
  1314. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1315. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1316. */
  1317. :root {
  1318. --ck-dropdown-menu-menu-item-min-width: 18em;
  1319. }
  1320. .ck.ck-dropdown-menu-list__nested-menu__item {
  1321. min-width: var(--ck-dropdown-menu-menu-item-min-width);
  1322. }
  1323. /*
  1324. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1325. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1326. */
  1327. /*
  1328. * List item buttons.
  1329. */
  1330. .ck-button.ck-dropdown-menu-list__nested-menu__item__button {
  1331. border-radius: 0;
  1332. }
  1333. .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container,
  1334. .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container .ck-spinner {
  1335. /* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */
  1336. --ck-toolbar-spinner-size: 20px;
  1337. }
  1338. .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container {
  1339. /* These margins are the same as for .ck-icon. */
  1340. margin-left: calc(-1 * var(--ck-spacing-small));
  1341. margin-right: var(--ck-spacing-small);
  1342. }
  1343. /*
  1344. * Hovered items automatically get focused. Default focus styles look odd
  1345. * while moving across a huge list of items so let's get rid of them
  1346. */
  1347. .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus {
  1348. border-color: transparent;
  1349. box-shadow: none;
  1350. }
  1351. .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus:not(.ck-on) {
  1352. background: var(--ck-color-button-default-hover-background);
  1353. }
  1354. /*
  1355. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1356. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1357. */
  1358. /*
  1359. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1360. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1361. */
  1362. /**
  1363. * Implements rounded corner interface for .ck-rounded-corners class.
  1364. *
  1365. * @see $ck-border-radius
  1366. */
  1367. /*
  1368. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1369. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1370. */
  1371. /**
  1372. * A helper to combine multiple shadows.
  1373. */
  1374. /**
  1375. * Gives an element a drop shadow so it looks like a floating panel.
  1376. */
  1377. :root {
  1378. --ck-dropdown-menu-menu-panel-max-width: 75vw;
  1379. }
  1380. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
  1381. box-shadow: var(--ck-drop-shadow), 0 0;
  1382. background: var(--ck-color-dropdown-panel-background);
  1383. border: 1px solid var(--ck-color-dropdown-panel-border);
  1384. bottom: 0;
  1385. height: fit-content;
  1386. max-width: var(--ck-dropdown-menu-menu-panel-max-width);
  1387. /* Reset balloon styling */
  1388. }
  1389. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel::after,
  1390. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel::before {
  1391. display: none;
  1392. }
  1393. /* Corner border radius consistent with the button. */
  1394. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_es,
  1395. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_se {
  1396. border-top-left-radius: 0;
  1397. }
  1398. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_ws,
  1399. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_sw {
  1400. border-top-right-radius: 0;
  1401. }
  1402. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_en,
  1403. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_ne {
  1404. border-bottom-left-radius: 0;
  1405. }
  1406. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_wn,
  1407. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_nw {
  1408. border-bottom-right-radius: 0;
  1409. }
  1410. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel:focus {
  1411. outline: none;
  1412. }
  1413. /*
  1414. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1415. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1416. */
  1417. /*
  1418. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1419. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1420. */
  1421. /**
  1422. * A visual style of focused element's border.
  1423. */
  1424. /*
  1425. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1426. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1427. */
  1428. /**
  1429. * A helper to combine multiple shadows.
  1430. */
  1431. /**
  1432. * Gives an element a drop shadow so it looks like a floating panel.
  1433. */
  1434. :root {
  1435. --ck-accessibility-help-dialog-max-width: 600px;
  1436. --ck-accessibility-help-dialog-max-height: 400px;
  1437. --ck-accessibility-help-dialog-border-color: hsl(220, 6%, 81%);
  1438. --ck-accessibility-help-dialog-code-background-color: hsl(0deg 0% 92.94%);
  1439. --ck-accessibility-help-dialog-kbd-shadow-color: hsl(0deg 0% 61%);
  1440. }
  1441. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content {
  1442. padding: var(--ck-spacing-large);
  1443. max-width: var(--ck-accessibility-help-dialog-max-width);
  1444. max-height: var(--ck-accessibility-help-dialog-max-height);
  1445. overflow: auto;
  1446. user-select: text;
  1447. border: 1px solid transparent;
  1448. }
  1449. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content:focus {
  1450. /* Disable native outline. */
  1451. outline: none;
  1452. border: var(--ck-focus-ring);
  1453. box-shadow: var(--ck-focus-outer-shadow), 0 0;
  1454. }
  1455. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content * {
  1456. white-space: normal;
  1457. }
  1458. /* Hide the main label of the content container. */
  1459. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content .ck-label {
  1460. display: none;
  1461. }
  1462. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3 {
  1463. font-weight: bold;
  1464. font-size: 1.2em;
  1465. }
  1466. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4 {
  1467. font-weight: bold;
  1468. font-size: 1em;
  1469. }
  1470. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content p,
  1471. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3,
  1472. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4,
  1473. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content table {
  1474. margin: 1em 0;
  1475. }
  1476. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl {
  1477. display: grid;
  1478. grid-template-columns: 2fr 1fr;
  1479. border-top: 1px solid var(--ck-accessibility-help-dialog-border-color);
  1480. border-bottom: none;
  1481. }
  1482. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd {
  1483. border-bottom: 1px solid var(--ck-accessibility-help-dialog-border-color);
  1484. padding: .4em 0;
  1485. }
  1486. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt {
  1487. grid-column-start: 1;
  1488. }
  1489. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd {
  1490. grid-column-start: 2;
  1491. text-align: right;
  1492. }
  1493. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code {
  1494. display: inline-block;
  1495. background: var(--ck-accessibility-help-dialog-code-background-color);
  1496. padding: .4em;
  1497. vertical-align: middle;
  1498. line-height: 1;
  1499. border-radius: 2px;
  1500. text-align: center;
  1501. font-size: .9em;
  1502. }
  1503. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code {
  1504. font-family: monospace;
  1505. }
  1506. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd {
  1507. min-width: 1.8em;
  1508. box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color);
  1509. margin: 0 1px;
  1510. }
  1511. .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd + kbd {
  1512. margin-left: 2px;
  1513. }
  1514. /*
  1515. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1516. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1517. */
  1518. /*
  1519. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1520. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1521. */
  1522. /**
  1523. * Implements rounded corner interface for .ck-rounded-corners class.
  1524. *
  1525. * @see $ck-border-radius
  1526. */
  1527. /*
  1528. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1529. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1530. */
  1531. /**
  1532. * A class which indicates that an element holding it is disabled.
  1533. */
  1534. /*
  1535. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1536. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1537. */
  1538. /**
  1539. * A helper to combine multiple shadows.
  1540. */
  1541. /**
  1542. * Gives an element a drop shadow so it looks like a floating panel.
  1543. */
  1544. /*
  1545. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1546. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1547. */
  1548. /**
  1549. * A visual style of focused element's border.
  1550. */
  1551. /*
  1552. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1553. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1554. */
  1555. /**
  1556. * Implements a button of given background color.
  1557. *
  1558. * @param {String} $background - Background color of the button.
  1559. * @param {String} $border - Border color of the button.
  1560. */
  1561. :root {
  1562. --ck-color-editable-blur-selection: hsl(0, 0%, 85%);
  1563. }
  1564. .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  1565. border-radius: 0;
  1566. }
  1567. .ck-rounded-corners .ck.ck-editor__editable:not(.ck-editor__nested-editable),
  1568. .ck.ck-editor__editable.ck-rounded-corners:not(.ck-editor__nested-editable) {
  1569. border-radius: var(--ck-border-radius);
  1570. }
  1571. .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
  1572. /* Disable native outline. */
  1573. outline: none;
  1574. border: var(--ck-focus-ring);
  1575. box-shadow: var(--ck-inner-shadow), 0 0;
  1576. }
  1577. .ck.ck-editor__editable_inline {
  1578. overflow: auto;
  1579. padding: 0 var(--ck-spacing-standard);
  1580. border: 1px solid transparent;
  1581. }
  1582. .ck.ck-editor__editable_inline[dir="ltr"] {
  1583. text-align: left;
  1584. }
  1585. .ck.ck-editor__editable_inline[dir="rtl"] {
  1586. text-align: right;
  1587. }
  1588. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
  1589. .ck.ck-editor__editable_inline > *:first-child {
  1590. margin-top: var(--ck-spacing-large);
  1591. }
  1592. /* https://github.com/ckeditor/ckeditor5/issues/847 */
  1593. .ck.ck-editor__editable_inline > *:last-child {
  1594. /*
  1595. * This value should match with the default margins of the block elements (like .media or .image)
  1596. * to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825).
  1597. */
  1598. margin-bottom: var(--ck-spacing-large);
  1599. }
  1600. /* https://github.com/ckeditor/ckeditor5/issues/6517 */
  1601. .ck.ck-editor__editable_inline.ck-blurred ::selection {
  1602. background: var(--ck-color-editable-blur-selection);
  1603. }
  1604. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
  1605. .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"]::after {
  1606. border-bottom-color: var(--ck-color-panel-background);
  1607. }
  1608. .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"]::after {
  1609. border-top-color: var(--ck-color-panel-background);
  1610. }
  1611. /*
  1612. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1613. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1614. */
  1615. /*
  1616. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1617. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1618. */
  1619. :root {
  1620. --ck-form-header-height: 44px;
  1621. }
  1622. .ck.ck-form__header {
  1623. padding: var(--ck-spacing-small) var(--ck-spacing-large);
  1624. height: var(--ck-form-header-height);
  1625. line-height: var(--ck-form-header-height);
  1626. border-bottom: 1px solid var(--ck-color-base-border);
  1627. }
  1628. [dir="ltr"] .ck.ck-form__header > .ck-icon {
  1629. margin-right: var(--ck-spacing-medium);
  1630. }
  1631. [dir="rtl"] .ck.ck-form__header > .ck-icon {
  1632. margin-left: var(--ck-spacing-medium);
  1633. }
  1634. .ck.ck-form__header .ck-form__header__label {
  1635. --ck-font-size-base: 15px;
  1636. font-weight: bold;
  1637. }
  1638. /*
  1639. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1640. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1641. */
  1642. :root {
  1643. --ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
  1644. --ck-icon-font-size: .8333350694em;
  1645. }
  1646. .ck.ck-icon {
  1647. width: var(--ck-icon-size);
  1648. height: var(--ck-icon-size);
  1649. /* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */
  1650. font-size: var(--ck-icon-font-size);
  1651. /* Inherit cursor style (#5). */
  1652. cursor: inherit;
  1653. }
  1654. .ck.ck-icon * {
  1655. /* Inherit cursor style (#5). */
  1656. cursor: inherit;
  1657. }
  1658. /* Allows dynamic coloring of an icon by inheriting its color from the parent. */
  1659. .ck.ck-icon.ck-icon_inherit-color {
  1660. color: inherit;
  1661. }
  1662. .ck.ck-icon.ck-icon_inherit-color * {
  1663. color: inherit;
  1664. }
  1665. .ck.ck-icon.ck-icon_inherit-color *:not([fill]) {
  1666. /* Needed by FF. */
  1667. fill: currentColor;
  1668. }
  1669. /*
  1670. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1671. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1672. */
  1673. /*
  1674. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1675. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1676. */
  1677. /**
  1678. * Implements rounded corner interface for .ck-rounded-corners class.
  1679. *
  1680. * @see $ck-border-radius
  1681. */
  1682. /*
  1683. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1684. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1685. */
  1686. /**
  1687. * A visual style of focused element's border.
  1688. */
  1689. /*
  1690. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1691. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1692. */
  1693. /**
  1694. * A helper to combine multiple shadows.
  1695. */
  1696. /**
  1697. * Gives an element a drop shadow so it looks like a floating panel.
  1698. */
  1699. :root {
  1700. --ck-input-width: 18em;
  1701. /* Backward compatibility. */
  1702. --ck-input-text-width: var(--ck-input-width);
  1703. }
  1704. .ck.ck-input {
  1705. border-radius: 0;
  1706. background: var(--ck-color-input-background);
  1707. border: 1px solid var(--ck-color-input-border);
  1708. padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
  1709. min-width: var(--ck-input-width);
  1710. /* This is important to stay of the same height as surrounding buttons */
  1711. min-height: var(--ck-ui-component-min-height);
  1712. /* Apply some smooth transition to the box-shadow and border. */
  1713. transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
  1714. }
  1715. .ck-rounded-corners .ck.ck-input,
  1716. .ck.ck-input.ck-rounded-corners {
  1717. border-radius: var(--ck-border-radius);
  1718. }
  1719. @media (prefers-reduced-motion: reduce) {
  1720. .ck.ck-input {
  1721. transition: none;
  1722. }
  1723. }
  1724. .ck.ck-input:focus {
  1725. /* Disable native outline. */
  1726. outline: none;
  1727. border: var(--ck-focus-ring);
  1728. box-shadow: var(--ck-focus-outer-shadow), 0 0;
  1729. }
  1730. .ck.ck-input[readonly] {
  1731. border: 1px solid var(--ck-color-input-disabled-border);
  1732. background: var(--ck-color-input-disabled-background);
  1733. color: var(--ck-color-input-disabled-text);
  1734. }
  1735. .ck.ck-input[readonly]:focus {
  1736. /* The read-only input should have a slightly less visible shadow when focused. */
  1737. box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
  1738. }
  1739. .ck.ck-input.ck-error {
  1740. border-color: var(--ck-color-input-error-border);
  1741. animation: ck-input-shake .3s ease both;
  1742. }
  1743. @media (prefers-reduced-motion: reduce) {
  1744. .ck.ck-input.ck-error {
  1745. animation: none;
  1746. }
  1747. }
  1748. .ck.ck-input.ck-error:focus {
  1749. box-shadow: var(--ck-focus-error-outer-shadow), 0 0;
  1750. }
  1751. @keyframes ck-input-shake {
  1752. 20% {
  1753. transform: translateX(-2px);
  1754. }
  1755. 40% {
  1756. transform: translateX(2px);
  1757. }
  1758. 60% {
  1759. transform: translateX(-1px);
  1760. }
  1761. 80% {
  1762. transform: translateX(1px);
  1763. }
  1764. }
  1765. /*
  1766. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1767. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1768. */
  1769. .ck.ck-label {
  1770. font-weight: bold;
  1771. }
  1772. /*
  1773. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1774. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1775. */
  1776. /*
  1777. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1778. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1779. */
  1780. /*
  1781. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1782. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1783. */
  1784. /**
  1785. * Implements rounded corner interface for .ck-rounded-corners class.
  1786. *
  1787. * @see $ck-border-radius
  1788. */
  1789. :root {
  1790. --ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95);
  1791. --ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium);
  1792. --ck-labeled-field-label-default-position-x: var(--ck-spacing-medium);
  1793. --ck-labeled-field-label-default-position-y: calc(0.6 * var(--ck-font-size-base));
  1794. --ck-color-labeled-field-label-background: var(--ck-color-base-background);
  1795. }
  1796. .ck.ck-labeled-field-view {
  1797. border-radius: 0;
  1798. }
  1799. .ck-rounded-corners .ck.ck-labeled-field-view,
  1800. .ck.ck-labeled-field-view.ck-rounded-corners {
  1801. border-radius: var(--ck-border-radius);
  1802. }
  1803. .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper {
  1804. width: 100%;
  1805. }
  1806. .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1807. top: 0px;
  1808. pointer-events: none;
  1809. background: var(--ck-color-labeled-field-label-background);
  1810. padding: 0 calc(.5 * var(--ck-font-size-tiny));
  1811. line-height: initial;
  1812. font-weight: normal;
  1813. /* Prevent overflow when the label is longer than the input */
  1814. text-overflow: ellipsis;
  1815. overflow: hidden;
  1816. max-width: 100%;
  1817. transition:
  1818. transform var(--ck-labeled-field-view-transition),
  1819. padding var(--ck-labeled-field-view-transition),
  1820. background var(--ck-labeled-field-view-transition);
  1821. }
  1822. [dir="ltr"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1823. left: 0px;
  1824. transform-origin: 0 0;
  1825. /* By default, display the label scaled down above the field. */
  1826. transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
  1827. }
  1828. [dir="rtl"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1829. right: 0px;
  1830. transform-origin: 100% 0;
  1831. transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75);
  1832. }
  1833. @media (prefers-reduced-motion: reduce) {
  1834. .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1835. transition: none;
  1836. }
  1837. }
  1838. .ck.ck-labeled-field-view.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1839. color: var(--ck-color-base-error);
  1840. }
  1841. .ck.ck-labeled-field-view.ck-error .ck-input:not([readonly]) + .ck.ck-label {
  1842. color: var(--ck-color-base-error);
  1843. }
  1844. .ck.ck-labeled-field-view .ck-labeled-field-view__status {
  1845. font-size: var(--ck-font-size-small);
  1846. margin-top: var(--ck-spacing-small);
  1847. /* Let the info wrap to the next line to avoid stretching the layout horizontally.
  1848. The status could be very long. */
  1849. white-space: normal;
  1850. }
  1851. .ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error {
  1852. color: var(--ck-color-base-error);
  1853. }
  1854. /* Disabled fields and fields that have no focus should fade out. */
  1855. .ck.ck-labeled-field-view.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
  1856. .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1857. color: var(--ck-color-input-disabled-text);
  1858. }
  1859. /* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */
  1860. /* stylelint-disable-next-line no-descending-specificity */
  1861. .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
  1862. .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1863. /* Compensate for the default translate position. */
  1864. max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width));
  1865. background: transparent;
  1866. padding: 0;
  1867. }
  1868. [dir="ltr"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, [dir="ltr"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1869. transform: translate(var(--ck-labeled-field-label-default-position-x), var(--ck-labeled-field-label-default-position-y)) scale(1);
  1870. }
  1871. [dir="rtl"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, [dir="rtl"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  1872. transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x)), var(--ck-labeled-field-label-default-position-y)) scale(1);
  1873. }
  1874. /*------ DropdownView integration ----------------------------------------------------------------------------------- */
  1875. /* Make sure dropdown' background color in any of dropdown's state does not collide with labeled field. */
  1876. .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button {
  1877. background: transparent;
  1878. }
  1879. /* When the dropdown is "empty", the labeled field label replaces its label. */
  1880. .ck.ck-labeled-field-view.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
  1881. opacity: 0;
  1882. }
  1883. /* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */
  1884. .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
  1885. max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
  1886. }
  1887. /*
  1888. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1889. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1890. */
  1891. .ck.ck-labeled-input .ck-labeled-input__status {
  1892. font-size: var(--ck-font-size-small);
  1893. margin-top: var(--ck-spacing-small);
  1894. /* Let the info wrap to the next line to avoid stretching the layout horizontally.
  1895. The status could be very long. */
  1896. white-space: normal;
  1897. }
  1898. .ck.ck-labeled-input .ck-labeled-input__status_error {
  1899. color: var(--ck-color-base-error);
  1900. }
  1901. /*
  1902. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1903. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1904. */
  1905. /*
  1906. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1907. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1908. */
  1909. /**
  1910. * A class which indicates that an element holding it is disabled.
  1911. */
  1912. /*
  1913. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1914. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1915. */
  1916. /**
  1917. * Implements rounded corner interface for .ck-rounded-corners class.
  1918. *
  1919. * @see $ck-border-radius
  1920. */
  1921. /*
  1922. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1923. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1924. */
  1925. /**
  1926. * A helper to combine multiple shadows.
  1927. */
  1928. /**
  1929. * Gives an element a drop shadow so it looks like a floating panel.
  1930. */
  1931. /*
  1932. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  1933. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  1934. */
  1935. .ck.ck-list {
  1936. border-radius: 0;
  1937. list-style-type: none;
  1938. background: var(--ck-color-list-background);
  1939. /* A spacing at the beginning and end of the list */
  1940. padding: var(--ck-spacing-small) 0;
  1941. }
  1942. .ck-rounded-corners .ck.ck-list,
  1943. .ck.ck-list.ck-rounded-corners {
  1944. border-radius: var(--ck-border-radius);
  1945. }
  1946. .ck.ck-list__item {
  1947. cursor: default;
  1948. /* Almost as wide as menu bar items. */
  1949. min-width: 15em;
  1950. }
  1951. .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
  1952. padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
  1953. min-height: unset;
  1954. width: 100%;
  1955. border-radius: 0;
  1956. }
  1957. [dir="ltr"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
  1958. text-align: left;
  1959. }
  1960. [dir="rtl"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) {
  1961. text-align: right;
  1962. }
  1963. .ck.ck-list__item > .ck-button:not(.ck-list-item-button) .ck-button__label {
  1964. /* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
  1965. line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
  1966. }
  1967. .ck.ck-list__item > .ck-button:not(.ck-list-item-button):active {
  1968. box-shadow: none;
  1969. }
  1970. .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button) {
  1971. background: var(--ck-color-list-button-on-background);
  1972. color: var(--ck-color-list-button-on-text);
  1973. }
  1974. .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):active {
  1975. box-shadow: none;
  1976. }
  1977. .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):hover:not(.ck-disabled) {
  1978. background: var(--ck-color-list-button-on-background-focus);
  1979. }
  1980. .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):focus:not(.ck-disabled) {
  1981. border-color: var(--ck-color-base-background);
  1982. }
  1983. .ck.ck-list__item > .ck-button:not(.ck-list-item-button):hover:not(.ck-disabled) {
  1984. background: var(--ck-color-list-button-hover-background);
  1985. }
  1986. /* It's unnecessary to change the background/text of a switch toggle; it has different ways
  1987. of conveying its state (like the switcher) */
  1988. .ck.ck-list__item > .ck-button.ck-switchbutton.ck-on {
  1989. background: var(--ck-color-list-background);
  1990. color: inherit;
  1991. }
  1992. .ck.ck-list__item > .ck-button.ck-switchbutton.ck-on:hover:not(.ck-disabled) {
  1993. background: var(--ck-color-list-button-hover-background);
  1994. color: inherit;
  1995. }
  1996. .ck-list .ck-list__group {
  1997. padding-top: var(--ck-spacing-medium);
  1998. /* Lists come with an inner vertical padding. Don't duplicate it. */
  1999. }
  2000. .ck-list .ck-list__group:first-child {
  2001. padding-top: 0;
  2002. }
  2003. /* The group should have a border when it's not the first item. */
  2004. *:not(.ck-hidden) ~ .ck-list .ck-list__group {
  2005. border-top: 1px solid var(--ck-color-base-border);
  2006. }
  2007. .ck-list .ck-list__group > .ck-label {
  2008. font-size: 11px;
  2009. font-weight: bold;
  2010. padding: var(--ck-spacing-medium) var(--ck-spacing-large) 0;
  2011. }
  2012. .ck.ck-list__separator {
  2013. height: 1px;
  2014. width: 100%;
  2015. background: var(--ck-color-base-border);
  2016. /* Give the separator some air */
  2017. margin: var(--ck-spacing-small) 0;
  2018. }
  2019. /*
  2020. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2021. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2022. */
  2023. .ck.ck-menu-bar {
  2024. display: flex;
  2025. flex-wrap: wrap;
  2026. justify-content: flex-start;
  2027. background: var(--ck-color-base-background);
  2028. padding: var(--ck-spacing-small);
  2029. gap: var(--ck-spacing-small);
  2030. border: 1px solid var(--ck-color-toolbar-border);
  2031. width: 100%;
  2032. }
  2033. /*
  2034. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2035. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2036. */
  2037. .ck.ck-menu-bar__menu {
  2038. /* Enable font size inheritance, which allows fluid UI scaling. */
  2039. font-size: inherit;
  2040. }
  2041. .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level {
  2042. max-width: 100%;
  2043. }
  2044. /*
  2045. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2046. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2047. */
  2048. /*
  2049. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2050. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2051. */
  2052. /**
  2053. * A class which indicates that an element holding it is disabled.
  2054. */
  2055. /*
  2056. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2057. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2058. */
  2059. /**
  2060. * Implements a button of given background color.
  2061. *
  2062. * @param {String} $background - Background color of the button.
  2063. * @param {String} $border - Border color of the button.
  2064. */
  2065. /*
  2066. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2067. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2068. */
  2069. /*
  2070. * All menu buttons.
  2071. */
  2072. .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button {
  2073. width: 100%;
  2074. }
  2075. .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-button__label {
  2076. flex-grow: 1;
  2077. overflow: hidden;
  2078. text-overflow: ellipsis;
  2079. }
  2080. .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button.ck-disabled > .ck-button__label {
  2081. opacity: var(--ck-disabled-opacity);
  2082. }
  2083. [dir="ltr"] .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button:not(.ck-button_with-text) {
  2084. padding-left: var(--ck-spacing-small);
  2085. }
  2086. [dir="rtl"] .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button:not(.ck-button_with-text) {
  2087. padding-right: var(--ck-spacing-small);
  2088. }
  2089. /*
  2090. * Top-level menu buttons only.
  2091. */
  2092. .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button {
  2093. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  2094. min-height: unset;
  2095. }
  2096. .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button .ck-button__label {
  2097. width: unset;
  2098. line-height: unset;
  2099. /*
  2100. * Top-level buttons don't use ellipsis and overflow: hidden clips descenders.
  2101. * See https://github.com/ckeditor/ckeditor5/issues/17422.
  2102. */
  2103. overflow: visible;
  2104. }
  2105. .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button.ck-on {
  2106. border-bottom-left-radius: 0;
  2107. border-bottom-right-radius: 0;
  2108. }
  2109. .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button .ck-icon {
  2110. display: none;
  2111. }
  2112. /*
  2113. * Sub-menu buttons.
  2114. */
  2115. .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button {
  2116. border-radius: 0;
  2117. }
  2118. .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
  2119. width: var(--ck-dropdown-arrow-size);
  2120. }
  2121. [dir="ltr"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
  2122. transform: rotate(-90deg);
  2123. /* A space to accommodate the triangle. */
  2124. margin-left: var(--ck-spacing-standard);
  2125. /* Nudge the arrow gently to the right because its center of gravity is to the left */
  2126. margin-right: calc(-1 * var(--ck-spacing-small));
  2127. }
  2128. [dir="rtl"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
  2129. transform: rotate(90deg);
  2130. left: var(--ck-spacing-standard);
  2131. /* A space to accommodate the triangle. */
  2132. margin-right: var(--ck-spacing-small);
  2133. /* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */
  2134. margin-left: calc(-1 * var(--ck-spacing-small));
  2135. }
  2136. .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button.ck-disabled > .ck-menu-bar__menu__button__arrow {
  2137. opacity: var(--ck-disabled-opacity);
  2138. }
  2139. /*
  2140. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2141. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2142. */
  2143. :root {
  2144. --ck-menu-bar-menu-item-min-width: 18em;
  2145. }
  2146. .ck.ck-menu-bar__menu .ck.ck-menu-bar__menu__item {
  2147. min-width: var(--ck-menu-bar-menu-item-min-width);
  2148. }
  2149. /*
  2150. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2151. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2152. */
  2153. /*
  2154. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2155. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2156. */
  2157. /*
  2158. * List item buttons.
  2159. */
  2160. .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button {
  2161. border-radius: 0;
  2162. }
  2163. .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container,
  2164. .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container .ck-spinner {
  2165. /* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */
  2166. --ck-toolbar-spinner-size: 20px;
  2167. }
  2168. .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container {
  2169. /* This ensures margins corresponding to the .ck-icon. */
  2170. font-size: var(--ck-icon-font-size);
  2171. }
  2172. [dir="ltr"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container {
  2173. margin-right: var(--ck-spacing-medium);
  2174. }
  2175. [dir="rtl"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container {
  2176. margin-left: var(--ck-spacing-medium);
  2177. }
  2178. /*
  2179. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2180. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2181. */
  2182. /*
  2183. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2184. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2185. */
  2186. /**
  2187. * Implements rounded corner interface for .ck-rounded-corners class.
  2188. *
  2189. * @see $ck-border-radius
  2190. */
  2191. /*
  2192. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2193. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2194. */
  2195. /**
  2196. * A helper to combine multiple shadows.
  2197. */
  2198. /**
  2199. * Gives an element a drop shadow so it looks like a floating panel.
  2200. */
  2201. /*
  2202. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2203. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2204. */
  2205. /**
  2206. * A visual style of focused element's border.
  2207. */
  2208. :root {
  2209. --ck-menu-bar-menu-panel-max-width: 75vw;
  2210. }
  2211. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
  2212. border-radius: 0;
  2213. background: var(--ck-color-dropdown-panel-background);
  2214. border: 1px solid var(--ck-color-dropdown-panel-border);
  2215. bottom: 0;
  2216. height: fit-content;
  2217. max-width: var(--ck-menu-bar-menu-panel-max-width);
  2218. }
  2219. .ck-rounded-corners .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel,
  2220. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-rounded-corners {
  2221. border-radius: var(--ck-border-radius);
  2222. }
  2223. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
  2224. box-shadow: var(--ck-drop-shadow), 0 0;
  2225. /* Corner border radius consistent with the button. */
  2226. }
  2227. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es,
  2228. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se {
  2229. border-top-left-radius: 0;
  2230. }
  2231. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws,
  2232. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw {
  2233. border-top-right-radius: 0;
  2234. }
  2235. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en,
  2236. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne {
  2237. border-bottom-left-radius: 0;
  2238. }
  2239. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn,
  2240. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw {
  2241. border-bottom-right-radius: 0;
  2242. }
  2243. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel:focus {
  2244. outline: none;
  2245. }
  2246. .ck.ck-menu-bar .ck-list-item-button:focus,
  2247. .ck.ck-menu-bar .ck-list-item-button:active {
  2248. border-color: transparent;
  2249. box-shadow: none;
  2250. }
  2251. .ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:focus,
  2252. .ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:active {
  2253. /* Fix truncated shadows due to rendering order. */
  2254. position: relative;
  2255. z-index: 2;
  2256. /* Disable native outline. */
  2257. outline: none;
  2258. border: var(--ck-focus-ring);
  2259. box-shadow: var(--ck-focus-outer-shadow), 0 0;
  2260. }
  2261. /*
  2262. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2263. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2264. */
  2265. /*
  2266. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2267. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2268. */
  2269. /**
  2270. * Implements rounded corner interface for .ck-rounded-corners class.
  2271. *
  2272. * @see $ck-border-radius
  2273. */
  2274. /*
  2275. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2276. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2277. */
  2278. /**
  2279. * A helper to combine multiple shadows.
  2280. */
  2281. /**
  2282. * Gives an element a drop shadow so it looks like a floating panel.
  2283. */
  2284. :root {
  2285. --ck-balloon-border-width: 1px;
  2286. --ck-balloon-arrow-offset: 2px;
  2287. --ck-balloon-arrow-height: 10px;
  2288. --ck-balloon-arrow-half-width: 8px;
  2289. --ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop);
  2290. }
  2291. .ck.ck-balloon-panel {
  2292. border-radius: 0;
  2293. min-height: 15px;
  2294. background: var(--ck-color-panel-background);
  2295. border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border);
  2296. }
  2297. .ck-rounded-corners .ck.ck-balloon-panel,
  2298. .ck.ck-balloon-panel.ck-rounded-corners {
  2299. border-radius: var(--ck-border-radius);
  2300. }
  2301. .ck.ck-balloon-panel {
  2302. box-shadow: var(--ck-drop-shadow), 0 0;
  2303. }
  2304. .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before,
  2305. .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after {
  2306. width: 0;
  2307. height: 0;
  2308. border-style: solid;
  2309. }
  2310. .ck.ck-balloon-panel[class*="arrow_n"]::before,
  2311. .ck.ck-balloon-panel[class*="arrow_n"]::after {
  2312. border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
  2313. }
  2314. .ck.ck-balloon-panel[class*="arrow_n"]::before {
  2315. border-color: transparent transparent var(--ck-color-panel-border) transparent;
  2316. margin-top: calc( -1 * var(--ck-balloon-border-width) );
  2317. }
  2318. .ck.ck-balloon-panel[class*="arrow_n"]::after {
  2319. border-color: transparent transparent var(--ck-color-panel-background) transparent;
  2320. margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
  2321. }
  2322. .ck.ck-balloon-panel[class*="arrow_s"]::before,
  2323. .ck.ck-balloon-panel[class*="arrow_s"]::after {
  2324. border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
  2325. }
  2326. .ck.ck-balloon-panel[class*="arrow_s"]::before {
  2327. border-color: var(--ck-color-panel-border) transparent transparent;
  2328. filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
  2329. margin-bottom: calc( -1 * var(--ck-balloon-border-width) );
  2330. }
  2331. .ck.ck-balloon-panel[class*="arrow_s"]::after {
  2332. border-color: var(--ck-color-panel-background) transparent transparent transparent;
  2333. margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
  2334. }
  2335. .ck.ck-balloon-panel[class*="arrow_e"]::before,
  2336. .ck.ck-balloon-panel[class*="arrow_e"]::after {
  2337. border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height);
  2338. }
  2339. .ck.ck-balloon-panel[class*="arrow_e"]::before {
  2340. border-color: transparent transparent transparent var(--ck-color-panel-border);
  2341. margin-right: calc( -1 * var(--ck-balloon-border-width) );
  2342. }
  2343. .ck.ck-balloon-panel[class*="arrow_e"]::after {
  2344. border-color: transparent transparent transparent var(--ck-color-panel-background);
  2345. margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
  2346. }
  2347. .ck.ck-balloon-panel[class*="arrow_w"]::before,
  2348. .ck.ck-balloon-panel[class*="arrow_w"]::after {
  2349. border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0;
  2350. }
  2351. .ck.ck-balloon-panel[class*="arrow_w"]::before {
  2352. border-color: transparent var(--ck-color-panel-border) transparent transparent;
  2353. margin-left: calc( -1 * var(--ck-balloon-border-width) );
  2354. }
  2355. .ck.ck-balloon-panel[class*="arrow_w"]::after {
  2356. border-color: transparent var(--ck-color-panel-background) transparent transparent;
  2357. margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
  2358. }
  2359. .ck.ck-balloon-panel.ck-balloon-panel_arrow_n::before,
  2360. .ck.ck-balloon-panel.ck-balloon-panel_arrow_n::after {
  2361. left: 50%;
  2362. margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
  2363. top: calc(-1 * var(--ck-balloon-arrow-height));
  2364. }
  2365. .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::before,
  2366. .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::after {
  2367. left: calc(2 * var(--ck-balloon-arrow-half-width));
  2368. top: calc(-1 * var(--ck-balloon-arrow-height));
  2369. }
  2370. .ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::before,
  2371. .ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::after {
  2372. right: calc(2 * var(--ck-balloon-arrow-half-width));
  2373. top: calc(-1 * var(--ck-balloon-arrow-height));
  2374. }
  2375. .ck.ck-balloon-panel.ck-balloon-panel_arrow_s::before,
  2376. .ck.ck-balloon-panel.ck-balloon-panel_arrow_s::after {
  2377. left: 50%;
  2378. margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
  2379. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  2380. }
  2381. .ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::before,
  2382. .ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::after {
  2383. left: calc(2 * var(--ck-balloon-arrow-half-width));
  2384. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  2385. }
  2386. .ck.ck-balloon-panel.ck-balloon-panel_arrow_se::before,
  2387. .ck.ck-balloon-panel.ck-balloon-panel_arrow_se::after {
  2388. right: calc(2 * var(--ck-balloon-arrow-half-width));
  2389. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  2390. }
  2391. .ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::before,
  2392. .ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::after {
  2393. right: 25%;
  2394. margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
  2395. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  2396. }
  2397. .ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::before,
  2398. .ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::after {
  2399. left: 25%;
  2400. margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
  2401. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  2402. }
  2403. .ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::before,
  2404. .ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::after {
  2405. right: 25%;
  2406. margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
  2407. top: calc(-1 * var(--ck-balloon-arrow-height));
  2408. }
  2409. .ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::before,
  2410. .ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::after {
  2411. left: 25%;
  2412. margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
  2413. top: calc(-1 * var(--ck-balloon-arrow-height));
  2414. }
  2415. .ck.ck-balloon-panel.ck-balloon-panel_arrow_e::before,
  2416. .ck.ck-balloon-panel.ck-balloon-panel_arrow_e::after {
  2417. right: calc(-1 * var(--ck-balloon-arrow-height));
  2418. margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
  2419. top: 50%;
  2420. }
  2421. .ck.ck-balloon-panel.ck-balloon-panel_arrow_w::before,
  2422. .ck.ck-balloon-panel.ck-balloon-panel_arrow_w::after {
  2423. left: calc(-1 * var(--ck-balloon-arrow-height));
  2424. margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
  2425. top: 50%;
  2426. }
  2427. /*
  2428. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2429. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2430. */
  2431. .ck .ck-balloon-rotator__navigation {
  2432. background: var(--ck-color-toolbar-background);
  2433. border-bottom: 1px solid var(--ck-color-toolbar-border);
  2434. padding: 0 var(--ck-spacing-small);
  2435. /* Let's keep similar appearance to `ck-toolbar`. */
  2436. }
  2437. .ck .ck-balloon-rotator__navigation > * {
  2438. margin-right: var(--ck-spacing-small);
  2439. margin-top: var(--ck-spacing-small);
  2440. margin-bottom: var(--ck-spacing-small);
  2441. }
  2442. /* Gives counter more breath than buttons. */
  2443. .ck .ck-balloon-rotator__navigation .ck-balloon-rotator__counter {
  2444. margin-right: var(--ck-spacing-standard);
  2445. /* We need to use smaller margin because of previous button's right margin. */
  2446. margin-left: var(--ck-spacing-small);
  2447. }
  2448. /* Disable default annotation shadow inside rotator with fake panels. */
  2449. .ck .ck-balloon-rotator__content .ck.ck-annotation-wrapper {
  2450. box-shadow: none;
  2451. }
  2452. /*
  2453. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2454. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2455. */
  2456. /*
  2457. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2458. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2459. */
  2460. /**
  2461. * A helper to combine multiple shadows.
  2462. */
  2463. /**
  2464. * Gives an element a drop shadow so it looks like a floating panel.
  2465. */
  2466. :root {
  2467. --ck-balloon-fake-panel-offset-horizontal: 6px;
  2468. --ck-balloon-fake-panel-offset-vertical: 6px;
  2469. }
  2470. /* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
  2471. .ck .ck-fake-panel div {
  2472. box-shadow: var(--ck-drop-shadow), 0 0;
  2473. min-height: 15px;
  2474. background: var(--ck-color-panel-background);
  2475. border: 1px solid var(--ck-color-panel-border);
  2476. border-radius: var(--ck-border-radius);
  2477. width: 100%;
  2478. height: 100%;
  2479. }
  2480. .ck .ck-fake-panel div:nth-child( 1 ) {
  2481. margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
  2482. margin-top: var(--ck-balloon-fake-panel-offset-vertical);
  2483. }
  2484. .ck .ck-fake-panel div:nth-child( 2 ) {
  2485. margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2);
  2486. margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2);
  2487. }
  2488. .ck .ck-fake-panel div:nth-child( 3 ) {
  2489. margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3);
  2490. margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3);
  2491. }
  2492. /* If balloon is positioned above element, we need to move fake panel to the top. */
  2493. .ck .ck-balloon-panel_arrow_s + .ck-fake-panel,
  2494. .ck .ck-balloon-panel_arrow_se + .ck-fake-panel,
  2495. .ck .ck-balloon-panel_arrow_sw + .ck-fake-panel {
  2496. --ck-balloon-fake-panel-offset-vertical: -6px;
  2497. }
  2498. /*
  2499. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2500. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2501. */
  2502. /*
  2503. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2504. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2505. */
  2506. /**
  2507. * A helper to combine multiple shadows.
  2508. */
  2509. /**
  2510. * Gives an element a drop shadow so it looks like a floating panel.
  2511. */
  2512. .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
  2513. box-shadow: var(--ck-drop-shadow), 0 0;
  2514. border-width: 0 1px 1px;
  2515. border-top-left-radius: 0;
  2516. border-top-right-radius: 0;
  2517. }
  2518. /*
  2519. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2520. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2521. */
  2522. /*
  2523. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2524. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2525. */
  2526. /*
  2527. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2528. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2529. */
  2530. .ck-vertical-form > .ck-button:nth-last-child(2)::after {
  2531. border-right: 1px solid var(--ck-color-base-border);
  2532. }
  2533. .ck.ck-responsive-form {
  2534. padding: var(--ck-spacing-large);
  2535. }
  2536. .ck.ck-responsive-form:focus {
  2537. /* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
  2538. outline: none;
  2539. }
  2540. [dir="ltr"] .ck.ck-responsive-form > :not(:first-child) {
  2541. margin-left: var(--ck-spacing-standard);
  2542. }
  2543. [dir="rtl"] .ck.ck-responsive-form > :not(:last-child) {
  2544. margin-left: var(--ck-spacing-standard);
  2545. }
  2546. @media screen and (max-width: 600px) {
  2547. .ck.ck-responsive-form {
  2548. padding: 0;
  2549. width: calc(.8 * var(--ck-input-width));
  2550. }
  2551. .ck.ck-responsive-form .ck-labeled-field-view {
  2552. margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
  2553. }
  2554. .ck.ck-responsive-form .ck-labeled-field-view .ck-input-text,
  2555. .ck.ck-responsive-form .ck-labeled-field-view .ck-input-number {
  2556. min-width: 0;
  2557. width: 100%;
  2558. }
  2559. /* Let the long error messages wrap in the narrow form. */
  2560. .ck.ck-responsive-form .ck-labeled-field-view .ck-labeled-field-view__error {
  2561. white-space: normal;
  2562. }
  2563. /* Styles for two last buttons in the form (save&cancel, edit&unlink, etc.). */
  2564. .ck.ck-responsive-form > .ck-button:nth-last-child(2)::after {
  2565. border-right: 1px solid var(--ck-color-base-border);
  2566. }
  2567. .ck.ck-responsive-form > .ck-button:nth-last-child(1),
  2568. .ck.ck-responsive-form > .ck-button:nth-last-child(2) {
  2569. padding: var(--ck-spacing-standard);
  2570. margin-top: var(--ck-spacing-large);
  2571. border-radius: 0;
  2572. }
  2573. .ck.ck-responsive-form > .ck-button:nth-last-child(1):not(:focus), .ck.ck-responsive-form > .ck-button:nth-last-child(2):not(:focus) {
  2574. border-top: 1px solid var(--ck-color-base-border);
  2575. }
  2576. [dir="ltr"] .ck.ck-responsive-form > .ck-button:nth-last-child(1), [dir="ltr"] .ck.ck-responsive-form > .ck-button:nth-last-child(2) {
  2577. margin-left: 0;
  2578. }
  2579. [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(1), [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(2) {
  2580. margin-left: 0;
  2581. }
  2582. [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(1):last-of-type, [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(2):last-of-type {
  2583. border-right: 1px solid var(--ck-color-base-border);
  2584. }
  2585. }
  2586. /*
  2587. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2588. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2589. */
  2590. /*
  2591. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2592. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2593. */
  2594. :root {
  2595. --ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
  2596. }
  2597. .ck.ck-search > .ck-labeled-field-view .ck-input {
  2598. width: 100%;
  2599. }
  2600. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon {
  2601. --ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
  2602. }
  2603. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon > .ck-labeled-field-view__input-wrapper > .ck-icon {
  2604. opacity: .5;
  2605. pointer-events: none;
  2606. }
  2607. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input {
  2608. width: 100%;
  2609. }
  2610. [dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input {
  2611. padding-left: var(--ck-search-field-view-horizontal-spacing);
  2612. }
  2613. [dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input:not(.ck-input-text_empty) {
  2614. padding-left: var(--ck-search-field-view-horizontal-spacing);
  2615. }
  2616. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset {
  2617. --ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
  2618. }
  2619. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset.ck-labeled-field-view_empty {
  2620. --ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
  2621. }
  2622. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset {
  2623. min-width: auto;
  2624. min-height: auto;
  2625. background: none;
  2626. opacity: .5;
  2627. padding: 0;
  2628. }
  2629. [dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset {
  2630. right: var(--ck-spacing-medium);
  2631. }
  2632. [dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset {
  2633. left: var(--ck-spacing-medium);
  2634. }
  2635. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset:hover {
  2636. opacity: 1;
  2637. }
  2638. .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input {
  2639. width: 100%;
  2640. }
  2641. [dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input:not(.ck-input-text_empty) {
  2642. padding-right: var(--ck-search-field-view-horizontal-spacing);
  2643. }
  2644. [dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input {
  2645. padding-right: var(--ck-search-field-view-horizontal-spacing);
  2646. }
  2647. .ck.ck-search > .ck-search__results {
  2648. min-width: 100%;
  2649. }
  2650. .ck.ck-search > .ck-search__results > .ck-search__info {
  2651. width: 100%;
  2652. padding: var(--ck-spacing-medium) var(--ck-spacing-large);
  2653. }
  2654. .ck.ck-search > .ck-search__results > .ck-search__info * {
  2655. white-space: normal;
  2656. }
  2657. .ck.ck-search > .ck-search__results > .ck-search__info > span:first-child {
  2658. font-weight: bold;
  2659. }
  2660. .ck.ck-search > .ck-search__results > .ck-search__info > span:last-child {
  2661. margin-top: var(--ck-spacing-medium);
  2662. }
  2663. /*
  2664. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2665. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2666. */
  2667. :root {
  2668. --ck-toolbar-spinner-size: 18px;
  2669. }
  2670. .ck.ck-spinner-container {
  2671. width: var(--ck-toolbar-spinner-size);
  2672. height: var(--ck-toolbar-spinner-size);
  2673. animation: 1.5s infinite ck-spinner-rotate linear;
  2674. }
  2675. @media (prefers-reduced-motion: reduce) {
  2676. .ck.ck-spinner-container {
  2677. animation-duration: 3s;
  2678. }
  2679. }
  2680. .ck.ck-spinner {
  2681. width: var(--ck-toolbar-spinner-size);
  2682. height: var(--ck-toolbar-spinner-size);
  2683. border-radius: 50%;
  2684. border: 2px solid var(--ck-color-text);
  2685. border-top-color: transparent;
  2686. }
  2687. @keyframes ck-spinner-rotate {
  2688. to {
  2689. transform: rotate(360deg)
  2690. }
  2691. }
  2692. /*
  2693. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2694. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2695. */
  2696. /*
  2697. * This fixes a problem in Firefox when the initial height of the complement does not match the number of rows.
  2698. * This bug is especially visible when rows=1.
  2699. */
  2700. .ck-textarea {
  2701. overflow-x: hidden
  2702. }
  2703. /*
  2704. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2705. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2706. */
  2707. :root {
  2708. --ck-color-block-toolbar-button: var(--ck-color-text);
  2709. --ck-block-toolbar-button-size: var(--ck-font-size-normal);
  2710. }
  2711. .ck.ck-block-toolbar-button {
  2712. color: var(--ck-color-block-toolbar-button);
  2713. font-size: var(--ck-block-toolbar-size);
  2714. }
  2715. /*
  2716. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2717. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2718. */
  2719. /*
  2720. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2721. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2722. */
  2723. /**
  2724. * Implements rounded corner interface for .ck-rounded-corners class.
  2725. *
  2726. * @see $ck-border-radius
  2727. */
  2728. /*
  2729. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2730. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2731. */
  2732. .ck.ck-toolbar {
  2733. border-radius: 0;
  2734. background: var(--ck-color-toolbar-background);
  2735. padding: 0 var(--ck-spacing-small);
  2736. border: 1px solid var(--ck-color-toolbar-border);
  2737. }
  2738. .ck-rounded-corners .ck.ck-toolbar,
  2739. .ck.ck-toolbar.ck-rounded-corners {
  2740. border-radius: var(--ck-border-radius);
  2741. }
  2742. .ck.ck-toolbar .ck.ck-toolbar__separator {
  2743. height: var(--ck-icon-size);
  2744. width: 1px;
  2745. min-width: 1px;
  2746. background: var(--ck-color-toolbar-border);
  2747. /*
  2748. * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
  2749. * See https://github.com/ckeditor/ckeditor5/issues/7493.
  2750. */
  2751. margin-top: var(--ck-spacing-small);
  2752. margin-bottom: var(--ck-spacing-small);
  2753. }
  2754. .ck.ck-toolbar .ck-toolbar__line-break {
  2755. height: 0;
  2756. }
  2757. .ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break) {
  2758. /* (#11) Separate toolbar items. */
  2759. margin-right: var(--ck-spacing-small);
  2760. }
  2761. /* Don't display a separator after an empty items container, for instance,
  2762. when all items were grouped */
  2763. .ck.ck-toolbar > .ck-toolbar__items:empty + .ck.ck-toolbar__separator {
  2764. display: none;
  2765. }
  2766. .ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break),
  2767. .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown {
  2768. /* Make sure items wrapped to the next line have v-spacing */
  2769. margin-top: var(--ck-spacing-small);
  2770. margin-bottom: var(--ck-spacing-small);
  2771. }
  2772. .ck.ck-toolbar.ck-toolbar_vertical {
  2773. /* Items in a vertical toolbar span the entire width. */
  2774. padding: 0;
  2775. /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
  2776. }
  2777. .ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items > .ck {
  2778. /* Items in a vertical toolbar should span the horizontal space. */
  2779. width: 100%;
  2780. /* Items in a vertical toolbar should have no margin. */
  2781. margin: 0;
  2782. /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
  2783. border-radius: 0;
  2784. }
  2785. .ck.ck-toolbar.ck-toolbar_compact {
  2786. /* No spacing around items. */
  2787. padding: 0;
  2788. }
  2789. .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > * {
  2790. /* Compact toolbar items have no spacing between them. */
  2791. margin: 0;
  2792. /* "Middle" children should have no rounded corners. */
  2793. }
  2794. .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > *:not(:first-child):not(:last-child) {
  2795. border-radius: 0;
  2796. }
  2797. /*
  2798. * Dropdown button has asymmetric padding to fit the arrow.
  2799. * This button has no arrow so let's revert that padding back to normal.
  2800. */
  2801. .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck.ck-button.ck-dropdown__button {
  2802. padding-left: var(--ck-spacing-tiny);
  2803. }
  2804. /* A drop-down containing the nested toolbar with configured items. */
  2805. /* Prevent empty space in the panel when the dropdown label is visible and long but the toolbar has few items. */
  2806. .ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-dropdown__panel {
  2807. min-width: auto;
  2808. }
  2809. .ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-button > .ck-button__label {
  2810. max-width: 7em;
  2811. width: auto;
  2812. }
  2813. .ck.ck-toolbar:focus {
  2814. outline: none;
  2815. }
  2816. .ck-toolbar-container .ck.ck-toolbar {
  2817. border: 0;
  2818. }
  2819. /* stylelint-disable */
  2820. /*
  2821. * Styles for RTL toolbars.
  2822. *
  2823. * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  2824. * because its parent is not controlled by the editor framework.
  2825. */
  2826. [dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck {
  2827. margin-right: 0;
  2828. }
  2829. [dir="rtl"] .ck.ck-toolbar:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"]:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
  2830. /* (#11) Separate toolbar items. */
  2831. margin-left: var(--ck-spacing-small);
  2832. }
  2833. [dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck:last-child {
  2834. margin-left: 0;
  2835. }
  2836. /* No rounded corners on the right side of the first child. */
  2837. [dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:first-child {
  2838. border-top-left-radius: 0;
  2839. border-bottom-left-radius: 0;
  2840. }
  2841. /* No rounded corners on the left side of the last child. */
  2842. [dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:last-child {
  2843. border-top-right-radius: 0;
  2844. border-bottom-right-radius: 0;
  2845. }
  2846. /* Separate the the separator form the grouping dropdown when some items are grouped. */
  2847. [dir="rtl"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="rtl"] > .ck.ck-toolbar__separator {
  2848. margin-left: var(--ck-spacing-small);
  2849. }
  2850. /* Some spacing between the items and the separator before the grouped items dropdown. */
  2851. [dir="rtl"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="rtl"] > .ck-toolbar__items:not(:empty):not(:only-child) {
  2852. margin-left: var(--ck-spacing-small);
  2853. }
  2854. /*
  2855. * Styles for LTR toolbars.
  2856. *
  2857. * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  2858. * because its parent is not controlled by the editor framework.
  2859. */
  2860. [dir="ltr"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="ltr"] > .ck-toolbar__items > .ck:last-child {
  2861. margin-right: 0;
  2862. }
  2863. /* No rounded corners on the right side of the first child. */
  2864. [dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:first-child {
  2865. border-top-right-radius: 0;
  2866. border-bottom-right-radius: 0;
  2867. }
  2868. /* No rounded corners on the left side of the last child. */
  2869. [dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:last-child {
  2870. border-top-left-radius: 0;
  2871. border-bottom-left-radius: 0;
  2872. }
  2873. /* Separate the the separator form the grouping dropdown when some items are grouped. */
  2874. [dir="ltr"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="ltr"] > .ck.ck-toolbar__separator {
  2875. margin-right: var(--ck-spacing-small);
  2876. }
  2877. /* Some spacing between the items and the separator before the grouped items dropdown. */
  2878. [dir="ltr"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="ltr"] > .ck-toolbar__items:not(:empty):not(:only-child) {
  2879. margin-right: var(--ck-spacing-small);
  2880. }
  2881. /* stylelint-enable */
  2882. /*
  2883. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2884. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2885. */
  2886. /*
  2887. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2888. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2889. */
  2890. /**
  2891. * Implements rounded corner interface for .ck-rounded-corners class.
  2892. *
  2893. * @see $ck-border-radius
  2894. */
  2895. .ck.ck-balloon-panel.ck-tooltip {
  2896. --ck-balloon-border-width: 0px;
  2897. --ck-balloon-arrow-offset: 0px;
  2898. --ck-balloon-arrow-half-width: 4px;
  2899. --ck-balloon-arrow-height: 4px;
  2900. --ck-tooltip-text-padding: 4px;
  2901. --ck-color-panel-background: var(--ck-color-tooltip-background);
  2902. padding: 0 var(--ck-spacing-medium);
  2903. /* Reset balloon panel styles */
  2904. box-shadow: none;
  2905. }
  2906. .ck.ck-balloon-panel.ck-tooltip .ck-tooltip__text {
  2907. font-size: .9em;
  2908. line-height: 1.5;
  2909. color: var(--ck-color-tooltip-text);
  2910. }
  2911. .ck.ck-balloon-panel.ck-tooltip.ck-tooltip_multi-line .ck-tooltip__text {
  2912. white-space: break-spaces;
  2913. display: inline-block;
  2914. padding: var(--ck-tooltip-text-padding) 0;
  2915. max-width: 200px;
  2916. }
  2917. /* Hide the default shadow of the .ck-balloon-panel tip */
  2918. .ck.ck-balloon-panel.ck-tooltip::before {
  2919. display: none;
  2920. }
  2921. /* Editor */
  2922. /*
  2923. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2924. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2925. */
  2926. /*
  2927. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2928. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2929. */
  2930. /**
  2931. * Implements rounded corner interface for .ck-rounded-corners class.
  2932. *
  2933. * @see $ck-border-radius
  2934. */
  2935. .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
  2936. border-radius: 0;
  2937. border: 1px solid var(--ck-color-base-border);
  2938. border-bottom-width: 0;
  2939. }
  2940. .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
  2941. .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-rounded-corners {
  2942. border-radius: var(--ck-border-radius);
  2943. border-bottom-left-radius: 0;
  2944. border-bottom-right-radius: 0;
  2945. }
  2946. .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
  2947. border-bottom-width: 1px;
  2948. }
  2949. .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-menu-bar {
  2950. border: 0;
  2951. border-bottom: 1px solid var(--ck-color-base-border);
  2952. }
  2953. .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar {
  2954. border: 0;
  2955. }
  2956. /* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
  2957. .ck.ck-editor__main > .ck-editor__editable {
  2958. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */
  2959. background: var(--ck-color-base-background);
  2960. border-radius: 0;
  2961. }
  2962. .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
  2963. .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
  2964. border-radius: var(--ck-border-radius);
  2965. border-top-left-radius: 0;
  2966. border-top-right-radius: 0;
  2967. }
  2968. .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  2969. border-color: var(--ck-color-base-border);
  2970. }
  2971. /* Plugins */
  2972. /*
  2973. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2974. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2975. */
  2976. /*
  2977. * Classes used by the "fake visual selection" displayed in the content when an input
  2978. * in the bookmark UI has focus (the browser does not render the native selection in this state).
  2979. */
  2980. .ck .ck-fake-bookmark-selection {
  2981. background: var(--ck-color-link-fake-selection);
  2982. }
  2983. /* A collapsed fake visual selection. */
  2984. .ck .ck-fake-bookmark-selection_collapsed {
  2985. height: 100%;
  2986. border-right: 1px solid var(--ck-color-base-text);
  2987. margin-right: -1px;
  2988. outline: solid 1px hsla(0, 0%, 100%, .5);
  2989. }
  2990. /*
  2991. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2992. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2993. */
  2994. /*
  2995. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  2996. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  2997. */
  2998. :root {
  2999. --ck-clipboard-drop-target-dot-width: 12px;
  3000. --ck-clipboard-drop-target-dot-height: 8px;
  3001. --ck-clipboard-drop-target-color: var(--ck-color-focus-border);
  3002. }
  3003. /*
  3004. * Vertical drop target (in text).
  3005. */
  3006. .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span {
  3007. bottom: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
  3008. top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
  3009. border: 1px solid var(--ck-clipboard-drop-target-color);
  3010. background: var(--ck-clipboard-drop-target-color);
  3011. margin-left: -1px;
  3012. /* The triangle above the marker */
  3013. }
  3014. .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span::after {
  3015. content: '';
  3016. width: 0;
  3017. height: 0;
  3018. display: block;
  3019. position: absolute;
  3020. left: 50%;
  3021. top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
  3022. transform: translateX(-50%);
  3023. border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent;
  3024. border-width: calc(var(--ck-clipboard-drop-target-dot-height)) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width));
  3025. border-style: solid;
  3026. }
  3027. /*
  3028. * Styles of the widget that it a drop target.
  3029. */
  3030. .ck.ck-editor__editable .ck-widget.ck-clipboard-drop-target-range {
  3031. outline: var(--ck-widget-outline-thickness) solid var(--ck-clipboard-drop-target-color) !important;
  3032. }
  3033. /*
  3034. * Styles of the widget being dragged (its preview).
  3035. */
  3036. .ck.ck-editor__editable .ck-widget:-webkit-drag {
  3037. zoom: 0.6;
  3038. outline: none !important;
  3039. }
  3040. .ck.ck-clipboard-drop-target-line {
  3041. height: 0;
  3042. border: 1px solid var(--ck-clipboard-drop-target-color);
  3043. background: var(--ck-clipboard-drop-target-color);
  3044. margin-top: -1px;
  3045. }
  3046. .ck.ck-clipboard-drop-target-line::before {
  3047. content: '';
  3048. position: absolute;
  3049. top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width));
  3050. width: 0;
  3051. height: 0;
  3052. border-style: solid;
  3053. }
  3054. [dir="ltr"] .ck.ck-clipboard-drop-target-line::before {
  3055. left: -1px;
  3056. border-width: calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height);
  3057. border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color);
  3058. }
  3059. [dir="rtl"] .ck.ck-clipboard-drop-target-line::before {
  3060. right: -1px;
  3061. border-width:calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0;
  3062. border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent;
  3063. }
  3064. /*
  3065. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3066. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3067. */
  3068. :root {
  3069. --ck-color-code-block-label-background: hsl(0, 0%, 46%);
  3070. }
  3071. .ck.ck-editor__editable pre[data-language]::after {
  3072. top: -1px;
  3073. right: 10px;
  3074. background: var(--ck-color-code-block-label-background);
  3075. font-size: 10px;
  3076. font-family: var(--ck-font-face);
  3077. line-height: 16px;
  3078. padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
  3079. color: hsl(0, 0%, 100%);
  3080. white-space: nowrap;
  3081. }
  3082. .ck.ck-code-block-dropdown .ck-dropdown__panel {
  3083. /* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */
  3084. max-height: 250px;
  3085. overflow-y: auto;
  3086. overflow-x: hidden;
  3087. }
  3088. /*
  3089. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3090. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3091. */
  3092. /*
  3093. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3094. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3095. */
  3096. /* See ckeditor/ckeditor5#936. */
  3097. @media (forced-colors: active) {
  3098. .ck.ck-placeholder, .ck .ck-placeholder {
  3099. /*
  3100. * This is needed for Edge on Windows to use the right color for the placeholder content (::before).
  3101. * See https://github.com/ckeditor/ckeditor5/issues/14907.
  3102. */
  3103. forced-color-adjust: preserve-parent-color;
  3104. }
  3105. }
  3106. .ck.ck-placeholder::before, .ck .ck-placeholder::before {
  3107. cursor: text;
  3108. }
  3109. @media (forced-colors: none) {
  3110. .ck.ck-placeholder::before, .ck .ck-placeholder::before {
  3111. color: var(--ck-color-engine-placeholder-text);
  3112. }
  3113. }
  3114. @media (forced-colors: active) {
  3115. .ck.ck-placeholder::before, .ck .ck-placeholder::before {
  3116. /*
  3117. * In the high contrast mode there is no telling between regular and placeholder text. Using
  3118. * italic text to address that issue. See https://github.com/ckeditor/ckeditor5/issues/14907.
  3119. */
  3120. font-style: italic;
  3121. /*
  3122. * Without this margin, the caret will not show up and blink when the user puts the selection
  3123. * in the placeholder (Edge on Windows). See https://github.com/ckeditor/ckeditor5/issues/14907.
  3124. */
  3125. margin-left: 1px;
  3126. }
  3127. }
  3128. /*
  3129. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3130. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3131. */
  3132. /*
  3133. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3134. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3135. */
  3136. /*
  3137. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3138. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3139. */
  3140. .ck.ck-find-and-replace-form {
  3141. width: 400px;
  3142. /*
  3143. * The <form> needs tabindex="-1" for proper Esc handling after being clicked
  3144. * but the side effect is that this creates a nasty focus outline in some browsers.
  3145. */
  3146. }
  3147. .ck.ck-find-and-replace-form:focus {
  3148. outline: none;
  3149. }
  3150. /* Generic styles for the form inputs and actions. */
  3151. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs,
  3152. .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions {
  3153. flex: 1 1 auto;
  3154. flex-direction: row;
  3155. flex-wrap: wrap;
  3156. align-items: center;
  3157. align-content: stretch;
  3158. padding: var(--ck-spacing-large);
  3159. margin: 0;
  3160. }
  3161. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button {
  3162. flex: 0 0 auto;
  3163. }
  3164. [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > * + *, [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > * + * {
  3165. margin-left: var(--ck-spacing-standard);
  3166. }
  3167. [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > * + *, [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > * + * {
  3168. margin-right: var(--ck-spacing-standard);
  3169. }
  3170. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-labeled-field-view, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions .ck-labeled-field-view {
  3171. flex: 1 1 auto;
  3172. }
  3173. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-labeled-field-view .ck-input, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions .ck-labeled-field-view .ck-input {
  3174. width: 100%;
  3175. min-width: 50px;
  3176. }
  3177. /* Styles specific for inputs area. */
  3178. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs {
  3179. /* To display all controls in line when there's an error under the input */
  3180. align-items: flex-start;
  3181. }
  3182. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button-prev > .ck-icon {
  3183. transform: rotate(90deg);
  3184. }
  3185. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button-next > .ck-icon {
  3186. transform: rotate(-90deg);
  3187. }
  3188. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
  3189. top: 50%;
  3190. transform: translateY(-50%);
  3191. color: var(--ck-color-base-border);
  3192. }
  3193. [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
  3194. right: var(--ck-spacing-standard);
  3195. }
  3196. [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
  3197. left: var(--ck-spacing-standard);
  3198. }
  3199. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace {
  3200. flex: 0 0 100%;
  3201. padding-top: var(--ck-spacing-standard);
  3202. }
  3203. [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace {
  3204. margin-left: 0;
  3205. }
  3206. [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace {
  3207. margin-right: 0;
  3208. }
  3209. /* Styles specific for actions area. */
  3210. .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions {
  3211. flex-wrap: wrap;
  3212. justify-content: flex-end;
  3213. margin-top: calc( -1 * var(--ck-spacing-large) );
  3214. }
  3215. .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button-find {
  3216. font-weight: bold;
  3217. /* Beef the find button up a little. It's the main action button in the form */
  3218. }
  3219. .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button-find .ck-button__label {
  3220. padding-left: var(--ck-spacing-large);
  3221. padding-right: var(--ck-spacing-large);
  3222. }
  3223. .ck.ck-find-and-replace-form .ck-switchbutton {
  3224. width: 100%;
  3225. display: flex;
  3226. flex-direction: row;
  3227. flex-wrap: nowrap;
  3228. justify-content: space-between;
  3229. align-items: center;
  3230. }
  3231. @media screen and (max-width: 600px) {
  3232. .ck.ck-find-and-replace-form {
  3233. width: 300px;
  3234. /* Don't let the form overflow from the dialog (https://github.com/cksource/ckeditor5-commercial/issues/5913) */
  3235. max-width: 100%;
  3236. /* Styles specific for inputs area. */
  3237. }
  3238. .ck.ck-find-and-replace-form.ck-find-and-replace-form__input {
  3239. flex-wrap: wrap;
  3240. }
  3241. .ck.ck-find-and-replace-form.ck-find-and-replace-form__input .ck-labeled-field-view {
  3242. flex: 1 0 auto;
  3243. width: 100%;
  3244. margin-bottom: var(--ck-spacing-standard);
  3245. }
  3246. .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button {
  3247. text-align: center;
  3248. }
  3249. .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type {
  3250. flex: 1 1 auto;
  3251. }
  3252. [dir="ltr"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type {
  3253. margin-left: 0;
  3254. }
  3255. [dir="rtl"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type {
  3256. margin-right: 0;
  3257. }
  3258. .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type .ck-button__label {
  3259. width: 100%;
  3260. text-align: center;
  3261. }
  3262. /* Styles specific for actions area. */
  3263. .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) {
  3264. flex-wrap: wrap;
  3265. flex: 1 1 auto;
  3266. }
  3267. .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button {
  3268. text-align: center;
  3269. }
  3270. .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type {
  3271. flex: 1 1 auto;
  3272. }
  3273. [dir="ltr"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type {
  3274. margin-left: 0;
  3275. }
  3276. [dir="rtl"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type {
  3277. margin-right: 0;
  3278. }
  3279. .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button .ck-button__label {
  3280. width: 100%;
  3281. text-align: center;
  3282. }
  3283. }
  3284. /*
  3285. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3286. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3287. */
  3288. /* Resize dropdown's button label. */
  3289. .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label {
  3290. width: 8em;
  3291. }
  3292. .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__panel .ck-list__item {
  3293. min-width: 18em;
  3294. }
  3295. /*
  3296. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3297. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3298. */
  3299. /*
  3300. * Note: This file should contain the wireframe styles only. But since there are no such styles,
  3301. * it acts as a message to the builder telling that it should look for the corresponding styles
  3302. * **in the theme** when compiling the editor.
  3303. */
  3304. /*
  3305. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3306. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3307. */
  3308. :root {
  3309. --ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size));
  3310. --ck-html-embed-source-height: 10em;
  3311. --ck-html-embed-unfocused-outline-width: 1px;
  3312. --ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard));
  3313. --ck-html-embed-source-disabled-background: var(--ck-color-base-foreground);
  3314. --ck-html-embed-source-disabled-color: hsl(0deg 0% 45%);
  3315. }
  3316. /* The feature container. */
  3317. .ck-widget.raw-html-embed {
  3318. font-size: var(--ck-font-size-base);
  3319. background-color: var(--ck-color-base-foreground);
  3320. }
  3321. .ck-widget.raw-html-embed:not(.ck-widget_selected):not(:hover) {
  3322. outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
  3323. }
  3324. /* HTML embed widget itself should respect UI language direction */
  3325. .ck-widget.raw-html-embed[dir="ltr"] {
  3326. text-align: left;
  3327. }
  3328. .ck-widget.raw-html-embed[dir="rtl"] {
  3329. text-align: right;
  3330. }
  3331. /* ----- Embed label in the upper left corner ----------------------------------------------- */
  3332. .ck-widget.raw-html-embed::before {
  3333. content: attr(data-html-embed-label);
  3334. top: calc(-1 * var(--ck-html-embed-unfocused-outline-width));
  3335. left: var(--ck-spacing-standard);
  3336. background: hsl(0deg 0% 60%);
  3337. transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  3338. padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
  3339. border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
  3340. color: var(--ck-color-base-background);
  3341. font-size: var(--ck-font-size-tiny);
  3342. font-family: var(--ck-font-face);
  3343. }
  3344. .ck-widget.raw-html-embed[dir="rtl"]::before {
  3345. left: auto;
  3346. right: var(--ck-spacing-standard);
  3347. }
  3348. /* Make space for label but it only collides in LTR languages */
  3349. .ck-widget.raw-html-embed[dir="ltr"] .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
  3350. margin-left: 50px;
  3351. }
  3352. .ck.ck-editor__editable.ck-blurred .ck-widget.raw-html-embed.ck-widget_selected::before {
  3353. top: 0px;
  3354. padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  3355. }
  3356. .ck.ck-editor__editable:not(.ck-blurred) .ck-widget.raw-html-embed.ck-widget_selected::before {
  3357. top: 0;
  3358. padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  3359. background: var(--ck-color-focus-border);
  3360. }
  3361. .ck.ck-editor__editable .ck-widget.raw-html-embed:not(.ck-widget_selected):hover::before {
  3362. top: 0px;
  3363. padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  3364. }
  3365. /* ----- Emebed internals --------------------------------------------------------------------- */
  3366. .ck-widget.raw-html-embed .raw-html-embed__content-wrapper {
  3367. padding: var(--ck-spacing-standard);
  3368. }
  3369. /* The switch mode button wrapper. */
  3370. .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper {
  3371. top: var(--ck-spacing-standard);
  3372. right: var(--ck-spacing-standard);
  3373. }
  3374. .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__save-button {
  3375. color: var(--ck-color-button-save);
  3376. }
  3377. .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__cancel-button {
  3378. color: var(--ck-color-button-cancel);
  3379. }
  3380. .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button:not(:first-child) {
  3381. margin-top: var(--ck-spacing-small);
  3382. }
  3383. .ck-widget.raw-html-embed[dir="rtl"] .raw-html-embed__buttons-wrapper {
  3384. left: var(--ck-spacing-standard);
  3385. right: auto;
  3386. }
  3387. /* The edit source element. */
  3388. .ck-widget.raw-html-embed .raw-html-embed__source {
  3389. box-sizing: border-box;
  3390. height: var(--ck-html-embed-source-height);
  3391. width: var(--ck-html-embed-content-width);
  3392. resize: none;
  3393. min-width: 0;
  3394. padding: var(--ck-spacing-standard);
  3395. font-family: monospace;
  3396. tab-size: 4;
  3397. white-space: pre-wrap;
  3398. font-size: var(--ck-font-size-base); /* Safari needs this. */
  3399. /* HTML code is direction–agnostic. */
  3400. text-align: left;
  3401. direction: ltr;
  3402. }
  3403. .ck-widget.raw-html-embed .raw-html-embed__source[disabled] {
  3404. background: var(--ck-html-embed-source-disabled-background);
  3405. color: var(--ck-html-embed-source-disabled-color);
  3406. /* Safari needs this for the proper text color in disabled input (https://github.com/ckeditor/ckeditor5/issues/8320). */
  3407. -webkit-text-fill-color: var(--ck-html-embed-source-disabled-color);
  3408. opacity: 1;
  3409. }
  3410. /* The preview data container. */
  3411. .ck-widget.raw-html-embed .raw-html-embed__preview {
  3412. min-height: var(--ck-html-embed-content-min-height);
  3413. width: var(--ck-html-embed-content-width);
  3414. /* Disable all mouse interaction as long as the editor is not read–only. */
  3415. }
  3416. .ck-editor__editable:not(.ck-read-only) .ck-widget.raw-html-embed .raw-html-embed__preview {
  3417. pointer-events: none;
  3418. }
  3419. .ck-widget.raw-html-embed .raw-html-embed__preview-content {
  3420. box-sizing: border-box;
  3421. background-color: var(--ck-color-base-foreground);
  3422. }
  3423. .ck-widget.raw-html-embed .raw-html-embed__preview-content > * {
  3424. margin-left: auto;
  3425. margin-right: auto;
  3426. }
  3427. .ck-widget.raw-html-embed .raw-html-embed__preview-placeholder {
  3428. color: var(--ck-html-embed-source-disabled-color)
  3429. }
  3430. /*
  3431. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3432. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3433. */
  3434. /*
  3435. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3436. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3437. */
  3438. :root {
  3439. --ck-image-insert-insert-by-url-width: 250px;
  3440. }
  3441. .ck.ck-image-insert-url {
  3442. --ck-input-width: 100%;
  3443. }
  3444. .ck.ck-image-insert-url .ck-image-insert-url__action-row {
  3445. grid-column-gap: var(--ck-spacing-large);
  3446. margin-top: var(--ck-spacing-large);
  3447. }
  3448. .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-save,
  3449. .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-cancel {
  3450. justify-content: center;
  3451. min-width: auto;
  3452. }
  3453. .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label {
  3454. color: var(--ck-color-text);
  3455. }
  3456. .ck.ck-image-insert-form > .ck.ck-button {
  3457. display: block;
  3458. width: 100%;
  3459. }
  3460. [dir="ltr"] .ck.ck-image-insert-form > .ck.ck-button {
  3461. text-align: left;
  3462. }
  3463. [dir="rtl"] .ck.ck-image-insert-form > .ck.ck-button {
  3464. text-align: right;
  3465. }
  3466. .ck.ck-image-insert-form > .ck.ck-collapsible {
  3467. min-width: var(--ck-image-insert-insert-by-url-width);
  3468. }
  3469. .ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child) {
  3470. border-top: 1px solid var(--ck-color-base-border);
  3471. }
  3472. .ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child) {
  3473. border-bottom: 1px solid var(--ck-color-base-border);
  3474. }
  3475. /* This is the case when there are no other integrations configured than insert by URL */
  3476. .ck.ck-image-insert-form > .ck.ck-image-insert-url {
  3477. min-width: var(--ck-image-insert-insert-by-url-width);
  3478. padding: var(--ck-spacing-large);
  3479. }
  3480. .ck.ck-image-insert-form:focus {
  3481. outline: none;
  3482. }
  3483. /*
  3484. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3485. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3486. */
  3487. /*
  3488. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3489. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3490. */
  3491. :root {
  3492. --ck-color-image-upload-icon: hsl(0, 0%, 100%);
  3493. --ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
  3494. /* Match the icon size with the linked image indicator brought by the link image feature. */
  3495. --ck-image-upload-icon-size: 20;
  3496. --ck-image-upload-icon-width: 2px;
  3497. --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
  3498. }
  3499. .ck-image-upload-complete-icon {
  3500. opacity: 0;
  3501. background: var(--ck-color-image-upload-icon-background);
  3502. animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
  3503. animation-fill-mode: forwards, forwards;
  3504. animation-duration: 500ms, 500ms;
  3505. /* To make animation scalable. */
  3506. font-size: calc(1px * var(--ck-image-upload-icon-size));
  3507. /* Hide completed upload icon after 3 seconds. */
  3508. animation-delay: 0ms, 3000ms;
  3509. /*
  3510. * Use CSS math to simulate container queries.
  3511. * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things
  3512. */
  3513. overflow: hidden;
  3514. width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
  3515. height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
  3516. /* This is check icon element made from border-width mixed with animations. */
  3517. }
  3518. .ck-image-upload-complete-icon::after {
  3519. /* Because of border transformation we need to "hard code" left position. */
  3520. left: 25%;
  3521. top: 50%;
  3522. opacity: 0;
  3523. height: 0;
  3524. width: 0;
  3525. transform: scaleX(-1) rotate(135deg);
  3526. transform-origin: left top;
  3527. border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
  3528. border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
  3529. animation-name: ck-upload-complete-icon-check;
  3530. animation-duration: 500ms;
  3531. animation-delay: 500ms;
  3532. animation-fill-mode: forwards;
  3533. /* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
  3534. box-sizing: border-box;
  3535. }
  3536. @media (prefers-reduced-motion: reduce) {
  3537. .ck-image-upload-complete-icon {
  3538. animation-duration: 0ms;
  3539. }
  3540. .ck-image-upload-complete-icon::after {
  3541. animation: none;
  3542. opacity: 1;
  3543. width: 0.3em;
  3544. height: 0.45em;
  3545. }
  3546. }
  3547. @keyframes ck-upload-complete-icon-show {
  3548. from {
  3549. opacity: 0;
  3550. }
  3551. to {
  3552. opacity: 1;
  3553. }
  3554. }
  3555. @keyframes ck-upload-complete-icon-hide {
  3556. from {
  3557. opacity: 1;
  3558. }
  3559. to {
  3560. opacity: 0;
  3561. }
  3562. }
  3563. @keyframes ck-upload-complete-icon-check {
  3564. 0% {
  3565. opacity: 1;
  3566. width: 0;
  3567. height: 0;
  3568. }
  3569. 33% {
  3570. width: 0.3em;
  3571. height: 0;
  3572. }
  3573. 100% {
  3574. opacity: 1;
  3575. width: 0.3em;
  3576. height: 0.45em;
  3577. }
  3578. }
  3579. /*
  3580. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3581. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3582. */
  3583. :root {
  3584. --ck-color-upload-placeholder-loader: hsl(0, 0%, 70%);
  3585. --ck-upload-placeholder-loader-size: 32px;
  3586. --ck-upload-placeholder-image-aspect-ratio: 2.8;
  3587. }
  3588. .ck .ck-image-upload-placeholder {
  3589. /* We need to control the full width of the SVG gray background. */
  3590. width: 100%;
  3591. margin: 0;
  3592. }
  3593. .ck .ck-image-upload-placeholder.image-inline {
  3594. width: calc( 2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio) );
  3595. }
  3596. .ck .ck-image-upload-placeholder img {
  3597. /*
  3598. * This is an arbitrary aspect for a 1x1 px GIF to display to the user. Not too tall, not too short.
  3599. * There's nothing special about this number except that it should make the image placeholder look like
  3600. * a real image during this short period after the upload started and before the image was read from the
  3601. * file system (and a rich preview was loaded).
  3602. */
  3603. aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
  3604. }
  3605. .ck .ck-upload-placeholder-loader {
  3606. width: 100%;
  3607. height: 100%;
  3608. }
  3609. .ck .ck-upload-placeholder-loader::before {
  3610. width: var(--ck-upload-placeholder-loader-size);
  3611. height: var(--ck-upload-placeholder-loader-size);
  3612. border-radius: 50%;
  3613. border-top: 3px solid var(--ck-color-upload-placeholder-loader);
  3614. border-right: 2px solid transparent;
  3615. animation: ck-upload-placeholder-loader 1s linear infinite;
  3616. }
  3617. @keyframes ck-upload-placeholder-loader {
  3618. to {
  3619. transform: rotate( 360deg );
  3620. }
  3621. }
  3622. /*
  3623. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3624. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3625. */
  3626. /* Showing animation. */
  3627. .ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear {
  3628. animation: fadeIn 700ms;
  3629. }
  3630. @media (prefers-reduced-motion: reduce) {
  3631. .ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear {
  3632. opacity: 1;
  3633. animation: none;
  3634. }
  3635. }
  3636. /* Upload progress bar. */
  3637. .ck.ck-editor__editable .image .ck-progress-bar,
  3638. .ck.ck-editor__editable .image-inline .ck-progress-bar {
  3639. height: 2px;
  3640. width: 0;
  3641. background: var(--ck-color-upload-bar-background);
  3642. transition: width 100ms;
  3643. }
  3644. @keyframes fadeIn {
  3645. from { opacity: 0; }
  3646. to { opacity: 1; }
  3647. }
  3648. /*
  3649. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3650. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3651. */
  3652. /* Class added to span element surrounding currently selected link. */
  3653. .ck .ck-link_selected {
  3654. background: var(--ck-color-link-selected-background);
  3655. /* Give linked inline images some outline to let the user know they are also part of the link. */
  3656. }
  3657. .ck .ck-link_selected span.image-inline {
  3658. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-link-selected-background);
  3659. }
  3660. /*
  3661. * Classes used by the "fake visual selection" displayed in the content when an input
  3662. * in the link UI has focus (the browser does not render the native selection in this state).
  3663. */
  3664. .ck .ck-fake-link-selection {
  3665. background: var(--ck-color-link-fake-selection);
  3666. }
  3667. /* A collapsed fake visual selection. */
  3668. .ck .ck-fake-link-selection_collapsed {
  3669. height: 100%;
  3670. border-right: 1px solid var(--ck-color-base-text);
  3671. margin-right: -1px;
  3672. outline: solid 1px hsla(0, 0%, 100%, .5);
  3673. }
  3674. /*
  3675. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3676. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3677. */
  3678. /*
  3679. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3680. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3681. */
  3682. /**
  3683. * Makes element unselectable.
  3684. */
  3685. /*
  3686. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3687. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3688. */
  3689. /*
  3690. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3691. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3692. */
  3693. /**
  3694. * A visual style of focused element's border.
  3695. */
  3696. /*
  3697. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3698. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3699. */
  3700. /**
  3701. * A helper to combine multiple shadows.
  3702. */
  3703. /**
  3704. * Gives an element a drop shadow so it looks like a floating panel.
  3705. */
  3706. /*
  3707. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3708. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3709. */
  3710. .ck.ck-link-actions .ck-button.ck-link-actions__preview {
  3711. padding-left: 0;
  3712. padding-right: 0;
  3713. }
  3714. .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
  3715. padding: 0 var(--ck-spacing-medium);
  3716. color: var(--ck-color-link-default);
  3717. text-overflow: ellipsis;
  3718. cursor: pointer;
  3719. /* Match the box model of the link editor form's input so the balloon
  3720. does not change width when moving between actions and the form. */
  3721. max-width: var(--ck-input-width);
  3722. min-width: 3em;
  3723. text-align: center;
  3724. }
  3725. .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label:hover {
  3726. text-decoration: underline;
  3727. }
  3728. .ck.ck-link-actions .ck-button.ck-link-actions__preview,
  3729. .ck.ck-link-actions .ck-button.ck-link-actions__preview:hover,
  3730. .ck.ck-link-actions .ck-button.ck-link-actions__preview:focus,
  3731. .ck.ck-link-actions .ck-button.ck-link-actions__preview:active {
  3732. background: none;
  3733. }
  3734. .ck.ck-link-actions .ck-button.ck-link-actions__preview:active {
  3735. box-shadow: none;
  3736. }
  3737. .ck.ck-link-actions .ck-button.ck-link-actions__preview:focus .ck-button__label {
  3738. text-decoration: underline;
  3739. }
  3740. [dir="ltr"] .ck.ck-link-actions .ck-button:not(:first-child) {
  3741. margin-left: var(--ck-spacing-standard);
  3742. }
  3743. [dir="rtl"] .ck.ck-link-actions .ck-button:not(:last-child) {
  3744. margin-left: var(--ck-spacing-standard);
  3745. }
  3746. @media screen and (max-width: 600px) {
  3747. .ck.ck-link-actions .ck-button.ck-link-actions__preview {
  3748. margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
  3749. }
  3750. .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
  3751. min-width: 0;
  3752. max-width: 100%;
  3753. }
  3754. [dir="ltr"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
  3755. margin-left: 0;
  3756. }
  3757. [dir="rtl"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
  3758. margin-left: 0;
  3759. }
  3760. }
  3761. /*
  3762. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3763. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3764. */
  3765. /*
  3766. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3767. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3768. */
  3769. /*
  3770. * Style link form differently when manual decorators are available.
  3771. * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
  3772. */
  3773. .ck.ck-link-form_layout-vertical {
  3774. padding: 0;
  3775. min-width: var(--ck-input-width);
  3776. }
  3777. .ck.ck-link-form_layout-vertical .ck-labeled-field-view {
  3778. margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
  3779. }
  3780. .ck.ck-link-form_layout-vertical .ck-labeled-field-view .ck-input-text {
  3781. min-width: 0;
  3782. width: 100%;
  3783. }
  3784. .ck.ck-link-form_layout-vertical > .ck-button {
  3785. padding: var(--ck-spacing-standard);
  3786. margin: 0;
  3787. width: 50%;
  3788. border-radius: 0;
  3789. }
  3790. .ck.ck-link-form_layout-vertical > .ck-button:not(:focus) {
  3791. border-top: 1px solid var(--ck-color-base-border);
  3792. }
  3793. [dir="ltr"] .ck.ck-link-form_layout-vertical > .ck-button {
  3794. margin-left: 0;
  3795. }
  3796. [dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button {
  3797. margin-left: 0;
  3798. }
  3799. [dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button:last-of-type {
  3800. border-right: 1px solid var(--ck-color-base-border);
  3801. }
  3802. /* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
  3803. .ck.ck-link-form_layout-vertical .ck.ck-list {
  3804. margin: 0 var(--ck-spacing-large);
  3805. }
  3806. .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton {
  3807. padding: 0;
  3808. width: 100%;
  3809. }
  3810. .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton:hover {
  3811. background: none;
  3812. }
  3813. /*
  3814. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3815. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3816. */
  3817. :root {
  3818. /* Match the icon size with the upload indicator brought by the image upload feature. */
  3819. --ck-link-image-indicator-icon-size: 20;
  3820. --ck-link-image-indicator-icon-is-visible: clamp(0px, 100% - 50px, 1px);
  3821. }
  3822. /* Linked image indicator */
  3823. .ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after {
  3824. content: "";
  3825. /*
  3826. * Smaller images should have the icon closer to the border.
  3827. * Match the icon position with the upload indicator brought by the image upload feature.
  3828. */
  3829. top: min(var(--ck-spacing-medium), 6%);
  3830. right: min(var(--ck-spacing-medium), 6%);
  3831. background-color: hsla(0, 0%, 0%, .4);
  3832. background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTExLjA3NyAxNSAuOTkxLTEuNDE2YS43NS43NSAwIDEgMSAxLjIyOS44NmwtMS4xNDggMS42NGEuNzQ4Ljc0OCAwIDAgMS0uMjE3LjIwNiA1LjI1MSA1LjI1MSAwIDAgMS04LjUwMy01Ljk1NS43NDEuNzQxIDAgMCAxIC4xMi0uMjc0bDEuMTQ3LTEuNjM5YS43NS43NSAwIDEgMSAxLjIyOC44Nkw0LjkzMyAxMC43bC4wMDYuMDAzYTMuNzUgMy43NSAwIDAgMCA2LjEzMiA0LjI5NGwuMDA2LjAwNHptNS40OTQtNS4zMzVhLjc0OC43NDggMCAwIDEtLjEyLjI3NGwtMS4xNDcgMS42MzlhLjc1Ljc1IDAgMSAxLTEuMjI4LS44NmwuODYtMS4yM2EzLjc1IDMuNzUgMCAwIDAtNi4xNDQtNC4zMDFsLS44NiAxLjIyOWEuNzUuNzUgMCAwIDEtMS4yMjktLjg2bDEuMTQ4LTEuNjRhLjc0OC43NDggMCAwIDEgLjIxNy0uMjA2IDUuMjUxIDUuMjUxIDAgMCAxIDguNTAzIDUuOTU1em0tNC41NjMtMi41MzJhLjc1Ljc1IDAgMCAxIC4xODQgMS4wNDVsLTMuMTU1IDQuNTA1YS43NS43NSAwIDEgMS0xLjIyOS0uODZsMy4xNTUtNC41MDZhLjc1Ljc1IDAgMCAxIDEuMDQ1LS4xODR6Ii8+PC9zdmc+");
  3833. background-size: 14px;
  3834. background-repeat: no-repeat;
  3835. background-position: center;
  3836. border-radius: 100%;
  3837. /*
  3838. * Use CSS math to simulate container queries.
  3839. * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things
  3840. */
  3841. overflow: hidden;
  3842. width: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size));
  3843. height: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size));
  3844. }
  3845. /*
  3846. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3847. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3848. */
  3849. /* When there are no list styles and there is no collapsible. */
  3850. .ck.ck-list-properties.ck-list-properties_without-styles {
  3851. padding: var(--ck-spacing-large);
  3852. }
  3853. .ck.ck-list-properties.ck-list-properties_without-styles > * {
  3854. min-width: 14em;
  3855. }
  3856. .ck.ck-list-properties.ck-list-properties_without-styles > * + * {
  3857. margin-top: var(--ck-spacing-standard);
  3858. }
  3859. /*
  3860. * When the numbered list property fields (start at, reversed) should be displayed,
  3861. * more horizontal space is needed. Reconfigure the style grid to create that space.
  3862. */
  3863. .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-list-styles-list {
  3864. grid-template-columns: repeat( 4, auto );
  3865. }
  3866. /* When list styles are rendered and property fields are in a collapsible. */
  3867. .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible {
  3868. border-top: 1px solid var(--ck-color-base-border);
  3869. }
  3870. .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * {
  3871. width: 100%;
  3872. }
  3873. .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * + * {
  3874. margin-top: var(--ck-spacing-standard);
  3875. }
  3876. .ck.ck-list-properties .ck.ck-numbered-list-properties__start-index .ck-input {
  3877. min-width: auto;
  3878. width: 100%;
  3879. }
  3880. .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order {
  3881. background: transparent;
  3882. padding-left: 0;
  3883. padding-right: 0;
  3884. margin-bottom: calc(-1 * var(--ck-spacing-tiny));
  3885. }
  3886. .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:active, .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:hover {
  3887. box-shadow: none;
  3888. border-color: transparent;
  3889. background: none;
  3890. }
  3891. /*
  3892. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3893. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3894. */
  3895. :root {
  3896. --ck-list-style-button-size: 44px;
  3897. }
  3898. .ck.ck-list-styles-list {
  3899. grid-template-columns: repeat( 3, auto );
  3900. row-gap: var(--ck-spacing-medium);
  3901. column-gap: var(--ck-spacing-medium);
  3902. padding: var(--ck-spacing-large);
  3903. }
  3904. .ck.ck-list-styles-list .ck-button {
  3905. /* Make the button look like a thumbnail (the icon "takes it all"). */
  3906. width: var(--ck-list-style-button-size);
  3907. height: var(--ck-list-style-button-size);
  3908. padding: 0;
  3909. /*
  3910. * Buttons are aligned by the grid so disable default button margins to not collide with the
  3911. * gaps in the grid.
  3912. */
  3913. margin: 0;
  3914. /*
  3915. * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
  3916. * from the button dimensions and, as a result, decrease the size of the icon
  3917. * (which becomes blurry as it scales down).
  3918. */
  3919. box-sizing: content-box;
  3920. }
  3921. .ck.ck-list-styles-list .ck-button .ck-icon {
  3922. width: var(--ck-list-style-button-size);
  3923. height: var(--ck-list-style-button-size);
  3924. }
  3925. /*
  3926. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  3927. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  3928. */
  3929. :root {
  3930. --ck-media-embed-placeholder-icon-size: 3em;
  3931. --ck-color-media-embed-placeholder-url-text: hsl(0, 0%, 46%);
  3932. --ck-color-media-embed-placeholder-url-text-hover: var(--ck-color-base-text);
  3933. }
  3934. .ck-media__wrapper {
  3935. margin: 0 auto;
  3936. }
  3937. .ck-media__wrapper .ck-media__placeholder {
  3938. padding: calc( 3 * var(--ck-spacing-standard) );
  3939. background: var(--ck-color-base-foreground);
  3940. }
  3941. .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon {
  3942. min-width: var(--ck-media-embed-placeholder-icon-size);
  3943. height: var(--ck-media-embed-placeholder-icon-size);
  3944. margin-bottom: var(--ck-spacing-large);
  3945. background-position: center;
  3946. background-size: cover;
  3947. }
  3948. .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon .ck-icon {
  3949. width: 100%;
  3950. height: 100%;
  3951. }
  3952. .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text {
  3953. color: var(--ck-color-media-embed-placeholder-url-text);
  3954. white-space: nowrap;
  3955. text-align: center;
  3956. font-style: italic;
  3957. text-overflow: ellipsis;
  3958. }
  3959. .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text:hover {
  3960. color: var(--ck-color-media-embed-placeholder-url-text-hover);
  3961. cursor: pointer;
  3962. text-decoration: underline;
  3963. }
  3964. .ck-media__wrapper[data-oembed-url*="open.spotify.com"] {
  3965. max-width: 300px;
  3966. max-height: 380px;
  3967. }
  3968. .ck-media__wrapper[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon,
  3969. .ck-media__wrapper[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon,
  3970. .ck-media__wrapper[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon,
  3971. .ck-media__wrapper[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon {
  3972. background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAuMzc4IiBoZWlnaHQ9IjI1NC4xNjciIHZpZXdCb3g9IjAgMCA2Ni4yNDYgNjcuMjQ4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcyLjUzMSAtMjE4LjQ1NSkgc2NhbGUoLjk4MDEyKSI+PHJlY3Qgcnk9IjUuMjM4IiByeD0iNS4yMzgiIHk9IjIzMS4zOTkiIHg9IjE3Ni4wMzEiIGhlaWdodD0iNjAuMDk5IiB3aWR0aD0iNjAuMDk5IiBmaWxsPSIjMzRhNjY4IiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxwYXRoIGQ9Ik0yMDYuNDc3IDI2MC45bC0yOC45ODcgMjguOTg3YTUuMjE4IDUuMjE4IDAgMCAwIDMuNzggMS42MWg0OS42MjFjMS42OTQgMCAzLjE5LS43OTggNC4xNDYtMi4wMzd6IiBmaWxsPSIjNWM4OGM1Ii8+PHBhdGggZD0iTTIyNi43NDIgMjIyLjk4OGMtOS4yNjYgMC0xNi43NzcgNy4xNy0xNi43NzcgMTYuMDE0LjAwNyAyLjc2Mi42NjMgNS40NzQgMi4wOTMgNy44NzUuNDMuNzAzLjgzIDEuNDA4IDEuMTkgMi4xMDcuMzMzLjUwMi42NSAxLjAwNS45NSAxLjUwOC4zNDMuNDc3LjY3My45NTcuOTg4IDEuNDQgMS4zMSAxLjc2OSAyLjUgMy41MDIgMy42MzcgNS4xNjguNzkzIDEuMjc1IDEuNjgzIDIuNjQgMi40NjYgMy45OSAyLjM2MyA0LjA5NCA0LjAwNyA4LjA5MiA0LjYgMTMuOTE0di4wMTJjLjE4Mi40MTIuNTE2LjY2Ni44NzkuNjY3LjQwMy0uMDAxLjc2OC0uMzE0LjkzLS43OTkuNjAzLTUuNzU2IDIuMjM4LTkuNzI5IDQuNTg1LTEzLjc5NC43ODItMS4zNSAxLjY3My0yLjcxNSAyLjQ2NS0zLjk5IDEuMTM3LTEuNjY2IDIuMzI4LTMuNCAzLjYzOC01LjE2OS4zMTUtLjQ4Mi42NDUtLjk2Mi45ODgtMS40MzkuMy0uNTAzLjYxNy0xLjAwNi45NS0xLjUwOC4zNTktLjcuNzYtMS40MDQgMS4xOS0yLjEwNyAxLjQyNi0yLjQwMiAyLTUuMTE0IDIuMDA0LTcuODc1IDAtOC44NDQtNy41MTEtMTYuMDE0LTE2Ljc3Ni0xNi4wMTR6IiBmaWxsPSIjZGQ0YjNlIiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxlbGxpcHNlIHJ5PSI1LjU2NCIgcng9IjUuODI4IiBjeT0iMjM5LjAwMiIgY3g9IjIyNi43NDIiIGZpbGw9IiM4MDJkMjciIHBhaW50LW9yZGVyPSJtYXJrZXJzIHN0cm9rZSBmaWxsIi8+PHBhdGggZD0iTTE5MC4zMDEgMjM3LjI4M2MtNC42NyAwLTguNDU3IDMuODUzLTguNDU3IDguNjA2czMuNzg2IDguNjA3IDguNDU3IDguNjA3YzMuMDQzIDAgNC44MDYtLjk1OCA2LjMzNy0yLjUxNiAxLjUzLTEuNTU3IDIuMDg3LTMuOTEzIDIuMDg3LTYuMjkgMC0uMzYyLS4wMjMtLjcyMi0uMDY0LTEuMDc5aC04LjI1N3YzLjA0M2g0Ljg1Yy0uMTk3Ljc1OS0uNTMxIDEuNDUtMS4wNTggMS45ODYtLjk0Mi45NTgtMi4wMjggMS41NDgtMy45MDEgMS41NDgtMi44NzYgMC01LjIwOC0yLjM3Mi01LjIwOC01LjI5OSAwLTIuOTI2IDIuMzMyLTUuMjk5IDUuMjA4LTUuMjk5IDEuMzk5IDAgMi42MTguNDA3IDMuNTg0IDEuMjkzbDIuMzgxLTIuMzhjMC0uMDAyLS4wMDMtLjAwNC0uMDA0LS4wMDUtMS41ODgtMS41MjQtMy42Mi0yLjIxNS01Ljk1NS0yLjIxNXptNC40MyA1LjY2bC4wMDMuMDA2di0uMDAzeiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjE1LjE4NCAyNTEuOTI5bC03Ljk4IDcuOTc5IDI4LjQ3NyAyOC40NzVjLjI4Ny0uNjQ5LjQ0OS0xLjM2Ni40NDktMi4xMjN2LTMxLjE2NWMtLjQ2OS42NzUtLjkzNCAxLjM0OS0xLjM4MiAyLjAwNS0uNzkyIDEuMjc1LTEuNjgyIDIuNjQtMi40NjUgMy45OS0yLjM0NyA0LjA2NS0zLjk4MiA4LjAzOC00LjU4NSAxMy43OTQtLjE2Mi40ODUtLjUyNy43OTgtLjkzLjc5OS0uMzYzLS4wMDEtLjY5Ny0uMjU1LS44NzktLjY2N3YtLjAxMmMtLjU5My01LjgyMi0yLjIzNy05LjgyLTQuNi0xMy45MTQtLjc4My0xLjM1LTEuNjczLTIuNzE1LTIuNDY2LTMuOTktMS4xMzctMS42NjYtMi4zMjctMy40LTMuNjM3LTUuMTY5bC0uMDAyLS4wMDN6IiBmaWxsPSIjYzNjM2MzIi8+PHBhdGggZD0iTTIxMi45ODMgMjQ4LjQ5NWwtMzYuOTUyIDM2Ljk1M3YuODEyYTUuMjI3IDUuMjI3IDAgMCAwIDUuMjM4IDUuMjM4aDEuMDE1bDM1LjY2Ni0zNS42NjZhMTM2LjI3NSAxMzYuMjc1IDAgMCAwLTIuNzY0LTMuOSAzNy41NzUgMzcuNTc1IDAgMCAwLS45ODktMS40NGMtLjI5OS0uNTAzLS42MTYtMS4wMDYtLjk1LTEuNTA4LS4wODMtLjE2Mi0uMTc2LS4zMjYtLjI2NC0uNDg5eiIgZmlsbD0iI2ZkZGM0ZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjExLjk5OCAyNjEuMDgzbC02LjE1MiA2LjE1MSAyNC4yNjQgMjQuMjY0aC43ODFhNS4yMjcgNS4yMjcgMCAwIDAgNS4yMzktNS4yMzh2LTEuMDQ1eiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48L2c+PC9zdmc+);
  3973. }
  3974. .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder {
  3975. background: hsl(220, 46%, 48%);
  3976. }
  3977. .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__icon {
  3978. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMDI0cHgiIGhlaWdodD0iMTAyNHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPkZpbGwgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImZMb2dvX1doaXRlIiBmaWxsPSIjRkZGRkZFIj4gICAgICAgICAgICA8cGF0aCBkPSJNOTY3LjQ4NCwwIEw1Ni41MTcsMCBDMjUuMzA0LDAgMCwyNS4zMDQgMCw1Ni41MTcgTDAsOTY3LjQ4MyBDMCw5OTguNjk0IDI1LjI5NywxMDI0IDU2LjUyMiwxMDI0IEw1NDcsMTAyNCBMNTQ3LDYyOCBMNDE0LDYyOCBMNDE0LDQ3MyBMNTQ3LDQ3MyBMNTQ3LDM1OS4wMjkgQzU0NywyMjYuNzY3IDYyNy43NzMsMTU0Ljc0NyA3NDUuNzU2LDE1NC43NDcgQzgwMi4yNjksMTU0Ljc0NyA4NTAuODQyLDE1OC45NTUgODY1LDE2MC44MzYgTDg2NSwyOTkgTDc4My4zODQsMjk5LjAzNyBDNzE5LjM5MSwyOTkuMDM3IDcwNywzMjkuNTI5IDcwNywzNzQuMjczIEw3MDcsNDczIEw4NjAuNDg3LDQ3MyBMODQwLjUwMSw2MjggTDcwNyw2MjggTDcwNywxMDI0IEw5NjcuNDg0LDEwMjQgQzk5OC42OTcsMTAyNCAxMDI0LDk5OC42OTcgMTAyNCw5NjcuNDg0IEwxMDI0LDU2LjUxNSBDMTAyNCwyNS4zMDMgOTk4LjY5NywwIDk2Ny40ODQsMCIgaWQ9IkZpbGwtMSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
  3979. }
  3980. .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text {
  3981. color: hsl(220, 100%, 90%);
  3982. }
  3983. .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover {
  3984. color: hsl(0, 0%, 100%);
  3985. }
  3986. .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder {
  3987. background: linear-gradient(-135deg,hsl(246, 100%, 39%),hsl(302, 100%, 36%),hsl(0, 100%, 48%));
  3988. }
  3989. .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__icon {
  3990. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MDRweCIgaGVpZ2h0PSI1MDRweCIgdmlld0JveD0iMCAwIDUwNCA1MDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+Z2x5cGgtbG9nb19NYXkyMDE2PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSIwIDAuMTU5IDUwMy44NDEgMC4xNTkgNTAzLjg0MSA1MDMuOTQgMCA1MDMuOTQiPjwvcG9seWdvbj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iZ2x5cGgtbG9nb19NYXkyMDE2IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cC0zIj4gICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+ICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgIDxnIGlkPSJDbGlwLTIiPjwvZz4gICAgICAgICAgICA8cGF0aCBkPSJNMjUxLjkyMSwwLjE1OSBDMTgzLjUwMywwLjE1OSAxNzQuOTI0LDAuNDQ5IDE0OC4wNTQsMS42NzUgQzEyMS4yNCwyLjg5OCAxMDIuOTI3LDcuMTU3IDg2LjkwMywxMy4zODUgQzcwLjMzNywxOS44MjIgNTYuMjg4LDI4LjQzNiA0Mi4yODIsNDIuNDQxIEMyOC4yNzcsNTYuNDQ3IDE5LjY2Myw3MC40OTYgMTMuMjI2LDg3LjA2MiBDNi45OTgsMTAzLjA4NiAyLjczOSwxMjEuMzk5IDEuNTE2LDE0OC4yMTMgQzAuMjksMTc1LjA4MyAwLDE4My42NjIgMCwyNTIuMDggQzAsMzIwLjQ5NyAwLjI5LDMyOS4wNzYgMS41MTYsMzU1Ljk0NiBDMi43MzksMzgyLjc2IDYuOTk4LDQwMS4wNzMgMTMuMjI2LDQxNy4wOTcgQzE5LjY2Myw0MzMuNjYzIDI4LjI3Nyw0NDcuNzEyIDQyLjI4Miw0NjEuNzE4IEM1Ni4yODgsNDc1LjcyMyA3MC4zMzcsNDg0LjMzNyA4Ni45MDMsNDkwLjc3NSBDMTAyLjkyNyw0OTcuMDAyIDEyMS4yNCw1MDEuMjYxIDE0OC4wNTQsNTAyLjQ4NCBDMTc0LjkyNCw1MDMuNzEgMTgzLjUwMyw1MDQgMjUxLjkyMSw1MDQgQzMyMC4zMzgsNTA0IDMyOC45MTcsNTAzLjcxIDM1NS43ODcsNTAyLjQ4NCBDMzgyLjYwMSw1MDEuMjYxIDQwMC45MTQsNDk3LjAwMiA0MTYuOTM4LDQ5MC43NzUgQzQzMy41MDQsNDg0LjMzNyA0NDcuNTUzLDQ3NS43MjMgNDYxLjU1OSw0NjEuNzE4IEM0NzUuNTY0LDQ0Ny43MTIgNDg0LjE3OCw0MzMuNjYzIDQ5MC42MTYsNDE3LjA5NyBDNDk2Ljg0Myw0MDEuMDczIDUwMS4xMDIsMzgyLjc2IDUwMi4zMjUsMzU1Ljk0NiBDNTAzLjU1MSwzMjkuMDc2IDUwMy44NDEsMzIwLjQ5NyA1MDMuODQxLDI1Mi4wOCBDNTAzLjg0MSwxODMuNjYyIDUwMy41NTEsMTc1LjA4MyA1MDIuMzI1LDE0OC4yMTMgQzUwMS4xMDIsMTIxLjM5OSA0OTYuODQzLDEwMy4wODYgNDkwLjYxNiw4Ny4wNjIgQzQ4NC4xNzgsNzAuNDk2IDQ3NS41NjQsNTYuNDQ3IDQ2MS41NTksNDIuNDQxIEM0NDcuNTUzLDI4LjQzNiA0MzMuNTA0LDE5LjgyMiA0MTYuOTM4LDEzLjM4NSBDNDAwLjkxNCw3LjE1NyAzODIuNjAxLDIuODk4IDM1NS43ODcsMS42NzUgQzMyOC45MTcsMC40NDkgMzIwLjMzOCwwLjE1OSAyNTEuOTIxLDAuMTU5IFogTTI1MS45MjEsNDUuNTUgQzMxOS4xODYsNDUuNTUgMzI3LjE1NCw0NS44MDcgMzUzLjcxOCw0Ny4wMTkgQzM3OC4yOCw0OC4xMzkgMzkxLjYxOSw1Mi4yNDMgNDAwLjQ5Niw1NS42OTMgQzQxMi4yNTUsNjAuMjYzIDQyMC42NDcsNjUuNzIyIDQyOS40NjIsNzQuNTM4IEM0MzguMjc4LDgzLjM1MyA0NDMuNzM3LDkxLjc0NSA0NDguMzA3LDEwMy41MDQgQzQ1MS43NTcsMTEyLjM4MSA0NTUuODYxLDEyNS43MiA0NTYuOTgxLDE1MC4yODIgQzQ1OC4xOTMsMTc2Ljg0NiA0NTguNDUsMTg0LjgxNCA0NTguNDUsMjUyLjA4IEM0NTguNDUsMzE5LjM0NSA0NTguMTkzLDMyNy4zMTMgNDU2Ljk4MSwzNTMuODc3IEM0NTUuODYxLDM3OC40MzkgNDUxLjc1NywzOTEuNzc4IDQ0OC4zMDcsNDAwLjY1NSBDNDQzLjczNyw0MTIuNDE0IDQzOC4yNzgsNDIwLjgwNiA0MjkuNDYyLDQyOS42MjEgQzQyMC42NDcsNDM4LjQzNyA0MTIuMjU1LDQ0My44OTYgNDAwLjQ5Niw0NDguNDY2IEMzOTEuNjE5LDQ1MS45MTYgMzc4LjI4LDQ1Ni4wMiAzNTMuNzE4LDQ1Ny4xNCBDMzI3LjE1OCw0NTguMzUyIDMxOS4xOTEsNDU4LjYwOSAyNTEuOTIxLDQ1OC42MDkgQzE4NC42NSw0NTguNjA5IDE3Ni42ODQsNDU4LjM1MiAxNTAuMTIzLDQ1Ny4xNCBDMTI1LjU2MSw0NTYuMDIgMTEyLjIyMiw0NTEuOTE2IDEwMy4zNDUsNDQ4LjQ2NiBDOTEuNTg2LDQ0My44OTYgODMuMTk0LDQzOC40MzcgNzQuMzc5LDQyOS42MjEgQzY1LjU2NCw0MjAuODA2IDYwLjEwNCw0MTIuNDE0IDU1LjUzNCw0MDAuNjU1IEM1Mi4wODQsMzkxLjc3OCA0Ny45OCwzNzguNDM5IDQ2Ljg2LDM1My44NzcgQzQ1LjY0OCwzMjcuMzEzIDQ1LjM5MSwzMTkuMzQ1IDQ1LjM5MSwyNTIuMDggQzQ1LjM5MSwxODQuODE0IDQ1LjY0OCwxNzYuODQ2IDQ2Ljg2LDE1MC4yODIgQzQ3Ljk4LDEyNS43MiA1Mi4wODQsMTEyLjM4MSA1NS41MzQsMTAzLjUwNCBDNjAuMTA0LDkxLjc0NSA2NS41NjMsODMuMzUzIDc0LjM3OSw3NC41MzggQzgzLjE5NCw2NS43MjIgOTEuNTg2LDYwLjI2MyAxMDMuMzQ1LDU1LjY5MyBDMTEyLjIyMiw1Mi4yNDMgMTI1LjU2MSw0OC4xMzkgMTUwLjEyMyw0Ny4wMTkgQzE3Ni42ODcsNDUuODA3IDE4NC42NTUsNDUuNTUgMjUxLjkyMSw0NS41NSBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjRkZGRkZGIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxwYXRoIGQ9Ik0yNTEuOTIxLDMzNi4wNTMgQzIwNS41NDMsMzM2LjA1MyAxNjcuOTQ3LDI5OC40NTcgMTY3Ljk0NywyNTIuMDggQzE2Ny45NDcsMjA1LjcwMiAyMDUuNTQzLDE2OC4xMDYgMjUxLjkyMSwxNjguMTA2IEMyOTguMjk4LDE2OC4xMDYgMzM1Ljg5NCwyMDUuNzAyIDMzNS44OTQsMjUyLjA4IEMzMzUuODk0LDI5OC40NTcgMjk4LjI5OCwzMzYuMDUzIDI1MS45MjEsMzM2LjA1MyBaIE0yNTEuOTIxLDEyMi43MTUgQzE4MC40NzQsMTIyLjcxNSAxMjIuNTU2LDE4MC42MzMgMTIyLjU1NiwyNTIuMDggQzEyMi41NTYsMzIzLjUyNiAxODAuNDc0LDM4MS40NDQgMjUxLjkyMSwzODEuNDQ0IEMzMjMuMzY3LDM4MS40NDQgMzgxLjI4NSwzMjMuNTI2IDM4MS4yODUsMjUyLjA4IEMzODEuMjg1LDE4MC42MzMgMzIzLjM2NywxMjIuNzE1IDI1MS45MjEsMTIyLjcxNSBaIiBpZD0iRmlsbC00IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNDE2LjYyNywxMTcuNjA0IEM0MTYuNjI3LDEzNC4zIDQwMy4wOTIsMTQ3LjgzNCAzODYuMzk2LDE0Ny44MzQgQzM2OS43MDEsMTQ3LjgzNCAzNTYuMTY2LDEzNC4zIDM1Ni4xNjYsMTE3LjYwNCBDMzU2LjE2NiwxMDAuOTA4IDM2OS43MDEsODcuMzczIDM4Ni4zOTYsODcuMzczIEM0MDMuMDkyLDg3LjM3MyA0MTYuNjI3LDEwMC45MDggNDE2LjYyNywxMTcuNjA0IiBpZD0iRmlsbC01IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgIDwvZz48L3N2Zz4=);
  3991. }
  3992. /* stylelint-disable-next-line no-descending-specificity */
  3993. .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text {
  3994. color: hsl(302, 100%, 94%);
  3995. }
  3996. .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover {
  3997. color: hsl(0, 0%, 100%);
  3998. }
  3999. .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder {
  4000. /* Use gradient to contrast with focused widget (ckeditor/ckeditor5-media-embed#22). */
  4001. background: linear-gradient( to right, hsl(201, 85%, 70%), hsl(201, 85%, 35%) );
  4002. }
  4003. .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__icon {
  4004. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMCA0MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDAsMjAwYzAsMTEwLjUtODkuNSwyMDAtMjAwLDIwMFMwLDMxMC41LDAsMjAwUzg5LjUsMCwyMDAsMFM0MDAsODkuNSw0MDAsMjAweiBNMTYzLjQsMzA1LjVjODguNywwLDEzNy4yLTczLjUsMTM3LjItMTM3LjJjMC0yLjEsMC00LjItMC4xLTYuMmM5LjQtNi44LDE3LjYtMTUuMywyNC4xLTI1Yy04LjYsMy44LTE3LjksNi40LTI3LjcsNy42YzEwLTYsMTcuNi0xNS40LDIxLjItMjYuN2MtOS4zLDUuNS0xOS42LDkuNS0zMC42LDExLjdjLTguOC05LjQtMjEuMy0xNS4yLTM1LjItMTUuMmMtMjYuNiwwLTQ4LjIsMjEuNi00OC4yLDQ4LjJjMCwzLjgsMC40LDcuNSwxLjMsMTFjLTQwLjEtMi03NS42LTIxLjItOTkuNC01MC40Yy00LjEsNy4xLTYuNSwxNS40LTYuNSwyNC4yYzAsMTYuNyw4LjUsMzEuNSwyMS41LDQwLjFjLTcuOS0wLjItMTUuMy0yLjQtMjEuOC02YzAsMC4yLDAsMC40LDAsMC42YzAsMjMuNCwxNi42LDQyLjgsMzguNyw0Ny4zYy00LDEuMS04LjMsMS43LTEyLjcsMS43Yy0zLjEsMC02LjEtMC4zLTkuMS0wLjljNi4xLDE5LjIsMjMuOSwzMy4xLDQ1LDMzLjVjLTE2LjUsMTIuOS0zNy4zLDIwLjYtNTkuOSwyMC42Yy0zLjksMC03LjctMC4yLTExLjUtMC43QzExMC44LDI5Ny41LDEzNi4yLDMwNS41LDE2My40LDMwNS41Ii8+PC9zdmc+);
  4005. }
  4006. .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text {
  4007. color: hsl(201, 100%, 86%);
  4008. }
  4009. .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text:hover {
  4010. color: hsl(0, 0%, 100%);
  4011. }
  4012. /*
  4013. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4014. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4015. */
  4016. :root {
  4017. --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
  4018. --ck-color-mention-text: hsl(341, 100%, 30%);
  4019. }
  4020. .ck-content .mention {
  4021. background: var(--ck-color-mention-background);
  4022. color: var(--ck-color-mention-text);
  4023. }
  4024. /*
  4025. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4026. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4027. */
  4028. :root {
  4029. --ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
  4030. --ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
  4031. --ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
  4032. --ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
  4033. --ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
  4034. }
  4035. .ck-editor__editable .restricted-editing-exception {
  4036. transition: .2s ease-in-out background;
  4037. background-color: var(--ck-color-restricted-editing-exception-background);
  4038. border: 1px solid;
  4039. border-image: linear-gradient(
  4040. to right,
  4041. var(--ck-color-restricted-editing-exception-brackets) 0%,
  4042. var(--ck-color-restricted-editing-exception-brackets) 5px,
  4043. hsla(0, 0%, 0%, 0) 6px,
  4044. hsla(0, 0%, 0%, 0) calc(100% - 6px),
  4045. var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px),
  4046. var(--ck-color-restricted-editing-exception-brackets) 100%
  4047. ) 1;
  4048. }
  4049. @media (prefers-reduced-motion: reduce) {
  4050. .ck-editor__editable .restricted-editing-exception {
  4051. transition: none;
  4052. }
  4053. }
  4054. .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_selected {
  4055. background-color: var(--ck-color-restricted-editing-selected-exception-background);
  4056. border-image: linear-gradient(
  4057. to right,
  4058. var(--ck-color-restricted-editing-selected-exception-brackets) 0%,
  4059. var(--ck-color-restricted-editing-selected-exception-brackets) 5px,
  4060. var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px),
  4061. var(--ck-color-restricted-editing-selected-exception-brackets) 100%
  4062. ) 1;
  4063. }
  4064. .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_collapsed {
  4065. /* Empty exception should have the same width as exception with at least 1 char */
  4066. padding-left: 1ch;
  4067. }
  4068. .ck-restricted-editing_mode_restricted {
  4069. cursor: default;
  4070. /* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text
  4071. during the pointer movement. */
  4072. }
  4073. .ck-restricted-editing_mode_restricted * {
  4074. cursor: default;
  4075. }
  4076. .ck-restricted-editing_mode_restricted .restricted-editing-exception {
  4077. cursor: text;
  4078. }
  4079. .ck-restricted-editing_mode_restricted .restricted-editing-exception * {
  4080. cursor: text;
  4081. }
  4082. .ck-restricted-editing_mode_restricted .restricted-editing-exception:hover {
  4083. background: var(--ck-color-restricted-editing-exception-hover-background);
  4084. }
  4085. /*
  4086. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4087. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4088. */
  4089. /*
  4090. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4091. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4092. */
  4093. /*
  4094. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4095. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4096. */
  4097. /**
  4098. * Implements rounded corner interface for .ck-rounded-corners class.
  4099. *
  4100. * @see $ck-border-radius
  4101. */
  4102. :root {
  4103. --ck-character-grid-tile-size: 24px;
  4104. }
  4105. .ck.ck-character-grid {
  4106. overflow-y: auto;
  4107. overflow-x: hidden;
  4108. }
  4109. .ck.ck-character-grid .ck-character-grid__tiles {
  4110. grid-template-columns: repeat(auto-fill, minmax(var(--ck-character-grid-tile-size), 1fr));
  4111. margin: var(--ck-spacing-standard) var(--ck-spacing-large);
  4112. grid-gap: var(--ck-spacing-standard);
  4113. }
  4114. .ck.ck-character-grid .ck-character-grid__tile {
  4115. width: var(--ck-character-grid-tile-size);
  4116. height: var(--ck-character-grid-tile-size);
  4117. min-width: var(--ck-character-grid-tile-size);
  4118. min-height: var(--ck-character-grid-tile-size);
  4119. font-size: 1.5em;
  4120. padding: 0;
  4121. transition: .2s ease box-shadow;
  4122. border: 0;
  4123. }
  4124. @media (prefers-reduced-motion: reduce) {
  4125. .ck.ck-character-grid .ck-character-grid__tile {
  4126. transition: none;
  4127. }
  4128. }
  4129. .ck.ck-character-grid .ck-character-grid__tile:focus:not( .ck-disabled ),
  4130. .ck.ck-character-grid .ck-character-grid__tile:hover:not( .ck-disabled ) {
  4131. /* Disable the default .ck-button's border ring. */
  4132. border: 0;
  4133. box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
  4134. }
  4135. /* Make sure the glyph is rendered in the center of the button */
  4136. .ck.ck-character-grid .ck-character-grid__tile .ck-button__label {
  4137. line-height: var(--ck-character-grid-tile-size);
  4138. width: 100%;
  4139. text-align: center;
  4140. }
  4141. /*
  4142. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4143. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4144. */
  4145. /*
  4146. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4147. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4148. */
  4149. .ck.ck-character-info {
  4150. padding: var(--ck-spacing-small) var(--ck-spacing-large);
  4151. border-top: 1px solid var(--ck-color-base-border);
  4152. }
  4153. .ck.ck-character-info > * {
  4154. text-transform: uppercase;
  4155. font-size: var(--ck-font-size-small);
  4156. }
  4157. .ck.ck-character-info .ck-character-info__name {
  4158. max-width: 280px;
  4159. text-overflow: ellipsis;
  4160. overflow: hidden;
  4161. }
  4162. .ck.ck-character-info .ck-character-info__code {
  4163. opacity: .6;
  4164. }
  4165. /*
  4166. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4167. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4168. */
  4169. /*
  4170. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4171. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4172. */
  4173. /*
  4174. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4175. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4176. */
  4177. .ck.ck-special-characters-navigation > .ck-label {
  4178. max-width: 160px;
  4179. text-overflow: ellipsis;
  4180. overflow: hidden;
  4181. }
  4182. .ck.ck-special-characters-navigation > .ck-dropdown .ck-dropdown__panel {
  4183. /* There could be dozens of categories available. Use scroll to prevent a 10e6px dropdown. */
  4184. max-height: 250px;
  4185. overflow-y: auto;
  4186. overflow-x: hidden;
  4187. }
  4188. @media screen and (max-width: 600px) {
  4189. .ck.ck-special-characters-navigation {
  4190. max-width: 190px;
  4191. }
  4192. .ck.ck-special-characters-navigation > .ck-form__header__label {
  4193. text-overflow: ellipsis;
  4194. overflow: hidden;
  4195. }
  4196. }
  4197. /*
  4198. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4199. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4200. */
  4201. .ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label {
  4202. font-style: italic;
  4203. }
  4204. /*
  4205. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4206. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4207. */
  4208. :root {
  4209. --ck-style-panel-button-width: 120px;
  4210. --ck-style-panel-button-height: 80px;
  4211. --ck-style-panel-button-label-background: hsl(0, 0%, 94.1%);
  4212. --ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%);
  4213. --ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%);
  4214. }
  4215. .ck.ck-style-panel .ck-style-grid {
  4216. row-gap: var(--ck-spacing-large);
  4217. column-gap: var(--ck-spacing-large);
  4218. }
  4219. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
  4220. --ck-color-button-default-hover-background: var(--ck-color-base-background);
  4221. --ck-color-button-default-active-background: var(--ck-color-base-background);
  4222. padding: 0;
  4223. width: var(--ck-style-panel-button-width);
  4224. height: var(--ck-style-panel-button-height);
  4225. /* Let default .ck-button :focus styles apply */
  4226. }
  4227. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(:focus) {
  4228. border: 1px solid var(--ck-color-base-border);
  4229. }
  4230. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label {
  4231. height: 22px;
  4232. line-height: 22px;
  4233. width: 100%;
  4234. padding: 0 var(--ck-spacing-medium);
  4235. overflow: hidden;
  4236. text-overflow: ellipsis;
  4237. flex-shrink: 0;
  4238. }
  4239. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
  4240. width: 100%;
  4241. overflow: hidden;
  4242. opacity: .9;
  4243. padding: var(--ck-spacing-medium);
  4244. background: var(--ck-color-base-background);
  4245. border: 2px solid var(--ck-color-base-background);
  4246. }
  4247. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled {
  4248. --ck-color-button-default-disabled-background: var(--ck-color-base-foreground);
  4249. /* Let default .ck-button :focus styles apply */
  4250. }
  4251. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled:not(:focus) {
  4252. border-color: var(--ck-style-panel-button-label-background);
  4253. }
  4254. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled .ck-style-grid__button__preview {
  4255. opacity: .4;
  4256. border-color: var(--ck-color-base-foreground);
  4257. filter: saturate(.3);
  4258. }
  4259. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on {
  4260. border-color: var(--ck-color-base-active);
  4261. }
  4262. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on .ck-button__label {
  4263. box-shadow: 0 -1px 0 var(--ck-color-base-active);
  4264. z-index: 1; /* Stay on top of the preview with the shadow. */
  4265. }
  4266. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on:hover {
  4267. border-color: var(--ck-color-base-active-focus);
  4268. }
  4269. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
  4270. background: var(--ck-style-panel-button-label-background);
  4271. }
  4272. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on):hover .ck-button__label {
  4273. background: var(--ck-style-panel-button-hover-label-background);
  4274. }
  4275. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) {
  4276. border-color: var(--ck-style-panel-button-hover-border-color);
  4277. }
  4278. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) .ck-style-grid__button__preview {
  4279. opacity: 1;
  4280. }
  4281. /*
  4282. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4283. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4284. */
  4285. .ck.ck-style-panel .ck-style-panel__style-group > .ck-label {
  4286. margin: var(--ck-spacing-large) 0;
  4287. }
  4288. .ck.ck-style-panel .ck-style-panel__style-group:first-child > .ck-label {
  4289. margin-top: 0;
  4290. }
  4291. /*
  4292. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4293. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4294. */
  4295. :root {
  4296. --ck-style-panel-max-height: 470px;
  4297. }
  4298. .ck.ck-style-panel {
  4299. padding: var(--ck-spacing-large);
  4300. overflow-y: auto;
  4301. max-height: var(--ck-style-panel-max-height);
  4302. }
  4303. /*
  4304. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4305. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4306. */
  4307. /*
  4308. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4309. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4310. */
  4311. /*
  4312. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4313. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4314. */
  4315. /**
  4316. * Implements rounded corner interface for .ck-rounded-corners class.
  4317. *
  4318. * @see $ck-border-radius
  4319. */
  4320. [dir="ltr"] .ck.ck-input-color > .ck.ck-input-text {
  4321. border-top-right-radius: 0;
  4322. border-bottom-right-radius: 0;
  4323. }
  4324. [dir="rtl"] .ck.ck-input-color > .ck.ck-input-text {
  4325. border-top-left-radius: 0;
  4326. border-bottom-left-radius: 0;
  4327. }
  4328. /* Make sure the focused input is always on top of the dropdown button so its
  4329. outline and border are never cropped (also when the input is read-only). */
  4330. .ck.ck-input-color > .ck.ck-input-text:focus {
  4331. z-index: 0;
  4332. }
  4333. .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
  4334. padding: 0;
  4335. }
  4336. [dir="ltr"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
  4337. border-top-left-radius: 0;
  4338. border-bottom-left-radius: 0;
  4339. }
  4340. [dir="ltr"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button:not(:focus) {
  4341. border-left: 1px solid transparent;
  4342. }
  4343. [dir="rtl"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
  4344. border-top-right-radius: 0;
  4345. border-bottom-right-radius: 0;
  4346. }
  4347. [dir="rtl"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button:not(:focus) {
  4348. border-right: 1px solid transparent;
  4349. }
  4350. .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button.ck-disabled {
  4351. background: var(--ck-color-input-disabled-background);
  4352. }
  4353. .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview {
  4354. border-radius: 0;
  4355. width: 20px;
  4356. height: 20px;
  4357. border: 1px solid var(--ck-color-input-border);
  4358. }
  4359. .ck-rounded-corners .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview,
  4360. .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview.ck-rounded-corners {
  4361. border-radius: var(--ck-border-radius);
  4362. }
  4363. .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator {
  4364. top: -30%;
  4365. left: 50%;
  4366. height: 150%;
  4367. width: 8%;
  4368. background: hsl(0, 100%, 50%);
  4369. border-radius: 2px;
  4370. transform: rotate(45deg);
  4371. transform-origin: 50%;
  4372. }
  4373. .ck.ck-input-color .ck.ck-input-color__remove-color {
  4374. width: 100%;
  4375. padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
  4376. border-bottom-left-radius: 0;
  4377. border-bottom-right-radius: 0;
  4378. }
  4379. .ck.ck-input-color .ck.ck-input-color__remove-color:not(:focus) {
  4380. border-bottom: 1px solid var(--ck-color-input-border);
  4381. }
  4382. [dir="ltr"] .ck.ck-input-color .ck.ck-input-color__remove-color {
  4383. border-top-right-radius: 0;
  4384. }
  4385. [dir="rtl"] .ck.ck-input-color .ck.ck-input-color__remove-color {
  4386. border-top-left-radius: 0;
  4387. }
  4388. .ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon {
  4389. margin-right: var(--ck-spacing-standard);
  4390. }
  4391. [dir="rtl"] .ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon {
  4392. margin-right: 0;
  4393. margin-left: var(--ck-spacing-standard);
  4394. }
  4395. /*
  4396. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4397. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4398. */
  4399. .ck.ck-form {
  4400. padding: 0 0 var(--ck-spacing-large);
  4401. }
  4402. .ck.ck-form:focus {
  4403. /* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
  4404. outline: none;
  4405. }
  4406. .ck.ck-form .ck.ck-input-text {
  4407. min-width: 100%;
  4408. width: 0;
  4409. }
  4410. .ck.ck-form .ck.ck-dropdown {
  4411. min-width: 100%;
  4412. }
  4413. .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
  4414. border: 1px solid var(--ck-color-base-border);
  4415. }
  4416. .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
  4417. width: 100%;
  4418. }
  4419. /*
  4420. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4421. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4422. */
  4423. /*
  4424. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4425. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4426. */
  4427. .ck.ck-form__row {
  4428. padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
  4429. /* Ignore labels that work as fieldset legends */
  4430. }
  4431. [dir="ltr"] .ck.ck-form__row > *:not(.ck-label) + * {
  4432. margin-left: var(--ck-spacing-large);
  4433. }
  4434. [dir="rtl"] .ck.ck-form__row > *:not(.ck-label) + * {
  4435. margin-right: var(--ck-spacing-large);
  4436. }
  4437. .ck.ck-form__row > .ck-label {
  4438. width: 100%;
  4439. min-width: 100%;
  4440. }
  4441. .ck.ck-form__row.ck-table-form__action-row {
  4442. margin-top: var(--ck-spacing-large);
  4443. }
  4444. .ck.ck-form__row.ck-table-form__action-row .ck-button .ck-button__label {
  4445. color: var(--ck-color-text);
  4446. }
  4447. /*
  4448. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4449. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4450. */
  4451. :root {
  4452. --ck-insert-table-dropdown-padding: 10px;
  4453. --ck-insert-table-dropdown-box-height: 11px;
  4454. --ck-insert-table-dropdown-box-width: 12px;
  4455. --ck-insert-table-dropdown-box-margin: 1px;
  4456. }
  4457. .ck .ck-insert-table-dropdown__grid {
  4458. /* The width of a container should match 10 items in a row so there will be a 10x10 grid. */
  4459. width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2);
  4460. padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0;
  4461. }
  4462. .ck .ck-insert-table-dropdown__label,
  4463. .ck[dir=rtl] .ck-insert-table-dropdown__label {
  4464. text-align: center;
  4465. }
  4466. .ck .ck-insert-table-dropdown-grid-box {
  4467. min-width: var(--ck-insert-table-dropdown-box-width);
  4468. min-height: var(--ck-insert-table-dropdown-box-height);
  4469. margin: var(--ck-insert-table-dropdown-box-margin);
  4470. border: 1px solid var(--ck-color-base-border);
  4471. border-radius: 1px;
  4472. outline: none;
  4473. transition: none;
  4474. }
  4475. @media (prefers-reduced-motion: reduce) {
  4476. .ck .ck-insert-table-dropdown-grid-box {
  4477. transition: none;
  4478. }
  4479. }
  4480. .ck .ck-insert-table-dropdown-grid-box:focus {
  4481. box-shadow: none;
  4482. }
  4483. .ck .ck-insert-table-dropdown-grid-box.ck-on {
  4484. border-color: var(--ck-color-focus-border);
  4485. background: var(--ck-color-focus-outer-shadow);
  4486. }
  4487. /*
  4488. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4489. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4490. */
  4491. .ck.ck-table-cell-properties-form {
  4492. width: 320px;
  4493. }
  4494. .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__padding-row {
  4495. align-self: flex-end;
  4496. padding: 0;
  4497. width: 25%;
  4498. }
  4499. .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar {
  4500. background: none;
  4501. /* Compensate for missing input label that would push the margin (toolbar has no inputs). */
  4502. margin-top: var(--ck-spacing-standard);
  4503. }
  4504. /*
  4505. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4506. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4507. */
  4508. :root {
  4509. --ck-color-selector-focused-cell-background: hsla(212, 90%, 80%, .3);
  4510. }
  4511. /**
  4512. * While setting outline is fine, the border should not be modified here
  4513. * because it overrides the default table cell border color which is not expected.
  4514. * So do not use `@mixin ck-focus-ring;` here, or any other border styles.
  4515. * See more: https://github.com/ckeditor/ckeditor5/issues/16979
  4516. */
  4517. .ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
  4518. .ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
  4519. .ck-widget.table td.ck-editor__nested-editable:focus,
  4520. .ck-widget.table th.ck-editor__nested-editable:focus {
  4521. /* A very slight background to highlight the focused cell */
  4522. background: var(--ck-color-selector-focused-cell-background);
  4523. outline: 1px solid var(--ck-color-focus-border);
  4524. outline-offset: -1px; /* progressive enhancement - no IE support */
  4525. }
  4526. /*
  4527. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4528. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4529. */
  4530. /*
  4531. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4532. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4533. */
  4534. /**
  4535. * Implements rounded corner interface for .ck-rounded-corners class.
  4536. *
  4537. * @see $ck-border-radius
  4538. */
  4539. :root {
  4540. --ck-table-properties-error-arrow-size: 6px;
  4541. --ck-table-properties-min-error-width: 150px;
  4542. }
  4543. .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label {
  4544. font-size: var(--ck-font-size-tiny);
  4545. text-align: center;
  4546. }
  4547. .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-style,
  4548. .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-width {
  4549. width: 80px;
  4550. min-width: 80px;
  4551. max-width: 80px;
  4552. }
  4553. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
  4554. padding: 0;
  4555. }
  4556. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width,
  4557. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height {
  4558. margin: 0
  4559. }
  4560. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
  4561. align-self: flex-end;
  4562. display: inline-block;
  4563. height: var(--ck-ui-component-min-height);
  4564. line-height: var(--ck-ui-component-min-height);
  4565. margin: 0 var(--ck-spacing-small);
  4566. }
  4567. .ck.ck-table-form .ck.ck-labeled-field-view {
  4568. padding-top: var(--ck-spacing-standard);
  4569. }
  4570. .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
  4571. border-radius: 0;
  4572. background: var(--ck-color-base-error);
  4573. color: var(--ck-color-base-background);
  4574. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  4575. min-width: var(--ck-table-properties-min-error-width);
  4576. text-align: center;
  4577. animation: ck-table-form-labeled-view-status-appear .15s ease both;
  4578. }
  4579. .ck-rounded-corners .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status,
  4580. .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status.ck-rounded-corners {
  4581. border-radius: var(--ck-border-radius);
  4582. }
  4583. /* The arrow pointing towards the field. */
  4584. .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
  4585. border-color: transparent transparent var(--ck-color-base-error) transparent;
  4586. border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
  4587. border-style: solid;
  4588. }
  4589. @media (prefers-reduced-motion: reduce) {
  4590. .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
  4591. animation: none;
  4592. }
  4593. }
  4594. /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
  4595. .ck.ck-table-form .ck.ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
  4596. display: none;
  4597. }
  4598. @keyframes ck-table-form-labeled-view-status-appear {
  4599. 0% {
  4600. opacity: 0;
  4601. }
  4602. 100% {
  4603. opacity: 1;
  4604. }
  4605. }
  4606. /*
  4607. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4608. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4609. */
  4610. .ck.ck-table-properties-form {
  4611. width: 320px;
  4612. }
  4613. .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
  4614. align-self: flex-end;
  4615. padding: 0;
  4616. }
  4617. .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar {
  4618. background: none;
  4619. /* Compensate for missing input label that would push the margin (toolbar has no inputs). */
  4620. margin-top: var(--ck-spacing-standard);
  4621. }
  4622. .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items > * {
  4623. width: 40px;
  4624. }
  4625. /*
  4626. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4627. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4628. */
  4629. :root {
  4630. --ck-table-selected-cell-background: hsla(208, 90%, 80%, .3);
  4631. }
  4632. .ck.ck-editor__editable .table table td.ck-editor__editable_selected,
  4633. .ck.ck-editor__editable .table table th.ck-editor__editable_selected {
  4634. position: relative;
  4635. caret-color: transparent;
  4636. outline: unset;
  4637. box-shadow: unset;
  4638. /* https://github.com/ckeditor/ckeditor5/issues/6446 */
  4639. }
  4640. .ck.ck-editor__editable .table table td.ck-editor__editable_selected:after, .ck.ck-editor__editable .table table th.ck-editor__editable_selected:after {
  4641. content: '';
  4642. pointer-events: none;
  4643. background-color: var(--ck-table-selected-cell-background);
  4644. position: absolute;
  4645. top: 0;
  4646. left: 0;
  4647. right: 0;
  4648. bottom: 0;
  4649. }
  4650. .ck.ck-editor__editable .table table td.ck-editor__editable_selected ::selection,
  4651. .ck.ck-editor__editable .table table th.ck-editor__editable_selected ::selection,
  4652. .ck.ck-editor__editable .table table td.ck-editor__editable_selected:focus,
  4653. .ck.ck-editor__editable .table table th.ck-editor__editable_selected:focus {
  4654. background-color: transparent;
  4655. }
  4656. /*
  4657. * To reduce the amount of noise, all widgets in the table selection have no outline and no selection handle.
  4658. * See https://github.com/ckeditor/ckeditor5/issues/9491.
  4659. */
  4660. .ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget {
  4661. outline: unset;
  4662. }
  4663. .ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle {
  4664. display: none;
  4665. }
  4666. /*
  4667. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4668. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4669. */
  4670. /*
  4671. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4672. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4673. */
  4674. /**
  4675. * A visual style of focused element's border.
  4676. */
  4677. /*
  4678. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4679. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4680. */
  4681. /**
  4682. * A helper to combine multiple shadows.
  4683. */
  4684. /**
  4685. * Gives an element a drop shadow so it looks like a floating panel.
  4686. */
  4687. /*
  4688. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4689. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4690. */
  4691. :root {
  4692. --ck-widget-outline-thickness: 3px;
  4693. --ck-widget-handler-icon-size: 16px;
  4694. --ck-widget-handler-animation-duration: 200ms;
  4695. --ck-widget-handler-animation-curve: ease;
  4696. --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
  4697. --ck-color-widget-hover-border: hsl(43, 100%, 62%);
  4698. --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
  4699. --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
  4700. }
  4701. .ck .ck-widget {
  4702. outline-width: var(--ck-widget-outline-thickness);
  4703. outline-style: solid;
  4704. outline-color: transparent;
  4705. transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  4706. }
  4707. @media (prefers-reduced-motion: reduce) {
  4708. .ck .ck-widget {
  4709. transition: none;
  4710. }
  4711. }
  4712. .ck .ck-widget.ck-widget_selected,
  4713. .ck .ck-widget.ck-widget_selected:hover {
  4714. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
  4715. }
  4716. .ck .ck-widget:hover {
  4717. outline-color: var(--ck-color-widget-hover-border);
  4718. }
  4719. .ck .ck-editor__nested-editable {
  4720. border: 1px solid transparent;
  4721. /* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
  4722. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
  4723. }
  4724. .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused,
  4725. .ck .ck-editor__nested-editable:focus {
  4726. box-shadow: var(--ck-inner-shadow), 0 0;
  4727. }
  4728. @media (forced-colors: none) {
  4729. .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus {
  4730. background-color: var(--ck-color-widget-editable-focus-background);
  4731. }
  4732. }
  4733. /**
  4734. * Focus border should not be applied to table cells because it overrides the default table cell border color.
  4735. * In other words - in some scenarios, the part of the table cell border has focus color style, which is not expected behavior
  4736. * because it should be the same as the table cell border color.
  4737. */
  4738. .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused:not(td, th), .ck .ck-editor__nested-editable:focus:not(td, th) {
  4739. /* Disable native outline. */
  4740. outline: none;
  4741. border: var(--ck-focus-ring);
  4742. }
  4743. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
  4744. padding: 4px;
  4745. box-sizing: border-box;
  4746. /* Background and opacity will be animated as the handler shows up or the widget gets selected. */
  4747. background-color: transparent;
  4748. opacity: 0;
  4749. /* Transition:
  4750. * background-color for the .ck-widget_selected state change,
  4751. * visibility for hiding the handler,
  4752. * opacity for the proper look of the icon when the handler disappears. */
  4753. transition:
  4754. background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
  4755. visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
  4756. opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  4757. /* Make only top corners round. */
  4758. border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
  4759. /* Place the drag handler outside the widget wrapper. */
  4760. transform: translateY(-100%);
  4761. left: calc(0px - var(--ck-widget-outline-thickness));
  4762. top: 0;
  4763. }
  4764. @media (prefers-reduced-motion: reduce) {
  4765. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
  4766. transition: none;
  4767. }
  4768. }
  4769. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon {
  4770. /* Make sure the dimensions of the icon are independent of the fon-size of the content. */
  4771. width: var(--ck-widget-handler-icon-size);
  4772. height: var(--ck-widget-handler-icon-size);
  4773. color: var(--ck-color-widget-drag-handler-icon-color);
  4774. /* The "selected" part of the icon is invisible by default */
  4775. }
  4776. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
  4777. opacity: 0;
  4778. /* Note: The animation is longer on purpose. Simply feels better. */
  4779. transition: opacity 300ms var(--ck-widget-handler-animation-curve);
  4780. }
  4781. @media (prefers-reduced-motion: reduce) {
  4782. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
  4783. transition: none;
  4784. }
  4785. }
  4786. /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
  4787. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator {
  4788. opacity: 1;
  4789. }
  4790. /* Show the selection handler on mouse hover over the widget, but not for nested widgets. */
  4791. .ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle {
  4792. opacity: 1;
  4793. background-color: var(--ck-color-widget-hover-border);
  4794. }
  4795. /* Show the selection handler when the widget is selected, but not for nested widgets. */
  4796. .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle {
  4797. opacity: 1;
  4798. background-color: var(--ck-color-focus-border);
  4799. /* When the widget is selected, notify the user using the proper look of the icon. */
  4800. }
  4801. .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
  4802. opacity: 1;
  4803. }
  4804. /* In a RTL environment, align the selection handler to the right side of the widget */
  4805. /* stylelint-disable-next-line no-descending-specificity */
  4806. .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
  4807. left: auto;
  4808. right: calc(0px - var(--ck-widget-outline-thickness));
  4809. }
  4810. /* https://github.com/ckeditor/ckeditor5/issues/6415 */
  4811. .ck.ck-editor__editable.ck-read-only .ck-widget {
  4812. /* Prevent the :hover outline from showing up because of the used outline-color transition. */
  4813. transition: none;
  4814. }
  4815. .ck.ck-editor__editable.ck-read-only .ck-widget:not(.ck-widget_selected) {
  4816. /* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
  4817. * See: https://github.com/ckeditor/ckeditor5/issues/1261
  4818. *
  4819. * Leave the unit because this custom property is used in calc() by other features.
  4820. * See: https://github.com/ckeditor/ckeditor5/issues/6775
  4821. */
  4822. --ck-widget-outline-thickness: 0px;
  4823. }
  4824. .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle,
  4825. .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover {
  4826. background: var(--ck-color-widget-blurred-border);
  4827. }
  4828. /* Style the widget when it's selected but the editable it belongs to lost focus. */
  4829. /* stylelint-disable-next-line no-descending-specificity */
  4830. .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected,
  4831. .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover {
  4832. outline-color: var(--ck-color-widget-blurred-border);
  4833. }
  4834. .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle,
  4835. .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle,
  4836. .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle:hover,
  4837. .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle:hover {
  4838. background: var(--ck-color-widget-blurred-border);
  4839. }
  4840. .ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
  4841. .ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
  4842. /* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
  4843. In fact, anything with overflow: hidden.
  4844. https://github.com/ckeditor/ckeditor5-block-quote/issues/28
  4845. https://github.com/ckeditor/ckeditor5-widget/issues/44
  4846. https://github.com/ckeditor/ckeditor5-widget/issues/66 */
  4847. margin-top: calc(1em + var(--ck-widget-handler-icon-size));
  4848. }
  4849. /*
  4850. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4851. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4852. */
  4853. :root {
  4854. --ck-resizer-size: 10px;
  4855. /* Set the resizer with a 50% offset. */
  4856. --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
  4857. --ck-resizer-border-width: 1px;
  4858. }
  4859. .ck .ck-widget__resizer {
  4860. outline: 1px solid var(--ck-color-resizer);
  4861. }
  4862. .ck .ck-widget__resizer__handle {
  4863. width: var(--ck-resizer-size);
  4864. height: var(--ck-resizer-size);
  4865. background: var(--ck-color-focus-border);
  4866. border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%);
  4867. border-radius: var(--ck-resizer-border-radius);
  4868. }
  4869. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left {
  4870. top: var(--ck-resizer-offset);
  4871. left: var(--ck-resizer-offset);
  4872. }
  4873. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right {
  4874. top: var(--ck-resizer-offset);
  4875. right: var(--ck-resizer-offset);
  4876. }
  4877. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right {
  4878. bottom: var(--ck-resizer-offset);
  4879. right: var(--ck-resizer-offset);
  4880. }
  4881. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left {
  4882. bottom: var(--ck-resizer-offset);
  4883. left: var(--ck-resizer-offset);
  4884. }
  4885. /*
  4886. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  4887. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  4888. */
  4889. :root {
  4890. --ck-widget-type-around-button-size: 20px;
  4891. --ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
  4892. --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
  4893. --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
  4894. --ck-color-widget-type-around-button-radar-start-alpha: 0;
  4895. --ck-color-widget-type-around-button-radar-end-alpha: .3;
  4896. --ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
  4897. }
  4898. /*
  4899. * Styles of the type around buttons
  4900. */
  4901. .ck .ck-widget .ck-widget__type-around__button {
  4902. width: var(--ck-widget-type-around-button-size);
  4903. height: var(--ck-widget-type-around-button-size);
  4904. background: var(--ck-color-widget-type-around-button);
  4905. border-radius: 100px;
  4906. transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  4907. opacity: 0;
  4908. pointer-events: none;
  4909. }
  4910. @media (prefers-reduced-motion: reduce) {
  4911. .ck .ck-widget .ck-widget__type-around__button {
  4912. transition: none;
  4913. }
  4914. }
  4915. .ck .ck-widget .ck-widget__type-around__button svg {
  4916. width: 10px;
  4917. height: 8px;
  4918. transform: translate(-50%,-50%);
  4919. transition: transform .5s ease;
  4920. margin-top: 1px;
  4921. }
  4922. @media (prefers-reduced-motion: reduce) {
  4923. .ck .ck-widget .ck-widget__type-around__button svg {
  4924. transition: none;
  4925. }
  4926. }
  4927. .ck .ck-widget .ck-widget__type-around__button svg * {
  4928. stroke-dasharray: 10;
  4929. stroke-dashoffset: 0;
  4930. fill: none;
  4931. stroke: var(--ck-color-widget-type-around-button-icon);
  4932. stroke-width: 1.5px;
  4933. stroke-linecap: round;
  4934. stroke-linejoin: round;
  4935. }
  4936. .ck .ck-widget .ck-widget__type-around__button svg line {
  4937. stroke-dasharray: 7;
  4938. }
  4939. .ck .ck-widget .ck-widget__type-around__button:hover {
  4940. /*
  4941. * Display the "sonar" around the button when hovered.
  4942. */
  4943. animation: ck-widget-type-around-button-sonar 1s ease infinite;
  4944. /*
  4945. * Animate active button's icon.
  4946. */
  4947. }
  4948. .ck .ck-widget .ck-widget__type-around__button:hover svg polyline {
  4949. animation: ck-widget-type-around-arrow-dash 2s linear;
  4950. }
  4951. .ck .ck-widget .ck-widget__type-around__button:hover svg line {
  4952. animation: ck-widget-type-around-arrow-tip-dash 2s linear;
  4953. }
  4954. @media (prefers-reduced-motion: reduce) {
  4955. .ck .ck-widget .ck-widget__type-around__button:hover {
  4956. animation: none;
  4957. }
  4958. .ck .ck-widget .ck-widget__type-around__button:hover svg polyline {
  4959. animation: none;
  4960. }
  4961. .ck .ck-widget .ck-widget__type-around__button:hover svg line {
  4962. animation: none;
  4963. }
  4964. }
  4965. /*
  4966. * Show type around buttons when the widget gets selected or being hovered.
  4967. */
  4968. .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
  4969. opacity: 1;
  4970. pointer-events: auto;
  4971. }
  4972. /*
  4973. * Styles for the buttons when the widget is NOT selected (but the buttons are visible
  4974. * and still can be hovered).
  4975. */
  4976. .ck .ck-widget:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button {
  4977. background: var(--ck-color-widget-type-around-button-hover);
  4978. }
  4979. /*
  4980. * Styles for the buttons when:
  4981. * - the widget is selected,
  4982. * - or the button is being hovered (regardless of the widget state).
  4983. */
  4984. .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button,
  4985. .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover {
  4986. background: var(--ck-color-widget-type-around-button-active);
  4987. }
  4988. .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after {
  4989. width: calc(var(--ck-widget-type-around-button-size) - 2px);
  4990. height: calc(var(--ck-widget-type-around-button-size) - 2px);
  4991. border-radius: 100px;
  4992. background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%);
  4993. }
  4994. /*
  4995. * Styles for the "before" button when the widget has a selection handle. Because some space
  4996. * is consumed by the handle, the button must be moved slightly to the right to let it breathe.
  4997. */
  4998. .ck .ck-widget.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before {
  4999. margin-left: 20px;
  5000. }
  5001. /*
  5002. * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
  5003. */
  5004. .ck .ck-widget .ck-widget__type-around__fake-caret {
  5005. pointer-events: none;
  5006. height: 1px;
  5007. animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards;
  5008. /*
  5009. * The semi-transparent-outline+background combo improves the contrast
  5010. * when the background underneath the fake caret is dark.
  5011. */
  5012. outline: solid 1px hsla(0, 0%, 100%, .5);
  5013. background: var(--ck-color-base-text);
  5014. }
  5015. /*
  5016. * Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
  5017. * Despite the widget being physically selected in the model, its outline should disappear.
  5018. */
  5019. .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
  5020. .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after {
  5021. outline-color: transparent;
  5022. }
  5023. /*
  5024. * When the "fake caret" is visible we simulate that the widget is not selected
  5025. * (despite being physically selected), so the outline color should be for the
  5026. * unselected widget.
  5027. */
  5028. .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected:hover, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected:hover {
  5029. outline-color: var(--ck-color-widget-hover-border);
  5030. }
  5031. /*
  5032. * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation).
  5033. * In this state, the type around buttons would collide with the fake carets so they should disappear.
  5034. */
  5035. .ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__button {
  5036. opacity: 0;
  5037. pointer-events: none;
  5038. }
  5039. /*
  5040. * Fake horizontal caret integration with the selection handle. When the caret is visible, simply
  5041. * hide the handle because it intersects with the caret (and does not make much sense anyway).
  5042. */
  5043. .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle {
  5044. opacity: 0
  5045. }
  5046. /*
  5047. * Fake horizontal caret integration with the resize UI. When the caret is visible, simply
  5048. * hide the resize UI because it creates too much noise. It can be visible when the user
  5049. * hovers the widget, though.
  5050. */
  5051. .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer {
  5052. opacity: 0
  5053. }
  5054. /*
  5055. * Styles for the "before" button when the widget has a selection handle in an RTL environment.
  5056. * The selection handler is aligned to the right side of the widget so there is no need to create
  5057. * additional space for it next to the "before" button.
  5058. */
  5059. .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before {
  5060. margin-left: 0;
  5061. margin-right: 20px;
  5062. }
  5063. /*
  5064. * Hide type around buttons when the widget is selected as a child of a selected
  5065. * nested editable (e.g. mulit-cell table selection).
  5066. *
  5067. * See https://github.com/ckeditor/ckeditor5/issues/7263.
  5068. */
  5069. .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
  5070. opacity: 0;
  5071. pointer-events: none;
  5072. }
  5073. /*
  5074. * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor).
  5075. */
  5076. .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) {
  5077. background: var(--ck-color-widget-type-around-button-blurred-editable);
  5078. }
  5079. .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) svg * {
  5080. stroke: hsl(0,0%,60%);
  5081. }
  5082. @keyframes ck-widget-type-around-arrow-dash {
  5083. 0% {
  5084. stroke-dashoffset: 10;
  5085. }
  5086. 20%, 100% {
  5087. stroke-dashoffset: 0;
  5088. }
  5089. }
  5090. @keyframes ck-widget-type-around-arrow-tip-dash {
  5091. 0%, 20% {
  5092. stroke-dashoffset: 7;
  5093. }
  5094. 40%, 100% {
  5095. stroke-dashoffset: 0;
  5096. }
  5097. }
  5098. @keyframes ck-widget-type-around-button-sonar {
  5099. 0% {
  5100. box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
  5101. }
  5102. 50% {
  5103. box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha));
  5104. }
  5105. 100% {
  5106. box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
  5107. }
  5108. }
  5109. @keyframes ck-widget-type-around-fake-caret-pulse {
  5110. 0% {
  5111. opacity: 1;
  5112. }
  5113. 49% {
  5114. opacity: 1;
  5115. }
  5116. 50% {
  5117. opacity: 0;
  5118. }
  5119. 99% {
  5120. opacity: 0;
  5121. }
  5122. 100% {
  5123. opacity: 1;
  5124. }
  5125. }
  5126. /*
  5127. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5128. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5129. */
  5130. .ck-content code {
  5131. background-color: hsla(0, 0%, 78%, 0.3);
  5132. padding: .15em;
  5133. border-radius: 2px;
  5134. }
  5135. .ck.ck-editor__editable .ck-code_selected {
  5136. background-color: hsla(0, 0%, 78%, 0.5);
  5137. }
  5138. /*
  5139. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5140. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5141. */
  5142. .ck-content blockquote {
  5143. /* See #12 */
  5144. overflow: hidden;
  5145. /* https://github.com/ckeditor/ckeditor5-block-quote/issues/15 */
  5146. padding-right: 1.5em;
  5147. padding-left: 1.5em;
  5148. margin-left: 0;
  5149. margin-right: 0;
  5150. font-style: italic;
  5151. border-left: solid 5px hsl(0, 0%, 80%);
  5152. }
  5153. .ck-content[dir="rtl"] blockquote {
  5154. border-left: 0;
  5155. border-right: solid 5px hsl(0, 0%, 80%);
  5156. }
  5157. /*
  5158. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5159. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5160. */
  5161. :root {
  5162. --ck-bookmark-icon-hover-fill-color: var(--ck-color-widget-hover-border);
  5163. --ck-bookmark-icon-selected-fill-color: var(--ck-color-focus-border);
  5164. --ck-bookmark-icon-animation-duration: var(--ck-widget-handler-animation-duration);
  5165. --ck-bookmark-icon-animation-curve: var(--ck-widget-handler-animation-curve);
  5166. }
  5167. .ck-bookmark.ck-widget {
  5168. outline: none;
  5169. }
  5170. .ck-bookmark.ck-widget .ck-bookmark__icon .ck-icon__fill {
  5171. transition: fill var(--ck-bookmark-icon-animation-duration) var(--ck-bookmark-icon-animation-curve);
  5172. }
  5173. .ck-bookmark.ck-widget:hover .ck-bookmark__icon .ck-icon__fill {
  5174. fill: var(--ck-bookmark-icon-hover-fill-color);
  5175. }
  5176. .ck-bookmark.ck-widget.ck-widget_selected .ck-bookmark__icon .ck-icon__fill {
  5177. fill: var(--ck-bookmark-icon-selected-fill-color);
  5178. }
  5179. .ck-bookmark.ck-widget.ck-widget_selected,
  5180. .ck-bookmark.ck-widget.ck-widget_selected:hover {
  5181. outline: none;
  5182. }
  5183. .ck-bookmark.ck-widget .ck-bookmark__icon {
  5184. position: relative;
  5185. /* To make it align with text baseline. */
  5186. top: -0.1em;
  5187. }
  5188. .ck-bookmark.ck-widget .ck-bookmark__icon .ck-icon {
  5189. height: 1.2em;
  5190. width: auto;
  5191. vertical-align: middle;
  5192. }
  5193. /*
  5194. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5195. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5196. */
  5197. /*
  5198. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5199. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5200. */
  5201. .ck.ck-bookmark-view:focus {
  5202. outline: none;
  5203. }
  5204. .ck.ck-bookmark-form {
  5205. display: flex;
  5206. align-items: flex-start;
  5207. }
  5208. @media screen and (max-width: 600px) {
  5209. .ck.ck-bookmark-form {
  5210. flex-wrap: wrap;
  5211. }
  5212. .ck.ck-bookmark-form .ck-button,
  5213. .ck.ck-bookmark-form .ck-labeled-field-view {
  5214. flex-basis: 100%;
  5215. }
  5216. .ck.ck-bookmark-form .ck-button {
  5217. justify-content: center;
  5218. }
  5219. }
  5220. @media screen and (max-width: 600px) {
  5221. .ck.ck-bookmark-form.ck-responsive-form > .ck-button:nth-last-child(1) {
  5222. margin: var(--ck-spacing-large);
  5223. padding: 0 var(--ck-spacing-standard);
  5224. border-radius: var(--ck-border-radius);
  5225. }
  5226. }
  5227. /*
  5228. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5229. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5230. */
  5231. /*
  5232. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5233. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5234. */
  5235. /*
  5236. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5237. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5238. */
  5239. /**
  5240. * Makes element unselectable.
  5241. */
  5242. .ck.ck-bookmark-actions {
  5243. display: flex;
  5244. align-items: center;
  5245. }
  5246. .ck.ck-bookmark-actions .ck-bookmark-actions__preview {
  5247. max-width: var(--ck-input-width);
  5248. min-width: 3em;
  5249. font-weight: normal;
  5250. text-overflow: ellipsis;
  5251. text-align: center;
  5252. overflow: hidden;
  5253. -moz-user-select: none;
  5254. -webkit-user-select: none;
  5255. -ms-user-select: none;
  5256. user-select: none;
  5257. cursor: default;
  5258. }
  5259. @media screen and (max-width: 600px) {
  5260. .ck.ck-bookmark-actions {
  5261. display: flex;
  5262. flex-wrap: wrap;
  5263. }
  5264. .ck.ck-bookmark-actions .ck-bookmark-actions__preview {
  5265. flex-basis: 100%;
  5266. margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
  5267. min-width: auto;
  5268. }
  5269. }
  5270. @media screen and (max-width: 600px) {
  5271. .ck.ck-bookmark-actions.ck-responsive-form .ck-button {
  5272. flex-basis: 50%;
  5273. margin-top: var(--ck-spacing-standard);
  5274. }
  5275. }
  5276. /*
  5277. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5278. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5279. */
  5280. :root {
  5281. /* Based on default CKBox theme colors */
  5282. --ck-image-processing-highlight-color: hsl(220, 10%, 98%);
  5283. --ck-image-processing-background-color: hsl(220, 10%, 90%);
  5284. }
  5285. .ck.ck-editor__editable .image.image-processing {
  5286. position: relative;
  5287. }
  5288. .ck.ck-editor__editable .image.image-processing:before {
  5289. content: '';
  5290. position: absolute;
  5291. top: 0;
  5292. left: 0;
  5293. z-index: 1;
  5294. height: 100%;
  5295. width: 100%;
  5296. background: linear-gradient(
  5297. 90deg,
  5298. var(--ck-image-processing-background-color),
  5299. var(--ck-image-processing-highlight-color),
  5300. var(--ck-image-processing-background-color)
  5301. );
  5302. background-size: 200% 100%;
  5303. animation: ck-image-processing-animation 2s linear infinite;
  5304. }
  5305. .ck.ck-editor__editable .image.image-processing img {
  5306. height: 100%;
  5307. }
  5308. @keyframes ck-image-processing-animation {
  5309. 0% {
  5310. background-position: 200% 0;
  5311. }
  5312. 100% {
  5313. background-position: -200% 0;
  5314. }
  5315. }
  5316. /*
  5317. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5318. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5319. */
  5320. /*
  5321. * Vertical drop target (in text).
  5322. */
  5323. .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position {
  5324. display: inline;
  5325. position: relative;
  5326. pointer-events: none;
  5327. }
  5328. .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span {
  5329. position: absolute;
  5330. width: 0;
  5331. }
  5332. /*
  5333. * Styles of the widget being dragged (its preview).
  5334. */
  5335. .ck.ck-editor__editable .ck-widget:-webkit-drag > .ck-widget__selection-handle {
  5336. display: none;
  5337. }
  5338. .ck.ck-editor__editable .ck-widget:-webkit-drag > .ck-widget__type-around {
  5339. display: none;
  5340. }
  5341. .ck.ck-clipboard-drop-target-line {
  5342. position: absolute;
  5343. pointer-events: none;
  5344. }
  5345. /*
  5346. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5347. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5348. */
  5349. .ck-content pre {
  5350. padding: 1em;
  5351. color: hsl(0, 0%, 20.8%);
  5352. background: hsla(0, 0%, 78%, 0.3);
  5353. border: 1px solid hsl(0, 0%, 77%);
  5354. border-radius: 2px;
  5355. /* Code block are language direction–agnostic. */
  5356. text-align: left;
  5357. direction: ltr;
  5358. tab-size: 4;
  5359. white-space: pre-wrap;
  5360. /* Don't inherit the style, e.g. when in a block quote. */
  5361. font-style: normal;
  5362. /* Don't let the code be squashed e.g. when in a table cell. */
  5363. min-width: 200px;
  5364. }
  5365. .ck-content pre code {
  5366. background: unset;
  5367. padding: 0;
  5368. border-radius: 0;
  5369. }
  5370. .ck.ck-editor__editable pre {
  5371. position: relative;
  5372. }
  5373. .ck.ck-editor__editable pre[data-language]::after {
  5374. content: attr(data-language);
  5375. position: absolute;
  5376. }
  5377. /*
  5378. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5379. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5380. */
  5381. .ck.ck-editor {
  5382. /* All the elements within `.ck-editor` are positioned relatively to it.
  5383. If any element needs to be positioned with respect to the <body>, etc.,
  5384. it must land outside of the `.ck-editor` in DOM. */
  5385. position: relative;
  5386. }
  5387. .ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar {
  5388. /* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */
  5389. z-index: var(--ck-z-panel);
  5390. }
  5391. /*
  5392. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5393. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5394. */
  5395. .ck.ck-menu-bar {
  5396. border: none;
  5397. border-bottom: 1px solid var(--ck-color-toolbar-border);
  5398. }
  5399. /*
  5400. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5401. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5402. */
  5403. :root {
  5404. --ck-emoji-grid-tile-size: 27px;
  5405. }
  5406. .ck.ck-emoji .ck.ck-emoji__tiles {
  5407. max-width: 100%;
  5408. max-height: min(265px, 40vh);
  5409. overflow-y: auto;
  5410. overflow-x: hidden;
  5411. border-top: 1px solid var(--ck-color-base-border);
  5412. }
  5413. .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__grid {
  5414. display: grid;
  5415. grid-template-columns: repeat(auto-fill, minmax(var(--ck-emoji-grid-tile-size), 1fr));
  5416. margin: var(--ck-spacing-standard) var(--ck-spacing-large);
  5417. grid-gap: var(--ck-spacing-small);
  5418. }
  5419. .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile {
  5420. width: var(--ck-emoji-grid-tile-size);
  5421. height: var(--ck-emoji-grid-tile-size);
  5422. min-width: var(--ck-emoji-grid-tile-size);
  5423. min-height: var(--ck-emoji-grid-tile-size);
  5424. font-size: 1.5em;
  5425. padding: 0;
  5426. transition: .2s ease box-shadow;
  5427. border: 0;
  5428. }
  5429. @media (prefers-reduced-motion: reduce) {
  5430. .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile {
  5431. transition: none;
  5432. }
  5433. }
  5434. .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile:focus:not(.ck-disabled),
  5435. .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile:hover:not(.ck-disabled) {
  5436. /* Disable the default .ck-button's border ring. */
  5437. border: 0;
  5438. box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
  5439. }
  5440. /* Make sure the glyph is rendered in the center of the button */
  5441. .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile .ck-button__label {
  5442. line-height: var(--ck-emoji-grid-tile-size);
  5443. width: 100%;
  5444. text-align: center;
  5445. }
  5446. /*
  5447. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5448. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5449. */
  5450. .ck.ck-emoji__categories-list {
  5451. display: flex;
  5452. justify-content: space-between;
  5453. margin: 0 var(--ck-spacing-large);
  5454. }
  5455. .ck.ck-emoji__categories-list > .ck.ck-button.ck-button_with-text {
  5456. border-width: 0;
  5457. border-bottom-width: 2px;
  5458. border-bottom-style: solid;
  5459. border-bottom-color: transparent;
  5460. padding: 0;
  5461. font-size: var(--ck-font-size-big);
  5462. min-width: var(--ck-font-size-big);
  5463. min-height: var(--ck-font-size-big);
  5464. }
  5465. .ck.ck-emoji__categories-list > .ck.ck-button.ck-button_with-text.ck-emoji__category-item.ck-on {
  5466. border-bottom-color: var(--ck-color-base-active);
  5467. }
  5468. .ck.ck-emoji__categories-list > .ck.ck-button.ck-button_with-text > span {
  5469. margin: auto;
  5470. }
  5471. /*
  5472. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5473. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5474. */
  5475. .ck.ck-emoji__skin-tone {
  5476. margin-left: var(--ck-spacing-standard);
  5477. }
  5478. .ck.ck-emoji__skin-tone > .ck.ck-dropdown .ck.ck-list__item {
  5479. min-width: 1em;
  5480. }
  5481. .ck.ck-emoji__skin-tone > .ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label {
  5482. width: initial;
  5483. }
  5484. /*
  5485. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5486. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5487. */
  5488. .ck.ck-emoji {
  5489. width: 320px;
  5490. }
  5491. .ck .ck.ck-emoji__search {
  5492. display: flex;
  5493. padding: var(--ck-spacing-large);
  5494. padding-bottom: var(--ck-spacing-medium);
  5495. justify-content: space-between;
  5496. align-items: center;
  5497. }
  5498. /*
  5499. * Classes used by the "fake visual selection" displayed in the content when an input
  5500. * in the emoji picker UI has focus (the browser does not render the native selection in this state).
  5501. */
  5502. .ck .ck-fake-emoji-selection {
  5503. background: var(--ck-color-link-fake-selection);
  5504. }
  5505. /* A collapsed fake visual selection. */
  5506. .ck .ck-fake-emoji-selection_collapsed {
  5507. height: 100%;
  5508. border-right: 1px solid var(--ck-color-base-text);
  5509. margin-right: -1px;
  5510. outline: solid 1px hsla(0, 0%, 100%, .5);
  5511. }
  5512. /*
  5513. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5514. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5515. */
  5516. /* See ckeditor/ckeditor5#936. */
  5517. .ck.ck-placeholder,
  5518. .ck .ck-placeholder {
  5519. position: relative;
  5520. }
  5521. .ck.ck-placeholder::before, .ck .ck-placeholder::before {
  5522. position: absolute;
  5523. left: 0;
  5524. right: 0;
  5525. content: attr(data-placeholder);
  5526. /* See ckeditor/ckeditor5#469. */
  5527. pointer-events: none;
  5528. }
  5529. /* See ckeditor/ckeditor5#1987. */
  5530. .ck.ck-read-only .ck-placeholder::before {
  5531. display: none;
  5532. }
  5533. /*
  5534. * Rules for the `ck-placeholder` are loaded before the rules for `ck-reset_all` in the base CKEditor 5 DLL build.
  5535. * This fix overwrites the incorrectly set `position: static` from `ck-reset_all`.
  5536. * See https://github.com/ckeditor/ckeditor5/issues/11418.
  5537. */
  5538. .ck.ck-reset_all .ck-placeholder {
  5539. position: relative;
  5540. }
  5541. /*
  5542. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5543. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5544. */
  5545. /* Elements marked by the Renderer as hidden should be invisible in the editor. */
  5546. .ck.ck-editor__editable span[data-ck-unsafe-element] {
  5547. display: none;
  5548. }
  5549. /*
  5550. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5551. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5552. */
  5553. .ck-find-result {
  5554. background: var(--ck-color-highlight-background);
  5555. color: var(--ck-color-text);
  5556. }
  5557. .ck-find-result_selected {
  5558. background: hsl(29, 100%, 60%);
  5559. }
  5560. /*
  5561. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5562. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5563. */
  5564. .ck.ck-find-and-replace-form {
  5565. max-width: 100%;
  5566. }
  5567. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions {
  5568. display: flex;
  5569. /* The inputs area styles */
  5570. }
  5571. .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs.ck-find-and-replace-form__inputs .ck-results-counter, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions.ck-find-and-replace-form__inputs .ck-results-counter {
  5572. position: absolute;
  5573. }
  5574. /*
  5575. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5576. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5577. */
  5578. /* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" object in the "/src/fontsize/utils.js" file. */
  5579. /* Styles should be prefixed with the `.ck-content` class.
  5580. See https://github.com/ckeditor/ckeditor5/issues/6636 */
  5581. .ck-content .text-tiny {
  5582. font-size: .7em;
  5583. }
  5584. .ck-content .text-small {
  5585. font-size: .85em;
  5586. }
  5587. .ck-content .text-big {
  5588. font-size: 1.4em;
  5589. }
  5590. .ck-content .text-huge {
  5591. font-size: 1.8em;
  5592. }
  5593. /*
  5594. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5595. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5596. */
  5597. .ck.ck-heading_heading1 .ck-button__label {
  5598. font-size: 20px;
  5599. }
  5600. .ck.ck-heading_heading2 .ck-button__label {
  5601. font-size: 17px;
  5602. }
  5603. .ck.ck-heading_heading3 .ck-button__label {
  5604. font-size: 14px;
  5605. }
  5606. .ck[class*="ck-heading_heading"] {
  5607. font-weight: bold;
  5608. }
  5609. /*
  5610. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5611. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5612. */
  5613. :root {
  5614. --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
  5615. --ck-highlight-marker-green: hsl(120, 93%, 68%);
  5616. --ck-highlight-marker-pink: hsl(345, 96%, 73%);
  5617. --ck-highlight-marker-blue: hsl(201, 97%, 72%);
  5618. --ck-highlight-pen-red: hsl(0, 85%, 49%);
  5619. --ck-highlight-pen-green: hsl(112, 100%, 27%);
  5620. }
  5621. .ck-content .marker-yellow {
  5622. background-color: var(--ck-highlight-marker-yellow);
  5623. }
  5624. .ck-content .marker-green {
  5625. background-color: var(--ck-highlight-marker-green);
  5626. }
  5627. .ck-content .marker-pink {
  5628. background-color: var(--ck-highlight-marker-pink);
  5629. }
  5630. .ck-content .marker-blue {
  5631. background-color: var(--ck-highlight-marker-blue);
  5632. }
  5633. .ck-content .pen-red {
  5634. color: var(--ck-highlight-pen-red);
  5635. /* Override default yellow background of `<mark>` from user agent stylesheet */
  5636. background-color: transparent;
  5637. }
  5638. .ck-content .pen-green {
  5639. color: var(--ck-highlight-pen-green);
  5640. /* Override default yellow background of `<mark>` from user agent stylesheet */
  5641. background-color: transparent;
  5642. }
  5643. /*
  5644. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5645. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5646. */
  5647. .ck-editor__editable .ck-horizontal-line {
  5648. /* Necessary to render properly next to floated objects, e.g. side image case. */
  5649. display: flow-root;
  5650. }
  5651. .ck-content hr {
  5652. margin: 15px 0;
  5653. height: 4px;
  5654. background: hsl(0, 0%, 87%);
  5655. border: 0;
  5656. }
  5657. /*
  5658. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5659. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5660. */
  5661. /* The feature container. */
  5662. .ck-widget.raw-html-embed {
  5663. /* Give the embed some air. */
  5664. /* The first value should be equal to --ck-spacing-large variable if used in the editor context
  5665. to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
  5666. margin: 0.9em auto;
  5667. position: relative;
  5668. display: flow-root;
  5669. /* Give the html embed some minimal width in the content to prevent them
  5670. from being "squashed" in tight spaces, e.g. in table cells (https://github.com/ckeditor/ckeditor5/issues/8331) */
  5671. min-width: 15em;
  5672. /* Don't inherit the style, e.g. when in a block quote. */
  5673. font-style: normal;
  5674. /* ----- Emebed label in the upper left corner ----------------------------------------------- */
  5675. }
  5676. .ck-widget.raw-html-embed::before {
  5677. position: absolute;
  5678. /* Make sure the content does not cover the label. */
  5679. z-index: 1;
  5680. }
  5681. /* ----- Emebed internals --------------------------------------------------------------------- */
  5682. /* The switch mode button wrapper. */
  5683. .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper {
  5684. position: absolute;
  5685. display: flex;
  5686. flex-direction: column;
  5687. }
  5688. .ck-widget.raw-html-embed .raw-html-embed__preview {
  5689. position: relative;
  5690. overflow: hidden;
  5691. display: flex;
  5692. }
  5693. .ck-widget.raw-html-embed .raw-html-embed__preview-content {
  5694. width: 100%;
  5695. position: relative;
  5696. margin: auto;
  5697. /* Gives spacing to the small renderable elements, so they always cover the placeholder. */
  5698. display: table;
  5699. border-collapse: separate;
  5700. border-spacing: 7px;
  5701. }
  5702. .ck-widget.raw-html-embed .raw-html-embed__preview-placeholder {
  5703. position: absolute;
  5704. left: 0;
  5705. top: 0;
  5706. right: 0;
  5707. bottom: 0;
  5708. display: flex;
  5709. align-items: center;
  5710. justify-content: center;
  5711. }
  5712. /*
  5713. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5714. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5715. */
  5716. :root {
  5717. --ck-html-object-embed-unfocused-outline-width: 1px;
  5718. }
  5719. .ck-widget.html-object-embed {
  5720. font-size: var(--ck-font-size-base);
  5721. background-color: var(--ck-color-base-foreground);
  5722. padding: var(--ck-spacing-small);
  5723. /* Leave space for label */
  5724. padding-top: calc(var(--ck-font-size-tiny) + var(--ck-spacing-large));
  5725. min-width: calc(76px + var(--ck-spacing-standard));
  5726. }
  5727. .ck-widget.html-object-embed:not(.ck-widget_selected):not(:hover) {
  5728. outline: var(--ck-html-object-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
  5729. }
  5730. .ck-widget.html-object-embed::before {
  5731. font-weight: normal;
  5732. font-style: normal;
  5733. position: absolute;
  5734. content: attr(data-html-object-embed-label);
  5735. top: 0;
  5736. left: var(--ck-spacing-standard);
  5737. background: hsl(0deg 0% 60%);
  5738. transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  5739. padding: calc(var(--ck-spacing-tiny) + var(--ck-html-object-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
  5740. border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
  5741. color: var(--ck-color-base-background);
  5742. font-size: var(--ck-font-size-tiny);
  5743. font-family: var(--ck-font-face);
  5744. }
  5745. /* Make space for label. */
  5746. .ck-widget.html-object-embed .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
  5747. margin-left: 50px;
  5748. }
  5749. .ck-widget.html-object-embed .html-object-embed__content {
  5750. /* Disable user interaction with embed content */
  5751. pointer-events: none;
  5752. }
  5753. div.ck-widget.html-object-embed {
  5754. margin: 1em auto;
  5755. }
  5756. span.ck-widget.html-object-embed {
  5757. display: inline-block;
  5758. }
  5759. /*
  5760. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5761. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5762. */
  5763. /*
  5764. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5765. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5766. */
  5767. :root {
  5768. --ck-color-image-caption-background: hsl(0, 0%, 97%);
  5769. --ck-color-image-caption-text: hsl(0, 0%, 20%);
  5770. --ck-color-image-caption-highlighted-background: hsl(52deg 100% 50%);
  5771. }
  5772. /* Content styles */
  5773. .ck-content .image > figcaption {
  5774. display: table-caption;
  5775. caption-side: bottom;
  5776. word-break: break-word;
  5777. color: var(--ck-color-image-caption-text);
  5778. background-color: var(--ck-color-image-caption-background);
  5779. padding: .6em;
  5780. font-size: .75em;
  5781. outline-offset: -1px;
  5782. /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
  5783. }
  5784. @media (forced-colors: active) {
  5785. .ck-content .image > figcaption {
  5786. background-color: unset;
  5787. color: unset;
  5788. }
  5789. }
  5790. /* Editing styles */
  5791. @media (forced-colors: none) {
  5792. .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
  5793. animation: ck-image-caption-highlight .6s ease-out;
  5794. }
  5795. }
  5796. @media (prefers-reduced-motion: reduce) {
  5797. .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
  5798. animation: none;
  5799. }
  5800. }
  5801. @keyframes ck-image-caption-highlight {
  5802. 0% {
  5803. background-color: var(--ck-color-image-caption-highlighted-background);
  5804. }
  5805. 100% {
  5806. background-color: var(--ck-color-image-caption-background);
  5807. }
  5808. }
  5809. /*
  5810. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5811. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5812. */
  5813. .ck.ck-image-insert-url {
  5814. width: 400px;
  5815. padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
  5816. }
  5817. .ck.ck-image-insert-url .ck-image-insert-url__action-row {
  5818. display: grid;
  5819. grid-template-columns: repeat(2, 1fr);
  5820. }
  5821. /*
  5822. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5823. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5824. */
  5825. /* Preserve aspect ratio of the resized image after introducing image height attribute. */
  5826. .ck-content img.image_resized {
  5827. height: auto;
  5828. }
  5829. .ck-content .image.image_resized {
  5830. max-width: 100%;
  5831. /*
  5832. The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
  5833. See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
  5834. Fortunately, since we control the width, there is no risk that the image will look bad.
  5835. */
  5836. display: block;
  5837. box-sizing: border-box;
  5838. }
  5839. .ck-content .image.image_resized img {
  5840. /* For resized images it is the `<figure>` element that determines the image width. */
  5841. width: 100%;
  5842. }
  5843. .ck-content .image.image_resized > figcaption {
  5844. /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
  5845. display: block;
  5846. }
  5847. /* The resized inline image nested in the table should respect its parent size.
  5848. See https://github.com/ckeditor/ckeditor5/issues/9117. */
  5849. .ck.ck-editor__editable td .image-inline.image_resized img, .ck.ck-editor__editable th .image-inline.image_resized img {
  5850. max-width: 100%;
  5851. }
  5852. [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
  5853. margin-right: var(--ck-spacing-standard);
  5854. }
  5855. [dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
  5856. margin-left: var(--ck-spacing-standard);
  5857. }
  5858. .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
  5859. width: 4em;
  5860. }
  5861. /*
  5862. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5863. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5864. */
  5865. /*
  5866. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5867. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5868. */
  5869. .ck.ck-image-custom-resize-form {
  5870. display: flex;
  5871. flex-direction: row;
  5872. flex-wrap: nowrap;
  5873. align-items: flex-start;
  5874. }
  5875. .ck.ck-image-custom-resize-form .ck-labeled-field-view {
  5876. display: inline-block;
  5877. }
  5878. .ck.ck-image-custom-resize-form .ck-label {
  5879. display: none;
  5880. }
  5881. @media screen and (max-width: 600px) {
  5882. .ck.ck-image-custom-resize-form {
  5883. flex-wrap: wrap;
  5884. }
  5885. .ck.ck-image-custom-resize-form .ck-labeled-field-view {
  5886. flex-basis: 100%;
  5887. }
  5888. .ck.ck-image-custom-resize-form .ck-button {
  5889. flex-basis: 50%;
  5890. }
  5891. }
  5892. /*
  5893. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5894. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5895. */
  5896. :root {
  5897. --ck-image-style-spacing: 1.5em;
  5898. --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
  5899. }
  5900. /* See: https://github.com/ckeditor/ckeditor5/issues/16317 */
  5901. /* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback
  5902. confirming successful application of the style if image width exceeds the editor's size.
  5903. See https://github.com/ckeditor/ckeditor5/issues/9342 */
  5904. .ck-content .image.image-style-block-align-left,
  5905. .ck-content .image.image-style-block-align-right {
  5906. max-width: calc(100% - var(--ck-image-style-spacing));
  5907. }
  5908. /* Allows displaying multiple floating images in the same line.
  5909. See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
  5910. .ck-content .image.image-style-align-left,
  5911. .ck-content .image.image-style-align-right {
  5912. clear: none;
  5913. }
  5914. .ck-content .image.image-style-side {
  5915. float: right;
  5916. margin-left: var(--ck-image-style-spacing);
  5917. max-width: 50%;
  5918. }
  5919. .ck-content .image.image-style-align-left {
  5920. float: left;
  5921. margin-right: var(--ck-image-style-spacing);
  5922. }
  5923. .ck-content .image.image-style-align-right {
  5924. float: right;
  5925. margin-left: var(--ck-image-style-spacing);
  5926. }
  5927. .ck-content .image.image-style-block-align-right {
  5928. margin-right: 0;
  5929. margin-left: auto;
  5930. }
  5931. .ck-content .image.image-style-block-align-left {
  5932. margin-left: 0;
  5933. margin-right: auto;
  5934. }
  5935. .ck-content .image-style-align-center {
  5936. margin-left: auto;
  5937. margin-right: auto;
  5938. }
  5939. .ck-content .image-style-align-left {
  5940. float: left;
  5941. margin-right: var(--ck-image-style-spacing);
  5942. }
  5943. .ck-content .image-style-align-right {
  5944. float: right;
  5945. margin-left: var(--ck-image-style-spacing);
  5946. }
  5947. /* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */
  5948. .ck-content p + .image.image-style-align-left,
  5949. .ck-content p + .image.image-style-align-right,
  5950. .ck-content p + .image.image-style-side {
  5951. margin-top: 0;
  5952. }
  5953. .ck-content .image-inline.image-style-align-left,
  5954. .ck-content .image-inline.image-style-align-right {
  5955. margin-top: var(--ck-inline-image-style-spacing);
  5956. margin-bottom: var(--ck-inline-image-style-spacing);
  5957. }
  5958. .ck-content .image-inline.image-style-align-left {
  5959. margin-right: var(--ck-inline-image-style-spacing);
  5960. }
  5961. .ck-content .image-inline.image-style-align-right {
  5962. margin-left: var(--ck-inline-image-style-spacing);
  5963. }
  5964. /* The button should display as a regular drop-down if the action button
  5965. is forced to fire the same action as the arrow button. */
  5966. .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled),
  5967. .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled),
  5968. .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled),
  5969. .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled),
  5970. .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover),
  5971. .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
  5972. background-color: var(--ck-color-button-on-background);
  5973. }
  5974. .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)::after {
  5975. display: none;
  5976. }
  5977. .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__action:not(.ck-disabled),
  5978. .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled),
  5979. .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
  5980. background-color: var(--ck-color-button-on-hover-background);
  5981. }
  5982. /*
  5983. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5984. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5985. */
  5986. /*
  5987. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  5988. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  5989. */
  5990. .ck.ck-text-alternative-form {
  5991. display: flex;
  5992. flex-direction: row;
  5993. flex-wrap: nowrap;
  5994. }
  5995. .ck.ck-text-alternative-form .ck-labeled-field-view {
  5996. display: inline-block;
  5997. }
  5998. .ck.ck-text-alternative-form .ck-label {
  5999. display: none;
  6000. }
  6001. @media screen and (max-width: 600px) {
  6002. .ck.ck-text-alternative-form {
  6003. flex-wrap: wrap;
  6004. }
  6005. .ck.ck-text-alternative-form .ck-labeled-field-view {
  6006. flex-basis: 100%;
  6007. }
  6008. .ck.ck-text-alternative-form .ck-button {
  6009. flex-basis: 50%;
  6010. }
  6011. }
  6012. /*
  6013. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6014. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6015. */
  6016. .ck.ck-editor__editable .image,
  6017. .ck.ck-editor__editable .image-inline {
  6018. position: relative;
  6019. }
  6020. /* Upload progress bar. */
  6021. .ck.ck-editor__editable .image .ck-progress-bar,
  6022. .ck.ck-editor__editable .image-inline .ck-progress-bar {
  6023. position: absolute;
  6024. top: 0;
  6025. left: 0;
  6026. }
  6027. /*
  6028. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6029. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6030. */
  6031. .ck-image-upload-complete-icon {
  6032. display: block;
  6033. position: absolute;
  6034. /*
  6035. * Smaller images should have the icon closer to the border.
  6036. * Match the icon position with the linked image indicator brought by the link image feature.
  6037. */
  6038. top: min(var(--ck-spacing-medium), 6%);
  6039. right: min(var(--ck-spacing-medium), 6%);
  6040. border-radius: 50%;
  6041. z-index: 1;
  6042. }
  6043. .ck-image-upload-complete-icon::after {
  6044. content: "";
  6045. position: absolute;
  6046. }
  6047. /*
  6048. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6049. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6050. */
  6051. .ck .ck-upload-placeholder-loader {
  6052. position: absolute;
  6053. display: flex;
  6054. align-items: center;
  6055. justify-content: center;
  6056. top: 0;
  6057. left: 0;
  6058. }
  6059. .ck .ck-upload-placeholder-loader::before {
  6060. content: '';
  6061. position: relative;
  6062. }
  6063. /*
  6064. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6065. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6066. */
  6067. .ck-content .image {
  6068. display: table;
  6069. clear: both;
  6070. text-align: center;
  6071. /* Make sure there is some space between the content and the image. Center image by default. */
  6072. /* The first value should be equal to --ck-spacing-large variable if used in the editor context
  6073. to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
  6074. margin: 0.9em auto;
  6075. /* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
  6076. min-width: 50px;
  6077. }
  6078. .ck-content .image img {
  6079. /* Prevent unnecessary margins caused by line-height (see #44). */
  6080. display: block;
  6081. /* Center the image if its width is smaller than the content's width. */
  6082. margin: 0 auto;
  6083. /* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
  6084. max-width: 100%;
  6085. /* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */
  6086. min-width: 100%;
  6087. /* Keep proportions of the block image if the height is set and the image is wider than the editor width.
  6088. See https://github.com/ckeditor/ckeditor5/issues/14542. */
  6089. height: auto;
  6090. }
  6091. .ck-content .image-inline {
  6092. /*
  6093. * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).
  6094. * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
  6095. * This strange behavior does not happen with inline-flex.
  6096. */
  6097. display: inline-flex;
  6098. /* While being resized, don't allow the image to exceed the width of the editing root. */
  6099. max-width: 100%;
  6100. /* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */
  6101. align-items: flex-start;
  6102. /* When the picture is present it must act as a flex container to let the img resize properly */
  6103. }
  6104. .ck-content .image-inline picture {
  6105. display: flex;
  6106. }
  6107. /* When the picture is present, it must act like a resizable img. */
  6108. .ck-content .image-inline picture,
  6109. .ck-content .image-inline img {
  6110. /* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */
  6111. flex-grow: 1;
  6112. flex-shrink: 1;
  6113. /* Prevents overflowing the editing root boundaries when an inline image is very wide. */
  6114. max-width: 100%;
  6115. }
  6116. /*
  6117. * Inhertit the content styles padding of the <figcaption> in case the integration overrides `text-align: center`
  6118. * of `.image` (e.g. to the left/right). This ensures the placeholder stays at the padding just like the native
  6119. * caret does, and not at the edge of <figcaption>.
  6120. */
  6121. .ck.ck-editor__editable .image > figcaption.ck-placeholder::before {
  6122. padding-left: inherit;
  6123. padding-right: inherit;
  6124. /*
  6125. * Make sure the image caption placeholder doesn't overflow the placeholder area.
  6126. * See https://github.com/ckeditor/ckeditor5/issues/9162.
  6127. */
  6128. white-space: nowrap;
  6129. overflow: hidden;
  6130. text-overflow: ellipsis;
  6131. }
  6132. /*
  6133. * See https://github.com/ckeditor/ckeditor5/issues/15115.
  6134. */
  6135. .ck.ck-editor__editable .image {
  6136. z-index: 1;
  6137. /*
  6138. * Make sure the selected image always stays on top of its siblings.
  6139. * See https://github.com/ckeditor/ckeditor5/issues/9108.
  6140. */
  6141. }
  6142. .ck.ck-editor__editable .image.ck-widget_selected {
  6143. z-index: 2;
  6144. }
  6145. /*
  6146. * See https://github.com/ckeditor/ckeditor5/issues/15115.
  6147. */
  6148. .ck.ck-editor__editable .image-inline {
  6149. z-index: 1;
  6150. /*
  6151. * Make sure the selected inline image always stays on top of its siblings.
  6152. * See https://github.com/ckeditor/ckeditor5/issues/9108.
  6153. */
  6154. }
  6155. .ck.ck-editor__editable .image-inline.ck-widget_selected {
  6156. z-index: 2;
  6157. /*
  6158. * Make sure the native browser selection style is not displayed.
  6159. * Inline image widgets have their own styles for the selected state and
  6160. * leaving this up to the browser is asking for a visual collision.
  6161. */
  6162. }
  6163. .ck.ck-editor__editable .image-inline.ck-widget_selected ::selection {
  6164. display: none;
  6165. }
  6166. /* Keep proportions of the inline image if the height is set and the image is wider than the editor width.
  6167. See https://github.com/ckeditor/ckeditor5/issues/14542. */
  6168. .ck.ck-editor__editable .image-inline img {
  6169. height: auto;
  6170. }
  6171. /* The inline image nested in the table should have its original size if not resized.
  6172. See https://github.com/ckeditor/ckeditor5/issues/9117. */
  6173. .ck.ck-editor__editable td .image-inline img, .ck.ck-editor__editable th .image-inline img {
  6174. max-width: none;
  6175. }
  6176. /*
  6177. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6178. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6179. */
  6180. .ck.ck-editor__editable img.image_placeholder {
  6181. background-size: 100% 100%;
  6182. }
  6183. /*
  6184. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6185. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6186. */
  6187. /* Linked image indicator */
  6188. .ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after {
  6189. display: block;
  6190. position: absolute;
  6191. }
  6192. /*
  6193. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6194. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6195. */
  6196. /*
  6197. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6198. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6199. */
  6200. .ck.ck-link-actions {
  6201. display: flex;
  6202. flex-direction: row;
  6203. flex-wrap: nowrap;
  6204. }
  6205. .ck.ck-link-actions .ck-link-actions__preview {
  6206. display: inline-block;
  6207. }
  6208. .ck.ck-link-actions .ck-link-actions__preview .ck-button__label {
  6209. overflow: hidden;
  6210. }
  6211. @media screen and (max-width: 600px) {
  6212. .ck.ck-link-actions {
  6213. flex-wrap: wrap;
  6214. }
  6215. .ck.ck-link-actions .ck-link-actions__preview {
  6216. flex-basis: 100%;
  6217. }
  6218. .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
  6219. flex-basis: 50%;
  6220. }
  6221. }
  6222. /*
  6223. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6224. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6225. */
  6226. /*
  6227. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6228. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6229. */
  6230. .ck.ck-link-form {
  6231. display: flex;
  6232. align-items: flex-start;
  6233. }
  6234. .ck.ck-link-form .ck-label {
  6235. display: none;
  6236. }
  6237. @media screen and (max-width: 600px) {
  6238. .ck.ck-link-form {
  6239. flex-wrap: wrap;
  6240. }
  6241. .ck.ck-link-form .ck-labeled-field-view {
  6242. flex-basis: 100%;
  6243. }
  6244. .ck.ck-link-form .ck-button {
  6245. flex-basis: 50%;
  6246. }
  6247. }
  6248. /*
  6249. * Style link form differently when manual decorators are available.
  6250. * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
  6251. */
  6252. .ck.ck-link-form_layout-vertical {
  6253. display: block;
  6254. /*
  6255. * Whether the form is in the responsive mode or not, if there are decorator buttons
  6256. * keep the top margin of action buttons medium.
  6257. */
  6258. }
  6259. .ck.ck-link-form_layout-vertical .ck-button.ck-button-save,
  6260. .ck.ck-link-form_layout-vertical .ck-button.ck-button-cancel {
  6261. margin-top: var(--ck-spacing-medium);
  6262. }
  6263. /*
  6264. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6265. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6266. */
  6267. .ck-editor__editable .ck-list-bogus-paragraph {
  6268. display: block;
  6269. }
  6270. /*
  6271. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6272. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6273. */
  6274. .ck.ck-list-styles-list {
  6275. display: grid;
  6276. }
  6277. /*
  6278. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6279. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6280. */
  6281. .ck-content ol {
  6282. list-style-type: decimal;
  6283. }
  6284. .ck-content ol ol {
  6285. list-style-type: lower-latin;
  6286. }
  6287. .ck-content ol ol ol {
  6288. list-style-type: lower-roman;
  6289. }
  6290. .ck-content ol ol ol ol {
  6291. list-style-type: upper-latin;
  6292. }
  6293. .ck-content ol ol ol ol ol {
  6294. list-style-type: upper-roman;
  6295. }
  6296. .ck-content ul {
  6297. list-style-type: disc;
  6298. }
  6299. .ck-content ul ul {
  6300. list-style-type: circle;
  6301. }
  6302. .ck-content ul ul ul {
  6303. list-style-type: square;
  6304. }
  6305. .ck-content ul ul ul ul {
  6306. list-style-type: square;
  6307. }
  6308. /*
  6309. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6310. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6311. */
  6312. :root {
  6313. --ck-todo-list-checkmark-size: 16px;
  6314. }
  6315. /*
  6316. * To-do list content styles.
  6317. */
  6318. .ck-content .todo-list {
  6319. list-style: none;
  6320. }
  6321. .ck-content .todo-list li {
  6322. position: relative;
  6323. margin-bottom: 5px;
  6324. }
  6325. .ck-content .todo-list li .todo-list {
  6326. margin-top: 5px;
  6327. }
  6328. .ck-content .todo-list .todo-list__label > input {
  6329. -webkit-appearance: none;
  6330. display: inline-block;
  6331. position: relative;
  6332. width: var(--ck-todo-list-checkmark-size);
  6333. height: var(--ck-todo-list-checkmark-size);
  6334. vertical-align: middle;
  6335. /* Needed on iOS */
  6336. border: 0;
  6337. /* LTR styles */
  6338. left: -25px;
  6339. margin-right: -15px;
  6340. right: 0;
  6341. margin-left: 0;
  6342. /* RTL styles */
  6343. }
  6344. .ck-content[dir=rtl] .todo-list .todo-list__label > input {
  6345. left: 0;
  6346. margin-right: 0;
  6347. right: -25px;
  6348. margin-left: -15px;
  6349. }
  6350. .ck-content .todo-list .todo-list__label > input::before {
  6351. display: block;
  6352. position: absolute;
  6353. box-sizing: border-box;
  6354. content: '';
  6355. width: 100%;
  6356. height: 100%;
  6357. border: 1px solid hsl(0, 0%, 20%);
  6358. border-radius: 2px;
  6359. transition: 250ms ease-in-out box-shadow;
  6360. }
  6361. @media (prefers-reduced-motion: reduce) {
  6362. .ck-content .todo-list .todo-list__label > input::before {
  6363. transition: none;
  6364. }
  6365. }
  6366. .ck-content .todo-list .todo-list__label > input::after {
  6367. display: block;
  6368. position: absolute;
  6369. box-sizing: content-box;
  6370. pointer-events: none;
  6371. content: '';
  6372. /* Calculate tick position, size and border-width proportional to the checkmark size. */
  6373. left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  6374. top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  6375. width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  6376. height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  6377. border-style: solid;
  6378. border-color: transparent;
  6379. border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  6380. transform: rotate(45deg);
  6381. }
  6382. .ck-content .todo-list .todo-list__label > input[checked]::before {
  6383. background: hsl(126, 64%, 41%);
  6384. border-color: hsl(126, 64%, 41%);
  6385. }
  6386. .ck-content .todo-list .todo-list__label > input[checked]::after {
  6387. border-color: hsl(0, 0%, 100%);
  6388. }
  6389. .ck-content .todo-list .todo-list__label .todo-list__label__description {
  6390. vertical-align: middle;
  6391. }
  6392. .ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
  6393. position: absolute;
  6394. }
  6395. /*
  6396. * To-do list editing view styles.
  6397. */
  6398. /*
  6399. * To-do list should be interactive only during the editing
  6400. * (https://github.com/ckeditor/ckeditor5/issues/2090).
  6401. */
  6402. .ck-editor__editable.ck-content .todo-list .todo-list__label > input,
  6403. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
  6404. cursor: pointer;
  6405. }
  6406. .ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before {
  6407. box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
  6408. }
  6409. /*
  6410. * Document Lists - editing view has an additional span around checkbox.
  6411. */
  6412. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
  6413. -webkit-appearance: none;
  6414. display: inline-block;
  6415. position: relative;
  6416. width: var(--ck-todo-list-checkmark-size);
  6417. height: var(--ck-todo-list-checkmark-size);
  6418. vertical-align: middle;
  6419. /* Needed on iOS */
  6420. border: 0;
  6421. /* LTR styles */
  6422. left: -25px;
  6423. margin-right: -15px;
  6424. right: 0;
  6425. margin-left: 0;
  6426. /* RTL styles */
  6427. }
  6428. .ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input {
  6429. left: 0;
  6430. margin-right: 0;
  6431. right: -25px;
  6432. margin-left: -15px;
  6433. }
  6434. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
  6435. display: block;
  6436. position: absolute;
  6437. box-sizing: border-box;
  6438. content: '';
  6439. width: 100%;
  6440. height: 100%;
  6441. border: 1px solid hsl(0, 0%, 20%);
  6442. border-radius: 2px;
  6443. transition: 250ms ease-in-out box-shadow;
  6444. }
  6445. @media (prefers-reduced-motion: reduce) {
  6446. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
  6447. transition: none;
  6448. }
  6449. }
  6450. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after {
  6451. display: block;
  6452. position: absolute;
  6453. box-sizing: content-box;
  6454. pointer-events: none;
  6455. content: '';
  6456. /* Calculate tick position, size and border-width proportional to the checkmark size. */
  6457. left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  6458. top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  6459. width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  6460. height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  6461. border-style: solid;
  6462. border-color: transparent;
  6463. border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  6464. transform: rotate(45deg);
  6465. }
  6466. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before {
  6467. background: hsl(126, 64%, 41%);
  6468. border-color: hsl(126, 64%, 41%);
  6469. }
  6470. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after {
  6471. border-color: hsl(0, 0%, 100%);
  6472. }
  6473. .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
  6474. position: absolute;
  6475. }
  6476. /*
  6477. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6478. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6479. */
  6480. .ck-content .media {
  6481. /* Don't allow floated content overlap the media.
  6482. https://github.com/ckeditor/ckeditor5-media-embed/issues/53 */
  6483. clear: both;
  6484. /* Make sure there is some space between the content and the media. */
  6485. /* The first value should be equal to --ck-spacing-large variable if used in the editor context
  6486. to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
  6487. margin: 0.9em 0;
  6488. /* Make sure media is not overriden with Bootstrap default `flex` value.
  6489. See: https://github.com/ckeditor/ckeditor5/issues/1373. */
  6490. display: block;
  6491. /* Give the media some minimal width in the content to prevent them
  6492. from being "squashed" in tight spaces, e.g. in table cells (#44) */
  6493. min-width: 15em;
  6494. }
  6495. /*
  6496. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6497. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6498. */
  6499. .ck-media__wrapper .ck-media__placeholder {
  6500. display: flex;
  6501. flex-direction: column;
  6502. align-items: center;
  6503. }
  6504. .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url {
  6505. /* Otherwise the URL will overflow when the content is very narrow. */
  6506. max-width: 100%;
  6507. position: relative;
  6508. }
  6509. .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url .ck-media__placeholder__url__text {
  6510. overflow: hidden;
  6511. display: block;
  6512. }
  6513. .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder__icon * {
  6514. display: none;
  6515. }
  6516. /* Disable all mouse interaction as long as the editor is not read–only.
  6517. https://github.com/ckeditor/ckeditor5-media-embed/issues/58 */
  6518. .ck-editor__editable:not(.ck-read-only) .ck-media__wrapper > *:not(.ck-media__placeholder) {
  6519. pointer-events: none;
  6520. }
  6521. /* Disable all mouse interaction when the widget is not selected (e.g. to avoid opening links by accident).
  6522. https://github.com/ckeditor/ckeditor5-media-embed/issues/18 */
  6523. .ck-editor__editable:not(.ck-read-only) .ck-widget:not(.ck-widget_selected) .ck-media__placeholder {
  6524. pointer-events: none;
  6525. }
  6526. /*
  6527. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6528. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6529. */
  6530. /*
  6531. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6532. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6533. */
  6534. .ck-vertical-form .ck-button::after {
  6535. content: "";
  6536. width: 0;
  6537. position: absolute;
  6538. right: -1px;
  6539. top: -1px;
  6540. bottom: -1px;
  6541. z-index: 1;
  6542. }
  6543. .ck-vertical-form .ck-button:focus::after {
  6544. display: none;
  6545. }
  6546. @media screen and (max-width: 600px) {
  6547. .ck.ck-responsive-form .ck-button::after {
  6548. content: "";
  6549. width: 0;
  6550. position: absolute;
  6551. right: -1px;
  6552. top: -1px;
  6553. bottom: -1px;
  6554. z-index: 1;
  6555. }
  6556. .ck.ck-responsive-form .ck-button:focus::after {
  6557. display: none;
  6558. }
  6559. }
  6560. /*
  6561. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6562. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6563. */
  6564. /*
  6565. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6566. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6567. */
  6568. .ck.ck-media-form {
  6569. display: flex;
  6570. align-items: flex-start;
  6571. flex-direction: row;
  6572. flex-wrap: nowrap;
  6573. width: 400px;
  6574. }
  6575. .ck.ck-media-form .ck-labeled-field-view {
  6576. display: inline-block;
  6577. width: 100%;
  6578. }
  6579. .ck.ck-media-form .ck-label {
  6580. display: none;
  6581. }
  6582. .ck.ck-media-form .ck-input {
  6583. width: 100%;
  6584. }
  6585. @media screen and (max-width: 600px) {
  6586. .ck.ck-media-form {
  6587. flex-wrap: wrap;
  6588. }
  6589. .ck.ck-media-form .ck-labeled-field-view {
  6590. flex-basis: 100%;
  6591. }
  6592. .ck.ck-media-form .ck-button {
  6593. flex-basis: 50%;
  6594. }
  6595. }
  6596. /*
  6597. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6598. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6599. */
  6600. :root {
  6601. --ck-mention-list-max-height: 300px;
  6602. }
  6603. .ck.ck-mentions {
  6604. max-height: var(--ck-mention-list-max-height);
  6605. overflow-y: auto;
  6606. /* Prevent unnecessary horizontal scrollbar in Safari
  6607. https://github.com/ckeditor/ckeditor5-mention/issues/41 */
  6608. overflow-x: hidden;
  6609. overscroll-behavior: contain;
  6610. /* Prevent unnecessary vertical scrollbar in Safari
  6611. https://github.com/ckeditor/ckeditor5-mention/issues/41 */
  6612. }
  6613. .ck.ck-mentions > .ck-list__item {
  6614. overflow: hidden;
  6615. flex-shrink: 0;
  6616. }
  6617. /*
  6618. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6619. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6620. */
  6621. :root {
  6622. --ck-color-minimap-tracker-background: 208, 0%, 51%;
  6623. --ck-color-minimap-iframe-outline: hsl(0deg 0% 75%);
  6624. --ck-color-minimap-iframe-shadow: hsl(0deg 0% 0% / 11%);
  6625. --ck-color-minimap-progress-background: hsl(0,0%,40%);
  6626. }
  6627. .ck.ck-minimap {
  6628. position: absolute;
  6629. user-select: none;
  6630. background: var(--ck-color-base-background);
  6631. }
  6632. .ck.ck-minimap,
  6633. .ck.ck-minimap iframe {
  6634. width: 100%;
  6635. height: 100%;
  6636. }
  6637. .ck.ck-minimap iframe {
  6638. border: 0;
  6639. pointer-events: none;
  6640. position: relative;
  6641. outline: 1px solid var(--ck-color-minimap-iframe-outline);
  6642. box-shadow: 0 2px 5px var(--ck-color-minimap-iframe-shadow);
  6643. margin: 0;
  6644. }
  6645. .ck.ck-minimap .ck.ck-minimap__position-tracker {
  6646. position: absolute;
  6647. width: 100%;
  6648. top: 0;
  6649. background: hsla( var(--ck-color-minimap-tracker-background), .2 );
  6650. z-index: 1;
  6651. transition: background 100ms ease-in-out;
  6652. }
  6653. @media (prefers-reduced-motion: reduce) {
  6654. .ck.ck-minimap .ck.ck-minimap__position-tracker {
  6655. transition: none;
  6656. }
  6657. }
  6658. .ck.ck-minimap .ck.ck-minimap__position-tracker:hover {
  6659. background:hsla( var(--ck-color-minimap-tracker-background), .3 );
  6660. }
  6661. .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging,
  6662. .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover {
  6663. background:hsla( var(--ck-color-minimap-tracker-background), .4 );
  6664. }
  6665. .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging::after, .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover::after {
  6666. opacity: 1;
  6667. }
  6668. .ck.ck-minimap .ck.ck-minimap__position-tracker::after {
  6669. content: attr(data-progress) "%";
  6670. position: absolute;
  6671. top: 5px;
  6672. right: 5px;
  6673. background: var(--ck-color-minimap-progress-background);
  6674. color: var(--ck-color-base-background);
  6675. border: 1px solid var(--ck-color-base-background);
  6676. padding: 2px 4px;
  6677. font-size: 10px;
  6678. border-radius: 3px;
  6679. opacity: 0;
  6680. transition: opacity 100ms ease-in-out;
  6681. }
  6682. @media (prefers-reduced-motion: reduce) {
  6683. .ck.ck-minimap .ck.ck-minimap__position-tracker::after {
  6684. transition: none;
  6685. }
  6686. }
  6687. /*
  6688. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6689. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6690. */
  6691. .ck-content .page-break {
  6692. position: relative;
  6693. clear: both;
  6694. padding: 5px 0;
  6695. display: flex;
  6696. align-items: center;
  6697. justify-content: center;
  6698. }
  6699. .ck-content .page-break::after {
  6700. content: '';
  6701. position: absolute;
  6702. border-bottom: 2px dashed hsl(0, 0%, 77%);
  6703. width: 100%;
  6704. }
  6705. .ck-content .page-break__label {
  6706. position: relative;
  6707. z-index: 1;
  6708. padding: .3em .6em;
  6709. display: block;
  6710. text-transform: uppercase;
  6711. border: 1px solid hsl(0, 0%, 77%);
  6712. border-radius: 2px;
  6713. font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  6714. font-size: 0.75em;
  6715. font-weight: bold;
  6716. color: hsl(0, 0%, 20%);
  6717. background: hsl(0, 0%, 100%);
  6718. box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  6719. /* Disable the possibility to select the label text by the user. */
  6720. -webkit-user-select: none;
  6721. -moz-user-select: none;
  6722. -ms-user-select: none;
  6723. user-select: none;
  6724. }
  6725. /* Do not show the page break element inside the print preview window. */
  6726. @media print {
  6727. .ck-content .page-break {
  6728. padding: 0;
  6729. }
  6730. .ck-content .page-break::after {
  6731. display: none;
  6732. }
  6733. /*
  6734. * From time to time placing page-break directly after a block element with margin causes appending a new blank page in pagination mode.
  6735. * Removing margin-bottom from the block element fixes that issue and the margin is not being moved to the next blank page.
  6736. *
  6737. * Keep this in sync with the pagination plugins.
  6738. */
  6739. .ck-content *:has(+ .page-break) {
  6740. margin-bottom: 0;
  6741. }
  6742. }
  6743. /*
  6744. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6745. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6746. */
  6747. /*
  6748. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  6749. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  6750. */
  6751. :root {
  6752. --ck-show-blocks-border-color: hsl(0, 0%, 46%);
  6753. }
  6754. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address {
  6755. background-repeat: no-repeat;
  6756. padding-top: 15px;
  6757. /* Fix for Multi-root editor
  6758. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6759. }
  6760. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address {
  6761. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ADDRESS</text></svg>");
  6762. background-position: 1px 1px;
  6763. }
  6764. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address {
  6765. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ADDRESS</text></svg>");
  6766. background-position: calc(100% - 1px) 1px;
  6767. }
  6768. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address:not(.ck-widget_selected):not(.ck-widget:hover) {
  6769. outline: 1px dashed var(--ck-show-blocks-border-color);
  6770. }
  6771. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address {
  6772. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ADDRESS</text></svg>");
  6773. background-position: 1px 1px;
  6774. }
  6775. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address {
  6776. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ADDRESS</text></svg>");
  6777. background-position: calc(100% - 1px) 1px;
  6778. }
  6779. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside {
  6780. background-repeat: no-repeat;
  6781. padding-top: 15px;
  6782. /* Fix for Multi-root editor
  6783. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6784. }
  6785. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside {
  6786. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ASIDE</text></svg>");
  6787. background-position: 1px 1px;
  6788. }
  6789. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside {
  6790. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ASIDE</text></svg>");
  6791. background-position: calc(100% - 1px) 1px;
  6792. }
  6793. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside:not(.ck-widget_selected):not(.ck-widget:hover) {
  6794. outline: 1px dashed var(--ck-show-blocks-border-color);
  6795. }
  6796. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside {
  6797. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ASIDE</text></svg>");
  6798. background-position: 1px 1px;
  6799. }
  6800. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside {
  6801. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>ASIDE</text></svg>");
  6802. background-position: calc(100% - 1px) 1px;
  6803. }
  6804. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote {
  6805. background-repeat: no-repeat;
  6806. padding-top: 15px;
  6807. /* Fix for Multi-root editor
  6808. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6809. }
  6810. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote {
  6811. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>BLOCKQUOTE</text></svg>");
  6812. background-position: 1px 1px;
  6813. }
  6814. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote {
  6815. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>BLOCKQUOTE</text></svg>");
  6816. background-position: calc(100% - 1px) 1px;
  6817. }
  6818. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote:not(.ck-widget_selected):not(.ck-widget:hover) {
  6819. outline: 1px dashed var(--ck-show-blocks-border-color);
  6820. }
  6821. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote {
  6822. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>BLOCKQUOTE</text></svg>");
  6823. background-position: 1px 1px;
  6824. }
  6825. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote {
  6826. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>BLOCKQUOTE</text></svg>");
  6827. background-position: calc(100% - 1px) 1px;
  6828. }
  6829. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details {
  6830. background-repeat: no-repeat;
  6831. padding-top: 15px;
  6832. /* Fix for Multi-root editor
  6833. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6834. }
  6835. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details {
  6836. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DETAILS</text></svg>");
  6837. background-position: 1px 1px;
  6838. }
  6839. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details {
  6840. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DETAILS</text></svg>");
  6841. background-position: calc(100% - 1px) 1px;
  6842. }
  6843. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details:not(.ck-widget_selected):not(.ck-widget:hover) {
  6844. outline: 1px dashed var(--ck-show-blocks-border-color);
  6845. }
  6846. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details {
  6847. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DETAILS</text></svg>");
  6848. background-position: 1px 1px;
  6849. }
  6850. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details {
  6851. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DETAILS</text></svg>");
  6852. background-position: calc(100% - 1px) 1px;
  6853. }
  6854. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget, .ck-widget *) {
  6855. background-repeat: no-repeat;
  6856. padding-top: 15px;
  6857. /* Fix for Multi-root editor
  6858. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6859. }
  6860. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget, .ck-widget *) {
  6861. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DIV</text></svg>");
  6862. background-position: 1px 1px;
  6863. }
  6864. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget, .ck-widget *) {
  6865. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DIV</text></svg>");
  6866. background-position: calc(100% - 1px) 1px;
  6867. }
  6868. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget, .ck-widget *):not(.ck-widget_selected):not(.ck-widget:hover) {
  6869. outline: 1px dashed var(--ck-show-blocks-border-color);
  6870. }
  6871. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget, .ck-widget *) {
  6872. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DIV</text></svg>");
  6873. background-position: 1px 1px;
  6874. }
  6875. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget, .ck-widget *) {
  6876. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>DIV</text></svg>");
  6877. background-position: calc(100% - 1px) 1px;
  6878. }
  6879. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer {
  6880. background-repeat: no-repeat;
  6881. padding-top: 15px;
  6882. /* Fix for Multi-root editor
  6883. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6884. }
  6885. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer {
  6886. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FOOTER</text></svg>");
  6887. background-position: 1px 1px;
  6888. }
  6889. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer {
  6890. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FOOTER</text></svg>");
  6891. background-position: calc(100% - 1px) 1px;
  6892. }
  6893. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer:not(.ck-widget_selected):not(.ck-widget:hover) {
  6894. outline: 1px dashed var(--ck-show-blocks-border-color);
  6895. }
  6896. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer {
  6897. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FOOTER</text></svg>");
  6898. background-position: 1px 1px;
  6899. }
  6900. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer {
  6901. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FOOTER</text></svg>");
  6902. background-position: calc(100% - 1px) 1px;
  6903. }
  6904. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 {
  6905. background-repeat: no-repeat;
  6906. padding-top: 15px;
  6907. /* Fix for Multi-root editor
  6908. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6909. }
  6910. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 {
  6911. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H1</text></svg>");
  6912. background-position: 1px 1px;
  6913. }
  6914. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 {
  6915. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H1</text></svg>");
  6916. background-position: calc(100% - 1px) 1px;
  6917. }
  6918. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1:not(.ck-widget_selected):not(.ck-widget:hover) {
  6919. outline: 1px dashed var(--ck-show-blocks-border-color);
  6920. }
  6921. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 {
  6922. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H1</text></svg>");
  6923. background-position: 1px 1px;
  6924. }
  6925. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 {
  6926. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H1</text></svg>");
  6927. background-position: calc(100% - 1px) 1px;
  6928. }
  6929. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 {
  6930. background-repeat: no-repeat;
  6931. padding-top: 15px;
  6932. /* Fix for Multi-root editor
  6933. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6934. }
  6935. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 {
  6936. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H2</text></svg>");
  6937. background-position: 1px 1px;
  6938. }
  6939. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 {
  6940. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H2</text></svg>");
  6941. background-position: calc(100% - 1px) 1px;
  6942. }
  6943. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2:not(.ck-widget_selected):not(.ck-widget:hover) {
  6944. outline: 1px dashed var(--ck-show-blocks-border-color);
  6945. }
  6946. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 {
  6947. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H2</text></svg>");
  6948. background-position: 1px 1px;
  6949. }
  6950. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 {
  6951. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H2</text></svg>");
  6952. background-position: calc(100% - 1px) 1px;
  6953. }
  6954. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 {
  6955. background-repeat: no-repeat;
  6956. padding-top: 15px;
  6957. /* Fix for Multi-root editor
  6958. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6959. }
  6960. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 {
  6961. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H3</text></svg>");
  6962. background-position: 1px 1px;
  6963. }
  6964. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 {
  6965. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H3</text></svg>");
  6966. background-position: calc(100% - 1px) 1px;
  6967. }
  6968. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3:not(.ck-widget_selected):not(.ck-widget:hover) {
  6969. outline: 1px dashed var(--ck-show-blocks-border-color);
  6970. }
  6971. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 {
  6972. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H3</text></svg>");
  6973. background-position: 1px 1px;
  6974. }
  6975. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 {
  6976. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H3</text></svg>");
  6977. background-position: calc(100% - 1px) 1px;
  6978. }
  6979. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 {
  6980. background-repeat: no-repeat;
  6981. padding-top: 15px;
  6982. /* Fix for Multi-root editor
  6983. https://github.com/ckeditor/ckeditor5/issues/15969 */
  6984. }
  6985. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 {
  6986. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H4</text></svg>");
  6987. background-position: 1px 1px;
  6988. }
  6989. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 {
  6990. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H4</text></svg>");
  6991. background-position: calc(100% - 1px) 1px;
  6992. }
  6993. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4:not(.ck-widget_selected):not(.ck-widget:hover) {
  6994. outline: 1px dashed var(--ck-show-blocks-border-color);
  6995. }
  6996. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 {
  6997. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H4</text></svg>");
  6998. background-position: 1px 1px;
  6999. }
  7000. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 {
  7001. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H4</text></svg>");
  7002. background-position: calc(100% - 1px) 1px;
  7003. }
  7004. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 {
  7005. background-repeat: no-repeat;
  7006. padding-top: 15px;
  7007. /* Fix for Multi-root editor
  7008. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7009. }
  7010. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 {
  7011. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H5</text></svg>");
  7012. background-position: 1px 1px;
  7013. }
  7014. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 {
  7015. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H5</text></svg>");
  7016. background-position: calc(100% - 1px) 1px;
  7017. }
  7018. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5:not(.ck-widget_selected):not(.ck-widget:hover) {
  7019. outline: 1px dashed var(--ck-show-blocks-border-color);
  7020. }
  7021. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 {
  7022. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H5</text></svg>");
  7023. background-position: 1px 1px;
  7024. }
  7025. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 {
  7026. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H5</text></svg>");
  7027. background-position: calc(100% - 1px) 1px;
  7028. }
  7029. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 {
  7030. background-repeat: no-repeat;
  7031. padding-top: 15px;
  7032. /* Fix for Multi-root editor
  7033. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7034. }
  7035. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 {
  7036. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H6</text></svg>");
  7037. background-position: 1px 1px;
  7038. }
  7039. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 {
  7040. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H6</text></svg>");
  7041. background-position: calc(100% - 1px) 1px;
  7042. }
  7043. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6:not(.ck-widget_selected):not(.ck-widget:hover) {
  7044. outline: 1px dashed var(--ck-show-blocks-border-color);
  7045. }
  7046. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 {
  7047. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H6</text></svg>");
  7048. background-position: 1px 1px;
  7049. }
  7050. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 {
  7051. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>H6</text></svg>");
  7052. background-position: calc(100% - 1px) 1px;
  7053. }
  7054. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header {
  7055. background-repeat: no-repeat;
  7056. padding-top: 15px;
  7057. /* Fix for Multi-root editor
  7058. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7059. }
  7060. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header {
  7061. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>HEADER</text></svg>");
  7062. background-position: 1px 1px;
  7063. }
  7064. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header {
  7065. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>HEADER</text></svg>");
  7066. background-position: calc(100% - 1px) 1px;
  7067. }
  7068. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header:not(.ck-widget_selected):not(.ck-widget:hover) {
  7069. outline: 1px dashed var(--ck-show-blocks-border-color);
  7070. }
  7071. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header {
  7072. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>HEADER</text></svg>");
  7073. background-position: 1px 1px;
  7074. }
  7075. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header {
  7076. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>HEADER</text></svg>");
  7077. background-position: calc(100% - 1px) 1px;
  7078. }
  7079. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main {
  7080. background-repeat: no-repeat;
  7081. padding-top: 15px;
  7082. /* Fix for Multi-root editor
  7083. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7084. }
  7085. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main {
  7086. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>MAIN</text></svg>");
  7087. background-position: 1px 1px;
  7088. }
  7089. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main {
  7090. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>MAIN</text></svg>");
  7091. background-position: calc(100% - 1px) 1px;
  7092. }
  7093. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main:not(.ck-widget_selected):not(.ck-widget:hover) {
  7094. outline: 1px dashed var(--ck-show-blocks-border-color);
  7095. }
  7096. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main {
  7097. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>MAIN</text></svg>");
  7098. background-position: 1px 1px;
  7099. }
  7100. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main {
  7101. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>MAIN</text></svg>");
  7102. background-position: calc(100% - 1px) 1px;
  7103. }
  7104. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav {
  7105. background-repeat: no-repeat;
  7106. padding-top: 15px;
  7107. /* Fix for Multi-root editor
  7108. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7109. }
  7110. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav {
  7111. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>NAV</text></svg>");
  7112. background-position: 1px 1px;
  7113. }
  7114. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav {
  7115. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>NAV</text></svg>");
  7116. background-position: calc(100% - 1px) 1px;
  7117. }
  7118. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav:not(.ck-widget_selected):not(.ck-widget:hover) {
  7119. outline: 1px dashed var(--ck-show-blocks-border-color);
  7120. }
  7121. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav {
  7122. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>NAV</text></svg>");
  7123. background-position: 1px 1px;
  7124. }
  7125. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav {
  7126. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>NAV</text></svg>");
  7127. background-position: calc(100% - 1px) 1px;
  7128. }
  7129. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre {
  7130. background-repeat: no-repeat;
  7131. padding-top: 15px;
  7132. /* Fix for Multi-root editor
  7133. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7134. }
  7135. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre {
  7136. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>PRE</text></svg>");
  7137. background-position: 1px 1px;
  7138. }
  7139. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre {
  7140. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>PRE</text></svg>");
  7141. background-position: calc(100% - 1px) 1px;
  7142. }
  7143. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre:not(.ck-widget_selected):not(.ck-widget:hover) {
  7144. outline: 1px dashed var(--ck-show-blocks-border-color);
  7145. }
  7146. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre {
  7147. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>PRE</text></svg>");
  7148. background-position: 1px 1px;
  7149. }
  7150. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre {
  7151. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>PRE</text></svg>");
  7152. background-position: calc(100% - 1px) 1px;
  7153. }
  7154. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol {
  7155. background-repeat: no-repeat;
  7156. padding-top: 15px;
  7157. /* Fix for Multi-root editor
  7158. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7159. }
  7160. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol {
  7161. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>OL</text></svg>");
  7162. background-position: 1px 1px;
  7163. }
  7164. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol {
  7165. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>OL</text></svg>");
  7166. background-position: calc(100% - 1px) 1px;
  7167. }
  7168. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol:not(.ck-widget_selected):not(.ck-widget:hover) {
  7169. outline: 1px dashed var(--ck-show-blocks-border-color);
  7170. }
  7171. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol {
  7172. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>OL</text></svg>");
  7173. background-position: 1px 1px;
  7174. }
  7175. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol {
  7176. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>OL</text></svg>");
  7177. background-position: calc(100% - 1px) 1px;
  7178. }
  7179. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul {
  7180. background-repeat: no-repeat;
  7181. padding-top: 15px;
  7182. /* Fix for Multi-root editor
  7183. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7184. }
  7185. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul {
  7186. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>UL</text></svg>");
  7187. background-position: 1px 1px;
  7188. }
  7189. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul {
  7190. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>UL</text></svg>");
  7191. background-position: calc(100% - 1px) 1px;
  7192. }
  7193. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul:not(.ck-widget_selected):not(.ck-widget:hover) {
  7194. outline: 1px dashed var(--ck-show-blocks-border-color);
  7195. }
  7196. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul {
  7197. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>UL</text></svg>");
  7198. background-position: 1px 1px;
  7199. }
  7200. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul {
  7201. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>UL</text></svg>");
  7202. background-position: calc(100% - 1px) 1px;
  7203. }
  7204. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p {
  7205. background-repeat: no-repeat;
  7206. padding-top: 15px;
  7207. /* Fix for Multi-root editor
  7208. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7209. }
  7210. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p {
  7211. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>P</text></svg>");
  7212. background-position: 1px 1px;
  7213. }
  7214. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p {
  7215. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>P</text></svg>");
  7216. background-position: calc(100% - 1px) 1px;
  7217. }
  7218. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p:not(.ck-widget_selected):not(.ck-widget:hover) {
  7219. outline: 1px dashed var(--ck-show-blocks-border-color);
  7220. }
  7221. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p {
  7222. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>P</text></svg>");
  7223. background-position: 1px 1px;
  7224. }
  7225. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p {
  7226. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>P</text></svg>");
  7227. background-position: calc(100% - 1px) 1px;
  7228. }
  7229. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section {
  7230. background-repeat: no-repeat;
  7231. padding-top: 15px;
  7232. /* Fix for Multi-root editor
  7233. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7234. }
  7235. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section {
  7236. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>SECTION</text></svg>");
  7237. background-position: 1px 1px;
  7238. }
  7239. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section {
  7240. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>SECTION</text></svg>");
  7241. background-position: calc(100% - 1px) 1px;
  7242. }
  7243. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section:not(.ck-widget_selected):not(.ck-widget:hover) {
  7244. outline: 1px dashed var(--ck-show-blocks-border-color);
  7245. }
  7246. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section {
  7247. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>SECTION</text></svg>");
  7248. background-position: 1px 1px;
  7249. }
  7250. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section {
  7251. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>SECTION</text></svg>");
  7252. background-position: calc(100% - 1px) 1px;
  7253. }
  7254. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption {
  7255. background-repeat: no-repeat;
  7256. padding-top: 15px;
  7257. /* Fix for Multi-root editor
  7258. https://github.com/ckeditor/ckeditor5/issues/15969 */
  7259. }
  7260. [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption {
  7261. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FIGCAPTION</text></svg>");
  7262. background-position: 1px 1px;
  7263. }
  7264. [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption {
  7265. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FIGCAPTION</text></svg>");
  7266. background-position: calc(100% - 1px) 1px;
  7267. }
  7268. .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption:not(.ck-widget_selected):not(.ck-widget:hover) {
  7269. outline: 1px dashed var(--ck-show-blocks-border-color);
  7270. }
  7271. [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption {
  7272. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='3' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FIGCAPTION</text></svg>");
  7273. background-position: 1px 1px;
  7274. }
  7275. [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption {
  7276. background-image: url("data:image/svg+xml;utf8,<svg width='120' height='12' xmlns='http://www.w3.org/2000/svg' ><text style='paint-order:stroke fill; clip-path: inset(-3px); transform:translate(-2px, 0)' stroke='%23EAEAEA' stroke-width='13' dominant-baseline='middle' fill='black' x='100%' text-anchor='end' y='7' font-size='9px' font-family='Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, %22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace'>FIGCAPTION</text></svg>");
  7277. background-position: calc(100% - 1px) 1px;
  7278. }
  7279. /*
  7280. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7281. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7282. */
  7283. /*
  7284. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7285. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7286. */
  7287. /**
  7288. * Implements rounded corner interface for .ck-rounded-corners class.
  7289. *
  7290. * @see $ck-border-radius
  7291. */
  7292. /*
  7293. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7294. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7295. */
  7296. /**
  7297. * A visual style of focused element's border.
  7298. */
  7299. /*
  7300. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7301. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7302. */
  7303. /**
  7304. * A helper to combine multiple shadows.
  7305. */
  7306. /**
  7307. * Gives an element a drop shadow so it looks like a floating panel.
  7308. */
  7309. .ck-source-editing-area {
  7310. position: relative;
  7311. overflow: hidden;
  7312. }
  7313. .ck-source-editing-area::after,
  7314. .ck-source-editing-area textarea {
  7315. padding: var(--ck-spacing-large);
  7316. margin: 0;
  7317. border: 1px solid transparent;
  7318. line-height: var(--ck-line-height-base);
  7319. font-size: var(--ck-font-size-normal);
  7320. font-family: monospace;
  7321. white-space: pre-wrap;
  7322. }
  7323. .ck-source-editing-area::after {
  7324. content: attr(data-value) " ";
  7325. visibility: hidden;
  7326. display: block;
  7327. }
  7328. .ck-source-editing-area textarea {
  7329. position: absolute;
  7330. width: 100%;
  7331. height: 100%;
  7332. resize: none;
  7333. outline: none;
  7334. overflow: hidden;
  7335. box-sizing: border-box;
  7336. border-color: var(--ck-color-base-border);
  7337. border-radius: 0;
  7338. }
  7339. .ck-rounded-corners .ck-source-editing-area textarea,
  7340. .ck-source-editing-area textarea.ck-rounded-corners {
  7341. border-radius: var(--ck-border-radius);
  7342. border-top-left-radius: 0;
  7343. border-top-right-radius: 0;
  7344. }
  7345. .ck-source-editing-area textarea:not([readonly]):focus {
  7346. /* Disable native outline. */
  7347. outline: none;
  7348. border: var(--ck-focus-ring);
  7349. box-shadow: var(--ck-inner-shadow), 0 0;
  7350. }
  7351. /*
  7352. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7353. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7354. */
  7355. .ck.ck-character-grid {
  7356. max-width: 100%;
  7357. }
  7358. .ck.ck-character-grid .ck-character-grid__tiles {
  7359. display: grid;
  7360. }
  7361. /*
  7362. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7363. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7364. */
  7365. .ck.ck-character-info {
  7366. display: flex;
  7367. justify-content: space-between;
  7368. }
  7369. /*
  7370. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7371. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7372. */
  7373. /*
  7374. * Note: This file should contain the wireframe styles only. But since there are no such styles,
  7375. * it acts as a message to the builder telling that it should look for the corresponding styles
  7376. * **in the theme** when compiling the editor.
  7377. */
  7378. .ck.ck-special-characters > .ck-dialog__content > div {
  7379. width: 350px;
  7380. max-width: 100%;
  7381. height: 100%;
  7382. display: grid;
  7383. grid-column-gap: 0px;
  7384. grid-row-gap: 0px;
  7385. grid-template-columns: 1fr;
  7386. grid-template-rows: auto 1fr auto;
  7387. }
  7388. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories {
  7389. grid-area: 1 / 1 / 2 / 2;
  7390. padding: var(--ck-spacing-medium) var(--ck-spacing-large);
  7391. }
  7392. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view {
  7393. padding-top: var(--ck-spacing-standard);
  7394. width: 100%;
  7395. }
  7396. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck.ck-labeled-field-view__status {
  7397. background: var(--ck-color-base-error);
  7398. color: var(--ck-color-base-background);
  7399. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  7400. min-width: var(--ck-table-properties-min-error-width);
  7401. text-align: center;
  7402. animation: ck-table-form-labeled-view-status-appear .15s ease both;
  7403. /* The arrow pointing towards the field. */
  7404. }
  7405. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
  7406. border-color: transparent transparent var(--ck-color-base-error) transparent;
  7407. border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
  7408. border-style: solid;
  7409. }
  7410. @media (prefers-reduced-motion: reduce) {
  7411. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck.ck-labeled-field-view__status {
  7412. animation: none;
  7413. }
  7414. }
  7415. /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
  7416. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
  7417. display: none;
  7418. }
  7419. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view > .ck-label {
  7420. font-size: var(--ck-font-size-tiny);
  7421. text-align: center;
  7422. }
  7423. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories .ck-dropdown {
  7424. display: block;
  7425. width: 100%;
  7426. }
  7427. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories .ck-dropdown > button:not(:focus) {
  7428. border: 1px solid var(--ck-color-base-border);
  7429. }
  7430. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories .ck-dropdown > button > span {
  7431. width: 100%;
  7432. }
  7433. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-grid {
  7434. grid-area: 2 / 1 / 3 / 2;
  7435. max-height: 200px;
  7436. }
  7437. .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-info {
  7438. grid-area: 3 / 1 / 4 / 2;
  7439. }
  7440. /*
  7441. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7442. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7443. */
  7444. :root {
  7445. --ck-style-panel-columns: 3;
  7446. }
  7447. .ck.ck-style-panel .ck-style-grid {
  7448. display: grid;
  7449. grid-template-columns: repeat(var(--ck-style-panel-columns),auto);
  7450. justify-content: start;
  7451. }
  7452. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
  7453. display: flex;
  7454. justify-content: space-between;
  7455. flex-direction: column;
  7456. }
  7457. .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
  7458. display: flex;
  7459. align-content: center;
  7460. justify-content: flex-start;
  7461. align-items: center;
  7462. flex-grow: 1;
  7463. flex-basis: 100%;
  7464. }
  7465. /*
  7466. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7467. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7468. */
  7469. .ck-content .table {
  7470. /* Give the table widget some air and center it horizontally */
  7471. /* The first value should be equal to --ck-spacing-large variable if used in the editor context
  7472. to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
  7473. margin: 0.9em auto;
  7474. display: table;
  7475. }
  7476. .ck-content .table table {
  7477. /* The table cells should have slight borders */
  7478. border-collapse: collapse;
  7479. border-spacing: 0;
  7480. /* Table width and height are set on the parent <figure>. Make sure the table inside stretches
  7481. to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */
  7482. width: 100%;
  7483. height: 100%;
  7484. /* The outer border of the table should be slightly darker than the inner lines.
  7485. Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
  7486. border: 1px double hsl(0, 0%, 70%);
  7487. }
  7488. .ck-content .table table td,
  7489. .ck-content .table table th {
  7490. min-width: 2em;
  7491. padding: .4em;
  7492. /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
  7493. However, the border is a content style, so it should use .ck-content (so it works outside the editor).
  7494. Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
  7495. border: 1px solid hsl(0, 0%, 75%);
  7496. }
  7497. .ck-content .table table th {
  7498. font-weight: bold;
  7499. background: hsla(0, 0%, 0%, 5%);
  7500. }
  7501. /**
  7502. * Expanding the table to the full height of the parent container is necessary because tables
  7503. * are rendered inside <figure> elements, which is kinda buggy in table height calculation.
  7504. * While setting `height: 100%` fixes the issue in the editing mode described here:
  7505. * https://github.com/ckeditor/ckeditor5/issues/6186
  7506. *
  7507. * it's causing another issue with the table height in the print preview mode here:
  7508. * https://github.com/ckeditor/ckeditor5/issues/16856
  7509. *
  7510. * For now, resetting the height to `initial` in the print mode works as a workaround.
  7511. */
  7512. @media print {
  7513. .ck-content .table table {
  7514. height: initial;
  7515. }
  7516. }
  7517. /* Text alignment of the table header should match the editor settings and override the native browser styling,
  7518. when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
  7519. .ck-content[dir="rtl"] .table th {
  7520. text-align: right;
  7521. }
  7522. .ck-content[dir="ltr"] .table th {
  7523. text-align: left;
  7524. }
  7525. .ck-editor__editable .ck-table-bogus-paragraph {
  7526. /*
  7527. * Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
  7528. * See https://github.com/ckeditor/ckeditor5/issues/6062.
  7529. */
  7530. display: inline-block;
  7531. /*
  7532. * Inline HTML elements nested in the span should always be dimensioned in relation to the whole cell width.
  7533. * See https://github.com/ckeditor/ckeditor5/issues/9117.
  7534. */
  7535. width: 100%;
  7536. }
  7537. /*
  7538. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7539. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7540. */
  7541. .ck .ck-insert-table-dropdown__grid {
  7542. display: flex;
  7543. flex-direction: row;
  7544. flex-wrap: wrap;
  7545. }
  7546. /*
  7547. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7548. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7549. */
  7550. .ck.ck-form__row {
  7551. display: flex;
  7552. flex-direction: row;
  7553. flex-wrap: nowrap;
  7554. justify-content: space-between;
  7555. /* Ignore labels that work as fieldset legends */
  7556. }
  7557. .ck.ck-form__row > *:not(.ck-label) {
  7558. flex-grow: 1;
  7559. }
  7560. .ck.ck-form__row.ck-table-form__action-row .ck-button-save,
  7561. .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel {
  7562. justify-content: center;
  7563. }
  7564. /*
  7565. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7566. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7567. */
  7568. .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
  7569. flex-wrap: wrap;
  7570. }
  7571. .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
  7572. /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
  7573. flex-grow: 0.57;
  7574. }
  7575. .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
  7576. /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
  7577. flex-grow: 0.43;
  7578. }
  7579. .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
  7580. flex-grow: 1;
  7581. }
  7582. /*
  7583. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7584. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7585. */
  7586. .ck.ck-input-color {
  7587. width: 100%;
  7588. display: flex;
  7589. flex-direction: row-reverse;
  7590. }
  7591. .ck.ck-input-color > input.ck.ck-input-text {
  7592. min-width: auto;
  7593. flex-grow: 1;
  7594. }
  7595. .ck.ck-input-color > div.ck.ck-dropdown {
  7596. min-width: auto;
  7597. /* This dropdown has no arrow but a color preview instead. */
  7598. }
  7599. .ck.ck-input-color > div.ck.ck-dropdown > .ck-input-color__button .ck-dropdown__arrow {
  7600. display: none;
  7601. }
  7602. .ck.ck-input-color .ck.ck-input-color__button {
  7603. /* Resolving issue with misaligned buttons on Safari (see #10589) */
  7604. display: flex;
  7605. }
  7606. .ck.ck-input-color .ck.ck-input-color__button .ck.ck-input-color__button__preview {
  7607. position: relative;
  7608. overflow: hidden;
  7609. }
  7610. .ck.ck-input-color .ck.ck-input-color__button .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator {
  7611. position: absolute;
  7612. display: block;
  7613. }
  7614. /*
  7615. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7616. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7617. */
  7618. .ck.ck-table-form .ck-form__row.ck-table-form__border-row {
  7619. flex-wrap: wrap;
  7620. }
  7621. .ck.ck-table-form .ck-form__row.ck-table-form__background-row {
  7622. flex-wrap: wrap;
  7623. }
  7624. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
  7625. flex-wrap: wrap;
  7626. align-items: center;
  7627. }
  7628. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view {
  7629. display: flex;
  7630. flex-direction: column-reverse;
  7631. align-items: center;
  7632. }
  7633. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view .ck.ck-dropdown {
  7634. flex-grow: 0;
  7635. }
  7636. .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
  7637. flex-grow: 0;
  7638. }
  7639. .ck.ck-table-form .ck.ck-labeled-field-view {
  7640. /* Allow absolute positioning of the status (error) balloons. */
  7641. position: relative;
  7642. }
  7643. .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
  7644. position: absolute;
  7645. left: 50%;
  7646. bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) );
  7647. transform: translate(-50%,100%);
  7648. /* Make sure the balloon status stays on top of other form elements. */
  7649. z-index: 1;
  7650. /* The arrow pointing towards the field. */
  7651. }
  7652. .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
  7653. content: "";
  7654. position: absolute;
  7655. top: calc( -1 * var(--ck-table-properties-error-arrow-size) );
  7656. left: 50%;
  7657. transform: translateX( -50% );
  7658. }
  7659. /*
  7660. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7661. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7662. */
  7663. .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
  7664. flex-wrap: wrap;
  7665. flex-basis: 0;
  7666. align-content: baseline;
  7667. }
  7668. .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
  7669. flex-wrap: nowrap;
  7670. }
  7671. /*
  7672. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7673. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7674. */
  7675. /*
  7676. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7677. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7678. */
  7679. :root {
  7680. --ck-color-selector-caption-background: hsl(0, 0%, 97%);
  7681. --ck-color-selector-caption-text: hsl(0, 0%, 20%);
  7682. --ck-color-selector-caption-highlighted-background: hsl(52deg 100% 50%);
  7683. }
  7684. /* Content styles */
  7685. .ck-content .table > figcaption {
  7686. display: table-caption;
  7687. caption-side: top;
  7688. word-break: break-word;
  7689. text-align: center;
  7690. color: var(--ck-color-selector-caption-text);
  7691. background-color: var(--ck-color-selector-caption-background);
  7692. padding: .6em;
  7693. font-size: .75em;
  7694. outline-offset: -1px;
  7695. /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
  7696. }
  7697. @media (forced-colors: active) {
  7698. .ck-content .table > figcaption {
  7699. background-color: unset;
  7700. color: unset;
  7701. }
  7702. }
  7703. /* Editing styles */
  7704. @media (forced-colors: none) {
  7705. .ck.ck-editor__editable .table > figcaption.table__caption_highlighted {
  7706. animation: ck-table-caption-highlight .6s ease-out;
  7707. }
  7708. }
  7709. .ck.ck-editor__editable .table > figcaption.ck-placeholder::before {
  7710. padding-left: inherit;
  7711. padding-right: inherit;
  7712. /*
  7713. * Make sure the table caption placeholder doesn't overflow the placeholder area.
  7714. * See https://github.com/ckeditor/ckeditor5/issues/9162.
  7715. */
  7716. white-space: nowrap;
  7717. overflow: hidden;
  7718. text-overflow: ellipsis;
  7719. }
  7720. @keyframes ck-table-caption-highlight {
  7721. 0% {
  7722. background-color: var(--ck-color-selector-caption-highlighted-background);
  7723. }
  7724. 100% {
  7725. background-color: var(--ck-color-selector-caption-background);
  7726. }
  7727. }
  7728. /*
  7729. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7730. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7731. */
  7732. :root {
  7733. --ck-color-selector-column-resizer-hover: var(--ck-color-base-active);
  7734. --ck-table-column-resizer-width: 7px;
  7735. /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
  7736. The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
  7737. --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
  7738. }
  7739. .ck-content .table .ck-table-resized {
  7740. table-layout: fixed;
  7741. }
  7742. .ck-content .table table {
  7743. overflow: hidden;
  7744. }
  7745. .ck-content .table td,
  7746. .ck-content .table th {
  7747. /* To prevent text overflowing beyond its cell when columns are resized by resize handler
  7748. (https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */
  7749. overflow-wrap: break-word;
  7750. position: relative;
  7751. }
  7752. .ck.ck-editor__editable .table .ck-table-column-resizer {
  7753. position: absolute;
  7754. top: 0;
  7755. bottom: 0;
  7756. right: var(--ck-table-column-resizer-position-offset);
  7757. width: var(--ck-table-column-resizer-width);
  7758. cursor: col-resize;
  7759. user-select: none;
  7760. z-index: var(--ck-z-default);
  7761. }
  7762. .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer {
  7763. display: none;
  7764. }
  7765. /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
  7766. all resizers must be hidden while the table is dragged. */
  7767. .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer {
  7768. display: none;
  7769. }
  7770. .ck.ck-editor__editable .table .ck-table-column-resizer:hover,
  7771. .ck.ck-editor__editable .table .ck-table-column-resizer__active {
  7772. background-color: var(--ck-color-selector-column-resizer-hover);
  7773. opacity: 0.25;
  7774. /* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
  7775. it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
  7776. it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
  7777. unrealistic height for a single table. */
  7778. top: -999999px;
  7779. bottom: -999999px;
  7780. }
  7781. .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer {
  7782. left: var(--ck-table-column-resizer-position-offset);
  7783. right: unset;
  7784. }
  7785. /*
  7786. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7787. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7788. */
  7789. /*
  7790. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7791. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7792. */
  7793. /**
  7794. * A class which hides an element in DOM.
  7795. */
  7796. .ck-hidden {
  7797. /* Override selector specificity. Otherwise, all elements with some display
  7798. style defined will override this one, which is not a desired result. */
  7799. display: none !important;
  7800. }
  7801. /*
  7802. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7803. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7804. */
  7805. :root {
  7806. --ck-z-default: 1;
  7807. --ck-z-panel: calc( var(--ck-z-default) + 999 );
  7808. --ck-z-dialog: 9999;
  7809. }
  7810. /*
  7811. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7812. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7813. */
  7814. /**
  7815. * A class that disables all transitions of the element and its children.
  7816. */
  7817. .ck-transitions-disabled,
  7818. .ck-transitions-disabled * {
  7819. transition: none !important;
  7820. }
  7821. /*
  7822. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7823. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7824. */
  7825. :root {
  7826. /* where 7.5(px) is the font size of the powered by label and 13(px) is the base font size. */
  7827. --ck-powered-by-font-size: calc(var(--ck-font-size-base) * 7.5 / 13);
  7828. /* where 10(px) is the line height of the powered by label and 13(px) is the base font size. */
  7829. --ck-powered-by-line-height: calc(var(--ck-font-size-base) * 10 / 13);
  7830. /* where -0.2(px) is the letter spacing of the powered by label and 13(px) is the base font size. */
  7831. --ck-powered-by-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13);
  7832. --ck-powered-by-padding-vertical: 2px;
  7833. --ck-powered-by-padding-horizontal: 4px;
  7834. --ck-powered-by-text-color: hsl(0, 0%, 31%);
  7835. --ck-powered-by-border-radius: var(--ck-border-radius);
  7836. --ck-powered-by-background: hsl(0, 0%, 100%);
  7837. --ck-powered-by-border-color: var(--ck-color-focus-border);
  7838. --ck-powered-by-svg-width: 53;
  7839. --ck-powered-by-svg-height: 10;
  7840. --ck-powered-by-icon-width: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 13);
  7841. --ck-powered-by-icon-height: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 13);
  7842. }
  7843. .ck.ck-balloon-panel.ck-powered-by-balloon {
  7844. --ck-border-radius: var(--ck-powered-by-border-radius);
  7845. box-shadow: none;
  7846. background: var(--ck-powered-by-background);
  7847. min-height: unset;
  7848. z-index: calc( var(--ck-z-panel) - 1 );
  7849. }
  7850. .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by {
  7851. line-height: var(--ck-powered-by-line-height);
  7852. }
  7853. .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a {
  7854. cursor: pointer;
  7855. display: flex;
  7856. align-items: center;
  7857. opacity: .66;
  7858. filter: grayscale(80%);
  7859. line-height: var(--ck-powered-by-line-height);
  7860. padding: var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal);
  7861. }
  7862. .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label {
  7863. font-size: var(--ck-powered-by-font-size);
  7864. letter-spacing: var(--ck-powered-by-letter-spacing);
  7865. padding-left: 2px;
  7866. text-transform: uppercase;
  7867. font-weight: bold;
  7868. margin-right: 4px;
  7869. cursor: pointer;
  7870. line-height: normal;
  7871. color: var(--ck-powered-by-text-color);
  7872. }
  7873. .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon {
  7874. display: block;
  7875. cursor: pointer;
  7876. width: var(--ck-powered-by-icon-width);
  7877. height: var(--ck-powered-by-icon-height);
  7878. }
  7879. .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a {
  7880. filter: grayscale(0%);
  7881. opacity: 1;
  7882. }
  7883. .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_inside"] {
  7884. border-color: transparent;
  7885. }
  7886. .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_border"] {
  7887. border: var(--ck-focus-ring);
  7888. border-color: var(--ck-powered-by-border-color);
  7889. }
  7890. /*
  7891. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7892. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7893. */
  7894. :root {
  7895. /* where 7.5(px) is the font size of the evaluation badge label and 13(px) is the base font size. */
  7896. --ck-evaluation-badge-font-size: calc(var(--ck-font-size-base) * 7.5 / 13);
  7897. /* where 7.5(px) is the line height of the evaluation badge label and 13(px) is the base font size. */
  7898. --ck-evaluation-badge-line-height: calc(var(--ck-font-size-base) * 7.5 / 13);
  7899. /* where -0.2(px) is the letter spacing of the evaluation badge label and 13(px) is the base font size. */
  7900. --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13);
  7901. --ck-evaluation-badge-padding-vertical: 2px;
  7902. --ck-evaluation-badge-padding-horizontal: 4px;
  7903. --ck-evaluation-badge-text-color: hsl(0, 0%, 31%);
  7904. --ck-evaluation-badge-border-radius: var(--ck-border-radius);
  7905. --ck-evaluation-badge-background: hsl(0, 0%, 100%);
  7906. --ck-evaluation-badge-border-color: var(--ck-color-focus-border);
  7907. }
  7908. .ck.ck-balloon-panel.ck-evaluation-badge-balloon {
  7909. --ck-border-radius: var(--ck-evaluation-badge-border-radius);
  7910. box-shadow: none;
  7911. background: var(--ck-evaluation-badge-background);
  7912. min-height: unset;
  7913. z-index: calc( var(--ck-z-panel) - 1 );
  7914. }
  7915. .ck.ck-balloon-panel.ck-evaluation-badge-balloon .ck.ck-evaluation-badge {
  7916. line-height: var(--ck-evaluation-badge-line-height);
  7917. padding: var(--ck-evaluation-badge-padding-vertical) var(--ck-evaluation-badge-padding-horizontal);
  7918. }
  7919. .ck.ck-balloon-panel.ck-evaluation-badge-balloon .ck.ck-evaluation-badge .ck-evaluation-badge__label {
  7920. display: block;
  7921. padding: 0 2px;
  7922. font-size: var(--ck-evaluation-badge-font-size);
  7923. letter-spacing: var(--ck-evaluation-badge-letter-spacing);
  7924. font-weight: bold;
  7925. line-height: normal;
  7926. text-transform: uppercase;
  7927. color: var(--ck-evaluation-badge-text-color);
  7928. }
  7929. .ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_inside"] {
  7930. border-color: transparent;
  7931. }
  7932. .ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_border"] {
  7933. border: var(--ck-focus-ring);
  7934. border-color: var(--ck-evaluation-badge-border-color);
  7935. }
  7936. /*
  7937. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7938. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7939. */
  7940. /*
  7941. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7942. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7943. */
  7944. /**
  7945. * Makes element unselectable.
  7946. */
  7947. /*
  7948. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7949. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7950. */
  7951. .ck.ck-button,
  7952. a.ck.ck-button {
  7953. -moz-user-select: none;
  7954. -webkit-user-select: none;
  7955. -ms-user-select: none;
  7956. user-select: none;
  7957. position: relative;
  7958. display: inline-flex;
  7959. align-items: center;
  7960. }
  7961. [dir="ltr"] .ck.ck-button, [dir="ltr"] a.ck.ck-button {
  7962. justify-content: left;
  7963. }
  7964. [dir="rtl"] .ck.ck-button, [dir="rtl"] a.ck.ck-button {
  7965. justify-content: right;
  7966. }
  7967. .ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label {
  7968. display: none;
  7969. }
  7970. .ck.ck-button.ck-button_with-text .ck-button__label, a.ck.ck-button.ck-button_with-text .ck-button__label {
  7971. display: inline-block;
  7972. }
  7973. /* Center the icon horizontally in a button without text. */
  7974. .ck.ck-button:not(.ck-button_with-text), a.ck.ck-button:not(.ck-button_with-text) {
  7975. justify-content: center;
  7976. }
  7977. /*
  7978. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7979. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7980. */
  7981. .ck.ck-button.ck-switchbutton .ck-button__toggle {
  7982. display: block;
  7983. }
  7984. .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
  7985. display: block;
  7986. }
  7987. /*
  7988. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7989. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7990. */
  7991. /*
  7992. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  7993. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  7994. */
  7995. .ck.ck-list-item-button {
  7996. min-height: unset;
  7997. width: 100%;
  7998. border-radius: 0;
  7999. }
  8000. [dir="ltr"] .ck.ck-list-item-button {
  8001. text-align: left;
  8002. }
  8003. [dir="rtl"] .ck.ck-list-item-button {
  8004. text-align: right;
  8005. }
  8006. [dir="ltr"] .ck.ck-list-item-button.ck-list-item-button_toggleable {
  8007. padding-left: var(--ck-spacing-small);
  8008. }
  8009. [dir="rtl"] .ck.ck-list-item-button.ck-list-item-button_toggleable {
  8010. padding-right: var(--ck-spacing-small);
  8011. }
  8012. .ck.ck-list-item-button .ck-list-item-button__check-holder {
  8013. display: inline-flex;
  8014. width: .9em;
  8015. height: .9em;
  8016. }
  8017. [dir="ltr"] .ck.ck-list-item-button .ck-list-item-button__check-holder {
  8018. margin-right: var(--ck-spacing-small);
  8019. }
  8020. [dir="rtl"] .ck.ck-list-item-button .ck-list-item-button__check-holder {
  8021. margin-left: var(--ck-spacing-small);
  8022. }
  8023. .ck.ck-list-item-button .ck-list-item-button__check-icon {
  8024. height: 100%;
  8025. }
  8026. /*
  8027. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8028. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8029. */
  8030. .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children {
  8031. display: none;
  8032. }
  8033. /*
  8034. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8035. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8036. */
  8037. .ck.ck-color-grid {
  8038. display: grid;
  8039. }
  8040. /*
  8041. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8042. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8043. */
  8044. .color-picker-hex-input {
  8045. width: max-content;
  8046. }
  8047. .color-picker-hex-input .ck.ck-input {
  8048. min-width: unset;
  8049. }
  8050. .ck.ck-color-picker__row {
  8051. display: flex;
  8052. flex-direction: row;
  8053. flex-wrap: nowrap;
  8054. justify-content: space-between;
  8055. margin: var(--ck-spacing-large) 0 0;
  8056. width: unset;
  8057. }
  8058. .ck.ck-color-picker__row .ck.ck-labeled-field-view {
  8059. padding-top: unset;
  8060. }
  8061. .ck.ck-color-picker__row .ck.ck-input-text {
  8062. width: unset;
  8063. }
  8064. .ck.ck-color-picker__row .ck-color-picker__hash-view {
  8065. padding-top: var(--ck-spacing-tiny);
  8066. padding-right: var(--ck-spacing-medium);
  8067. }
  8068. /*
  8069. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8070. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8071. */
  8072. /*
  8073. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8074. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8075. */
  8076. /* View fragment with color grids. */
  8077. .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color,
  8078. .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
  8079. display: flex;
  8080. align-items: center;
  8081. }
  8082. [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color, [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
  8083. justify-content: flex-start;
  8084. }
  8085. /* View fragment with a color picker. */
  8086. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar {
  8087. display: flex;
  8088. flex-direction: row;
  8089. justify-content: space-around;
  8090. }
  8091. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar .ck-button-save,
  8092. .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar .ck-button-cancel {
  8093. flex: 1
  8094. }
  8095. /*
  8096. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8097. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8098. */
  8099. .ck.ck-dialog .ck.ck-dialog__actions {
  8100. display: flex;
  8101. justify-content: flex-end;
  8102. }
  8103. /*
  8104. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8105. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8106. */
  8107. .ck.ck-dialog-overlay {
  8108. user-select: none;
  8109. overscroll-behavior: none;
  8110. position: fixed;
  8111. bottom: 0;
  8112. left: 0;
  8113. right: 0;
  8114. top: 0;
  8115. }
  8116. .ck.ck-dialog-overlay.ck-dialog-overlay__transparent {
  8117. pointer-events: none;
  8118. animation: none;
  8119. background: none;
  8120. }
  8121. .ck.ck-dialog {
  8122. overscroll-behavior: none;
  8123. width: fit-content;
  8124. position: absolute;
  8125. }
  8126. .ck.ck-dialog .ck.ck-form__header {
  8127. flex-shrink: 0;
  8128. }
  8129. /* Modals should not be draggable. */
  8130. .ck.ck-dialog:not(.ck-dialog_modal) .ck.ck-form__header .ck-form__header__label {
  8131. cursor: grab;
  8132. }
  8133. .ck.ck-dialog-overlay.ck-dialog-overlay__transparent .ck.ck-dialog {
  8134. pointer-events: all;
  8135. }
  8136. /*
  8137. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8138. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8139. */
  8140. :root {
  8141. --ck-dropdown-max-width: 75vw;
  8142. }
  8143. .ck.ck-dropdown {
  8144. display: inline-block;
  8145. position: relative;
  8146. }
  8147. .ck.ck-dropdown .ck-dropdown__arrow {
  8148. pointer-events: none;
  8149. z-index: var(--ck-z-default);
  8150. }
  8151. /* Dropdown button should span horizontally, e.g. in vertical toolbars */
  8152. .ck.ck-dropdown .ck-button.ck-dropdown__button {
  8153. width: 100%;
  8154. }
  8155. .ck.ck-dropdown .ck-dropdown__panel {
  8156. display: none;
  8157. z-index: var(--ck-z-panel);
  8158. max-width: var(--ck-dropdown-max-width);
  8159. position: absolute;
  8160. }
  8161. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel-visible {
  8162. display: inline-block;
  8163. }
  8164. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne,
  8165. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw,
  8166. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n,
  8167. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw,
  8168. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme {
  8169. bottom: 100%;
  8170. }
  8171. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
  8172. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
  8173. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
  8174. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
  8175. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
  8176. /*
  8177. * Using transform: translate3d( 0, 100%, 0 ) causes blurry dropdown on Chrome 67-78+ on non-retina displays.
  8178. * See https://github.com/ckeditor/ckeditor5/issues/1053.
  8179. */
  8180. top: 100%;
  8181. bottom: auto;
  8182. }
  8183. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne,
  8184. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se {
  8185. left: 0px;
  8186. }
  8187. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw,
  8188. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
  8189. right: 0px;
  8190. }
  8191. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s,
  8192. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n {
  8193. /* Positioning panels relative to the center of the button */
  8194. left: 50%;
  8195. transform: translateX(-50%);
  8196. }
  8197. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw,
  8198. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw {
  8199. /* Positioning panels relative to the middle-west of the button */
  8200. left: 75%;
  8201. transform: translateX(-75%);
  8202. }
  8203. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme,
  8204. .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme {
  8205. /* Positioning panels relative to the middle-east of the button */
  8206. left: 25%;
  8207. transform: translateX(-25%);
  8208. }
  8209. /*
  8210. * Toolbar dropdown panels should be always above the UI (eg. other dropdown panels) from the editor's content.
  8211. * See https://github.com/ckeditor/ckeditor5/issues/7874
  8212. */
  8213. .ck.ck-toolbar .ck-dropdown__panel {
  8214. z-index: calc( var(--ck-z-panel) + 1 );
  8215. }
  8216. /*
  8217. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8218. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8219. */
  8220. .ck.ck-splitbutton {
  8221. /* Enable font size inheritance, which allows fluid UI scaling. */
  8222. font-size: inherit;
  8223. }
  8224. .ck.ck-splitbutton .ck-splitbutton__action:focus {
  8225. z-index: calc(var(--ck-z-default) + 1);
  8226. }
  8227. /*
  8228. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8229. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8230. */
  8231. :root {
  8232. --ck-toolbar-dropdown-max-width: 60vw;
  8233. }
  8234. .ck.ck-toolbar-dropdown > .ck-dropdown__panel {
  8235. /* https://github.com/ckeditor/ckeditor5/issues/5586 */
  8236. width: max-content;
  8237. max-width: var(--ck-toolbar-dropdown-max-width);
  8238. }
  8239. .ck.ck-toolbar-dropdown > .ck-dropdown__panel .ck-button:focus {
  8240. z-index: calc(var(--ck-z-default) + 1);
  8241. }
  8242. /*
  8243. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8244. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8245. */
  8246. .ck.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
  8247. pointer-events: none;
  8248. z-index: var(--ck-z-default);
  8249. }
  8250. /*
  8251. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8252. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8253. */
  8254. .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
  8255. position: absolute;
  8256. max-height: 314px; /* With the default settings, this is equal to 10 menu items. */
  8257. overflow-y: auto;
  8258. z-index: calc(var(--ck-z-panel) + 1);
  8259. }
  8260. /*
  8261. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8262. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8263. */
  8264. .ck.ck-dropdown-menu-list__nested-menu {
  8265. display: block;
  8266. }
  8267. /*
  8268. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8269. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8270. */
  8271. .ck.ck-aria-live-announcer {
  8272. position: absolute;
  8273. left: -10000px;
  8274. top: -10000px;
  8275. }
  8276. .ck.ck-aria-live-region-list {
  8277. list-style-type: none;
  8278. }
  8279. /*
  8280. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8281. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8282. */
  8283. .ck.ck-form__header {
  8284. display: flex;
  8285. flex-direction: row;
  8286. flex-wrap: nowrap;
  8287. align-items: center;
  8288. justify-content: space-between;
  8289. }
  8290. .ck.ck-form__header h2.ck-form__header__label {
  8291. flex-grow: 1;
  8292. }
  8293. /*
  8294. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8295. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8296. */
  8297. .ck.ck-icon {
  8298. vertical-align: middle;
  8299. }
  8300. /*
  8301. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8302. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8303. */
  8304. .ck.ck-label {
  8305. display: block;
  8306. }
  8307. .ck.ck-voice-label {
  8308. display: none;
  8309. }
  8310. /*
  8311. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8312. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8313. */
  8314. .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper {
  8315. display: flex;
  8316. position: relative;
  8317. }
  8318. .ck.ck-labeled-field-view .ck.ck-label {
  8319. display: block;
  8320. position: absolute;
  8321. }
  8322. /*
  8323. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8324. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8325. */
  8326. /*
  8327. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8328. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8329. */
  8330. /**
  8331. * Makes element unselectable.
  8332. */
  8333. .ck.ck-list {
  8334. -moz-user-select: none;
  8335. -webkit-user-select: none;
  8336. -ms-user-select: none;
  8337. user-select: none;
  8338. display: flex;
  8339. flex-direction: column;
  8340. }
  8341. .ck.ck-list .ck-list__item,
  8342. .ck.ck-list .ck-list__separator {
  8343. display: block;
  8344. }
  8345. /* Make sure that whatever child of the list item gets focus, it remains on the
  8346. top. Thanks to that, styles like box-shadow, outline, etc. are not masked by
  8347. adjacent list items. */
  8348. .ck.ck-list .ck-list__item > *:focus {
  8349. position: relative;
  8350. z-index: var(--ck-z-default);
  8351. }
  8352. /*
  8353. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8354. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8355. */
  8356. :root {
  8357. /* Make sure the balloon arrow does not float over its children. */
  8358. --ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3);
  8359. }
  8360. .ck.ck-balloon-panel {
  8361. display: none;
  8362. position: absolute;
  8363. z-index: var(--ck-z-panel);
  8364. }
  8365. .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before,
  8366. .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after {
  8367. content: "";
  8368. position: absolute;
  8369. }
  8370. .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before {
  8371. z-index: var(--ck-balloon-panel-arrow-z-index);
  8372. }
  8373. .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after {
  8374. z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
  8375. }
  8376. .ck.ck-balloon-panel[class*="arrow_n"]::before {
  8377. z-index: var(--ck-balloon-panel-arrow-z-index);
  8378. }
  8379. .ck.ck-balloon-panel[class*="arrow_n"]::after {
  8380. z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
  8381. }
  8382. .ck.ck-balloon-panel[class*="arrow_s"]::before {
  8383. z-index: var(--ck-balloon-panel-arrow-z-index);
  8384. }
  8385. .ck.ck-balloon-panel[class*="arrow_s"]::after {
  8386. z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
  8387. }
  8388. .ck.ck-balloon-panel.ck-balloon-panel_visible {
  8389. display: block;
  8390. }
  8391. /*
  8392. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8393. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8394. */
  8395. .ck .ck-balloon-rotator__navigation {
  8396. display: flex;
  8397. align-items: center;
  8398. justify-content: center;
  8399. }
  8400. /* Buttons inside a toolbar should be centered when rotator bar is wider.
  8401. * See: https://github.com/ckeditor/ckeditor5-ui/issues/495
  8402. */
  8403. .ck .ck-balloon-rotator__content .ck-toolbar {
  8404. justify-content: center;
  8405. }
  8406. /*
  8407. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8408. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8409. */
  8410. .ck .ck-fake-panel {
  8411. position: absolute;
  8412. /* Fake panels should be placed under main balloon content. */
  8413. z-index: calc(var(--ck-z-panel) - 1);
  8414. }
  8415. .ck .ck-fake-panel div {
  8416. position: absolute;
  8417. }
  8418. .ck .ck-fake-panel div:nth-child( 1 ) {
  8419. z-index: 2;
  8420. }
  8421. .ck .ck-fake-panel div:nth-child( 2 ) {
  8422. z-index: 1;
  8423. }
  8424. /*
  8425. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8426. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8427. */
  8428. .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
  8429. z-index: var(--ck-z-panel); /* #315 */
  8430. position: fixed;
  8431. top: 0;
  8432. }
  8433. .ck.ck-sticky-panel .ck-sticky-panel__content_sticky_bottom-limit {
  8434. top: auto;
  8435. position: absolute;
  8436. }
  8437. /*
  8438. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8439. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8440. */
  8441. .ck.ck-autocomplete {
  8442. position: relative;
  8443. }
  8444. .ck.ck-autocomplete > .ck-search__results {
  8445. position: absolute;
  8446. z-index: var(--ck-z-panel);
  8447. }
  8448. .ck.ck-autocomplete > .ck-search__results.ck-search__results_n {
  8449. bottom: 100%;
  8450. }
  8451. .ck.ck-autocomplete > .ck-search__results.ck-search__results_s {
  8452. top: 100%;
  8453. bottom: auto;
  8454. }
  8455. /*
  8456. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8457. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8458. */
  8459. /*
  8460. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8461. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8462. */
  8463. .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon {
  8464. position: absolute;
  8465. top: 50%;
  8466. transform: translateY(-50%);
  8467. }
  8468. [dir="ltr"] .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon {
  8469. left: var(--ck-spacing-medium);
  8470. }
  8471. [dir="rtl"] .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon {
  8472. right: var(--ck-spacing-medium);
  8473. }
  8474. .ck.ck-search > .ck-labeled-field-view .ck-search__reset {
  8475. position: absolute;
  8476. top: 50%;
  8477. transform: translateY(-50%);
  8478. }
  8479. .ck.ck-search > .ck-search__results > .ck-search__info > span:first-child {
  8480. display: block;
  8481. }
  8482. /* Hide the filtered view when nothing was found */
  8483. .ck.ck-search > .ck-search__results > .ck-search__info:not(.ck-hidden) ~ * {
  8484. display: none;
  8485. }
  8486. /*
  8487. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8488. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8489. */
  8490. .ck.ck-highlighted-text mark {
  8491. background: var(--ck-color-highlight-background);
  8492. vertical-align: initial;
  8493. font-weight: inherit;
  8494. line-height: inherit;
  8495. font-size: inherit;
  8496. }
  8497. /*
  8498. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8499. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8500. */
  8501. /*
  8502. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8503. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8504. */
  8505. /**
  8506. * Makes element unselectable.
  8507. */
  8508. .ck.ck-balloon-panel.ck-tooltip {
  8509. -moz-user-select: none;
  8510. -webkit-user-select: none;
  8511. -ms-user-select: none;
  8512. user-select: none;
  8513. z-index: calc( var(--ck-z-dialog) + 100 );
  8514. }
  8515. /*
  8516. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8517. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8518. */
  8519. :root {
  8520. --ck-toolbar-spinner-size: 18px;
  8521. }
  8522. .ck.ck-spinner-container {
  8523. display: block;
  8524. position: relative;
  8525. }
  8526. .ck.ck-spinner {
  8527. position: absolute;
  8528. top: 50%;
  8529. left: 0;
  8530. right: 0;
  8531. margin: 0 auto;
  8532. transform: translateY(-50%);
  8533. z-index: 1;
  8534. }
  8535. /*
  8536. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8537. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8538. */
  8539. /*
  8540. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8541. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8542. */
  8543. /**
  8544. * Makes element unselectable.
  8545. */
  8546. .ck.ck-toolbar {
  8547. -moz-user-select: none;
  8548. -webkit-user-select: none;
  8549. -ms-user-select: none;
  8550. user-select: none;
  8551. display: flex;
  8552. flex-flow: row nowrap;
  8553. align-items: center;
  8554. }
  8555. .ck.ck-toolbar > .ck-toolbar__items {
  8556. display: flex;
  8557. flex-flow: row wrap;
  8558. align-items: center;
  8559. flex-grow: 1;
  8560. }
  8561. .ck.ck-toolbar .ck.ck-toolbar__separator {
  8562. display: inline-block;
  8563. /*
  8564. * A leading or trailing separator makes no sense (separates from nothing on one side).
  8565. * For instance, it can happen when toolbar items (also separators) are getting grouped one by one and
  8566. * moved to another toolbar in the dropdown.
  8567. */
  8568. }
  8569. .ck.ck-toolbar .ck.ck-toolbar__separator:first-child,
  8570. .ck.ck-toolbar .ck.ck-toolbar__separator:last-child {
  8571. display: none;
  8572. }
  8573. .ck.ck-toolbar .ck-toolbar__line-break {
  8574. flex-basis: 100%;
  8575. }
  8576. .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
  8577. flex-wrap: nowrap;
  8578. }
  8579. .ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items {
  8580. flex-direction: column;
  8581. }
  8582. .ck.ck-toolbar.ck-toolbar_floating > .ck-toolbar__items {
  8583. flex-wrap: nowrap;
  8584. }
  8585. .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck-dropdown__button .ck-dropdown__arrow {
  8586. display: none;
  8587. }
  8588. /*
  8589. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8590. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8591. */
  8592. .ck.ck-block-toolbar-button {
  8593. position: absolute;
  8594. z-index: var(--ck-z-default);
  8595. }
  8596. /*
  8597. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8598. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8599. */
  8600. .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
  8601. pointer-events: none;
  8602. z-index: var(--ck-z-default);
  8603. }
  8604. /*
  8605. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8606. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8607. */
  8608. :root {
  8609. --ck-menu-bar-menu-max-width: 75vw;
  8610. --ck-menu-bar-nested-menu-horizontal-offset: 5px;
  8611. }
  8612. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
  8613. z-index: var(--ck-z-panel);
  8614. max-width: var(--ck-menu-bar-menu-max-width);
  8615. position: absolute;
  8616. }
  8617. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne,
  8618. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw {
  8619. bottom: 100%;
  8620. }
  8621. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se,
  8622. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw {
  8623. top: 100%;
  8624. bottom: auto;
  8625. }
  8626. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne,
  8627. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se {
  8628. left: 0px;
  8629. }
  8630. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw,
  8631. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw {
  8632. right: 0px;
  8633. }
  8634. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es,
  8635. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en {
  8636. left: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) );
  8637. }
  8638. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es {
  8639. top: 0px;
  8640. }
  8641. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en {
  8642. bottom: 0px;
  8643. }
  8644. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws,
  8645. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn {
  8646. right: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) );
  8647. }
  8648. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws {
  8649. top: 0px;
  8650. }
  8651. .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn {
  8652. bottom: 0px;
  8653. }
  8654. /*
  8655. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8656. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8657. */
  8658. .ck.ck-menu-bar__menu {
  8659. display: block;
  8660. position: relative;
  8661. }
  8662. /*
  8663. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8664. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8665. */
  8666. :root {
  8667. --ck-color-resizer: var(--ck-color-focus-border);
  8668. --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%);
  8669. --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%);
  8670. --ck-resizer-border-radius: var(--ck-border-radius);
  8671. --ck-resizer-tooltip-offset: 10px;
  8672. --ck-resizer-tooltip-height: calc(var(--ck-spacing-small) * 2 + 10px);
  8673. }
  8674. .ck .ck-widget {
  8675. /* This is neccessary for type around UI to be positioned properly. */
  8676. position: relative;
  8677. }
  8678. .ck .ck-widget.ck-widget_with-selection-handle {
  8679. /* Make the widget wrapper a relative positioning container for the drag handle. */
  8680. position: relative;
  8681. }
  8682. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
  8683. position: absolute;
  8684. }
  8685. .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon {
  8686. /* Make sure the icon in not a subject to font-size or line-height to avoid
  8687. unnecessary spacing around it. */
  8688. display: block;
  8689. }
  8690. /* Show the selection handle on mouse hover over the widget, but not for nested widgets. */
  8691. .ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle {
  8692. visibility: visible;
  8693. }
  8694. /* Show the selection handle when the widget is selected, but not for nested widgets. */
  8695. .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle {
  8696. visibility: visible;
  8697. }
  8698. .ck .ck-size-view {
  8699. background: var(--ck-color-resizer-tooltip-background);
  8700. color: var(--ck-color-resizer-tooltip-text);
  8701. border: 1px solid var(--ck-color-resizer-tooltip-text);
  8702. border-radius: var(--ck-resizer-border-radius);
  8703. font-size: var(--ck-font-size-tiny);
  8704. display: block;
  8705. padding: 0 var(--ck-spacing-small);
  8706. height: var(--ck-resizer-tooltip-height);
  8707. line-height: var(--ck-resizer-tooltip-height);
  8708. }
  8709. .ck .ck-size-view.ck-orientation-top-left,
  8710. .ck .ck-size-view.ck-orientation-top-right,
  8711. .ck .ck-size-view.ck-orientation-bottom-right,
  8712. .ck .ck-size-view.ck-orientation-bottom-left,
  8713. .ck .ck-size-view.ck-orientation-above-center {
  8714. position: absolute;
  8715. }
  8716. .ck .ck-size-view.ck-orientation-top-left {
  8717. top: var(--ck-resizer-tooltip-offset);
  8718. left: var(--ck-resizer-tooltip-offset);
  8719. }
  8720. .ck .ck-size-view.ck-orientation-top-right {
  8721. top: var(--ck-resizer-tooltip-offset);
  8722. right: var(--ck-resizer-tooltip-offset);
  8723. }
  8724. .ck .ck-size-view.ck-orientation-bottom-right {
  8725. bottom: var(--ck-resizer-tooltip-offset);
  8726. right: var(--ck-resizer-tooltip-offset);
  8727. }
  8728. .ck .ck-size-view.ck-orientation-bottom-left {
  8729. bottom: var(--ck-resizer-tooltip-offset);
  8730. left: var(--ck-resizer-tooltip-offset);
  8731. }
  8732. /* Class applied if the widget is too small to contain the size label */
  8733. .ck .ck-size-view.ck-orientation-above-center {
  8734. top: calc(var(--ck-resizer-tooltip-height) * -1);
  8735. left: 50%;
  8736. transform: translate(-50%);
  8737. }
  8738. /*
  8739. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8740. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8741. */
  8742. .ck .ck-widget_with-resizer {
  8743. /* Make the widget wrapper a relative positioning container for the drag handle. */
  8744. position: relative;
  8745. }
  8746. .ck .ck-widget__resizer {
  8747. display: none;
  8748. position: absolute;
  8749. /* The wrapper itself should not interfere with the pointer device, only the handles should. */
  8750. pointer-events: none;
  8751. left: 0;
  8752. top: 0;
  8753. }
  8754. .ck-focused .ck-widget_with-resizer.ck-widget_selected > .ck-widget__resizer {
  8755. display: block;
  8756. }
  8757. .ck .ck-widget__resizer__handle {
  8758. position: absolute;
  8759. /* Resizers are the only UI elements that should interfere with a pointer device. */
  8760. pointer-events: all;
  8761. }
  8762. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left,
  8763. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right {
  8764. cursor: nwse-resize;
  8765. }
  8766. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right,
  8767. .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left {
  8768. cursor: nesw-resize;
  8769. }
  8770. /*
  8771. * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  8772. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  8773. */
  8774. /*
  8775. * Styles of the type around buttons
  8776. */
  8777. .ck .ck-widget .ck-widget__type-around__button {
  8778. display: block;
  8779. position: absolute;
  8780. overflow: hidden;
  8781. z-index: var(--ck-z-default);
  8782. }
  8783. .ck .ck-widget .ck-widget__type-around__button svg {
  8784. position: absolute;
  8785. top: 50%;
  8786. left: 50%;
  8787. z-index: calc(var(--ck-z-default) + 2);
  8788. }
  8789. .ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_before {
  8790. /* Place it in the middle of the outline */
  8791. top: calc(-0.5 * var(--ck-widget-outline-thickness));
  8792. left: min(10%, 30px);
  8793. transform: translateY(-50%);
  8794. }
  8795. .ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_after {
  8796. /* Place it in the middle of the outline */
  8797. bottom: calc(-0.5 * var(--ck-widget-outline-thickness));
  8798. right: min(10%, 30px);
  8799. transform: translateY(50%);
  8800. }
  8801. /*
  8802. * Styles for the buttons when:
  8803. * - the widget is selected,
  8804. * - or the button is being hovered (regardless of the widget state).
  8805. */
  8806. .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after {
  8807. content: "";
  8808. display: block;
  8809. position: absolute;
  8810. top: 1px;
  8811. left: 1px;
  8812. z-index: calc(var(--ck-z-default) + 1);
  8813. }
  8814. /*
  8815. * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
  8816. */
  8817. .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
  8818. display: none;
  8819. position: absolute;
  8820. left: 0;
  8821. right: 0;
  8822. }
  8823. /*
  8824. * When the widget is hovered the "fake caret" would normally be narrower than the
  8825. * extra outline displayed around the widget. Let's extend the "fake caret" to match
  8826. * the full width of the widget.
  8827. */
  8828. .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
  8829. left: calc( -1 * var(--ck-widget-outline-thickness) );
  8830. right: calc( -1 * var(--ck-widget-outline-thickness) );
  8831. }
  8832. /*
  8833. * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation).
  8834. */
  8835. .ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
  8836. top: calc( -1 * var(--ck-widget-outline-thickness) - 1px );
  8837. display: block;
  8838. }
  8839. /*
  8840. * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation).
  8841. */
  8842. .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
  8843. bottom: calc( -1 * var(--ck-widget-outline-thickness) - 1px );
  8844. display: block;
  8845. }
  8846. /*
  8847. * Integration with the read-only mode of the editor.
  8848. */
  8849. .ck.ck-editor__editable.ck-read-only .ck-widget__type-around {
  8850. display: none;
  8851. }
  8852. /*
  8853. * Integration with the restricted editing mode (feature) of the editor.
  8854. */
  8855. .ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around {
  8856. display: none;
  8857. }
  8858. /*
  8859. * Integration with the #isEnabled property of the WidgetTypeAround plugin.
  8860. */
  8861. .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around {
  8862. display: none;
  8863. }
  8864. /*# sourceMappingURL=ckeditor5.css.map */