Skip to content

Commit

Permalink
Make meters look the same on FF
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Dunn committed Nov 14, 2023
1 parent e990f2f commit 9b36375
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 96 deletions.
206 changes: 111 additions & 95 deletions css/barrel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1942,7 +1942,6 @@ footer.padding {

/*Exception: the first item always growable so it can be the title*/
&> :is(input, select, meter):not(.specificity-hack) {
min-height: 100%;
max-height: 100%;
}

Expand Down Expand Up @@ -2155,120 +2154,137 @@ meter {
padding: 0px;
}

*::-moz-meter-bar {
width: 100% !important;
display: block !important;
flex-grow: 1;
height: 12px;
background: var(--control-bg);
border: var(--thin-border);
border-radius: var(--control-border-radius);
margin-top: calc(calc(var(--control-height) - 12px) / 2);
}

/* WebKit */
/*Try to make it look kinda like webkit*/
@supports (-moz-appearance:none) {
meter {
height: 12px;
margin-top: calc((calc(--control-height-12px))/2);
margin-top: calc((calc(--control-height-12px))/2);
box-shadow: var(--concave-item-box-shadow);
background: var(--concave-item-bg);
min-height: 12px;
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
transition: 0.15s linear width;
}
.tool-bar {
& label {
& meter {
min-height: 12px;
}
}
}

meter::-webkit-meter-bar {
border-color: var(--control-border-color);
background: var(--control-bg);
box-shadow: var(--concave-item-box-shadow);
border-radius: var(--control-border-radius);
}
*::-moz-meter-bar {
width: 100% !important;
display: block !important;
flex-grow: 1;
height: 10px;
background: var(--control-bg);
border: var(--thin-border);
border-radius: var(--control-border-radius);
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
border-radius: var(--control-border-radius);
}
/* WebKit */

meter::-webkit-meter-optimum-value {
background: var(--success-color);
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
transition: 0.15s linear width;
}

meter::-webkit-meter-suboptimum-value {
background: var(--warning-color);
}
meter::-webkit-meter-bar {
border-color: var(--control-border-color);
background: var(--control-bg);
box-shadow: var(--concave-item-box-shadow);
border-radius: var(--control-border-radius);
}

meter::-webkit-meter-even-less-good-value {
background: var(--danger-color);
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
border-radius: var(--control-border-radius);
}

meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--success-color);
}
meter::-webkit-meter-optimum-value {
background: var(--success-color);
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--warning-color);
}
meter::-webkit-meter-suboptimum-value {
background: var(--warning-color);
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--danger-color);
}
meter::-webkit-meter-even-less-good-value {
background: var(--danger-color);
}

meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--success-color);
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--warning-color);
}

/*Catch icons*/
i[class],
button i[class] {
color: var(--graphical-fg);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--danger-color);
}


/*Animation and behavior*/
button,
a,
input,
select,
tr,
label {
transition: color 0.2s ease, background 0.2s ease;
}
/*Catch icons*/
i[class],
button i[class] {
color: var(--graphical-fg);
}

@media (hover: hover) {

button:hover,
.button:hover,
a:hover,
button:hover :not(i, b, small, span),
a:hover :not(i, b, small, span),
.tool-bar>:hover,
.tool-bar>a:hover,
input:not([type='submit']):not([type='range']):hover,
header:not(.undecorated)>:only-child :is(button, .button, input:is([type='submit'], [type='button'])):hover,
header:not(.undecorated)>.tool-bar:only-child :is(input, button, select, a):hover,
input:hover,
select:hover,
tr:hover {
color: var(--accent-color);
--fg: var(--accent-color);
background-color: var(--hover-color)
/*Animation and behavior*/
button,
a,
input,
select,
tr,
label {
transition: color 0.2s ease, background 0.2s ease;
}

/*Non toolbsar things don't have a background normally*/
.tool-bar input[type='range']:hover {
background-color: var(--hover-color);
}
@media (hover: hover) {

.tool-bar label:hover {
background-color: var(--hover-color);
}
button:hover,
.button:hover,
a:hover,
button:hover :not(i, b, small, span),
a:hover :not(i, b, small, span),
.tool-bar>:hover,
.tool-bar>a:hover,
input:not([type='submit']):not([type='range']):hover,
header:not(.undecorated)>:only-child :is(button, .button, input:is([type='submit'], [type='button'])):hover,
header:not(.undecorated)>.tool-bar:only-child :is(input, button, select, a):hover,
input:hover,
select:hover,
tr:hover {
color: var(--accent-color);
--fg: var(--accent-color);
background-color: var(--hover-color)
}

label:hover {
color: var(--accent-color);
}
/*Non toolbsar things don't have a background normally*/
.tool-bar input[type='range']:hover {
background-color: var(--hover-color);
}

}
.tool-bar label:hover {
background-color: var(--hover-color);
}

::selection {
background: var(--highlight-color);
}
label:hover {
color: var(--accent-color);
}

}

::selection {
background: var(--highlight-color);
}

::-moz-selection {
background: var(--highlight-color);
}
::-moz-selection {
background: var(--highlight-color);
}
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<section class="window paper">
<header class="padding"><button>Look! A Header that is a button!</button></header>

<h2>Basic Page</h2>
<h2>🍂Basic Page🌱</h2>

<p>This is a simple test page for barrel.css</p>
<p>It is public domain/CC0, allong with barrel.css itself.</p>
Expand Down Expand Up @@ -44,6 +44,7 @@ <h3>Round feathered images</h3>
<img src="img/barrel_studio.webp" class="round-feathered w-sm-full h-center"
alt="AI generated image of art studio with lots of barrels">


<h3>Components</h3>
<p>We want to keep the number of components very small,
and use semantic HTML for the rest</p>
Expand Down

0 comments on commit 9b36375

Please sign in to comment.