Frontend elements to SugoiMusic, including CSS and public/private headers.
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

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