arrange css for 4.4

Author: highemerly

app/javascript/styles/handon/handon.scss

@@ -4,110 +4,85 @@ $post-button-color: white !default;
 
 /* Timeline padding */
 .column .status__wrapper .status {
-  padding-top: 12px !important;
+  padding-top: 8px !important;
   padding-bottom: 8px !important;
-  padding-right: 14px !important;
-  padding-left: 14px !important;
+  padding-right: 12px !important;
+  padding-left: 12px !important;
 }
 
 .column .status__wrapper .status__action-bar {
-  margin-top: 6px;
+  margin-top: 8px;
+  height: 22px;
 }
 
 .column .status__wrapper .status__prepend {
-  padding-top: 12px !important;
+  padding-top: 6px !important;
 }
 
-/* Notification padding */
-.column .item-list .notification-ungrouped {
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 10px !important;
-  padding-bottom: 5px !important;
+.column-header__title {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
 }
 
-.column .item-list .notification-ungrouped__header {
-  padding-left: 12px !important;
-  margin-bottom: 2px !important;
+.column-header__back-button {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
 }
 
-.column .item-list .notification-group {
-  padding-left: 10px !important;
-  padding-right: 16px !important;
-  padding-top: 14px !important;
-  padding-bottom: 14px !important;
-}
+/* spaces of status_prepend at timeline */
 
-.column .item-list .notification-ungrouped .notification-ungrouped__header {
-  margin-bottom: 4px !important;
+.status__prepend {
+  font-size: 13px !important;
 }
 
-/* (Misskey compatibility) consider visibility of ultra-wide custom emojis */
-.column .status__wrapper .status .emojione {
-  width: auto !important;
-}
-.column .detailed-status__wrapper .detailed-status .emojione {
-  width: auto !important;
+/* spaces of status_info at timeline */
+.status .status__content .status__content__text {
+  font-size: 14px;
 }
 
-/* (Visibility icon) remove public icon*/
-.status-public .icon-globe {
-  display: none !important ;
-}
-
-/* (Visibility icon) emphasize followers-only */
-.status-private .icon-lock {
-  color: $lock-color !important ;
+.status .status__info {
+  padding-bottom: 8px !important;
 }
 
-/* (Visibility icon) emphasize direct */
-.status-direct .icon-at {
-  color: $at-color !important ;
+.status .status__info .status__display-name {
+  line-height: 18px !important;
 }
 
-/* Change color of display-name who is belong to handon.club */
-.status .handon-local-account {
-  color: #ff6347 !important ;
+.status .status__info .status__display-name .display-name__html {
+  font-size: 0.9em;
 }
-
-/* Enlarge custom emojis */
-p > .emojione[alt^=':']:active {
-  width: 8em;
-  height: 8em;
-  margin: 0;
+.status .status__info .status__display-name .display-name__account {
+  font-size: 0.85em;
 }
 
-/* spaces of status at timeline */
-.status span.display-name__account {
-  font-size: 0.9em;
+.status .status__info .status__avatar .account__avatar {
+  width: 36px !important;
+  height: 36px !important;
 }
 
-.status div.status__avatar div.account__avatar {
-  width: 40px !important;
-  height: 40px !important;
+.status .status__info .status__relative-time {
+  height: 36px !important;
+  font-size: 0.85em;
 }
 
-.status div.status__avatar div.account__avatar-overlay {
-  width: 40px !important;
-  height: 40px !important;
-}
+/* spaces of status_info at timeline (reblog) */
 
 .status
   div.status__avatar
   div.account__avatar-overlay
   div.account__avatar-overlay-base
   div.account__avatar {
-  width: 35px !important;
-  height: 35px !important;
+  width: 32px !important;
+  height: 32px !important;
 }
 
 .status
   div.status__avatar
   div.account__avatar-overlay
   div.account__avatar-overlay-overlay
   div.account__avatar {
-  width: 23px !important;
-  height: 23px !important;
+  width: 22px !important;
+  height: 22px !important;
 }
 
 /* spaces of link card */
@@ -120,18 +95,84 @@ p > .emojione[alt^=':']:active {
 }
 
 .status-card__image {
-  width: 80px !important;
+  width: 65px !important;
 }
 
 .status-card__title {
-  font-size: 14px !important;
+  font-size: 12px !important;
 }
 
 .status-card__host {
   margin-bottom: 0 !important;
+  font-size: 12px !important;
 }
 
 .status-card__description {
   margin-top: 4px !important;
   font-size: 12px !important;
+}
+
+/* Media */
+.media-gallery {
+  margin-top: 6px !important;
+  margin-bottom: 2px !important;
+}
+
+/* Notification padding */
+.column .item-list .notification-ungrouped {
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+  padding-top: 10px !important;
+  padding-bottom: 5px !important;
+}
+
+.column .item-list .notification-ungrouped__header {
+  padding-left: 12px !important;
+  margin-bottom: 2px !important;
+}
+
+.column .item-list .notification-group {
+  padding-left: 10px !important;
+  padding-right: 16px !important;
+  padding-top: 14px !important;
+  padding-bottom: 14px !important;
+}
+
+.column .item-list .notification-ungrouped .notification-ungrouped__header {
+  margin-bottom: 4px !important;
+}
+
+/* (Misskey compatibility) consider visibility of ultra-wide custom emojis */
+.column .status__wrapper .status .emojione {
+  width: auto !important;
+}
+.column .detailed-status__wrapper .detailed-status .emojione {
+  width: auto !important;
+}
+
+/* (Visibility icon) remove public icon*/
+.status-public .icon-globe {
+  display: none !important ;
+}
+
+/* (Visibility icon) emphasize followers-only */
+.status-private .icon-lock {
+  color: $lock-color !important ;
+}
+
+/* (Visibility icon) emphasize direct */
+.status-direct .icon-at {
+  color: $at-color !important ;
+}
+
+/* Change color of display-name who is belong to handon.club */
+.status .handon-local-account {
+  color: #ff6347 !important ;
+}
+
+/* Enlarge custom emojis */
+p > .emojione[alt^=':']:active {
+  width: 8em;
+  height: 8em;
+  margin: 0;
 }