thread.less 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870
  1. // Thread view
  2. // -------------------------
  3. .thread-buttons {
  4. overflow: auto;
  5. .pull-right {
  6. margin-left: @baseFontSize;
  7. }
  8. .thread-signin-message {
  9. float: right;
  10. a:link, a:visited {
  11. color: @textColor;
  12. }
  13. }
  14. }
  15. <<<<<<< HEAD
  16. .thread-poll-body {
  17. background-color: @categoryBackground;
  18. border: 1px solid @categoryBorder;
  19. border-radius: @borderRadiusSmall;
  20. .box-shadow(0px 0px 0px 3px @categoryShadow);
  21. margin-bottom: @baseLineHeight;
  22. padding: (@baseLineHeight / 2) @baseLineHeight;
  23. h2 {
  24. margin-left: @horizontalComponentOffset;
  25. margin-bottom: @baseLineHeight;
  26. }
  27. form {
  28. margin: 0px;
  29. padding: 0px;
  30. }
  31. .options-form {
  32. margin-left: @horizontalComponentOffset;
  33. margin-bottom: @baseLineHeight;
  34. label {
  35. padding: 2px 0px;
  36. font-size: @fontSizeLarge;
  37. }
  38. .poll-voting-help {
  39. color: @grayLight;
  40. }
  41. }
  42. .poll-options {
  43. dd {
  44. padding-top: 2px;
  45. .progress {
  46. background: none;
  47. border: 1px solid darken(@bodyBackground, 15%);
  48. border-radius: 10px;
  49. .box-shadow(none);
  50. height: auto;
  51. margin: 0px;
  52. padding: 2px;
  53. .bar {
  54. border-radius: 5px;
  55. height: 10px;
  56. min-width: 10px;
  57. }
  58. }
  59. .option-details {
  60. padding-left: 6px;
  61. color: @grayLight;
  62. font-size: @fontSizeSmall;
  63. strong {
  64. padding-right: @fontSizeSmall;
  65. color: @bluePale;
  66. font-weight: normal;
  67. }
  68. }
  69. }
  70. }
  71. .poll-footer {
  72. overflow: auto;
  73. margin-top: @baseLineHeight * -0.5;
  74. margin-bottom: @baseLineHeight * 0.5;
  75. margin-left: @horizontalComponentOffset;
  76. .btn, p {
  77. float: left;
  78. margin-right: @baseFontSize / 2;
  79. }
  80. p {
  81. margin-left: @baseFontSize / 2;
  82. position: relative;
  83. top: @baseLineHeight / 3;
  84. color: @grayLight;
  85. }
  86. }
  87. }
  88. =======
  89. >>>>>>> master
  90. // Thread body styles
  91. .thread-body {
  92. .post-wrapper {
  93. // Post body
  94. .post-body {
  95. margin-bottom: @baseLineHeight;
  96. overflow: auto;
  97. .user-avatar {
  98. border-radius: @borderRadiusLarge;
  99. float: left;
  100. width: 100px;
  101. height: 100px;
  102. }
  103. .post-content {
  104. background-color: @postBackground;
  105. border: 1px solid @postBorder;
  106. border-radius: @borderRadiusLarge;
  107. margin-left: 100px + (@baseFontSize * 1.5);
  108. min-height: 100px;
  109. position: relative;
  110. &:after, &:before {
  111. right: 100%;
  112. border: solid transparent;
  113. content: "";
  114. height: 0; width: 0;
  115. position: absolute;
  116. pointer-events: none;
  117. }
  118. &:after {
  119. border-color: transparent;
  120. border-right-color: @postBackground;
  121. border-width: @fontSizeMini;
  122. top: @baseFontSize;
  123. margin-top: (@baseFontSize * -1) + @baseFontSize;
  124. }
  125. &:before {
  126. border-color: transparent;
  127. border-right-color: @postBorder;
  128. <<<<<<< HEAD
  129. border-width: @fontSizeMini + 2;
  130. top: @baseFontSize - 1;
  131. =======
  132. border-width: @fontSizeMini + 1;
  133. top: @baseFontSize;
  134. >>>>>>> master
  135. margin-top: (@baseFontSize * -1) + @baseFontSize - 1px;
  136. }
  137. .post-header {
  138. padding: (@baseFontSize / 2) @baseFontSize;
  139. padding-bottom: 0px;
  140. color: grayLighter;
  141. .post-author {
  142. color: @textColor;
  143. font-weight: bold;
  144. }
  145. .post-author-label {
  146. text-shadow: none;
  147. &.post-label-guest {
  148. background-color: @grayLighter;
  149. color: @grayLight;
  150. }
  151. }
  152. .separator {
  153. color: @grayLighter;
  154. font-size: @fontSizeLarge;
  155. line-height: 5px;
  156. }
  157. .post-date {
  158. color: @grayLight;
  159. }
  160. .post-changelog {
  161. color: @grayLight;
  162. &:hover, &:active {
  163. color: @textColor;
  164. }
  165. }
  166. .post-perma {
  167. display: block;
  168. float: right;
  169. padding-left: 6px;
  170. color: @grayLight;
  171. font-weight: bold;
  172. &:hover, &:active {
  173. color: @textColor;
  174. }
  175. }
  176. .post-checkbox {
  177. float: right;
  178. position: relative;
  179. left: @baseFontSize - 4px;
  180. }
  181. .post-extra {
  182. float: right;
  183. .label {
  184. margin-left: @baseFontSize / 4;
  185. text-shadow: none;
  186. &.label-purple {
  187. background-color: #7e2ecf;
  188. }
  189. }
  190. }
  191. }
  192. .post-message {
  193. .markdown {
  194. padding: @baseFontSize;
  195. }
  196. <<<<<<< HEAD
  197. .post-attachments {
  198. margin: 0px @baseFontSize;
  199. h3 {
  200. border-bottom: 1px dotted darken(@postBackground, 25%);
  201. margin: 0px;
  202. padding: 0px;
  203. color: @grayLight;
  204. font-size: @baseFontSize;
  205. line-height: @baseLineHeight;
  206. }
  207. hr {
  208. background: none;
  209. border-top: 1px dotted darken(@postBackground, 15%) !important;
  210. margin: 0px;
  211. padding: 0px;
  212. }
  213. .post-attachment {
  214. padding: (@baseLineHeight / 2) 0px;
  215. .attachment-image {
  216. float: left;
  217. i {
  218. display: block;
  219. height: 40px;
  220. width: 40px;
  221. color: @grayLight;
  222. font-size: 42px;
  223. text-align: center;
  224. }
  225. img {
  226. background-size: cover;
  227. border-radius: 3px;
  228. height: 40px;
  229. width: 40px;
  230. }
  231. }
  232. .attachment-body {
  233. margin-left: 52px;
  234. h4 {
  235. margin: 0px;
  236. padding: 0px;
  237. font-size: @baseFontSize;
  238. }
  239. .attachment-details {
  240. color: @grayLight;
  241. font-size: @fontSizeSmall;
  242. a:link, a:visited {
  243. color: @gray;
  244. }
  245. a:hover, a:active {
  246. color: @grayDarker;
  247. }
  248. .attachment-removed-message {
  249. color: @red;
  250. }
  251. }
  252. }
  253. }
  254. }
  255. =======
  256. >>>>>>> master
  257. .post-signature {
  258. border-top: 1px dotted darken(@postBackground, 25%);
  259. .opacity(60);
  260. margin: 0px @baseFontSize;
  261. font-size: 80%;
  262. .markdown {
  263. padding: 0px;
  264. padding-top: @baseLineHeight / 4;
  265. padding-bottom: @baseFontSize;
  266. }
  267. }
  268. }
  269. .post-footer {
  270. border-top: 1px solid @postBorder;
  271. overflow: auto;
  272. &:empty {
  273. display: none;
  274. }
  275. .post-rating {
  276. float: left;
  277. overflow: auto;
  278. padding: (@baseFontSize / 2) @baseFontSize;
  279. border-right: 1px dotted @postBorder;
  280. a {
  281. color: @grayLight;
  282. &:hover, a:active {
  283. color: @textColor;
  284. }
  285. }
  286. span {
  287. float: left;
  288. &.post-score {
  289. color: @grayLight;
  290. font-weight: bold;
  291. &.post-score-good {
  292. color: @green;
  293. }
  294. &.post-score-bad {
  295. color: @red;
  296. }
  297. }
  298. &.post-neutral, &.post-like, &.post-hate {
  299. <<<<<<< HEAD
  300. margin-left: (@baseFontSize / 4);
  301. =======
  302. margin-left: (@baseFontSize / 4);
  303. >>>>>>> master
  304. }
  305. &.post-neutral {
  306. color: @grayLight;
  307. }
  308. &.post-like {
  309. color: @green;
  310. }
  311. &.post-hate {
  312. color: @red;
  313. }
  314. }
  315. form {
  316. float: left;
  317. margin: 0px;
  318. padding: 0px;
  319. .btn-link {
  320. float: right;
  321. margin: 0px;
  322. margin-left: (@baseFontSize / 4);
  323. .opacity(100);
  324. padding: 0px;
  325. color: @grayLight;
  326. font-weight: normal;
  327. &:hover, &:active, &:focus {
  328. text-decoration: underline;
  329. }
  330. &.post-like {
  331. &:hover, &:active, &:focus, &:disabled {
  332. color: @green;
  333. }
  334. }
  335. &.post-hate {
  336. &:hover, &:active, &:focus, &:disabled {
  337. color: @red;
  338. }
  339. }
  340. &:disabled {
  341. &:hover, &:active, &:focus {
  342. text-decoration: none;
  343. }
  344. }
  345. }
  346. }
  347. }
  348. .post-actions {
  349. border-left: 1px dotted @postBorder;
  350. float: right;
  351. padding: (@baseFontSize / 2) @baseFontSize;
  352. color: @grayLight;
  353. a, span, form {
  354. float: left;
  355. overflow: auto;
  356. }
  357. form {
  358. margin: 0px;
  359. padding: 0px;
  360. .btn {
  361. float: right;
  362. margin: 0px;
  363. margin-left: @baseFontSize;
  364. .opacity(100);
  365. padding: 0px;
  366. color: @grayLight;
  367. font-weight: normal;
  368. &:hover, &:active, &:focus {
  369. color: @red;
  370. text-decoration: underline;
  371. }
  372. &.btn-report {
  373. &:disabled {
  374. color: @green;
  375. }
  376. }
  377. &.btn-hide {
  378. &:hover, &:active, &:focus {
  379. color: @orange;
  380. }
  381. }
  382. }
  383. &:first-child .btn {
  384. margin-left: 0px;
  385. }
  386. }
  387. a {
  388. margin-left: @baseFontSize;
  389. color: @grayLight;
  390. &:hover, a:active {
  391. color: @textColor;
  392. }
  393. &:first-child {
  394. margin-left: 0px;
  395. }
  396. &.post-reply {
  397. color: @gray;
  398. &:hover, a:active {
  399. color: @blue;
  400. }
  401. }
  402. }
  403. }
  404. }
  405. }
  406. <<<<<<< HEAD
  407. &.post-muted {
  408. =======
  409. &.post-muted {
  410. >>>>>>> master
  411. .user-avatar {
  412. width: 50px;
  413. height: 50px;
  414. .opacity(75);
  415. }
  416. .post-content {
  417. margin-left: 50px + (@baseFontSize * 1.5);
  418. min-height: 0px;
  419. .opacity(75);
  420. padding: @baseFontSize;
  421. .post-header {
  422. float: right;
  423. margin: 0px;
  424. margin-top: ((@baseFontSize / 2) * -1);
  425. margin-right: @baseFontSize * -1;
  426. .post-header-compact {
  427. float: left;
  428. margin-right: @baseFontSize;
  429. }
  430. }
  431. .post-message {
  432. color: @grayLight;
  433. font-size: @fontSizeLarge;
  434. strong, a {
  435. color: @textColor;
  436. font-weight: normal;
  437. }
  438. }
  439. }
  440. }
  441. }
  442. }
  443. .post-checkpoints {
  444. .post-checkpoint {
  445. text-align: center;
  446. margin-bottom: @baseLineHeight;
  447. &.checkpoint-deleted {
  448. .opacity(30);
  449. &:hover {
  450. .opacity(60);
  451. }
  452. }
  453. hr {
  454. background-color: @grayLight;
  455. background-image: -webkit-gradient(linear, 0 0, 100% 100%,
  456. color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
  457. color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
  458. color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
  459. to(transparent));
  460. background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
  461. transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
  462. transparent 75%, transparent);
  463. background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
  464. transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
  465. transparent 75%, transparent);
  466. background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
  467. transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
  468. transparent 75%, transparent);
  469. background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
  470. transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
  471. transparent 75%, transparent);
  472. background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
  473. transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
  474. transparent 75%, transparent);
  475. -webkit-background-size: 10px 10px;
  476. -moz-background-size: 10px 10px;
  477. background-size: 10px 10px;
  478. border: none;
  479. height: 4px;
  480. margin-bottom: (@baseLineHeight * -1) + (@baseFontSize / 2) + 1px;
  481. }
  482. span {
  483. background-color: @bodyBackground;
  484. padding: 0px @baseFontSize;
  485. color: @grayLight;
  486. a {
  487. color: @textColor;
  488. }
  489. i {
  490. <<<<<<< HEAD
  491. margin-right: 2px;
  492. position: relative;
  493. top: 2px;
  494. width: @fontSizeLarge;
  495. font-size: @fontSizeLarge;
  496. text-align: center;
  497. =======
  498. .opacity(43);
  499. >>>>>>> master
  500. }
  501. form {
  502. display: inline-block;
  503. margin: 0px;
  504. margin-top: -3px;
  505. margin-left: @baseFontSize / 2;
  506. padding: 0px;
  507. .btn {
  508. margin-top: -2px;
  509. padding: 0px;
  510. font-weight: normal;
  511. &:active, &:hover {
  512. text-decoration: underline;
  513. &.btn-show, &.btn-hide {
  514. color: @orange;
  515. }
  516. &.btn-delete {
  517. color: @red;
  518. }
  519. }
  520. }
  521. }
  522. form:first-of-type {
  523. margin-left: @baseFontSize;
  524. }
  525. }
  526. }
  527. }
  528. }
  529. // Thread moderation
  530. .thread-moderation {
  531. background-color: @categoryBackground;
  532. border: 1px solid @categoryBorder;
  533. border-radius: @baseBorderRadius;
  534. .box-shadow(0px 0px 0px 3px @categoryShadow);
  535. margin-bottom: @baseLineHeight;
  536. overflow: auto;
  537. padding: (@baseFontSize / 2);
  538. form {
  539. margin: 0px;
  540. }
  541. }
  542. // Quick reply styles
  543. .thread-quick-reply {
  544. overflow: auto;
  545. margin-top: @baseLineHeight;
  546. .user-avatar {
  547. border-radius: @baseBorderRadius;
  548. float: left;
  549. width: 100px;
  550. height: 100px;
  551. overflow: visible;
  552. }
  553. .editor {
  554. margin-left: 100px + (@baseFontSize * 1.5);
  555. position: relative;
  556. &:after, &:before {
  557. right: 100%;
  558. border: solid transparent;
  559. content: "";
  560. height: 0; width: 0;
  561. position: absolute;
  562. pointer-events: none;
  563. }
  564. &:after {
  565. border-color: transparent;
  566. border-right-color: @editorBackground;
  567. border-width: @fontSizeMini;
  568. top: @baseFontSize;
  569. margin-top: (@baseFontSize * -1) + @baseFontSize;
  570. }
  571. &:before {
  572. border-color: transparent;
  573. border-right-color: darken(@editorBackground, 10%);
  574. <<<<<<< HEAD
  575. border-width: @fontSizeMini + 2;
  576. top: @baseFontSize - 1;
  577. =======
  578. border-width: @fontSizeMini + 1;
  579. top: @baseFontSize;
  580. >>>>>>> master
  581. margin-top: (@baseFontSize * -1) + @baseFontSize - 1px;
  582. }
  583. }
  584. }
  585. // Thread participants list
  586. .thread-participants {
  587. h3 {
  588. margin: 0px;
  589. margin-top: (@baseLineHeight - @baseFontSize) * -1;
  590. padding: 0px;
  591. color: @gray;
  592. font-size: @fontSizeLarge;
  593. font-weight: bold;
  594. }
  595. ul {
  596. background-color: @white;
  597. border: 1px solid darken(@bodyBackground, 10%);
  598. border-radius: @baseBorderRadius;
  599. margin: 0px;
  600. margin-bottom: @baseLineHeight;
  601. padding: 0px;
  602. li {
  603. border-bottom: 1px dotted darken(@bodyBackground, 10%);
  604. margin: 0px;
  605. padding: 6px 8px;
  606. font-weight: bold;
  607. img {
  608. border-radius: @borderRadiusSmall;
  609. width: 24px;
  610. height: 24px;
  611. <<<<<<< HEAD
  612. position: relative;
  613. bottom: 1px;
  614. =======
  615. >>>>>>> master
  616. }
  617. a:link, a:active, a:visited, a:hover {
  618. margin: 0px 4px;
  619. <<<<<<< HEAD
  620. position: relative;
  621. top: 2px;
  622. color: @textColor;
  623. font-size: @fontSizeLarge;
  624. =======
  625. color: @textColor;
  626. >>>>>>> master
  627. font-weight: bold;
  628. }
  629. &:last-child {
  630. border-bottom: none;
  631. }
  632. form {
  633. float: right;
  634. margin: 0px;
  635. padding: 0px;
  636. button {
  637. <<<<<<< HEAD
  638. float: left;
  639. padding-left: 0px;
  640. padding-right: 0px;
  641. margin-left: 12px;
  642. width: 28px;
  643. text-align: center;
  644. i {
  645. margin: 0px;
  646. position: relative;
  647. top: 1px;
  648. font-size: @fontSizeLarge;
  649. =======
  650. padding-left: 5px;
  651. padding-right: 5px;
  652. i {
  653. position: relative;
  654. top: 1px;
  655. >>>>>>> master
  656. }
  657. }
  658. }
  659. }
  660. }
  661. h4 {
  662. margin: 0px;
  663. padding: 0px;
  664. color: @gray;
  665. font-size: @baseFontSize * 1.2;
  666. font-weight: bold;
  667. }
  668. .no-participants {
  669. margin-bottom: @baseLineHeight;
  670. }
  671. .invite-participant {
  672. background-color: @white;
  673. border: 1px solid darken(@bodyBackground, 15%);
  674. border-radius: @baseBorderRadius;
  675. margin-top: @baseLineHeight - @baseFontSize;
  676. padding: 1px;
  677. form {
  678. margin: 0px;
  679. padding: 0px;
  680. input, button {
  681. border: none;
  682. background: none;
  683. box-shadow: none;
  684. }
  685. input {
  686. width: 70%;
  687. }
  688. button {
  689. float: right;
  690. <<<<<<< HEAD
  691. position: relative;
  692. top: 2px;
  693. left: 2px;
  694. i {
  695. margin: 0px;
  696. color: @grayLight;
  697. font-size: @fontSizeLarge;
  698. }
  699. &:hover, &:active {
  700. i {
  701. color: @textColor;
  702. }
  703. }
  704. =======
  705. >>>>>>> master
  706. }
  707. }
  708. }
  709. }