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; padding: 0;
} }
} }
@media only screen and (max-width: 1400px) {
.filters-holder {
grid-template-columns: repeat(2, 1fr);
}
}
</style> </style>

View File

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

View File

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

View File

@ -2,14 +2,21 @@
box-sizing: border-box; box-sizing: border-box;
} }
:root { :root {
/* --b1: #004dff; */
/* --b2: #f19696b3; */
--b1: #004dff; --b1: #004dff;
--b2: #f19696b3; --b2: #ffdadab3;
/* --b1: #ff0000; */
/* --b2: #b6e3f2b3; */
} }
a { a {
color: #000; color: var(--b1);
} }
a:hover { a:hover {
background-color: var(--b1);
color: #fff;
} }
body { body {
@ -24,20 +31,76 @@ input,
button { button {
font: inherit; 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 { video {
width: 100%; 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 {
} }