first iteration of settings menus complete
This commit is contained in:
Sean Edmunds
147
src/index.css
147
src/index.css
@@ -175,6 +175,7 @@ a:hover #app-address{
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: .3em;
|
||||
}
|
||||
.abackground > i{
|
||||
text-align: left;
|
||||
@@ -392,6 +393,7 @@ table a{
|
||||
margin-right: auto;
|
||||
margin-top: 2vh;
|
||||
width: 75%;
|
||||
padding-top: .3em;
|
||||
}
|
||||
|
||||
#settings-nav{
|
||||
@@ -405,7 +407,7 @@ table a{
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
height: 95vh;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-search-background);
|
||||
border-radius: 1em;
|
||||
}
|
||||
#settings-nav div{
|
||||
@@ -445,7 +447,7 @@ table a{
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
height: 95vh;
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-search-background);
|
||||
border-radius: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -460,6 +462,19 @@ table a{
|
||||
display: grid;
|
||||
text-align: center;
|
||||
}
|
||||
#settings-panel button:not(.theme-button) {
|
||||
color: var(--color-text-pri);
|
||||
margin: 1em;
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border: 0px none;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
#settings-panel button:hover:not(.theme-button) {
|
||||
background-color: var(--color-search-background);
|
||||
}
|
||||
|
||||
/* Personalization Form */
|
||||
|
||||
@@ -502,7 +517,6 @@ table a{
|
||||
#messageForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
height: 1hv;
|
||||
}
|
||||
#messageForm input:focus {
|
||||
border: var(--color-border);
|
||||
@@ -513,6 +527,87 @@ table a{
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
/* Application Form */
|
||||
|
||||
#applicationForm {
|
||||
display: grid;
|
||||
grid-column-gap: 1vh;
|
||||
grid-row-gap: 1vh;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100vh;
|
||||
text-align: end;
|
||||
}
|
||||
#applicationForm label {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#applicationForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
}
|
||||
#applicationForm input:focus {
|
||||
border: var(--color-border);
|
||||
}
|
||||
#applicationGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 5% 10% 5% 30% 5% 10% 10% 10% 5% 5%;
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
/* Bookmark Form */
|
||||
|
||||
#bookmarkForm {
|
||||
display: grid;
|
||||
grid-column-gap: 1vh;
|
||||
grid-row-gap: 1vh;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100vh;
|
||||
text-align: end;
|
||||
}
|
||||
#bookmarkForm label {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#bookmarkForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
}
|
||||
#bookmarkForm input:focus {
|
||||
border: var(--color-border);
|
||||
}
|
||||
#bookmarkGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 5% 25% 10% 60%;
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
/* Providers Form */
|
||||
|
||||
#providersForm {
|
||||
display: grid;
|
||||
grid-column-gap: 1vh;
|
||||
grid-row-gap: 1vh;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100vh;
|
||||
text-align: end;
|
||||
}
|
||||
#providersForm label {
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#providersForm input {
|
||||
border: var(--color-border);
|
||||
padding-left: 1em;
|
||||
}
|
||||
#providersForm input:focus {
|
||||
border: var(--color-border);
|
||||
}
|
||||
#providersGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 5% 10% 5% 10% 5% 65%;
|
||||
grid-row-gap: 1vh;
|
||||
}
|
||||
|
||||
|
||||
/* MODAL */
|
||||
|
||||
@@ -538,17 +633,15 @@ table a{
|
||||
#modal>div{
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text-acc);
|
||||
box-shadow: 0 14px 28px var(--color-search-background), 0 15px 12px rgba(0, 0, 0, .35);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 2em;
|
||||
margin-top: 5vh;
|
||||
margin-bottom: 5vh;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
display: grid;
|
||||
flex-direction: column;
|
||||
border-radius: 1em;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#modal h1{
|
||||
@@ -568,7 +661,7 @@ table a{
|
||||
#modal-footer{
|
||||
display:flex;
|
||||
font-size:2em;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#modal-footer a{
|
||||
@@ -585,11 +678,10 @@ table a{
|
||||
}
|
||||
|
||||
#modal-footer input[type="checkbox"]:checked + label{
|
||||
color: var(--color-text-alt);
|
||||
color: var(--color-text-acc);
|
||||
}
|
||||
|
||||
.sneaky{
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
@@ -617,9 +709,10 @@ table a{
|
||||
|
||||
#modal-theme{
|
||||
border-bottom: 0px solid var(--color-text-acc);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 2em;
|
||||
grid-row-gap: 0em;
|
||||
}
|
||||
|
||||
#providers{
|
||||
@@ -631,12 +724,30 @@ table a{
|
||||
/* THEMING */
|
||||
|
||||
.theme-button{
|
||||
font-size: 0.8em;
|
||||
margin: 2px;
|
||||
font-size: 1em;
|
||||
font-weight:500;
|
||||
margin: 20px;
|
||||
width:128px;
|
||||
line-height: 3em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.theme-row{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.theme-palette {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.swatch{
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-blackboard{
|
||||
@@ -675,6 +786,12 @@ table a{
|
||||
color: #aeea00;
|
||||
}
|
||||
|
||||
.theme-white{
|
||||
background-color: #ffffff;
|
||||
border: 4px solid #222222;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.theme-passion{
|
||||
background-color: #f5f5f5;
|
||||
border: 4px solid #8e24aa;
|
||||
@@ -709,7 +826,7 @@ table a{
|
||||
border: 4px solid #F3E600;
|
||||
color: #FF2A6D;
|
||||
}
|
||||
.theme-cyberpunk{
|
||||
.theme-quadra{
|
||||
background-color: #010115;
|
||||
border: 4px solid #F3E600;
|
||||
color: #FF2A6D;
|
||||
|
||||
Reference in New Issue
Block a user