From 6d9753dfbd62cd4903a73484d47d2e238f26391b Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Mon, 9 Sep 2024 14:18:13 +0530 Subject: [PATCH 1/9] fix: convert rgba() to rgb() (#195) * fix: convert rgba() to rgb() * convert hsla() to hsl() * convert in gradients * remove redundant opacity value `1`s --- box-alignment/flexbox/auto-margins.html | 2 +- box-alignment/flexbox/gap.html | 2 +- box-alignment/overview/flex-align-items.html | 2 +- box-alignment/overview/grid-align-items.html | 2 +- box-alignment/overview/grid-gap.html | 2 +- display/multi-keyword/inline-block.html | 4 +- display/multi-keyword/inline-flex.html | 2 +- display/multi-keyword/multi-keyword-flex.html | 2 +- editable-samples-2/css/editable.css | 4 +- .../pages/border-top-color/index.html | 2 +- .../codemirror/mode/css/less.html | 2 +- editable-samples/css/editable.css | 10 +- flexbox/alignment/align-content-column.html | 2 +- flexbox/alignment/align-content.html | 2 +- flexbox/alignment/align-items.html | 2 +- flexbox/alignment/align-self-column.html | 2 +- flexbox/alignment/align-self.html | 2 +- flexbox/alignment/auto-margins.html | 2 +- flexbox/alignment/intro.html | 2 +- flexbox/alignment/justify-content-column.html | 2 +- .../alignment/justify-content-reverse.html | 2 +- .../justify-content-writing-mode.html | 2 +- flexbox/alignment/justify-content.html | 2 +- flexbox/basics/align-items.html | 2 +- flexbox/basics/flex-direction.html | 2 +- flexbox/basics/flex-flow.html | 2 +- flexbox/basics/flex-properties.html | 2 +- flexbox/basics/flex-shorthands.html | 2 +- flexbox/basics/flex-wrap.html | 2 +- flexbox/basics/justify-content.html | 2 +- flexbox/basics/simple-example-anon.html | 2 +- flexbox/basics/simple-example.html | 2 +- flexbox/basics/the-flex-container.html | 2 +- flexbox/browsers/float.html | 2 +- flexbox/browsers/inline-block.html | 2 +- flexbox/browsers/table-cell.html | 2 +- flexbox/browsers/vertical-align.html | 2 +- flexbox/order/flex-direction.html | 2 +- flexbox/order/negative-order.html | 2 +- flexbox/order/order.html | 2 +- flexbox/order/usecase-order.html | 2 +- flexbox/ratios/flex-basis.html | 2 +- flexbox/ratios/flex-grow-ratios.html | 2 +- flexbox/ratios/flex-grow.html | 2 +- flexbox/ratios/flex-shrink-min-content.html | 2 +- flexbox/ratios/flex-shrink-ratios.html | 2 +- flexbox/ratios/flex-shrink.html | 2 +- flexbox/relationship/display-contents.html | 2 +- flexbox/relationship/flex-layout.html | 2 +- flexbox/relationship/floats.html | 2 +- flexbox/relationship/grid-layout.html | 2 +- flexbox/relationship/writing-modes.html | 2 +- flexbox/use-cases/cards.html | 2 +- flexbox/use-cases/center.html | 2 +- flexbox/use-cases/input-button.html | 4 +- flexbox/use-cases/label-input-button.html | 4 +- flexbox/use-cases/navigation-flex.html | 2 +- flexbox/use-cases/navigation.html | 2 +- flexbox/use-cases/split-navigation.html | 2 +- flexbox/wrapping/column-wrap.html | 2 +- flexbox/wrapping/flex-grid.html | 2 +- flexbox/wrapping/gaps.html | 2 +- flexbox/wrapping/grid-example.html | 2 +- flexbox/wrapping/row-reverse-wrap.html | 2 +- flexbox/wrapping/row-wrap.html | 2 +- flexbox/wrapping/visibility-collapse.html | 2 +- .../wrapping/wrapped-visibility-collapse.html | 2 +- grid/subgrid/adding-line-names.html | 4 +- grid/subgrid/gap.html | 4 +- houdini/css_painting_api/example-boxbg.html | 6 +- howto/box-shadow-button.html | 4 +- howto/opacity.html | 4 +- howto/text-shadow.html | 4 +- logical/border-longhands.html | 2 +- logical/float.html | 2 +- logical/intro-feature-queries.html | 4 +- logical/intro-grid-example.html | 4 +- logical/margin-longhands.html | 2 +- logical/padding-longhands.html | 2 +- logical/positioning-inset.html | 2 +- logical/size-inline-block.html | 2 +- logical/size-max.html | 2 +- logical/size-min.html | 2 +- logical/size-resize.html | 2 +- modules/animation.html | 2 +- modules/backgrounds.html | 8 +- modules/transforms.html | 974 +++++++++--------- .../overscroll-behavior-x.html | 14 +- path/offset-path.html | 4 +- tools/border-image-generator/styles.css | 6 +- tools/box-shadow-generator/styles.css | 12 +- tools/color-mixer/index.html | 28 +- 92 files changed, 625 insertions(+), 625 deletions(-) diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html index b1d9394a..6676fc54 100644 --- a/box-alignment/flexbox/auto-margins.html +++ b/box-alignment/flexbox/auto-margins.html @@ -68,7 +68,7 @@ padding: 20px; border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html index 01d44a27..45962562 100644 --- a/flexbox/alignment/align-content.html +++ b/flexbox/alignment/align-content.html @@ -68,7 +68,7 @@ padding: 20px; border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); flex: 1 1 100px; } diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html index 64bfb2ba..156ad313 100644 --- a/flexbox/alignment/align-items.html +++ b/flexbox/alignment/align-items.html @@ -68,7 +68,7 @@ padding: 20px; border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html index 851c4441..78d3da23 100644 --- a/flexbox/basics/the-flex-container.html +++ b/flexbox/basics/the-flex-container.html @@ -68,7 +68,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html index 56e28fd0..5ba374d4 100644 --- a/flexbox/ratios/flex-basis.html +++ b/flexbox/ratios/flex-basis.html @@ -64,7 +64,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html index 2a9806b2..36fad7ac 100644 --- a/flexbox/ratios/flex-grow-ratios.html +++ b/flexbox/ratios/flex-grow-ratios.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html index fddaef3a..0ad11f2e 100644 --- a/flexbox/ratios/flex-grow.html +++ b/flexbox/ratios/flex-grow.html @@ -64,7 +64,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html index 8be690b7..bb3d485b 100644 --- a/flexbox/ratios/flex-shrink-min-content.html +++ b/flexbox/ratios/flex-shrink-min-content.html @@ -64,7 +64,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html index 3c38f8d5..c780b1d5 100644 --- a/flexbox/ratios/flex-shrink-ratios.html +++ b/flexbox/ratios/flex-shrink-ratios.html @@ -64,7 +64,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html index 59f09660..ba86dc7b 100644 --- a/flexbox/ratios/flex-shrink.html +++ b/flexbox/ratios/flex-shrink.html @@ -64,7 +64,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/relationship/display-contents.html b/flexbox/relationship/display-contents.html index cfb2d94f..dbddf736 100644 --- a/flexbox/relationship/display-contents.html +++ b/flexbox/relationship/display-contents.html @@ -66,7 +66,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 20px; } diff --git a/flexbox/relationship/flex-layout.html b/flexbox/relationship/flex-layout.html index 884c7cf1..a35b1852 100644 --- a/flexbox/relationship/flex-layout.html +++ b/flexbox/relationship/flex-layout.html @@ -66,7 +66,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 20px; } diff --git a/flexbox/relationship/floats.html b/flexbox/relationship/floats.html index b00a5ac1..6e79ba87 100644 --- a/flexbox/relationship/floats.html +++ b/flexbox/relationship/floats.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/relationship/grid-layout.html b/flexbox/relationship/grid-layout.html index dba7808a..bbf71f78 100644 --- a/flexbox/relationship/grid-layout.html +++ b/flexbox/relationship/grid-layout.html @@ -66,7 +66,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 20px; } diff --git a/flexbox/relationship/writing-modes.html b/flexbox/relationship/writing-modes.html index fbc7fe7a..021ddb9d 100644 --- a/flexbox/relationship/writing-modes.html +++ b/flexbox/relationship/writing-modes.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html index 4e4de262..aade8a63 100644 --- a/flexbox/use-cases/cards.html +++ b/flexbox/use-cases/cards.html @@ -75,7 +75,7 @@ } .card footer { - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html index 2e1a99ba..3fe53a89 100644 --- a/flexbox/use-cases/center.html +++ b/flexbox/use-cases/center.html @@ -68,7 +68,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html index 53592c1a..3bf06a1e 100644 --- a/flexbox/use-cases/label-input-button.html +++ b/flexbox/use-cases/label-input-button.html @@ -76,11 +76,11 @@ line-height: 1; } .wrapper > input[type="text"] { - background-color: rgba(96, 139, 168, 0.5); + background-color: rgb(96 139 168 / 0.5); border-right: 1px solid rgb(96, 139, 168); } .wrapper input[type="submit"] { - background-color: rgba(96, 139, 168, 1); + background-color: rgb(96 139 168); color: #fff; } .wrapper label { diff --git a/flexbox/use-cases/navigation-flex.html b/flexbox/use-cases/navigation-flex.html index 36428c93..f8d7e414 100644 --- a/flexbox/use-cases/navigation-flex.html +++ b/flexbox/use-cases/navigation-flex.html @@ -74,7 +74,7 @@ color: #000; border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; display: block; } diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html index 2f18ae10..84614a9a 100644 --- a/flexbox/use-cases/navigation.html +++ b/flexbox/use-cases/navigation.html @@ -74,7 +74,7 @@ color: #000; border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; display: block; } diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html index d18985b3..db0139d4 100644 --- a/flexbox/use-cases/split-navigation.html +++ b/flexbox/use-cases/split-navigation.html @@ -74,7 +74,7 @@ color: #000; border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; display: block; } diff --git a/flexbox/wrapping/column-wrap.html b/flexbox/wrapping/column-wrap.html index e1216279..2b92aafa 100644 --- a/flexbox/wrapping/column-wrap.html +++ b/flexbox/wrapping/column-wrap.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/wrapping/flex-grid.html b/flexbox/wrapping/flex-grid.html index bbc33d5f..6eca9f5b 100644 --- a/flexbox/wrapping/flex-grid.html +++ b/flexbox/wrapping/flex-grid.html @@ -65,7 +65,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/wrapping/gaps.html b/flexbox/wrapping/gaps.html index 0b67a55b..7e8bd23b 100644 --- a/flexbox/wrapping/gaps.html +++ b/flexbox/wrapping/gaps.html @@ -65,7 +65,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/wrapping/grid-example.html b/flexbox/wrapping/grid-example.html index d2887560..28adcd64 100644 --- a/flexbox/wrapping/grid-example.html +++ b/flexbox/wrapping/grid-example.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/wrapping/row-reverse-wrap.html b/flexbox/wrapping/row-reverse-wrap.html index 106deb64..4d72279e 100644 --- a/flexbox/wrapping/row-reverse-wrap.html +++ b/flexbox/wrapping/row-reverse-wrap.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/wrapping/row-wrap.html b/flexbox/wrapping/row-wrap.html index 3d7912ea..c8de825f 100644 --- a/flexbox/wrapping/row-wrap.html +++ b/flexbox/wrapping/row-wrap.html @@ -62,7 +62,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { diff --git a/flexbox/wrapping/visibility-collapse.html b/flexbox/wrapping/visibility-collapse.html index 3922494f..a904357c 100644 --- a/flexbox/wrapping/visibility-collapse.html +++ b/flexbox/wrapping/visibility-collapse.html @@ -68,7 +68,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/flexbox/wrapping/wrapped-visibility-collapse.html b/flexbox/wrapping/wrapped-visibility-collapse.html index 02ce04af..1be1c97b 100644 --- a/flexbox/wrapping/wrapped-visibility-collapse.html +++ b/flexbox/wrapping/wrapped-visibility-collapse.html @@ -68,7 +68,7 @@ .box > * { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/grid/subgrid/adding-line-names.html b/grid/subgrid/adding-line-names.html index 5ca5502d..74557db4 100644 --- a/grid/subgrid/adding-line-names.html +++ b/grid/subgrid/adding-line-names.html @@ -49,7 +49,7 @@ } .subitem2 { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 0.5); grid-column: sub-b / sub-d; grid-row: 1; } @@ -88,7 +88,7 @@ } .subitem2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 / .5); grid-column: sub-b / sub-d; grid-row: 1; } diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html index 0633fa96..73465746 100644 --- a/howto/box-shadow-button.html +++ b/howto/box-shadow-button.html @@ -26,7 +26,7 @@ @@ -40,7 +40,7 @@ diff --git a/howto/opacity.html b/howto/opacity.html index 5e30a397..79766576 100644 --- a/howto/opacity.html +++ b/howto/opacity.html @@ -35,7 +35,7 @@ } .box2 { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 0.5); color: #fff; } @@ -59,7 +59,7 @@ } .box2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 / .5); color: #fff; } diff --git a/howto/text-shadow.html b/howto/text-shadow.html index f41b61a6..8829e784 100644 --- a/howto/text-shadow.html +++ b/howto/text-shadow.html @@ -21,7 +21,7 @@ @@ -36,7 +36,7 @@

Adding a shadow to text

diff --git a/logical/border-longhands.html b/logical/border-longhands.html index f2f77aaa..20cf6ac8 100644 --- a/logical/border-longhands.html +++ b/logical/border-longhands.html @@ -11,7 +11,7 @@ } .box { border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); margin: 10px; width: 220px; height: 220px; diff --git a/logical/float.html b/logical/float.html index b8327c1b..4a904fab 100644 --- a/logical/float.html +++ b/logical/float.html @@ -13,7 +13,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; width: 100px; diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html index 9b9cf0e3..45df599f 100644 --- a/logical/intro-feature-queries.html +++ b/logical/intro-feature-queries.html @@ -16,8 +16,8 @@ .grid > * { border-radius: 5px; - border: 2px solid rgba(96, 139, 168, 0.4); - background-color: rgba(96, 139, 168, 0.2); + border: 2px solid rgb(96 139 168 / 0.4); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html index efaf0fb4..698d1919 100644 --- a/logical/intro-grid-example.html +++ b/logical/intro-grid-example.html @@ -16,8 +16,8 @@ .grid > * { border-radius: 5px; - border: 2px solid rgba(96, 139, 168, 0.4); - background-color: rgba(96, 139, 168, 0.2); + border: 2px solid rgb(96 139 168 / 0.4); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html index 99dea384..e76ca0a5 100644 --- a/logical/margin-longhands.html +++ b/logical/margin-longhands.html @@ -15,7 +15,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; width: 220px; height: 220px; diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html index 1c482a96..8b96abcf 100644 --- a/logical/padding-longhands.html +++ b/logical/padding-longhands.html @@ -12,7 +12,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); margin: 10px; width: 220px; height: 220px; diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html index 8d09853c..1713872d 100644 --- a/logical/positioning-inset.html +++ b/logical/positioning-inset.html @@ -20,7 +20,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; width: 100px; height: 100px; diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html index b98315f2..ead39b8a 100644 --- a/logical/size-inline-block.html +++ b/logical/size-inline-block.html @@ -12,7 +12,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; } diff --git a/logical/size-max.html b/logical/size-max.html index fbdd2020..cf6ecdb3 100644 --- a/logical/size-max.html +++ b/logical/size-max.html @@ -12,7 +12,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; } diff --git a/logical/size-min.html b/logical/size-min.html index 9b2c6955..de7925c2 100644 --- a/logical/size-min.html +++ b/logical/size-min.html @@ -12,7 +12,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; } diff --git a/logical/size-resize.html b/logical/size-resize.html index a887d52d..752e4a8f 100644 --- a/logical/size-resize.html +++ b/logical/size-resize.html @@ -12,7 +12,7 @@ .box { border: 2px solid rgb(96, 139, 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; overflow: scroll; diff --git a/modules/animation.html b/modules/animation.html index 36611e87..be216cd2 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -141,7 +141,7 @@ box-shadow: 5px 15px 15px white, -5px 15px 15px white, - 0 20px 20px rgba(125 125 125 / 0.5); + 0 20px 20px rgb(125 125 125 / 0.5); animation: clouds ease 5s alternate infinite 0.2s, wind ease-out 4s alternate infinite; diff --git a/modules/backgrounds.html b/modules/backgrounds.html index 6f9923b0..8e74ac3d 100644 --- a/modules/backgrounds.html +++ b/modules/backgrounds.html @@ -33,10 +33,10 @@ 120px 120px; background-clip: content-box, content-box, padding-box; box-shadow: - inset 5px 5px 5px rgba(0, 0, 0, 0.4), - inset -5px -5px 5px rgba(0, 0, 0, 0.4), - 5px 5px 5px rgba(0, 0, 0, 0.4), - -5px -5px 5px rgba(0, 0, 0, 0.4); + inset 5px 5px 5px rgb(0 0 0 / 0.4), + inset -5px -5px 5px rgb(0 0 0 / 0.4), + 5px 5px 5px rgb(0 0 0 / 0.4), + -5px -5px 5px rgb(0 0 0 / 0.4); } div:first-of-type { border-radius: 0; diff --git a/modules/transforms.html b/modules/transforms.html index 4e3b7fad..1bc26495 100644 --- a/modules/transforms.html +++ b/modules/transforms.html @@ -1,487 +1,487 @@ - - - - - - - CSS Transforms - - - - -
-
- Transform settings - - -
-
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- -
-
-
-
-
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
-
z:0px
-
-
-
-
- - - - \ No newline at end of file + + + + + + + CSS Transforms + + + + +
+
+ Transform settings + + +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ +
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
z:0px
+
+
+
+
+ + + + diff --git a/overscroll-behavior/overscroll-behavior-x.html b/overscroll-behavior/overscroll-behavior-x.html index 4f504989..b87c70e1 100644 --- a/overscroll-behavior/overscroll-behavior-x.html +++ b/overscroll-behavior/overscroll-behavior-x.html @@ -11,9 +11,9 @@ background-color: magenta; background-image: repeating-linear-gradient( to right, - rgba(0, 0, 0, 0) 0px, - rgba(0, 0, 0, 0) 19px, - rgba(0, 0, 0, 0.5) 20px + rgb(0 0 0 / 0) 0px, + rgb(0 0 0 / 0) 19px, + rgb(0 0 0 / 0.5) 20px ); } @@ -33,15 +33,15 @@ background-color: yellow; background-image: repeating-linear-gradient( to right, - rgba(0, 0, 0, 0) 0px, - rgba(0, 0, 0, 0) 19px, - rgba(0, 0, 0, 0.5) 20px + rgb(0 0 0 / 0) 0px, + rgb(0 0 0 / 0) 19px, + rgb(0 0 0 / 0.5) 20px ); } p { padding: 10px; - background-color: rgba(255, 0, 0, 0.5); + background-color: rgb(255 0 0 / 0.5); margin: 0; width: 300px; position: relative; diff --git a/path/offset-path.html b/path/offset-path.html index 454cf8b8..16e88be8 100644 --- a/path/offset-path.html +++ b/path/offset-path.html @@ -67,7 +67,7 @@ .parent { width: 200px; height: 200px; - border: 4px solid rgba(0, 0, 0, 0.1); + border: 4px solid rgb(0 0 0 / 0.1); border-radius: 50%; margin: 40px; } @@ -96,7 +96,7 @@ .parent { width: 200px; height: 200px; - border: 4px solid rgba(0,0,0,0.1); + border: 4px solid rgb(0 0 0 / 0.1); border-radius: 50%; margin: 40px; } diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css index df7c01f7..31e80ba9 100644 --- a/tools/border-image-generator/styles.css +++ b/tools/border-image-generator/styles.css @@ -477,7 +477,7 @@ body[data-move="Y"] { #remote-url:focus { box-shadow: 0px 0px 3px -1px #379b4a; /*#68ACE8; */ - border-color: rgba(55, 155, 74, 0.5); + border-color: rgb(55 155 74 / 0.5); width: 450px; } @@ -511,8 +511,8 @@ body[data-move="Y"] { } #subject .guideline { - background-color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(0, 0, 0, 0.3); + background-color: rgb(255 255 255 / 0.7); + border: 1px solid rgb(0 0 0 / 0.3); position: absolute; } diff --git a/tools/box-shadow-generator/styles.css b/tools/box-shadow-generator/styles.css index 9a77a67e..3cfffa96 100644 --- a/tools/box-shadow-generator/styles.css +++ b/tools/box-shadow-generator/styles.css @@ -671,11 +671,11 @@ body { margin: 5px; background: url("picker_mask_200.png"); background: - -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); + -moz-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%), + -moz-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%); background: - -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); + -webkit-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%), + -webkit-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%); background-color: #f00; float: left; } @@ -727,8 +727,8 @@ body { background: url("alpha_mask.png"); background: -moz-linear-gradient( left, - rgba(255, 0, 0, 0) 0%, - rgba(255, 0, 0, 1) 100% + rgb(255 0 0 / 0) 0%, + rgb(255 0 0 / 1) 100% ); } diff --git a/tools/color-mixer/index.html b/tools/color-mixer/index.html index d880f313..aa083eba 100644 --- a/tools/color-mixer/index.html +++ b/tools/color-mixer/index.html @@ -245,20 +245,20 @@

Color mixer

}, }, swatches: [ - "rgba(244, 67, 54, 1)", - "rgba(233, 30, 99, 1)", - "rgba(156, 39, 176, 1)", - "rgba(103, 58, 183, 1)", - "rgba(63, 81, 181, 1)", - "rgba(33, 150, 243, 1)", - "rgba(3, 169, 244, 1)", - "rgba(0, 188, 212, 1)", - "rgba(0, 150, 136, 1)", - "rgba(76, 175, 80, 1)", - "rgba(139, 195, 74, 1)", - "rgba(205, 220, 57, 1)", - "rgba(255, 235, 59, 1)", - "rgba(255, 193, 7, 1)", + "rgb(244 67 54)", + "rgb(233 30 99)", + "rgb(156 39 176)", + "rgb(103 58 183)", + "rgb(63 81 181)", + "rgb(33 150 243)", + "rgb(3 169 244)", + "rgb(0 188 212)", + "rgb(0 150 136)", + "rgb(76 175 80)", + "rgb(139 195 74)", + "rgb(205 220 57)", + "rgb(255 235 59)", + "rgb(255 193 7)", ], }; From 82dc5e69fa9b5db32c794dbeb794df5a0e0ac007 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:19:54 +0530 Subject: [PATCH 2/9] use new syntax for CSS color function values (#196) use new syntax for css color function values --- assets/styles.css | 10 +++++----- backdrop/styles.css | 10 +++++----- box-alignment/flexbox/auto-margins.html | 4 ++-- box-alignment/flexbox/gap.html | 4 ++-- box-alignment/overview/flex-align-items.html | 4 ++-- box-alignment/overview/grid-align-items.html | 4 ++-- box-alignment/overview/grid-gap.html | 4 ++-- css-cookbook/center--download.html | 4 ++-- css-cookbook/center.html | 4 ++-- css-cookbook/columns-flexbox--download.html | 4 ++-- css-cookbook/columns-flexbox-wrapping--download.html | 4 ++-- css-cookbook/columns-flexbox-wrapping.html | 4 ++-- css-cookbook/columns-flexbox.html | 4 ++-- css-cookbook/columns-grid--download.html | 4 ++-- css-cookbook/columns-grid.html | 4 ++-- css-cookbook/columns-multicol--download.html | 4 ++-- css-cookbook/columns-multicol.html | 6 +++--- css-cookbook/grid-wrapper--download.html | 2 +- css-cookbook/grid-wrapper.html | 2 +- css-cookbook/sticky-footer--download.html | 2 +- css-cookbook/sticky-footer-flexbox--download.html | 2 +- css-cookbook/sticky-footer-flexbox.html | 2 +- css-cookbook/sticky-footer.html | 2 +- css-cookbook/styles.css | 10 +++++----- css-text/styles.css | 10 +++++----- display/multi-keyword/inline-flex.html | 2 +- display/multi-keyword/multi-keyword-flex.html | 2 +- editable-samples-2/pages/border-top-color/index.html | 2 +- feature-queries/step1.html | 4 ++-- feature-queries/step2.html | 4 ++-- feature-queries/step3.html | 4 ++-- feature-queries/step4.html | 4 ++-- flexbox/alignment/align-content-column.html | 4 ++-- flexbox/alignment/align-content.html | 4 ++-- flexbox/alignment/align-items.html | 4 ++-- flexbox/alignment/align-self-column.html | 4 ++-- flexbox/alignment/align-self.html | 4 ++-- flexbox/alignment/auto-margins.html | 4 ++-- flexbox/alignment/intro.html | 4 ++-- flexbox/alignment/justify-content-column.html | 4 ++-- flexbox/alignment/justify-content-reverse.html | 4 ++-- flexbox/alignment/justify-content-writing-mode.html | 4 ++-- flexbox/alignment/justify-content.html | 4 ++-- flexbox/basics/align-items.html | 4 ++-- flexbox/basics/flex-direction.html | 4 ++-- flexbox/basics/flex-flow.html | 4 ++-- flexbox/basics/flex-properties.html | 4 ++-- flexbox/basics/flex-shorthands.html | 4 ++-- flexbox/basics/flex-wrap.html | 4 ++-- flexbox/basics/justify-content.html | 4 ++-- flexbox/basics/simple-example-anon.html | 4 ++-- flexbox/basics/simple-example.html | 4 ++-- flexbox/basics/the-flex-container.html | 4 ++-- flexbox/browsers/float.html | 4 ++-- flexbox/browsers/inline-block.html | 4 ++-- flexbox/browsers/table-cell.html | 4 ++-- flexbox/browsers/vertical-align.html | 4 ++-- flexbox/order/flex-direction.html | 4 ++-- flexbox/order/negative-order.html | 4 ++-- flexbox/order/order.html | 4 ++-- flexbox/order/usecase-order.html | 2 +- flexbox/ratios/flex-basis.html | 4 ++-- flexbox/ratios/flex-grow-ratios.html | 4 ++-- flexbox/ratios/flex-grow.html | 4 ++-- flexbox/ratios/flex-shrink-min-content.html | 4 ++-- flexbox/ratios/flex-shrink-ratios.html | 4 ++-- flexbox/ratios/flex-shrink.html | 4 ++-- flexbox/ratios/min-max-content.html | 8 ++++---- flexbox/relationship/display-contents.html | 4 ++-- flexbox/relationship/flex-layout.html | 4 ++-- flexbox/relationship/floats.html | 4 ++-- flexbox/relationship/grid-layout.html | 4 ++-- flexbox/relationship/writing-modes.html | 4 ++-- flexbox/use-cases/cards.html | 2 +- flexbox/use-cases/center.html | 4 ++-- flexbox/use-cases/input-button.html | 4 ++-- flexbox/use-cases/label-input-button.html | 4 ++-- flexbox/use-cases/media-flipped.html | 2 +- flexbox/use-cases/media.html | 2 +- flexbox/use-cases/navigation-flex.html | 2 +- flexbox/use-cases/navigation.html | 2 +- flexbox/use-cases/split-navigation.html | 2 +- flexbox/wrapping/column-wrap.html | 4 ++-- flexbox/wrapping/flex-grid.html | 4 ++-- flexbox/wrapping/gaps.html | 6 +++--- flexbox/wrapping/grid-example.html | 4 ++-- flexbox/wrapping/row-reverse-wrap.html | 4 ++-- flexbox/wrapping/row-wrap.html | 4 ++-- flexbox/wrapping/visibility-collapse.html | 4 ++-- flexbox/wrapping/wrapped-visibility-collapse.html | 4 ++-- flow/formatting-contexts/bfc-flow-root.html | 4 ++-- flow/formatting-contexts/bfc-overflow.html | 4 ++-- flow/formatting-contexts/float.html | 4 ++-- font-features/styles.css | 10 +++++----- grid/styles.css | 10 +++++----- grid/subgrid/adding-line-names.html | 2 +- grid/subgrid/both.html | 2 +- grid/subgrid/columns.html | 2 +- grid/subgrid/gap.html | 2 +- grid/subgrid/line-names.html | 2 +- grid/subgrid/rows.html | 2 +- howto/center.html | 2 +- howto/styles.css | 10 +++++----- images/styles.css | 10 +++++----- logical/float.html | 2 +- logical/intro-feature-queries.html | 2 +- logical/intro-grid-example.html | 2 +- logical/margin-longhands.html | 2 +- logical/padding-longhands.html | 2 +- logical/positioning-inset.html | 2 +- logical/size-inline-block.html | 2 +- logical/size-max.html | 2 +- logical/size-min.html | 2 +- logical/size-resize.html | 2 +- modules/compositing.html | 2 +- modules/transforms.html | 2 +- time/styles.css | 10 +++++----- 117 files changed, 230 insertions(+), 230 deletions(-) diff --git a/assets/styles.css b/assets/styles.css index 11945fee..f46d5bc4 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/backdrop/styles.css b/backdrop/styles.css index 11945fee..f46d5bc4 100644 --- a/backdrop/styles.css +++ b/backdrop/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html index 6676fc54..0f2aca8a 100644 --- a/box-alignment/flexbox/auto-margins.html +++ b/box-alignment/flexbox/auto-margins.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/box-alignment/flexbox/gap.html b/box-alignment/flexbox/gap.html index f01e5e4e..26a1b75c 100644 --- a/box-alignment/flexbox/gap.html +++ b/box-alignment/flexbox/gap.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/box-alignment/overview/flex-align-items.html b/box-alignment/overview/flex-align-items.html index 5fe6f34c..91774e64 100644 --- a/box-alignment/overview/flex-align-items.html +++ b/box-alignment/overview/flex-align-items.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/box-alignment/overview/grid-align-items.html b/box-alignment/overview/grid-align-items.html index a8737d0f..c45bf56c 100644 --- a/box-alignment/overview/grid-align-items.html +++ b/box-alignment/overview/grid-align-items.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html index 32f048be..b924ef1c 100644 --- a/box-alignment/overview/grid-gap.html +++ b/box-alignment/overview/grid-gap.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/css-cookbook/center--download.html b/css-cookbook/center--download.html index cf6480df..37757470 100644 --- a/css-cookbook/center--download.html +++ b/css-cookbook/center--download.html @@ -21,7 +21,7 @@ } .container { - border: 2px solid rgb(75, 70, 74); + border: 2px solid rgb(75 70 74); border-radius: 0.5em; height: 200px; display: flex; @@ -30,7 +30,7 @@ } .item { - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; width: 10em; diff --git a/css-cookbook/center.html b/css-cookbook/center.html index 4404204f..8862bb43 100644 --- a/css-cookbook/center.html +++ b/css-cookbook/center.html @@ -7,12 +7,12 @@ diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html index cbcd6c5a..f1921840 100644 --- a/css-cookbook/columns-flexbox.html +++ b/css-cookbook/columns-flexbox.html @@ -11,14 +11,14 @@ diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html index 91349f2d..be9b851e 100644 --- a/css-cookbook/columns-grid--download.html +++ b/css-cookbook/columns-grid--download.html @@ -21,7 +21,7 @@ } .container { - border: 2px solid rgb(75, 70, 74); + border: 2px solid rgb(75 70 74); border-radius: 0.5em; padding: 20px; width: 500px; @@ -32,7 +32,7 @@ .container > * { padding: 10px; - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; margin: 0; } diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html index ffbc7af1..75ec4044 100644 --- a/css-cookbook/columns-grid.html +++ b/css-cookbook/columns-grid.html @@ -11,7 +11,7 @@ diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html index e8bea1af..b6794a8d 100644 --- a/css-cookbook/columns-multicol.html +++ b/css-cookbook/columns-multicol.html @@ -11,7 +11,7 @@ @@ -51,7 +51,7 @@ diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html index 7c5706a0..95dfc3f0 100644 --- a/css-cookbook/grid-wrapper--download.html +++ b/css-cookbook/grid-wrapper--download.html @@ -31,7 +31,7 @@ } .grid > * { - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; } diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html index 166418bb..62802904 100644 --- a/css-cookbook/grid-wrapper.html +++ b/css-cookbook/grid-wrapper.html @@ -17,7 +17,7 @@ } .grid > * { - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; } diff --git a/css-cookbook/sticky-footer--download.html b/css-cookbook/sticky-footer--download.html index 0ec88b6a..c4bd3ba7 100644 --- a/css-cookbook/sticky-footer--download.html +++ b/css-cookbook/sticky-footer--download.html @@ -44,7 +44,7 @@ .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/sticky-footer-flexbox--download.html b/css-cookbook/sticky-footer-flexbox--download.html index 60b1c7bc..8a447013 100644 --- a/css-cookbook/sticky-footer-flexbox--download.html +++ b/css-cookbook/sticky-footer-flexbox--download.html @@ -45,7 +45,7 @@ } .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html index 7d764a60..e460daba 100644 --- a/css-cookbook/sticky-footer-flexbox.html +++ b/css-cookbook/sticky-footer-flexbox.html @@ -23,7 +23,7 @@ .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html index 2f238620..eccb73b5 100644 --- a/css-cookbook/sticky-footer.html +++ b/css-cookbook/sticky-footer.html @@ -25,7 +25,7 @@ .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css index 11945fee..f46d5bc4 100644 --- a/css-cookbook/styles.css +++ b/css-cookbook/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/css-text/styles.css b/css-text/styles.css index 11945fee..f46d5bc4 100644 --- a/css-text/styles.css +++ b/css-text/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/display/multi-keyword/inline-flex.html b/display/multi-keyword/inline-flex.html index 57ef7b6b..59f687b6 100644 --- a/display/multi-keyword/inline-flex.html +++ b/display/multi-keyword/inline-flex.html @@ -60,7 +60,7 @@ } .flex > div { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/display/multi-keyword/multi-keyword-flex.html b/display/multi-keyword/multi-keyword-flex.html index e12f6c60..512c5e34 100644 --- a/display/multi-keyword/multi-keyword-flex.html +++ b/display/multi-keyword/multi-keyword-flex.html @@ -65,7 +65,7 @@ } .flex > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/editable-samples-2/pages/border-top-color/index.html b/editable-samples-2/pages/border-top-color/index.html index cd1b9c34..d971f961 100644 --- a/editable-samples-2/pages/border-top-color/index.html +++ b/editable-samples-2/pages/border-top-color/index.html @@ -21,7 +21,7 @@ 
border-top-color: red;
border-top-color: rgb(255, 128, 0);
border-top-color: hsl(240 50% 25% / 0.75);
border-top-color: #ffbb00;
border-top-color: currentColor;
border-top-color: transparent;
+ id="example-choice-list">
border-top-color: red;
border-top-color: rgb(255 128 0);
border-top-color: hsl(240 50% 25% / 0.75);
border-top-color: #ffbb00;
border-top-color: currentColor;
border-top-color: transparent;
diff --git a/feature-queries/step1.html b/feature-queries/step1.html index cceec733..e390d100 100644 --- a/feature-queries/step1.html +++ b/feature-queries/step1.html @@ -18,7 +18,7 @@ .box { float: left; width: 33%; - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; } @@ -41,7 +41,7 @@ .box { float: left; width: 33%; - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: .5em; padding: 20px; } * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); flex: 1 1 100px; diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html index 45962562..e9ce451c 100644 --- a/flexbox/alignment/align-content.html +++ b/flexbox/alignment/align-content.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); flex: 1 1 100px; diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html index 156ad313..6a13714f 100644 --- a/flexbox/alignment/align-items.html +++ b/flexbox/alignment/align-items.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/align-self-column.html b/flexbox/alignment/align-self-column.html index a5889ac0..918d54ff 100644 --- a/flexbox/alignment/align-self-column.html +++ b/flexbox/alignment/align-self-column.html @@ -63,12 +63,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/align-self.html b/flexbox/alignment/align-self.html index a1f67d0f..4fdd31eb 100644 --- a/flexbox/alignment/align-self.html +++ b/flexbox/alignment/align-self.html @@ -63,12 +63,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/auto-margins.html b/flexbox/alignment/auto-margins.html index 6676fc54..0f2aca8a 100644 --- a/flexbox/alignment/auto-margins.html +++ b/flexbox/alignment/auto-margins.html @@ -61,12 +61,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/intro.html b/flexbox/alignment/intro.html index 45ac2ab4..147ab171 100644 --- a/flexbox/alignment/intro.html +++ b/flexbox/alignment/intro.html @@ -62,11 +62,11 @@ .box { width: 500px; height: 300px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/justify-content-column.html b/flexbox/alignment/justify-content-column.html index 75d07571..9e455cd4 100644 --- a/flexbox/alignment/justify-content-column.html +++ b/flexbox/alignment/justify-content-column.html @@ -64,12 +64,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/justify-content-reverse.html b/flexbox/alignment/justify-content-reverse.html index 603ca61a..14640c8b 100644 --- a/flexbox/alignment/justify-content-reverse.html +++ b/flexbox/alignment/justify-content-reverse.html @@ -64,12 +64,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/justify-content-writing-mode.html b/flexbox/alignment/justify-content-writing-mode.html index 2d65395b..07a51bb3 100644 --- a/flexbox/alignment/justify-content-writing-mode.html +++ b/flexbox/alignment/justify-content-writing-mode.html @@ -63,12 +63,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/alignment/justify-content.html b/flexbox/alignment/justify-content.html index 9561d576..155ebd76 100644 --- a/flexbox/alignment/justify-content.html +++ b/flexbox/alignment/justify-content.html @@ -63,12 +63,12 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/basics/align-items.html b/flexbox/basics/align-items.html index a07bf7f2..83c02ceb 100644 --- a/flexbox/basics/align-items.html +++ b/flexbox/basics/align-items.html @@ -62,11 +62,11 @@ .box { width: 500px; height: 130px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/basics/flex-direction.html b/flexbox/basics/flex-direction.html index 1a8164b2..0fd02cc2 100644 --- a/flexbox/basics/flex-direction.html +++ b/flexbox/basics/flex-direction.html @@ -60,14 +60,14 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html index 89b475dd..6566683b 100644 --- a/flexbox/basics/flex-shorthands.html +++ b/flexbox/basics/flex-shorthands.html @@ -60,7 +60,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } @@ -68,7 +68,7 @@ .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html index a4a6e280..6de90a3d 100644 --- a/flexbox/basics/flex-wrap.html +++ b/flexbox/basics/flex-wrap.html @@ -60,7 +60,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); width: 200px; @@ -68,7 +68,7 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html index cbda9195..aba72e7f 100644 --- a/flexbox/basics/justify-content.html +++ b/flexbox/basics/justify-content.html @@ -61,11 +61,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/basics/simple-example-anon.html b/flexbox/basics/simple-example-anon.html index 0338ed7b..0d02b381 100644 --- a/flexbox/basics/simple-example-anon.html +++ b/flexbox/basics/simple-example-anon.html @@ -62,11 +62,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; diff --git a/flexbox/basics/simple-example.html b/flexbox/basics/simple-example.html index 41ef2080..1d1e0ac7 100644 --- a/flexbox/basics/simple-example.html +++ b/flexbox/basics/simple-example.html @@ -62,11 +62,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html index 78d3da23..b2b6c122 100644 --- a/flexbox/basics/the-flex-container.html +++ b/flexbox/basics/the-flex-container.html @@ -62,11 +62,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html index 56d0be88..47a9b4e1 100644 --- a/flexbox/browsers/float.html +++ b/flexbox/browsers/float.html @@ -61,7 +61,7 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box::after { @@ -71,7 +71,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html index 04ec6d41..6c278e99 100644 --- a/flexbox/browsers/inline-block.html +++ b/flexbox/browsers/inline-block.html @@ -61,11 +61,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html index 3867c4a9..0e18ca4f 100644 --- a/flexbox/browsers/table-cell.html +++ b/flexbox/browsers/table-cell.html @@ -61,11 +61,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html index cc96393c..c252e760 100644 --- a/flexbox/browsers/vertical-align.html +++ b/flexbox/browsers/vertical-align.html @@ -61,11 +61,11 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/order/flex-direction.html b/flexbox/order/flex-direction.html index 0c0a7b58..595a3cbd 100644 --- a/flexbox/order/flex-direction.html +++ b/flexbox/order/flex-direction.html @@ -60,7 +60,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); padding: 10px; @@ -73,7 +73,7 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html index 36fad7ac..1392fe59 100644 --- a/flexbox/ratios/flex-grow-ratios.html +++ b/flexbox/ratios/flex-grow-ratios.html @@ -60,7 +60,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } @@ -68,7 +68,7 @@ .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html index 0ad11f2e..60815ad8 100644 --- a/flexbox/ratios/flex-grow.html +++ b/flexbox/ratios/flex-grow.html @@ -62,7 +62,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } @@ -70,7 +70,7 @@ .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html index bb3d485b..2c7171e8 100644 --- a/flexbox/ratios/flex-shrink-min-content.html +++ b/flexbox/ratios/flex-shrink-min-content.html @@ -62,14 +62,14 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } .box { display: flex; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html index c780b1d5..f1a9e00e 100644 --- a/flexbox/ratios/flex-shrink-ratios.html +++ b/flexbox/ratios/flex-shrink-ratios.html @@ -62,7 +62,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } @@ -70,7 +70,7 @@ .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html index ba86dc7b..f76189ff 100644 --- a/flexbox/ratios/flex-shrink.html +++ b/flexbox/ratios/flex-shrink.html @@ -62,7 +62,7 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2); } @@ -70,7 +70,7 @@ .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/min-max-content.html b/flexbox/ratios/min-max-content.html index 758f1dcf..cb18b334 100644 --- a/flexbox/ratios/min-max-content.html +++ b/flexbox/ratios/min-max-content.html @@ -63,11 +63,11 @@ @@ -86,11 +86,11 @@