/* ================================================================================== */ /* == Normalize.css v8.0.1 ========================================================== */ /* ================================================================================== */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none } /* Viewport Sizing */ @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width} :root { --darkest-text: #353A40; --default-text: #6F7780; --lightest-text: #9EA4AE; --color-border: #E6EAEE; /* Color Groupings from: https://bricknerd.com/home/the-lego-color-palette-2023-edition-1-24-23 */ /* Color HEX values from: http://ryanhowerter.net/colors.php */ /* Greyscale Family */ --white: #f4f4f4; --light-bluish-gray: #a0aaad; --dark-bluish-gray: #62666b; --black: #0e1a21; /* Sand Family */ --tan: #f2daab; --dark-tan: #a07e5e; --olive-green: #8d8a4a; --sand-green: #79a085; --sand-blue: #618199; /* Red Family */ --coral: #ff5a76; --red: #e00000; --dark-red: #971f27; --reddish-brown: #863527; --dark-brown: #431e1f; /* Orange Family */ --light-nougat: #f4c0af; --medium-tan: #ffbf6d; --nougat: #f19b64; --medium-nougat: #d47f31; --orange: #ff7900; --dark-orange: #cd4b00; --medium-brown: #7f4f2e; /* Amber Family */ --bright-light-yellow: #fee06b; --yellow: #ffcb00; --bright-light-orange: #ffb200; /* Yellow Family */ --vibrant-yellow: #fffc00; /* Lime Family */ --yellow-green: #c6eb70; --lime: #a5d100; /* Erin Family */ --bright-green: #00ae00; --green: #008b1c; --dark-green: #004b18; /* Cyan Famil */ --light-aqua: #aeddd2; --dark-turquoise: #00959f; /* Capri Family */ --medium-azure: #00bfe5; --dark-azure: #0097da; /* Azure Family */ --bright-light-blue: #84c4ee; --medium-blue: #54afea; --blue: #006ccd; /* Violet Family */ --lavendar: #cbb1e0; --medium-lavendar: #af78cf; --dark-purple: #5b3c86; /* Cerise Family */ --bright-pink: #fea3df; --dark-pink: #f665b5; --magenta: #b20069; } .coral, [data-color="coral"], [data-color="coral"] svg path { color: var(--coral); background: currentColor; fill: var(--coral); } .red, [data-color="red"], [data-color="red"] svg path { color: var(--red); background: currentColor; fill: var(--red); } .yellow, [data-color="yellow"], [data-color="yellow"] svg path { color: var(--yellow); background: currentColor; fill: var(--yellow); } .bright-light-orange, [data-color="bright-light-orange"], [data-color="bright-light-orange"] svg path { color: var(--bright-light-orange); background: currentColor; fill: var(--bright-light-orange); } .vibrant-yellow, [data-color="vibrant-yellow"], [data-color="vibrant-yellow"] svg path { color: var(--vibrant-yellow); background: currentColor; fill: var(--vibrant-yellow); } .yellow-green, [data-color="yellow-green"], [data-color="yellow-green"] svg path { color: var(--yellow-green); background: currentColor; fill: var(--yellow-green); } .bright-green, [data-color="bright-green"], [data-color="bright-green"] svg path { color: var(--bright-green); background: currentColor; fill: var(--bright-green); } .light-aqua, [data-color="light-aqua"], [data-color="light-aqua"] svg path { color: var(--light-aqua); background: currentColor; fill: var(--light-aqua); } .medium-azure, [data-color="medium-azure"], [data-color="medium-azure"] svg path { color: var(--medium-azure); background: currentColor; fill: var(--medium-azure); } .dark-azure, [data-color="dark-azure"], [data-color="dark-azure"] svg path { color: var(--dark-azure); background: currentColor; fill: var(--dark-azure); } .lavendar, [data-color="lavendar"], [data-color="lavendar"] svg path { color: var(--lavendar); background: currentColor; fill: var(--lavendar); } .bright-pink, [data-color="bright-pink"], [data-color="bright-pink"] svg path { color: var(--bright-pink); background: currentColor; fill: var(--bright-pink); } .white, [data-color="white"], [data-color="white"] svg path { color: var(--white); background: currentColor; fill: var(--white); } .black, [data-color="black"], [data-color="black"] svg path { color: var(--black); background: currentColor; fill: var(--black); } .blue, [data-color="blue"], [data-color="blue"] svg path { color: var(--blue); background: currentColor; fill: var(--blue); } .medium-blue, [data-color="medium-blue"], [data-color="medium-blue"] svg path { color: var(--medium-blue); background: currentColor; fill: var(--medium-blue); } .medium-lavendar, [data-color="medium-lavendar"], [data-color="medium-lavendar"] svg path { color: var(--medium-lavendar); background: currentColor; fill: var(--medium-lavendar); } /* ================================================================================== */ /* == General Styles ================================================================ */ /* ================================================================================== */ html,body { background: #f0f6f8; font-family: 'Poppins', sans-serif; height: 100dvh; width: 100dvw; overflow: hidden; } a { text-decoration: none; color: red; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } a:hover { color: blue; } /* ================================================================================== */ /* == Header ======================================================================== */ /* ================================================================================== */ #header { background: #fff; border-bottom: 1px solid #e3e3e3; padding: 0 25px; height: 80px; line-height: 80px; } #header h1 { float: left; margin: 0; } #header h2 { float: left; margin: 0 0 0 15px; font-weight: 300; font-size: 20px; color: #676767; } /*Navigation*/ #main-nav { background: #aaa; } #main-nav ul { overflow: hidden; margin: 0; } #main-nav ul li { float: left; width: 25%; } #main-nav ul li a { display: block; padding: 10px; } /* ================================================================================== */ /* == Content ======================================================================= */ /* ================================================================================== */ #main-content { float: left; width: calc(100% - 291px); height: 100dvh; overflow: auto; } main { height: calc(100% - 80px); } #content { padding: 50px; height: calc(100% - 80px); } #canvas { position: relative; } .plate { background: currentColor; box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 1px 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1), 1px 3px 5px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.1); } .plate { position: relative; } .plate:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 432px 432px; background-image: linear-gradient(to right, rgba(0,0,0, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0, 0.15) 1px, transparent 1px); pointer-events: none; } .plate .stud { float: left; width: 27px; height: 27px; position: relative; user-select: none; background-size: 27px 27px; background-image: radial-gradient(currentColor 7.5px, transparent 8.5px), radial-gradient(rgba(255, 255, 255, 0.4) 7.5px, transparent 8.5px), radial-gradient(rgba(0, 0, 0, 0.15) 7.5px, transparent 10px), radial-gradient(rgba(0, 0, 0, 0.2) 7.5px, transparent 10.5px), radial-gradient(rgba(0, 0, 0, 0.15) 7.5px, transparent 8px); background-position: 0px 0px, -0.25px -0.5px, 0px 0px, 1px 2px, 0.75px 1.5px; } .plate .stud:hover { box-shadow: inset 0 0 3px var(--medium-azure); } .tile { background: none; } .tile:after { content: ""; width: 100%; height: 100%; position: absolute; background: currentColor; z-index: 2; box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 3px 5px rgba(0,0,0,0.4), 1px 1px 2px rgba(0,0,0,0.2); } .stud[data-shape="square"]:after { bord//er-radius: 2px; } .stud[data-shape="circle"]:after { border-radius: 50%; } .stud[data-shape="pie"]:after { border-radius: 100% 0 0 0; } .stud[data-shape="pie"].up:after { border-radius: 0 100% 0 0; } .stud[data-shape="pie"].right:after { border-radius: 0 0 100% 0; } .stud[data-shape="pie"].down:after { border-radius: 0 0 0 100%; } .stud[data-shape="pie"].left:after { border-radius: 100% 0 0 0; } .stud[data-shape="arch"]:after { border-radius: 50% 50% 0 0; } .stud[data-shape="arch"].up:after { border-radius: 50% 50% 0 0; } .stud[data-shape="arch"].right:after { border-radius: 0 50% 50% 0; } .stud[data-shape="arch"].down:after { border-radius: 0 0 50% 50%; } .stud[data-shape="arch"].left:after { border-radius: 50% 0 0 50%; } .stud[data-shape="moon"] { color: inherit; position: relative; } .stud[data-shape="moon"]:after { display: none; } .stud[data-shape="moon"] img { filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.35)) drop-shadow(1px 1px 2px rgba(0,0,0,0.25)); position: relative; z-index: 2; pointer-events: none; } .stud[data-shape="big-moon"] { color: inherit; position: relative; } .stud[data-shape="big-moon"]:after { display: none; } .stud[data-shape="big-moon"] img { filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.35)) drop-shadow(1px 1px 2px rgba(0,0,0,0.25)); position: relative; z-index: 2; pointer-events: none; } /* .plate { cursor: url("img/cursor-square.svg"), auto; } .plate { cursor: url("img/cursor-pie.svg"), auto; } .plate { cursor: url("img/cursor-moon.svg") 12 12, auto; } */ /* Rulers */ .ruler-horizontal li, .ruler-vertical li { counter-increment: a; width: 27px; height: 27px; line-height: 27px; text-align: center; font-size: 10px; font-weight: 300; color: var(--lightest-text); position: relative; } .ruler-horizontal li:after, .ruler-vertical li:after { content: counter(a); } .ruler-horizontal { } .ruler-horizontal li { float: left; } .ruler-horizontal li:before { content: ""; width: 1px; height: 12px; background: #eee; position: absolute; left: 0; top: 7px; } .ruler-horizontal li:first-child:before { display: none; } .ruler-vertical { position: absolute; top: 0; left: -27px; } .ruler-vertical li { } .ruler-vertical li:before { content: ""; width: 12px; height: 1px; background: #eee; position: absolute; left: 7px; top: 0px; } .ruler-vertical li:first-child:before { display: none; } /* Piece Counter */ #counter { width: 100%; height: 80px; background: #fff; border-top: 1px solid #e3e3e3; overflow-x: auto; } #counter ul { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; height: 79px; padding: 20px 30px 0 30px; } #counter ul::-webkit-scrollbar { display: none; } #counter ul li { display: inline-block; width: 36px; height: 36px; margin: 0 60px 0 0; box-shadow: inset -2px -3px 0 rgba(0, 0, 0, 0.06), inset -1px -2px 0 rgba(0, 0, 0, 0.06), inset 2px 2px 0 rgba(255, 255, 255, 0.06), inset 1px 2px 0 rgba(255, 255, 255, 0.06), 1px 2px 4px rgba(0,0,0,0.06), 1px 1px 2px rgba(0,0,0,0.06); } #counter ul li:after { content: attr(data-number); color: black; line-height: 40px; display: inline-block; margin-left: 50px; } #counter ul li[data-shape="square"] { border-radius: 5px; } #counter ul li[data-shape="circle"] { border-radius: 50%; } #counter ul li[data-shape="pie"] { border-radius: 5px 100% 5px 5px; } #counter ul li[data-shape="arch"] { border-radius: 50% 50% 5px 5px; } #counter ul li[data-shape="moon"] { border-radius: 100% 5px 25px 5px; } #counter ul li[data-shape="big-moon"] { border-radius: 100% 5px 25px 5px; } /* ================================================================================== */ /* == Alphabet ====================================================================== */ /* ================================================================================== */ .alphabet { height: 297px; width: 100%; display: flex; overflow-y: hidden; overflow-x: auto; } .alphabet .mini-plate { height: 297px; mar//gin-right: -27px; } .A.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .B.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .C.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .D.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .E.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .F.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .G.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .H.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .I.mini-plate { width: 108px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .J.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .K.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .L.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .M.mini-plate { width: 216px; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .N.mini-plate { width: 216px; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .O.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .P.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .Q.mini-plate { width: 216px; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .R.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .S.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .T.mini-plate { width: 216px; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .U.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .V.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .W.mini-plate { width: 216px; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); } .X.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .Y.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } .Z.mini-plate { width: 189px; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); } /* ================================================================================== */ /* == Sidebar ======================================================================= */ /* ================================================================================== */ #sidebar { float: right; width: 291px; border-left: 1px solid #e3e3e3; background: #fff; height: 100dvh; overflow-y: scroll; scroll-behavior: smooth; } #sidebar::-webkit-scrollbar { display: none; } #sidebar .block { overflow: hidden; padding: 25px; border-bottom: 1px solid #e3e3e3; } #sidebar .block:last-child { border: none; } #sidebar .block h2 { font-size: 20px; margin-bottom: 12px; } #colors-list { } #colors-list li { float: left; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 8px; text-indent: -9999px; margin: 10px; cursor: pointer; } #colors-list li.active { box-shadow: 0 0 4px var(--medium-azure), 0 0 1px var(--medium-azure); } #shapes-list { } #shapes-list li { float: left; width: 40px; height: 40px; background: currentColor; border: 2px solid #fff; border-radius: 8px; text-indent: -9999px; margin: 10px; cursor: pointer; } #shapes-list li.active { box-shadow: 0 0 4px var(--medium-azure), 0 0 1px var(--medium-azure); } #shapes-list li[data-shape="square"] { border-radius: 5px; } #shapes-list li[data-shape="circle"] { border-radius: 50%; } #shapes-list li[data-shape="pie"] { border-radius: 5px 100% 5px 5px; } #shapes-list li[data-shape="arch"] { border-radius: 50% 50% 5px 5px; } #shapes-list li[data-shape="moon"] { border-radius: 100% 5px 25px 5px; } #shapes-list li[data-shape="big-moon"] { border-radius: 100% 5px 25px 5px; } #shapes-list li[data-shape="delete"] { border-radius: 5px; outline: 1px solid var(--color-border); background: linear-gradient(-45deg, rgba(255,255,255,1) 44%, var(--red) 44%, var(--red) 56%, rgba(255,255,255,1) 56%); } #board-colors { } #board-colors li { float: left; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 8px; text-indent: -9999px; margin: 10px; cursor: pointer; } #board-colors li.active { box-shadow: 0 0 4px var(--medium-azure), 0 0 1px var(--medium-azure); } #create-new-board { } #create-new-board h3 { margin-bottom: 1rem; } #create-new-board .dimension { position: relative; margin-right: 10px; overflow: hidden; margin-bottom: 10px; } #create-new-board .dimension:after { content: "plates"; text-transform: uppercase; position: absolute; right: 15px; bottom: 12px; font-size: 15px; color: #676767; } #create-new-board .dimension label { float: left; width: 70px; line-height: 40px; font-size: 15px; font-weight: 600; } #create-new-board .dimension input { float: right; width: calc(100% - 70px); height: 40px; padding: 0 12px; color: #474747; border: 1px solid #d3d3d3; border-radius: 5px; } .btn { width: 100%; font-size: 15px; font-weight: 600; background: #fff; border: 3px solid black; border-radius: 50px; padding: 12px; margin: 10px 0 0 0; cursor: pointer; } .btn.active, .btn:hover { background: black; color: white; } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ #footer { clear: both; padding: 15px 25px; background: #fff; border-top: 1px solid #e3e3e3; font-size: 12px; } #footer a { color: #898989; } /* ================================================================================== */ /* == Media Queries ================================================================= */ /* ================================================================================== */ @media only screen and (min-width: 1024px) { } @media only screen and (max-width: 800px) { #content { float: none; width: 100%; } #sidebar { float: none; width: 100%; } } @media only screen and (max-width: 480px) { #main-nav ul li { float: none; width: 100%; } }