├── FUNDING.yml
├── fonts
    └── terminal.ttf
├── img
    ├── terminalize.jpg
    └── terminalize.svg
├── LICENSE
├── README.md
├── css
    ├── terminalize.min.css
    └── terminalize.css
└── index.html


/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: phuet
2 | 


--------------------------------------------------------------------------------
/fonts/terminal.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pabletos/terminalize/HEAD/fonts/terminal.ttf


--------------------------------------------------------------------------------
/img/terminalize.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pabletos/terminalize/HEAD/img/terminalize.jpg


--------------------------------------------------------------------------------
/img/terminalize.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.88 39.88"><defs><style>.cls-1,.cls-2,.cls-3{stroke:#6abd45;stroke-miterlimit:10;}.cls-2{fill:#fff;}.cls-3{fill:#6abd45;}</style></defs><rect class="cls-1" x="0.5" y="0.5" width="38.88" height="38.88"/><line class="cls-2" x1="0.5" y1="5.93" x2="39.38" y2="5.93"/><line class="cls-2" x1="31.87" y1="0.06" x2="31.87" y2="5.93"/><line class="cls-3" x1="34.4" y1="4.48" x2="37.33" y2="1.91"/><line class="cls-3" x1="34.4" y1="1.91" x2="37.33" y2="4.48"/><path class="cls-3" d="M17.93,12.11H14.1a3.06,3.06,0,0,0-1.9.39c-.28.26-.42,1.05-.43,2.37l0,.42H9.4V10.63h22v4.66H29v-.42c0-1.32-.16-2.11-.44-2.37a3,3,0,0,0-1.9-.39H22.84V28.63a6.94,6.94,0,0,0,.37,2.55,5.05,5.05,0,0,0,2.29.42h.28V33H15V31.61h.29c1.29-.08,2.06-.25,2.29-.52a4.67,4.67,0,0,0,.36-2.43Z"/></svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Pablo Huet
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # terminalize
 2 | <p align="center">
 3 |   <img src="https://raw.githubusercontent.com/pabletos/terminalize/main/img/terminalize.svg" alt="Terminalize logo" width="250">
 4 | </p>
 5 | <p>
 6 | <a 
 7 |   href='https://github.com/pabletos/terminalize/releases/tag/1.0'
 8 |   target='_blank'
 9 |   rel="noreferrer"
10 | >
11 |   <img src='https://img.shields.io/badge/version-1.0-green?logo=github' border='0' alt='latest release' />
12 | </a>
13 | <a 
14 |   href='https://ko-fi.com/B0B1PYK0W'
15 |   target='_blank'
16 |   rel="noreferrer"
17 | >
18 |   <img height='32' style={{border:'0px', height:'36px'}} src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' />
19 | </a>
20 | </p>
21 | 
22 | Terminalize is <b>a simple and lightweight CSS3 micro-framework</b> for doing terminal-like interfaces. [You can check a live version with examples here](https://terminalize.pablohuet.com/)
23 | 
24 | ## Motivation
25 | 
26 | Terminalize was, in his humble beginnings, an old personal website I did based on a old codepen.
27 | 
28 | The main purpose of that website, at that time, was only to show my former CSS and web development skills. So I also created a blog with curious posts about code and projects.
29 | 
30 | But as I discovered not so many time later, the big majority of devices screens at that time showed the website too blurry and out of focus. So I had to discard that design and create a new website from scratch.
31 | 
32 | Some time ago I re-discovered this project buried in my files and decided to transform it in a some kind of micro-css framework for quick terminal style alike websites.
33 | 
34 | ## Features
35 | 
36 | * Default and alternate styles for most HTML tags
37 | * Fully styled forms and form inputs including buttons and selects
38 | * **NEW**: Customizable Select Elements (2025) - Modern styling with full control over dropdown appearance
39 | * Responsive design using `.panel`, `.row` and `.col` classes
40 | * Unique styled code blocks
41 | * Optional animations, filters and much more to obtain a retro terminal style
42 | 
43 | ## How To use it
44 | 
45 | I designed **Terminalize** to be used with any other framework or existing style, so you only need to put a class `.terminalize` in the parent to have all the children correctly styled. Then inside you have to use a first `div` element with a `.screen` class to correctly apply the theme background color.
46 | 
47 | ## Select Elements
48 | 
49 | Terminalize supports both traditional and modern customizable select elements:
50 | 
51 | ### Traditional Select (All Browsers)
52 | ```html
53 | <div class="select">
54 |     <select>
55 |         <option value="">Choose option...</option>
56 |         <option value="value1">Option 1</option>
57 |         <option value="value2">Option 2</option>
58 |     </select>
59 | </div>
60 | ```
61 | 
62 | ### Customizable Select (Chrome 130+, Edge 130+)
63 | ```html
64 | <select class="customizable">
65 |     <button>
66 |         <selectedcontent></selectedcontent>
67 |     </button>
68 |     <option value="">Choose option...</option>
69 |     <option value="value1">Option 1</option>
70 |     <option value="value2">Option 2</option>
71 | </select>
72 | ```
73 | 
74 | #### Customizable Select Classes:
75 | - `.customizable` - Base class for new select styling
76 | - `.compact` - Smaller padding and font size
77 | - `.thick-border` - 2px border width
78 | - `.rounded` - Rounded corners (optional for softer look)
79 | 
80 | #### Browser Support:
81 | - ✅ Chrome 130+
82 | - ✅ Edge 130+ 
83 | - 🚧 Firefox (in development)
84 | - 🚧 Safari (in development)
85 | 
86 | **Note**: Customizable selects provide progressive enhancement - they fall back gracefully to traditional styling in unsupported browsers while maintaining full functionality.
87 | 


--------------------------------------------------------------------------------
/css/terminalize.min.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:'Terminal';src:url(../fonts/terminal.ttf)}.terminalize{--color-primary:#00c800;--color-secondary:#000000;--color-tertiary:#007800;--color-quaternary:#001900;--border-style:solid;--border-style-secondary:dashed;--font:'Terminal', monospace;--post-width:38rem;--filter:sepia(100%) hue-rotate(90deg);--width-sd:640px;--width-hd:1280px;--width-fhd:1920px;--width-uhd:3840px;font-family:var(--font);font-size:1rem;color:var(--color-primary);text-shadow:var(--color-primary) 0 -.1rem 2rem;box-sizing:border-box}.terminalize .screen{background-color:var(--color-secondary)}.terminalize *,.terminalize *:before,.terminalize *:after{box-sizing:inherit}.terminalize img{-webkit-filter:var(--filter);filter:var(--filter)}.terminalize p{text-align:justify}.terminalize.theme-blue{--color-primary:#04d9ff;--color-tertiary:#106877;--color-quaternary:#050611;--filter:sepia(100%) hue-rotate(180deg)}.terminalize.theme-orange{--color-primary:#f0bf25;--color-secondary:#2c2013;--color-tertiary:#8e7117;--color-quaternary:#110c05;--filter:sepia(100%)}.terminalize input,.terminalize textarea,.terminalize button,.terminalize a{color:var(--color-primary);text-shadow:var(--color-primary) 0 -.1rem 2rem}.terminalize a:hover{color:var(--color-secondary);background-color:var(--color-primary);outline:none}.terminalize textarea::placeholder,.terminalize input::placeholder{color:var(--color-tertiary)}.terminalize ::-moz-selection{color:var(--color-secondary);background:var(--color-primary)}.terminalize ::selection{color:var(--color-secondary);background:var(--color-primary)}.terminalize [contenteditable]:focus{outline:0 solid #fff0}.terminalize .table-wrapper{max-width:100%;overflow-x:auto}.terminalize .table-wrapper{margin:1rem 0}.terminalize table{margin:1rem;border-collapse:collapse}.terminalize .table-wrapper table{margin:0 auto}.terminalize table.bordered{border:1px var(--border-style) var(--color-primary)}.terminalize table thead,.terminalize table tfoot{background:var(--color-primary);color:var(--color-secondary);height:2rem;border-top:1px var(--border-style) var(--color-primary);border-bottom:1px var(--border-style) var(--color-primary)}.terminalize table.simple thead,.terminalize table.simple tfoot{background:var(--color-secondary);color:var(--color-primary);height:2rem}.terminalize table.simple thead{border-top:1px var(--border-style) var(--color-primary);border-bottom:1px var(--border-style) var(--color-primary)}.terminalize table.simple tfoot{border-top:1px var(--border-style) var(--color-primary);border-bottom:1px var(--border-style) var(--color-primary)}.terminalize table tr th,.terminalize table tr td{text-align:left;padding:.5rem 1rem;border:none}.terminalize table.highlight tbody tr:hover{color:var(--color-secondary);background:var(--color-primary);cursor:pointer;font-weight:700}.terminalize table tbody tr.highlighted:hover{color:var(--color-primary);background-color:var(--color-secondary);font-weight:400}.terminalize table tbody tr.highlighted{color:var(--color-secondary);background:var(--color-primary);font-weight:700}.terminalize .form-group{padding:1rem;border:1px var(--border-style) var(--color-primary);margin-top:-1px}.terminalize blockquote{white-space:pre-line;display:block;unicode-bidi:embed;color:var(--color-tertiary);border-left:1px solid var(--color-tertiary);padding:.5rem 0 1rem 1rem;text-align:left}.terminalize pre.code{background-color:var(--color-quaternary);color:var(--color-primary);max-width:var(--post-width);margin:auto;padding:.5rem 1rem;border-radius:5px;line-height:1.30769231;position:relative;overflow:hidden;max-width:100%;white-space:break-spaces}.terminalize pre.code div.title{position:absolute;top:0;left:0;white-space:normal;border-radius:5px 0 5px 0;padding:.3rem 1rem;background-color:var(--color-primary);color:var(--color-quaternary);font-family:var(--font)}.terminalize pre.code code{font-family:var(--font);overflow:auto}.terminalize pre.code div.title.right{left:unset;right:0;border-radius:0 5px 0 5px}.terminalize .post{max-width:var(--post-width);margin:auto;text-align:justify}.terminalize span.cursor{height:1em;border-left:.15em solid var(--color-primary)}.terminalize span.cursor.blink{animation:blink-caret .75s step-end infinite}.terminalize .panel{display:flex;position:relative;overflow:hidden;flex:1;max-width:1200px;max-height:100%;margin:1rem auto;flex-direction:column;justify-content:space-between;border:1px var(--border-style) var(--color-primary)}.terminalize .panel.fluid{max-height:none}.terminalize .panel .panel-header{overflow:hidden;display:flex;flex-direction:row;justify-content:space-around;align-items:center;text-align:left;padding:0;border-bottom:1px var(--border-style) var(--color-primary);min-height:2rem}.terminalize .panel .panel-header>*{padding:.5rem 1rem}.terminalize .panel .panel-header .controls{padding:0;flex:0;display:flex;flex-direction:row;border-left:1px var(--border-style) var(--color-primary)}.terminalize .panel .panel-header .controls .control{padding:.5rem;padding:.5rem;min-width:1.5rem;text-align:center;display:flex;align-items:center}.terminalize .panel .panel-header .controls .control:hover{cursor:pointer;background-color:var(--color-primary);color:var(--color-secondary)}.terminalize .panel .panel-body{overflow-y:auto;padding:1rem}.terminalize .panel .panel-footer{overflow:hidden;display:flex;flex-direction:row;justify-content:space-around;align-items:center;text-align:right;border-top:1px var(--border-style) var(--color-primary);min-height:2rem}.terminalize .panel .panel-footer>*{padding:.5rem 1rem}.terminalize .rounded{border-radius:8px}.terminalize .screen{display:flex;flex-direction:row;justify-content:space-around;align-items:center;width:100%;height:100%;overflow:hidden}.terminalize .row{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:1rem}.terminalize .col{flex:1;position:relative;max-width:100%}.terminalize .type{overflow:hidden;white-space:nowrap;animation:enlarge 3.5s steps(40,end)}.terminalize{scrollbar-width:thin;scrollbar-color:var(--color-primary) var(--color-secondary)}.terminalize ::-webkit-scrollbar{width:.8rem}.terminalize ::-webkit-scrollbar-track{background:var(--color-secondary)}.terminalize ::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:8px;border:2px var(--border-style) var(--color-tertiary)}.terminalize .a-s{align-items:flex-start!important}.terminalize .a-e{align-items:flex-end!important}.terminalize .a-c{align-items:center!important}.terminalize .a-auto{align-items:center!important}.terminalize .f-0{flex:0!important}.terminalize .j-c{justify-content:center}.terminalize .j-l{justify-content:left}.terminalize .j-r{justify-content:right}.terminalize .j-c{justify-content:space-around}.terminalize .j-b{justify-content:space-between}.terminalize .w-100{width:100%}.terminalize .t-l{text-align:left!important}.terminalize .t-r{text-align:right!important}.terminalize .t-c{text-align:center!important}.terminalize .mw-100{max-width:100%!important}.terminalize .mw-sd{max-width:var(--width-sd)!important}.terminalize .mw-hd{max-width:var(--width-hd)!important}.terminalize .mw-fhd{max-width:var(--width-fhd)!important}.terminalize .mw-uhd{max-width:var(--width-uhd)!important}.terminalize .p-0{padding:0rem!important}.terminalize .m-0{margin:0rem!important}.terminalize .p-1{padding:1rem!important}.terminalize .m-1{margin:1rem!important}.terminalize .p-2{padding:2rem!important}.terminalize .m-2{margin:2rem!important}.terminalize .p-3{padding:3rem!important}.terminalize .m-3{margin:3rem!important}.terminalize .p-4{padding:4rem!important}.terminalize .m-4{margin:4rem!important}.terminalize .checkbox{display:block;position:relative;padding-left:1.8rem;margin:1rem 0;cursor:pointer;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.terminalize .checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.terminalize .checkmark{border:1px var(--border-style) var(--color-primary);position:absolute;top:0;left:0;height:16px;width:16px;background-color:#fff0;box-sizing:border-box!important}.terminalize .checkbox:hover input~.checkmark{background-color:var(--color-secondary)}.terminalize .checkbox .checkmark>span{background-color:#fff0;position:absolute;height:10px;width:10px;left:2px;top:2px}.terminalize .checkbox input:checked~.checkmark>span{background-color:var(--color-primary)}.terminalize .checkmark:after{content:"";position:absolute;display:none}.terminalize .checkbox input:checked~.checkmark:after{display:block}.terminalize input[type=text],.terminalize input[type=number]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.terminalize input[type=text],.terminalize input[type=number]{display:block;position:relative;margin:.5rem 0;font-size:1rem;outline:1px var(--border-style) var(--color-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:0;padding:1rem;display:inline-block;white-space:normal;background:none;line-height:1;color:var(--color-primary);background-color:var(--color-secondary);font-family:var(--font)}.terminalize textarea{-webkit-appearance:none;-moz-appearance:none;min-height:10rem;min-width:10rem;width:100%;appearance:none;padding:1rem;font-size:1rem;border:1px var(--border-style) var(--color-primary);background-color:var(--color-secondary);font-family:var(--font);color:var(--color-primary)}.terminalize textarea:focus-visible{outline:none}.terminalize .inverse{background-color:var(--color-primary)!important;color:var(--color-secondary)!important;font-weight:700}.terminalize .b-alt{border-style:var(--border-style-secondary)!important}.terminalize .b-none{border:none!important}.terminalize progress{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:3px var(--border-style) var(--color-secondary);box-shadow:1px -1px 0 var(--color-primary),-1px 1px 0 var(--color-primary),-1px -1px 0 var(--color-primary),1px 1px 0 var(--color-primary)}.terminalize ::-webkit-progress-bar{background-color:var(--color-secondary)}.terminalize ::-moz-progress-bar{background-color:var(--color-secondary)}.terminalize ::-webkit-progress-value{background-color:var(--color-primary)}.terminalize ::-moz-progress-value{background-color:var(--color-primary)}.terminalize .btn{display:inline-block;border:1px var(--border-style) var(--color-primary);padding:.8rem 1rem;min-width:8rem;text-align:center}.terminalize .btn.active{background-color:var(--color-primary);color:var(--color-secondary);font-weight:700}.terminalize .btn:focus,.terminalize .btn:hover,.terminalize .btn-primary:focus,.terminalize .btn:active,.terminalize .btn-primary:active{background-color:var(--color-primary);color:var(--color-secondary);outline:none;cursor:pointer;user-select:none;font-weight:700}.terminalize .btn.active:focus,.terminalize .btn.active:hover,.terminalize .btn.active-primary:focus,.terminalize .btn.active:active,.terminalize .btn.active:active{background-color:var(--color-secondary)!important;color:var(--color-primary)!important;font-weight:400}.terminalize .select{border:1px var(--border-style) var(--color-primary);height:30px;overflow:hidden;max-width:15rem;position:relative}.terminalize .select.no-border{border:0}.terminalize select{width:100%;text-shadow:var(--color-primary) 0 -.1rem 2rem;font-size:1rem;background:#fff0;color:var(--color-primary);font-family:'Terminal';border:none;font-size:14px;height:30px;padding:5px;padding-right:2rem}.terminalize select:focus{outline:none}.terminalize select.customizable,.terminalize select.customizable::picker(select){appearance:base-select}.terminalize select.customizable{border-radius:0;border:1px var(--border-style) var(--color-primary);background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font);font-size:1rem;padding:.8rem 1rem;min-height:2.5rem;position:relative;text-shadow:var(--color-primary) 0 -.1rem 2rem;transition:all 0.3s ease;cursor:pointer}.terminalize select.customizable:hover,.terminalize select.customizable:focus{background-color:var(--color-quaternary);outline:none}.terminalize select.customizable::picker-icon{color:var(--color-primary);font-size:1.2rem;transition:0.3s transform ease;content:"▼";position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.terminalize select.customizable:open::picker-icon{transform:translateY(-50%) rotate(180deg)}.terminalize select.customizable::picker(select){border:1px var(--border-style) var(--color-primary);border-radius:0;background-color:var(--color-secondary);padding:0;margin-top:2px;box-shadow:2px 2px 0 var(--color-tertiary),4px 4px 0 var(--color-quaternary);opacity:0;transition:all 0.3s ease allow-discrete}.terminalize select.customizable::picker(select):popover-open{opacity:1}@starting-style{.terminalize select.customizable::picker(select):popover-open{opacity:0;transform:translateY(-10px)}}.terminalize select.customizable option{display:flex;align-items:center;padding:.8rem 1rem;border:none;border-bottom:1px var(--border-style-secondary) var(--color-tertiary);background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font);font-size:1rem;transition:all 0.2s ease;cursor:pointer;text-shadow:var(--color-primary) 0 -.1rem 2rem}.terminalize select.customizable option:last-of-type{border-bottom:none}.terminalize select.customizable option:hover,.terminalize select.customizable option:focus{background-color:var(--color-primary);color:var(--color-secondary);font-weight:700;text-shadow:none}.terminalize select.customizable option:checked{background-color:var(--color-primary);font-weight:700}.terminalize select.customizable option::checkmark{content:"■";color:var(--color-primary);font-size:.8rem}.terminalize select.customizable option:checked::checkmark{color:var(--color-secondary)}.terminalize select.customizable option:hover::checkmark{color:var(--color-secondary)}.terminalize select.customizable selectedcontent{display:flex;align-items:center;font-family:var(--font);color:var(--color-primary);text-shadow:var(--color-primary) 0 -.1rem 2rem}.terminalize select.customizable.compact{padding:.5rem .8rem;min-height:2rem;font-size:.9rem}.terminalize select.customizable.compact option{padding:.5rem .8rem;font-size:.9rem}.terminalize select.customizable.thick-border{border-width:2px}.terminalize select.customizable.thick-border::picker(select){border-width:2px}.terminalize select.customizable.rounded{border-radius:4px}.terminalize select.customizable.rounded::picker(select){border-radius:4px}.terminalize.theme-blue select.customizable::picker-icon,.terminalize.theme-orange select.customizable::picker-icon{color:var(--color-primary)}.terminalize .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.grid>.panel{margin:0}@keyframes blink-caret{from,to{border-color:#fff0}50%{border-color:var(--color-primary)}}@keyframes enlarge{from{width:0}to{width:100%}}.scanlines{position:relative;overflow:hidden}.scanlines:before,.scanlines:after{display:block;pointer-events:none;content:"";position:absolute}.scanlines:before{width:100%;height:5px;z-index:2147483649;background:rgb(0 255 0 / .3);opacity:.75;-webkit-animation:scanline 6s linear infinite;animation:scanline 6s linear infinite}.scanlines:after{top:0;right:0;bottom:0;left:0;z-index:2147483648;background:-webkit-linear-gradient(top,transparent 50%,rgb(0 80 0 / .3) 51%);background:linear-gradient(to bottom,transparent 50%,rgb(0 80 0 / .3) 51%);background-size:100% .5vh;-webkit-animation:scanlines 1s steps(60) infinite;animation:scanlines 1s steps(60) infinite}@-webkit-keyframes scanline{0%{-webkit-transform:translate3d(0,200000%,0);transform:translate3d(0,200000%,0)}}@keyframes scanline{0%{-webkit-transform:translate3d(0,200000%,0);transform:translate3d(0,200000%,0)}}@-webkit-keyframes scanlines{0%{background-position:0 50%}}@keyframes scanlines{0%{background-position:0 50%}}.blink{animation:blink 1s infinite}@keyframes blink{to{opacity:0}}@media only screen and (max-width:1024px){.terminalize pre.code{padding:0 0 0 .5rem;max-width:100%;margin:0}.terminalize .p-1{padding:.5rem!important}.terminalize .m-1{margin:.5rem!important}.terminalize .p-2{padding:1rem!important}.terminalize .m-2{margin:1rem!important}.terminalize .p-3{padding:1.5rem!important}.terminalize .m-3{margin:1.5rem!important}.terminalize .p-4{padding:2rem!important}.terminalize .m-4{margin:2rem!important}.b-hd{border:none!important}}@media only screen and (max-width:768px){.b-sd{border:none!important}.terminalize blockquote{margin:0}.terminalize .col{display:flex;flex-direction:column;align-items:center;padding:0;flex:1;position:relative}.terminalize pre.code{padding:0 0 0 .5rem;max-width:100%;margin:0}.terminalize .panel .panel-body{padding:.4rem}.terminalize .row{flex-direction:column;align-items:center}.terminalize table{margin:1rem 0rem}.terminalize .a-auto{align-items:flex-start!important}.terminalize .p-1{padding:.25rem!important}.terminalize .m-1{margin:.25rem!important}.terminalize .p-2{padding:.5rem!important}.terminalize .m-2{margin:.5rem!important}.terminalize .p-3{padding:.75rem!important}.terminalize .m-3{margin:.75rem!important}.terminalize .p-4{padding:1rem!important}.terminalize .m-4{margin:1rem!important}}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html lang="en">
  2 | 	<head>
  3 | 		<title>Terminalize: A CSS terminal micro-framework</title>
  4 | 		<meta charset="utf-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 | 
  7 | 		<meta
  8 | 			name="description"
  9 | 			content="Terminalize is a simple and lightweight CSS3 micro-framework for doing terminal-like interfaces"
 10 | 		/>
 11 | 		<meta property="og:title" content="Terminalize: A CSS terminal micro-framework" />
 12 | 		<meta property="og:description" content="Terminalize is a simple and lightweight CSS3 micro-framework for doing terminal-like interfaces" />
 13 | 		<meta property="og:image" content="https://terminalize.pablohuet.com/img/terminalize.jpg" />
 14 | 		<meta property="og:url" content="http://terminalize.pablohuet.com" />
 15 | 		<meta property="og:type" content="website" />
 16 | 		<meta property="og:site_name" content="Terminalize" />
 17 | 		<meta name="twitter:creator" content="@Pabletos"/>
 18 | 		<meta name="twitter:image" content="https://terminalize.pablohuet.com/img/terminalize.jpg">
 19 | 		<meta name="twitter:card" content="summary_large_image"/>
 20 | 		<meta name="twitter:title" content="Terminalize: A CSS terminal micro-framework"/>
 21 | 		<meta name="twitter:description" content="Terminalize is a simple and lightweight CSS3 micro-framework for doing terminal-like interfaces"/>
 22 | 		<meta name="twitter:image" content="https://terminalize.pablohuet.com/img/terminalize.jpg"/>
 23 | 		<meta name="author" content="Pablo Huet" />
 24 | 		<meta name="keywords" content="terminal, css, framework, micro-framework, web development, ui, user interface, terminal style, retro, vintage, old school" />
 25 | 		<meta name="language" content="English" />
 26 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 27 | 		<link rel="icon" href="favicon.svg" />	
 28 | 		<link
 29 | 			rel="stylesheet"
 30 | 			href="css/terminalize.min.css"
 31 | 			type="text/css"
 32 | 			media="all"
 33 | 		/>
 34 | 		<link rel="canonical" href="http://terminalize.pablohuet.com" />
 35 | 		<style>
 36 | 			h2 {
 37 | 				font-size: 1.1rem;
 38 | 				margin: 0;
 39 | 			}
 40 | 			h1 {
 41 | 				font-size: 3rem;
 42 | 				margin: 1.5rem 0;
 43 | 			}
 44 | 			.panel.w-100.p-1 h3 {
 45 | 				margin-top: 0rem;
 46 | 			}
 47 | 			.panel.w-100.p-1 label {
 48 | 				margin-bottom: .5rem;
 49 | 			}
 50 | 			#select-theme {
 51 | 				min-width: 12rem;
 52 | 				border-top: 0;
 53 | 				border-bottom: 0;
 54 | 				border-right: 0;
 55 | 				border-radius: 0;
 56 | 			}
 57 | 			@media only screen and (max-width: 768px) {
 58 | 				#title {
 59 | 					display: none;
 60 | 				}
 61 | 				.btn {
 62 | 					margin: 0.5rem 0;
 63 | 				}
 64 | 				h2 {
 65 | 					font-size: 1rem;
 66 | 				}
 67 | 				h1 {
 68 | 					font-size: 2rem;
 69 | 					margin: 1rem 0;
 70 | 				}
 71 | 			}
 72 | 		</style>
 73 | 		<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
 74 | 		<script type="text/javascript">		
 75 | 			window.addEventListener('input', function (event) {
 76 | 				const terminalize = document.getElementsByClassName('terminalize')[0];
 77 | 				if (event.target.id === 'select-theme') {
 78 | 					if (event.target.value !== 'null') {
 79 | 						terminalize.className = 'terminalize ' + event.target.value;
 80 | 					} else {
 81 | 						terminalize.className = 'terminalize';
 82 | 					}
 83 | 				}
 84 | 			});
 85 | 			window.addEventListener('click', function (event) {
 86 | 				if (event.target.id === 'maximize') {
 87 | 					if (document.fullscreenElement) {
 88 | 						document.exitFullscreen();
 89 | 					} else {
 90 | 						document.querySelector('body').requestFullscreen();
 91 | 					}
 92 | 				}
 93 | 			})
 94 | 		</script>
 95 | 	</head>
 96 | 
 97 | 	<body
 98 | 		class="terminalize"
 99 | 		style="padding: 0rem; margin: 0rem; background: black"
100 | 	>
101 | 		<div class="screen scanlines">
102 | 			<div class="panel m-0 mw-fhd">
103 | 				<div class="panel-header">
104 | 					<div class="col a-s">
105 | 						<div class="row j-b a-auto w-100">
106 | 							<div id="title" class="type">This is Terminalize<span class="cursor blink"></span></div>
107 | 							<div style="margin-right: -1rem;" class="select no-border">
108 | 								<select id="select-theme" name="theme" class="customizable compact">
109 | 									<option selected value="null">Original theme</option>
110 | 									<option value="theme-blue">Blue theme</option>
111 | 									<option value="theme-orange">Orange theme</option>
112 | 								</select>
113 | 							</div>
114 | 						</div>
115 | 					</div>
116 | 					<div class="col controls">
117 | 						<div class="control">-</div>
118 | 						<div id="maximize" class="control">☐</div>
119 | 						<div class="control">X</div>
120 | 					</div>
121 | 				</div>
122 | 				<div class="panel-body p-3">
123 | 					<div class="panel fluid b-sd b-none">
124 | 						<div class="post t-c">
125 | 							<svg style="color: var(--color-primary); max-width: 8rem; margin: auto; display: block" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.88 39.88">
126 | 								<defs><style>.cls-1,.cls-2,.cls-3{stroke:currentColor;stroke-miterlimit:10;}.cls-2{fill:#fff;}.cls-3{fill:currentColor;}</style></defs>
127 | 								<rect fill="transparent" class="cls-1" x="0.5" y="0.5" width="38.88" height="38.88"/>
128 | 								<line class="cls-2" x1="0.5" y1="5.93" x2="39.38" y2="5.93"/>
129 | 								<line class="cls-2" x1="31.87" y1="0.06" x2="31.87" y2="5.93"/>
130 | 								<line class="cls-3" x1="34.4" y1="4.48" x2="37.33" y2="1.91"/>
131 | 								<line class="cls-3" x1="34.4" y1="1.91" x2="37.33" y2="4.48"/>
132 | 								<path class="cls-3" d="M17.93,12.11H14.1a3.06,3.06,0,0,0-1.9.39c-.28.26-.42,1.05-.43,2.37l0,.42H9.4V10.63h22v4.66H29v-.42c0-1.32-.16-2.11-.44-2.37a3,3,0,0,0-1.9-.39H22.84V28.63a6.94,6.94,0,0,0,.37,2.55,5.05,5.05,0,0,0,2.29.42h.28V33H15V31.61h.29c1.29-.08,2.06-.25,2.29-.52a4.67,4.67,0,0,0,.36-2.43Z"/>
133 | 							</svg>
134 | 							<h1>Terminalize</h1>
135 | 							<h2>CSS micro-framework for terminal style UIs</h2>
136 | 							<a 
137 | 								class="btn" 
138 | 								style="margin: 2rem auto; display: block; text-decoration: none; display: flex; justify-content: center; align-items: center; max-width: max-content; gap: 1.5rem;"
139 | 								href="https://github.com/pabletos/terminalize/releases"
140 | 								target="_blank"
141 | 							>
142 | 								<img 
143 | 									style="width: 2rem; filter: brightness(6.5) sepia(100%) hue-rotate(90deg);"
144 | 									src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/900px-Octicons-mark-github.svg.png?20180806170715">
145 | 								<span style="flex: 1;">Download from Github</span>
146 | 							</a>
147 | 						</div>
148 | 					</div>
149 | 					<div class="panel fluid b-none">
150 | 						<div class="panel-header inverse">
151 | 							<h2 class="col a-s">What is it?</h2>
152 | 						</div>
153 | 						<div class="panel-body">
154 | 							<div class="post">
155 | 								<p>
156 | 									Terminalize is a simple CSS3 micro-framework for doing
157 | 									terminal-like interfaces for the web or hybrid app
158 | 									projects.
159 | 								</p>
160 | 								<h3>Motivation</h3>
161 | 								<blockquote>
162 | 									when you don't create things, you become defined by your tastes rather than ability.
163 | 									your tastes only narrow & exclude people. 
164 | 									so create.
165 | 									
166 | 									- Why The Lucky Stiff
167 | 								</blockquote>
168 | 								<p>
169 | 									Terminalize was, in its humble beginnings, an old personal
170 | 									website I did based on a old codepen.
171 | 								</p>
172 | 								<p>
173 | 									The main purpose of that website, at that time, was only to
174 | 									show my former CSS and web development skills. So I also
175 | 									created a blog with curious posts about coding and projects.
176 | 								</p>
177 | 								<p>
178 | 									But as I soon discovered, the large majority
179 | 									of devices screens at the time showed the website too blurry
180 | 									and out of focus. So I had to discard that design and create a
181 | 									new website from scratch.
182 | 								</p>
183 | 								<p>
184 | 									Some time ago I re-discovered this project buried in my files
185 | 									and decided to transform it into some kind of micro-CSS
186 | 									framework for quick terminal style websites.
187 | 								</p>
188 | 								<p>- Pablo<span class="cursor blink"></span></p>
189 | 							</div>
190 | 						</div>
191 | 					</div>
192 | 					<div class="panel b-sd">
193 | 						<div class="panel-header inverse">
194 | 							<h2 class="col a-s">Customize</h2>
195 | 						</div>
196 | 						<div class="panel-body">
197 | 							<div class="row">
198 | 								<div class="col">
199 | 									<p>
200 | 										Terminalize uses few and easy to create 
201 | 										themes with only five base constants.
202 | 									</p>
203 | 									<p>
204 | 										You can also easily change font, border styles, and maximum
205 | 										width for your posts.
206 | 									</p>
207 | 								</div>
208 | 								<div class="col">
209 | 								<pre class="code">
210 | 								<div class="title">Orange theme (as seen on top)</div>
211 | 								<code>
212 | .terminalize.theme-orange {
213 |   --color-primary: #f0bf25;
214 |   --color-secondary: #2c2013;
215 |   --color-tertiary: #8e7117;
216 |   --color-quaternary: #110c05;
217 |   --filter: sepia(100%);
218 | }
219 | 								</code>
220 | 								</pre>
221 | 								</div>
222 | 
223 | 							</div>
224 | 						</div>
225 | 					</div>
226 | 					<div class="panel b-sd">
227 | 						<div class="panel-header inverse">
228 | 							<h2 class="col a-s">Code blocks</h2>
229 | 						</div>
230 | 						<div class="panel-body">
231 | 							<pre class="code">
232 | 							<div class="title" contenteditable="true">This text is editable! Try me!</div>
233 |                 <code contenteditable="true">
234 | function one(){
235 |   $.log("File");
236 | }
237 | 
238 | function two(){
239 |   $.log("File");
240 | }
241 | 
242 | function one(){
243 |   $.log("File");
244 | }
245 | 
246 | function two(){
247 |   $.log("File");
248 | }
249 |                 </code>
250 |               </pre>
251 | 						</div>
252 | 					</div>
253 | 					<div class="panel fluid b-sd">
254 | 						<div class="panel-header inverse">
255 | 							<h2 class="col a-s">Display your data</h2>
256 | 						</div>
257 | 						<div class="panel-body">
258 | 							<div class="row a-auto">
259 | 								<div class="table-wrapper col">
260 | 									<table>
261 | 										<thead>
262 | 											<tr>
263 | 												<th>Country</th>
264 | 												<th>Population</th>
265 | 												<th>Avaaz</th>
266 | 											</tr>
267 | 										</thead>
268 | 										<tbody>
269 | 											<tr>
270 | 												<td>Andorra</td>
271 | 												<td>85,000</td>
272 | 												<td>3,316</td>
273 | 											</tr>
274 | 											<tr>
275 | 												<td>Luxembourg</td>
276 | 												<td>498,000</td>
277 | 												<td>14,228</td>
278 | 											</tr>
279 | 											<tr>
280 | 												<td>France</td>
281 | 												<td>64,768,000</td>
282 | 												<td>1,827,517</td>
283 | 											</tr>
284 | 											<tr>
285 | 												<td>Belgium</td>
286 | 												<td>10,423,000</td>
287 | 												<td>292,530</td>
288 | 											</tr>
289 | 										</tbody>
290 | 										<tfoot>
291 | 											<tr>
292 | 												<td colspan="3"></td>
293 | 											</tr>
294 | 										</tfoot>
295 | 									</table>
296 | 								</div>
297 | 								<pre class="code col">
298 | 									<div class="title">Default table</div>
299 | <code>
300 | &lt;table>
301 |   &lt;thead>
302 |     &lt;tr>
303 |       &lt;th>Country&lt;/th>
304 |       &lt;th>Population&lt;/th>
305 |       &lt;th>Avaaz&lt;/th>
306 |     &lt;/tr>
307 |   &lt;/thead>
308 |   &lt;tbody>
309 |     &lt;!-- tr and td tags-->
310 |   &lt;/tbody>
311 |   &lt;tfoot>
312 |     &lt;tr>
313 |       &lt;td colspan="3">&lt;/td>
314 |     &lt;/tr>
315 |   &lt;/tfoot>
316 | &lt;/table>
317 | </code>
318 | 								</pre>
319 | 							</div>
320 | 							<div class="row a-auto" style="margin-top: 1rem;">
321 | 								<div class="table-wrapper col">
322 | 									<table class="simple bordered">
323 | 										<thead>
324 | 											<tr>
325 | 												<th>Country</th>
326 | 												<th>Population</th>
327 | 												<th>Avaaz</th>
328 | 											</tr>
329 | 										</thead>
330 | 										<tbody>
331 | 											<tr>
332 | 												<td>Andorra</td>
333 | 												<td>85,000</td>
334 | 												<td>3,316</td>
335 | 											</tr>
336 | 											<tr>
337 | 												<td>Luxembourg</td>
338 | 												<td>498,000</td>
339 | 												<td>14,228</td>
340 | 											</tr>
341 | 											<tr>
342 | 												<td>France</td>
343 | 												<td>64,768,000</td>
344 | 												<td>1,827,517</td>
345 | 											</tr>
346 | 											<tr>
347 | 												<td>Belgium</td>
348 | 												<td>10,423,000</td>
349 | 												<td>292,530</td>
350 | 											</tr>
351 | 										</tbody>
352 | 										<tfoot>
353 | 											<tr>
354 | 												<td colspan="3"></td>
355 | 											</tr>
356 | 										</tfoot>
357 | 									</table>
358 | 								</div>
359 | 								<pre class="code col">
360 | 									<div class="title">Simple bordered table</div>
361 | <code>
362 | &lt;table class="simple bordered">
363 |   &lt;thead>
364 |     &lt;tr>
365 |       &lt;th>Country&lt;/th>
366 |       &lt;th>Population&lt;/th>
367 |       &lt;th>Avaaz&lt;/th>
368 |     &lt;/tr>
369 |   &lt;/thead>
370 |   &lt;tbody>
371 |     &lt;!-- tr and td tags-->
372 |   &lt;/tbody>
373 |   &lt;tfoot>
374 |     &lt;tr>
375 |       &lt;td colspan="3">&lt;/td>
376 |     &lt;/tr>
377 |   &lt;/tfoot>
378 | &lt;/table>
379 | </code>
380 | 								</pre>
381 | 							</div>
382 | 							<div class="row a-auto" style="margin-top: 1rem;">
383 | 								<div class="table-wrapper col">
384 | 									<table class="highlight bordered">
385 | 										<thead>
386 | 											<tr>
387 | 												<th>Country</th>
388 | 												<th>Population</th>
389 | 												<th>Avaaz</th>
390 | 											</tr>
391 | 										</thead>
392 | 										<tbody>
393 | 											<tr>
394 | 												<td>Andorra</td>
395 | 												<td>85,000</td>
396 | 												<td>3,316</td>
397 | 											</tr>
398 | 											<tr class="highlighted">
399 | 												<td>Luxembourg</td>
400 | 												<td>498,000</td>
401 | 												<td>14,228</td>
402 | 											</tr>
403 | 											<tr>
404 | 												<td>France</td>
405 | 												<td>64,768,000</td>
406 | 												<td>1,827,517</td>
407 | 											</tr>
408 | 											<tr>
409 | 												<td>Belgium</td>
410 | 												<td>10,423,000</td>
411 | 												<td>292,530</td>
412 | 											</tr>
413 | 										</tbody>
414 | 										<tfoot>
415 | 											<tr>
416 | 												<td colspan="3"></td>
417 | 											</tr>
418 | 										</tfoot>
419 | 									</table>
420 | 								</div>
421 | 								<pre class="code col">
422 | 									<div class="title">Table with highlight</div>
423 | <code>
424 | &lt;table class="highlight bordered">
425 |   &lt;thead>
426 |     &lt;tr>
427 |       &lt;th>Country&lt;/th>
428 |       &lt;th>Population&lt;/th>
429 |       &lt;th>Avaaz&lt;/th>
430 |     &lt;/tr>
431 |   &lt;/thead>
432 |   &lt;tbody>
433 |     &lt;!-- tr and td tags-->
434 |   &lt;/tbody>
435 |   &lt;tfoot>
436 |     &lt;tr>
437 |       &lt;td colspan="3">&lt;/td>
438 |     &lt;/tr>
439 |   &lt;/tfoot>
440 | &lt;/table>
441 | </code>
442 | 								</pre>
443 | 							</div>
444 | 						</div>
445 | 					</div>
446 | 					<div class="panel b-sd">
447 | 						<div class="panel-header inverse">
448 | 							<h2 class="col a-s">Images with filters</h2>
449 | 						</div>
450 | 						<div class="panel-body">
451 | 							<div class="row a-c">
452 | 								<div class="col">
453 | 									<div class="panel">
454 | 										<img src="https://robohash.org/sample1.png">
455 | 									</div>
456 | 								</div>
457 | 								<div class="col">
458 | 									<div class="panel">
459 | 										<img src="https://robohash.org/sample2.png">
460 | 									</div>
461 | 								</div>
462 | 								<div class="col">
463 | 									<div class="panel">
464 | 										<img src="https://robohash.org/sample3.png">
465 | 									</div>
466 | 								</div>
467 | 							</div>
468 | 						</div>
469 | 					</div>
470 | 					<div class="panel b-sd">
471 | 						<div class="panel-header inverse">
472 | 							<h2 class="col a-s">Use retro forms</h2>
473 | 						</div>
474 | 						<div class="panel-body">
475 | 							<form>
476 | 								<div class="form-group">
477 | 									<label class="checkbox"
478 | 										>One
479 | 										<input type="checkbox" checked />
480 | 										<span class="checkmark">
481 | 											<span></span>
482 | 										</span>
483 | 									</label>
484 | 									<label class="checkbox"
485 | 										>Two
486 | 										<input type="checkbox" checked />
487 | 										<span class="checkmark">
488 | 											<span></span>
489 | 										</span>
490 | 									</label>
491 | 									<progress value="56" max="100"></progress>
492 | 								</div>
493 | 								<div class="form-group inverse">
494 | 									<label class="field">
495 | 										<input placeholder="Placeholder" type="text" />
496 | 									</label>
497 | 								</div>
498 | 								<div class="form-group">
499 | 									<div class="select">
500 | 										<select name="select">
501 | 											<option selected value="value1">Value 1</option>
502 | 											<option value="value2" selected>Value 2</option>
503 | 											<option value="value3">Value 3</option>
504 | 										</select>
505 | 									</div>
506 | 								</div>
507 | 								<div class="form-group">
508 | 									<textarea placeholder="Placeholder...">
509 | Some intro text</textarea
510 | 									>
511 | 								</div>
512 | 								<div class="form-group">
513 | 									<div class="btn">Normal</div>
514 | 									<div class="btn active">Active</div>
515 | 									<div class="btn b-alt">Dashed</div>
516 | 								</div>
517 | 							</form>
518 | 						</div>
519 | 					</div>
520 | 					<div class="panel b-sd">
521 | 						<div class="panel-header inverse">
522 | 							<h2 class="col a-s">New Customizable Selects (Chrome/Edge 130+)</h2>
523 | 						</div>
524 | 						<div class="grid panel-body p-2">
525 | 							<div class="panel w-100 p-1 b-alt">
526 | 								<h3>Basic Customizable</h3>
527 | 								<label for="custom-basic">Programming Language:</label>
528 | 								<select id="custom-basic" class="customizable">
529 | 									<button>
530 | 										<selectedcontent></selectedcontent>
531 | 									</button>
532 | 									<option value="">Choose language...</option>
533 | 									<option value="javascript">JavaScript</option>
534 | 									<option value="python">Python</option>
535 | 									<option value="rust">Rust</option>
536 | 									<option value="go">Go</option>
537 | 									<option value="cpp">C++</option>
538 | 								</select>
539 | 							</div>
540 | 							
541 | 							<div class="panel w-100 p-1 b-alt">
542 | 								<h3>Compact Style</h3>
543 | 								<label for="custom-compact">Terminal Theme:</label>
544 | 								<select id="custom-compact" class="customizable compact">
545 | 									<button>
546 | 										<selectedcontent></selectedcontent>
547 | 									</button>
548 | 									<option value="">Select theme...</option>
549 | 									<option value="green">Classic Green</option>
550 | 									<option value="blue">Cyber Blue</option>
551 | 									<option value="orange">Amber</option>
552 | 									<option value="white">Monochrome</option>
553 | 								</select>
554 | 							</div>
555 | 							
556 | 							<div class="panel w-100 p-1 b-alt">
557 | 								<h3>Thick Border Style</h3>
558 | 								<label for="custom-thick">System Status:</label>
559 | 								<select id="custom-thick" class="customizable thick-border">
560 | 									<button>
561 | 										<selectedcontent></selectedcontent>
562 | 									</button>
563 | 									<option value="">Status...</option>
564 | 									<option value="online">🟢 ONLINE</option>
565 | 									<option value="busy">🟡 BUSY</option>
566 | 									<option value="away">🔵 AWAY</option>
567 | 									<option value="offline">🔴 OFFLINE</option>
568 | 								</select>
569 | 							</div>
570 | 							
571 | 							<div class="panel w-100 p-1 b-alt">
572 | 								<h3>With Complex Content</h3>
573 | 								<label for="custom-complex">Server Node:</label>
574 | 								<select id="custom-complex" class="customizable">
575 | 									<button>
576 | 										<selectedcontent></selectedcontent>
577 | 									</button>
578 | 									<option value="">Select node...</option>
579 | 									<option value="node1">
580 | 										<span class="node-icon">🖥️</span>
581 | 										<span class="node-info">
582 | 											<strong>NODE-01</strong><br>
583 | 											<small>192.168.1.100</small>
584 | 										</span>
585 | 									</option>
586 | 									<option value="node2">
587 | 										<span class="node-icon">🖥️</span>
588 | 										<span class="node-info">
589 | 											<strong>NODE-02</strong><br>
590 | 											<small>192.168.1.101</small>
591 | 										</span>
592 | 									</option>
593 | 									<option value="node3">
594 | 										<span class="node-icon">🖥️</span>
595 | 										<span class="node-info">
596 | 											<strong>NODE-03</strong><br>
597 | 											<small>192.168.1.102</small>
598 | 										</span>
599 | 									</option>
600 | 								</select>
601 | 							</div>
602 | 						</div>
603 | 					</div>
604 | 					<div class="post">
605 | 						<a 
606 | 							class="btn" 
607 | 							style="margin: auto; display: block; text-decoration: none; display: flex; justify-content: center; align-items: center;"
608 | 							href="https://github.com/pabletos/terminalize/releases"
609 | 							target="_blank"
610 | 						>
611 | 							<img 
612 | 								style="width: 2rem"
613 | 								src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/900px-Octicons-mark-github.svg.png?20180806170715">
614 | 							<span style="flex: 1;">Download from Github</span>
615 | 						</a>
616 | 					</div>
617 | 				</div>
618 | 				<div class="panel-footer inverse">
619 | 					<div class="col a-e">Terminalize v1.0</div>
620 | 				</div>
621 | 			</div>
622 | 			<script>
623 | 				kofiWidgetOverlay.draw('phuet', {
624 | 				  'type': 'floating-chat',
625 | 				  'floating-chat.donateButton.text': '',
626 | 				  'floating-chat.donateButton.background-color': '#00c800',
627 | 				  'floating-chat.donateButton.text-color': '#000000'
628 | 				});
629 | 			  </script>
630 | 		</div>


--------------------------------------------------------------------------------
/css/terminalize.css:
--------------------------------------------------------------------------------
   1 | @font-face {
   2 | 		font-family: 'Terminal';
   3 | 		src: url('../fonts/terminal.ttf');
   4 | }
   5 | 
   6 | .terminalize {
   7 | 	--color-primary: #00c800;
   8 | 	--color-secondary: #000000;
   9 | 	--color-tertiary: #007800;
  10 | 	--color-quaternary: #001900;
  11 | 	--border-style: solid;
  12 | 	--border-style-secondary: dashed;
  13 | 	--font: 'Terminal', monospace;
  14 | 	--post-width: 38rem;
  15 | 	--filter: sepia(100%) hue-rotate(90deg);
  16 | 	--width-sd: 640px;
  17 | 	--width-hd: 1280px;
  18 | 	--width-fhd: 1920px;
  19 | 	--width-uhd: 3840px;
  20 | 	
  21 | 	font-family: var(--font);
  22 | 	font-size: 1rem;
  23 | 	color: var(--color-primary);
  24 | 	text-shadow: var(--color-primary) 0 -0.1rem 2rem;
  25 | 	box-sizing: border-box;
  26 | }
  27 | 
  28 | .terminalize .screen{
  29 | 	background-color: var(--color-secondary);
  30 | }
  31 | 
  32 | .terminalize *, .terminalize *:before, .terminalize *:after {
  33 | 	box-sizing: inherit;
  34 | }
  35 | 
  36 | .terminalize img {
  37 | 	-webkit-filter: var(--filter);
  38 | 	filter:  var(--filter);
  39 | }
  40 | 
  41 | .terminalize p {
  42 | 	text-align: justify;
  43 | }
  44 | 
  45 | .terminalize.theme-blue {
  46 | 	--color-primary: #04d9ff;
  47 | 	--color-tertiary: #106877;
  48 | 	--color-quaternary: #050611;
  49 | 	--filter: sepia(100%) hue-rotate(180deg);
  50 | }
  51 | 
  52 | .terminalize.theme-orange {
  53 | 	--color-primary: #f0bf25;
  54 | 	--color-secondary: #2c2013;
  55 | 	--color-tertiary: #8e7117;
  56 | 	--color-quaternary: #110c05;
  57 | 	--filter: sepia(100%);
  58 | }
  59 | 
  60 | .terminalize input, .terminalize textarea, .terminalize button, .terminalize a{
  61 | 		color: var(--color-primary);
  62 | 		text-shadow: var(--color-primary) 0 -0.1rem 2rem;
  63 | }
  64 | 
  65 | .terminalize a:hover{
  66 | 	color: var(--color-secondary);
  67 | 	background-color: var(--color-primary);
  68 | 	outline: none;
  69 | }
  70 | 
  71 | .terminalize textarea::placeholder, .terminalize input::placeholder{
  72 | 	color: var(--color-tertiary);
  73 | }
  74 | 
  75 | .terminalize ::-moz-selection { 
  76 | 	color: var(--color-secondary);
  77 | 	background: var(--color-primary);
  78 | }
  79 | 
  80 | .terminalize ::selection {
  81 | 	color: var(--color-secondary);
  82 | 	background: var(--color-primary);
  83 | }
  84 | 
  85 | .terminalize [contenteditable]:focus {
  86 | 	outline: 0px solid transparent;
  87 | }
  88 | 
  89 | .terminalize .table-wrapper {
  90 | 	max-width: 100%;
  91 | 	overflow-x: auto;
  92 | }
  93 | 
  94 | .terminalize .table-wrapper {
  95 | 	margin: 1rem 0;
  96 | }
  97 | 
  98 | .terminalize table {
  99 | 	margin: 1rem;
 100 | 	border-collapse: collapse;
 101 | }
 102 | 
 103 | .terminalize .table-wrapper table {
 104 | 	margin: 0 auto;
 105 | }
 106 | 
 107 | .terminalize table.bordered {
 108 | 	border: 1px var(--border-style) var(--color-primary);
 109 | }
 110 | 
 111 | .terminalize table thead, .terminalize table tfoot{
 112 | 	background: var(--color-primary);
 113 | 	color: var(--color-secondary);
 114 | 	height: 2rem;
 115 | 	border-top: 1px var(--border-style) var(--color-primary);
 116 | 	border-bottom: 1px var(--border-style) var(--color-primary);
 117 | }
 118 | 
 119 | .terminalize table.simple thead, .terminalize table.simple tfoot{
 120 | 	background: var(--color-secondary);
 121 | 	color: var(--color-primary);
 122 | 	height: 2rem;
 123 | }
 124 | 
 125 | .terminalize table.simple thead {
 126 | 	border-top: 1px var(--border-style) var(--color-primary);
 127 | 	border-bottom: 1px var(--border-style) var(--color-primary);
 128 | }
 129 | 
 130 | .terminalize table.simple tfoot {
 131 | 	border-top: 1px var(--border-style) var(--color-primary);
 132 | 	border-bottom: 1px var(--border-style) var(--color-primary);
 133 | }
 134 | 
 135 | .terminalize table tr th, .terminalize table tr td {
 136 | 	text-align: left;
 137 | 	padding: 0.5rem 1rem;
 138 | 	border: none;
 139 | }
 140 | 
 141 | .terminalize table.highlight tbody tr:hover {
 142 | 	color: var(--color-secondary);
 143 | 	background: var(--color-primary);
 144 | 	cursor: pointer;
 145 | 	font-weight: bold;
 146 | }
 147 | .terminalize table tbody tr.highlighted:hover {
 148 | 	color: var(--color-primary);
 149 | 	background-color: var(--color-secondary);
 150 | 	font-weight: normal;
 151 | }
 152 | 
 153 | .terminalize table tbody tr.highlighted {
 154 | 	color: var(--color-secondary);
 155 | 	background: var(--color-primary);
 156 | 	font-weight: bold;
 157 | }
 158 | 
 159 | .terminalize .form-group {
 160 | 	padding: 1rem;
 161 | 	border: 1px var(--border-style) var(--color-primary);
 162 | 	margin-top: -1px;
 163 | }
 164 | 
 165 | .terminalize blockquote {
 166 | 	white-space: pre-line; 
 167 | 	display: block; 
 168 | 	unicode-bidi: embed;
 169 | 	color: var(--color-tertiary);
 170 | 	border-left:  1px solid var(--color-tertiary);
 171 | 	padding: 0.5rem 0 1rem 1rem;
 172 | 	text-align: left;
 173 | }
 174 | 
 175 | .terminalize pre.code {
 176 | 	background-color: var(--color-quaternary);
 177 | 	color: var(--color-primary);
 178 | 	max-width: var(--post-width);
 179 | 	margin: auto;
 180 | 	padding: 0.5rem 1rem;
 181 | 	border-radius: 5px;
 182 | 	line-height: 1.30769231;
 183 | 	position: relative;
 184 | 	overflow: hidden;
 185 | 	max-width: 100%;
 186 | 	white-space: break-spaces;
 187 | }
 188 | 
 189 | .terminalize pre.code div.title{
 190 | 	position: absolute;
 191 | 	top: 0;
 192 | 	left: 0;
 193 | 	white-space: normal;
 194 | 	border-radius: 5px 0 5px 0;
 195 | 	padding: 0.3rem 1rem;
 196 | 	background-color: var(--color-primary);
 197 | 	color: var(--color-quaternary);
 198 | 	font-family: var(--font);
 199 | }
 200 | 
 201 | .terminalize pre.code code {
 202 | 	font-family: var(--font);
 203 | 	overflow: auto;
 204 | }
 205 | 
 206 | .terminalize pre.code div.title.right {
 207 | 	left: unset;
 208 | 	right: 0;
 209 | 	border-radius: 0 5px 0 5px;
 210 | }
 211 | 
 212 | .terminalize .post {
 213 | 	max-width: var(--post-width);
 214 | 	margin: auto;
 215 | 	text-align: justify;
 216 | }
 217 | 
 218 | .terminalize span.cursor {
 219 | 	height: 1em;
 220 | 	border-left: .15em solid var(--color-primary);
 221 | }
 222 | 
 223 | .terminalize span.cursor.blink {
 224 | 	animation: blink-caret .75s step-end infinite;
 225 | }
 226 | 
 227 | .terminalize .panel {
 228 | 	display: flex;
 229 | 	position: relative;
 230 | 	overflow: hidden;
 231 | 	flex: 1;
 232 | 	max-width: 1200px;
 233 | 	max-height: 100%;
 234 | 	margin: 1rem auto;
 235 | 	flex-direction: column;
 236 | 	justify-content: space-between;
 237 | 	border: 1px var(--border-style) var(--color-primary);
 238 | 	
 239 | }
 240 | 
 241 | .terminalize .panel.fluid {
 242 | 	max-height: none;
 243 | }
 244 | 
 245 | .terminalize .panel .panel-header {
 246 | 	overflow: hidden;
 247 | 	display: flex;
 248 | 	flex-direction: row;
 249 | 	justify-content: space-around;
 250 | 	align-items: center;
 251 | 	text-align: left;
 252 | 	padding: 0;
 253 | 	border-bottom: 1px var(--border-style) var(--color-primary);
 254 | 	min-height: 2rem;
 255 | }
 256 | 
 257 | .terminalize .panel .panel-header > * {
 258 | 	padding: 0.5rem 1rem;
 259 | }
 260 | 
 261 | .terminalize .panel .panel-header .controls {
 262 | 	padding: 0;
 263 | 	flex: 0;
 264 | 	display: flex;
 265 | 	flex-direction: row;
 266 | 	border-left: 1px var(--border-style) var(--color-primary);
 267 | }
 268 | 
 269 | .terminalize .panel .panel-header .controls .control {
 270 | 	padding: 0.5rem;
 271 | 	padding: 0.5rem;
 272 | 	min-width: 1.5rem;
 273 | 	text-align: center;
 274 | 	display: flex;
 275 |     align-items: center;
 276 | }
 277 | 
 278 | .terminalize .panel .panel-header .controls .control:hover {
 279 | 	cursor: pointer;
 280 | 	background-color: var(--color-primary);
 281 | 	color: var(--color-secondary);
 282 | }
 283 | 
 284 | .terminalize .panel .panel-body {
 285 | 	overflow-y: auto;
 286 | 	padding: 1rem;
 287 | }
 288 | 
 289 | .terminalize .panel .panel-footer {
 290 | 	overflow: hidden;
 291 | 	display: flex;
 292 | 	flex-direction: row;
 293 | 	justify-content: space-around;
 294 | 	align-items: center;
 295 | 	text-align: right;
 296 | 	border-top: 1px var(--border-style) var(--color-primary);
 297 | 	min-height: 2rem;
 298 | }
 299 | 
 300 | .terminalize .panel .panel-footer > * {
 301 | 	padding: 0.5rem 1rem;
 302 | }
 303 | 
 304 | .terminalize .rounded {
 305 | 	border-radius: 8px;
 306 | }
 307 | 
 308 | .terminalize .screen {
 309 | 	display: flex;
 310 | 	flex-direction: row;
 311 | 	justify-content: space-around;
 312 | 	align-items: center;
 313 | 	width: 100%;
 314 | 	height: 100%;
 315 | 	overflow: hidden;
 316 | }
 317 | 
 318 | .terminalize .row {
 319 | 	display: flex;
 320 | 	flex-direction: row;
 321 | 	justify-content: center;
 322 | 	align-items: flex-start;
 323 | 	flex-wrap: wrap;
 324 | 	gap: 1rem;
 325 | }
 326 | 
 327 | .terminalize .col {
 328 | 	flex: 1;
 329 | 	position: relative;
 330 | 	max-width: 100%;
 331 | }
 332 | 
 333 | .terminalize .type {
 334 | 	overflow: hidden;
 335 | 	white-space: nowrap;
 336 | 	animation: enlarge 3.5s steps(40, end);
 337 | }
 338 | 
 339 | .terminalize {
 340 | 	scrollbar-width: thin;
 341 | 	scrollbar-color: var(--color-primary) var(--color-secondary);
 342 | }
 343 | 
 344 | .terminalize ::-webkit-scrollbar {
 345 | 	width: 0.8rem;               /* width of the entire scrollbar */
 346 | }
 347 | 
 348 | .terminalize ::-webkit-scrollbar-track {
 349 | 	background: var(--color-secondary);        /* color of the tracking area */
 350 | }
 351 | 
 352 | .terminalize ::-webkit-scrollbar-thumb {
 353 | 	background-color: var(--color-primary);    /* color of the scroll thumb */
 354 | 	border-radius: 8px;       /* roundness of the scroll thumb */
 355 | 	border: 2px var(--border-style) var(--color-tertiary);  /* creates padding around scroll thumb */
 356 | }
 357 | 
 358 | .terminalize .a-s {
 359 | 	align-items: flex-start !important;
 360 | }
 361 | 
 362 | .terminalize .a-e {
 363 | 	align-items: flex-end !important;
 364 | }
 365 | 
 366 | .terminalize .a-c {
 367 | 	align-items: center !important;
 368 | }
 369 | 
 370 | .terminalize .a-auto {
 371 | 	align-items: center !important;
 372 | }
 373 | 
 374 | .terminalize .f-0 {
 375 | 	flex: 0 !important;
 376 | }
 377 | 
 378 | .terminalize .j-c {
 379 | 	justify-content: center;
 380 | }
 381 | 
 382 | .terminalize .j-l {
 383 | 	justify-content: left;
 384 | }
 385 | 
 386 | .terminalize .j-r {
 387 | 	justify-content: right;
 388 | }
 389 | 
 390 | .terminalize .j-c {
 391 | 	justify-content: space-around;
 392 | }
 393 | 
 394 | .terminalize .j-b {
 395 | 	justify-content: space-between;
 396 | }
 397 | 
 398 | .terminalize .w-100 {
 399 | 	width: 100%;
 400 | }
 401 | 
 402 | .terminalize .t-l {
 403 | 	text-align: left !important;
 404 | }
 405 | 
 406 | .terminalize .t-r {
 407 | 	text-align: right !important;
 408 | }
 409 | 
 410 | .terminalize .t-c {
 411 | 	text-align: center !important;
 412 | }
 413 | 
 414 | .terminalize .mw-100 {
 415 | 	max-width: 100% !important;
 416 | }
 417 | 
 418 | .terminalize .mw-sd {
 419 | 	max-width: var(--width-sd) !important;
 420 | }
 421 | 
 422 | .terminalize .mw-hd {
 423 | 	max-width: var(--width-hd) !important;
 424 | }
 425 | 
 426 | .terminalize .mw-fhd {
 427 | 	max-width: var(--width-fhd) !important;
 428 | }
 429 | 
 430 | .terminalize .mw-uhd {
 431 | 	max-width: var(--width-uhd) !important;
 432 | }
 433 | 
 434 | .terminalize .p-0 {
 435 | 	padding: 0rem !important;
 436 | }
 437 | 
 438 | .terminalize .m-0 {
 439 | 	margin: 0rem !important;
 440 | }
 441 | 
 442 | .terminalize .p-1 {
 443 | 	padding: 1rem !important;
 444 | }
 445 | 
 446 | .terminalize .m-1 {
 447 | 	margin: 1rem !important;
 448 | }
 449 | 
 450 | .terminalize .p-2 {
 451 | 	padding: 2rem !important;
 452 | }
 453 | 
 454 | .terminalize .m-2 {
 455 | 	margin: 2rem !important;
 456 | }
 457 | 
 458 | .terminalize .p-3 {
 459 | 	padding: 3rem !important;
 460 | }
 461 | 
 462 | .terminalize .m-3 {
 463 | 	margin: 3rem !important;
 464 | }
 465 | 
 466 | .terminalize .p-4 {
 467 | 	padding: 4rem !important;
 468 | }
 469 | 
 470 | .terminalize .m-4 {
 471 | 	margin: 4rem !important;
 472 | }
 473 | 
 474 | /* COMPONENTS */
 475 | 
 476 | .terminalize .checkbox {
 477 | 	display: block;
 478 | 	position: relative;
 479 | 	padding-left: 1.8rem;
 480 | 	margin: 1rem 0;
 481 | 	cursor: pointer;
 482 | 	font-size: 1rem;
 483 | 	-webkit-user-select: none;
 484 | 	-moz-user-select: none;
 485 | 	-ms-user-select: none;
 486 | 	user-select: none;
 487 | }
 488 | 
 489 | .terminalize .checkbox input {
 490 | 	position: absolute;
 491 | 	opacity: 0;
 492 | 	cursor: pointer;
 493 | 	height: 0;
 494 | 	width: 0;
 495 | }
 496 | 
 497 | .terminalize .checkmark {
 498 | 	border: 1px var(--border-style) var(--color-primary);
 499 | 	position: absolute;
 500 | 	top: 0;
 501 | 	left: 0;
 502 | 	height: 16px;
 503 | 	width: 16px;
 504 | 	background-color: transparent;
 505 | 	box-sizing: border-box !important;
 506 | }
 507 | 
 508 | .terminalize .checkbox:hover input ~ .checkmark {
 509 | 	background-color: var(--color-secondary);
 510 | }
 511 | 
 512 | .terminalize .checkbox .checkmark > span {
 513 | 	background-color: transparent;
 514 | 	position: absolute;
 515 | 	height: 10px;
 516 | 	width: 10px;
 517 | 	left: 2px;
 518 | 	top: 2px;
 519 | }
 520 | 
 521 | .terminalize .checkbox input:checked ~ .checkmark > span{
 522 | 	background-color: var(--color-primary);
 523 | }
 524 | 
 525 | .terminalize .checkmark:after {
 526 | 	content: "";
 527 | 	position: absolute;
 528 | 	display: none;
 529 | }
 530 | 
 531 | .terminalize .checkbox input:checked ~ .checkmark:after {
 532 | 	display: block;
 533 | }
 534 | 
 535 | .terminalize input[type=text], .terminalize input[type=number] {
 536 | 	-webkit-user-select: none;
 537 | 	-moz-user-select: none;
 538 | 	-ms-user-select: none;
 539 | 	user-select: none;
 540 | }
 541 | 
 542 | .terminalize input[type=text], .terminalize input[type=number] {
 543 | 	display: block;
 544 | 	position: relative;
 545 | 	margin: 0.5rem 0;
 546 | 	font-size: 1rem;
 547 | 	outline: 1px var(--border-style) var(--color-primary);
 548 | 	-webkit-appearance: none;
 549 | 	-moz-appearance: none;
 550 | 	appearance: none;
 551 | 	margin:0;
 552 | 	border:0;
 553 | 	padding: 1rem;
 554 | 	display:inline-block;
 555 | 	white-space:normal;
 556 | 	background:none;
 557 | 	line-height:1;
 558 | 	color: var(--color-primary);
 559 | 	background-color: var(--color-secondary);
 560 | 	font-family: var(--font);
 561 | }
 562 | 
 563 | .terminalize textarea {
 564 | 	-webkit-appearance: none;
 565 | 	-moz-appearance: none;
 566 | 	min-height: 10rem;
 567 | 	min-width: 10rem;
 568 | 	width: 100%;
 569 | 	appearance: none;
 570 | 	padding: 1rem;
 571 | 	font-size: 1rem;
 572 | 	border: 1px var(--border-style) var(--color-primary);
 573 | 	background-color: var(--color-secondary);
 574 | 	font-family: var(--font);
 575 | 	color: var(--color-primary);
 576 | }
 577 | 
 578 | .terminalize textarea:focus-visible {
 579 | 	outline: none;
 580 | }
 581 | 
 582 | .terminalize .inverse {
 583 | 	background-color: var(--color-primary) !important;
 584 | 	color: var(--color-secondary) !important;
 585 | 	font-weight: bold;
 586 | }
 587 | 
 588 | .terminalize .b-alt {
 589 | 	border-style: var(--border-style-secondary) !important;
 590 | }
 591 | 
 592 | .terminalize .b-none {
 593 | 	border: none !important;
 594 | }
 595 | 
 596 | .terminalize progress {
 597 | 	-moz-appearance: none;
 598 | 	-webkit-appearance: none;
 599 | 	appearance: none;
 600 | 	border: 3px var(--border-style) var(--color-secondary);
 601 | 	box-shadow: 
 602 | 	1px -1px 0px var(--color-primary),
 603 | 	-1px 1px 0px var(--color-primary),
 604 | 	-1px -1px 0px var(--color-primary),
 605 | 	1px 1px 0px var(--color-primary);
 606 | }
 607 | 
 608 | .terminalize ::-webkit-progress-bar {
 609 | 	background-color: var(--color-secondary);
 610 | }
 611 | 
 612 | .terminalize ::-moz-progress-bar {
 613 | 	background-color: var(--color-secondary);
 614 | }
 615 | 
 616 | .terminalize ::-webkit-progress-value {
 617 | 	background-color: var(--color-primary);
 618 | }
 619 | 
 620 | .terminalize ::-moz-progress-value {
 621 | 	background-color: var(--color-primary);
 622 | }
 623 | 
 624 | .terminalize .btn {
 625 | 	display: inline-block;
 626 | 	border: 1px var(--border-style) var(--color-primary);
 627 | 	padding: 0.8rem 1rem;
 628 | 	min-width: 8rem;
 629 | 	text-align: center;
 630 | }
 631 | 
 632 | .terminalize .btn.active {
 633 | 	background-color: var(--color-primary);
 634 | 	color: var(--color-secondary);
 635 | 	font-weight: bold;
 636 | }
 637 | 
 638 | .terminalize .btn:focus, .terminalize .btn:hover, .terminalize .btn-primary:focus, .terminalize .btn:active, .terminalize .btn-primary:active {
 639 | 	background-color: var(--color-primary);
 640 | 	color: var(--color-secondary);
 641 | 	outline: none;
 642 | 	cursor: pointer;
 643 | 	user-select: none;
 644 | 	font-weight: bold;
 645 | }
 646 | 
 647 | .terminalize .btn.active:focus, .terminalize .btn.active:hover, .terminalize .btn.active-primary:focus, .terminalize .btn.active:active, .terminalize .btn.active:active {
 648 | 	background-color: var(--color-secondary) !important;
 649 | 	color: var(--color-primary) !important;
 650 | 	font-weight: normal;
 651 | }
 652 | 
 653 | .terminalize .select {
 654 | 	border:1px var(--border-style) var(--color-primary);
 655 | 	height:30px;
 656 | 	overflow: hidden;
 657 | 	max-width: 15rem;
 658 | 	position:relative;
 659 | }
 660 | 
 661 | .terminalize .select.no-border {
 662 | 	border: 0;
 663 | }
 664 | .terminalize select {
 665 | 	width: 100%;
 666 | 	text-shadow: var(--color-primary) 0 -0.1rem 2rem;
 667 | 	font-size: 1rem;
 668 | 	background: transparent;
 669 | 	color: var(--color-primary);
 670 | 	font-family: 'Terminal';
 671 | 	border: none;
 672 | 	font-size: 14px;
 673 | 	height: 30px;
 674 | 	padding: 5px;
 675 | 	padding-right: 2rem;
 676 | }
 677 | 
 678 | .terminalize select:focus{ outline: none;}
 679 | 
 680 | /* CUSTOMIZABLE SELECT STYLES (2025 Feature) */
 681 | /* Opt into the new customizable select rendering */
 682 | .terminalize select.customizable,
 683 | .terminalize select.customizable::picker(select) {
 684 | 	appearance: base-select;
 685 | }
 686 | 
 687 | /* Style the select button */
 688 | .terminalize select.customizable {
 689 | 	border-radius: 0;
 690 | 	border: 1px var(--border-style) var(--color-primary);
 691 | 	background-color: var(--color-secondary);
 692 | 	color: var(--color-primary);
 693 | 	font-family: var(--font);
 694 | 	font-size: 1rem;
 695 | 	padding: 0.8rem 1rem;
 696 | 	min-height: 2.5rem;
 697 | 	position: relative;
 698 | 	text-shadow: var(--color-primary) 0 -0.1rem 2rem;
 699 | 	transition: all 0.3s ease;
 700 | 	cursor: pointer;
 701 | }
 702 | 
 703 | .terminalize select.customizable:hover,
 704 | .terminalize select.customizable:focus {
 705 | 	background-color: var(--color-quaternary);
 706 | 	outline: none;
 707 | }
 708 | 
 709 | /* Style the picker icon (dropdown arrow) */
 710 | .terminalize select.customizable::picker-icon {
 711 | 	color: var(--color-primary);
 712 | 	font-size: 1.2rem;
 713 | 	transition: 0.3s transform ease;
 714 | 	content: "▼";
 715 | 	position: absolute;
 716 |     right: 1rem;
 717 |     top: 50%;
 718 |     transform: translateY(-50%);
 719 | }
 720 | 
 721 | .terminalize select.customizable:open::picker-icon {
 722 | 	transform: translateY(-50%) rotate(180deg);
 723 | }
 724 | 
 725 | .terminalize select.customizable::picker(select) {
 726 | 	border: 1px var(--border-style) var(--color-primary);
 727 | 	border-radius: 0;
 728 | 	background-color: var(--color-secondary);
 729 | 	padding: 0;
 730 | 	margin-top: 2px;
 731 | 	box-shadow: 
 732 | 		2px 2px 0px var(--color-tertiary),
 733 | 		4px 4px 0px var(--color-quaternary);
 734 | 	opacity: 0;
 735 | 	transition: all 0.3s ease allow-discrete;
 736 | }
 737 | 
 738 | .terminalize select.customizable::picker(select):popover-open {
 739 | 	opacity: 1;
 740 | }
 741 | 
 742 | @starting-style {
 743 | 	.terminalize select.customizable::picker(select):popover-open {
 744 | 		opacity: 0;
 745 | 		transform: translateY(-10px);
 746 | 	}
 747 | }
 748 | 
 749 | .terminalize select.customizable option {
 750 | 	display: flex;
 751 | 	align-items: center;
 752 | 	padding: 0.8rem 1rem;
 753 | 	border: none;
 754 | 	border-bottom: 1px var(--border-style-secondary) var(--color-tertiary);
 755 | 	background-color: var(--color-secondary);
 756 | 	color: var(--color-primary);
 757 | 	font-family: var(--font);
 758 | 	font-size: 1rem;
 759 | 	transition: all 0.2s ease;
 760 | 	cursor: pointer;
 761 | 	text-shadow: var(--color-primary) 0 -0.1rem 2rem;
 762 | }
 763 | 
 764 | .terminalize select.customizable option:last-of-type {
 765 | 	border-bottom: none;
 766 | }
 767 | 
 768 | .terminalize select.customizable option:hover,
 769 | .terminalize select.customizable option:focus {
 770 | 	background-color: var(--color-primary);
 771 | 	color: var(--color-secondary);
 772 | 	font-weight: bold;
 773 | 	text-shadow: none;
 774 | }
 775 | 
 776 | .terminalize select.customizable option:checked {
 777 | 	background-color: var(--color-primary);
 778 | 	font-weight: bold;
 779 | }
 780 | 
 781 | .terminalize select.customizable option::checkmark {
 782 | 	content: "■";
 783 | 	color: var(--color-primary);
 784 | 	font-size: 0.8rem;
 785 | }
 786 | 
 787 | .terminalize select.customizable option:checked::checkmark {
 788 | 	color: var(--color-secondary);
 789 | }
 790 | 
 791 | .terminalize select.customizable option:hover::checkmark {
 792 | 	color: var(--color-secondary);
 793 | }
 794 | 
 795 | .terminalize select.customizable selectedcontent {
 796 | 	display: flex;
 797 | 	align-items: center;
 798 | 	font-family: var(--font);
 799 | 	color: var(--color-primary);
 800 | 	text-shadow: var(--color-primary) 0 -0.1rem 2rem;
 801 | }
 802 | 
 803 | .terminalize select.customizable.compact {
 804 | 	padding: 0.5rem 0.8rem;
 805 | 	min-height: 2rem;
 806 | 	font-size: 0.9rem;
 807 | }
 808 | 
 809 | .terminalize select.customizable.compact option {
 810 | 	padding: 0.5rem 0.8rem;
 811 | 	font-size: 0.9rem;
 812 | }
 813 | 
 814 | .terminalize select.customizable.thick-border {
 815 | 	border-width: 2px;
 816 | }
 817 | 
 818 | .terminalize select.customizable.thick-border::picker(select) {
 819 | 	border-width: 2px;
 820 | }
 821 | 
 822 | .terminalize select.customizable.rounded {
 823 | 	border-radius: 4px;
 824 | }
 825 | 
 826 | .terminalize select.customizable.rounded::picker(select) {
 827 | 	border-radius: 4px;
 828 | }
 829 | 
 830 | .terminalize.theme-blue select.customizable::picker-icon,
 831 | .terminalize.theme-orange select.customizable::picker-icon {
 832 | 	color: var(--color-primary);
 833 | }
 834 | 
 835 | /* END CUSTOMIZABLE SELECT STYLES*/
 836 | 
 837 | .terminalize .grid {
 838 | 	display: grid;
 839 | 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 840 | 	gap: 1rem;
 841 | }
 842 | 
 843 | .grid > .panel {
 844 | 	margin: 0;
 845 | }
 846 | 
 847 | @keyframes blink-caret {
 848 | 	from, to { border-color: transparent }
 849 | 	50% { border-color: var(--color-primary); }
 850 | }
 851 | 
 852 | @keyframes enlarge {
 853 | 	from { width: 0 }
 854 | 	to { width: 100% }
 855 | }
 856 | 
 857 | /* SCANLINES */
 858 | .scanlines {
 859 | 	position: relative;
 860 | 	overflow: hidden;
 861 | }
 862 | .scanlines:before,
 863 | .scanlines:after {
 864 | 	display: block;
 865 | 	pointer-events: none;
 866 | 	content: "";
 867 | 	position: absolute;
 868 | }
 869 | .scanlines:before {
 870 | 	width: 100%;
 871 | 	height: 5px;
 872 | 	z-index: 2147483649;
 873 | 	background: rgba(0, 255, 0, 0.3);
 874 | 	opacity: 0.75;
 875 | 	-webkit-animation: scanline 6s linear infinite;
 876 | 	animation: scanline 6s linear infinite;
 877 | }
 878 | .scanlines:after {
 879 | 	top: 0;
 880 | 	right: 0;
 881 | 	bottom: 0;
 882 | 	left: 0;
 883 | 	z-index: 2147483648;
 884 | 	background: -webkit-linear-gradient(
 885 | 	top,
 886 | 	transparent 50%,
 887 | 	rgba(0, 80, 0, 0.3) 51%
 888 | 	);
 889 | 	background: linear-gradient(
 890 | 	to bottom,
 891 | 	transparent 50%,
 892 | 	rgba(0, 80, 0, 0.3) 51%
 893 | 	);
 894 | 	background-size: 100% 0.5vh;
 895 | 	-webkit-animation: scanlines 1s steps(60) infinite;
 896 | 	animation: scanlines 1s steps(60) infinite;
 897 | }
 898 | 
 899 | /* SCANLINE ANIMATION */
 900 | @-webkit-keyframes scanline {
 901 | 	0% {
 902 | 	-webkit-transform: translate3d(0, 200000%, 0);
 903 | 	transform: translate3d(0, 200000%, 0);
 904 | 	}
 905 | }
 906 | @keyframes scanline {
 907 | 	0% {
 908 | 	-webkit-transform: translate3d(0, 200000%, 0);
 909 | 	transform: translate3d(0, 200000%, 0);
 910 | 	}
 911 | }
 912 | @-webkit-keyframes scanlines {
 913 | 	0% {
 914 | 	background-position: 0 50%;
 915 | 	}
 916 | }
 917 | @keyframes scanlines {
 918 | 	0% {
 919 | 	background-position: 0 50%;
 920 | 	}
 921 | }
 922 | 
 923 | .blink {
 924 | 	animation: blink 1s infinite;
 925 | }
 926 | 
 927 | @keyframes blink {
 928 | 	to {
 929 | 	opacity: 0;
 930 | 	}
 931 | }
 932 | 
 933 | /* RESPONSIVE */
 934 | 
 935 | @media only screen and (max-width: 1024px) {
 936 | 	.terminalize pre.code {
 937 | 		padding: 0 0 0 0.5rem;
 938 | 		max-width: 100%;
 939 | 		margin: 0;
 940 | 	}
 941 | 
 942 | 	.terminalize .p-1 {
 943 | 		padding: .5rem !important;
 944 | 	}
 945 | 
 946 | 	.terminalize .m-1 {
 947 | 		margin: .5rem !important;
 948 | 	}
 949 | 
 950 | 	.terminalize .p-2 {
 951 | 		padding: 1rem !important;
 952 | 	}
 953 | 
 954 | 	.terminalize .m-2 {
 955 | 		margin: 1rem !important;
 956 | 	}
 957 | 
 958 | 	.terminalize .p-3 {
 959 | 		padding: 1.5rem !important;
 960 | 	}
 961 | 
 962 | 	.terminalize .m-3 {
 963 | 		margin: 1.5rem !important;
 964 | 	}
 965 | 
 966 | 	.terminalize .p-4 {
 967 | 		padding: 2rem !important;
 968 | 	}
 969 | 
 970 | 	.terminalize .m-4 {
 971 | 		margin: 2rem !important;
 972 | 	}
 973 | 
 974 | 	/* For removing borders on smaller than 1024px devices */
 975 | 	.b-hd {
 976 | 		border: none !important;
 977 | 	}
 978 | }
 979 | 
 980 | /* Medium devices (landscape tablets, 768px and up) */
 981 | @media only screen and (max-width: 768px) {
 982 | 	/* For removing borders on smaller than 768px devices */
 983 | 	.b-sd {
 984 | 		border: none !important;
 985 | 	}
 986 | 
 987 | 	.terminalize blockquote {
 988 | 		margin: 0;
 989 | 	}
 990 | 	.terminalize .col {
 991 | 		display: flex;
 992 | 		flex-direction: column;
 993 | 		align-items: center;
 994 | 		padding: 0;
 995 | 		flex: 1;
 996 | 		position: relative;
 997 | 	}
 998 | 	.terminalize pre.code {
 999 | 		padding: 1rem 0 0 0.5rem;
1000 | 		max-width: 100%;
1001 | 		margin: 0;
1002 | 	}
1003 | 
1004 | 	.terminalize .panel .panel-body {
1005 | 		padding: 0.4rem;
1006 | 	}
1007 | 
1008 | 	.terminalize .row {
1009 | 		flex-direction: column;
1010 | 		align-items: center;
1011 | 	}
1012 | 
1013 | 	.terminalize table {
1014 | 		margin: 1rem 0rem;
1015 | 	}
1016 | 
1017 | 	.terminalize .a-auto {
1018 | 		align-items: flex-start !important;
1019 | 	}
1020 | 
1021 | 	.terminalize .p-1 {
1022 | 		padding: .25rem !important;
1023 | 	}
1024 | 
1025 | 	.terminalize .m-1 {
1026 | 		margin: .25rem !important;
1027 | 	}
1028 | 
1029 | 	.terminalize .p-2 {
1030 | 		padding: .5rem !important;
1031 | 	}
1032 | 
1033 | 	.terminalize .m-2 {
1034 | 		margin: .5rem !important;
1035 | 	}
1036 | 
1037 | 	.terminalize .p-3 {
1038 | 		padding: .75rem !important;
1039 | 	}
1040 | 
1041 | 	.terminalize .m-3 {
1042 | 		margin: .75rem !important;
1043 | 	}
1044 | 
1045 | 	.terminalize .p-4 {
1046 | 		padding: 1rem !important;
1047 | 	}
1048 | 
1049 | 	.terminalize .m-4 {
1050 | 		margin: 1rem !important;
1051 | 	}
1052 | }


--------------------------------------------------------------------------------