File manager

File manager - Edit - /home/missmand/public_html/gameapp/css/index.css

Back
/************************************************************************/ / GLOBAL / /***********************************************************************/ { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 / box-sizing: border-box; } body { -webkit-touch-callout: none; / prevent callout to copy image, etc when tap to hold / -webkit-text-size-adjust: none; / prevent webkit from resizing text to fit / -webkit-user-select: none; / prevent copy paste, to allow, change 'none' to 'text' / background-color: white; width:100%; /height: 100vh;/ margin: 0; padding: 0; / Padding to avoid the "unsafe" areas behind notches in the screen / padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px); min-width: 480px; min-height: 600px; } body, input, select, textarea { font-family: "Poppins"; /font-size:12px;/ } .main_container { padding: 28px; color: #F79428; } .menu_burger { float: right; width: 52px; } .menu_burger > div { height: 17px; border-bottom: 5px solid #F79428; } .menu_mask { display:none; position: fixed; z-index: 19; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .menu_content { position: fixed; z-index: 20; left: 100%; height: 100%; top: 0; background-color: white; padding: 20px;} .menu_content > div { font-family: "Poppins"; font-size: 33px; text-align: left; margin: 10px; padding: 10px; } .menu_content a { color: #F79428; text-decoration: none; } .menu_content > div.menu_link { text-align: center; } .menu_link a { display: block; color: #F79428; font-family: 'OpenSans'; font-size: 25px; text-decoration: underline; margin-top: 40px; } .menu_link img { margin-top: 30px; } h1 { margin: 0; padding: 0; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins.eot"); / IE9 Compat Modes / src: url("fonts/Poppins.eot?#iefix") format("embedded-opentype"), / IE6-IE8 / url("fonts/Poppins.otf") format("opentype"), / Open Type Font / url("fonts/Poppins.svg") format("svg"), / Legacy iOS / url("fonts/Poppins.ttf") format("truetype"), / Safari, Android, iOS / url("fonts/Poppins.woff") format("woff"), / Modern Browsers / url("fonts/Poppins.woff2") format("woff2"); / Modern Browsers / font-weight: normal; font-style: normal; } @font-face { font-family: "OpenSans"; src: url("fonts/OpenSans.eot"); / IE9 Compat Modes / src: url("fonts/OpenSans.eot?#iefix") format("embedded-opentype"), / IE6-IE8 / url("fonts/OpenSans.otf") format("opentype"), / Open Type Font / url("fonts/OpenSans.svg") format("svg"), / Legacy iOS / url("fonts/OpenSans.ttf") format("truetype"), / Safari, Android, iOS / url("fonts/OpenSans.woff") format("woff"), / Modern Browsers / url("fonts/OpenSans.woff2") format("woff2"); / Modern Browsers / font-weight: normal; font-style: normal; } /***********************************************************************/ / TITLE SCREEN / /**********************************************************************/ .intro_container { font-family: "Poppins"; color: #F79428; text-align: center; margin: auto; display:none; margin-top: 25%; } .intro_welcome { font-size: 58px; font-weight: bold; } .intro_logo { margin-top: 60px; } .logo_icon { max-width: 500px; } .intro_text { font-size: 42px; height: 80px; } .start_btn { display: inline-block; margin-top: 80px; padding: 15px 30px; border-radius: 8px; background-color: #F79428; color:white; text-decoration: none; font-size: 33px; font-weight: bold; line-height: 38px; } .legalscreen_container { display: none; } .legalscreen_container h1 { font-family: "Poppins"; font-size: 42px; font-weight: normal; text-align: left; text-transform: uppercase; } .legalscreen_container p { font-family: "OpenSans"; font-size: 38px; color: #404040; text-align: justify; } /**********************************************************************/ / AVATAR SELECT / /**********************************************************************/ .avatarscreen_container { font-family: "Poppins"; text-align: center; margin: auto; color: #F79428; display: flex; flex-direction: column; position: absolute; width: 100%; height: 100%; justify-content: center; } .avatarscreen_container .start_btn { display: none; } .avatar_container { margin-top: 40px; } .avatar { display: inline-block; margin: 20px; width: 38%; cursor: pointer; opacity: 0.5; max-width: 200px; } .avatar.selected { opacity: 1; } .avatarscreen_container .start_btn { margin: 40px auto; } .avatar_btn { height: 148px; flex-shrink: 0;} .input_name { text-align: right; margin: 0; padding: 5px; border: 0; outline: 0; width: 100%; font-size: 33px; height: 100px; } /**********************************************************************/ / PROFILE / /**********************************************************************/ .profilescreen_container { margin: auto; text-align: left; } .profilescreen_container h1 { font-family: "Poppins"; font-size: 42px; font-weight: normal; } .profilescreen_container h2 { font-family: "Poppins"; font-size: 37px; font-weight: normal; margin-bottom: 5px; } .profile_avatar { text-align: center; margin: 30px 0 40px; } .profile_avatar img { height: 200px; } .player_name { color: #404040; font-size: 33px; margin-bottom: 60px; border: 0; outline: 0;} .gauge_name { color: #1a1a1a; font-family: "OpenSans"; font-size: 28px; margin-top: 30px; } .gauge { display: none; } .gauge_elem { margin: 15px 0 25px 48px; } .gauge_bar_container { display: inline-block; line-height: 0; padding: 4px; width: 210px; vertical-align: middle; border: 7px solid #F79428; border-radius: 24px; margin-right: 40px; } .gauge_bar { display: inline-block; border-top-left-radius: 12px; border-bottom-left-radius: 12px; width: 50%; height: 20px; background-color: #F79428; } .gauge_value { text-align: right; display: inline-block; vertical-align: middle; font-size: 28px; font-style: italic; margin-right: 3px; } .gauge_max_value { display: inline-block; vertical-align: middle; font-size: 28px; font-weight: bold; font-style: italic; } .gauge_des { text-align: left; } .gauge_arrow { display: inline-block; vertical-align: top; } .gauge_arrow img { margin-top: 5px; } .gauge_description { color: #808080; font-family: "OpenSans"; font-size: 25px; display: inline-block; vertical-align: top; width: 85%; margin-left: 15px; margin-bottom: 40px; text-align: justify; } /**********************************************************************/ / MISSION SELECT / /**********************************************************************/ .missionscreen_container { margin: auto; text-align: center; display: none; } .missionscreen_container h1 { font-family: "Poppins"; font-size: 42px; font-weight: normal; text-align: left; } .mission_container { margin-top: 20px; } .mission { display: none; cursor: pointer; opacity: 0.5; overflow: hidden; clear: both; float: left; width: 226px; height: 226px; border-radius: 113px; margin: 20px; border: 7px solid #F79428; background-position: 50% 50%; background-size: cover; overflow: visible; } .mission.active { opacity: 1; } .mission.right { float: right; } #mission_2 { border-color: #3f7bc3; } #mission_3 { border-color: #70b7Ed; } .mission span { position: relative; left: 250px; top: 30px; font-size: 34px; color: #1a1a1a; } .mission.right span { left: -250px; } .mission .soon { font-size: 24px; font-style: italic;} /**********************************************************************/ / GAME / /**********************************************************************/ .game_container { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; padding: 28px; } .game_container h1 { font-family: "Poppins"; font-size: 33px; font-weight: normal; text-align: left; text-transform: uppercase; } .message_container { overflow: auto; font-family: "OpenSans"; font-size: 38px; clear: both; margin-top: 40px; } .message { float: left; max-width: 80%; margin-bottom: 10px; padding: 10px 20px; line-height: 38px; background-color: #e6e6e6; color: black; border-radius: 15px; margin-left: 50px; border-top-left-radius: 0; } .message_player { float: right; background-color: #F79428; color: white; margin: 10px 0 20px; border-bottom-right-radius: 0; border-top-left-radius: 15px; clear: both; } .message_container > img, .answer_container > img { float: left; clear: both; position: relative; top: 3px; } .clear { clear: both; } .choose_answer { margin: 20px 0; font-size: 38px; } .answer_container { font-size: 38px; margin: 10px 0 20px; } .answer { max-width: 80%; display: none; float: right; cursor: pointer; border-radius: 15px; padding: 10px 20px; margin-bottom: 10px; color: white; background-color: #F79428; border-bottom-right-radius: 0; line-height: 38px; } .message > span, .message > img { display: inline-block; margin-right: 5px; vertical-align: middle; } .answer > span, .answer > img { display: inline-block; margin-right: 5px; vertical-align: middle; } .answer.disabled { opacity: 0.5; cursor: default;} img.disabled { opacity: 0.5; } .message_top { margin-left: 83px; border-bottom-left-radius: 0; border-top-left-radius: 15px; clear: both; } .message_tmp { display: block; } input[type=submit] { font-family: "OpenSans"; outline: 0; border: 0; font-size: 38px; line-height: 38px; padding: 10px 20px; clear: both; margin-top: 40px; float: right; background-color: #F79428; color: white; margin: 10px 0 20px; max-width: 80%; border-radius: 15px; border-bottom-right-radius: 0; clear: both; } .end_images { text-align: center; width: 80%; } .end_images img { display: inline-block; vertical-align: top; margin: 60px 5px; width: 30%; } .end_images img.img_bricoleur { width: 26%; } .end_images img.img_mediateur { position: relative; width: 50%; margin-top: 0; } .end_images img.img_hesitation { width: 90%; } .end_images img.img_foule { width: 100%; margin-bottom: 0; } .end_images img.img_parchemin { margin: 0; margin-bottom: 0; width: 100%; } .end_images img.img_rocher { width: 100%; margin-bottom: 20px; } .end_images img.img_end { width: 100%; margin-bottom: 20px; } .result_container { text-align: center; } .result_btn { margin: 20px auto; display: inline-block; } @keyframes blink { / * At the start of the animation the dot * has an opacity of .2 / 0% { opacity: .2; } /* * At 20% the dot is fully visible and * then fades out slowly / 20% { opacity: 1; } /* * Until it reaches an opacity of .2 and * the animation can start again / 100% { opacity: .2; } } #message_tmp span { /* * Use the blink animation, which is defined above / animation-name: blink; /* * The animation should take 1.4 seconds / animation-duration: 1.4s; /* * It will repeat itself forever / animation-iteration-count: infinite; /* * This makes sure that the starting style (opacity: .2) * of the animation is applied before the animation starts. * Otherwise we would see a short flash or would have * to set the default styling of the dots to the same * as the animation. Same applies for the ending styles. / animation-fill-mode: both; } #message_tmp span:nth-child(2) { /* * Starts the animation of the third dot * with a delay of .2s, otherwise all dots * would animate at the same time / animation-delay: .2s; } #message_tmp span:nth-child(3) { /* * Starts the animation of the third dot * with a delay of .4s, otherwise all dots * would animate at the same time / animation-delay: .4s; } /***********************************************************************/ / RESULTS / /************************************************************************/ .score_container { display: none; clear: both; margin-top: 40px;} .score_container h2 { font-family: "Poppins"; font-size: 37px; font-weight: normal; margin-bottom: 5px; } .result_img, .result_feedback, .result_message { text-align: center; } .result_feedback { font-family: "Poppins"; font-size: 42px; color: #191919; margin-top: 40px; } .result_message { font-family: "OpenSans"; font-size: 33px; color: #808080; margin: 40px 0; } .score > span { display: inline-block; margin-right: 3px; } .gauge_gain { width: 30px; text-align: center; position: relative; top: -25px; left: 136px; font-size: 25px; } .gauge_gain.positive { color: green; } .gauge_gain.negative { color: red; } .end_mission { display:none; text-align: center; }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0 | proxy | phpinfo | Settings