Frontend elements to SugoiMusic, including CSS and public/private headers.
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

global.css 14 KiB

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