css-fixed

Author: satoshinotdead

package.json

@@ -1,5 +1,9 @@
 {
   "private": true,
+  "scripts": {
+    "lint:scss": "stylelint \"**/*.scss\"",
+    "lint:scss:fix": "stylelint \"**/*.scss\" --fix"
+  },
   "devDependencies": {
     "@discourse/lint-configs": "2.25.0",
     "ember-template-lint": "7.8.1",
@@ -8,7 +12,7 @@
     "stylelint": "16.20.0"
   },
   "engines": {
-    "node": ">= 22",
+    "node": ">= 18",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm",
     "pnpm": "9.x"

scss/box-view.scss

@@ -1,6 +1,6 @@
 @use "lib/viewport";
 
-@media screen and (width >= 1300px) {
+@media screen and (min-width: 1300px) {
   #main-outlet {
     border-top-right-radius: var(--d-border-radius-large);
     border-top-left-radius: var(--d-border-radius-large);
@@ -47,7 +47,7 @@
     display: none;
   }
 
-  @media screen and (width <= 488px) {
+  @media screen and (max-width: 488px) {
     display: none;
   }
 
@@ -94,7 +94,7 @@
     bottom: var(--main-grid-gap);
     left: var(--left-distance);
 
-    @media screen and (width <= 768px) {
+    @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -104,7 +104,7 @@
     bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
 
-    @media screen and (width <= 768px) {
+    @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -118,7 +118,7 @@
     left: var(--left-distance);
     height: var(--main-grid-gap);
 
-    @media screen and (width <= 768px) {
+    @media screen and (max-width: 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }
 
@@ -158,7 +158,7 @@
   }
 }
 
-@media screen and (width >= 768px) {
+@media screen and (min-width: 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -167,7 +167,7 @@
   }
 }
 
-@media screen and (width <= 768px) {
+@media screen and (max-width: 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -176,7 +176,7 @@
   }
 }
 
-@media screen and (width <= 400px) {
+@media screen and (max-width: 400px) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/composer-peek-mode.scss

@@ -2,7 +2,7 @@
   display: none;
 }
 
-@media screen and (width >= 1300px) {
+@media screen and (min-width: 1300px) {
   html:not(.fullscreen-composer) {
     .peek-mode-toggle svg {
       transform: scaleX(-1);

scss/main.scss

@@ -413,10 +413,11 @@ body.user-messages-page .new-user-wrapper .user-navigation-secondary {
 }
 
 // Disable some AI Helper functions
-ul.ai-helper-optionsli[data-value="replace_dates"],
-ul.ai-helper-optionsli[data-value="markdown_table"],
-// Hide redundant groups
-ul.ai-helper-optionsli[data-value="markdown_table"],
+ul.ai-helper-options li[data-value="replace_dates"],
+ul.ai-helper-options li[data-value="markdown_table"] {
+  display: none;
+}
+
 // Hide redundant groups
 .groups-boxes .group-box [data-group-name="moderadores"],
 .groups-boxes .group-box [data-group-name="admins"] {
@@ -447,14 +448,12 @@ ul.ai-helper-optionsli[data-value="markdown_table"],
 }
 
 // Update posts message
-
 #list-area .show-more .alert {
   padding: 0.65rem 1.15rem;
   border-radius: 0.5rem;
 }
 
 // Hide redundant dropdowns on new posts
-
 .dropdown-menu__item [data-name="quote"],
 .dropdown-menu__item [data-name="toggle-whisper"],
 .dropdown-menu .shortcut {
@@ -488,10 +487,12 @@ ul.ai-helper-optionsli[data-value="markdown_table"],
 img.emoji {
   vertical-align: unset;
 }
+
 [data-wrap="button"] {
   text-align: center;
   padding-top: 0.3rem;
 }
+
 [data-wrap="button"] a {
   display: inline-flex;
   align-items: center;
@@ -509,3 +510,19 @@ img.emoji {
   padding: 0.5em 0.65em;
   border: var(--d-button-border);
 }
+
+// Centered videos
+[data-wrap="centered-video"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// Restrict max-width if your vertical video is too tall
+[data-wrap="centered-video"] video,
+[data-wrap="centered-video"] iframe {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}