diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 49692f6663..ed3d982efb 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -360,4 +360,16 @@ figcaption a:link {
opacity: unset;
transform: none;
}
+}
+
+@keyframes fadeOut {
+ 100% {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+
+ 0% {
+ opacity: unset;
+ transform: none;
+ }
}
\ No newline at end of file
diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css
index 43e90d9cca..74e8c44118 100644
--- a/public/assets/css/reset.css
+++ b/public/assets/css/reset.css
@@ -61,7 +61,6 @@ details > summary::-webkit-details-marker {
/* have IE ignore the detail elements altogether */
@supports not (-ms-ime-align: auto) {
-
details summary {
cursor: pointer;
}
diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index fbd36f71fd..776603eda5 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -1,307 +1,87 @@
-.content {
- display: flex;
- flex-wrap: wrap;
- margin-top: calc(4 * var(--main-size));
- justify-content: center;
- align-items: center;
- margin-left: var(--nav-size);
- margin-right: var(--nav-size);
+.main-nav {
margin-bottom: var(--unit-size);
+ font-size: var(--main-size);
+ border-radius: var(--unit-size);
+ padding: var(--unit-size);
+ box-sizing: border-box;
+
+ background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
+ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+ background-blend-mode: multiply;
}
-.main {
- width: 100%;
- margin-left: var(--unit-size);
- margin-right: var(--unit-size);
- box-shadow: var(--shadow);
- border-radius: var(--small-size);
- border: solid 2px var(--accent-low);
- background-color: var(--bg3);
+.main-nav ul {
+ margin-top: var(--main-size);
}
-.set-nav {
- order: 1;
- display: flex;
- justify-content: space-evenly;
- flex-wrap: wrap;
- flex: 1;
- background-color: var(--bg1);
- padding: var(--medium-size);
+.main-nav ul li {
font-size: var(--medium-size);
- font-family: var(--head-font);
- border-radius: var(--small-size) var(--small-size) 0 0;
-}
-.set-nav ul {
- display: flex;
- align-items: stretch;
- justify-content: space-evenly;
- width: 100%;
- margin-left: calc(2 * var(--side-margin));
- margin-right: calc(2 * var(--side-margin));
- padding: 0;
-}
+ border-radius: var(--unit-size);
+ box-sizing: border-box;
-.set-nav li {
- display: block;
- flex: 0 1 auto;
- list-style-type: none;
- font-weight: 700;
-}
+ padding: var(--unit-size);
+ margin-bottom: var(--small-size);
-.set-nav a {
- color: var(--accent);
-}
-
-.set-nav a:hover {
- color: var(--fg);
- transition: all 0.8s ease;
-}
-
-.active {
- color: var(--fg) !important;
- font-weight: 700;
-}
-
-.secondary {
- display: flex;
- flex-wrap: wrap;
- background-color: var(--bg3);
- margin: var(--unit-size);
- border: solid 2px var(--accent-low);
- border-radius: var(--small-size);
- box-shadow: var(--shadow);
+ background-color: var(--translucent);
}
.form {
- order: 3;
- padding: calc(2 * var(--unit-size));
- height: 100%;
- width: 100%;
- border-radius: 0 0 var(--small-size) var(--small-size);
-}
-
-.form-single {
- order: 2;
- padding: calc(2 * var(--unit-size));
- height: 100%;
- width: 100%;
- border-radius: var(--small-size);
-}
-
-.form label,
-.form-single label {
- font-size: var(--medium-size);
-}
-
-/* FORMS ------------------------------*/
-label {
- display: inline-block;
- font-family: 'Montserrat', sans-serif;
- font-weight: 700;
- width: 100%;
-}
-
-input[type=text] {
- margin-top: calc(var(--unit-size) * 0.5);
- width: calc(100% - var(--unit-size));
- background-color: var(--bg2);
- box-shadow: var(--shadow);
- border: solid 2px var(--accent-low);
- padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
- color: var(--fg);
- border-radius: calc(var(--unit-size) * 0.5);
- font-size: var(--medium-size);
-}
-
-.form input[type=checkbox] {
- float: left;
- margin-right: calc(var(--unit-size) * 0.5);
- margin-top: calc(var(--unit-size) * 0.2);
-}
-
-button[type=submit] {
- background: var(--bg1);
- padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
- color: var(--fg);
- border-style: solid;
- border-color: var(--accent);
+ font-size: var(--main-size);
border-radius: var(--unit-size);
- border-width: 2px;
- font-family: 'Montserrat', sans-serif;
- font-size: var(--small-size);
- font-weight: 700;
+ padding: var(--unit-size);
+ box-sizing: border-box;
+
+ background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
+ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
+ background-blend-mode: multiply;
}
-#save_bio {
- margin-top: calc(var(--unit-size) * 0.5);
- width: calc(100% - var(--unit-size));
- height: calc(10 * var(--unit-size));
- box-shadow: var(--shadow);
- background-color: var(--bg2);
- border: solid 2px var(--accent-low);
- padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
- color: var(--fg);
- border-radius: calc(var(--unit-size) * 0.5);
+.form #save {
+ margin-top: var(--main-size);
+
font-size: var(--medium-size);
- word-wrap: break-word;
- resize: vertical;
-}
-
-#save_phone_number {
- margin-top: calc(var(--unit-size) * 0.5);
- width: calc(100% - var(--unit-size));
- background-color: var(--bg2);
- box-shadow: var(--shadow);
- border: solid 2px var(--accent-low);
- padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
- color: var(--fg);
- border-radius: calc(var(--unit-size) * 0.5);
- font-size: var(--medium-size);
-}
-
-#save_language {
- margin-top: calc(var(--unit-size) * 0.5);
- background-color: var(--bg2);
- box-shadow: var(--shadow);
- border: solid 2px var(--accent-low);
- padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
- color: var(--fg);
- border-radius: calc(var(--unit-size) * 0.5);
- font-size: var(--medium-size);
-}
-
-select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-image: url("../../icons/drop.svg");
- background-size: var(--main-size);
- background-position: 95% 50%;
- background-repeat: no-repeat;
-}
-
-.help-text {
- font-size: var(--medium-size);
- font-style: italic;
- color: var(--fg);
- margin-bottom: var(--unit-size);
-}
-
-.form-single input[type=checkbox] {
- margin-left: var(--unit-size);
-}
-
-/* JS CROPPING */
-#img-cropped {
- display: block;
- max-width: 100%;
-}
-
-#img-container {
- margin: var(--main-size) auto;
- max-width: 60%;
-}
-
-.cropper-view-box,
-.cropper-face {
- border-radius: 50%;
-}
-
-/* NOTIFICATIONS TABS */
-/* visual feedback */
-ul input[type=radio] + label {
- color: var(--accent);
-}
-
-ul input[type=radio]:checked + label {
- color: var(--fg);
-}
-
-ul input[type=radio]:focus + label {
- color: var(--fg);
-}
-
-/* show/hide each tab */
-ul input[type=radio]:not(:checked) + label + div {
- display: none;
-}
-
-ul input[type=radio]:checked + label + div {
- display: flex;
-}
-
-/* hide radio buttons */
-input[type=radio] {
- position: absolute;
- z-index: 1;
- height: 1px;
- width: 1px;
- overflow: hidden;
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
- clip: rect(1px, 1px, 1px, 1px);
-}
-
-#form-tabs {
- order: 2;
- width: 100%;
- font-size: var(--medium-size);
-}
-
-#form-tabs ul {
- display: flex;
- flex-wrap: wrap;
- border-radius: 0 0 var(--unit-size) var(--unit-size);
- background-color: var(--bg1);
- justify-content: space-evenly;
- width: 100%;
-}
-
-#form-tabs ul label {
- order: 1;
- flex: 0;
-}
-
-#tabs {
- padding: var(--medium-size);
- text-transform: capitalize;
-}
-
-#form-tabs ul .form {
- order: 2;
- padding: calc(2 * var(--unit-size));
- background-color: var(--bg3) !important;
- height: 100%;
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- box-shadow: none;
- border-radius: 0 0 var(--unit-size) var(--unit-size);
- font-size: var(--unit-size);
-}
-
-#form-tabs ul .form form {
- width: 100%;
-}
-
-#form-tabs ul .form form div label {
- margin-bottom: calc(var(--unit-size) * 0.5);
-}
-
-.secondary button[type=submit] {
- background: var(--bg1);
- padding: 0.6em 1.2em;
- color: var(--fg);
- border-style: solid;
- border-color: var(--accent);
border-radius: var(--unit-size);
- border-width: 2px;
- font-family: 'Montserrat', sans-serif;
- font-weight: 700;
+ padding: var(--unit-size);
+ box-sizing: border-box;
+ background-color: var(--translucent);
}
-.secondary button[type=submit]:focus,
-.secondary button[type=submit]:hover {
- border-radius: var(--unit-size);
- box-shadow: 0 0 8px var(--accent);
+.icon-details-open {
+ fill: var(--white);
+}
+
+.section-title-settings summary:focus,
+.section-title-settings summary:hover {
+ border-radius: var(--unit-size) !important;
+ padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
+ background: var(--white) !important;
+ color: var(--bg1) !important;
+ transition: all 0.4s ease;
+}
+
+.section-title-settings summary:focus .icon-details-open,
+.section-title-settings summary:hover .icon-details-open {
+ fill: var(--bg1);
+ transition: all 0.4s ease;
+}
+
+/* SECTION DETAILS OPENED */
+.section-title-settings[open] svg {
+ transform: rotate(180deg);
+ animation: fadeOut 300ms;
+}
+
+.section-title-settings[open] .set-nav li:first-of-type {
+ margin-top: var(--unit-size);
+}
+
+.section-title-settings[open] .set-nav li:last-of-type {
+ margin-bottom: 0;
+}
+
+/* SECTION DETAILS CLOSED */
+.section-title-settings:not([open]) svg {
+ transform: initial;
+ animation: fadeIn 300ms;
}
\ No newline at end of file
diff --git a/public/assets/icons/arrow-down.svg.twig b/public/assets/icons/arrow-down.svg.twig
new file mode 100644
index 0000000000..edb5d58162
--- /dev/null
+++ b/public/assets/icons/arrow-down.svg.twig
@@ -0,0 +1,7 @@
+
+
+
+ arrow-down
+
+
\ No newline at end of file
diff --git a/public/assets/icons/plus-circle.svg.twig b/public/assets/icons/plus-circle.svg.twig
new file mode 100644
index 0000000000..2618026107
--- /dev/null
+++ b/public/assets/icons/plus-circle.svg.twig
@@ -0,0 +1,7 @@
+
+
+
+ plus-circle
+
+
\ No newline at end of file
diff --git a/templates/settings/account.html.twig b/templates/settings/account.html.twig
index a1656a74c6..14dd2168d3 100644
--- a/templates/settings/account.html.twig
+++ b/templates/settings/account.html.twig
@@ -1,22 +1,12 @@
{% extends 'settings/base.html.twig' %}
-{% block title %}Notification Settings{% endblock %}
+{% block title %}Account Settings{% endblock %}
-{% block body %}
+{% block page_name %}Account{% endblock %}
-
-
- {% block primary_nav %}
- {{ parent() }}
- {% endblock primary_nav %}
-
- {% block form %}
-
- {{ form(acc) }}
-
- {% endblock form %}
-
-
+{% block form %}
+
+
Settings / Profile
+ {{ form(acc) }}
-
-{% endblock body %}
+{% endblock form %}
diff --git a/templates/settings/avatar.html.twig b/templates/settings/avatar.html.twig
index b191cd632a..7309c70682 100644
--- a/templates/settings/avatar.html.twig
+++ b/templates/settings/avatar.html.twig
@@ -8,12 +8,9 @@
{% endblock %}
-{% block body %}
- {{ parent() }}
-{% endblock body %}
-
{% block form %}