Frontend elements to SugoiMusic, including CSS and public/private headers.
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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