Merge pull request #385 from Manoranjan1k/main

Update style.css
0xvashishth · Oct 3, 2023 · e9ca75f · e9ca75f
2 parents 069cb28 + a975000
commit e9ca75f
Showing 1 changed file with 157 additions and 9 deletions.
diff --git a/Calculators/Scientific_Calculator/style.css b/Calculators/Scientific_Calculator/style.css
@@ -99,7 +99,7 @@ article p{
    font-size: 15px;
     line-height: 1.5;
 }
- 
+
 @media only screen and (min-width: 720px){
     main{
       max-width: 800px;
@@ -108,9 +108,6 @@ article p{
       padding: 23px;
     }
 
-
-}
-
 .set-overlayer,
 .set-glass,
 .set-sticky {
@@ -219,10 +216,6 @@ button:hover {
   background-color: hsla(180, 100%, 40%, 0.3);
   transition: .2s;
 }
-
-
-
-
 .functions-one {
     width: 210px;
     display: flex;
@@ -254,4 +247,159 @@ width: 280px;
 
 .complex-stuff {
     background-color: #80ffff;
-}
+}
+}
+
+@media screen and (max-width: 426px) {
+    main{
+        max-width: 424px;
+        margin-left: auto;
+        margin-right: auto; 
+        padding: 23px;
+      }
+
+.set-overlayer,
+.set-glass,
+.set-sticky {
+	cursor: pointer;
+	height: 45px;
+	line-height: 45px;
+	padding: 0 15px;
+	color: #333;
+	font-size: 16px;
+}
+.set-overlayer:after,
+.set-glass:after,
+.to-active:after,
+.set-sticky:after {
+	font-family: FontAwesome;
+	font-size: 18pt;
+	position: relative;
+	float: right;
+}
+.set-overlayer:after,
+.set-glass:after,
+.set-sticky:after {
+	content: "\f204";
+	transition: .6s;
+}
+
+.to-active:after {
+	content: "\f205";
+	color: #008080;
+	transition: .6s;
+}
+.set-overlayer,
+.set-glass,
+.set-sticky,
+.source,
+.theme-tray {
+	margin: 10px;
+	background: #f2f2f2;
+	border-radius: 5px;
+	border: 2px solid #f1f1f1;
+	box-sizing: border-box;
+}
+/* Syntax Highlighter*/
+
+pre.prettyprint {
+	padding: 15px !important;
+   margin: 10px;
+	border: 0 !important;
+  background: #f2f2f2;
+  overflow: auto;
+}
+
+.source {
+	white-space: pre;
+	overflow: auto;
+	max-height: 350px;
+}
+code{
+    border:1px solid #ddd;
+    padding: 2px;
+    border-radius: 2px;
+}
+
+
+
+.calculator {
+max-width: 450px;
+background-color: beige;
+padding: 20px;
+border-radius: 5px;
+margin: 10px auto;
+
+}
+
+
+input[type=text] {
+width: 150px;
+    height: 50px;
+    border-radius: 3px;
+    border: 0px;
+    background-color: #333333;
+    color: #d9d9d9;
+    padding: 0 5px 0 5px;
+    margin: 0 0px 10px 50px;
+
+}
+
+.calc-buttons {
+    display: flex;
+/* flex-wrap: wrap; */
+justify-content: space-between;
+
+}
+
+.button {
+   margin: 3px;
+width: 50px;
+border: none;
+height: 45px;
+border-radius: 4px;
+color: #000000;
+cursor: pointer;
+}
+
+button:hover {
+  background-color: hsla(180, 100%, 40%, 0.3);
+  transition: .2s;
+}
+
+
+
+
+.functions-one {
+    width: 150px;
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-evenly; */
+}
+
+
+.functions-two {
+width: 150px;
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+}
+
+.triggers {
+    background-color: #ffc266;
+}
+
+
+
+.numbers {
+    background-color: #999999;
+}
+
+.basic-stuff {
+    background-color: #80d4ff;
+}
+
+.complex-stuff {
+    background-color: #80ffff;
+}
+}