API tools faq
paste
Guest User

Untitled

a guest
Aug 6th, 2024
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.78 KB | None | 0 0
raw download clone embed print report
  1. // Welcome to the example CSS file for the template. CSS is a powerful styling tool that lets you customize the overall look and feel of your game. Dulst ships with DEFAULT CSS that forms the basis of every game, and every game can overwrite that default CSS with this file.
  2.  
  3. /*
  4. * Options. Here we define some variables for the colors in our game. These variables will be used further down in the CSS.
  5. */
  6.  
  7.  
  8. // Basic Colors.
  9. statBgColor = rgba(0, 0, 0, .5)
  10. statTextColor = rgba(255, 255, 255, 1)
  11. atkColor = rgba(221, 203, 0, 1)
  12. healthColor = rgba(229, 80, 80, 1)
  13. durColor = rgba(173, 173, 173, 1)
  14. costColor = rgba(195, 223, 255, 1)
  15. twistColor = rgba(255, 64, 235, 1)
  16. powerColor = rgba(235, 224, 83, 1)
  17. eligibilityColor = rgba(0, 255, 0, 1)
  18. eligibilityHasteColor = rgba(255, 128, 0, 1)
  19. summoningSicknessColor = rgba(30, 216, 83, 1)
  20.  
  21.  
  22. // Class Colors. To add a new class, simply add another entry to the hash below. Multi-class cards will automatically be a mix of the classes.
  23. classColors = {
  24. shell: hsl(10, 90, 50),
  25. claw: hsl(70, 90, 50),
  26. trample: hsl(160, 90, 50),
  27. }
  28.  
  29. // Keywords. Keywords come from the secondary properties section of a card type. Check the admin/gameplay page to set them. If set on a card, they will show up in the card info preview.
  30. keywords = hidden, vanguard, rush, "last life", legacy, frenzy, snipe, knocked-back, sacrifice, shield, overload, "warmed up", synergy, conjure, combatant, elusive, defense, poison, lifesteal, cannotAttack, spellPower, echo, immune, duration, silence, gemini, counter, field, armor, twist, remain, haste, tummyhort, damageTakenRecord
  31.  
  32. // Numbered keywords show up similarly to the keywords above, but is special in that it has a number beside it. For example Duration (3) for cards that lasts 3 turn.
  33. numberedKeywords = sacrifice, frenzy, shield, duration, spellPower, echo, counter, armor, defense, overload, damageTakenRecord
  34.  
  35.  
  36.  
  37. // When selecting cards to toss away during a mulligan, display an x overlay on top of it. To replace that x image, simply replace the url here.
  38. mulliganOverlay = url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcMedia/1ablh1gc6_600px-red_x_svg.png")
  39.  
  40.  
  41.  
  42. // TRUE OR FALSE OPTIONS. Set any of these options to false to turn them off.
  43.  
  44.  
  45. // Card Shapes
  46. SHAPE_UNITS = true // if set to true, unit cards will be more rounded instead of rectangular.
  47. SHAPE_EQUIPS = true // if set to true, equip cards will be circular instead of rectangular.
  48. SHAPE_HERO = true // if set to true, hero cards will have rounded tops.
  49.  
  50.  
  51. // Misc Options
  52. MEDIACONTENT_INSET_SHADOWS = true // The main image (or video) of a card has inset shadows that make the image seem to sink deeper into the card.
  53. HIDE_NEGATIVES = false // if set to true, stats which have a negative value will be shown as 0 instead of its actual value.
  54. OVERLAY_MAIN_PROPERTIES = true // if set to true, main properties such as cost, atk, and health will be overlay on top of the card image instead of forming a table underneath.
  55. REQUIRE_TUTORIAL_COMPLETE = false // if set to true, other game modes will be hidden if tutorial isn't complete.
  56.  
  57.  
  58. /*
  59. * Options END.
  60. */
  61.  
  62.  
  63.  
  64.  
  65.  
  66. /*
  67. * Shapes. Different cards when played in different locations change shape. Some cards become circles, others become pointy or squarish. Here are some definitions for those shapes.
  68. */
  69.  
  70. unitShape()
  71. if SHAPE_UNITS
  72. clip-path ellipse(50% 50% at 50% 50%)
  73.  
  74. weaponShape()
  75. if SHAPE_EQUIPS
  76. clip-path circle(42% at 50% 50%)
  77.  
  78. afterlifeShape()
  79. if SHAPE_UNITS
  80. clip-path circle(20% at 50% 50%)
  81.  
  82. /*
  83. * Shapes END.
  84. */
  85.  
  86.  
  87.  
  88.  
  89.  
  90. /*
  91. * Animations. Cards with special keywords may be animated. Here is the library of animations.
  92. */
  93.  
  94. @keyframes shieldThrob
  95. 0%
  96. filter drop-shadow(0 -5px 5px #c6e000)
  97. 100%
  98. filter drop-shadow(0 -5px 20px #c6e000)
  99.  
  100. @keyframes shieldEnter
  101. 0%
  102. transform scale(0)
  103. 100%
  104. transform scale(1)
  105.  
  106. @keyframes frenzy
  107. 0%
  108. transform translate(0px, 0px) rotate(0deg)
  109.  
  110. 2%
  111. transform translate(1px, 2px) rotate(2.5deg)
  112.  
  113. 4%
  114. transform translate(8px, 3px) rotate(2.5deg)
  115.  
  116. 6%
  117. transform translate(-2px, 10px) rotate(-1.5deg)
  118.  
  119. 8%
  120. transform translate(3px, 5px) rotate(-0.5deg)
  121.  
  122. 10%
  123. transform translate(3px, -1px) rotate(-0.5deg)
  124.  
  125. 12%
  126. transform translate(-1px, 1px) rotate(-0.5deg)
  127.  
  128. 14%
  129. transform translate(10px, -7px) rotate(-0.5deg)
  130.  
  131. 16%
  132. transform translate(-3px, -5px) rotate(2.5deg)
  133.  
  134. 18%
  135. transform translate(1px, -1px) rotate(3.5deg)
  136.  
  137. 20%
  138. transform translate(-1px, -9px) rotate(-0.5deg)
  139.  
  140. 22%
  141. transform translate(-9px, 5px) rotate(-2.5deg)
  142.  
  143. 24%
  144. transform translate(-2px, -7px) rotate(1.5deg)
  145.  
  146. 26%
  147. transform translate(0px, 5px) rotate(0.5deg)
  148.  
  149. 28%
  150. transform translate(-2px, 10px) rotate(-1.5deg)
  151.  
  152. 30%
  153. transform translate(6px, -2px) rotate(3.5deg)
  154.  
  155. 32%
  156. transform translate(3px, 9px) rotate(-1.5deg)
  157.  
  158. 34%
  159. transform translate(-6px, -8px) rotate(3.5deg)
  160.  
  161. 36%
  162. transform translate(-6px, 1px) rotate(2.5deg)
  163.  
  164. 38%
  165. transform translate(6px, 0px) rotate(3.5deg)
  166.  
  167. 40%
  168. transform translate(0px, -8px) rotate(1.5deg)
  169.  
  170. 42%
  171. transform translate(2px, 1px) rotate(2.5deg)
  172.  
  173. 44%
  174. transform translate(-1px, -1px) rotate(3.5deg)
  175.  
  176. 46%
  177. transform translate(-4px, -3px) rotate(-2.5deg)
  178.  
  179. 48%
  180. transform translate(5px, -7px) rotate(0.5deg)
  181.  
  182. 50%
  183. transform translate(-7px, 4px) rotate(2.5deg)
  184.  
  185. 52%
  186. transform translate(-2px, 9px) rotate(-1.5deg)
  187.  
  188. 54%
  189. transform translate(4px, 1px) rotate(-1.5deg)
  190.  
  191. 56%
  192. transform translate(7px, 4px) rotate(2.5deg)
  193.  
  194. 58%
  195. transform translate(2px, 1px) rotate(1.5deg)
  196.  
  197. 60%
  198. transform translate(4px, -7px) rotate(1.5deg)
  199.  
  200. 62%
  201. transform translate(-8px, 9px) rotate(3.5deg)
  202.  
  203. 64%
  204. transform translate(2px, -1px) rotate(-2.5deg)
  205.  
  206. 66%
  207. transform translate(4px, -2px) rotate(2.5deg)
  208.  
  209. 68%
  210. transform translate(4px, 10px) rotate(2.5deg)
  211.  
  212. 70%
  213. transform translate(0px, -8px) rotate(2.5deg)
  214.  
  215. 72%
  216. transform translate(0px, 10px) rotate(0.5deg)
  217.  
  218. 74%
  219. transform translate(-2px, 6px) rotate(3.5deg)
  220.  
  221. 76%
  222. transform translate(-9px, -5px) rotate(0.5deg)
  223.  
  224. 78%
  225. transform translate(7px, 1px) rotate(3.5deg)
  226.  
  227. 80%
  228. transform translate(0px, 6px) rotate(-0.5deg)
  229.  
  230. 82%
  231. transform translate(4px, -6px) rotate(3.5deg)
  232.  
  233. 84%
  234. transform translate(-4px, 8px) rotate(-2.5deg)
  235.  
  236. 86%
  237. transform translate(1px, 10px) rotate(1.5deg)
  238.  
  239. 88%
  240. transform translate(-3px, 5px) rotate(-2.5deg)
  241.  
  242. 90%
  243. transform translate(0px, -3px) rotate(2.5deg)
  244.  
  245. 92%
  246. transform translate(1px, 8px) rotate(0.5deg)
  247.  
  248. 94%
  249. transform translate(-2px, 1px) rotate(-0.5deg)
  250.  
  251. 96%
  252. transform translate(5px, 6px) rotate(0.5deg)
  253.  
  254. 98%
  255. transform translate(1px, -8px) rotate(0.5deg)
  256.  
  257. @keyframes sonarBase
  258. from
  259. padding 0
  260. opacity 0.6
  261. to
  262. padding 1.3em
  263. opacity 0
  264. top -1.3em
  265. left -1.3em
  266.  
  267. @keyframes sonarStroke
  268. from
  269. border-width 0.4em
  270. margin -0.4em
  271. to
  272. border-width 0.1em
  273.  
  274.  
  275. // Shadow Animations
  276. @keyframes eligibilityHighlight
  277. from
  278. filter drop-shadow(0 -5px 14px eligibilityColor)
  279. to
  280. filter drop-shadow(0 -5px 16px eligibilityColor)
  281.  
  282. eligibilityAnimation = eligibilityHighlight .5s linear infinite alternate
  283. // Haste
  284. @keyframes eligibilityHasteHighlight
  285. from
  286. filter drop-shadow(0 -5px 14px eligibilityHasteColor)
  287. to
  288. filter drop-shadow(0 -5px 16px eligibilityHasteColor)
  289.  
  290. eligibilityHasteAnimation = eligibilityHasteHighlight .5s linear infinite alternate
  291.  
  292. // animation definition for the counter property.
  293. @keyframes fadeInUpScale
  294. 0%
  295. opacity 0
  296. transform scale(0.4) translateY(0)
  297.  
  298. 40%
  299. opacity 1
  300. transform scale(1) translateY(-14rem)
  301.  
  302. 100%
  303. opacity 1
  304. transform scale(1) translateY(-14rem)
  305.  
  306. @keyframes timerBar
  307. 0%
  308. height 100vh
  309. 100%
  310. height 0vh
  311.  
  312. summoningSickness()
  313. display block
  314. position absolute
  315. font-family sans-serif
  316. user-select none
  317. top 1rem
  318. right 1rem
  319. color summoningSicknessColor
  320. font-size 4rem
  321. opacity 0
  322. text-shadow #333 0px 0px 0.2rem, #333 0px 0px 0.2rem
  323. font-weight bold
  324. backface-visibility hidden
  325. transform-style preserve-3d
  326. animation summoningSickness linear 3s
  327. animation-iteration-count infinite
  328.  
  329. @keyframes summoningSickness
  330. 0%
  331. transform: translate(0px,0px) scale(0.5)
  332. opacity: 0
  333. filter: blur(0px)
  334. 25%
  335. 75%
  336. opacity: 1
  337. filter: blur(0px)
  338. 100%
  339. transform: translate(5rem,-5rem) scale(1.5)
  340. opacity: 0
  341. filter: blur(1rem)
  342.  
  343. @keyframes powerUseAnim
  344. 0%
  345. box-shadow
  346. inset 0 0 50px rgba(255,255,255,0),
  347. inset 20px 0 80px rgba(255,0,255,0),
  348. inset -20px 0 80px rgba(0,255,255,0),
  349. inset 20px 0 300px rgba(255,0,255,0),
  350. inset -20px 0 300px rgba(0,255,255,0),
  351. 0 0 30px rgba(255,255,255,0),
  352. -10px 0 50px rgba(255,0,255,0),
  353. 10px 0 50px rgba(0,255,255,0);
  354.  
  355. 50%
  356. box-shadow
  357. inset 0 0 50px rgba(255,255,255,.4),
  358. inset 20px 0 80px rgba(255,0,255,.4),
  359. inset -20px 0 80px rgba(0,255,255,.4),
  360. inset 20px 0 300px rgba(255,0,255,.4),
  361. inset -20px 0 300px rgba(0,255,255,.4),
  362. 0 0 30px rgba(255,255,255,.4),
  363. -10px 0 50px rgba(255,0,255,.4),
  364. 10px 0 50px rgba(0,255,255,.4);
  365. color rgba(255,255,255,1)
  366. font-size 15rem
  367. text-indent -2.5rem
  368.  
  369. 100%
  370. box-shadow
  371. inset 0 0 50px rgba(255,255,255,0),
  372. inset 20px 0 80px rgba(255,0,255,0),
  373. inset -20px 0 80px rgba(0,255,255,0),
  374. inset 20px 0 300px rgba(255,0,255,0),
  375. inset -20px 0 300px rgba(0,255,255,0),
  376. 0 0 30px rgba(255,255,255,0),
  377. -10px 0 50px rgba(255,0,255,0),
  378. 10px 0 50px rgba(0,255,255,0);
  379. color: rgba(255,255,255,0);
  380. font-size: 20rem;
  381. text-indent: -4.5rem;
  382.  
  383. /*
  384. * Animations END.
  385. */
  386.  
  387.  
  388.  
  389.  
  390.  
  391. /*
  392. * Player Properties Styling.
  393. */
  394.  
  395. #opponent-overload[data-type=stat], #me-overload[data-type=stat]
  396. &[data-value="0"]
  397. display none
  398. .statWrapper
  399. width 100%
  400. .count
  401. box-sizing border-box
  402. text-align center
  403. width 100%
  404. &::before
  405. content "-"
  406. margin-right 3px
  407.  
  408. #me-maxMana, #opponent-maxMana
  409. justify-content flex-start
  410. .statWrapper
  411. width 100%
  412. .count
  413. box-sizing border-box
  414. text-align right
  415. width 100%
  416. border-top-left-radius 0
  417. border-bottom-left-radius 0
  418. margin-left -3px
  419. &::before
  420. content "/"
  421. margin-right 3px
  422.  
  423. #opponent-mana[data-type=stat], #me-mana[data-type=stat]
  424. .statWrapper
  425. width 100%
  426. .count
  427. box-sizing border-box
  428. padding-right 6px
  429. text-align right
  430. width 100%
  431. border-top-right-radius 0
  432. border-bottom-right-radius 0
  433.  
  434.  
  435. #opponent-maxMana[data-type=stat], #me-maxMana[data-type=stat]
  436. .statWrapper
  437. width 100%
  438. .count
  439. text-align left
  440. width 100%
  441. border-top-left-radius 0
  442. border-bottom-left-radius 0
  443.  
  444. /*
  445. * Player Properties Styling END.
  446. */
  447.  
  448.  
  449.  
  450.  
  451.  
  452. /*
  453. * Card Full Info Popup Styling. The default card popups do not have the card stats displayed on top of the card image. Because different games may have different stats and would likely want to use them in different ways, the default stats are arranged in a table underneath. Here for the template we can save space on the card by putting the stats on top of the card image.
  454. */
  455.  
  456. statStyles()
  457. border-radius 50em
  458. background statBgColor
  459. color statTextColor
  460. padding .2em .4em
  461. position absolute
  462. font-size 1.4em
  463. font-weight bold
  464. line-height 1
  465. width inherit
  466.  
  467. setNegativesToZero()
  468. if HIDE_NEGATIVES
  469. // ensure that all negative values are displayed as 0.
  470. &[data-value^="-"]
  471. .data
  472. color transparent
  473. position absolute
  474. &:before
  475. content "0"
  476. display inline-block
  477.  
  478. #cardFullInfo .cardDisplayInner
  479. .cardFullInfo .cardDisplayInner
  480. color #eee
  481.  
  482. .image, .video
  483. position relative
  484. border-bottom 2px solid #000
  485. if MEDIACONTENT_INSET_SHADOWS
  486. &:after
  487. box-shadow inset 0 0 30px 15px alpha(#000, 0.8)
  488. content ''
  489. display block
  490. height 100%
  491. position absolute
  492. top 0
  493. width 100%
  494.  
  495. .info
  496. position relative
  497.  
  498. ul.dataPane
  499. if OVERLAY_MAIN_PROPERTIES
  500. li
  501. .data
  502. width auto
  503. .mainProperties
  504. width auto
  505. .table
  506. display block
  507. border-spacing 0
  508. .Row .td
  509. display block
  510. padding 0
  511. .title
  512. display none
  513.  
  514. .property
  515. statStyles()
  516. font-size 3em
  517. setNegativesToZero()
  518.  
  519. [data-name='cost']
  520. top 10px
  521. left 10px
  522. border 3px solid costColor
  523. [data-name='atk']
  524. top 294px
  525. left 10px
  526. border 3px solid atkColor
  527. [data-name='health']
  528. top 294px
  529. right 10px
  530. border 3px solid healthColor
  531. [data-name='dur']
  532. top 294px
  533. right 10px
  534. border 3px solid durColor
  535. [data-name='reqSource'], [data-name='source']
  536. font-size 1em
  537. font-weight 400
  538. background none
  539. bottom 12px
  540. left 24px
  541. text-transform capitalize
  542. padding-left 0
  543. padding-right 0
  544.  
  545. li.effect, li.rarity, li.description, li.desc, li.type
  546. .data
  547. float none
  548. width auto
  549. .title
  550. display none
  551. text-align center
  552. .secondaryProperties
  553. overflow hidden
  554. padding 0 19.5px
  555. background rgba(0,0,0,.4)
  556. margin 0
  557. box-sizing border-box
  558. text-align center
  559.  
  560. // there are some properties that are for internal or UI purposes only, not meant to be displayed.
  561. li
  562. &[data-name="eligibleToAttack"]
  563. display none
  564.  
  565. li
  566. display inline-block
  567. background none
  568. padding 9.75px 0
  569. overflow visible
  570. margin 0 0 1px
  571. .data, .title
  572. -webkit-font-smoothing auto
  573. display inline
  574. width auto
  575. float none
  576. padding-right 0
  577. &[data-value="0"]
  578. display none
  579. &[data-name="legacy"], &[data-name="invoke"], &[data-name="defensive"], &[data-name="offensive"]
  580. display none
  581. for keyword in keywords
  582. &[data-name=\"{keyword}\"]
  583. text-transform capitalize
  584. color white
  585. font inherit
  586. font-weight bold
  587. &::after
  588. content ". "
  589. display inline
  590. padding-right .25em
  591. .title
  592. text-transform capitalize
  593. color white
  594. font inherit
  595. font-weight bold
  596. .data
  597. display none
  598. for keyword in numberedKeywords
  599. &[data-name=\"{keyword}\"]
  600. .title
  601. padding-right 0
  602. &::after
  603. content " (" attr(data-value) "). "
  604. display inline
  605. padding-right .25em
  606.  
  607.  
  608. // if the value is 1 then don't show the data as usual. Only show data if value is more than 1.
  609. &[data-name="frenzy"], &[data-name="shield"], &[data-name="echo"]
  610. &[data-value="1"]
  611. &::after
  612. content ". "
  613. display inline
  614. padding-right .25em
  615.  
  616. // "silence" keyword is shown as "silenced" in keyword list
  617. &[data-name="silence"]
  618. &::after
  619. content "d. "
  620. display inline
  621. padding-right .25em
  622.  
  623. li.rarity
  624. text-align right
  625.  
  626. // Don't show the keywords help for the reqSource and source properties. The helptext for these properties are only for developers and not players.
  627. .keywords-help
  628. .keyword[data-name="source"]
  629. .keyword[data-name="reqSource"]
  630. display none
  631.  
  632. // Class Styling. Cards of different classes will have different color border and texts.
  633. classStyles(c)
  634. .name, .dataPane
  635. color c
  636. .name
  637. border-top 3px solid c
  638. .image, .video
  639. border-bottom 2px solid c
  640. &:after
  641. box-shadow inset 0 0 30px 15px darken(alpha(c, 0.8), 80%)
  642.  
  643. #cardFullInfo, .cardFullInfo
  644. for key, value in classColors
  645. .mainProperties
  646. .data
  647. [data-name=\"{key}\"]
  648. color value !important
  649.  
  650. &[data-source=\"{key}\"], &[data-reqsource=\"{key}\"]
  651. classStyles(value)
  652. [data-name='source']
  653. [data-name='reqSource']
  654. .data
  655. color value !important
  656.  
  657. for key2, value2 in classColors
  658. unless key == key2
  659. &[data-source*=\"{key}\"][data-source*=\"{key2}\"], &[data-reqsource*=\"{key}\"][data-reqsource*=\"{key2}\"]
  660. classStyles(mix(value, value2))
  661.  
  662. /*
  663. * Card Full Info Popup Styling END.
  664. */
  665.  
  666.  
  667.  
  668.  
  669.  
  670. /*
  671. * Select Cards Modal Styling.
  672. */
  673.  
  674. .select-cards-container
  675. .cards
  676. if OVERLAY_MAIN_PROPERTIES
  677. .card
  678. .mainProperty
  679. statStyles()
  680. font-size 3em
  681. display block
  682. setNegativesToZero()
  683. [data-name='cost']
  684. top 10px
  685. left 10px
  686. border 3px solid costColor
  687. [data-name='atk']
  688. top 294px
  689. left 10px
  690. border 3px solid atkColor
  691. [data-name='health']
  692. top 294px
  693. right 10px
  694. border 3px solid healthColor
  695. [data-name='dur']
  696. top 294px
  697. right 10px
  698. border 3px solid durColor
  699. [data-name='reqSource']
  700. display none
  701.  
  702. // when selecting mulligans
  703. &[data-effectname="mulliganB"]
  704. &[data-effectname="mulliganA"]
  705. .select-cards-inner
  706. .card
  707. &:not(.selected)
  708. box-shadow 0 0 30px 7px rgba(81, 255, 0, .7)
  709. &.selected
  710. box-shadow none
  711. &::after
  712. position absolute
  713. height 92%
  714. width 92%
  715. top 4%
  716. left 4%
  717. background center center no-repeat
  718. background-size contain
  719. background-image mulliganOverlay
  720. content " / "
  721. display block
  722. color transparent
  723.  
  724. /*
  725. * Select Cards Modal Styling END.
  726. */
  727.  
  728.  
  729.  
  730.  
  731.  
  732. /*
  733. * Play Interface.
  734. */
  735.  
  736. #playContainer
  737. .card
  738. box-shadow none
  739.  
  740. .property
  741. setNegativesToZero()
  742.  
  743. &[data-name="cost"]
  744. &[data-name="atk"]
  745. &[data-name="health"]
  746. &[data-name="armor"]
  747. display block
  748. z-index 1
  749.  
  750. &[data-name="cost"]
  751. statStyles()
  752. top .5rem
  753. left .5rem
  754. border 1px solid costColor
  755.  
  756. &[data-name="atk"]
  757. statStyles()
  758. bottom .5rem
  759. left .5rem
  760. border 1px solid atkColor
  761.  
  762. &[data-name="health"]
  763. statStyles()
  764. bottom .5rem
  765. right .5rem
  766. border 1px solid healthColor
  767.  
  768. &[data-name="dur"]
  769. statStyles()
  770. bottom .5rem
  771. right .5rem
  772. border 1px solid durColor
  773.  
  774. &[data-name="armor"]
  775. statStyles()
  776. padding 0.35em 0.35em 0.45em 0.35em
  777. width inherit
  778. line-height 1.4em
  779. bottom 5rem
  780. right 0rem
  781. filter drop-shadow(0 -5px 15px #919191)
  782. background transparent
  783. width 1.4em
  784. background-image url(https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ck5p2pv3_greyblueshield.png)
  785. background-size contain
  786. background-position center center
  787. background-repeat no-repeat
  788. opacity 0.9
  789.  
  790.  
  791. &[data-powerusedthisturn="0"]
  792. .property[data-name="powerName"]
  793. position absolute
  794. top 0
  795. height 100%
  796. width 100%
  797. display block
  798. border-top-left-radius 20em 30em
  799. border-top-right-radius 20em 30em
  800. overflow hidden
  801. color rgba(0, 0, 0, 0)
  802. font-size 1.4em
  803. display none
  804. &::after
  805. content attr(data-value)
  806. display block
  807. top 5rem
  808. width 100%
  809. text-align center
  810. padding .25rem 0
  811. color powerColor
  812. text-shadow black 0px 0px 5px, black 0px 0px 2px
  813. pointer-events none
  814. background-color statBgColor
  815. position absolute
  816.  
  817. &.powerUseAnimation::after
  818. display block
  819. content ""
  820. color rgba(255,255,255,0)
  821. width 100%
  822. height 100%
  823. animation powerUseAnim 1200ms cubic-bezier(0.39, 0.575, 0.565, 1)
  824. position absolute
  825. border-top-left-radius 20em 30em
  826. border-top-right-radius 20em 30em
  827. top 0
  828. left 0
  829. right 0
  830. bottom 0
  831.  
  832. &[data-location="me-hero"]
  833. &[data-location="opponent-hero"]
  834. img
  835. if SHAPE_HERO
  836. border-top-left-radius 20em 30em
  837. border-top-right-radius 20em 30em
  838. border 2px solid grey
  839.  
  840. .property
  841. &[data-name="health"]
  842. display block
  843. &[data-name="atk"]
  844. display block
  845.  
  846.  
  847.  
  848. &[data-location="me-hand"]
  849. &[data-location="opponent-hand"]
  850. .property[data-name="atk"]
  851. .property[data-name="health"]
  852. display none
  853. &[data-echoCopy="1"]
  854. .property[data-name="echoCopy"]
  855. background rgba(0,115,255,.15)
  856. position absolute
  857. left 0
  858. top 0
  859. display block
  860. width 100%
  861. height 100%
  862. color rgba(0, 0, 0, 0)
  863. border-radius 5px
  864.  
  865. &[data-location="me-afterlife"]
  866. &[data-location="opponent-afterlife"]
  867. .media-content
  868. afterlifeShape()
  869. transition 1s all
  870. .property
  871. display none
  872.  
  873. &[data-location="me-playPreview"]
  874. &[data-location="opponent-playPreview"]
  875. opacity 1
  876. transition 1s all
  877. .media-content
  878. border-radius 5px
  879. .property[data-name="cost"]
  880. border-radius 2em
  881. background statBgColor
  882. padding .2em .4em
  883. position absolute
  884. font-size 1.5em
  885. font-weight bold
  886. top 5px
  887. left 5px
  888. line-height 1
  889. border 1px solid costColor
  890.  
  891. &[data-location="me-weapon"]
  892. &[data-location="opponent-weapon"]
  893. .media-content
  894. weaponShape()
  895. .property
  896. &[data-name="cost"]
  897. display none
  898. &[data-name="dur"]
  899. display block
  900.  
  901. &[data-location="me-backrow"]
  902. &[data-location="opponent-backrow"]
  903. .media-content
  904. weaponShape() // Remains use same shape as weapons
  905. .property[data-name="cost"]
  906. display none
  907. &[data-position="facedown"]
  908. &::after
  909. content "?"
  910. font-weight bold
  911. font-size 4rem
  912. display block
  913. position absolute
  914. line-height 7rem
  915. width 100%
  916. height 7rem
  917. color alpha(twistColor, 30%)
  918. top 1rem
  919. left 0
  920. &::before
  921. content "."
  922. display block
  923. height 100%
  924. width 100%
  925. weaponShape() // Twists use same shape as weapons
  926. background alpha(twistColor, 20%)
  927. box-shadow inset 1rem 0 1rem 1rem alpha(twistColor, 5%), inset -1rem 0 1rem 1rem alpha(twistColor, 5%), inset 0 2rem 1rem 1rem alpha(twistColor, 5%), inset 0 -2rem 1rem 1rem alpha(twistColor, 5%), inset 0.7rem 1.3rem 1.6rem 1.4rem alpha(twistColor, 5%), inset -0.7rem 1.3rem 1.6rem 1.4rem alpha(twistColor, 5%), inset -0.7rem -1.3rem 1.6rem 1.4rem alpha(twistColor, 5%), inset 0.7rem -1.3rem 1.6rem 1.4rem alpha(twistColor, 5%)
  928. &:hover
  929. &::after
  930. content "Twist"
  931. color alpha(twistColor, 60%)
  932. font-weight 400
  933. font-size 2rem
  934. .property
  935. display none
  936.  
  937. .media-content
  938. display none
  939.  
  940. &[data-location="me-board"]
  941. &[data-location="opponent-board"]
  942. &[data-location="me-board1"]
  943. &[data-location="opponent-board1"]
  944. &[data-location="me-board2"]
  945. &[data-location="opponent-board2"]
  946. &[data-location="me-board3"]
  947. &[data-location="opponent-board3"]
  948. .media-content
  949. unitShape()
  950.  
  951. .property[data-name="cost"]
  952. display none
  953.  
  954. keywordVisualEffectsBasic()
  955. position absolute
  956. display block
  957. color rgba(0, 0, 0, 0)
  958.  
  959. &[data-summoningSickness="1"]:not([data-eligibletoattack="1"]):not([data-haste="1"]):not([data-rush="1"])
  960. .property[data-name="summoningSickness"]
  961. keywordVisualEffectsBasic()
  962. top 0
  963. left 0
  964. width 100%
  965. height 10rem
  966. .data
  967. &:after
  968. summoningSickness()
  969. content "z"
  970. animation-delay 0s
  971. &:before
  972. summoningSickness()
  973. content "z"
  974. animation-delay 1s
  975. &:after
  976. summoningSickness()
  977. content "z"
  978. animation-delay 2s
  979.  
  980.  
  981. &[data-last-life="1"]
  982. .property[data-name="last life"]
  983. keywordVisualEffectsBasic()
  984. background rgba(255,255,255,.01)
  985. box-shadow inset 0 10px 20px 10px #FFF, inset 0 -10px 20px 10px #FFF, 0 10px 20px 10px #FFF, 0 -10px 20px 10px #FFF
  986. transform scaleX(.65) scaleY(.2)
  987. border-radius 100px
  988. left 0
  989. top -40%
  990. height 0
  991. width 100%
  992. padding-bottom 100%
  993.  
  994. &[data-frenzy="1"]
  995. &[data-frenzy="2"]
  996. &[data-frenzy="3"]
  997. &[data-frenzy="4"]
  998. &[data-eligibletoattack="1"]
  999. .card-inner
  1000. animation frenzy 2s infinite alternate ease-out
  1001.  
  1002. &[data-shield="1"]
  1003. .property[data-name="shield"]
  1004. keywordVisualEffectsBasic()
  1005. animation shieldEnter 1s cubic-bezier(.55,0,.1,1), shieldThrob .5s alternate infinite;
  1006. z-index 1
  1007. filter drop-shadow(0 -5px 15px #c6e000)
  1008. background transparent
  1009. left 0
  1010. top 0
  1011. width 100%
  1012. height 100%
  1013. background-image url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcMedia/1abmn8gl0_9TpjLAETE.svg")
  1014. background-size contain
  1015. background-position center center
  1016. background-repeat no-repeat
  1017. opacity .5
  1018.  
  1019. &[data-silence="1"]
  1020. .property[data-name="silence"]
  1021. keywordVisualEffectsBasic()
  1022. z-index 1
  1023. filter drop-shadow(0 0px 2px red)
  1024. background transparent
  1025. left 10%
  1026. top 10%
  1027. width 80%
  1028. height 80%
  1029. background-image url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/No-Symbol.png/640px-No-Symbol.png")
  1030. background-size contain
  1031. background-position center center
  1032. background-repeat no-repeat
  1033. opacity .75
  1034.  
  1035. &[data-snipe="1"]
  1036. .property[data-name="snipe"]
  1037. keywordVisualEffectsBasic()
  1038. z-index 1
  1039. filter drop-shadow(0 0px 2px red)
  1040. background transparent
  1041. left 20%
  1042. bottom -15%
  1043. width 60%
  1044. height 30%
  1045. background-image url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1bflo5jja_svg-20-512.png")
  1046. background-size contain
  1047. background-position center center
  1048. background-repeat no-repeat
  1049.  
  1050. &[data-vanguard="1"]
  1051. .property[data-name="vanguard"]
  1052. keywordVisualEffectsBasic()
  1053. z-index 1
  1054. filter drop-shadow(0 0px 2px blue)
  1055. background transparent
  1056. left 20%
  1057. bottom -15%
  1058. width 60%
  1059. height 30%
  1060. background-image url("https://cdn-icons-png.flaticon.com/512/3892/3892597.png")
  1061. background-size contain
  1062. background-position center center
  1063. background-repeat no-repeat
  1064.  
  1065. &[data-legacy="1"]
  1066. .property[data-name="legacy"]
  1067. keywordVisualEffectsBasic()
  1068. z-index 1
  1069. filter drop-shadow(0 0px 2px white)
  1070. background transparent
  1071. left 20%
  1072. bottom -15%
  1073. width 60%
  1074. height 30%
  1075. background-image url("https://cdn-icons-png.flaticon.com/512/556/556209.png")
  1076. background-size contain
  1077. background-position center center
  1078. background-repeat no-repeat
  1079. opacity .75
  1080.  
  1081. &[data-poison="1"]
  1082. .property[data-name="poison"]
  1083. keywordVisualEffectsBasic()
  1084. z-index 1
  1085. filter drop-shadow(0 0px 2px #008000) invert(120%) sepia() saturate(100000%) hue-rotate(40deg)
  1086. background transparent
  1087. left 20%
  1088. bottom -12%
  1089. width 60%
  1090. height 25%
  1091. background-image url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcMedia/1ccea1ktv_noun_1581462_cc.png")
  1092. background-size contain
  1093. background-position center center
  1094. background-repeat no-repeat
  1095.  
  1096. &[data-hidden="1"]
  1097. .property[data-name="hidden"]
  1098. keywordVisualEffectsBasic()
  1099. box-shadow inset 20px 0 10px 0 rgba(0,0,0,0.2048), inset 40px 0 14px -4px rgba(0,0,0,0.256), inset 60px 0 18px -8px rgba(0,0,0,0.32), inset 80px 0 22px -12px rgba(0,0,0,0.4), inset 100px 0 26px -16px rgba(0,0,0,0.5)
  1100. left 0
  1101. top 0
  1102. width 100%
  1103. height 100%
  1104. border-radius 5px
  1105. unitShape()
  1106.  
  1107. &[data-elusive="1"]
  1108. .property[data-name="elusive"]
  1109. background rgba(255,215,0,.15)
  1110. keywordVisualEffectsBasic()
  1111. left 0
  1112. top 0
  1113. width 100%
  1114. height 100%
  1115. border-radius 5px
  1116. unitShape()
  1117.  
  1118. &[data-immune="1"]
  1119. .property[data-name="immune"]
  1120. keywordVisualEffectsBasic()
  1121. background rgba(55,155,255,.25)
  1122. left 0
  1123. top 0
  1124. width 100%
  1125. height 100%
  1126. border-radius 5px
  1127. unitShape()
  1128.  
  1129. &[data-location="me-hero"]
  1130. &[data-eligibletoattack="1"]
  1131. .media-content
  1132. animation eligibilityAnimation
  1133. &[data-cannotAttack="1"]
  1134. transform rotate(0deg)
  1135.  
  1136. &[data-location="opponent-hero"]
  1137. &[data-cannotAttack="1"]
  1138. transform rotate(0deg)
  1139.  
  1140. &[data-location="me-board"]
  1141. &[data-eligibletoattack="1"]
  1142. animation eligibilityAnimation
  1143. &[data-haste="1"]
  1144. &[data-summoningSickness="1"]
  1145. animation eligibilityHasteAnimation
  1146. &[data-cannotAttack="1"]
  1147. transform rotate(0deg)
  1148. &[data-vanguard="1"]
  1149. margin-top -2em
  1150. &[data-knocked-back="1"]
  1151. transform rotate(0deg)
  1152. transition 1s
  1153. &[data-location="opponent-board"]
  1154. &[data-cannotAttack="1"]
  1155. transform rotate(0deg)
  1156. &[data-vanguard="1"]
  1157. margin-top 2em
  1158. &[data-knocked-back="1"]
  1159. transition 1s
  1160. transform rotate(0deg)
  1161.  
  1162. // these are two locations that aren't defined in the game logic, just a place to send cards to when you don't want to see them anymore.
  1163. &[data-location="opponent-hidden"]
  1164. &[data-location="me-hidden"]
  1165. opacity 0
  1166.  
  1167.  
  1168. // only show eligibleToPlay highlights for that turn's player.
  1169. body[data-turnPlayer="player1"][data-playerNumber="player1"]
  1170. body[data-turnPlayer="player2"][data-playerNumber="player2"]
  1171. .card
  1172. &[data-location="me-hand"]
  1173. &[data-eligibleToPlay="1"]
  1174. perspective 400px
  1175. transform-style preserve-3d
  1176. will-change transform
  1177. .card-inner
  1178. display block
  1179. transform-style preserve-3d
  1180. width 100%
  1181. will-change transform
  1182. .media-content
  1183. animation eligibilityAnimation
  1184.  
  1185. &:hover
  1186. margin-top -1%
  1187.  
  1188.  
  1189.  
  1190.  
  1191.  
  1192. // Custom UI Elements created by rule cards.
  1193. #card-container
  1194. .card[data-title="ui element: board overlay"]
  1195. position absolute
  1196. transition none
  1197. width 102rem !important
  1198. height 17rem !important
  1199. z-index 100 !important
  1200. pointer-events none
  1201. top 52rem !important
  1202. left 21rem !important
  1203. border solid 3px rgb(56, 205, 255)
  1204. border-radius 3rem
  1205. background alpha(rgb(56, 205, 255), .2)
  1206.  
  1207. .card[data-title="ui element: sonar"]
  1208. position relative
  1209. width 3rem !important
  1210. height 3rem !important
  1211. pointer-events none
  1212. transition none
  1213. &:after
  1214. z-index -1
  1215. padding 0
  1216. top 0
  1217. left 0
  1218. width 100%
  1219. height 100%
  1220. content ''
  1221. display block
  1222. position absolute
  1223. animation-name sonarBase, sonarStroke
  1224. animation-iteration-count infinite
  1225. animation-duration 1s
  1226. box-sizing content-box
  1227. border 1px solid rgba(255, 69, 0, 1)
  1228. border-radius 10rem
  1229.  
  1230. .card[data-dulstClass~="dialogue"]
  1231. height auto !important
  1232. z-index 2000 !important
  1233. .card-inner
  1234. .media-content
  1235. display none
  1236. border-radius 2rem
  1237. border .4rem solid #aaa
  1238. border-radius 2rem
  1239. background alpha(#333, .6)
  1240. color #fff
  1241. box-sizing border-box
  1242. text-shadow 1px 1px #444
  1243. box-shadow 0 0 1px rgba(76,86,103,1), 0 1px 1px rgba(31,37,50,1)
  1244. .property[data-name="text"]
  1245. display block
  1246. &::after
  1247. content: " ";
  1248. position: absolute;
  1249. border-style: solid;
  1250. &[data-dulstclass~="bottom"]
  1251. &::after
  1252. bottom 100% /* At the top of the tooltip */
  1253. border-color transparent transparent #b1b1b1 transparent
  1254. &[data-dulstclass~="top"]
  1255. &::after
  1256. top 100% /* At the bottom of the tooltip */
  1257. border-color #b1b1b1 transparent transparent transparent
  1258.  
  1259. .card[data-title="ui element: Tutorial Dialog"]
  1260. width 48rem !important
  1261. .card-inner
  1262. margin-top 2.5rem
  1263. padding 1.5rem 2rem
  1264. font-size 2.5rem
  1265. &::after
  1266. left 18rem
  1267. margin-left 3rem
  1268. border-width 3rem
  1269.  
  1270. .card[data-title="ui element: paragraph text"]
  1271. width 100vw !important
  1272. height 100vh !important
  1273. top 0 !important
  1274. left 0 !important
  1275. right 0 !important
  1276. z-index 2000 !important
  1277. position fixed
  1278. border 0
  1279. background linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,0) 70%)
  1280. .card-inner
  1281. padding 12vh 20vw
  1282. font-size 5vh
  1283. box-shadow none
  1284. text-shadow 1px 1px 0px #444, -1px 1px 0px #444, 1px -1px 0px #444, -1px -1px 0px #444
  1285. background 0
  1286. border 0
  1287. border-radius 0
  1288. &::after
  1289. content "(click to continue)"
  1290. display block
  1291. font-style italic
  1292. margin-top 1rem
  1293. font-size 65%
  1294.  
  1295. .card[data-title="ui element: help tooltip"]
  1296. width 30rem !important
  1297. transition none
  1298. .card-inner
  1299. // margin-top 2.5rem
  1300. padding 1rem 1.25rem
  1301. font-size 2rem
  1302. &::after
  1303. margin-left: 2rem;
  1304. border-width: 1rem;
  1305. left 12rem
  1306. &[data-dulstClass~="reqClick"]
  1307. cursor pointer
  1308. .card-inner
  1309. &:after
  1310. content "(click to continue)"
  1311. display block
  1312. font-style italic
  1313. margin-top .5rem
  1314. &:hover
  1315. box-shadow 0 0 5px alpha(gold, 1)
  1316.  
  1317. .card[data-title="ui element: timerBar"]
  1318. width 1rem !important
  1319. position fixed !important
  1320. left 0 !important
  1321. height 100vh !important
  1322. bottom 0 !important
  1323. top auto !important
  1324. background red
  1325. animation-name timerBar
  1326. animation-iteration-count 1
  1327. animation-duration 10s
  1328. animation-timing-function linear
  1329. &[data-location="opponent-playPreview"]
  1330. opacity .3
  1331.  
  1332.  
  1333. // Floating text. When main stats change on a card a popup appears.
  1334. .card-change-value-container
  1335. font-size 3rem
  1336. font-weight bold
  1337.  
  1338. // by default don't show floating text when stats change.
  1339. .card-change-value
  1340. display none
  1341.  
  1342. // Do show floating text when health changes. This is floating damage.
  1343. .health.decrease
  1344. &.me-board
  1345. &.opponent-board
  1346. &.hero
  1347. display block
  1348. color white
  1349. border 1px solid healthColor
  1350. background alpha(healthColor, 75%)
  1351. padding 2rem
  1352. label, .to
  1353. display none
  1354. .by
  1355. display block
  1356. .arrow
  1357. display none
  1358.  
  1359. .health.increase
  1360. &.me-board
  1361. &.opponent-board
  1362. &.hero
  1363. display block
  1364. color white
  1365. border 1px solid green
  1366. background alpha(green, 75%)
  1367. padding 2rem
  1368. label, .to
  1369. display none
  1370. .by
  1371. display block
  1372. .arrow
  1373. display none
  1374.  
  1375. // show floating numbers when the counter changes.
  1376. .card-change-value.counter.increase
  1377. display block
  1378. color white
  1379. opacity 0
  1380. animation fadeInUpScale 1.5s
  1381. animation-timing-function ease-in-out
  1382. animation-iteration-count 2
  1383. animation-direction alternate
  1384. animation-fill-mode backwards
  1385. font-size 18rem
  1386. background transparent
  1387. border 0
  1388. label, .by
  1389. display none
  1390. .to
  1391. display block
  1392. .arrow
  1393. display none
  1394.  
  1395.  
  1396. // On mobile devices, reduce the size of the card select popup so that it does not exceed the height of the screen.
  1397. @media (max-height: 800px)
  1398. .dialog-fullWidthModal
  1399. transform scale(.65) translateY(170px)
  1400. .swal-footer
  1401. margin-top 0
  1402. padding-top 0
  1403.  
  1404. /*
  1405. * Play Interface End.
  1406. */
  1407.  
  1408.  
  1409.  
  1410.  
  1411.  
  1412. /*
  1413. * Out of Game Interface.
  1414. */
  1415.  
  1416.  
  1417. // Control the positioning of the game modes screen when the player is deciding which game mode to play after hitting the play a match button.
  1418. .game-modes-selector
  1419. width 60vh
  1420. max-height 450px
  1421.  
  1422.  
  1423.  
  1424. body:not([achievement-tutorial_win="1"])
  1425. if REQUIRE_TUTORIAL_COMPLETE
  1426. .game-modes-selector
  1427. overflow-y hidden
  1428. max-height 350px
  1429. max-width 600px
  1430. padding 0
  1431.  
  1432. .grid
  1433. display flex
  1434. flex-direction column
  1435. justify-content center
  1436. .game-mode:not([data-id="tutorial"])
  1437. display none
  1438. .game-mode[data-id="tutorial"]
  1439. height 200px
  1440. padding 50px
  1441. padding-bottom 100px
  1442. margin-bottom 0
  1443. .game-mode-inner
  1444. height 100%
  1445. width 100%
  1446. .gradient
  1447. padding 0
  1448. text-align center
  1449. display flex
  1450. justify-content center
  1451. flex-direction column
  1452. .title
  1453. position static
  1454. display block
  1455. font-size 3em
  1456.  
  1457. .description
  1458. padding 1em
  1459. max-width 500px
  1460. margin 0 auto
  1461. display block
  1462.  
  1463. // .grid
  1464. // grid-template-columns \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto
  1465. // grid-template-rows \[row\] 4fr \[row\] 2fr
  1466. // display grid
  1467. // grid-gap 10px
  1468.  
  1469. // .box
  1470. // margin-bottom none
  1471. // height auto
  1472.  
  1473. /*
  1474. * Out of Game Interface End.
  1475. */
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!