1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844684568466847684868496850685168526853685468556856685768586859686068616862686368646865686668676868686968706871687268736874687568766877687868796880688168826883688468856886688768886889689068916892689368946895689668976898689969006901690269036904690569066907690869096910691169126913691469156916691769186919692069216922692369246925692669276928692969306931693269336934693569366937693869396940694169426943694469456946694769486949695069516952695369546955695669576958695969606961696269636964696569666967696869696970697169726973697469756976697769786979698069816982698369846985698669876988698969906991699269936994699569966997699869997000700170027003700470057006700770087009701070117012701370147015701670177018701970207021702270237024702570267027702870297030703170327033703470357036703770387039704070417042704370447045704670477048704970507051705270537054705570567057705870597060706170627063706470657066706770687069707070717072707370747075707670777078707970807081708270837084708570867087708870897090709170927093709470957096709770987099710071017102710371047105710671077108710971107111711271137114711571167117711871197120712171227123712471257126712771287129713071317132713371347135713671377138713971407141714271437144714571467147714871497150715171527153715471557156715771587159716071617162716371647165716671677168716971707171717271737174717571767177717871797180718171827183718471857186718771887189719071917192719371947195719671977198719972007201720272037204720572067207720872097210721172127213721472157216721772187219722072217222722372247225722672277228722972307231723272337234723572367237723872397240724172427243724472457246724772487249725072517252725372547255725672577258725972607261726272637264726572667267726872697270727172727273727472757276727772787279728072817282728372847285728672877288728972907291729272937294729572967297729872997300730173027303730473057306730773087309731073117312731373147315731673177318731973207321732273237324732573267327732873297330733173327333733473357336733773387339734073417342734373447345734673477348734973507351735273537354735573567357735873597360736173627363736473657366736773687369737073717372737373747375737673777378737973807381738273837384738573867387738873897390739173927393739473957396739773987399740074017402740374047405740674077408740974107411741274137414741574167417741874197420742174227423742474257426742774287429743074317432743374347435743674377438743974407441744274437444744574467447744874497450745174527453745474557456745774587459746074617462746374647465746674677468746974707471747274737474747574767477747874797480748174827483748474857486748774887489749074917492749374947495749674977498749975007501750275037504750575067507750875097510751175127513751475157516751775187519752075217522752375247525752675277528752975307531753275337534753575367537753875397540754175427543754475457546754775487549755075517552755375547555755675577558755975607561756275637564756575667567756875697570757175727573757475757576757775787579758075817582758375847585758675877588758975907591759275937594759575967597759875997600760176027603760476057606760776087609761076117612761376147615761676177618761976207621762276237624762576267627762876297630763176327633763476357636763776387639764076417642764376447645764676477648764976507651765276537654765576567657765876597660766176627663766476657666766776687669767076717672767376747675767676777678767976807681768276837684768576867687768876897690769176927693769476957696769776987699770077017702770377047705770677077708770977107711771277137714771577167717771877197720772177227723772477257726772777287729773077317732773377347735773677377738773977407741774277437744774577467747774877497750775177527753775477557756775777587759776077617762776377647765776677677768776977707771777277737774777577767777777877797780778177827783778477857786778777887789779077917792779377947795779677977798779978007801780278037804780578067807780878097810781178127813781478157816781778187819782078217822782378247825782678277828782978307831783278337834783578367837783878397840784178427843784478457846784778487849785078517852785378547855785678577858785978607861786278637864786578667867786878697870787178727873787478757876787778787879788078817882788378847885788678877888788978907891789278937894789578967897789878997900790179027903790479057906790779087909791079117912791379147915791679177918791979207921792279237924792579267927792879297930793179327933793479357936793779387939794079417942794379447945794679477948794979507951795279537954795579567957795879597960796179627963796479657966796779687969797079717972797379747975797679777978797979807981798279837984798579867987798879897990799179927993799479957996799779987999800080018002800380048005800680078008800980108011801280138014801580168017801880198020802180228023802480258026802780288029803080318032803380348035803680378038803980408041804280438044804580468047804880498050805180528053805480558056805780588059806080618062806380648065806680678068806980708071807280738074807580768077807880798080808180828083808480858086808780888089809080918092809380948095809680978098809981008101810281038104810581068107810881098110811181128113811481158116811781188119812081218122812381248125812681278128812981308131813281338134813581368137813881398140814181428143814481458146814781488149815081518152815381548155815681578158815981608161816281638164816581668167816881698170817181728173817481758176817781788179818081818182818381848185818681878188818981908191819281938194819581968197819881998200820182028203820482058206820782088209821082118212821382148215821682178218821982208221822282238224822582268227822882298230823182328233823482358236823782388239824082418242824382448245824682478248824982508251825282538254825582568257825882598260826182628263826482658266826782688269827082718272827382748275827682778278827982808281828282838284828582868287828882898290829182928293829482958296829782988299830083018302830383048305830683078308830983108311831283138314831583168317831883198320832183228323832483258326832783288329833083318332833383348335833683378338833983408341834283438344834583468347834883498350835183528353835483558356835783588359836083618362836383648365836683678368836983708371837283738374837583768377837883798380838183828383838483858386838783888389839083918392839383948395839683978398839984008401840284038404840584068407840884098410841184128413841484158416841784188419842084218422842384248425842684278428842984308431843284338434843584368437843884398440844184428443844484458446844784488449845084518452845384548455845684578458845984608461846284638464846584668467846884698470847184728473847484758476847784788479848084818482848384848485848684878488848984908491849284938494849584968497849884998500850185028503850485058506850785088509851085118512851385148515851685178518851985208521852285238524852585268527852885298530853185328533853485358536853785388539854085418542854385448545854685478548854985508551855285538554855585568557855885598560856185628563856485658566856785688569857085718572857385748575857685778578857985808581858285838584858585868587858885898590859185928593859485958596859785988599860086018602860386048605860686078608860986108611 |
- .app-body {
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar;
- }
- .animated-number {
- display: inline-flex;
- flex-direction: column;
- align-items: stretch;
- overflow: hidden;
- position: relative;
- }
- .inline-alert {
- color: $valid-value-color;
- font-weight: 400;
- .no-reduce-motion & {
- transition: opacity 200ms ease;
- }
- }
- .link-button {
- display: block;
- font-size: 15px;
- line-height: 20px;
- color: $highlight-text-color;
- border: 0;
- background: transparent;
- padding: 0;
- cursor: pointer;
- text-decoration: none;
- &--destructive {
- color: $error-value-color;
- }
- &:hover,
- &:active {
- text-decoration: underline;
- }
- &:disabled {
- color: $ui-primary-color;
- cursor: default;
- }
- }
- .button {
- background-color: darken($ui-highlight-color, 2%);
- border: 10px none;
- border-radius: 4px;
- box-sizing: border-box;
- color: $primary-text-color;
- cursor: pointer;
- display: inline-block;
- font-family: inherit;
- font-size: 15px;
- font-weight: 500;
- letter-spacing: 0;
- line-height: 22px;
- overflow: hidden;
- padding: 7px 18px;
- position: relative;
- text-align: center;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: auto;
- &:active,
- &:focus,
- &:hover {
- background-color: $ui-highlight-color;
- }
- &--destructive {
- &:active,
- &:focus,
- &:hover {
- background-color: $error-red;
- transition: none;
- }
- }
- &:disabled,
- &.disabled {
- background-color: $ui-primary-color;
- cursor: default;
- }
- &.copyable {
- transition: background 300ms linear;
- }
- &.copied {
- background: $valid-value-color;
- transition: none;
- }
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- &.button-alternative {
- color: $inverted-text-color;
- background: $ui-primary-color;
- &:active,
- &:focus,
- &:hover {
- background-color: lighten($ui-primary-color, 4%);
- }
- }
- &.button-alternative-2 {
- background: $ui-base-lighter-color;
- &:active,
- &:focus,
- &:hover {
- background-color: lighten($ui-base-lighter-color, 4%);
- }
- }
- &.button-secondary {
- color: $darker-text-color;
- background: transparent;
- padding: 6px 17px;
- border: 1px solid $ui-primary-color;
- &:active,
- &:focus,
- &:hover {
- border-color: lighten($ui-primary-color, 4%);
- color: lighten($darker-text-color, 4%);
- text-decoration: none;
- }
- &:disabled {
- opacity: 0.5;
- }
- }
- &.button-tertiary {
- background: transparent;
- padding: 6px 17px;
- color: $highlight-text-color;
- border: 1px solid $highlight-text-color;
- &:active,
- &:focus,
- &:hover {
- background: $ui-highlight-color;
- color: $primary-text-color;
- border: 0;
- padding: 7px 18px;
- }
- &:disabled {
- opacity: 0.5;
- }
- }
- &.button--block {
- display: block;
- width: 100%;
- }
- .layout-multiple-columns &.button--with-bell {
- font-size: 12px;
- padding: 0 8px;
- }
- }
- .column__wrapper {
- display: flex;
- flex: 1 1 auto;
- position: relative;
- }
- .icon-button {
- display: inline-block;
- padding: 0;
- color: $action-button-color;
- border: 0;
- border-radius: 4px;
- background: transparent;
- cursor: pointer;
- transition: all 100ms ease-in;
- transition-property: background-color, color;
- text-decoration: none;
- a {
- color: inherit;
- text-decoration: none;
- }
- &:hover,
- &:active,
- &:focus {
- color: lighten($action-button-color, 7%);
- background-color: rgba($action-button-color, 0.15);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
- }
- &:focus {
- background-color: rgba($action-button-color, 0.3);
- }
- &.disabled {
- color: darken($action-button-color, 13%);
- background-color: transparent;
- cursor: default;
- }
- &.active {
- color: $highlight-text-color;
- }
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- &.inverted {
- color: $lighter-text-color;
- &:hover,
- &:active,
- &:focus {
- color: darken($lighter-text-color, 7%);
- background-color: rgba($lighter-text-color, 0.15);
- }
- &:focus {
- background-color: rgba($lighter-text-color, 0.3);
- }
- &.disabled {
- color: lighten($lighter-text-color, 7%);
- background-color: transparent;
- }
- &.active {
- color: $highlight-text-color;
- &.disabled {
- color: lighten($highlight-text-color, 13%);
- }
- }
- }
- &.overlayed {
- box-sizing: content-box;
- background: rgba($base-overlay-background, 0.6);
- color: rgba($primary-text-color, 0.7);
- border-radius: 4px;
- padding: 2px;
- &:hover {
- background: rgba($base-overlay-background, 0.9);
- }
- }
- &--with-counter {
- display: inline-flex;
- align-items: center;
- width: auto !important;
- padding: 0 4px 0 2px;
- }
- &__counter {
- display: inline-block;
- width: auto;
- margin-left: 4px;
- font-size: 12px;
- font-weight: 500;
- }
- }
- .text-icon-button {
- color: $lighter-text-color;
- border: 0;
- border-radius: 4px;
- background: transparent;
- cursor: pointer;
- font-weight: 600;
- font-size: 11px;
- padding: 0 3px;
- line-height: 27px;
- outline: 0;
- transition: all 100ms ease-in;
- transition-property: background-color, color;
- &:hover,
- &:active,
- &:focus {
- color: darken($lighter-text-color, 7%);
- background-color: rgba($lighter-text-color, 0.15);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
- }
- &:focus {
- background-color: rgba($lighter-text-color, 0.3);
- }
- &.disabled {
- color: lighten($lighter-text-color, 20%);
- background-color: transparent;
- cursor: default;
- }
- &.active {
- color: $highlight-text-color;
- }
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- }
- .dropdown-menu {
- position: absolute;
- }
- .invisible {
- font-size: 0;
- line-height: 0;
- display: inline-block;
- width: 0;
- height: 0;
- position: absolute;
- img,
- svg {
- margin: 0 !important;
- border: 0 !important;
- padding: 0 !important;
- width: 0 !important;
- height: 0 !important;
- }
- }
- .ellipsis {
- &::after {
- content: "…";
- }
- }
- .compose-form {
- padding: 15px;
- &__sensitive-button {
- padding: 10px;
- padding-top: 0;
- font-size: 14px;
- font-weight: 500;
- &.active {
- color: $highlight-text-color;
- }
- input[type="checkbox"] {
- display: none;
- }
- .checkbox {
- display: inline-block;
- position: relative;
- border: 1px solid $ui-primary-color;
- box-sizing: border-box;
- width: 18px;
- height: 18px;
- flex: 0 0 auto;
- margin-right: 10px;
- top: -1px;
- border-radius: 4px;
- vertical-align: middle;
- &.active {
- border-color: $highlight-text-color;
- background: $highlight-text-color;
- }
- }
- }
- .compose-form__warning {
- color: $inverted-text-color;
- margin-bottom: 10px;
- background: $ui-primary-color;
- box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
- padding: 8px 10px;
- border-radius: 4px;
- font-size: 13px;
- font-weight: 400;
- strong {
- color: $inverted-text-color;
- font-weight: 500;
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- a {
- color: $lighter-text-color;
- font-weight: 500;
- text-decoration: underline;
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
- }
- .emoji-picker-dropdown {
- position: absolute;
- top: 0;
- right: 0;
- }
- .compose-form__autosuggest-wrapper {
- position: relative;
- }
- .autosuggest-textarea,
- .autosuggest-input,
- .spoiler-input {
- position: relative;
- width: 100%;
- }
- .spoiler-input {
- height: 0;
- transform-origin: bottom;
- opacity: 0;
- &.spoiler-input--visible {
- height: 36px;
- margin-bottom: 11px;
- opacity: 1;
- }
- }
- .autosuggest-textarea__textarea,
- .spoiler-input__input {
- display: block;
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- color: $inverted-text-color;
- background: $simple-background-color;
- padding: 10px;
- font-family: inherit;
- font-size: 14px;
- resize: vertical;
- border: 0;
- outline: 0;
- &::placeholder {
- color: $dark-text-color;
- }
- &:focus {
- outline: 0;
- }
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
- }
- .spoiler-input__input {
- border-radius: 4px;
- }
- .autosuggest-textarea__textarea {
- min-height: 100px;
- border-radius: 4px 4px 0 0;
- padding-bottom: 0;
- padding-right: 10px + 22px;
- resize: none;
- scrollbar-color: initial;
- &::-webkit-scrollbar {
- all: unset;
- }
- @media screen and (max-width: 600px) {
- height: 100px !important; // prevent auto-resize textarea
- resize: vertical;
- }
- }
- .autosuggest-textarea__suggestions-wrapper {
- position: relative;
- height: 0;
- }
- .autosuggest-textarea__suggestions {
- box-sizing: border-box;
- display: none;
- position: absolute;
- top: 100%;
- width: 100%;
- z-index: 99;
- box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
- background: $ui-secondary-color;
- border-radius: 0 0 4px 4px;
- color: $inverted-text-color;
- font-size: 14px;
- padding: 6px;
- &.autosuggest-textarea__suggestions--visible {
- display: block;
- }
- }
- .autosuggest-textarea__suggestions__item {
- padding: 10px;
- cursor: pointer;
- border-radius: 4px;
- &:hover,
- &:focus,
- &:active,
- &.selected {
- background: darken($ui-secondary-color, 10%);
- }
- }
- .autosuggest-account,
- .autosuggest-emoji,
- .autosuggest-hashtag {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- line-height: 18px;
- font-size: 14px;
- }
- .autosuggest-hashtag {
- justify-content: space-between;
- &__name {
- flex: 1 1 auto;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- strong {
- font-weight: 500;
- }
- &__uses {
- flex: 0 0 auto;
- text-align: right;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- .autosuggest-account-icon,
- .autosuggest-emoji img {
- display: block;
- margin-right: 8px;
- width: 16px;
- height: 16px;
- }
- .autosuggest-account .display-name__account {
- color: $lighter-text-color;
- }
- .compose-form__modifiers {
- color: $inverted-text-color;
- font-family: inherit;
- font-size: 14px;
- background: $simple-background-color;
- .compose-form__upload-wrapper {
- overflow: hidden;
- }
- .compose-form__uploads-wrapper {
- display: flex;
- flex-direction: row;
- padding: 5px;
- flex-wrap: wrap;
- }
- .compose-form__upload {
- flex: 1 1 0;
- min-width: 40%;
- margin: 5px;
- &__actions {
- background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- }
- .icon-button {
- flex: 0 1 auto;
- color: $secondary-text-color;
- font-size: 14px;
- font-weight: 500;
- padding: 10px;
- font-family: inherit;
- &:hover,
- &:focus,
- &:active {
- color: lighten($secondary-text-color, 7%);
- }
- }
- &__warning {
- position: absolute;
- z-index: 2;
- bottom: 0;
- left: 0;
- right: 0;
- box-sizing: border-box;
- background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
- }
- }
- .compose-form__upload-thumbnail {
- border-radius: 4px;
- background-color: $base-shadow-color;
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
- height: 140px;
- width: 100%;
- overflow: hidden;
- }
- }
- .compose-form__buttons-wrapper {
- padding: 10px;
- background: darken($simple-background-color, 8%);
- border-radius: 0 0 4px 4px;
- display: flex;
- justify-content: space-between;
- flex: 0 0 auto;
- .compose-form__buttons {
- display: flex;
- .compose-form__upload-button-icon {
- line-height: 27px;
- }
- .compose-form__sensitive-button {
- display: none;
- &.compose-form__sensitive-button--visible {
- display: block;
- }
- .compose-form__sensitive-button__icon {
- line-height: 27px;
- }
- }
- }
- .icon-button,
- .text-icon-button {
- box-sizing: content-box;
- padding: 0 3px;
- }
- .character-counter__wrapper {
- align-self: center;
- margin-right: 4px;
- }
- }
- .compose-form__publish {
- display: flex;
- justify-content: flex-end;
- min-width: 0;
- flex: 0 0 auto;
- .compose-form__publish-button-wrapper {
- overflow: hidden;
- padding-top: 15px;
- }
- }
- }
- .character-counter {
- cursor: default;
- font-family: $font-sans-serif, sans-serif;
- font-size: 14px;
- font-weight: 600;
- color: $lighter-text-color;
- &.character-counter--over {
- color: $warning-red;
- }
- }
- .no-reduce-motion .spoiler-input {
- transition: height 0.4s ease, opacity 0.4s ease;
- }
- .sign-in-banner {
- padding: 10px;
- p {
- color: $darker-text-color;
- margin-bottom: 20px;
- a {
- color: $secondary-text-color;
- text-decoration: none;
- unicode-bidi: isolate;
- &:hover {
- text-decoration: underline;
- .fa {
- color: lighten($dark-text-color, 7%);
- }
- }
- }
- }
- .button {
- margin-bottom: 10px;
- }
- }
- .emojione {
- font-size: inherit;
- vertical-align: middle;
- object-fit: contain;
- margin: -0.2ex 0.15em 0.2ex;
- width: 16px;
- height: 16px;
- img {
- width: auto;
- }
- }
- .reply-indicator {
- border-radius: 4px;
- margin-bottom: 10px;
- background: $ui-primary-color;
- padding: 10px;
- min-height: 23px;
- overflow-y: auto;
- flex: 0 2 auto;
- }
- .reply-indicator__header {
- margin-bottom: 5px;
- overflow: hidden;
- }
- .reply-indicator__cancel {
- float: right;
- line-height: 24px;
- }
- .reply-indicator__display-name {
- color: $inverted-text-color;
- display: block;
- max-width: 100%;
- line-height: 24px;
- overflow: hidden;
- padding-right: 25px;
- text-decoration: none;
- }
- .reply-indicator__display-avatar {
- float: left;
- margin-right: 5px;
- }
- .status__content--with-action {
- cursor: pointer;
- }
- .status__content {
- clear: both;
- }
- .status__content,
- .reply-indicator__content {
- position: relative;
- font-size: 15px;
- line-height: 22px;
- word-wrap: break-word;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- padding-top: 2px;
- color: $primary-text-color;
- &:focus {
- outline: 0;
- }
- &.status__content--with-spoiler {
- white-space: normal;
- .status__content__text {
- white-space: pre-wrap;
- }
- }
- .emojione {
- width: 20px;
- height: 20px;
- margin: -3px 0 0;
- }
- p {
- margin-bottom: 20px;
- white-space: pre-wrap;
- unicode-bidi: plaintext;
- &:last-child {
- margin-bottom: 0;
- }
- }
- a {
- color: $secondary-text-color;
- text-decoration: none;
- unicode-bidi: isolate;
- &:hover {
- text-decoration: underline;
- .fa {
- color: lighten($dark-text-color, 7%);
- }
- }
- &.mention {
- &:hover {
- text-decoration: none;
- span {
- text-decoration: underline;
- }
- }
- }
- .fa {
- color: $dark-text-color;
- }
- }
- a.unhandled-link {
- color: $highlight-text-color;
- }
- .status__content__spoiler-link {
- background: $action-button-color;
- &:hover,
- &:focus {
- background: lighten($action-button-color, 7%);
- text-decoration: none;
- }
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- }
- .status__content__text {
- display: none;
- &.status__content__text--visible {
- display: block;
- }
- }
- }
- .announcements__item__content {
- word-wrap: break-word;
- overflow-y: auto;
- .emojione {
- width: 20px;
- height: 20px;
- margin: -3px 0 0;
- }
- p {
- margin-bottom: 10px;
- white-space: pre-wrap;
- &:last-child {
- margin-bottom: 0;
- }
- }
- a {
- color: $secondary-text-color;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- &.mention {
- &:hover {
- text-decoration: none;
- span {
- text-decoration: underline;
- }
- }
- }
- &.unhandled-link {
- color: $highlight-text-color;
- }
- }
- }
- .status__content.status__content--collapsed {
- max-height: 22px * 15; // 15 lines is roughly above 500 characters
- }
- .status__content__read-more-button {
- display: block;
- font-size: 15px;
- line-height: 22px;
- color: $highlight-text-color;
- border: 0;
- background: transparent;
- padding: 0;
- padding-top: 16px;
- text-decoration: none;
- &:hover,
- &:active {
- text-decoration: underline;
- }
- }
- .translate-button {
- margin-top: 16px;
- font-size: 15px;
- line-height: 22px;
- display: flex;
- justify-content: space-between;
- color: $dark-text-color;
- }
- .status__content__spoiler-link {
- display: inline-block;
- border-radius: 2px;
- background: transparent;
- border: 0;
- color: $inverted-text-color;
- font-weight: 700;
- font-size: 11px;
- padding: 0 6px;
- text-transform: uppercase;
- line-height: 20px;
- cursor: pointer;
- vertical-align: top;
- }
- .status__wrapper--filtered {
- color: $dark-text-color;
- border: 0;
- font-size: inherit;
- text-align: center;
- line-height: inherit;
- margin: 0;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- clear: both;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- &__button {
- display: inline;
- color: lighten($ui-highlight-color, 8%);
- border: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
- line-height: inherit;
- &:hover,
- &:active {
- text-decoration: underline;
- }
- }
- }
- .focusable {
- &:focus {
- outline: 0;
- background: lighten($ui-base-color, 4%);
- .detailed-status,
- .detailed-status__action-bar {
- background: lighten($ui-base-color, 8%);
- }
- }
- }
- .status {
- padding: 16px;
- min-height: 54px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: auto;
- @keyframes fade {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
- opacity: 1;
- animation: fade 150ms linear;
- .media-gallery,
- .video-player,
- .audio-player,
- .attachment-list {
- margin-top: 16px;
- }
- &.light {
- .status__relative-time,
- .status__visibility-icon {
- color: $light-text-color;
- }
- .status__display-name {
- color: $inverted-text-color;
- }
- .display-name {
- color: $light-text-color;
- strong {
- color: $inverted-text-color;
- }
- }
- .status__content {
- color: $inverted-text-color;
- a {
- color: $highlight-text-color;
- }
- &__spoiler-link {
- color: $primary-text-color;
- background: $ui-primary-color;
- &:hover,
- &:focus {
- background: lighten($ui-primary-color, 8%);
- }
- }
- }
- }
- }
- .status__relative-time {
- display: block;
- font-size: 15px;
- line-height: 22px;
- height: 40px;
- order: 2;
- flex: 0 0 auto;
- color: $dark-text-color;
- }
- .notification__relative_time {
- color: $dark-text-color;
- float: right;
- font-size: 14px;
- padding-bottom: 1px;
- }
- .status__visibility-icon {
- padding: 0 4px;
- }
- .status__display-name {
- color: $dark-text-color;
- }
- .status__info .status__display-name {
- max-width: 100%;
- display: flex;
- font-size: 15px;
- line-height: 22px;
- align-items: center;
- gap: 10px;
- overflow: hidden;
- .display-name {
- bdi {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- &__account {
- white-space: nowrap;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- .status__info {
- font-size: 15px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 10px;
- }
- .status-check-box__status {
- display: block;
- box-sizing: border-box;
- width: 100%;
- padding: 0 10px;
- .detailed-status__display-name {
- color: lighten($inverted-text-color, 16%);
- span {
- display: inline;
- }
- &:hover strong {
- text-decoration: none;
- }
- }
- .media-gallery,
- .audio-player,
- .video-player {
- margin-top: 15px;
- max-width: 250px;
- }
- .status__content {
- padding: 0;
- white-space: normal;
- }
- .media-gallery__item-thumbnail {
- cursor: default;
- }
- }
- .status__prepend {
- padding: 16px;
- padding-bottom: 0;
- display: flex;
- gap: 10px;
- font-size: 15px;
- line-height: 22px;
- font-weight: 500;
- color: $dark-text-color;
- .status__display-name strong {
- color: $dark-text-color;
- }
- > span {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .status__action-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 18px;
- margin-top: 16px;
- }
- .detailed-status__action-bar-dropdown {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- }
- .detailed-status {
- background: lighten($ui-base-color, 4%);
- padding: 16px;
- &--flex {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-start;
- .status__content,
- .detailed-status__meta {
- flex: 100%;
- }
- }
- .status__content {
- font-size: 19px;
- line-height: 24px;
- .emojione {
- width: 24px;
- height: 24px;
- margin: -1px 0 0;
- }
- .status__content__spoiler-link {
- line-height: 24px;
- margin: -1px 0 0;
- }
- }
- .media-gallery,
- .video-player,
- .audio-player {
- margin-top: 16px;
- }
- }
- .detailed-status__meta {
- margin-top: 16px;
- color: $dark-text-color;
- font-size: 14px;
- line-height: 18px;
- }
- .detailed-status__action-bar {
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: row;
- padding: 10px 0;
- }
- .detailed-status__link {
- color: inherit;
- text-decoration: none;
- }
- .detailed-status__favorites,
- .detailed-status__reblogs {
- display: inline-block;
- font-weight: 500;
- font-size: 12px;
- line-height: 17px;
- margin-left: 6px;
- }
- .reply-indicator__content {
- color: $inverted-text-color;
- font-size: 14px;
- a {
- color: $lighter-text-color;
- }
- }
- .domain {
- padding: 10px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- .domain__domain-name {
- flex: 1 1 auto;
- display: block;
- color: $primary-text-color;
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- }
- }
- .domain__wrapper {
- display: flex;
- }
- .domain_buttons {
- height: 18px;
- padding: 10px;
- white-space: nowrap;
- }
- .account {
- padding: 16px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- &.compact {
- padding: 0;
- border-bottom: 0;
- .account__avatar-wrapper {
- margin-left: 0;
- }
- }
- .account__display-name {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- gap: 10px;
- color: $darker-text-color;
- overflow: hidden;
- text-decoration: none;
- font-size: 14px;
- &--with-note {
- strong {
- display: inline;
- }
- }
- }
- &__note {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: $ui-secondary-color;
- }
- }
- .follow-recommendations-account {
- .icon-button {
- color: $ui-primary-color;
- &.active {
- color: $valid-value-color;
- }
- }
- }
- .account__wrapper {
- display: flex;
- gap: 10px;
- }
- .account__avatar {
- @include avatar-radius;
- display: block;
- position: relative;
- overflow: hidden;
- img {
- display: block;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- &-inline {
- display: inline-block;
- vertical-align: middle;
- margin-right: 5px;
- }
- &-composite {
- border-radius: 50%;
- overflow: hidden;
- position: relative;
- & > div {
- float: left;
- position: relative;
- box-sizing: border-box;
- }
- .account__avatar {
- width: 100% !important;
- height: 100% !important;
- }
- &__label {
- display: block;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: $primary-text-color;
- text-shadow: 1px 1px 2px $base-shadow-color;
- font-weight: 700;
- font-size: 15px;
- }
- }
- }
- a .account__avatar {
- cursor: pointer;
- }
- .account__avatar-overlay {
- position: relative;
- &-overlay {
- position: absolute;
- bottom: 0;
- right: 0;
- z-index: 1;
- }
- }
- .account__relationship {
- height: 18px;
- padding: 10px;
- white-space: nowrap;
- }
- .account__disclaimer {
- padding: 10px;
- border-top: 1px solid lighten($ui-base-color, 8%);
- color: $dark-text-color;
- strong {
- font-weight: 500;
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- a {
- font-weight: 500;
- color: inherit;
- text-decoration: underline;
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
- .account__action-bar {
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- line-height: 36px;
- overflow: hidden;
- flex: 0 0 auto;
- display: flex;
- }
- .account__action-bar-dropdown {
- padding: 10px;
- .icon-button {
- vertical-align: middle;
- }
- .dropdown--active {
- .dropdown__content.dropdown__right {
- left: 6px;
- right: initial;
- }
- &::after {
- bottom: initial;
- margin-left: 11px;
- margin-top: -7px;
- right: initial;
- }
- }
- }
- .account__action-bar-links {
- display: flex;
- flex: 1 1 auto;
- line-height: 18px;
- text-align: center;
- }
- .account__action-bar__tab {
- text-decoration: none;
- overflow: hidden;
- flex: 0 1 100%;
- border-right: 1px solid lighten($ui-base-color, 8%);
- padding: 10px 0;
- border-bottom: 4px solid transparent;
- &.active {
- border-bottom: 4px solid $ui-highlight-color;
- }
- & > span {
- display: block;
- text-transform: uppercase;
- font-size: 11px;
- color: $darker-text-color;
- }
- strong {
- display: block;
- font-size: 15px;
- font-weight: 500;
- color: $primary-text-color;
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- }
- .account-authorize {
- padding: 14px 10px;
- .detailed-status__display-name {
- display: block;
- margin-bottom: 15px;
- overflow: hidden;
- }
- }
- .account-authorize__avatar {
- float: left;
- margin-right: 10px;
- }
- .status__display-name,
- .status__relative-time,
- .detailed-status__display-name,
- .detailed-status__datetime,
- .detailed-status__application,
- .account__display-name {
- text-decoration: none;
- }
- .status__display-name,
- .account__display-name {
- strong {
- color: $primary-text-color;
- }
- }
- .muted {
- .emojione {
- opacity: 0.5;
- }
- }
- .status__display-name,
- .reply-indicator__display-name,
- .detailed-status__display-name,
- a.account__display-name {
- &:hover strong {
- text-decoration: underline;
- }
- }
- .account__display-name strong {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .detailed-status__application,
- .detailed-status__datetime {
- color: inherit;
- }
- .detailed-status .button.logo-button {
- margin-bottom: 15px;
- }
- .detailed-status__display-name {
- color: $darker-text-color;
- display: flex;
- align-items: center;
- gap: 10px;
- font-size: 15px;
- line-height: 22px;
- margin-bottom: 16px;
- overflow: hidden;
- strong,
- span {
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- strong {
- color: $primary-text-color;
- }
- }
- .status__avatar {
- width: 46px;
- height: 46px;
- }
- .muted {
- .status__content,
- .status__content p,
- .status__content a {
- color: $dark-text-color;
- }
- .status__display-name strong {
- color: $dark-text-color;
- }
- .status__avatar {
- opacity: 0.5;
- }
- a.status__content__spoiler-link {
- background: $ui-base-lighter-color;
- color: $inverted-text-color;
- &:hover,
- &:focus {
- background: lighten($ui-base-lighter-color, 7%);
- text-decoration: none;
- }
- }
- }
- .notification__report {
- padding: 16px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- gap: 10px;
- &__avatar {
- flex: 0 0 auto;
- }
- &__details {
- flex: 1 1 auto;
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: $darker-text-color;
- gap: 10px;
- font-size: 15px;
- line-height: 22px;
- white-space: nowrap;
- overflow: hidden;
- & > div {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- strong {
- font-weight: 500;
- }
- }
- &__actions {
- flex: 0 0 auto;
- }
- }
- .notification__message {
- padding: 16px;
- padding-bottom: 0;
- cursor: default;
- color: $darker-text-color;
- font-size: 15px;
- line-height: 22px;
- font-weight: 500;
- display: flex;
- gap: 10px;
- .fa {
- color: $highlight-text-color;
- }
- > span {
- display: inline;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .notification__favourite-icon-wrapper {
- .star-icon {
- color: $gold-star;
- }
- }
- .icon-button.star-icon.active {
- color: $gold-star;
- }
- .icon-button.bookmark-icon.active {
- color: $red-bookmark;
- }
- .no-reduce-motion .icon-button.star-icon {
- &.activate {
- & > .fa-star {
- animation: spring-rotate-in 1s linear;
- }
- }
- &.deactivate {
- & > .fa-star {
- animation: spring-rotate-out 1s linear;
- }
- }
- }
- .notification__display-name {
- color: inherit;
- font-weight: 500;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- }
- .display-name {
- display: block;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .display-name__html {
- font-weight: 500;
- }
- .status__relative-time,
- .detailed-status__datetime {
- &:hover {
- text-decoration: underline;
- }
- }
- .image-loader {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE 10+ */
- * {
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE 10+ */
- }
- &::-webkit-scrollbar,
- *::-webkit-scrollbar {
- width: 0;
- height: 0;
- background: transparent; /* Chrome/Safari/Webkit */
- }
- .image-loader__preview-canvas {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
- background: url('../images/void.png') repeat;
- object-fit: contain;
- }
- .loading-bar__container {
- position: relative;
- }
- .loading-bar {
- position: absolute;
- }
- &.image-loader--amorphous .image-loader__preview-canvas {
- display: none;
- }
- }
- .zoomable-image {
- position: relative;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- img {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
- width: auto;
- height: auto;
- object-fit: contain;
- }
- }
- .navigation-bar {
- padding: 15px;
- display: flex;
- align-items: center;
- flex-shrink: 0;
- cursor: default;
- gap: 10px;
- color: $darker-text-color;
- strong {
- color: $secondary-text-color;
- }
- a {
- color: inherit;
- text-decoration: none;
- }
- .navigation-bar__actions {
- position: relative;
- .icon-button.close {
- position: absolute;
- pointer-events: none;
- transform: scale(0, 1) translate(-100%, 0);
- opacity: 0;
- }
- .compose__action-bar .icon-button {
- pointer-events: auto;
- transform: scale(1, 1) translate(0, 0);
- opacity: 1;
- }
- }
- }
- .navigation-bar__profile {
- flex: 1 1 auto;
- line-height: 20px;
- overflow: hidden;
- }
- .navigation-bar__profile-account {
- display: block;
- font-weight: 500;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .navigation-bar__profile-edit {
- color: inherit;
- text-decoration: none;
- }
- .dropdown {
- display: inline-block;
- }
- .dropdown__content {
- display: none;
- position: absolute;
- }
- .dropdown-menu__separator {
- border-bottom: 1px solid darken($ui-secondary-color, 8%);
- margin: 5px 7px 6px;
- height: 0;
- }
- .dropdown-menu {
- background: $ui-secondary-color;
- padding: 4px 0;
- border-radius: 4px;
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- z-index: 9999;
- &__text-button {
- display: inline;
- color: inherit;
- background: transparent;
- border: 0;
- margin: 0;
- padding: 0;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- &:focus {
- outline: 1px dotted;
- }
- }
- &__container {
- &__header {
- border-bottom: 1px solid darken($ui-secondary-color, 8%);
- padding: 4px 14px;
- padding-bottom: 8px;
- font-size: 13px;
- line-height: 18px;
- color: $inverted-text-color;
- }
- &__list {
- list-style: none;
- &--scrollable {
- max-height: 300px;
- overflow-y: scroll;
- }
- }
- &--loading {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 30px 45px;
- }
- }
- &.left {
- transform-origin: 100% 50%;
- }
- &.top {
- transform-origin: 50% 100%;
- }
- &.bottom {
- transform-origin: 50% 0;
- }
- &.right {
- transform-origin: 0 50%;
- }
- }
- .dropdown-menu__arrow {
- position: absolute;
- width: 0;
- height: 0;
- border: 0 solid transparent;
- &.left {
- right: -5px;
- margin-top: -5px;
- border-width: 5px 0 5px 5px;
- border-left-color: $ui-secondary-color;
- }
- &.top {
- bottom: -5px;
- margin-left: -7px;
- border-width: 5px 7px 0;
- border-top-color: $ui-secondary-color;
- }
- &.bottom {
- top: -5px;
- margin-left: -7px;
- border-width: 0 7px 5px;
- border-bottom-color: $ui-secondary-color;
- }
- &.right {
- left: -5px;
- margin-top: -5px;
- border-width: 5px 5px 5px 0;
- border-right-color: $ui-secondary-color;
- }
- }
- .dropdown-menu__item {
- font-size: 13px;
- line-height: 18px;
- display: block;
- color: $inverted-text-color;
- a,
- button {
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- display: block;
- width: 100%;
- padding: 4px 14px;
- border: 0;
- margin: 0;
- box-sizing: border-box;
- text-decoration: none;
- background: $ui-secondary-color;
- color: inherit;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: inherit;
- &:focus,
- &:hover,
- &:active {
- background: $ui-highlight-color;
- color: $secondary-text-color;
- outline: 0;
- }
- }
- }
- .dropdown-menu__item--text {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- padding: 4px 14px;
- }
- .dropdown-menu__item.edited-timestamp__history__item {
- border-bottom: 1px solid darken($ui-secondary-color, 8%);
- &:last-child {
- border-bottom: 0;
- }
- &.dropdown-menu__item--text,
- a,
- button {
- padding: 8px 14px;
- }
- }
- .inline-account {
- display: inline-flex;
- align-items: center;
- vertical-align: top;
- .account__avatar {
- margin-right: 5px;
- border-radius: 50%;
- }
- strong {
- font-weight: 600;
- }
- }
- .dropdown--active .dropdown__content {
- display: block;
- line-height: 18px;
- max-width: 311px;
- right: 0;
- text-align: left;
- z-index: 9999;
- & > ul {
- list-style: none;
- background: $ui-secondary-color;
- padding: 4px 0;
- border-radius: 4px;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
- min-width: 140px;
- position: relative;
- }
- &.dropdown__right {
- right: 0;
- }
- &.dropdown__left {
- & > ul {
- left: -98px;
- }
- }
- & > ul > li > a {
- font-size: 13px;
- line-height: 18px;
- display: block;
- padding: 4px 14px;
- box-sizing: border-box;
- text-decoration: none;
- background: $ui-secondary-color;
- color: $inverted-text-color;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- &:focus {
- outline: 0;
- }
- &:hover {
- background: $ui-highlight-color;
- color: $secondary-text-color;
- }
- }
- }
- .dropdown__icon {
- vertical-align: middle;
- }
- .columns-area {
- display: flex;
- flex: 1 1 auto;
- flex-direction: row;
- justify-content: flex-start;
- overflow-x: auto;
- position: relative;
- &.unscrollable {
- overflow-x: hidden;
- }
- &__panels {
- display: flex;
- justify-content: center;
- width: 100%;
- height: 100%;
- min-height: 100vh;
- &__pane {
- height: 100%;
- overflow: hidden;
- pointer-events: none;
- display: flex;
- justify-content: flex-end;
- min-width: 285px;
- &--start {
- justify-content: flex-start;
- }
- &__inner {
- position: fixed;
- width: 285px;
- pointer-events: auto;
- height: 100%;
- }
- }
- &__main {
- box-sizing: border-box;
- width: 100%;
- flex: 0 0 auto;
- display: flex;
- flex-direction: column;
- @media screen and (min-width: $no-gap-breakpoint) {
- padding: 0 10px;
- max-width: 600px;
- }
- }
- }
- }
- $ui-header-height: 55px;
- .ui__header {
- display: none;
- box-sizing: border-box;
- height: $ui-header-height;
- position: sticky;
- top: 0;
- z-index: 2;
- justify-content: space-between;
- align-items: center;
- &__logo {
- display: inline-flex;
- padding: 15px;
- .logo {
- height: $ui-header-height - 30px;
- width: auto;
- }
- }
- &__links {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 0 10px;
- .button {
- flex: 0 0 auto;
- }
- }
- }
- .tabs-bar__wrapper {
- background: darken($ui-base-color, 8%);
- position: sticky;
- top: $ui-header-height;
- z-index: 2;
- padding-top: 0;
- @media screen and (min-width: $no-gap-breakpoint) {
- padding-top: 10px;
- top: 0;
- }
- .tabs-bar {
- margin-bottom: 0;
- @media screen and (min-width: $no-gap-breakpoint) {
- margin-bottom: 10px;
- }
- }
- }
- .react-swipeable-view-container {
- &,
- .columns-area,
- .drawer,
- .column {
- height: 100%;
- }
- }
- .react-swipeable-view-container > * {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- }
- .column {
- width: 350px;
- position: relative;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- > .scrollable {
- background: $ui-base-color;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
- }
- .ui {
- flex: 0 0 auto;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- }
- .drawer {
- width: 300px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- overflow-y: hidden;
- }
- .drawer__tab {
- display: block;
- flex: 1 1 auto;
- padding: 15px 5px 13px;
- color: $darker-text-color;
- text-decoration: none;
- text-align: center;
- font-size: 16px;
- border-bottom: 2px solid transparent;
- }
- .column,
- .drawer {
- flex: 1 1 100%;
- overflow: hidden;
- }
- @media screen and (min-width: 631px) {
- .columns-area {
- padding: 0;
- }
- .column,
- .drawer {
- flex: 0 0 auto;
- padding: 10px;
- padding-left: 5px;
- padding-right: 5px;
- &:first-child {
- padding-left: 10px;
- }
- &:last-child {
- padding-right: 10px;
- }
- }
- .columns-area > div {
- .column,
- .drawer {
- padding-left: 5px;
- padding-right: 5px;
- }
- }
- }
- .tabs-bar {
- box-sizing: border-box;
- display: flex;
- background: lighten($ui-base-color, 8%);
- flex: 0 0 auto;
- overflow-y: auto;
- }
- .tabs-bar__link {
- display: block;
- flex: 1 1 auto;
- padding: 15px 10px;
- padding-bottom: 13px;
- color: $primary-text-color;
- text-decoration: none;
- text-align: center;
- font-size: 14px;
- font-weight: 500;
- border-bottom: 2px solid lighten($ui-base-color, 8%);
- transition: all 50ms linear;
- transition-property: border-bottom, background, color;
- .fa {
- font-weight: 400;
- font-size: 16px;
- }
- &:hover,
- &:focus,
- &:active {
- @media screen and (min-width: 631px) {
- background: lighten($ui-base-color, 14%);
- border-bottom-color: lighten($ui-base-color, 14%);
- }
- }
- &.active {
- border-bottom: 2px solid $highlight-text-color;
- color: $highlight-text-color;
- }
- span {
- margin-left: 5px;
- display: none;
- }
- }
- @media screen and (min-width: 600px) {
- .tabs-bar__link {
- span {
- display: inline;
- }
- }
- }
- .columns-area--mobile {
- flex-direction: column;
- width: 100%;
- height: 100%;
- margin: 0 auto;
- .column,
- .drawer {
- width: 100%;
- height: 100%;
- padding: 0;
- }
- .account-card {
- margin-bottom: 0;
- }
- .filter-form {
- display: flex;
- }
- .autosuggest-textarea__textarea {
- font-size: 16px;
- }
- .search__input {
- line-height: 18px;
- font-size: 16px;
- padding: 15px;
- padding-right: 30px;
- }
- .search__icon .fa {
- top: 15px;
- }
- .scrollable {
- overflow: visible;
- @supports (display: grid) {
- contain: content;
- }
- }
- @media screen and (min-width: $no-gap-breakpoint) {
- padding: 10px 0;
- padding-top: 0;
- }
- }
- @media screen and (min-width: $no-gap-breakpoint) {
- .tabs-bar {
- width: 100%;
- }
- .react-swipeable-view-container .columns-area--mobile {
- height: calc(100% - 10px) !important;
- }
- .getting-started__wrapper,
- .search {
- margin-bottom: 10px;
- }
- .tabs-bar__link.optional {
- display: none;
- }
- .search-page .search {
- display: none;
- }
- .navigation-panel__legal {
- display: none;
- }
- }
- @media screen and (max-width: $no-gap-breakpoint - 1px) {
- $sidebar-width: 285px;
- .columns-area__panels__main {
- width: calc(100% - $sidebar-width);
- }
- .columns-area__panels {
- min-height: calc(100vh - $ui-header-height);
- }
- .columns-area__panels__pane--navigational {
- min-width: $sidebar-width;
- .columns-area__panels__pane__inner {
- width: $sidebar-width;
- }
- .navigation-panel {
- margin: 0;
- background: $ui-base-color;
- border-left: 1px solid lighten($ui-base-color, 8%);
- height: 100vh;
- }
- .navigation-panel__sign-in-banner,
- .navigation-panel__logo,
- .getting-started__trends {
- display: none;
- }
- .column-link__icon {
- font-size: 18px;
- }
- }
- .ui__header {
- display: flex;
- background: $ui-base-color;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
- .column-header,
- .column-back-button,
- .scrollable,
- .error-column {
- border-radius: 0 !important;
- }
- }
- @media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
- $sidebar-width: 55px;
- .columns-area__panels__main {
- width: calc(100% - $sidebar-width);
- }
- .columns-area__panels__pane--navigational {
- min-width: $sidebar-width;
- .columns-area__panels__pane__inner {
- width: $sidebar-width;
- }
- .column-link span {
- display: none;
- }
- .list-panel {
- display: none;
- }
- }
- }
- .explore__search-header {
- display: none;
- }
- @media screen and (max-width: $no-gap-breakpoint - 1px) {
- .columns-area__panels__pane--compositional {
- display: none;
- }
- .explore__search-header {
- display: flex;
- }
- }
- .icon-with-badge {
- position: relative;
- &__badge {
- position: absolute;
- left: 9px;
- top: -13px;
- background: $ui-highlight-color;
- border: 2px solid lighten($ui-base-color, 8%);
- padding: 1px 6px;
- border-radius: 6px;
- font-size: 10px;
- font-weight: 500;
- line-height: 14px;
- color: $primary-text-color;
- }
- &__issue-badge {
- position: absolute;
- left: 11px;
- bottom: 1px;
- display: block;
- background: $error-red;
- border-radius: 50%;
- width: 0.625rem;
- height: 0.625rem;
- }
- }
- .column-link--transparent .icon-with-badge__badge {
- border-color: darken($ui-base-color, 8%);
- }
- .column-title {
- text-align: center;
- padding: 40px;
- .logo {
- width: 50px;
- margin: 0 auto;
- margin-bottom: 40px;
- }
- h3 {
- font-size: 24px;
- line-height: 1.5;
- font-weight: 700;
- margin-bottom: 10px;
- }
- p {
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- color: $darker-text-color;
- }
- }
- .follow-recommendations-container {
- display: flex;
- flex-direction: column;
- }
- .column-actions {
- display: flex;
- align-items: flex-start;
- justify-content: center;
- padding: 40px;
- padding-top: 40px;
- padding-bottom: 200px;
- flex-grow: 1;
- position: relative;
- &__background {
- position: absolute;
- left: 0;
- bottom: 0;
- height: 220px;
- width: auto;
- }
- }
- .column-list {
- margin: 0 20px;
- border: 1px solid lighten($ui-base-color, 8%);
- background: darken($ui-base-color, 2%);
- border-radius: 4px;
- &__empty-message {
- padding: 40px;
- text-align: center;
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- color: $darker-text-color;
- }
- }
- .compose-panel {
- width: 285px;
- margin-top: 10px;
- display: flex;
- flex-direction: column;
- height: calc(100% - 10px);
- overflow-y: hidden;
- .hero-widget {
- box-shadow: none;
- &__text,
- &__img,
- &__img img {
- border-radius: 0;
- }
- &__text {
- padding: 15px;
- color: $secondary-text-color;
- strong {
- font-weight: 700;
- color: $primary-text-color;
- }
- }
- }
- .navigation-bar {
- flex: 0 1 48px;
- }
- .compose-form {
- flex: 1;
- overflow-y: hidden;
- display: flex;
- flex-direction: column;
- min-height: 310px;
- padding-bottom: 71px;
- margin-bottom: -71px;
- }
- .compose-form__autosuggest-wrapper {
- overflow-y: auto;
- background-color: $white;
- border-radius: 4px 4px 0 0;
- flex: 0 1 auto;
- }
- .autosuggest-textarea__textarea {
- overflow-y: hidden;
- }
- .compose-form__upload-thumbnail {
- height: 80px;
- }
- }
- .navigation-panel {
- margin-top: 10px;
- margin-bottom: 10px;
- height: calc(100% - 20px);
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- & > a {
- flex: 0 0 auto;
- }
- .logo {
- height: 30px;
- width: auto;
- }
- }
- .navigation-panel,
- .compose-panel {
- hr {
- flex: 0 0 auto;
- border: 0;
- background: transparent;
- border-top: 1px solid lighten($ui-base-color, 4%);
- margin: 10px 0;
- }
- .flex-spacer {
- background: transparent;
- }
- }
- .drawer__pager {
- box-sizing: border-box;
- padding: 0;
- flex-grow: 1;
- position: relative;
- overflow: hidden;
- display: flex;
- }
- .drawer__inner {
- position: absolute;
- top: 0;
- left: 0;
- background: lighten($ui-base-color, 13%);
- box-sizing: border-box;
- padding: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- overflow-y: auto;
- width: 100%;
- height: 100%;
- &.darker {
- background: $ui-base-color;
- }
- }
- .drawer__inner__mastodon {
- background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
- flex: 1;
- min-height: 47px;
- display: none;
- > img {
- display: block;
- object-fit: contain;
- object-position: bottom left;
- width: 85%;
- height: 100%;
- pointer-events: none;
- user-drag: none;
- user-select: none;
- }
- @media screen and (min-height: 640px) {
- display: block;
- }
- }
- .pseudo-drawer {
- background: lighten($ui-base-color, 13%);
- font-size: 13px;
- text-align: left;
- }
- .drawer__header {
- flex: 0 0 auto;
- font-size: 16px;
- background: lighten($ui-base-color, 8%);
- margin-bottom: 10px;
- display: flex;
- flex-direction: row;
- a {
- transition: background 100ms ease-in;
- &:hover {
- background: lighten($ui-base-color, 3%);
- transition: background 200ms ease-out;
- }
- }
- }
- .scrollable {
- overflow-y: scroll;
- overflow-x: hidden;
- flex: 1 1 auto;
- -webkit-overflow-scrolling: touch;
- &.optionally-scrollable {
- overflow-y: auto;
- }
- @supports (display: grid) { // hack to fix Chrome <57
- contain: strict;
- }
- &--flex {
- display: flex;
- flex-direction: column;
- }
- &__append {
- flex: 1 1 auto;
- position: relative;
- min-height: 120px;
- }
- .scrollable {
- flex: 1 1 auto;
- }
- }
- .scrollable.fullscreen {
- @supports (display: grid) { // hack to fix Chrome <57
- contain: none;
- }
- }
- .column-back-button {
- box-sizing: border-box;
- width: 100%;
- background: lighten($ui-base-color, 4%);
- border-radius: 4px 4px 0 0;
- color: $highlight-text-color;
- cursor: pointer;
- flex: 0 0 auto;
- font-size: 16px;
- line-height: inherit;
- border: 0;
- text-align: unset;
- padding: 15px;
- margin: 0;
- z-index: 3;
- outline: 0;
- &:hover {
- text-decoration: underline;
- }
- }
- .column-header__back-button {
- background: lighten($ui-base-color, 4%);
- border: 0;
- font-family: inherit;
- color: $highlight-text-color;
- cursor: pointer;
- white-space: nowrap;
- font-size: 16px;
- padding: 0 5px 0 0;
- z-index: 3;
- &:hover {
- text-decoration: underline;
- }
- &:last-child {
- padding: 0 15px 0 0;
- }
- }
- .column-back-button__icon {
- display: inline-block;
- margin-right: 5px;
- }
- .column-back-button--slim {
- position: relative;
- }
- .column-back-button--slim-button {
- cursor: pointer;
- flex: 0 0 auto;
- font-size: 16px;
- padding: 15px;
- position: absolute;
- right: 0;
- top: -48px;
- }
- .react-toggle {
- display: inline-block;
- position: relative;
- cursor: pointer;
- background-color: transparent;
- border: 0;
- padding: 0;
- user-select: none;
- -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
- -webkit-tap-highlight-color: transparent;
- }
- .react-toggle-screenreader-only {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- }
- .react-toggle--disabled {
- cursor: not-allowed;
- opacity: 0.5;
- transition: opacity 0.25s;
- }
- .react-toggle-track {
- width: 50px;
- height: 24px;
- padding: 0;
- border-radius: 30px;
- background-color: $ui-base-color;
- transition: background-color 0.2s ease;
- }
- .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
- background-color: darken($ui-base-color, 10%);
- }
- .react-toggle--checked .react-toggle-track {
- background-color: darken($ui-highlight-color, 2%);
- }
- .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
- background-color: $ui-highlight-color;
- }
- .react-toggle-track-check {
- position: absolute;
- width: 14px;
- height: 10px;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- left: 8px;
- opacity: 0;
- transition: opacity 0.25s ease;
- }
- .react-toggle--checked .react-toggle-track-check {
- opacity: 1;
- transition: opacity 0.25s ease;
- }
- .react-toggle-track-x {
- position: absolute;
- width: 10px;
- height: 10px;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- right: 10px;
- opacity: 1;
- transition: opacity 0.25s ease;
- }
- .react-toggle--checked .react-toggle-track-x {
- opacity: 0;
- }
- .react-toggle-thumb {
- position: absolute;
- top: 1px;
- left: 1px;
- width: 22px;
- height: 22px;
- border: 1px solid $ui-base-color;
- border-radius: 50%;
- background-color: darken($simple-background-color, 2%);
- box-sizing: border-box;
- transition: all 0.25s ease;
- transition-property: border-color, left;
- }
- .react-toggle--checked .react-toggle-thumb {
- left: 27px;
- border-color: $ui-highlight-color;
- }
- .column-link {
- background: lighten($ui-base-color, 8%);
- color: $primary-text-color;
- display: block;
- font-size: 16px;
- padding: 15px;
- text-decoration: none;
- overflow: hidden;
- white-space: nowrap;
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 11%);
- }
- &:focus {
- outline: 0;
- }
- &--transparent {
- background: transparent;
- color: $ui-secondary-color;
- &:hover,
- &:focus,
- &:active {
- background: transparent;
- color: $primary-text-color;
- }
- &.active {
- color: $highlight-text-color;
- }
- }
- &--logo {
- background: transparent;
- padding: 10px;
- &:hover,
- &:focus,
- &:active {
- background: transparent;
- }
- }
- }
- .column-link__icon {
- display: inline-block;
- margin-right: 5px;
- }
- .column-link__badge {
- display: inline-block;
- border-radius: 4px;
- font-size: 12px;
- line-height: 19px;
- font-weight: 500;
- background: $ui-base-color;
- padding: 4px 8px;
- margin: -6px 10px;
- }
- .column-subheading {
- background: $ui-base-color;
- color: $dark-text-color;
- padding: 8px 20px;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- cursor: default;
- }
- .getting-started__wrapper,
- .getting-started,
- .flex-spacer {
- background: $ui-base-color;
- }
- .getting-started__wrapper {
- flex: 0 0 auto;
- }
- .flex-spacer {
- flex: 1 1 auto;
- }
- .getting-started {
- color: $dark-text-color;
- overflow: auto;
- &__trends {
- flex: 0 1 auto;
- opacity: 1;
- animation: fade 150ms linear;
- margin-top: 10px;
- h4 {
- font-size: 12px;
- text-transform: uppercase;
- color: $darker-text-color;
- padding: 10px;
- font-weight: 500;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
- @media screen and (max-height: 810px) {
- .trends__item:nth-of-type(3) {
- display: none;
- }
- }
- @media screen and (max-height: 720px) {
- .trends__item:nth-of-type(2) {
- display: none;
- }
- }
- @media screen and (max-height: 670px) {
- display: none;
- }
- .trends__item {
- border-bottom: 0;
- padding: 10px;
- &__current {
- color: $darker-text-color;
- }
- }
- }
- }
- .keyboard-shortcuts {
- padding: 8px 0 0;
- overflow: hidden;
- thead {
- position: absolute;
- left: -9999px;
- }
- td {
- padding: 0 10px 8px;
- }
- kbd {
- display: inline-block;
- padding: 3px 5px;
- background-color: lighten($ui-base-color, 8%);
- border: 1px solid darken($ui-base-color, 4%);
- }
- }
- .setting-text {
- display: block;
- box-sizing: border-box;
- margin: 0;
- color: $inverted-text-color;
- background: $white;
- padding: 7px 10px;
- font-family: inherit;
- font-size: 14px;
- line-height: 22px;
- border-radius: 4px;
- border: 1px solid $white;
- &:focus {
- outline: 0;
- border-color: lighten($ui-highlight-color, 12%);
- }
- &__wrapper {
- background: $white;
- border: 1px solid $ui-secondary-color;
- margin-bottom: 10px;
- border-radius: 4px;
- .setting-text {
- border: 0;
- margin-bottom: 0;
- border-radius: 0;
- &:focus {
- border: 0;
- }
- }
- &__modifiers {
- color: $inverted-text-color;
- font-family: inherit;
- font-size: 14px;
- background: $white;
- }
- }
- &__toolbar {
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
- }
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
- }
- button.icon-button i.fa-retweet {
- background-position: 0 0;
- height: 19px;
- transition: background-position 0.9s steps(10);
- transition-duration: 0s;
- vertical-align: middle;
- width: 22px;
- &::before {
- display: none !important;
- }
- }
- button.icon-button.active i.fa-retweet {
- transition-duration: 0.9s;
- background-position: 0 100%;
- }
- .reduce-motion button.icon-button i.fa-retweet,
- .reduce-motion button.icon-button.active i.fa-retweet {
- transition: none;
- }
- .status-card {
- position: relative;
- display: flex;
- font-size: 14px;
- border: 1px solid lighten($ui-base-color, 8%);
- border-radius: 4px;
- color: $dark-text-color;
- margin-top: 14px;
- text-decoration: none;
- overflow: hidden;
- &__actions {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- & > div {
- background: rgba($base-shadow-color, 0.6);
- border-radius: 8px;
- padding: 12px 9px;
- flex: 0 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- button,
- a {
- display: inline;
- color: $secondary-text-color;
- background: transparent;
- border: 0;
- padding: 0 8px;
- text-decoration: none;
- font-size: 18px;
- line-height: 18px;
- &:hover,
- &:active,
- &:focus {
- color: $primary-text-color;
- }
- }
- a {
- font-size: 19px;
- position: relative;
- bottom: -1px;
- }
- }
- }
- a.status-card {
- cursor: pointer;
- &:hover {
- background: lighten($ui-base-color, 8%);
- }
- }
- .status-card-photo {
- cursor: zoom-in;
- display: block;
- text-decoration: none;
- width: 100%;
- height: auto;
- margin: 0;
- }
- .status-card-video {
- iframe {
- width: 100%;
- height: 100%;
- }
- }
- .status-card__title {
- display: block;
- font-weight: 500;
- margin-bottom: 5px;
- color: $darker-text-color;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-decoration: none;
- }
- .status-card__content {
- flex: 1 1 auto;
- overflow: hidden;
- padding: 14px 14px 14px 8px;
- }
- .status-card__description {
- color: $darker-text-color;
- }
- .status-card__host {
- display: block;
- margin-top: 5px;
- font-size: 13px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .status-card__image {
- flex: 0 0 100px;
- background: lighten($ui-base-color, 8%);
- position: relative;
- & > .fa {
- font-size: 21px;
- position: absolute;
- transform-origin: 50% 50%;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- .status-card.horizontal {
- display: block;
- .status-card__image {
- width: 100%;
- }
- .status-card__image-image,
- .status-card__image-preview {
- border-radius: 4px 4px 0 0;
- }
- .status-card__title {
- white-space: inherit;
- }
- }
- .status-card.compact {
- border-color: lighten($ui-base-color, 4%);
- &.interactive {
- border: 0;
- }
- .status-card__content {
- padding: 8px;
- padding-top: 10px;
- }
- .status-card__title {
- white-space: nowrap;
- }
- .status-card__image {
- flex: 0 0 60px;
- }
- }
- a.status-card.compact:hover {
- background-color: lighten($ui-base-color, 4%);
- }
- .status-card__image-image {
- border-radius: 4px 0 0 4px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- background-size: cover;
- background-position: center center;
- }
- .status-card__image-preview {
- border-radius: 4px 0 0 4px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: fill;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 0;
- background: $base-overlay-background;
- &--hidden {
- display: none;
- }
- }
- .load-more {
- display: block;
- color: $dark-text-color;
- background-color: transparent;
- border: 0;
- font-size: inherit;
- text-align: center;
- line-height: inherit;
- margin: 0;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- clear: both;
- text-decoration: none;
- &:hover {
- background: lighten($ui-base-color, 2%);
- }
- }
- .load-gap {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
- .timeline-hint {
- text-align: center;
- color: $darker-text-color;
- padding: 15px;
- box-sizing: border-box;
- width: 100%;
- cursor: default;
- strong {
- font-weight: 500;
- }
- a {
- color: $highlight-text-color;
- text-decoration: none;
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- color: lighten($highlight-text-color, 4%);
- }
- }
- }
- .regeneration-indicator {
- text-align: center;
- font-size: 16px;
- font-weight: 500;
- color: $dark-text-color;
- background: $ui-base-color;
- cursor: default;
- display: flex;
- flex: 1 1 auto;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 20px;
- &__figure {
- &,
- img {
- display: block;
- width: auto;
- height: 160px;
- margin: 0;
- }
- }
- &--without-header {
- padding-top: 20px + 48px;
- }
- &__label {
- margin-top: 30px;
- strong {
- display: block;
- margin-bottom: 10px;
- color: $dark-text-color;
- }
- span {
- font-size: 15px;
- font-weight: 400;
- }
- }
- }
- .column-header__wrapper {
- position: relative;
- flex: 0 0 auto;
- z-index: 1;
- &.active {
- box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
- &::before {
- display: block;
- content: "";
- position: absolute;
- bottom: -13px;
- left: 0;
- right: 0;
- margin: 0 auto;
- width: 60%;
- pointer-events: none;
- height: 28px;
- z-index: 1;
- background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
- }
- }
- .announcements {
- z-index: 1;
- position: relative;
- }
- }
- .column-header {
- display: flex;
- font-size: 16px;
- background: lighten($ui-base-color, 4%);
- border-radius: 4px 4px 0 0;
- flex: 0 0 auto;
- cursor: pointer;
- position: relative;
- z-index: 2;
- outline: 0;
- overflow: hidden;
- & > button {
- margin: 0;
- border: 0;
- padding: 15px 0 15px 15px;
- color: inherit;
- background: transparent;
- font: inherit;
- text-align: left;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: 1;
- }
- & > .column-header__back-button {
- color: $highlight-text-color;
- }
- &.active {
- .column-header__icon {
- color: $highlight-text-color;
- text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
- }
- }
- &:focus,
- &:active {
- outline: 0;
- }
- }
- .column-header__buttons {
- height: 48px;
- display: flex;
- }
- .column-header__links {
- margin-bottom: 14px;
- }
- .column-header__links .text-btn {
- margin-right: 10px;
- }
- .column-header__button {
- background: lighten($ui-base-color, 4%);
- border: 0;
- color: $darker-text-color;
- cursor: pointer;
- font-size: 16px;
- padding: 0 15px;
- &:hover {
- color: lighten($darker-text-color, 7%);
- }
- &.active {
- color: $primary-text-color;
- background: lighten($ui-base-color, 8%);
- &:hover {
- color: $primary-text-color;
- background: lighten($ui-base-color, 8%);
- }
- }
- &:disabled {
- color: $dark-text-color;
- cursor: default;
- }
- }
- .column-header__collapsible {
- max-height: 70vh;
- overflow: hidden;
- overflow-y: auto;
- color: $darker-text-color;
- transition: max-height 150ms ease-in-out, opacity 300ms linear;
- opacity: 1;
- z-index: 1;
- position: relative;
- &.collapsed {
- max-height: 0;
- opacity: 0.5;
- }
- &.animating {
- overflow-y: hidden;
- }
- hr {
- height: 0;
- background: transparent;
- border: 0;
- border-top: 1px solid lighten($ui-base-color, 12%);
- margin: 10px 0;
- }
- }
- .column-header__collapsible-inner {
- background: lighten($ui-base-color, 8%);
- padding: 15px;
- }
- .column-header__setting-btn {
- &:hover,
- &:focus {
- color: $darker-text-color;
- text-decoration: underline;
- }
- }
- .column-header__collapsible__extra + .column-header__setting-btn {
- padding-top: 5px;
- }
- .column-header__permission-btn {
- display: inline;
- font-weight: inherit;
- text-decoration: underline;
- }
- .column-header__setting-arrows {
- float: right;
- .column-header__setting-btn {
- padding: 5px;
- &:first-child {
- padding-right: 7px;
- }
- &:last-child {
- padding-left: 7px;
- margin-left: 5px;
- }
- }
- }
- .text-btn {
- display: inline-block;
- padding: 0;
- font-family: inherit;
- font-size: inherit;
- color: inherit;
- border: 0;
- background: transparent;
- cursor: pointer;
- }
- .column-header__issue-btn {
- color: $warning-red;
- &:hover {
- color: $error-red;
- text-decoration: underline;
- }
- }
- .column-header__icon {
- display: inline-block;
- margin-right: 5px;
- }
- .loading-indicator {
- color: $dark-text-color;
- font-size: 12px;
- font-weight: 400;
- text-transform: uppercase;
- overflow: visible;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .circular-progress {
- color: lighten($ui-base-color, 26%);
- animation: 1.4s linear 0s infinite normal none running simple-rotate;
- circle {
- stroke: currentColor;
- stroke-dasharray: 80px, 200px;
- stroke-dashoffset: 0;
- animation: circular-progress 1.4s ease-in-out infinite;
- }
- }
- @keyframes circular-progress {
- 0% {
- stroke-dasharray: 1px, 200px;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 100px, 200px;
- stroke-dashoffset: -15px;
- }
- 100% {
- stroke-dasharray: 100px, 200px;
- stroke-dashoffset: -125px;
- }
- }
- @keyframes simple-rotate {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- @keyframes spring-rotate-in {
- 0% {
- transform: rotate(0deg);
- }
- 30% {
- transform: rotate(-484.8deg);
- }
- 60% {
- transform: rotate(-316.7deg);
- }
- 90% {
- transform: rotate(-375deg);
- }
- 100% {
- transform: rotate(-360deg);
- }
- }
- @keyframes spring-rotate-out {
- 0% {
- transform: rotate(-360deg);
- }
- 30% {
- transform: rotate(124.8deg);
- }
- 60% {
- transform: rotate(-43.27deg);
- }
- 90% {
- transform: rotate(15deg);
- }
- 100% {
- transform: rotate(0deg);
- }
- }
- .video-error-cover {
- align-items: center;
- background: $base-overlay-background;
- color: $primary-text-color;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- margin-top: 8px;
- position: relative;
- text-align: center;
- z-index: 100;
- }
- .media-spoiler {
- background: $base-overlay-background;
- color: $darker-text-color;
- border: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- border-radius: 4px;
- appearance: none;
- &:hover,
- &:active,
- &:focus {
- padding: 0;
- color: lighten($darker-text-color, 8%);
- }
- }
- .media-spoiler__warning {
- display: block;
- font-size: 14px;
- }
- .media-spoiler__trigger {
- display: block;
- font-size: 11px;
- font-weight: 700;
- }
- .spoiler-button {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 100;
- &--minified {
- display: block;
- left: 4px;
- top: 4px;
- width: auto;
- height: auto;
- }
- &--click-thru {
- pointer-events: none;
- }
- &--hidden {
- display: none;
- }
- &__overlay {
- display: block;
- background: transparent;
- width: 100%;
- height: 100%;
- border: 0;
- &__label {
- display: inline-block;
- background: rgba($base-overlay-background, 0.5);
- border-radius: 8px;
- padding: 8px 12px;
- color: $primary-text-color;
- font-weight: 500;
- font-size: 14px;
- }
- &:hover,
- &:focus,
- &:active {
- .spoiler-button__overlay__label {
- background: rgba($base-overlay-background, 0.8);
- }
- }
- &:disabled {
- .spoiler-button__overlay__label {
- background: rgba($base-overlay-background, 0.5);
- }
- }
- }
- }
- .modal-container--preloader {
- background: lighten($ui-base-color, 8%);
- }
- .account--panel {
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: row;
- padding: 10px 0;
- }
- .account--panel__button,
- .detailed-status__button {
- flex: 1 1 auto;
- text-align: center;
- }
- .column-settings__outer {
- background: lighten($ui-base-color, 8%);
- padding: 15px;
- }
- .column-settings__section {
- color: $darker-text-color;
- cursor: default;
- display: block;
- font-weight: 500;
- margin-bottom: 10px;
- }
- .column-settings__row--with-margin {
- margin-bottom: 15px;
- }
- .column-settings__hashtags {
- .column-settings__row {
- margin-bottom: 15px;
- }
- .column-select {
- &__control {
- @include search-input;
- &::placeholder {
- color: lighten($darker-text-color, 4%);
- }
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
- }
- &__placeholder {
- color: $dark-text-color;
- padding-left: 2px;
- font-size: 12px;
- }
- &__value-container {
- padding-left: 6px;
- }
- &__multi-value {
- background: lighten($ui-base-color, 8%);
- &__remove {
- cursor: pointer;
- &:hover,
- &:active,
- &:focus {
- background: lighten($ui-base-color, 12%);
- color: lighten($darker-text-color, 4%);
- }
- }
- }
- &__multi-value__label,
- &__input,
- &__input-container {
- color: $darker-text-color;
- }
- &__clear-indicator,
- &__dropdown-indicator {
- cursor: pointer;
- transition: none;
- color: $dark-text-color;
- &:hover,
- &:active,
- &:focus {
- color: lighten($dark-text-color, 4%);
- }
- }
- &__indicator-separator {
- background-color: lighten($ui-base-color, 8%);
- }
- &__menu {
- @include search-popout;
- padding: 0;
- background: $ui-secondary-color;
- }
- &__menu-list {
- padding: 6px;
- }
- &__option {
- color: $inverted-text-color;
- border-radius: 4px;
- font-size: 14px;
- &--is-focused,
- &--is-selected {
- background: darken($ui-secondary-color, 10%);
- }
- }
- }
- }
- .column-settings__row {
- .text-btn:not(.column-header__permission-btn) {
- margin-bottom: 15px;
- }
- }
- .relationship-tag {
- color: $primary-text-color;
- margin-bottom: 4px;
- display: block;
- background-color: $base-overlay-background;
- text-transform: uppercase;
- font-size: 11px;
- font-weight: 500;
- padding: 4px;
- border-radius: 4px;
- opacity: 0.7;
- &:hover {
- opacity: 1;
- }
- }
- .setting-toggle {
- display: block;
- line-height: 24px;
- }
- .setting-toggle__label {
- color: $darker-text-color;
- display: inline-block;
- margin-bottom: 14px;
- margin-left: 8px;
- vertical-align: middle;
- }
- .limited-account-hint {
- p {
- color: $secondary-text-color;
- font-size: 15px;
- font-weight: 500;
- margin-bottom: 20px;
- }
- }
- .empty-column-indicator,
- .follow_requests-unlocked_explanation {
- color: $dark-text-color;
- background: $ui-base-color;
- text-align: center;
- padding: 20px;
- font-size: 15px;
- font-weight: 400;
- cursor: default;
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- justify-content: center;
- @supports (display: grid) { // hack to fix Chrome <57
- contain: strict;
- }
- & > span {
- max-width: 500px;
- }
- a {
- color: $highlight-text-color;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- .follow_requests-unlocked_explanation {
- background: darken($ui-base-color, 4%);
- contain: initial;
- }
- .error-column {
- padding: 20px;
- background: $ui-base-color;
- border-radius: 4px;
- display: flex;
- flex: 1 1 auto;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- cursor: default;
- &__image {
- width: 70%;
- max-width: 350px;
- margin-top: -50px;
- }
- &__message {
- text-align: center;
- color: $darker-text-color;
- font-size: 15px;
- line-height: 22px;
- h1 {
- font-size: 28px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
- color: $primary-text-color;
- }
- p {
- max-width: 48ch;
- }
- &__actions {
- margin-top: 30px;
- display: flex;
- gap: 10px;
- align-items: center;
- justify-content: center;
- }
- }
- }
- @keyframes heartbeat {
- from {
- transform: scale(1);
- animation-timing-function: ease-out;
- }
- 10% {
- transform: scale(0.91);
- animation-timing-function: ease-in;
- }
- 17% {
- transform: scale(0.98);
- animation-timing-function: ease-out;
- }
- 33% {
- transform: scale(0.87);
- animation-timing-function: ease-in;
- }
- 45% {
- transform: scale(1);
- animation-timing-function: ease-out;
- }
- }
- .no-reduce-motion .pulse-loading {
- transform-origin: center center;
- animation: heartbeat 1.5s ease-in-out infinite both;
- }
- @keyframes shake-bottom {
- 0%,
- 100% {
- transform: rotate(0deg);
- transform-origin: 50% 100%;
- }
- 10% {
- transform: rotate(2deg);
- }
- 20%,
- 40%,
- 60% {
- transform: rotate(-4deg);
- }
- 30%,
- 50%,
- 70% {
- transform: rotate(4deg);
- }
- 80% {
- transform: rotate(-2deg);
- }
- 90% {
- transform: rotate(2deg);
- }
- }
- .no-reduce-motion .shake-bottom {
- transform-origin: 50% 100%;
- animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
- }
- .emoji-picker-dropdown__menu {
- background: $simple-background-color;
- position: absolute;
- box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
- border-radius: 4px;
- margin-top: 5px;
- z-index: 2;
- .emoji-mart-scroll {
- transition: opacity 200ms ease;
- }
- &.selecting .emoji-mart-scroll {
- opacity: 0.5;
- }
- }
- .emoji-picker-dropdown__modifiers {
- position: absolute;
- top: 60px;
- right: 11px;
- cursor: pointer;
- }
- .emoji-picker-dropdown__modifiers__menu {
- position: absolute;
- z-index: 4;
- top: -4px;
- left: -8px;
- background: $simple-background-color;
- border-radius: 4px;
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- overflow: hidden;
- button {
- display: block;
- cursor: pointer;
- border: 0;
- padding: 4px 8px;
- background: transparent;
- &:hover,
- &:focus,
- &:active {
- background: rgba($ui-secondary-color, 0.4);
- }
- }
- .emoji-mart-emoji {
- height: 22px;
- }
- }
- .emoji-mart-emoji {
- span {
- background-repeat: no-repeat;
- }
- }
- .upload-area {
- align-items: center;
- background: rgba($base-overlay-background, 0.8);
- display: flex;
- height: 100%;
- justify-content: center;
- left: 0;
- opacity: 0;
- position: absolute;
- top: 0;
- visibility: hidden;
- width: 100%;
- z-index: 2000;
- * {
- pointer-events: none;
- }
- }
- .upload-area__drop {
- width: 320px;
- height: 160px;
- display: flex;
- box-sizing: border-box;
- position: relative;
- padding: 8px;
- }
- .upload-area__background {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: -1;
- border-radius: 4px;
- background: $ui-base-color;
- box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
- }
- .upload-area__content {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- color: $secondary-text-color;
- font-size: 18px;
- font-weight: 500;
- border: 2px dashed $ui-base-lighter-color;
- border-radius: 4px;
- }
- .upload-progress {
- padding: 10px;
- color: $lighter-text-color;
- overflow: hidden;
- display: flex;
- .fa {
- font-size: 34px;
- margin-right: 10px;
- }
- span {
- font-size: 12px;
- text-transform: uppercase;
- font-weight: 500;
- display: block;
- }
- }
- .upload-progress__message {
- flex: 1 1 auto;
- }
- .upload-progress__backdrop {
- width: 100%;
- height: 6px;
- border-radius: 6px;
- background: $ui-base-lighter-color;
- position: relative;
- margin-top: 5px;
- }
- .upload-progress__tracker {
- position: absolute;
- left: 0;
- top: 0;
- height: 6px;
- background: $ui-highlight-color;
- border-radius: 6px;
- }
- .emoji-button {
- display: block;
- padding: 5px 5px 2px 2px;
- outline: 0;
- cursor: pointer;
- &:active,
- &:focus {
- outline: 0 !important;
- }
- img {
- filter: grayscale(100%);
- opacity: 0.8;
- display: block;
- margin: 0;
- width: 22px;
- height: 22px;
- }
- &:hover,
- &:active,
- &:focus {
- img {
- opacity: 1;
- filter: none;
- }
- }
- }
- .dropdown--active .emoji-button img {
- opacity: 1;
- filter: none;
- }
- .privacy-dropdown__dropdown {
- position: absolute;
- background: $simple-background-color;
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- border-radius: 4px;
- overflow: hidden;
- z-index: 2;
- &.top {
- transform-origin: 50% 100%;
- }
- &.bottom {
- transform-origin: 50% 0;
- }
- }
- .modal-root__container .privacy-dropdown {
- flex-grow: 0;
- }
- .modal-root__container .privacy-dropdown__dropdown {
- pointer-events: auto;
- z-index: 9999;
- }
- .privacy-dropdown__option {
- color: $inverted-text-color;
- padding: 10px;
- cursor: pointer;
- display: flex;
- &:hover,
- &.active {
- background: $ui-highlight-color;
- color: $primary-text-color;
- outline: 0;
- .privacy-dropdown__option__content {
- color: $primary-text-color;
- strong {
- color: $primary-text-color;
- }
- }
- }
- &.active:hover {
- background: lighten($ui-highlight-color, 4%);
- }
- }
- .privacy-dropdown__option__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 10px;
- }
- .privacy-dropdown__option__content {
- flex: 1 1 auto;
- color: $lighter-text-color;
- strong {
- font-weight: 500;
- display: block;
- color: $inverted-text-color;
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- }
- .privacy-dropdown.active {
- .privacy-dropdown__value {
- background: $simple-background-color;
- border-radius: 4px 4px 0 0;
- box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
- .icon-button {
- transition: none;
- }
- &.active {
- background: $ui-highlight-color;
- .icon-button {
- color: $primary-text-color;
- }
- }
- }
- &.top .privacy-dropdown__value {
- border-radius: 0 0 4px 4px;
- }
- .privacy-dropdown__dropdown {
- display: block;
- box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
- }
- }
- .language-dropdown {
- &__dropdown {
- position: absolute;
- background: $simple-background-color;
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- border-radius: 4px;
- overflow: hidden;
- z-index: 2;
- &.top {
- transform-origin: 50% 100%;
- }
- &.bottom {
- transform-origin: 50% 0;
- }
- .emoji-mart-search {
- padding-right: 10px;
- }
- .emoji-mart-search-icon {
- right: 10px + 5px;
- }
- .emoji-mart-scroll {
- padding: 0 10px 10px;
- }
- &__results {
- &__item {
- cursor: pointer;
- color: $inverted-text-color;
- font-weight: 500;
- padding: 10px;
- border-radius: 4px;
- &:focus,
- &:active,
- &:hover {
- background: $ui-secondary-color;
- }
- &__common-name {
- color: $darker-text-color;
- }
- &.active {
- background: $ui-highlight-color;
- color: $primary-text-color;
- outline: 0;
- .language-dropdown__dropdown__results__item__common-name {
- color: $secondary-text-color;
- }
- &:hover {
- background: lighten($ui-highlight-color, 4%);
- }
- }
- }
- }
- }
- }
- .search {
- position: relative;
- }
- .search__input {
- @include search-input;
- display: block;
- padding: 15px;
- padding-right: 30px;
- line-height: 18px;
- font-size: 16px;
- &::placeholder {
- color: lighten($darker-text-color, 4%);
- }
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
- }
- .search__icon {
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus {
- outline: 0 !important;
- }
- .fa {
- position: absolute;
- top: 16px;
- right: 10px;
- z-index: 2;
- display: inline-block;
- opacity: 0;
- transition: all 100ms linear;
- transition-property: transform, opacity;
- font-size: 18px;
- width: 18px;
- height: 18px;
- color: $secondary-text-color;
- cursor: default;
- pointer-events: none;
- &.active {
- pointer-events: auto;
- opacity: 0.3;
- }
- }
- .fa-search {
- transform: rotate(90deg);
- &.active {
- pointer-events: none;
- transform: rotate(0deg);
- }
- }
- .fa-times-circle {
- top: 17px;
- transform: rotate(0deg);
- color: $action-button-color;
- cursor: pointer;
- &.active {
- transform: rotate(90deg);
- }
- &:hover {
- color: lighten($action-button-color, 7%);
- }
- }
- }
- .search-results__header {
- color: $dark-text-color;
- background: lighten($ui-base-color, 2%);
- padding: 15px;
- font-weight: 500;
- font-size: 16px;
- cursor: default;
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
- .search-results__section {
- margin-bottom: 5px;
- h5 {
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: default;
- display: flex;
- padding: 15px;
- font-weight: 500;
- font-size: 16px;
- color: $dark-text-color;
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
- .account:last-child,
- & > div:last-child .status {
- border-bottom: 0;
- }
- }
- .search-results__hashtag {
- display: block;
- padding: 10px;
- color: $secondary-text-color;
- text-decoration: none;
- &:hover,
- &:active,
- &:focus {
- color: lighten($secondary-text-color, 4%);
- text-decoration: underline;
- }
- }
- .search-results__info {
- padding: 20px;
- color: $darker-text-color;
- text-align: center;
- }
- .modal-root {
- position: relative;
- z-index: 9999;
- }
- .modal-root__overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba($base-overlay-background, 0.7);
- transition: background 0.5s;
- }
- .modal-root__container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- align-content: space-around;
- z-index: 9999;
- pointer-events: none;
- user-select: none;
- }
- .modal-root__modal {
- pointer-events: auto;
- display: flex;
- z-index: 9999;
- }
- .video-modal__container {
- max-width: 100vw;
- max-height: 100vh;
- }
- .audio-modal__container {
- width: 50vw;
- }
- .media-modal {
- width: 100%;
- height: 100%;
- position: relative;
- &__close,
- &__zoom-button {
- color: rgba($white, 0.7);
- &:hover,
- &:focus,
- &:active {
- color: $white;
- background-color: rgba($white, 0.15);
- }
- &:focus {
- background-color: rgba($white, 0.3);
- }
- }
- }
- .media-modal__closer {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- .media-modal__navigation {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- pointer-events: none;
- transition: opacity 0.3s linear;
- will-change: opacity;
- * {
- pointer-events: auto;
- }
- &.media-modal__navigation--hidden {
- opacity: 0;
- * {
- pointer-events: none;
- }
- }
- }
- .media-modal__nav {
- background: transparent;
- box-sizing: border-box;
- border: 0;
- color: rgba($primary-text-color, 0.7);
- cursor: pointer;
- display: flex;
- align-items: center;
- font-size: 24px;
- height: 20vmax;
- margin: auto 0;
- padding: 30px 15px;
- position: absolute;
- top: 0;
- bottom: 0;
- &:hover,
- &:focus,
- &:active {
- color: $primary-text-color;
- }
- }
- .media-modal__nav--left {
- left: 0;
- }
- .media-modal__nav--right {
- right: 0;
- }
- .media-modal__overlay {
- max-width: 600px;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0 auto;
- .picture-in-picture__footer {
- border-radius: 0;
- background: transparent;
- padding: 20px 0;
- .icon-button {
- color: $white;
- &:hover,
- &:focus,
- &:active {
- color: $white;
- background-color: rgba($white, 0.15);
- }
- &:focus {
- background-color: rgba($white, 0.3);
- }
- &.active {
- color: $highlight-text-color;
- &:hover,
- &:focus,
- &:active {
- background: rgba($highlight-text-color, 0.15);
- }
- &:focus {
- background: rgba($highlight-text-color, 0.3);
- }
- }
- &.star-icon.active {
- color: $gold-star;
- &:hover,
- &:focus,
- &:active {
- background: rgba($gold-star, 0.15);
- }
- &:focus {
- background: rgba($gold-star, 0.3);
- }
- }
- &.disabled {
- color: $white;
- background-color: transparent;
- cursor: default;
- opacity: 0.4;
- }
- }
- }
- }
- .media-modal__pagination {
- display: flex;
- justify-content: center;
- margin-bottom: 20px;
- }
- .media-modal__page-dot {
- flex: 0 0 auto;
- background-color: $white;
- opacity: 0.4;
- height: 6px;
- width: 6px;
- border-radius: 50%;
- margin: 0 4px;
- padding: 0;
- border: 0;
- font-size: 0;
- transition: opacity 0.2s ease-in-out;
- &.active {
- opacity: 1;
- }
- }
- .media-modal__close {
- position: absolute;
- right: 8px;
- top: 8px;
- z-index: 100;
- }
- .media-modal__zoom-button {
- position: absolute;
- right: 64px;
- top: 8px;
- z-index: 100;
- pointer-events: auto;
- transition: opacity 0.3s linear;
- will-change: opacity;
- }
- .media-modal__zoom-button--hidden {
- pointer-events: none;
- opacity: 0;
- }
- .onboarding-modal,
- .error-modal,
- .embed-modal {
- background: $ui-secondary-color;
- color: $inverted-text-color;
- border-radius: 8px;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- }
- .error-modal__body {
- height: 80vh;
- width: 80vw;
- max-width: 520px;
- max-height: 420px;
- position: relative;
- & > div {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding: 25px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- display: flex;
- opacity: 0;
- user-select: text;
- }
- }
- .error-modal__body {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- }
- .onboarding-modal__paginator,
- .error-modal__footer {
- flex: 0 0 auto;
- background: darken($ui-secondary-color, 8%);
- display: flex;
- padding: 25px;
- & > div {
- min-width: 33px;
- }
- .onboarding-modal__nav,
- .error-modal__nav {
- color: $lighter-text-color;
- border: 0;
- font-size: 14px;
- font-weight: 500;
- padding: 10px 25px;
- line-height: inherit;
- height: auto;
- margin: -10px;
- border-radius: 4px;
- background-color: transparent;
- &:hover,
- &:focus,
- &:active {
- color: darken($lighter-text-color, 4%);
- background-color: darken($ui-secondary-color, 16%);
- }
- &.onboarding-modal__done,
- &.onboarding-modal__next {
- color: $inverted-text-color;
- &:hover,
- &:focus,
- &:active {
- color: lighten($inverted-text-color, 4%);
- }
- }
- }
- }
- .error-modal__footer {
- justify-content: center;
- }
- .display-case {
- text-align: center;
- font-size: 15px;
- margin-bottom: 15px;
- &__label {
- font-weight: 500;
- color: $inverted-text-color;
- margin-bottom: 5px;
- text-transform: uppercase;
- font-size: 12px;
- }
- &__case {
- background: $ui-base-color;
- color: $secondary-text-color;
- font-weight: 500;
- padding: 10px;
- border-radius: 4px;
- }
- }
- .onboard-sliders {
- display: inline-block;
- max-width: 30px;
- max-height: auto;
- margin-left: 10px;
- }
- .boost-modal,
- .confirmation-modal,
- .report-modal,
- .actions-modal,
- .mute-modal,
- .block-modal,
- .compare-history-modal {
- background: lighten($ui-secondary-color, 8%);
- color: $inverted-text-color;
- border-radius: 8px;
- overflow: hidden;
- max-width: 90vw;
- width: 480px;
- position: relative;
- flex-direction: column;
- }
- .actions-modal {
- .status {
- background: $white;
- border-bottom-color: $ui-secondary-color;
- padding-top: 10px;
- padding-bottom: 10px;
- }
- .dropdown-menu__separator {
- border-bottom-color: $ui-secondary-color;
- }
- }
- .boost-modal__container {
- overflow-x: scroll;
- padding: 10px;
- .status {
- user-select: text;
- border-bottom: 0;
- }
- }
- .boost-modal__action-bar,
- .confirmation-modal__action-bar,
- .mute-modal__action-bar,
- .block-modal__action-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: $ui-secondary-color;
- padding: 15px;
- & > div {
- flex: 1 1 auto;
- text-align: right;
- color: $lighter-text-color;
- padding-right: 10px;
- }
- .button {
- flex: 0 0 auto;
- }
- }
- .mute-modal,
- .block-modal {
- line-height: 24px;
- }
- .mute-modal .react-toggle,
- .block-modal .react-toggle {
- vertical-align: middle;
- }
- .report-modal {
- width: 90vw;
- max-width: 700px;
- }
- .report-dialog-modal {
- max-width: 90vw;
- width: 480px;
- height: 80vh;
- background: lighten($ui-secondary-color, 8%);
- color: $inverted-text-color;
- border-radius: 8px;
- overflow: hidden;
- position: relative;
- flex-direction: column;
- display: flex;
- &__container {
- box-sizing: border-box;
- border-top: 1px solid $ui-secondary-color;
- padding: 20px;
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: auto;
- }
- &__title {
- font-size: 28px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
- @media screen and (max-height: 800px) {
- font-size: 22px;
- }
- }
- &__subtitle {
- font-size: 17px;
- font-weight: 600;
- line-height: 22px;
- margin-bottom: 4px;
- }
- &__lead {
- font-size: 17px;
- line-height: 22px;
- color: lighten($inverted-text-color, 16%);
- margin-bottom: 30px;
- a {
- text-decoration: none;
- color: $inverted-text-color;
- font-weight: 500;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- &__actions {
- margin-top: 30px;
- display: flex;
- .button {
- flex: 1 1 auto;
- }
- }
- &__statuses {
- flex-grow: 1;
- min-height: 0;
- overflow: auto;
- }
- .status__content a {
- color: $highlight-text-color;
- }
- .status__content,
- .status__content p {
- color: $inverted-text-color;
- }
- .status__content__spoiler-link {
- color: $primary-text-color;
- background: $ui-primary-color;
- &:hover {
- background: lighten($ui-primary-color, 8%);
- }
- }
- .dialog-option .poll__input {
- border-color: $inverted-text-color;
- color: $ui-secondary-color;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- svg {
- width: 8px;
- height: auto;
- }
- &:active,
- &:focus,
- &:hover {
- border-color: lighten($inverted-text-color, 15%);
- border-width: 4px;
- }
- &.active {
- border-color: $inverted-text-color;
- background: $inverted-text-color;
- }
- }
- .poll__option.dialog-option {
- padding: 15px 0;
- flex: 0 0 auto;
- border-bottom: 1px solid $ui-secondary-color;
- &:last-child {
- border-bottom: 0;
- }
- & > .poll__option__text {
- font-size: 13px;
- color: lighten($inverted-text-color, 16%);
- strong {
- font-size: 17px;
- font-weight: 500;
- line-height: 22px;
- color: $inverted-text-color;
- display: block;
- margin-bottom: 4px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
- .flex-spacer {
- background: transparent;
- }
- &__textarea {
- display: block;
- box-sizing: border-box;
- width: 100%;
- color: $inverted-text-color;
- background: $simple-background-color;
- padding: 10px;
- font-family: inherit;
- font-size: 17px;
- line-height: 22px;
- resize: vertical;
- border: 0;
- outline: 0;
- border-radius: 4px;
- margin: 20px 0;
- &::placeholder {
- color: $dark-text-color;
- }
- &:focus {
- outline: 0;
- }
- }
- &__toggle {
- display: flex;
- align-items: center;
- & > span {
- font-size: 17px;
- font-weight: 500;
- margin-left: 10px;
- }
- }
- .button.button-secondary {
- border-color: $inverted-text-color;
- color: $inverted-text-color;
- flex: 0 0 auto;
- &:hover,
- &:focus,
- &:active {
- border-color: lighten($inverted-text-color, 15%);
- color: lighten($inverted-text-color, 15%);
- }
- }
- hr {
- border: 0;
- background: transparent;
- margin: 15px 0;
- }
- .emoji-mart-search {
- padding-right: 10px;
- }
- .emoji-mart-search-icon {
- right: 10px + 5px;
- }
- }
- .report-modal__container {
- display: flex;
- border-top: 1px solid $ui-secondary-color;
- @media screen and (max-width: 480px) {
- flex-wrap: wrap;
- overflow-y: auto;
- }
- }
- .report-modal__statuses,
- .report-modal__comment {
- box-sizing: border-box;
- width: 50%;
- @media screen and (max-width: 480px) {
- width: 100%;
- }
- }
- .report-modal__statuses,
- .focal-point-modal__content {
- flex: 1 1 auto;
- min-height: 20vh;
- max-height: 80vh;
- overflow-y: auto;
- overflow-x: hidden;
- .status__content a {
- color: $highlight-text-color;
- }
- .status__content,
- .status__content p {
- color: $inverted-text-color;
- }
- @media screen and (max-width: 480px) {
- max-height: 10vh;
- }
- }
- .focal-point-modal__content {
- @media screen and (max-width: 480px) {
- max-height: 40vh;
- }
- }
- .setting-divider {
- background: transparent;
- border: 0;
- margin: 0;
- width: 100%;
- height: 1px;
- margin-bottom: 29px;
- }
- .report-modal__comment {
- padding: 20px;
- border-right: 1px solid $ui-secondary-color;
- max-width: 320px;
- p {
- font-size: 14px;
- line-height: 20px;
- margin-bottom: 20px;
- }
- .setting-text-label {
- display: block;
- color: $inverted-text-color;
- font-size: 14px;
- font-weight: 500;
- margin-bottom: 10px;
- }
- .setting-text {
- width: 100%;
- resize: none;
- min-height: 100px;
- max-height: 50vh;
- border: 0;
- }
- .setting-toggle {
- margin-top: 20px;
- margin-bottom: 24px;
- &__label {
- color: $inverted-text-color;
- font-size: 14px;
- }
- }
- @media screen and (max-width: 480px) {
- padding: 10px;
- max-width: 100%;
- order: 2;
- .setting-toggle {
- margin-bottom: 4px;
- }
- }
- }
- .actions-modal {
- max-height: 80vh;
- max-width: 80vw;
- .status {
- overflow-y: auto;
- max-height: 300px;
- }
- .actions-modal__item-label {
- font-weight: 500;
- }
- ul {
- overflow-y: auto;
- flex-shrink: 0;
- max-height: 80vh;
- &.with-status {
- max-height: calc(80vh - 75px);
- }
- li:empty {
- margin: 0;
- }
- li:not(:empty) {
- a {
- color: $inverted-text-color;
- display: flex;
- padding: 12px 16px;
- font-size: 15px;
- align-items: center;
- text-decoration: none;
- &,
- button {
- transition: none;
- }
- &.active,
- &:hover,
- &:active,
- &:focus {
- &,
- button {
- background: $ui-highlight-color;
- color: $primary-text-color;
- }
- }
- button:first-child {
- margin-right: 10px;
- }
- }
- }
- }
- }
- .confirmation-modal__action-bar,
- .mute-modal__action-bar,
- .block-modal__action-bar {
- .confirmation-modal__secondary-button {
- flex-shrink: 1;
- }
- }
- .confirmation-modal__secondary-button,
- .confirmation-modal__cancel-button,
- .mute-modal__cancel-button,
- .block-modal__cancel-button {
- background-color: transparent;
- color: $lighter-text-color;
- font-size: 14px;
- font-weight: 500;
- &:hover,
- &:focus,
- &:active {
- color: darken($lighter-text-color, 4%);
- background-color: transparent;
- }
- }
- .confirmation-modal__container,
- .mute-modal__container,
- .block-modal__container,
- .report-modal__target {
- padding: 30px;
- font-size: 16px;
- strong {
- font-weight: 500;
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- select {
- appearance: none;
- box-sizing: border-box;
- font-size: 14px;
- color: $inverted-text-color;
- display: inline-block;
- width: auto;
- outline: 0;
- font-family: inherit;
- background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
- border: 1px solid darken($simple-background-color, 14%);
- border-radius: 4px;
- padding: 6px 10px;
- padding-right: 30px;
- }
- }
- .confirmation-modal__container,
- .report-modal__target {
- text-align: center;
- }
- .block-modal,
- .mute-modal {
- &__explanation {
- margin-top: 20px;
- }
- .setting-toggle {
- margin-top: 20px;
- margin-bottom: 24px;
- display: flex;
- align-items: center;
- &__label {
- color: $inverted-text-color;
- margin: 0;
- margin-left: 8px;
- }
- }
- }
- .report-modal__target {
- padding: 15px;
- .report-modal__close {
- position: absolute;
- top: 10px;
- right: 10px;
- }
- }
- .compare-history-modal {
- .report-modal__target {
- border-bottom: 1px solid $ui-secondary-color;
- }
- &__container {
- padding: 30px;
- pointer-events: all;
- }
- .status__content {
- color: $inverted-text-color;
- font-size: 19px;
- line-height: 24px;
- .emojione {
- width: 24px;
- height: 24px;
- margin: -1px 0 0;
- }
- a {
- color: $highlight-text-color;
- }
- hr {
- height: 0.25rem;
- padding: 0;
- background-color: $ui-secondary-color;
- border: 0;
- margin: 20px 0;
- }
- }
- .media-gallery,
- .audio-player,
- .video-player {
- margin-top: 15px;
- }
- }
- .loading-bar {
- background-color: $highlight-text-color;
- height: 3px;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9999;
- }
- .media-gallery__gifv__label {
- display: block;
- position: absolute;
- color: $primary-text-color;
- background: rgba($base-overlay-background, 0.5);
- bottom: 6px;
- left: 6px;
- padding: 2px 6px;
- border-radius: 2px;
- font-size: 11px;
- font-weight: 600;
- z-index: 1;
- pointer-events: none;
- opacity: 0.9;
- transition: opacity 0.1s ease;
- line-height: 18px;
- }
- .media-gallery__gifv {
- &:hover {
- .media-gallery__gifv__label {
- opacity: 1;
- }
- }
- }
- .attachment-list {
- display: flex;
- font-size: 14px;
- border: 1px solid lighten($ui-base-color, 8%);
- border-radius: 4px;
- margin-top: 16px;
- overflow: hidden;
- &__icon {
- flex: 0 0 auto;
- color: $dark-text-color;
- padding: 8px 18px;
- cursor: default;
- border-right: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 26px;
- .fa {
- display: block;
- }
- }
- &__list {
- list-style: none;
- padding: 4px 0;
- padding-left: 8px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- li {
- display: block;
- padding: 4px 0;
- }
- a {
- text-decoration: none;
- color: $dark-text-color;
- font-weight: 500;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- &.compact {
- border: 0;
- .attachment-list__list {
- padding: 0;
- display: block;
- }
- .fa {
- color: $dark-text-color;
- }
- }
- }
- /* Media Gallery */
- .media-gallery {
- box-sizing: border-box;
- margin-top: 8px;
- overflow: hidden;
- border-radius: 4px;
- position: relative;
- width: 100%;
- min-height: 64px;
- }
- .media-gallery__item {
- border: 0;
- box-sizing: border-box;
- display: block;
- float: left;
- position: relative;
- border-radius: 4px;
- overflow: hidden;
- &.standalone {
- .media-gallery__item-gifv-thumbnail {
- transform: none;
- top: 0;
- }
- }
- }
- .media-gallery__item-thumbnail {
- cursor: zoom-in;
- display: block;
- text-decoration: none;
- color: $secondary-text-color;
- position: relative;
- z-index: 1;
- &,
- img {
- height: 100%;
- width: 100%;
- }
- img {
- object-fit: cover;
- }
- }
- .media-gallery__preview {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 0;
- background: $base-overlay-background;
- &--hidden {
- display: none;
- }
- }
- .media-gallery__gifv {
- height: 100%;
- overflow: hidden;
- position: relative;
- width: 100%;
- }
- .media-gallery__item-gifv-thumbnail {
- cursor: zoom-in;
- height: 100%;
- object-fit: cover;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- width: 100%;
- z-index: 1;
- }
- .media-gallery__item-thumbnail-label {
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
- clip: rect(1px, 1px, 1px, 1px);
- overflow: hidden;
- position: absolute;
- }
- /* End Media Gallery */
- .detailed,
- .fullscreen {
- .video-player__volume__current,
- .video-player__volume::before {
- bottom: 27px;
- }
- .video-player__volume__handle {
- bottom: 23px;
- }
- }
- .audio-player {
- overflow: hidden;
- box-sizing: border-box;
- position: relative;
- background: darken($ui-base-color, 8%);
- border-radius: 4px;
- padding-bottom: 44px;
- direction: ltr;
- &.editable {
- border-radius: 0;
- height: 100%;
- }
- &.inactive {
- audio,
- .video-player__controls {
- visibility: hidden;
- }
- }
- .video-player__volume::before,
- .video-player__seek::before {
- background: currentColor;
- opacity: 0.15;
- }
- .video-player__seek__buffer {
- background: currentColor;
- opacity: 0.2;
- }
- .video-player__buttons button,
- .video-player__buttons a {
- color: currentColor;
- opacity: 0.75;
- &:active,
- &:hover,
- &:focus {
- color: currentColor;
- opacity: 1;
- }
- }
- .video-player__time-sep,
- .video-player__time-total,
- .video-player__time-current {
- color: currentColor;
- }
- .video-player__seek::before,
- .video-player__seek__buffer,
- .video-player__seek__progress {
- top: 0;
- }
- .video-player__seek__handle {
- top: -4px;
- }
- .video-player__controls {
- padding-top: 10px;
- background: transparent;
- }
- }
- .video-player {
- overflow: hidden;
- position: relative;
- background: $base-shadow-color;
- max-width: 100%;
- border-radius: 4px;
- box-sizing: border-box;
- direction: ltr;
- color: $white;
- &.editable {
- border-radius: 0;
- height: 100% !important;
- }
- &:focus {
- outline: 0;
- }
- video {
- display: block;
- max-width: 100vw;
- max-height: 80vh;
- z-index: 1;
- }
- &.fullscreen {
- width: 100% !important;
- height: 100% !important;
- margin: 0;
- video {
- max-width: 100% !important;
- max-height: 100% !important;
- width: 100% !important;
- height: 100% !important;
- outline: 0;
- }
- }
- &.inline {
- video {
- object-fit: contain;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- &__controls {
- position: absolute;
- z-index: 2;
- bottom: 0;
- left: 0;
- right: 0;
- box-sizing: border-box;
- background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
- padding: 0 15px;
- opacity: 0;
- transition: opacity 0.1s ease;
- &.active {
- opacity: 1;
- }
- }
- &.inactive {
- video,
- .video-player__controls {
- visibility: hidden;
- }
- }
- &__spoiler {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 4;
- border: 0;
- background: $base-overlay-background;
- color: $darker-text-color;
- transition: none;
- pointer-events: none;
- &.active {
- display: block;
- pointer-events: auto;
- &:hover,
- &:active,
- &:focus {
- color: lighten($darker-text-color, 7%);
- }
- }
- &__title {
- display: block;
- font-size: 14px;
- }
- &__subtitle {
- display: block;
- font-size: 11px;
- font-weight: 500;
- }
- }
- &__buttons-bar {
- display: flex;
- justify-content: space-between;
- padding-bottom: 8px;
- margin: 0 -5px;
- .video-player__download__icon {
- color: inherit;
- }
- }
- &__buttons {
- display: flex;
- flex: 0 1 auto;
- min-width: 30px;
- align-items: center;
- font-size: 16px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- .player-button {
- display: inline-block;
- outline: 0;
- flex: 0 0 auto;
- background: transparent;
- padding: 5px;
- font-size: 16px;
- border: 0;
- color: rgba($white, 0.75);
- &:active,
- &:hover,
- &:focus {
- color: $white;
- }
- }
- }
- &__time {
- display: inline;
- flex: 0 1 auto;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0 5px;
- }
- &__time-sep,
- &__time-total,
- &__time-current {
- font-size: 14px;
- font-weight: 500;
- }
- &__time-current {
- color: $white;
- }
- &__time-sep {
- display: inline-block;
- margin: 0 6px;
- }
- &__time-sep,
- &__time-total {
- color: $white;
- }
- &__volume {
- flex: 0 0 auto;
- display: inline-flex;
- cursor: pointer;
- height: 24px;
- position: relative;
- overflow: hidden;
- .no-reduce-motion & {
- transition: all 100ms linear;
- }
- &.active {
- overflow: visible;
- width: 50px;
- margin-right: 16px;
- }
- &::before {
- content: "";
- width: 50px;
- background: rgba($white, 0.35);
- border-radius: 4px;
- display: block;
- position: absolute;
- height: 4px;
- left: 0;
- top: 50%;
- transform: translate(0, -50%);
- }
- &__current {
- display: block;
- position: absolute;
- height: 4px;
- border-radius: 4px;
- left: 0;
- top: 50%;
- transform: translate(0, -50%);
- background: lighten($ui-highlight-color, 8%);
- }
- &__handle {
- position: absolute;
- z-index: 3;
- border-radius: 50%;
- width: 12px;
- height: 12px;
- top: 50%;
- left: 0;
- margin-left: -6px;
- transform: translate(0, -50%);
- background: lighten($ui-highlight-color, 8%);
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- opacity: 0;
- .no-reduce-motion & {
- transition: opacity 100ms linear;
- }
- }
- &.active &__handle {
- opacity: 1;
- }
- }
- &__link {
- padding: 2px 10px;
- a {
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- color: $white;
- &:hover,
- &:active,
- &:focus {
- text-decoration: underline;
- }
- }
- }
- &__seek {
- cursor: pointer;
- height: 24px;
- position: relative;
- &::before {
- content: "";
- width: 100%;
- background: rgba($white, 0.35);
- border-radius: 4px;
- display: block;
- position: absolute;
- height: 4px;
- top: 14px;
- }
- &__progress,
- &__buffer {
- display: block;
- position: absolute;
- height: 4px;
- border-radius: 4px;
- top: 14px;
- background: lighten($ui-highlight-color, 8%);
- }
- &__buffer {
- background: rgba($white, 0.2);
- }
- &__handle {
- position: absolute;
- z-index: 3;
- opacity: 0;
- border-radius: 50%;
- width: 12px;
- height: 12px;
- top: 10px;
- margin-left: -6px;
- background: lighten($ui-highlight-color, 8%);
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- .no-reduce-motion & {
- transition: opacity 0.1s ease;
- }
- &.active {
- opacity: 1;
- }
- }
- &:hover {
- .video-player__seek__handle {
- opacity: 1;
- }
- }
- }
- &.detailed,
- &.fullscreen {
- .video-player__buttons {
- .player-button {
- padding-top: 10px;
- padding-bottom: 10px;
- }
- }
- }
- }
- .gifv {
- video {
- max-width: 100vw;
- max-height: 80vh;
- }
- }
- .scrollable .account-card {
- margin: 10px;
- background: lighten($ui-base-color, 8%);
- }
- .scrollable .account-card__title__avatar {
- img,
- .account__avatar {
- border-color: lighten($ui-base-color, 8%);
- }
- }
- .scrollable .account-card__bio::after {
- background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent);
- }
- .account-gallery__container {
- display: flex;
- flex-wrap: wrap;
- padding: 4px 2px;
- }
- .account-gallery__item {
- border: 0;
- box-sizing: border-box;
- display: block;
- position: relative;
- border-radius: 4px;
- overflow: hidden;
- margin: 2px;
- &__icons {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 24px;
- }
- }
- .notification__filter-bar,
- .account__section-headline {
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: default;
- display: flex;
- flex-shrink: 0;
- button {
- background: darken($ui-base-color, 4%);
- border: 0;
- margin: 0;
- }
- button,
- a {
- display: block;
- flex: 1 1 auto;
- color: $darker-text-color;
- padding: 15px 0;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- text-decoration: none;
- position: relative;
- width: 100%;
- white-space: nowrap;
- &.active {
- color: $secondary-text-color;
- &::before,
- &::after {
- display: block;
- content: "";
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 0;
- height: 0;
- transform: translateX(-50%);
- border-style: solid;
- border-width: 0 10px 10px;
- border-color: transparent transparent lighten($ui-base-color, 8%);
- }
- &::after {
- bottom: -1px;
- border-color: transparent transparent $ui-base-color;
- }
- }
- }
- &.directory__section-headline {
- background: darken($ui-base-color, 2%);
- border-bottom-color: transparent;
- a,
- button {
- &.active {
- &::before {
- display: none;
- }
- &::after {
- border-color: transparent transparent darken($ui-base-color, 7%);
- }
- }
- }
- }
- }
- .filter-form {
- background: $ui-base-color;
- &__column {
- padding: 10px 15px;
- padding-bottom: 0;
- }
- .radio-button {
- display: block;
- }
- }
- .column-settings__row .radio-button {
- display: block;
- }
- .radio-button {
- font-size: 14px;
- position: relative;
- display: inline-block;
- padding: 6px 0;
- line-height: 18px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: pointer;
- input[type="radio"],
- input[type="checkbox"] {
- display: none;
- }
- &__input {
- display: inline-block;
- position: relative;
- border: 1px solid $ui-primary-color;
- box-sizing: border-box;
- width: 18px;
- height: 18px;
- flex: 0 0 auto;
- margin-right: 10px;
- top: -1px;
- border-radius: 50%;
- vertical-align: middle;
- &.checked {
- border-color: lighten($ui-highlight-color, 4%);
- background: lighten($ui-highlight-color, 4%);
- }
- }
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 0;
- }
- .search-popout {
- @include search-popout;
- }
- noscript {
- text-align: center;
- img {
- width: 200px;
- opacity: 0.5;
- animation: flicker 4s infinite;
- }
- div {
- font-size: 14px;
- margin: 30px auto;
- color: $secondary-text-color;
- max-width: 400px;
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- &:hover {
- text-decoration: none;
- }
- }
- }
- }
- @keyframes flicker {
- 0% { opacity: 1; }
- 30% { opacity: 0.75; }
- 100% { opacity: 1; }
- }
- @media screen and (max-width: 630px) and (max-height: 400px) {
- $duration: 400ms;
- $delay: 100ms;
- .tabs-bar,
- .search {
- will-change: margin-top;
- transition: margin-top $duration $delay;
- }
- .navigation-bar {
- will-change: padding-bottom;
- transition: padding-bottom $duration $delay;
- }
- .navigation-bar {
- & > a:first-child {
- will-change: margin-top, margin-left, margin-right, width;
- transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
- }
- & > .navigation-bar__profile-edit {
- will-change: margin-top;
- transition: margin-top $duration $delay;
- }
- .navigation-bar__actions {
- & > .icon-button.close {
- will-change: opacity transform;
- transition:
- opacity $duration * 0.5 $delay,
- transform $duration $delay;
- }
- & > .compose__action-bar .icon-button {
- will-change: opacity transform;
- transition:
- opacity $duration * 0.5 $delay + $duration * 0.5,
- transform $duration $delay;
- }
- }
- }
- .is-composing {
- .tabs-bar,
- .search {
- margin-top: -50px;
- }
- .navigation-bar {
- padding-bottom: 0;
- & > a:first-child {
- margin: -100px 10px 0 -50px;
- }
- .navigation-bar__profile {
- padding-top: 2px;
- }
- .navigation-bar__profile-edit {
- position: absolute;
- margin-top: -60px;
- }
- .navigation-bar__actions {
- .icon-button.close {
- pointer-events: auto;
- opacity: 1;
- transform: scale(1, 1) translate(0, 0);
- bottom: 5px;
- }
- .compose__action-bar .icon-button {
- pointer-events: none;
- opacity: 0;
- transform: scale(0, 1) translate(100%, 0);
- }
- }
- }
- }
- }
- .embed-modal {
- width: auto;
- max-width: 80vw;
- max-height: 80vh;
- h4 {
- padding: 30px;
- font-weight: 500;
- font-size: 16px;
- text-align: center;
- }
- .embed-modal__container {
- padding: 10px;
- .hint {
- margin-bottom: 15px;
- }
- .embed-modal__html {
- outline: 0;
- box-sizing: border-box;
- display: block;
- width: 100%;
- border: 0;
- padding: 10px;
- font-family: $font-monospace, monospace;
- background: $ui-base-color;
- color: $primary-text-color;
- font-size: 14px;
- margin: 0;
- margin-bottom: 15px;
- border-radius: 4px;
- &::-moz-focus-inner {
- border: 0;
- }
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
- }
- .embed-modal__iframe {
- width: 400px;
- max-width: 100%;
- overflow: hidden;
- border: 0;
- border-radius: 4px;
- }
- }
- }
- .moved-account-banner {
- padding: 20px;
- background: lighten($ui-base-color, 4%);
- display: flex;
- align-items: center;
- flex-direction: column;
- &__message {
- color: $darker-text-color;
- padding: 8px 0;
- padding-top: 0;
- padding-bottom: 4px;
- font-size: 14px;
- font-weight: 500;
- text-align: center;
- margin-bottom: 16px;
- }
- &__action {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 15px;
- }
- .detailed-status__display-name {
- margin-bottom: 0;
- }
- }
- .column-inline-form {
- padding: 15px;
- display: flex;
- justify-content: flex-start;
- gap: 15px;
- align-items: center;
- background: lighten($ui-base-color, 4%);
- label {
- flex: 1 1 auto;
- input {
- width: 100%;
- }
- }
- }
- .drawer__backdrop {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba($base-overlay-background, 0.5);
- }
- .list-editor {
- background: $ui-base-color;
- flex-direction: column;
- border-radius: 8px;
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- width: 380px;
- overflow: hidden;
- @media screen and (max-width: 420px) {
- width: 90%;
- }
- h4 {
- padding: 15px 0;
- background: lighten($ui-base-color, 13%);
- font-weight: 500;
- font-size: 16px;
- text-align: center;
- border-radius: 8px 8px 0 0;
- }
- .drawer__pager {
- height: 50vh;
- }
- .drawer__inner {
- border-radius: 0 0 8px 8px;
- &.backdrop {
- width: calc(100% - 60px);
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- border-radius: 0 0 0 8px;
- }
- }
- &__accounts {
- overflow-y: auto;
- }
- .account__display-name {
- &:hover strong {
- text-decoration: none;
- }
- }
- .account__avatar {
- cursor: default;
- }
- .search {
- margin-bottom: 0;
- }
- }
- .list-adder {
- background: $ui-base-color;
- flex-direction: column;
- border-radius: 8px;
- box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
- width: 380px;
- overflow: hidden;
- @media screen and (max-width: 420px) {
- width: 90%;
- }
- &__account {
- background: lighten($ui-base-color, 13%);
- }
- &__lists {
- background: lighten($ui-base-color, 13%);
- height: 50vh;
- border-radius: 0 0 8px 8px;
- overflow-y: auto;
- }
- .list {
- padding: 10px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- }
- .list__wrapper {
- display: flex;
- }
- .list__display-name {
- flex: 1 1 auto;
- overflow: hidden;
- text-decoration: none;
- font-size: 16px;
- padding: 10px;
- }
- }
- .focal-point {
- position: relative;
- cursor: move;
- overflow: hidden;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: $base-shadow-color;
- img,
- video,
- canvas {
- display: block;
- max-height: 80vh;
- width: 100%;
- height: auto;
- margin: 0;
- object-fit: contain;
- background: $base-shadow-color;
- }
- &__reticle {
- position: absolute;
- width: 100px;
- height: 100px;
- transform: translate(-50%, -50%);
- background: url('../images/reticle.png') no-repeat 0 0;
- border-radius: 50%;
- box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
- }
- &__overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
- &__preview {
- position: absolute;
- bottom: 10px;
- right: 10px;
- z-index: 2;
- cursor: move;
- transition: opacity 0.1s ease;
- &:hover {
- opacity: 0.5;
- }
- strong {
- color: $primary-text-color;
- font-size: 14px;
- font-weight: 500;
- display: block;
- margin-bottom: 5px;
- }
- div {
- border-radius: 4px;
- box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
- }
- }
- @media screen and (max-width: 480px) {
- img,
- video {
- max-height: 100%;
- }
- &__preview {
- display: none;
- }
- }
- }
- .account__header__content {
- color: $darker-text-color;
- font-size: 14px;
- font-weight: 400;
- overflow: hidden;
- word-break: normal;
- word-wrap: break-word;
- p {
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- a {
- color: inherit;
- text-decoration: underline;
- &:hover {
- text-decoration: none;
- }
- }
- }
- .account__header {
- overflow: hidden;
- background: lighten($ui-base-color, 4%);
- &.inactive {
- opacity: 0.5;
- .account__header__image,
- .account__avatar {
- filter: grayscale(100%);
- }
- }
- &__info {
- position: absolute;
- top: 10px;
- left: 10px;
- }
- &__image {
- overflow: hidden;
- height: 145px;
- position: relative;
- background: darken($ui-base-color, 4%);
- img {
- object-fit: cover;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- }
- }
- &__bar {
- position: relative;
- padding: 0 20px;
- border-bottom: 1px solid lighten($ui-base-color, 12%);
- .avatar {
- display: block;
- flex: 0 0 auto;
- width: 94px;
- margin-left: -2px;
- .account__avatar {
- background: darken($ui-base-color, 8%);
- border: 2px solid lighten($ui-base-color, 4%);
- }
- }
- }
- &__tabs {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- margin-top: -55px;
- padding-top: 10px;
- gap: 8px;
- overflow: hidden;
- &__buttons {
- display: flex;
- align-items: center;
- gap: 8px;
- padding-top: 55px;
- overflow: hidden;
- .button {
- flex-shrink: 1;
- white-space: nowrap;
- @media screen and (max-width: $no-gap-breakpoint) {
- min-width: 0;
- }
- }
- .icon-button {
- border: 1px solid lighten($ui-base-color, 12%);
- border-radius: 4px;
- box-sizing: content-box;
- padding: 2px;
- }
- }
- &__name {
- margin-top: 16px;
- margin-bottom: 16px;
- .account-role {
- vertical-align: top;
- }
- .emojione {
- width: 22px;
- height: 22px;
- }
- h1 {
- font-size: 17px;
- line-height: 22px;
- color: $primary-text-color;
- font-weight: 700;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- small {
- display: block;
- font-size: 15px;
- color: $darker-text-color;
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- .spacer {
- flex: 1 1 auto;
- }
- }
- &__bio {
- .account__header__content {
- color: $primary-text-color;
- }
- .account__header__fields {
- margin: 0;
- margin-top: 16px;
- border-radius: 4px;
- background: darken($ui-base-color, 4%);
- border: 0;
- dl {
- display: block;
- padding: 11px 16px;
- border-bottom-color: lighten($ui-base-color, 4%);
- }
- dd,
- dt {
- font-size: 13px;
- line-height: 18px;
- padding: 0;
- text-align: initial;
- }
- dt {
- width: auto;
- background: transparent;
- text-transform: uppercase;
- color: $dark-text-color;
- }
- dd {
- color: $darker-text-color;
- }
- a {
- color: lighten($ui-highlight-color, 8%);
- }
- .verified {
- border: 1px solid rgba($valid-value-color, 0.5);
- &:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- }
- &:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
- dt,
- dd {
- color: $valid-value-color;
- }
- a {
- color: $valid-value-color;
- }
- }
- }
- }
- &__extra {
- margin-top: 16px;
- &__links {
- font-size: 14px;
- color: $darker-text-color;
- margin: 0 -10px;
- padding-top: 16px;
- padding-bottom: 10px;
- a {
- display: inline-block;
- color: $darker-text-color;
- text-decoration: none;
- padding: 5px 10px;
- font-weight: 500;
- strong {
- font-weight: 700;
- color: $primary-text-color;
- }
- }
- }
- }
- &__account-note {
- color: $primary-text-color;
- font-size: 14px;
- font-weight: 400;
- margin-bottom: 10px;
- label {
- display: block;
- font-size: 12px;
- font-weight: 500;
- color: $darker-text-color;
- text-transform: uppercase;
- margin-bottom: 5px;
- }
- textarea {
- display: block;
- box-sizing: border-box;
- width: calc(100% + 20px);
- color: $secondary-text-color;
- background: transparent;
- padding: 10px;
- margin: 0 -10px;
- font-family: inherit;
- font-size: 14px;
- resize: none;
- border: 0;
- outline: 0;
- border-radius: 4px;
- &::placeholder {
- color: $dark-text-color;
- opacity: 1;
- }
- &:focus {
- background: $ui-base-color;
- }
- }
- }
- }
- .trends {
- &__header {
- color: $dark-text-color;
- background: lighten($ui-base-color, 2%);
- border-bottom: 1px solid darken($ui-base-color, 4%);
- font-weight: 500;
- padding: 15px;
- font-size: 16px;
- cursor: default;
- .fa {
- display: inline-block;
- margin-right: 5px;
- }
- }
- &__item {
- display: flex;
- align-items: center;
- padding: 15px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- gap: 15px;
- &:last-child {
- border-bottom: 0;
- }
- &__name {
- flex: 1 1 auto;
- color: $dark-text-color;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- strong {
- font-weight: 500;
- }
- a {
- color: $darker-text-color;
- text-decoration: none;
- font-size: 14px;
- font-weight: 500;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- &:hover,
- &:focus,
- &:active {
- span {
- text-decoration: underline;
- }
- }
- }
- }
- &__current {
- flex: 0 0 auto;
- font-size: 24px;
- font-weight: 500;
- text-align: right;
- color: $secondary-text-color;
- text-decoration: none;
- }
- &__sparkline {
- flex: 0 0 auto;
- width: 50px;
- path:first-child {
- fill: rgba($highlight-text-color, 0.25) !important;
- fill-opacity: 100% !important;
- }
- path:last-child {
- stroke: lighten($highlight-text-color, 6%) !important;
- fill: none !important;
- }
- }
- &--requires-review {
- .trends__item__name {
- color: $gold-star;
- a {
- color: $gold-star;
- }
- }
- .trends__item__current {
- color: $gold-star;
- }
- .trends__item__sparkline {
- path:first-child {
- fill: rgba($gold-star, 0.25) !important;
- }
- path:last-child {
- stroke: lighten($gold-star, 6%) !important;
- }
- }
- }
- &--disabled {
- .trends__item__name {
- color: lighten($ui-base-color, 12%);
- a {
- color: lighten($ui-base-color, 12%);
- }
- }
- .trends__item__current {
- color: lighten($ui-base-color, 12%);
- }
- .trends__item__sparkline {
- path:first-child {
- fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
- }
- path:last-child {
- stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
- }
- }
- }
- }
- &--compact &__item {
- padding: 10px;
- }
- }
- .conversation {
- display: flex;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- padding: 5px;
- padding-bottom: 0;
- &:focus {
- background: lighten($ui-base-color, 2%);
- outline: 0;
- }
- &__avatar {
- flex: 0 0 auto;
- padding: 10px;
- padding-top: 12px;
- position: relative;
- cursor: pointer;
- }
- &__unread {
- display: inline-block;
- background: $highlight-text-color;
- border-radius: 50%;
- width: 0.625rem;
- height: 0.625rem;
- margin: -0.1ex 0.15em 0.1ex;
- }
- &__content {
- flex: 1 1 auto;
- padding: 10px 5px;
- padding-right: 15px;
- overflow: hidden;
- &__info {
- overflow: hidden;
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- }
- &__relative-time {
- font-size: 15px;
- color: $darker-text-color;
- padding-left: 15px;
- }
- &__names {
- color: $darker-text-color;
- font-size: 15px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 4px;
- flex-basis: 90px;
- flex-grow: 1;
- a {
- color: $primary-text-color;
- text-decoration: none;
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- }
- a {
- word-break: break-word;
- }
- }
- &--unread {
- background: lighten($ui-base-color, 2%);
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
- .conversation__content__info {
- font-weight: 700;
- }
- .conversation__content__relative-time {
- color: $primary-text-color;
- }
- }
- }
- .announcements {
- background: lighten($ui-base-color, 8%);
- font-size: 13px;
- display: flex;
- align-items: flex-end;
- &__mastodon {
- width: 124px;
- flex: 0 0 auto;
- @media screen and (max-width: 124px + 300px) {
- display: none;
- }
- }
- &__container {
- width: calc(100% - 124px);
- flex: 0 0 auto;
- position: relative;
- @media screen and (max-width: 124px + 300px) {
- width: 100%;
- }
- }
- &__item {
- box-sizing: border-box;
- width: 100%;
- padding: 15px;
- position: relative;
- font-size: 15px;
- line-height: 20px;
- word-wrap: break-word;
- font-weight: 400;
- max-height: 50vh;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- &__range {
- display: block;
- font-weight: 500;
- margin-bottom: 10px;
- padding-right: 18px;
- }
- &__unread {
- position: absolute;
- top: 19px;
- right: 19px;
- display: block;
- background: $highlight-text-color;
- border-radius: 50%;
- width: 0.625rem;
- height: 0.625rem;
- }
- }
- &__pagination {
- padding: 15px;
- color: $darker-text-color;
- position: absolute;
- bottom: 3px;
- right: 0;
- }
- }
- .layout-multiple-columns .announcements__mastodon {
- display: none;
- }
- .layout-multiple-columns .announcements__container {
- width: 100%;
- }
- .reactions-bar {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin-top: 15px;
- margin-left: -2px;
- width: calc(100% - (90px - 33px));
- &__item {
- flex-shrink: 0;
- background: lighten($ui-base-color, 12%);
- border: 0;
- border-radius: 3px;
- margin: 2px;
- cursor: pointer;
- user-select: none;
- padding: 0 6px;
- display: flex;
- align-items: center;
- transition: all 100ms ease-in;
- transition-property: background-color, color;
- &__emoji {
- display: block;
- margin: 3px 0;
- width: 16px;
- height: 16px;
- img {
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- min-width: auto;
- min-height: auto;
- vertical-align: bottom;
- object-fit: contain;
- }
- }
- &__count {
- display: block;
- min-width: 9px;
- font-size: 13px;
- font-weight: 500;
- text-align: center;
- margin-left: 6px;
- color: $darker-text-color;
- }
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 16%);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
- &__count {
- color: lighten($darker-text-color, 4%);
- }
- }
- &.active {
- transition: all 100ms ease-in;
- transition-property: background-color, color;
- background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
- .reactions-bar__item__count {
- color: lighten($highlight-text-color, 8%);
- }
- }
- }
- .emoji-picker-dropdown {
- margin: 2px;
- }
- &:hover .emoji-button {
- opacity: 0.85;
- }
- .emoji-button {
- color: $darker-text-color;
- margin: 0;
- font-size: 16px;
- width: auto;
- flex-shrink: 0;
- padding: 0 6px;
- height: 22px;
- display: flex;
- align-items: center;
- opacity: 0.5;
- transition: all 100ms ease-in;
- transition-property: background-color, color;
- &:hover,
- &:active,
- &:focus {
- opacity: 1;
- color: lighten($darker-text-color, 4%);
- transition: all 200ms ease-out;
- transition-property: background-color, color;
- }
- }
- &--empty {
- .emoji-button {
- padding: 0;
- }
- }
- }
- .notification,
- .status__wrapper {
- position: relative;
- &.unread {
- &::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-left: 2px solid $highlight-text-color;
- pointer-events: none;
- }
- }
- }
- .picture-in-picture {
- position: fixed;
- bottom: 20px;
- right: 20px;
- width: 300px;
- &__footer {
- border-radius: 0 0 4px 4px;
- background: lighten($ui-base-color, 4%);
- padding: 10px;
- padding-top: 12px;
- display: flex;
- justify-content: space-between;
- }
- &__header {
- border-radius: 4px 4px 0 0;
- background: lighten($ui-base-color, 4%);
- padding: 10px;
- display: flex;
- justify-content: space-between;
- &__account {
- display: flex;
- text-decoration: none;
- overflow: hidden;
- }
- .account__avatar {
- margin-right: 10px;
- }
- .display-name {
- color: $primary-text-color;
- text-decoration: none;
- strong,
- span {
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- span {
- color: $darker-text-color;
- }
- }
- }
- .video-player,
- .audio-player {
- border-radius: 0;
- }
- }
- .picture-in-picture-placeholder {
- box-sizing: border-box;
- border: 2px dashed lighten($ui-base-color, 8%);
- background: $base-shadow-color;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: 10px;
- font-size: 16px;
- font-weight: 500;
- cursor: pointer;
- color: $darker-text-color;
- i {
- display: block;
- font-size: 24px;
- font-weight: 400;
- margin-bottom: 10px;
- }
- &:hover,
- &:focus,
- &:active {
- border-color: lighten($ui-base-color, 12%);
- }
- }
- .notifications-permission-banner {
- padding: 30px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- position: relative;
- &__close {
- position: absolute;
- top: 10px;
- right: 10px;
- }
- h2 {
- font-size: 16px;
- font-weight: 500;
- margin-bottom: 15px;
- text-align: center;
- }
- p {
- color: $darker-text-color;
- margin-bottom: 15px;
- text-align: center;
- }
- }
- .explore__search-header {
- background: darken($ui-base-color, 4%);
- justify-content: center;
- align-items: center;
- padding: 15px;
- .search {
- width: 100%;
- margin-bottom: 0;
- }
- .search__input {
- border: 1px solid lighten($ui-base-color, 8%);
- padding: 10px;
- }
- .search .fa {
- top: 10px;
- right: 10px;
- color: $dark-text-color;
- }
- .search .fa-times-circle {
- top: 12px;
- }
- }
- .explore__search-results {
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
- }
- .story {
- display: flex;
- align-items: center;
- color: $primary-text-color;
- text-decoration: none;
- padding: 15px 0;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- &:last-child {
- border-bottom: 0;
- }
- &:hover,
- &:active,
- &:focus {
- background-color: lighten($ui-base-color, 4%);
- }
- &__details {
- padding: 0 15px;
- flex: 1 1 auto;
- &__publisher {
- color: $darker-text-color;
- margin-bottom: 4px;
- }
- &__title {
- font-size: 19px;
- line-height: 24px;
- font-weight: 500;
- margin-bottom: 4px;
- }
- &__shared {
- color: $darker-text-color;
- }
- }
- &__thumbnail {
- flex: 0 0 auto;
- margin: 0 15px;
- position: relative;
- width: 120px;
- height: 120px;
- .skeleton {
- width: 100%;
- height: 100%;
- }
- img {
- border-radius: 4px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- &__preview {
- border-radius: 4px;
- display: block;
- margin: 0;
- width: 100%;
- height: 100%;
- object-fit: fill;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 0;
- &--hidden {
- display: none;
- }
- }
- }
- }
- .server-banner {
- padding: 20px 0;
- &__introduction {
- color: $darker-text-color;
- margin-bottom: 20px;
- strong {
- font-weight: 600;
- }
- a {
- color: inherit;
- text-decoration: underline;
- &:hover,
- &:active,
- &:focus {
- text-decoration: none;
- }
- }
- }
- &__hero {
- display: block;
- border-radius: 4px;
- width: 100%;
- height: auto;
- margin-bottom: 20px;
- aspect-ratio: 1.9;
- border: 0;
- background: $ui-base-color;
- object-fit: cover;
- }
- &__description {
- margin-bottom: 20px;
- }
- &__meta {
- display: flex;
- gap: 10px;
- max-width: 100%;
- &__column {
- flex: 0 0 auto;
- width: calc(50% - 5px);
- overflow: hidden;
- }
- }
- &__number {
- font-weight: 600;
- color: $primary-text-color;
- font-size: 14px;
- }
- &__number-label {
- color: $darker-text-color;
- font-weight: 500;
- font-size: 14px;
- }
- h4 {
- text-transform: uppercase;
- color: $darker-text-color;
- margin-bottom: 10px;
- font-weight: 600;
- }
- .account {
- padding: 0;
- border: 0;
- }
- .account__avatar-wrapper {
- margin-left: 0;
- }
- .spacer {
- margin: 10px 0;
- }
- }
- .interaction-modal {
- max-width: 90vw;
- width: 600px;
- background: $ui-base-color;
- border-radius: 8px;
- overflow: hidden;
- position: relative;
- display: block;
- padding: 20px;
- h3 {
- font-size: 22px;
- line-height: 33px;
- font-weight: 700;
- text-align: center;
- }
- &__icon {
- color: $highlight-text-color;
- margin: 0 5px;
- }
- &__lead {
- padding: 20px;
- text-align: center;
- h3 {
- margin-bottom: 15px;
- }
- p {
- font-size: 17px;
- line-height: 22px;
- color: $darker-text-color;
- }
- }
- &__choices {
- display: flex;
- &__choice {
- flex: 0 0 auto;
- width: 50%;
- box-sizing: border-box;
- padding: 20px;
- h3 {
- margin-bottom: 20px;
- }
- p {
- color: $darker-text-color;
- margin-bottom: 20px;
- }
- .button {
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
- @media screen and (max-width: $no-gap-breakpoint - 1px) {
- &__choices {
- display: block;
- &__choice {
- width: auto;
- margin-bottom: 20px;
- }
- }
- }
- }
- .copypaste {
- display: flex;
- align-items: center;
- gap: 10px;
- input {
- display: block;
- font-family: inherit;
- background: darken($ui-base-color, 8%);
- border: 1px solid $highlight-text-color;
- color: $darker-text-color;
- border-radius: 4px;
- padding: 6px 9px;
- line-height: 22px;
- font-size: 14px;
- transition: border-color 300ms linear;
- flex: 1 1 auto;
- overflow: hidden;
- &:focus {
- outline: 0;
- background: darken($ui-base-color, 4%);
- }
- }
- .button {
- flex: 0 0 auto;
- transition: background 300ms linear;
- }
- &.copied {
- input {
- border: 1px solid $valid-value-color;
- transition: none;
- }
- .button {
- background: $valid-value-color;
- transition: none;
- }
- }
- }
- .privacy-policy {
- background: $ui-base-color;
- padding: 20px;
- @media screen and (min-width: $no-gap-breakpoint) {
- border-radius: 4px;
- }
- &__body {
- margin-top: 20px;
- }
- }
- .prose {
- color: $secondary-text-color;
- font-size: 15px;
- line-height: 22px;
- p,
- ul,
- ol {
- margin-top: 1.25em;
- margin-bottom: 1.25em;
- }
- img {
- margin-top: 2em;
- margin-bottom: 2em;
- }
- video {
- margin-top: 2em;
- margin-bottom: 2em;
- }
- figure {
- margin-top: 2em;
- margin-bottom: 2em;
- figcaption {
- font-size: 0.875em;
- line-height: 1.4285714;
- margin-top: 0.8571429em;
- }
- }
- figure > * {
- margin-top: 0;
- margin-bottom: 0;
- }
- h1 {
- font-size: 1.5em;
- margin-top: 0;
- margin-bottom: 1em;
- line-height: 1.33;
- }
- h2 {
- font-size: 1.25em;
- margin-top: 1.6em;
- margin-bottom: 0.6em;
- line-height: 1.6;
- }
- h3,
- h4,
- h5,
- h6 {
- margin-top: 1.5em;
- margin-bottom: 0.5em;
- line-height: 1.5;
- }
- ol {
- counter-reset: list-counter;
- }
- li {
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- }
- ol > li {
- counter-increment: list-counter;
- &::before {
- content: counter(list-counter) ".";
- position: absolute;
- left: 0;
- }
- }
- ul > li::before {
- content: "";
- position: absolute;
- background-color: $darker-text-color;
- border-radius: 50%;
- width: 0.375em;
- height: 0.375em;
- top: 0.5em;
- left: 0.25em;
- }
- ul > li,
- ol > li {
- position: relative;
- padding-left: 1.75em;
- }
- & > ul > li p {
- margin-top: 0.75em;
- margin-bottom: 0.75em;
- }
- & > ul > li > *:first-child {
- margin-top: 1.25em;
- }
- & > ul > li > *:last-child {
- margin-bottom: 1.25em;
- }
- & > ol > li > *:first-child {
- margin-top: 1.25em;
- }
- & > ol > li > *:last-child {
- margin-bottom: 1.25em;
- }
- ul ul,
- ul ol,
- ol ul,
- ol ol {
- margin-top: 0.75em;
- margin-bottom: 0.75em;
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- strong,
- b {
- color: $primary-text-color;
- font-weight: 700;
- }
- em,
- i {
- font-style: italic;
- }
- a {
- color: $highlight-text-color;
- text-decoration: underline;
- &:focus,
- &:hover,
- &:active {
- text-decoration: none;
- }
- }
- code {
- font-size: 0.875em;
- background: darken($ui-base-color, 8%);
- border-radius: 4px;
- padding: 0.2em 0.3em;
- }
- hr {
- border: 0;
- border-top: 1px solid lighten($ui-base-color, 4%);
- margin-top: 3em;
- margin-bottom: 3em;
- }
- hr + * {
- margin-top: 0;
- }
- h2 + * {
- margin-top: 0;
- }
- h3 + * {
- margin-top: 0;
- }
- h4 + *,
- h5 + *,
- h6 + * {
- margin-top: 0;
- }
- & > :first-child {
- margin-top: 0;
- }
- & > :last-child {
- margin-bottom: 0;
- }
- }
- .dismissable-banner {
- background: $ui-base-color;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- align-items: center;
- gap: 30px;
- &__message {
- flex: 1 1 auto;
- padding: 20px 15px;
- cursor: default;
- font-size: 14px;
- line-height: 18px;
- color: $primary-text-color;
- }
- &__action {
- padding: 15px;
- flex: 0 0 auto;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .image {
- position: relative;
- overflow: hidden;
- &__preview {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- &.loaded &__preview {
- display: none;
- }
- img {
- display: block;
- width: 100%;
- height: 100%;
- object-fit: cover;
- border: 0;
- background: transparent;
- opacity: 0;
- }
- &.loaded img {
- opacity: 1;
- }
- }
- .link-footer {
- flex: 0 0 auto;
- padding: 10px;
- padding-top: 20px;
- z-index: 1;
- font-size: 13px;
- p {
- color: $dark-text-color;
- margin-bottom: 20px;
- strong {
- font-weight: 500;
- }
- a {
- color: $dark-text-color;
- text-decoration: underline;
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
- }
- .about {
- padding: 20px;
- @media screen and (min-width: $no-gap-breakpoint) {
- border-radius: 4px;
- }
- &__footer {
- color: $dark-text-color;
- text-align: center;
- font-size: 15px;
- line-height: 22px;
- margin-top: 20px;
- }
- &__header {
- margin-bottom: 30px;
- &__hero {
- width: 100%;
- height: auto;
- aspect-ratio: 1.9;
- background: lighten($ui-base-color, 4%);
- border-radius: 8px;
- margin-bottom: 30px;
- }
- h1,
- p {
- text-align: center;
- }
- h1 {
- font-size: 24px;
- line-height: 1.5;
- font-weight: 700;
- margin-bottom: 10px;
- }
- p {
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- color: $darker-text-color;
- }
- }
- &__meta {
- background: lighten($ui-base-color, 4%);
- border-radius: 4px;
- display: flex;
- margin-bottom: 30px;
- font-size: 15px;
- &__column {
- box-sizing: border-box;
- width: 50%;
- padding: 20px;
- }
- &__divider {
- width: 0;
- border: 0;
- border-style: solid;
- border-color: lighten($ui-base-color, 8%);
- border-left-width: 1px;
- min-height: calc(100% - 60px);
- flex: 0 0 auto;
- }
- h4 {
- font-size: 15px;
- text-transform: uppercase;
- color: $darker-text-color;
- font-weight: 500;
- margin-bottom: 20px;
- }
- @media screen and (max-width: 600px) {
- display: block;
- h4 {
- text-align: center;
- }
- &__column {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- &__divider {
- min-height: 0;
- width: 100%;
- border-left-width: 0;
- border-top-width: 1px;
- }
- }
- .layout-multiple-columns & {
- display: block;
- h4 {
- text-align: center;
- }
- &__column {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- &__divider {
- min-height: 0;
- width: 100%;
- border-left-width: 0;
- border-top-width: 1px;
- }
- }
- }
- &__mail {
- color: $primary-text-color;
- text-decoration: none;
- font-weight: 500;
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
- .link-footer {
- padding: 0;
- margin-top: 60px;
- text-align: center;
- font-size: 15px;
- line-height: 22px;
- @media screen and (min-width: $no-gap-breakpoint) {
- display: none;
- }
- }
- .account {
- padding: 0;
- border: 0;
- }
- .account__avatar-wrapper {
- margin-left: 0;
- }
- .account__relationship {
- display: none;
- }
- &__section {
- margin-bottom: 10px;
- &__title {
- font-size: 17px;
- font-weight: 600;
- line-height: 22px;
- padding: 20px;
- border-radius: 4px;
- background: lighten($ui-base-color, 4%);
- color: $highlight-text-color;
- cursor: pointer;
- }
- &.active &__title {
- border-radius: 4px 4px 0 0;
- }
- &__body {
- border: 1px solid lighten($ui-base-color, 4%);
- border-top: 0;
- padding: 20px;
- font-size: 15px;
- line-height: 22px;
- }
- }
- &__domain-blocks {
- margin-top: 30px;
- background: darken($ui-base-color, 4%);
- border: 1px solid lighten($ui-base-color, 4%);
- border-radius: 4px;
- &__domain {
- border-bottom: 1px solid lighten($ui-base-color, 4%);
- padding: 10px;
- font-size: 15px;
- color: $darker-text-color;
- &:nth-child(2n) {
- background: darken($ui-base-color, 2%);
- }
- &:last-child {
- border-bottom: 0;
- }
- &__header {
- display: flex;
- gap: 10px;
- justify-content: space-between;
- font-weight: 500;
- margin-bottom: 4px;
- }
- h6 {
- color: $secondary-text-color;
- font-size: inherit;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- }
|