/*! stylent.css | v1.0.0 | Copyright 2022 Graphery | MIT License */ /****************************** Variables ******************************/ :host, :root, .light { --st-font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --st-font-family-mono : "Consolas", "Monaco", "Menlo", monospace; --st-font-weight : 400; --st-font-bold-weight : 500; --st-font-size : 15px; --st-font-size-s : 0.8em; --st-font-size-l : 1.15em; --st-font-size-xl : 1.30em; --st-font-size-xxl : 1.60em; --st-font-size-xxxl : 2.00em; --st-font-size-xxxxl : 2.30em; --st-line-height : 1.6em; --st-line-height-l : 2em; --st-color-0 : #fafafa; --st-color-1 : #f5f5f5; --st-color-2 : #e5e5e5; --st-color-3 : #d4d4d4; --st-color-4 : #a3a3a3; --st-color-5 : #737373; --st-color-6 : #525252; --st-color-7 : #404040; --st-color-8 : #262626; --st-color-9 : #171717; --st-fore-color : var(--st-color-9); --st-bg-color : var(--st-color-0); --st-fore-color-alt : var(--st-color-0); --st-bg-color-alt : var(--st-color-9); --st-fore-color-code : var(--st-color-9); --st-bg-color-code : var(--st-color-2); --st-focus-border-color : var(--st-color-7); --st-border-color : var(--st-color-4); --st-fore-color-dark : var(--st-color-0); --st-bg-color-dark : var(--st-color-9); --st-fore-color-alt-dark : var(--st-color-9); --st-bg-color-alt-dark : var(--st-color-3); --st-border-width : 1px; --st-border-radius : 2px; --st-space : 0.5em; --st-space-after : var(--st-space); --st-space-before : calc(var(--st-space) * 2); --st-gutter : calc(var(--st-space) * 3); --st-link-style : underline dotted var(--st-color-4); --st-link-hover-style : underline solid var(--st-fore-color); } /* Dark mode */ @media (prefers-color-scheme : dark) { :host, :root { --st-fore-color : var(--st-fore-color-dark); --st-bg-color : var(--st-bg-color-dark); --st-fore-color-alt : var(--st-fore-color-alt-dark); --st-bg-color-alt : var(--st-bg-color-alt-dark); } } .dark { --st-fore-color : var(--st-fore-color-dark); --st-bg-color : var(--st-bg-color-dark); --st-fore-color-alt : var(--st-fore-color-alt-dark); --st-bg-color-alt : var(--st-bg-color-alt-dark); } /* Small screens */ @media screen and (max-width : 768px) { :host, :root { --st-font-size : 14px; } } /****************************** Base Styles ******************************/ * { box-sizing : border-box; } html, body { margin : 0; padding : 0; min-height : 100vh; color : var(--st-fore-color); background : var(--st-bg-color); scroll-behavior : smooth; } body, :host { line-height : var(--st-line-height); color : var(--st-fore-color); font-size : var(--st-font-size); font-weight : var(--st-font-weight); font-family : var(--st-font-family) } /****************************** Typography ******************************/ h1, h2, h3, h4, h5, h6 { font-weight : var(--st-font-bold-weight); line-height : var(--st-line-height-l); margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); } h1 { font-size : var(--st-font-size-xxxxl); } h2 { font-size : var(--st-font-size-xxxl); } h3 { font-size : var(--st-font-size-xxl); } h4 { font-size : var(--st-font-size-xl); } h5 { font-size : var(--st-font-size-l); } h6 { font-size : var(--st-font-size); } p { font-size : var(--st-font-size); margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); } /****************************** Link ******************************/ a, a:visited { color : var(--st-fore-color); text-decoration : var(--st-link-style); /* transition : all 0.2s ease; */ } a:hover { cursor : pointer; text-decoration : var(--st-link-hover-style); } /****************************** List ******************************/ ul, ol, dl { font-size : var(--st-font-size); margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); padding-left : 0; list-style-position : inside; } ul li, ol li, dl dt, dl dd { margin-top : 0; } ul li:first-child, ol li:first-child, dl dd:first-child { margin-top : var(--st-space-before); } li ul, li ol { margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); } ul ul, ol ul, ul ol, ol ol, dl dd { margin-left : var(--st-space-before); } /****************************** Form ******************************/ label { display : inline-block; margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); } input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { height : 2.7em; width : 100%; margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); padding : 0.5em; font-size : var(--st-font-size); color : var(--st-fore-color); background : var(--st-bg-color); border : var(--st-border-width) solid var(--st-border-color); border-radius : var(--st-border-radius); /* transition : all 0.2s ease; */ font-family : var(--st-font-family); } input[type=checkbox], input[type=radio] { font-size : var(--st-font-size); height : 1.2em; width : 1.2em; vertical-align : middle; /* transition : all 0.2s ease; */ } input[type=color] { background : var(--st-bg-color); height : 2.7em; width : 2.7em; } input:not([type=button]):hover:not([type=submit]):hover:not([type=reset]):hover, select:hover, textarea:hover { border-color : var(--st-fore-color); } input:not([type=button]):not([type=submit]):not([type=reset]):focus, select:focus, textarea:focus { outline : none; border-color : var(--st-focus-border-color) !important; } input:not([type=button]):not([type=submit]):not([type=reset]):disabled, input:not([type=button]):hover:not([type=submit]):hover:not([type=reset])[disabled]:hover { border-color : var(--st-border-color); opacity : 0.5; cursor : not-allowed; } input[type=image], input[type=image]:hover, input[type=image]:focus { border : 0 !important; width : auto !important; } textarea { min-height : 10em; } fieldset { border : var(--st-border-width) solid var(--st-border-color); border-radius : var(--st-border-radius); padding : 1em; } form, fieldset { margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); } /****************************** Button ******************************/ button, .button, a.button, [type=submit], [type=reset], [type=button] { display : inline-block; font-family : var(--st-font-family); margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); outline : none; text-decoration : none; color : var(--st-fore-color-alt); background : var(--st-bg-color-alt); opacity : 0.8; font-size : var(--st-font-size); border : var(--st-border-width) solid var(--st-fore-color); border-radius : var(--st-border-radius); /* transition : all 0.2s ease; */ cursor : pointer; text-align : center; padding : 0.59em 1em; line-height : 1.4; } button:hover:not([disabled]), .button:hover:not([disabled]), [type=submit]:hover:not([disabled]), [type=button]:hover:not([disabled]), button:focus, .button:focus, [type=submit]:focus, [type=button]:focus, button:active, .button:active, [type=submit]:active, [type=button]:active { opacity : 1; text-decoration : none; } button[disabled], .button[disabled], input[disabled] { opacity : 0.5; cursor : not-allowed; } button.outline, .button.outline, [type=submit].outline { color : var(--st-fore-color); background : var(--st-bg-color); } /***************************** Table *****************************/ table { font-size : var(--st-font-size); display : table; overflow-x : initial; border-spacing : 0; text-align : left; width : 100%; } th { border-bottom : var(--st-border-width) solid var(--st-color-4); padding : 1em 1.6em; } td { border-bottom : calc(0.5 * var(--st-border-width)) solid var(--st-color-4); padding : 1em 1.6em; } td:first-child, th:first-child { padding-left : 0; } td:last-child, th:last-child { padding-right : 0; } @media screen and (max-width : 768px) { table { display : block; overflow-x : auto; } } /****************************** Image ******************************/ img { border : none; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img, p img { vertical-align : bottom; } /****************************** Code and Blockquote ******************************/ pre { font-size : var(--st-font-size); margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); } code { padding : 2px; color : var(--st-fore-color-code); background : var(--st-bg-color-code); font-family : var(--st-font-family-mono); } pre code { white-space : nowrap; } pre code, blockquote { margin-left : 0; margin-top : var(--st-space-before); margin-bottom : var(--st-space-after); padding : 1rem; display : block; border : 0; border-left : 0.3rem solid var(--st-bg-color-alt); } pre code, samp { white-space : pre; word-wrap : break-word; background : var(--st-bg-color-code); font-family : var(--st-font-family-mono); overflow-y : auto; } /****************************** Divider ******************************/ hr { border-width : var(--st-border-width); border-color : var(--st-border-color); } /****************************** Box ******************************/ .box { padding : 0.5em 1em; border : var(--st-border-width) solid var(--st-border-color); border-radius : var(--st-border-radius); } /****************************** Semantics Elements ******************************/ header, main { font-size : var(--st-font-size); width : 90%; max-width : 1200px; margin : 0 auto var(--st-space); padding-top : var(--st-space-before); } section, article { font-size : var(--st-font-size); margin : var(--st-space-before) 0; } footer { font-size : var(--st-font-size-s); margin-top : var(--st-space-before); width : 100%; border-top : var(--st-border-width) solid var(--st-border-color); padding-top : var(--st-space); padding-bottom : var(--st-space); color : var(--st-fore-color-alt); background-color : var(--st-bg-color-alt); } footer * { font-size : var(--st-font-size-s); } /****************************** Grid ******************************/ .row { display : flex; flex-flow : row wrap; justify-content : space-between; } .row > :first-child, .gutter > :first-child { margin-left : 0 !important; } .row:last-of-type, .gutter:last-of-type { margin-bottom : 0; } .col { flex : 1; } .row.gutter .col, .row.gutter [class^='col-'], .row.gutter [class*=" col-"], .col.gutter, [class^='col-'].gutter, [class*=" col-"].gutter { margin-left : var(--st-gutter); margin-bottom : var(--st-gutter); } .col-1 { flex : 1; } .col-2 { flex : 2; } .col-3 { flex : 3; } .col-4 { flex : 4; } .col-5 { flex : 5; } .col-6 { flex : 6; } .col-7 { flex : 7; } .col-8 { flex : 8; } .col-9 { flex : 9; } .col-10 { flex : 10; } .col-11 { flex : 11; } .col-12 { flex : 12; } @media screen and (max-width : 768px) { .col, [class^='col-'], [class*=" col-"] { margin : 0.5em 0 !important; flex : 0 0 100%; } } /****************************** Auxiliar classes ******************************/ .hidden { display : none !important; } .text-left { text-align : left; } .text-center { text-align : center; } .text-right { text-align : right; } .size-full-height { min-height : 100vh; } .size-full-width { width : 100%; } .size-full { width : 100%; min-height : 100vh; } .justify-start { display : flex; justify-content : flex-start; } .justify-center { display : flex; justify-content : center; } .justify-end { display : flex; justify-content : flex-end; } .justify-distributed { display : flex; justify-content : space-evenly; } .align-start { display : flex; align-items : flex-start; } .align-center { display : flex; align-items : center; } .align-end { display : flex; align-items : flex-end; } .direction-vertical { display : flex; flex-direction : column; } .direction-horizontal { display : flex; flex-direction : row; } .center { display : flex; flex-direction : column; justify-content : center; align-items : center; } .not-selectable { user-select : none; } .no-wrap { white-space : nowrap; }