With the following css
css-metadata {
--Archetype: Theme;
--Name: Drive-In;
--Version: 1.0;
}
#ThemeOptions {
--Theme-font-family: Segoe UI;
--Theme-font-size: 16px;
--ThemeZoneBackgroundDark-color: WitheSmoke;
--ThemeZoneBackgroundLight-color: #333333;
}
#ThemeCanvas {
aspect-ratio: 16 / 9;
background-image: url("/Theme/DriveIn/DriveIn-01-HD.jpg");
}
#ThemeZoneLeftAd { --ThemeRole: Context;
color: var(--ThemeZoneBackgroundLight-color);
left: 5cqw; top: 40cqw; width: 15cqw; height: 20cqw;
transform: rotate3d(0, 1, 0, 10deg);
}
#ThemeZoneRightAd { --ThemeRole: Control;
color: var(--ThemeZoneBackgroundLight-color);
left: 80cqw; top: 40cqw; width: 15cqw; height: 20cqw;
transform: rotate3d(0, 1, 0, -10deg);
}
#ThemeZoneScreen { --ThemeRole: Content;
color: var(--ThemeZoneBackgroundLight-color);
left: 30cqw; top: 10cqw; width: 50cqw; height: 40cqw;
}
here is what a simple test gives:
Stylesheet
StyleRule
IdSelector #About (Id)
StyleDeclaration
StyleRule
IdSelector #ThemeOptions (Id)
StyleDeclaration
StyleRule
IdSelector #ThemeCanvas (Id)
StyleDeclaration
AspectRatioProperty
BackgroundImageProperty
Property aspect-ratio: 16/9
Property background-image: url("/Theme/DriveIn/DriveIn-01-HD.jpg")
Child AspectRatioProperty: ExCSS.AspectRatioProperty
Child BackgroundImageProperty: ExCSS.BackgroundImageProperty
StyleRule
IdSelector #ThemeZoneLeftAd (Id)
StyleDeclaration
TransformProperty
Property transform: rotate3d(0, 1, 0, 10deg)
Child TransformProperty: ExCSS.TransformProperty
StyleRule
IdSelector #ThemeZoneRightAd (Id)
StyleDeclaration
TransformProperty
Property transform: rotate3d(0, 1, 0, -10deg)
Child TransformProperty: ExCSS.TransformProperty
StyleRule
IdSelector #ThemeZoneScreen (Id)
StyleDeclaration
Mention that there is a StyleDeclaration for css-metadata but it is empty.
With the following css
here is what a simple test gives:
Mention that there is a StyleDeclaration for css-metadata but it is empty.