style.css 65 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920
  1. @charset "utf-8";
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. font-size: 100%;
  6. }
  7. a {
  8. text-decoration: none;
  9. word-break: break-word;
  10. color: inherit;
  11. }
  12. a:hover {
  13. text-decoration: underline;
  14. }
  15. ul, ol {
  16. list-style: none;
  17. padding: 0;
  18. margin: 0;
  19. }
  20. img {
  21. vertical-align: top;
  22. border: 0;
  23. max-width: 100%;
  24. max-height: 100%;
  25. }
  26. button {
  27. font-size: 100%;
  28. }
  29. .clear {
  30. clear: both;
  31. }
  32. .red {
  33. color: red!important;
  34. }
  35. .invisible {
  36. display: none!important;
  37. }
  38. .ellipsis:after {
  39. content:"...";
  40. }
  41. .no-events {
  42. pointer-events: none;
  43. }
  44. .disallow_select {
  45. user-select: none;
  46. -ms-user-select: none;
  47. -webkit-user-select: none;
  48. -moz-user-select: none;
  49. }
  50. .text_ellipsis {
  51. text-overflow: ellipsis;
  52. overflow: hidden;
  53. white-space: nowrap;
  54. }
  55. h1, h2, h3, h4, h5, h6 {
  56. font-weight: normal;
  57. line-height: normal;
  58. margin: 0;
  59. padding: 0;
  60. }
  61. blockquote, q {
  62. quotes: none;
  63. margin: 0;
  64. }
  65. blockquote * {
  66. margin: 0;
  67. word-break: break-all;
  68. }
  69. blockquote:before, blockquote:after,
  70. q:before, q:after {
  71. content:'';
  72. content:none;
  73. }
  74. article,aside,details,figcaption,figure,
  75. footer,header,hgroup,menu,nav,section {
  76. display:block;
  77. }
  78. textarea {
  79. width: 100%;
  80. }
  81. input {
  82. max-width: 100%;
  83. }
  84. button, input[type="submit"], input[type="button"]{
  85. background-color: transparent;
  86. border: none;
  87. cursor: pointer;
  88. outline: none;
  89. padding: 0;
  90. appearance: none;
  91. }
  92. img.emoji {
  93. height: 1em;
  94. width: 1em;
  95. margin: 0 .05em 0 .1em;
  96. vertical-align: -0.1em;
  97. }
  98. .emoji_poss .auth_emoji {
  99. display: inline-block;
  100. height: 100%;
  101. margin: auto;
  102. margin-left: 4px;
  103. }
  104. html {
  105. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  106. font-size: 100%;
  107. line-height: normal;
  108. color: #333;
  109. min-width: 100%;
  110. min-height: 100%;
  111. }
  112. body {
  113. margin: 0;
  114. padding: 0;
  115. min-width: 100%;
  116. min-height: 100%;
  117. word-wrap:break-word;
  118. background-color: #F5F8FA;
  119. }
  120. .status_form {
  121. width: 100%;
  122. padding: 12px;
  123. box-sizing: border-box;
  124. background-color: #E8F4FB;
  125. }
  126. .status_form.ready {
  127. background-color: #F2FAFF!important;
  128. }
  129. .status_form.ready .status_bottom .submit_status_label {
  130. background-color: #A3D8FF!important;
  131. pointer-events: none;
  132. cursor: default;
  133. }
  134. .status_form .status_bottom .disabled {
  135. color: #A3D8FF!important;
  136. pointer-events: none;
  137. cursor: default;
  138. }
  139. .status_form .status_top {
  140. display: flex;
  141. align-items: center;
  142. width: calc( 100% - 54px );
  143. padding-bottom: 0;
  144. margin-left: 54px;
  145. box-sizing: border-box;
  146. }
  147. .status_form .status_top .status_spoiler {
  148. color: #189EFC;
  149. width: 100%;
  150. height: 35px;
  151. border-radius: 4px;
  152. border: 1px solid #C7E7FB;
  153. font-size: 14px;
  154. padding: 8px;
  155. box-sizing: border-box;
  156. }
  157. .status_form .status_main {
  158. display: flex;
  159. flex-wrap: nowrap;
  160. }
  161. .status_form .status_main .icon_box {
  162. flex-shrink: 0;
  163. margin-right: 8px;
  164. width: 32px;
  165. height: 32px;
  166. border-radius: 5px;
  167. overflow: hidden;
  168. margin-left: 14px;
  169. }
  170. .status_form .status_main .status_textarea {
  171. flex: 1;
  172. padding: 8px;
  173. border-radius: 3px;
  174. box-sizing: border-box;
  175. border: 1px solid #C7E7FB;
  176. background-color: #fff;
  177. }
  178. .status_form .status_main .status_textarea textarea {
  179. color: #000;
  180. resize: none;
  181. height: 18px;
  182. border: none;
  183. max-width: 100%;
  184. font-size: 14px;
  185. font-family : "Helvetica Neue",Helvetica,Arial,sans-serif;
  186. line-height: normal;
  187. outline: 0;
  188. overflow: hidden;
  189. }
  190. .status_form .status_textarea textarea.focus {
  191. height: 68px;
  192. }
  193. .status_form .status_textarea .media_attachments_preview_area,
  194. .status_form .status_textarea .status_poll_editor {
  195. margin: 8px -8px -8px -8px;
  196. padding: 8px 12px;
  197. background-color: #F1F1F1;
  198. border-top: 1px solid #C7E7FB;
  199. }
  200. .status_form .status_textarea.closed .media_attachments_preview_area,
  201. .status_form .status_textarea.closed .status_poll_editor {
  202. display:none;
  203. }
  204. .status_form .status_textarea .media_attachments_preview_area {
  205. display: flex;
  206. flex-wrap: nowrap;
  207. }
  208. .status_form .status_textarea .media_attachments_preview {
  209. position: relative;
  210. flex-shrink: 0;
  211. max-width: 113px;
  212. height: 113px;
  213. margin-right: 8px;
  214. border-radius: 5px;
  215. border: 1px solid #C7E7FB;
  216. overflow: hidden;
  217. flex: 1;
  218. background-color: #fff;
  219. }
  220. .status_form .status_textarea .media_attachments_preview:last-child {
  221. margin-right: 0;
  222. }
  223. .status_form .status_textarea .media_attachments_preview_area.nsfw .media_attachments_preview::after {
  224. display: block;
  225. content: "";
  226. cursor: pointer;
  227. top: 0;
  228. font-weight: 300;
  229. width: 100%;
  230. height: 100%;
  231. position: absolute;
  232. background-color: rgba(0, 0, 0, 1);
  233. transition: 0.13s;
  234. }
  235. .status_form .status_textarea .media_attachments_preview_area.nsfw .media_attachments_preview:hover::after {
  236. background-color: rgba(0, 0, 0, 0);
  237. transition: 0.13s;
  238. }
  239. .status_form .status_textarea .media_attachments_preview img {
  240. width: 100%;
  241. height: 100%;
  242. object-fit: cover;
  243. }
  244. .status_form .status_textarea .media_attachments_preview .remove_button {
  245. position: absolute;
  246. z-index: 1;
  247. right: 0;
  248. top: 0;
  249. color: #fff;
  250. background-color: rgba(0, 0, 0, .8);
  251. border-radius: 50%;
  252. width: 19px;
  253. height: 19px;
  254. display: flex;
  255. align-content: center;
  256. justify-content: center;
  257. font-size: 14px;
  258. margin: 4px 4px 0 0;
  259. }
  260. .status_form .status_textarea .status_poll_editor .poll_field {
  261. margin:5px;
  262. width:calc(100% - 29px);
  263. }
  264. input[type='number'] {
  265. -moz-appearance:textfield;
  266. }
  267. input::-webkit-outer-spin-button,
  268. input::-webkit-inner-spin-button {
  269. -webkit-appearance:none;
  270. }
  271. .poll_time {
  272. margin-top:5px;
  273. padding-right:10px;
  274. font-size: 14px;
  275. color: #66757F;
  276. box-sizing: border-box;
  277. height:30px;
  278. border:1px solid #AAB8C2;
  279. border-radius:2px;
  280. background-color:#FFFFFF;
  281. display:inline-block;
  282. }
  283. .poll_time:focus-within {
  284. border:1px solid #189EFC;
  285. background-color:#FFFFFF;
  286. }
  287. .poll_time.redborder {
  288. border:1px solid #FF0000;
  289. }
  290. .poll_time input {
  291. outline:0;
  292. border:0;
  293. height:28px;
  294. max-width:60px;
  295. border-radius:2px;
  296. padding-left:5px;
  297. text-align:center;
  298. color: #66757F;
  299. }
  300. .poll_time input:focus {
  301. outline:0;
  302. }
  303. .poll_time input:invalid {
  304. box-shadow:none;
  305. }
  306. .poll_mc_switch {
  307. margin:0 !important;
  308. display:inline-block;
  309. vertical-align:middle;
  310. }
  311. .status_form .status_bottom {
  312. display: flex;
  313. align-items: center;
  314. width: calc( 100% - 52px );
  315. padding: 8px 0;
  316. padding-bottom: 0;
  317. box-sizing: border-box;
  318. padding-right: 0;
  319. margin-left: 52px;
  320. }
  321. .status_form .status_bottom .status_option_button {
  322. cursor: pointer;
  323. color: #43A7E5;
  324. font-size: 21px;
  325. border-radius: 3px;
  326. padding: 8px 12px;
  327. box-sizing: border-box;
  328. border: 1px solid transparent;;
  329. height: 39px;
  330. display: flex;
  331. justify-content: center;
  332. align-items: center;
  333. }
  334. .status_form .status_bottom .status_option_button:hover {
  335. border: 1px solid #C7E7FB
  336. }
  337. .status_form .status_bottom .status_option_button.active {
  338. animation-name: status_action_active;
  339. animation-duration: 0.5s;
  340. }
  341. .status_form .status_bottom .status_CW > span,
  342. .status_form .status_bottom .status_NSFW > span {
  343. display: flex;
  344. align-items: center;
  345. height: 22px;
  346. padding: 4px;
  347. color: #E8F4FB;
  348. border-radius: 3px;
  349. box-sizing: border-box;
  350. background-color: #43A7E5;
  351. text-align: center;
  352. }
  353. .status_form .status_bottom .status_CW > span {
  354. font-size: 10px;
  355. }
  356. .status_form .status_bottom .status_NSFW > span {
  357. font-size: 8px;
  358. }
  359. .status_form .status_bottom .status_privacy {
  360. position: relative;
  361. }
  362. .status_form .status_bottom .status_privacy .expand_privacy_menu {
  363. display: block;
  364. position: absolute;
  365. cursor: pointer;
  366. top: 32px;
  367. right: -122px;
  368. width: 160px;
  369. padding: 18px;
  370. font-size: 12px;
  371. border-radius: 3px;
  372. box-sizing: border-box;
  373. background-color: #fff;
  374. box-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.26);
  375. z-index: 2;
  376. }
  377. .status_form .status_bottom .status_privacy .expand_privacy_menu::before {
  378. display: block;
  379. content: "";
  380. z-index: -1;
  381. width: 20px;
  382. height: 20px;
  383. position: absolute;
  384. transform: rotate(45deg);
  385. top: -5px;
  386. left: 8px;
  387. background-color: #fff;
  388. }
  389. .status_form .status_bottom .status_privacy .expand_privacy_menu .status_privacy {
  390. display: block;
  391. cursor: pointer;
  392. font-size: 14px;
  393. margin-bottom: 12px;
  394. color: rgb(101, 119, 134);
  395. text-align: left;
  396. }
  397. .status_form .status_bottom .status_privacy .expand_privacy_menu .status_privacy:last-child {
  398. margin-bottom: 0;
  399. }
  400. .status_form .status_bottom .status_privacy .expand_privacy_menu .status_privacy:hover {
  401. color: #189EFC;
  402. }
  403. .status_form .status_bottom .status_privacy .expand_privacy_menu .status_privacy i {
  404. margin-right: 4px;
  405. }
  406. .status_form .status_bottom .submit_status_label_wrap {
  407. flex-grow: 1;
  408. display: flex;
  409. align-items: center;
  410. justify-content: flex-end;
  411. height: 39px;
  412. }
  413. .status_form .status_bottom .character_count {
  414. color: #66757F;
  415. font-size: 14px;
  416. padding: 0 12px;
  417. box-sizing: border-box;
  418. }
  419. .status_form .status_bottom .submit_status_label {
  420. height: 100%;
  421. padding: 6px 24px;
  422. cursor: pointer;
  423. float: right;
  424. border-radius: 4px;
  425. color: #fff;
  426. background-color: #2588D0;
  427. transition: 0.15s ease-out;
  428. box-sizing: border-box;
  429. display: flex;
  430. justify-content: center;
  431. align-items: center;
  432. }
  433. .status_form .status_bottom .submit_status_label:hover {
  434. background-color: #2571D0;
  435. transition: 0.15s ease-out;
  436. }
  437. .status_form .status_bottom .submit_status_label:active {
  438. background-color: #255ED0;
  439. transition: 0.15s ease-out;
  440. }
  441. .status_form .status_bottom .submit_status_label .toot_button_label {
  442. display: flex;
  443. justify-content: center;
  444. align-items: center;
  445. }
  446. .status_form .status_bottom .submit_status_label .toot_button_label i {
  447. display: inline-block;
  448. font-size: 21px;
  449. margin-right: 2px;
  450. }
  451. .status_form .status_bottom .submit_status_label .toot_button_label span {
  452. font-size: 13px;
  453. font-weight: 500;
  454. }
  455. .overlay_status{
  456. /*! width: 628px; */
  457. /*! margin: auto; */
  458. /*! z-index: 1000; */
  459. /*! top: 20%; */
  460. /*! left: 0; */
  461. /*! position: absolute; */
  462. /*! right: 0; */
  463. /*! bottom: 0; */
  464. margin-top: 20%;
  465. }
  466. .overlay_status_header {
  467. width: 600px;
  468. padding: 16px;
  469. box-sizing: border-box;
  470. background-color: #fff;
  471. border-top-left-radius: 5px;
  472. border-top-right-radius: 5px;
  473. margin: auto;
  474. text-align: center;
  475. color: #66757F;
  476. font-size: 18px;
  477. font-weight: 300;
  478. }
  479. #overlay_status_form.status_form {
  480. width: 600px;
  481. padding: 16px;
  482. box-sizing: border-box;
  483. background-color: #E8F4FB;
  484. border-bottom-left-radius: 5px;
  485. border-bottom-right-radius: 5px;
  486. margin: auto;
  487. }
  488. #overlay_status_form.status_form .status_top {
  489. width: 100%;
  490. margin-left: 0;
  491. }
  492. #overlay_status_form.status_form .status_main {
  493. display: flex;
  494. flex-wrap: nowrap;
  495. }
  496. #overlay_status_form.status_form .status_main .status_textarea {
  497. flex: 1;
  498. }
  499. #overlay_status_form.status_form .status_main .status_textarea textarea {
  500. color: #000;
  501. resize: none;
  502. max-width: 100%;
  503. height: auto;
  504. min-height: 72px;
  505. border-radius: 5px;
  506. font-family : "Helvetica Neue",Helvetica,Arial,sans-serif;
  507. font-size: 14px;
  508. padding: 4px;
  509. outline: 0;
  510. box-sizing: border-box;
  511. }
  512. #overlay_status_form.status_form .status_bottom {
  513. display: flex;
  514. align-items: center;
  515. width: auto;
  516. padding: 8px 0;
  517. padding-bottom: 0;
  518. margin-left: 0;
  519. box-sizing: border-box;
  520. padding-right: 0;
  521. }
  522. #reply_status_form.status_form:last-child {
  523. border-bottom-left-radius: 5px;
  524. border-bottom-right-radius: 5px;
  525. }
  526. .single_reply_status,.report_status {
  527. width: 600px;
  528. margin: auto;
  529. margin-top: 20%;
  530. }
  531. .single_reply_status_header,.report_status_header {
  532. width: 600px;
  533. padding: 16px;
  534. box-sizing: border-box;
  535. background-color: #fff;
  536. border-top-left-radius: 5px;
  537. border-top-right-radius: 5px;
  538. margin: auto;
  539. text-align: center;
  540. color: #66757F;
  541. font-size: 18px;
  542. font-weight: 300;
  543. }
  544. .single_reply_status .status_preview,.report_status .status_preview {
  545. border-top: 1px solid #E1E8ED;
  546. }
  547. .single_reply_status .status_preview .toot_entry .toot_footer,.report_stauts .status_preview .toot_entry .toot_footer {
  548. display: none!important;
  549. }
  550. .single_reply_status .status_form .status_bottom,.report_status .status_form .status_bottom {
  551. width: 100%;
  552. margin-left: 0;
  553. }
  554. #single_reply_status_form.status_form,#report_status_form.status_form {
  555. width: 600px;
  556. padding: 16px;
  557. box-sizing: border-box;
  558. background-color: #E8F4FB;
  559. border-bottom-left-radius: 5px;
  560. border-bottom-right-radius: 5px;
  561. margin: auto;
  562. }
  563. #single_reply_status_form.status_form .status_bottom .submit_status_label .toot_button_label i,#report_status_form.status_form .status_bottom .submit_status_label .toot_button_label i {
  564. font-size: 18px;
  565. margin-right: 8px;
  566. }
  567. .overlay_simple {
  568. width: 600px;
  569. margin: auto;
  570. margin-top: 20%;
  571. }
  572. .overlay_simple_header {
  573. width: 600px;
  574. padding: 16px;
  575. box-sizing: border-box;
  576. background-color: #fff;
  577. border-top-left-radius: 5px;
  578. border-top-right-radius: 5px;
  579. margin: auto;
  580. text-align: center;
  581. color: #66757F;
  582. font-size: 18px;
  583. font-weight: 300;
  584. border-bottom: 1px solid #E6ECF0;
  585. }
  586. .overlay_simple .overlay_simple_body {
  587. width: 600px;
  588. padding: 16px;
  589. box-sizing: border-box;
  590. background-color: #fff;
  591. border-bottom-left-radius: 5px;
  592. border-bottom-right-radius: 5px;
  593. margin: auto;
  594. }
  595. .copy_link_input {
  596. width: 100%;
  597. height: 36px;
  598. padding: 4px 16px;
  599. border: 1px solid #E6ECF0;
  600. background-color: #F5F8FA;
  601. box-sizing: border-box;
  602. font-size: 14px;
  603. border-radius: 3px;
  604. }
  605. .overlay_simple_controls {
  606. height:31px;
  607. }
  608. .overlay_addlist_item {
  609. padding-top:10px;
  610. padding-bottom:10px;
  611. border-bottom:1px solid #E6ECF0;
  612. }
  613. .overlay_addlist_item:first-child {
  614. padding-top:0;
  615. }
  616. .overlay_addlist_item:last-child {
  617. padding-bottom:0;
  618. border-bottom-width:0;
  619. }
  620. .overlay_addlist_item > .halcyon_button {
  621. float:right;
  622. margin-top:-3px;
  623. }
  624. .relationship_button {
  625. display: flex;
  626. flex-wrap: nowrap;
  627. align-items: center;
  628. font-size: 13px;
  629. padding: 6px 13px;
  630. margin-top: 4px;
  631. border-radius: 4px;
  632. border: 1px solid #189EFC;
  633. }
  634. .relationship_button i {
  635. margin-right: 4px;
  636. }
  637. .relationship_button span {
  638. font-weight: 600;
  639. }
  640. .follow_button,.halcyon_button {border: 1px solid #189EFC; color: #189EFC;}
  641. .follow_button i,.halcyon_button i {color: #189EFC}
  642. .follow_button:hover,.follow_button:hover i,.halcyon_button:hover,.halcyon_button:hover i {background-color: #189EFC;color: #fff;}
  643. .following_button,
  644. .following_button i {background-color: #189EFC;color: #fff;}
  645. .following_button:hover,
  646. .following_button:hover i {background-color: #E20055;color: #fff;}
  647. .muting_button {background-color: #E20055;color: #fff;}
  648. .muting_button i {color: #fff;}
  649. .muting_button:hover,
  650. .muting_button:hover i {background-color: #B82424;color: #fff;}
  651. .blocking_button{background-color: #fff;color: #E20055}
  652. .blocking_button i {color: #E20055;}
  653. .blocking_button:hover,
  654. .blocking_button:hover i {background-color: #B82424;}
  655. .profile_edit_button{background-color: #FFF;color: #66757F;border: 1px solid #66757F;}
  656. .profile_edit_button:hover,
  657. .profile_edit_button:hover i {background-color: #F5F8FA;}
  658. .timeline_header {
  659. background-color: #fff;
  660. box-sizing: border-box;
  661. border: 1px solid #ECF1F4;
  662. border-bottom: none;
  663. border-top-right-radius: 5px;
  664. border-top-left-radius: 5px;
  665. }
  666. .timeline_header form {
  667. border-top-right-radius: 5px;
  668. border-top-left-radius: 5px;
  669. }
  670. .timeline_header .header_items {
  671. display: flex;
  672. flex-wrap: nowrap;
  673. align-items: center;
  674. }
  675. .timeline_header .header_items .item {
  676. display: inline-block;
  677. font-size: 18px;
  678. font-weight: 300;
  679. padding: 15px;
  680. color: #189EFC;
  681. box-sizing: border-box;
  682. }
  683. .timeline_header .header_items .item.view {
  684. font-weight: 600;
  685. color: #000;
  686. }
  687. .timeline {
  688. background-color: #fff;
  689. box-sizing: border-box;
  690. border: 1px solid #ECF1F4;
  691. }
  692. .timeline .boost_author_box {
  693. margin-left: 46px;
  694. margin-bottom: -12px;
  695. padding: 8px 0;
  696. font-size: 12px;
  697. color: rgb(101, 119, 134);
  698. height: 14px;
  699. }
  700. .timeline .boost_author_box i {
  701. display: inline-block;
  702. width: 10px;
  703. height: 10px;
  704. padding: 2px;
  705. margin-right: 11px;
  706. color: #fff;
  707. background-color: #17BF63;
  708. border-radius: 2px;
  709. font-size: 10px;
  710. /*! height: 14px; */
  711. }
  712. .timeline .pinned_notice_box {
  713. margin-left: 46px;
  714. margin-bottom: -12px;
  715. padding: 8px 0;
  716. font-size: 12px;
  717. color: rgb(101, 119, 134);
  718. height: 14px;
  719. }
  720. .timeline .pinned_notice_box i {
  721. display: inline-block;
  722. width: 10px;
  723. height: 10px;
  724. padding: 2px;
  725. margin-right: 11px;
  726. color: #fff;
  727. background-color: #1DA1F2;
  728. border-radius: 2px;
  729. font-size: 10px;
  730. /*! height: 14px; */
  731. }
  732. .toot_entry {
  733. cursor: pointer;
  734. background-color: #fff;
  735. list-style: none;
  736. }
  737. .toot_entry:hover {
  738. background-color: #F5F8FA;
  739. }
  740. .toot_entry .toot_entry_body {
  741. display: flex;
  742. flex-wrap: nowrap;
  743. padding: 12px;
  744. box-sizing: border-box;
  745. border-bottom: 1px solid #ECF1F4;
  746. }
  747. .toot_entry .toot_entry_body > a {
  748. height: 48px;
  749. }
  750. .toot_entry .toot_entry_body .icon_box {
  751. flex-shrink: 0;
  752. width: 48px;
  753. height: 48px;
  754. margin-right: 12px;
  755. border-radius: 5px;
  756. overflow: hidden;
  757. z-index: 1;
  758. }
  759. .toot_entry .toot_entry_body .icon_box img {
  760. width: 48px;
  761. height: 48px;
  762. }
  763. .toot_entry .toot_entry_body .toot_content {
  764. flex-grow: 1;
  765. height: 100%;
  766. max-width: 504px;
  767. /*! z-index: 1; */
  768. }
  769. .toot_entry .toot_entry_body .toot_content .toot_header {
  770. color: rgb(101, 119, 134);
  771. position: relative;
  772. font-size: 14px;
  773. padding-right: 16px;
  774. }
  775. .toot_entry .toot_entry_body .toot_content .toot_header .text_ellipsis a {
  776. line-height: normal;
  777. height: 16.5px;
  778. margin-bottom: -4.5px;
  779. }
  780. .toot_entry .toot_entry_body .toot_content .toot_header .displayname {
  781. color: rgb(20, 23, 26);
  782. font-weight: bold;
  783. }
  784. .toot_entry .toot_entry_body .toot_content .toot_header .displayname:hover {
  785. color: #189EFC;
  786. }
  787. .toot_entry .toot_entry_body .toot_content .toot_header .right-top_button {
  788. flex: 1;
  789. height: 100%;
  790. }
  791. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap {
  792. position: absolute;
  793. top: 0;
  794. right: 0;
  795. }
  796. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_button {
  797. position: absolute;
  798. right: 0;
  799. top: 0;
  800. color: #AAB8C2;
  801. }
  802. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_button:hover {
  803. color: #189EFC;
  804. }
  805. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu {
  806. display: block;
  807. position: absolute;
  808. cursor: pointer;
  809. top: 36px;
  810. right: -152px;
  811. width: 180px;
  812. padding: 8px 21px;
  813. font-size: 12px;
  814. border-radius: 3px;
  815. box-sizing: border-box;
  816. background-color: #fff;
  817. box-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.26);
  818. z-index: 1;
  819. }
  820. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu::before {
  821. display: block;
  822. content: "";
  823. z-index: -1;
  824. width: 20px;
  825. height: 20px;
  826. position: absolute;
  827. transform: rotate(45deg);
  828. top: -5px;
  829. left: 8px;
  830. background-color: #fff;
  831. }
  832. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu ul {
  833. margin: 0 -21px;
  834. margin-bottom: 8px;
  835. }
  836. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu ul::after {
  837. content: "";
  838. display: block;
  839. margin-top: 8px;
  840. border-bottom: 1px solid #E6ECF0;
  841. }
  842. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu ul:last-child::after {
  843. border-bottom: 0px solid #E6ECF0;
  844. }
  845. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu ul li {
  846. box-sizing: border-box;
  847. }
  848. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu ul:last-child li {
  849. margin-bottom: 0;
  850. }
  851. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu a {
  852. display: block;
  853. padding: 8px 21px;
  854. box-sizing: border-box;
  855. }
  856. .toot_entry .toot_entry_body .toot_content .toot_header .expand_button_wrap .expand_menu a:hover {
  857. background-color: #189EFC;
  858. text-decoration: none;
  859. color: #fff;
  860. }
  861. .toot_entry .toot_entry_body .toot_content .cw_button {
  862. background-color: #6D768C;
  863. border-radius: 3px;
  864. padding: 4px;
  865. margin: auto 4px;
  866. font-size: 8px;
  867. box-sizing: border-box;
  868. color: #fff;
  869. }
  870. .toot_entry .toot_entry_body .toot_content .toot_article {
  871. font-size: 14px;
  872. line-height: 20px;
  873. margin-top: 4px;
  874. }
  875. .toot_entry .toot_entry_body .toot_content .toot_article a,.halcyon_link {
  876. color: #2588D0;
  877. }
  878. .toot_entry .toot_entry_body .toot_content .toot_article.content_warning .status_content {
  879. display: none;
  880. }
  881. .toot_entry .toot_entry_body .toot_content .toot_footer {
  882. display: flex;
  883. flex-wrap: nowrap;
  884. align-items: center;
  885. width: 240px;
  886. height: 21px;
  887. margin-top: 8px;
  888. }
  889. .toot_entry .toot_entry_body .toot_content .toot_reaction {
  890. height: 21px;
  891. flex-grow: 1;
  892. }
  893. .toot_entry .toot_entry_body .toot_content .toot_reaction button {
  894. margin: auto;
  895. color: #AAB8C2;
  896. font-size: 18px;
  897. height: 21px;
  898. }
  899. .toot_entry .toot_entry_body .toot_content .toot_reaction button.active {
  900. animation-name: status_action_active;
  901. animation-duration: 0.5s;
  902. }
  903. .toot_entry .toot_entry_body .toot_content .toot_reaction button .reaction_count {
  904. color: #AAB8C2;
  905. font-size: 12px;
  906. font-weight: 600;
  907. }
  908. @keyframes status_action_active {
  909. 0% { transform: scale(1); }
  910. 50% { transform: scale(2); }
  911. 100% { transform: scale(1); }
  912. }
  913. .toot_entry .toot_entry_body .toot_content .toot_reaction .reply_button:hover {
  914. color: #1DA1F2;
  915. }
  916. .toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="null"]:hover,
  917. .toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="true"],
  918. .toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="null"]:hover .reaction_count,
  919. .toot_entry .toot_entry_body .toot_content .toot_reaction .boost_button[reblogged="true"] .reaction_count {
  920. color: #17BF63;
  921. }
  922. .toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="null"]:hover,
  923. .toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="true"],
  924. .toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="null"]:hover .reaction_count,
  925. .toot_entry .toot_entry_body .toot_content .toot_reaction .fav_button[favourited="true"] .reaction_count {
  926. color: #FFAD1A;
  927. }
  928. .media_views {
  929. margin: 8px 0;
  930. height: 336px;
  931. width: 100%;
  932. border-radius: 5px;
  933. overflow: hidden;
  934. position: relative;
  935. box-sizing: border-box;
  936. border: 1px solid #DCDFE1;
  937. }
  938. .media_views.media_full_height {
  939. height:auto;
  940. }
  941. .media_views .media_attachment {
  942. overflow: hidden;
  943. width: 100%;
  944. height: 100%;
  945. }
  946. .media_views .media_attachment > * {
  947. width: 100%;
  948. height: 100%;
  949. object-fit: cover;
  950. }
  951. .media_views .media_attachment > iframe {
  952. object-fit: fill;
  953. }
  954. .media_views.sensitive .sensitive_alart {
  955. display: flex;
  956. z-index: 1;
  957. flex-direction: column;
  958. justify-content: center;
  959. align-items: center;
  960. position: absolute;
  961. width: 100%;
  962. height: 100%;
  963. background-color: #000;
  964. }
  965. .media_views.sensitive .sensitive_alart .text1 {
  966. font-size: 26px;
  967. font-weight: 200;
  968. padding: 8px 16px;
  969. color: #fff;
  970. }
  971. .media_views.sensitive .sensitive_alart .text2 {
  972. font-weight: 200;
  973. padding: 2px 4px;
  974. margin-top: 3px;
  975. color: #fff;
  976. }
  977. .media_views[media_length="2"] {
  978. display: flex;
  979. }
  980. .media_views[media_length="2"] .media_attachment {
  981. flex-grow: 1;
  982. overflow: hidden;
  983. width: 50%;
  984. height: 100%;
  985. }
  986. .media_views[media_length="2"] .media_attachment[mediacount="0"] {
  987. padding-right: 5px;
  988. box-sizing: border-box;
  989. }
  990. .media_views[media_length="3"],
  991. .media_views[media_length="4"] {
  992. display: flex;
  993. }
  994. .media_views[media_length="3"] .media_attachment[mediacount="0"],
  995. .media_views[media_length="4"] .media_attachment[mediacount="0"] {
  996. flex-grow: 2;
  997. padding-right: 5px;
  998. box-sizing: border-box;
  999. }
  1000. .media_views[media_length="3"] .media_attachments_right,
  1001. .media_views[media_length="4"] .media_attachments_right {
  1002. flex-grow: 1;
  1003. flex-shrink: 2;
  1004. display: flex;
  1005. flex-direction: column;
  1006. height: 100%;
  1007. }
  1008. .media_views[media_length="3"] .media_attachments_right .media_attachment {
  1009. padding-bottom: 5px;
  1010. box-sizing: border-box;
  1011. height: 50%;
  1012. }
  1013. .media_views[media_length="3"] .media_attachments_right .media_attachment[mediacount="2"] {
  1014. padding-bottom: 0;
  1015. }
  1016. .media_views[media_length="4"] .media_attachments_right .media_attachment {
  1017. padding-bottom: 5px;
  1018. box-sizing: border-box;
  1019. height: calc( 100% / 3 );
  1020. }
  1021. .media_views[media_length="4"] .media_attachments_right .media_attachment[mediacount="3"] {
  1022. padding-bottom: 0;
  1023. }
  1024. .media_backward,.media_forward {
  1025. color:#CCCCCC;
  1026. position:absolute;
  1027. top:50%;
  1028. cursor:pointer;
  1029. }
  1030. .media_backward {
  1031. left:-50px;
  1032. }
  1033. .media_forward {
  1034. right:-50px;
  1035. }
  1036. .media_backward:hover,.media_forward:hover {
  1037. color:#FFFFFF;
  1038. }
  1039. .timeline .notice_entry {
  1040. padding: 10px 12px 10px 70px;
  1041. font-size: 14px;
  1042. line-height: 18px;
  1043. border-bottom: 1px solid #E6ECF0;
  1044. }
  1045. .timeline .poll_notify_header {
  1046. padding: 10px 0 0 70px !important;
  1047. font-size: 14px;
  1048. line-height: 18px;
  1049. }
  1050. .timeline .notice_entry .notice_entry_body {
  1051. width: 480px;
  1052. border: 1px solid #E6ECF0;
  1053. border-radius: 5px;
  1054. padding: 8px 12px;
  1055. }
  1056. .timeline .notice_entry .notice_entry_body .toot_header {
  1057. height: 17px;
  1058. }
  1059. .timeline .notice_entry .notice_entry_body .toot_article p {
  1060. white-space: nowrap;
  1061. overflow: hidden;
  1062. text-overflow: ellipsis;
  1063. }
  1064. .timeline .notice_entry .icon_box {
  1065. width: 24px;
  1066. height: 24px;
  1067. border-radius: 3px;
  1068. overflow: hidden;
  1069. }
  1070. .timeline .notice_entry .icon_box img {
  1071. width: 24px;
  1072. }
  1073. .timeline .toot_entry .font-icon {
  1074. position: relative;
  1075. padding: 3px;
  1076. left: -23px;
  1077. top: -26px;
  1078. width: 10px;
  1079. font-size: 10px;
  1080. border-radius: 3px;
  1081. color: #fff;
  1082. }
  1083. .timeline .toot_entry .font-icon.follow {
  1084. background: #1DA1F2;;
  1085. }
  1086. .timeline .toot_entry .font-icon.boost {
  1087. background: #17BF63;
  1088. }
  1089. .timeline .toot_entry .font-icon.favourite {
  1090. background: #FFAD1A;
  1091. }
  1092. .timeline .toot_entry .font-icon.poll {
  1093. background: #FF4040;
  1094. top:0;
  1095. }
  1096. .timeline .toot_entry .notice_author_box {
  1097. padding: 3px 0;
  1098. }
  1099. .timeline .toot_entry .notice_author_box > a.notice_author {
  1100. margin-left: -18px;
  1101. }
  1102. .timeline .toot_entry .notice_author_box > a.notice_author span {
  1103. font-weight: 600;
  1104. }
  1105. .timeline .toot_entry .toot_content .toot_header a .displayname {
  1106. font-weight: 600;
  1107. }
  1108. .timeline .toot_entry .toot_content .toot_header a .username {
  1109. color: #66757F;
  1110. }
  1111. .timeline .toot_entry .toot_content .toot_article .status_content p:not(:last-child) {
  1112. margin-bottom:20px;
  1113. }
  1114. .timeline_footer {
  1115. padding: 24px;
  1116. background-color: #fff;
  1117. box-sizing: border-box;
  1118. border: 1px solid #ECF1F4;
  1119. border-top: none;
  1120. border-bottom-right-radius: 5px;
  1121. border-bottom-left-radius: 5px;
  1122. color: #AAB8C2;
  1123. font-size: 36px;
  1124. text-align: center;
  1125. }
  1126. #js-follows_profile{
  1127. display: flex;
  1128. width: 900px;
  1129. box-sizing: border-box;
  1130. height: auto;
  1131. flex-wrap: wrap;
  1132. }
  1133. #js-follows_profile .follows_profile_box {
  1134. width: 290px;
  1135. margin: 0 5px;
  1136. margin-bottom: 10px;
  1137. box-sizing: border-box;
  1138. border-radius: 5px;
  1139. background-color: #fff;
  1140. overflow: hidden;
  1141. border: 1px solid #E6ECF0;
  1142. }
  1143. #js-follows_profile .follows_profile_box .follows_profile_header {
  1144. height: 96px;
  1145. overflow: hidden;
  1146. background-color: #189EFC;
  1147. }
  1148. #js-follows_profile .follows_profile_box .follows_profile_header img {
  1149. width: 100%;
  1150. height: 100%;
  1151. object-fit: cover;
  1152. }
  1153. #js-follows_profile .follows_profile_box .follows_profile {
  1154. position: relative;
  1155. }
  1156. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_icon {
  1157. position: absolute;
  1158. width: 74px;
  1159. height: 74px;
  1160. padding: 3px;
  1161. margin-left: 16px;
  1162. border-radius: 8px;
  1163. top: -76px;
  1164. background-color: #fff;
  1165. }
  1166. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_icon img {
  1167. border-radius: 5px;
  1168. }
  1169. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_name_box {
  1170. width: auto;
  1171. /*! margin-left: 15px; */
  1172. padding-bottom: 2px;
  1173. padding-top: 4px;
  1174. margin: 0 16px;
  1175. margin-top: 36px;
  1176. }
  1177. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_name_box h2 {
  1178. font-weight: 700;
  1179. font-size: 18px;
  1180. line-height: 25px;
  1181. }
  1182. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_name_box span {
  1183. display: block;
  1184. width: 180px;
  1185. color: #657786;
  1186. font-size: 14px;
  1187. /*! overflow: hidden; */
  1188. white-space: nowrap;
  1189. text-overflow: ellipsis;
  1190. margin: 4px 0;
  1191. }
  1192. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_name_box span::before {
  1193. }
  1194. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_bio {
  1195. height: 58px;
  1196. font-size: 14px;
  1197. font-weight: 400;
  1198. color: #66757f;
  1199. margin: 0 16px;
  1200. margin-bottom: 0px;
  1201. margin-bottom: 16px;
  1202. line-height: 1.3;
  1203. overflow: hidden;
  1204. /*! width: 100%; */
  1205. }
  1206. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_bio p {
  1207. /*! white-space: nowrap; */
  1208. overflow: hidden;
  1209. word-break: break-all;
  1210. height: auto;
  1211. /*! max-width: 100%; */
  1212. }
  1213. #js-follows_profile .follows_profile_box .follows_profile .follows_profile_bio p a {
  1214. color: #189EFC
  1215. }
  1216. #js-follows_profile .halcyon_button {
  1217. display: flex;
  1218. flex-wrap: nowrap;
  1219. align-items: center;
  1220. font-size: 13px;
  1221. padding: 6px 18px;
  1222. margin-top: 4px;
  1223. border-radius: 4px;
  1224. border: 1px solid #189EFC;
  1225. position: absolute;
  1226. right: 16px;
  1227. top: -32px;
  1228. }
  1229. #js-follows_profile .halcyon_button i {
  1230. color: #189EFC;
  1231. margin-right: 4px;
  1232. }
  1233. #js-follows_profile .halcyon_button span {
  1234. font-weight: 600;
  1235. }
  1236. #js-follows_profile .halcyon_button:hover,
  1237. #js-follows_profile .halcyon_button:hover i {
  1238. background-color: #189EFC;
  1239. color: #fff!important;
  1240. }
  1241. #js-follows_profile .following_button {
  1242. border: 1px solid #2B94DA;
  1243. background-color: #189EFC;
  1244. }
  1245. #js-follows_profile .following_button i {
  1246. color: #fff;
  1247. margin-right: 4px;
  1248. }
  1249. #js-follows_profile .following_button span {
  1250. font-weight: 600;
  1251. color: #fff;
  1252. }
  1253. #js-follows_profile .following_button:hover,
  1254. #js-follows_profile .following_button:hover i {
  1255. background-color: #E20055;
  1256. color: #fff!important;
  1257. }
  1258. #js-follows_footer {
  1259. color: #66757F;
  1260. font-size: 36px;
  1261. text-align: center;
  1262. padding: 16px;
  1263. }
  1264. #js-stream_update {
  1265. height: 0;
  1266. padding: 0px;
  1267. box-sizing: border-box;
  1268. text-align: center;
  1269. font-size: 13px;
  1270. background-color: #F5F8FA;
  1271. overflow: hidden;
  1272. transition: 0.3s;
  1273. cursor: pointer;
  1274. }
  1275. #js-stream_update:hover {
  1276. background-color: #E6ECF0;
  1277. }
  1278. #js-stream_update button {
  1279. color: #189EFC;
  1280. }
  1281. .current_profile_box {
  1282. margin-bottom: 10px;
  1283. border-radius: 5px;
  1284. background-color: #fff;
  1285. overflow: hidden;
  1286. border: 1px solid #E6ECF0;
  1287. }
  1288. .current_profile_box .current_profile_header {
  1289. height: 96px;
  1290. overflow: hidden;
  1291. background-color: #189EFC;
  1292. }
  1293. .current_profile_box .current_profile_header img {
  1294. width: 100%;
  1295. height: 100%;
  1296. object-fit: cover;
  1297. }
  1298. .current_profile_box .current_profile {
  1299. position: relative;
  1300. }
  1301. .current_profile_box .current_profile .current_profile_icon {
  1302. position: absolute;
  1303. width: 70px;
  1304. height: 70px;
  1305. padding: 3px;
  1306. margin-left: 8px;
  1307. border-radius: 8px;
  1308. top: -30px;
  1309. background-color: #fff;
  1310. }
  1311. .current_profile_box .current_profile .current_profile_icon img {
  1312. border-radius: 5px;
  1313. }
  1314. .current_profile_box .current_profile .current_profile_name_box {
  1315. width: 180px;
  1316. margin-left: 90px;
  1317. padding-bottom: 10px;
  1318. padding-top: 8px;
  1319. }
  1320. .current_profile_box .current_profile .current_profile_name_box h2 {
  1321. font-weight: 700;
  1322. font-size: 18px;
  1323. line-height: 25px;
  1324. }
  1325. .current_profile_box .current_profile .current_profile_name_box span {
  1326. display: block;
  1327. width: 180px;
  1328. color: #657786;
  1329. font-size: 14px;
  1330. overflow: hidden;
  1331. white-space: nowrap;
  1332. text-overflow: ellipsis;
  1333. }
  1334. .current_profile_box .current_profile .current_profile_name_box span::before {
  1335. content: "@";
  1336. }
  1337. .current_profile_box .current_profile .current_profile_counts {
  1338. display: flex;
  1339. }
  1340. .current_profile_box .current_profile .current_profile_counts .current_profile_count {
  1341. flex-grow: 1;
  1342. padding-left: 16px;
  1343. padding-bottom: 8px;
  1344. }
  1345. .current_profile_box .current_profile .current_profile_counts .current_profile_count a {
  1346. display: flex;
  1347. flex-direction: column;
  1348. justify-content: space-around;
  1349. text-decoration: none;
  1350. }
  1351. .current_profile_box .current_profile .current_profile_counts .current_profile_count a .title {
  1352. color: #657786;
  1353. font-size: 10px;
  1354. }
  1355. .current_profile_box .current_profile .current_profile_counts .current_profile_count a:hover .title {
  1356. color: #189EFC;
  1357. }
  1358. .current_profile_box .current_profile .current_profile_counts .current_profile_count a .count {
  1359. font-size: 18px;
  1360. font-weight: 400;
  1361. padding-top: 3px;
  1362. color: #189EFC;
  1363. }
  1364. .side_widget {
  1365. padding: 15px;
  1366. margin-bottom: 8px;
  1367. border-radius: 5px;
  1368. background-color: #fff;
  1369. border: 1px solid #E6ECF0;
  1370. }
  1371. .side_widgets_footer {
  1372. color: rgb(101, 119, 134);
  1373. font-size: 12px;
  1374. padding: 16px 8px;
  1375. }
  1376. .side_widgets_footer ul li {
  1377. display: inline-block;
  1378. margin: 0 12px 8px 0;
  1379. }
  1380. .side_widget h2 {
  1381. color: #66757F;
  1382. font-size: 18px;
  1383. font-weight: 300;
  1384. margin-bottom: 15px;
  1385. }
  1386. .side_widget h3 {
  1387. color: #66757F;
  1388. font-size: 16px;
  1389. font-weight: 300;
  1390. }
  1391. .side_widget.with_button .form_title{
  1392. display: flex;
  1393. align-items: baseline;
  1394. }
  1395. .side_widget.with_button .form_title h2 {
  1396. flex-grow: 1;
  1397. }
  1398. .side_widget.with_button .form_title .headerbtn {
  1399. cursor: pointer;
  1400. flex-grow: 1;
  1401. font-size: 12px;
  1402. color: #189EFC;
  1403. text-align: right;
  1404. text-decoration:none;
  1405. }
  1406. .side_widget form.pulldown_form {
  1407. overflow: hidden;
  1408. height: 0;
  1409. opacity: 0;
  1410. margin-top: 0px;
  1411. transition: 0.13s ease-out;
  1412. }
  1413. .side_widget form.pulldown_form.view {
  1414. height: auto;
  1415. opacity: 1;
  1416. margin-top: 16px;
  1417. transition: 0.13s ease-out;
  1418. }
  1419. .textfield {
  1420. margin: 10px;
  1421. padding-left:5px;
  1422. width: 75%;
  1423. font-size: 14px;
  1424. color: #66757F;
  1425. box-sizing: border-box;
  1426. height:30px;
  1427. border:1px solid #AAB8C2;
  1428. border-radius:2px;
  1429. background-color:#FFFFFF;
  1430. outline:0;
  1431. }
  1432. .textfield:focus {
  1433. outline:0;
  1434. border:1px solid #189EFC;
  1435. background-color:#FFFFFF;
  1436. }
  1437. .account_box {
  1438. display: flex;
  1439. flex-wrap: nowrap;
  1440. align-items: center;
  1441. height: 100%;
  1442. margin-bottom: 12px;
  1443. }
  1444. .account_box .icon_box {
  1445. width: 48px;
  1446. height: 48px;
  1447. overflow: hidden;
  1448. margin-right: 8px;
  1449. border-radius: 5px;
  1450. }
  1451. .account_box .label_box {
  1452. width: 200px;
  1453. }
  1454. .account_box .label_box h3 {
  1455. overflow: hidden;
  1456. white-space: nowrap;
  1457. text-overflow: ellipsis;
  1458. color: #333;
  1459. }
  1460. .account_box .label_box h3 .dn {
  1461. font-size: 14px;
  1462. font-weight: 700;
  1463. }
  1464. .account_box .label_box h3 .un {
  1465. font-size: 14px;
  1466. color: #66757F;
  1467. }
  1468. .account_box .label_box .follow_button {
  1469. display: flex;
  1470. flex-wrap: nowrap;
  1471. align-items: center;
  1472. font-size: 12px;
  1473. padding: 5px 16px;
  1474. margin-top: 4px;
  1475. border-radius: 4px;
  1476. }
  1477. .account_box .label_box .follow_button i {
  1478. color: #189EFC;
  1479. margin-right: 4px;
  1480. }
  1481. .account_box .label_box .follow_button span {
  1482. font-weight: 600;
  1483. }
  1484. .account_box .label_box .follow_button:hover,
  1485. .account_box .label_box .follow_button:hover i {
  1486. background-color: #189EFC;
  1487. color: #fff!important;
  1488. }
  1489. .halcyon_button {
  1490. display: flex;
  1491. flex-wrap: nowrap;
  1492. align-items: center;
  1493. font-size: 12px;
  1494. padding: 5px 16px;
  1495. margin-top: 4px;
  1496. border-radius: 4px;
  1497. }
  1498. .halcyon_button i {
  1499. color: #189EFC;
  1500. margin-right: 4px;
  1501. }
  1502. .halcyon_button span {
  1503. font-weight: 600;
  1504. }
  1505. .halcyon_button:hover,
  1506. .halcyon_button:hover i {
  1507. background-color: #189EFC;
  1508. color: #fff!important;
  1509. }
  1510. .side_widget .account_box .label_box .following_button {
  1511. display: flex;
  1512. color: #fff;
  1513. flex-wrap: nowrap;
  1514. align-items: center;
  1515. font-size: 12px;
  1516. padding: 5px 18px;
  1517. margin-top: 4px;
  1518. border-radius: 4px;
  1519. background-color: #189EFC;
  1520. border: 1px solid #189EFC;
  1521. }
  1522. .side_widget .account_box .label_box .following_button:hover {
  1523. background-color: #E20055;
  1524. }
  1525. .side_widget .account_box .label_box .following_button i {
  1526. color: #FFF;
  1527. margin-right: 4px;
  1528. }
  1529. .side_widget .account_box .label_box .following_button span {
  1530. font-weight: 600;
  1531. }
  1532. #header {
  1533. display: flex;
  1534. position: fixed;
  1535. z-index: 999;
  1536. width: 100%;
  1537. height: 47px;
  1538. color: #66757F;
  1539. background-color: #fff;
  1540. box-shadow: 0 1px 1px rgba(0,0,0,0.26);
  1541. }
  1542. #header .header_nav_wrap {
  1543. box-sizing: border-box;
  1544. display: flex;
  1545. width: 1190px;
  1546. height: 100%;
  1547. margin: auto;
  1548. padding: 0 5px;
  1549. }
  1550. #header .header_nav_wrap .header_left_box {
  1551. display: flex;
  1552. justify-content: flex-start;
  1553. height: 100%;
  1554. }
  1555. #header .header_nav_wrap .header_left_box ul.header_nav_list {
  1556. display: flex;
  1557. width: 100%;
  1558. height: 100%;
  1559. }
  1560. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item {
  1561. display: flex;
  1562. align-items: center;
  1563. height: 100%;
  1564. position: relative;
  1565. }
  1566. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item .nav_badge {
  1567. width: 6px;
  1568. height: 6px;
  1569. background-color: #1B95E0;
  1570. border-radius: 50%;
  1571. position: absolute;
  1572. left: 6px;
  1573. top: 8px;
  1574. }
  1575. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item .nav_badge.notification_badge {
  1576. position: absolute;
  1577. background-color: #189EFC;
  1578. border-radius: 40%;
  1579. font-size: 10px;
  1580. top: 8px;
  1581. left: 20px;
  1582. border: 2px solid #fff;
  1583. color: #fff;
  1584. padding: 2px;
  1585. box-sizing: border-box;
  1586. height: 20px;
  1587. width: 20px;
  1588. display: flex;
  1589. align-items: center;
  1590. justify-content: center;
  1591. }
  1592. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a {
  1593. display: flex;
  1594. justify-content: center;
  1595. align-items: center;
  1596. width: 100%;
  1597. height: 100%;
  1598. color: #66757F;
  1599. box-sizing: border-box;
  1600. padding-right: 18px;
  1601. padding-left: 9px;
  1602. border-top: 0px solid transparent;
  1603. border-bottom: 0px solid #189EFC;
  1604. transition: 0.15s ease-out;
  1605. }
  1606. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a:hover {
  1607. color: #189EFC;
  1608. text-decoration: none;
  1609. border-top: 5px solid transparent;
  1610. border-bottom: 5px solid #189EFC;
  1611. transition: 0.15s ease-out;
  1612. }
  1613. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a.view {
  1614. text-decoration: none;
  1615. border-top: 5px solid transparent;
  1616. border-bottom: 5px solid #189EFC;
  1617. transition: 0.15s ease-out;
  1618. position: relative;
  1619. }
  1620. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a > i,
  1621. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a > span {
  1622. display: inline-block;
  1623. text-align: center;
  1624. }
  1625. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a > i {
  1626. margin-right: 4px;
  1627. font-size: 21px;
  1628. }
  1629. #header .header_nav_wrap .header_left_box ul.header_nav_list li.header_nav_item a > span {
  1630. font-size: 13px;
  1631. font-weight: 400;
  1632. }
  1633. #header .header_nav_wrap .header_center_box {
  1634. display: flex;
  1635. flex: 1.2;
  1636. height: 100%;
  1637. box-sizing: border-box;
  1638. padding: 8px 0;
  1639. align-items: center;
  1640. justify-content: center;
  1641. }
  1642. #header .logo_box {
  1643. height: 96%;
  1644. padding: 4px;
  1645. box-sizing: border-box;
  1646. }
  1647. #header .logo_box img {
  1648. width: auto;
  1649. display: block;
  1650. }
  1651. #header .header_nav_wrap .header_right_box {
  1652. flex: 2;
  1653. box-sizing: border-box;
  1654. padding: 8px 0;
  1655. height: 100%;
  1656. }
  1657. #header .header_nav_wrap .header_right_box ul.header_nav_list {
  1658. display: flex;
  1659. justify-content: flex-end;
  1660. align-items: center;
  1661. width: 100%;
  1662. height: 100%;
  1663. }
  1664. #header .header_nav_wrap .header_right_box ul.header_nav_list li.header_nav_item {
  1665. display: flex;
  1666. height: 100%;
  1667. justify-content: center;
  1668. align-items: center;
  1669. padding-right: 16px;
  1670. }
  1671. #header .header_nav_wrap .header_right_box .search_form {
  1672. width: 221px;
  1673. height: 95%;
  1674. outline: 0;
  1675. position: relative;
  1676. }
  1677. #header .header_nav_wrap .header_right_box .search_form .search_form_input {
  1678. box-sizing: border-box;
  1679. padding: 5px 12px;
  1680. font-size: 12px;
  1681. width: 100%;
  1682. border-radius: 16px;
  1683. border: 1px solid #E8EEF1;
  1684. background-color: #F5F8FA;
  1685. height: 100%;
  1686. transition: 0.15s ease-out;
  1687. }
  1688. #header .header_nav_wrap .header_right_box .search_form .search_form_input:focus {
  1689. background-color: transparent;
  1690. transition: 0.15s ease-out;
  1691. outline:0;
  1692. border:2px solid #189EFC;
  1693. }
  1694. #header .header_nav_wrap .header_right_box .search_form .search_form_submit {
  1695. display: block;
  1696. position: absolute;
  1697. height: 14px;
  1698. font-size: 14px;
  1699. top: 5px;
  1700. right: 12px;
  1701. margin: 2px -4px;
  1702. }
  1703. #header .header_nav_wrap .header_right_box .search_form .search_form_submit button,
  1704. #header .header_nav_wrap .header_right_box .search_form .search_form_submit i {
  1705. display: block;
  1706. color: #66757F;
  1707. }
  1708. #header .header_nav_wrap .header_right_box .my_account_wrap {
  1709. position: relative;
  1710. }
  1711. #header .header_nav_wrap .header_right_box .my_account_wrap .my_account {
  1712. height: 35px;
  1713. width: 35px;
  1714. margin: auto;
  1715. display: flex;
  1716. justify-content: center;
  1717. align-items: center;
  1718. }
  1719. #header .header_nav_wrap .header_right_box .my_account_wrap .my_account img {
  1720. width: 32px;
  1721. height: 32px;
  1722. overflow: hidden;
  1723. border-radius: 50%;
  1724. transition: 0.15s ease-out;
  1725. }
  1726. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav {
  1727. display: block;
  1728. position: absolute;
  1729. cursor: pointer;
  1730. top: 42px;
  1731. right: 14px;
  1732. width: 180px;
  1733. padding: 8px 21px;
  1734. font-size: 12px;
  1735. border-radius: 3px;
  1736. box-sizing: border-box;
  1737. background-color: #fff;
  1738. box-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.26);
  1739. }
  1740. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav::before {
  1741. display: block;
  1742. content: "";
  1743. z-index: -1;
  1744. width: 20px;
  1745. height: 20px;
  1746. position: absolute;
  1747. transform: rotate(45deg);
  1748. top: -5px;
  1749. right: 8px;
  1750. background-color: #fff;
  1751. border: 0.5px solid rgba(0,0,0,.26);
  1752. }
  1753. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav ul {
  1754. margin: 0 -21px;
  1755. margin-bottom: 8px;
  1756. }
  1757. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav ul::after {
  1758. content: "";
  1759. display: block;
  1760. margin-top: 8px;
  1761. border-bottom: 1px solid #E6ECF0;
  1762. }
  1763. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav ul:last-child::after {
  1764. border-bottom: 0px solid #E6ECF0;
  1765. }
  1766. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav ul li {
  1767. box-sizing: border-box;
  1768. }
  1769. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav ul li a .display_name {
  1770. display: block;
  1771. color: #000;
  1772. font-size: 14px;
  1773. font-weight: 600;
  1774. margin-bottom: 4px;
  1775. }
  1776. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav a {
  1777. display: block;
  1778. padding: 8px 21px;
  1779. }
  1780. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav a:hover,
  1781. #header .header_nav_wrap .header_right_box .my_account_wrap .header_my_account_nav ul li a:hover .display_name {
  1782. background-color: #189EFC;
  1783. text-decoration: none;
  1784. color: #fff;
  1785. }
  1786. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions {
  1787. display: block;
  1788. position: absolute;
  1789. cursor: pointer;
  1790. top: 50px;
  1791. width: 320px;
  1792. font-size: 12px;
  1793. border-radius: 3px;
  1794. box-sizing: border-box;
  1795. background-color: #fff;
  1796. box-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.26);
  1797. margin-left:50px
  1798. }
  1799. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions::before {
  1800. display: block;
  1801. content: "";
  1802. z-index: -1;
  1803. width: 20px;
  1804. height: 20px;
  1805. position: absolute;
  1806. transform: rotate(45deg);
  1807. top: -5px;
  1808. left: 8px;
  1809. background-color: #fff;
  1810. border: 0.5px solid rgba(0,0,0,.26);
  1811. }
  1812. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li.account_box {
  1813. margin-bottom:0;
  1814. }
  1815. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li.account_box:hover {
  1816. background-color:#189EFC;
  1817. }
  1818. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li.account_box:hover h3,
  1819. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li.account_box:hover .un {
  1820. color:#FFFFFF !important;
  1821. }
  1822. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li.account_box:first-child {
  1823. border-top-left-radius:3px;
  1824. border-top-right-radius:3px;
  1825. }
  1826. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li.account_box:last-child {
  1827. border-bottom-left-radius:3px;
  1828. border-bottom-right-radius:3px;
  1829. }
  1830. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li .icon_box img {
  1831. margin-left:12px;
  1832. margin-top:8px;
  1833. width:32px;
  1834. height:32px;
  1835. border-radius:5px;
  1836. }
  1837. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li .icon_box img.emoji {
  1838. border-radius:0;
  1839. }
  1840. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li h3 {
  1841. font-size:16px;
  1842. }
  1843. /*#header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul {
  1844. margin: 0 -21px;
  1845. margin-bottom: 8px;
  1846. }
  1847. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul::after {
  1848. content: "";
  1849. display: block;
  1850. margin-top: 8px;
  1851. border-bottom: 1px solid #E6ECF0;
  1852. }
  1853. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul:last-child::after {
  1854. border-bottom: 0px solid #E6ECF0;
  1855. }
  1856. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li {
  1857. box-sizing: border-box;
  1858. }
  1859. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li a .display_name {
  1860. display: block;
  1861. color: #000;
  1862. font-size: 14px;
  1863. font-weight: 600;
  1864. margin-bottom: 4px;
  1865. }
  1866. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions a {
  1867. display: block;
  1868. padding: 8px 21px;
  1869. }
  1870. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions a:hover,
  1871. #header .header_nav_wrap .header_right_box .search_form_wrap .header_search_suggestions ul li a:hover .display_name {
  1872. background-color: #189EFC;
  1873. text-decoration: none;
  1874. color: #fff;
  1875. }*/
  1876. .toot_button {
  1877. width: 90px;
  1878. height: 100%;
  1879. border-radius: 4px;
  1880. color: #fff;
  1881. background-color: #2588D0;
  1882. transition: 0.15s ease-out;;
  1883. }
  1884. .toot_button:hover {
  1885. background-color: #2571D0;
  1886. transition: 0.15s ease-out;;
  1887. }
  1888. .toot_button:active {
  1889. background-color: #255ED0;
  1890. transition: 0.15s ease-out;;
  1891. }
  1892. .toot_button .toot_button_label {
  1893. display: flex;
  1894. justify-content: center;
  1895. align-items: center;
  1896. }
  1897. .toot_button i {
  1898. display: inline-block;
  1899. font-size: 21px;
  1900. margin-right: 2px;
  1901. }
  1902. .toot_button span {
  1903. font-size: 13px;
  1904. font-weight: 500;
  1905. }
  1906. #main {
  1907. padding-top: 47px;
  1908. }
  1909. #main > .header_image_box {
  1910. width: 100%;
  1911. height: 460px;
  1912. overflow: hidden;
  1913. }
  1914. #main > .header_image_box img {
  1915. min-width: 100%;
  1916. object-fit: cover;
  1917. }
  1918. #main .profile_nav_wrap {
  1919. height: 60px;
  1920. width: 100%;
  1921. background-color: #fff;
  1922. box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
  1923. }
  1924. #main .profile_nav_wrap .profile_nav {
  1925. display: flex;
  1926. flex-wrap: nowrap;
  1927. width: 1200px;
  1928. height: 100%;
  1929. margin: auto;
  1930. padding: 0 5px;
  1931. box-sizing: border-box;
  1932. }
  1933. #main .profile_nav_wrap .profile_nav .profile_nav_left {
  1934. width: 300px;
  1935. height: 100%;
  1936. }
  1937. #main .profile_nav_wrap .profile_nav .profile_nav_right {
  1938. width: 900px;
  1939. height: 100%;
  1940. }
  1941. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list {
  1942. display: flex;
  1943. flex-wrap: nowrap;
  1944. align-items: center;
  1945. height: 100%;
  1946. }
  1947. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item {
  1948. height: 100%;
  1949. color: #66757F;
  1950. border-color: transparent;
  1951. }
  1952. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item a {
  1953. display: flex;
  1954. flex-direction: column;
  1955. flex-wrap: nowrap;
  1956. align-items: center;
  1957. justify-content: center;
  1958. height: 100%;
  1959. padding: 0 15px;
  1960. box-sizing: border-box;
  1961. border-top: 0px solid transparent;
  1962. border-bottom: 0px solid #189EFC;
  1963. transition: 0.15s;
  1964. }
  1965. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item:hover {
  1966. color: #189EFC;
  1967. box-sizing: border-box;
  1968. text-decoration: none;
  1969. border-top: 4px solid transparent;
  1970. border-bottom: 4px solid #189EFC;
  1971. transition: 0.15s;
  1972. }
  1973. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item.view {
  1974. color: #189EFC;
  1975. box-sizing: border-box;
  1976. border-top: 4px solid transparent;
  1977. border-bottom: 4px solid #189EFC;
  1978. }
  1979. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item a:hover {
  1980. text-decoration: none;
  1981. }
  1982. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item a h2 {
  1983. display: inline-block;
  1984. font-size: 11px;
  1985. font-weight: normal;
  1986. }
  1987. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_nav_item a span {
  1988. display: inline-block;
  1989. font-size: 18px;
  1990. font-weight: 600;
  1991. margin-top: 3px;
  1992. }
  1993. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_button_box {
  1994. display: flex;
  1995. align-items: center;
  1996. justify-content: flex-end;
  1997. flex: 1;
  1998. height: 100%;
  1999. }
  2000. #main .profile_nav_wrap .profile_nav .profile_nav_right .profile_nav_list .profile_button_box button {
  2001. float: right;
  2002. padding: 9px 16px;
  2003. border-radius: 4px;
  2004. font-size: 14px;
  2005. font-weight: 700;
  2006. }
  2007. #js-header_title_box {
  2008. width: 100%;
  2009. height: 64px;
  2010. padding: 16px 0;
  2011. overflow: hidden;
  2012. box-sizing: border-box;
  2013. background-color: #189EFC;
  2014. }
  2015. #js-header_title_box h1 {
  2016. display: block;
  2017. width: 1200px;
  2018. margin: 0 auto;
  2019. padding: 0 16px;
  2020. font-size: 27px;
  2021. font-weight: 400;
  2022. line-height: 32px;
  2023. color: #fff;
  2024. box-sizing: border-box;
  2025. }
  2026. #main .header_nav_wrap {
  2027. height: 50px;
  2028. width: 100%;
  2029. background-color: #fff;
  2030. box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
  2031. margin-bottom: 4px;
  2032. }
  2033. #main .header_nav_wrap .header_nav {
  2034. display: flex;
  2035. flex-wrap: nowrap;
  2036. width: 1200px;
  2037. height: 100%;
  2038. margin: auto;
  2039. padding: 0 5px;
  2040. box-sizing: border-box;
  2041. }
  2042. #main .header_nav_wrap .header_nav .header_nav_left {
  2043. width: 900px;
  2044. height: 100%;
  2045. }
  2046. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list {
  2047. display: flex;
  2048. flex-wrap: nowrap;
  2049. align-items: center;
  2050. height: 100%;
  2051. }
  2052. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_nav_item {
  2053. height: 100%;
  2054. color: #66757F;
  2055. /*! font-size: 13px; */
  2056. }
  2057. #main .header_nav_wrap .header_nav_item.view a {
  2058. border-top: 4px solid transparent !important;
  2059. border-bottom: 4px solid #189EFC !important;
  2060. }
  2061. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_nav_item a {
  2062. display: flex;
  2063. flex-direction: column;
  2064. flex-wrap: nowrap;
  2065. align-items: center;
  2066. justify-content: center;
  2067. height: 100%;
  2068. padding: 0 15px;
  2069. box-sizing: border-box;
  2070. border-top: 0px solid transparent;
  2071. border-bottom: 0px solid #189EFC;
  2072. transition: 0.15s;
  2073. }
  2074. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_nav_item a:hover {
  2075. color: #189EFC;
  2076. text-decoration: none;
  2077. border-top: 4px solid transparent;
  2078. border-bottom: 4px solid #189EFC;
  2079. transition: 0.15s;
  2080. }
  2081. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_nav_item a.view {
  2082. color: #189EFC;
  2083. border-top: 4px solid transparent;
  2084. border-bottom: 4px solid #189EFC;
  2085. }
  2086. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_nav_item a h2 {
  2087. display: inline-block;
  2088. font-size: 14px;
  2089. font-weight: normal;
  2090. color: #189EFC;
  2091. }
  2092. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_nav_item a span {
  2093. display: inline-block;
  2094. font-size: 18px;
  2095. font-weight: 600;
  2096. margin-top: 3px;
  2097. }
  2098. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_button_box {
  2099. display: flex;
  2100. align-items: center;
  2101. justify-content: flex-end;
  2102. flex: 1;
  2103. height: 100%;
  2104. }
  2105. #main .header_nav_wrap .header_nav .header_nav_left .header_nav_list .header_button_box button {
  2106. float: right;
  2107. padding: 9px 16px;
  2108. border-radius: 4px;
  2109. font-size: 14px;
  2110. font-weight: 700;
  2111. }
  2112. #main .article_wrap {
  2113. display: flex;
  2114. flex-wrap: nowrap;
  2115. width: 1200px;
  2116. margin: auto;
  2117. }
  2118. #main .article_wrap .left_column {
  2119. position: relative;
  2120. width: 300px;
  2121. padding: 10px 5px;
  2122. box-sizing: border-box;
  2123. }
  2124. #main .article_wrap .left_column > .profile_icon_box {
  2125. position: absolute;
  2126. top: -185px;
  2127. width: 200px;
  2128. height: 200px;
  2129. margin-left: 10px;
  2130. padding: 5px;
  2131. background-color: #fff;
  2132. border-radius: 14px;
  2133. border: 1px solid #FBFBFC;
  2134. box-shadow: 0 0.1px 0.3px rgba(0,0,0,0.26);
  2135. cursor: pointer;
  2136. }
  2137. #main .article_wrap .left_column .profile_icon_box img {
  2138. width: 100%;
  2139. height: 100%;
  2140. border-radius: 8px;
  2141. }
  2142. #main .article_wrap .left_column .profile_section_wrap {
  2143. padding: 36px 16px 0 15px;
  2144. }
  2145. #main .article_wrap .left_column .profile_section_wrap > .profile_displayname {
  2146. font-size: 22px;
  2147. font-weight: 700;
  2148. line-height: normal;
  2149. color: rgb(20, 23, 26);
  2150. margin-bottom: 8px;
  2151. }
  2152. #main .article_wrap .left_column .profile_section_wrap > .profile_username,
  2153. #main .article_wrap .left_column .profile_section_wrap .profile_field_header {
  2154. color: rgb(101, 119, 134);
  2155. font-size: 14px;
  2156. font-weight: 300;
  2157. margin-bottom: 8px;
  2158. }
  2159. #main .article_wrap .left_column .profile_section_wrap > .profile_username .profile_followed_by {
  2160. font-size: 10px;
  2161. display: inline-block;
  2162. margin-left: 8px;
  2163. }
  2164. #main .article_wrap .left_column .profile_section_wrap > .profile_bio,
  2165. #main .article_wrap .left_column .profile_section_wrap .profile_field_value {
  2166. font-size: 14px;
  2167. font-weight: 400;
  2168. line-height: 20px;
  2169. margin-bottom: 10px;
  2170. }
  2171. #main .article_wrap .left_column .profile_section_wrap > .profile_bio a,
  2172. #main .article_wrap .left_column .profile_section_wrap .profile_field_value a {
  2173. color: #2588D0;
  2174. }
  2175. #main .article_wrap .left_column .profile_section_wrap .profile_field:last-child {
  2176. margin-bottom:15px;
  2177. }
  2178. #main .article_wrap .left_column .profile_section_wrap .profile_field_verified {
  2179. margin-right:2px;
  2180. color:#1DA1F2;
  2181. }
  2182. .profile_with_icon > a,.profile_with_icon > span {
  2183. font-size: 13px;
  2184. font-weight: 300;
  2185. }
  2186. .profile_with_icon > a {
  2187. color: #2588D0;
  2188. }
  2189. .profile_with_icon i {
  2190. color: #657786;
  2191. margin-right: 8px;
  2192. font-size: 16px;
  2193. }
  2194. #js_profile_recent_images_box {
  2195. width: 100%;
  2196. font-size: 14px;
  2197. display: flex;
  2198. margin-top: 8px;
  2199. flex-wrap: wrap;
  2200. }
  2201. #js_profile_recent_images_box .profile_recent_images_item {
  2202. width: 80px;
  2203. height: 80px;
  2204. margin: 0 5px 5px 0;
  2205. border-radius: 5px;
  2206. overflow: hidden;
  2207. flex-shrink: 0;
  2208. cursor: pointer;
  2209. }
  2210. #js_profile_recent_images_box .profile_recent_images_item img {
  2211. width: 100%;
  2212. height: 100%;
  2213. max-width: none;
  2214. max-height: none;
  2215. object-fit: cover;
  2216. }
  2217. #main .article_wrap .center_column {
  2218. width: auto;
  2219. flex: 1;
  2220. padding: 10px 5px;
  2221. box-sizing: border-box;
  2222. }
  2223. #main .article_wrap .right_column {
  2224. width: 300px;
  2225. padding: 10px 5px;
  2226. box-sizing: border-box;
  2227. }
  2228. #js-overlay_content_wrap {
  2229. display: none;
  2230. position: fixed;
  2231. z-index: 1000;
  2232. top: 0;
  2233. left: 0;
  2234. width: 100%;
  2235. height: 100%;
  2236. overflow: scroll;
  2237. }
  2238. #js-overlay_content_wrap.view {
  2239. display: block;
  2240. background-color: rgba(0, 0, 0, 0);
  2241. transition: 0.5s;
  2242. }
  2243. @keyframes fadein_05 {
  2244. 0% { background-color: rgba(0, 0, 0, 0); }
  2245. 100% {background-color: rgba(0, 0, 0, 0.5);}
  2246. }
  2247. @keyframes fadein_08 {
  2248. 0% { background-color: rgba(0, 0, 0, 0); }
  2249. 100% {background-color: rgba(0, 0, 0, 0.8);}
  2250. }
  2251. #js-overlay_content_wrap.view.black_05 {
  2252. animation-name: fadein_05;
  2253. animation-duration: 0.35s;
  2254. animation-fill-mode: forwards;
  2255. }
  2256. #js-overlay_content_wrap.view.black_08 {
  2257. background-color: rgba(0, 0, 0, 0.8);
  2258. }
  2259. #js-overlay_content_wrap #js-overlay_content {
  2260. width: 628px;
  2261. height: auto;
  2262. margin: 56px auto;
  2263. position: relative;
  2264. margin-bottom: 300px;
  2265. }
  2266. #js-overlay_content_wrap #js-overlay_content .close_button {
  2267. color: #fff;
  2268. position: absolute;
  2269. right: -32px;
  2270. top: 0;
  2271. font-size: 28px;
  2272. }
  2273. #js-overlay_content_wrap .temporary_object .thumb_box {
  2274. display: flex;
  2275. align-items: center;
  2276. justify-content: center;
  2277. width: 100%;
  2278. height: 100%;
  2279. }
  2280. #overlay_message {
  2281. position: fixed;
  2282. top: -47px;
  2283. left: 0;
  2284. right: 0;
  2285. bottom: 0;
  2286. margin: 0 auto;
  2287. width: 658px;
  2288. height: 58px;
  2289. border-bottom-left-radius: 8px;
  2290. border-bottom-right-radius: 8px;
  2291. background-color: #fff;
  2292. box-shadow: 1px 1px 3px rgba(0,0,0,0.35);
  2293. z-index: 998;
  2294. }
  2295. @keyframes overlay_message_active {
  2296. 0% { top: -47px }
  2297. 10% { top: 47px; }
  2298. 85% { top: 47px; }
  2299. 100% { top: -47px }
  2300. }
  2301. #overlay_message.view {
  2302. animation-name: overlay_message_active;
  2303. animation-duration: 3s;
  2304. }
  2305. #overlay_message section {
  2306. color: #999;
  2307. font-size: 14px;
  2308. padding: 16px;
  2309. margin: auto;
  2310. display: block;
  2311. box-sizing: border-box;
  2312. height: 100%;
  2313. width: 100%;
  2314. display: flex;
  2315. justify-content: center;
  2316. align-items: center;
  2317. }
  2318. .toot_detail_wrap {
  2319. border-radius: 5px;
  2320. }
  2321. .toot_detail_wrap .toot_detail:first-child,
  2322. .toot_detail_wrap .toot_entry:first-child {
  2323. border-top-left-radius: 5px;
  2324. border-top-right-radius: 5px;
  2325. }
  2326. .toot_detail_wrap .toot_detail:last-child,
  2327. .toot_detail_wrap .toot_entry:last-child {
  2328. border-bottom-left-radius: 5px;
  2329. border-bottom-right-radius: 5px;
  2330. }
  2331. .toot_detail {
  2332. width: 628px;
  2333. box-sizing: border-box;
  2334. background-color: #fff;
  2335. }
  2336. .toot_entry.ancestors_status .toot_entry_body,
  2337. .toot_entry.descendants_status .toot_entry_body {
  2338. padding: 18px 40px;
  2339. border-bottom: none;
  2340. position: relative;
  2341. /*! padding-bottom: 8px; */
  2342. }
  2343. .toot_entry.ancestors_status.default_padding .toot_entry_body,
  2344. .toot_entry.descendants_status.default_padding .toot_entry_body {
  2345. padding: 12px;
  2346. }
  2347. .toot_entry.ancestors_status .toot_entry_body::after,
  2348. .toot_entry.descendants_status .toot_entry_body::after {
  2349. content: "";
  2350. display: block;
  2351. position: absolute;
  2352. border-radius: 2px;
  2353. position: absolute;
  2354. left: 62px;
  2355. height: calc(100% - 57px);
  2356. top: 68px;
  2357. }
  2358. .toot_entry.ancestors_status .toot_entry_body::after,
  2359. .toot_entry.descendants_status.direct_answer .toot_entry_body::after {
  2360. border: 2px solid #76BFEC;
  2361. }
  2362. .toot_entry.ancestors_status.default_padding .toot_entry_body::after,
  2363. .toot_entry.descendants_status.default_padding .toot_entry_body::after {
  2364. left: 35px;
  2365. height: calc(100% - 60px);
  2366. top: 64px;
  2367. }
  2368. .toot_entry.descendants_status:last-child .toot_entry_body::after {
  2369. border: 0px solid #76BFEC;
  2370. }
  2371. .toot_detail .toot_header {
  2372. display: flex;
  2373. }
  2374. .toot_detail .toot_header .icon_box {
  2375. flex-shrink: 0;
  2376. width: 48px;
  2377. height: 48px;
  2378. border-radius: 3px;
  2379. overflow: hidden;
  2380. margin-right: 8px;
  2381. }
  2382. .toot_detail .toot_header a {
  2383. flex-grow: 1;
  2384. display: flex;
  2385. flex-direction: column;
  2386. justify-content: center;
  2387. }
  2388. .toot_detail .toot_header a .displayname {
  2389. color: #000;
  2390. font-size: 17px;
  2391. font-weight: 600;
  2392. line-height: 1.35;
  2393. }
  2394. .toot_detail .toot_header a .username {
  2395. color: #66757F;
  2396. font-size: 14px;
  2397. }
  2398. .toot_detail .toot_header a:hover {
  2399. text-decoration: none;
  2400. }
  2401. .toot_detail .toot_header a:hover .displayname {
  2402. color: #189EFC;
  2403. }
  2404. .toot_detail .toot_header .expand_button_wrap {
  2405. float: right;
  2406. position: relative;
  2407. width: 48px;
  2408. height: 48px;
  2409. }
  2410. .toot_detail .toot_header .expand_button_wrap .expand_button {
  2411. position: absolute;
  2412. right: 0;
  2413. top: 0;
  2414. color: #AAB8C2;
  2415. }
  2416. .toot_detail .toot_header .expand_button_wrap .expand_button:hover {
  2417. color: #189EFC;
  2418. }
  2419. .toot_detail .toot_header .expand_button_wrap .expand_menu {
  2420. display: block;
  2421. position: absolute;
  2422. cursor: pointer;
  2423. top: 36px;
  2424. right: -152px;
  2425. width: 180px;
  2426. padding: 8px 21px;
  2427. font-size: 12px;
  2428. border-radius: 3px;
  2429. box-sizing: border-box;
  2430. background-color: #fff;
  2431. box-shadow: 0.5px 0.5px 3px rgba(0,0,0,0.26);
  2432. z-index: 1;
  2433. }
  2434. .toot_detail .toot_header .expand_button_wrap .expand_menu::before {
  2435. display: block;
  2436. content: "";
  2437. z-index: -1;
  2438. width: 20px;
  2439. height: 20px;
  2440. position: absolute;
  2441. transform: rotate(45deg);
  2442. top: -5px;
  2443. left: 8px;
  2444. background-color: #fff;
  2445. }
  2446. .toot_detail .toot_header .expand_button_wrap .expand_menu ul {
  2447. margin: 0 -21px;
  2448. margin-bottom: 8px;
  2449. }
  2450. .toot_detail .toot_header .expand_button_wrap .expand_menu ul::after {
  2451. content: "";
  2452. display: block;
  2453. margin-top: 8px;
  2454. border-bottom: 1px solid #E6ECF0;
  2455. }
  2456. .toot_detail .toot_header .expand_button_wrap .expand_menu ul:last-child::after {
  2457. border-bottom: 0px solid #E6ECF0;
  2458. }
  2459. .toot_detail .toot_header .expand_button_wrap .expand_menu ul li {
  2460. box-sizing: border-box;
  2461. }
  2462. .toot_detail .toot_header .expand_button_wrap .expand_menu a {
  2463. display: block;
  2464. padding: 8px 21px;
  2465. }
  2466. .toot_detail .toot_header .expand_button_wrap .expand_menu a:hover {
  2467. background-color: #189EFC;
  2468. text-decoration: none;
  2469. color: #fff;
  2470. }
  2471. .toot_detail .toot_detail_body {
  2472. padding: 30px 40px;
  2473. /*! border-radius: 4px; */
  2474. }
  2475. .toot_detail .toot_content .toot_article {
  2476. font-size: 14px;
  2477. line-height: 20px;
  2478. margin: 16px auto;
  2479. }
  2480. .toot_detail.main_status .toot_content .toot_article {
  2481. font-size: 24px;
  2482. line-height: 1.35;
  2483. }
  2484. .toot_detail.main_status .toot_content .toot_article .cw_button {
  2485. background-color: #6D768C;
  2486. border-radius: 3px;
  2487. padding: 4px;
  2488. margin: auto 4px;
  2489. font-size: 12px;
  2490. box-sizing: border-box;
  2491. color: #fff;
  2492. }
  2493. .toot_detail.main_status .toot_content .toot_article.content_warning .status_content {
  2494. display: none;
  2495. }
  2496. .toot_detail.main_status .toot_content .toot_article .status_content p:not(:last-child) {
  2497. margin-bottom:30px;
  2498. }
  2499. .toot_detail.main_status .toot_content a {
  2500. color: #189EFC;
  2501. }
  2502. .toot_detail.main_status .toot_content time {
  2503. color: #66757F;
  2504. font-size: 13px;
  2505. font-weight: 300;
  2506. }
  2507. .toot_detail .toot_footer {
  2508. display: flex;
  2509. flex-wrap: nowrap;
  2510. align-items: center;
  2511. width: 230px;
  2512. height: 21px;
  2513. margin-top: 12px;
  2514. }
  2515. .toot_detail .toot_footer .toot_reaction {
  2516. height: 21px;
  2517. flex-grow: 1;
  2518. }
  2519. .toot_detail .toot_footer .toot_reaction button {
  2520. margin: auto;
  2521. color: #AAB8C2;
  2522. font-size: 18px;
  2523. height: 21px;
  2524. }
  2525. .toot_detail .toot_footer .toot_reaction button.active {
  2526. animation-name: status_action_active;
  2527. animation-duration: 0.5s;
  2528. }
  2529. .toot_detail .toot_footer .toot_reaction button .reaction_count {
  2530. color: #AAB8C2;
  2531. font-size: 12px;
  2532. font-weight: 600;
  2533. }
  2534. @keyframes status_action_active {
  2535. 0% { transform: scale(1); }
  2536. 50% { transform: scale(2); }
  2537. 100% { transform: scale(1); }
  2538. }
  2539. .toot_detail .toot_footer .toot_reaction .reply_button:hover {
  2540. color: #1DA1F2;
  2541. }
  2542. .toot_detail .toot_footer .toot_reaction .boost_button[reblogged="false"]:hover,
  2543. .toot_detail .toot_footer .toot_reaction .boost_button[reblogged="true"],
  2544. .toot_detail .toot_footer .toot_reaction .boost_button[reblogged="false"]:hover .reaction_count,
  2545. .toot_detail .toot_footer .toot_reaction .boost_button[reblogged="true"] .reaction_count {
  2546. color: #17BF63;
  2547. }
  2548. .toot_detail .toot_footer .toot_reaction .fav_button[favourited="false"]:hover,
  2549. .toot_detail .toot_footer .toot_reaction .fav_button[favourited="true"],
  2550. .toot_detail .toot_footer .toot_reaction .fav_button[favourited="false"]:hover .reaction_count,
  2551. .toot_detail .toot_footer .toot_reaction .fav_button[favourited="true"] .reaction_count {
  2552. color: #FFAD1A;
  2553. }
  2554. .toot_detail .status_form {
  2555. border-top: 1px solid #E6ECF0;
  2556. border-bottom: 1px solid #E6ECF0;
  2557. }
  2558. .media_detail {
  2559. max-height: 100%;
  2560. }
  2561. .media_detail .media_box {
  2562. background-color: #000;
  2563. border-top-right-radius: 5px;
  2564. border-top-left-radius: 5px;
  2565. overflow: hidden;
  2566. text-align: center;
  2567. }
  2568. .media_detail .toot_entry {
  2569. border-bottom-right-radius: 5px;
  2570. border-bottom-left-radius: 5px;
  2571. }
  2572. .media_detail .toot_entry .toot_entry_body {
  2573. border-bottom: none;
  2574. }
  2575. .media_detail .toot_entry .media_views {
  2576. display: none;
  2577. }
  2578. .switch {
  2579. width:60px;
  2580. height:30px;
  2581. margin:10px;
  2582. }
  2583. .switch input {
  2584. width: 60px;
  2585. height: 30px;
  2586. position: absolute;
  2587. filter: alpha(opacity=0);
  2588. opacity: 0;
  2589. outline: none;
  2590. z-index: 9;
  2591. }
  2592. .switch input:hover {
  2593. cursor: pointer;
  2594. }
  2595. .switch-btn {
  2596. background: #AAB8C2;
  2597. width: 100%;
  2598. height: 100%;
  2599. border-radius: 20px;
  2600. position: relative;
  2601. }
  2602. .switch-btn span {
  2603. background: #fff;
  2604. width: 26px;
  2605. height: 26px;
  2606. display: block;
  2607. border-radius: 50%;
  2608. position: absolute;
  2609. top: 2px;
  2610. left: 2px;
  2611. -webkit-transition: all .5s;
  2612. -moz-transition: all .5s;
  2613. -o-transition: all .5s;
  2614. transition: all .5s;
  2615. }
  2616. .switch input:checked + .switch-btn span {
  2617. left: 32px;
  2618. }
  2619. .switch input:checked + .switch-btn {
  2620. background: #189EFC;
  2621. }
  2622. .radiobox {
  2623. margin: 10px;
  2624. }
  2625. .radiobox input[type="radio"] {
  2626. position: absolute;
  2627. opacity: 0;
  2628. }
  2629. .radiobox input[type="radio"] + .radiotext:before {
  2630. content: '';
  2631. background: transparent;
  2632. border-radius: 100%;
  2633. border: 1px solid #AAB8C2;
  2634. display: inline-block;
  2635. width: 30px;
  2636. height: 30px;
  2637. margin-right: 3px;
  2638. vertical-align: top;
  2639. cursor: pointer;
  2640. text-align: center;
  2641. transition: all 250ms ease;
  2642. position: relative;
  2643. top: -8px;
  2644. }
  2645. .radiobox input[type="radio"]:checked + .radiotext:before {
  2646. background-color: #189EFC;
  2647. box-shadow: inset 0 0 0 4px #FFF;
  2648. outline: none;
  2649. border-color: #189EFC;
  2650. }
  2651. input.checkbox[type=checkbox] {display:none}
  2652. input.checkbox[type=checkbox] + label:before {
  2653. font-family: FontAwesome;
  2654. display: inline-block;
  2655. letter-spacing: 5px;
  2656. color: #189EFC;
  2657. font-size:30px;
  2658. vertical-align:sub;
  2659. margin-bottom:5px;
  2660. }
  2661. input.checkbox[type=checkbox] + label:before {content: "\f0c8"}
  2662. input.checkbox[type=checkbox]:checked + label:before {content: "\f14a"}
  2663. .uploadbtn:before {
  2664. position:absolute;
  2665. left:0;
  2666. right:0;
  2667. text-align:center;
  2668. font-size:12px;
  2669. font-weight:600;
  2670. content:"Select file and upload";
  2671. }
  2672. .s-hidden {
  2673. display:none;
  2674. }
  2675. .select {
  2676. cursor:pointer;
  2677. display:inline-block;
  2678. position:relative;
  2679. width:calc(75% - 2px);
  2680. }
  2681. .styledselect {
  2682. width:100%;
  2683. margin:10px;
  2684. padding:0;
  2685. height:28px;
  2686. position:relative;
  2687. text-align:center;
  2688. font-weight:bold;
  2689. }
  2690. .styledselect.active {
  2691. border-bottom-left-radius:0;
  2692. border-bottom-right-radius:0;
  2693. }
  2694. .options {
  2695. display:none;
  2696. position:absolute;
  2697. top:100%;
  2698. right:0;
  2699. left:0;
  2700. z-index:999;
  2701. margin:-10px -12px 0 10px !important;
  2702. padding:0 0;
  2703. list-style:none;
  2704. border:1px solid #189EFC;
  2705. border-top-width:0;
  2706. background-color:white;
  2707. border-bottom-left-radius:4px;
  2708. border-bottom-right-radius:4px;
  2709. }
  2710. .options li {
  2711. text-align:center;
  2712. padding:5px;
  2713. transition:0.15s ease-out;
  2714. border:0 solid #189EFC;
  2715. }
  2716. .options li:hover {
  2717. border:0 solid #189EFC;
  2718. border-left-width:5px;
  2719. border-right-width:5px;
  2720. }
  2721. @media(max-width:1199px) {
  2722. #main .profile_nav_wrap .profile_nav {
  2723. width:900px;
  2724. }
  2725. #main .profile_nav_wrap .profile_nav .profile_nav_right {
  2726. width:590px;
  2727. }
  2728. #js-follows_profile {
  2729. width:600px;
  2730. }
  2731. #main .article_wrap {
  2732. width:900px;
  2733. }
  2734. }
  2735. .dropDown {
  2736. display:inline;
  2737. position:absolute;
  2738. background-color:#FFF;
  2739. list-style:none;
  2740. padding:0;
  2741. z-index:1000;
  2742. box-shadow:0.5px 0.5px 3px rgba(0,0,0,0.26);
  2743. box-sizing:border-box;
  2744. cursor:pointer;
  2745. border-radius:3px;
  2746. }
  2747. .dropDown li {
  2748. margin:0;
  2749. padding-top:5px;
  2750. padding-bottom:5px;
  2751. }
  2752. .dropDown li .un {
  2753. color:#66757F;
  2754. overflow:hidden;
  2755. white-space:nowrap;
  2756. text-overflow:ellipsis;
  2757. display:block;
  2758. }
  2759. .dropDown .icon_box .emoji {
  2760. margin:0;
  2761. vertical-align:0;
  2762. }
  2763. .hoverLi {
  2764. background-color:#189EFC;
  2765. color:#FFF;
  2766. }
  2767. .hoverLi h3,.hoverLi .un {
  2768. color:#FFF !important;
  2769. }
  2770. .showDropDown{
  2771. display:inline;
  2772. }
  2773. .hideDropDown {
  2774. display:none;
  2775. }
  2776. .instance_field {
  2777. width:100%;
  2778. text-align:center;
  2779. font-size:40px;
  2780. font-weight:bold;
  2781. border:1px solid #E6ECF0;
  2782. border-radius:5px;
  2783. padding-top:34px;
  2784. padding-bottom:35px;
  2785. }
  2786. .player,
  2787. .player * {
  2788. overflow: visible;
  2789. -webkit-box-sizing: border-box;
  2790. -moz-box-sizing: border-box;
  2791. box-sizing: border-box;
  2792. -webkit-touch-callout: none;
  2793. -webkit-user-select: none;
  2794. -khtml-user-select: none;
  2795. -moz-user-select: none;
  2796. -ms-user-select: none;
  2797. user-select: none;
  2798. }
  2799. .player {
  2800. width: 100%;
  2801. height: 33px;
  2802. margin: 0px 0px 10px 0px;
  2803. padding: 5px 15px;
  2804. border: 1px solid #DCDFE1;
  2805. font-size: 14px;
  2806. line-height: 21px;
  2807. color: #333;
  2808. -webkit-border-radius: 5px;
  2809. -moz-border-radius: 5px;
  2810. border-radius: 5px;
  2811. }
  2812. .player > div {
  2813. float: left;
  2814. margin-right: 10px;
  2815. }
  2816. .player .play {
  2817. width: 21px;
  2818. height: 21px;
  2819. font-size: 1.5em;
  2820. }
  2821. .player .time-left {
  2822. width: 50px;
  2823. height: 21px;
  2824. text-align: center;
  2825. }
  2826. .player .time-right {
  2827. width: 50px;
  2828. height: 21px;
  2829. text-align: center;
  2830. }
  2831. .player .progress {
  2832. width: calc(100% - 252px);
  2833. height: 9px;
  2834. margin-top: 6px;
  2835. background: #AAB8C2;
  2836. border-radius:9px;
  2837. }
  2838. .player .loaded {
  2839. width: 0px;
  2840. height: 9px;
  2841. border-radius:9px;
  2842. background: rgb(101, 119, 134);
  2843. }
  2844. .player .progress .pointer {
  2845. width: 15px;
  2846. height: 15px;
  2847. margin: -12px 0px 0px -3px;
  2848. background: #189EFC;
  2849. -webkit-border-radius: 50%;
  2850. -moz-border-radius: 50%;
  2851. border-radius: 50%;
  2852. }
  2853. .player .mute {
  2854. width: 21px;
  2855. height: 21px;
  2856. font-size: 1.5em;
  2857. }
  2858. .player .volume {
  2859. width: 60px;
  2860. height: 9px;
  2861. margin-top:6px;
  2862. margin-right: 0px;
  2863. background: #AAB8C2;
  2864. border-radius:9px;
  2865. }
  2866. .player .volume .pointer {
  2867. width: 15px;
  2868. height: 15px;
  2869. margin: -3px 0px 0px 27px;
  2870. background: #189EFC;
  2871. -webkit-border-radius: 50%;
  2872. -moz-border-radius: 50%;
  2873. border-radius: 50%;
  2874. }
  2875. .poll_box {
  2876. position:relative;
  2877. }
  2878. .poll_box_form {
  2879. line-height:20px;
  2880. }
  2881. .poll_box .radiobox {
  2882. margin:0;
  2883. margin-top:10px;
  2884. }
  2885. .poll_checkbox_label {
  2886. line-height:30px;
  2887. }
  2888. .poll_checkbox_label:before {
  2889. vertical-align:top !important;
  2890. }
  2891. .toot_detail.main_status .poll_checkbox_label:before {
  2892. vertical-align:middle !important;
  2893. }
  2894. .poll_vote {
  2895. display:inline;
  2896. }
  2897. .toot_detail.main_status .poll_vote {
  2898. vertical-align:text-bottom;
  2899. }
  2900. .poll_bar {
  2901. position:absolute;
  2902. background-color:#CCCCCC;
  2903. border-radius:4px;
  2904. height:25px;
  2905. }
  2906. .poll_winner {
  2907. background-color:#189EFC;
  2908. }
  2909. .toot_detail.main_status .poll_bar {
  2910. height:35px;
  2911. }
  2912. .poll_result_label {
  2913. position:relative;
  2914. display:inline-block;
  2915. padding:5px;
  2916. }
  2917. .poll_footer {
  2918. color:#66757F;
  2919. }