Css element selector
1 css 2 < body 3 background-color #dedede 4 color 000
/*
artifact generator: /app/node_modules/@wizzi/plugin.css/lib/artifacts/css/document/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.css.ittf
utc time: Tue, 06 May 2025 05:40:00 GMT
*/
body {
background-color: #dedede;
color: 000;
}
Css class selector
1 css 2 . page 3 background-color #dedede 4 color 000
/*
artifact generator: /app/node_modules/@wizzi/plugin.css/lib/artifacts/css/document/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.css.ittf
utc time: Tue, 06 May 2025 05:40:00 GMT
*/
.page {
background-color: #dedede;
color: 000;
}
Css id selector
1 css 2 # page 3 background-color #dedede 4 color 000
/*
artifact generator: /app/node_modules/@wizzi/plugin.css/lib/artifacts/css/document/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.css.ittf
utc time: Tue, 06 May 2025 05:40:00 GMT
*/
#page {
background-color: #dedede;
color: 000;
}
script tag with inclusion of a svg model
1 css 2 < body 3 background-image 4 svg 5 width 100% 6 height 100% 7 view-box 0 0 1600 900 8 path 9 fill #A0E2DB 10 d M0 504 0 899 1600 899 1600 120z 11 path 12 fill #CBF2F3 13 d M1600 567 1600 899 0 899 0 165z 14 path 15 fill #719D71 16 d M0 680 0 899 1600 899 1600 300z 17 path 18 fill # 37EB67E 19 d M1600 719 1600 899 0 899 0 353z 20 path 21 fill #004D66 22 d M0 788 0 899 1600 899 1600 625z
/*
artifact generator: /app/node_modules/@wizzi/plugin.css/lib/artifacts/css/document/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.css.ittf
utc time: Tue, 06 May 2025 05:40:00 GMT
*/
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 900'%3E%3Cpath fill='%23A0E2DB' d='M0 504 0 899 1600 899 1600 120z'%3E%3C/path%3E%3Cpath fill='%23CBF2F3' d='M1600 567 1600 899 0 899 0 165z'%3E%3C/path%3E%3Cpath fill='%23719D71' d='M0 680 0 899 1600 899 1600 300z'%3E%3C/path%3E%3Cpath fill='%23 37EB67E' d='M1600 719 1600 899 0 899 0 353z'%3E%3C/path%3E%3Cpath fill='%23004D66' d='M0 788 0 899 1600 899 1600 625z'%3E%3C/path%3E%3C/svg%3E");
}
scss like class
1 css 2 . gamma 3 color #000 4 . delta 5 padding 1px 6 & :hover 7 + &.active 8 color #ccc 9 media (max-width: 568px) 10 left 10px
/*
artifact generator: /app/node_modules/@wizzi/plugin.css/lib/artifacts/css/document/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.css.ittf
utc time: Tue, 06 May 2025 05:40:00 GMT
*/
.gamma {
color: #000;
}
.gamma .delta {
padding: 1px;
}
.gamma .delta:hover, .gamma .delta.active {
color: #ccc;
}
@media (max-width: 568px) {
.gamma .delta:hover, .gamma .delta.active {
left: 10px;
}
}