Skip to content

Commit

Permalink
format scss
Browse files Browse the repository at this point in the history 
fixes #116 because of the () in label_input--row:last-child
  • Loading branch information
@ynshung
ynshung committed Sep 27, 2023
1 parent 07de55b commit 7bc2627
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 123 deletions.
33 changes: 16 additions & 17 deletions src/css/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,22 @@
transition: .4s;
border-radius: 27px;

}

.autoplay-slider:hover {
background-color: #3f3f3f;
}

.autoplay-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
&:hover {
background-color: #3f3f3f;
}

&:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
}

input:checked + .autoplay-slider {
Expand Down
205 changes: 99 additions & 106 deletions src/css/popup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,6 @@ tr:not(:first-child):hover {
margin: 5px 0px
}

// svg {
// fill: var(--bg-primary-hover-color);
// transition: all 0.5s ease;
// }

// svg:hover {
// cursor: pointer;
// fill: var(--yt-brand-color) !important;
// }

.container {
width: 280px;
}
Expand Down Expand Up @@ -123,6 +113,11 @@ tr:not(:first-child):hover {
width: 100%;
font-size: 12px;
margin: 0;

&:focus {
outline: 0;
border-color: var(--call-to-action-color);
}
}

label {
Expand All @@ -133,11 +128,6 @@ label {
margin-left: 4px;
}

.textbox:focus {
outline: 0;
border-color: var(--call-to-action-color);
}

.keybind-wrapper {
display: flex;
flex-direction: row;
Expand All @@ -163,18 +153,18 @@ label {
outline: none;
border: none;
cursor: pointer;
}
.edit-btn svg
{
fill: var(--bg-primary-hover-color);
height: 1rem;
width: 1rem;
transition: fill 200ms;
}

.edit-btn:hover svg
{
fill: var(--text-primary-color);
svg {
fill: var(--bg-primary-hover-color);
height: 1rem;
width: 1rem;
transition: fill 200ms;
}

&:hover svg
{
fill: var(--text-primary-color);
}
}

table {
Expand Down Expand Up @@ -259,13 +249,13 @@ a {
text-decoration: none;
cursor: pointer;
transition: color 200ms;
}

.close-btn:hover,
.close-btn:focus {
color: var(--yt-brand-color);
text-decoration: none;
cursor: pointer;
&:hover,
&:focus {
color: var(--yt-brand-color);
text-decoration: none;
cursor: pointer;
}
}

.input-wrapper {
Expand All @@ -287,12 +277,12 @@ a {
width: 30%;
height: 1.5rem;
text-align: center;
}

#keybind-input:focus {
outline: 0;
outline: none !important;
box-shadow: 0 0 3px #00000020;
&:focus {
outline: 0;
outline: none !important;
box-shadow: 0 0 3px #00000020;
}
}

.label_input--row
Expand All @@ -315,6 +305,43 @@ a {
cursor: pointer;
}

&:last-child {
margin-bottom: 0;
}

input[type="number"],
input[type="text"]
{
outline: none;
border: 1px var( --bg-secondary-hover-color ) solid;
background: var( --bg-secondary-hover-color );
color: var(--text-primary-color);
padding: 0 1rem;
border-radius: 100vh;
width: 5rem;

&:focus
{
border: 1px var(--yt-brand-color) solid;
}
}

input[type="checkbox"],
input[type="radio"],
input[type="range"]
{
accent-color: var(--yt-brand-color);
}

input[type="number"] {
-moz-appearance: textfield;

&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
}

// alternate colors for clarity
Expand All @@ -323,48 +350,6 @@ a {
// color: var(--text-secondary-color)
// }

.label_input--row:last-child()
{
margin-bottom: 0;
}


.label_input--row input[type="number"],
.label_input--row input[type="text"]
{
outline: none;
border: 1px var( --bg-secondary-hover-color ) solid;
background: var( --bg-secondary-hover-color );
color: var(--text-primary-color);
padding: 0 1rem;
border-radius: 100vh;
width: 5rem;
}
.label_input--row input[type="number"]:focus,
.label_input--row input[type="text"]:focus
{
border: 2px var(--yt-brand-color) solid;
}


.label_input--row input[type="checkbox"],
.label_input--row input[type="radio"],
.label_input--row input[type="range"]
{
accent-color: var(--yt-brand-color);
}

.label_input--row input[type="number"]::-webkit-outer-spin-button,
.label_input--row input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
.label_input--row input[type="number"] {
-moz-appearance: textfield;
}

/* width */
::-webkit-scrollbar {
width: 0.5rem;
Expand Down Expand Up @@ -456,6 +441,7 @@ a {
gap: 1rem;
max-width: 100%;
margin: 0 auto;
padding-top: 4px;

button, input[type="submit"], input[type="reset"] {
background: none;
Expand Down Expand Up @@ -581,14 +567,15 @@ a {
color: var(--text-primary-color);

transition: background 200ms;
}
.--modal-input:hover
{
background-color: var(--bg-primary-hover-color);
}
.--modal-input:focus
{
background-color: var(--bg-primary-hover-color);

&:hover
{
background-color: var(--bg-primary-hover-color);
}
&:focus
{
background-color: var(--bg-primary-hover-color);
}
}
.--modal-input-error,
.--modal-input-success
Expand All @@ -601,11 +588,11 @@ a {
}
.--modal-input-error
{
color: var(--yt-brand-color)// ! - change to more accurate
color: var(--yt-brand-color)
}
.--modal-input-success
{
color: var(--call-to-action-color)// ! - change to more accurate
color: var(--call-to-action-color)
}

.--modal-label
Expand Down Expand Up @@ -686,24 +673,26 @@ a {
-webkit-transition: .4s;
transition: .4s;
border-radius: 27px;
}

.autoplay-slider:hover {
background-color: #3f3f3f;
&:hover {
background-color: #3f3f3f;
}

&:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
}

.autoplay-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}


input:checked + .autoplay-slider {
background-color: #3f3f3f;
Expand Down Expand Up @@ -757,8 +746,8 @@ input:checked + .autoplay-slider:before {
{
color: var(--text-secondary-color);
text-align: center;
padding: .4rem 0;
font-size: .8rem;
padding-top: 12px;
font-size: .75rem;
word-wrap: balance;
}

Expand All @@ -769,3 +758,7 @@ input:checked + .autoplay-slider:before {
background: var(--bg-secondary-color);
z-index: 10;
}

#extra_features, #extra_options {
padding: 4px 0;
}

0 comments on commit 7bc2627

Please sign in to comment.