Change REM to PX

base.sass

@@ -60,22 +60,22 @@ $border-dark-0: rgba(0, 0, 0, 0.1)
 $border-dark-1: rgba(0, 0, 0, 0.15)
 
 // Radius
-$radius-0: 0.2rem
-$radius-1: 0.3rem
-$radius-2: 0.5rem
-$radius-3: 1.2rem
-$radius-4: 1.5rem
+$radius-0: 2px
+$radius-1: 3px
+$radius-2: 4px
+$radius-3: 8px
+$radius-4: 10px
 
 // Spacing
-$spacing-top: 0.2rem
-$spacing-side: 0.4rem
+$spacing-top: 3px
+$spacing-side: 6px
 
-$spacing-0: 0.5rem
-$spacing-1: 1rem
-$spacing-2: 1.5rem
-$spacing-3: 2rem
-$spacing-4: 3rem
-$spacing-5: 4rem
+$spacing-0: 4px
+$spacing-1: 8px
+$spacing-2: 12px
+$spacing-3: 16px
+$spacing-4: 24px
+$spacing-5: 32px
 
 // Misc colours
 $mark: #f0b177
@@ -122,8 +122,8 @@ $animation: 2s
 $bounce: cubic-bezier(0,2,1,.1)
 
 // Misc
-$shadow: 0 0 0.25rem white
-$icon-size: 3.5rem
+$shadow: 0 0 4px white
+$icon-size: 36px
 $hover-brightness: 20%
 
 /*

src/guilded/channels/chat.sass

@@ -113,7 +113,8 @@
 .ChatChannelInputInlineReplyStatusBar
     // Box
     &-container
-        background-color: $bg-0
+        background-color: $bg-1
+        border: 1px solid $border-light-1
     // Label
     &-replying-to-text
         color: $fg-1
@@ -136,6 +137,9 @@
 .CloseIcon-icon:hover
     fill: $bad-0
 
+.ChatChannelInput-editor
+    border: none
+
 // Reply headers
 .ChatV2MessageReplyHeader-container
     // Reply header
@@ -144,12 +148,12 @@
         &::after
             border-color: $fg-0
             opacity: 30%
-            height: 2.5rem
+            height: 24px
         &:first-child::after
-            height: 1rem
+            height: 12px
     // Reply header line thread
     &-thread::after, &-thread:first-child::after
-        height: 4rem
+        height: 44px
 
 .ChatV2MessageReplyHeader
     // Text in the reply
@@ -220,7 +224,7 @@
     &-line
         background-color: $bg-5
         &:last-child
-            width: 50rem
+            width: 600px
     &-container-word-style-chat &-word,
     &-word
         color: $fg-1

src/guilded/channels/events.sass

@@ -117,7 +117,7 @@
 // Pop up banner
 .GlassySplashHeader
     &-image-wrapper &-image
-        mask-image: linear-gradient(to bottom, black, transparent 7rem)
+        mask-image: linear-gradient(to bottom, black, transparent 112px)
     // Remove its highlighting
     .EventCard-container:hover &-container
         background-color: transparent

src/guilded/content.sass

@@ -47,7 +47,7 @@ $pill-bg: rgba($fg-3, 0.1)
 
 // Paragraph with only emotes
 .ParagraphRenderer-only-reaction
-    font-size: 3rem
+    font-size: 200%
     // If there is only emote paragraph above, remove margin
     & + &
         margin-top: 0 !important
@@ -73,7 +73,7 @@ $pill-bg: rgba($fg-3, 0.1)
 .BlockQuoteContainerRenderer
     background-color: $shading-1
     border-left-color: var(--NihilityTheme1)
-    border-left-width: $radius-1 + 0.1rem
+    border-left-width: $radius-1 + 2px
     border-radius: $radius-0
     overflow: hidden
     &.SlateContainerRenderer.slate-margin-lg
@@ -89,7 +89,6 @@ $pill-bg: rgba($fg-3, 0.1)
 // Code block in Markdown plain text
 .PrismTokenCodeBlockRenderer-container
     background-color: $bg-1
-    border-radius: $radius-2
     // Embeds
     .ChatEmbed-container &,
     .OpenGraphEmbed-content &,
@@ -419,17 +418,21 @@ $pill-bg: rgba($fg-3, 0.1)
 .ChatChannelInput-container
     border-radius: $radius-3
 
-// Editor
+// Forum editor
+.Editor-container
+    border: 1px solid $border-light-0
+    background-color: $bg-2
+
+// Chat input
 .ChatChannelInput-container .ChatChannelInput-editor,
 .ChatV2MessageReplyTooltipInput-title-container,
 .ChannelTitleInput-container,
 .ChatChannelInput-editor,
-.Editor-container,
 // No write editor
 .ChatChannelInput-no-permissions,
 .ChatChannelInputPublic-container
     border: 1px solid $border-light-0
-    background-color: transparent
+    background-color: $bg-3
 
 // Doc editor
 .DocEditor-container .DocEditor-content-input,
@@ -535,7 +538,7 @@ $pill-bg: rgba($fg-3, 0.1)
 // Selected text toolbar picker
 .SlateSelectionToolbar-toolbar
     background-color: $bg-0
-    box-shadow: 0rem 0rem 1rem 0.1rem black
+    box-shadow: 0 0 16px 2px black
 
 // Selected text toolbar caret
 .SlateSelectionToolbar-caret

src/guilded/layout.sass

@@ -95,13 +95,13 @@
     // Make it dark with a border
     &.StatusMessage-container-type-banner
         background: $bg-0
-        border-bottom: 0.1rem solid $active
+        border-bottom: 1px solid $active
         .StatusMessage-content
             color: $active
     // Same with stream mode, but purple
     &.StatusMessage-container-banner-type-streamer-mode
         background: $bg-0
-        border-bottom: 0.1rem solid $stream
+        border-bottom: 1px solid $stream
         .StatusMessage-content
             color: $stream
 

src/guilded/layouts/app.sass

@@ -113,7 +113,7 @@
 .SearchBarInput-container-bordered,
 .SearchBarV2-container-unfocused::after,
 .SearchBarV2-container
-    border-radius: 1rem
+    border-radius: 10px
     background-color: $bg-3
     border-color: $border-dark-1
 // Search focused
@@ -148,7 +148,7 @@
 
 // Sets group list width
 body
-    @include set-var(--group-selector-width, $icon-size + 2rem)
+    @include set-var(--group-selector-width, $icon-size + 16px)
 // Group list
 .NavV4Sidebar-container,
 .GroupSelector-container,

src/guilded/layouts/floating.sass

@@ -58,7 +58,7 @@
     // Base
     &-text-wrapper
         background-color: $bg-1
-        border: solid 0.15rem
+        border: solid 2px
         border-color: $border-dark-1
         opacity: $floating-opacity
     // Arrow/Pointer

src/guilded/loading.sass

@@ -10,7 +10,7 @@
 
 // Loading dot container
 // .LoadingAnimationMicro-container
-//     width: 2.5rem
+//     width: 40px
 
 // Loading dots
 .LoadingAnimationMicro-container-dark .LoadingAnimationMicro-bar,
@@ -33,15 +33,15 @@
 @keyframes oldLoad
     0%
         opacity: 0
-        transform: translateY(2rem)
+        transform: translateY(32px)
     25%
         opacity: 0
     50%
         opacity: 1
-        transform: translateY(0rem)
+        transform: translateY(0)
     100%
         opacity: 0
-        transform: translateY(0rem)
+        transform: translateY(0)
 // Typing animation
 @keyframes animateTyping
     0%