API tools faq
paste
Arioch1973

WFRP V1.55d CSS

Arioch1973
Aug 29th, 2018
391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.84 KB | None | 0 0
raw download clone embed print report
  1. /* WARHAMMER FANTASY ROLEPLAY 4th EDITION CHARACTER SHEET CSS */
  2. /* Version 1.55d */
  3.  
  4. /* REPLACE CHECKBOXES */
  5. input[type="checkbox"] {
  6. opacity: 0;
  7. width: 16px;
  8. height: 16px;
  9. position: relative;
  10. left: 16px;
  11. margin: -10px;
  12. z-index: 1;
  13. }
  14.  
  15. input[type="checkbox"] + span::before {
  16. margin-right: 1px;
  17. border: solid 1px #a8a8a8;
  18. line-height: 14px;
  19. text-align: center;
  20. display: inline-block;
  21. vertical-align: middle;
  22.  
  23. -moz-box-shadow: 0 0 2px #ccc;
  24. -webkit-box-shadow: 0 0 2px #ccc;
  25. box-shadow: 0 0 2px #ccc;
  26.  
  27. }
  28.  
  29. input[type="checkbox"] + span::before {
  30. position:relative;
  31. content: "";
  32. background-image:url(http://i.imgur.com/c8Cx2mg.png);
  33. background-size: 100%;
  34. background-repeat: no-repeat;
  35. background-position: center;
  36. opacity: 1;
  37. width: 20px;
  38. height: 20px;
  39. font-size: 10px;
  40. border:none;
  41.  
  42. -moz-border-radius: 3px;
  43. -webkit-border-radius: 3px;
  44. border-radius: 3px;
  45. }
  46. input[type="checkbox"]:checked + span::before {
  47. content: "";
  48.  
  49. border:none;
  50. background-image:url(http://i.imgur.com/MOtYDyu.png);
  51. background-size: 100%;
  52. background-repeat: no-repeat;
  53. background-position: center;
  54. -moz-box-shadow: 0 0 2px transparent;
  55. -webkit-box-shadow: 0 0 2px transparent;
  56. box-shadow: 0 0 2px transparent;
  57. }
  58. input[type="checkbox"]:checked ~ input[type="checkbox"] + span::before {
  59. background: #f6f6f6;
  60. background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
  61. background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
  62. background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
  63. background: -o-radial-gradient(#f6f6f6, #dfdfdf);
  64. background: radial-gradient(#f6f6f6, #dfdfdf);
  65. }
  66.  
  67. /* CHARACTER SHEET */
  68. .charsheet{
  69. background-image:url(https://i.imgur.com/sIF6UDb.jpg);
  70. background-size:100%;
  71. font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  72. font-size:14px;
  73. color:black;
  74. text-align:center;
  75. }
  76.  
  77. .charsheet h1{
  78. display:block;
  79. font-size:2em;
  80. margin-top:0.67em;
  81. margin-bottom:0.67em;
  82. margin-left:0;
  83. margin-right:0;
  84. font-weight:bold
  85. }
  86.  
  87. /* Mouse Cursors */
  88. /* Normal Cursor */
  89. .charsheet
  90. {
  91. cursor: url(http://i.imgur.com/FaqICyL.png), auto;
  92. }
  93.  
  94. /* Normal Cursor */
  95. .charsheet .sheet-wrapper button[type="roll"]:hover, label:hover, .charsheet .sheet-wrapper .sheet-btn:hover,.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn,
  96. {
  97. cursor: url(http://i.imgur.com/FaqICyL.png), auto;
  98. }
  99.  
  100. /* Write Cursor */
  101. .charsheet .sheet-wrapper input[type=text], input[type=number], textarea
  102. {
  103. cursor: url(http://i.imgur.com/pY2uaXd.png), auto;
  104. }
  105.  
  106. /* Select Cursor */
  107. .charsheet .sheet-wrapper select:hover, button:hover, input[type=checkbox]:hover, sheet-tab:hover
  108. {
  109.  
  110. cursor: url(http://i.imgur.com/OYpiryU.png) 10 10, auto;
  111. }
  112.  
  113. /* Disabled Cursor */
  114. .charsheet .sheet-wrapper select:disabled, button:disabled, input:disabled
  115. {
  116.  
  117. cursor: url(http://i.imgur.com/B3IzNW1.png), auto;
  118. }
  119.  
  120. .charsheet .sheet-wrapper .sheet-table td:first-child{
  121. width:70%;
  122. height:24px;
  123. border-bottom:1px solid black;
  124. border-bottom-style:dotted;
  125. }
  126. .charsheet .sheet-wrapper .sheet-table td:nth-child(n+2){
  127. width:24px;
  128. height:24px;
  129. border-bottom:1px solid black;
  130. border-bottom-style:dotted;
  131. text-align:center
  132. }
  133.  
  134. .charsheet .sheet-wrapper hr{
  135. border:1px #545454;
  136. }
  137.  
  138. .charsheet .sheet-wrapper div,.charsheet .sheet-wrapper span,.charsheet .sheet-wrapper label,.charsheet .sheet-wrapper h1,.charsheet .sheet-wrapper h2,.charsheet .sheet-wrapper h3,.charsheet .sheet-wrapper h4,.charsheet .sheet-wrapper h5,.charsheet .sheet-wrapper h6,.charsheet .sheet-wrapper p,.charsheet .sheet-wrapper table,.charsheet .sheet-wrapper caption,.charsheet .sheet-wrapper tbody,.charsheet .sheet-wrapper tfoot,.charsheet .sheet-wrapper thead,.charsheet .sheet-wrapper tr,.charsheet .sheet-wrapper th,.charsheet .sheet-wrapper td{
  139. margin:0;
  140. padding:0;
  141. border:0;
  142. font-size:100%;
  143. font:inherit;
  144. color:#000000;
  145. vertical-align:baseline;
  146. box-sizing:border-box;
  147. -moz-box-sizing:border-box;
  148. -webkit-box-sizing:border-box
  149. }
  150. .charsheet .sheet-wrapper table{
  151. border-collapse:collapse;
  152. border-spacing:0
  153. }
  154.  
  155. .charsheet .sheet-wrapper input::-webkit-outer-spin-button,.charsheet .sheet-wrapper input::-webkit-inner-spin-button{
  156. -webkit-appearance:none;
  157. background-image:transparent;
  158. margin:0
  159. }
  160. .charsheet .sheet-wrapper input[type="number"]{
  161. -moz-appearance:textfield
  162. }
  163. .charsheet .sheet-wrapper button[type="roll"]:before{
  164. content:"" !important;
  165. display:none
  166. }
  167. .charsheet .sheet-wrapper button[type="roll"],.charsheet .sheet-wrapper .sheet-btn{
  168. width:100%;
  169. height:24px;
  170. vertical-align:middle;
  171. padding:0;
  172. display:inline-block;
  173. margin:0;
  174. font-weight:400;
  175. text-align:center;
  176. vertical-align:middle;
  177. cursor:pointer;
  178. background-image:none;
  179. background-color:transparent;
  180. border:1px solid #ccc;
  181. white-space:nowrap;
  182. border-radius:4px;
  183. border-color:#545454;
  184. -webkit-user-select:none;
  185. -moz-user-select:none;
  186. -ms-user-select:none;
  187. user-select:none;
  188. box-sizing:border-box;
  189. -moz-box-sizing:border-box;
  190. -webkit-box-sizing:border-box
  191. }
  192. .charsheet .sheet-wrapper button[type="roll"]:hover,.charsheet .sheet-wrapper .sheet-btn:hover,.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn{
  193. background-color:#831010;
  194. border-color:#831010;
  195. }
  196.  
  197. /* BUTTONS */
  198. .charsheet .sheet-wrapper button {
  199. font-size:13px;
  200. vertical-align:middle;
  201. text-align:center;
  202. cursor:pointer;
  203. background-image:none;
  204. background:transparent;
  205. box-shadow:none;
  206. transition:none;
  207. border-radius:none;
  208. color:black;
  209. border:1px solid black;
  210. font-weight:700
  211. }
  212.  
  213. .charsheet .sheet-wrapper button:hover {
  214. background-image:url ('https://i.imgur.com/xV3ceZB.png');
  215. background-size:100% 100%;
  216. background-repeat:no-repeat;
  217. border-color:black;
  218. color:white;
  219. }
  220.  
  221. .charsheet .sheet-wrapper button[type="roll"] label,.charsheet .sheet-wrapper button[type="roll"] input{
  222. height:24px;
  223. line-height:24px;
  224. font-size:13px;
  225. vertical-align:middle;
  226. text-align:center;
  227. width:99%;
  228. cursor:pointer;
  229. background-image:none;
  230. background:transparent;
  231. box-shadow:none;
  232. transition:none;
  233. border-radius:none;
  234. color:black;
  235. border:1px;
  236. border-color:black;
  237. font-weight:700
  238. }
  239. .charsheet .sheet-wrapper button[type="roll"]:hover label,.charsheet .sheet-wrapper button[type="roll"]:hover input{
  240. color:white;
  241. border-color:black;
  242. }
  243. .charsheet .sheet-wrapper h3{
  244. color:black;
  245. padding:3px;
  246. margin-bottom:5px;
  247. font-size:18px;
  248. font-weight:bold;
  249. font-family:inherit;
  250. text-transform:uppercase;
  251. text-align:center
  252. }
  253. .charsheet .sheet-wrapper h4{
  254. color:black;
  255. font-weight:bold;
  256. font-family:inherit;
  257. text-transform:uppercase;
  258. text-align:center
  259. }
  260. .charsheet .sheet-wrapper textarea{
  261. display:inline-block;
  262. border:1px solid black;
  263. padding:2px;
  264. height:24px;
  265. width:100%;
  266. font-size:14px;
  267. font-family:inherit;
  268. line-height:16px;
  269. font-weight:normal;
  270. margin:0;
  271. color:black;
  272. background-color:transparent;
  273. vertical-align:middle;
  274. cursor:auto;
  275. letter-spacing:normal;
  276. word-spacing:normal;
  277. text-transform:none;
  278. text-indent:0px;
  279. text-shadow:none;
  280. text-align:start;
  281. -webkit-rtl-ordering:logical;
  282. -webkit-user-select:text;
  283. -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  284. -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  285. box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  286. -webkit-transition:border linear .2s,box-shadow linear .2s;
  287. -moz-transition:border linear .2s,box-shadow linear .2s;
  288. -ms-transition:border linear .2s,box-shadow linear .2s;
  289. -o-transition:border linear .2s,box-shadow linear .2s;
  290. transition:border linear .2s,box-shadow linear .2s;
  291. -webkit-border-radius:3px;
  292. -moz-border-radius:3px;
  293. border-radius:3px;
  294. -webkit-writing-mode:horizontal-tb
  295. }
  296.  
  297. .charsheet .sheet-wrapper input,.charsheet .sheet-wrapper select,.charsheet .sheet-wrapper input[type="number"]{
  298. display:inline-block;
  299. border-bottom:1px dotted grey;
  300. border-top:none;
  301. border-left:none;
  302. border-right:none;
  303. padding:2px;
  304. height:24px;
  305. width:100%;
  306. font-size:14px;
  307. font-family:inherit;
  308. line-height:16px;
  309. font-weight:normal;
  310. margin:0;
  311. color:#000000;
  312. background-color:transparent;
  313. vertical-align:middle;
  314. cursor:auto;
  315. letter-spacing:normal;
  316. word-spacing:normal;
  317. text-transform:none;
  318. text-indent:0px;
  319. text-shadow:none;
  320. text-align:start;
  321. -webkit-rtl-ordering:logical;
  322. -webkit-user-select:text;
  323. -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  324. -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  325. box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  326. -webkit-transition:border linear .2s,box-shadow linear .2s;
  327. -moz-transition:border linear .2s,box-shadow linear .2s;
  328. -ms-transition:border linear .2s,box-shadow linear .2s;
  329. -o-transition:border linear .2s,box-shadow linear .2s;
  330. transition:border linear .2s,box-shadow linear .2s;
  331. -webkit-border-radius:3px;
  332. -moz-border-radius:3px;
  333. border-radius:3px;
  334. -webkit-writing-mode:horizontal-tb
  335. }
  336.  
  337. .charsheet .sheet-wrapper input:not([type='checkbox']){
  338. -webkit-appearance:textfield
  339. }
  340. .charsheet .sheet-wrapper input[type="checkbox"]{
  341. height:13px;
  342. width:13px;
  343. color:#555;
  344. border:1px solid #000000;
  345. -webkit-border-radius:0;
  346. -moz-border-radius:0;
  347. border-radius:0;
  348. -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  349. -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  350. box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
  351. -webkit-transition:border linear .2s,box-shadow linear .2s;
  352. -moz-transition:border linear .2s,box-shadow linear .2s;
  353. -ms-transition:border linear .2s,box-shadow linear .2s;
  354. -o-transition:border linear .2s,box-shadow linear .2s;
  355. transition:border linear .2s,box-shadow linear .2s
  356. }
  357.  
  358. .charsheet .sheet-wrapper input[disabled],.charsheet .sheet-wrapper select[disabled],.charsheet .sheet-wrapper textarea[disabled],.charsheet .sheet-wrapper input[readonly],.charsheet .sheet-wrapper select[readonly],.charsheet .sheet-wrapper textarea[readonly]{
  359. background-color:transparent;
  360. border-color:#000000;
  361. cursor:not-allowed
  362. }
  363. .charsheet .sheet-wrapper textarea{
  364. width:98%;
  365. height:80px;
  366. line-height:16px
  367. }
  368. .charsheet .sheet-wrapper label{
  369. display:inline-block;
  370. width:100%;
  371. font-size:14px;
  372. text-align:left;
  373. font-weight:600;
  374. height:24px;
  375. line-height:24px;
  376. vertical-align:middle
  377. }
  378. .charsheet .sheet-wrapper .sheet-characteristics button[type="roll"] label,.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"] input.sheet-charMain{
  379. height:25px;
  380. line-height:25px;
  381. font-size:16px;
  382. font-weight:bold;
  383. font-family:inherit;
  384. vertical-align:center;
  385. text-align:center;
  386. width:99%;
  387. cursor:pointer;
  388. background:none;
  389. box-shadow:none;
  390. transition:none;
  391. border-radius:none;
  392. border:none
  393. }
  394. .charsheet .sheet-wrapper .sheet-characteristics button[type="roll"]:hover label,.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"]:hover input.sheet-charMain{
  395. color:#fff;
  396. border:none;
  397. background-color:#DAA520;
  398. border-color:#DAA520;
  399. border-radius:5px
  400. }
  401. .charsheet .sheet-wrapper .sheet-characteristics button[type="roll"]{
  402. border:none;
  403. background-color:transparent;
  404. width:100%;
  405. margin:auto;
  406. text-align:center;
  407. font-family:inherit
  408. }
  409. .charsheet .sheet-wrapper .sheet-characteristics select{
  410. display:inline-block;
  411. width:100%;
  412. text-align:center;
  413. background-color:transparent;
  414. border:0;
  415. font-weight:bold
  416. }
  417. .charsheet .sheet-wrapper .sheet-characteristics input.sheet-charMain{
  418. display:block;
  419. border:1px solid gray;
  420. background-color:transparent;
  421. width:70%;
  422. height:65px;
  423. margin:auto;
  424. text-align:center;
  425. font-weight:bolder;
  426. font-family:inherit;
  427. font-size:3em
  428. }
  429.  
  430. .sheet-input-selectbox{
  431. -webkit-appearance:none;
  432. -moz-appearance:none;
  433. appearance:none;
  434. -webkit-transition:all 0.3s ease-out;
  435. -moz-transition:all 0.3s ease-out;
  436. -ms-transition:all 0.3s ease-out;
  437. -o-transition:all 0.3s ease-out;
  438. transition:all 0.3s ease-out;
  439. text-align:center;
  440. text-align-last:center;
  441. border:none;
  442. box-shadow:none
  443. }
  444.  
  445. /* BUTTONS */
  446. input.sheet-arrow[type="checkbox"]{
  447. opacity:0;
  448. width:20px;
  449. height:20px;
  450. position:relative;
  451. top:0px;
  452. left:16px;
  453. cursor:pointer;
  454. z-index:1
  455. }
  456. .charsheet .sheet-wrapper .sheet-item{
  457. display:inline-block;
  458. width:100%;
  459. height:28px;
  460. vertical-align:middle;
  461. margin:0 -2px;
  462. text-align:left;
  463. padding:3px 2px
  464. }
  465. input.sheet-arrow[type="checkbox"] + span::before{
  466. background:url("https://i.imgur.com/dFig3jt.png");
  467. background-size:20px 20px;
  468. background-repeat:no-repeat;
  469. background-position:center;
  470. content:"";
  471. line-height:14px;
  472. text-align:center;
  473. display:inline-block;
  474. vertical-align:middle;
  475. border-radius:10px;
  476. border:1px solid black;
  477. width:20px;
  478. height:20px
  479. }
  480. input.sheet-arrow[type="checkbox"]:checked + span::before{
  481. background:url("https://i.imgur.com/2V2A4qm.png");
  482. background-size:20px 20px;
  483. background-repeat:no-repeat;
  484. background-position:center;
  485. content:"";
  486. width:20px;
  487. height:20px
  488. }
  489. input.sheet-arrow[type="checkbox"]:hover + span::before{
  490. background:url("https://i.imgur.com/Ig3Ww6v.png");
  491. background-size:20px 20px;
  492. background-repeat:no-repeat;
  493. background-position:center;
  494. content:"";
  495. line-height:14px;
  496. text-align:center;
  497. display:inline-block;
  498. vertical-align:middle;
  499. border-radius:10px;
  500. border:1px solid black;
  501. width:20px;
  502. height:20px
  503. }
  504.  
  505. div.sheet-body{
  506. display:none
  507. }
  508. input.sheet-arrow:checked ~ div.sheet-body{
  509. display:block
  510. }
  511. table.sheet-armortable{
  512. background-image:url("https://i.imgur.com/ohregeQ.png");
  513. background-size: 60% 80%;
  514. background-repeat: no-repeat;
  515. background-position: center 70px;
  516. }
  517. td.sheet-armorshield{
  518. background-image:url("https://i.imgur.com/c4KfHLg.png");
  519. background-size: 95% auto;
  520. background-repeat: no-repeat;
  521. background-position: center 37px;
  522. }
  523.  
  524. .sheet-rolltemplate-wfrp4 table {
  525. background-image:url(https://i.imgur.com/sIF6UDb.jpg);
  526. min-width:220px;
  527. max-width:220px;
  528. width: 100%;
  529. border: 1px solid;
  530. color: black;
  531. font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  532. }
  533.  
  534. .sheet-rolltemplate-wfrp4 th {
  535. width: 100%;
  536. border: 1px solid;
  537. border: black;
  538. background-color:#785604;
  539. color: white;
  540. font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  541. }
  542.  
  543. .sheet-rolltemplate-wfrp4 .userscript-tcat {
  544. color: black;
  545. }
  546.  
  547. .sheet-rolltemplate-wfrp4 td {
  548. padding: 1px;
  549. border-bottom: 1px solid black;
  550. }
  551.  
  552. .sheet-rolltemplate-wfrp4 hr {
  553. padding: 1px;
  554. border-bottom: 1px solid black;
  555. }
  556.  
  557. .sheet-rolltemplate-wfrp4 div {
  558. padding: 1px;
  559. border-bottom: 1px solid black;
  560. }
  561.  
  562. .sheet-rolltemplate-wfrp4 .inlinerollresult {
  563. display: inline-block;
  564. min-width: 1.5em;
  565. text-align: center;
  566. border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/
  567. }
  568.  
  569. .sheet-rolltemplate-wfrp4 .inlinerollresult.fullcrit {
  570. border: 2px solid #3FB315;
  571. }
  572.  
  573. .sheet-rolltemplate-wfrp4 .inlinerollresult.fullfail {
  574. border: 2px solid #B31515;
  575. }
  576.  
  577. .sheet-rolltemplate-wfrp4 .inlinerollresult.importantroll {
  578. border: 2px solid #4A57ED;
  579. }
  580.  
  581. /* === TABS from GODBOUND.css === */
  582. .sheet-wrapper div[class^="sheet-section"]{
  583. display: none !important;
  584. }
  585. input.sheet-tab-page-1:checked ~ div.sheet-section-1,
  586. input.sheet-tab-page-2:checked ~ div.sheet-section-2,
  587. input.sheet-tab-page-3:checked ~ div.sheet-section-3,
  588. input.sheet-tab-page-4:checked ~ div.sheet-section-4
  589. {
  590. display: block !important;
  591. }
  592. input[class*="sheet-tab"]{
  593. cursor: pointer;
  594. position: relative;
  595. opacity: 0;
  596. z-index: 9999;
  597. }
  598. span[class*="sheet-tab"]{
  599. display: inline-block;
  600. position: relative;
  601. font-size: 13px;
  602. color: #204060;
  603. cursor: pointer;
  604. font-weight: bold;
  605. text-align: center;
  606. border: 1px solid black;
  607. border-color: #204060 !important;
  608. border-radius: 4px;
  609. }
  610. input[class*="sheet-tab-page"],
  611. span[class*="sheet-tab-page"]{
  612. width: 100px;
  613. height: 18px;
  614. vertical-align: top;
  615. }
  616. span[class*="sheet-tab-page"]{
  617. background-color: transparent;
  618. }
  619. input.sheet-tab-page-1,
  620. span.sheet-tab-page-1{
  621. width: 100px;
  622. }
  623. span.sheet-tab-page-1{
  624. margin-left: -100px;
  625. }
  626. input.sheet-tab-page-2,
  627. span.sheet-tab-page-2{
  628. width: 100px;
  629. }
  630. span.sheet-tab-page-2{
  631. margin-left: -100px;
  632. }
  633. input.sheet-tab-page-3,
  634. span.sheet-tab-page-3{
  635. width: 100px;
  636. }
  637. span.sheet-tab-page-3{
  638. margin-left: -100px;
  639. }
  640. input.sheet-tab-page-4,
  641. span.sheet-tab-page-4{
  642. width: 100px;
  643. }
  644. span.sheet-tab-page-4{
  645. margin-left: -100px;
  646. }
  647. input.sheet-tab-page-1:checked + span.sheet-tab-page-1,
  648. input.sheet-tab-page-2:checked + span.sheet-tab-page-2,
  649. input.sheet-tab-page-3:checked + span.sheet-tab-page-3,
  650. input.sheet-tab-page-4:checked + span.sheet-tab-page-4
  651. {
  652. background-color: #204060;
  653. color: white;
  654. }
  655. .sheet-section-1 select,
  656. .sheet-section-2 select,
  657. .sheet-section-3 select,
  658. .sheet-section-4 select .sheet-checkbox-row-height{
  659. height: 19px;
  660. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!