API tools faq
paste
Advertisement
TiaMaster

CharsheetCSS

TiaMaster
Feb 5th, 2020
43
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.37 KB | None | 0 0
raw download clone embed print report
  1. /**
  2. * CONTENTS [custom]
  3. *
  4. * # TABS
  5. *
  6. * # GENERAL STYLING
  7. *
  8. * # ROLL TEMPLATES
  9. */
  10. /*------------------------------------*\
  11.  
  12.  
  13. #TABS
  14. \*------------------------------------*/
  15. div.sheet-tab-content { display: none; }
  16.  
  17. input.sheet-tab1:checked ~ div.sheet-tab1,
  18. input.sheet-tab2:checked ~ div.sheet-tab2,
  19. input.sheet-tab3:checked ~ div.sheet-tab3,
  20. input.sheet-tab4:checked ~ div.sheet-tab4,
  21. input.sheet-tab5:checked ~ div.sheet-tab5,
  22. input.sheet-tab6:checked ~ div.sheet-tab6
  23. {
  24. display: block;
  25. }
  26.  
  27. input.sheet-tab
  28. {
  29. width: 150px;
  30. height: 28px;
  31. position: relative;
  32. top: 5px;
  33. left: 6px;
  34. margin: -1.5px;
  35. cursor: pointer;
  36. z-index: 1;
  37. opacity: 0;
  38. }
  39.  
  40. input.sheet-tab + span::before
  41. {
  42. content: attr(title);
  43.  
  44.  
  45. border: solid 1px #a8a8a8;
  46. border-bottom-color: black;
  47. text-align: center;
  48. display: inline-block;
  49.  
  50. background: #fff;
  51. background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
  52. background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
  53. background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
  54. background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
  55. background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
  56.  
  57. position: absolute;
  58. width: 150px;
  59. height: 25px;
  60. font-size: 18px;
  61. }
  62.  
  63. input.sheet-tab:checked + span::before
  64. {
  65. background: #dcdcdc;
  66. background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
  67. background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
  68. background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
  69. background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
  70. background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
  71. border-bottom-color: #fff;
  72. position: absolute;
  73. }
  74.  
  75. input.sheet-tab:not(:first-child) + span::before
  76. {
  77. border-left: none;
  78. }
  79.  
  80. input.sheet-tab1 + span::before { left: 185px; }
  81. input.sheet-tab2 + span::before { left: 335px; }
  82. input.sheet-tab3 + span::before { left: 485px; }
  83. input.sheet-tab4 + span::before { left: 635px; }
  84.  
  85. input.sheet-settings-checkbox {
  86. width: 15px;
  87. height: 15px;
  88. position: relative;
  89. top: 0px;
  90. right: 4px;
  91.  
  92. cursor: pointer;
  93. z-index: 1;
  94. float: right;
  95. }
  96.  
  97. input.sheet-settings-checkbox::before {
  98. content: "y";
  99. font-family: pictos;
  100.  
  101. text-align: center;
  102. display: inline-block;
  103.  
  104. background: #fff;
  105.  
  106. width: 17px;
  107. height: 17px;
  108. font-size: 18px;
  109. color: darkgrey;
  110. }
  111.  
  112. input.sheet-settings-checkbox:checked::before{
  113. color: black;
  114. }
  115.  
  116. div.sheet-settings {
  117. display: none;
  118. }
  119.  
  120. input.sheet-settings-checkbox:checked + div.sheet-settings{
  121. display: inline-block;
  122. float: right;
  123. position: relative;
  124. top: 0px;
  125. right: 4px;
  126. height: 20px;
  127.  
  128. background-color: lightgrey;
  129. border: solid 1px #a8a8a8;
  130. border-bottom-color: black;
  131. text-align: center;
  132. display: inline-block;
  133.  
  134. padding: 2px;
  135. }
  136.  
  137. button.sheet-hidden {
  138. display:none;
  139. }
  140.  
  141. /*
  142. input.sheet-tab2::before
  143. {
  144. background: #fee;
  145. background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
  146. background: -webkit-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
  147. background: -ms-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
  148. background: -o-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
  149. background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
  150. }
  151. input.sheet-tab2:checked::before
  152. {
  153. background: #dcdcdc;
  154. background: -moz-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
  155. background: -webkit-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
  156. background: -ms-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
  157. background: -o-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
  158. background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
  159. border-bottom-color: #fcecec;
  160. }
  161. */
  162. div.sheet-tab-content
  163. {
  164. border: 1px solid #a8a8a8;
  165. border-top-color: #000;
  166. margin: 2px 0 0 5px;
  167. padding: 5px;
  168. }
  169. /*
  170. div.sheet-tab2
  171. {
  172. background-color: #fcecec;
  173. }
  174. */
  175. @font-face {
  176. font-family: 'Play';
  177. font-style: normal;
  178. font-weight: 700;
  179. src: local('Play-Bold'), url(http://themes.googleusercontent.com/static/fonts/play/v4/ZzUearZLklGfoL18Ti0GaQ.woff) format('woff');
  180. }
  181.  
  182. .charsheet {
  183. background-image: url("");
  184. background-color: white;
  185. }
  186.  
  187. .charsheet h3 {
  188. margin-bottom:0;
  189. }
  190.  
  191. .charsheet .sheet-small {
  192. font-size: 10px;
  193. line-height:9px;
  194. }
  195.  
  196. .charsheet label {
  197. display: inline-block;
  198. text-align: right;
  199. font-size:14px;
  200. width: auto;
  201. }
  202.  
  203. .charsheet label.sheet-long {
  204. width: 80px;
  205. }
  206.  
  207. .charsheet label.sheet-short {
  208. width: 40px;
  209. }
  210.  
  211. .charsheet input {
  212. border-left: 1px solid black;
  213. border-right: 1px solid black;
  214. border-bottom: 1px solid black;
  215. display: inline-block;
  216. }
  217.  
  218. .charsheet input.sheet-header {
  219. width: 160px;
  220. }
  221.  
  222. .charsheet input.sheet-skills{
  223. width:42px !important;
  224. }
  225.  
  226. .charsheet select {
  227. display: inline-block;
  228.  
  229. }
  230.  
  231. .charsheet select.sheet-modtype {
  232. width: 65px;
  233. }
  234.  
  235. .charsheet div.sheet-textHead {
  236. background-color: black;
  237. color: white;
  238. font-size: 15px;
  239. font-weight: bold;
  240. text-align:center;
  241. -webkit-border-radius: 5px;
  242. -moz-border-radius: 5px; /*[top-left] [top-right] [bottom-right] [bottom-left] */
  243. border-radius: 5px;
  244. width:100%;
  245. padding:1px 2px;
  246. border-spacing: 0px 4px;
  247. }
  248.  
  249. .charsheet div.sheet-textHeadsm {
  250. background-color: black;
  251. color: white;
  252. font-size: 12px;
  253. font-weight: bold;
  254. text-align:center;
  255. -webkit-border-radius: 5px;
  256. -moz-border-radius: 5px; /*[top-left] [top-right] [bottom-right] [bottom-left] */
  257. border-radius: 5px;
  258. width:100%;
  259. padding:1px 2px;
  260. border-spacing: 0px 4px;
  261. }
  262. .charsheet div.sheet-record {
  263. color: black;
  264. font-size: 14px;
  265. font-weight: bold;
  266. text-align:center;
  267. font-family: 'play';
  268. width:150px;
  269. display:inline-block;
  270. }
  271. .charsheet table{
  272. text-align: center;
  273. width: 100%;
  274. }
  275. .charsheet table td.sheet-col1, .charsheet table td.sheet-skillsCol1,.charsheet table td.sheet-skillsCrewCol1 {
  276. font-size: 13px;
  277. font-weight: bold;
  278. text-align: left;
  279. margin-left: 5px;
  280. text-indent: -5px;
  281. padding-left: 10px
  282.  
  283. }
  284. .charsheet table td.sheet-col1{
  285. background-color: #C4C4C4;
  286. -webkit-border-radius: 5px;
  287. -moz-border-radius: 5px; /*[top-left] [top-right] [bottom-right] [bottom-left] */
  288. border-radius: 5px;
  289. }
  290. .charsheet table td.sheet-skillsCol1{
  291. width: 150px;
  292. }
  293.  
  294. .charsheet table th {
  295. font-size: 13px;
  296. font-weight: bold;
  297. text-align: Center;
  298. }
  299. .charsheet table th.sheet-lheader{
  300. font-size: 13px;
  301. font-weight: bold;
  302. text-align: left;
  303. }
  304.  
  305. .charsheet table.sheet-spacing {
  306. border-spacing: 1px 1px;
  307. border-collapse: separate;
  308. padding: 0px 1px;
  309. }
  310.  
  311. .charsheet textarea {
  312. width: 98%;
  313. border-left: 1px solid black;
  314. border-right: 1px solid black;
  315. border-bottom: 1px solid black;
  316. margin-bottom:0;
  317. }
  318. .charsheet textarea.sheet-atkNotes {
  319. font-size: 12px;
  320. height: 30px;
  321. }
  322. .charsheet textarea.sheet-ActionNotes {
  323. font-size: 12px;
  324. height:60px;
  325. }
  326. .charsheet div.sheet-clear { clear:both; }
  327.  
  328. .charsheet button[type=roll] {
  329. padding: 5px 10px 5px !important;
  330. font-size: 20px !important;
  331. background-color: #C4C4C4;
  332. font-weight: bold;
  333. text-shadow: 1px 1px #D0D0D0;
  334. color: #000000;
  335. border-radius: 100px;
  336. -moz-border-radius: 100px;
  337. -webkit-border-radius: 100px;
  338. border: 1px solid #D0D0D0;
  339. cursor: pointer;
  340. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  341. -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  342. -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  343. }
  344.  
  345. .charsheet select{
  346. margin:0;
  347. }
  348.  
  349. .sheet-rolltemplate-skill table {
  350. width: 189px;
  351. padding: 2px;
  352. border: 1px solid;
  353. background-color: #ffffff;
  354. }
  355.  
  356. .sheet-rolltemplate-skill th {
  357. color: rgb(100, 100, 100);
  358. padding-left: 5px;
  359. line-height: 1.3em;
  360. font-size: 1.2em;
  361. text-align: left;
  362. font-family: "Times New Roman", Times, serif;
  363. font-variant: small-caps;
  364. }
  365.  
  366. .sheet-rolltemplate-skill .sheet-subheader {
  367. color: #000;
  368. font-size: 1em;
  369. text-align: left;
  370. }
  371.  
  372. .sheet-rolltemplate-skill .sheet-arrow-right {
  373. border-top: 3px solid transparent;
  374. border-bottom: 3px solid transparent;
  375. border-left: 180px solid rgb(90, 90, 90);
  376. }
  377.  
  378. .sheet-rolltemplate-skill .sheet-tcat {
  379. font-weight: bold;
  380. }
  381.  
  382. .sheet-rolltemplate-skill td {
  383. padding-left: 5px;
  384. }
  385.  
  386. .sheet-rolltemplate-skill .inlinerollresult {
  387. background-color: #ffffff;
  388. border: none;
  389. }
  390.  
  391. .sheet-rolltemplate-skill .inlinerollresult.fullcrit {
  392. color: #3FB315;
  393. border: none;
  394. }
  395.  
  396. .sheet-rolltemplate-skill .inlinerollresult.fullfail {
  397. color: #B31515;
  398. border: none;
  399. }
  400.  
  401. .sheet-rolltemplate-skill .inlinerollresult.importantroll {
  402. color: #4A57ED;
  403. border: none;
  404. }
  405.  
  406. .sheet-rolltemplate-possibility table {
  407. width: 189px;
  408. padding: 2px;
  409. border: 1px solid;
  410. background-color: #ffffff;
  411. }
  412.  
  413. .sheet-rolltemplate-possibility th {
  414. color: rgb(100, 100, 100);
  415. padding-left: 5px;
  416. line-height: 1.3em;
  417. font-size: 1.2em;
  418. text-align: left;
  419. font-family: "Times New Roman", Times, serif;
  420. font-variant: small-caps;
  421. }
  422.  
  423. .sheet-rolltemplate-possibility .sheet-subheader {
  424. color: #000;
  425. font-size: 1em;
  426. text-align: left;
  427. }
  428.  
  429. .sheet-rolltemplate-possibility .sheet-arrow-right {
  430. border-top: 3px solid transparent;
  431. border-bottom: 3px solid transparent;
  432. border-left: 180px solid rgb(90, 90, 90);
  433. }
  434.  
  435. .sheet-rolltemplate-possibility .sheet-tcat {
  436. font-weight: bold;
  437. }
  438.  
  439. .sheet-rolltemplate-possibility td {
  440. padding-left: 5px;
  441. }
  442.  
  443. .sheet-rolltemplate-possibility .inlinerollresult {
  444. background-color: #ffffff;
  445. border: none;
  446. }
  447.  
  448. .sheet-rolltemplate-possibility .inlinerollresult.fullcrit {
  449. color: #3FB315;
  450. border: none;
  451. }
  452.  
  453. .sheet-rolltemplate-possibility .inlinerollresult.fullfail {
  454. color: #B31515;
  455. border: none;
  456. }
  457.  
  458. .sheet-rolltemplate-possibility .inlinerollresult.importantroll {
  459. color: #4A57ED;
  460. border: none;
  461. }
  462.  
  463. .sheet-rolltemplate-defensebonus table {
  464. width: 189px;
  465. padding: 2px;
  466. border: 1px solid;
  467. background-color: #ffffff;
  468. }
  469.  
  470. .sheet-rolltemplate-defensebonus th {
  471. color: rgb(100, 100, 100);
  472. padding-left: 5px;
  473. line-height: 1.3em;
  474. font-size: 1.2em;
  475. text-align: left;
  476. font-family: "Times New Roman", Times, serif;
  477. font-variant: small-caps;
  478. }
  479.  
  480. .sheet-rolltemplate-defensebonus .sheet-subheader {
  481. color: #000;
  482. font-size: 1em;
  483. text-align: left;
  484. }
  485.  
  486. .sheet-rolltemplate-defensebonus .sheet-arrow-right {
  487. border-top: 3px solid transparent;
  488. border-bottom: 3px solid transparent;
  489. border-left: 180px solid rgb(90, 90, 90);
  490. }
  491.  
  492. .sheet-rolltemplate-defensebonus .sheet-tcat {
  493. font-weight: bold;
  494. }
  495.  
  496. .sheet-rolltemplate-defensebonus td {
  497. padding-left: 5px;
  498. }
  499.  
  500. .sheet-rolltemplate-defensebonus .inlinerollresult {
  501. background-color: #ffffff;
  502. border: none;
  503. }
  504.  
  505. .sheet-rolltemplate-defensebonus .inlinerollresult.fullcrit {
  506. color: #3FB315;
  507. border: none;
  508. }
  509.  
  510. .sheet-rolltemplate-defensebonus .inlinerollresult.fullfail {
  511. color: #B31515;
  512. border: none;
  513. }
  514.  
  515. .sheet-rolltemplate-defensebonus .inlinerollresult.importantroll {
  516. color: #4A57ED;
  517. border: none;
  518. }
  519.  
  520. .sheet-rolltemplate-attack table {
  521. width: 189px;
  522. padding: 2px;
  523. border: 1px solid;
  524. background-color: #ffffff;
  525. }
  526.  
  527. .sheet-rolltemplate-attack th {
  528. color: rgb(100, 100, 100);
  529. padding-left: 5px;
  530. line-height: 1.3em;
  531. font-size: 1.2em;
  532. text-align: left;
  533. font-family: "Times New Roman", Times, serif;
  534. font-variant: small-caps;
  535. }
  536.  
  537. .sheet-rolltemplate-attack .sheet-subheader {
  538. color: #000;
  539. font-size: 1em;
  540. text-align: left;
  541. }
  542.  
  543. .sheet-rolltemplate-attack .sheet-arrow-right {
  544. border-top: 3px solid transparent;
  545. border-bottom: 3px solid transparent;
  546. border-left: 180px solid rgb(90, 90, 90);
  547. }
  548.  
  549. .sheet-rolltemplate-attack .sheet-tcat {
  550. font-weight: bold;
  551. }
  552.  
  553. .sheet-rolltemplate-attack td {
  554. padding-left: 5px;
  555. }
  556.  
  557. .sheet-rolltemplate-attack .inlinerollresult {
  558. background-color: #ffffff;
  559. border: none;
  560. }
  561.  
  562. .sheet-rolltemplate-attack .inlinerollresult.fullcrit {
  563. color: #3FB315;
  564. border: none;
  565. }
  566.  
  567. .sheet-rolltemplate-attack .inlinerollresult.fullfail {
  568. color: #B31515;
  569. border: none;
  570. }
  571.  
  572. .sheet-rolltemplate-attack .inlinerollresult.importantroll {
  573. color: #4A57ED;
  574. border: none;
  575. }
  576.  
  577. .sheet-rolltemplate-damage table {
  578. width: 189px;
  579. padding: 2px;
  580. border: 1px solid;
  581. background-color: #ffffff;
  582. }
  583.  
  584. .sheet-rolltemplate-damage th {
  585. color: rgb(100, 100, 100);
  586. padding-left: 5px;
  587. line-height: 1.3em;
  588. font-size: 1.2em;
  589. text-align: left;
  590. font-family: "Times New Roman", Times, serif;
  591. font-variant: small-caps;
  592. }
  593.  
  594. .sheet-rolltemplate-damage .sheet-subheader {
  595. color: #000;
  596. font-size: 1em;
  597. text-align: left;
  598. }
  599.  
  600. .sheet-rolltemplate-damage .sheet-arrow-right {
  601. border-top: 3px solid transparent;
  602. border-bottom: 3px solid transparent;
  603. border-left: 180px solid rgb(90, 90, 90);
  604. }
  605.  
  606. .sheet-rolltemplate-damage .sheet-tcat {
  607. font-weight: bold;
  608. }
  609.  
  610. .sheet-rolltemplate-damage td {
  611. padding-left: 5px;
  612. }
  613.  
  614. .sheet-rolltemplate-damage .inlinerollresult {
  615. background-color: #ffffff;
  616. border: none;
  617. }
  618.  
  619. .sheet-rolltemplate-damage .inlinerollresult.fullcrit {
  620. color: #3FB315;
  621. border: none;
  622. }
  623.  
  624. .sheet-rolltemplate-damage .inlinerollresult.fullfail {
  625. color: #B31515;
  626. border: none;
  627. }
  628.  
  629. .sheet-rolltemplate-damage .inlinerollresult.importantroll {
  630. color: #4A57ED;
  631. border: none;
  632. }
  633.  
  634. .sheet-rolltemplate-coupdegras table {
  635. width: 189px;
  636. padding: 2px;
  637. border: 1px solid;
  638. background-color: #ffffff;
  639. }
  640.  
  641. .sheet-rolltemplate-coupdegras th {
  642. color: rgb(100, 100, 100);
  643. padding-left: 5px;
  644. line-height: 1.3em;
  645. font-size: 1.2em;
  646. text-align: left;
  647. font-family: "Times New Roman", Times, serif;
  648. font-variant: small-caps;
  649. }
  650.  
  651. .sheet-rolltemplate-coupdegras .sheet-subheader {
  652. color: #000;
  653. font-size: 1em;
  654. text-align: left;
  655. }
  656.  
  657. .sheet-rolltemplate-coupdegras .sheet-arrow-right {
  658. border-top: 3px solid transparent;
  659. border-bottom: 3px solid transparent;
  660. border-left: 180px solid rgb(90, 90, 90);
  661. }
  662.  
  663. .sheet-rolltemplate-coupdegras .sheet-tcat {
  664. font-weight: bold;
  665. }
  666.  
  667. .sheet-rolltemplate-coupdegras td {
  668. padding-left: 5px;
  669. }
  670.  
  671. .sheet-rolltemplate-coupdegras .inlinerollresult {
  672. background-color: #ffffff;
  673. border: none;
  674. }
  675.  
  676. .sheet-rolltemplate-coupdegras .inlinerollresult.fullcrit {
  677. color: #3FB315;
  678. border: none;
  679. }
  680.  
  681. .sheet-rolltemplate-coupdegras .inlinerollresult.fullfail {
  682. color: #B31515;
  683. border: none;
  684. }
  685.  
  686. .sheet-rolltemplate-coupdegras .inlinerollresult.importantroll {
  687. color: #4A57ED;
  688. border: none;
  689. }
  690.  
  691. .sheet-rolltemplate-power table {
  692. width: 189px;
  693. padding: 2px;
  694. border: 1px solid;
  695. background-color: #ffffff;
  696. }
  697.  
  698. .sheet-rolltemplate-power th {
  699. color: rgb(100, 100, 100);
  700. padding-left: 5px;
  701. line-height: 1.3em;
  702. font-size: 1.2em;
  703. text-align: left;
  704. font-family: "Times New Roman", Times, serif;
  705. font-variant: small-caps;
  706. }
  707.  
  708. .sheet-rolltemplate-power .sheet-subheader {
  709. color: #000;
  710. font-size: 1em;
  711. text-align: left;
  712. }
  713.  
  714. .sheet-rolltemplate-power .sheet-arrow-right {
  715. border-top: 3px solid transparent;
  716. border-bottom: 3px solid transparent;
  717. border-left: 180px solid rgb(90, 90, 90);
  718. }
  719.  
  720. .sheet-rolltemplate-power .sheet-tcat {
  721. font-weight: bold;
  722. }
  723.  
  724. .sheet-rolltemplate-power td {
  725. padding-left: 5px;
  726. }
  727.  
  728. .sheet-rolltemplate-power .inlinerollresult {
  729. background-color: #ffffff;
  730. border: none;
  731. }
  732.  
  733. .sheet-rolltemplate-power .inlinerollresult.fullcrit {
  734. color: #3FB315;
  735. border: none;
  736. }
  737.  
  738. .sheet-rolltemplate-power .inlinerollresult.fullfail {
  739. color: #B31515;
  740. border: none;
  741. }
  742.  
  743. .sheet-rolltemplate-power .inlinerollresult.importantroll {
  744. color: #4A57ED;
  745. border: none;
  746. }
  747.  
  748. .sheet-rolltemplate-power .sheet-arrow-right {
  749. border-top: 3px solid transparent;
  750. border-bottom: 3px solid transparent;
  751. border-left: 180px solid rgb(126, 45, 64);
  752. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!