diff --git a/components/common.module.css b/components/common.module.css new file mode 100644 index 0000000..14a1def --- /dev/null +++ b/components/common.module.css @@ -0,0 +1,159 @@ +.gridLineHorizontal { + --background: #ffffff; + --color: rgba(0, 0, 0, 0.2); + --height: 1px; + --width: 5px; + --fade-stop: 90%; + /* Bleed in or out from the container */ + --offset: -100px; + + position: absolute; + width: calc(100% + var(--offset)); + height: var(--height); + left: calc(var(--offset) / 2 * -1); + + background: linear-gradient( + to right, + var(--color), + var(--color) 50%, + transparent 0, + transparent + ); + background-size: var(--width) var(--height); + + /* Fade out the edges */ + mask: linear-gradient( + to left, + var(--background) var(--fade-stop), + transparent + ), + linear-gradient(to right, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + -webkit-mask: linear-gradient( + to left, + var(--background) var(--fade-stop), + transparent + ), + linear-gradient(to right, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + mask-composite: exclude; + -webkit-mask-composite: exclude; + z-index: 20; +} + +.gridLineHorizontalDark { + --background: #ffffff; + --color: rgba(255, 255, 255, 0.2); + --height: 1px; + --width: 5px; + --fade-stop: 90%; + /* Bleed in or out from the container */ + --offset: -100px; + + position: absolute; + width: calc(100% + var(--offset)); + height: var(--height); + left: calc(var(--offset) / 2 * -1); + + background: linear-gradient( + to right, + var(--color), + var(--color) 50%, + transparent 0, + transparent + ); + background-size: var(--width) var(--height); + + /* Fade out the edges */ + mask: linear-gradient( + to left, + var(--background) var(--fade-stop), + transparent + ), + linear-gradient(to right, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + -webkit-mask: linear-gradient( + to left, + var(--background) var(--fade-stop), + transparent + ), + linear-gradient(to right, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + mask-composite: exclude; + -webkit-mask-composite: exclude; + z-index: 20; +} + +.gridLineVertical { + --background: #ffffff; + --color: rgba(0, 0, 0, 0.2); + --height: 5px; + --width: 1px; + --fade-stop: 90%; + --offset: -100px; + + position: absolute; + height: calc(100% + var(--offset)); + width: var(--width); + top: calc(var(--offset) / 2 * -1); + + background: linear-gradient( + to bottom, + var(--color), + var(--color) 50%, + transparent 0, + transparent + ); + background-size: var(--width) var(--height); + + mask: linear-gradient(to top, var(--background) var(--fade-stop), transparent), + linear-gradient(to bottom, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + -webkit-mask: linear-gradient( + to top, + var(--background) var(--fade-stop), + transparent + ), + linear-gradient(to bottom, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + mask-composite: exclude; + -webkit-mask-composite: exclude; + z-index: 20; +} + +.gridLineVerticalDark { + --background: #ffffff; + --color: rgba(255, 255, 255, 0.2); + --height: 5px; + --width: 1px; + --fade-stop: 90%; + --offset: -100px; + + position: absolute; + height: calc(100% + var(--offset)); + width: var(--width); + top: calc(var(--offset) / 2 * -1); + + background: linear-gradient( + to bottom, + var(--color), + var(--color) 50%, + transparent 0, + transparent + ); + background-size: var(--width) var(--height); + + mask: linear-gradient(to top, var(--background) var(--fade-stop), transparent), + linear-gradient(to bottom, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + -webkit-mask: linear-gradient( + to top, + var(--background) var(--fade-stop), + transparent + ), + linear-gradient(to bottom, var(--background) var(--fade-stop), transparent), + linear-gradient(black, black); + mask-composite: exclude; + -webkit-mask-composite: exclude; + z-index: 20; +}