Frontend elements to SugoiMusic, including CSS and public/private headers.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

961 line
14 KiB

  1. .box h3 {
  2. font-size: 140%;
  3. }
  4. .box h4 {
  5. font-size: 130%;
  6. }
  7. .box h5 {
  8. font-size: 120%;
  9. }
  10. .box h6 {
  11. font-size: 110%;
  12. }
  13. .thin {
  14. box-sizing: border-box;
  15. }
  16. .flex_input_container {
  17. display: flex;
  18. }
  19. .flex_input_container > input[type=text]{
  20. flex-grow: 1;
  21. box-sizing: border-box;
  22. width: 50%;
  23. }
  24. .body, .profileinfo {
  25. word-wrap: break-word;
  26. word-break: break-all;
  27. word-break: break-word;
  28. hyphens: auto;
  29. }
  30. input, textarea {
  31. border: 1px solid #c7c7c7;
  32. background-color: white;
  33. padding: 10px 9px;
  34. color: black;
  35. outline: none;
  36. }
  37. select {
  38. padding: 5px 10px;
  39. background-color: white;
  40. border: 1px solid #c7c7c7;
  41. color: black;
  42. border-radius: 0px;
  43. outline: 0;
  44. -webkit-appearance: none;
  45. -moz-appearance: none;
  46. appearance: none;
  47. }
  48. h2 .group_cat {
  49. height: 16px;
  50. width: 16px;
  51. margin: 0 8px;
  52. display: inline-block;
  53. background-size: 16px 16px;
  54. }
  55. code {
  56. white-space: pre;
  57. }
  58. pre > br, code > br {
  59. line-height: 0px;
  60. display: none;
  61. }
  62. .center {
  63. text-align: center;
  64. }
  65. .collage_images {
  66. padding: 0px;
  67. width: 100%;
  68. border-collapse: collapse;
  69. font-size: 0;
  70. }
  71. .collage_images {
  72. display: block;
  73. }
  74. ul.collage_images li {
  75. border: none;
  76. float: left;
  77. margin: 0;
  78. /* width: 118px;
  79. height: 118px;
  80. width: 146px; */
  81. width: 146px;
  82. list-style: none;
  83. list-style-type: none;
  84. }
  85. ul.collage_images li a {
  86. display: block;
  87. /* height: 118px; */
  88. width: 100%;
  89. overflow: hidden;
  90. }
  91. ul.collage_images img {
  92. /* height: 118px;
  93. width: 118px; */
  94. }
  95. div.collage_image {
  96. width: 20%;
  97. }
  98. [data-toggle-target], [data-quote-jump], .clickable {
  99. cursor: pointer;
  100. }
  101. button, input[type=button], input[type=submit] {
  102. cursor: pointer;
  103. background: #fff;
  104. font-size: 11px;
  105. padding: 10px 9px;
  106. border: none;
  107. color: #000;
  108. }
  109. .spoilerButton {
  110. cursor: pointer;
  111. overflow: hidden;
  112. text-overflow: ellipsis;
  113. }
  114. .selected a {
  115. font-weight: bold;
  116. text-decoration: underline;
  117. }
  118. .invisible {
  119. visibility: hidden;
  120. }
  121. .collage td {
  122. padding: 0px;
  123. border: none;
  124. }
  125. abbr[title] {
  126. text-decoration: none;
  127. }
  128. .line_new {
  129. color: green;
  130. }
  131. .line_deleted {
  132. color: red;
  133. }
  134. .line_moved {
  135. color: blue;
  136. }
  137. .line_unchanged {
  138. }
  139. .log1 {
  140. }
  141. .log2 {
  142. color: yellow;
  143. }
  144. .log3 {
  145. color: #0E88C6;
  146. }
  147. .log4 {
  148. font-weight: bold;
  149. }
  150. .log5 {
  151. text-decoration: underline;
  152. }
  153. .good {
  154. font-weight: bold;
  155. color: green;
  156. }
  157. .bad {
  158. font-weight: bold;
  159. color: red;
  160. }
  161. .goodish {
  162. font-weight: bold;
  163. color: #35BF00;
  164. }
  165. .badish {
  166. font-weight: bold;
  167. color: #E5B244;
  168. }
  169. pre {
  170. overflow: auto;
  171. }
  172. .disable_grouping {
  173. display: none;
  174. }
  175. form textarea, form input {
  176. max-width: 100%;
  177. box-sizing: border-box;
  178. }
  179. textarea {
  180. width: 100%;
  181. box-sizing: border-box;
  182. }
  183. a.beta {
  184. font-weight: bold;
  185. color: #ff0000;
  186. }
  187. strong.important_text {
  188. color: red;
  189. font-weight: bold;
  190. }
  191. strong.important_text_alt {
  192. color: green;
  193. font-weight: bold;
  194. }
  195. .invalid, .warning, .error, .new {
  196. color: #ff0000;
  197. }
  198. /* Make [+] on add multiple artists stay at the bottom (on torrent details page) */
  199. div#AddArtists {
  200. position: relative;
  201. display: inline-block;
  202. }
  203. div#AddArtists a {
  204. position: absolute;
  205. right: 0pt;
  206. bottom: 0pt;
  207. }
  208. .clear:after {
  209. content: ".";
  210. display: block;
  211. height: 0;
  212. clear: both;
  213. visibility: hidden;
  214. }
  215. .new-subscriptions {
  216. font-weight: bold;
  217. }
  218. #forums #quickpost {
  219. width: 95%;
  220. }
  221. .bbcode_bar {
  222. list-style: none;
  223. margin: 0px 0px -4px;
  224. box-sizing: border-box;
  225. text-align: center;
  226. display: inline-block;
  227. }
  228. .bbcode_bar > li {
  229. display: inline-block;
  230. margin: 0px;
  231. }
  232. .bbcode_bar > li > a {
  233. display: inline-block;
  234. height: 26px;
  235. line-height: 26px;
  236. cursor: pointer;
  237. min-width: 20px;
  238. margin: 0px 4px;
  239. }
  240. td.label, .valign_top {
  241. vertical-align: top;
  242. }
  243. span.rbt {
  244. display: block;
  245. padding: 8px 0 0;
  246. background: url('../rippy/rippy_top.gif') no-repeat top;
  247. }
  248. span.rbm {
  249. display: block;
  250. background: url('../rippy/rippy_middle.gif') repeat bottom;
  251. padding: 0 5px;
  252. }
  253. span.rbb {
  254. display: block;
  255. padding: 4px 0px 18px;
  256. margin-bottom: 5px;
  257. background: url('../rippy/rippy_bottom.gif') no-repeat bottom;
  258. }
  259. span.secondary_class {
  260. font-size: 85%;
  261. font-weight: bold;
  262. }
  263. .breadcrumbs {
  264. font-weight: bold;
  265. text-align: right;
  266. }
  267. .paranoia_override {
  268. font-style: italic;
  269. }
  270. #manage_collage_table.ui-sortable .drag {
  271. cursor: n-resize;
  272. }
  273. #manage_collage_table.ui-sortable .ui-sortable-helper.drag {
  274. cursor: grabbing;
  275. cursor: -moz-grabbing;
  276. cursor: -webkit-grabbing;
  277. }
  278. #manage_collage_table .ui-sortable-helper td, #manage_collage_table .ui-sortable-placeholder {
  279. border: 0;
  280. }
  281. .drag_drop_save {
  282. padding: 6px 0;
  283. overflow: hidden;
  284. }
  285. .headerSort {
  286. cursor: pointer;
  287. }
  288. .headerSort span {
  289. background: url("../common/table-order.png") no-repeat scroll right -38px transparent;
  290. padding: 0px 20px 0 0;
  291. }
  292. .headerSortDown span {
  293. background: url("../common/table-order.png") no-repeat scroll right 4px transparent;
  294. }
  295. .headerSortUp span {
  296. background: url("../common/table-order.png") no-repeat scroll right -79px transparent;
  297. }
  298. .headerSort.sorter-false,
  299. .headerSort.sorter-false span {
  300. background-image: none;
  301. cursor: default;
  302. }
  303. .album_votes {
  304. text-align: center;
  305. }
  306. .favoritecount {
  307. font-size: 150%;
  308. font-weight: bold;
  309. }
  310. .favoritecount_small {
  311. font-size: 110%;
  312. font-weight: bold;
  313. }
  314. ul.votedalbums li {
  315. list-style: none;
  316. list-style-type: none;
  317. margin: 0;
  318. }
  319. tr.torrent .bookmark>a:before {
  320. text-decoration: none;
  321. font-weight: normal;
  322. }
  323. tr.torrent .bookmark>a:after {
  324. text-decoration: none;
  325. font-weight: normal;
  326. }
  327. #sortable {
  328. list-style-type: none;
  329. margin: 0;
  330. padding: 0;
  331. width: 50%;
  332. }
  333. #sortable li {
  334. padding: 0px;
  335. font-size: 1.2em;
  336. height: 1.5em;
  337. }
  338. .ui-state-highlight {
  339. background: #007DC6 /*{bgColorHighlight}*/;
  340. opacity: 0.15;
  341. width: 50%;
  342. }
  343. .navigation_list, .navigation_list ol {
  344. list-style-position: inside;
  345. margin-top: 10px;
  346. margin-bottom: 20px;
  347. }
  348. .navigation_list > li {
  349. list-style-type: upper-roman !important;
  350. }
  351. .navigation_list li li {
  352. list-style-type: decimal;
  353. }
  354. .navigation_list li li li {
  355. list-style-type: lower-roman;
  356. }
  357. .navigation_list li li li li {
  358. list-style-type: lower-alpha;
  359. }
  360. .voted_type {
  361. font-weight: bold;
  362. }
  363. .torrent_table .group .votes_info_td strong {
  364. font-size: inherit;
  365. }
  366. .invite_table td {
  367. min-width: 55px;
  368. }
  369. .preview_wrap {
  370. text-align: left;
  371. }
  372. .text_preview {
  373. min-height: 100px
  374. }
  375. .brackets {
  376. text-indent: 0px;
  377. white-space: nowrap;
  378. cursor: pointer;
  379. }
  380. .votespan.brackets:before {
  381. content: "( ";
  382. }
  383. .votespan.brackets:after {
  384. content: " )";
  385. }
  386. .brackets:before {
  387. content: "[";
  388. }
  389. .brackets:after {
  390. content: "]";
  391. }
  392. #userinfo .brackets:before, #userinfo .brackets:after {
  393. content: "";
  394. }
  395. .group_image {
  396. overflow: hidden;
  397. }
  398. .float_left {
  399. float: left;
  400. }
  401. .float_right {
  402. float: right;
  403. }
  404. .float_clear {
  405. clear: both;
  406. }
  407. .group_image + .group_info {
  408. margin-left: 100px;
  409. }
  410. .group_image img {
  411. cursor: pointer;
  412. }
  413. .user_title {
  414. font-weight: normal;
  415. }
  416. /*
  417. * Fix long filename tables overflowing (Chrome only).
  418. * Stop various release page containers from overflowing with long input.
  419. * !! Be sure to test all major browsers before changing this section. !!
  420. * Fix report information tables overflowing long reports (all browsers).
  421. * Fix long release descriptions overflowing containers (all browsers).
  422. * Fix flowing issues in the report resolving pages.
  423. */
  424. .wrap_overflow, .filelist_table td, .reportinfo_table, .torrentdetails blockquote {
  425. word-break: normal;
  426. -ms-word-wrap: break-word;
  427. word-wrap: break-word;
  428. -webkit-hyphens: auto;
  429. -moz-hyphens: auto;
  430. -ms-hyphens: auto;
  431. hyphens: auto;
  432. /* Note that IE will have different behavior on word-break,
  433. * but this is required to keep the layout from breaking. */
  434. -ms-word-break: break-all;
  435. }
  436. /* Non-web-standard for webkit */
  437. .torrentdetails blockquote {
  438. word-break: break-word;
  439. }
  440. /* Fix long filename tables overflowing (Chrome only). */
  441. .filelist_table td:first-child {
  442. word-break: break-all;
  443. }
  444. /* Fix long overflow for Opera (doesn't support word-break). */
  445. .reportinfo_table {
  446. table-layout: fixed;
  447. }
  448. /* Wrap release info for consistent DOM and to limit table expansion. */
  449. .no_overflow {
  450. width: 100%;
  451. overflow: hidden;
  452. }
  453. /* Stylesheet gallery in user profile editing */
  454. #css_gallery {
  455. overflow: hidden;
  456. margin-top: 10px;
  457. }
  458. .preview_wrapper {
  459. position: relative;
  460. display: inline-block;
  461. width: 40%;
  462. margin: 0 10px;
  463. }
  464. .preview_image {
  465. display: block;
  466. cursor: pointer;
  467. overflow: hidden;
  468. }
  469. .preview_image img {
  470. width: 100%;
  471. }
  472. .preview_name {
  473. text-align: center;
  474. margin-top: 5px;
  475. }
  476. .option_group {
  477. margin-bottom: 10px;
  478. }
  479. .option_group:last-child {
  480. margin-bottom: 0px;
  481. }
  482. .autocomplete-suggestions {
  483. color: #000;
  484. margin-top: 5px;
  485. border: 1px solid #999;
  486. background: #FFF;
  487. overflow: auto;
  488. }
  489. .autocomplete-suggestion {
  490. padding: 2px 5px;
  491. white-space: nowrap;
  492. overflow: hidden;
  493. cursor: pointer;
  494. }
  495. .autocomplete-selected {
  496. background: #F0F0F0;
  497. }
  498. .autocomplete-suggestions strong {
  499. font-weight: normal;
  500. color: #3399FF;
  501. }
  502. .process_info {
  503. table-layout: fixed;
  504. width: 100%;
  505. }
  506. .process_info_pid {
  507. width: 70px;
  508. }
  509. .process_info_data {
  510. overflow: auto;
  511. }
  512. .setting_description > * {
  513. margin: 1em 0 0 0;
  514. }
  515. .settings_sidebar {
  516. min-height: 385px;
  517. }
  518. #settings_sections {
  519. position: absolute;
  520. }
  521. #settings_sections.fixed {
  522. position: fixed;
  523. top: 0px;
  524. }
  525. #settings_sections #submit, #settings_sections #settings_search {
  526. box-sizing: border-box;
  527. -moz-box-sizing: border-box;
  528. width: 100%;
  529. }
  530. #settings_sections h2 {
  531. text-align: left;
  532. }
  533. .forum_post .colhead_dark div {
  534. display: flex;
  535. }
  536. .forum_post .colhead_dark div > *{
  537. margin-left: 2px;
  538. margin-right: 2px;
  539. }
  540. .donor_icon {
  541. margin-left: 2px;
  542. margin-right: 2px;
  543. max-width: 16px;
  544. max-height: 16px;
  545. position: relative;
  546. }
  547. .badge_icon {
  548. margin: 0px 2px;
  549. position: relative;
  550. }
  551. .donation_info {
  552. padding: 10px 10px 10px 20px;
  553. margin-left: 10px;
  554. margin-right: 10px;
  555. margin-bottom: 20px;
  556. }
  557. .donation_info_title {
  558. display: block;
  559. font-size: 1.75em;
  560. -webkit-margin-before: 1em;
  561. -webkit-margin-after: 1em;
  562. -webkit-margin-start: 0px;
  563. -webkit-margin-end: 0px;
  564. font-weight: bold;
  565. margin: 10px 0;
  566. }
  567. .number_column {
  568. text-align: right;
  569. }
  570. .wide_input_text {
  571. width: 95%;
  572. }
  573. .top_artist_list li {
  574. margin-left: 25px;
  575. margin-bottom: 5px;
  576. list-style-type: decimal;
  577. font-size: 150%;
  578. }
  579. .permission_subcontainer {
  580. margin-bottom: 10px;
  581. }
  582. .vote_tag_up, .vote_artist_up, .vote_album_up {
  583. font-weight: bolder;
  584. }
  585. .vote_tag_down, .vote_artist_down, .vote_album_down {
  586. font-weight: bolder;
  587. }
  588. .noborder {
  589. border: none;
  590. }
  591. .two_columns {
  592. float: left;
  593. width: 50%;
  594. box-sizing: border-box;
  595. -moz-box-sizing: border-box;
  596. -webkit-box-sizing: border-box;
  597. }
  598. .field_div {
  599. margin-bottom: 10px;
  600. }
  601. .field_div:last-of-type {
  602. margin-bottom: 0;
  603. }
  604. .field_div .label,
  605. .submit_div .label {
  606. float: left;
  607. padding: 0 5px;
  608. text-align: right;
  609. width: 150px;
  610. }
  611. .field_div .input,
  612. .submit_div .input {
  613. padding: 0 5px;
  614. }
  615. .small_label {
  616. text-align: right;
  617. width: auto;
  618. }
  619. .scale_image {
  620. max-width: 500px;
  621. }
  622. .display_block {
  623. display: block;
  624. }
  625. .sidebar img {
  626. max-width: 100%;
  627. width: initial;
  628. }
  629. .forum_post td img {
  630. max-width: 100%;
  631. }
  632. .avatar > a > img {
  633. display: block;
  634. }
  635. #collage #reply_box img,
  636. #forums #reply_box img {
  637. max-width: 650px;
  638. }
  639. #artistcomments #reply_box img,
  640. #request_comments #reply_box img,
  641. #torrent_comments #reply_box img {
  642. max-width: 400px;
  643. }
  644. #artistcomments img,
  645. #request_comments img,
  646. #torrent_comments img {
  647. max-width: 417px;
  648. }
  649. .blog_post img {
  650. max-width: 825px;
  651. }
  652. .torrent_description blockquote img.scale_image {
  653. max-width: 100%;
  654. }
  655. #artist_information img,
  656. .box_request_desc img,
  657. .news_post img,
  658. .torrent_description img,
  659. .wiki_article img {
  660. max-width: 570px;
  661. }
  662. .torrentdetails img {
  663. max-width: 100%;
  664. }
  665. #inbox #preview img,
  666. #staffpm #reply_box img,
  667. #wiki .create_form img,
  668. #wiki .edit_form img {
  669. max-width: 805px;
  670. }
  671. #inbox .body img {
  672. max-width: 830px;
  673. }
  674. #inbox .search_form input[type="search"] {
  675. width: 100%;
  676. margin: 10px 0px 0px;
  677. }
  678. #inbox .manage_form input[type="submit"] {
  679. margin: 10px 7px 10px 0px;
  680. }
  681. #userform img {
  682. max-width: 490px;
  683. }
  684. video, .profileinfo img {
  685. max-width: 100%;
  686. }
  687. #reportsv2 .manage_form img {
  688. max-width: 616px;
  689. }
  690. .friends_table textarea {
  691. max-width: 540px;
  692. }
  693. div.torrent_artists {
  694. display: inline-block;
  695. }
  696. .torrent_screenshots > img {
  697. width: 50%;
  698. border: 1px solid transparent;
  699. box-sizing: border-box;
  700. vertical-align: top;
  701. }
  702. /* Ratio Colors */
  703. .r00 { color: #FF0000; }
  704. .r01,.r02 { color: #FF1300; }
  705. .r03 { color: #FF2600; }
  706. .r04 { color: #FF4C00; }
  707. .r05,.r06 { color: #FF5E00; }
  708. .r07 { color: #FF7100; }
  709. .r08 { color: #FF9700; }
  710. .r09 { color: #FFAA00; }
  711. .r10 { color: #74C42E; }
  712. .r20,.r50,.r99 { color: #418B00; }
  713. #coverCont.left {
  714. left: 20px;
  715. right: initial;
  716. }
  717. #coverCont {
  718. position: fixed;
  719. right: 20px;
  720. left: initial;
  721. top: 20px;
  722. max-width: 30%;
  723. background-size: contain;
  724. background-repeat: no-repeat;
  725. z-index: 9999;
  726. }
  727. #coverCont img {
  728. max-width: 100%;
  729. }
  730. #covers img {
  731. display: block;
  732. margin-left: auto;
  733. margin-right: auto;
  734. }
  735. .search_warning {
  736. position: absolute;
  737. }
  738. #admincommentlinks {
  739. max-height: 300px;
  740. overflow-y: scroll;
  741. }
  742. .poll_your_answer {
  743. font-weight: bold;
  744. }
  745. .net_box {
  746. display: inline-block;
  747. width: calc(20% - 4px);
  748. margin: 2px;
  749. vertical-align: top;
  750. font-size: 10pt;
  751. }
  752. .net_box > .box {
  753. min-height: 60px;
  754. display: flex;
  755. align-items: center;
  756. }
  757. .net_box > .box > span {
  758. width: 100%;
  759. }
  760. .mediainfo td {
  761. vertical-align: top;
  762. }
  763. .flex {
  764. display: flex;
  765. }
  766. .flex > .grow {
  767. flex-grow: 1
  768. }
  769. .flex > .shrink {
  770. flex-shrink: 1
  771. }
  772. input[type="search"] {
  773. -webkit-appearance: textfield;
  774. }
  775. #lightbox > img {
  776. max-width: 100%;
  777. }
  778. .filter_torrents #ft_basic > .clickable, .filter_torrents #ft_advanced > .clickable {
  779. font-weight: 100;
  780. }
  781. .sidebar .box_tags > ul.stats > li {
  782. display: flex;
  783. justify-content: space-between;
  784. }
  785. .sidebar .box_tags > ul.stats > li > a {
  786. word-break: break-all;
  787. }
  788. .edit_tags_votes {
  789. display: flex;
  790. }
  791. #publickey {
  792. width: initial;
  793. font-family: monospace;
  794. }
  795. .hidden {
  796. display: none;
  797. }