Skip to content

fumeko-ts/Quick-CSS-Live-Editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 

Repository files navigation

How To Use:

  1. copy main.js and paste it into your browser's console. ps this will work on most websites but not all.

Features Overview

UI & Controls

  • Fully resizable and draggable panel with a cyber-themed design
  • Tabbed interface to switch between different style categories
  • Support for custom background images (via URL or file upload) may or may not work in your case

Element Selection

  • Shift + Hover to select elements on the page
  • Shift + Scroll to cycle through stacked or overlapping elements
  • Visual overlay highlights the currently selected element

Editing Capabilities

  • Real-time editing of CSS properties with instant feedback
  • Input fields for all major style properties
  • Built-in color pickers for color-related values
  • Option to upload background images or textures

Element Manipulation

  • Arrow keys to resize elements (hold Shift for larger steps)
  • Move mode toggle with Shift + X
  • Shift + C to move child elements along with their parent
  • Options to reset styles, remove, or hide elements

Advanced Features

  • Global style controls for links and text
  • Panel for injecting custom CSS or JavaScript
  • Inspect elements and view computed styles
  • One-click export of all active CSS rules

Keyboard Shortcuts

  • Shift + Hover: Select element
  • Shift + Scroll: Cycle through overlapping elements
  • Arrow keys: Resize element
  • Shift + X: Toggle move mode
  • Shift + C: Toggle child movement
  • Escape: Exit move mode