more styling

This commit is contained in:
Sam Lavigne 2023-08-20 14:52:48 -04:00
parent b537517baf
commit 0aefd9334d
4 changed files with 95 additions and 12 deletions

View File

@ -408,4 +408,9 @@
padding: 0;
}
}
@media only screen and (max-width: 1400px) {
.filters-holder {
grid-template-columns: repeat(2, 1fr);
}
}
</style>

View File

@ -93,7 +93,7 @@
background-color: #fff;
padding: 10px;
/* border: 1px solid #999; */
border: 1px solid var(--b2);
border: 1px solid var(--b1);
/* box-shadow: 5px 5px 0px #000; */
}
.filter-holder,
@ -113,15 +113,22 @@
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.param-holder {
/* border-top: 1px solid #999; */
border-top: 1px solid var(--b2);
border-top: 1px solid var(--b1);
padding: 10px 0px;
}
.param-holder:last-child {
padding-bottom: 0;
}
.p-value {
display: flex;
}
input[type="range"] {
margin-right: 5px;
}
.p-description {
opacity: 0.8;
font-size: 0.9em;

View File

@ -57,7 +57,7 @@
<div class="holder">
<div class="search">
<input placeholder="Search Filters" on:keyup={update} bind:value={q} />
<input placeholder="Search Filters" on:keyup={update} bind:value={q} type="text" />
<select on:change={reset} bind:value={select}>
<option value="video">Video Filters</option>
<option value="audio">Audio Filters</option>
@ -81,6 +81,14 @@
padding: 10px;
border: 1px solid var(--b1);
}
.search {
display: flex;
justify-items: stretch;
}
input {
flex: 1;
margin-right: 10px;
}
.type {
color: #999;
font-size: 0.8em;

View File

@ -2,14 +2,21 @@
box-sizing: border-box;
}
:root {
/* --b1: #004dff; */
/* --b2: #f19696b3; */
--b1: #004dff;
--b2: #f19696b3;
--b2: #ffdadab3;
/* --b1: #ff0000; */
/* --b2: #b6e3f2b3; */
}
a {
color: #000;
color: var(--b1);
}
a:hover {
background-color: var(--b1);
color: #fff;
}
body {
@ -24,20 +31,76 @@ input,
button {
font: inherit;
}
button, input:not([type="range"]) , select {
border: 1px solid var(--b1);
background-color: white;
box-shadow: 2px 2px 0px var(--b2);
}
button:active {
position: relative;
top: 2px;
left: 2px;
box-shadow: none;
}
video {
width: 100%;
}
h1 {
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
#app {
/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
button {
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
background-color: var(--b1);
border-radius: 0;
height: 0.3rem;
}
button:hover {
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -5px; /* Centers thumb on the track */
/*custom styles*/
background-color: var(--b1);
height: 15px;
width: 10px;
}
button:focus,
button:focus-visible {
input[type="range"]:focus::-webkit-slider-thumb {
/* border: 1px solid #053a5f; */
}
/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: var(--b1);
border-radius: 0;
height: 0.3rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
border: none; /*Removes extra border that FF applies*/
border-radius: 0; /*Removes default border-radius that FF applies*/
/*custom styles*/
background-color: var(--b1);
height: 15px;
width: 10px;
}
input[type="range"]:focus::-moz-range-thumb {
}