What is MSS?

MSS is advanced MTA CSS library that allows you to load CSS without any performance lost, for now it doesn't contain all CSS functions

Code style

Code is almost unreadable, that's beacuse of usage of baLua and reinterpreting it to Lua code for best performance

Installation

Unpack mss to MTA resources folder

Style functions

X Position

x: size unit;
/* Changes relative x position,
   if using % uses given percent of width */

main {
    background-color: rgb(15,15,15);
    border: 1px solid rgb(255,255,255,155);
}

main:hover {
    x: -20px;

    transition: .2s;
}

Y Position

y: size unit;
/* Changes relative y position,
   if using % uses given percent of height */

main {
    background-color: rgb(15,15,15);
    border: 1px solid rgb(255,255,255,155);
}

main:hover {
    y: -10%;

    transition: .2s;
}

Width

width: size unit;
/* Changes element width,
   if using % uses given percent of default width (given by script not CSS) */

main {
    background-color: rgb(15,15,15);
    border: 1px solid rgb(255,255,255,155);
}

main:hover {
    x: 5%;
    width: -10%;

    transition: .2s;
}

Height

height: size unit;
/* Changes element height,
   if using % uses given percent of default height (given by script not CSS) */

main {
    background-color: rgb(15,15,15);
    border: 1px solid rgb(255,255,255,155);
}

main:hover {
    height: 10%;

    transition: .2s;
}

Border radius

border-radius: size unit;
/* Changes element border radius,
   if using % uses given percent of default width or height (smaller one, given by script not CSS) */

main {
    background-color: rgb(15,15,15);
    border: 1px solid rgb(255,255,255,155);
    border-radius: 10%;
}

main:hover {
    border-radius: 40%;

    transition: .2s;
}

Background color

background-color: color format;
/* Changes element background color, accepts text color, hex (#rrggbb, #rrggbbaa), rgb and rgba */

main {
    background-color: rgb(15,15,15);
    border: 1px solid rgb(255,255,255,155);
}

main:hover {
    background-color: red;

    transition: .2s;
}

Border

border: size unit, border type, color format;

main {
   background-color: rgb(15,15,15);
   border: 3px solid lime;
   border-radius: 30%;
}

main:hover {
   border: 8px solid red;

    transition: .2s;
}

Text color

color: color format;

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   font-size: 30px;
   color: white;
}

main:hover {
   color: red;

   transition: .2s;
}

Text align

text-align: align type;

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   font-size: 30px;
   color: white;
   text-align: left;
}

main:hover {
   text-align: right;

    transition: .2s;
}

Text size

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   font-size: 40px;
}

main:hover {
   font-size: 20px;

   transition: .2s;
}

Caret color

caret-color: color format;

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   caret-color: red;
}

main:hover {
   caret-color: green;

   transition: .2s;
}

Caret width

caret-width: size format;

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;
   caret-color: red;

   caret-width: 2px;
}

main:hover {
   caret-width: 15px;

   transition: .2s;
}

Selection color

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;
   font-size: 40px;

   selection-color: red;
}

main:hover {
   selection-color: lime;

   transition: .2s;
}

Text selection color

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;
   font-size: 40px;

   selection-text-color: red;
}

main:hover {
   selection-text-color: lime;

   transition: .2s;
}

Linear gradient

background: linear-gradient(angle, colors (step));

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   background: linear-gradient(90deg, orange -100%, red 0%, orange 100%);
}

main:hover {
   background: linear-gradient(90deg, orange 0%, red 100%, orange 200%);

   transition: .2s;
}

   main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   background: linear-gradient(90deg, rgb(255, 0, 76) 0%, rgb(255, 247, 0) 100%);
}

main:hover {
   background: linear-gradient(90deg, rgb(255, 247, 0) 0%, rgb(255, 0, 76) 100%);

   transition: .2s;
}

Conic gradient

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   background: conic-gradient(0deg, rgb(255, 0, 76), rgb(255, 247, 0));
}

main:hover {
   background: conic-gradient(180deg, rgb(255, 0, 76), rgb(255, 247, 0));

   transition: .2s;
}

Diamond gradient

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   background: diamond-gradient(0deg, rgb(255, 0, 76), rgb(255, 247, 0));
   }

   main:hover {
   background: diamond-gradient(180deg, green, blue, red, orange);

   transition: .2s;
}

Radial gradient

main {
   background-color: rgb(15,15,15);
   border: 1px solid rgb(255,255,255,155);
   border-radius: 10%;

   background: radial-gradient(0deg, rgb(255, 0, 76), rgb(255, 247, 0));
   }

   main:hover {
   background: radial-gradient(180deg, rgb(255, 0, 76), rgb(38, 255, 0));

   transition: .2s;
}