From 51e38b88118490fcd4e1c2c300c4529955df39c1 Mon Sep 17 00:00:00 2001 From: Ifeora Okechukwu Date: Tue, 26 Dec 2023 01:03:52 +0100 Subject: [PATCH 1/4] Update kryeion.css --- src/kryeion.css | 364 +++++++++++++++++++++++++++++++----------------- 1 file changed, 239 insertions(+), 125 deletions(-) diff --git a/src/kryeion.css b/src/kryeion.css index e319048..b6eabfd 100644 --- a/src/kryeion.css +++ b/src/kryeion.css @@ -17,7 +17,9 @@ @supports (height: 100vh) { .expand-fill-vertical { - height: 100vh; + height: 100vh; + height: 100svh; + height: 100dvh; } } @@ -39,7 +41,7 @@ hgroup, nav, section { - display:block; + display: block; } audio, @@ -51,12 +53,26 @@ } /** Base Styles **/ + html { + height: 100vh; + height: 100svh; + height: 100dvh; + position: relative; + color-scheme: light dark; + font-size: 16px; + } body { - margin: 0; - font-size: 13px; - line-height: 1.4; + margin: 0; + padding: 0; + line-height: 1.5; -webkit-font-smoothing: subpixel-antialiased; + height: 100%; + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + display: block; + font-size: 100%; } body, @@ -64,10 +80,15 @@ input, select, textarea { - font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - color: #000; + font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", system-ui, sans-serif; + color: #000000; } + :focus, + :focus-visible { + outline: 0.05cm dotted #CBCBCB; + } + /** Old IE Fixes **/ img { @@ -75,6 +96,14 @@ -ms-interpolation-mode: bicubic; } + @supports (max-inline-size: 100%) and (max-block-size: 100%) { + /* For images to not be able to exceed their container */ + img { + max-inline-size: 100%; + max-block-size: 100%; + } + } + svg:not(:root) { overflow: hidden; } @@ -83,34 +112,49 @@ margin: 0; } + /* Lists */ + + /**** Remove list styles (bullets/numbers) */ + ol, ul, menu { + list-style: none; + } + /** Links **/ - a[href="#"], - a[href="javascript:void(0);"] { - text-decoration:none; + a[href^="#"] { + text-decoration: none; } - a:focus { + a:focus, + a:focus-visible { outline: thin dotted; } a:hover, a:active { - outline: 0; + outline: thin solid; } + /* Reapply the pointer cursor for anchor tags */ + a, button { + cursor: revert; + } + /** Typography **/ h1 { font-size: 2em; /* fixes html5 bug */ - } + } p { - -webkit-hyphens: auto; + -webkit-hyphens: auto; + -ms-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; - hyphens: auto; - margin:0; + hyphens: auto; + overflow-wrap: break-word; + word-wrap: break-word; + margin: 0; } abbr[title] { @@ -134,14 +178,14 @@ ins, .ins { - background: #ff9; - color: #000; + background: #FFFF99; + color: #000000; text-decoration: none; } mark, .mark { - background: #ff0; + background: #FFFF00; color: #000; font-style: italic; } @@ -173,7 +217,7 @@ } blockquote { - margin: 1.5em 40px; + margin: 1.5em 2em; } q { @@ -187,7 +231,7 @@ } ul, ol { - margin: 1.5em 0; + margin: 0; padding: 0; } @@ -222,14 +266,34 @@ padding: 0; } + /* Avoid text overflows */ + h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + word-wrap: break-word; + } + + h1, h2, h3, h4, h5, h6, a { + text-rendering: optimizeSpeed; + } + img, embed, + picture, + canvas, object, audio, video { max-width: 100%; + display: block; } + + /* minimum style to allow to style meter element */ + meter { + -webkit-appearance: revert; + appearance: revert; + } + iframe { border: 0; } @@ -255,11 +319,13 @@ form ol, fieldset ol, fieldset ul { - list-style: none; - list-style-image: none; - margin: 0; - border: 0; + list-style-image: none; } + + /* remove default dot (•) sign */ + ::marker { + content: initial; + } /* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */ @@ -276,109 +342,140 @@ sub { bottom: -0.25em; - bottom:1ex; + bottom: 1ex; } - /** Form Resets **/ + /** Form Elements **/ fieldset { - position:relative; + position: relative; } legend { border: 0; - *margin-left: -7px; + *margin-left: -0.438rem; } button, input, select, textarea { font: inherit; font-family: inherit; line-height: inherit; - } + } - button, select { + button, select { text-transform: none; - } + } - button, - input, - select, - textarea { + /* Safari - solving issue when using user-select:none on the text input doesn't working */ + .yes-webkit input, + .yes-webkit textarea { + -webkit-user-select: auto; + } + + /* Remove built-in styles on input tags */ + .yes-webkit input[type=number]::-webkit-outer-spin-button, + .yes-blink input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + .yes-webkit input[type=number]::-webkit-inner-spin-button, + .yes-blink input[type=number]::-webkit-inner-spin-button{ + display: none; + } + + .yes-moz input[type=number] { + -moz-appearance: textfield; + } + + button, + input, + select, + textarea { + font: inherit; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; - } + } - span.combo-box { + span.combo-box { display:inline-block; - padding:0px 14px 1px 0px; + padding: 0 0.875rem 0.063rem 0; margin:0; position:relative; - border:1px solid #bdbdbd; - } + border: 0.063rem solid #bdbdbd; + } - /* IE 10+ only */ - .form-select::-ms-expand, - select::-ms-expand { + /* IE 10+ only */ + .form-select::-ms-expand, + select::-ms-expand { display: none; - } + } span.combo-box select > option { background-color:#a4a4a4; color:#ffffff; } - span.combo-box > select{ - display:inline-block; - position:absolute; - top:3px; - left:0; - border:none; - width:100%; - -moz-apperance:none; - -webkit-appearance:none; - text-indent: 1px; /* Firefox 30- */ - text-overflow: ''; - appearance:none; - opacity:0; + span.combo-box > select { + display: inline-block; + position: absolute; + top: 0.188rem; + left: 0; + border: none; + width: 100%; + -moz-apperance: -moz-none; + -webkit-appearance: none; + text-indent: 0.063rem; /* Firefox 30- */ + text-overflow: clip; + -o-text-overflow: clip; + appearance: none; + opacity: 0; } span.combo-box[dimed]{ - min-width:60px; + min-width: 3.75rem; } span.combo-box::before, span.combo-box::after { - display:inline-block; - position:relative; - float:left; + display: inline-block; + position: relative; + float: left; } span.combo-box::before { - text-indent:6px; - pointer-events:none; - color:#a424ba; + text-indent: 0.375rem; + pointer-events: none; + color: #A424BA; content: attr(placeholder) " "; } - span.combo-box::after{ + span.combo-box::after { content: "\25bc"; - width: 2px; + width: 0.125rem; font-size: 60%; - height: 2px; - top:5px; - margin-left: 8px; + height: 0.125rem; + top: 0.313rem; + margin-left: 0.5rem; pointer-events: none; } + @supports (white-space: revert) { + /* revert the 'white-space' property for textarea elements on Safari */ + textarea { + white-space: revert; + } + } + textarea { overflow: auto; - vertical-align: top; + vertical-align: top; } - button, - input { + .old-webkit button, + .old-webkit input { line-height: normal; } @@ -396,7 +493,7 @@ input[type="password"]:invalid, input[type="text"]:invalid, input[type="email"]:invalid { - border: 1px solid #F2000B; + border: 0.063rem solid #F2000B; color: #F2000B; -webkit-box-shadow: none; -moz-box-shadow: none; @@ -433,7 +530,7 @@ [aria-os-data="Macintosh"] input, [aria-os-data="Macintosh"] textarea { - -webkit-text-stroke-width:.2px; + -webkit-text-stroke-width: 0.013rem; } .yes-moz .full-screener:-moz-full-screen, @@ -441,17 +538,18 @@ .yes-blink .full-screener:-webkit-full-screen, .yes-ms .full-screener:-ms-fullscreen, .full-screener:fullscreen { - background-color:rgba(0,0,0, 0.32); + background-color: rgba(0, 0, 0, 0.32); } + /* reset default text opacity of input placeholder */ .yes-webkit ::-webkit-input-placeholder, /* Chrome 4-51/Safari */ .yes-blink ::-webkit-input-placeholder, /* Chrome 52+/Opera 15+ */ .yes-moz :-moz-placeholder, /* Firefox 18- */ - .yes-ms ::-moz-placeholder, /* Firefox 19+ */ + .yes-moz ::-moz-placeholder, /* Firefox 19+ */ .yes-ms :-ms-input-placeholder, /* Edge/IE 10 */ .yes-ms ::-ms-input-placeholder, /* Edge 15+/IE 11 */ ::placeholder { - color:#e4e4e4; + color: #E4E4E4; } .yes-webkit input[type=date]::-webkit-clear-button, @@ -466,22 +564,13 @@ display: none; } - input[type=number]::-webkit-outer-spin-button, - input[type=number]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } - - input[type=number] { - -moz-appearance:textfield; - } - - input[type=date]::-webkit-datetime-edit { - letter-spacing:0; + .yes-webkit input[type=date]::-webkit-datetime-edit { + letter-spacing: 0; } input[type=range], input[as-range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ + -moz-appearance: -moz-none; width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } @@ -588,18 +677,17 @@ -webkit-box-sizing: border-box; -o-box-sizing:border-box; box-sizing: border-box; - outline: 0 !important; } svg, math { -ms-box-sizing: inherit; -moz-box-sizing: inherit; -webkit-box-sizing: inherit; - box-sizing: inherit; + box-sizing: inherit; } - html.full-text-size { - font-size:100%; + .full-text-size { + font-size: 100%; } html.full-height, @@ -619,10 +707,6 @@ text-size-adjust: 100%; text-rendering: optimizelegibility; } - - h1, h2, h3, h4, h5, h6, a { - text-rendering: optimizeSpeed; - } [role="header"], [role="footer"], @@ -652,27 +736,27 @@ strike, .strike { - text-decoration:line-through; + text-decoration: line-through; } .smaller-text { - font-size:xx-small; + font-size: xx-small; } .small-text { - font-size:small; + font-size: small; } .medium-text { - font-size:large; + font-size: large; } .large-text { - font-size:x-large; + font-size: x-large; } .larger-text { - font-size:xx-large; + font-size: xx-large; } .text-lowercase { @@ -689,16 +773,17 @@ } .text-hide { - text-indent:-9999px; + text-indent: -9999px; color: transparent; text-shadow: none; - background-color:transparent; - border:0; + background-color: transparent; + border: 0; } .text-truncate { - text-overflow:ellipsis; - white-space:nowrap; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; overflow: auto; } @@ -706,11 +791,15 @@ overflow: hidden; } + .text-truncate.clip-overflow { + overflow: clip; + } + .text-wrap { overflow-wrap: break-word; - word-break: break-all; word-wrap: break-word; - -webkit-hyphens: auto; + -webkit-hyphens: auto; + -ms-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; hyphens: auto; @@ -728,23 +817,48 @@ .text-rightmost, .no-flexbox .tab-box.anchor-right { - text-align:right; + text-align: right; } .no-flexbox .push-to-left { - float:left; + float: left; } .no-flexbox .push-to-right { - float:right; + float: right; } .flexbox .push-to-left { - justify-self:flex-start; + justify-self: flex-start; } .flexbox .push-to-right { - justify-self:flex-end; + justify-self: flex-end; + } + + .flexbox .flex-flexible { + flex: auto; /* Override back to default */ + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + } + + .flexbox .flex-fixed-\[\+350\] { + flex-basis: 21.875rem; + } + + .flexbox .flex-fixed-collaspable { + flex-shrink: 0; + -webkit-flex-shrink: 0; + min-width: 0; + } + + .flexbox .flex-fluid { + flex-basis: auto; /* Override back to default */ + flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; } .text-centered.complete, @@ -754,21 +868,21 @@ } .kr-transparency-30 { - opacity:0.7; - -ms-filter:"alpha(opacity=70)"; - filter:alpha(opacity=70); + opacity: 0.7; + -ms-filter: "alpha(opacity=70)"; + filter: alpha(opacity=70); } .kr-transparency-50 { - opacity:0.5; - -ms-filter:"alpha(opacity=50)"; - filter:alpha(opacity=50); + opacity: 0.5; + -ms-filter: "alpha(opacity=50)"; + filter: alpha(opacity=50); } .kr-transparency-80 { - opacity:0.2; - -ms-filter:"alpha(opacity=20)"; - filter:alpha(opacity=20); + opacity: 0.2; + -ms-filter: "alpha(opacity=20)"; + filter: alpha(opacity=20); } .kr-spaced[data-left-measure]::before { From e9a68d33944cf232e8370a3e9f609bb3e9fcde46 Mon Sep 17 00:00:00 2001 From: Ifeora Okechukwu Date: Mon, 1 Jan 2024 02:41:40 +0100 Subject: [PATCH 2/4] chore: update units from px to rem --- src/kryeion.css | 203 +++++++++++++++++++++++++----------------------- 1 file changed, 106 insertions(+), 97 deletions(-) diff --git a/src/kryeion.css b/src/kryeion.css index b6eabfd..2b73ee7 100644 --- a/src/kryeion.css +++ b/src/kryeion.css @@ -4,7 +4,8 @@ /**! * @version: v0.1.7 * @name: Kryeion (https://github.com/isocroft/Kryeion) - * @copyright: Copyright (c) 2017 - 2022, Stitch - Oparand Ltd. + * @copyright: Copyright (c) 2017 - 2024, Stitch - Oparand Ltd. + * * @license: MIT (https://github.com/iscroft/Kryeion/blob/master/LICENSE) * * @author: Ifeora Okechukwu (https://twitter.com/isocroft - @isocroft) @@ -812,7 +813,7 @@ .text-centered, .no-flexbox .tab-box.anchor-middle { - text-align:center; + text-align: center; } .text-rightmost, @@ -887,143 +888,152 @@ .kr-spaced[data-left-measure]::before { content: '.'; - margin-left:attr(data-left-measure) !important; + margin-left: attr(data-left-measure) !important; } .kr-spaced[data-right-measure]::before { content: '.'; - margin-right:attr(data-left-measure) !important; + margin-right: attr(data-left-measure) !important; } .kr-spaced[data-top-measure]::before { content: '.'; - margin-left:attr(data-top-tag) !important; + margin-left: attr(data-top-tag) !important; } .kr-spaced[data-bottom-measure]::before { content: '.'; - margin-bottom:attr(data-bottom-measure) !important; + margin-bottom: attr(data-bottom-measure) !important; } .card, .relative, .modal-boxing, .button-sub-pack[role="dropdwn-box"] { - position:relative; + position: relative; } .absolute, .modal-container, .operamini .fixed, .button-sub-pack > .button-dropdown { - position:absolute; + position: absolute; } .fixed, .modal { - position:fixed; + position: fixed; } .sticky { position: -webkit-sticky; position: sticky; - top: -1px; + top: 0; } + .sticky.offset-\[x1\] { + top: 0.625rem; + } + + .sticky.offset-\[x2\] { + top: 1.25rem; + } + .snap-off { - top:0; - left:-9999px; + top: 0; + left: -9999px; } .snap-top { - top:0; - left:auto; + top: 0; + left: auto; } .snap-left { - top:auto; - left:0; + top: auto; + left: 0; } .snap-bottom { - top:auto; - bottom:0; + top: auto; + bottom: 0; } .snap-right { - left:auto; - right:0; + left: auto; + right: 0; } .snap-center-axis { - top:50%; - left:50%; - margin-left:-25%; - margin-top:-25%; + top: 50%; + left: 50%; + margin-left: -25%; + margin-top: -25%; } .snap-top-center{ top: 50%; - left:auto; + left: auto; } .snap-left-center{ top: auto; - left:50%; + left: 50%; } .snap-top-left-center { - top:0; - left:50%; + top: 0; + left: 50%; } .snap-left-top-center { - top:50%; - left:0; + top: 50%; + left: 0; } .snap-top-left { - top:0; - right:auto; - left:0; + top: 0; + right: auto; + left: 0; } .snap-top-right { - top:0; - left:auto; - right:0; + top: 0; + left: auto; + right: 0; } .full-width { - max-width:100%; + max-width: 100%; + width: 100%; *width: expression(this.clientWidth > this.parentNode.clientWidth ? this.parentNode.clientWidth + "px" : this.clientWidth + "px"); margin-left:0; margin-right:0; } .gridded-container { - margin-left:auto; - margin-right:auto; + margin-left: auto; + margin-right: auto; position: relative; } [aria-view-mode="tv"] .gridded-container { - max-width:1180px; + max-width: 73.75rem; *width: expression(document.body.clientWidth > 1179 ? "1180px" : "auto" ); } [aria-view-mode="desktop"] .gridded-container { - max-width:980px; + max-width: 61.25rem; *width: expression(document.body.clientWidth > 979 ? "980px" : "auto" ); } [aria-view-mode="tablet"] .gridded-container { - max-width:690px; + max-width: 43.125rem; *width:expression(document.body.clientWidth > 689 ? "690px" : "auto" ); } [aria-view-mode="mobile"] .gridded-container { - max-width:100%; + max-width: 100%; *width: expression(this.clientWidth > this.parentNode.clientWidth ? this.parentNode.clientWidth + "px" : this.clientWidth + "px"); margin-left:0; margin-right:0; @@ -1031,13 +1041,13 @@ /* CSS Tricks - [adapted from Chris Coyier] https://css-tricks.com/almanac/properties/b/box-shadow/ */ - .add-shadow { - margin: 40px; - background-color: rgb(68,68,68); /* Needed for IEs */ - -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); - -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); - -o-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); - box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); + .add-full-shadow { + margin: 2.5rem; + background-color: rgb(68, 68, 68); /* Needed for IEs */ + -moz-box-shadow: 0.313rem 0.313rem 0.313rem 0 rgba(68, 68, 68, 0.6); + -webkit-box-shadow: 0.313rem 0.313rem 0.313rem 0 rgba(68, 68, 68, 0.6); + -o-box-shadow: 0.313rem 0.313rem 0.313rem 0 rgba(68, 68, 68, 0.6); + box-shadow: 0.313rem 0.313rem 0.313rem 0 rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; @@ -1054,16 +1064,16 @@ audio:not([controls]), [conceal] { - display:none; + display: none; } .hidden, [hidden] { - display:block; - visibility:hidden; - opacity:0; - -ms-filter:"alpha(opacity=0)"; - filter:alpha(opacity=0); + display: block; + visibility: hidden; + opacity: 0; + -ms-filter: "alpha(opacity=0)"; + filter: alpha(opacity=0); } .draggable, @@ -1078,24 +1088,23 @@ } img[longdesc]::after { - content:attr(longdesc); - display:inline-block; - position:relative; - top:120%; + content: attr(longdesc); + display: inline-block; + position: relative; + top: 120%; } ul:empty { - height:100px; - line-height:100px; + min-height: 0; } ul:empty::before { - content:attr(data-empty-text); - display:block; - text-align:center; - text-transform:capitalize; - color: #32e1f0; - font-weight:bold; + content: attr(data-empty-text); + display: block; + text-align: center; + text-transform: capitalize; + color: #32E1F0; + font-weight: bold; } /* Images */ @@ -1113,49 +1122,49 @@ /* Stylish Heading / Content Rule */ .kr-hr { - background-color:transparent !important; - margin:20px 1px 35px; - padding:10px 15px !important; - position:relative; - border-bottom:1px solid #acacac !important; + background-color: transparent !important; + margin: 1.25rem 0.063rem 2.188rem; + padding: 0.625rem 15px !important; + position: relative; + border-bottom: 0.063rem solid #ACACAC !important; } .kr-hr:before { - position:absolute; - display:block; - border-color:transparent; - border-style:solid; - bottom:-14px; - left:45px; - border-top-color:#acacac; + position: absolute; + display: block; + border-color: transparent; + border-style: solid; + bottom: -14px; + left: 45px; + border-top-color:#ACACAC; content:" "; - border-width:7px; - box-sizing:border-box !important; - z-index:2; + border-width: 7px; + box-sizing: border-box !important; + z-index: 2; } .kr-hr:after { position:absolute; - display:block; - border-color:transparent; - border-style:solid; - bottom:-11px; - left:46px; - border-top-color:#ffffff; - content:" "; - border-width:6px; - box-sizing:border-box !important; - z-index:2; + display: block; + border-color: transparent; + border-style: solid; + bottom: -11px; + left: 46px; + border-top-color: #FFFFFF; + content: " "; + border-width: 6px; + box-sizing: border-box !important; + z-index: 2; } /* Icons */ i.kr-icon { display:inline-block; - padding:6px; - text-align:center; - line-hieght:16px; - width:23px; /* 1em */ + padding: 6px; + text-align: center; + line-hieght: 16px; + width: 23px; /* 1em */ /* height:23px; 1em */ box-sizing:content-box !important; } From d08b67f4dcd000c4d98663461b753ef42534a8e8 Mon Sep 17 00:00:00 2001 From: Ifeora Okechukwu Date: Mon, 22 Jul 2024 18:19:31 +0100 Subject: [PATCH 3/4] Update kryeion.css --- src/kryeion.css | 159 +++++++++++++++++++++++------------------------- 1 file changed, 75 insertions(+), 84 deletions(-) diff --git a/src/kryeion.css b/src/kryeion.css index 2b73ee7..1325736 100644 --- a/src/kryeion.css +++ b/src/kryeion.css @@ -2,9 +2,9 @@ /**! - * @version: v0.1.7 + * @version: v0.1.8 * @name: Kryeion (https://github.com/isocroft/Kryeion) - * @copyright: Copyright (c) 2017 - 2024, Stitch - Oparand Ltd. + * @copyright: Copyright (c) 2017 - 2024, Coolcodes. * * @license: MIT (https://github.com/iscroft/Kryeion/blob/master/LICENSE) * @@ -16,19 +16,12 @@ /* ==== CUSTOM SETUPS [SETTINGS] ==== */ - @supports (height: 100vh) { - .expand-fill-vertical { - height: 100vh; - height: 100svh; - height: 100dvh; - } - } - - @supports not (height:100vh) { - .expand-fill-vertical { - height:100%; - } - } + .expand-fill-vertical { + height:100%; + height: 100vh; + height: 100svh; + height: 100dvh; + } /* ===== CUSTOM RESET CSS [GENERICS] ===== */ @@ -82,12 +75,12 @@ select, textarea { font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", system-ui, sans-serif; - color: #000000; + color: var(--resetGlobalFgColor); } :focus, :focus-visible { - outline: 0.05cm dotted #CBCBCB; + outline: var(--resetOutline); } /** Old IE Fixes **/ @@ -115,9 +108,14 @@ /* Lists */ - /**** Remove list styles (bullets/numbers) */ ol, ul, menu { - list-style: none; + margin: 0; + } + + + [role] ol, [role] ul, [role] menu { + /**** Remove list styles (bullets/numbers) */ + list-style: none; } /** Links **/ @@ -126,11 +124,6 @@ text-decoration: none; } - a:focus, - a:focus-visible { - outline: thin dotted; - } - a:hover, a:active { outline: thin solid; @@ -179,24 +172,24 @@ ins, .ins { - background: #FFFF99; - color: #000000; + background-color: var(--resetInsBgColor); + color: var(--resetGlobalFgColor); text-decoration: none; } mark, .mark { - background: #FFFF00; - color: #000; + background-color: var(--resetMarkBgColor); + color: var(--resetGlobalFgColor); font-style: italic; } hr { display: block; - height: 1px; + height: var(--resetDefaultBoxDimension); border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; + border-top: var(--resetHrTopBorder); + margin: var(--resetHrMargin); padding: 0; } @@ -207,8 +200,8 @@ -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace, serif; - *font-family: 'Courier New'; /* supporting IE 6 / 7 */ - font-size: 1em; + *font-family: var(--resetFontFamilyIE); /* supporting IE 6 / 7 */ + font-size: var(--resetDefaultFontSize); } pre { @@ -231,21 +224,17 @@ content: none; } - ul, ol { - margin: 0; - padding: 0; - } - /* Normalizations */ + /* Take care of Safari screen reader as well */ html, body, div, p, - ol, - ul, li, dl, + ul[role="list"], + ol[role="list"], dt, dd, blockquote, @@ -270,7 +259,8 @@ /* Avoid text overflows */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; - word-wrap: break-word; + white-space: pre-wrap; + word-wrap: break-word; } h1, h2, h3, h4, h5, h6, a { @@ -310,16 +300,12 @@ text-align: left; } - nav ul, - div ul, - aside ul, - nav ol, - [class*="widget"] ol, - [class*="widget"] ul, - form ul, - form ol, - fieldset ol, - fieldset ul { + nav > ul, + aside ul, + nav > ol, + [class] ol, + [class] ul, + form > ul { list-style-image: none; } @@ -342,7 +328,7 @@ } sub { - bottom: -0.25em; + bottom: var(--resetSubBottomOffsetStatic); bottom: 1ex; } @@ -354,7 +340,7 @@ legend { border: 0; - *margin-left: -0.438rem; + *margin-left: var(--resetLegendLeftOffsetStatic); } button, input, select, textarea { @@ -400,12 +386,12 @@ *vertical-align: middle; } - span.combo-box { + span[data-combobox] { display:inline-block; - padding: 0 0.875rem 0.063rem 0; + padding: var(--utilityComboPadding); margin:0; position:relative; - border: 0.063rem solid #bdbdbd; + border: var(--utilityComboBorder); } /* IE 10+ only */ @@ -414,50 +400,53 @@ display: none; } - span.combo-box select > option { - background-color:#a4a4a4; - color:#ffffff; + span[data-combobox] select > option { + background-color: var(--utilityComboBgColor); + color: var(--utilityComboFgColor); } - span.combo-box > select { + span[data-combobox] > select { display: inline-block; position: absolute; - top: 0.188rem; + top: var(--utilityComboTopOffsetAbsolute); left: 0; border: none; width: 100%; -moz-apperance: -moz-none; -webkit-appearance: none; - text-indent: 0.063rem; /* Firefox 30- */ text-overflow: clip; -o-text-overflow: clip; appearance: none; opacity: 0; } - span.combo-box[dimed]{ + .yes-moz span[data-combobox] > select { + text-indent: var(--utilityComboTextIndent); /* Firefox 30- */ + } + + span[data-combobox][dimed]{ min-width: 3.75rem; } - span.combo-box::before, - span.combo-box::after { + span[data-combobox]::before, + span[data-combobox]::after { display: inline-block; position: relative; float: left; } - span.combo-box::before { - text-indent: 0.375rem; + span[data-combobox]::before { + text-indent: var(--utilityComboBeforePseudoTextIndent); pointer-events: none; - color: #A424BA; + color: var(--utilityComboBeforePseudoFgColor); content: attr(placeholder) " "; } - span.combo-box::after { + span[data-combobox]::after { content: "\25bc"; - width: 0.125rem; + width: var(--utilityComboAfterPseudoBoxDimension); font-size: 60%; - height: 0.125rem; + height: var(--utilityComboAfterPseudoBoxDimension); top: 0.313rem; margin-left: 0.5rem; pointer-events: none; @@ -465,7 +454,7 @@ @supports (white-space: revert) { /* revert the 'white-space' property for textarea elements on Safari */ - textarea { + .yes-safari textarea { white-space: revert; } } @@ -494,8 +483,8 @@ input[type="password"]:invalid, input[type="text"]:invalid, input[type="email"]:invalid { - border: 0.063rem solid #F2000B; - color: #F2000B; + border: var(--resetFormElementBorderColor); + color: var(--resetFormElementFgColor); -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; @@ -525,13 +514,15 @@ .yes-moz button::-moz-focus-inner, .yes-moz input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } [aria-os-data="Macintosh"] input, - [aria-os-data="Macintosh"] textarea { - -webkit-text-stroke-width: 0.013rem; + [aria-os-data="MacIntel"] input, + [aria-os-data="Macintosh"] textarea, + [aria-os-data="MacIntel"] textarea { + -webkit-text-stroke-width: var(--resetTextStrokeWidth); } .yes-moz .full-screener:-moz-full-screen, @@ -539,7 +530,7 @@ .yes-blink .full-screener:-webkit-full-screen, .yes-ms .full-screener:-ms-fullscreen, .full-screener:fullscreen { - background-color: rgba(0, 0, 0, 0.32); + background-color: var(--utilityFullscreenBgColor); } /* reset default text opacity of input placeholder */ @@ -550,7 +541,7 @@ .yes-ms :-ms-input-placeholder, /* Edge/IE 10 */ .yes-ms ::-ms-input-placeholder, /* Edge 15+/IE 11 */ ::placeholder { - color: #E4E4E4; + color: var(--resetFormElementPlaceholderColor); } .yes-webkit input[type=date]::-webkit-clear-button, @@ -579,10 +570,10 @@ .yes-webkit input[type=range]::-webkit-slider-thumb, .yes-moz input[type=range]::-moz-range-thumb, .yes-ms input[type=range]::-ms-thumb { - border: 1px solid transparent; - height: 16px; - width: 16px; - background-color: #777777; + border: var(--resetdefaultBorderHidden); + height: var(--resetDefaultWidgetDimension); + width: var(--resetDefaultWidgetDimension); + background-color: var(--resetDefaultFormElementBgColor); cursor: pointer; } From 47673ccb11f2ef5cd5e30c693b8240d5f1e932e1 Mon Sep 17 00:00:00 2001 From: Ifeora Okechukwu Date: Tue, 23 Jul 2024 05:32:03 +0100 Subject: [PATCH 4/4] Update kryeion.css --- src/kryeion.css | 165 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 126 insertions(+), 39 deletions(-) diff --git a/src/kryeion.css b/src/kryeion.css index 1325736..4fff816 100644 --- a/src/kryeion.css +++ b/src/kryeion.css @@ -17,7 +17,7 @@ /* ==== CUSTOM SETUPS [SETTINGS] ==== */ .expand-fill-vertical { - height:100%; + height: 100%; height: 100vh; height: 100svh; height: 100dvh; @@ -53,28 +53,23 @@ height: 100dvh; position: relative; color-scheme: light dark; - font-size: 16px; + font-size: var(--resetDefaultFontSize); } body { margin: 0; padding: 0; - line-height: 1.5; + line-height: var(--baseGlobalFontLineHeight); -webkit-font-smoothing: subpixel-antialiased; height: 100%; - box-sizing: content-box; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - display: block; - font-size: 100%; + font-size: var(--baseGlobalRelativeFontSize); + font-family: var(--baseGlobalFontFamily); } - - body, + button, input, - select, + select, textarea { - font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", system-ui, sans-serif; color: var(--resetGlobalFgColor); } @@ -87,17 +82,17 @@ img { border: 0; - -ms-interpolation-mode: bicubic; - } - - @supports (max-inline-size: 100%) and (max-block-size: 100%) { - /* For images to not be able to exceed their container */ - img { - max-inline-size: 100%; - max-block-size: 100%; - } + -ms-interpolation-mode: bicubic; } + @supports (max-inline-size: 100%) and (max-block-size: 100%) { + /* For images to not be able to exceed their container */ + img { + max-inline-size: 100%; + max-block-size: 100%; + } + } + svg:not(:root) { overflow: hidden; } @@ -263,7 +258,7 @@ word-wrap: break-word; } - h1, h2, h3, h4, h5, h6, a { + h1, h2, h3, h4, h5, h6, p, a { text-rendering: optimizeSpeed; } @@ -289,7 +284,7 @@ border: 0; } - table { + [class] table { border-collapse: collapse; border-spacing: 0; } @@ -400,12 +395,21 @@ display: none; } - span[data-combobox] select > option { + .fa-icon { + display:inline-block; + font:normal normal normal 14px/1 FontAwesome; + font-size:inherit; + text-rendering:auto; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + } + + span[data-combobox] select > option { background-color: var(--utilityComboBgColor); color: var(--utilityComboFgColor); - } + } - span[data-combobox] > select { + span[data-combobox] > select { display: inline-block; position: absolute; top: var(--utilityComboTopOffsetAbsolute); @@ -418,40 +422,123 @@ -o-text-overflow: clip; appearance: none; opacity: 0; - } + } - .yes-moz span[data-combobox] > select { - text-indent: var(--utilityComboTextIndent); /* Firefox 30- */ - } + .yes-moz span[data-combobox] > select { + text-indent: var(--utilityComboTextIndent); /* Firefox 30- */ + } - span[data-combobox][dimed]{ + span[data-combobox][dimed]{ min-width: 3.75rem; - } + } - span[data-combobox]::before, - span[data-combobox]::after { + span[data-combobox]::before, + span[data-combobox]::after { display: inline-block; position: relative; float: left; - } + } - span[data-combobox]::before { + span[data-combobox]::before { text-indent: var(--utilityComboBeforePseudoTextIndent); pointer-events: none; color: var(--utilityComboBeforePseudoFgColor); content: attr(placeholder) " "; - } + } - span[data-combobox]::after { + span[data-combobox]::after { content: "\25bc"; width: var(--utilityComboAfterPseudoBoxDimension); - font-size: 60%; + font-size: var(--utilityComboAfterPseudoFontSize); height: var(--utilityComboAfterPseudoBoxDimension); top: 0.313rem; margin-left: 0.5rem; pointer-events: none; } + [data-menubox] { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--utilityMenuBoxPadding); + } + + [data-menubox]:before { + content: attr(data-placeholder) " "; + } + + [data-menubox]:after { + content: "\f0da"; + font-family: FontAwesome; + } + + span[data-description] { + text-decoration: underline; + cursor: help; + } + + span[data-description], + [aria-label] { + position: relative; + color: #0000FF; + isolation: isolate; + } + + input[placeholder]:focus:after { + content: attr(placeholder); + } + + span[data-description]:hover:after { + content: attr(data-description); + } + + [aria-label]:hover:after { + content: attr(aria-label); + } + + span[data-description]:hover:after, + [aria-label]:hover:after, + input[placeholder]:focus:after { + position: absolute; + left: 0; + top: -100%; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; + } + + + [data-initials] { + align-items: center; + display: flex; + font-size: 20px ; + margin: 10px 0px 10px 0px; + } + + [data-initials]:before { + align-items: center; + content: attr(data-initials) ; + display: flex ; + justify-content: center ; + + background-color: #111111; + border-radius: 100%; + color: #ffffff; + font-family: monospace; + font-size: 12px; + font-weight: 600; + height: 36px; + letter-spacing: 1px; + line-height: 1; + margin-right: 10px; + text-transform: uppercase; + } + @supports (white-space: revert) { /* revert the 'white-space' property for textarea elements on Safari */ .yes-safari textarea {