├── LICENSE ├── README.md ├── dist └── minecraft-css-framework-v-1.0.0.css ├── gulpfile.js ├── index.html └── src ├── base ├── _colors.css ├── _fonts.css ├── _reset.css ├── _typography.css └── _variables.css ├── components ├── _buttons.css ├── _cards.css ├── _forms.css ├── _modals.css └── _navigation.css ├── dist ├── _main.all.css └── minecraft-css-framework.css ├── fonts ├── Minecraft-Regular.otf └── Minecraft-Ten.ttf ├── icons └── _icons.css ├── layout ├── _container.css └── _grid.css └── utilities ├── _colors.css ├── _spacing.css ├── _typography.css └── _visibility.css /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Minecraft-CSS 2 | Minecraft UI themed CSS framework. 3 | 4 | ## Project Structure: 5 | 6 | ```plaintext 7 | /Minecraft.CSS 8 | ├── /dist 9 | │ └── minecraft-css-framework-v-1.0.0.css 10 | ├── /src 11 | │ ├── /base 12 | │ │ ├── _reset.css 13 | │ │ ├── _typography.css 14 | │ │ ├── _colors.css 15 | │ │ └── _variables.css 16 | │ ├── /components 17 | │ │ ├── _buttons.css 18 | │ │ ├── _cards.css 19 | │ │ ├── _forms.css 20 | │ │ ├── _modals.css 21 | │ │ └── _navigation.css 22 | │ ├── /layout 23 | │ │ ├── _grid.css 24 | │ │ └── _container.css 25 | │ ├── /utilities 26 | │ │ ├── _spacing.css 27 | │ │ ├── _typography.css 28 | │ │ ├── _visibility.css 29 | │ │ └── _colors.css 30 | │ └── /icons 31 | │ └── _icons.css 32 | ├── gulpfile.js 33 | └── index.html 34 | ``` 35 | --- 36 | 37 | ## Getting Started: 38 | 39 | 1. **Installation** 40 | Clone the repository: 41 | ```bash 42 | git clone https://github.com/Jiyath5516F/Minecraft-CSS.git 43 | ``` 44 | 45 | 2. **Usage** 46 | Include the compiled CSS file in your project: 47 | ```html 48 | 49 | ``` 50 | 51 | **CDN will available soon** 52 | 53 | 3. **Customization** 54 | Modify any source files in the `/src` directory to customize styles. 55 | 56 | --- 57 | 58 | ## How to Compile: 59 | 60 | 1. **Install required packages** 61 | ```bash 62 | npm install gulp gulp-concat gulp-postcss postcss cssnano postcss-safe-parser --save-dev 63 | ``` 64 | 65 | 2. **Create gulpfile.js (in root dir)** 66 | ```js 67 | const gulp = require('gulp'); 68 | const concat = require('gulp-concat'); 69 | const postcss = require('gulp-postcss'); 70 | const cssnano = require('cssnano'); 71 | const safeParser = require('postcss-safe-parser'); 72 | 73 | gulp.task('styles', function() { 74 | const plugins = [ 75 | cssnano({ 76 | preset: ['default', { 77 | discardComments: { removeAll: true }, 78 | normalizeWhitespace: false 79 | }] 80 | }) 81 | ]; 82 | 83 | return gulp.src('src/**/*.css') 84 | .pipe(concat('minecraft-css-framework-v-1.0.0.css')) 85 | .pipe(postcss(plugins, { parser: safeParser })) 86 | .pipe(gulp.dest('dist')); 87 | }); 88 | 89 | gulp.task('default', gulp.series('styles'));``` 90 | 91 | 3. **Compile** 92 | ```bash 93 | npx gulp 94 | ``` 95 | 96 | -------------------------------------------------------------------------------- /dist/minecraft-css-framework-v-1.0.0.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary-color:#313233; 3 | --secondary-color:#48494a; 4 | --accent-color:#d0d1d4; 5 | --background-color:#48494a; 6 | --text-color:#fff; 7 | --text-dark-color:#000; 8 | --link-color:#007bff; 9 | --error-color:#dc3545; 10 | --success-color:#28a745; 11 | --warning-color:#ffc107; 12 | --info-color:#17a2b8; 13 | --selected-color:#48494a; 14 | 15 | --hr-top-color:#333334; 16 | --hr-bottom-color:#5a5b5c; 17 | --btn-primary-inner-color:#3c8527; 18 | --btn-primary-inner-hover-color:#2a641c; 19 | --btn-primary-inner-shadow-color:#1d4d13; 20 | --btn-primary-border-color:#1e1e1f; 21 | --btn-primary-inner-border-lt-color:#4f913cbf; 22 | --btn-primary-inner-border-br-color:#639d52; 23 | --btn-primary-text-color:#fff; 24 | --btn-secondary-inner-color:#7345e5; 25 | --btn-secondary-inner-hover-color:#5d2cc6; 26 | --btn-secondary-inner-shadow-color:#4a1cac; 27 | --btn-secondary-border-color:#1e1e1f; 28 | --btn-secondary-inner-border-lt-color:#a264f2bf; 29 | --btn-secondary-inner-border-br-color:#8e49eb; 30 | --btn-secondary-text-color:#fff; 31 | --btn-tertiary-inner-color:#d0d1d4; 32 | --btn-tertiary-inner-hover-color:#b1b2b5; 33 | --btn-tertiary-inner-shadow-color:#58585a; 34 | --btn-tertiary-border-color:#1e1e1f; 35 | --btn-tertiary-inner-border-lt-color:#ecedeebf; 36 | --btn-tertiary-inner-border-br-color:#e3e3e5; 37 | --btn-tertiary-text-color:#000; 38 | --btn-normal-inner-color:#c6c6c6; 39 | --btn-normal-border-color:#131313; 40 | --btn-normal-inner-border-lt-color:#f7f7f7bf; 41 | --btn-normal-inner-border-br-color:#656465; 42 | --btn-normal-text-color:#4c4c4c; 43 | 44 | --btn-normal-inner-hover-color:#218306; 45 | --btn-normal-border-hover-color:#fff; 46 | --btn-normal-inner-border-lt-hover-color:#17cd07bf; 47 | --btn-normal-inner-border-br-hover-color:#004e00; 48 | --btn-normal-text-hover-color:#fff; 49 | } 50 | 51 | @font-face{ 52 | font-family:MinecraftRegular; 53 | font-style:normal; 54 | font-weight:400; 55 | src:url('https://cdn.jsdelivr.net/gh/Jiyath5516F/Minecraft-CSS@main/src/fonts/Minecraft-Regular.otf') format("opentype"); 56 | } 57 | 58 | @font-face{ 59 | font-family:MinecraftTen; 60 | font-style:normal; 61 | font-weight:400; 62 | src:url('https://cdn.jsdelivr.net/gh/Jiyath5516F/Minecraft-CSS@main/src/fonts/Minecraft-Ten.ttf') format("truetype"); 63 | } 64 | 65 | *{ 66 | box-sizing:border-box; 67 | margin:0; 68 | padding:0; 69 | } 70 | 71 | html{ 72 | caret-color:#3c8527; 73 | font-size:16px; 74 | line-height:1.5; 75 | } 76 | 77 | 78 | ol,ul{ 79 | list-style:none; 80 | } 81 | 82 | a{ 83 | color:inherit; 84 | text-decoration:none !important; 85 | } 86 | 87 | 88 | table{ 89 | border-collapse:collapse; 90 | } 91 | 92 | td,th{ 93 | padding:.5em; 94 | } 95 | 96 | 97 | hr.no-padding{ 98 | border:0; 99 | border-bottom:2.5px solid var(--hr-bottom-color); 100 | border-top:2.5px solid var(--hr-top-color); 101 | margin:.5em -16px; 102 | padding-left:0; 103 | padding-right:0; 104 | width:calc(100% + 32px); 105 | } 106 | 107 | body{ 108 | font-family:MinecraftRegular,sans-serif; 109 | font-size:1rem; 110 | line-height:1.6; 111 | } 112 | 113 | body,h1,h2,h3,h4,h5,h6{ 114 | color:var(--text-color); 115 | } 116 | 117 | h1,h2,h3,h4,h5,h6{ 118 | font-family:MinecraftTen,sans-serif !important; 119 | font-weight:700; 120 | margin-bottom:.5em; 121 | } 122 | 123 | h1{ 124 | font-size:2.5rem; 125 | } 126 | 127 | h2{ 128 | font-size:2rem; 129 | } 130 | 131 | h3{ 132 | font-size:1.75rem; 133 | } 134 | 135 | h4{ 136 | font-size:1.5rem; 137 | } 138 | 139 | h5{ 140 | font-size:1.25rem; 141 | } 142 | 143 | h6{ 144 | font-size:1rem; 145 | } 146 | 147 | p{ 148 | margin-bottom:1em; 149 | } 150 | 151 | a{ 152 | color:var(--link-color, #007bff); 153 | } 154 | 155 | a:hover{ 156 | text-decoration:underline; 157 | } 158 | 159 | .anchor-btn,.font-ten{ 160 | font-family:MinecraftTen,sans-serif; 161 | } 162 | :root{ 163 | --font-size-base:16px; 164 | --font-size-lg:18px; 165 | --font-size-sm:14px; 166 | --border-radius:0px; 167 | --breakpoint-xs:480px; 168 | --breakpoint-sm:576px; 169 | --breakpoint-md:768px; 170 | --breakpoint-lg:992px; 171 | --breakpoint-xl:1200px; 172 | --spacing-xs:0.25rem; 173 | --spacing-sm:0.5rem; 174 | --spacing-md:1rem; 175 | --spacing-lg:1.5rem; 176 | --spacing-xl:2rem; 177 | } 178 | 179 | .button{ 180 | color:var(--btn-primary-text-color); 181 | cursor:pointer; 182 | margin:var(--spacing-sm) var(--spacing-md); 183 | padding:var(--spacing-sm) var(--spacing-md); 184 | } 185 | 186 | .button-primary{ 187 | align-items:center; 188 | background:var(--btn-primary-inner-color); 189 | background-color:var(--btn-primary-inner-color); 190 | border:3px solid var(--btn-primary-border-color); 191 | box-shadow:inset 0 -6px 0 0 var(--btn-primary-inner-shadow-color), inset 3px 3px 0 var(--btn-primary-inner-border-lt-color), inset -3px -9px 0 var(--btn-primary-inner-border-br-color); 192 | display:flex; 193 | font-family:MinecraftTen,sans-serif; 194 | font-weight:700; 195 | justify-content:center; 196 | letter-spacing:2px; 197 | padding-bottom:15px; 198 | padding-top:5px; 199 | text-align:center; 200 | text-decoration:none; 201 | text-shadow:2.5px 2.5px 0 rgba(0,0,0,.343); 202 | user-select:none; 203 | } 204 | 205 | .button-primary:hover{ 206 | background-color:var(--btn-primary-inner-hover-color); 207 | } 208 | 209 | .button-primary:active{ 210 | box-shadow:inset 0 0 0 0 var(--btn-primary-inner-shadow-color), inset 3px 3px 0 var(--btn-primary-inner-border-lt-color), inset -3px -3px 0 var(--btn-primary-inner-border-br-color); 211 | position:relative; 212 | top:2px; 213 | } 214 | 215 | .button-secondary{ 216 | align-items:center; 217 | background:var(--btn-secondary-inner-color); 218 | background-color:var(--btn-secondary-inner-color); 219 | border:3px solid var(--btn-secondary-border-color); 220 | box-shadow:inset 0 -6px 0 0 var(--btn-secondary-inner-shadow-color), inset 3px 3px 0 var(--btn-secondary-inner-border-lt-color), inset -3px -9px 0 var(--btn-secondary-inner-border-br-color); 221 | display:flex; 222 | font-family:MinecraftRegular,sans-serif; 223 | justify-content:center; 224 | padding-bottom:12px; 225 | text-align:center; 226 | text-decoration:none; 227 | user-select:none; 228 | } 229 | 230 | .button-secondary:hover{ 231 | background-color:var(--btn-secondary-inner-hover-color); 232 | } 233 | 234 | .button-secondary:active{ 235 | box-shadow:inset 0 0 0 0 var(--btn-secondary-inner-shadow-color), inset 3px 3px 0 var(--btn-secondary-inner-border-lt-color), inset -3px -3px 0 var(--btn-secondary-inner-border-br-color); 236 | position:relative; 237 | top:2px; 238 | } 239 | 240 | .button-tertiary{ 241 | align-items:center; 242 | background:var(--btn-tertiary-inner-color); 243 | background-color:var(--btn-tertiary-inner-color); 244 | border:3px solid var(--btn-tertiary-border-color); 245 | box-shadow:inset 0 -6px 0 0 var(--btn-tertiary-inner-shadow-color), inset 3px 3px 0 var(--btn-tertiary-inner-border-lt-color), inset -3px -9px 0 var(--btn-tertiary-inner-border-br-color); 246 | color:var(--btn-tertiary-text-color); 247 | display:flex; 248 | font-family:MinecraftRegular,sans-serif; 249 | justify-content:center; 250 | padding-bottom:12px; 251 | text-align:center; 252 | text-decoration:none; 253 | transition:0s; 254 | user-select:none; 255 | } 256 | 257 | .button-tertiary:hover{ 258 | background-color:var(--btn-tertiary-inner-hover-color); 259 | } 260 | 261 | .button-tertiary:active{ 262 | box-shadow:inset 0 0 0 0 var(--btn-tertiary-inner-shadow-color), inset 3px 3px 0 var(--btn-tertiary-inner-border-lt-color), inset -3px -3px 0 var(--btn-tertiary-inner-border-br-color); 263 | position:relative; 264 | top:2px; 265 | } 266 | 267 | .button-normal{ 268 | align-items:center; 269 | background:var(--btn-normal-inner-color); 270 | background-color:var(--btn-normal-inner-color); 271 | border:1.5px solid var(--btn-normal-border-color); 272 | box-shadow:inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-color), inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-color); 273 | color:var(--btn-normal-text-color); 274 | display:flex; 275 | justify-content:center; 276 | text-align:center; 277 | text-decoration:none; 278 | transition:0s; 279 | user-select:none; 280 | } 281 | 282 | .button-normal,.button-normal:hover{ 283 | font-family:MinecraftRegular,sans-serif; 284 | } 285 | 286 | .button-normal:hover{ 287 | background:var(--btn-normal-inner-hover-color); 288 | background-color:var(--btn-normal-inner-hover-color); 289 | border:1.5px solid var(--btn-normal-border-hover-color); 290 | box-shadow:inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-hover-color), inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-hover-color); 291 | color:var(--btn-normal-text-hover-color); 292 | } 293 | 294 | .button-normal:active{ 295 | position:relative; 296 | } 297 | 298 | .card{ 299 | background-color:var(--background-color); 300 | border:1px solid var(--secondary-color); 301 | box-shadow:0 2px 4px rgba(0,0,0,.1); 302 | padding:var(--spacing-md); 303 | } 304 | 305 | .card-header{ 306 | font-size:1.25rem; 307 | font-weight:700; 308 | margin-bottom:var(--spacing-sm); 309 | } 310 | 311 | .card-body{ 312 | color:var(--text-color); 313 | font-size:1rem; 314 | } 315 | 316 | .card-footer{ 317 | margin-top:var(--spacing-md); 318 | text-align:right; 319 | } 320 | 321 | 322 | .form-group{ 323 | color:var(--text-color, #fff); 324 | font-family:MinecraftRegular,sans-serif; 325 | margin-bottom:var(--spacing-md); 326 | } 327 | 328 | .form-label{ 329 | display:block; 330 | margin-bottom:var(--spacing-xs); 331 | } 332 | 333 | .form-input{ 334 | background-color:#313233; 335 | border:3px solid #1e1e1f; 336 | box-shadow:inset 0 6px #242425; 337 | color:#fff; 338 | font-family:MinecraftRegular,sans-serif; 339 | font-size:1rem; 340 | height:40px; 341 | padding:var(--spacing-sm); 342 | width:100%; 343 | } 344 | 345 | .form-input:focus{ 346 | outline:none; 347 | } 348 | 349 | 350 | .form-button{ 351 | align-items:center; 352 | background:var(--btn-normal-inner-color); 353 | background-color:var(--btn-normal-inner-color); 354 | border:1.5px solid var(--btn-normal-border-color); 355 | box-shadow:inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-color), inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-color); 356 | color:var(--btn-normal-text-color); 357 | display:flex; 358 | justify-content:center; 359 | padding:var(--spacing-sm) var(--spacing-md); 360 | text-align:center; 361 | text-decoration:none; 362 | transition:0s; 363 | user-select:none; 364 | } 365 | 366 | .form-button,.form-button:hover{ 367 | font-family:MinecraftRegular,sans-serif; 368 | } 369 | 370 | .form-button:hover{ 371 | background:var(--btn-normal-inner-hover-color); 372 | background-color:var(--btn-normal-inner-hover-color); 373 | border:1.5px solid var(--btn-normal-border-hover-color); 374 | box-shadow:inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-hover-color), inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-hover-color); 375 | color:var(--btn-normal-text-hover-color); 376 | } 377 | 378 | .modal{ 379 | background-color:var(--background-color); 380 | box-shadow:0 4px 8px rgba(0,0,0,.2); 381 | display:none; 382 | left:50%; 383 | position:fixed; 384 | top:50%; 385 | transform:translate(-50%, -50%); 386 | width:400px; 387 | z-index:1000; 388 | } 389 | 390 | .modal-header{ 391 | background-color:var(--primary-color); 392 | color:#fff; 393 | } 394 | 395 | .modal-body,.modal-footer,.modal-header{ 396 | padding:var(--spacing-md); 397 | } 398 | 399 | .modal-footer{ 400 | text-align:right; 401 | } 402 | 403 | .modal-open{ 404 | display:block; 405 | } 406 | 407 | .navbar{ 408 | align-items:center; 409 | background-color:#e6e8eb; 410 | border-bottom:3px solid #151516; 411 | box-shadow:inset 0 -6px #b1b2b5; 412 | display:flex; 413 | font-family:MinecraftTen; 414 | font-style:normal; 415 | font-weight:400; 416 | justify-content:space-around; 417 | justify-content:space-between; 418 | padding:var(--spacing-sm) var(--spacing-md); 419 | padding-top:auto; 420 | width:100%; 421 | } 422 | 423 | .navbar-brand{ 424 | color:var(--primary-color); 425 | font-size:1.5rem; 426 | font-weight:700; 427 | } 428 | 429 | .navbar-nav{ 430 | display:flex; 431 | gap:var(--spacing-md); 432 | list-style:none; 433 | } 434 | 435 | .navbar-nav a{ 436 | color:var(--text-dark-color); 437 | font-size:1rem; 438 | text-decoration:none; 439 | } 440 | 441 | .navbar-nav a:hover{ 442 | text-decoration:underline; 443 | } 444 | @import "/src/dist/_main.all.css"; 445 | 446 | @import "../base/_reset.css"; 447 | @import "../base/_typography.css"; 448 | @import "../base/_colors.css"; 449 | @import "../base/_variables.css"; 450 | @import "../base/_fonts.css"; 451 | 452 | @import "../components/_buttons.css"; 453 | @import "../components/_cards.css"; 454 | @import "../components/_forms.css"; 455 | @import "../components/_modals.css"; 456 | @import "../components/_navigation.css"; 457 | 458 | @import "../icons/_icons.css"; 459 | 460 | @import "../layout/_container.css"; 461 | @import "../layout/_grid.css"; 462 | 463 | @import "../themes/_dark.css"; 464 | @import "../themes/_light.css"; 465 | 466 | @import "../utilities/_colors.css"; 467 | @import "../utilities/_spacing.css"; 468 | @import "../utilities/_text.css"; 469 | @import "../utilities/_visibility.css"; 470 | 471 | .icon{ 472 | background-size:contain; 473 | display:inline-block; 474 | height:24px; 475 | width:24px; 476 | } 477 | .container{ 478 | margin:0 auto; 479 | max-width:1200px; 480 | min-width:320px; 481 | padding:0 16px; 482 | width:100%; 483 | } 484 | .container-fluid{ 485 | margin-left:auto; 486 | margin-right:auto; 487 | padding-left:var(--spacing-md, 16px); 488 | padding-right:var(--spacing-md, 16px); 489 | width:100%; 490 | } 491 | @media (min-width:576px){ 492 | .container{ 493 | max-width:540px; 494 | } 495 | } 496 | 497 | @media (min-width:768px){ 498 | .container{ 499 | max-width:720px; 500 | } 501 | } 502 | 503 | @media (min-width:992px){ 504 | .container{ 505 | max-width:960px; 506 | } 507 | } 508 | 509 | @media (min-width:1200px){ 510 | .container{ 511 | max-width:1140px; 512 | } 513 | } 514 | .container-padding-sm{ 515 | padding:var(--spacing-sm, 8px); 516 | } 517 | 518 | .container-padding-md{ 519 | padding:var(--spacing-md, 16px); 520 | } 521 | 522 | .container-padding-lg{ 523 | padding:var(--spacing-lg, 32px); 524 | } 525 | .grid{ 526 | display:grid; 527 | grid-gap:var(--grid-gap, 16px); 528 | } 529 | @media (min-width:576px){ 530 | .grid{ 531 | grid-template-columns:repeat(12, 1fr); 532 | } 533 | } 534 | .col{ 535 | grid-column:span 12; 536 | } 537 | 538 | .col-1{ 539 | grid-column:span 1; 540 | } 541 | 542 | .col-2{ 543 | grid-column:span 2; 544 | } 545 | 546 | .col-3{ 547 | grid-column:span 3; 548 | } 549 | 550 | .col-4{ 551 | grid-column:span 4; 552 | } 553 | 554 | .col-5{ 555 | grid-column:span 5; 556 | } 557 | 558 | .col-6{ 559 | grid-column:span 6; 560 | } 561 | 562 | .col-7{ 563 | grid-column:span 7; 564 | } 565 | 566 | .col-8{ 567 | grid-column:span 8; 568 | } 569 | 570 | .col-9{ 571 | grid-column:span 9; 572 | } 573 | 574 | .col-10{ 575 | grid-column:span 10; 576 | } 577 | 578 | .col-11{ 579 | grid-column:span 11; 580 | } 581 | 582 | .col-12{ 583 | grid-column:span 12; 584 | } 585 | @media (min-width:768px){ 586 | .col-sm-1{ 587 | grid-column:span 1; 588 | } 589 | 590 | .col-sm-2{ 591 | grid-column:span 2; 592 | } 593 | 594 | .col-sm-3{ 595 | grid-column:span 3; 596 | } 597 | 598 | .col-sm-4{ 599 | grid-column:span 4; 600 | } 601 | 602 | .col-sm-5{ 603 | grid-column:span 5; 604 | } 605 | 606 | .col-sm-6{ 607 | grid-column:span 6; 608 | } 609 | 610 | .col-sm-7{ 611 | grid-column:span 7; 612 | } 613 | 614 | .col-sm-8{ 615 | grid-column:span 8; 616 | } 617 | 618 | .col-sm-9{ 619 | grid-column:span 9; 620 | } 621 | 622 | .col-sm-10{ 623 | grid-column:span 10; 624 | } 625 | 626 | .col-sm-11{ 627 | grid-column:span 11; 628 | } 629 | 630 | .col-sm-12{ 631 | grid-column:span 12; 632 | } 633 | } 634 | 635 | @media (min-width:992px){ 636 | .col-md-1{ 637 | grid-column:span 1; 638 | } 639 | 640 | .col-md-2{ 641 | grid-column:span 2; 642 | } 643 | 644 | .col-md-3{ 645 | grid-column:span 3; 646 | } 647 | 648 | .col-md-4{ 649 | grid-column:span 4; 650 | } 651 | 652 | .col-md-5{ 653 | grid-column:span 5; 654 | } 655 | 656 | .col-md-6{ 657 | grid-column:span 6; 658 | } 659 | 660 | .col-md-7{ 661 | grid-column:span 7; 662 | } 663 | 664 | .col-md-8{ 665 | grid-column:span 8; 666 | } 667 | 668 | .col-md-9{ 669 | grid-column:span 9; 670 | } 671 | 672 | .col-md-10{ 673 | grid-column:span 10; 674 | } 675 | 676 | .col-md-11{ 677 | grid-column:span 11; 678 | } 679 | 680 | .col-md-12{ 681 | grid-column:span 12; 682 | } 683 | } 684 | 685 | @media (min-width:1200px){ 686 | .col-lg-1{ 687 | grid-column:span 1; 688 | } 689 | 690 | .col-lg-2{ 691 | grid-column:span 2; 692 | } 693 | 694 | .col-lg-3{ 695 | grid-column:span 3; 696 | } 697 | 698 | .col-lg-4{ 699 | grid-column:span 4; 700 | } 701 | 702 | .col-lg-5{ 703 | grid-column:span 5; 704 | } 705 | 706 | .col-lg-6{ 707 | grid-column:span 6; 708 | } 709 | 710 | .col-lg-7{ 711 | grid-column:span 7; 712 | } 713 | 714 | .col-lg-8{ 715 | grid-column:span 8; 716 | } 717 | 718 | .col-lg-9{ 719 | grid-column:span 9; 720 | } 721 | 722 | .col-lg-10{ 723 | grid-column:span 10; 724 | } 725 | 726 | .col-lg-11{ 727 | grid-column:span 11; 728 | } 729 | 730 | .col-lg-12{ 731 | grid-column:span 12; 732 | } 733 | } 734 | .col-full{ 735 | grid-column:span 12; 736 | } 737 | .align-center{ 738 | align-items:center; 739 | display:flex; 740 | justify-content:center; 741 | } 742 | 743 | .align-left{ 744 | display:flex; 745 | justify-content:flex-start; 746 | } 747 | 748 | .align-right{ 749 | display:flex; 750 | justify-content:flex-end; 751 | } 752 | @media (max-width:575.98px){ 753 | 754 | .col,.col-lg,.col-md,.col-sm{ 755 | grid-column:span 12; 756 | } 757 | } 758 | .grid-fluid{ 759 | display:flex; 760 | flex-wrap:wrap; 761 | } 762 | 763 | .grid-fluid>.col{ 764 | flex:1; 765 | min-width:0; 766 | } 767 | 768 | .text-primary{ 769 | color:var(--primary-color); 770 | } 771 | 772 | .text-secondary{ 773 | color:var(--secondary-color); 774 | } 775 | 776 | .text-accent{ 777 | color:var(--accent-color); 778 | } 779 | 780 | .bg-primary{ 781 | background-color:var(--primary-color); 782 | } 783 | 784 | .bg-secondary{ 785 | background-color:var(--secondary-color); 786 | } 787 | 788 | .text-white{ 789 | color:var(--text-color); 790 | } 791 | :root{ 792 | --spacing-xs:4px; 793 | --spacing-sm:8px; 794 | --spacing-md:16px; 795 | --spacing-lg:32px; 796 | --spacing-xl:64px; 797 | } 798 | .p-xs{ 799 | padding:var(--spacing-xs); 800 | } 801 | 802 | .p-sm{ 803 | padding:var(--spacing-sm); 804 | } 805 | 806 | .p-md{ 807 | padding:var(--spacing-md); 808 | } 809 | 810 | .p-lg{ 811 | padding:var(--spacing-lg); 812 | } 813 | 814 | .p-xl{ 815 | padding:var(--spacing-xl); 816 | } 817 | .pt-xs{ 818 | padding-top:var(--spacing-xs); 819 | } 820 | 821 | .pt-sm{ 822 | padding-top:var(--spacing-sm); 823 | } 824 | 825 | .pt-md{ 826 | padding-top:var(--spacing-md); 827 | } 828 | 829 | .pt-lg{ 830 | padding-top:var(--spacing-lg); 831 | } 832 | 833 | .pt-xl{ 834 | padding-top:var(--spacing-xl); 835 | } 836 | .pb-xs{ 837 | padding-bottom:var(--spacing-xs); 838 | } 839 | 840 | .pb-sm{ 841 | padding-bottom:var(--spacing-sm); 842 | } 843 | 844 | .pb-md{ 845 | padding-bottom:var(--spacing-md); 846 | } 847 | 848 | .pb-lg{ 849 | padding-bottom:var(--spacing-lg); 850 | } 851 | 852 | .pb-xl{ 853 | padding-bottom:var(--spacing-xl); 854 | } 855 | .pl-xs{ 856 | padding-left:var(--spacing-xs); 857 | } 858 | 859 | .pl-sm{ 860 | padding-left:var(--spacing-sm); 861 | } 862 | 863 | .pl-md{ 864 | padding-left:var(--spacing-md); 865 | } 866 | 867 | .pl-lg{ 868 | padding-left:var(--spacing-lg); 869 | } 870 | 871 | .pl-xl{ 872 | padding-left:var(--spacing-xl); 873 | } 874 | .pr-xs{ 875 | padding-right:var(--spacing-xs); 876 | } 877 | 878 | .pr-sm{ 879 | padding-right:var(--spacing-sm); 880 | } 881 | 882 | .pr-md{ 883 | padding-right:var(--spacing-md); 884 | } 885 | 886 | .pr-lg{ 887 | padding-right:var(--spacing-lg); 888 | } 889 | 890 | .pr-xl{ 891 | padding-right:var(--spacing-xl); 892 | } 893 | .py-xs{ 894 | padding-bottom:var(--spacing-xs); 895 | padding-top:var(--spacing-xs); 896 | } 897 | 898 | .py-sm{ 899 | padding-bottom:var(--spacing-sm); 900 | padding-top:var(--spacing-sm); 901 | } 902 | 903 | .py-md{ 904 | padding-bottom:var(--spacing-md); 905 | padding-top:var(--spacing-md); 906 | } 907 | 908 | .py-lg{ 909 | padding-bottom:var(--spacing-lg); 910 | padding-top:var(--spacing-lg); 911 | } 912 | 913 | .py-xl{ 914 | padding-bottom:var(--spacing-xl); 915 | padding-top:var(--spacing-xl); 916 | } 917 | .px-xs{ 918 | padding-left:var(--spacing-xs); 919 | padding-right:var(--spacing-xs); 920 | } 921 | 922 | .px-sm{ 923 | padding-left:var(--spacing-sm); 924 | padding-right:var(--spacing-sm); 925 | } 926 | 927 | .px-md{ 928 | padding-left:var(--spacing-md); 929 | padding-right:var(--spacing-md); 930 | } 931 | 932 | .px-lg{ 933 | padding-left:var(--spacing-lg); 934 | padding-right:var(--spacing-lg); 935 | } 936 | 937 | .px-xl{ 938 | padding-left:var(--spacing-xl); 939 | padding-right:var(--spacing-xl); 940 | } 941 | .m-xs{ 942 | margin:var(--spacing-xs); 943 | } 944 | 945 | .m-sm{ 946 | margin:var(--spacing-sm); 947 | } 948 | 949 | .m-md{ 950 | margin:var(--spacing-md); 951 | } 952 | 953 | .m-lg{ 954 | margin:var(--spacing-lg); 955 | } 956 | 957 | .m-xl{ 958 | margin:var(--spacing-xl); 959 | } 960 | .mt-xs{ 961 | margin-top:var(--spacing-xs); 962 | } 963 | 964 | .mt-sm{ 965 | margin-top:var(--spacing-sm); 966 | } 967 | 968 | .mt-md{ 969 | margin-top:var(--spacing-md); 970 | } 971 | 972 | .mt-lg{ 973 | margin-top:var(--spacing-lg); 974 | } 975 | 976 | .mt-xl{ 977 | margin-top:var(--spacing-xl); 978 | } 979 | .mb-xs{ 980 | margin-bottom:var(--spacing-xs); 981 | } 982 | 983 | .mb-sm{ 984 | margin-bottom:var(--spacing-sm); 985 | } 986 | 987 | .mb-md{ 988 | margin-bottom:var(--spacing-md); 989 | } 990 | 991 | .mb-lg{ 992 | margin-bottom:var(--spacing-lg); 993 | } 994 | 995 | .mb-xl{ 996 | margin-bottom:var(--spacing-xl); 997 | } 998 | .ml-xs{ 999 | margin-left:var(--spacing-xs); 1000 | } 1001 | 1002 | .ml-sm{ 1003 | margin-left:var(--spacing-sm); 1004 | } 1005 | 1006 | .ml-md{ 1007 | margin-left:var(--spacing-md); 1008 | } 1009 | 1010 | .ml-lg{ 1011 | margin-left:var(--spacing-lg); 1012 | } 1013 | 1014 | .ml-xl{ 1015 | margin-left:var(--spacing-xl); 1016 | } 1017 | .mr-xs{ 1018 | margin-right:var(--spacing-xs); 1019 | } 1020 | 1021 | .mr-sm{ 1022 | margin-right:var(--spacing-sm); 1023 | } 1024 | 1025 | .mr-md{ 1026 | margin-right:var(--spacing-md); 1027 | } 1028 | 1029 | .mr-lg{ 1030 | margin-right:var(--spacing-lg); 1031 | } 1032 | 1033 | .mr-xl{ 1034 | margin-right:var(--spacing-xl); 1035 | } 1036 | .my-xs{ 1037 | margin-bottom:var(--spacing-xs); 1038 | margin-top:var(--spacing-xs); 1039 | } 1040 | 1041 | .my-sm{ 1042 | margin-bottom:var(--spacing-sm); 1043 | margin-top:var(--spacing-sm); 1044 | } 1045 | 1046 | .my-md{ 1047 | margin-bottom:var(--spacing-md); 1048 | margin-top:var(--spacing-md); 1049 | } 1050 | 1051 | .my-lg{ 1052 | margin-bottom:var(--spacing-lg); 1053 | margin-top:var(--spacing-lg); 1054 | } 1055 | 1056 | .my-xl{ 1057 | margin-bottom:var(--spacing-xl); 1058 | margin-top:var(--spacing-xl); 1059 | } 1060 | .mx-xs{ 1061 | margin-left:var(--spacing-xs); 1062 | margin-right:var(--spacing-xs); 1063 | } 1064 | 1065 | .mx-sm{ 1066 | margin-left:var(--spacing-sm); 1067 | margin-right:var(--spacing-sm); 1068 | } 1069 | 1070 | .mx-md{ 1071 | margin-left:var(--spacing-md); 1072 | margin-right:var(--spacing-md); 1073 | } 1074 | 1075 | .mx-lg{ 1076 | margin-left:var(--spacing-lg); 1077 | margin-right:var(--spacing-lg); 1078 | } 1079 | 1080 | .mx-xl{ 1081 | margin-left:var(--spacing-xl); 1082 | margin-right:var(--spacing-xl); 1083 | } 1084 | .m-auto{ 1085 | margin:auto; 1086 | } 1087 | 1088 | .mt-auto{ 1089 | margin-top:auto; 1090 | } 1091 | 1092 | .mb-auto{ 1093 | margin-bottom:auto; 1094 | } 1095 | 1096 | .ml-auto{ 1097 | margin-left:auto; 1098 | } 1099 | 1100 | .mr-auto{ 1101 | margin-right:auto; 1102 | } 1103 | .m-0{ 1104 | margin:0; 1105 | } 1106 | 1107 | .mt-0{ 1108 | margin-top:0; 1109 | } 1110 | 1111 | .mb-0{ 1112 | margin-bottom:0; 1113 | } 1114 | 1115 | .ml-0{ 1116 | margin-left:0; 1117 | } 1118 | 1119 | .mr-0{ 1120 | margin-right:0; 1121 | } 1122 | 1123 | .p-0{ 1124 | padding:0; 1125 | } 1126 | 1127 | .pt-0{ 1128 | padding-top:0; 1129 | } 1130 | 1131 | .pb-0{ 1132 | padding-bottom:0; 1133 | } 1134 | 1135 | .pl-0{ 1136 | padding-left:0; 1137 | } 1138 | 1139 | .pr-0{ 1140 | padding-right:0; 1141 | } 1142 | @media (min-width:576px){ 1143 | .sm-m-xs{ 1144 | margin:var(--spacing-xs); 1145 | } 1146 | 1147 | .sm-m-sm{ 1148 | margin:var(--spacing-sm); 1149 | } 1150 | 1151 | .sm-m-md{ 1152 | margin:var(--spacing-md); 1153 | } 1154 | 1155 | .sm-m-lg{ 1156 | margin:var(--spacing-lg); 1157 | } 1158 | 1159 | .sm-m-xl{ 1160 | margin:var(--spacing-xl); 1161 | } 1162 | 1163 | .sm-p-xs{ 1164 | padding:var(--spacing-xs); 1165 | } 1166 | 1167 | .sm-p-sm{ 1168 | padding:var(--spacing-sm); 1169 | } 1170 | 1171 | .sm-p-md{ 1172 | padding:var(--spacing-md); 1173 | } 1174 | 1175 | .sm-p-lg{ 1176 | padding:var(--spacing-lg); 1177 | } 1178 | 1179 | .sm-p-xl{ 1180 | padding:var(--spacing-xl); 1181 | } 1182 | } 1183 | @media (min-width:768px){ 1184 | .md-m-xs{ 1185 | margin:var(--spacing-xs); 1186 | } 1187 | 1188 | .md-m-sm{ 1189 | margin:var(--spacing-sm); 1190 | } 1191 | 1192 | .md-m-md{ 1193 | margin:var(--spacing-md); 1194 | } 1195 | 1196 | .md-m-lg{ 1197 | margin:var(--spacing-lg); 1198 | } 1199 | 1200 | .md-m-xl{ 1201 | margin:var(--spacing-xl); 1202 | } 1203 | 1204 | .md-p-xs{ 1205 | padding:var(--spacing-xs); 1206 | } 1207 | 1208 | .md-p-sm{ 1209 | padding:var(--spacing-sm); 1210 | } 1211 | 1212 | .md-p-md{ 1213 | padding:var(--spacing-md); 1214 | } 1215 | 1216 | .md-p-lg{ 1217 | padding:var(--spacing-lg); 1218 | } 1219 | 1220 | .md-p-xl{ 1221 | padding:var(--spacing-xl); 1222 | } 1223 | } 1224 | @media (min-width:992px){ 1225 | .lg-m-xs{ 1226 | margin:var(--spacing-xs); 1227 | } 1228 | 1229 | .lg-m-sm{ 1230 | margin:var(--spacing-sm); 1231 | } 1232 | 1233 | .lg-m-md{ 1234 | margin:var(--spacing-md); 1235 | } 1236 | 1237 | .lg-m-lg{ 1238 | margin:var(--spacing-lg); 1239 | } 1240 | 1241 | .lg-m-xl{ 1242 | margin:var(--spacing-xl); 1243 | } 1244 | 1245 | .lg-p-xs{ 1246 | padding:var(--spacing-xs); 1247 | } 1248 | 1249 | .lg-p-sm{ 1250 | padding:var(--spacing-sm); 1251 | } 1252 | 1253 | .lg-p-md{ 1254 | padding:var(--spacing-md); 1255 | } 1256 | 1257 | .lg-p-lg{ 1258 | padding:var(--spacing-lg); 1259 | } 1260 | 1261 | .lg-p-xl{ 1262 | padding:var(--spacing-xl); 1263 | } 1264 | } 1265 | @media (min-width:1200px){ 1266 | .xl-m-xs{ 1267 | margin:var(--spacing-xs); 1268 | } 1269 | 1270 | .xl-m-sm{ 1271 | margin:var(--spacing-sm); 1272 | } 1273 | 1274 | .xl-m-md{ 1275 | margin:var(--spacing-md); 1276 | } 1277 | 1278 | .xl-m-lg{ 1279 | margin:var(--spacing-lg); 1280 | } 1281 | 1282 | .xl-m-xl{ 1283 | margin:var(--spacing-xl); 1284 | } 1285 | 1286 | .xl-p-xs{ 1287 | padding:var(--spacing-xs); 1288 | } 1289 | 1290 | .xl-p-sm{ 1291 | padding:var(--spacing-sm); 1292 | } 1293 | 1294 | .xl-p-md{ 1295 | padding:var(--spacing-md); 1296 | } 1297 | 1298 | .xl-p-lg{ 1299 | padding:var(--spacing-lg); 1300 | } 1301 | 1302 | .xl-p-xl{ 1303 | padding:var(--spacing-xl); 1304 | } 1305 | } 1306 | 1307 | .text-left{ 1308 | text-align:left; 1309 | } 1310 | 1311 | .text-right{ 1312 | text-align:right; 1313 | } 1314 | 1315 | .text-center{ 1316 | text-align:center; 1317 | } 1318 | 1319 | .font-sm{ 1320 | font-size:var(--font-size-sm); 1321 | } 1322 | 1323 | .font-lg{ 1324 | font-size:var(--font-size-lg); 1325 | } 1326 | 1327 | .hidden{ 1328 | display:none; 1329 | } 1330 | 1331 | .visible{ 1332 | display:block; 1333 | } 1334 | 1335 | .invisible{ 1336 | visibility:hidden; 1337 | } 1338 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const concat = require('gulp-concat'); 3 | const postcss = require('gulp-postcss'); 4 | const cssnano = require('cssnano'); 5 | const safeParser = require('postcss-safe-parser'); 6 | 7 | gulp.task('styles', function() { 8 | const plugins = [ 9 | cssnano({ 10 | preset: ['default', { 11 | discardComments: { removeAll: true }, 12 | normalizeWhitespace: false 13 | }] 14 | }) 15 | ]; 16 | 17 | return gulp.src('src/**/*.css') 18 | .pipe(concat('minecraft-css-framework-v-1.0.0.css')) 19 | .pipe(postcss(plugins, { parser: safeParser })) 20 | .pipe(gulp.dest('dist')); 21 | }); 22 | 23 | gulp.task('default', gulp.series('styles')); 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |