style.css 95 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029
  1. /* General styles*/
  2. span {
  3. padding: 2px;
  4. }
  5. .styled-link {
  6. color: #FFA500;
  7. text-decoration: none;
  8. }
  9. p {
  10. white-space: pre-wrap;
  11. }
  12. hr {
  13. border: none;
  14. border-top: 1px solid #FFA500;
  15. margin: 10px 0;
  16. width: 100%;
  17. }
  18. /* Textarea, input, select styles */
  19. textarea, input, select {
  20. background-color: #444;
  21. color: #FFA500;
  22. border: 1px solid #333;
  23. padding: 10px;
  24. border-radius: 5px;
  25. width: 80%;
  26. font-size: 1em;
  27. margin-top: 10px;
  28. }
  29. input[type="text"], input[type="email"], input[type="password"], textarea {
  30. margin-bottom: 15px;
  31. }
  32. /* Body and overall page styles */
  33. html {
  34. color: #FFA500;
  35. }
  36. body {
  37. font-family: sans-serif;
  38. background-color: #000;
  39. color: #FFA500;
  40. margin: 0;
  41. padding: 0;
  42. display: flex;
  43. flex-direction: column;
  44. }
  45. /* Link styles */
  46. a {
  47. color: #FFA500;
  48. text-decoration: underline;
  49. }
  50. a:hover {
  51. text-decoration: underline;
  52. }
  53. .header {
  54. display: flex;
  55. justify-content: space-between;
  56. padding: 10px;
  57. align-items: center;
  58. }
  59. .update-banner {
  60. display: flex;
  61. align-items: center;
  62. justify-content: center;
  63. gap: 8px;
  64. padding: 6px 16px;
  65. font-size: 0.85em;
  66. letter-spacing: 0.3px;
  67. border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  68. }
  69. .update-banner-icon {
  70. font-size: 1.15em;
  71. animation: update-spin 2.5s linear infinite;
  72. }
  73. @keyframes update-spin {
  74. from { transform: rotate(0deg); }
  75. to { transform: rotate(360deg); }
  76. }
  77. .update-banner-text {
  78. opacity: 0.85;
  79. }
  80. .update-banner-link {
  81. font-weight: bold;
  82. text-decoration: underline;
  83. text-underline-offset: 2px;
  84. }
  85. .header-content {
  86. display: flex;
  87. align-items: center;
  88. flex-wrap: nowrap;
  89. overflow: hidden;
  90. }
  91. .avatar-profile {
  92. width: 40px;
  93. height: 40px;
  94. border-radius: 50%;
  95. margin-right: 10px;
  96. }
  97. .created-at,
  98. .author-name,
  99. .about-time,
  100. .time {
  101. margin-right: 10px;
  102. white-space: nowrap;
  103. }
  104. .author-name {
  105. font-weight: bold;
  106. }
  107. .created-at,
  108. .about-time,
  109. .time {
  110. font-size: 0.9rem;
  111. color: #ccc;
  112. }
  113. .time {
  114. font-size: 0.8rem;
  115. color: gray;
  116. }
  117. .time a {
  118. color: inherit;
  119. text-decoration: none;
  120. }
  121. form-button-group {
  122. display: flex;
  123. gap: 10px;
  124. flex-wrap: nowrap;
  125. justify-content: start;
  126. }
  127. .wallet-form-button-group-center {
  128. display: inline-flex;
  129. gap: 10px;
  130. justify-content: space-between;
  131. padding: 10px;
  132. align-items: center;
  133. }
  134. .conn-buttons {
  135. display: inline-flex;
  136. justify-content: space-between;
  137. padding: 10px;
  138. align-items: center;
  139. gap: 10px;
  140. }
  141. .left-bar {
  142. display: flex;
  143. align-items: center;
  144. }
  145. .right-bar {
  146. display: flex;
  147. align-items: center;
  148. }
  149. .search-input {
  150. width: 380px;
  151. height: 38px;
  152. }
  153. nav ul {
  154. list-style-type: none;
  155. padding: 0;
  156. }
  157. nav ul li {
  158. margin: 5px 0;
  159. }
  160. /* Logo and Navigation */
  161. .logo-icon {
  162. width: 50px;
  163. height: auto;
  164. margin-right: 15px;
  165. }
  166. nav ul {
  167. display: flex;
  168. list-style: none;
  169. margin: 0;
  170. }
  171. nav ul a {
  172. color: #FFA500;
  173. text-decoration: underline;
  174. padding: 10px;
  175. display: flex;
  176. }
  177. nav ul li {
  178. margin-right: 10px;
  179. padding: 2px;
  180. }
  181. nav ul li a {
  182. color: #FFA500;
  183. text-decoration: none;
  184. padding: 2px;
  185. display: block;
  186. }
  187. nav ul li a:hover {
  188. color: #FFD700;
  189. padding: 2px;
  190. text-decoration: underline;
  191. }
  192. /* nav menus */
  193. .oasis-nav-group {
  194. list-style: none;
  195. margin-bottom: 0.75rem;
  196. }
  197. .oasis-nav-toggle {
  198. display: none;
  199. }
  200. .oasis-nav-header {
  201. display: flex;
  202. align-items: center;
  203. justify-content: flex-start;
  204. cursor: pointer;
  205. padding: 0.5rem 0.75rem;
  206. font-weight: 600;
  207. font-size: 0.8rem;
  208. text-transform: uppercase;
  209. letter-spacing: 0.05em;
  210. color: #ffb400;
  211. transition: background 0.2s ease, color 0.2s ease;
  212. text-align: left;
  213. border: 1px solid rgba(255, 180, 0, 0.6);
  214. border-radius: 4px;
  215. margin: 0 0.25rem;
  216. box-sizing: border-box;
  217. }
  218. .oasis-nav-header:hover {
  219. background: rgba(255, 255, 255, 0.05);
  220. color: #ffd36a;
  221. }
  222. .oasis-nav-arrow {
  223. font-size: 0.7rem;
  224. margin-left: auto;
  225. transition: transform 0.2s ease;
  226. }
  227. .oasis-nav-header + .oasis-nav-list {
  228. margin-top: 0.35rem;
  229. }
  230. .oasis-nav-list {
  231. max-height: 0;
  232. overflow: hidden;
  233. transition: max-height 0.25s ease-out;
  234. padding-left: 0;
  235. margin: 0 0 0 0.75rem;
  236. }
  237. .oasis-nav-toggle:checked + .oasis-nav-header + .oasis-nav-list {
  238. max-height: 1000px;
  239. }
  240. .oasis-nav-toggle:checked + .oasis-nav-header .oasis-nav-arrow {
  241. transform: rotate(180deg);
  242. }
  243. .oasis-nav-list li {
  244. list-style: none;
  245. padding: 0;
  246. margin: 0;
  247. }
  248. .oasis-nav-list li a {
  249. display: flex;
  250. align-items: center;
  251. padding: 0.35rem 1.25rem 0.35rem 1.5rem;
  252. font-size: 0.85rem;
  253. text-decoration: none;
  254. opacity: 0.85;
  255. transition: opacity 0.15s ease;
  256. }
  257. .oasis-nav-list li a:hover {
  258. opacity: 1;
  259. }
  260. .oasis-nav-list .emoji {
  261. margin-right: 0.4rem;
  262. }
  263. .oasis-header-marquee {
  264. flex: 1;
  265. display: flex;
  266. align-items: center;
  267. justify-content: center;
  268. overflow: hidden;
  269. white-space: nowrap;
  270. font-size: 0.78rem;
  271. color: #ffc45a;
  272. }
  273. .oasis-header-marquee-inner {
  274. display: inline-block;
  275. padding: 0 1rem;
  276. animation: oasis-marquee 30s linear infinite;
  277. }
  278. .oasis-marquee-item {
  279. margin: 0 0.4rem;
  280. opacity: 0.9;
  281. }
  282. .oasis-marquee-separator {
  283. margin: 0 0.4rem;
  284. opacity: 0.5;
  285. }
  286. @keyframes oasis-marquee {
  287. 0% { transform: translateX(100%); }
  288. 100% { transform: translateX(-100%); }
  289. }
  290. /* Main content area + Menu */
  291. /*
  292. .main-content { border: 2px solid red !important; }
  293. .sidebar-left { border: 2px solid blue !important; }
  294. .main-column { border: 2px solid green !important; }
  295. .sidebar-right { border: 2px solid orange !important; }
  296. */
  297. .sidebar-left,
  298. .sidebar-right {
  299. background-color: #222;
  300. border: 1px solid #444;
  301. padding: 10px;
  302. min-width: 180px;
  303. max-width: 260px;
  304. flex-shrink: 0;
  305. box-sizing: border-box;
  306. }
  307. .main-content {
  308. display: flex;
  309. flex-direction: row;
  310. flex-wrap: nowrap;
  311. width: 100%;
  312. box-sizing: border-box;
  313. gap: 10px;
  314. min-width: 0;
  315. max-width: 100vw;
  316. }
  317. .main-column pre,
  318. .main-column code {
  319. white-space: pre-wrap;
  320. word-break: break-word;
  321. overflow-wrap: anywhere;
  322. }
  323. .main-column img {
  324. max-width: 100%;
  325. height: auto;
  326. display: block;
  327. }
  328. .main-column {
  329. background-color: #333;
  330. padding: 20px;
  331. flex-grow: 1;
  332. min-width: 0;
  333. max-width: 100%;
  334. border-radius: 5px;
  335. border: 1px solid #333;
  336. box-sizing: border-box;
  337. word-break: break-word;
  338. overflow-wrap: anywhere;
  339. }
  340. .main-column > *,
  341. .main-column details,
  342. .main-column section,
  343. .main-column article {
  344. min-width: 0;
  345. max-width: 100%;
  346. box-sizing: border-box;
  347. overflow-wrap: anywhere;
  348. word-break: break-word;
  349. }
  350. .main-column details,
  351. .main-column section {
  352. width: 100%;
  353. max-width: 100%;
  354. box-sizing: border-box;
  355. }
  356. .sidebar-left nav ul,
  357. .sidebar-right nav ul {
  358. display: block;
  359. }
  360. .sidebar-left nav ul li,
  361. .sidebar-right nav ul li {
  362. margin-bottom: 10px;
  363. }
  364. .sidebar-left nav ul li a,
  365. .sidebar-right nav ul li a,
  366. .header nav ul li a {
  367. display: flex;
  368. align-items: center;
  369. gap: 8px;
  370. padding: 8px 12px;
  371. border-radius: 6px;
  372. background-color: #1d1d1d;
  373. text-decoration: none;
  374. font-size: 15px;
  375. color: #ffa300;
  376. border: 1px solid #333;
  377. transition: background-color 0.2s ease, border-color 0.2s ease;
  378. }
  379. .sidebar-left nav ul li a:hover,
  380. .sidebar-right nav ul li a:hover,
  381. .header nav ul li a:hover {
  382. background-color: #2a2a2a;
  383. border-color: #555;
  384. }
  385. /* Header layout */
  386. .header {
  387. display: flex;
  388. justify-content: space-between;
  389. padding: 10px;
  390. align-items: center;
  391. }
  392. .top-bar-left,
  393. .top-bar-mid,
  394. .top-bar-right {
  395. display: flex;
  396. align-items: center;
  397. gap: 10px;
  398. border: 0px;
  399. }
  400. .top-bar-left {
  401. justify-content: flex-start;
  402. }
  403. .top-bar-mid {
  404. justify-content: center;
  405. }
  406. .top-bar-right {
  407. justify-content: flex-end;
  408. }
  409. .top-bar-left nav ul,
  410. .top-bar-mid nav ul,
  411. .top-bar-right nav ul {
  412. padding: 0;
  413. margin: 0;
  414. overflow-x: auto;
  415. }
  416. .logo-icon {
  417. width: 40px;
  418. height: 40px;
  419. margin-right: 10px;
  420. }
  421. /* Section styles */
  422. section {
  423. margin-bottom: 20px;
  424. color: #FFA500;
  425. }
  426. ul {
  427. padding: 1;
  428. margin: 10px 0;
  429. }
  430. ul li {
  431. margin: 10px 0;
  432. }
  433. /* Buttons */
  434. button, input[type="submit"], input[type="button"] {
  435. background-color: #FFA500;
  436. color: #000;
  437. border: 1px solid #FFA500;
  438. padding: 8px 16px;
  439. border-radius: 5px;
  440. cursor: pointer;
  441. font-size: 0.9em;
  442. transition: all 0.3s ease;
  443. margin-top: 4.5px;
  444. }
  445. button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  446. background-color: #FFD700;
  447. border-color: #FFD700;
  448. }
  449. /* Tables */
  450. table {
  451. width: 100%;
  452. border-collapse: collapse;
  453. margin-top: 20px;
  454. border: 1px solid #333;
  455. }
  456. table th, table td {
  457. padding: 10px;
  458. border: 1px solid #444;
  459. text-align: left;
  460. }
  461. table th {
  462. background-color: #222;
  463. }
  464. table tr:nth-child(even) {
  465. background-color: #444;
  466. }
  467. /* Media queries */
  468. @media (max-width: 768px) {
  469. .main-content {
  470. flex-direction: column;
  471. gap: 20px;
  472. }
  473. .sidebar-left, .sidebar-right {
  474. width: 100%;
  475. display: block;
  476. }
  477. .main-column {
  478. width: 100%;
  479. }
  480. }
  481. @media (max-width: 480px) {
  482. body {
  483. font-size: 14px;
  484. }
  485. h1, h2, h3 {
  486. font-size: 1.5em;
  487. }
  488. input, select {
  489. font-size: 0.9em;
  490. }
  491. }
  492. /* general styles */
  493. div {
  494. margin-bottom: 20px;
  495. padding: 20px;
  496. border-radius: 10px;
  497. background-color: #222;
  498. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  499. transition: all 0.3s ease-in-out;
  500. overflow: hidden;
  501. }
  502. div .header-content{
  503. width: 35%;
  504. }
  505. h1 {
  506. color: #FFA500;
  507. font-weight: bold;
  508. margin: 0;
  509. }
  510. .md-mention {
  511. font-size: 1.5em;
  512. font-weight: bold;
  513. margin: 20px 0;
  514. word-wrap: break-word;
  515. overflow-wrap: break-word;
  516. white-space: normal;
  517. user-select: text;
  518. }
  519. article {
  520. font-size: 1.1em;
  521. color: #FFF;
  522. margin-bottom: 20px;
  523. }
  524. .thread-view {
  525. width: 90%;
  526. }
  527. thread-container {
  528. width: 95%;
  529. }
  530. .profile {
  531. display: flex;
  532. flex-direction: column;
  533. align-items: center;
  534. text-align: center;
  535. margin-bottom: 10px;
  536. }
  537. .profile-metrics {
  538. display: flex;
  539. flex-direction: column;
  540. gap: 6px;
  541. }
  542. .profile-metrics .inhabitant-last-activity {
  543. align-self: center;
  544. }
  545. .inhabitant-last-activity .label {
  546. margin-right: 6px;
  547. }
  548. .avatar-container {
  549. display: flex;
  550. flex-direction: column;
  551. align-items: center;
  552. padding: 20px;
  553. border-radius: 16px;
  554. box-shadow: 0 8px 20px rgba(255, 165, 0, 0.25);
  555. max-width: 300px;
  556. margin: 0 auto 20px auto;
  557. transition: transform 0.3s ease;
  558. }
  559. .avatar-container:hover {
  560. transform: scale(1.05);
  561. }
  562. .avatar {
  563. width: 140px;
  564. height: 140px;
  565. border-radius: 50%;
  566. margin-bottom: 12px;
  567. box-shadow: 0 4px 10px rgba(255, 140, 0, 0.4);
  568. object-fit: cover;
  569. transition: border-color 0.3s ease;
  570. }
  571. .avatar:hover {
  572. border-color: #FFA500;
  573. }
  574. .name {
  575. font-size: 1.5em;
  576. font-weight: bold;
  577. }
  578. footer {
  579. clear: both;
  580. margin-top: 20px;
  581. padding: 10px 0;
  582. }
  583. footer div {
  584. display: flex;
  585. gap: 10px;
  586. }
  587. footer a {
  588. background-color: #FFA500;
  589. color: #000;
  590. padding: 8px 16px;
  591. border-radius: 5px;
  592. text-decoration: none;
  593. text-align: center;
  594. margin: 5px 0;
  595. transition: background-color 0.3s ease;
  596. }
  597. footer a:hover {
  598. background-color: #FFD700;
  599. border-color: #FFD700;
  600. }
  601. footer .btn {
  602. background-color: #FFA500;
  603. color: #000;
  604. padding: 8px 16px;
  605. border-radius: 5px;
  606. text-align: center;
  607. text-decoration: none;
  608. }
  609. footer .btn:hover {
  610. background-color: #FFD700;
  611. border-color: #FFD700;
  612. }
  613. footer .btn:hover {
  614. background-color: #007B9F;
  615. }
  616. /* Post preview */
  617. .mention {
  618. font-weight: bold;
  619. color: #ffcc00;
  620. text-decoration: none;
  621. }
  622. .mention:hover {
  623. text-decoration: underline;
  624. }
  625. .mentions-list {
  626. display: flex;
  627. flex-direction: column;
  628. gap: 12px;
  629. }
  630. .mention-item {
  631. padding: 12px;
  632. border: 1px solid #333;
  633. border-radius: 8px;
  634. background: rgba(255, 255, 255, 0.03);
  635. }
  636. .mention-content {
  637. margin-bottom: 8px;
  638. word-wrap: break-word;
  639. overflow-wrap: break-word;
  640. }
  641. .post-preview img {
  642. display: block;
  643. margin: 1em 0;
  644. max-width: 100%;
  645. border-radius: 8px;
  646. border: 2px solid #555;
  647. }
  648. .post-preview audio,
  649. .post-preview video {
  650. display: block;
  651. margin: 1.2em 0;
  652. max-width: 100%;
  653. }
  654. .thread-reply-item {
  655. margin-bottom: 18px;
  656. }
  657. .thread-reply-item:last-child {
  658. margin-bottom: 0;
  659. }
  660. .thread-reply-footer {
  661. display: flex;
  662. align-items: center;
  663. gap: 12px;
  664. flex-wrap: wrap;
  665. margin-top: 10px;
  666. padding: 0;
  667. border: none !important;
  668. background: transparent !important;
  669. box-shadow: none !important;
  670. }
  671. .thread-reply-footer .inline-form {
  672. display: inline-flex;
  673. margin: 0;
  674. }
  675. .thread-reply-footer .inline-form button {
  676. margin: 0;
  677. }
  678. .publish-textarea {
  679. min-height: 10em;
  680. padding: 0.75em;
  681. border: 1px solid #444;
  682. border-radius: 6px;
  683. font-family: sans-serif;
  684. font-size: 1em;
  685. line-height: 1.4;
  686. }
  687. .preview-text {
  688. background-color: #444;
  689. color: #FFA500;
  690. border: 1px solid #333;
  691. padding: 10px;
  692. border-radius: 5px;
  693. width: 80%;
  694. font-size: 1em;
  695. white-space: pre-wrap;
  696. word-wrap: break-word;
  697. line-height: 1.4;
  698. }
  699. /* Section, article, and message word-wrap */
  700. section, article, .message, .profile {
  701. word-wrap: break-word;
  702. overflow-wrap: break-word;
  703. word-break: break-word;
  704. }
  705. article img {
  706. max-width: 100%;
  707. height: auto;
  708. object-fit: contain;
  709. display: block;
  710. margin: 0 auto;
  711. }
  712. .post-image {
  713. max-width: 100%;
  714. height: auto;
  715. display: block;
  716. border-radius: 8px;
  717. margin: 8px 0;
  718. }
  719. .post-video {
  720. max-width: 100%;
  721. display: block;
  722. border-radius: 8px;
  723. margin: 8px 0;
  724. }
  725. .post-audio {
  726. width: 100%;
  727. display: block;
  728. margin: 8px 0;
  729. }
  730. .post-pdf {
  731. color: #FFA500;
  732. text-decoration: none;
  733. border-bottom: 1px dashed #FFA500;
  734. }
  735. .post-pdf:hover {
  736. text-decoration: underline;
  737. }
  738. /* Filters */
  739. button.filter-btn,
  740. a.filter-btn,
  741. button.create-button {
  742. font: inherit;
  743. padding: 10px 20px;
  744. margin-right: 10px;
  745. border-radius: 5px;
  746. border: 1px solid;
  747. cursor: pointer;
  748. transition: background-color .2s, border-color .2s;
  749. }
  750. button.filter-btn,
  751. a.filter-btn {
  752. background-color: #ff6600;
  753. border-color: #ff3300;
  754. color: #fff;
  755. text-decoration: none;
  756. display: inline-block;
  757. }
  758. button.filter-btn:hover,
  759. button.filter-btn.active,
  760. a.filter-btn:hover,
  761. a.filter-btn.active {
  762. background-color: #ff9900;
  763. border-color: #e68a00;
  764. color: #000;
  765. }
  766. button.create-button {
  767. background-color: #ffcc00;
  768. border-color: #e6b800;
  769. color: #000;
  770. }
  771. button.create-button:hover {
  772. background-color: #e6b800;
  773. border-color: #cca300;
  774. }
  775. /* Bookmarks */
  776. .bookmark-form input[type="text"],
  777. .bookmark-form textarea,
  778. .bookmark-form select {
  779. width: 100%;
  780. padding: 6px;
  781. font-size: 14px;
  782. border: 1px solid #333;
  783. border-radius: 4px;
  784. box-sizing: border-box;
  785. }
  786. .bookmark-form input[type="url"] {
  787. max-width: 800px;
  788. }
  789. .bookmark-form textarea {
  790. height: 80px;
  791. }
  792. .bookmark-form select {
  793. width: auto;
  794. max-width: 200px;
  795. }
  796. .bookmark-form label {
  797. margin-bottom: 15px;
  798. padding: 6px;
  799. }
  800. .bookmark-tags {
  801. margin-top: 1em;
  802. }
  803. .bookmark-url {
  804. color: #ff6600;
  805. text-decoration: none;
  806. font-weight: bold;
  807. font-size: 1.2em;
  808. word-wrap: break-word;
  809. margin-bottom: 1em;
  810. }
  811. .bookmark-url:hover {
  812. text-decoration: underline;
  813. }
  814. .filter-box {
  815. padding: 16px 18px;
  816. border-radius: 8px;
  817. border: 1px solid rgba(255, 255, 255, 0.08);
  818. background: rgba(0, 0, 0, 0.18);
  819. }
  820. .filter-box__input {
  821. width: 100%;
  822. box-sizing: border-box;
  823. height: 42px;
  824. padding: 10px 12px;
  825. border-radius: 4px;
  826. border: 1px solid rgba(255, 255, 255, 0.12);
  827. background: rgba(255, 255, 255, 0.12);
  828. color: #ffd700;
  829. outline: none;
  830. }
  831. .filter-box__input::placeholder {
  832. color: rgba(255, 215, 0, 0.75);
  833. }
  834. .filter-box__controls {
  835. display: flex;
  836. gap: 12px;
  837. align-items: center;
  838. margin-top: 14px;
  839. flex-wrap: wrap;
  840. }
  841. .filter-box__select {
  842. box-sizing: border-box;
  843. height: 36px;
  844. padding: 6px 10px;
  845. border-radius: 6px;
  846. border: 1px solid rgba(255, 255, 255, 0.12);
  847. background: rgba(255, 255, 255, 0.12);
  848. color: inherit;
  849. min-width: 170px;
  850. }
  851. .filter-box__button {
  852. height: 36px;
  853. padding: 0 14px;
  854. border-radius: 6px;
  855. border: 1px solid rgba(255, 255, 255, 0.12);
  856. background: rgba(255, 255, 255, 0.16);
  857. color: #ffd700;
  858. }
  859. .bookmark-topbar {
  860. display: flex;
  861. gap: 8px;
  862. flex-wrap: wrap;
  863. align-items: center;
  864. border:0px;
  865. }
  866. .bookmark-topbar-left {
  867. display: flex;
  868. gap: 8px;
  869. flex-wrap: wrap;
  870. align-items: center;
  871. }
  872. .bookmark-topbar-left form {
  873. margin: 0;
  874. }
  875. .bookmark-actions {
  876. display: flex;
  877. gap: 8px;
  878. flex-wrap: wrap;
  879. border: 0px;
  880. }
  881. .tags-header h2 {
  882. color: #ffa300;
  883. }
  884. .tags-container {
  885. display: flex;
  886. flex-wrap: wrap;
  887. }
  888. .tag-link {
  889. display: inline-block;
  890. color: #ff6600;
  891. padding: 0.2em 0.6em;
  892. font-size: 0.9em;
  893. text-decoration: none;
  894. margin-right: 1em;
  895. margin-bottom: 0.5em;
  896. }
  897. .tag-checkboxes-table {
  898. margin-top: 1rem;
  899. width: 100%;
  900. border-collapse: collapse;
  901. color: yellow;
  902. }
  903. .tag-checkboxes-table td {
  904. padding: 0.5rem 1rem;
  905. white-space: nowrap;
  906. vertical-align: middle;
  907. }
  908. .input-checkbox {
  909. transform: scale(1.2);
  910. }
  911. /* Inhabitants */
  912. .inhabitant-card {
  913. display: flex;
  914. flex-wrap: nowrap;
  915. align-items: flex-start;
  916. gap: 1rem;
  917. }
  918. .inhabitant-left {
  919. display: flex;
  920. flex-direction: column;
  921. align-items: center;
  922. gap: 4px;
  923. width: 300px;
  924. flex: 0 0 300px;
  925. }
  926. .inhabitant-left a {
  927. display: block;
  928. width: 100%;
  929. }
  930. .inhabitant-left h2 {
  931. margin: 4px 0 0;
  932. line-height: 1.1;
  933. }
  934. .inhabitant-photo {
  935. width: 100% !important;
  936. height: 100% !important;
  937. border-radius: 50%;
  938. border: 3px solid #ffa500;
  939. display: block;
  940. margin: 0 auto;
  941. }
  942. .inhabitant-photo-details {
  943. width: 100% !important;
  944. height: 100% !important;
  945. max-width: none !important;
  946. object-fit: cover;
  947. border-radius: 50%;
  948. border: 2px solid #ffa500;
  949. display: block;
  950. margin: 0 auto;
  951. }
  952. .inhabitant-details {
  953. display: flex;
  954. flex-direction: column;
  955. gap: 6px;
  956. flex: 1;
  957. min-width: 0;
  958. }
  959. .inhabitant-activity-group {
  960. display: flex;
  961. flex-direction: column;
  962. gap: 2px;
  963. margin-top: 6px;
  964. }
  965. .inhabitant-last-activity {
  966. margin-top: 0;
  967. display: flex;
  968. border: 0;
  969. align-items: center;
  970. gap: 6px;
  971. }
  972. .activity-dot {
  973. display: inline-block;
  974. font-size: 1em;
  975. line-height: 1;
  976. vertical-align: middle;
  977. }
  978. .activity-dot.green {
  979. color: #2ecc71;
  980. }
  981. .activity-dot.orange {
  982. color: #f39c12;
  983. }
  984. .activity-dot.red {
  985. color: #e74c3c;
  986. }
  987. .profile-last-seen,
  988. .profile-device {
  989. display: block;
  990. font-size: 13px;
  991. color: #888;
  992. margin-top: 4px;
  993. }
  994. .device-kit {
  995. color: green;
  996. font-weight: bold;
  997. }
  998. .device-desktop {
  999. color: yellow;
  1000. font-weight: bold;
  1001. }
  1002. .device-mobile {
  1003. color: red;
  1004. font-weight: bold;
  1005. }
  1006. .activity-filters{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:12px}
  1007. .activity-filter-col{display:flex;flex-direction:column;gap:8px}
  1008. .activity-search{display:flex;gap:12px;align-items:center;margin:14px 0 18px 0;flex-wrap:wrap}
  1009. .activity-search-input{min-width:240px;max-width:520px;width:100%}
  1010. .post-text-pre{white-space:pre-wrap}
  1011. .activity-image-thumb{width:100%;max-width:720px;height:auto;border-radius:14px;object-fit:cover}
  1012. .activity-avatar{width:256px;height:256px;}
  1013. .activity-pub{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  1014. .activity-pub-title{margin:0}
  1015. .activity-pub-title .user-link{display:inline}
  1016. .activity-contact-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  1017. .activity-contact-arrow{opacity:.85}
  1018. .reply-context{margin:0 0 .55rem 0;padding:.5rem .6rem;border-radius:12px;background:rgba(255,255,255,.04)}
  1019. .reply-context-author{margin-left:.45rem}
  1020. .reply-context-text{margin:.35rem 0 0 0;opacity:.92;font-size:.97em}
  1021. .activity-spread-title{margin:.25rem 0 .55rem 0;font-size:1.08em}
  1022. .activity-spread-text{line-height:1.45;font-size:1.02em;word-break:break-word;overflow-wrap:anywhere}
  1023. .activity-contact {
  1024. display: flex;
  1025. align-items: center;
  1026. gap: 12px;
  1027. flex-wrap: wrap;
  1028. }
  1029. .activity-contact-avatar-link {
  1030. display: inline-flex;
  1031. align-items: center;
  1032. justify-content: center;
  1033. }
  1034. .activity-contact-avatar {
  1035. width: 256px;
  1036. height: 256px;
  1037. object-fit: cover;
  1038. border-radius: 12px;
  1039. }
  1040. .activity-contact-arrow {
  1041. font-weight: 800;
  1042. opacity: 0.85;
  1043. }
  1044. /* Documents */
  1045. .pdf-viewer-container {
  1046. width: 100%;
  1047. max-width: 100%;
  1048. background: #1e1e1e;
  1049. margin-bottom: 1rem;
  1050. padding: 1rem;
  1051. border-radius: 6px;
  1052. box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  1053. }
  1054. .pdf-viewer-container canvas {
  1055. display: block;
  1056. margin: 0 auto;
  1057. border: 1px solid #333;
  1058. background-color: #fff;
  1059. }
  1060. .pdf-viewer-container div {
  1061. margin-top: 1rem;
  1062. }
  1063. .pdf-viewer-container button {
  1064. background-color: #2d2d2d;
  1065. color: #eee;
  1066. border: none;
  1067. padding: 0.4rem 0.8rem;
  1068. font-size: 1rem;
  1069. cursor: pointer;
  1070. border-radius: 4px;
  1071. transition: background-color 0.2s ease;
  1072. }
  1073. .pdf-viewer-container button:hover {
  1074. background-color: #444;
  1075. }
  1076. .pdf-viewer-container span {
  1077. color: #ccc;
  1078. margin: 0 1rem;
  1079. font-family: monospace;
  1080. }
  1081. /* CVs */
  1082. .cv-photo {
  1083. width: 200px;
  1084. height: 200px;
  1085. object-fit: cover;
  1086. border-radius: 50%;
  1087. }
  1088. .cv-item {
  1089. padding: 20px;
  1090. border: 1px solid #ddd;
  1091. margin-bottom: 20px;
  1092. }
  1093. .cv-section {
  1094. padding: 20px;
  1095. }
  1096. .no-cv {
  1097. padding: 20px;
  1098. text-align: center;
  1099. }
  1100. .checkbox-oasisContributor {
  1101. display: table-cell;
  1102. align-items: center;
  1103. gap: 0.5em;
  1104. }
  1105. .action-card {
  1106. padding: 1em;
  1107. border-bottom: 1px solid #333;
  1108. margin-bottom: 1em;
  1109. }
  1110. .action-meta {
  1111. font-size: 0.9em;
  1112. color: #FFA500;
  1113. }
  1114. .feed-image {
  1115. max-width: 100%;
  1116. height: auto;
  1117. border-radius: 6px;
  1118. }
  1119. .feed-search-form {
  1120. display: flex;
  1121. align-items: center;
  1122. gap: 10px;
  1123. flex-wrap: wrap;
  1124. }
  1125. .feed-search-input {
  1126. flex: 1 1 260px;
  1127. min-width: 220px;
  1128. height: 40px;
  1129. box-sizing: border-box;
  1130. }
  1131. .feed-search-btn {
  1132. height: 40px;
  1133. display: inline-flex;
  1134. align-items: center;
  1135. box-sizing: border-box;
  1136. }
  1137. .type-label {
  1138. font-weight: bold;
  1139. margin-top: 0.5em;
  1140. }
  1141. .content-text {
  1142. margin: 0.5em 0;
  1143. }
  1144. .filters {
  1145. margin-bottom:16px;
  1146. }
  1147. .mode-buttons {
  1148. display:flex; gap:8px; margin-top:16px;
  1149. }
  1150. .mention-avatar {
  1151. width: 50px;
  1152. height: 50px;
  1153. border-radius: 50%;
  1154. margin-right: 10px;
  1155. }
  1156. .tribe-card-image {
  1157. width: 100%;
  1158. max-height: 300px;
  1159. object-fit: cover;
  1160. border-radius: 6px;
  1161. margin-bottom: 8px;
  1162. }
  1163. .tribe-feed {
  1164. background-color: #111;
  1165. padding: 16px;
  1166. border-radius: 8px;
  1167. }
  1168. .tribe-feed-full {
  1169. width: 100%;
  1170. background-color: #222;
  1171. padding: 16px;
  1172. border-radius: 8px;
  1173. box-sizing: border-box;
  1174. }
  1175. .feed-actions {
  1176. display: flex;
  1177. gap: 8px;
  1178. margin-bottom: 16px;
  1179. }
  1180. .vote-actions {
  1181. display: flex;
  1182. gap: 8px;
  1183. margin-bottom: 16px;
  1184. }
  1185. .feed-list {
  1186. display: flex;
  1187. flex-direction: column;
  1188. gap: 12px;
  1189. margin-bottom: 16px;
  1190. }
  1191. .feed-item {
  1192. background-color: #1c1c1c;
  1193. padding: 12px;
  1194. border-radius: 6px;
  1195. color: #f0f0f0;
  1196. }
  1197. .feed-item p {
  1198. margin: 4px 0;
  1199. }
  1200. .feed-item form {
  1201. margin-top: 8px;
  1202. }
  1203. .feed-item button {
  1204. background-color: orange;
  1205. color: black;
  1206. border: none;
  1207. padding: 6px 12px;
  1208. border-radius: 4px;
  1209. cursor: pointer;
  1210. }
  1211. .feed-item button:disabled {
  1212. background-color: #555;
  1213. cursor: not-allowed;
  1214. }
  1215. .tribe-feed .feed-row,
  1216. .tribe-feed-full .feed-row {
  1217. display: flex;
  1218. align-items: flex-start;
  1219. gap: 12px;
  1220. }
  1221. .tribe-feed .refeed-column,
  1222. .tribe-feed-full .refeed-column {
  1223. flex: 0 0 68px;
  1224. min-width: 68px;
  1225. max-width: 68px;
  1226. padding: 10px 8px;
  1227. }
  1228. .tribe-feed .refeed-column h1,
  1229. .tribe-feed-full .refeed-column h1 {
  1230. margin: 0 0 8px 0;
  1231. font-size: 24px;
  1232. }
  1233. .tribe-feed .refeed-btn,
  1234. .tribe-feed-full .refeed-btn {
  1235. padding: 6px 8px;
  1236. font-size: 12px;
  1237. width: 100%;
  1238. }
  1239. .tribe-feed .feed-main,
  1240. .tribe-feed-full .feed-main {
  1241. flex: 1 1 auto;
  1242. min-width: 0;
  1243. overflow-wrap: anywhere;
  1244. word-break: break-word;
  1245. }
  1246. @media (max-width: 720px) {
  1247. .tribe-feed .feed-row,
  1248. .tribe-feed-full .feed-row {
  1249. flex-direction: column;
  1250. }
  1251. .tribe-feed .refeed-column,
  1252. .tribe-feed-full .refeed-column {
  1253. width: 100%;
  1254. min-width: 0;
  1255. max-width: none;
  1256. align-items: flex-start;
  1257. }
  1258. }
  1259. .tribe-feed .feed-actions,
  1260. .tribe-feed-full .feed-actions {
  1261. display: flex;
  1262. gap: 8px;
  1263. flex-wrap: wrap;
  1264. margin-bottom: 8px;
  1265. }
  1266. .tribe-feed .feed-actions form,
  1267. .tribe-feed-full .feed-actions form,
  1268. .tribe-feed .refeed-column form,
  1269. .tribe-feed-full .refeed-column form {
  1270. margin: 0;
  1271. }
  1272. .tribe-feed-compose {
  1273. display: grid;
  1274. grid-template-columns: 1fr auto;
  1275. gap: 12px;
  1276. margin-top: 14px;
  1277. align-items: end;
  1278. }
  1279. .tribe-feed-compose textarea {
  1280. width: 100%;
  1281. min-width: 0;
  1282. padding: 12px;
  1283. border-radius: 10px;
  1284. border: 1px solid #444;
  1285. background: #222;
  1286. color: #eee;
  1287. resize: vertical;
  1288. min-height: 120px;
  1289. line-height: 1.45;
  1290. box-sizing: border-box;
  1291. }
  1292. .tribe-feed-compose .tribe-feed-send {
  1293. height: 40px;
  1294. padding: 0 14px;
  1295. border-radius: 10px;
  1296. white-space: nowrap;
  1297. }
  1298. @media (max-width: 720px) {
  1299. .tribe-feed-compose {
  1300. grid-template-columns: 1fr;
  1301. }
  1302. .tribe-feed-compose .tribe-feed-send {
  1303. width: 100%;
  1304. }
  1305. }
  1306. .tribes-container{
  1307. display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:20px; margin-top:16px;
  1308. }
  1309. .tribe-card {
  1310. background: #2c2f33;
  1311. border-radius: 8px;
  1312. border: 1px solid #444;
  1313. overflow: hidden;
  1314. display: flex;
  1315. flex-direction: column;
  1316. }
  1317. .tribe-details {
  1318. display: flex;
  1319. background: #2c2f33;
  1320. border-radius: 12px;
  1321. padding: 24px;
  1322. gap: 24px;
  1323. }
  1324. .tribe-main {
  1325. display: flex;
  1326. flex-direction: column;
  1327. gap: 16px;
  1328. flex: 1;
  1329. min-width: 0;
  1330. }
  1331. .tribe-side {
  1332. display: flex;
  1333. background: #2c2f33;
  1334. width: 300px;
  1335. flex-shrink: 0;
  1336. flex-direction: column;
  1337. gap: 16px;
  1338. }
  1339. @media (max-width: 768px) {
  1340. .tribe-details {
  1341. flex-direction: column;
  1342. }
  1343. .tribe-side {
  1344. width: 100%;
  1345. }
  1346. }
  1347. .filter-btn,.create-button,.edit-btn,.delete-btn,.join-btn,.leave-btn,.buy-btn
  1348. {
  1349. padding:8px 12px; border:none; border-radius:4px; cursor:pointer; background:#ff6600; color:#fff;
  1350. }
  1351. .filter-btn.active {
  1352. background:#ffa500;
  1353. }
  1354. .create-button {
  1355. background:#ffcc00; color:#000;
  1356. }
  1357. .gallery {
  1358. display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; padding:10px;
  1359. }
  1360. .gallery-item img {
  1361. width:100%; max-height:200px; object-fit:cover; border-radius:6px; transition:transform .2s;
  1362. }
  1363. .gallery-item:hover img {
  1364. transform:scale(1.05);
  1365. }
  1366. .tribe-detail-image {
  1367. width:100%; max-width:200px; max-height:300px; object-fit:cover; margin:16px 0; border-radius:6px;
  1368. }
  1369. .activity-image-preview {
  1370. width: 400px;
  1371. height: 300px;
  1372. object-fit: contain;
  1373. border: 0px;
  1374. }
  1375. .media-preview {
  1376. max-width: 100%;
  1377. height: auto;
  1378. display: block;
  1379. }
  1380. .meme-checkbox {
  1381. width: 1%;
  1382. }
  1383. .image-detail {
  1384. width: 100%;
  1385. max-width: 400px;
  1386. max-height: 300px;
  1387. object-fit: cover;
  1388. border-radius: 6px;
  1389. margin-bottom: 8px;
  1390. }
  1391. .div-center.image-form .image-detail {
  1392. max-width: 200px;
  1393. max-height: 150px;
  1394. object-fit: contain;
  1395. }
  1396. .gallery {
  1397. display: grid;
  1398. grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  1399. gap: 10px;
  1400. padding: 10px;
  1401. }
  1402. .gallery-item img {
  1403. width: 100%;
  1404. max-height: 200px;
  1405. object-fit: cover;
  1406. border-radius: 6px;
  1407. transition: transform .2s;
  1408. }
  1409. .gallery-item:hover img {
  1410. transform: scale(1.05);
  1411. }
  1412. .lightbox {
  1413. display: none;
  1414. position: fixed;
  1415. top: 0; left: 0;
  1416. width: 100%; height: 100%;
  1417. background: rgba(0,0,0,0.85);
  1418. justify-content: center;
  1419. align-items: center;
  1420. z-index: 10000;
  1421. }
  1422. .lightbox:target {
  1423. display: flex;
  1424. }
  1425. .lightbox img {
  1426. max-width: 90%;
  1427. max-height: 90%;
  1428. object-fit: contain;
  1429. border-radius: 6px;
  1430. }
  1431. .lightbox-close {
  1432. position: absolute;
  1433. top: 15px;
  1434. right: 60px;
  1435. width: 42px;
  1436. height: 42px;
  1437. background: rgba(0, 0, 0, 0.6);
  1438. border-radius: 50%;
  1439. color: #fff;
  1440. font-size: 1.5em;
  1441. text-align: center;
  1442. line-height: 32px;
  1443. text-decoration: none;
  1444. }
  1445. /* Opinions */
  1446. .voting-buttons {
  1447. display: flex;
  1448. gap: 10px;
  1449. margin-top: 10px;
  1450. }
  1451. .opinion-card {
  1452. background-color: #1c1c1c;
  1453. border: 1px solid #333;
  1454. border-radius: 10px;
  1455. padding: 16px;
  1456. margin-bottom: 24px;
  1457. color: #FFA500;
  1458. }
  1459. .opinion-card h3 {
  1460. margin-bottom: 8px;
  1461. }
  1462. .opinion-card p {
  1463. margin: 4px 0;
  1464. color: #FFD700;
  1465. }
  1466. /* Events */
  1467. .event-tags {
  1468. margin-top: 12px;
  1469. }
  1470. .event-tags .tag {
  1471. display: inline-block;
  1472. background-color: #2a2a2a;
  1473. color: #FFA500;
  1474. padding: 4px 10px;
  1475. margin: 4px 4px 0 0;
  1476. border-radius: 6px;
  1477. font-size: 13px;
  1478. }
  1479. /* Tasks */
  1480. .task-id {
  1481. color: #FFA500;
  1482. font-weight: bold;
  1483. margin: 0;
  1484. }
  1485. /* Governance */
  1486. .vote-buttons-row {
  1487. display: flex;
  1488. gap: 10px;
  1489. flex-wrap: nowrap;
  1490. justify-content: start;
  1491. }
  1492. .conn-actions {
  1493. display: flex;
  1494. gap: 10px;
  1495. margin-top: 10px;
  1496. }
  1497. .inhabitant-action {
  1498. display: flex;
  1499. gap: 10px;
  1500. margin-top: 10px;
  1501. }
  1502. .transfer-actions {
  1503. display: flex;
  1504. gap: 10px;
  1505. margin-top: 10px;
  1506. }
  1507. .transfer-topbar-left {
  1508. display: flex;
  1509. gap: 8px;
  1510. flex-wrap: wrap;
  1511. align-items: center;
  1512. }
  1513. .transfer-chips {
  1514. display: flex;
  1515. gap: 8px;
  1516. flex-wrap: wrap;
  1517. align-items: center;
  1518. }
  1519. .transfer-voting-buttons {
  1520. display: flex;
  1521. gap: 8px;
  1522. flex-wrap: wrap;
  1523. }
  1524. .confirmations-block {
  1525. margin-top: 6px;
  1526. }
  1527. .confirmations-progress {
  1528. width: 260px;
  1529. max-width: 100%;
  1530. height: 8px;
  1531. border-radius: 999px;
  1532. overflow: hidden;
  1533. background: rgba(255, 255, 255, 0.12);
  1534. appearance: none;
  1535. }
  1536. .confirmations-progress::-webkit-progress-bar {
  1537. background: rgba(255, 255, 255, 0.12);
  1538. }
  1539. .confirmations-progress::-webkit-progress-value {
  1540. background: rgba(255, 255, 255, 0.65);
  1541. }
  1542. .confirmations-progress::-moz-progress-bar {
  1543. background: rgba(255, 255, 255, 0.65);
  1544. }
  1545. .transfer-range {
  1546. display: flex;
  1547. gap: 8px;
  1548. align-items: center;
  1549. }
  1550. .transfer-amount-input {
  1551. width: 120px;
  1552. }
  1553. .market-item-actions {
  1554. display: flex;
  1555. gap: 10px;
  1556. margin-top: 10px;
  1557. }
  1558. .job-actions {
  1559. display: flex;
  1560. gap: 10px;
  1561. margin-top: 10px;
  1562. }
  1563. .tribe-actions {
  1564. display: flex;
  1565. gap: 10px;
  1566. margin-top: 10px;
  1567. }
  1568. .audio-actions {
  1569. display: flex;
  1570. gap: 10px;
  1571. margin-top: 10px;
  1572. }
  1573. .video-actions {
  1574. display: flex;
  1575. gap: 10px;
  1576. margin-top: 10px;
  1577. }
  1578. .document-actions {
  1579. display: flex;
  1580. gap: 10px;
  1581. margin-top: 10px;
  1582. }
  1583. .event-actions {
  1584. display: flex;
  1585. gap: 10px;
  1586. margin-top: 10px;
  1587. }
  1588. .feed-actions {
  1589. display: flex;
  1590. gap: 10px;
  1591. margin-top: 10px;
  1592. }
  1593. .image-actions {
  1594. display: flex;
  1595. gap: 10px;
  1596. margin-top: 10px;
  1597. }
  1598. .task-actions {
  1599. display: flex;
  1600. gap: 10px;
  1601. align-items: center;
  1602. flex-wrap: wrap;
  1603. }
  1604. .task-actions > form {
  1605. margin: 0;
  1606. }
  1607. .task-actions .project-control-form,
  1608. .task-actions .project-control-form--status {
  1609. margin: 0;
  1610. padding: 0;
  1611. }
  1612. .task-actions .project-control-form--status {
  1613. display: flex;
  1614. align-items: center;
  1615. gap: 10px;
  1616. }
  1617. .task-actions .project-control-select,
  1618. .task-actions .project-control-btn {
  1619. margin: 0;
  1620. }
  1621. .task-actions button {
  1622. display: inline-flex;
  1623. align-items: center;
  1624. justify-content: center;
  1625. }
  1626. .report-actions{
  1627. display:flex;
  1628. align-items:center;
  1629. gap:10px;
  1630. flex-wrap:wrap;
  1631. }
  1632. .report-actions form{ margin:0; }
  1633. .report-actions button,
  1634. .report-actions select{
  1635. height:40px;
  1636. }
  1637. .cv-filter-form {
  1638. display: flex;
  1639. gap: 8px;
  1640. flex-wrap: wrap;
  1641. align-items: flex-end;
  1642. }
  1643. .cv-filter-submit {
  1644. width: 100%;
  1645. margin-top: 4px;
  1646. }
  1647. .cv-actions {
  1648. display: flex;
  1649. flex-direction: column;
  1650. gap: 8px;
  1651. margin-top: 12px;
  1652. }
  1653. .card-salary {
  1654. display: inline-block;
  1655. font-weight: 700;
  1656. font-size: 1.2em;
  1657. letter-spacing: 0.02em;
  1658. }
  1659. .mode-buttons {
  1660. display: flex;
  1661. gap: 10px;
  1662. margin-top: 10px;
  1663. }
  1664. /* Tags */
  1665. .tag-cloud-wrap {
  1666. display: flex;
  1667. flex-wrap: wrap;
  1668. justify-content: center;
  1669. align-items: center;
  1670. padding: 1em;
  1671. width: 97%;
  1672. height: auto;
  1673. background: #111;
  1674. border: 1px solid #333;
  1675. border-radius: 8px;
  1676. margin: 1em auto;
  1677. gap: 0.8em;
  1678. }
  1679. .tag-cloud-item {
  1680. display: inline-block;
  1681. font-weight: 600;
  1682. text-decoration: none;
  1683. white-space: nowrap;
  1684. transition: transform 0.2s ease, color 0.2s ease;
  1685. }
  1686. .tag-cloud-item:hover {
  1687. transform: scale(1.3);
  1688. color: #FFA500 !important;
  1689. z-index: 10;
  1690. }
  1691. /* Feed */
  1692. .feed-card {
  1693. border: 1px solid #444;
  1694. border-radius: 12px;
  1695. padding: 16px;
  1696. margin-bottom: 24px;
  1697. background-color: #1c1c1c;
  1698. }
  1699. .feed-row {
  1700. display: flex;
  1701. flex-direction: row;
  1702. align-items: flex-start;
  1703. gap: 20px;
  1704. }
  1705. .refeed-column {
  1706. text-align: center;
  1707. border-right: 1px solid #555;
  1708. padding-right: 12px;
  1709. }
  1710. .refeed-column h1 {
  1711. font-size: 28px;
  1712. margin: 0;
  1713. color: #FFA500;
  1714. }
  1715. .refeed-btn {
  1716. margin-top: 10px;
  1717. background-color: #FFA500;
  1718. border: none;
  1719. padding: 6px 12px;
  1720. border-radius: 6px;
  1721. font-weight: bold;
  1722. color: #000;
  1723. cursor: pointer;
  1724. transition: background-color 0.2s ease-in-out;
  1725. }
  1726. .refeed-btn:hover {
  1727. background-color: #cc8500;
  1728. }
  1729. .feed-main {
  1730. flex: 1;
  1731. }
  1732. .feed-text {
  1733. background-color: #2a2a2a;
  1734. padding: 10px;
  1735. border-radius: 6px;
  1736. color: #FFD700;
  1737. margin-bottom: 8px;
  1738. margin-right: 15px;
  1739. word-wrap: break-word;
  1740. }
  1741. .feed-main a {
  1742. text-decoration: underline;
  1743. }
  1744. .feed-main a:hover {
  1745. text-decoration: underline;
  1746. }
  1747. .votes-wrapper {
  1748. margin-top: 16px;
  1749. padding-top: 12px;
  1750. border-top: 1px solid #444;
  1751. }
  1752. .votes {
  1753. display: flex;
  1754. flex-wrap: wrap;
  1755. gap: 8px;
  1756. }
  1757. .vote-category {
  1758. background-color: #333;
  1759. color: #FFA500;
  1760. padding: 6px 10px;
  1761. border-radius: 6px;
  1762. font-size: 14px;
  1763. }
  1764. .voting-buttons {
  1765. display: flex;
  1766. flex-wrap: wrap;
  1767. gap: 10px;
  1768. margin-top: 12px;
  1769. }
  1770. .vote-btn {
  1771. background-color: #FFA500;
  1772. border: none;
  1773. color: #000;
  1774. padding: 6px 10px;
  1775. border-radius: 6px;
  1776. font-weight: bold;
  1777. cursor: pointer;
  1778. }
  1779. .vote-btn:hover {
  1780. background-color: #cc8500;
  1781. }
  1782. /* Pixelia Grid */
  1783. .pixelia-form-wrap {
  1784. display: flex;
  1785. justify-content: flex-start;
  1786. margin-bottom: 12px;
  1787. }
  1788. .pixel-color-000000 { background-color: #000000; }
  1789. .pixel-color-ffffff { background-color: #ffffff; }
  1790. .pixel-color-17f018 { background-color: #17f018; }
  1791. .pixel-color-ffbb00 { background-color: #ffbb00; }
  1792. .pixel-color-ff0000 { background-color: #ff0000; }
  1793. .pixel-color-0000ff { background-color: #0000ff; }
  1794. .pixel-color-ffff00 { background-color: #ffff00; }
  1795. .pixel-color-00ff00 { background-color: #00ff00; }
  1796. .pixel-color-00ffff { background-color: #00ffff; }
  1797. .pixel-color-ff00ff { background-color: #ff00ff; }
  1798. .pixel-color-a52a2a { background-color: #a52a2a; }
  1799. .pixel-color-800080 { background-color: #800080; }
  1800. .pixel-color-808000 { background-color: #808000; }
  1801. .pixel-color-00bfff { background-color: #00bfff; }
  1802. .pixel-color-d3d3d3 { background-color: #d3d3d3; }
  1803. .pixel-color-ff6347 { background-color: #ff6347; }
  1804. .pixel-empty { background-color: #1a1a1a; }
  1805. .pixel-cell {
  1806. width: 0.1px;
  1807. height: 0.1px;
  1808. }
  1809. /* Market */
  1810. .market-grid {
  1811. display: grid;
  1812. grid-template-columns: repeat(3, 1fr);
  1813. gap: 20px;
  1814. justify-content: center;
  1815. }
  1816. .market-card {
  1817. background-color: #2c2c2c;
  1818. border-radius: 16px;
  1819. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  1820. transition: all 0.3s ease;
  1821. display: flex;
  1822. flex-direction: column;
  1823. justify-content: space-between;
  1824. text-align: center;
  1825. }
  1826. .market-comments {
  1827. background: #2f2f2f;
  1828. border-radius: 12px;
  1829. padding: 12px;
  1830. }
  1831. .market-comments .votations-comment-card {
  1832. background: #3a3a3a;
  1833. }
  1834. .countdown-strong {
  1835. font-weight: 700;
  1836. }
  1837. .market-card-image {
  1838. width: 100%;
  1839. max-height: 150px;
  1840. object-fit: contain;
  1841. border-radius: 8px;
  1842. margin-bottom: 15px;
  1843. }
  1844. .market-card-title {
  1845. font-size: 1.3em;
  1846. font-weight: bold;
  1847. color: #ffd600;
  1848. margin-bottom: 10px;
  1849. overflow: hidden;
  1850. white-space: nowrap;
  1851. text-overflow: ellipsis;
  1852. }
  1853. .market-card-description {
  1854. font-size: 0.9em;
  1855. color: #ccc;
  1856. margin-bottom: 10px;
  1857. overflow: hidden;
  1858. text-overflow: ellipsis;
  1859. white-space: nowrap;
  1860. }
  1861. .market-card-footer {
  1862. margin-top: auto;
  1863. display: flex;
  1864. flex-direction: column;
  1865. gap: 8px;
  1866. font-size: 1.1em;
  1867. color: #ffd600;
  1868. }
  1869. .market-card-footer .condition,
  1870. .market-card-footer .stock {
  1871. font-size: 1em;
  1872. color: #ff9900;
  1873. }
  1874. .market-card-footer .stock {
  1875. font-weight: bold;
  1876. color: #ff0000;
  1877. }
  1878. .market-card.price {
  1879. font-size: 1.3em;
  1880. font-weight: bold;
  1881. }
  1882. /*avatar relationships*/
  1883. .relationship-status {
  1884. display: flex;
  1885. flex-direction: row;
  1886. gap: 0.5rem;
  1887. justify-content: center;
  1888. margin: 0.8rem 0 0.5rem 0;
  1889. }
  1890. .status {
  1891. padding: 0.2rem 0.6rem;
  1892. border: 1px solid #555;
  1893. border-radius: 4px;
  1894. background-color: #2a2a2a;
  1895. font-size: 0.9rem;
  1896. color: #e0e0e0;
  1897. }
  1898. .status.mutual {
  1899. border-color: #557d3b;
  1900. color: #8bc34a;
  1901. }
  1902. .status.supporting {
  1903. border-color: #997f2e;
  1904. color: #f0c674;
  1905. }
  1906. .status.supported-by {
  1907. border-color: #3a6f9c;
  1908. color: #6ab0f3;
  1909. }
  1910. .status.blocked {
  1911. color: #ff5555;
  1912. border-color: #802020;
  1913. }
  1914. .status.blocked-by {
  1915. color: #ff8888;
  1916. border-color: #a04040;
  1917. }
  1918. .status.you {
  1919. padding: 0.2rem 0.6rem;
  1920. border: 1px solid #555;
  1921. border-radius: 4px;
  1922. background-color: #2a2a2a;
  1923. font-size: 0.9rem;
  1924. color: #FFDD44;
  1925. border-color: #FF6A00;
  1926. font-weight: bold;
  1927. }
  1928. /*forums*/
  1929. .forum-list {
  1930. display: flex;
  1931. flex-direction: column;
  1932. gap: 0.5em;
  1933. }
  1934. .forum-card {
  1935. display: flex;
  1936. flex-direction: row;
  1937. align-items: stretch;
  1938. border-bottom: 1px solid #262626;
  1939. padding: 12px 0 16px 0;
  1940. gap: 1.1em;
  1941. background: none;
  1942. }
  1943. .visit-forum-form {
  1944. display: flex;
  1945. justify-content: center;
  1946. margin-top: 10px;
  1947. }
  1948. .forum-score-col {
  1949. min-width: 78px;
  1950. display: flex;
  1951. align-items: center;
  1952. justify-content: center;
  1953. }
  1954. .forum-score-box {
  1955. background: #22201a;
  1956. border-radius: 12px;
  1957. box-shadow: 0 0 0.5em #111b;
  1958. display: flex;
  1959. flex-direction: column;
  1960. align-items: center;
  1961. justify-content: center;
  1962. min-width: 56px;
  1963. min-height: 134px;
  1964. padding: 8px 0;
  1965. }
  1966. .forum-score-form {
  1967. display: flex;
  1968. flex-direction: column;
  1969. align-items: center;
  1970. justify-content: center;
  1971. gap: 14px;
  1972. width: 100%;
  1973. }
  1974. .score-btn {
  1975. background: #282818;
  1976. color: #ffd740;
  1977. border: none;
  1978. width: 38px;
  1979. height: 38px;
  1980. font-size: 1.25em;
  1981. border-radius: 8px;
  1982. cursor: pointer;
  1983. transition: background 0.13s;
  1984. display: flex;
  1985. align-items: center;
  1986. justify-content: center;
  1987. line-height: 1;
  1988. }
  1989. .score-btn:hover {
  1990. background: #39391c;
  1991. }
  1992. .score-total {
  1993. font-size: 2em;
  1994. font-weight: bold;
  1995. color: #ffd740;
  1996. text-align: center;
  1997. margin: 0;
  1998. line-height: 1.1;
  1999. min-height: 38px;
  2000. display: flex;
  2001. align-items: center;
  2002. justify-content: center;
  2003. }
  2004. .forum-main-col {
  2005. flex: 1;
  2006. display: flex;
  2007. flex-direction: column;
  2008. gap: 0.22em;
  2009. }
  2010. .forum-header-row {
  2011. display: flex;
  2012. align-items: center;
  2013. gap: 0.7em;
  2014. margin-bottom: 2px;
  2015. }
  2016. .forum-category {
  2017. color: #ff7300;
  2018. background: #282818;
  2019. font-weight: bold;
  2020. font-size: 1em;
  2021. text-decoration: underline;
  2022. padding: 2px 7px;
  2023. border-radius: 5px;
  2024. margin-right: 0.4em;
  2025. }
  2026. .forum-title {
  2027. color: #ff7300;
  2028. font-size: 1.13em;
  2029. font-weight: bold;
  2030. text-decoration: underline;
  2031. transition: color 0.15s;
  2032. }
  2033. .forum-title:hover {
  2034. color: #ffd740;
  2035. }
  2036. .forum-body {
  2037. margin: 0.15em 0 0.2em 0;
  2038. font-size: 1em;
  2039. color: #ffd740;
  2040. line-height: 1.6;
  2041. }
  2042. .forum-body {
  2043. margin: 0.15em 0 0.2em 0;
  2044. font-size: 1em;
  2045. color: #ffd740;
  2046. line-height: 1.6;
  2047. word-break: break-word;
  2048. }
  2049. .forum-body h1 {
  2050. font-size: 1.6em;
  2051. margin: 10px 0 6px 0;
  2052. color: #ff9d00;
  2053. }
  2054. .forum-body h2 {
  2055. font-size: 1.4em;
  2056. margin: 8px 0 5px 0;
  2057. color: #ff9d00;
  2058. }
  2059. .forum-body h3 {
  2060. font-size: 1.25em;
  2061. margin: 6px 0 4px 0;
  2062. color: #ff9d00;
  2063. }
  2064. .forum-body ul,
  2065. .forum-body ol {
  2066. padding-left: 22px;
  2067. margin: 6px 0;
  2068. }
  2069. .forum-body li {
  2070. margin: 3px 0;
  2071. }
  2072. .forum-body blockquote {
  2073. border-left: 3px solid #ff7300;
  2074. padding-left: 10px;
  2075. margin: 8px 0;
  2076. color: #ffb347;
  2077. }
  2078. .forum-body code {
  2079. background: #1a1a1a;
  2080. padding: 2px 6px;
  2081. border-radius: 4px;
  2082. font-family: monospace;
  2083. }
  2084. .forum-body pre {
  2085. background: #111;
  2086. padding: 10px;
  2087. border-radius: 6px;
  2088. overflow-x: auto;
  2089. margin: 8px 0;
  2090. }
  2091. .forum-body hr {
  2092. border: none;
  2093. border-top: 1px solid #333;
  2094. margin: 10px 0;
  2095. }
  2096. .forum-body img {
  2097. max-width: 100%;
  2098. border-radius: 6px;
  2099. margin: 8px 0;
  2100. }
  2101. .forum-body video,
  2102. .forum-body audio {
  2103. max-width: 100%;
  2104. margin: 8px 0;
  2105. }
  2106. .forum-score-box {
  2107. position: sticky;
  2108. top: 80px;
  2109. }
  2110. .forum-body.truncate {
  2111. max-height: 220px;
  2112. overflow: hidden;
  2113. position: relative;
  2114. }
  2115. .forum-body.truncate::after {
  2116. content: "";
  2117. position: absolute;
  2118. bottom: 0;
  2119. left: 0;
  2120. width: 100%;
  2121. height: 60px;
  2122. background: linear-gradient(to bottom, rgba(0,0,0,0), #0f0f0f);
  2123. }
  2124. .forum-meta {
  2125. font-size: 1em;
  2126. align-items: center;
  2127. color: #ffd740;
  2128. margin: 0.1em 0 0 0;
  2129. display: flex;
  2130. gap: 1.3em;
  2131. }
  2132. .forum-footer {
  2133. font-size: 0.97em;
  2134. margin-top: 6px;
  2135. display: flex;
  2136. gap: 0.5em;
  2137. align-items: center;
  2138. }
  2139. .date-link {
  2140. color: #ffd740;
  2141. font-family: monospace;
  2142. font-size: 1em;
  2143. }
  2144. .user-link {
  2145. color: #ffd740;
  2146. font-weight: bold;
  2147. text-decoration: underline dotted;
  2148. }
  2149. .mode-buttons-row {
  2150. display: flex;
  2151. flex-direction: row;
  2152. align-items: flex-start;
  2153. margin-bottom: 1.5em;
  2154. }
  2155. .mode-buttons-cols {
  2156. flex: 1;
  2157. display: flex;
  2158. flex-wrap: wrap;
  2159. gap: 0.6em;
  2160. }
  2161. .forum-comment {
  2162. display: flex;
  2163. flex-direction: column;
  2164. gap: 12px;
  2165. background: #282828;
  2166. padding: 12px;
  2167. margin-bottom: 8px;
  2168. border-radius: 8px;
  2169. transition: background 0.3s ease;
  2170. }
  2171. .comment-header {
  2172. display: flex;
  2173. align-items: center;
  2174. justify-content: space-between;
  2175. }
  2176. .comment-body-row {
  2177. display: flex;
  2178. flex-direction: row;
  2179. gap: 16px;
  2180. }
  2181. .comment-vote-col {
  2182. min-width: 78px;
  2183. display: flex;
  2184. align-items: flex-start;
  2185. justify-content: center;
  2186. }
  2187. .comment-text-col {
  2188. flex: 1;
  2189. display: flex;
  2190. flex-direction: column;
  2191. }
  2192. .comment-form {
  2193. display: flex;
  2194. flex-direction: column;
  2195. gap: 8px;
  2196. }
  2197. .comment-textarea {
  2198. resize: vertical;
  2199. width: 100%;
  2200. padding: 8px;
  2201. background: #1e1e1e;
  2202. color: #ffd740;
  2203. border: 1px solid #444;
  2204. border-radius: 6px;
  2205. font-size: 1em;
  2206. }
  2207. .comment-votes {
  2208. font-size: 0.9em;
  2209. color: #ffd740;
  2210. }
  2211. .comment-footer {
  2212. font-size: 0.85em;
  2213. display: flex;
  2214. justify-content: space-between;
  2215. color: #ffd740;
  2216. }
  2217. .date-link {
  2218. color: #ffd740;
  2219. font-size: 0.95em;
  2220. }
  2221. .user-link {
  2222. color: #ffd740;
  2223. font-weight: bold;
  2224. font-size: 1em;
  2225. }
  2226. .forum-send-btn {
  2227. background: #ff7300;
  2228. color: #fff;
  2229. border: none;
  2230. padding: 8px 16px;
  2231. font-size: 1em;
  2232. border-radius: 8px;
  2233. cursor: pointer;
  2234. transition: background 0.2s;
  2235. }
  2236. .forum-send-btn:hover {
  2237. background: #ffd740;
  2238. }
  2239. .forum-owner-actions {
  2240. margin-top: 8px;
  2241. text-align: left;
  2242. }
  2243. .comment-votes .votes-count {
  2244. margin-right: 12px;
  2245. }
  2246. .new-message-wrapper {
  2247. margin-top: 16px;
  2248. padding: 16px;
  2249. border-radius: 8px;
  2250. }
  2251. .highlighted-reply {
  2252. background-color: #ffe5b4 !important;
  2253. }
  2254. .forum-comment.highlighted-reply {
  2255. background-color: #ffa400 !important;
  2256. transition: background 0.3s ease;
  2257. }
  2258. .forum-comment.level-0 { margin-left: 0; }
  2259. .forum-comment.level-1 { margin-left: 20px; }
  2260. .forum-comment.level-2 { margin-left: 40px; }
  2261. .forum-comment.level-3 { margin-left: 60px; }
  2262. .filter-group {
  2263. display: flex;
  2264. flex-wrap: wrap;
  2265. gap: 6px;
  2266. margin-bottom: 6px;
  2267. }
  2268. .forum-create-col {
  2269. margin-top: 8px;
  2270. }
  2271. .forum-title-form {
  2272. display: inline;
  2273. }
  2274. .forum-title-form .forum-title {
  2275. cursor: pointer;
  2276. }
  2277. .forum-positive-votes {
  2278. color: #4CAF50;
  2279. font-weight: bold;
  2280. }
  2281. .forum-messages {
  2282. font-weight: 500;
  2283. }
  2284. .forum-thread-header {
  2285. margin-bottom: 16px;
  2286. }
  2287. .tribe-forum-filters {
  2288. margin-bottom: 16px;
  2289. }
  2290. .tribe-forum-reply-form {
  2291. margin-top: 12px;
  2292. margin-bottom: 16px;
  2293. }
  2294. .forum-comment.level-4 { margin-left: 80px; }
  2295. /*blockexplorer*/
  2296. .blockchain-view {
  2297. font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif;
  2298. background-color: #191b20;
  2299. padding: 32px 16px;
  2300. border-radius: 16px;
  2301. box-shadow: 0 8px 36px rgba(0,0,0,0.16);
  2302. color: #e7e7e7;
  2303. max-width: 900px;
  2304. margin: 0 auto;
  2305. }
  2306. .blockexplorer-search{
  2307. margin:16px 0 20px;
  2308. }
  2309. .blockexplorer-search-form{
  2310. display:flex;
  2311. flex-direction:column;
  2312. gap:12px;
  2313. }
  2314. .blockexplorer-search-row{
  2315. display:flex;
  2316. flex-direction:column;
  2317. gap:10px;
  2318. }
  2319. .blockexplorer-search-pair{
  2320. display:flex;
  2321. flex-wrap:wrap;
  2322. gap:6px;
  2323. }
  2324. .blockexplorer-search-dates{
  2325. display:flex;
  2326. flex-wrap:wrap;
  2327. gap:12px;
  2328. }
  2329. .blockexplorer-search-input{
  2330. min-width:220px;
  2331. }
  2332. .blockexplorer-search-actions{
  2333. display:flex;
  2334. justify-content:flex-start;
  2335. }
  2336. .block {
  2337. background: #23242a;
  2338. border-radius: 16px;
  2339. box-shadow: 0 2px 12px rgba(32,35,42,0.11);
  2340. padding: 22px 24px;
  2341. margin-bottom: 26px;
  2342. transition: box-shadow 0.22s;
  2343. position: relative;
  2344. }
  2345. .block-buttons {
  2346. display: flex;
  2347. justify-content: right;
  2348. align-items: center;
  2349. gap: 12px;
  2350. }
  2351. .button-container {
  2352. display: flex;
  2353. gap: 12px;
  2354. justify-content: right;
  2355. align-items: center;
  2356. }
  2357. .block:hover {
  2358. box-shadow: 0 8px 32px rgba(35,40,50,0.18);
  2359. }
  2360. .block-row {
  2361. display: flex;
  2362. align-items: center;
  2363. gap: 6px;
  2364. }
  2365. .blockchain-card-label {
  2366. color: #ffa300;
  2367. font-weight: bold;
  2368. letter-spacing: 1.5px;
  2369. line-height: 1.2;
  2370. margin-bottom: 0;
  2371. }
  2372. .blockchain-card-value {
  2373. color: #ffd740;
  2374. }
  2375. .block-info-table .card-label {
  2376. color: #ffa300;
  2377. font-weight: bold;
  2378. }
  2379. .block-info-table .card-value {
  2380. color: #ffd740;
  2381. }
  2382. .block-row--content {
  2383. margin: 10px 0 0 0;
  2384. }
  2385. .block-info-table td {
  2386. padding: 12px 15px;
  2387. font-size: 14px;
  2388. border: 1px solid #444;
  2389. }
  2390. .block-author {
  2391. font-weight: 600;
  2392. font-size: 14px;
  2393. color: #ffd740;
  2394. background: rgba(255,163,0,0.08);
  2395. padding: 3px 10px;
  2396. border-radius: 8px;
  2397. text-decoration: none;
  2398. transition: color 0.12s;
  2399. }
  2400. .block-author:hover {
  2401. color: #ffa300;
  2402. }
  2403. .block-timestamp {
  2404. color: #ffd740;
  2405. font-size: 12px;
  2406. margin-right: 6px;
  2407. }
  2408. .block-content-preview,
  2409. .block-content {
  2410. background: #222326;
  2411. border-radius: 10px;
  2412. padding: 14px 18px;
  2413. font-size: 14px;
  2414. line-height: 1.7;
  2415. color: #ffd740;
  2416. font-family: 'JetBrains Mono', 'Courier New', monospace;
  2417. overflow-x: auto;
  2418. }
  2419. .block-content-preview pre {
  2420. margin: 0;
  2421. }
  2422. .block-info-table {
  2423. width: 100%;
  2424. border-collapse: collapse;
  2425. margin: 15px 0;
  2426. }
  2427. .block-info-table td {
  2428. padding: 10px;
  2429. border: 1px solid #444;
  2430. font-size: 14px;
  2431. }
  2432. .json-content {
  2433. white-space: pre-wrap;
  2434. word-break: break-word;
  2435. color: #ffd740;
  2436. }
  2437. .block-row--details {
  2438. margin-top: 14px;
  2439. position: relative;
  2440. }
  2441. .block-url {
  2442. color: #ffd740;
  2443. font-size: 14px;
  2444. text-decoration: none;
  2445. font-weight: 500;
  2446. transition: color 0.13s, border-color 0.13s;
  2447. }
  2448. .block-row--details .block-url {
  2449. position: absolute;
  2450. top: 0;
  2451. right: 0;
  2452. background: #1f2023;
  2453. padding: 6px 12px;
  2454. border-radius: 8px;
  2455. font-size: 14px;
  2456. font-weight: 500;
  2457. border: none;
  2458. transition: background 0.12s, color 0.12s;
  2459. }
  2460. .block-row--details .block-url:hover {
  2461. background: #292b36;
  2462. color: #ffa300;
  2463. }
  2464. .btn-singleview {
  2465. background: #1e1f23;
  2466. border: none;
  2467. border-radius: 50%;
  2468. padding: 7px 12px;
  2469. cursor: pointer;
  2470. font-size: 1.14em;
  2471. color: #ffa300;
  2472. box-shadow: none;
  2473. transition: background 0.14s, color 0.14s;
  2474. text-decoration: none;
  2475. display: flex;
  2476. align-items: center;
  2477. justify-content: center;
  2478. }
  2479. .btn-singleview:hover {
  2480. background: #2d2e34;
  2481. color: #ffd740;
  2482. }
  2483. .btn-datagram {
  2484. font-size: 1.2em;
  2485. font-weight: bold;
  2486. }
  2487. .block-row--meta-spaced { margin-top: 8px; }
  2488. .filter-column { display: flex; flex-direction: column; gap: 8px; }
  2489. .deleted-label { color: #b00; font-weight: bold; margin-top: 8px; }
  2490. .block-row--back {
  2491. margin-top: 15px;
  2492. }
  2493. .block-content-label {
  2494. color: #ffa300;
  2495. font-size: 1.02em;
  2496. margin-bottom: 8px;
  2497. font-weight: 600;
  2498. }
  2499. .btn-back {
  2500. background: #21232b;
  2501. color: #ffa300;
  2502. padding: 7px 22px;
  2503. border-radius: 8px;
  2504. text-decoration: none;
  2505. border: none;
  2506. font-size: 1.01rem;
  2507. font-weight: 500;
  2508. margin-top: 12px;
  2509. transition: background 0.12s, color 0.13s;
  2510. display: inline-block;
  2511. }
  2512. .btn-back:hover {
  2513. background: #292b36;
  2514. color: #ffd740;
  2515. }
  2516. /* block diagram (IP header style) */
  2517. .block-diagram-section{margin:16px 0;background:transparent !important;border:none !important}
  2518. .block-diagram-title{font-size:16px;margin:0 0 12px;background:transparent !important;border:none !important}
  2519. .block-diagram-link{text-decoration:none;color:inherit;display:block;margin-bottom:8px}
  2520. .block-diagram-link *{text-decoration:none}
  2521. .block-diagram-link:hover,.block-diagram-link:hover *{text-decoration:none}
  2522. .block-diagram{border:2px solid #555;border-radius:0;overflow:hidden;margin-bottom:8px;background:#191b20 !important}
  2523. .block-diagram-ruler{display:grid;grid-template-columns:0fr 4fr 4fr 8fr 8fr 7fr;font-size:10px;color:#ffa300;padding:2px 0;background:#111 !important;border:none !important;border-bottom:2px solid #555 !important}
  2524. .block-diagram-ruler span{background:transparent !important;border:none !important;text-align:left;padding-left:2px;color:#ffa300}
  2525. .block-diagram-grid{display:grid;grid-template-columns:repeat(32,1fr)}
  2526. .block-diagram-cell{border:1px solid #555;padding:6px 8px;text-align:center;background:#1e1f23 !important;min-height:38px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px}
  2527. .bd-label{font-size:10px;color:#ffa300;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;background:transparent !important;border:none !important}
  2528. .bd-value{font-size:12px;font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffd740;text-decoration:none;background:transparent !important;border:none !important}
  2529. .bd-seq{grid-column:1/9}
  2530. .bd-type{grid-column:9/19}
  2531. .bd-ts{grid-column:19/33}
  2532. .bd-id{grid-column:1/33}
  2533. .bd-author{grid-column:1/33}
  2534. .bd-flags{grid-column:1/17}
  2535. .bd-ctype{grid-column:17/33}
  2536. .bd-data{grid-column:1/33}
  2537. .block-diagram:hover{border-color:inherit;box-shadow:none}
  2538. @media (max-width: 700px) {
  2539. .blockchain-view {
  2540. padding: 9vw 2vw;
  2541. }
  2542. .block, .block-single, .block--single {
  2543. padding: 15px 5vw;
  2544. }
  2545. .mode-buttons-row {
  2546. flex-direction: column;
  2547. gap: 18px;
  2548. }
  2549. }
  2550. /*inbox/pm*/
  2551. .pm-card.normal-pm { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #ffa300; background: transparent }
  2552. .pm-btn { padding: 6px 16px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; border: 1px solid #ffa300; background: transparent; color: #ffa300; transition: background 0.15s, color 0.15s }
  2553. .pm-btn:hover { background: #ffa300; color: #000 }
  2554. .pm-thread { margin-bottom: 12px }
  2555. .pm-thread-details { margin-top: 0 }
  2556. .pm-thread-details[open] .pm-thread-icon { display: inline-block; transform: rotate(90deg) }
  2557. .pm-thread-toggle { cursor: pointer; padding: 6px 12px; font-size: 13px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px }
  2558. .pm-thread-toggle::-webkit-details-marker { display: none }
  2559. .pm-thread-icon { font-size: 10px; transition: transform 0.15s }
  2560. .pm-thread-replies { padding-left: 16px; border-left: 3px solid #ffa300; margin-left: 8px; margin-top: 4px }
  2561. .pm-info-table { width: 100%; border-collapse: collapse; margin-bottom: 8px }
  2562. .pm-info-table td { padding: 10px; border: 1px solid #444; font-size: 14px }
  2563. .pm-spacer { flex: 1 }
  2564. .pm-chars { font-size: 12px; opacity: .7 }
  2565. .pm-subject { margin: 0 0 6px 0; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: pre-wrap }
  2566. .pm-bot { opacity: .85 }
  2567. .pm-body { margin-top: 6px }
  2568. .pm-action-form { display: inline-block; margin: 0 }
  2569. .pm-actions-block {
  2570. width: 100%;
  2571. max-width: 720px;
  2572. border: 0;
  2573. }
  2574. .pm-actions {
  2575. display: flex;
  2576. gap: 10px;
  2577. }
  2578. .pm-reply-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; background: rgba(255,163,0,0.15); color: #ffa300 }
  2579. .thread-level-0 { margin-left: 0 }
  2580. .thread-level-1 { margin-left: 16px; border-left: 3px solid #ffa300; padding-left: 12px }
  2581. .thread-level-2 { margin-left: 32px; border-left: 3px solid #ffa300; padding-left: 12px }
  2582. .thread-level-3 { margin-left: 48px; border-left: 3px solid #ffa300; padding-left: 12px }
  2583. .thread-level-4 { margin-left: 64px; border-left: 3px solid #ffa300; padding-left: 12px }
  2584. .thread-level-5 { margin-left: 80px; border-left: 3px solid #ffa300; padding-left: 12px }
  2585. .thread-level-6 { margin-left: 96px; border-left: 3px solid #ffa300; padding-left: 12px }
  2586. .thread-level-7 { margin-left: 112px; border-left: 3px solid #ffa300; padding-left: 12px }
  2587. .thread-level-8 { margin-left: 128px; border-left: 3px solid #ffa300; padding-left: 12px }
  2588. .pm-quote { border-left: 3px solid #ffa300; margin: 8px 0; padding: 8px 12px; opacity: 0.75; font-size: 13px; border-radius: 0 6px 6px 0 }
  2589. /*projects*/
  2590. .project-actions {
  2591. display: flex;
  2592. justify-content: flex-start;
  2593. align-items: center;
  2594. gap: 10px;
  2595. }
  2596. .project-card.status-completed .badge{ background:rgba(59,130,246,.12); color:#93c5fd; border-color:rgba(59,130,246,.25); }
  2597. .bookmark-actions.project-actions {
  2598. display: flex;
  2599. flex-wrap: wrap;
  2600. align-items: center;
  2601. justify-content: flex-end;
  2602. gap: 14px;
  2603. }
  2604. .bookmark-actions.project-actions form {
  2605. margin: 0;
  2606. }
  2607. .project-control-form {
  2608. display: flex;
  2609. align-items: center;
  2610. gap: 10px;
  2611. flex-wrap: nowrap;
  2612. }
  2613. .project-control-select,
  2614. .project-control-input,
  2615. .project-control-btn {
  2616. height: 42px;
  2617. }
  2618. .project-control-select,
  2619. .project-control-input {
  2620. min-width: 220px;
  2621. }
  2622. .project-control-btn {
  2623. white-space: nowrap;
  2624. }
  2625. .project-progress-input {
  2626. max-width: 140px;
  2627. min-width: 120px;
  2628. }
  2629. @media (max-width: 820px) {
  2630. .project-control-select,
  2631. .project-control-input {
  2632. min-width: 180px;
  2633. }
  2634. .project-progress-input {
  2635. min-width: 110px;
  2636. }
  2637. }
  2638. .badge{
  2639. position:absolute;
  2640. top:14px; right:14px;
  2641. font-size:.75rem;
  2642. letter-spacing:.02em;
  2643. padding:6px 8px;
  2644. border-radius:8px;
  2645. border:1px solid var(--line);
  2646. color:var(--muted);
  2647. }
  2648. .milestones, .bounties{ display:flex; flex-direction:column; gap:8px; }
  2649. .milestone-item, .bounty-item{
  2650. padding:12px;
  2651. border:1px solid var(--line);
  2652. border-radius:12px;
  2653. background:#121620;
  2654. }
  2655. .milestone-row{
  2656. display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  2657. margin-bottom:6px;
  2658. }
  2659. .milestone-title{ font-weight:600; }
  2660. .milestone-percent{ padding:4px 8px; border-radius:8px; border:1px solid var(--line); font-size:.8rem; color:#b7c2d6; }
  2661. .milestone-due{ color:#c9a86a; font-size:.85rem; }
  2662. .bounty-main{
  2663. display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;
  2664. }
  2665. .bounty-title{ font-weight:600; }
  2666. .bounty-amount{
  2667. font-variant-numeric: tabular-nums;
  2668. padding:4px 8px; border-radius:8px; background:#18202f; border:1px solid var(--line);
  2669. }
  2670. .pledge-box{
  2671. margin-top:6px;
  2672. padding:14px;
  2673. border:1px solid var(--line);
  2674. border-radius:12px;
  2675. background:#121620;
  2676. display:grid;
  2677. gap:10px;
  2678. }
  2679. .pledge-box form{ display:flex; gap:10px; flex-wrap:wrap; }
  2680. .pledge-box input[type="number"]{
  2681. background:#0f1420; border:1px solid #2b3240; color:var(--text);
  2682. padding:10px 12px; border-radius:10px; outline:none;
  2683. }
  2684. .pledge-box input[type="number"]:focus{ border-color:#3a475c; }
  2685. .card-field{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
  2686. .card-field-stacked{flex-direction:column;align-items:flex-start;gap:2px}
  2687. .card-field-stacked .card-value{white-space:pre-wrap;word-break:break-word}
  2688. .card-field-rich{flex-direction:column;align-items:flex-start}
  2689. .card-field-rich .card-value{white-space:pre-wrap;word-break:break-word;margin-top:4px}
  2690. .report-template{margin-top:12px;padding:12px;background:rgba(255,255,255,0.05);border-radius:8px}
  2691. .report-template .card-label{white-space:nowrap}
  2692. @media (max-width: 420px){
  2693. .card-field{ flex-direction:column; }
  2694. .milestone-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  2695. }
  2696. /*banking*/
  2697. .addr-form-card, .addr-list-card {
  2698. border: 1px solid rgba(255,255,255,0.1);
  2699. border-radius: 12px;
  2700. background: rgba(255,255,255,0.03);
  2701. padding: 20px;
  2702. }
  2703. .addr-form-card.wide {
  2704. padding: 22px;
  2705. }
  2706. .addr-form .form-row {
  2707. display: grid;
  2708. grid-template-columns: 140px 1fr;
  2709. gap: 10px;
  2710. align-items: center;
  2711. margin-bottom: 12px;
  2712. }
  2713. .addr-form .form-input {
  2714. padding: 0 14px;
  2715. }
  2716. .addr-form .form-input.xl {
  2717. height: 50px;
  2718. font-size: 16px;
  2719. }
  2720. .addr-form .form-actions {
  2721. display: flex;
  2722. margin-top: 8px;
  2723. }
  2724. .addr-list-card .form-row {
  2725. display: grid;
  2726. grid-template-columns: 150px 1fr;
  2727. gap: 10px;
  2728. align-items: center;
  2729. }
  2730. .addr-list-card .form-input {
  2731. padding: 0 14px;
  2732. }
  2733. .addr-search input[type="text"]:focus,
  2734. .addr-form .form-input:focus {
  2735. outline: none;
  2736. border-color: #ffa300;
  2737. }
  2738. .addr-form .form-actions .mini-btn {
  2739. background: #ffa300;
  2740. border: none;
  2741. color: #fff;
  2742. padding: 9px 14px;
  2743. border-radius: 8px;
  2744. cursor: pointer;
  2745. }
  2746. .addr-form .form-actions .mini-btn:hover {
  2747. background: #ff7f00;
  2748. }
  2749. .bank-summary .bank-info-table tbody tr .synced {
  2750. color: green;
  2751. font-weight: bold;
  2752. }
  2753. .bank-summary .bank-info-table tbody tr .outdated {
  2754. color: red;
  2755. font-weight: bold;
  2756. }
  2757. .bank-claim-ubi{margin:16px 0}
  2758. .bank-claim-card{border:1px solid #FFA500;border-radius:8px;padding:16px;margin:8px 0}
  2759. .bank-claim-card p{margin:4px 0}
  2760. .bank-claim-btn{font-size:16px;padding:10px 24px;margin-top:8px}
  2761. .pub-item{border:1;border-radius:10px;background:none}
  2762. .snh-invite-box{border:1px solid currentColor;border-radius:8px;padding:16px;margin:12px 0;font-family:monospace}
  2763. .snh-invite-name{margin:0 0 8px 0}
  2764. .snh-invite-date{font-size:13px;opacity:0.7;margin:0 0 10px 0}
  2765. .snh-invite-btn{display:block;word-break:break-all;font-size:14px;margin:0;cursor:pointer;background:none;border:1px solid #FFA500;color:#FFA500;padding:10px;border-radius:5px;width:auto;text-align:left;font-family:monospace}
  2766. .error-box{background:#222326;border:none;color:#f5c242;padding:12px;border-radius:8px;margin-top:8px}
  2767. .error-title{margin:0 0 6px 0;font-weight:600}
  2768. .error-pre{margin:0;white-space:pre-wrap;font-family:monospace}
  2769. .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:8px 0}
  2770. .shop-card{border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
  2771. .shop-card-media{max-height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111}
  2772. .shop-card-media img,.shop-media{width:100%;max-height:200px;object-fit:cover}
  2773. .shop-card-body{padding:12px;display:flex;flex-direction:column;gap:6px}
  2774. .shop-title-link{color:#FFA500;text-decoration:none}
  2775. .shop-card-desc{font-size:14px;opacity:0.85;margin:0}
  2776. .shop-card-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
  2777. .shop-open{color:#0f0;font-weight:bold}
  2778. .shop-closed{color:#f44;font-weight:bold}
  2779. .shop-product-count{color:#FFA500}
  2780. .shop-location{opacity:0.7}
  2781. .shop-card-tags{display:flex;flex-wrap:wrap;gap:4px}
  2782. .shop-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  2783. .shop-detail{padding:8px 0}
  2784. .shop-detail-media{max-width:100%;margin:12px 0}
  2785. .shop-detail-media img{max-width:100%;border-radius:6px}
  2786. .shop-detail-desc{margin:8px 0}
  2787. .shop-share{margin:8px 0;display:flex;align-items:center;gap:8px}
  2788. .shop-share-input{flex:1;background:#222;border:1px solid #555;color:#ccc;padding:6px 10px;border-radius:4px;font-family:monospace;font-size:13px}
  2789. .shop-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0}
  2790. .shop-product-card{border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
  2791. .shop-product-media{max-height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111}
  2792. .shop-product-media img{width:100%;max-height:180px;object-fit:cover}
  2793. .shop-product-body{padding:10px;display:flex;flex-direction:column;gap:6px}
  2794. .shop-product-price{font-size:18px;font-weight:bold;color:#FFA500}
  2795. .shop-product-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  2796. .shop-add-product{border:1px dashed #555;border-radius:8px;padding:16px;margin:12px 0}
  2797. .shop-featured-products{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
  2798. .shop-featured-item{display:flex;flex-direction:column;align-items:center;width:72px;text-decoration:none;border:1px solid #333;border-radius:6px;overflow:hidden;background:#111}
  2799. .shop-featured-item:hover{border-color:#FFA500}
  2800. .shop-featured-thumb{width:72px;height:72px;object-fit:cover}
  2801. .shop-featured-price{font-size:11px;color:#FFA500;padding:4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
  2802. .shop-product-stars{color:#FFA500;font-size:14px;letter-spacing:1px}
  2803. .card-field-mb{margin-bottom:10px}
  2804. .card-field-mt{margin-top:10px}
  2805. .card-tags-mt{margin-top:10px}
  2806. .card-label-bold{font-weight:800}
  2807. .card-value-bold{margin-left:10px;font-weight:800}
  2808. .contact-bold{font-weight:bold}
  2809. .textarea-full{width:100%}
  2810. .shop-form{padding:8px 0}
  2811. .shop-form input[type="text"],.shop-form input[type="number"],.shop-form textarea,.shop-form select{width:100%;max-width:480px;padding:8px;margin:4px 0 8px 0;background:#222;border:1px solid #555;color:#ccc;border-radius:4px;font-family:monospace}
  2812. /* carbon footprint chart */
  2813. .carbon-section-title{font-size:18px;color:#555;margin:8px 0;font-weight:600}
  2814. .carbon-chart{margin:12px 0;background:transparent !important;border:none !important}
  2815. .carbon-bar-label{display:flex;justify-content:space-between;font-size:14px;margin:4px 0 2px;background:transparent !important;border:none !important}
  2816. .carbon-bar-track{background:#3a3a3a !important;border-radius:6px;height:22px;overflow:hidden;border:none !important}
  2817. .carbon-bar-fill{height:100%;border-radius:6px;min-width:2px;transition:width 0.4s ease;border:none !important}
  2818. .carbon-bar-network{background:#2ecc71 !important}
  2819. .carbon-bar-mine{background:#3498db !important}
  2820. .carbon-bar-max{background:#555 !important;border:none !important}
  2821. .carbon-bar-note{font-size:13px;color:#888;margin:6px 0 2px}
  2822. .carbon-bar-formula{font-size:12px;color:#999;margin:2px 0}
  2823. /* parliament */
  2824. .cycle-info {
  2825. display: grid;
  2826. grid-template-columns: repeat(3, minmax(0, 1fr));
  2827. gap: .75rem;
  2828. margin-bottom: 1rem;
  2829. }
  2830. .kpi {
  2831. border: 1px solid rgba(0,0,0,.08);
  2832. border-radius: 8px;
  2833. padding: .75rem;
  2834. }
  2835. .kpi__label {
  2836. display: block;
  2837. letter-spacing: .06em;
  2838. text-transform: uppercase;
  2839. color: var(--parl-accent, #ff9f1a);
  2840. opacity: 1;
  2841. }
  2842. .kpi__value {
  2843. font-weight: 600;
  2844. }
  2845. .method-badge,
  2846. .method-hero {
  2847. display: inline-flex;
  2848. align-items: center;
  2849. gap: .5rem;
  2850. }
  2851. .method-cell {
  2852. text-align: center;
  2853. }
  2854. .leader-cell {
  2855. text-align: center;
  2856. }
  2857. .mt-2 { margin-top: .5rem; }
  2858. .parliament-actor-table {
  2859. table-layout: auto;
  2860. width: 100%;
  2861. }
  2862. .parliament-actor-table th,
  2863. .parliament-actor-table td {
  2864. vertical-align: top;
  2865. }
  2866. .parliament-actor-col {
  2867. white-space: nowrap;
  2868. width: 1%;
  2869. text-align: left;
  2870. }
  2871. .parliament-actor-col .user-link {
  2872. display: inline-block;
  2873. }
  2874. .parliament-description-col {
  2875. white-space: normal;
  2876. text-align: left;
  2877. }
  2878. .parliament-members-row td {
  2879. padding-top: .5rem;
  2880. }
  2881. .parliament-members-list {
  2882. margin: .25rem 0 0;
  2883. padding-left: 1.25rem;
  2884. }
  2885. .parliament-members-list li {
  2886. margin: .125rem 0;
  2887. }
  2888. .oasis-footer {
  2889. display: flex;
  2890. justify-content: center;
  2891. align-items: center;
  2892. padding: 2px 10px;
  2893. border-top: 1px solid rgba(255,255,255,0.08);
  2894. line-height: 1;
  2895. min-height: 0;
  2896. margin-top: 5px;
  2897. }
  2898. .oasis-footer-center {
  2899. margin-top: 15px;
  2900. text-align: center;
  2901. line-height: 1.6;
  2902. box-shadow: 0 2px 20px 0 #FFD60024;
  2903. }
  2904. .oasis-footer-logo-link {
  2905. display: block;
  2906. margin: 0 auto;
  2907. }
  2908. .oasis-footer-logo {
  2909. width: 48px;
  2910. height: 48px;
  2911. border-radius: 10px;
  2912. object-fit: cover;
  2913. display: block;
  2914. margin: 0 auto;
  2915. }
  2916. .oasis-footer-package-link,
  2917. .oasis-footer-package-name,
  2918. .oasis-footer-version,
  2919. .oasis-footer-sep {
  2920. line-height: 1;
  2921. }
  2922. .oasis-footer-package-link {
  2923. text-decoration: none;
  2924. }
  2925. .oasis-footer-package-link,
  2926. .oasis-footer-center a,
  2927. .oasis-footer-center span,
  2928. .oasis-footer-center strong {
  2929. padding-top: 0;
  2930. padding-bottom: 0;
  2931. margin: 0;
  2932. }
  2933. .oasis-footer-center a {
  2934. background-color: transparent !important;
  2935. padding: 0 !important;
  2936. border-radius: 0 !important;
  2937. text-decoration: none !important;
  2938. font-weight: normal !important;
  2939. box-shadow: none !important;
  2940. }
  2941. .oasis-footer-carbon {
  2942. font-size: 12px;
  2943. }
  2944. .inbox-badge {
  2945. display: inline-block;
  2946. background: #e74c3c;
  2947. color: #fff;
  2948. font-size: 0.7em;
  2949. font-weight: bold;
  2950. padding: 1px 5px;
  2951. border-radius: 10px;
  2952. margin-left: 4px;
  2953. min-width: 16px;
  2954. text-align: center;
  2955. line-height: 1.4;
  2956. vertical-align: middle;
  2957. }
  2958. .reply-context {
  2959. border-left: 3px solid #666;
  2960. padding-left: 10px;
  2961. margin-bottom: 8px;
  2962. opacity: 0.85;
  2963. }
  2964. .carbon-footprint-bar {
  2965. height: 18px;
  2966. border-radius: 4px;
  2967. transition: width 0.3s;
  2968. }
  2969. .block-canvas-container {
  2970. border: 1px solid #555;
  2971. border-radius: 8px;
  2972. overflow: hidden;
  2973. margin: 16px 0;
  2974. }
  2975. .dominant-opinion {
  2976. font-weight: bold;
  2977. margin-left: 6px;
  2978. padding: 2px 8px;
  2979. border-radius: 4px;
  2980. font-size: 0.85em;
  2981. }
  2982. .feed-success-msg {
  2983. padding: 12px 16px;
  2984. border-radius: 6px;
  2985. margin-bottom: 16px;
  2986. border: 1px solid #2ecc71;
  2987. background: rgba(46,204,113,0.1);
  2988. }
  2989. .preset-group {
  2990. display: flex;
  2991. flex-direction: row;
  2992. flex-wrap: wrap;
  2993. gap: 8px;
  2994. padding: 12px;
  2995. margin-bottom: 12px;
  2996. }
  2997. .preset-group-title {
  2998. font-weight: bold;
  2999. margin-bottom: 8px;
  3000. }
  3001. .activity-tribe-meta{display:flex;gap:.6em;flex-wrap:wrap}
  3002. .tribe-card:hover {
  3003. border-color: #ffa500;
  3004. }
  3005. .tribe-card-body {
  3006. padding: 12px 16px 16px;
  3007. display: flex;
  3008. flex-direction: column;
  3009. gap: 6px;
  3010. }
  3011. .tribe-card-title {
  3012. margin: 0;
  3013. font-size: 1.15em;
  3014. }
  3015. .tribe-card-footer {
  3016. display: flex;
  3017. align-items: center;
  3018. gap: 12px;
  3019. flex-wrap: wrap;
  3020. margin-top: 4px;
  3021. }
  3022. .tribe-card-tags {
  3023. display: flex;
  3024. gap: 6px;
  3025. flex-wrap: wrap;
  3026. }
  3027. .tribe-side h2 {
  3028. margin: 0;
  3029. }
  3030. .tribe-side-meta {
  3031. display: flex;
  3032. flex-direction: column;
  3033. gap: 4px;
  3034. }
  3035. .tribe-side-description {
  3036. color: #cfd3e1;
  3037. font-size: 14px;
  3038. line-height: 1.5;
  3039. }
  3040. .tribe-side-tags {
  3041. display: flex;
  3042. gap: 8px;
  3043. flex-wrap: wrap;
  3044. }
  3045. .tribe-side-footer {
  3046. border-top: 1px solid #444;
  3047. padding-top: 8px;
  3048. }
  3049. .tribe-side-footer p {
  3050. margin: 2px 0;
  3051. font-size: 13px;
  3052. }
  3053. .tribe-side-actions {
  3054. display: flex;
  3055. gap: 8px;
  3056. flex-wrap: wrap;
  3057. margin: 8px 0;
  3058. }
  3059. .tribe-side-actions form {
  3060. margin: 0;
  3061. }
  3062. .tribe-side-subtribes {
  3063. margin: 8px 0;
  3064. }
  3065. .tribe-subtribes-list {
  3066. display: flex;
  3067. flex-direction: column;
  3068. gap: 4px;
  3069. }
  3070. .tribe-subtribe-link {
  3071. display: block;
  3072. width: 100%;
  3073. text-align: left;
  3074. padding: 8px 12px;
  3075. background: #1c1c1c;
  3076. border: 1px solid #333;
  3077. border-radius: 6px;
  3078. color: #ffa500;
  3079. cursor: pointer;
  3080. font-size: 14px;
  3081. }
  3082. .tribe-subtribe-link:hover {
  3083. background: #333;
  3084. }
  3085. .tribe-members-count {
  3086. color: #ffa500;
  3087. font-size: 18px;
  3088. }
  3089. .tribe-mode-buttons {
  3090. display: flex;
  3091. gap: 8px;
  3092. margin-top: 16px;
  3093. }
  3094. .tribe-card-image-wrapper {
  3095. position: relative;
  3096. overflow: hidden;
  3097. }
  3098. .tribe-card-hero-image {
  3099. display: block;
  3100. width: 100%;
  3101. height: 200px;
  3102. object-fit: cover;
  3103. }
  3104. .tribe-card-description {
  3105. font-size: 14px;
  3106. line-height: 1.45;
  3107. color: #cfd3e1;
  3108. margin: 0;
  3109. }
  3110. .tribe-info-table {
  3111. width: 100%;
  3112. border-collapse: collapse;
  3113. margin: 8px 0;
  3114. }
  3115. .tribe-info-table td {
  3116. padding: 6px 8px;
  3117. border: 1px solid #555;
  3118. font-size: 12px;
  3119. }
  3120. .tribe-info-label {
  3121. font-size: 10px;
  3122. color: #ffa300;
  3123. font-weight: bold;
  3124. text-transform: uppercase;
  3125. letter-spacing: 0.5px;
  3126. white-space: nowrap;
  3127. background: #1e1f23;
  3128. }
  3129. .tribe-info-value {
  3130. font-size: 12px;
  3131. font-family: 'JetBrains Mono', monospace;
  3132. color: #ffd740;
  3133. background: #1e1f23;
  3134. }
  3135. .tribe-info-empty {
  3136. color: #9aa3b2;
  3137. font-size: 12px;
  3138. font-style: italic;
  3139. }
  3140. .tribe-card-subtribes {
  3141. border: 1px solid #555;
  3142. border-radius: 4px;
  3143. padding: 8px;
  3144. margin: 6px 0;
  3145. background: #1e1f23;
  3146. display: flex;
  3147. flex-direction: column;
  3148. gap: 4px;
  3149. }
  3150. .tribe-card-members {
  3151. border: none;
  3152. border-radius: 4px;
  3153. padding: 8px;
  3154. margin: 6px 0;
  3155. background: #1e1f23;
  3156. text-align: center;
  3157. }
  3158. .tribe-card-actions {
  3159. border: 1px solid #555;
  3160. border-radius: 4px;
  3161. padding: 8px;
  3162. margin: 6px 0;
  3163. background: #1e1f23;
  3164. display: flex;
  3165. gap: 8px;
  3166. justify-content: center;
  3167. }
  3168. .tribe-action-btn {
  3169. padding: 6px 16px;
  3170. border-radius: 6px;
  3171. font-size: 12px;
  3172. font-weight: 700;
  3173. letter-spacing: 0.5px;
  3174. cursor: pointer;
  3175. border: 1px solid #ffa300;
  3176. background: transparent;
  3177. color: #ffa300;
  3178. transition: background 0.15s, color 0.15s;
  3179. }
  3180. .tribe-action-btn:hover {
  3181. background: #ffa300;
  3182. color: #000;
  3183. }
  3184. .tribe-action-btn.danger-btn { border-color: #d9534f; color: #d9534f; }
  3185. .tribe-action-btn.danger-btn:hover { background: #d9534f; color: #000; }
  3186. .calendar-interval-block { margin: 8px 0 16px; }
  3187. .calendar-interval-label { display: block; margin-bottom: 6px; }
  3188. .calendar-interval-until { margin-top: 10px; }
  3189. .calendar-interval-row { display: flex; gap: 16px; flex-wrap: wrap; }
  3190. .calendar-interval-option { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
  3191. .tribe-thumb-grid {
  3192. display: grid;
  3193. grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  3194. gap: 8px;
  3195. }
  3196. .tribe-thumb-link {
  3197. display: block;
  3198. width: 100%;
  3199. aspect-ratio: 1;
  3200. overflow: hidden;
  3201. border-radius: 6px;
  3202. border: 1px solid #555;
  3203. transition: border-color 0.15s;
  3204. }
  3205. .tribe-thumb-link:hover {
  3206. border-color: #ffa300;
  3207. }
  3208. .tribe-thumb-img {
  3209. display: block;
  3210. width: 100%;
  3211. height: 100%;
  3212. object-fit: cover;
  3213. }
  3214. .tribe-feed-compose {
  3215. display: flex;
  3216. flex-direction: column;
  3217. gap: 8px;
  3218. margin-bottom: 16px;
  3219. }
  3220. .tribe-feed-compose textarea {
  3221. width: 100%;
  3222. box-sizing: border-box;
  3223. }
  3224. .tribe-feed-compose .tribe-feed-send {
  3225. align-self: flex-end;
  3226. }
  3227. .tribe-parent-box {
  3228. margin-bottom: 12px;
  3229. text-align: center;
  3230. }
  3231. .tribe-parent-box h2 {
  3232. margin: 0 0 8px 0;
  3233. }
  3234. .tribe-parent-link {
  3235. display: block;
  3236. }
  3237. .tribe-parent-image {
  3238. width: 100%;
  3239. max-width: 200px;
  3240. border-radius: 8px;
  3241. border: 2px solid #444;
  3242. }
  3243. .tribe-card-meta-row {
  3244. display: flex;
  3245. gap: .5em;
  3246. flex-wrap: wrap;
  3247. font-size: 12px;
  3248. }
  3249. .tribe-meta-label {
  3250. color: #9aa3b2;
  3251. font-size: 12px;
  3252. }
  3253. .tribe-tag-link {
  3254. margin-right: 0.8em;
  3255. margin-bottom: 0.5em;
  3256. }
  3257. .tribe-member-actions {
  3258. display: flex;
  3259. gap: 6px;
  3260. flex-wrap: wrap;
  3261. margin-top: 4px;
  3262. }
  3263. .tribe-visit-btn-wrapper {
  3264. position: absolute;
  3265. bottom: 8px;
  3266. right: 8px;
  3267. }
  3268. .tribe-grid {
  3269. display: grid;
  3270. grid-template-columns: repeat(3, 1fr);
  3271. gap: 20px;
  3272. }
  3273. .tribe-section-nav {
  3274. display: flex;
  3275. flex-wrap: wrap;
  3276. gap: 4px;
  3277. margin-bottom: 16px;
  3278. padding-bottom: 8px;
  3279. }
  3280. .tribe-section-nav form {
  3281. margin: 0;
  3282. }
  3283. .tribe-section-group {
  3284. display: flex;
  3285. gap: 4px;
  3286. padding: 0 8px;
  3287. flex-wrap: wrap;
  3288. align-items: center;
  3289. border: 0px;
  3290. }
  3291. .tribe-section-group-label {
  3292. font-size: 10px;
  3293. text-transform: uppercase;
  3294. color: #ffcc00;
  3295. letter-spacing: 1px;
  3296. width: 100%;
  3297. padding: 0 4px 2px;
  3298. font-weight: bold;
  3299. }
  3300. .tribe-section-group:last-child {
  3301. border-right: none;
  3302. }
  3303. .tribe-section-nav .filter-btn {
  3304. padding: 8px 12px;
  3305. text-transform: uppercase;
  3306. }
  3307. .tribe-section-nav .filter-btn.active {
  3308. background: #ffcc00;
  3309. color: #000;
  3310. }
  3311. .tribe-content-card {
  3312. background: #1c1c1c;
  3313. border: 1px solid #333;
  3314. border-radius: 8px;
  3315. padding: 16px;
  3316. margin-bottom: 12px;
  3317. }
  3318. .tribe-content-card h2 {
  3319. margin-top: 0;
  3320. }
  3321. .tribe-content-grid {
  3322. display: grid;
  3323. grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  3324. gap: 16px;
  3325. }
  3326. .tribe-content-list {
  3327. display: flex;
  3328. flex-direction: column;
  3329. gap: 12px;
  3330. }
  3331. .tribe-content-header {
  3332. display: flex;
  3333. justify-content: space-between;
  3334. align-items: center;
  3335. margin-bottom: 16px;
  3336. }
  3337. .tribe-search-form{display:flex;gap:10px;align-items:center}
  3338. .tribe-content-filters {
  3339. display: flex;
  3340. gap: 8px;
  3341. margin-bottom: 12px;
  3342. }
  3343. .tribe-content-status {
  3344. display: inline-block;
  3345. padding: 2px 8px;
  3346. border-radius: 4px;
  3347. font-size: 12px;
  3348. font-weight: bold;
  3349. }
  3350. .tribe-content-status-open {
  3351. background: #2d5a27;
  3352. color: #7cc576;
  3353. }
  3354. .tribe-content-status-closed {
  3355. background: #5a2727;
  3356. color: #c57676;
  3357. }
  3358. .tribe-content-status-in-progress {
  3359. background: #5a4e27;
  3360. color: #c5b576;
  3361. }
  3362. .tribe-content-meta {
  3363. display: flex;
  3364. gap: 12px;
  3365. flex-wrap: wrap;
  3366. margin: 8px 0;
  3367. color: #9aa3b2;
  3368. font-size: 14px;
  3369. }
  3370. .tribe-content-actions {
  3371. display: flex;
  3372. gap: 8px;
  3373. margin-top: 12px;
  3374. }
  3375. .tribe-content-actions form {
  3376. margin: 0;
  3377. }
  3378. .tribe-inhabitants-grid {
  3379. display: grid;
  3380. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  3381. gap: 16px;
  3382. }
  3383. .tribe-inhabitant-card {
  3384. background: #1c1c1c;
  3385. border-radius: 8px;
  3386. padding: 12px;
  3387. text-align: center;
  3388. }
  3389. .tribe-inhabitant-avatar {
  3390. width: 64px;
  3391. height: 64px;
  3392. border-radius: 50%;
  3393. object-fit: cover;
  3394. }
  3395. .tribe-votation-options {
  3396. display: flex;
  3397. flex-direction: column;
  3398. gap: 8px;
  3399. margin: 12px 0;
  3400. }
  3401. .tribe-votation-option {
  3402. display: flex;
  3403. align-items: center;
  3404. gap: 12px;
  3405. }
  3406. .tribe-votation-bar {
  3407. background: #333;
  3408. border-radius: 4px;
  3409. height: 24px;
  3410. position: relative;
  3411. overflow: hidden;
  3412. flex: 1;
  3413. }
  3414. .tribe-votation-fill {
  3415. background: #ff6600;
  3416. height: 100%;
  3417. border-radius: 4px;
  3418. transition: width 0.3s ease;
  3419. }
  3420. .tribe-fill-0 { width: 0%; }
  3421. .tribe-fill-5 { width: 5%; }
  3422. .tribe-fill-10 { width: 10%; }
  3423. .tribe-fill-15 { width: 15%; }
  3424. .tribe-fill-20 { width: 20%; }
  3425. .tribe-fill-25 { width: 25%; }
  3426. .tribe-fill-30 { width: 30%; }
  3427. .tribe-fill-35 { width: 35%; }
  3428. .tribe-fill-40 { width: 40%; }
  3429. .tribe-fill-45 { width: 45%; }
  3430. .tribe-fill-50 { width: 50%; }
  3431. .tribe-fill-55 { width: 55%; }
  3432. .tribe-fill-60 { width: 60%; }
  3433. .tribe-fill-65 { width: 65%; }
  3434. .tribe-fill-70 { width: 70%; }
  3435. .tribe-fill-75 { width: 75%; }
  3436. .tribe-fill-80 { width: 80%; }
  3437. .tribe-fill-85 { width: 85%; }
  3438. .tribe-fill-90 { width: 90%; }
  3439. .tribe-fill-95 { width: 95%; }
  3440. .tribe-fill-100 { width: 100%; }
  3441. .tribe-votation-label {
  3442. min-width: 120px;
  3443. color: #ccc;
  3444. }
  3445. .tribe-votation-count {
  3446. min-width: 40px;
  3447. text-align: right;
  3448. color: #9aa3b2;
  3449. }
  3450. .tribe-forum-thread {
  3451. background: #1c1c1c;
  3452. border: 1px solid #333;
  3453. border-radius: 8px;
  3454. padding: 16px;
  3455. margin-bottom: 12px;
  3456. }
  3457. .tribe-forum-reply {
  3458. background: #222;
  3459. border-left: 3px solid #ff6600;
  3460. padding: 12px;
  3461. margin: 8px 0 8px 24px;
  3462. border-radius: 0 8px 8px 0;
  3463. }
  3464. .tribe-forum-reply-form {
  3465. margin-top: 16px;
  3466. }
  3467. .tribe-media-grid {
  3468. display: grid;
  3469. grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  3470. gap: 18px;
  3471. }
  3472. .tribe-media-item {
  3473. background: #1c1c1c;
  3474. border-radius: 8px;
  3475. overflow: hidden;
  3476. border: 1px solid #333;
  3477. transition: border-color .2s;
  3478. padding-bottom: 8px;
  3479. }
  3480. .tribe-media-item:hover {
  3481. border-color: #ffa500;
  3482. }
  3483. .tribe-media-item a {
  3484. display: block;
  3485. }
  3486. .tribe-media-thumb {
  3487. width: 100%;
  3488. height: 160px;
  3489. object-fit: cover;
  3490. display: block;
  3491. cursor: pointer;
  3492. }
  3493. .tribe-media-audio {
  3494. width: 100%;
  3495. padding: 8px;
  3496. box-sizing: border-box;
  3497. }
  3498. .tribe-media-item img {
  3499. width: 100%;
  3500. height: 160px;
  3501. object-fit: cover;
  3502. }
  3503. .tribe-media-item video {
  3504. width: 100%;
  3505. height: 160px;
  3506. object-fit: cover;
  3507. }
  3508. .tribe-media-title-link {
  3509. color: #ffa500;
  3510. font-weight: bold;
  3511. text-decoration: none;
  3512. display: block;
  3513. margin-bottom: 4px;
  3514. }
  3515. .tribe-media-title-link:hover {
  3516. text-decoration: underline;
  3517. }
  3518. .tribe-media-item-info {
  3519. padding: 12px;
  3520. }
  3521. .tribe-media-date {
  3522. margin: 6px 0 2px 0;
  3523. font-size: 0.85em;
  3524. }
  3525. .tribe-media-author {
  3526. margin: 0 0 6px 0;
  3527. font-size: 0.85em;
  3528. }
  3529. .tribe-media-filters {
  3530. display: flex;
  3531. gap: 8px;
  3532. margin-bottom: 12px;
  3533. }
  3534. .tribe-overview-grid {
  3535. display: grid;
  3536. grid-template-columns: 1fr 1fr;
  3537. gap: 16px;
  3538. }
  3539. .tribe-overview-section {
  3540. background: #1c1c1c;
  3541. border-radius: 8px;
  3542. padding: 16px;
  3543. }
  3544. .tribe-overview-section h2 {
  3545. margin-top: 0;
  3546. font-size: 16px;
  3547. border-bottom: 1px solid #333;
  3548. padding-bottom: 8px;
  3549. }
  3550. .tribe-priority-critical {
  3551. color: #ff4444;
  3552. font-weight: bold;
  3553. }
  3554. .tribe-priority-high {
  3555. color: #ff8800;
  3556. font-weight: bold;
  3557. }
  3558. .tribe-priority-medium {
  3559. color: #ffcc00;
  3560. }
  3561. .tribe-priority-low {
  3562. color: #88cc88;
  3563. }
  3564. .tribe-feed-compose {
  3565. display: flex;
  3566. flex-direction: column;
  3567. gap: 8px;
  3568. margin-bottom: 16px;
  3569. }
  3570. .tribe-feed-compose textarea {
  3571. width: 100%;
  3572. box-sizing: border-box;
  3573. }
  3574. .tribe-feed-compose .tribe-feed-send {
  3575. align-self: flex-end;
  3576. }
  3577. .tribe-parent-box {
  3578. margin-bottom: 12px;
  3579. text-align: center;
  3580. }
  3581. .tribe-parent-box h2 {
  3582. margin: 0 0 8px 0;
  3583. }
  3584. .tribe-parent-link {
  3585. display: block;
  3586. }
  3587. .tribe-parent-image {
  3588. width: 100%;
  3589. max-width: 200px;
  3590. border-radius: 8px;
  3591. border: 2px solid #444;
  3592. }
  3593. .tribe-card-parent {
  3594. padding: 8px 12px;
  3595. display: flex;
  3596. align-items: center;
  3597. gap: 8px;
  3598. }
  3599. .tribe-parent-card-link {
  3600. color: #FFA500;
  3601. font-weight: bold;
  3602. text-decoration: none;
  3603. }
  3604. .tribe-parent-card-link:hover {
  3605. text-decoration: underline;
  3606. }
  3607. .comment-submit-btn {
  3608. width: auto;
  3609. max-width: 200px;
  3610. }
  3611. .market-owner-actions-inline {
  3612. display: flex;
  3613. gap: 8px;
  3614. flex-wrap: wrap;
  3615. align-items: center;
  3616. }
  3617. .project-goal-highlight {
  3618. font-size: 1.4em;
  3619. font-weight: 700;
  3620. }
  3621. .project-control-form--progress {
  3622. max-width: 300px;
  3623. }
  3624. .project-progress-input {
  3625. max-width: 80px;
  3626. }
  3627. .applicants-under {
  3628. color: #4caf50;
  3629. }
  3630. .applicants-at {
  3631. color: #ffeb3b;
  3632. }
  3633. .applicants-over {
  3634. color: #f44336;
  3635. }
  3636. .transfer-amount-highlight {
  3637. font-size: 1.3em;
  3638. font-weight: 700;
  3639. }
  3640. .pixelia-paint-form {
  3641. display: flex;
  3642. flex-wrap: wrap;
  3643. gap: 12px;
  3644. align-items: center;
  3645. }
  3646. .pixelia-paint-form label,
  3647. .pixelia-paint-form input,
  3648. .pixelia-paint-form select,
  3649. .pixelia-paint-form button {
  3650. width: auto;
  3651. margin: 0;
  3652. }
  3653. .pixelia-paint-form input[type="number"] {
  3654. max-width: 80px;
  3655. }
  3656. .method-image-centered {
  3657. text-align: center;
  3658. margin: 12px 0;
  3659. }
  3660. .method-image-centered img {
  3661. height: auto;
  3662. margin: 0 auto;
  3663. }
  3664. .tag-cloud-wrap {
  3665. display: flex;
  3666. flex-wrap: wrap;
  3667. max-width: 90%;
  3668. gap: 14px;
  3669. justify-content: center;
  3670. align-items: center;
  3671. min-height: 220px;
  3672. padding: 36px;
  3673. border-radius: 16px;
  3674. }
  3675. .tag-cloud-item {
  3676. position: relative;
  3677. padding: 6px 14px;
  3678. border-radius: 999px;
  3679. font-weight: 500;
  3680. font-size: 0.95rem;
  3681. letter-spacing: 0.3px;
  3682. text-decoration: none;
  3683. transition: all 0.25s ease;
  3684. }
  3685. .tag-cloud-item:hover {
  3686. background: rgba(255,255,255,0.1);
  3687. border-color: rgba(255,255,255,0.2);
  3688. transform: translateY(-3px);
  3689. color: #ffffff;
  3690. box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  3691. }
  3692. .tag-cloud-item[data-weight="1"] {
  3693. font-size: 0.85rem;
  3694. opacity: 0.7;
  3695. }
  3696. .tag-cloud-item[data-weight="2"] {
  3697. font-size: 0.95rem;
  3698. opacity: 0.8;
  3699. }
  3700. .tag-cloud-item[data-weight="3"] {
  3701. font-size: 1.05rem;
  3702. opacity: 0.9;
  3703. }
  3704. .tag-cloud-item[data-weight="4"] {
  3705. font-size: 1.15rem;
  3706. font-weight: 600;
  3707. }
  3708. .stats-karma-block {
  3709. background-color: #222;
  3710. padding: 24px;
  3711. border-radius: 8px;
  3712. border: 1px solid #444;
  3713. margin-bottom: 24px;
  3714. }
  3715. .feed-detail-card {
  3716. background-color: #222;
  3717. border: 1px solid #444;
  3718. border-radius: 8px;
  3719. padding: 16px;
  3720. margin-bottom: 16px;
  3721. }
  3722. .map-card {
  3723. background-color: #222;
  3724. border: 1px solid #444;
  3725. border-radius: 8px;
  3726. padding: 16px;
  3727. margin-bottom: 16px;
  3728. }
  3729. .map-card-info {
  3730. display: flex;
  3731. gap: 12px;
  3732. align-items: center;
  3733. flex-wrap: wrap;
  3734. margin-bottom: 8px;
  3735. border: 0px;
  3736. }
  3737. .map-type-badge {
  3738. display: inline-block;
  3739. padding: 2px 8px;
  3740. border-radius: 4px;
  3741. font-size: 0.75rem;
  3742. font-weight: 700;
  3743. letter-spacing: 0.5px;
  3744. background-color: #FFA500;
  3745. color: #000;
  3746. }
  3747. .map-coords {
  3748. font-family: monospace;
  3749. font-size: 0.85rem;
  3750. color: white;
  3751. }
  3752. .map-coords-detail {
  3753. font-family: monospace;
  3754. font-size: 0.9rem;
  3755. color: white;
  3756. }
  3757. .map-marker-count {
  3758. font-size: 0.8rem;
  3759. color: #888;
  3760. }
  3761. .map-description {
  3762. margin: 20px 0;
  3763. }
  3764. .map-url-container {
  3765. margin: 8px 0;
  3766. }
  3767. .map-url-link {
  3768. color: #FFA500;
  3769. word-break: break-all;
  3770. }
  3771. .map-detail-info {
  3772. display: flex;
  3773. gap: 16px;
  3774. align-items: center;
  3775. flex-wrap: wrap;
  3776. margin-bottom: 12px;
  3777. }
  3778. .map-wrap {
  3779. margin-right: 30px;
  3780. position: relative;
  3781. border: 0px;
  3782. }
  3783. .map-img {
  3784. display: block;
  3785. width: 100% !important;
  3786. height: 100% !important;
  3787. max-width: none !important;
  3788. border: none !important;
  3789. }
  3790. .map-bar {
  3791. display: flex;
  3792. align-items: center;
  3793. justify-content: space-between;
  3794. padding: 4px 12px;
  3795. background-color: #1a1a1a;
  3796. border-top: 1px solid #333;
  3797. }
  3798. .map-bar-info {
  3799. font-size: 0.75rem;
  3800. color: #aaa;
  3801. }
  3802. .map-attr {
  3803. font-size: 0.6rem;
  3804. color: #555;
  3805. }
  3806. .map-coord-preview {
  3807. display: flex;
  3808. align-items: center;
  3809. gap: 8px;
  3810. padding: 8px 12px;
  3811. background-color: #222;
  3812. border-radius: 6px;
  3813. margin: 8px 0;
  3814. font-family: monospace;
  3815. font-size: 0.9rem;
  3816. color: #FFA500;
  3817. }
  3818. .map-coord-inline {
  3819. display: inline-flex;
  3820. align-items: center;
  3821. gap: 6px;
  3822. font-family: monospace;
  3823. font-size: 0.9rem;
  3824. color: #FFA500;
  3825. margin: 4px 0;
  3826. }
  3827. .map-coord-pin {
  3828. font-size: 1.2rem;
  3829. }
  3830. .map-create-layout {
  3831. width: 100%;
  3832. }
  3833. .map-form {
  3834. margin-top: 12px;
  3835. }
  3836. .map-form label {
  3837. display: block;
  3838. font-weight: 600;
  3839. color: #FFA500;
  3840. margin-top: 8px;
  3841. margin-bottom: 4px;
  3842. }
  3843. .map-form input[type="text"],
  3844. .map-form textarea,
  3845. .map-form select {
  3846. width: 100%;
  3847. box-sizing: border-box;
  3848. }
  3849. .map-form-row {
  3850. display: flex;
  3851. border: 0px;
  3852. gap: 12px;
  3853. }
  3854. .map-form-field {
  3855. flex: 1;
  3856. }
  3857. .map-card {
  3858. background-color: #222;
  3859. border: 1px solid #444;
  3860. border-radius: 8px;
  3861. padding: 12px 16px;
  3862. margin-bottom: 12px;
  3863. display: flex;
  3864. gap: 16px;
  3865. align-items: flex-start;
  3866. }
  3867. .map-card-thumb-link {
  3868. flex-shrink: 0;
  3869. }
  3870. .map-card-thumb {
  3871. width: 120px !important;
  3872. height: 120px !important;
  3873. max-width: none !important;
  3874. border-radius: 6px !important;
  3875. border: 1px solid #555 !important;
  3876. object-fit: cover;
  3877. }
  3878. .map-card-body {
  3879. flex: 1;
  3880. min-width: 0;
  3881. }
  3882. .map-card-header {
  3883. display: flex;
  3884. justify-content: space-between;
  3885. align-items: flex-start;
  3886. gap: 8px;
  3887. flex-wrap: wrap;
  3888. margin-bottom: 8px;
  3889. }
  3890. .map-card-actions {
  3891. display: flex;
  3892. gap: 6px;
  3893. flex-wrap: wrap;
  3894. align-items: center;
  3895. }
  3896. .map-click-hint {
  3897. color: #FFA500;
  3898. font-size: 0.85rem;
  3899. padding: 6px 0;
  3900. }
  3901. .map-detail {
  3902. background-color: #222;
  3903. border: 1px solid #444;
  3904. border-radius: 8px;
  3905. padding: 16px;
  3906. }
  3907. .map-detail-header {
  3908. display: flex;
  3909. justify-content: space-between;
  3910. align-items: center;
  3911. gap: 12px;
  3912. flex-wrap: wrap;
  3913. margin-bottom: 12px;
  3914. }
  3915. .map-detail-actions {
  3916. display: flex;
  3917. gap: 6px;
  3918. flex-wrap: wrap;
  3919. align-items: center;
  3920. }
  3921. .map-marker-form {
  3922. margin-top: 20px;
  3923. padding-top: 16px;
  3924. border-top: 1px solid #444;
  3925. }
  3926. .map-markers-list {
  3927. margin-top: 16px;
  3928. }
  3929. .map-marker-item {
  3930. display: flex;
  3931. align-items: flex-start;
  3932. gap: 10px;
  3933. padding: 10px 0;
  3934. border-bottom: 1px solid #333;
  3935. }
  3936. .map-marker-dot {
  3937. font-size: 1.2rem;
  3938. line-height: 1;
  3939. }
  3940. .map-marker-info {
  3941. display: flex;
  3942. flex-direction: column;
  3943. gap: 2px;
  3944. border: 0px;
  3945. }
  3946. .map-marker-label {
  3947. font-weight: 600;
  3948. color: #ffa300;
  3949. }
  3950. .map-marker-coords {
  3951. font-family: monospace;
  3952. font-size: 0.8rem;
  3953. color: white;
  3954. }
  3955. .map-marker-meta {
  3956. font-size: 0.75rem;
  3957. }
  3958. .map-empty {
  3959. padding: 24px;
  3960. text-align: center;
  3961. color: #666;
  3962. font-size: 0.9rem;
  3963. }
  3964. .map-form {
  3965. width: 100%;
  3966. }
  3967. .map-form label {
  3968. font-weight: 600;
  3969. color: #FFA500;
  3970. }
  3971. .map-form input[type="text"],
  3972. .map-form textarea,
  3973. .map-form select {
  3974. width: 100%;
  3975. max-width: 100%;
  3976. box-sizing: border-box;
  3977. }
  3978. .map-marker-form {
  3979. margin-top: 24px;
  3980. padding-top: 16px;
  3981. border-top: 1px solid #444;
  3982. }
  3983. .map-marker-form label {
  3984. font-weight: 600;
  3985. color: #FFA500;
  3986. }
  3987. .map-marker-form input[type="text"] {
  3988. width: 100%;
  3989. max-width: 100%;
  3990. box-sizing: border-box;
  3991. }
  3992. .map-form-map-slot {
  3993. margin: 12px 0;
  3994. border: none;
  3995. overflow: hidden;
  3996. }
  3997. .map-markers-list {
  3998. margin-top: 16px;
  3999. text-align: left;
  4000. }
  4001. .map-marker-item {
  4002. padding: 8px 0;
  4003. border-bottom: 1px solid #333;
  4004. display: flex;
  4005. align-items: center;
  4006. gap: 8px;
  4007. flex-wrap: wrap;
  4008. }
  4009. .map-marker-dot {
  4010. color: #4a9eff;
  4011. font-size: 0.9rem;
  4012. }
  4013. .search-result-image {
  4014. max-width: 100%;
  4015. max-height: 300px;
  4016. border-radius: 4px;
  4017. display: block;
  4018. margin: 6px 0;
  4019. }
  4020. .map-embed-section {
  4021. display: flex;
  4022. flex-direction: column;
  4023. gap: 6px;
  4024. margin: 8px 0;
  4025. }
  4026. .map-location-inline {
  4027. display: inline-flex;
  4028. align-items: center;
  4029. gap: 4px;
  4030. }
  4031. .map-location-icon {
  4032. color: #FFA500;
  4033. }
  4034. .map-location-link {
  4035. color: #FFA500;
  4036. font-size: 0.85rem;
  4037. }
  4038. .map-location-embed {
  4039. margin: 16px 0;
  4040. }
  4041. .maps-list {
  4042. display: flex;
  4043. flex-direction: column;
  4044. gap: 16px;
  4045. }
  4046. .maps-search {
  4047. margin-bottom: 16px;
  4048. }
  4049. .inhabitant-karma-ubi {
  4050. margin-top: 8px;
  4051. display: flex;
  4052. flex-direction: column;
  4053. gap: 2px;
  4054. }
  4055. .inhabitant-karma-ubi .karma-line,
  4056. .inhabitant-karma-ubi .ubi-line {
  4057. display: block;
  4058. font-size: 0.9em;
  4059. }
  4060. .shop-featured-item,
  4061. .shop-featured-item:hover,
  4062. .shop-featured-item:visited,
  4063. .shop-featured-item:active {
  4064. text-decoration: none;
  4065. }
  4066. .shop-detail {
  4067. border: 1px solid #333;
  4068. border-radius: 8px;
  4069. padding: 16px;
  4070. }
  4071. .map-form-map-slot {
  4072. margin: 12px 0 0 0;
  4073. border: none;
  4074. outline: none;
  4075. box-shadow: none;
  4076. overflow: hidden;
  4077. }
  4078. .map-marker-item {
  4079. border: none;
  4080. padding: 4px 0;
  4081. display: flex;
  4082. align-items: center;
  4083. gap: 8px;
  4084. flex-wrap: nowrap;
  4085. text-align: left;
  4086. }
  4087. .map-marker-info {
  4088. display: flex;
  4089. flex-direction: row;
  4090. align-items: center;
  4091. gap: 8px;
  4092. flex-wrap: nowrap;
  4093. padding: 4px 0;
  4094. width: 100%;
  4095. overflow: hidden;
  4096. text-align: left;
  4097. justify-content: flex-start;
  4098. }
  4099. .map-markers-list h3 {
  4100. margin-bottom: 4px;
  4101. }
  4102. .map-form-full {
  4103. width: 100%;
  4104. }
  4105. .map-form-full form {
  4106. width: 100%;
  4107. }
  4108. .map-osm-embed {
  4109. width: 100%;
  4110. height: 450px;
  4111. border: 1px solid #444;
  4112. border-radius: 8px;
  4113. margin: 12px 0;
  4114. }
  4115. .map-viewer {
  4116. width: 100%;
  4117. overflow-x: auto;
  4118. overflow-y: hidden;
  4119. border: 0px;
  4120. }
  4121. .map-form-full, .map-form-full form {
  4122. box-sizing: border-box;
  4123. overflow: hidden;
  4124. }
  4125. .map-popup {
  4126. display: none;
  4127. position: fixed;
  4128. top: 0; left: 0; right: 0; bottom: 0;
  4129. background: rgba(0,0,0,0.65);
  4130. z-index: 1000;
  4131. align-items: center;
  4132. justify-content: center;
  4133. }
  4134. .map-popup:target {
  4135. display: flex;
  4136. }
  4137. .map-popup-box {
  4138. background: #222;
  4139. border: 1px solid #555;
  4140. border-radius: 10px;
  4141. padding: 20px 24px;
  4142. max-width: 360px;
  4143. width: 90%;
  4144. color: #ddd;
  4145. position: relative;
  4146. }
  4147. .map-popup-close {
  4148. position: absolute;
  4149. top: 10px; right: 14px;
  4150. color: #FFA500;
  4151. text-decoration: none;
  4152. font-size: 1.2rem;
  4153. line-height: 1;
  4154. }
  4155. .map-popup-label {
  4156. font-weight: 600;
  4157. font-size: 1rem;
  4158. color: #eee;
  4159. margin-bottom: 6px;
  4160. }
  4161. .map-popup-coords {
  4162. font-family: monospace;
  4163. font-size: 0.85rem;
  4164. color: white;
  4165. }
  4166. .map-popup-link {
  4167. color: #FFA500;
  4168. text-decoration: underline;
  4169. word-break: break-all;
  4170. }
  4171. .map-popup-img {
  4172. display: block;
  4173. max-width: 180px;
  4174. max-height: 120px;
  4175. object-fit: cover;
  4176. border-radius: 4px;
  4177. margin: 6px auto;
  4178. }
  4179. .map-marker-img {
  4180. display: block;
  4181. max-width: 120px;
  4182. max-height: 80px;
  4183. object-fit: cover;
  4184. border-radius: 4px;
  4185. margin: 4px 0;
  4186. }
  4187. .map-zoom-info {
  4188. display: block;
  4189. font-size: 0.8rem;
  4190. color: #888;
  4191. margin-bottom: 4px;
  4192. }
  4193. .map-embed-url {
  4194. margin-top: 6px;
  4195. }
  4196. .map-embed-url .map-location-link {
  4197. font-size: 0.8rem;
  4198. }
  4199. .map-zone {
  4200. display: block;
  4201. }
  4202. .map-popup-container { height: 0; overflow: hidden; border: 0px; }
  4203. .project-maploc {
  4204. margin: 6px 0;
  4205. }
  4206. .project-maploc .map-location-link {
  4207. font-size: 0.85rem;
  4208. word-break: break-all;
  4209. }
  4210. .shop-product-actions:empty {
  4211. display: none;
  4212. }
  4213. .ubi-available{color:#4CAF50;font-weight:bold}
  4214. .ubi-unavailable{color:#F44336;font-weight:bold}
  4215. .banking-ubi .card-field{margin:4px 0}
  4216. .pad-status-open{font-weight:bold}
  4217. .pad-status-invite{color:#FFA500;font-weight:bold}
  4218. .pad-status-closed{font-weight:bold}
  4219. .pad-deadline{color:#FFA500;font-size:0.9rem}
  4220. .pad-editor-container{margin-top:12px}
  4221. .pad-editor-area{display:flex;flex-direction:column;gap:8px;}
  4222. .pad-editor-area textarea{width:100%;min-height:200px;background:#1a1a1a;color:#eee;border:1px solid #444;border-radius:4px;padding:10px;font-family:monospace;font-size:0.95rem;resize:vertical;box-sizing:border-box}
  4223. .pad-members-list{flex:1;min-width:160px;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:10px}
  4224. .pad-members-list h4{margin:0 0 8px 0;color:#aaa;font-size:0.85rem;text-transform:uppercase}
  4225. .pad-member-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:0.85rem}
  4226. .pad-color-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}
  4227. .pad-entries{margin-top:16px;display:flex;flex-direction:column;gap:8px}
  4228. .pad-entry{padding:8px 12px;border-left:4px solid #444;background:#1a1a1a;border-radius:0 4px 4px 0}
  4229. .pad-entry-header{font-size:0.8rem;color:#888;margin-bottom:4px}
  4230. .pad-entry-text{white-space:pre-wrap;word-break:break-word;font-family:monospace;font-size:0.9rem}
  4231. .pad-invite-section{margin-top:12px;padding:12px;background:#1a1a1a;border:1px solid #333;border-radius:4px}
  4232. .pad-invite-section input[type="text"]{width:100%;background:#111;color:#eee;border:1px solid #555;border-radius:4px;padding:8px;box-sizing:border-box;margin-bottom:8px}
  4233. .chat-main-split{display:flex;gap:16px;width:100%}
  4234. .chat-messages-column{flex:2;min-width:0;display:flex;flex-direction:column;gap:8px}
  4235. .chat-participants-column{flex:1;min-width:140px;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:12px}
  4236. .chat-participants-column h2{margin:0 0 8px 0;color:#aaa;font-size:0.85rem;text-transform:uppercase;font-weight:normal}
  4237. .chat-participants-list{list-style:none;padding:0;margin:0}
  4238. .chat-participants-list li{padding:4px 0;font-size:0.85rem}
  4239. .chat-message-form{background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:10px}
  4240. .chat-message-form textarea{width:100%;box-sizing:border-box;background:#111;color:#eee;border:1px solid #555;border-radius:4px;padding:8px;resize:vertical;font-family:inherit}
  4241. .chat-messages-list{display:flex;flex-direction:column;gap:4px}
  4242. .chat-message{padding:6px 10px;border-radius:4px;background:#1a1a1a;word-break:break-word;border:none}
  4243. .chat-message-author{border-left-color:#FFA500;background:#1f1800}
  4244. .chat-message-self{border-left-color:#888;background:#181818}
  4245. .chat-message-meta{font-size:0.8rem;color:#888;border:none}
  4246. .chat-message-date{color:#666}
  4247. .chat-message-sender a{color:#aaa}
  4248. .chat-message-text{display:block;margin-top:2px;font-size:0.9rem;white-space:pre-wrap;word-break:break-word}
  4249. .calendar-note-card{position:relative;padding:10px 80px 10px 10px;min-height:56px}
  4250. .calendar-note-delete{position:absolute;top:8px;right:8px;margin:0}
  4251. .calendar-note-delete button{padding:4px 10px;font-size:0.8rem}
  4252. .chat-no-messages{color:#666;font-style:italic;padding:12px 0}
  4253. .chat-join-section{margin-top:12px;padding:12px;background:#1a1a1a;border:1px solid #333;border-radius:4px}
  4254. .chat-invite-form input[type="text"]{width:100%;background:#111;color:#eee;border:1px solid #555;border-radius:4px;padding:8px;box-sizing:border-box;margin-bottom:8px}
  4255. .games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:16px}
  4256. .game-card{border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#111}
  4257. .game-card-media{width:100%;max-height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000}
  4258. .game-card-media img{width:100%;max-height:180px;object-fit:cover}
  4259. .game-card-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
  4260. .game-card-title{margin:0;font-size:1.1rem;color:#FFA500}
  4261. .game-card-desc{margin:0;font-size:0.9rem;color:#ccc;flex:1}
  4262. .game-card-actions{display:flex;justify-content:center;margin-top:8px}
  4263. .hall-of-fame-table{width:100%;border-collapse:collapse;font-size:0.9rem}
  4264. .hall-of-fame-table th{color:#FFA500;text-align:left;padding:4px 8px;border-bottom:1px solid #444}
  4265. .hall-of-fame-table td{padding:4px 8px;color:#ccc;border-bottom:1px solid #222}
  4266. .hall-of-fame-table tr:hover td{background:#1a1a1a}
  4267. .activity-filter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:24px}
  4268. .activity-filter-col{display:flex;flex-direction:column;gap:8px}
  4269. .visit-btn-centered{display:flex;justify-content:center;margin-top:10px}
  4270. .pad-editor-white{width:100%;box-sizing:border-box;background:#fff;color:#111;border-radius:4px;padding:10px;resize:vertical;font-family:inherit;font-size:0.95rem}
  4271. .pad-readonly-text{background:#fff;color:#111;border:1px solid #aaa;border-radius:4px;padding:10px;white-space:pre-wrap;word-break:break-word;font-size:0.95rem}
  4272. .pad-version-list{margin-top:12px}
  4273. .pad-version-item{display:flex;flex-direction:column;gap:4px;padding:8px;border-bottom:1px solid #333;font-size:0.85rem}
  4274. .pad-version-date{color:#888}
  4275. .pad-version-author a{color:#FFA500}
  4276. .pad-version-link{color:#aaa;text-decoration:underline;cursor:pointer}
  4277. .pad-author-color-0{background-color:#e74c3c}
  4278. .pad-author-color-1{background-color:#3498db}
  4279. .pad-author-color-2{background-color:#2ecc71}
  4280. .pad-author-color-3{background-color:#f39c12}
  4281. .pad-author-color-4{background-color:#9b59b6}
  4282. .pad-author-color-5{background-color:#1abc9c}
  4283. .pad-author-color-6{background-color:#e67e22}
  4284. .pad-author-color-7{background-color:#e91e63}
  4285. .pad-author-color-8{background-color:#00bcd4}
  4286. .pad-author-color-9{background-color:#8bc34a}
  4287. .pad-author-color-none{background-color:#888}
  4288. .pad-entry-author{display:block;font-size:.75rem;margin-bottom:4px;opacity:.75}
  4289. .pad-author-swatch{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:middle;border:1px solid #000}
  4290. .pad-readonly-colored{background:#fff;color:#111;padding:12px;border-radius:4px;min-height:120px;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.95rem;border:1px solid #aaa;margin-bottom:10px}
  4291. .pad-author-span{padding:1px 2px;border-radius:2px}
  4292. .pad-members-section{margin-top:12px;border:none}
  4293. .pad-members-below-tags{margin-top:12px;border:none}
  4294. .pad-member-card{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:0.85rem}
  4295. .pad-members-grid{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
  4296. .pad-version-section{margin-top:16px;border-top:1px solid #333;padding-top:12px}
  4297. .chat-full-width{flex:1;min-width:0}
  4298. .chat-participants-section{margin-top:12px;padding:12px;background:#1a1a1a;border:none;border-radius:4px}
  4299. .chat-participants-below{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  4300. .chat-participants-below a{font-size:0.85rem;color:#aaa}
  4301. .chat-message-image-wrap{margin:4px 0}
  4302. .chat-message-image{max-width:100%;max-height:300px;border-radius:4px}
  4303. .games-single-col{display:flex;flex-direction:column;gap:16px;margin-top:16px}
  4304. .game-row{display:flex;gap:16px;border:1px solid #333;border-radius:8px;overflow:hidden;background:#111;padding:12px;align-items:flex-start}
  4305. .game-row-media{flex-shrink:0;width:120px}
  4306. .game-row-media img{width:100%;border-radius:4px}
  4307. .game-row-body{flex:1;display:flex;flex-direction:column;gap:6px}
  4308. .game-top-score{font-size:0.85rem;color:#aaa}
  4309. .score-first{color:#2ecc71;font-weight:bold}
  4310. .games-scoring-list{display:flex;flex-direction:column;gap:24px;margin-top:16px}
  4311. .game-scoring-section{border:1px solid #333;border-radius:8px;padding:16px;background:#111}
  4312. .game-scoring-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
  4313. .game-scoring-thumb{width:80px;border-radius:4px;flex-shrink:0}
  4314. .game-scoring-info{flex:1}
  4315. .game-shell-section{padding:0!important;margin:0}
  4316. .game-iframe{width:100%;height:82vh;border:none;background:#000;display:block}
  4317. .game-iframe-ecoinflow{height:95vh}
  4318. .game-iframe-neoninfiltrator{height:95vh}
  4319. .game-iframe-audiopendulum{height:95vh}
  4320. .game-iframe-flipflop{height:720px}
  4321. .game-iframe-rockpaperscissors{height:580px}
  4322. .game-iframe-tiktaktoe{height:580px}
  4323. .game-desc-yellow{color:yellow}
  4324. .game-new-record-label{color:#FFA500;font-weight:bold}
  4325. .game-row-actions{display:flex;align-items:center;text-align:center;flex-shrink:0;border:0px;}
  4326. .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0}
  4327. .calendar-day-header{font-weight:bold;padding:8px;text-align:center;color:#FFA500}
  4328. .calendar-day{padding:10px 4px;text-align:center;background:#222;border-radius:4px;min-height:36px}
  4329. .calendar-day-empty{background:#111;opacity:.4}
  4330. .calendar-day-marked{background:#FFA500;color:#000;font-weight:bold}
  4331. .calendar-day-marked a{color:#000;text-decoration:none;display:block}
  4332. .calendar-nav{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
  4333. .calendar-date-list{margin-top:16px}
  4334. .calendar-date-item{background:#333;padding:18px 108px 18px 18px;border-radius:6px;margin-bottom:14px;position:relative;min-height:64px}
  4335. .calendar-date-delete{position:absolute;top:12px;right:12px;margin:0}
  4336. .calendar-date-delete button{padding:4px 10px;font-size:0.8rem}
  4337. .calendar-date-item-header{color:#FFA500;font-weight:bold;margin-bottom:6px;width:max-content}
  4338. .calendar-participants-count{color:#FFA500;font-weight:bold}
  4339. .calendar-day-notes{margin-top:16px}
  4340. .pad-viewer-back{margin-bottom:12px}
  4341. .access-denied-msg{margin:12px 0;padding:12px;background:#1a1a1a;border:1px solid #555;border-radius:4px;color:#ccc;font-style:italic}
  4342. .torrent-table{width:100%;border-collapse:collapse;margin-top:12px}
  4343. .torrent-table th,.torrent-table td{padding:8px 12px;text-align:left}
  4344. .torrent-table th{background:#1a1a1a;color:#FFA500;font-weight:bold}
  4345. .torrent-download{margin:12px 0}
  4346. .torrent-download .filter-btn{border:none}