Changeset 87614a5 for styles


Ignore:
Timestamp:
06/11/22 12:46:20 (2 years ago)
Author:
anastasovv <simon@…>
Branches:
main
Children:
64dc53b
Parents:
6568bde
Message:

Blackjack prototype

Location:
styles
Files:
2 added
1 deleted
1 edited

Legend:

Unmodified
Added
Removed
  • styles/globals.css

    r6568bde r87614a5  
     1@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
    12html,
    23body {
    34  padding: 0;
    45  margin: 0;
    5   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    6     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     6  font-family: 'Inter', sans-serif;
    77}
    88
     
    1313
    1414* {
    15   box-sizing: border-box;
    16 }
     15  -webkit-box-sizing: border-box;
     16          box-sizing: border-box;
     17}
     18
     19p, h1, h3 {
     20  margin: 0;
     21}
     22
     23.app {
     24  color: white;
     25  letter-spacing: 1px;
     26  width: 100vw;
     27  height: 100vh;
     28  margin: auto;
     29  overflow: hidden;
     30  background-size: cover;
     31  background-repeat: no-repeat;
     32  background-position: 0% 50%;
     33  text-align: center;
     34}
     35
     36/**
     37  * Component <- Header
     38  */
     39header.header {
     40  display: -webkit-box;
     41  display: -ms-flexbox;
     42  display: flex;
     43  -webkit-box-pack: justify;
     44      -ms-flex-pack: justify;
     45          justify-content: space-between;
     46  -webkit-box-align: center;
     47      -ms-flex-align: center;
     48          align-items: center;
     49  width: 92vw;
     50  margin: auto;
     51  margin-top: 20px;
     52}
     53
     54header.header .logo {
     55  width: 80px;
     56  aspect-ratio: 1;
     57  border-radius: 100%;
     58  background-image: url("/images/logo.png");
     59  background-size: cover;
     60  border: 2px solid rgba(255, 255, 255, 0.2);
     61  cursor: pointer;
     62}
     63
     64header.header h2 {
     65  cursor: pointer;
     66}
     67
     68header.header nav ul {
     69  display: -webkit-box;
     70  display: -ms-flexbox;
     71  display: flex;
     72  -webkit-box-orient: horizontal;
     73  -webkit-box-direction: normal;
     74      -ms-flex-direction: row;
     75          flex-direction: row;
     76  list-style-type: none;
     77}
     78
     79header.header nav ul li {
     80  cursor: pointer;
     81  margin-right: 4rem;
     82}
     83
     84header.header nav ul li:last-child {
     85  margin-right: 0;
     86}
     87
     88/**
     89  * Component <- Full Width Text
     90  *
     91  * Used in "Welcome To Caessino"
     92  */
     93.fullwidthText {
     94  width: 100vw;
     95  display: -webkit-box;
     96  display: -ms-flexbox;
     97  display: flex;
     98  -webkit-box-orient: vertical;
     99  -webkit-box-direction: normal;
     100      -ms-flex-direction: column;
     101          flex-direction: column;
     102  -webkit-box-pack: center;
     103      -ms-flex-pack: center;
     104          justify-content: center;
     105  -webkit-box-align: center;
     106      -ms-flex-align: center;
     107          align-items: center;
     108  margin-top: 40px;
     109  padding: 15px 0 20px 0;
     110  background-color: rgba(0, 0, 0, 0.6);
     111}
     112
     113.fullwidthText h1 {
     114  color: #FFD700;
     115  font-weight: lighter;
     116  font-size: 2.5rem;
     117}
     118
     119.fullwidthText h3 {
     120  margin-top: 15px;
     121  font-weight: lighter;
     122}
     123
     124/**
     125  * Component <- Alert
     126  *
     127  * Similar to Full Width Text
     128  */
     129.alert {
     130  width: 100vw;
     131  display: -webkit-box;
     132  display: -ms-flexbox;
     133  display: flex;
     134  -webkit-box-orient: vertical;
     135  -webkit-box-direction: normal;
     136      -ms-flex-direction: column;
     137          flex-direction: column;
     138  -webkit-box-pack: center;
     139      -ms-flex-pack: center;
     140          justify-content: center;
     141  -webkit-box-align: center;
     142      -ms-flex-align: center;
     143          align-items: center;
     144  padding: 20px 0 25px 0;
     145  background-color: rgba(0, 0, 0, 0.9);
     146  position: absolute;
     147  top: 50vh;
     148  -webkit-transform: translateY(-70%);
     149          transform: translateY(-70%);
     150  -webkit-transition: '.5s linear';
     151  transition: '.5s linear';
     152}
     153
     154.alert h1 {
     155  color: #FFD700;
     156  font-weight: lighter;
     157  font-size: 2.5rem;
     158}
     159
     160.alert h3 {
     161  margin-top: 10px;
     162  font-weight: lighter;
     163}
     164
     165.alert button {
     166  width: 500px;
     167  margin-top: 20px;
     168}
     169
     170/**
     171  * Component <- Notification
     172  *
     173  * Displayed fixed in the top right corner
     174  */
     175.notification {
     176  position: fixed;
     177  top: 40px;
     178  right: 30px;
     179  width: 500px;
     180  min-height: 200px;
     181  display: -webkit-box;
     182  display: -ms-flexbox;
     183  display: flex;
     184  -webkit-box-orient: vertical;
     185  -webkit-box-direction: normal;
     186      -ms-flex-direction: column;
     187          flex-direction: column;
     188  -webkit-box-pack: center;
     189      -ms-flex-pack: center;
     190          justify-content: center;
     191  -webkit-box-align: end;
     192      -ms-flex-align: end;
     193          align-items: flex-end;
     194  font-size: 2rem;
     195  padding: 20px;
     196  border-radius: 15px;
     197  -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     198          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     199}
     200
     201.notification svg {
     202  cursor: pointer;
     203}
     204
     205.notification > div {
     206  -webkit-box-flex: 1;
     207      -ms-flex: 1;
     208          flex: 1;
     209  width: 100%;
     210  display: -webkit-box;
     211  display: -ms-flexbox;
     212  display: flex;
     213  -webkit-box-pack: center;
     214      -ms-flex-pack: center;
     215          justify-content: center;
     216  -webkit-box-align: center;
     217      -ms-flex-align: center;
     218          align-items: center;
     219  font-size: 1.5rem;
     220  margin-bottom: 1.2rem;
     221  text-align: center;
     222}
     223
     224/**
     225  * Component <- Game Circle
     226  *
     227  * Used in Landing Page -> to display the games in circles
     228  */
     229.gameCircles {
     230  display: -webkit-box;
     231  display: -ms-flexbox;
     232  display: flex;
     233  -webkit-box-orient: horizontal;
     234  -webkit-box-direction: normal;
     235      -ms-flex-direction: row;
     236          flex-direction: row;
     237  -webkit-box-pack: justify;
     238      -ms-flex-pack: justify;
     239          justify-content: space-between;
     240  -webkit-box-align: center;
     241      -ms-flex-align: center;
     242          align-items: center;
     243  width: 92vw;
     244  margin: auto;
     245  margin-top: 50px;
     246}
     247
     248.gameCircles .gameCircle {
     249  -webkit-transition: all .2s linear;
     250  transition: all .2s linear;
     251  cursor: pointer;
     252  display: -webkit-box;
     253  display: -ms-flexbox;
     254  display: flex;
     255  -webkit-box-orient: vertical;
     256  -webkit-box-direction: normal;
     257      -ms-flex-direction: column;
     258          flex-direction: column;
     259  -webkit-box-pack: center;
     260      -ms-flex-pack: center;
     261          justify-content: center;
     262  -webkit-box-align: center;
     263      -ms-flex-align: center;
     264          align-items: center;
     265}
     266
     267.gameCircles .gameCircle .circleLarge {
     268  -webkit-transition: all .2s linear;
     269  transition: all .2s linear;
     270  width: 22vw;
     271  aspect-ratio: 1;
     272  border-radius: 100%;
     273  background: -webkit-gradient(linear, left bottom, right top, from(#ffd900cc), to(#B65714));
     274  background: linear-gradient(to top right, #ffd900cc, #B65714);
     275  opacity: .95;
     276  display: -webkit-box;
     277  display: -ms-flexbox;
     278  display: flex;
     279  -webkit-box-orient: vertical;
     280  -webkit-box-direction: normal;
     281      -ms-flex-direction: column;
     282          flex-direction: column;
     283}
     284
     285.gameCircles .gameCircle .circleLarge .circle {
     286  border-radius: 100%;
     287  width: 98%;
     288  background-size: cover;
     289  margin: auto;
     290  aspect-ratio: 1;
     291}
     292
     293.gameCircles .gameCircle h3 {
     294  -webkit-transition: all .2s linear;
     295  transition: all .2s linear;
     296  font-weight: lighter;
     297  margin-top: 30px;
     298  opacity: 0;
     299}
     300
     301.gameCircles .gameCircle h1.loading {
     302  color: white;
     303  position: absolute;
     304  width: 100vw;
     305  top: 50vh;
     306  left: 50vw;
     307  -webkit-transform: translate(-50%, -50%);
     308          transform: translate(-50%, -50%);
     309  font-size: 5rem;
     310  z-index: 10;
     311}
     312
     313.gameCircles .gameCircle:hover .circleLarge {
     314  -webkit-transform: scale(1.1);
     315          transform: scale(1.1);
     316  opacity: 1;
     317}
     318
     319.gameCircles .gameCircle:hover h3 {
     320  opacity: 1;
     321}
     322
     323.gameCircles:hover .gameCircle .circleLarge {
     324  opacity: 1 !important;
     325}
     326
     327/**
     328  * Full Screen Overlay
     329  */
     330.fullscreen {
     331  position: fixed;
     332  top: 0;
     333  left: 0;
     334  width: 100vw;
     335  height: 100vh;
     336  background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
     337  background: linear-gradient(to right, #0B932E, #097625);
     338  color: #ead24d;
     339}
     340
     341.fs-centered > div {
     342  position: fixed;
     343  top: 50vh;
     344  left: 50vw;
     345  -webkit-transform: translate(-50%, -50%);
     346          transform: translate(-50%, -50%);
     347}
     348
     349.fs-inputs-container > div {
     350  margin: auto;
     351  margin-top: 2.4rem;
     352  width: -webkit-fit-content;
     353  width: -moz-fit-content;
     354  width: fit-content;
     355  display: -webkit-box;
     356  display: -ms-flexbox;
     357  display: flex;
     358  -webkit-box-orient: vertical;
     359  -webkit-box-direction: normal;
     360      -ms-flex-direction: column;
     361          flex-direction: column;
     362  -webkit-box-pack: center;
     363      -ms-flex-pack: center;
     364          justify-content: center;
     365  -webkit-box-align: center;
     366      -ms-flex-align: center;
     367          align-items: center;
     368}
     369
     370.fs-inputs-container > div > span {
     371  margin-bottom: .5rem;
     372  font-size: 1.5rem;
     373}
     374
     375.fs-inputs-container > div > input {
     376  margin-bottom: 2rem;
     377  font-size: 2rem;
     378}
     379
     380.statsScreen svg {
     381  cursor: pointer;
     382  font-size: 2.5rem;
     383  color: white;
     384}
     385
     386.statsScreen > div h1 {
     387  font-size: 2.5rem;
     388  margin-bottom: 5rem;
     389}
     390
     391.statsScreen > div p {
     392  display: -webkit-box;
     393  display: -ms-flexbox;
     394  display: flex;
     395  -webkit-box-pack: justify;
     396      -ms-flex-pack: justify;
     397          justify-content: space-between;
     398  font-size: 1.5rem;
     399  margin-bottom: 1rem;
     400}
     401
     402.statsScreen > div p:nth-child(2n) {
     403  color: white;
     404}
     405
     406.statsScreen > div p span {
     407  margin-left: 5rem;
     408}
     409
     410.manageCreditsScreen svg {
     411  cursor: pointer;
     412  font-size: 2.5rem;
     413  color: white;
     414}
     415
     416.manageCreditsScreen > div h1 {
     417  font-size: 1.5rem;
     418  margin-bottom: 1rem;
     419}
     420
     421.manageCreditsScreen > div p {
     422  margin-bottom: 5rem;
     423  color: white;
     424}
     425
     426.manageCreditsScreen > div button {
     427  width: 100%;
     428}
     429
     430.inlineAlert {
     431  cursor: pointer;
     432  background-color: #ffdddd;
     433  padding: .8rem 2.4rem;
     434  border-radius: 15px;
     435  color: #ff0000;
     436  font-size: 1.8rem !important;
     437  font-weight: 100;
     438  letter-spacing: -.030em;
     439}
     440
     441/**
     442  * Component <- Loading
     443  */
     444.loadingScreen h1 {
     445  font-size: 5rem;
     446}
     447
     448/**
     449  * Component <- RegisterScreen
     450  */
     451/**
     452  * Primary Thingies
     453  */
     454.primaryButton {
     455  background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
     456  background: linear-gradient(to right, #0B932E, #097625);
     457  color: #ead24d;
     458  outline: none;
     459  border: none;
     460  border-radius: 10px;
     461  font-size: 1.5rem;
     462  font-weight: bold;
     463  padding: 5px 20px;
     464  -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     465          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     466  cursor: pointer;
     467  -webkit-transition: all .2s linear;
     468  transition: all .2s linear;
     469}
     470
     471.primaryButton:hover {
     472  -webkit-transform: scale(1.1) rotateZ(-1deg);
     473          transform: scale(1.1) rotateZ(-1deg);
     474}
     475
     476.primaryButton:active {
     477  -webkit-transition: .05s linear;
     478  transition: .05s linear;
     479  -webkit-transform: scale(1) rotateZ(-1deg);
     480          transform: scale(1) rotateZ(-1deg);
     481}
     482
     483.secondaryButton {
     484  background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea));
     485  background: linear-gradient(to right, #4d99ea, #4d99ea);
     486  color: white;
     487  outline: none;
     488  border: none;
     489  border-radius: 10px;
     490  font-size: 1.5rem;
     491  font-weight: bold;
     492  padding: 5px 20px;
     493  -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     494          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     495  cursor: pointer;
     496  -webkit-transition: all .2s linear;
     497  transition: all .2s linear;
     498}
     499
     500.secondaryButton:hover {
     501  -webkit-transform: scale(1.1) rotateZ(-1deg);
     502          transform: scale(1.1) rotateZ(-1deg);
     503}
     504
     505.secondaryButton:active {
     506  -webkit-transition: .05s linear;
     507  transition: .05s linear;
     508  -webkit-transform: scale(1) rotateZ(-1deg);
     509          transform: scale(1) rotateZ(-1deg);
     510}
     511
     512/**
     513  * Input Sliders
     514  */
     515.primarySlider {
     516  -webkit-appearance: none;
     517  width: 250px;
     518  height: 10px;
     519  background: #0B932E;
     520  outline: none;
     521  border-radius: 10px;
     522  -webkit-transition: .2s;
     523  -webkit-transition: opacity .2s;
     524  transition: opacity .2s;
     525  -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
     526          box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
     527}
     528
     529.primarySlider:hover {
     530  opacity: 1;
     531}
     532
     533.primarySlider::-webkit-slider-thumb {
     534  -webkit-appearance: none;
     535  appearance: none;
     536  outline: none;
     537  border: none;
     538  width: 35px;
     539  height: 35px;
     540  border-radius: 50%;
     541  background: url("/images/gold-coin.png");
     542  background-size: contain;
     543  background-color: #ead24d;
     544  cursor: pointer;
     545}
     546
     547.primarySlider::-moz-range-thumb {
     548  -moz-appearance: none;
     549       appearance: none;
     550  outline: none;
     551  border: none;
     552  width: 35px;
     553  height: 35px;
     554  border-radius: 50%;
     555  background: url("/images/gold-coin.png");
     556  background-size: contain;
     557  background-color: #ead24d;
     558  cursor: pointer;
     559}
     560
     561/**
     562  * Scrollbar
     563  */
     564/* width */
     565::-webkit-scrollbar {
     566  width: 15px;
     567}
     568
     569/* Track */
     570::-webkit-scrollbar-track {
     571  background: #0B932E;
     572}
     573
     574/* Handle */
     575::-webkit-scrollbar-thumb {
     576  background: #ead24d;
     577}
     578
     579/* Handle on hover */
     580::-webkit-scrollbar-thumb:hover {
     581  background: #efcb00;
     582}
     583
     584/**
     585  * File <- Blackjack Main
     586  * Components <- PlayButtons, Cards
     587  */
     588.blackjackButtons {
     589  position: absolute;
     590  left: 0;
     591  top: 90vh;
     592  width: 100vw;
     593  height: 10vh;
     594  overflow: hidden;
     595}
     596
     597.blackjackButtons > div {
     598  display: -webkit-box;
     599  display: -ms-flexbox;
     600  display: flex;
     601  -webkit-box-orient: horizontal;
     602  -webkit-box-direction: normal;
     603      -ms-flex-direction: row;
     604          flex-direction: row;
     605  -webkit-box-pack: center;
     606      -ms-flex-pack: center;
     607          justify-content: center;
     608  -webkit-box-align: center;
     609      -ms-flex-align: center;
     610          align-items: center;
     611  -webkit-transition: .5s ease-in-out;
     612  transition: .5s ease-in-out;
     613}
     614
     615.blackjackButtons > div > button {
     616  width: 300px;
     617}
     618
     619.blackjackButtons > div > button:nth-child(2) {
     620  margin-left: 30px;
     621}
     622
     623.blackjackCards .card {
     624  aspect-ratio: 400/560;
     625  height: 150px;
     626  background-size: contain;
     627  position: absolute;
     628  -webkit-transition: .5s ease-in-out;
     629  transition: .5s ease-in-out;
     630  border-radius: 10px;
     631  border: 1px solid black;
     632}
     633
     634.blackjackDisplayBet {
     635  position: absolute;
     636  -webkit-transform: translate(-50%, -50%);
     637          transform: translate(-50%, -50%);
     638  left: 51vw;
     639  top: 63.5vh;
     640}
     641
     642.blackjackSideBetsModal {
     643  z-index: 20;
     644  -webkit-box-orient: vertical !important;
     645  -webkit-box-direction: normal !important;
     646      -ms-flex-direction: column !important;
     647          flex-direction: column !important;
     648  position: fixed;
     649  left: 50vw;
     650  top: 45vh;
     651  width: 41vw;
     652  height: 80vh;
     653  padding: 10px;
     654  -webkit-transform: translate(-50%, -50%);
     655          transform: translate(-50%, -50%);
     656  background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0));
     657  background: linear-gradient(to right, #0B932Ec0, #097625e0);
     658  -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
     659          box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
     660  border-radius: 20px;
     661  overflow-y: scroll;
     662}
     663
     664.blackjackSideBetsModal .blackjackSideBetSelect {
     665  display: -webkit-box;
     666  display: -ms-flexbox;
     667  display: flex;
     668  -webkit-box-orient: vertical;
     669  -webkit-box-direction: normal;
     670      -ms-flex-direction: column;
     671          flex-direction: column;
     672  width: 100%;
     673}
     674
     675.blackjackSideBetsModal .blackjackSideBetSelect:first-child {
     676  margin-top: 10rem;
     677}
     678
     679.blackjackSideBetsModal .blackjackSideBetSelect h1 {
     680  margin-bottom: 1rem;
     681  color: #ead24d;
     682}
     683
     684.blackjackSideBetsModal .blackjackSideBetSelect > div {
     685  text-align: left;
     686}
     687
     688.blackjackSideBetsModal .blackjackSideBetSelect > div p {
     689  margin-bottom: 1rem;
     690  padding: 10px 20px;
     691  border-radius: 5px;
     692  cursor: pointer;
     693  -webkit-transition: all .25s linear;
     694  transition: all .25s linear;
     695}
     696
     697.blackjackSideBetsModal .blackjackSideBetSelect > div p span {
     698  font-size: 1.2rem;
     699  color: #ead24d;
     700}
     701
     702.blackjackSideBetsModal .blackjackSideBetSelect > div p:hover {
     703  color: #ead24d;
     704  -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     705          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
     706}
     707
     708.blackjackSideBetsChooseCreditsModal {
     709  z-index: 20;
     710  -webkit-box-orient: vertical !important;
     711  -webkit-box-direction: normal !important;
     712      -ms-flex-direction: column !important;
     713          flex-direction: column !important;
     714  position: fixed;
     715  left: 50vw;
     716  top: 45vh;
     717  width: 41vw;
     718  height: 80vh;
     719  padding: 10px;
     720  -webkit-transform: translate(-50%, -50%);
     721          transform: translate(-50%, -50%);
     722  background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080));
     723  background: linear-gradient(to right, #00000080, #00000080);
     724  -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
     725          box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
     726  border-radius: 20px;
     727}
     728
     729.blackjackSideBetsChooseCreditsModal p {
     730  margin-bottom: 1rem;
     731  padding: 10px 20px;
     732  border-radius: 5px;
     733  -webkit-transition: all .25s linear;
     734  transition: all .25s linear;
     735}
     736
     737.blackjackSideBetsChooseCreditsModal p span {
     738  font-size: 1.2rem;
     739  color: white;
     740}
     741/*# sourceMappingURL=globals.css.map */
Note: See TracChangeset for help on using the changeset viewer.