Maingron/MainOS

View on GitHub

Showing 2,717 of 2,717 total issues

Using width with border can sometimes make elements larger than you expect.
Open

  border: 2px solid var(--themecolor);
Severity: Minor
Found in style.css by csslint

2 IDs in the selector, really?
Open

#taskbar #tasklist {
Severity: Minor
Found in style.css by csslint

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

#taskbar #tasklist button.active {
Severity: Minor
Found in style.css by csslint

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

.start_menu iframe {
Severity: Minor
Found in style.css by csslint

Don't use IDs in selectors.
Open

  #icons button {
Severity: Minor
Found in style.css by csslint

Don't use IDs in selectors.
Open

:root{--background-color: #fff;--color-type-2: #fff;--background-color-type-2: #bcf;--font: var(--font), sans-serif;--border-width: 2px}html,body{background-color:rgba(0,0,0,0) !important}body{overflow:hidden;background-color:rgba(0,0,0,0) !important;-webkit-user-select:none;-moz-user-select:none;user-select:none}body.big_buttons #start{width:32rem}body.big_buttons #start #statusbar button{width:2.8rem;height:2.8rem}body.big_buttons #start #center #left a{font-size:1.1em}body.big_buttons #start #center #left a img{height:2.8rem;width:2.8rem}*{box-sizing:border-box}#startbutton{background:rgba(0,0,0,0);position:absolute;height:0;width:0;border:none;display:inline;bottom:0;left:0;overflow:hidden}#onout{position:absolute;top:0;left:0;width:100%;height:100%}#start{position:fixed;top:var(--glassyElementSpacing);bottom:var(--glassyElementSpacing);left:var(--glassyElementSpacing);display:flex;flex-direction:column;max-height:calc(100vh - 2*var(--glassyElementSpacing));height:auto;width:40rem;max-width:calc(100% - 2*var(--glassyElementSpacing));border:0;border-radius:var(--border-radius);overflow:hidden;background:rgba(0,0,0,0);border:1px solid #555;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur))}#start #statusbar{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));bottom:0;left:0;position:relative;width:100%;height:60px;padding:0 .25rem;order:99;display:flex;flex-direction:row;justify-content:space-between}#start #statusbar>div{display:inline-flex;flex-direction:row;width:1px;flex-grow:1;align-items:center}#start #statusbar>div.align-end{justify-content:flex-end}#start #statusbar button{position:relative;display:inline-block;height:calc(100% - 10px);margin:5px;aspect-ratio:1/1;box-sizing:border-box;padding:1px;overflow:hidden;background:rgba(0,0,0,0)}#start #statusbar button.usericon-button{padding:0;outline-offset:0}#start #statusbar button img{height:100%;margin:0;border-radius:inherit}#start #statusbar button span{position:absolute;display:none}#start #center{display:flex;position:relative;width:100%;height:calc(100% - 60px);box-sizing:border-box}#start #center #left{display:block;position:relative;height:100%;width:100%;flex-wrap:wrap;align-content:flex-start;overflow:auto;scrollbar-width:thin;padding:1em}#start #center #left>span{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));display:block;position:sticky;top:0;z-index:9;line-height:1.75;padding-left:calc(2.4rem + 15px)}#start #center #left #allprograms{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}#start #center #left #allprograms a{width:100%}#start #center #left a{position:relative;display:flex;height:auto;width:100%;overflow:hidden;align-items:center;line-height:2;margin-bottom:2px;text-decoration:none;border-radius:var(--border-radius)}#start #center #left a span{position:relative;display:inline;left:4px;white-space:nowrap;width:calc(100% - 41px);overflow:hidden;text-overflow:ellipsis;bottom:1px}#start #center #left a img{margin:.1rem;padding:.35rem;height:2.25rem;width:2.25rem;display:inline;-o-object-fit:contain;object-fit:contain}#start #center #left #moreandinfo{display:inline-block;background:#000;padding:0 .75em;line-height:1.2;width:80%;margin:10px 10%;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));border-radius:var(--border-radius)}#start #center #left #moreandinfo a{display:inline;width:unset;text-decoration:underline;color:revert}@media(prefers-color-scheme: dark){#start #center #left div p{color:#fff}}/*# sourceMappingURL=startmenu.min.css.map */

Fallback background (hex or RGB) should precede RGBA background.
Open

:root{--background-color: #fff;--color-type-2: #fff;--background-color-type-2: #bcf;--font: var(--font), sans-serif;--border-width: 2px}html,body{background-color:rgba(0,0,0,0) !important}body{overflow:hidden;background-color:rgba(0,0,0,0) !important;-webkit-user-select:none;-moz-user-select:none;user-select:none}body.big_buttons #start{width:32rem}body.big_buttons #start #statusbar button{width:2.8rem;height:2.8rem}body.big_buttons #start #center #left a{font-size:1.1em}body.big_buttons #start #center #left a img{height:2.8rem;width:2.8rem}*{box-sizing:border-box}#startbutton{background:rgba(0,0,0,0);position:absolute;height:0;width:0;border:none;display:inline;bottom:0;left:0;overflow:hidden}#onout{position:absolute;top:0;left:0;width:100%;height:100%}#start{position:fixed;top:var(--glassyElementSpacing);bottom:var(--glassyElementSpacing);left:var(--glassyElementSpacing);display:flex;flex-direction:column;max-height:calc(100vh - 2*var(--glassyElementSpacing));height:auto;width:40rem;max-width:calc(100% - 2*var(--glassyElementSpacing));border:0;border-radius:var(--border-radius);overflow:hidden;background:rgba(0,0,0,0);border:1px solid #555;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur))}#start #statusbar{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));bottom:0;left:0;position:relative;width:100%;height:60px;padding:0 .25rem;order:99;display:flex;flex-direction:row;justify-content:space-between}#start #statusbar>div{display:inline-flex;flex-direction:row;width:1px;flex-grow:1;align-items:center}#start #statusbar>div.align-end{justify-content:flex-end}#start #statusbar button{position:relative;display:inline-block;height:calc(100% - 10px);margin:5px;aspect-ratio:1/1;box-sizing:border-box;padding:1px;overflow:hidden;background:rgba(0,0,0,0)}#start #statusbar button.usericon-button{padding:0;outline-offset:0}#start #statusbar button img{height:100%;margin:0;border-radius:inherit}#start #statusbar button span{position:absolute;display:none}#start #center{display:flex;position:relative;width:100%;height:calc(100% - 60px);box-sizing:border-box}#start #center #left{display:block;position:relative;height:100%;width:100%;flex-wrap:wrap;align-content:flex-start;overflow:auto;scrollbar-width:thin;padding:1em}#start #center #left>span{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));display:block;position:sticky;top:0;z-index:9;line-height:1.75;padding-left:calc(2.4rem + 15px)}#start #center #left #allprograms{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}#start #center #left #allprograms a{width:100%}#start #center #left a{position:relative;display:flex;height:auto;width:100%;overflow:hidden;align-items:center;line-height:2;margin-bottom:2px;text-decoration:none;border-radius:var(--border-radius)}#start #center #left a span{position:relative;display:inline;left:4px;white-space:nowrap;width:calc(100% - 41px);overflow:hidden;text-overflow:ellipsis;bottom:1px}#start #center #left a img{margin:.1rem;padding:.35rem;height:2.25rem;width:2.25rem;display:inline;-o-object-fit:contain;object-fit:contain}#start #center #left #moreandinfo{display:inline-block;background:#000;padding:0 .75em;line-height:1.2;width:80%;margin:10px 10%;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));border-radius:var(--border-radius)}#start #center #left #moreandinfo a{display:inline;width:unset;text-decoration:underline;color:revert}@media(prefers-color-scheme: dark){#start #center #left div p{color:#fff}}/*# sourceMappingURL=startmenu.min.css.map */

Unknown property 'backdrop-filter'.
Open

:root{--background-color: #fff;--color-type-2: #fff;--background-color-type-2: #bcf;--font: var(--font), sans-serif;--border-width: 2px}html,body{background-color:rgba(0,0,0,0) !important}body{overflow:hidden;background-color:rgba(0,0,0,0) !important;-webkit-user-select:none;-moz-user-select:none;user-select:none}body.big_buttons #start{width:32rem}body.big_buttons #start #statusbar button{width:2.8rem;height:2.8rem}body.big_buttons #start #center #left a{font-size:1.1em}body.big_buttons #start #center #left a img{height:2.8rem;width:2.8rem}*{box-sizing:border-box}#startbutton{background:rgba(0,0,0,0);position:absolute;height:0;width:0;border:none;display:inline;bottom:0;left:0;overflow:hidden}#onout{position:absolute;top:0;left:0;width:100%;height:100%}#start{position:fixed;top:var(--glassyElementSpacing);bottom:var(--glassyElementSpacing);left:var(--glassyElementSpacing);display:flex;flex-direction:column;max-height:calc(100vh - 2*var(--glassyElementSpacing));height:auto;width:40rem;max-width:calc(100% - 2*var(--glassyElementSpacing));border:0;border-radius:var(--border-radius);overflow:hidden;background:rgba(0,0,0,0);border:1px solid #555;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur))}#start #statusbar{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));bottom:0;left:0;position:relative;width:100%;height:60px;padding:0 .25rem;order:99;display:flex;flex-direction:row;justify-content:space-between}#start #statusbar>div{display:inline-flex;flex-direction:row;width:1px;flex-grow:1;align-items:center}#start #statusbar>div.align-end{justify-content:flex-end}#start #statusbar button{position:relative;display:inline-block;height:calc(100% - 10px);margin:5px;aspect-ratio:1/1;box-sizing:border-box;padding:1px;overflow:hidden;background:rgba(0,0,0,0)}#start #statusbar button.usericon-button{padding:0;outline-offset:0}#start #statusbar button img{height:100%;margin:0;border-radius:inherit}#start #statusbar button span{position:absolute;display:none}#start #center{display:flex;position:relative;width:100%;height:calc(100% - 60px);box-sizing:border-box}#start #center #left{display:block;position:relative;height:100%;width:100%;flex-wrap:wrap;align-content:flex-start;overflow:auto;scrollbar-width:thin;padding:1em}#start #center #left>span{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));display:block;position:sticky;top:0;z-index:9;line-height:1.75;padding-left:calc(2.4rem + 15px)}#start #center #left #allprograms{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}#start #center #left #allprograms a{width:100%}#start #center #left a{position:relative;display:flex;height:auto;width:100%;overflow:hidden;align-items:center;line-height:2;margin-bottom:2px;text-decoration:none;border-radius:var(--border-radius)}#start #center #left a span{position:relative;display:inline;left:4px;white-space:nowrap;width:calc(100% - 41px);overflow:hidden;text-overflow:ellipsis;bottom:1px}#start #center #left a img{margin:.1rem;padding:.35rem;height:2.25rem;width:2.25rem;display:inline;-o-object-fit:contain;object-fit:contain}#start #center #left #moreandinfo{display:inline-block;background:#000;padding:0 .75em;line-height:1.2;width:80%;margin:10px 10%;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));border-radius:var(--border-radius)}#start #center #left #moreandinfo a{display:inline;width:unset;text-decoration:underline;color:revert}@media(prefers-color-scheme: dark){#start #center #left div p{color:#fff}}/*# sourceMappingURL=startmenu.min.css.map */

3 IDs in the selector, really?
Open

:root{--background-color: #fff;--color-type-2: #fff;--background-color-type-2: #bcf;--font: var(--font), sans-serif;--border-width: 2px}html,body{background-color:rgba(0,0,0,0) !important}body{overflow:hidden;background-color:rgba(0,0,0,0) !important;-webkit-user-select:none;-moz-user-select:none;user-select:none}body.big_buttons #start{width:32rem}body.big_buttons #start #statusbar button{width:2.8rem;height:2.8rem}body.big_buttons #start #center #left a{font-size:1.1em}body.big_buttons #start #center #left a img{height:2.8rem;width:2.8rem}*{box-sizing:border-box}#startbutton{background:rgba(0,0,0,0);position:absolute;height:0;width:0;border:none;display:inline;bottom:0;left:0;overflow:hidden}#onout{position:absolute;top:0;left:0;width:100%;height:100%}#start{position:fixed;top:var(--glassyElementSpacing);bottom:var(--glassyElementSpacing);left:var(--glassyElementSpacing);display:flex;flex-direction:column;max-height:calc(100vh - 2*var(--glassyElementSpacing));height:auto;width:40rem;max-width:calc(100% - 2*var(--glassyElementSpacing));border:0;border-radius:var(--border-radius);overflow:hidden;background:rgba(0,0,0,0);border:1px solid #555;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur))}#start #statusbar{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));bottom:0;left:0;position:relative;width:100%;height:60px;padding:0 .25rem;order:99;display:flex;flex-direction:row;justify-content:space-between}#start #statusbar>div{display:inline-flex;flex-direction:row;width:1px;flex-grow:1;align-items:center}#start #statusbar>div.align-end{justify-content:flex-end}#start #statusbar button{position:relative;display:inline-block;height:calc(100% - 10px);margin:5px;aspect-ratio:1/1;box-sizing:border-box;padding:1px;overflow:hidden;background:rgba(0,0,0,0)}#start #statusbar button.usericon-button{padding:0;outline-offset:0}#start #statusbar button img{height:100%;margin:0;border-radius:inherit}#start #statusbar button span{position:absolute;display:none}#start #center{display:flex;position:relative;width:100%;height:calc(100% - 60px);box-sizing:border-box}#start #center #left{display:block;position:relative;height:100%;width:100%;flex-wrap:wrap;align-content:flex-start;overflow:auto;scrollbar-width:thin;padding:1em}#start #center #left>span{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));display:block;position:sticky;top:0;z-index:9;line-height:1.75;padding-left:calc(2.4rem + 15px)}#start #center #left #allprograms{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}#start #center #left #allprograms a{width:100%}#start #center #left a{position:relative;display:flex;height:auto;width:100%;overflow:hidden;align-items:center;line-height:2;margin-bottom:2px;text-decoration:none;border-radius:var(--border-radius)}#start #center #left a span{position:relative;display:inline;left:4px;white-space:nowrap;width:calc(100% - 41px);overflow:hidden;text-overflow:ellipsis;bottom:1px}#start #center #left a img{margin:.1rem;padding:.35rem;height:2.25rem;width:2.25rem;display:inline;-o-object-fit:contain;object-fit:contain}#start #center #left #moreandinfo{display:inline-block;background:#000;padding:0 .75em;line-height:1.2;width:80%;margin:10px 10%;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));border-radius:var(--border-radius)}#start #center #left #moreandinfo a{display:inline;width:unset;text-decoration:underline;color:revert}@media(prefers-color-scheme: dark){#start #center #left div p{color:#fff}}/*# sourceMappingURL=startmenu.min.css.map */

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

:root{--background-color: #fff;--color-type-2: #fff;--background-color-type-2: #bcf;--font: var(--font), sans-serif;--border-width: 2px}html,body{background-color:rgba(0,0,0,0) !important}body{overflow:hidden;background-color:rgba(0,0,0,0) !important;-webkit-user-select:none;-moz-user-select:none;user-select:none}body.big_buttons #start{width:32rem}body.big_buttons #start #statusbar button{width:2.8rem;height:2.8rem}body.big_buttons #start #center #left a{font-size:1.1em}body.big_buttons #start #center #left a img{height:2.8rem;width:2.8rem}*{box-sizing:border-box}#startbutton{background:rgba(0,0,0,0);position:absolute;height:0;width:0;border:none;display:inline;bottom:0;left:0;overflow:hidden}#onout{position:absolute;top:0;left:0;width:100%;height:100%}#start{position:fixed;top:var(--glassyElementSpacing);bottom:var(--glassyElementSpacing);left:var(--glassyElementSpacing);display:flex;flex-direction:column;max-height:calc(100vh - 2*var(--glassyElementSpacing));height:auto;width:40rem;max-width:calc(100% - 2*var(--glassyElementSpacing));border:0;border-radius:var(--border-radius);overflow:hidden;background:rgba(0,0,0,0);border:1px solid #555;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur))}#start #statusbar{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));bottom:0;left:0;position:relative;width:100%;height:60px;padding:0 .25rem;order:99;display:flex;flex-direction:row;justify-content:space-between}#start #statusbar>div{display:inline-flex;flex-direction:row;width:1px;flex-grow:1;align-items:center}#start #statusbar>div.align-end{justify-content:flex-end}#start #statusbar button{position:relative;display:inline-block;height:calc(100% - 10px);margin:5px;aspect-ratio:1/1;box-sizing:border-box;padding:1px;overflow:hidden;background:rgba(0,0,0,0)}#start #statusbar button.usericon-button{padding:0;outline-offset:0}#start #statusbar button img{height:100%;margin:0;border-radius:inherit}#start #statusbar button span{position:absolute;display:none}#start #center{display:flex;position:relative;width:100%;height:calc(100% - 60px);box-sizing:border-box}#start #center #left{display:block;position:relative;height:100%;width:100%;flex-wrap:wrap;align-content:flex-start;overflow:auto;scrollbar-width:thin;padding:1em}#start #center #left>span{background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));display:block;position:sticky;top:0;z-index:9;line-height:1.75;padding-left:calc(2.4rem + 15px)}#start #center #left #allprograms{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}#start #center #left #allprograms a{width:100%}#start #center #left a{position:relative;display:flex;height:auto;width:100%;overflow:hidden;align-items:center;line-height:2;margin-bottom:2px;text-decoration:none;border-radius:var(--border-radius)}#start #center #left a span{position:relative;display:inline;left:4px;white-space:nowrap;width:calc(100% - 41px);overflow:hidden;text-overflow:ellipsis;bottom:1px}#start #center #left a img{margin:.1rem;padding:.35rem;height:2.25rem;width:2.25rem;display:inline;-o-object-fit:contain;object-fit:contain}#start #center #left #moreandinfo{display:inline-block;background:#000;padding:0 .75em;line-height:1.2;width:80%;margin:10px 10%;background-color:var(--glassyElementBackground);-webkit-backdrop-filter:blur(var(--glassyElementBlur));backdrop-filter:blur(var(--glassyElementBlur));border-radius:var(--border-radius)}#start #center #left #moreandinfo a{display:inline;width:unset;text-decoration:underline;color:revert}@media(prefers-color-scheme: dark){#start #center #left div p{color:#fff}}/*# sourceMappingURL=startmenu.min.css.map */

Use of !important
Open

  border-radius: 0 !important;
Severity: Minor
Found in style.css by csslint

Adjoining classes: .program.closing
Open

.program.closing {
Severity: Minor
Found in style.css by csslint

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

.program.fullscreen .headbar .fullscreen {
Severity: Minor
Found in style.css by csslint

The property -ms-user-select is compatible with -webkit-user-select and -moz-user-select and should be included as well.
Open

  -webkit-user-select: none;
Severity: Minor
Found in style.css by csslint

Duplicate property 'border' found.
Open

  border: 2px solid var(--themecolor);
Severity: Minor
Found in style.css by csslint

Expected ([ <length> | <percentage> ]{1,2}) but found 'var(--border-radius)'.</percentage></length>
Open

  border-bottom-left-radius: var(--border-radius);
Severity: Minor
Found in style.css by csslint

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

  background-color: var(--themecolor);
Severity: Minor
Found in style.css by csslint

2 IDs in the selector, really?
Open

#taskbar #start img {
Severity: Minor
Found in style.css by csslint

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

  border-bottom: 2px solid var(--themecolor2);
Severity: Minor
Found in style.css by csslint

Don't use IDs in selectors.
Open

  #icons p {
Severity: Minor
Found in style.css by csslint
Severity
Category
Status
Source
Language