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.
 
 
 

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