├── 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 | MC UI 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 24 | 25 | 26 |
27 | 28 | 29 |
30 |
31 |
32 |
33 |

Welcome to Minecraft.CSS

34 |
35 |
36 | This is a sample Minecraft UI CSS framework. 37 |

heading

38 |

heading

39 |

heading

40 |

heading

41 |
heading
42 |
heading
43 |
44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 | 52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 | 60 |
61 |
Sign Up
62 |
63 |
64 | 65 | 66 |
67 |
68 | 69 | 70 |
71 |
72 |
73 | 74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 | 86 |
87 |
89 |
90 |
93 |
94 |
95 | 96 |
97 |
98 |
99 |

Full-Width Section

100 | 101 | 102 |
103 |
104 |
105 | 106 | 113 |
114 | 115 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /src/base/_colors.css: -------------------------------------------------------------------------------- 1 | /* _colors.css */ 2 | 3 | /* Base Colors */ 4 | :root { 5 | --primary-color: #313233; 6 | --secondary-color: #48494A; 7 | --accent-color: #D0D1D4; 8 | --background-color: #48494A; 9 | --text-color: #ffffff; 10 | --text-dark-color: #000000; 11 | --link-color: #007bff; 12 | --error-color: #dc3545; 13 | --success-color: #28a745; 14 | --warning-color: #ffc107; 15 | --info-color: #17a2b8; 16 | --selected-color: #48494A; 17 | 18 | --hr-top-color: #333334; 19 | --hr-bottom-color: #5A5B5C; 20 | 21 | 22 | 23 | /* button-primary colors */ 24 | --btn-primary-inner-color: #3C8527; 25 | --btn-primary-inner-hover-color: #2A641C; 26 | --btn-primary-inner-shadow-color: #1D4D13; 27 | --btn-primary-border-color: #1E1E1F; 28 | --btn-primary-inner-border-lt-color: #4F913Cbf; 29 | --btn-primary-inner-border-br-color: #639D52; 30 | --btn-primary-text-color: #FFFFFF; 31 | 32 | /* button-primary colors */ 33 | --btn-secondary-inner-color: #7345E5; 34 | --btn-secondary-inner-hover-color: #5D2CC6; 35 | --btn-secondary-inner-shadow-color: #4A1CAC; 36 | --btn-secondary-border-color: #1E1E1F; 37 | --btn-secondary-inner-border-lt-color: #A264F2bf; 38 | --btn-secondary-inner-border-br-color: #8E49EB; 39 | --btn-secondary-text-color: #FFFFFF; 40 | 41 | /* button-tertiary colors */ 42 | --btn-tertiary-inner-color: #D0D1D4; 43 | --btn-tertiary-inner-hover-color: #B1B2B5; 44 | --btn-tertiary-inner-shadow-color: #58585A; 45 | --btn-tertiary-border-color: #1E1E1F; 46 | --btn-tertiary-inner-border-lt-color: #ECEDEEbf; 47 | --btn-tertiary-inner-border-br-color: #E3E3E5; 48 | --btn-tertiary-text-color: #000000; 49 | 50 | /* button-normal colors */ 51 | --btn-normal-inner-color: #C6C6C6; 52 | --btn-normal-border-color: #131313; 53 | --btn-normal-inner-border-lt-color: #f7f7f7bf; 54 | --btn-normal-inner-border-br-color: #656465; 55 | --btn-normal-text-color: #4C4C4C; 56 | 57 | --btn-normal-inner-hover-color: #218306; 58 | --btn-normal-border-hover-color: #FFFFFF; 59 | --btn-normal-inner-border-lt-hover-color: #17CD07bf; 60 | --btn-normal-inner-border-br-hover-color: #004E00; 61 | --btn-normal-text-hover-color: #FFFFFF; 62 | } -------------------------------------------------------------------------------- /src/base/_fonts.css: -------------------------------------------------------------------------------- 1 | /* _fonts.css */ 2 | 3 | @font-face { 4 | font-family: 'MinecraftRegular'; 5 | src: url('../fonts/Minecraft-Regular.otf') format('opentype'); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | @font-face { 11 | font-family: 'MinecraftTen'; 12 | src: url('../fonts/Minecraft-Ten.ttf') format('truetype'); 13 | font-weight: normal; 14 | font-style: normal; 15 | } -------------------------------------------------------------------------------- /src/base/_reset.css: -------------------------------------------------------------------------------- 1 | /* _reset.css */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | font-size: 16px; 11 | line-height: 1.5; 12 | caret-color: #3C8527; 13 | } 14 | 15 | 16 | ul, ol { 17 | list-style: none; 18 | } 19 | 20 | a { 21 | text-decoration: none !important; 22 | color: inherit; 23 | } 24 | 25 | 26 | table { 27 | border-collapse: collapse; 28 | } 29 | 30 | td, th { 31 | padding: 0.5em; 32 | } 33 | 34 | 35 | hr.no-padding { 36 | width: calc(100% + 32px); 37 | border: 0; 38 | border-top: 2.5px solid var(--hr-top-color); 39 | border-bottom: 2.5px solid var(--hr-bottom-color); 40 | padding-left: 0; 41 | padding-right: 0; 42 | margin: 0.5em 0; 43 | margin-left: -16px; 44 | margin-right: -16px; 45 | } -------------------------------------------------------------------------------- /src/base/_typography.css: -------------------------------------------------------------------------------- 1 | /* _typography.css */ 2 | @import '../base/_fonts.css'; 3 | 4 | body { 5 | font-family: 'MinecraftRegular', sans-serif; 6 | font-size: 1rem; 7 | color: var(--text-color); 8 | line-height: 1.6; 9 | } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: 'MinecraftTen', sans-serif !important; 13 | margin-bottom: 0.5em; 14 | color: var(--text-color); 15 | font-weight: bold; 16 | } 17 | 18 | h1 { 19 | font-size: 2.5rem; 20 | } 21 | 22 | h2 { 23 | font-size: 2rem; 24 | } 25 | 26 | h3 { 27 | font-size: 1.75rem; 28 | } 29 | 30 | h4 { 31 | font-size: 1.5rem; 32 | } 33 | 34 | h5 { 35 | font-size: 1.25rem; 36 | } 37 | 38 | h6 { 39 | font-size: 1rem; 40 | } 41 | 42 | p { 43 | margin-bottom: 1em; 44 | } 45 | 46 | a { 47 | color: var(--link-color, #007bff); 48 | } 49 | 50 | a:hover { 51 | text-decoration: underline; 52 | } 53 | 54 | .anchor-btn { 55 | font-family: 'MinecraftTen', sans-serif; 56 | } 57 | 58 | .font-ten { 59 | font-family: 'MinecraftTen', sans-serif; 60 | } -------------------------------------------------------------------------------- /src/base/_variables.css: -------------------------------------------------------------------------------- 1 | /* _variables.css */ 2 | 3 | /* Font Sizes */ 4 | :root { 5 | --font-size-base: 16px; 6 | --font-size-lg: 18px; 7 | --font-size-sm: 14px; 8 | 9 | /* Border Radius */ 10 | --border-radius: 0px; 11 | 12 | /* Breakpoints */ 13 | --breakpoint-xs: 480px; 14 | --breakpoint-sm: 576px; 15 | --breakpoint-md: 768px; 16 | --breakpoint-lg: 992px; 17 | --breakpoint-xl: 1200px; 18 | 19 | /* Spacing */ 20 | --spacing-xs: 0.25rem; 21 | --spacing-sm: 0.5rem; 22 | --spacing-md: 1rem; 23 | --spacing-lg: 1.5rem; 24 | --spacing-xl: 2rem; 25 | } -------------------------------------------------------------------------------- /src/components/_buttons.css: -------------------------------------------------------------------------------- 1 | /* _buttons.css */ 2 | 3 | .button { 4 | margin: var(--spacing-sm) var(--spacing-md); 5 | padding: var(--spacing-sm) var(--spacing-md); 6 | color: var(--btn-primary-text-color); 7 | cursor: pointer; 8 | } 9 | 10 | .button-primary { 11 | font-family: "MinecraftTen", sans-serif; 12 | box-shadow: inset 0px -6px 0px 0px var(--btn-primary-inner-shadow-color), 13 | inset 3px 3px 0 var(--btn-primary-inner-border-lt-color), 14 | inset -3px -9px 0 var(--btn-primary-inner-border-br-color); 15 | background: var(--btn-primary-inner-color); 16 | background-color: var(--btn-primary-inner-color); 17 | border: 3px solid var(--btn-primary-border-color); 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | text-align: center; 22 | font-weight: bold; 23 | text-decoration: none; 24 | letter-spacing: 2px; 25 | text-shadow: 2.5px 2.5px 0px rgba(0, 0, 0, 0.343); 26 | /* height: 40px; */ 27 | /* width: 20%; */ 28 | user-select: none; 29 | padding-top: 5px; 30 | padding-bottom: 15px; 31 | } 32 | 33 | .button-primary:hover { 34 | background-color: var(--btn-primary-inner-hover-color); 35 | } 36 | 37 | .button-primary:active { 38 | position: relative; 39 | top: 2px; 40 | box-shadow: inset 0px 0px 0px 0px var(--btn-primary-inner-shadow-color), 41 | inset 3px 3px 0 var(--btn-primary-inner-border-lt-color), 42 | inset -3px -3px 0 var(--btn-primary-inner-border-br-color); 43 | } 44 | 45 | .button-secondary { 46 | font-family: "MinecraftRegular", sans-serif; 47 | box-shadow: inset 0px -6px 0px 0px var(--btn-secondary-inner-shadow-color), 48 | inset 3px 3px 0 var(--btn-secondary-inner-border-lt-color), 49 | inset -3px -9px 0 var(--btn-secondary-inner-border-br-color); 50 | background: var(--btn-secondary-inner-color); 51 | background-color: var(--btn-secondary-inner-color); 52 | border: 3px solid var(--btn-secondary-border-color); 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | text-align: center; 57 | text-decoration: none; 58 | user-select: none; 59 | padding-bottom: 12px; 60 | } 61 | 62 | .button-secondary:hover { 63 | background-color: var(--btn-secondary-inner-hover-color); 64 | } 65 | 66 | .button-secondary:active { 67 | position: relative; 68 | top: 2px; 69 | box-shadow: inset 0px 0px 0px 0px var(--btn-secondary-inner-shadow-color), 70 | inset 3px 3px 0 var(--btn-secondary-inner-border-lt-color), 71 | inset -3px -3px 0 var(--btn-secondary-inner-border-br-color); 72 | } 73 | 74 | .button-tertiary { 75 | color: var(--btn-tertiary-text-color); 76 | font-family: "MinecraftRegular", sans-serif; 77 | box-shadow: inset 0px -6px 0px 0px var(--btn-tertiary-inner-shadow-color), 78 | inset 3px 3px 0 var(--btn-tertiary-inner-border-lt-color), 79 | inset -3px -9px 0 var(--btn-tertiary-inner-border-br-color); 80 | background: var(--btn-tertiary-inner-color); 81 | background-color: var(--btn-tertiary-inner-color); 82 | border: 3px solid var(--btn-tertiary-border-color); 83 | display: flex; 84 | justify-content: center; 85 | align-items: center; 86 | text-align: center; 87 | text-decoration: none; 88 | user-select: none; 89 | padding-bottom: 12px; 90 | transition: 0s; 91 | } 92 | 93 | .button-tertiary:hover { 94 | background-color: var(--btn-tertiary-inner-hover-color); 95 | } 96 | 97 | .button-tertiary:active { 98 | position: relative; 99 | top: 2px; 100 | box-shadow: inset 0px 0px 0px 0px var(--btn-tertiary-inner-shadow-color), 101 | inset 3px 3px 0 var(--btn-tertiary-inner-border-lt-color), 102 | inset -3px -3px 0 var(--btn-tertiary-inner-border-br-color); 103 | } 104 | 105 | .button-normal { 106 | color: var(--btn-normal-text-color); 107 | font-family: "MinecraftRegular", sans-serif; 108 | box-shadow: inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-color), 109 | inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-color); 110 | background: var(--btn-normal-inner-color); 111 | background-color: var(--btn-normal-inner-color); 112 | border: 1.5px solid var(--btn-normal-border-color); 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | text-align: center; 117 | text-decoration: none; 118 | user-select: none; 119 | transition: 0s; 120 | } 121 | 122 | .button-normal:hover { 123 | color: var(--btn-normal-text-hover-color); 124 | font-family: "MinecraftRegular", sans-serif; 125 | box-shadow: inset 1.5px 1.5px 0 126 | var(--btn-normal-inner-border-lt-hover-color), 127 | inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-hover-color); 128 | background: var(--btn-normal-inner-hover-color); 129 | background-color: var(--btn-normal-inner-hover-color); 130 | border: 1.5px solid var(--btn-normal-border-hover-color); 131 | } 132 | 133 | .button-normal:active { 134 | position: relative; 135 | } 136 | -------------------------------------------------------------------------------- /src/components/_cards.css: -------------------------------------------------------------------------------- 1 | /* _cards.css */ 2 | 3 | .card { 4 | background-color: var(--background-color); 5 | border: 1px solid var(--secondary-color); 6 | padding: var(--spacing-md); 7 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .card-header { 11 | font-size: 1.25rem; 12 | font-weight: bold; 13 | margin-bottom: var(--spacing-sm); 14 | } 15 | 16 | .card-body { 17 | font-size: 1rem; 18 | color: var(--text-color); 19 | } 20 | 21 | .card-footer { 22 | margin-top: var(--spacing-md); 23 | text-align: right; 24 | } -------------------------------------------------------------------------------- /src/components/_forms.css: -------------------------------------------------------------------------------- 1 | /* _forms.css */ 2 | 3 | 4 | .form-group { 5 | font-family: 'MinecraftRegular', sans-serif; 6 | margin-bottom: var(--spacing-md); 7 | color: var(--text-color, white); 8 | } 9 | 10 | .form-label { 11 | display: block; 12 | margin-bottom: var(--spacing-xs); 13 | } 14 | 15 | .form-input { 16 | font-family: 'MinecraftRegular', sans-serif; 17 | height: 40px; 18 | color: white; 19 | background-color: #313233; 20 | border: 3px solid #1e1e1f; 21 | box-shadow: inset 0px 6px #242425; 22 | width: 100%; 23 | padding: var(--spacing-sm); 24 | border: 3px solid #1E1E1F; 25 | font-size: 1rem; 26 | } 27 | 28 | .form-input:focus { 29 | outline: none; 30 | } 31 | 32 | 33 | .form-button { 34 | color: var(--btn-normal-text-color); 35 | font-family: 'MinecraftRegular', sans-serif; 36 | box-shadow: 37 | inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-color), 38 | inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-color); 39 | background: var(--btn-normal-inner-color); 40 | background-color: var(--btn-normal-inner-color); 41 | border: 1.5px solid var(--btn-normal-border-color); 42 | padding: var(--spacing-sm) var(--spacing-md); 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | text-align: center; 47 | text-decoration: none; 48 | user-select: none; 49 | transition: .0s; 50 | } 51 | 52 | .form-button:hover { 53 | color: var(--btn-normal-text-hover-color); 54 | font-family: 'MinecraftRegular', sans-serif; 55 | box-shadow: 56 | inset 1.5px 1.5px 0 var(--btn-normal-inner-border-lt-hover-color), 57 | inset -1.5px -1.5px 0 var(--btn-normal-inner-border-br-hover-color); 58 | background: var(--btn-normal-inner-hover-color); 59 | background-color: var(--btn-normal-inner-hover-color); 60 | border: 1.5px solid var(--btn-normal-border-hover-color); 61 | } -------------------------------------------------------------------------------- /src/components/_modals.css: -------------------------------------------------------------------------------- 1 | /* _modals.css */ 2 | 3 | .modal { 4 | display: none; 5 | position: fixed; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | width: 400px; 10 | background-color: var(--background-color); 11 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 12 | z-index: 1000; 13 | } 14 | 15 | .modal-header { 16 | padding: var(--spacing-md); 17 | background-color: var(--primary-color); 18 | color: #fff; 19 | } 20 | 21 | .modal-body { 22 | padding: var(--spacing-md); 23 | } 24 | 25 | .modal-footer { 26 | padding: var(--spacing-md); 27 | text-align: right; 28 | } 29 | 30 | .modal-open { 31 | display: block; 32 | } -------------------------------------------------------------------------------- /src/components/_navigation.css: -------------------------------------------------------------------------------- 1 | /* _navigation.css */ 2 | 3 | .navbar { 4 | border-bottom: 3px solid #151516; 5 | width: 100%; 6 | background-color: #E6E8EB; 7 | box-shadow: inset 0px -6px #B1B2B5; 8 | justify-content: space-around; 9 | font-family: "MinecraftTen"; 10 | font-weight: normal; 11 | font-style: normal; 12 | padding: var(--spacing-sm) var(--spacing-md); 13 | display: flex; 14 | justify-content: space-between; 15 | padding-top: auto; 16 | align-items: center; 17 | } 18 | 19 | .navbar-brand { 20 | font-size: 1.5rem; 21 | color: var(--primary-color); 22 | font-weight: bold; 23 | } 24 | 25 | .navbar-nav { 26 | list-style: none; 27 | display: flex; 28 | gap: var(--spacing-md); 29 | } 30 | 31 | .navbar-nav a { 32 | color: var(--text-dark-color); 33 | text-decoration: none; 34 | font-size: 1rem; 35 | } 36 | 37 | .navbar-nav a:hover { 38 | text-decoration: underline; 39 | } -------------------------------------------------------------------------------- /src/dist/_main.all.css: -------------------------------------------------------------------------------- 1 | /*================== base ==================*/ 2 | 3 | @import '../base/_reset.css'; 4 | @import '../base/_typography.css'; 5 | @import '../base/_colors.css'; 6 | @import '../base/_variables.css'; 7 | @import '../base/_fonts.css'; 8 | 9 | /*================== components ==================*/ 10 | 11 | @import '../components/_buttons.css'; 12 | @import '../components/_cards.css'; 13 | @import '../components/_forms.css'; 14 | @import '../components/_modals.css'; 15 | @import '../components/_navigation.css'; 16 | 17 | /*================== icons ==================*/ 18 | 19 | @import '../icons/_icons.css'; 20 | 21 | /*================== layout ==================*/ 22 | 23 | @import '../layout/_container.css'; 24 | @import '../layout/_grid.css'; 25 | 26 | /*================== themes ==================*/ 27 | 28 | @import '../themes/_dark.css'; 29 | @import '../themes/_light.css'; 30 | 31 | /*================== utilities ==================*/ 32 | 33 | @import '../utilities/_colors.css'; 34 | @import '../utilities/_spacing.css'; 35 | @import '../utilities/_text.css'; 36 | @import '../utilities/_visibility.css'; -------------------------------------------------------------------------------- /src/dist/minecraft-css-framework.css: -------------------------------------------------------------------------------- 1 | /* Import base styles */ 2 | @import '/src/dist/_main.all.css'; 3 | -------------------------------------------------------------------------------- /src/fonts/Minecraft-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jiyath5516F/Minecraft-CSS/a2ac8577809e023db4ceaac1591ff952707d6290/src/fonts/Minecraft-Regular.otf -------------------------------------------------------------------------------- /src/fonts/Minecraft-Ten.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jiyath5516F/Minecraft-CSS/a2ac8577809e023db4ceaac1591ff952707d6290/src/fonts/Minecraft-Ten.ttf -------------------------------------------------------------------------------- /src/icons/_icons.css: -------------------------------------------------------------------------------- 1 | /* _icons.css */ 2 | 3 | .icon { 4 | display: inline-block; 5 | width: 24px; 6 | height: 24px; 7 | background-size: contain; 8 | } 9 | -------------------------------------------------------------------------------- /src/layout/_container.css: -------------------------------------------------------------------------------- 1 | /* _container.css */ 2 | 3 | /* Base container */ 4 | .container { 5 | width: 100%; 6 | max-width: 1200px; 7 | min-width: 320px; 8 | margin: 0 auto; 9 | padding: 0 16px; 10 | } 11 | 12 | /* Fluid container for full-width layouts */ 13 | .container-fluid { 14 | width: 100%; 15 | margin-left: auto; 16 | margin-right: auto; 17 | padding-left: var(--spacing-md, 16px); 18 | padding-right: var(--spacing-md, 16px); 19 | } 20 | 21 | /* Responsive container widths for different breakpoints */ 22 | @media (min-width: 576px) { 23 | .container { 24 | max-width: 540px; 25 | } 26 | } 27 | 28 | @media (min-width: 768px) { 29 | .container { 30 | max-width: 720px; 31 | } 32 | } 33 | 34 | @media (min-width: 992px) { 35 | .container { 36 | max-width: 960px; 37 | } 38 | } 39 | 40 | @media (min-width: 1200px) { 41 | .container { 42 | max-width: 1140px; 43 | } 44 | } 45 | 46 | /* Utility classes for padding inside containers */ 47 | .container-padding-sm { 48 | padding: var(--spacing-sm, 8px); 49 | } 50 | 51 | .container-padding-md { 52 | padding: var(--spacing-md, 16px); 53 | } 54 | 55 | .container-padding-lg { 56 | padding: var(--spacing-lg, 32px); 57 | } -------------------------------------------------------------------------------- /src/layout/_grid.css: -------------------------------------------------------------------------------- 1 | /* _grid.css */ 2 | 3 | /* Basic grid setup */ 4 | .grid { 5 | display: grid; 6 | grid-gap: var(--grid-gap, 16px); 7 | } 8 | 9 | /* Grid layout for different screen sizes */ 10 | @media (min-width: 576px) { 11 | .grid { 12 | grid-template-columns: repeat(12, 1fr); 13 | } 14 | } 15 | 16 | /* Column span utilities */ 17 | .col { 18 | grid-column: span 12; 19 | } 20 | 21 | .col-1 { 22 | grid-column: span 1; 23 | } 24 | 25 | .col-2 { 26 | grid-column: span 2; 27 | } 28 | 29 | .col-3 { 30 | grid-column: span 3; 31 | } 32 | 33 | .col-4 { 34 | grid-column: span 4; 35 | } 36 | 37 | .col-5 { 38 | grid-column: span 5; 39 | } 40 | 41 | .col-6 { 42 | grid-column: span 6; 43 | } 44 | 45 | .col-7 { 46 | grid-column: span 7; 47 | } 48 | 49 | .col-8 { 50 | grid-column: span 8; 51 | } 52 | 53 | .col-9 { 54 | grid-column: span 9; 55 | } 56 | 57 | .col-10 { 58 | grid-column: span 10; 59 | } 60 | 61 | .col-11 { 62 | grid-column: span 11; 63 | } 64 | 65 | .col-12 { 66 | grid-column: span 12; 67 | } 68 | 69 | /* Responsive Breakpoints */ 70 | @media (min-width: 768px) { 71 | .col-sm-1 { 72 | grid-column: span 1; 73 | } 74 | 75 | .col-sm-2 { 76 | grid-column: span 2; 77 | } 78 | 79 | .col-sm-3 { 80 | grid-column: span 3; 81 | } 82 | 83 | .col-sm-4 { 84 | grid-column: span 4; 85 | } 86 | 87 | .col-sm-5 { 88 | grid-column: span 5; 89 | } 90 | 91 | .col-sm-6 { 92 | grid-column: span 6; 93 | } 94 | 95 | .col-sm-7 { 96 | grid-column: span 7; 97 | } 98 | 99 | .col-sm-8 { 100 | grid-column: span 8; 101 | } 102 | 103 | .col-sm-9 { 104 | grid-column: span 9; 105 | } 106 | 107 | .col-sm-10 { 108 | grid-column: span 10; 109 | } 110 | 111 | .col-sm-11 { 112 | grid-column: span 11; 113 | } 114 | 115 | .col-sm-12 { 116 | grid-column: span 12; 117 | } 118 | } 119 | 120 | @media (min-width: 992px) { 121 | .col-md-1 { 122 | grid-column: span 1; 123 | } 124 | 125 | .col-md-2 { 126 | grid-column: span 2; 127 | } 128 | 129 | .col-md-3 { 130 | grid-column: span 3; 131 | } 132 | 133 | .col-md-4 { 134 | grid-column: span 4; 135 | } 136 | 137 | .col-md-5 { 138 | grid-column: span 5; 139 | } 140 | 141 | .col-md-6 { 142 | grid-column: span 6; 143 | } 144 | 145 | .col-md-7 { 146 | grid-column: span 7; 147 | } 148 | 149 | .col-md-8 { 150 | grid-column: span 8; 151 | } 152 | 153 | .col-md-9 { 154 | grid-column: span 9; 155 | } 156 | 157 | .col-md-10 { 158 | grid-column: span 10; 159 | } 160 | 161 | .col-md-11 { 162 | grid-column: span 11; 163 | } 164 | 165 | .col-md-12 { 166 | grid-column: span 12; 167 | } 168 | } 169 | 170 | @media (min-width: 1200px) { 171 | .col-lg-1 { 172 | grid-column: span 1; 173 | } 174 | 175 | .col-lg-2 { 176 | grid-column: span 2; 177 | } 178 | 179 | .col-lg-3 { 180 | grid-column: span 3; 181 | } 182 | 183 | .col-lg-4 { 184 | grid-column: span 4; 185 | } 186 | 187 | .col-lg-5 { 188 | grid-column: span 5; 189 | } 190 | 191 | .col-lg-6 { 192 | grid-column: span 6; 193 | } 194 | 195 | .col-lg-7 { 196 | grid-column: span 7; 197 | } 198 | 199 | .col-lg-8 { 200 | grid-column: span 8; 201 | } 202 | 203 | .col-lg-9 { 204 | grid-column: span 9; 205 | } 206 | 207 | .col-lg-10 { 208 | grid-column: span 10; 209 | } 210 | 211 | .col-lg-11 { 212 | grid-column: span 11; 213 | } 214 | 215 | .col-lg-12 { 216 | grid-column: span 12; 217 | } 218 | } 219 | 220 | /* Full-width utility class */ 221 | .col-full { 222 | grid-column: span 12; 223 | } 224 | 225 | /* Alignment utilities */ 226 | .align-center { 227 | display: flex; 228 | justify-content: center; 229 | align-items: center; 230 | } 231 | 232 | .align-left { 233 | display: flex; 234 | justify-content: flex-start; 235 | } 236 | 237 | .align-right { 238 | display: flex; 239 | justify-content: flex-end; 240 | } 241 | 242 | /* Mobile-first approach: Grid for smaller screens */ 243 | @media (max-width: 575.98px) { 244 | 245 | .col, 246 | .col-sm, 247 | .col-md, 248 | .col-lg { 249 | grid-column: span 12; 250 | } 251 | } 252 | 253 | /* Fluid grid option */ 254 | .grid-fluid { 255 | display: flex; 256 | flex-wrap: wrap; 257 | } 258 | 259 | .grid-fluid>.col { 260 | flex: 1; 261 | min-width: 0; 262 | } -------------------------------------------------------------------------------- /src/utilities/_colors.css: -------------------------------------------------------------------------------- 1 | /* _colors.css */ 2 | 3 | .text-primary { 4 | color: var(--primary-color); 5 | } 6 | 7 | .text-secondary { 8 | color: var(--secondary-color); 9 | } 10 | 11 | .text-accent { 12 | color: var(--accent-color); 13 | } 14 | 15 | .bg-primary { 16 | background-color: var(--primary-color); 17 | } 18 | 19 | .bg-secondary { 20 | background-color: var(--secondary-color); 21 | } 22 | 23 | .text-white { 24 | color: var(--text-color); 25 | } -------------------------------------------------------------------------------- /src/utilities/_spacing.css: -------------------------------------------------------------------------------- 1 | /* _spacing.css */ 2 | 3 | /* Base spacing variables */ 4 | :root { 5 | --spacing-xs: 4px; 6 | --spacing-sm: 8px; 7 | --spacing-md: 16px; 8 | --spacing-lg: 32px; 9 | --spacing-xl: 64px; 10 | } 11 | 12 | /* Padding Utilities */ 13 | 14 | /* All sides padding */ 15 | .p-xs { 16 | padding: var(--spacing-xs); 17 | } 18 | 19 | .p-sm { 20 | padding: var(--spacing-sm); 21 | } 22 | 23 | .p-md { 24 | padding: var(--spacing-md); 25 | } 26 | 27 | .p-lg { 28 | padding: var(--spacing-lg); 29 | } 30 | 31 | .p-xl { 32 | padding: var(--spacing-xl); 33 | } 34 | 35 | /* Padding - Top only */ 36 | .pt-xs { 37 | padding-top: var(--spacing-xs); 38 | } 39 | 40 | .pt-sm { 41 | padding-top: var(--spacing-sm); 42 | } 43 | 44 | .pt-md { 45 | padding-top: var(--spacing-md); 46 | } 47 | 48 | .pt-lg { 49 | padding-top: var(--spacing-lg); 50 | } 51 | 52 | .pt-xl { 53 | padding-top: var(--spacing-xl); 54 | } 55 | 56 | /* Padding - Bottom only */ 57 | .pb-xs { 58 | padding-bottom: var(--spacing-xs); 59 | } 60 | 61 | .pb-sm { 62 | padding-bottom: var(--spacing-sm); 63 | } 64 | 65 | .pb-md { 66 | padding-bottom: var(--spacing-md); 67 | } 68 | 69 | .pb-lg { 70 | padding-bottom: var(--spacing-lg); 71 | } 72 | 73 | .pb-xl { 74 | padding-bottom: var(--spacing-xl); 75 | } 76 | 77 | /* Padding - Left only */ 78 | .pl-xs { 79 | padding-left: var(--spacing-xs); 80 | } 81 | 82 | .pl-sm { 83 | padding-left: var(--spacing-sm); 84 | } 85 | 86 | .pl-md { 87 | padding-left: var(--spacing-md); 88 | } 89 | 90 | .pl-lg { 91 | padding-left: var(--spacing-lg); 92 | } 93 | 94 | .pl-xl { 95 | padding-left: var(--spacing-xl); 96 | } 97 | 98 | /* Padding - Right only */ 99 | .pr-xs { 100 | padding-right: var(--spacing-xs); 101 | } 102 | 103 | .pr-sm { 104 | padding-right: var(--spacing-sm); 105 | } 106 | 107 | .pr-md { 108 | padding-right: var(--spacing-md); 109 | } 110 | 111 | .pr-lg { 112 | padding-right: var(--spacing-lg); 113 | } 114 | 115 | .pr-xl { 116 | padding-right: var(--spacing-xl); 117 | } 118 | 119 | /* Padding - Vertical (Top and Bottom) */ 120 | .py-xs { 121 | padding-top: var(--spacing-xs); 122 | padding-bottom: var(--spacing-xs); 123 | } 124 | 125 | .py-sm { 126 | padding-top: var(--spacing-sm); 127 | padding-bottom: var(--spacing-sm); 128 | } 129 | 130 | .py-md { 131 | padding-top: var(--spacing-md); 132 | padding-bottom: var(--spacing-md); 133 | } 134 | 135 | .py-lg { 136 | padding-top: var(--spacing-lg); 137 | padding-bottom: var(--spacing-lg); 138 | } 139 | 140 | .py-xl { 141 | padding-top: var(--spacing-xl); 142 | padding-bottom: var(--spacing-xl); 143 | } 144 | 145 | /* Padding - Horizontal (Left and Right) */ 146 | .px-xs { 147 | padding-left: var(--spacing-xs); 148 | padding-right: var(--spacing-xs); 149 | } 150 | 151 | .px-sm { 152 | padding-left: var(--spacing-sm); 153 | padding-right: var(--spacing-sm); 154 | } 155 | 156 | .px-md { 157 | padding-left: var(--spacing-md); 158 | padding-right: var(--spacing-md); 159 | } 160 | 161 | .px-lg { 162 | padding-left: var(--spacing-lg); 163 | padding-right: var(--spacing-lg); 164 | } 165 | 166 | .px-xl { 167 | padding-left: var(--spacing-xl); 168 | padding-right: var(--spacing-xl); 169 | } 170 | 171 | /* Margin Utilities */ 172 | 173 | /* All sides margin */ 174 | .m-xs { 175 | margin: var(--spacing-xs); 176 | } 177 | 178 | .m-sm { 179 | margin: var(--spacing-sm); 180 | } 181 | 182 | .m-md { 183 | margin: var(--spacing-md); 184 | } 185 | 186 | .m-lg { 187 | margin: var(--spacing-lg); 188 | } 189 | 190 | .m-xl { 191 | margin: var(--spacing-xl); 192 | } 193 | 194 | /* Margin - Top only */ 195 | .mt-xs { 196 | margin-top: var(--spacing-xs); 197 | } 198 | 199 | .mt-sm { 200 | margin-top: var(--spacing-sm); 201 | } 202 | 203 | .mt-md { 204 | margin-top: var(--spacing-md); 205 | } 206 | 207 | .mt-lg { 208 | margin-top: var(--spacing-lg); 209 | } 210 | 211 | .mt-xl { 212 | margin-top: var(--spacing-xl); 213 | } 214 | 215 | /* Margin - Bottom only */ 216 | .mb-xs { 217 | margin-bottom: var(--spacing-xs); 218 | } 219 | 220 | .mb-sm { 221 | margin-bottom: var(--spacing-sm); 222 | } 223 | 224 | .mb-md { 225 | margin-bottom: var(--spacing-md); 226 | } 227 | 228 | .mb-lg { 229 | margin-bottom: var(--spacing-lg); 230 | } 231 | 232 | .mb-xl { 233 | margin-bottom: var(--spacing-xl); 234 | } 235 | 236 | /* Margin - Left only */ 237 | .ml-xs { 238 | margin-left: var(--spacing-xs); 239 | } 240 | 241 | .ml-sm { 242 | margin-left: var(--spacing-sm); 243 | } 244 | 245 | .ml-md { 246 | margin-left: var(--spacing-md); 247 | } 248 | 249 | .ml-lg { 250 | margin-left: var(--spacing-lg); 251 | } 252 | 253 | .ml-xl { 254 | margin-left: var(--spacing-xl); 255 | } 256 | 257 | /* Margin - Right only */ 258 | .mr-xs { 259 | margin-right: var(--spacing-xs); 260 | } 261 | 262 | .mr-sm { 263 | margin-right: var(--spacing-sm); 264 | } 265 | 266 | .mr-md { 267 | margin-right: var(--spacing-md); 268 | } 269 | 270 | .mr-lg { 271 | margin-right: var(--spacing-lg); 272 | } 273 | 274 | .mr-xl { 275 | margin-right: var(--spacing-xl); 276 | } 277 | 278 | /* Margin - Vertical (Top and Bottom) */ 279 | .my-xs { 280 | margin-top: var(--spacing-xs); 281 | margin-bottom: var(--spacing-xs); 282 | } 283 | 284 | .my-sm { 285 | margin-top: var(--spacing-sm); 286 | margin-bottom: var(--spacing-sm); 287 | } 288 | 289 | .my-md { 290 | margin-top: var(--spacing-md); 291 | margin-bottom: var(--spacing-md); 292 | } 293 | 294 | .my-lg { 295 | margin-top: var(--spacing-lg); 296 | margin-bottom: var(--spacing-lg); 297 | } 298 | 299 | .my-xl { 300 | margin-top: var(--spacing-xl); 301 | margin-bottom: var(--spacing-xl); 302 | } 303 | 304 | /* Margin - Horizontal (Left and Right) */ 305 | .mx-xs { 306 | margin-left: var(--spacing-xs); 307 | margin-right: var(--spacing-xs); 308 | } 309 | 310 | .mx-sm { 311 | margin-left: var(--spacing-sm); 312 | margin-right: var(--spacing-sm); 313 | } 314 | 315 | .mx-md { 316 | margin-left: var(--spacing-md); 317 | margin-right: var(--spacing-md); 318 | } 319 | 320 | .mx-lg { 321 | margin-left: var(--spacing-lg); 322 | margin-right: var(--spacing-lg); 323 | } 324 | 325 | .mx-xl { 326 | margin-left: var(--spacing-xl); 327 | margin-right: var(--spacing-xl); 328 | } 329 | 330 | /* Auto margins for centering elements */ 331 | .m-auto { 332 | margin: auto; 333 | } 334 | 335 | .mt-auto { 336 | margin-top: auto; 337 | } 338 | 339 | .mb-auto { 340 | margin-bottom: auto; 341 | } 342 | 343 | .ml-auto { 344 | margin-left: auto; 345 | } 346 | 347 | .mr-auto { 348 | margin-right: auto; 349 | } 350 | 351 | /* No margin or padding (Zero utility) */ 352 | .m-0 { 353 | margin: 0; 354 | } 355 | 356 | .mt-0 { 357 | margin-top: 0; 358 | } 359 | 360 | .mb-0 { 361 | margin-bottom: 0; 362 | } 363 | 364 | .ml-0 { 365 | margin-left: 0; 366 | } 367 | 368 | .mr-0 { 369 | margin-right: 0; 370 | } 371 | 372 | .p-0 { 373 | padding: 0; 374 | } 375 | 376 | .pt-0 { 377 | padding-top: 0; 378 | } 379 | 380 | .pb-0 { 381 | padding-bottom: 0; 382 | } 383 | 384 | .pl-0 { 385 | padding-left: 0; 386 | } 387 | 388 | .pr-0 { 389 | padding-right: 0; 390 | } 391 | 392 | /* Responsive Spacing Utilities */ 393 | 394 | /* Small Devices (min-width: 576px) */ 395 | @media (min-width: 576px) { 396 | .sm-m-xs { 397 | margin: var(--spacing-xs); 398 | } 399 | 400 | .sm-m-sm { 401 | margin: var(--spacing-sm); 402 | } 403 | 404 | .sm-m-md { 405 | margin: var(--spacing-md); 406 | } 407 | 408 | .sm-m-lg { 409 | margin: var(--spacing-lg); 410 | } 411 | 412 | .sm-m-xl { 413 | margin: var(--spacing-xl); 414 | } 415 | 416 | .sm-p-xs { 417 | padding: var(--spacing-xs); 418 | } 419 | 420 | .sm-p-sm { 421 | padding: var(--spacing-sm); 422 | } 423 | 424 | .sm-p-md { 425 | padding: var(--spacing-md); 426 | } 427 | 428 | .sm-p-lg { 429 | padding: var(--spacing-lg); 430 | } 431 | 432 | .sm-p-xl { 433 | padding: var(--spacing-xl); 434 | } 435 | } 436 | 437 | /* Medium Devices (min-width: 768px) */ 438 | @media (min-width: 768px) { 439 | .md-m-xs { 440 | margin: var(--spacing-xs); 441 | } 442 | 443 | .md-m-sm { 444 | margin: var(--spacing-sm); 445 | } 446 | 447 | .md-m-md { 448 | margin: var(--spacing-md); 449 | } 450 | 451 | .md-m-lg { 452 | margin: var(--spacing-lg); 453 | } 454 | 455 | .md-m-xl { 456 | margin: var(--spacing-xl); 457 | } 458 | 459 | .md-p-xs { 460 | padding: var(--spacing-xs); 461 | } 462 | 463 | .md-p-sm { 464 | padding: var(--spacing-sm); 465 | } 466 | 467 | .md-p-md { 468 | padding: var(--spacing-md); 469 | } 470 | 471 | .md-p-lg { 472 | padding: var(--spacing-lg); 473 | } 474 | 475 | .md-p-xl { 476 | padding: var(--spacing-xl); 477 | } 478 | } 479 | 480 | /* Large Devices (min-width: 992px) */ 481 | @media (min-width: 992px) { 482 | .lg-m-xs { 483 | margin: var(--spacing-xs); 484 | } 485 | 486 | .lg-m-sm { 487 | margin: var(--spacing-sm); 488 | } 489 | 490 | .lg-m-md { 491 | margin: var(--spacing-md); 492 | } 493 | 494 | .lg-m-lg { 495 | margin: var(--spacing-lg); 496 | } 497 | 498 | .lg-m-xl { 499 | margin: var(--spacing-xl); 500 | } 501 | 502 | .lg-p-xs { 503 | padding: var(--spacing-xs); 504 | } 505 | 506 | .lg-p-sm { 507 | padding: var(--spacing-sm); 508 | } 509 | 510 | .lg-p-md { 511 | padding: var(--spacing-md); 512 | } 513 | 514 | .lg-p-lg { 515 | padding: var(--spacing-lg); 516 | } 517 | 518 | .lg-p-xl { 519 | padding: var(--spacing-xl); 520 | } 521 | } 522 | 523 | /* Extra Large Devices (min-width: 1200px) */ 524 | @media (min-width: 1200px) { 525 | .xl-m-xs { 526 | margin: var(--spacing-xs); 527 | } 528 | 529 | .xl-m-sm { 530 | margin: var(--spacing-sm); 531 | } 532 | 533 | .xl-m-md { 534 | margin: var(--spacing-md); 535 | } 536 | 537 | .xl-m-lg { 538 | margin: var(--spacing-lg); 539 | } 540 | 541 | .xl-m-xl { 542 | margin: var(--spacing-xl); 543 | } 544 | 545 | .xl-p-xs { 546 | padding: var(--spacing-xs); 547 | } 548 | 549 | .xl-p-sm { 550 | padding: var(--spacing-sm); 551 | } 552 | 553 | .xl-p-md { 554 | padding: var(--spacing-md); 555 | } 556 | 557 | .xl-p-lg { 558 | padding: var(--spacing-lg); 559 | } 560 | 561 | .xl-p-xl { 562 | padding: var(--spacing-xl); 563 | } 564 | } -------------------------------------------------------------------------------- /src/utilities/_typography.css: -------------------------------------------------------------------------------- 1 | /* _typography.css */ 2 | 3 | .text-left { 4 | text-align: left; 5 | } 6 | 7 | .text-right { 8 | text-align: right; 9 | } 10 | 11 | .text-center { 12 | text-align: center; 13 | } 14 | 15 | .font-sm { 16 | font-size: var(--font-size-sm); 17 | } 18 | 19 | .font-lg { 20 | font-size: var(--font-size-lg); 21 | } -------------------------------------------------------------------------------- /src/utilities/_visibility.css: -------------------------------------------------------------------------------- 1 | /* _visibility.css */ 2 | 3 | .hidden { 4 | display: none; 5 | } 6 | 7 | .visible { 8 | display: block; 9 | } 10 | 11 | .invisible { 12 | visibility: hidden; 13 | } --------------------------------------------------------------------------------