From 755fcfeef24030ebacf6f97fa4b10df584c224cd Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Mon, 22 Jul 2024 10:01:09 +0200 Subject: [PATCH] refactor(site.css): convert px to rem units --- EnvelopeGenerator.Web/wwwroot/css/site.css | 22 +++++++++---------- .../wwwroot/css/site.min.css | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css index bf6d7928..04372665 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.css @@ -71,8 +71,8 @@ body { .page { margin-top: 3rem; background: white; - border-radius: 5px; - box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; + border-radius: 0.313rem; + box-shadow: rgba(9, 30, 66, 0.25) 0rem 0.25rem 0.5rem -0.125rem, rgba(9, 30, 66, 0.08) 0rem 0rem 0rem 0.063rem; max-width: 40rem; } @@ -83,8 +83,8 @@ body { .page header .icon { display: inline-block; - border-radius: 100px; - padding: 15px; + border-radius: 6.25rem; + padding: 0.938rem; margin-bottom: 2rem; } @@ -128,7 +128,7 @@ body { .envelope { display: block; - border: 1px solid #eee; + border: 0.063rem solid #eee; margin-bottom: 1rem; padding: 0.5rem; } @@ -160,7 +160,7 @@ footer#page-footer { .sender-card img { height: 7vh; background-color: rgb(209, 207, 207); - border-radius: 50px; + border-radius: 3.125rem; } .envelope-message { @@ -183,14 +183,14 @@ footer#page-footer { /* CSS for custom class to increase dropdown height */ .increase-dropdown-height { - min-height: 400px; /* Optional, larger value for increased height */ + min-height: 25rem; /* Optional, larger value for increased height */ } /* Adjusting select2 width to fit within a specific form size */ .dropdown-flag .select2-container { width: 100% !important; /* Makes the container full width */ - max-width: 180px; /* Suitable maximum width for the form */ + max-width: 11.25rem; /* Suitable maximum width for the form */ } .lang-item { @@ -203,15 +203,15 @@ footer#page-footer { .highlight { font-weight: 700; - font-size: 13px; + font-size: 0.85rem; } .signature-process-title, .signature-process-name { - font-size: 18px; + font-size: 1.125rem; } .signature-process-name { - font-size: 15px; + font-size: 0.938rem; font-weight: 700; } diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.min.css b/EnvelopeGenerator.Web/wwwroot/css/site.min.css index 51edabeb..e9080d49 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.min.css @@ -1 +1 @@ -#app{background:#808080;width:100vw;height:80vh}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background-color:#bbb}.page{margin-top:3rem;background:#fff;border-radius:5px;box-shadow:rgba(9,30,66,.25) 0 4px 8px -2px,rgba(9,30,66,.08) 0 0 0 1px;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:100px;padding:15px;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:1px solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:50px}.envelope-message{font-family:'Roboto',sans-serif}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:400px}.dropdown-flag .select2-container{width:100%!important;max-width:180px}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:13px}.signature-process-title,.signature-process-name{font-size:18px}.signature-process-name{font-size:15px;font-weight:700}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis}.collapse .card-text,.collapsing .card-text{font-size:.6rem;margin:0;padding:0}.sender-card .card-body{padding:.5rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}img{max-width:4rem}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}}@media(max-height:850px){.collapse .card-text,.collapsing .card-text{font-size:.5rem;margin:0;padding:0}} \ No newline at end of file +#app{background:#808080;width:100vw;height:80vh}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background-color:#bbb}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.envelope-message{font-family:'Roboto',sans-serif}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.signature-process-name{font-size:.938rem;font-weight:700}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis}.collapse .card-text,.collapsing .card-text{font-size:.6rem;margin:0;padding:0}.sender-card .card-body{padding:.5rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}img{max-width:4rem}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}}@media(max-height:850px){.collapse .card-text,.collapsing .card-text{font-size:.5rem;margin:0;padding:0}} \ No newline at end of file