From 19011e34ee5e6a12939451568a76464f76632cf4 Mon Sep 17 00:00:00 2001 From: Elias Naphausen Date: Wed, 21 Jun 2023 18:02:21 +0200 Subject: [PATCH] Bug chasing: Make emotion buttons wrap 3 to 4, make smileys scale, minor padding changes --- Userland/_scss/_main_menu.sass | 12 +++++++----- Userland/public/css/_maps/style.css.map | 2 +- Userland/public/css/style.css | 11 ++++++----- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/Userland/_scss/_main_menu.sass b/Userland/_scss/_main_menu.sass index 3b6b7b1..70b2123 100644 --- a/Userland/_scss/_main_menu.sass +++ b/Userland/_scss/_main_menu.sass @@ -58,12 +58,15 @@ $cam_height: 45vh flex-wrap: wrap justify-content: center column-gap: 3vw - row-gap: 1vh + row-gap: 2vh + $wrapsize: 4vw + padding-left: $wrapsize + padding-right: $wrapsize .button - padding: 1.5vw + padding: 0.5vw 0.5vw 0 0.5vw border-radius: 6vh height: fit-content @@ -72,14 +75,13 @@ $cam_height: 45vh flex-direction: column img - max-height: 100% - max-width: 100% + width: 15vw //transform: scale(.5, .5) pointer-events: none .button-text margin: 0 - font-size: 4vh + font-size: 2.5vw diff --git a/Userland/public/css/_maps/style.css.map b/Userland/public/css/_maps/style.css.map index 9203ad5..9c215f5 100644 --- a/Userland/public/css/_maps/style.css.map +++ b/Userland/public/css/_maps/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.sass","_overlay.sass","_main_menu.sass","_faceapi.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EAEA;EAEA;;;AAIJ;EAEI;;;AAEJ;EAEI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAGR;EACI;EACA;;;AC5EJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACJ;EACI;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACJ;EACI;EACA;EACA;;AACA;EACI;;AACJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACZ;EACI;EACA;EACA;EACA;;AAER;EAEI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;;AAIhB;EACI;EACA;EACA;;AACA;EACI;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;;AACJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAER;EACI;EAEA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;;AACA;EACI;;;AAEpB;EACI;IACI;;;AAGR;EACI;IACI;;;AClNR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAER;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAOZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EAEI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EAEA;;AAEJ;EACI;EACA;;AAIhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACI;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EAGA;EACA;EAGA;EACA;;AAEA;EACI;EACA;EACA,QA1IC;EA2ID;EAEA;EACA;;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;;;ACvKZ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA","file":"../style.css","sourcesContent":["$stroke-weight: .8vh\n\n@font-face\n font-family: 'Nunito'\n font-weight: 400\n src: url(\"fonts/nunito/Nunito-Regular.ttf\") format('truetype')\n\n@font-face\n font-family: 'Nunito'\n font-weight: 700\n src: url(\"fonts/nunito/Nunito-Bold.ttf\") format('truetype')\n\n@font-face\n font-family: 'Nunito'\n font-weight: 600\n src: url(\"fonts/nunito/Nunito-SemiBold.ttf\") format('truetype')\n\nhtml\n height: 100%\n box-sizing: border-box\n //disables scrolling\n overflow: hidden\n //disables selecting\n user-select: none\n \n \n\nhtml::-webkit-scrollbar\n //hides scrollbar \n display: none\n\nimg\n //disables selecting of images\n -webkit-user-drag: none\n\nbody\n margin: 0\n font-family: Nunito, proxima-soft, sans-serif\n font-weight: 700\n font-style: normal\n font-size: 3vw\n line-height: 100%\n height: 100%\n justify-content: center\n align-content: center\n color: black\n cursor: url(\"data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M62.361,54.641c-2.27,2.632-6.239,2.929-8.871,0.658L14.524,21.698l2.854,23.228c0.421,3.448-2.032,6.587-5.479,7.012 c-3.449,0.426-6.59-2.027-7.012-5.479L0.047,7.06c-0.22-1.789,0.337-3.586,1.533-4.938C2.774,0.773,4.491,0,6.292,0h39.69 c3.477,0,6.291,2.816,6.291,6.292c0,3.475-2.814,6.292-6.291,6.292H23.225l38.482,33.184 C64.339,48.037,64.632,52.012,62.361,54.641z'/%3E%3C/g%3E%3C/svg%3E\") 2 2, default\n \n\n.icon\n max-width: 100%\n max-height: 100%\n object-fit: contain\n pointer-events: none\n\n.button\n border: $stroke-weight solid black\n border-radius: 3.5vh\n background: #ffffff\n text-align: center\n line-height: 100%\n padding: .5em\n transition: .1s ease-in-out\n box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2)\n cursor: url(\"data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M17.412,6.259l9.353,10.896l16.571-5.636l10.517,6.065l8.59,21.222L40.854,57.445l-14.268-7.589 l-13.581-1.033C2.717,48.046,2.875,35.151,13.282,35.94l11.598,0.826L6.617,15.537C-1.377,6.232,9.586-2.848,17.412,6.259z'/%3E%3Cpath d='M64.193,37.296c0.706,1.745,0.221,3.748-1.204,4.979L42.46,59.993c-1.373,1.187-3.333,1.406-4.937,0.555l-12.751-6.784 l-11.994-0.911c-0.002,0-0.002,0-0.002,0C5.825,52.325,1.37,47.355,1.464,41.711c0.045-2.725,1.2-5.437,3.483-7.36 c2.294-1.934,5.359-2.773,8.746-2.52c0.004,0.002,0.008,0.002,0.009,0.002l0.479,0.034L3.7,19.683 c-2.457-2.86-3.753-6.063-3.713-9.25C0.028,7.243,1.418,4.396,3.689,2.48c4.803-4.052,11.987-3.118,16.943,2.649l6.958,8.107 l12.945-4.402c1.198-0.408,2.515-0.277,3.612,0.354l9.997,5.768c0.852,0.49,1.513,1.25,1.881,2.159L64.193,37.296z M54.859,37.676 l-6.418-15.859l-6.961-4.016l-13.873,4.717c-1.701,0.578-3.581,0.065-4.752-1.298l-8.891-10.359c0-0.002,0-0.002,0-0.002 c-0.002,0,0,0,0,0c-1.289-1.497-2.419-1.935-3.095-2.03C10.183,8.73,9.68,8.931,9.359,9.201c-0.313,0.265-0.57,0.696-0.578,1.342 c-0.009,0.65,0.244,1.844,1.587,3.409l17.364,20.186c1.159,1.345,1.394,3.256,0.597,4.841c-0.798,1.586-2.471,2.538-4.242,2.411 L13.04,40.602c-1.558-0.118-2.219,0.297-2.427,0.472c-0.223,0.188-0.352,0.444-0.357,0.785c-0.006,0.353,0.129,0.805,0.526,1.214 c0.374,0.382,1.151,0.899,2.659,1.014h0.002l12.912,0.979c0.606,0.047,1.195,0.219,1.731,0.504l10.907,5.802L54.859,37.676z'/%3E%3C/g%3E%3C/svg%3E\") 2 2, default\n\n &:hover\n transform: scale(1.02)\n\n \n &:active\n transform: scale(0.98)\n\n\n.main-screen\n height: 200vh\n transition: transform 1s ease-in-out\n\n@import _media_query_variables.sass\n@import overlay\n@import main_menu\n@import faceapi\n",".overlay\n height: 100vh\n width: 100vw\n background: rgba(255,255,255,0.7)\n position: fixed\n top: 0\n z-index: 1\n display: none\n\n .close\n position: fixed\n top: 10px\n right: 10px\n width: 6vh\n height: 6vh\n display: flex\n justify-content: center\n align-items: center\n padding: 2vh\n p\n transform: translate(0, 2px)\n \n .instructions\n text-align: center\n margin-top: 5vh\n\n .interface-wrapper\n width: 60vw \n border: solid black $stroke-weight \n border-radius: 5vh\n background-color: white\n margin: auto\n display: flex\n flex-wrap: wrap\n justify-content: center \n\n.robo-chooser-overlay\n .interface-wrapper\n padding: 2vh\n display: flex\n flex-wrap: wrap\n justify-content: center\n overflow-y: auto\n overflow-x: hidden\n .robo-chooser-button\n margin: 1vh\n display: flex\n flex-direction: column\n max-height: 20vh\n width: 17vh\n border: solid black $stroke-weight\n border-radius: 5vh\n padding: 0.2em\n\n .robo-icon\n height: 70% \n transform: scale(1.5, 1.5)\n .robo-name\n margin: 0\n margin-top: 2.5vh\n font-size: 1.6vw\n .info-text\n font-size: 2.5vh\n width: 12vh\n text-align: left\n line-height: 1.2\n margin-left: 1vh\n margin-top: 1vh\n padding-left: 2vh\n margin-block-end: 0\n .button-wrapper\n margin-top: 1vh\n justify-content: space-around\n width: 100%\n .claim-button\n font-size: 3vh\n .wave-button \n display: flex\n align-items: center\n justify-content: center\n .wave-emoji\n width: 1vh\n transform-origin: center\n transform: scale(5) translate(.07vh, -.33vh)\n .button\n border-radius: 2.5vh\n padding-top: .5vh\n padding-bottom: .5vh\n height: 3vh\n\n .active\n // flex-grow: 1\n flex-wrap: wrap\n flex-direction: row\n width: 30vh\n &:hover\n transform: scale(1.00)\n \n &:active\n transform: scale(1.00)\n \n\n\n.save-load-overlay\n flex-direction: column\n justify-content: center\n align-items: center\n .instructions\n margin-top: 15vh\n .interface-wrapper\n height: 30vh\n width: 60vh\n margin-top: 0\n padding: 5vh\n display: flex\n justify-content: space-between\n .button\n height: auto\n width: auto\n .icon\n min-width: 20vh\n p\n margin: 0\n\n.help-overlay\n .interface-wrapper\n .help-text \n width: 100%\n padding-left: 2vh\n padding-right: 2vh\n text-align: center\n\n.drawing-overlay\n .interface-wrapper\n border: none\n background-color: transparent\n width: 45vh\n height: 60vh\n .canvas-panel \n border: $stroke-weight solid black\n border-radius: 1.5rem\n min-width: 100%\n display: flex\n flex-direction: column\n align-items: center\n background-color: #FFFFFF\n box-sizing: border-box // WHY do i need this if i have border box defined in html\n \n .canvas-wrapper\n width: 40vh !important\n height: 40vh !important\n margin-top: 2.2vh\n border: $stroke-weight solid black\n border-radius: 1.5rem\n box-sizing: border-box\n position: relative\n\n .path-drawing-canvas\n cursor: url(\"data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M7.034,21.293L4.664,5.832l15.555-1.197l39.21,30.644L46.244,51.938L7.034,21.293z'/%3E%3Cpath d='M49.912,54.803c-1.592,2.013-4.525,2.361-6.551,0.777L4.152,24.936c-0.932-0.728-1.55-1.779-1.729-2.944L0.054,6.53 C-0.142,5.256,0.205,3.959,1.013,2.95c0.805-1.01,2-1.64,3.293-1.739l15.555-1.197c1.167-0.089,2.324,0.26,3.243,0.978 l39.21,30.645c2.025,1.582,2.375,4.497,0.782,6.509L49.912,54.803z M52.88,36.058L18.767,9.396l-8.734,0.672l1.335,8.716 l34.094,26.645L52.88,36.058z'/%3E%3C/g%3E%3C/svg%3E\") 2 2, default\n\n .indicator\n width: 9%\n height: 9%\n position: absolute\n top: 4%\n left: 4%\n border-radius: 50%\n opacity: 1.0\n\n .path-drawing-canvas \n box-sizing: border-box\n\n .draw-icon\n width: 10vh\n //disables selecting\n pointer-events: none\n -webkit-user-drag: none\n \n .interface-buttons\n width: 100%\n display: flex\n justify-content: flex-end\n flex-direction: row\n margin-top: 1vh\n img \n transform: scale(1.3,1.3)\n\n\n .interface-button\n border: $stroke-weight solid black\n border-radius: 2.5vh\n padding: .3rem\n width: 5vh\n height: 5vh\n margin-left: 1vh\n //min-width: 8vh\n //min-height: 8vh\n \n .delete\n margin-left: 0\n margin-right: auto\n transition: 0.25s ease-in-out\n &:active\n background: #EA5A47\n\n@keyframes blinking\n 50%\n opacity: 0.0\n \n\n@keyframes fadeout\n 100%\n opacity: 0.0\n ","$cam_height: 45vh\n\n.main-menu\n position: fixed\n top: 0\n height: 100%\n max-height: 100vh\n width: 100%\n display: flex\n flex-direction: column\n \n .buttons-top\n \n width: 100%\n height: auto \n display: flex \n padding: 2vh\n padding-bottom: 1vh\n z-index: 20\n pointer-events: none\n box-sizing: border-box\n \n\n .button\n pointer-events: auto\n width: 6vh\n padding: 2.5vh\n display: flex\n align-items: center\n justify-content: center \n img \n transform: scale(2,2) translate(0, 0.5px)\n\n .robo-button\n align-self: flex-start\n \n\n .save-button\n align-self: flex-end\n margin-right: 2vh\n margin-left: auto\n img\n transform: scale(1.5,1.5)\n\n .help-button\n align-self: flex-end\n img\n transform: scale(1.8,1.8)\n \n\n\n \n \n\n .wrapper-emotion\n height: 100%\n display: flex \n flex-wrap: wrap\n justify-content: center\n column-gap: 3vw\n row-gap: 1vh\n \n \n .button\n \n padding: 1.5vw\n border-radius: 6vh\n height: fit-content \n \n .button-content \n display: flex\n flex-direction: column \n \n img \n max-height: 100% \n max-width: 100%\n //transform: scale(.5, .5) \n pointer-events: none\n\n .button-text\n margin: 0\n font-size: 4vh \n \n \n\n .buttons-bottom \n display: flex\n justify-content: center\n width: 100%\n margin-bottom: 2vh\n margin-top: 4vh \n \n .camera-button\n display: flex\n height: 2vh\n justify-content: space-between\n padding: 3vh \n padding-right: 1vh\n padding-left: 2.5vh\n \n align-items: center\n p \n margin-right: 1vh\n transform: translate(0px, -1px)\n img \n max-width: none\n max-height: none\n width: 9vh\n height: 9vh\n margin-right: .5vh\n transform: translate(0, 1px)\n\n\n\n\n \n.camera-wrapper\n position: absolute\n top: 105vh\n width: 100%\n display: flex\n justify-content: center\n .camera-border\n display: flex\n justify-content: center\n align-items: center\n \n $cam_width: calc((#{$cam_height}/9) * 16)\n height: calc(#{$cam_height} + 7vh)\n width: calc(#{$cam_width} + 7vh)\n\n\n border: $stroke-weight solid black\n border-radius: 6vh\n\n .camera \n position: relative\n overflow: hidden\n height: $cam_height\n width: calc((#{$cam_height}/9) * 16)\n\n border: $stroke-weight solid black\n border-radius: 3.5vh\n\n.donut-wrapper\n position: absolute\n top: 165vh\n width: 100%\n display: flex\n justify-content: center\n align-items: center\n .donut-view\n \n .inner-donut-wrapper\n width: 15vh\n object-fit: contain\n position: relative\n img \n width: 100%\n position: absolute\n object-fit: contain\n top: 0\n transform: scale(0.6,0.6)\n .donut \n top: 0\n position: absolute\n object-fit: contain\n width: 100%\n transform: rotate(-90deg) scale(3, 3)\n \n","\n.cam-video {\n display: block; \n width: 100%;\n z-index: 0;\n top: 0;\n left: 0; \n}\n\n.emoji-canvas {\n position: absolute;\n top: #{$cam_height * - 1};\n left: 0;\n top: 0;\n z-index: 1;\n width: 100%;\n pointer-events: none;\n}\n\n\n\n"]} \ No newline at end of file +{"version":3,"sources":["style.sass","_overlay.sass","_main_menu.sass","_faceapi.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EAEA;EAEA;;;AAIJ;EAEI;;;AAEJ;EAEI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAGR;EACI;EACA;;;AC5EJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACJ;EACI;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACJ;EACI;EACA;EACA;;AACA;EACI;;AACJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACZ;EACI;EACA;EACA;EACA;;AAER;EAEI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;;AAIhB;EACI;EACA;EACA;;AACA;EACI;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;;AACJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAER;EACI;EAEA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;;AACA;EACI;;;AAEpB;EACI;IACI;;;AAGR;EACI;IACI;;;AClNR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAER;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAOZ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA,cADW;EAEX,eAFW;;AAKX;EAEI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EAEA;;AAEJ;EACI;EACA;;AAIhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACI;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EAGA;EACA;EAGA;EACA;;AAEA;EACI;EACA;EACA,QA5IC;EA6ID;EAEA;EACA;;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA;EACA;;;ACzKZ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA","file":"../style.css","sourcesContent":["$stroke-weight: .8vh\n\n@font-face\n font-family: 'Nunito'\n font-weight: 400\n src: url(\"fonts/nunito/Nunito-Regular.ttf\") format('truetype')\n\n@font-face\n font-family: 'Nunito'\n font-weight: 700\n src: url(\"fonts/nunito/Nunito-Bold.ttf\") format('truetype')\n\n@font-face\n font-family: 'Nunito'\n font-weight: 600\n src: url(\"fonts/nunito/Nunito-SemiBold.ttf\") format('truetype')\n\nhtml\n height: 100%\n box-sizing: border-box\n //disables scrolling\n overflow: hidden\n //disables selecting\n user-select: none\n \n \n\nhtml::-webkit-scrollbar\n //hides scrollbar \n display: none\n\nimg\n //disables selecting of images\n -webkit-user-drag: none\n\nbody\n margin: 0\n font-family: Nunito, proxima-soft, sans-serif\n font-weight: 700\n font-style: normal\n font-size: 3vw\n line-height: 100%\n height: 100%\n justify-content: center\n align-content: center\n color: black\n cursor: url(\"data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M62.361,54.641c-2.27,2.632-6.239,2.929-8.871,0.658L14.524,21.698l2.854,23.228c0.421,3.448-2.032,6.587-5.479,7.012 c-3.449,0.426-6.59-2.027-7.012-5.479L0.047,7.06c-0.22-1.789,0.337-3.586,1.533-4.938C2.774,0.773,4.491,0,6.292,0h39.69 c3.477,0,6.291,2.816,6.291,6.292c0,3.475-2.814,6.292-6.291,6.292H23.225l38.482,33.184 C64.339,48.037,64.632,52.012,62.361,54.641z'/%3E%3C/g%3E%3C/svg%3E\") 2 2, default\n \n\n.icon\n max-width: 100%\n max-height: 100%\n object-fit: contain\n pointer-events: none\n\n.button\n border: $stroke-weight solid black\n border-radius: 3.5vh\n background: #ffffff\n text-align: center\n line-height: 100%\n padding: .5em\n transition: .1s ease-in-out\n box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2)\n cursor: url(\"data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M17.412,6.259l9.353,10.896l16.571-5.636l10.517,6.065l8.59,21.222L40.854,57.445l-14.268-7.589 l-13.581-1.033C2.717,48.046,2.875,35.151,13.282,35.94l11.598,0.826L6.617,15.537C-1.377,6.232,9.586-2.848,17.412,6.259z'/%3E%3Cpath d='M64.193,37.296c0.706,1.745,0.221,3.748-1.204,4.979L42.46,59.993c-1.373,1.187-3.333,1.406-4.937,0.555l-12.751-6.784 l-11.994-0.911c-0.002,0-0.002,0-0.002,0C5.825,52.325,1.37,47.355,1.464,41.711c0.045-2.725,1.2-5.437,3.483-7.36 c2.294-1.934,5.359-2.773,8.746-2.52c0.004,0.002,0.008,0.002,0.009,0.002l0.479,0.034L3.7,19.683 c-2.457-2.86-3.753-6.063-3.713-9.25C0.028,7.243,1.418,4.396,3.689,2.48c4.803-4.052,11.987-3.118,16.943,2.649l6.958,8.107 l12.945-4.402c1.198-0.408,2.515-0.277,3.612,0.354l9.997,5.768c0.852,0.49,1.513,1.25,1.881,2.159L64.193,37.296z M54.859,37.676 l-6.418-15.859l-6.961-4.016l-13.873,4.717c-1.701,0.578-3.581,0.065-4.752-1.298l-8.891-10.359c0-0.002,0-0.002,0-0.002 c-0.002,0,0,0,0,0c-1.289-1.497-2.419-1.935-3.095-2.03C10.183,8.73,9.68,8.931,9.359,9.201c-0.313,0.265-0.57,0.696-0.578,1.342 c-0.009,0.65,0.244,1.844,1.587,3.409l17.364,20.186c1.159,1.345,1.394,3.256,0.597,4.841c-0.798,1.586-2.471,2.538-4.242,2.411 L13.04,40.602c-1.558-0.118-2.219,0.297-2.427,0.472c-0.223,0.188-0.352,0.444-0.357,0.785c-0.006,0.353,0.129,0.805,0.526,1.214 c0.374,0.382,1.151,0.899,2.659,1.014h0.002l12.912,0.979c0.606,0.047,1.195,0.219,1.731,0.504l10.907,5.802L54.859,37.676z'/%3E%3C/g%3E%3C/svg%3E\") 2 2, default\n\n &:hover\n transform: scale(1.02)\n\n \n &:active\n transform: scale(0.98)\n\n\n.main-screen\n height: 200vh\n transition: transform 1s ease-in-out\n\n@import _media_query_variables.sass\n@import overlay\n@import main_menu\n@import faceapi\n",".overlay\n height: 100vh\n width: 100vw\n background: rgba(255,255,255,0.7)\n position: fixed\n top: 0\n z-index: 1\n display: none\n\n .close\n position: fixed\n top: 10px\n right: 10px\n width: 6vh\n height: 6vh\n display: flex\n justify-content: center\n align-items: center\n padding: 2vh\n p\n transform: translate(0, 2px)\n \n .instructions\n text-align: center\n margin-top: 5vh\n\n .interface-wrapper\n width: 60vw \n border: solid black $stroke-weight \n border-radius: 5vh\n background-color: white\n margin: auto\n display: flex\n flex-wrap: wrap\n justify-content: center \n\n.robo-chooser-overlay\n .interface-wrapper\n padding: 2vh\n display: flex\n flex-wrap: wrap\n justify-content: center\n overflow-y: auto\n overflow-x: hidden\n .robo-chooser-button\n margin: 1vh\n display: flex\n flex-direction: column\n max-height: 20vh\n width: 17vh\n border: solid black $stroke-weight\n border-radius: 5vh\n padding: 0.2em\n\n .robo-icon\n height: 70% \n transform: scale(1.5, 1.5)\n .robo-name\n margin: 0\n margin-top: 2.5vh\n font-size: 1.6vw\n .info-text\n font-size: 2.5vh\n width: 12vh\n text-align: left\n line-height: 1.2\n margin-left: 1vh\n margin-top: 1vh\n padding-left: 2vh\n margin-block-end: 0\n .button-wrapper\n margin-top: 1vh\n justify-content: space-around\n width: 100%\n .claim-button\n font-size: 3vh\n .wave-button \n display: flex\n align-items: center\n justify-content: center\n .wave-emoji\n width: 1vh\n transform-origin: center\n transform: scale(5) translate(.07vh, -.33vh)\n .button\n border-radius: 2.5vh\n padding-top: .5vh\n padding-bottom: .5vh\n height: 3vh\n\n .active\n // flex-grow: 1\n flex-wrap: wrap\n flex-direction: row\n width: 30vh\n &:hover\n transform: scale(1.00)\n \n &:active\n transform: scale(1.00)\n \n\n\n.save-load-overlay\n flex-direction: column\n justify-content: center\n align-items: center\n .instructions\n margin-top: 15vh\n .interface-wrapper\n height: 30vh\n width: 60vh\n margin-top: 0\n padding: 5vh\n display: flex\n justify-content: space-between\n .button\n height: auto\n width: auto\n .icon\n min-width: 20vh\n p\n margin: 0\n\n.help-overlay\n .interface-wrapper\n .help-text \n width: 100%\n padding-left: 2vh\n padding-right: 2vh\n text-align: center\n\n.drawing-overlay\n .interface-wrapper\n border: none\n background-color: transparent\n width: 45vh\n height: 60vh\n .canvas-panel \n border: $stroke-weight solid black\n border-radius: 1.5rem\n min-width: 100%\n display: flex\n flex-direction: column\n align-items: center\n background-color: #FFFFFF\n box-sizing: border-box // WHY do i need this if i have border box defined in html\n \n .canvas-wrapper\n width: 40vh !important\n height: 40vh !important\n margin-top: 2.2vh\n border: $stroke-weight solid black\n border-radius: 1.5rem\n box-sizing: border-box\n position: relative\n\n .path-drawing-canvas\n cursor: url(\"data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='64px' height='64px' viewBox='0 0 64 64' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M7.034,21.293L4.664,5.832l15.555-1.197l39.21,30.644L46.244,51.938L7.034,21.293z'/%3E%3Cpath d='M49.912,54.803c-1.592,2.013-4.525,2.361-6.551,0.777L4.152,24.936c-0.932-0.728-1.55-1.779-1.729-2.944L0.054,6.53 C-0.142,5.256,0.205,3.959,1.013,2.95c0.805-1.01,2-1.64,3.293-1.739l15.555-1.197c1.167-0.089,2.324,0.26,3.243,0.978 l39.21,30.645c2.025,1.582,2.375,4.497,0.782,6.509L49.912,54.803z M52.88,36.058L18.767,9.396l-8.734,0.672l1.335,8.716 l34.094,26.645L52.88,36.058z'/%3E%3C/g%3E%3C/svg%3E\") 2 2, default\n\n .indicator\n width: 9%\n height: 9%\n position: absolute\n top: 4%\n left: 4%\n border-radius: 50%\n opacity: 1.0\n\n .path-drawing-canvas \n box-sizing: border-box\n\n .draw-icon\n width: 10vh\n //disables selecting\n pointer-events: none\n -webkit-user-drag: none\n \n .interface-buttons\n width: 100%\n display: flex\n justify-content: flex-end\n flex-direction: row\n margin-top: 1vh\n img \n transform: scale(1.3,1.3)\n\n\n .interface-button\n border: $stroke-weight solid black\n border-radius: 2.5vh\n padding: .3rem\n width: 5vh\n height: 5vh\n margin-left: 1vh\n //min-width: 8vh\n //min-height: 8vh\n \n .delete\n margin-left: 0\n margin-right: auto\n transition: 0.25s ease-in-out\n &:active\n background: #EA5A47\n\n@keyframes blinking\n 50%\n opacity: 0.0\n \n\n@keyframes fadeout\n 100%\n opacity: 0.0\n ","$cam_height: 45vh\n\n.main-menu\n position: fixed\n top: 0\n height: 100%\n max-height: 100vh\n width: 100%\n display: flex\n flex-direction: column\n \n .buttons-top\n \n width: 100%\n height: auto \n display: flex \n padding: 2vh\n padding-bottom: 1vh\n z-index: 20\n pointer-events: none\n box-sizing: border-box\n \n\n .button\n pointer-events: auto\n width: 6vh\n padding: 2.5vh\n display: flex\n align-items: center\n justify-content: center \n img \n transform: scale(2,2) translate(0, 0.5px)\n\n .robo-button\n align-self: flex-start\n \n\n .save-button\n align-self: flex-end\n margin-right: 2vh\n margin-left: auto\n img\n transform: scale(1.5,1.5)\n\n .help-button\n align-self: flex-end\n img\n transform: scale(1.8,1.8)\n \n\n\n \n \n\n .wrapper-emotion\n height: 100%\n display: flex \n flex-wrap: wrap\n justify-content: center\n column-gap: 3vw\n row-gap: 2vh\n $wrapsize: 4vw\n padding-left: $wrapsize\n padding-right: $wrapsize\n \n \n .button\n \n padding: 0.5vw 0.5vw 0 0.5vw\n border-radius: 6vh\n height: fit-content \n \n .button-content \n display: flex\n flex-direction: column \n \n img \n width: 15vw\n //transform: scale(.5, .5) \n pointer-events: none\n\n .button-text\n margin: 0\n font-size: 2.5vw \n \n \n\n .buttons-bottom \n display: flex\n justify-content: center\n width: 100%\n margin-bottom: 2vh\n margin-top: 4vh \n \n .camera-button\n display: flex\n height: 2vh\n justify-content: space-between\n padding: 3vh \n padding-right: 1vh\n padding-left: 2.5vh\n \n align-items: center\n p \n margin-right: 1vh\n transform: translate(0px, -1px)\n img \n max-width: none\n max-height: none\n width: 9vh\n height: 9vh\n margin-right: .5vh\n transform: translate(0, 1px)\n\n\n\n\n \n.camera-wrapper\n position: absolute\n top: 105vh\n width: 100%\n display: flex\n justify-content: center\n .camera-border\n display: flex\n justify-content: center\n align-items: center\n \n $cam_width: calc((#{$cam_height}/9) * 16)\n height: calc(#{$cam_height} + 7vh)\n width: calc(#{$cam_width} + 7vh)\n\n\n border: $stroke-weight solid black\n border-radius: 6vh\n\n .camera \n position: relative\n overflow: hidden\n height: $cam_height\n width: calc((#{$cam_height}/9) * 16)\n\n border: $stroke-weight solid black\n border-radius: 3.5vh\n\n.donut-wrapper\n position: absolute\n top: 165vh\n width: 100%\n display: flex\n justify-content: center\n align-items: center\n .donut-view\n \n .inner-donut-wrapper\n width: 15vh\n object-fit: contain\n position: relative\n img \n width: 100%\n position: absolute\n object-fit: contain\n top: 0\n transform: scale(0.6,0.6)\n .donut \n top: 0\n position: absolute\n object-fit: contain\n width: 100%\n transform: rotate(-90deg) scale(3, 3)\n \n","\n.cam-video {\n display: block; \n width: 100%;\n z-index: 0;\n top: 0;\n left: 0; \n}\n\n.emoji-canvas {\n position: absolute;\n top: #{$cam_height * - 1};\n left: 0;\n top: 0;\n z-index: 1;\n width: 100%;\n pointer-events: none;\n}\n\n\n\n"]} \ No newline at end of file diff --git a/Userland/public/css/style.css b/Userland/public/css/style.css index 76f511e..769b4ef 100644 --- a/Userland/public/css/style.css +++ b/Userland/public/css/style.css @@ -352,10 +352,12 @@ body { flex-wrap: wrap; justify-content: center; column-gap: 3vw; - row-gap: 1vh; + row-gap: 2vh; + padding-left: 4vw; + padding-right: 4vw; } .main-menu .wrapper-emotion .button { - padding: 1.5vw; + padding: 0.5vw 0.5vw 0 0.5vw; border-radius: 6vh; height: fit-content; } @@ -364,13 +366,12 @@ body { flex-direction: column; } .main-menu .wrapper-emotion .button .button-content img { - max-height: 100%; - max-width: 100%; + width: 15vw; pointer-events: none; } .main-menu .wrapper-emotion .button .button-content .button-text { margin: 0; - font-size: 4vh; + font-size: 2.5vw; } .main-menu .buttons-bottom { display: flex;