diff options
| -rw-r--r-- | ArialPixel.woff2 | bin | 0 -> 2728 bytes | |||
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | src/cs16.css | 214 |
3 files changed, 100 insertions, 117 deletions
diff --git a/ArialPixel.woff2 b/ArialPixel.woff2 Binary files differnew file mode 100644 index 0000000..4084596 --- /dev/null +++ b/ArialPixel.woff2 @@ -13,7 +13,6 @@ /> <meta name="keywords" content="cs 1.6, cs 1.6 css, retro css" /> <meta name="author" content="memdmp" /> - <meta name="fediverse:creator" content="@memdmp@catgirl.center" /> <meta property="og:title" content="cs16-defaults.css" /> <meta @@ -29,6 +28,8 @@ /> <title>cs16-defaults.css</title> + + <meta name="fediverse:creator" content="@memdmp@catgirl.center" /> </head> <body class="cs"> <header> diff --git a/src/cs16.css b/src/cs16.css index 8b3800b..78cc3d5 100644 --- a/src/cs16.css +++ b/src/cs16.css @@ -24,8 +24,11 @@ @font-face { font-family: ArialPixel; - src: url('https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf') - format('truetype'); + src: + url('https://git.estrogen.zone/cs16-defaults.css.git/plain/ArialPixel.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf') format('truetype'), + url('https://dmpmem.codeberg.page/cs16-defaults/@master/ArialPixel.woff2') format('woff2'), + url('https://dmpmem.codeberg.page/cs16-defaults/@master/ArialPixel.ttf') format('truetype'); font-weight: 400; font-style: normal; } @@ -45,11 +48,6 @@ box-sizing: border-box; } - * { - margin: 0; - padding: 0; - } - input, button, textarea, @@ -66,6 +64,8 @@ h6 { overflow-wrap: break-word; font-weight: 400; + margin: 0; + padding: 0; } /* Scrollbars */ @@ -85,8 +85,7 @@ width: 17px; background-color: var(--bg); border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); + border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light); } ::-webkit-scrollbar-corner { @@ -113,23 +112,23 @@ ::-webkit-scrollbar-button:vertical:start, ::-webkit-scrollbar-button:vertical:end { border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); + border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light); } ::-webkit-scrollbar-button:vertical:start:active, ::-webkit-scrollbar-button:vertical:end:active { - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); } ::-webkit-scrollbar-button:vertical:start:active, ::-webkit-scrollbar-button:vertical:start:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E"); } + ::-webkit-scrollbar-button:vertical:end { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E"); } + ::-webkit-scrollbar-button:vertical:end:active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E"); } @@ -145,8 +144,7 @@ font-size: 16px; line-height: 15px; border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); + border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light); user-select: none; &.close { @@ -168,8 +166,7 @@ } &:active { - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); } &:disabled { @@ -209,15 +206,16 @@ outline: none; } - &:focus-visible + .cs-checkbox__label, - &:focus-visible + label { + &:focus-visible+.cs-checkbox__label, + &:focus-visible+label { outline: dotted 2px var(--outline); outline-offset: 3px; } - &:checked + .cs-checkbox__label, - &:checked + label { + &:checked+.cs-checkbox__label, + &:checked+label { color: var(--accent); + &::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); } @@ -225,12 +223,10 @@ } .cs-checkbox__label, - input[type='checkbox']:not(.default-checkbox) + label, - input.cs-checkbox + label, - .cs-checkbox input + label, - label:not(.default-checkbox):has( - input[type='checkbox']:not(.default-checkbox) - ), + input[type='checkbox']:not(.default-checkbox)+label, + input.cs-checkbox+label, + .cs-checkbox input+label, + label:not(.default-checkbox):has(input[type='checkbox']:not(.default-checkbox)), label:has(.cs-checkbox), label.cs-checkbox:has(input) { cursor: pointer; @@ -247,8 +243,7 @@ height: 12px; background-color: var(--secondary-bg); border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); margin-right: 7px; } @@ -256,23 +251,26 @@ color: white; } } - label:not(.default-checkbox):has( - input[type='checkbox']:not(.default-checkbox) - ), + + label:not(.default-checkbox):has(input[type='checkbox']:not(.default-checkbox)), label:has(.cs-checkbox), label.cs-checkbox:has(input) { position: relative; + &:has(input:not(.default-checkbox):focus-visible), &:has(.cs-checkbox:focus-visible) { outline: dotted 2px var(--outline); outline-offset: 3px; } + &::before { margin-right: 3px; } + &:has(input:not(.default-checkbox):checked), &:has(.cs-checkbox:checked) { color: var(--accent); + &::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E"); } @@ -282,34 +280,31 @@ /* Input */ .cs-input, - input:is( - [type='text'], - [type='number'], - [type='email'], - [type='date'], - [type='datetime-local'], - [type='month'], - [type='password'], - [type='search'], - [type='tel'], - [type='text'], - [type='url'], - [type='week'], - [type='datetime'], - [type='input'] - ):not(.default-input) { + input:is([type='text'], + [type='number'], + [type='email'], + [type='date'], + [type='datetime-local'], + [type='month'], + [type='password'], + [type='search'], + [type='tel'], + [type='text'], + [type='url'], + [type='week'], + [type='datetime'], + [type='input']):not(.default-input) { outline: 0; border: 1px solid; padding: 3px 2px 2px; font-size: 1rem; line-height: 1.0625rem; background-color: var(--secondary-bg); - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); color: var(--secondary--text); - &:focus + .cs-input__label, - &:focus + label { + &:focus+.cs-input__label, + &:focus+label { color: var(--accent); } @@ -329,8 +324,8 @@ color: var(--text-3); } - &:disabled + .cs-input__label, - &:disabled + label { + &:disabled+.cs-input__label, + &:disabled+label { color: var(--disabled-text); text-shadow: var(--disabled-text-shadow) 1px 1px; pointer-events: none; @@ -338,31 +333,29 @@ } .cs-input__label, - label:has( - input:is( - [type='text'], - [type='number'], - [type='email'], - [type='date'], - [type='datetime-local'], - [type='month'], - [type='password'], - [type='search'], - [type='tel'], - [type='text'], - [type='url'], - [type='week'], - [type='datetime'], - [type='input'] - ):not(.default-input) - ):not(.default-input) { + label:has(input:is([type='text'], + [type='number'], + [type='email'], + [type='date'], + [type='datetime-local'], + [type='month'], + [type='password'], + [type='search'], + [type='tel'], + [type='text'], + [type='url'], + [type='week'], + [type='datetime'], + [type='input']):not(.default-input)):not(.default-input) { color: var(--secondary--text); -webkit-user-select: none; -moz-user-select: none; user-select: none; + &:has(input:not(.default-input):focus) { color: var(--accent); } + &:has(input:not(.default-input):disabled) { color: var(--disabled-text); text-shadow: var(--disabled-text-shadow) 1px 1px; @@ -387,8 +380,7 @@ padding: 5px 15px 5px 3px; color: var(--secondary--text); border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); user-select: none; &:hover, @@ -422,13 +414,13 @@ margin-bottom: 10px; } - > div { + >div { padding-left: 10px; } &:disabled { input[type='radio'] { - + label { + +label { color: var(--disabled-text); text-shadow: var(--disabled-text-shadow) 1px 1px; pointer-events: none; @@ -445,7 +437,7 @@ input[type='radio'] { opacity: 0; - + label { + +label { position: relative; cursor: pointer; font-size: 16px; @@ -473,11 +465,11 @@ } &:checked { - + label { + +label { color: var(--accent); } - + label::after { + +label::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E"); } } @@ -501,8 +493,7 @@ outline: none; border: 1px solid; box-sizing: border-box; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); } input::-webkit-slider-thumb { @@ -514,8 +505,7 @@ cursor: pointer; border: 1px solid; box-sizing: border-box; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); + border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light); border-radius: 0; } @@ -528,8 +518,7 @@ cursor: pointer; border: 1px solid; box-sizing: border-box; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); + border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light); border-radius: 0; } @@ -549,11 +538,9 @@ margin-left: 4px; height: 5px; width: calc(100% + 5px); - background-image: linear-gradient( - to right, - var(--slider) 1px, - transparent 1px - ); + background-image: linear-gradient(to right, + var(--slider) 1px, + transparent 1px); background-size: 15px 5px; z-index: -1; } @@ -581,8 +568,7 @@ background-color: var(--bg); color: var(--text); border: 1px solid; - border-color: var(--border-light) var(--border-dark) var(--border-dark) - var(--border-light); + border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light); padding: 4px; user-select: none; @@ -663,52 +649,48 @@ padding: 3px; background-color: var(--secondary-bg); border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); .bars { height: 100%; - background-image: linear-gradient( - to right, - var(--accent) 8px, - transparent 2px - ); + background-image: linear-gradient(to right, + var(--accent) 8px, + transparent 2px); background-size: 12px 16px; } } + progress:not(.default-progress) { width: 260px; height: 24px; padding: 3px; background-color: var(--secondary-bg); border: 1px solid; - border-color: var(--border-dark) var(--border-light) var(--border-light) - var(--border-dark); + border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark); position: relative; + &::-moz-progress-bar { background-color: var(--secondary-bg); height: 100%; - background-image: linear-gradient( - 90deg, - transparent 0px, - var(--accent) 0.01px, - var(--accent) 7.99px, - /* FIXME: despite this hack to try to fix it, firefox shows a gradient on the right when zoomed in via swiping (not via ctrl[+-]) */ - transparent 8px - ); + background-image: linear-gradient(90deg, + transparent 0px, + var(--accent) 0.01px, + var(--accent) 7.99px, + /* FIXME: despite this hack to try to fix it, firefox shows a gradient on the right when zoomed in via swiping (not via ctrl[+-]) */ + transparent 8px); background-size: 12px 16px; } + &::-webkit-progress-bar { background-color: var(--secondary-bg); } + &::-webkit-progress-value { background-color: var(--secondary-bg); height: 100%; - background-image: linear-gradient( - to right, - var(--accent) 8px, - transparent 2px - ); + background-image: linear-gradient(to right, + var(--accent) 8px, + transparent 2px); background-size: 12px 16px; } } @@ -745,7 +727,7 @@ z-index: 10; } - .radiotab:checked + .label { + .radiotab:checked+.label { background: var(--bg); padding: 5px; height: 29px; @@ -777,7 +759,7 @@ color: var(--text); } - .radiotab:checked + .label + .panel { + .radiotab:checked+.label+.panel { display: block; position: relative; } |