mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-03 08:57:54 +00:00
Attempt to fix styles with additional class nesting
This commit is contained in:
Brandon Thomas committed
1 parent
a3cc57a09c
commit
6ebf4b1e2d
4 files changed
+921
-888
No files matched your search
+363
-349
@@ -14,354 +14,366 @@ $footer-font-family: "Fira Sans Condensed", sans-serif;
|
||||
$textarea-font-family: "Fira Sans", sans-serif;
|
||||
$headings-font-family: "Merriweather", serif;
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300; // For Fira Sans
|
||||
color: $white;
|
||||
//background gradient
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
background: rgb(13, 16, 25) !important;
|
||||
|
||||
background: linear-gradient(
|
||||
325deg,
|
||||
rgba(13, 16, 25, 1) 0%,
|
||||
rgba(42, 21, 34, 1) 55%,
|
||||
rgba(16, 14, 26, 1) 100%
|
||||
) !important;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
// Style for user text input that overflows
|
||||
.overflow-fix {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
//old wrapper
|
||||
// .mainwrap {
|
||||
// max-width: 800px;
|
||||
// margin: auto;
|
||||
// }
|
||||
|
||||
canvas#spectrogram {
|
||||
margin: 0.5em 0;
|
||||
transform: scaleY(-1);
|
||||
/* Spectrograms are flipped */
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*p {
|
||||
a:link,
|
||||
a:visited {
|
||||
color: rgb(119, 165, 235);
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover,
|
||||
a:active{
|
||||
color: rgb(85, 133, 204);
|
||||
font-weight: bold;
|
||||
}
|
||||
}*/
|
||||
|
||||
// p {
|
||||
// a:before {
|
||||
// content: " ";
|
||||
// }
|
||||
// }
|
||||
|
||||
#main {
|
||||
position: relative; // Footer attachment.
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
$footer-height: 2rem;
|
||||
|
||||
#viewable {
|
||||
padding-bottom: $footer-height;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-family: $footer-font-family;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute; // Footer attachment.
|
||||
bottom: 0;
|
||||
// NB: Setting explicit height doesn't appear to be necessary, and
|
||||
// it was creating an annoying scrollbar.
|
||||
//height: $footer-height;
|
||||
color: $light-text-color;
|
||||
}
|
||||
|
||||
.social {
|
||||
img {
|
||||
max-width: 70px;
|
||||
max-height: 70px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Tech logos need a hack to not have margin.
|
||||
.vocodes-grid-marginless {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: $nav-font-family;
|
||||
|
||||
.navbar {
|
||||
z-index: 2;
|
||||
// Old design parents all elements with class "fakeyou-old"
|
||||
// Refresh design parents all elements with class "fakeyou-refresh"
|
||||
//
|
||||
// The reason for this is that WebPack imports and packs all SCSS files, which
|
||||
// makes it impossible to dynamically change styles.
|
||||
//
|
||||
// Once the rollout is complete, this outer wrapper class can be removed.
|
||||
.fakeyou-refresh {
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300; // For Fira Sans
|
||||
color: $white;
|
||||
//background gradient
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-toggler {
|
||||
border: none;
|
||||
.bg-gradient {
|
||||
background: rgb(13, 16, 25) !important;
|
||||
|
||||
background: linear-gradient(
|
||||
325deg,
|
||||
rgba(13, 16, 25, 1) 0%,
|
||||
rgba(42, 21, 34, 1) 55%,
|
||||
rgba(16, 14, 26, 1) 100%
|
||||
) !important;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding-left: 16px !important;
|
||||
padding-right: 16px !important;
|
||||
color: $light-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// Style for user text input that overflows
|
||||
.overflow-fix {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: 0;
|
||||
//old wrapper
|
||||
// .mainwrap {
|
||||
// max-width: 800px;
|
||||
// margin: auto;
|
||||
// }
|
||||
|
||||
canvas#spectrogram {
|
||||
margin: 0.5em 0;
|
||||
transform: scaleY(-1);
|
||||
/* Spectrograms are flipped */
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:active {
|
||||
background-color: $primary;
|
||||
/*p {
|
||||
a:link,
|
||||
a:visited {
|
||||
color: rgb(119, 165, 235);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-color: rgba($white, 0.12) !important;
|
||||
border: 1px solid;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 5px 20px rgba($black, 0.3);
|
||||
}
|
||||
|
||||
.nav-bg-dark {
|
||||
background-color: #17101c !important;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.nav-login {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.6);
|
||||
text-decoration: none;
|
||||
a:hover,
|
||||
a:active{
|
||||
color: rgb(85, 133, 204);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
a.top-bar-text:hover {
|
||||
color: $primary !important;
|
||||
}
|
||||
// p {
|
||||
// a:before {
|
||||
// content: " ";
|
||||
// }
|
||||
// }
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba($white, 0.04);
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
backdrop-filter: blur(5px);
|
||||
border-bottom: 1px solid;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
.top-bar-text {
|
||||
color: rgba($white, 0.7);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider-white {
|
||||
border-top: 1px solid rgba($white, 0.15);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
#status {
|
||||
.info {
|
||||
color: #888888;
|
||||
#main {
|
||||
position: relative; // Footer attachment.
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: #aaaa00;
|
||||
$footer-height: 2rem;
|
||||
|
||||
#viewable {
|
||||
padding-bottom: $footer-height;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #aa0000;
|
||||
}
|
||||
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 0 0 1em;
|
||||
}
|
||||
|
||||
.video-template-selector {
|
||||
margin: 1.5em 0 1.5em 0;
|
||||
text-align: center;
|
||||
|
||||
.thumbnail {
|
||||
max-width: 220px;
|
||||
padding: 0em;
|
||||
margin: 5px;
|
||||
filter: brightness(70%) grayscale(1);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
filter: brightness(100%) grayscale(0);
|
||||
box-shadow: 0px 0px 25px #209cee;
|
||||
}
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// #usage,
|
||||
// #updates,
|
||||
// #help-wanted,
|
||||
// #terms {
|
||||
// h1,
|
||||
// h2 {
|
||||
// font-family: $headings-font-family;
|
||||
// }
|
||||
|
||||
// p {
|
||||
// text-align: justify;
|
||||
// }
|
||||
|
||||
// li {
|
||||
// font-size: 1.2em;
|
||||
// text-align: justify;
|
||||
// margin-bottom: 1em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .template-preview {
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// /* V2 (but probably defined elsewhere too) */
|
||||
|
||||
.mascot {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mascot img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
// .main-form {
|
||||
// padding: 0 15px;
|
||||
// }
|
||||
|
||||
.git-sha {
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// /* TAILWIND STYLE CLASSES */
|
||||
|
||||
// .display-inline {
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
// .white-space-nowrap {
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
// .padding-bottom-1em {
|
||||
// padding-bottom: 1em;
|
||||
// }
|
||||
|
||||
/** RESPONSIVENESS **/
|
||||
|
||||
/** Hide footer when using onscreen keyboard. */
|
||||
/* Actually, let's not do that because people filed bug reports.
|
||||
@media screen and (max-height: 550px) {
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
#particles-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
|
||||
canvas {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#tsparticles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
footer p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
footer p:after {
|
||||
content: " "; // Not sure why the space disappears when inline.
|
||||
font-family: $footer-font-family;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute; // Footer attachment.
|
||||
bottom: 0;
|
||||
// NB: Setting explicit height doesn't appear to be necessary, and
|
||||
// it was creating an annoying scrollbar.
|
||||
//height: $footer-height;
|
||||
color: $light-text-color;
|
||||
}
|
||||
|
||||
.social {
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
padding: 0.2em;
|
||||
max-width: 70px;
|
||||
max-height: 70px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Tech logos need a hack to not have margin.
|
||||
.vocodes-grid-marginless {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: $nav-font-family;
|
||||
|
||||
.navbar {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-toggler {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding-left: 16px !important;
|
||||
padding-right: 16px !important;
|
||||
color: $light-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:active {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-color: rgba($white, 0.12) !important;
|
||||
border: 1px solid;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 5px 20px rgba($black, 0.3);
|
||||
}
|
||||
|
||||
.nav-bg-dark {
|
||||
background-color: #17101c !important;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.nav-login {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.6);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.top-bar-text:hover {
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba($white, 0.04);
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
backdrop-filter: blur(5px);
|
||||
border-bottom: 1px solid;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
.top-bar-text {
|
||||
color: rgba($white, 0.7);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider-white {
|
||||
border-top: 1px solid rgba($white, 0.15);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
#status {
|
||||
.info {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: #aaaa00;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #aa0000;
|
||||
}
|
||||
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 0 0 1em;
|
||||
}
|
||||
|
||||
.video-template-selector {
|
||||
margin: 1.5em 0 1.5em 0;
|
||||
text-align: center;
|
||||
|
||||
.thumbnail {
|
||||
max-width: 220px;
|
||||
padding: 0em;
|
||||
margin: 5px;
|
||||
filter: brightness(70%) grayscale(1);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
filter: brightness(100%) grayscale(0);
|
||||
box-shadow: 0px 0px 25px #209cee;
|
||||
}
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// #usage,
|
||||
// #updates,
|
||||
// #help-wanted,
|
||||
// #terms {
|
||||
// h1,
|
||||
// h2 {
|
||||
// font-family: $headings-font-family;
|
||||
// }
|
||||
|
||||
// p {
|
||||
// text-align: justify;
|
||||
// }
|
||||
|
||||
// li {
|
||||
// font-size: 1.2em;
|
||||
// text-align: justify;
|
||||
// margin-bottom: 1em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .template-preview {
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// /* V2 (but probably defined elsewhere too) */
|
||||
|
||||
.mascot {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mascot img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
// .main-form {
|
||||
// padding: 0 15px;
|
||||
// }
|
||||
|
||||
.git-sha {
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// /* TAILWIND STYLE CLASSES */
|
||||
|
||||
// .display-inline {
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
// .white-space-nowrap {
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
// .padding-bottom-1em {
|
||||
// padding-bottom: 1em;
|
||||
// }
|
||||
|
||||
/** RESPONSIVENESS **/
|
||||
|
||||
/** Hide footer when using onscreen keyboard. */
|
||||
/* Actually, let's not do that because people filed bug reports.
|
||||
@media screen and (max-height: 550px) {
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
#particles-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
|
||||
canvas {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#tsparticles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
.fakeyou-refresh {
|
||||
footer p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
footer p:after {
|
||||
content: " "; // Not sure why the space disappears when inline.
|
||||
}
|
||||
|
||||
.social {
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -376,35 +388,37 @@ a.top-bar-text:hover {
|
||||
// }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
nav {
|
||||
.nav-bg-dark {
|
||||
background-color: #17101c00 !important;
|
||||
}
|
||||
.fakeyou-refresh {
|
||||
nav {
|
||||
.nav-bg-dark {
|
||||
background-color: #17101c00 !important;
|
||||
}
|
||||
|
||||
// hover nav dropdown on desktop
|
||||
&.navbar {
|
||||
.nav-item {
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
// hover nav dropdown on desktop
|
||||
&.navbar {
|
||||
.nav-item {
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
transition: 0.2s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
top: 100%;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: 0.2s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
top: 100%;
|
||||
transform: rotateX(0deg);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: 0.2s;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+284
-283
@@ -1,304 +1,303 @@
|
||||
//@import-normalize; /* bring in normalize.css styles */
|
||||
|
||||
#particles-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tsparticles {
|
||||
display: none;
|
||||
}
|
||||
|
||||
$page-width: 700px;
|
||||
|
||||
$light-text-color: #777;
|
||||
$button-text-color: #666;
|
||||
|
||||
$body-font-family: 'Fira Sans', serif;
|
||||
$nav-font-family: 'Fira Sans', sans-serif;
|
||||
$footer-font-family: 'Fira Sans Condensed', sans-serif;
|
||||
$textarea-font-family: 'Fira Sans', sans-serif;
|
||||
$headings-font-family: 'Merriweather', serif;
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300; // For Fira Sans
|
||||
}
|
||||
|
||||
// Style for user text input that overflows
|
||||
.overflow-fix {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.mainwrap {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
canvas#spectrogram {
|
||||
margin: 0.5em 0;
|
||||
transform: scaleY(-1); /* Spectrograms are flipped */
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*p {
|
||||
a:link,
|
||||
a:visited {
|
||||
color: rgb(119, 165, 235);
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover,
|
||||
a:active{
|
||||
color: rgb(85, 133, 204);
|
||||
font-weight: bold;
|
||||
}
|
||||
}*/
|
||||
|
||||
p {
|
||||
a:before {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative; // Footer attachment.
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
$footer-height: 6rem;
|
||||
|
||||
#viewable {
|
||||
padding-bottom: $footer-height;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-family: $footer-font-family;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute; // Footer attachment.
|
||||
bottom: 0;
|
||||
// NB: Setting explicit height doesn't appear to be necessary, and
|
||||
// it was creating an annoying scrollbar.
|
||||
//height: $footer-height;
|
||||
color: $light-text-color;
|
||||
}
|
||||
|
||||
.social {
|
||||
img {
|
||||
max-width: 70px;
|
||||
max-height: 70px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Tech logos need a hack to not have margin.
|
||||
.vocodes-grid-marginless {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: "Fugaz One";
|
||||
margin: 0.2em 0 0 0;
|
||||
padding: 0;
|
||||
|
||||
.signup {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
a:link.signup,
|
||||
a:visited.signup {
|
||||
color: #da4f18;
|
||||
}
|
||||
a:hover.signup,
|
||||
a:active.signup{
|
||||
color: #da4f18;
|
||||
text-decoration: underlinegt;
|
||||
// Old design parents all elements with class "fakeyou-old"
|
||||
// Refresh design parents all elements with class "fakeyou-refresh"
|
||||
//
|
||||
// The reason for this is that WebPack imports and packs all SCSS files, which
|
||||
// makes it impossible to dynamically change styles.
|
||||
//
|
||||
// Once the rollout is complete, this outer wrapper class can be removed.
|
||||
.fakeyou-old {
|
||||
#particles-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logo_text {
|
||||
font-family: "Fugaz One";
|
||||
font-size: 1.5em;
|
||||
margin: 0 0.3em 0 0;
|
||||
padding: 0;
|
||||
.vo {
|
||||
color: #209CEE;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.codes {
|
||||
color: rgba(32, 156, 238, 0.685);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
a:active,
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
background-color: #fff;
|
||||
}
|
||||
#tsparticles {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
$page-width: 700px;
|
||||
|
||||
$light-text-color: #777;
|
||||
$button-text-color: #666;
|
||||
|
||||
$body-font-family: 'Fira Sans', serif;
|
||||
$nav-font-family: 'Fira Sans', sans-serif;
|
||||
$footer-font-family: 'Fira Sans Condensed', sans-serif;
|
||||
$textarea-font-family: 'Fira Sans', sans-serif;
|
||||
$headings-font-family: 'Merriweather', serif;
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300; // For Fira Sans
|
||||
}
|
||||
a,
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: $light-text-color;
|
||||
padding: 0 10px;
|
||||
|
||||
// Style for user text input that overflows
|
||||
.overflow-fix {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.mainwrap {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
canvas#spectrogram {
|
||||
margin: 0.5em 0;
|
||||
transform: scaleY(-1); /* Spectrograms are flipped */
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:after {
|
||||
content: '';
|
||||
width: 99.5%;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
background-color: #bfdff5;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 5px 0 15px 0;
|
||||
}
|
||||
}
|
||||
/*p {
|
||||
a:link,
|
||||
a:visited {
|
||||
color: rgb(119, 165, 235);
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover,
|
||||
a:active{
|
||||
color: rgb(85, 133, 204);
|
||||
font-weight: bold;
|
||||
}
|
||||
}*/
|
||||
|
||||
.button-group {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
#status {
|
||||
.info {
|
||||
color: #888888;
|
||||
}
|
||||
.warn {
|
||||
color: #aaaa00;
|
||||
}
|
||||
.error {
|
||||
color: #aa0000;
|
||||
}
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 0 0 1em;
|
||||
}
|
||||
|
||||
.video-template-selector {
|
||||
margin: 1.5em 0 1.5em 0;
|
||||
text-align: center;
|
||||
|
||||
.thumbnail {
|
||||
max-width: 220px;
|
||||
padding: 0em;
|
||||
margin: 5px;
|
||||
filter: brightness(70%) grayscale(1);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
filter: brightness(100%) grayscale(0);
|
||||
box-shadow: 0px 0px 25px #209CEE
|
||||
}
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#usage,
|
||||
#updates,
|
||||
#help-wanted,
|
||||
#terms {
|
||||
h1, h2 {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
a:before {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
li {
|
||||
font-size: 1.2em;
|
||||
text-align: justify;
|
||||
margin-bottom: 1em;
|
||||
|
||||
#main {
|
||||
position: relative; // Footer attachment.
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.template-preview {
|
||||
text-align: center;
|
||||
}
|
||||
$footer-height: 6rem;
|
||||
|
||||
/* V2 (but probably defined elsewhere too) */
|
||||
#viewable {
|
||||
padding-bottom: $footer-height;
|
||||
}
|
||||
|
||||
.mascot {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mascot img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.git-sha {
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* TAILWIND STYLE CLASSES */
|
||||
|
||||
.display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.white-space-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.padding-bottom-1em {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/** RESPONSIVENESS **/
|
||||
|
||||
/** Hide footer when using onscreen keyboard. */
|
||||
/* Actually, let's not do that because people filed bug reports.
|
||||
@media screen and (max-height: 550px) {
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
footer p {
|
||||
display: inline;
|
||||
}
|
||||
footer p:after {
|
||||
content: ' '; // Not sure why the space disappears when inline.
|
||||
font-family: $footer-font-family;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute; // Footer attachment.
|
||||
bottom: 0;
|
||||
// NB: Setting explicit height doesn't appear to be necessary, and
|
||||
// it was creating an annoying scrollbar.
|
||||
//height: $footer-height;
|
||||
color: $light-text-color;
|
||||
}
|
||||
|
||||
.social {
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
padding: 0.2em;
|
||||
max-width: 70px;
|
||||
max-height: 70px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Tech logos need a hack to not have margin.
|
||||
.vocodes-grid-marginless {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: "Fugaz One";
|
||||
margin: 0.2em 0 0 0;
|
||||
padding: 0;
|
||||
|
||||
.signup {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
a:link.signup,
|
||||
a:visited.signup {
|
||||
color: #da4f18;
|
||||
}
|
||||
a:hover.signup,
|
||||
a:active.signup{
|
||||
color: #da4f18;
|
||||
text-decoration: underlinegt;
|
||||
}
|
||||
|
||||
#logo_text {
|
||||
font-family: "Fugaz One";
|
||||
font-size: 1.5em;
|
||||
margin: 0 0.3em 0 0;
|
||||
padding: 0;
|
||||
.vo {
|
||||
color: #209CEE;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.codes {
|
||||
color: rgba(32, 156, 238, 0.685);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
a:active,
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a,
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: $light-text-color;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:after {
|
||||
content: '';
|
||||
width: 99.5%;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
background-color: #bfdff5;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 5px 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
#status {
|
||||
.info {
|
||||
color: #888888;
|
||||
}
|
||||
.warn {
|
||||
color: #aaaa00;
|
||||
}
|
||||
.error {
|
||||
color: #aa0000;
|
||||
}
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 0 0 1em;
|
||||
}
|
||||
|
||||
.video-template-selector {
|
||||
margin: 1.5em 0 1.5em 0;
|
||||
text-align: center;
|
||||
|
||||
.thumbnail {
|
||||
max-width: 220px;
|
||||
padding: 0em;
|
||||
margin: 5px;
|
||||
filter: brightness(70%) grayscale(1);
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.selected {
|
||||
filter: brightness(100%) grayscale(0);
|
||||
box-shadow: 0px 0px 25px #209CEE
|
||||
}
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#usage,
|
||||
#updates,
|
||||
#help-wanted,
|
||||
#terms {
|
||||
h1, h2 {
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
li {
|
||||
font-size: 1.2em;
|
||||
text-align: justify;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.template-preview {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* V2 (but probably defined elsewhere too) */
|
||||
|
||||
.mascot {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mascot img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.git-sha {
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* TAILWIND STYLE CLASSES */
|
||||
|
||||
.display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.white-space-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.padding-bottom-1em {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/** RESPONSIVENESS **/
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
.fakeyou-old {
|
||||
footer p {
|
||||
display: inline;
|
||||
}
|
||||
footer p:after {
|
||||
content: ' '; // Not sure why the space disappears when inline.
|
||||
}
|
||||
|
||||
.social {
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -306,8 +305,10 @@ nav {
|
||||
// Prevent Android devices from horizontal scrolling
|
||||
// Mine is 412x846.
|
||||
@media screen and (max-width: 412px) {
|
||||
#root {
|
||||
max-width: 380px;
|
||||
margin: auto;
|
||||
.fakeyou-old {
|
||||
#root {
|
||||
max-width: 380px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import AppTranslated from './AppTranslated';
|
||||
import { USE_REFRESH } from './Refresh';
|
||||
|
||||
const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
|
||||
|
||||
@@ -10,6 +11,10 @@ const enableSpectrograms = !IS_IOS;
|
||||
|
||||
const flashVocodesNotice = new URLSearchParams(window.location.search).has('vocodes');
|
||||
|
||||
const designSystemClass = USE_REFRESH ? 'fakeyou-refresh' : 'fakeyou-old';
|
||||
|
||||
document.getElementsByTagName('html')[0].classList.add(designSystemClass);
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<AppTranslated
|
||||
|
||||
@@ -3,285 +3,298 @@ styles with important tags:
|
||||
.container
|
||||
*/
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: 0.1s;
|
||||
|
||||
&:hover {
|
||||
color: lighten($primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid $white;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
html.sr .load-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:active,
|
||||
button:hover,
|
||||
label:focus,
|
||||
.btn:active,
|
||||
.btn.focus {
|
||||
outline: 0px !important;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $primary;
|
||||
background-color: rgba($white, 0.06);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: rgba($white, 0.7) !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1080px !important;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container-xl,
|
||||
.container-xxl {
|
||||
width: 100%;
|
||||
padding-right: var(--bs-gutter-x, 1rem);
|
||||
padding-left: var(--bs-gutter-x, 1rem);
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.6rem !important;
|
||||
padding-bottom: 0rem !important;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: rgba($white, 0.8);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 10px 24px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:active {
|
||||
background-color: $primary !important;
|
||||
border: 2.5px solid;
|
||||
border-color: $primary !important;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: lighten($primary, 5%) !important;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-secondary:focus,
|
||||
.btn-secondary:active {
|
||||
background-color: $white;
|
||||
color: #212529;
|
||||
border: 2.5px solid;
|
||||
border-color: $white;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background-color: #ccc;
|
||||
color: #212529;
|
||||
border: 2.5px solid;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-destructive:focus,
|
||||
.btn-destructive:active {
|
||||
background-color: #fff;
|
||||
color: #fc6b68;
|
||||
border: 2.5px solid;
|
||||
border-color: #fff;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.btn-destructive:hover {
|
||||
background-color: #fdcfce;
|
||||
color: #fc6b68;
|
||||
border: 2.5px solid;
|
||||
border-color: #fdcfce;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: rgba($white, 0.1);
|
||||
border-color: #ffffff12 !important;
|
||||
border: 1px solid;
|
||||
border-radius: 0px;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
.panel-title {
|
||||
position: static;
|
||||
text-align: center;
|
||||
text-shadow: 0px 3px 26px #00000060;
|
||||
margin-top: -35px;
|
||||
// Old design parents all elements with class "fakeyou-old"
|
||||
// Refresh design parents all elements with class "fakeyou-refresh"
|
||||
//
|
||||
// The reason for this is that WebPack imports and packs all SCSS files, which
|
||||
// makes it impossible to dynamically change styles.
|
||||
//
|
||||
// Once the rollout is complete, this outer wrapper class can be removed.
|
||||
.fakeyou-refresh {
|
||||
p {
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
|
||||
h2.panel-title {
|
||||
margin-top: -32px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: 0.1s;
|
||||
|
||||
.login-panel {
|
||||
max-width: 800px !important;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-weight: 500;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
border-width: 1px;
|
||||
border-color: $white;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.1rem $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-solid,
|
||||
.fas {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
margin-top: 10px;
|
||||
color: darken($white, 10%);
|
||||
|
||||
&.red {
|
||||
color: lighten($primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.form-control {
|
||||
padding-left: 2.375rem;
|
||||
&:hover {
|
||||
color: lighten($primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding-left: 2.375rem;
|
||||
padding-right: 2.375rem;
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid $white;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
html.sr .load-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:active,
|
||||
button:hover,
|
||||
label:focus,
|
||||
.btn:active,
|
||||
.btn.focus {
|
||||
outline: 0px !important;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $primary;
|
||||
background-color: rgba($white, 0.06);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: rgba($white, 0.7) !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1080px !important;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container-xl,
|
||||
.container-xxl {
|
||||
width: 100%;
|
||||
padding-right: var(--bs-gutter-x, 1rem);
|
||||
padding-left: var(--bs-gutter-x, 1rem);
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.6rem !important;
|
||||
padding-bottom: 0rem !important;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: rgba($white, 0.8);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 10px 24px;
|
||||
z-index: 2;
|
||||
width: 2.375rem;
|
||||
// height: 2.375rem;
|
||||
// line-height: 2.69rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
color: #212529;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
font-size: 24px;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
.btn-primary,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:active {
|
||||
background-color: $primary !important;
|
||||
border: 2.5px solid;
|
||||
border-color: $primary !important;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: lighten($primary, 5%) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.6);
|
||||
.btn-secondary,
|
||||
.btn-secondary:focus,
|
||||
.btn-secondary:active {
|
||||
background-color: $white;
|
||||
color: #212529;
|
||||
border: 2.5px solid;
|
||||
border-color: $white;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background-color: #ccc;
|
||||
color: #212529;
|
||||
border: 2.5px solid;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-destructive:focus,
|
||||
.btn-destructive:active {
|
||||
background-color: #fff;
|
||||
color: #fc6b68;
|
||||
border: 2.5px solid;
|
||||
border-color: #fff;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.btn-destructive:hover {
|
||||
background-color: #fdcfce;
|
||||
color: #fc6b68;
|
||||
border: 2.5px solid;
|
||||
border-color: #fdcfce;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: rgba($white, 0.1);
|
||||
border-color: #ffffff12 !important;
|
||||
border: 1px solid;
|
||||
border-radius: 0px;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
.panel-title {
|
||||
position: static;
|
||||
text-align: center;
|
||||
text-shadow: 0px 3px 26px #00000060;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
h2.panel-title {
|
||||
margin-top: -32px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
max-width: 800px !important;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-weight: 500;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
border-width: 1px;
|
||||
border-color: $white;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.1rem $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-solid,
|
||||
.fas {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
margin-top: 10px;
|
||||
color: darken($white, 10%);
|
||||
|
||||
&.red {
|
||||
color: lighten($primary, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.form-control {
|
||||
padding-left: 2.375rem;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding-left: 2.375rem;
|
||||
padding-right: 2.375rem;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 2.375rem;
|
||||
// height: 2.375rem;
|
||||
// line-height: 2.69rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
color: #212529;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
font-size: 24px;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.panel {
|
||||
.panel-title {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
margin-top: -25px;
|
||||
.fakeyou-refresh {
|
||||
.panel {
|
||||
.panel-title {
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
h2.panel-title {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
h2.panel-title {
|
||||
margin-top: -20px;
|
||||
.p-lg-4 {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-lg-4 {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 20px;
|
||||
.lead {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container-panel {
|
||||
width: 100%;
|
||||
padding-right: var(--bs-gutter-x, 1rem);
|
||||
padding-left: var(--bs-gutter-x, 1rem);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1080px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.fakeyou-refresh {
|
||||
.container-panel {
|
||||
width: 100%;
|
||||
padding-right: var(--bs-gutter-x, 1rem);
|
||||
padding-left: var(--bs-gutter-x, 1rem);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1080px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 8px;
|
||||
.panel {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user