Date: Fri, 23 Aug 2024 07:33:25 -0400
Subject: [PATCH 07/16] Fix incorrect color named in example (#194)
Border is darkgreen but text color is red
---
feature-queries/simple.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/feature-queries/simple.html b/feature-queries/simple.html
index 231edfd..d088382 100644
--- a/feature-queries/simple.html
+++ b/feature-queries/simple.html
@@ -25,7 +25,7 @@
If your browser supports row-gap, border will be be dashed and text will
- be darkgreen
+ be red
@@ -44,7 +44,7 @@
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 08/16] 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 b1d9394..6676fc5 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 01d44a2..4596256 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 64bfb2b..156ad31 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 851c444..78d3da2 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 56e28fd..5ba374d 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 2a9806b..36fad7a 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 fddaef3..0ad11f2 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 8be690b..bb3d485 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 3c38f8d..c780b1d 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 59f0966..ba86dc7 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 cfb2d94..dbddf73 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 884c7cf..a35b185 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 b00a5ac..6e79ba8 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 dba7808..bbf71f7 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 fbc7fe7..021ddb9 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 4e4de26..aade8a6 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 2e1a99b..3fe53a8 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 53592c1..3bf06a1 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 36428c9..f8d7e41 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 2f18ae1..84614a9 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 d18985b..db0139d 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 e121627..2b92aaf 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 bbc33d5..6eca9f5 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 0b67a55..7e8bd23 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 d288756..28adcd6 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 106deb6..4d72279 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 3d7912e..c8de825 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 3922494..a904357 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 02ce04a..1be1c97 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 5ca5502..74557db 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 0633fa9..7346574 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 5e30a39..7976657 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 f41b61a..8829e78 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 f2f77aa..20cf6ac 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 b8327c1..4a904fa 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 9b9cf0e..45df599 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 efaf0fb..698d191 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 99dea38..e76ca0a 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 1c482a9..8b96abc 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 8d09853..1713872 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 b98315f..ead39b8 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 fbdd202..cf6ecdb 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 9b2c695..de7925c 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 a887d52..752e4a8 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 36611e8..be216cd 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 6f9923b..8e74ac3 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 4e3b7fa..1bc2649 100644
--- a/modules/transforms.html
+++ b/modules/transforms.html
@@ -1,487 +1,487 @@
-
-
-
-
-
-
- CSS Transforms
-
-
-
-
-
-
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
-
z:0px
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+ CSS Transforms
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 4f50498..b87c70e 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 454cf8b..16e88be 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 df7c01f..31e80ba 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 9a77a67..3cfffa9 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 d880f31..aa083eb 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 09/16] 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 11945fe..f46d5bc 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 11945fe..f46d5bc 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 6676fc5..0f2aca8 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 f01e5e4..26a1b75 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 5fe6f34..91774e6 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 a8737d0..c45bf56 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 32f048b..b924ef1 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 cf6480d..3775747 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 4404204..8862bb4 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 cbcd6c5..f192184 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 91349f2..be9b851 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 ffbc7af..75ec404 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 e8bea1a..b6794a8 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 7c5706a..95dfc3f 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 166418b..6280290 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 0ec88b6..c4bd3ba 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 60b1c7b..8a44701 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 7d764a6..e460dab 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 2f23862..eccb73b 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 11945fe..f46d5bc 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 11945fe..f46d5bc 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 57ef7b6..59f687b 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 e12f6c6..512c5e3 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 cd1b9c3..d971f96 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 cceec73..e390d10 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 4596256..e9ce451 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 156ad31..6a13714 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 a5889ac..918d54f 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 a1f67d0..4fdd31e 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 6676fc5..0f2aca8 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 45ac2ab..147ab17 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 75d0757..9e455cd 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 603ca61..14640c8 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 2d65395..07a51bb 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 9561d57..155ebd7 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 a07bf7f..83c02ce 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 1a8164b..0fd02cc 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 89b475d..6566683 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 a4a6e28..6de90a3 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 cbda919..aba72e7 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 0338ed7..0d02b38 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 41ef208..1d1e0ac 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 78d3da2..b2b6c12 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 56d0be8..47a9b4e 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 04ec6d4..6c278e9 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 3867c4a..0e18ca4 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 cc96393..c252e76 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 0c0a7b5..595a3cb 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 36fad7a..1392fe5 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 0ad11f2..60815ad 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 bb3d485..2c7171e 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 c780b1d..f1a9e00 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 ba86dc7..f76189f 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 758f1dc..cb18b33 100644
--- a/flexbox/ratios/min-max-content.html
+++ b/flexbox/ratios/min-max-content.html
@@ -63,11 +63,11 @@
@@ -86,11 +86,11 @@