diff --git a/webapp/src/index.css b/webapp/src/index.css
index ec2585e8..fd67e998 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -11,3 +11,26 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+
+.questionStructure, button{
+ /* RGB & HSL params */
+ --label-r: 128;
+ --label-g: 128;
+ --label-b: 128;
+ --label-h: 0;
+ --label-s: 0;
+ --label-l: 50;
+
+ --perceived-lightness: calc( ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 );
+ --lightness-switch: max(0, min(calc((1/(var(--lightness-threshold) - var(--perceived-lightness)))), 1));
+ --lightness-threshold: 0.6;
+ --background-alpha: 0.18;
+ --border-alpha: 0.3;
+ --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+ color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+ background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+ border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
+ border-radius: 3%;
+ border-style: dashed;
+}
\ No newline at end of file
diff --git a/webapp/src/storeQuestion/App.jsx b/webapp/src/storeQuestion/App.jsx
index 7be27bba..8256421c 100644
--- a/webapp/src/storeQuestion/App.jsx
+++ b/webapp/src/storeQuestion/App.jsx
@@ -51,7 +51,7 @@ function App(){
}
return (
- <>
+
Almacén de preguntas
))}
- >
+
);
/*
diff --git a/webapp/src/storeQuestion/css/questions.css b/webapp/src/storeQuestion/css/questions.css
index bc21cd2e..7768a26d 100644
--- a/webapp/src/storeQuestion/css/questions.css
+++ b/webapp/src/storeQuestion/css/questions.css
@@ -40,7 +40,8 @@
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
}*/
-.question{
+#storeQuestion .question, #storeQuestion button{
+ /* Common styling for questions */
/* RGB & HSL params */
--label-r: 128;
--label-g: 128;
@@ -62,11 +63,11 @@
border-style: dashed;
}
-body{
+#storeQuestion body{
background-color: #fff;
}
-.question .grid p{
+#storeQuestion .question .grid p{
width: max-content;
border-style: dashed;
border-radius: 15%;
@@ -92,7 +93,7 @@ body{
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
}
-.question .grid p.right{
+#storeQuestion .question .grid p.right{
width: max-content;
border-style: dashed;
border-radius: 15%;
@@ -118,35 +119,34 @@ body{
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
}
-.question .grid{
+#storeQuestion .question .grid{
display: grid;
grid-template-columns: auto auto;
padding: 5px;
}
-
-h2{
+#storeQuestion h2{
width: 100%;
text-align: center;
}
-h3{
+#storeQuestion h3{
text-align: center;
}
-#root main{
+#storeQuestion main{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
padding: 5px;
grid-gap: 10px;
}
-.container{
+#storeQuestion .container{
display: flex;
justify-content: center;
}
-.container.footer{
+#storeQuestion .container.footer{
display: flex;
justify-content: right;
margin-right: 1em;