[CSS] Fixed Favourite button background size and colour. Fixed right panel incorrect font size.

public/assets/css/base.css

@@ -67,6 +67,7 @@
 #instance {
     display: flex;
     align-items: center;
+    align-self: center;
 }
 
 #instance:focus svg,
@@ -176,18 +177,22 @@
 .note-info {
     display: flex;
     justify-content: space-between;
-    vertical-align: middle;
+    align-items: center;
-    border-radius: var(--unit-size);
+    border-radius: var(--unit-size) var(--unit-size) 0 0;
-    box-sizing: border-box;
 
     background-color: var(--translucent);
     font-size: var(--medium-size);
     padding: 4px;
 }
+.note-info a {
+    align-items: center;
+    align-self: center;
+}
 
 .note-info .avatar {
     width: auto;
     height: var(--medium-size);
+    border-radius: var(--unit-size);
 }
 
 /* TODO: icons */
@@ -196,16 +201,26 @@
     vertical-align: middle;
 }
 .favourite-button-container {
-    width: var(--medium-size) !important;
+    width: 1em !important;
-    height: var(--medium-size) !important;
+    height: 1em !important;
 }
 .favourite-button-container button {
+    all: unset;
+    border: none !important;
     width: inherit !important;
     height: inherit !important;
-    border: unset !important;
+    background-size: cover !important;
-    padding: unset !important;
+
+    -webkit-mask-image: url("../icons/heart.svg") !important;
+    -o-mask-image: url("../icons/heart.svg") !important;
+    -moz-mask-image: url("../icons/heart.svg") !important;
     mask-image: url("../icons/heart.svg") !important;
 }
+.favourite-button-container button:hover,
+.favourite-button-container button:focus {
+    border: none !important;
+    background: var(--bg3) !important;
+}
 .favourite-button-off {
     background: var(--bg2) !important;
 }
@@ -223,12 +238,12 @@
 
 .note-attachments {
     display: flex;
+    max-width: 100%;
 }
 
 .note-attachments > figure {
     display: flex;
     flex-direction: column;
-    width: 100%;
     margin: 0;
     border-radius: var(--unit-size);
     background-color: var(--translucent);
@@ -264,8 +279,8 @@
     /* we need to control panel's view at this size */
     .icon-left,
     .icon-right {
-        display: flex;
+        display: block;
-        width: 100%;
+
     }
 
     /* by default they are hidden */
@@ -391,7 +406,7 @@
 
 /* BUTTONS AND INPUT SHENANIGANS */
 button,
-input:not([type=radio]):not([type=checkbox]) {
+input:not([type=radio]):not([type=checkbox]):not([type=text]) {
     font-size: var(--small-size) !important;
     background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
     color: var(--white) !important;
@@ -399,6 +414,11 @@ input:not([type=radio]):not([type=checkbox]) {
     border: solid 2px var(--bg2) !important;
 }
 
+textarea,
+input[type=text] {
+    font-size: inherit !important;
+}
+
 textarea:hover,
 textarea:focus {
     border-color: var(--bg3) !important;

public/assets/css/left/left.css

@@ -36,7 +36,7 @@
 }
 
 #user-avatar img {
-    border-radius: 50%;
+    border-radius: var(--unit-size);
     width: calc(3 * var(--main-size));
     height: auto;
 
@@ -51,7 +51,7 @@
 
 #user-avatar:hover img,
 #user-avatar:focus img {
-    border-radius: 50% !important;
+    border-radius: var(--unit-size) !important;
     box-shadow: var(--shadow-light) !important;
 }
 

public/assets/css/right/right.css

@@ -1,3 +1,7 @@
 #right-panel {
     right: 0;
 }
+
+#right-container .section-form {
+    font-size: var(--small-size) !important;
+}

public/assets/icons/heart.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 32 32" width="32" height="32">
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 32 32">
     <path d="M16.02 7.719v-.01l.001-.03.003-.05.005-.069.009-.088.013-.107a4.722 4.722 0 01.042-.268l.031-.159a7.458 7.458 0 01.207-.786 7.65 7.65 0 01.162-.469 7.931 7.931 0 01.206-.506 10.03 10.03 0 01.56-1.082c.055-.093.113-.184.172-.277a11.076 11.076 0 01.384-.551 10.974 10.974 0 01.437-.538 9.665 9.665 0 01.489-.514 8.79 8.79 0 01.54-.479A7.882 7.882 0 0120.83.755a6.871 6.871 0 01.688-.283 7.036 7.036 0 011.088-.287 6.743 6.743 0 011.135-.107 7.148 7.148 0 012.688.49 7.506 7.506 0 01.741.329 8.35 8.35 0 011.058.64 7.866 7.866 0 01.657.519c.106.092.21.187.311.285s.201.198.299.301a9.553 9.553 0 01.555.646 9.644 9.644 0 01.716 1.069 8.62 8.62 0 01.392.768 9.294 9.294 0 01.446 1.218 8.625 8.625 0 01.198.846 8.937 8.937 0 01.13 2.184 9.444 9.444 0 01-.174 1.33 11.73 11.73 0 01-.218.885 11.786 11.786 0 01-.885 2.179 13.702 13.702 0 01-.478.852 17.219 17.219 0 01-.833 1.252 19.77 19.77 0 01-.622.816 24.181 24.181 0 01-.668.802 41.264 41.264 0 01-.706.788 44.134 44.134 0 01-1.111 1.156l-.38.379-.383.376-.385.373-.386.37-.386.367-.386.365-.384.362-.381.359-.377.357-.372.354-.366.351-.36.349-.352.346-.344.343a52.916 52.916 0 00-1.282 1.338 27.889 27.889 0 00-1.103 1.272 27.34 27.34 0 00-.477.605l-.219.293a23.976 23.976 0 00-.397.567c-.062.092-.121.183-.179.272s-.113.177-.166.264l-.153.255c-.049.083-.095.166-.14.246a8.059 8.059 0 00-.242.464 8.263 8.263 0 00-.195.423 6.85 6.85 0 00-.151.377l-.061.17c-.019.055-.036.107-.051.158l-.043.145-.035.131-.028.117a2.744 2.744 0 00-.021.104l-.016.089c-.005.027-.008.052-.011.075l-.007.06-.004.045-.002.03v.015c0 .002 0 .003 0 0v-.015l-.002-.03-.004-.045-.007-.06-.011-.075c-.004-.028-.01-.057-.016-.089a3.86 3.86 0 00-.127-.497l-.051-.158c-.018-.055-.039-.111-.061-.17a9.318 9.318 0 00-.151-.377 8.392 8.392 0 00-.195-.423c-.036-.074-.075-.15-.115-.227s-.083-.156-.127-.237-.091-.163-.14-.246a12.277 12.277 0 00-.319-.519 13.981 13.981 0 00-.371-.552l-.205-.287a17.549 17.549 0 00-.696-.898l-.257-.311a33.058 33.058 0 00-.846-.961 29.77 29.77 0 00-.621-.662 50.15 50.15 0 00-.661-.676l-.344-.343-.352-.346-.36-.349-.366-.351-.372-.354-.377-.357-.381-.359-.383-.362-.386-.365-.386-.367-.386-.37-.385-.373-.383-.376a67.892 67.892 0 01-.756-.761l-.371-.385a32.92 32.92 0 01-.721-.781 25.993 25.993 0 01-1.017-1.198 19.411 19.411 0 01-.622-.816 16.332 16.332 0 01-.57-.831 17.219 17.219 0 01-.51-.845 12.657 12.657 0 01-.445-.859 12.857 12.857 0 01-.532-1.308 10.175 10.175 0 01-.258-.882 11.73 11.73 0 01-.178-.886 9.63 9.63 0 01-.106-1.769 9.185 9.185 0 01.141-1.302A8.948 8.948 0 011.72 3.632a9.553 9.553 0 01.525-.674 9.444 9.444 0 01.584-.617 9.197 9.197 0 01.634-.553 9.092 9.092 0 01.678-.483 8.497 8.497 0 01.714-.408 7.275 7.275 0 01.741-.329A7.38 7.38 0 017.899.084c.129-.006.257-.008.385-.006s.255.007.382.015a6.841 6.841 0 011.485.264 7.036 7.036 0 011.044.398 7.88 7.88 0 01.652.35 7.066 7.066 0 01.609.408 7.882 7.882 0 01.828.702 8.55 8.55 0 01.926 1.052 10.037 10.037 0 01.556.828 9.758 9.758 0 011.096 2.668 12.389 12.389 0 01.07.334 6.117 6.117 0 01.042.268c.005.039.01.074.013.107l.009.088.005.069.003.05.001.03v.01z"/>
 </svg>