diff --git a/SwichGIT/HighscoreBD/HighscoreBD b/SwichGIT/Highscore/HighscoreBD similarity index 100% rename from SwichGIT/HighscoreBD/HighscoreBD rename to SwichGIT/Highscore/HighscoreBD diff --git a/SwichGIT/HighscoreBD/HighscoreBD.db b/SwichGIT/Highscore/HighscoreBD.db similarity index 97% rename from SwichGIT/HighscoreBD/HighscoreBD.db rename to SwichGIT/Highscore/HighscoreBD.db index ceca40c..ed3dfae 100644 Binary files a/SwichGIT/HighscoreBD/HighscoreBD.db and b/SwichGIT/Highscore/HighscoreBD.db differ diff --git a/SwichGIT/HighscoreBD/afficherjoueur.php b/SwichGIT/Highscore/afficherjoueur.php similarity index 56% rename from SwichGIT/HighscoreBD/afficherjoueur.php rename to SwichGIT/Highscore/afficherjoueur.php index 70c9d66..fab088d 100644 --- a/SwichGIT/HighscoreBD/afficherjoueur.php +++ b/SwichGIT/Highscore/afficherjoueur.php @@ -4,4 +4,4 @@ require_once "connexionBD.php"; $db=new MyDB(); -$afficher = $db->query('SELECT nomjoueur FROM JOUEUR '); \ No newline at end of file +$afficher = $db->query('SELECT nomjoueur FROM JOUEUR'); \ No newline at end of file diff --git a/SwichGIT/Highscore/connexionBD.php b/SwichGIT/Highscore/connexionBD.php new file mode 100644 index 0000000..6b8d43c --- /dev/null +++ b/SwichGIT/Highscore/connexionBD.php @@ -0,0 +1,8 @@ +open('HighscoreBD.db'); + } +} \ No newline at end of file diff --git a/SwichGIT/Highscore/css/PageDaccueil.css b/SwichGIT/Highscore/css/PageDaccueil.css new file mode 100644 index 0000000..d7c6706 --- /dev/null +++ b/SwichGIT/Highscore/css/PageDaccueil.css @@ -0,0 +1,493 @@ +#pageAccueil { + visibility: visible; +} + +#cloud { + z-index: 10 +} + +#mount1 { + z-index: 11; + position: absolute; +} + +#mount2 { + z-index: 10; +} + +.containerparam{ + position: absolute; + display: flex; + margin-left: 1vw; +} + +.containerparam > div { + margin-right: 4vh; +} + +/*SETTINGS*/ +#forme{ + visibility: hidden; +} + +#couleurs{ + z-index: 1; +} + +.pannel{ + height: 100px; + width: 100px; + background-color: red; +} + +#pickrcontner{ + position: relative; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.Mode_Setting{ + height: 20vw; + position: relative; + margin : 0 auto; +} +#BottomSetings{ + position: absolute; + left: 0; + bottom: 0; + height: 5vw; + width: 100%; + border-radius: 0 0 0.3vw 0.3vw; +} + +#SettingBefore{ + height: 5vw; + width: 5vw; + background-color: var(--lightsedonca); + color: black; + font-size: 3vw; + visibility: collapse; +} +#SettingAfter{ + bottom: 5vw; + position: relative; + height: 5vw; + width: 5vw; + background-color: var(--lightsedonca); + float: right; +} + +#testSettings{ + position: absolute; + color: black; + bottom: 0; + left: 18vw; +} + + +#ShapeSettings{ + height: 100%; + width: 100%; + margin: auto 2vw; + display: flex; + flex-wrap: wrap; +} +.ShapeContener{ + height: 9vw; + width: 9vw; + margin-left: 1vw; + position: relative; + display: table-cell; + vertical-align: middle; +} +.settingShape{ + background-color: #333; +} + +.Colorone{background-color: var(--colorbase);} +.Colortwo{background-color: var(--colorcarre);} +.Colorthree{background-color: var(--colorone);} +.Colorfour{background-color: var(--colortwo);} +.Colorfive{background-color: var(--colorthree);} + + + +/*Bouton info*/ +#infosec{ + z-index:15; + width: 2vw; + margin: 0 auto; +} + +#info { + color: var(--lightprima); + text-decoration: none; + font-size: 45px; +} + +#info:hover { + color: var(--lightprima); +} + +.activity { + padding: 0; + list-style: none; +} + +li { + -webkit-transition: box-shadow 0.2s ease; + -moz-transition: box-shadow 0.2s ease; + transition: box-shadow 0.2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-radius: 50%; + color: #B7B7B7; + display: inline-block; + font-size: 0.889em; + height: 3em; + position: relative; + text-align: center; + text-transform: lowercase; + width: 3em; + line-height: 3em; +} + + li a { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + li:hover { + box-shadow: 0 0 0 7px var(--lightsedonca); + font-size:99%; + position:relative; + right:5%; + } + + li:before { + border-radius: 50%; + bottom: 0; + box-shadow: 0 0 0 4px var(--lightsedonca); + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + background-color: var(--lightsedonca); + } + +/*Les rčgles popups*/ +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; + z-index: 21; +} + + .overlay:target { + visibility: visible; + opacity: 1; + } + +.popup { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 30%; + position: relative; + top:25%; +} + + .popup h2 { + margin-top: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; + } + + .popup .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; + } + + .popup .close:hover { + color: #06D85F; + } + + .popup .content { + max-height: 30%; + overflow: auto; + } + + /*Parametres*/ + +.popup2 { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 45%; + height: 65%; + position: relative; + top:10%; +} + +.popup2 h2 { + margin-top: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; +} +h3 { + margin: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; +} +.popup2 .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; +} + .popup2 .close:hover { + color: #06D85F; + } +.popup2 .content { + max-height: 30%; +} + +.titre{ + display: ruby-base; +} + +label { + cursor: pointer; + text-indent: -9999px; + width: 2vw; + height: 1vw; + background: grey; + display: block; + border-radius: 100px; + position: relative; +} + +label:after { + content: ''; + position: absolute; + top: 0.1vw; + left: 0.1vw; + width: 0.8vw; + height: 0.8vw; + background: #fff; + border-radius: 90px; + transition: 0.3s; +} + +input:checked + label { + background: #bada55; +} + +input:checked + label:after { + left: calc(100% - 0.1vw); + transform: translateX(-100%); +} + +label:active:after { + width: 1.4vw; +} +/* J'ai trop avancé, mode multi*/ + + +#containpseudo { + position: absolute; + height: 15%; + width: 30%; + z-index: 12; + left: 35%; + top: 30%; +} + +.bouttonvalider:hover { + box-shadow: 0 0 0 8px var(--lightsedonca); + font-size: 100%; + position: relative; + transition: box-shadow 0.2s ease; +} + +#bouttonvalider:hover { + box-shadow: 0 0 0 5px var(--lightsedonca); + position: relative; +} + +#pseudoenter { + background-color: red; + height: 100%; + border-radius: 45px; + background-color: #B130DE; +} + +#inputpseudo { + position: absolute; + width: 99%; + height: 65%; + border-radius: 30px; + font-size: 3vw; + background-color: transparent; + -moz-appearance: none; + text-align: center; + color: #707070; + border-color: transparent; + font-family: impact, Arial Black; + z-index: 11; +} + +#fondinput { + background-color: red; + position: absolute; + width: 97%; + background-color: var(--lightsedonca); + height: 90%; + border-radius: 40px; + left: 1.5%; + top: 5%; + z-index: 10; +} + + + +#modeprec{ + height: 100%; + width: 15%; + float: left; + position: relative; +} + +#modesuiv{ + height: 100%; + width: 15%; + float: right; + position: relative; +} + +#textdumode{ + height: 100%; + width: 70%; + position: absolute; + left: 15%; +} + + + + + +#buttonadd { + position: absolute; + top: 30%; + right: -12%; + height: 3vw; + width: 3vw; + border-radius: 2vw; + background-color: #B130DE; + z-index: 18; +} + +#textplus { + font-size: 3vw; + font-family: arial, Arial Black; + position: absolute; + margin-top: -0.15vw; + margin-left: 0.65vw; + color: var(--lightprima); +} + +#containplayers { + position: absolute; + background-color: transparent; + color: var(--lightsedonca); + width: 15vw; + height: 20vw; + z-index: 17; + right: 0%; + top: 8vw; +} + +.pseudojoueur { + float: right; + margin-top: 0px; + margin-bottom: 3%; + margin-right: 10%; + font-family: Lucida Console, Arial Black, Arial; + font-size: 2vw; +} + +#pseudolist { + width: 100%; + height: 1.7vw; +} + +/* === FORMES === */ + +.contentButton{ + height: 3vw; + width: 15%; + margin : 0 auto; + position: relative; + bottom: 5vw; +} + +.buttonvalidersettings{ + height: 100%; + width: 100%; + border-style: none; + background-color: red; + color: white; + font-family: arial; + font-size: 2vw; + border-radius: 15px; +} + +.buttonvalidersettings:active{ + background-color: blue; +} +/* LANGUES */ + + +#cf2 img { + position:absolute; + left:0; + cursor: pointer; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; +} + +#cf2 img.transparent { +opacity:0; +} +#cf_onclick { +cursor:pointer; +} + + + + diff --git a/SwichGIT/Highscore/css/PartieGame.css b/SwichGIT/Highscore/css/PartieGame.css new file mode 100644 index 0000000..01657e7 --- /dev/null +++ b/SwichGIT/Highscore/css/PartieGame.css @@ -0,0 +1,111 @@ + +#pageGame { + visibility: hidden; + top: -10vh; + position: relative; +} + +.menuhaut { + height: 10vh; + width: inherit; + display: flex; +} + +/*Partie Menu du haut*/ +.menu{ + align-items: center; + justify-content: center; +} + + +.retourstp { + position: absolute; +} + +#Redistribution{ + position:relative; + top:-3vw; +} + + +#affSolution { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2.5vw; + color: var(--lightsedonca); + width: inherit; +} + +#textjouer2 { + position: absolute; + text-align: center; + font-family: Montserrat, impact, Arial Black; + margin-top: 0.6vw; + color: var(--lightsedonca); + width: inherit; + +} + +#btnvalider2 { + position: relative; + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 0.2vw; + color: var(--lightsedonca); +} + +#btnvalider3 { + position: relative; + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 0.2vw; + color: var(--lightsedonca); +} + +#Redistribution2 { + position: relative; + top:-3vw; + left:68%; +} + +#Redistribution3 { + position: relative; + top:-3vw; + left: 50%; +} + + +.bouttonvalider2:hover { + box-shadow: 0 0 0 8px var(--lightsedonca); + font-size: 100%; + position: relative; + transition: box-shadow 0.2s ease; +} + +#progressbar +{ + position : relative; + width: 1100px; + padding:1px; + background-color:white; + border:1px solid black; + height:10px; + border-radius: 5px; + margin-top: 40px; + margin-right: auto; + margin-left: auto; + +} + +#indicateur +{ + width: 800px; + background-color : green; + height:10px; + margin: 0; + +} \ No newline at end of file diff --git a/SwichGIT/Highscore/css/Resp3.css b/SwichGIT/Highscore/css/Resp3.css new file mode 100644 index 0000000..1bc656a --- /dev/null +++ b/SwichGIT/Highscore/css/Resp3.css @@ -0,0 +1,84 @@ +/*Ecran*/ +@media screen and (min-width: 960px) { + /*ROND*/ + .anneau { + position: relative; + background-color: var(--colorbase); + border-radius: var(--v); + height: var(--v); + width: var(--v); + display: table-cell; + vertical-align: middle; + } + .anneau2 { + position: relative; + background-color: white; + border-radius: var(--v); + height: var(--v); + width: var(--v); + left : calc((var(--u) - var(--v))/2); + display: table-cell; + vertical-align: middle; + } + .anneau3 { + position: relative; + background-color: var(--colorbase); + border-radius: var(--v); + height: var(--v); + width: var(--v); + margin-left: auto; + margin-right: auto; + } + .rondinterieur { + background-color: var(--lighttercia); + height: var(--w); + width: var(--w); + display: table; + margin: 0 auto; + border-radius: var(--w); + } + .rond { + display: table; + margin: 0 auto; + background-color: var(--colorbase); + height: var(--w); + width: var(--w); + border-radius: var(--w); + } + + .rondcache { + display: table; + margin: 0 auto; + background-color: black; + border-radius: var(--y); + } + .rond2 { + display: table; + margin: 0 auto; + background-color: white; + height: var(--w); + width: var(--w); + border-radius: var(--w); + } + .rond3 { + position: relative; + top : calc((var(--v) - var(--w))/ 2); + left : calc((var(--v) - var(--w))/2); + display: table-cell; + vertical-align: middle; + background-color: white; + height: var(--w); + width: var(--w); + border-radius: var(--w); + } + .rond4 { + display: table; + margin: 0 auto; + background-color: var(--colorbase); + height: var(--w); + width: var(--w); + border-radius: var(--w); + } +} + + \ No newline at end of file diff --git a/SwichGIT/Highscore/css/base.css b/SwichGIT/Highscore/css/base.css new file mode 100644 index 0000000..a4ff6d2 --- /dev/null +++ b/SwichGIT/Highscore/css/base.css @@ -0,0 +1,123 @@ +:root{ + /*couleur hĂ©hĂ©*/ + --lightprima: #DEDEDE; + --lightsedonca: #B7B7B7; + --lighttercia: #E6E6E6; + /*Couleur bases*/ + + --colorbase : #e9546f;/*ROND*/ + --colorcarre : #c97fb3;/*CARRE*/ + --colorone : #00a088;/*TRIANGLE*/ + --colortwo : #5880c1;/*CROIX*/ + --colorthree : #C800FF;/*LOSANGE*/ + --colorfour : #E6DA27;/*PENTA*/ + --colorfive : #2E6DB4;/*HEXA*/ + --colorsix : #E6792F;/*HOCTO*/ + + /*Tailles cartes*/ + --tailleTablette : 12vw; + --taille: 10vw; + /*Les formes*/ + --u: calc(var(--x) / 2.75); + --v: calc(var(--y) / 2.75); + --w: calc(var(--z) / 2.75); + /*Les formes settings*/ + --x : 10vw; + --y : 7vw; + --z : 3.75vw; + /*Formes ete*/ + --l: 3vw; + --m: 2.5vw; + --n: 1.5vw; +} + +.test{ + color: black; +} + +a { + cursor: pointer; + z-index: 60; +} + + + +body { + background-color: var(--lightprima); + height: 100%; + overflow-x: hidden; + overflow-y: hidden; + /*Desactiver la selection*/ + -webkit-user-select: none; /* Chrome / Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE 10+ */ + user-select: none; +} + + +#ContainBottom { +position: absolute; +margin-left: 25vw; +height: 12vw; +width: auto; +bottom: 0; +z-index: 20; +} + +#clic{ +position: absolute; +left: 55vw; +top : 7vw; +height: auto; +width: 15vw; +} + +#card-conteneur{ +z-index: 20; +position: absolute; +left: 0vw; +} + +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; + margin-top: -7vw; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/SwichGIT/Highscore/css/desktops.css b/SwichGIT/Highscore/css/desktops.css new file mode 100644 index 0000000..5ae9c5d --- /dev/null +++ b/SwichGIT/Highscore/css/desktops.css @@ -0,0 +1,469 @@ +/*Ecran*/ +@media screen and (min-width: 992px) { + + /*PARTIE FORMES*/ + .containform3 { + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; + /*vertical-align: middle;*/ + } + + .containform3carte { + position: relative; + height: var(--l); + width: var(--l); + display: table-cell; + /*vertical-align: middle;*/ + } + + .containinte { + /*PROBLEME SIZE*/ + top: calc((var(--y) - var(--z)) / 2); + left: calc((var(--y) - var(--z)) / 2); + height: var(--z); + width: var(--z); + z-index: 2; + position: absolute; + } + + .cache { + top: calc((var(--x) - var(--y)) / 2.8); + left: calc((var(--x) - var(--y)) / 2.2); + height: calc(var(--y)*1.05); + width: calc(var(--y)*1.05); + z-index: 2; + position: absolute; + z-index: 15; + } + + #choosemode { + height: 4vw; + width: 16vw; + position: absolute; + left: 42vw; + top: 50vh; + z-index: 15; + } + + #choosedimension { + height: 4vw; + width: 16vw; + position: absolute; + left: 42vw; + top: 55vh; + z-index: 15; + } + + #conteneurmode { + width: 80%; + height: 2vw; + left: 10%; + top: 25%; + position: absolute; + margin: 0 auto; + background-color: var(--lightsedonca); + border-radius: 5vw; + } + + #triangleprec { + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-right: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; + } + + #trianglesuiv { + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-left: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; + } + + #textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 1vw; + color: #707070; + text-align: center; + margin: 5% auto 0 auto; + } + + #textdimension { + font-family: Lucida Console, Arial Black, Arial; + font-size: 1vw; + color: #707070; + text-align: center; + margin: 5% auto 0 auto; + } + + #formSize { + margin: 0 auto; + width: 100%; + height: 3vw; + } + + .slider-container .bar .fill { + display: block; + width: 50%; + height: 100%; + background-color: #6200ee; + } + + .slider-container .slider { + position: relative; + z-index: 2; + -webkit-appearance: none; + width: 100%; + height: 10px; + border-radius: 5px; + outline: none; + background-color: transparent; + } + + .slider.container { + position: relative; + } + + .slider-container .bar { + position: absolute; + z-index: 1; + left: 0; + width: 100%; + height: 10px; + border-radius: 5px; + background-color: #c6aee7; + overflow: hidden; + } + /*Moz*/ + .slider-container .slider::-moz-range-thumb { + -webkit-appearance: none; + width: 1vw; + height: 1vw; + background-color: #6200ee; + border-radius: 1vw; + cursor: pointer; + outline: none; + box-shadow: 0 0 0 0 rgba(98, 0,238, .1); + transition: .3s ease-in-out; + } + + .slider-container .slider::-moz-range-thumb:hover { + box-shadow: 0 0 0 10px rgba(98,0,238,.1); + } + + .slider-container .slider:active::-moz-range-thumb { + box-shadow: 0 0 0 20px rgba(98,0,238,.2); + } + + /*===========================================*/ + + .logoboutton { + font-size: 2vw; + color: var(--lightprima); + margin: 0.25vw; + } + + /*Externe*/ + .bouttonMenuHaut { + height: 4vw; + width: 4vw; + background-color: var(--lightsedonca); + border-radius: 50%; + margin: 0 auto; + margin-top: 0.45vw; + position: relative; + display: block; + } + + #affPoints { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2vw; + margin-top: 1.2vw; + color: var(--lightsedonca); + } + + .divmenu { + width: 10vw; + height: inherit; + margin-right: 1vw; + } + + .containButtonForm { + height: 2.5vw; + width: 2.5vw; + margin: 0.75vw; + position: absolute; + } + + .buttonretour { + position: relative; + height: 4vh; + width: 4vh; + border-radius: 55vw; + background-color: var(--lightsedonca); + z-index: 5; + margin-left: 2vw; + top: 1.75vw; + } + + .flex-item { + background: var(--lightsedonca); + width: var(--taille); + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + .item-form { + width: 3vw; + padding-left: 0.1vw; + margin-top: 0.25vw; + height: 3vw; + border-radius: 10px; + display: table-cell; + position: relative; + vertical-align: middle; + background-color: var(--lighttercia); + } + + .containcards { + overflow-x: auto; + display: grid; + grid-template-columns: repeat(8,auto); + grid-template-rows: repeat(2,auto); + padding-top: 1vw; + justify-content: center; + } + + .logop2 img { + width: 12vw; + padding-top: 1vh; + position: relative; + } + + + .txt { + position: absolute; + font-family: Arial Black; + color: var(--lightprima); + font-size: 1.5vw; + left: 0.4vw; + top: -1.6vh; + } + + .logo img { + position: absolute; + width: 12vw; + left: 44vw; + top: 13%; + z-index: 11; + } + + .mounts img { + position: absolute; + height: 100%; + width: 100%; + pointer-events: none; + margin-left: -10px; + } + + #contourbuttonvalider { + position: absolute; + border-radius: 45px; + left: 9.2vw; + top: 3.5vw; + height: 4vw; + width: 12vw; + background-color: var(--lightsedonca); + z-index: 15; + } + + .bouttonvalider { + position: absolute; + height: 3.4vw; + width: 11.4vw; + top: 0.3vw; + left: 0.3vw; + border-radius: 30px; + } + + .violet { + background-color: #B130DE; + } + + .vert { + background-color: #00CC66; + } + + #textjouerr { + font-family: Montserrat, impact, Arial Black; + position: absolute; + font-size: 2.5vw; + margin-top: 0.2vw; + color: var(--lightsedonca); + text-align: center; + width: inherit; + } + + #containBottom{ + position: absolute; + bottom: 3vh; + width: auto; + left: 50%; + z-index: 20; + height: auto; + } + + #containScore { + display: flex; + justify-content: center; + position: relative; + left: -50%; + + } + + .titreScore{ + font: 700 5vh "Poppins", sans-serif; + color: #2B2D2F; + position: relative; + left: -50%; + text-align: center; + } + + .case-score{ + padding: 4px; + position: relative; + z-index: 1; + width: 6vw; + height: 6vw; + margin: 1vw; + cursor: default; + transition: all 0.3s ease; + } + + .case-score .score-description { + background-color: var(--lightsedonca); + padding: 10px 15px; + width: calc(100% - 30px); + height: calc(100% - 20px); + transition: inherit; + } + + .case-score .score-position { + font: 700 2vw/1.3 "Poppins", sans-serif; + margin: 0 0 0; + transition: 0.2s ease 150ms; + font-size: 2vw; + font-family:"Poppins", sans-serif; + } + .case-score .score-pseudo, .score-points { + font: 500 12px "Poppins", sans-serif; + margin-top: -0.2em; + font-size: 0.8vw; + } + + .case-score:after { + z-index: 10; + background: #f9f8f7; + color: #333; + width: 180px; + position: absolute; + top: 80%; + opacity: 0; + transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; + height: auto; + font-size: 12px; + line-height: 1.4; + padding: 10px; + margin: 0 0 0 -50px; + border-radius: 6px; + text-align: center; + } + .case-score:hover { + transform: scale(1.12); + z-index: 10; + } + + .case-score:hover .score-description { + background: transparent; + } + .case-score:hover .score-position, + .case-score:hover .score-pseudo, + .case-score:hover .score-points { + -webkit-text-fill-color: #222; + } + .case-score:hover:after { + top: 105%; + opacity: 1; + } + + .first { + background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%); + } + .first .score-position, + .first .score-pseudo, + .first .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .second { + background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%); + } + + .second .score-position, + .second .score-pseudo, + .second .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .third { + background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%); + } + + .third .score-position, + .third .score-pseudo, + .third .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .nopodium { + background: linear-gradient(to bottom right, #2c3e50 0%, #B7B7B7 90%); + } + + .nopodium .score-position, + .nopodium .score-pseudo, + .nopodium .score-points { + background: -webkit-linear-gradient(#3A3B3C, #3A3B3C ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + #infosec2{ + z-index:15; + width: 2vw; + position: relative; + margin: 0 auto; + margin-left: 0px; + } + +} diff --git a/SwichGIT/Highscore/css/formes.css b/SwichGIT/Highscore/css/formes.css new file mode 100644 index 0000000..03ba9dc --- /dev/null +++ b/SwichGIT/Highscore/css/formes.css @@ -0,0 +1,156 @@ +.containform { + position: relative; + +} + +.ajustementPetiteForme{ + margin-top: 25%; +} + +.ajustementGrandeForme{ + margin-top: 0.2vw; + margin-left: 0.2vw; +} + +.containform2{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; + vertical-align: middle; + background-color: black; +} + + +/*ROND*/ +.containexte{ + height: var(--y); + width: var(--y); + margin: 0 auto; + position: relative; + top: calc(var(--x)/8); +} + +#cacherond{ + display: none; +} + + + +.round{ + border-radius: 5vw; +} + +.cb{ + background-color: white; +} + +.cn{ + background-color: black; +} + + + + + +/* UTILISATION FORMES CARTES*/ +.containformCarte{ + position: relative; + height: var(--x); + width: var(--x); + display: table-cell; +} + +.carre{ + -webkit-clip-path: inset(0 0 0 0); + clip-path: inset(0 0 0 0); +} + +.triangle{ + -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); +} + +.castriangle{ + margin-top: calc( (var(--y) - var(--z)) / 5); +} + +.caspenta{ + margin-top: calc( (var(--y) - var(--z)) / 10); +} + +.castrianglec{ + margin-top: calc( (var(--m) - var(--n)) / 5); +} + +.caspentac{ + margin-top: calc( (var(--m) - var(--n)) / 10); +} + +.losange{ + -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + +.croix{ + -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); + clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); +} + +.croixinte{ + -webkit-clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%); + clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%); + +} + +.penta{ + -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); +} + +.hexa{ + -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); +} + +.hocto{ + -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); + clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); +} + +.rondv2{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + +.rond{ + -webkit-clip-path: circle(50% at 50% 50%); + clip-path: circle(50% at 50% 50%); +} + +.formeinte{ + height: 100%; + width: 100%; +} +.formeexte{ + height: 100%; + width: 100%; +} + +.containinteCarte{ + top:calc((var(--l) - var(--n)) / 2); + left:calc((var(--l) - var(--n)) / 2); + height: var(--n); + width: var(--n); + z-index: 2; + position: absolute; +} + +.containexteCarte{ + top:calc((var(--l) - var(--m)) / 2); + left:calc((var(--l) - var(--m)) / 2); + height: var(--m); + width: var(--m); + z-index: 1; + position: absolute; +} \ No newline at end of file diff --git a/SwichGIT/Highscore/css/phone.css b/SwichGIT/Highscore/css/phone.css new file mode 100644 index 0000000..2418cd2 --- /dev/null +++ b/SwichGIT/Highscore/css/phone.css @@ -0,0 +1,6 @@ +/*Demi Ecran*/ +@media screen and (max-width: 768px) { + body{ + background-color: green; + } +} diff --git a/SwichGIT/Highscore/css/pickr.min.css b/SwichGIT/Highscore/css/pickr.min.css new file mode 100644 index 0000000..5470ec2 --- /dev/null +++ b/SwichGIT/Highscore/css/pickr.min.css @@ -0,0 +1,2041 @@ +/*DESKTOP*/ +@media screen and (min-width: 992px) { + /*! Pickr 1.0.1 MIT | https://github.com/Simonwep/pickr */ + .pickr{ + position:relative; + overflow:visible; + transform:translateY(0); + + } + .pickr *{ + box-sizing:border-box + } + .pickr .pcr-button{ + position:relative; + height:var(--y); + width: var(--y); + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s; + } + .pickr .pcr-button:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr .pcr-button:after,.pickr .pcr-button:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + } + .pickr .pcr-button:after{ + transition:background .3s; + background:currentColor + } + .pickr .pcr-button.clear{ + background-size:70% + } + .pickr .pcr-button.clear:before{ + opacity:0 + } + .pickr .pcr-button.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr .pcr-button.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr button,.pickr input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr button:focus,.pickr input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + /*! Pickr2 1.0.1 MIT | https://github.com/Simonwep/pickr2 */ + .pickr2{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + + } + .pickr2 *{ + box-sizing:border-box + } + .pickr2 .pcr-button2{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr2 .pcr-button2:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr2 .pcr-button2:after,.pickr2 .pcr-button2:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr2 .pcr-button2:after{ + transition:background .3s; + background:currentColor + } + .pickr2 .pcr-button2.clear{ + background-size:70% + } + .pickr2 .pcr-button2.clear:before{ + opacity:0 + } + .pickr2 .pcr-button2.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr2 .pcr-button2.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr2 button,.pickr2 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr2 button:focus,.pickr2 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + /*! Pickr3 1.0.1 MIT | https://github.com/Simonwep/pickr3 */ + .pickr3{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr3 *{ + box-sizing:border-box + } + .pickr3 .pcr-button3{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr3 .pcr-button3:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr3 .pcr-button3:after,.pickr3 .pcr-button3:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr3 .pcr-button3:after{ + transition:background .3s; + background:currentColor + } + .pickr3 .pcr-button3.clear{ + background-size:70% + } + .pickr3 .pcr-button3.clear:before{ + opacity:0 + } + .pickr3 .pcr-button3.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr3 .pcr-button3.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr3 button,.pickr3 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr3 button:focus,.pickr3 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr4 1.0.1 MIT | https://github.com/Simonwep/pickr4 */ + .pickr4{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr4 *{ + box-sizing:border-box + } + .pickr4 .pcr-button4{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr4 .pcr-button4:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr4 .pcr-button4:after,.pickr4 .pcr-button4:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr4 .pcr-button4:after{ + transition:background .3s; + background:currentColor + } + .pickr4 .pcr-button4.clear{ + background-size:70% + } + .pickr4 .pcr-button4.clear:before{ + opacity:0 + } + .pickr4 .pcr-button4.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr4 .pcr-button4.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr4 button,.pickr4 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr4 button:focus,.pickr4 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr5 1.0.1 MIT | https://github.com/Simonwep/pickr5 */ + .pickr5{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr5 *{ + box-sizing:border-box + } + .pickr5 .pcr-button5{ + position:relative; + height:2em; + width:2em; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr5 .pcr-button5:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr5 .pcr-button5:after,.pickr5 .pcr-button5:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr5 .pcr-button5:after{ + transition:background .3s; + background:currentColor + } + .pickr5 .pcr-button5.clear{ + background-size:70% + } + .pickr5 .pcr-button5.clear:before{ + opacity:0 + } + .pickr5 .pcr-button5.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr5 .pcr-button5.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr5 button,.pickr5 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr5 button:focus,.pickr5 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + .pcr-app[data-theme=classic] .pcr-swatches>button{ + position:relative; + width:1.75em; + height:1.75em; + border-radius:.15em; + cursor:pointer; + margin:2.5px; + flex-shrink:0; + justify-self:center; + transition:all .15s; + overflow:hidden; + background:transparent; + z-index:1 + } + .pcr-app[data-theme=classic] .pcr-swatches>button:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:6px; + border-radius:.15em; + z-index:-1 + } + .pcr-app[data-theme=classic] .pcr-swatches>button:after{ + content:""; + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + background:currentColor; + border:1px solid rgba(0,0,0,.05); + border-radius:.15em; + box-sizing:border-box + } + .pcr-app[data-theme=classic] .pcr-swatches>button:hover{ + filter:brightness(1.05) + } + .pcr-app[data-theme=classic] .pcr-interaction{ + display:flex; + flex-wrap:wrap; + align-items:center; + margin:0 -.2em + } + .pcr-app[data-theme=classic] .pcr-interaction>*{ + margin:0 .2em + } + .pcr-app[data-theme=classic] .pcr-interaction input{ + letter-spacing:.07em; + font-size:.75em; + text-align:center; + cursor:pointer; + color:#75797e; + background:#f1f3f4; + border-radius:.15em; + transition:all .15s; + padding:.45em .5em; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-interaction input:hover{ + filter:brightness(.975) + } + .pcr-app[data-theme=classic] .pcr-interaction input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(66,133,244,.75) + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-result{ + color:#75797e; + text-align:left; + flex:1 1 8em; + min-width:8em; + transition:all .2s; + border-radius:.15em; + background:#f1f3f4; + cursor:text + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection{ + background:#4285f4; + color:#fff + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active{ + color:#fff; + background:#4285f4 + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{ + width:auto; + color:#fff + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover{ + filter:brightness(.925) + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-save{ + background:#4285f4 + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear{ + background:#f44250 + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(244,66,80,.75) + } + .pcr-app[data-theme=classic] .pcr-selection{ + display:flex; + justify-content:space-between; + flex-grow:1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-picker{ + position:absolute; + height:18px; + width:18px; + border:2px solid #fff; + border-radius:100%; + user-select:none + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{ + position:relative; + z-index:1; + width:2em; + display:flex; + flex-direction:column; + justify-content:space-between; + margin-right:.75em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + border-radius:.15em; + z-index:-1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{ + cursor:pointer; + transition:background-color .3s,box-shadow .3s; + border-radius:.15em .15em 0 0; + z-index:2 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{ + border-radius:0 0 .15em .15em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{ + background:currentColor; + width:100%; + height:50% + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{ + position:relative; + user-select:none; + display:flex; + flex-direction:column; + cursor:grab; + cursor:-moz-grab; + cursor:-webkit-grab + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active{ + cursor:grabbing; + cursor:-moz-grabbing; + cursor:-webkit-grabbing + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{ + width:100%; + height:8em; + z-index:1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{ + flex-grow:1; + border-radius:.15em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + border-radius:.15em; + z-index:-1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{ + margin-left:.75em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{ + left:50%; + transform:translateX(-50%) + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{ + width:8px; + flex-grow:1; + border-radius:50em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{ + background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red) + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{ + background:linear-gradient(180deg,transparent,#000),url('data:image/svg+xml; utf8, '); + background-size:100%,50% + } + + + /*! Pickr6 1.0.1 MIT | https://github.com/Simonwep/pickr6 */ + .pickr6{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr6 *{ + box-sizing:border-box + } + .pickr6 .pcr-button6{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr6 .pcr-button6:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr6 .pcr-button6:after,.pickr6 .pcr-button6:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr6 .pcr-button6:after{ + transition:background .3s; + background:currentColor + } + .pickr6 .pcr-button6.clear{ + background-size:70% + } + .pickr6 .pcr-button6.clear:before{ + opacity:0 + } + .pickr6 .pcr-button6.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr6 .pcr-button6.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr6 button,.pickr6 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr6 button:focus,.pickr6 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr7 1.0.1 MIT | https://github.com/Simonwep/pickr7 */ + .pickr7{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr7 *{ + box-sizing:border-box + } + .pickr7 .pcr-button7{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr7 .pcr-button7:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr7 .pcr-button7:after,.pickr7 .pcr-button7:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr7 .pcr-button7:after{ + transition:background .3s; + background:currentColor + } + .pickr7 .pcr-button7.clear{ + background-size:70% + } + .pickr7 .pcr-button7.clear:before{ + opacity:0 + } + .pickr7 .pcr-button7.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr7 .pcr-button7.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr7 button,.pickr7 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr7 button:focus,.pickr7 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr8 1.0.1 MIT | https://github.com/Simonwep/pickr8 */ + .pickr8{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr8 *{ + box-sizing:border-box + } + .pickr8 .pcr-button8{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr8 .pcr-button8:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr8 .pcr-button8:after,.pickr8 .pcr-button8:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr8 .pcr-button8:after{ + transition:background .3s; + background:currentColor + } + .pickr8 .pcr-button8.clear{ + background-size:70% + } + .pickr8 .pcr-button8.clear:before{ + opacity:0 + } + .pickr8 .pcr-button8.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr8 .pcr-button8.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr8 button,.pickr8 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr8 button:focus,.pickr8 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + +} + +@media screen and (min-width: 0px) and (max-width: 992px) { + /*! Pickr 1.0.1 MIT | https://github.com/Simonwep/pickr */ + .pickr{ + position:relative; + overflow:visible; + transform:translateY(0); + + } + .pickr *{ + box-sizing:border-box + } + .pickr .pcr-button{ + position:relative; + height: calc(1.5*var(--y)); + width: calc(1.5*var(--y)); + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s; + } + .pickr .pcr-button:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr .pcr-button:after,.pickr .pcr-button:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + } + .pickr .pcr-button:after{ + transition:background .3s; + background:currentColor + } + .pickr .pcr-button.clear{ + background-size:70% + } + .pickr .pcr-button.clear:before{ + opacity:0 + } + .pickr .pcr-button.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr .pcr-button.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr button,.pickr input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr button:focus,.pickr input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + /*! Pickr2 1.0.1 MIT | https://github.com/Simonwep/pickr2 */ + .pickr2{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + + } + .pickr2 *{ + box-sizing:border-box + } + .pickr2 .pcr-button2{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr2 .pcr-button2:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr2 .pcr-button2:after,.pickr2 .pcr-button2:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr2 .pcr-button2:after{ + transition:background .3s; + background:currentColor + } + .pickr2 .pcr-button2.clear{ + background-size:70% + } + .pickr2 .pcr-button2.clear:before{ + opacity:0 + } + .pickr2 .pcr-button2.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr2 .pcr-button2.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr2 button,.pickr2 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr2 button:focus,.pickr2 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + /*! Pickr3 1.0.1 MIT | https://github.com/Simonwep/pickr3 */ + .pickr3{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr3 *{ + box-sizing:border-box + } + .pickr3 .pcr-button3{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr3 .pcr-button3:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr3 .pcr-button3:after,.pickr3 .pcr-button3:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr3 .pcr-button3:after{ + transition:background .3s; + background:currentColor + } + .pickr3 .pcr-button3.clear{ + background-size:70% + } + .pickr3 .pcr-button3.clear:before{ + opacity:0 + } + .pickr3 .pcr-button3.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr3 .pcr-button3.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr3 button,.pickr3 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr3 button:focus,.pickr3 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr4 1.0.1 MIT | https://github.com/Simonwep/pickr4 */ + .pickr4{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr4 *{ + box-sizing:border-box + } + .pickr4 .pcr-button4{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr4 .pcr-button4:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr4 .pcr-button4:after,.pickr4 .pcr-button4:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr4 .pcr-button4:after{ + transition:background .3s; + background:currentColor + } + .pickr4 .pcr-button4.clear{ + background-size:70% + } + .pickr4 .pcr-button4.clear:before{ + opacity:0 + } + .pickr4 .pcr-button4.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr4 .pcr-button4.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr4 button,.pickr4 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr4 button:focus,.pickr4 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr5 1.0.1 MIT | https://github.com/Simonwep/pickr5 */ + .pickr5{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr5 *{ + box-sizing:border-box + } + .pickr5 .pcr-button5{ + position:relative; + height:2em; + width:2em; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr5 .pcr-button5:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr5 .pcr-button5:after,.pickr5 .pcr-button5:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr5 .pcr-button5:after{ + transition:background .3s; + background:currentColor + } + .pickr5 .pcr-button5.clear{ + background-size:70% + } + .pickr5 .pcr-button5.clear:before{ + opacity:0 + } + .pickr5 .pcr-button5.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr5 .pcr-button5.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr5 button,.pickr5 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr5 button:focus,.pickr5 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + .pcr-app[data-theme=classic] .pcr-swatches>button{ + position:relative; + width:1.75em; + height:1.75em; + border-radius:.15em; + cursor:pointer; + margin:2.5px; + flex-shrink:0; + justify-self:center; + transition:all .15s; + overflow:hidden; + background:transparent; + z-index:1 + } + .pcr-app[data-theme=classic] .pcr-swatches>button:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:6px; + border-radius:.15em; + z-index:-1 + } + .pcr-app[data-theme=classic] .pcr-swatches>button:after{ + content:""; + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + background:currentColor; + border:1px solid rgba(0,0,0,.05); + border-radius:.15em; + box-sizing:border-box + } + .pcr-app[data-theme=classic] .pcr-swatches>button:hover{ + filter:brightness(1.05) + } + .pcr-app[data-theme=classic] .pcr-interaction{ + display:flex; + flex-wrap:wrap; + align-items:center; + margin:0 -.2em + } + .pcr-app[data-theme=classic] .pcr-interaction>*{ + margin:0 .2em + } + .pcr-app[data-theme=classic] .pcr-interaction input{ + letter-spacing:.07em; + font-size:.75em; + text-align:center; + cursor:pointer; + color:#75797e; + background:#f1f3f4; + border-radius:.15em; + transition:all .15s; + padding:.45em .5em; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-interaction input:hover{ + filter:brightness(.975) + } + .pcr-app[data-theme=classic] .pcr-interaction input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(66,133,244,.75) + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-result{ + color:#75797e; + text-align:left; + flex:1 1 8em; + min-width:8em; + transition:all .2s; + border-radius:.15em; + background:#f1f3f4; + cursor:text + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-result::selection{ + background:#4285f4; + color:#fff + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-type.active{ + color:#fff; + background:#4285f4 + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save{ + width:auto; + color:#fff + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:hover,.pcr-app[data-theme=classic] .pcr-interaction .pcr-save:hover{ + filter:brightness(.925) + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-save{ + background:#4285f4 + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear{ + background:#f44250 + } + .pcr-app[data-theme=classic] .pcr-interaction .pcr-clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px rgba(244,66,80,.75) + } + .pcr-app[data-theme=classic] .pcr-selection{ + display:flex; + justify-content:space-between; + flex-grow:1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-picker{ + position:absolute; + height:18px; + width:18px; + border:2px solid #fff; + border-radius:100%; + user-select:none + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{ + position:relative; + z-index:1; + width:2em; + display:flex; + flex-direction:column; + justify-content:space-between; + margin-right:.75em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + border-radius:.15em; + z-index:-1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{ + cursor:pointer; + transition:background-color .3s,box-shadow .3s; + border-radius:.15em .15em 0 0; + z-index:2 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{ + border-radius:0 0 .15em .15em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{ + background:currentColor; + width:100%; + height:50% + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{ + position:relative; + user-select:none; + display:flex; + flex-direction:column; + cursor:grab; + cursor:-moz-grab; + cursor:-webkit-grab + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity:active,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette:active{ + cursor:grabbing; + cursor:-moz-grabbing; + cursor:-webkit-grabbing + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{ + width:100%; + height:8em; + z-index:1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{ + flex-grow:1; + border-radius:.15em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + border-radius:.15em; + z-index:-1 + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{ + margin-left:.75em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{ + left:50%; + transform:translateX(-50%) + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{ + width:8px; + flex-grow:1; + border-radius:50em + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{ + background:linear-gradient(180deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red) + } + .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{ + background:linear-gradient(180deg,transparent,#000),url('data:image/svg+xml; utf8, '); + background-size:100%,50% + } + + + /*! Pickr6 1.0.1 MIT | https://github.com/Simonwep/pickr6 */ + .pickr6{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr6 *{ + box-sizing:border-box + } + .pickr6 .pcr-button6{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr6 .pcr-button6:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr6 .pcr-button6:after,.pickr6 .pcr-button6:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr6 .pcr-button6:after{ + transition:background .3s; + background:currentColor + } + .pickr6 .pcr-button6.clear{ + background-size:70% + } + .pickr6 .pcr-button6.clear:before{ + opacity:0 + } + .pickr6 .pcr-button6.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr6 .pcr-button6.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr6 button,.pickr6 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr6 button:focus,.pickr6 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr7 1.0.1 MIT | https://github.com/Simonwep/pickr7 */ + .pickr7{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr7 *{ + box-sizing:border-box + } + .pickr7 .pcr-button7{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr7 .pcr-button7:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr7 .pcr-button7:after,.pickr7 .pcr-button7:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr7 .pcr-button7:after{ + transition:background .3s; + background:currentColor + } + .pickr7 .pcr-button7.clear{ + background-size:70% + } + .pickr7 .pcr-button7.clear:before{ + opacity:0 + } + .pickr7 .pcr-button7.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr7 .pcr-button7.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr7 button,.pickr7 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr7 button:focus,.pickr7 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } + + + /*! Pickr8 1.0.1 MIT | https://github.com/Simonwep/pickr8 */ + .pickr8{ + position:relative; + overflow:visible; + transform:translateY(0); + margin : 0vw 2vw 2vw 2vw; + } + .pickr8 *{ + box-sizing:border-box + } + .pickr8 .pcr-button8{ + position:relative; + height:7vw; + width:7vw; + padding:.5em; + cursor:pointer; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + border-radius:.15em; + background:url('data:image/svg+xml; utf8, ') no-repeat 50%; + background-size:0; + transition:all .3s + } + .pickr8 .pcr-button8:before{ + background:url('data:image/svg+xml; utf8, '); + background-size:.5em; + z-index:-1; + z-index:auto + } + .pickr8 .pcr-button8:after,.pickr8 .pcr-button8:before{ + position:absolute; + content:""; + top:0; + left:0; + width:100%; + height:100%; + border-radius:15em + } + .pickr8 .pcr-button8:after{ + transition:background .3s; + background:currentColor + } + .pickr8 .pcr-button8.clear{ + background-size:70% + } + .pickr8 .pcr-button8.clear:before{ + opacity:0 + } + .pickr8 .pcr-button8.clear:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pickr8 .pcr-button8.disabled{ + cursor:not-allowed + } + .pcr-app button,.pcr-app input,.pickr8 button,.pickr8 input{ + outline:none; + border:none; + -webkit-appearance:none + } + .pcr-app button:focus,.pcr-app input:focus,.pickr8 button:focus,.pickr8 input:focus{ + box-shadow:0 0 0 1px #f1f3f4,0 0 0 3px currentColor + } + .pcr-app[data-theme=classic]{ + position:absolute; + display:flex; + flex-direction:column; + z-index:10000; + font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; + box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03); + width:28.5em; + max-width:95vw; + padding:.8em; + border-radius:.1em; + background:#fff; + opacity:0; + visibility:hidden; + transition:opacity .3s; + left:0; + top:0 + } + .pcr-app[data-theme=classic].visible{ + visibility:visible; + opacity:1 + } + .pcr-app[data-theme=classic] .pcr-swatches{ + display:flex; + flex-wrap:wrap; + margin-top:.75em + } + .pcr-app[data-theme=classic] .pcr-swatches.pcr-last{ + margin:0 + } + @supports (display:grid){ + .pcr-app[data-theme=classic] .pcr-swatches{ + display:grid; + align-items:center; + justify-content:space-around; + grid-template-columns:repeat(auto-fit,1.75em) + } + + } +} \ No newline at end of file diff --git a/SwichGIT/Highscore/css/tablet.css b/SwichGIT/Highscore/css/tablet.css new file mode 100644 index 0000000..395d65b --- /dev/null +++ b/SwichGIT/Highscore/css/tablet.css @@ -0,0 +1,470 @@ +/*DemTĂ©lĂ©phone 1i Ecran*/ +@media screen and (min-width: 0px) and (max-width: 992px) { + + .containform3 { + position: relative; + height: calc(1.25*var(--x)); + width: calc(2*var(--x)); + display: table-cell; + vertical-align: middle; + left: -2vw; + } + + .containinte{ + /*PROBLEME SIZE*/ + top: calc(1.5*((var(--y) - var(--z)) / 2)); + left: calc(1.5*((var(--y) - var(--z)) / 2)); + height: calc(1.5*var(--z)); + width: calc(1.5*var(--z)); + z-index: 2; + position: absolute; + } + + .cache{ + top: calc(0.91*((var(--x) - var(--y)) / 2.8)); + left: calc(4.55*((var(--x) - var(--y)) / 2.2)); + height: calc(1.5*var(--y)*1.05); + width: calc(1.5*var(--y)*1.05); + z-index: 2; + position: absolute; + z-index: 15; + } + + #formSize{ + margin : 0 auto; + width: 100%; + height: 3vw; + position: relative; + top: 3vw; + } + + .slider-container .bar .fill { + display: block; + width: 50%; + height: 100%; + background-color: #6200ee; + } + + .slider-container .slider { + position: relative; + z-index: 2; + -webkit-appearance: none; + width: 100%; + height: 10px; + border-radius: 5px; + outline: none; + top: -0.25vw; + background-color: transparent; + } + .slider.container{ + position: relative; + } + .slider-container .bar { + position: absolute; + z-index: 1; + left: 0; + width: 100%; + height: 10px; + border-radius: 5px; + background-color: #c6aee7; + overflow: hidden; + } + /*Moz*/ + .slider-container .slider::-moz-range-thumb { + -webkit-appearance: none; + width: 2vw; + height: 2vw; + background-color: #6200ee; + border-radius: 1vw; + cursor: pointer; + outline: none; + box-shadow: 0 0 0 0 rgba(98, 0 ,238, .1); + transition: .3s ease-in-out; + } + + .slider-container .slider::-moz-range-thumb:hover { + box-shadow: 0 0 0 10px rgba(98,0,238,.1); + } + .slider-container .slider:active::-moz-range-thumb { + box-shadow: 0 0 0 20px rgba(98,0,238,.2); + } + + .logop2 img { + width: 20vh; + padding-top: 1vh; + position: relative; + } + + .txt { + position: absolute; + font-family: Arial Black; + color: var(--lightprima); + font-size: 5.5vw; + left: 2.25vw; + top: -1vh; + } + + .logo img { + position: absolute; + width: 30vw; + left: 35vw; + top: 2%; + z-index: 11; + } + + .mounts img { + position: absolute; + height: 100%; + width: 100%; + pointer-events: none; + margin-left: -1vw; + margin-top: -1vw; + object-fit: cover; + } + + #contourbuttonvalider { + position: absolute; + border-radius: 45px; + left: -10vw; + top: -5vw; + height: 15vw; + width: 50vw; + background-color: var(--lightsedonca); + z-index: 15; + } + + .bouttonvalider { + position: absolute; + height: 13vw; + width: 47vw; + top: 1.1vw; + left: 1.5vw; + border-radius: 30px; + background-color: #B130DE; + } + + .bouttonvalider2 { + position: absolute; + height: 6.8vw; + width: 22.8vw; + top: 1.1vw; + left: 1.1vw; + border-radius: 30px; + background-color: #00CC66; + } + + #textjouer { + font-family: Montserrat, impact, Arial Black; + position: absolute; + font-size: 10vw; + margin-top: 0.2vw; + width: inherit; + text-align: center; + color: var(--lightsedonca); + } + + #textjouerr { + font-family: Montserrat, impact, Arial Black; + position: absolute; + font-size: 10vw; + margin-top: 0.2vw; + width: inherit; + text-align: center; + color: var(--lightsedonca); + } + + #choosemode { + height: 7vw; + width: 50vw; + position: absolute; + left: 25vw; + top: 40vh; + z-index: 15; + } + + #choosedimension { + height: 7vw; + width: 50vw; + position: absolute; + left: 25vw; + top: 50vh; + z-index: 15; + } + + #conteneurmode{ + width: 80%; + height: 80%; + left : 10%; + top : 45%; + position: absolute; + background-color: var(--lightsedonca); + border-radius: 5vw; + } + + #triangleprec{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 2vw solid transparent; + border-right: 4vw solid grey; + border-bottom: 2vw solid transparent; + margin-top: 0.75vw; + } + + #trianglesuiv{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 2vw solid transparent; + border-left: 4vw solid grey; + border-bottom: 2vw solid transparent; + margin-top: 0.75vw; + } + + #textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 3vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; + } + + #textdimension { + font-family: Lucida Console, Arial Black, Arial; + font-size: 3vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; + } + + .logoboutton{ + font-size: 2vw; + color: var(--lightprima); + margin: 1vw; + } + + /*Externe*/ + .bouttonMenuHaut{ + height: 4vw; + width: 4vw; + background-color: var(--lightsedonca); + border-radius: 50%; + margin: 0 auto; + margin-top: 2.5vw; + position: relative; + display: block; + } + + + .divmenu { + width: 25vw; + height: inherit; + margin-right: 1vw; + } + + + #affPoints { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2vw; + margin-top: 3.5vw; + color: var(--lightsedonca); + } + + .containcards { + overflow-x: auto; + display: grid; + grid-template-columns: repeat(4,auto); + grid-template-rows: repeat(4,auto); + padding-top: 1vw; + justify-content: center; + } + + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: var(--tailleTablette); + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + .item-form { + width: 4vh; + height: 4vh; + padding-left: 0.1vw; + margin-top: 0.25vw; + border-radius: 10px; + background-color: var(--lighttercia); + } + + #containBottom{ + position: absolute; + bottom: -15%; + width: auto; + left: 50%; + z-index: 20; + height: auto; + } + + #containScore { + display: grid; + grid-template-columns: repeat(5, 100px); + grid-template-rows: repeat(2, 100px); + grid-column-gap: 1vw; + justify-content: center; + position: relative; + left: -50%; + + } + + .titreScore{ + font: 700 5vh "Poppins", sans-serif; + color: #2B2D2F; + position: relative; + left: -50%; + text-align: center; + } + + .case-score{ + padding: 4px; + position: relative; + z-index: 1; + width: 12vh; + height: 12vh; + cursor: default; + transition: all 0.3s ease; + } + + .case-score .score-description { + background-color: var(--lightsedonca); + padding: 10px 15px; + width: calc(100% - 30px); + height: calc(100% - 20px); + transition: inherit; + } + + .case-score .score-position { + font: 700 3vw "Poppins", sans-serif; + margin-left: -1vw; + transition: 0.2s ease 150ms; + } + .case-score .score-pseudo, .score-points { + font: 500 12px "Poppins", sans-serif; + margin-top: -0.2em; + margin-left: -1vw; + } + + .case-score:after { + z-index: 10; + background: #f9f8f7; + color: #333; + width: 180px; + position: absolute; + top: 80%; + opacity: 0; + transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; + height: auto; + font-size: 12px; + line-height: 1.4; + padding: 10px; + margin: 0 0 0 -50px; + border-radius: 6px; + text-align: center; + } + .case-score:hover { + transform: scale(1.12); + z-index: 10; + } + + .case-score:hover .score-description { + background: transparent; + } + .case-score:hover .score-position, + .case-score:hover .score-pseudo, + .case-score:hover .score-points { + -webkit-text-fill-color: #222; + } + .case-score:hover:after { + top: 105%; + opacity: 1; + } + + .first { + background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%); + } + .first .score-position, + .first .score-pseudo, + .first .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .second { + background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%); + } + + .second .score-position, + .second .score-pseudo, + .second .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .third { + background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%); + } + + .third .score-position, + .third .score-pseudo, + .third .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .nopodium { + background: linear-gradient(to bottom right, #2c3e50 0%, #B7B7B7 90%); + } + + .nopodium .score-position, + .nopodium .score-pseudo, + .nopodium .score-points { + background: -webkit-linear-gradient(#3A3B3C, #3A3B3C ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .content{ + margin-top: -5vw; + } + + #infosec2{ + position: relative; + z-index:15; + width: 2vw; + left: 5vw; + } + + .last{ + display: none; + } + + #cf2 { + position:relative; + margin-left: 14vh; + top: 2.5vh; + } + + +} diff --git a/SwichGIT/Highscore/debug.log b/SwichGIT/Highscore/debug.log new file mode 100644 index 0000000..f594d68 --- /dev/null +++ b/SwichGIT/Highscore/debug.log @@ -0,0 +1,2 @@ +[1111/102926.535:ERROR:directory_reader_win.cc(43)] FindFirstFile: Le chemin d’accčs spécifié est introuvable. (0x3) +[1120/122821.005:ERROR:directory_reader_win.cc(43)] FindFirstFile: Le chemin d’accčs spécifié est introuvable. (0x3) diff --git a/SwichGIT/Highscore/gestion.php b/SwichGIT/Highscore/gestion.php new file mode 100644 index 0000000..d278e19 --- /dev/null +++ b/SwichGIT/Highscore/gestion.php @@ -0,0 +1,65 @@ +"; +//RĂ©cupĂ©ration des donnĂ©es du formulaire +$nom = $_POST['nom']; +$score = $_POST['score']; + +// Identification du type de gestion demandĂ© +if (isset ($_POST['afficher'])) $choix = "afficher"; +if (isset ($_POST['ajouter'])) $choix = "ajouter"; +if (isset ($_POST['supprimer'])) $choix = "supprimer"; +switch ($choix) { + case "afficher": + echo "La table JOUEUR contient les enregistrement suivants"; + break; + case "ajouter": + echo "L'enregistrement suivant a Ă©tĂ© ajoutĂ© dans la table JOUEUR"; + break; + case "supprimer": + echo "L'enregistrement suivant a Ă©tĂ© supprimĂ© de la table JOUEUR"; + break; +} +echo "
"; +echo "======================================================="; +echo "
"; + + +//affichage du contenu de la table membres +if (isset ($_POST['afficher'])) { + $resultat = $db -> query("SELECT * FROM JOUEUR"); + while ($ligne = $resultat -> fetchArray()) { + echo $ligne['nomjoueur']; + echo "  "; + echo $ligne['score']; + echo "  "; + echo "
"; + } +} +//ajout d'un enregistrement dans la table membres +if (isset ($_POST['ajouter'])) { + echo "nom : $nom
score : $score
\n"; + $requete = "INSERT INTO JOUEUR (nomjoueur, score) VALUES ('$nom','$score')"; + $resultat = $db -> query($requete); + if ($resultat) echo "La requête " . $requete . " a été effectuée !\n"; + else { + echo "La requête n’a pu être exécutee parce que : "; + + } +} +//suppression d'un enregistrement dans la table membres +if (isset ($_POST['supprimer'])) { + echo "nom : $nom
score : $score
\n"; + $requete = "DELETE FROM JOUEUR WHERE nomjoueur='$nom'"; + $resultat = $db -> query($requete); + if ($resultat) + echo "La requête " . $requete . " a été effectuée !\n"; + else { + echo "La requête n’a pu être exécutée parce que : "; + + } +} diff --git a/SwichGIT/Highscore/imgs/clicjour.png b/SwichGIT/Highscore/imgs/clicjour.png new file mode 100644 index 0000000..bfe5bdb Binary files /dev/null and b/SwichGIT/Highscore/imgs/clicjour.png differ diff --git a/SwichGIT/Highscore/imgs/clicnuit.png b/SwichGIT/Highscore/imgs/clicnuit.png new file mode 100644 index 0000000..ddab3c8 Binary files /dev/null and b/SwichGIT/Highscore/imgs/clicnuit.png differ diff --git a/SwichGIT/Highscore/imgs/darkcloud.png b/SwichGIT/Highscore/imgs/darkcloud.png new file mode 100644 index 0000000..1180ae6 Binary files /dev/null and b/SwichGIT/Highscore/imgs/darkcloud.png differ diff --git a/SwichGIT/Highscore/imgs/darkmount1.png b/SwichGIT/Highscore/imgs/darkmount1.png new file mode 100644 index 0000000..9db0759 Binary files /dev/null and b/SwichGIT/Highscore/imgs/darkmount1.png differ diff --git a/SwichGIT/Highscore/imgs/darkmount2.png b/SwichGIT/Highscore/imgs/darkmount2.png new file mode 100644 index 0000000..a50ab6d Binary files /dev/null and b/SwichGIT/Highscore/imgs/darkmount2.png differ diff --git a/SwichGIT/Highscore/imgs/flags/flag-australia.png b/SwichGIT/Highscore/imgs/flags/flag-australia.png new file mode 100644 index 0000000..ab46320 Binary files /dev/null and b/SwichGIT/Highscore/imgs/flags/flag-australia.png differ diff --git a/SwichGIT/Highscore/imgs/flags/flag-france.png b/SwichGIT/Highscore/imgs/flags/flag-france.png new file mode 100644 index 0000000..98d0453 Binary files /dev/null and b/SwichGIT/Highscore/imgs/flags/flag-france.png differ diff --git a/SwichGIT/Highscore/imgs/flags/flag-uk.png b/SwichGIT/Highscore/imgs/flags/flag-uk.png new file mode 100644 index 0000000..7337675 Binary files /dev/null and b/SwichGIT/Highscore/imgs/flags/flag-uk.png differ diff --git a/SwichGIT/Highscore/imgs/flags/flag-usa.png b/SwichGIT/Highscore/imgs/flags/flag-usa.png new file mode 100644 index 0000000..18425bc Binary files /dev/null and b/SwichGIT/Highscore/imgs/flags/flag-usa.png differ diff --git a/SwichGIT/Highscore/imgs/lightcloud.png b/SwichGIT/Highscore/imgs/lightcloud.png new file mode 100644 index 0000000..7fffe28 Binary files /dev/null and b/SwichGIT/Highscore/imgs/lightcloud.png differ diff --git a/SwichGIT/Highscore/imgs/mount1.png b/SwichGIT/Highscore/imgs/mount1.png new file mode 100644 index 0000000..01b4e6e Binary files /dev/null and b/SwichGIT/Highscore/imgs/mount1.png differ diff --git a/SwichGIT/Highscore/imgs/mount2.png b/SwichGIT/Highscore/imgs/mount2.png new file mode 100644 index 0000000..99db5d6 Binary files /dev/null and b/SwichGIT/Highscore/imgs/mount2.png differ diff --git a/SwichGIT/Highscore/imgs/swishjour.png b/SwichGIT/Highscore/imgs/swishjour.png new file mode 100644 index 0000000..bd18f11 Binary files /dev/null and b/SwichGIT/Highscore/imgs/swishjour.png differ diff --git a/SwichGIT/Highscore/imgs/swishnuit.png b/SwichGIT/Highscore/imgs/swishnuit.png new file mode 100644 index 0000000..df07fe2 Binary files /dev/null and b/SwichGIT/Highscore/imgs/swishnuit.png differ diff --git a/SwichGIT/HighscoreBD/index.php b/SwichGIT/Highscore/index.php similarity index 87% rename from SwichGIT/HighscoreBD/index.php rename to SwichGIT/Highscore/index.php index 1477305..09e9544 100644 --- a/SwichGIT/HighscoreBD/index.php +++ b/SwichGIT/Highscore/index.php @@ -1,3 +1,7 @@ + @@ -22,82 +26,97 @@ + +
- - - - -
- - - - +

-
-
-
-
+ Nom :
+ Score :
+
+
+ +
- -
-
-
-
    -
  • - i -
    • -
+
+
+
+
+
    +
  • + i +
    • +
+
-
-
- + +
+
+
+ +
-
-
- -
-
-

JOUER

+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ + + -
-

Les Règles :

+

Les Règles :

× -
+
Swish : Jeu de 60 cartes composé chacun de billes et de cerceaux, de 4 couleurs différentes possibles. 16 cartes sont posés sur une table et le joueur doit faire superposer des cartes de manière que chaque bille soit dans le cerceau de même couleur d’une autre @@ -136,19 +155,20 @@
- +
- +
- +
- +
+
@@ -195,7 +215,7 @@
- +