Add experimental option to reduce whitespace
This reduces the excessive whitespace in the RCE thread page, and fixes
space issues in the thread list on mobile.
Bug: twpowertools:130
Change-Id: Ibd0c666fa7f6a9c89814e529ef7b80541143ada2
diff --git a/src/static/css/ui_spacing/console.css b/src/static/css/ui_spacing/console.css
new file mode 100644
index 0000000..daa400e
--- /dev/null
+++ b/src/static/css/ui_spacing/console.css
@@ -0,0 +1,116 @@
+@media (max-width: 700px) {
+ /*
+ * == THREAD LIST VIEW ==
+ **/
+
+ /* Hide work state label when thread row is collapsed */
+ ec-thread-summary .thread-summary:not(.expanded) .issue-tracking-work-state {
+ display: none!important;
+ }
+}
+
+@media (max-width: 599px) {
+ /*
+ * == THREAD LIST VIEW ==
+ **/
+
+ /* Squeeze all elements in each row */
+ ec-thread-summary .issue-tracking-work-state {
+ display: none!important;
+ }
+
+ ec-thread-summary .title,
+ ec-thread-summary ec-second-summary-line .properties,
+ ec-thread-summary ec-second-summary-line ec-relative-time {
+ margin-inline-start: 0!important;
+ margin-inline-end: 8px!important;
+ }
+
+ ec-thread-summary ec-thread-counts,
+ ec-thread-summary ec-second-summary-line .icons {
+ width: auto!important;
+ }
+
+ ec-thread-list ec-bulk-actions {
+ padding-inline-start: 4px!important;
+ padding-inline-end: 0!important;
+ }
+
+ ec-thread-summary .panel {
+ padding-inline: 4px!important;
+ }
+
+ ec-thread-summary .panel > .main-header > .header.header {
+ padding-inline: 0!important;
+ }
+
+ body:not(.TWPT-threadlistavatars-enabled) ec-thread-summary div.header div.header-content {
+ width: calc(100% - 68px)!important;
+ }
+
+ body.TWPT-threadlistavatars-enabled ec-thread-summary div.header div.header-content {
+ width: calc(100% - 134px)!important;
+ }
+
+ .TWPT-avatars {
+ min-width: 62px!important;
+ margin-inline-start: 4px!important;
+ }
+
+ .TWPT-avatars .TWPT-avatar:first-child {
+ margin-inline-start: 2px!important;
+ }
+
+ .TWPT-avatars .TWPT-avatar,
+ .TWPT-avatars .TWPT-avatar-private-placeholder {
+ height: 22px!important;
+ width: 22px!important;
+ }
+
+ ec-thread-summary .header.header .checkbox {
+ min-width: 32px!important;
+ }
+
+ ec-thread-summary .header.header .checkbox material-checkbox {
+ margin: 8px 4px!important;
+ }
+
+ ec-thread-summary .header.header .star-button {
+ margin-inline-start: 0!important;
+ margin-inline-end: 4px!important;
+ }
+
+ ec-thread-summary .header.header .star-button .content {
+ padding: 8px 4px!important;
+ }
+
+ ec-thread-summary .action .expand-container {
+ padding-inline: 0!important;
+ }
+
+ ec-thread-summary .action .expand-container .expand-button {
+ width: 32px;
+ }
+
+ ec-thread-summary .action .expand-container .expand-button > .content {
+ padding: 8px 4px!important;
+ }
+
+ ec-thread-summary .thread-summary.expanded .main.main .content-wrapper {
+ margin: 0 12px 16px!important;
+ }
+
+ ec-thread-summary .thread-summary.expanded .main.main .content-wrapper > .content > .content {
+ padding-inline: 56px 30px!important;
+ padding-block: 0!important;
+ }
+}
+
+@media (min-width: 37.5rem) {
+ /*
+ * == THREAD VIEW ==
+ **/
+ .scTailwindThreadQuestionQuestioncardcontent {
+ padding: 2rem 3rem 1.5rem 3rem!important;
+ }
+}