You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

137 lines
2.3 KiB

  1. @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@600;700&display=swap');
  2. *{
  3. font-family: 'Cabin', sans-serif;
  4. }
  5. body
  6. {
  7. overflow: hidden;
  8. background-image: url('../img/Bg.png');
  9. background-size: cover;
  10. }
  11. /* ### Stapel-"Karte ziehen" ### */
  12. .stack-draw
  13. {
  14. max-width: 25vh;
  15. min-width: 20vh;
  16. position: absolute;
  17. top: 47vh;
  18. right: min(90%, (53% + 10vh));
  19. transform: translate(50%, -50%);
  20. }
  21. /* ### Stapel-"Karte legen" ### */
  22. .stack-put
  23. {
  24. max-width: 25vh;
  25. min-width: 20vh;
  26. position: absolute;
  27. top: 47vh;
  28. left: min(90%, (53% + 10vh));
  29. transform: translate(-50%, -50%);
  30. }
  31. #first-put-anim
  32. {
  33. top: 30vh;
  34. opacity: 0;
  35. }
  36. #first-put
  37. {
  38. opacity: 0;
  39. }
  40. .playerDeck{
  41. display: flex;
  42. justify-content: center;
  43. position: absolute;
  44. bottom: 0;
  45. left: 0;
  46. width: 100%;
  47. height: 30%;
  48. }
  49. .pictureCard
  50. {
  51. position: absolute;
  52. width: 8vw;
  53. box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
  54. background-color: rgb(0, 0, 0);
  55. border: 0.2vw solid black;
  56. border-radius: 1.5vw;
  57. transition: top 0.5s, width 0.5s, transform 0.5s, left 0.5s, opacity 0.5s;
  58. }
  59. .pictureCard img{
  60. width: 100%;
  61. }
  62. #sayUno{
  63. position: absolute;
  64. bottom: 0vh;
  65. left: 3vh;
  66. width: 100%;
  67. opacity: 0;
  68. }
  69. .uno{
  70. position: absolute;
  71. bottom: 10.5vw;
  72. left: 11vw;
  73. width: 25vw;
  74. transition: width ease-in-out 0.5s;
  75. transform: translate(-50%, 50%);
  76. }
  77. #sayUno-glow{
  78. opacity: 0.3;
  79. transition: width ease-in-out 0.5s, opacity 0.5s;
  80. }
  81. .selectColor {
  82. display: flex;
  83. align-items: center;
  84. opacity: 0;
  85. }
  86. .cc{
  87. position: absolute;
  88. width: 10vw;
  89. z-index: 1000;
  90. }
  91. #cc-blue{
  92. top: 20vw;
  93. left: 50vw;
  94. transition: top 0.5s, left 0.5s;
  95. }
  96. #cc-green{
  97. top: 20vw;
  98. right: 50vw;
  99. transition: top 0.5s, right 0.5s;
  100. }
  101. #cc-yellow{
  102. top: 10vw;
  103. right: 50vw;
  104. transition: top 0.5s, right 0.5s;
  105. }
  106. #cc-red{
  107. top: 10vw;
  108. left: 50vw;
  109. transition: top 0.5s, left 0.5s;
  110. }
  111. #cc-blue:hover{
  112. top: calc(20vw + 15px);
  113. left: calc(50vw + 15px);
  114. }
  115. #cc-red:hover{
  116. top: calc(10vw - 15px);
  117. left: calc(50vw + 15px);
  118. }
  119. #cc-yellow:hover{
  120. top: calc(10vw - 15px);
  121. right: calc(50vw + 15px);
  122. }
  123. #cc-green:hover{
  124. top: calc(20vw + 15px);
  125. right: calc(50vw + 15px);
  126. }