[TWIG][CSS] Right panel WIP. Create a note now looks better, need to style in some way the default user agent buttons without removing features (e.g. current file chosen).

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/base.css

@@ -20,6 +20,7 @@
     --bg2: #434A60;
     --bg3: #5C6684;
     --translucent: #00000033;
+    --translucent-light: #FFFFFF33;
     --white: #EEDFD4;
 
     --accent-blue: #8E8DBE;
@@ -231,14 +232,14 @@ html {
     border-radius: var(--unit-size);
     box-sizing: border-box;
 
-    background-color: #00000022;
+    background-color: var(--translucent);
     font-size: var(--main-size);
     padding: var(--unit-size);
 }
 
 .note-info .avatar {
-    width: var(--main-size);
+    width: auto;
-    height: auto;
+    height: var(--main-size);
 }
 
 .note-content {

public/assets/css/right/right.css

@@ -19,17 +19,110 @@
 }
 
 .create-notice {
+    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;
     border-radius: var(--unit-size);
-    padding: var(--small-size);
+}
+
+.section-title legend {
+    display: flex;
+    width: 100%;
+    border-radius: var(--unit-size);
+
+    padding: var(--unit-size);
+    box-sizing: border-box;
+
+    background-color: var(--translucent);
+    font-family: var(--display-font);
+    font-size: var(--main-size);
+}
+
+.section-content {
+    padding: var(--unit-size);
+    box-sizing: border-box;
+}
+
+.section-content hr {
+    all: unset;
+    display: block;
+    height: 2px;
+    background-image: linear-gradient(to left, var(--translucent-light), transparent 90%);
+    margin-bottom: var(--unit-size);
+}
+
+.target,
+.scope {
+    border-radius: var(--unit-size);
+}
+
+.target label,
+.scope label {
+    font-family: var(--display-font);
+}
+
+#post_visibility {
+    display: flex;
+    justify-content: space-evenly;
+    font-size: var(--medium-size);
+    padding: var(--unit-size);
+    box-sizing: border-box;
+}
+
+#post_visibility label {
+    margin-right: var(--main-size);
+}
+
+#tabs {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--display-font);
+}
+
+.notice-options {
+    display: flex;
+    font-family: var(--display-font);
+    padding: var(--unit-size);
+    box-sizing: border-box;
+}
+
+.notice-options button {
+    font-size: var(--medium-size);
+    padding: var(--unit-size) var(--small-size);
+    border-radius: var(--unit-size);
+    border: none;
+}
+
+.attachments {
+    flex: 1;
+}
+
+.post {
+    align-self: flex-end;
+}
+
+#post_content {
+    border-radius: var(--unit-size);
+    background-color: var(--translucent);
+
+    width: 100%;
+    margin-top: var(--unit-size);
+    padding: var(--unit-size);
+    resize: vertical;
+    height: calc(6 * var(--main-size));
+
+    font-family: var(--main-font);
+    font-size: var(--medium-size);
+    color: var(--white);
+    box-sizing: border-box;
+}
+
+#post_attachments,
+#post_post {
+    cursor: pointer;
 }
 
 .custom-file-upload {
     display: inline-block;
-    padding: var(--small-size) var(--medium-size);
+    font-size: var(--main-size);
-}
-
-#post_attachments {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    cursor: pointer;
 }

templates/sidepanel/right/right.html.twig

@@ -2,43 +2,56 @@
 
     {% if post_form is defined %}
         {{ form_start(post_form) }}
-        <div class="create-notice">
+        <section class="create-notice">
-            <div class="target">
+            <form>
+                <fieldset class="section-title">
+                    <legend>Create a note</legend>
+                </fieldset>
+
+                <fieldset class="section-content">
+                    <span class="target">
                         <div class="target-top">
                             {{ form_label(post_form.to) }}
                         </div>
                         <div class="target-bot">
                             {{ form_widget(post_form.to) }}
                         </div>
-            </div>
+                    </span>
-            <div class="create-right">
+
-                <div class="create-top-right">
+                    <hr>
-                    <div class="scope">
+
+                    <span class="scope">
+                        <div class="visibility">
                             {{ form_row(post_form.visibility) }}
                         </div>
-                    <div class="tabs">
+                    </span>
+
+                    <hr>
+
+                    <span id="tabs">
                         {% for tab in tabs %}
                             <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
                         {% endfor %}
-                    </div>
+
-                </div>
                         <div class="input-wrapper">
                             <div class="content-input">
                                 {{ form_row(post_form.content) }}
                             </div>
                         </div>
+
                         <div class="notice-options">
                             <div class="attachments">
                                 <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
                                     {{ form_widget(post_form.attachments) }}
                                 </label>
                             </div>
-                    <div class="post">
+
                             {{ form_row(post_form.post) }}
                         </div>
-                </div>
+                    </span>
-            </div>
+                </fieldset>
-        </div>
+            </form>
+        </section>
         {{ form_end(post_form) }}
 
     {% endif %}