Skip to content

Cinny Tweaks by reinachan

Screenshot of Cinny Tweaks
Write a review Install Get Stylus

Details

Authorreinachan

LicenseAGPL-3.0

Categorycinny

Created

Updated

Size2.1 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A collection of minor tweaks to Cinny's UI, including making the command-bar auto-hide when not in use.

Notes

Currently, there's no git repository for this. Maybe I'll make one in the future. For now, if you're facing any issues and want to report them, message me on Matrix at reinacchan:matrix.org

Changelog

1.0.0
Make command bar auto-hide when not in use

1.1.0
Add optional backdrop blur to modals

1.2.0
Add optional width limit for messages

1.2.1
Fix reply bar showing up under the message compose input

Source code

/* ==UserStyle==
@name           Cinny Tweaks
@namespace      userstyles.world/user/reinachan
@version        1.2.1
@description    UI improvements to Cinny
@author         Reinachan
@preprocessor   less

@var text       modalBlur "Modal blur amount" 2px
@var checkbox   narrowChat "Make chat narrower" 0
==/UserStyle== */

@-moz-document domain("app.cinny.in") {
  /* Insert code here... */
  
  /* Add padding to message compose input */
  #message-textarea {
    padding-right: 5px;
  }
  
  /* Make the command-bar only visible when relevant */
  .room-view__sticky {
    display: grid;
    grid-template-areas:
      "cmd-bar"
      "room-reply"
      "room-input";
    min-height: 0;
    
    & > .room-input {
      grid-area: room-input;
    }
    
    & > .room-reply {
      grid-area: room-reply;
    }
    
    & > .cmd-bar {
      grid-area: cmd-bar;
      min-height: 0;
      max-width: 100%;
      
      & > .following-members {
        position: absolute;
        transform: translateY(-22px);
        
        & > p {
          background-color: var(--bg-surface);
        }
      }
      
      & > .cmd-bar__content {
        min-height: var(--cmd-bar-height);
        
        /* kind of a hack to prevent it from overflowing */
        width: 50px;
      }
    }
  }
  
  /* Fix weird margin in sidebars */
  .room-category .room-selector {
    margin-left: auto;
    margin-right: auto;
  }
  .people-drawer__content > div {
    margin-right: var(--sp-extra-tight) !important;
  }
  
  /* Blur modal background */
  .ReactModal__Overlay {
    backdrop-filter: blur(@modalBlur);
  }
  
  /* Make messages narrower to improve readability on large screens */
  .message when (@narrowChat = 1) {
    &.message--body-only,
    &.message--full {
      max-width: 85ch;
      margin-left: auto;
      margin-right: auto;
    } 
  }
  .room-view__sticky when (@narrowChat = 1) {
    .room-input {
      max-width: 90ch;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

Reviews

No reviews yet.