MineXLauncher/resources/styles/themes/default.css

@font-face { font-family: Minecraftia-Regular; src: url(/resources/fonts/Minecraftia-Regular.woff2); } body { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 0; font-family: sans-serif; background-color: #1e1e1e; color: #fff; overflow: hidden; background-image: none; background-size: cover; } .ads-container { display: none; flex: 1; align-items: center; justify-content: center; } .launcher { width: 75vw; height: 95vh; margin: 15px auto 0 auto; background-color: #333; border-radius: 8px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .title-bar { background-color: #2c2c2c; padding: 10px; text-align: center; color: #ddd; font-size: 14px; font-weight: 600; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .content { display: flex; flex: 1; overflow: hidden; } .sidebar { background-color: #242424; width: 200px; display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid #333; } .username { padding: 20px 10px; border-bottom: 1px solid #333; text-align: center; font-weight: bold; display: block; font-size: 16px; } .nav-bar { list-style-type: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 #333; } .nav-bar li { display: flex; align-items: center; padding: 15px 20px; cursor: pointer; transition: background-color 0.2s; } .nav-bar li:hover, .nav-bar li.selected { background-color: #444; } .nav-bar li img { width: 24px; height: 24px; margin-right: 15px; } .nav-bar li span { font-size: 14px; } .main-panel { flex: 1; display: flex; flex-direction: column; background-color: #202020; } .top-title { background-color: #2c2c2c; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; color: #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); flex-shrink: 0; font-size: 18px; font-weight: bold; } .top-nav { background-color: #2c2c2c; padding: 10px 20px; display: flex; justify-content: space-around; align-items: center; color: #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); flex-shrink: 0; } .top-nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; } .top-nav ul li { margin-right: 20px; cursor: pointer; font-size: 16px; color: #ccc; transition: color 0.2s; } .top-nav ul li.selected { color: #fff; font-weight: bold; } .top-nav ul li:hover { color: #fff; } .main-content { display: flex; flex: 1; flex-direction: column; background-color: #202020; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 #333; } .cover-image { display: flex; flex: 1; width: 100%; height: 100%; object-fit: cover; } .installations { display: flex; align-items: center; justify-content: space-between; width: 100%; background-color: #292929; box-sizing: border-box; position: sticky; bottom: 0; left: 0; padding: 10px 20px; border-top: 1px solid #333; } .installations button { background-color: #0f990f; border: 2px solid #007700; padding: 10px 40px; border-radius: 5px; cursor: pointer; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s, transform 0.2s; overflow: hidden; position: relative; } .installations button:hover { background-color: #17b117; border-color: #005500; transform: scale(1.05); } .installations button:hover::before { width: 0; height: 0; } .installations button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background-color: rgba(255, 255, 255, 0.1); transition: all 0.4s ease-out; border-radius: 50%; transform: translate(-50%, -50%); } .installations > div { position: relative; display: inline-block; width: 250px; } .installations > div .selector { display: flex; align-items: center; justify-content: center; font-size: 1em; padding: 7px; border: 2px solid #000; background-color: #048239; color: #fff; cursor: pointer; box-shadow: 4px 4px #4e4e50; user-select: none; transition: box-shadow 0.3s; } .installations > div .selector:hover { box-shadow: 6px 6px #4e4e50; } .installations > div .selector.open { border-radius: 0 0 5px 5px; } .installations > div .options { position: absolute; bottom: calc(100% + 2px); left: 0; right: 0; border: 2px solid #000; border-bottom: none; background-color: #035525; box-shadow: 4px 4px #4e4e50; display: none; border-radius: 5px 5px 0 0; color: #fff; scrollbar-width: thin; scrollbar-color: #048239 #035525; max-height: 0; overflow: auto; transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out; } .installations > div .options.open { display: block; max-height: 200px; padding: 10px 0; opacity: 1; } .installations > div .options > div { display: flex; align-items: center; padding: 10px; cursor: pointer; border-bottom: 1px solid #000; transition: background-color 0.3s; } .installations > div .options > div:last-child { border-bottom: none; } .installations > div .options > div:hover { background-color: #127e3f; } .installations > div .options > div img { width: 32px; height: 32px; margin-right: 10px; } .bottom-bar { background-color: #2c2c2c; padding: 10px 20px; display: flex; flex-direction: row; justify-content: space-between; color: #ddd; font-size: 14px; text-decoration: none; border-top: 1px solid #333; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); } .bottom-bar > span[onclick]:hover { cursor: pointer; text-decoration: underline; } .updates-container { margin: 20px; text-align: left; } .updates-container strong { padding-top: 20px; } .updates-container ul { margin: 0; padding: 5px 0 20px 30px; } .downloads { padding: 25px; padding-top: 5px; justify-content: center; align-items: center; } .downloads span { display: inline-block; background-color: #048239; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 5px; margin-bottom: 10px; transition: background-color 0.3s; } .downloads span:hover { cursor: pointer; background-color: #00cc00; } .mod-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; text-align: center; scrollbar-width: thin; scrollbar-color: #555 #333; } .mod-list > div { background-color: #333; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 10px; text-align: center; position: relative; padding-bottom: 35px; } .mod-list > div img { width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 5px; object-fit: cover; } .mod-list > div .details { padding: 10px 0; } .mod-list > div .details strong { font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #fff; } .mod-list > div .details .author { font-size: 12px; color: #ccc; margin-bottom: 5px; } .mod-list > div .details .author a { color: #0000ee; } .mod-list > div .details .description { font-size: 14px; color: #bbb; margin-bottom: 10px; } .mod-list > div .links { display: flex; justify-content: space-around; width: calc(100% - 10px); position: absolute; bottom: 10px; left: 5px; justify-content: center; } .mod-list > div .links .download, .mod-list > div .links .install { flex: 1; margin: 0 5px; padding: 5px; color: #fff; text-decoration: none; border-radius: 7px; transition: background-color 0.3s; } .mod-list > div .links .download { background-color: #555; } .mod-list > div .links .download:hover { cursor: pointer; background-color: #777; } .mod-list > div .links .install { background-color: #4c4; } .mod-list > div .links .install:hover { cursor: pointer; background-color: #00b300; } .mod-list > div .links .install.installed { background-color: #ff0000; } .mod-list > div .links .install.installed:hover { background-color: #cc0000; } .article-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; text-align: center; scrollbar-width: thin; scrollbar-color: #555 #333; } .article-list > div { background-color: #333; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 10px; text-align: center; position: relative; padding-bottom: 0; } .article-list > div:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); cursor: pointer; background-color: #3d3d3d; } .article-list > div img { width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 5px; object-fit: cover; } .article-list > div .details { padding: 10px 0; } .article-list > div .details strong { font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #fff; } .article-list > div .details p { font-size: 14px; color: #bbb; margin-bottom: 10px; } .article { display: none; position: fixed; width: 500vw; height: 500vh; overflow: auto; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .article > div { background-color: #333; padding: 20px; border: 1px solid #888; width: 65vw; height: 85vh; max-width: 85vw; border-radius: 15px; color: #fff; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 #333; position: relative; } .article > div span { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 15px; right: 15px; } .article > div span:hover, .article > div span:focus { color: #fff; text-decoration: none; cursor: pointer; } .article > div div a { color: #0000ee; } .server-list { display: flex; flex: 1; overflow: hidden; } .server-list iframe { width: 100%; height: 100%; border: none; } .archive > div { margin: 1rem; padding: 1rem; border: 2px solid #3c3c3c; border-radius: 8px; background-color: #2e2e2e; display: flex; flex-direction: column; align-items: flex-start; } .archive > div select { width: 100%; padding: 0.5rem; border: 2px solid #4a4a4a; border-radius: 5px; background-color: #1e1e1e; color: #ffffff; font-size: 1rem; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%), linear-gradient(135deg, #1e1e1e 50%, transparent 50%); background-position: right 0.7rem center, right 0.7rem center; background-repeat: no-repeat; background-size: 0.65rem auto, 0.65rem auto; transition: border-color 0.3s, background-color 0.3s; } .archive > div select:focus { border-color: #00cc00; outline: none; background-color: #2e2e2e; } .archive > div select option { background-color: #1e1e1e; color: #ffffff; } .archive > div label { font-size: 1rem; color: #ffffff; margin-bottom: 0.5rem; margin-right: 10px; } .archive button { padding: 0.5rem 1rem; margin: 0.5rem 1rem; border: none; border-radius: 5px; background-color: #048239; color: #ffffff; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; width: calc(100% - 2rem); } .archive button:hover { background-color: #00cc00; } .archive button:focus { outline: none; box-shadow: 0 0 0 2px #00cc00; } .archive button:active { transform: scale(0.99); } .archive > div button { margin: 0.5rem 0 0 0; width: 100%; } .settings { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; } .settings form { margin: 5px; } .settings form input[type='text'], .settings form select { width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 3px; background-color: #333; color: #fff; appearance: none; } .settings form input[type='text'] { width: calc(100% - 20px); } .settings form input[type='checkbox'] { padding: 10px; margin-bottom: 15px; } .settings form input[type='text']:focus, .settings form select:focus { outline: none; } .settings form[id='settings-backups'] { padding-bottom: 60px; } .settings form button[type='submit'] { width: 100%; padding: 10px; border: none; border-radius: 3px; background-color: #00cc00; color: #fff; cursor: pointer; transition: background-color 0.2s; } .settings form button[type='submit']:hover { background-color: #00ff00; } .error-page { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 20px; padding-bottom: 7%; } @media (max-width: 1750px) { .mod-list, .article-list { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 1500px) { .mod-list, .article-list { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1250px) { .mod-list, .article-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .mod-list, .article-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 775px) { .mod-list, .article-list { grid-template-columns: repeat(1, 1fr); } } @keyframes article { 0% { opacity: 0; scale: 0; } 80% { scale: 1.1; } 100% { opacity: 1; scale: 1; } } /* bruh pls find a fix for this right now i have to change the animation to play it */ @keyframes article-tempfix { 0% { opacity: 0; scale: 0; } 80% { scale: 1.1; } 100% { opacity: 1; scale: 1; } }