Use rem units instead of px (close #38)

orestbida · May 20, 2023 · 62cb945 · 62cb945
1 parent 428671f
commit 62cb945
Showing 1 changed file with 25 additions and 27 deletions.
diff --git a/src/iframemanager.css b/src/iframemanager.css
@@ -10,7 +10,7 @@
     --im-btn-color: #fff;
     --im-btn-bg: rgba(0, 102, 219, 0.84);
     --im-btn-hover-bg: rgba(9, 80, 161, 0.89);
-    --im-btn-active-box-shadow: 0 0 0 4px rgba(24, 104, 250, 0.24);
+    --im-btn-active-box-shadow: 0 0 0 .25em rgba(24, 104, 250, 0.24);
 
     --im-btn-s-color: var(--im-bg);
     --im-btn-s-bg: rgba(225, 239, 255, .8);
@@ -47,7 +47,6 @@ div[data-service] .cll input{
     line-height: normal;
     margin: 0;
     outline: revert;
-    outline-offset: 2px;
     cursor: pointer;
     overflow: hidden;
     -webkit-appearance: none;
@@ -61,8 +60,8 @@ div[data-service]{
     font-weight: 400;
     display: inline-block;
     max-width: 100%;
-    min-height: 150px;
-    min-width: 300px;
+    min-height: 9.375rem;
+    min-width: 18.75rem;
     position: relative;
     background-color: var(--im-bg);
     overflow: hidden;
@@ -79,22 +78,22 @@ div[data-service] .cll .c-ld {
     right: 2.5em;
     opacity: 0;
     visibility: hidden;
-    transform: translateY(10px);
+    transform: translateY(1.4em);
 }
 
 div[data-service] .cll .c-ld,
 div[data-service] .cll .c-ld:after{
     position: absolute;
     z-index: 1;
     border-radius: 100%;
-    width: 20px;
-    height: 20px;
+    width: 1.25em;
+    height: 1.25em;
 }
 
 div[data-service] .cll .c-ld::after{
     content: '';
-    border: 4px solid white;
-    border-top: 4px solid transparent;
+    border: .25em solid white;
+    border-top: .25em solid transparent;
     animation: spin 1s linear infinite;
 }
 
@@ -170,7 +169,7 @@ div[data-service] .cll .c-bg-i.loaded{
 
 div[data-service] .cll .c-tl{
     display: block;
-    margin-bottom: 10px;
+    margin-bottom: .6em;
     font-size: 1.2em;
     font-weight: 600;
     text-align: center;
@@ -187,21 +186,20 @@ div[data-service] .cll .c-n-c{
     align-items: center;
     height: 100%;
     position: relative;
-    font-size: .9em;
 }
 
 div[data-service] .cll .c-n-t{
     display: block;
-    font-size: .95em;
+    font-size: .87em;
     position: relative;
     z-index: 1;
     line-height: 1.4em;
-    max-width: 420px;
+    max-width: 32em;
     margin: 0 auto;
 }
 
 div[data-service] .cll .c-n-a{
-    margin-top: 20px;
+    margin-top: 1.25em;
 }
 
 div[data-service] .cll .c-n-t,
@@ -213,11 +211,11 @@ div[data-service] .cll .c-n-a{
 }
 
 div[data-service] .cll .c-n-a button + button {
-    margin-left: 12px;
+    margin-left: .8em;
 }
 
 div[data-service] .cll .c-t-cn{
-    padding: 0 12px;
+    padding: 0 .75em;
     z-index: 1;
 }
 
@@ -226,31 +224,31 @@ div[data-service] .cll .c-l-b{
     display: flex;
     justify-content: space-evenly;
     align-items: center;
+    align-self: stretch;
     position: relative;
-    padding: 1em;
+    padding: .975em 1.1em;
     background: var(--im-btn-bg);
-    border-radius: 4px;
-    font-size: .85em;
+    border-radius: .3125em;
+    font-size: .77em;
     color: var(--im-btn-color);
     font-weight: 600;
-    box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 12px;
+    box-shadow: rgba(0, 0, 0, 0.19) 0 .25em .75em;
 }
 
 /* Play icon */
 div[data-service] .cll .c-l-b::before{
     content: '';
     display: block;
-    border-left: 12px solid var(--im-btn-color);
-    border-top: 7.5px solid transparent;
-    border-bottom: 7.5px solid transparent;
+    border-left: 1em solid var(--im-btn-color);
+    border-top: 0.6em solid transparent;
+    border-bottom: 0.6em solid transparent;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
-    margin-right: 8px;
+    margin-right: .75em;
 }
 
 div[data-service] .cll .c-la-b{
-    padding: 1em;
     background: var(--im-btn-s-bg);
     color: var(--im-btn-s-color);
 }
@@ -276,7 +274,7 @@ div[data-service] .cll .c-l-b:active{
 div[data-service].c-h-n .cll .c-t-cn{
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-10px);
+    transform: translateY(-.7em);
     transition-duration: .2s;
 }
 
@@ -425,7 +423,7 @@ div.c-an .cll .c-ld,
 div.c-an .cll .c-t-cn{
     transition: opacity .3s ease,
                 visibility .3s ease,
-                transform .3s ease;
+                transform .4s ease;
 }
 
 div.c-an .cll .c-bg-i{