Maingron/MainOS

View on GitHub
Program Files/evalculator/style.min.css

Summary

Maintainability
Test Coverage

Don't use IDs in selectors.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Use of !important
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Don't use IDs in selectors.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Don't use IDs in selectors.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Use of !important
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Don't use IDs in selectors.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Don't use IDs in selectors.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected end of value but found 'var(--themecolor)'.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected (<color>) but found 'var(--textcolor)'.</color>
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Using width with padding-left can sometimes make elements larger than you expect.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Using height with padding-top can sometimes make elements larger than you expect.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected (<color>) but found 'var(--themecolor)'.</color>
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected (<color>) but found 'var(--textcolor)'.</color>
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Using height with border-bottom can sometimes make elements larger than you expect.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Using width with padding-right can sometimes make elements larger than you expect.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected (<color>) but found 'var(--themecolor)'.</color>
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected (<color>) but found 'var(--textcolor)'.</color>
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Using width with padding-right can sometimes make elements larger than you expect.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected (<color>) but found 'var(--hovercolor)'.</color>
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Unknown property 'grid-gap'.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Using width with padding-left can sometimes make elements larger than you expect.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.n) is overqualified, just use .n without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

The universal selector (*) is known to be slow.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.e) is overqualified, just use .e without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.b) is overqualified, just use .b without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.c) is overqualified, just use .c without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.decimal) is overqualified, just use .decimal without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.o) is overqualified, just use .o without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Element (button.backspace) is overqualified, just use .backspace without element name.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

The box-sizing property isn't supported in IE6 and IE7.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

The box-sizing property isn't supported in IE6 and IE7.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

The box-sizing property isn't supported in IE6 and IE7.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Rule doesn't have all its properties in alphabetical order.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Rule doesn't have all its properties in alphabetical order.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected RBRACE at line 1, col 776.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Expected RBRACE at line 1, col 742.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Rule doesn't have all its properties in alphabetical order.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Rule doesn't have all its properties in alphabetical order.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Rule doesn't have all its properties in alphabetical order.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

Rule doesn't have all its properties in alphabetical order.
Open

*{box-sizing:border-box}html,body,.content{margin:0;padding:0;height:100%;box-sizing:border-box}.calculator{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap}.calculator .result #result{width:100%;height:100%;font-size:2rem;text-align:right;border:0;border-bottom:2px solid var(--themecolor);padding-left:.5rem;padding-right:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.calculator .result #result:hover,.calculator .result #result:focus,.calculator .result #result:active{background-color:unset}.calculator .expression #expression{width:100%;height:100%;font-size:1rem;text-align:right;border:0;padding-left:.5rem;padding-right:.5rem}.calculator .buttons{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:1px;padding-top:2px}.calculator .buttons button{width:100%;height:100%;font-size:1.75rem;font-weight:bold;box-sizing:border-box;border:.01em solid #000;background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button:hover{background-color:var(--hovercolor) !important;color:var(--textcolor);filter:none !important}.calculator .buttons button.n{background-color:var(--themecolor);color:var(--textcolor)}.calculator .buttons button.c{background-color:red;color:#000}.calculator .buttons button.b{filter:hue-rotate(40deg)}.calculator .buttons button.o{filter:brightness(1.3)}.calculator .buttons button.e{filter:invert(0.2)}.calculator .buttons button.backspace{background-color:#f33;filter:grayscale(0.3)}.calculator .buttons button.decimal{filter:brightness(0.8)}/*# sourceMappingURL=style.min.css.map */

There are no issues that match your filters.

Category
Status