minor fix for broken styles / animation
This commit is contained in:
parent
5a9fdcdd26
commit
6455f49956
6 changed files with 15 additions and 12 deletions
|
@ -144,7 +144,7 @@ $width-page-constrained: 800px;
|
||||||
&:hover
|
&:hover
|
||||||
{
|
{
|
||||||
opacity: $hover-opacity;
|
opacity: $hover-opacity;
|
||||||
transition: opacity var(--transition-standard);
|
transition: opacity var(--transition-duration) var(--transition-type);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
.icon {
|
.icon {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -28,10 +28,13 @@
|
||||||
|
|
||||||
/* Misc */
|
/* Misc */
|
||||||
--content-max-width: 1000px;
|
--content-max-width: 1000px;
|
||||||
--standard-transition: .225s ease;
|
|
||||||
--nsfw-blur-intensity: 20px;
|
--nsfw-blur-intensity: 20px;
|
||||||
--height-video-embedded: $width-page-constrained * 9 / 16 ;
|
--height-video-embedded: $width-page-constrained * 9 / 16 ;
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--transition-duration: .225s;
|
||||||
|
--transition-type: ease;
|
||||||
|
|
||||||
/* Text */
|
/* Text */
|
||||||
--text-color: #000;
|
--text-color: #000;
|
||||||
--text-max-width: 660px;
|
--text-max-width: 660px;
|
||||||
|
@ -47,9 +50,10 @@
|
||||||
--button-height: $spacing-vertical * 1.5;
|
--button-height: $spacing-vertical * 1.5;
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
--header-bg: #FFF;
|
--header-bg: var(--color-bg);
|
||||||
--header-color: #666;
|
--header-color: #666;
|
||||||
--header-height: $spacing-vertical * 2.5;
|
--header-height: $spacing-vertical * 2.5;
|
||||||
|
--header-shadow: var(--box-shadow-layer);
|
||||||
|
|
||||||
/* Window */
|
/* Window */
|
||||||
--window-bg: var(--color-canvas);
|
--window-bg: var(--color-canvas);
|
||||||
|
|
|
@ -52,7 +52,7 @@ $button-focus-shift: 12%;
|
||||||
.button-primary
|
.button-primary
|
||||||
{
|
{
|
||||||
|
|
||||||
color: inherit;
|
color: var(--button-primary-color);
|
||||||
background-color: var(--button-primary-bg);
|
background-color: var(--button-primary-bg);
|
||||||
box-shadow: var(--box-shadow-layer);
|
box-shadow: var(--box-shadow-layer);
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
|
@ -44,8 +44,7 @@ input[type="text"].input-copyable {
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
transition: outline var(--standar-transition);
|
transition: outline var(--transition-duration) var(--transition-type);
|
||||||
cursor: pointer;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
|
@ -65,7 +64,7 @@ input[type="text"].input-copyable {
|
||||||
@include placeholder {
|
@include placeholder {
|
||||||
//color: lighten($color-text-dark, 60%);
|
//color: lighten($color-text-dark, 60%);
|
||||||
}
|
}
|
||||||
transition: all var(--standar-transition);
|
transition: all var(--transition-duration) var(--transition-type);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 1px;
|
padding-left: 1px;
|
||||||
padding-right: 1px;
|
padding-right: 1px;
|
||||||
|
@ -154,7 +153,7 @@ input[type="text"].input-copyable {
|
||||||
.form-field__error, .form-field__helper {
|
.form-field__error, .form-field__helper {
|
||||||
margin-top: $spacing-vertical * 1/3;
|
margin-top: $spacing-vertical * 1/3;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
transition: opacity var(--standar-transition);
|
transition: opacity var(--transition-duration) var(--transition-type);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field__error {
|
.form-field__error {
|
||||||
|
|
|
@ -50,7 +50,7 @@ $color-header-active: darken($color-header, 20%);
|
||||||
@include border-radius(2px);
|
@include border-radius(2px);
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
&:focus {
|
&:focus {
|
||||||
color: var(--color-header-active);
|
color: $color-header-active;
|
||||||
box-shadow: var(--box-shadow-focus);
|
box-shadow: var(--box-shadow-focus);
|
||||||
border-color: var(--color-primary);
|
border-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
@ -81,12 +81,12 @@ nav.sub-header
|
||||||
}
|
}
|
||||||
&.sub-header-selected
|
&.sub-header-selected
|
||||||
{
|
{
|
||||||
border-bottom: $sub-header-selected-underline-height solid var(--color-header-active);
|
border-bottom: $sub-header-selected-underline-height solid $color-header-active;
|
||||||
color: $color-header-active;
|
color: $color-header-active;
|
||||||
}
|
}
|
||||||
&:hover
|
&:hover
|
||||||
{
|
{
|
||||||
color: var(--color-header-active);
|
color: $color-header-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -125,6 +125,6 @@ video {
|
||||||
top: 0;
|
top: 0;
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--standar-transition);
|
transition: opacity var(--transition-duration) var(--transition-type);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue