1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
| *{ padding: 0; margin: 0; box-sizing: border-box; } html,body{ background: rgb(218, 218, 218); height: 100%; width: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.out-box{ margin: 2em; box-shadow: 4px 4px 2em 0 rgba(0,0,0,0.2); border-radius: 1em; overflow: hidden; background: white; }
.src-box{ width: 100%; overflow-x: auto; background: white; }
#ipt ,#re{ height: 2em; width: 100%; padding: 8px; border: none; font-size: 1.2em; font-weight: bolder; outline: none; } #ipt:focus,#ipt:active{ border-bottom: rgb(207, 255, 207) solid 2px; } #re{ text-align: right; }
.btns-box{ padding: .5em; margin-top: 1em; display: inline-grid; grid-template-columns: auto auto auto auto; grid-template-columns: 1fr 1fr 1fr 1fr; border-radius: 1em; background: rgba(255, 208, 186, 0.557); }
.btn{ display: flex; justify-content: center; align-items: center; margin: .5em; width: 3em; height: 3em; background-color: white; border-radius: 50%; font-size: 1em; font-weight: bolder; cursor: pointer; transition: all 0.1s linear; }
.fun{ background: rgb(194, 242, 255); box-shadow: 2px 2px 8px 0 rgba(17,176,255, 0.3); } .fun:hover{ background: rgb(17, 176, 255) !important; box-shadow: 2px 2px 1em 0 rgba(17, 176, 255, 0.8) }
.number{ box-shadow: 2px 2px 1em 0 rgba(199,199,199, 0.3) } .number:hover{ background: rgb(199, 199, 199); box-shadow: 2px 2px 1em 0 rgba(199,199,199, 0.8) }
#c{ background:rgb(255, 116, 116); box-shadow: 2px 2px 1em 0 rgba(255, 31, 31, 0.3); } #c:hover{ background: rgb(255, 31, 31); box-shadow: 2px 2px 1em 0 rgba(255, 31, 31, 0.8); }
#result{ background: orange; box-shadow: 2px 2px 1em 0 rgba(255,98,0, 0.3); } #result:hover{ background: rgb(255, 72, 0) ; box-shadow: 2px 2px 1em 0 rgba(255,72,0, 0.8); }
::-webkit-scrollbar{ width: 6px; height: 6px; background: rgb(255, 255, 255) } ::-webkit-scrollbar-track{ background:rgb(217, 240, 255); } ::-webkit-scrollbar-button{ display: none; } ::-webkit-scrollbar-thumb{ background:rgb(117, 202, 255); transition: all 0.2s linear; } ::-webkit-scrollbar-thumb:hover{ background: rgb(0, 157, 255); }
|