implemented spaces, fixed login and signup, thought creation and space creation.
This commit is contained in:
+6
-345
@@ -14,167 +14,11 @@ body {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
small,
|
||||
label,
|
||||
input,
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea,
|
||||
a,
|
||||
.modal_button,
|
||||
th,
|
||||
td,
|
||||
li,
|
||||
select,
|
||||
option,
|
||||
span {
|
||||
font-family: "Hack Nerd Font Mono", Hack, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
h4,
|
||||
h4 a {
|
||||
font-size: 1.75vw;
|
||||
}
|
||||
|
||||
h5,
|
||||
h5 a {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
h6,
|
||||
h6 a {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
label,
|
||||
li,
|
||||
.modal_button,
|
||||
.button,
|
||||
span {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75vw;
|
||||
}
|
||||
|
||||
a,
|
||||
.modal_button {
|
||||
color: orange;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
a.fill_div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
backdrop-filter: blur(50px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 2vw;
|
||||
font-weight: 800;
|
||||
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
nav form {
|
||||
padding: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand * {
|
||||
margin: 0px 15px 0px 15px;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.center-h {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -238,7 +82,7 @@ tbody tr {
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
outline: solid 3px orange;
|
||||
outline: solid 3px red;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
@@ -271,15 +115,6 @@ table tr td label {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
transition-duration: 1s;
|
||||
border: 3px solid orange;
|
||||
}
|
||||
|
||||
.narrow {
|
||||
width: 20%;
|
||||
}
|
||||
@@ -288,7 +123,7 @@ table tr td label {
|
||||
margin: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 18px;
|
||||
border: 2px solid orange;
|
||||
border: 2px solid red;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -307,11 +142,6 @@ table tr td label {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: orange;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.divLink {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
@@ -319,28 +149,6 @@ table tr td label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 3px;
|
||||
text-decoration-color: orange;
|
||||
}
|
||||
|
||||
i {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1.5vw;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
#theme_toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.article {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
@@ -359,115 +167,14 @@ i:hover {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
input,
|
||||
.autofilled,
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
select,
|
||||
option,
|
||||
textarea {
|
||||
/* Try this first */
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
box-sizing: border-box;
|
||||
transition-duration: 500ms;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input[type="datetime_local"] {
|
||||
color: white;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
border: 3px solid orange;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-radius: 18px;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form_checkbox_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
height: 29px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.form_checkbox_container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.form_checkbox_container input:checked~.checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.form_checkbox_container input:checked~.checkmark {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
.form_checkbox_container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
@@ -567,7 +274,7 @@ input[type="file"] {
|
||||
|
||||
.modal_close:hover,
|
||||
.modal_close:focus {
|
||||
color: orange;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -591,7 +298,7 @@ input[type="file"] {
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
|
||||
outline: dashed 4px orange;
|
||||
outline: dashed 4px red;
|
||||
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@@ -603,7 +310,7 @@ input[type="file"] {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: orange;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
cursor: nwse-resize;
|
||||
/* Default cursor for resizing */
|
||||
@@ -683,7 +390,7 @@ input[type="file"] {
|
||||
|
||||
::selection {
|
||||
color: black;
|
||||
background: orange;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.grid-2x1 {
|
||||
@@ -718,52 +425,6 @@ hr {
|
||||
margin: 15px 0px 15px 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: orange;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-right: 15px;
|
||||
padding: 15px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dropdown_content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 50px;
|
||||
padding: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown_content {
|
||||
display: block;
|
||||
margin-left: -15px;
|
||||
margin-top: 15px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.dropdown_content form * {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
body {
|
||||
padding-bottom: 160px;
|
||||
|
||||
+5
-80
@@ -11,10 +11,12 @@ h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
small,
|
||||
label,
|
||||
span {
|
||||
span,
|
||||
i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -31,24 +33,9 @@ nav ul li a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: white;
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
|
||||
.article_card,
|
||||
.form_card,
|
||||
.view_card {
|
||||
border: 5px solid white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
table tr {
|
||||
outline: solid 3px white;
|
||||
border-top: 2px solid white;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -57,21 +44,13 @@ table tr {
|
||||
|
||||
.button:hover,
|
||||
.button:hover i {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: white;
|
||||
color: red;
|
||||
}
|
||||
|
||||
#theme_toggle {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.article ul li {
|
||||
color: white;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
@@ -95,60 +74,6 @@ select:-webkit-autofill {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.upload_button {
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
/* .form_card:hover, */
|
||||
/* .form_card:focus, */
|
||||
/* .article_card:hover, */
|
||||
/* .article_card:focus { */
|
||||
/* box-shadow: 0 2px 4px 0 white, 0 4px 8px 0 white; */
|
||||
/* } */
|
||||
|
||||
.modal {
|
||||
background-color: black;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.modal_close {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user_actions {
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
#floating_compose {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
#floating_compose,
|
||||
#floating_compose * {
|
||||
background-color: white;
|
||||
color: black;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
#floating_compose:hover,
|
||||
#floating_compose:hover * {
|
||||
background-color: black;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#floating_compose:hover {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.dropdown_content {
|
||||
background-color: black;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.std_border,
|
||||
.med_border,
|
||||
.sm_border {
|
||||
|
||||
+4
-76
@@ -14,7 +14,8 @@ h5,
|
||||
p,
|
||||
small,
|
||||
label,
|
||||
span {
|
||||
span,
|
||||
i {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@@ -37,18 +38,7 @@ code {
|
||||
|
||||
.line {
|
||||
background-color: black;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
.article_card,
|
||||
.form_card,
|
||||
.view_card {
|
||||
border: 5px solid black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
table tr {
|
||||
outline: solid 3px black;
|
||||
border-top: 2px solid black;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -57,21 +47,13 @@ table tr {
|
||||
|
||||
.button:hover,
|
||||
.button:hover * {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: black;
|
||||
color: red;
|
||||
}
|
||||
|
||||
#theme_toggle {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.article ul li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
@@ -95,60 +77,6 @@ select:-webkit-autofill {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.upload_button {
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
/* .form_card:hover, */
|
||||
/* .form_card:focus, */
|
||||
/* .article_card:hover, */
|
||||
/* .article_card:focus { */
|
||||
/* box-shadow: 0 2px 4px 0 black, 0 4px 8px 0 black; */
|
||||
/* } */
|
||||
|
||||
.modal {
|
||||
background-color: white;
|
||||
background-color: rgba(256, 256, 256, 0.9);
|
||||
}
|
||||
|
||||
.modal_close {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.user_actions {
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
#floating_compose {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
#floating_compose,
|
||||
#floating_compose * {
|
||||
background-color: black;
|
||||
color: white;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
#floating_compose:hover,
|
||||
#floating_compose:hover * {
|
||||
background-color: white;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#floating_compose:hover {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
.dropdown_content {
|
||||
background-color: white;
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
.std_border,
|
||||
.med_border,
|
||||
.sm_border {
|
||||
|
||||
+446
-44
@@ -10,6 +10,232 @@ body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
small,
|
||||
label,
|
||||
input,
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea,
|
||||
a,
|
||||
.modal_button,
|
||||
th,
|
||||
td,
|
||||
li,
|
||||
select,
|
||||
option,
|
||||
span {
|
||||
font-family: "Hack Nerd Font Mono", Hack, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
h4,
|
||||
h4 a {
|
||||
font-size: 1.75vw;
|
||||
}
|
||||
|
||||
h5,
|
||||
h5 a {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
h6,
|
||||
h6 a {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
label,
|
||||
li,
|
||||
.modal_button,
|
||||
.button,
|
||||
span {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75vw;
|
||||
}
|
||||
|
||||
a,
|
||||
.modal_button {
|
||||
color: red;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
a.fillDiv {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
transition-duration: 1s;
|
||||
border: 3px solid red;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 3px;
|
||||
text-decoration-color: red;
|
||||
}
|
||||
|
||||
i {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1.5vw;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
#theme_toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/********** Forms ************/
|
||||
|
||||
input,
|
||||
.autofilled,
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
select,
|
||||
option,
|
||||
textarea {
|
||||
/* Try this first */
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
box-sizing: border-box;
|
||||
transition-duration: 500ms;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
border: 3px solid red;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-radius: 18px;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form_checkbox_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin: 15px 15px 15px 0px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
height: 29px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.form_checkbox_container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.form_checkbox_container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.form_checkbox_container input:checked ~ .checkmark {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
.form_checkbox_container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/********** Width & Sizing **********/
|
||||
.full_width {
|
||||
width: 100%;
|
||||
@@ -50,6 +276,11 @@ body {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/********** Rows & Columns **********/
|
||||
.row {
|
||||
display: flex;
|
||||
@@ -71,6 +302,10 @@ body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/********** Margins & Padding **********/
|
||||
.margin {
|
||||
margin: 15px;
|
||||
@@ -124,6 +359,83 @@ body {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/*********** Nav **********/
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
backdrop-filter: blur(50px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 2vw;
|
||||
font-weight: 800;
|
||||
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
nav form {
|
||||
padding: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand * {
|
||||
margin: 0px 15px 0px 15px;
|
||||
}
|
||||
|
||||
/*********** Dropdowns **********/
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dropdownContent {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/******* Space Selector *********/
|
||||
#postSpaces {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/************ Modals ************/
|
||||
#stdModal {
|
||||
position: absolute;
|
||||
@@ -136,55 +448,25 @@ body {
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#stdModal>* {}
|
||||
|
||||
/******** Action Buttons ********/
|
||||
.circleLayout {
|
||||
width: 350px;
|
||||
/* Adjust as needed */
|
||||
height: 350px;
|
||||
border-radius: 50%;
|
||||
/* Important for positioning children */
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
overflow: hidden;
|
||||
#stdModal > * {
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
.glass {
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
#actionBar {
|
||||
position: absolute;
|
||||
|
||||
border-radius: 50%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
background-color: orange;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#actionButton {
|
||||
top: 50%;
|
||||
bottom: 3.5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
transform: translate(-50%, -5%);
|
||||
|
||||
#newPost {
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
transform: translate(0%, -50%);
|
||||
}
|
||||
|
||||
#newSpace {
|
||||
top: 15%;
|
||||
left: 15%;
|
||||
transform: translate(-15%, -15%);
|
||||
}
|
||||
|
||||
#filterSort {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/********** Animations **********/
|
||||
@@ -194,11 +476,11 @@ body {
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: fade-out 750ms forwards;
|
||||
animation: fade-out 1s forwards;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: fade-in 750ms forwards;
|
||||
animation: fade-in 1s forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
@@ -220,3 +502,123 @@ body {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/********** Misc. **********/
|
||||
::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
border-radius: 18px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: red;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
#backButton {
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
left: 8%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#backButton:hover > i {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/********** Mobile **********/
|
||||
@media screen and (max-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 3.5vw;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
nav ul li a,
|
||||
li,
|
||||
i,
|
||||
span,
|
||||
input,
|
||||
label,
|
||||
input[type="submit"] {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.std_width,
|
||||
.stdWidth {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.med_width,
|
||||
.medWidth {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
bottom: -2px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 25px 0px 25px 0px;
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.site_navigation ul {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
nav .row_space_between .no_margin {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.nav_right_hand {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav_right_hand * {
|
||||
margin: 0px 0px 0px 15px;
|
||||
}
|
||||
|
||||
#backButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#actionBar {
|
||||
bottom: 125px;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user