Красивые анимации и детали

This commit is contained in:
Alexander Yakovlev 2018-08-07 16:06:34 +07:00
parent 7b40d41f7b
commit c987c39dca
14 changed files with 532 additions and 10901 deletions

View file

@ -19,7 +19,7 @@
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #7C008C;
--primary: #1f2429;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
@ -57,7 +57,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: "PT Sans", "PT Sans Regular", "Segoe UI", Roboto, "Helvetica", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
@ -141,12 +141,12 @@ sup {
top: -.5em; }
a {
color: #7C008C;
color: #1f2429;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects; }
a:hover {
color: #380040;
color: black;
text-decoration: underline; }
a:not([href]):not([tabindex]) {
@ -311,7 +311,7 @@ h1, h2, h3, h4, h5, h6,
color: inherit; }
h1, .h1 {
font-size: 2.5rem; }
font-size: 2.1rem; }
h2, .h2 {
font-size: 2rem; }
@ -1381,13 +1381,13 @@ pre {
.table-primary,
.table-primary > th,
.table-primary > td {
background-color: #dab8df; }
background-color: #c0c2c3; }
.table-hover .table-primary:hover {
background-color: #d1a6d7; }
background-color: #b3b5b7; }
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
background-color: #d1a6d7; }
background-color: #b3b5b7; }
.table-secondary,
.table-secondary > th,
@ -1644,10 +1644,10 @@ pre {
.wpcf7 textarea:focus, .wpcf7 .wpcf7-validation-errors:focus {
color: #495057;
background-color: #fff;
border-color: #e30dff;
border-color: #566472;
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.form-control::-webkit-input-placeholder, .wpcf7 input[type=text]::-webkit-input-placeholder,
.wpcf7 input[type=search]::-webkit-input-placeholder,
.wpcf7 input[type=url]::-webkit-input-placeholder,
@ -2427,8 +2427,8 @@ textarea.form-control,
.btn:focus,
.wpcf7 input:focus[type=submit], .btn.focus, .wpcf7 input.focus[type=submit] {
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.btn.disabled, .wpcf7 input.disabled[type=submit], .btn:disabled,
.wpcf7 input:disabled[type=submit] {
opacity: 0.65; }
@ -2441,28 +2441,28 @@ fieldset:disabled a.btn {
.btn-primary {
color: #fff;
background-color: #7C008C;
border-color: #7C008C; }
background-color: #1f2429;
border-color: #1f2429; }
.btn-primary:hover {
color: #fff;
background-color: #5a0066;
border-color: #4f0059; }
background-color: #0f1113;
border-color: #090b0c; }
.btn-primary:focus, .btn-primary.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5); }
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: #7C008C;
border-color: #7C008C; }
background-color: #1f2429;
border-color: #1f2429; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #4f0059;
border-color: #44004c; }
background-color: #090b0c;
border-color: #040405; }
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5); }
.btn-secondary {
color: #fff;
@ -2641,33 +2641,33 @@ fieldset:disabled a.btn {
.btn-outline-primary,
.wpcf7 input[type=submit] {
color: #7C008C;
color: #1f2429;
background-color: transparent;
background-image: none;
border-color: #7C008C; }
border-color: #1f2429; }
.btn-outline-primary:hover, .wpcf7 input:hover[type=submit] {
color: #fff;
background-color: #7C008C;
border-color: #7C008C; }
background-color: #1f2429;
border-color: #1f2429; }
.btn-outline-primary:focus,
.wpcf7 input:focus[type=submit], .btn-outline-primary.focus, .wpcf7 input.focus[type=submit] {
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5); }
.btn-outline-primary.disabled, .wpcf7 input.disabled[type=submit], .btn-outline-primary:disabled,
.wpcf7 input:disabled[type=submit] {
color: #7C008C;
color: #1f2429;
background-color: transparent; }
.btn-outline-primary:not(:disabled):not(.disabled):active, .wpcf7 input:not(:disabled):not(.disabled):active[type=submit], .btn-outline-primary:not(:disabled):not(.disabled).active, .wpcf7 input:not(:disabled):not(.disabled).active[type=submit],
.show > .btn-outline-primary.dropdown-toggle,
.wpcf7 .show > input.dropdown-toggle[type=submit] {
color: #fff;
background-color: #7C008C;
border-color: #7C008C; }
background-color: #1f2429;
border-color: #1f2429; }
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .wpcf7 input:not(:disabled):not(.disabled):active:focus[type=submit], .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .wpcf7 input:not(:disabled):not(.disabled).active:focus[type=submit],
.show > .btn-outline-primary.dropdown-toggle:focus,
.wpcf7 .show > input.dropdown-toggle:focus[type=submit] {
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.5); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.5); }
.btn-outline-secondary {
color: #6c757d;
@ -2846,10 +2846,10 @@ fieldset:disabled a.btn {
.btn-link {
font-weight: 400;
color: #7C008C;
color: #1f2429;
background-color: transparent; }
.btn-link:hover {
color: #380040;
color: black;
text-decoration: underline;
background-color: transparent;
border-color: transparent; }
@ -3064,7 +3064,7 @@ input[type="button"].btn-block {
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #7C008C; }
background-color: #1f2429; }
.dropdown-item.disabled, .dropdown-item:disabled {
color: #6c757d;
background-color: transparent; }
@ -3946,13 +3946,13 @@ input[type="button"].btn-block {
opacity: 0; }
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
background-color: #7C008C; }
background-color: #1f2429; }
.custom-control-input:focus ~ .custom-control-label::before {
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(124, 0, 140, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(31, 36, 41, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.custom-control-input:active ~ .custom-control-label::before {
color: #fff;
background-color: #e940ff; }
background-color: #6c7d8f; }
.custom-control-input:disabled ~ .custom-control-label {
color: #6c757d; }
.custom-control-input:disabled ~ .custom-control-label::before {
@ -3991,34 +3991,34 @@ input[type="button"].btn-block {
border-radius: 0.25rem; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #7C008C; }
background-color: #1f2429; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
background-color: #7C008C; }
background-color: #1f2429; }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(124, 0, 140, 0.5); }
background-color: rgba(31, 36, 41, 0.5); }
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
background-color: rgba(124, 0, 140, 0.5); }
background-color: rgba(31, 36, 41, 0.5); }
.custom-radio .custom-control-label::before {
border-radius: 50%; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
background-color: #7C008C; }
background-color: #1f2429; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(124, 0, 140, 0.5); }
background-color: rgba(31, 36, 41, 0.5); }
.custom-select {
display: inline-block;
@ -4036,10 +4036,10 @@ input[type="button"].btn-block {
-moz-appearance: none;
appearance: none; }
.custom-select:focus {
border-color: #e30dff;
border-color: #566472;
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(227, 13, 255, 0.5);
box-shadow: 0 0 0 0.2rem rgba(227, 13, 255, 0.5); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(86, 100, 114, 0.5);
box-shadow: 0 0 0 0.2rem rgba(86, 100, 114, 0.5); }
.custom-select:focus::-ms-value {
color: #495057;
background-color: #fff; }
@ -4080,11 +4080,11 @@ input[type="button"].btn-block {
margin: 0;
opacity: 0; }
.custom-file-input:focus ~ .custom-file-label {
border-color: #e30dff;
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
border-color: #566472;
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.custom-file-input:focus ~ .custom-file-label::after {
border-color: #e30dff; }
border-color: #566472; }
.custom-file-input:disabled ~ .custom-file-label {
background-color: #e9ecef; }
.custom-file-input:lang(en) ~ .custom-file-label::after {
@ -4129,19 +4129,19 @@ input[type="button"].btn-block {
.custom-range:focus {
outline: none; }
.custom-range:focus::-webkit-slider-thumb {
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(124, 0, 140, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(31, 36, 41, 0.25);
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.custom-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.custom-range:focus::-ms-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.custom-range::-moz-focus-outer {
border: 0; }
.custom-range::-webkit-slider-thumb {
width: 1rem;
height: 1rem;
margin-top: -0.25rem;
background-color: #7C008C;
background-color: #1f2429;
border: 0;
border-radius: 1rem;
-webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
@ -4155,7 +4155,7 @@ input[type="button"].btn-block {
-webkit-transition: none;
transition: none; } }
.custom-range::-webkit-slider-thumb:active {
background-color: #e940ff; }
background-color: #6c7d8f; }
.custom-range::-webkit-slider-runnable-track {
width: 100%;
height: 0.5rem;
@ -4167,7 +4167,7 @@ input[type="button"].btn-block {
.custom-range::-moz-range-thumb {
width: 1rem;
height: 1rem;
background-color: #7C008C;
background-color: #1f2429;
border: 0;
border-radius: 1rem;
-webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
@ -4181,7 +4181,7 @@ input[type="button"].btn-block {
-webkit-transition: none;
transition: none; } }
.custom-range::-moz-range-thumb:active {
background-color: #e940ff; }
background-color: #6c7d8f; }
.custom-range::-moz-range-track {
width: 100%;
height: 0.5rem;
@ -4196,7 +4196,7 @@ input[type="button"].btn-block {
margin-top: 0;
margin-right: 0.2rem;
margin-left: 0.2rem;
background-color: #7C008C;
background-color: #1f2429;
border: 0;
border-radius: 1rem;
-webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
@ -4209,7 +4209,7 @@ input[type="button"].btn-block {
-webkit-transition: none;
transition: none; } }
.custom-range::-ms-thumb:active {
background-color: #e940ff; }
background-color: #6c7d8f; }
.custom-range::-ms-track {
width: 100%;
height: 0.5rem;
@ -4288,7 +4288,7 @@ input[type="button"].btn-block {
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #7C008C; }
background-color: #1f2429; }
.nav-fill .nav-item {
-webkit-box-flex: 1;
@ -4917,20 +4917,20 @@ input[type="button"].btn-block {
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #7C008C;
color: #1f2429;
background-color: #fff;
border: 1px solid #dee2e6; }
.page-link:hover {
z-index: 2;
color: #380040;
color: black;
text-decoration: none;
background-color: #e9ecef;
border-color: #dee2e6; }
.page-link:focus {
z-index: 2;
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25);
box-shadow: 0 0 0 0.2rem rgba(124, 0, 140, 0.25); }
-webkit-box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25);
box-shadow: 0 0 0 0.2rem rgba(31, 36, 41, 0.25); }
.page-link:not(:disabled):not(.disabled) {
cursor: pointer; }
@ -4946,8 +4946,8 @@ input[type="button"].btn-block {
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #7C008C;
border-color: #7C008C; }
background-color: #1f2429;
border-color: #1f2429; }
.page-item.disabled .page-link {
color: #6c757d;
@ -5006,11 +5006,11 @@ input[type="button"].btn-block {
.badge-primary {
color: #fff;
background-color: #7C008C; }
background-color: #1f2429; }
.badge-primary[href]:hover, .badge-primary[href]:focus {
color: #fff;
text-decoration: none;
background-color: #4f0059; }
background-color: #090b0c; }
.badge-secondary {
color: #fff;
@ -5105,13 +5105,13 @@ input[type="button"].btn-block {
color: inherit; }
.alert-primary {
color: #400049;
background-color: #e5cce8;
border-color: #dab8df; }
color: #101315;
background-color: #d2d3d4;
border-color: #c0c2c3; }
.alert-primary hr {
border-top-color: #d1a6d7; }
border-top-color: #b3b5b7; }
.alert-primary .alert-link {
color: #130016; }
color: black; }
.alert-secondary {
color: #383d41;
@ -5212,7 +5212,7 @@ input[type="button"].btn-block {
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #7C008C;
background-color: #1f2429;
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease; }
@media screen and (prefers-reduced-motion: reduce) {
@ -5287,8 +5287,8 @@ input[type="button"].btn-block {
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #7C008C;
border-color: #7C008C; }
background-color: #1f2429;
border-color: #1f2429; }
.list-group-flush .list-group-item {
border-right: 0;
@ -5302,15 +5302,15 @@ input[type="button"].btn-block {
border-bottom: 0; }
.list-group-item-primary {
color: #400049;
background-color: #dab8df; }
color: #101315;
background-color: #c0c2c3; }
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
color: #400049;
background-color: #d1a6d7; }
color: #101315;
background-color: #b3b5b7; }
.list-group-item-primary.list-group-item-action.active {
color: #fff;
background-color: #400049;
border-color: #400049; }
background-color: #101315;
border-color: #101315; }
.list-group-item-secondary {
color: #383d41;
@ -5563,7 +5563,7 @@ button.close {
z-index: 1070;
display: block;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: "PT Sans", "PT Sans Regular", "Segoe UI", Roboto, "Helvetica", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
@ -5648,7 +5648,7 @@ button.close {
z-index: 1060;
display: block;
max-width: 276px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: "PT Sans", "PT Sans Regular", "Segoe UI", Roboto, "Helvetica", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
@ -6005,12 +6005,12 @@ button.close {
vertical-align: text-top !important; }
.bg-primary {
background-color: #7C008C !important; }
background-color: #1f2429 !important; }
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
background-color: #4f0059 !important; }
background-color: #090b0c !important; }
.bg-secondary {
background-color: #6c757d !important; }
@ -6105,7 +6105,7 @@ button.bg-dark:focus {
border-left: 0 !important; }
.border-primary {
border-color: #7C008C !important; }
border-color: #1f2429 !important; }
.border-secondary {
border-color: #6c757d !important; }
@ -8209,10 +8209,10 @@ button.bg-dark:focus {
color: #fff !important; }
.text-primary {
color: #7C008C !important; }
color: #1f2429 !important; }
a.text-primary:hover, a.text-primary:focus {
color: #4f0059 !important; }
color: #090b0c !important; }
.text-secondary {
color: #6c757d !important; }
@ -8421,7 +8421,7 @@ a.skip-link {
.navbar-dark .navbar-nav .dropdown-menu .nav-link.active, .navbar-dark .navbar-nav .dropdown-menu .nav-link:active {
color: #fff !important;
text-decoration: none;
background-color: #7C008C; }
background-color: #1f2429; }
.navbar-dark .navbar-nav .dropdown-menu .nav-link.disabled, .navbar-dark .navbar-nav .dropdown-menu .nav-link:disabled {
color: #6c757d !important;
background-color: transparent; }
@ -10795,237 +10795,186 @@ a.skip-link {
.gallery-caption {
display: block; }
.navbar {
font-family: monospace;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
.navbar-brand a {
color: #00C853;
position: relative; }
.navbar-brand a:hover {
color: #00C853;
text-decoration: none; }
.navbar-brand a span {
position: absolute;
/* REGULAR SCANLINES SETTINGS */
/* MOVING SCANLINE SETTINGS */
/* MIXINS */
/* CSS .scanlines CLASS */
.scanlines, .navbar-brand {
position: relative;
overflow: hidden; }
.scanlines:before, .navbar-brand:before, .scanlines:after, .navbar-brand:after {
display: block;
pointer-events: none;
content: '';
position: absolute; }
.scanlines:before, .navbar-brand:before {
width: 100%;
height: 2px;
z-index: 2147483649;
background: rgba(0, 0, 0, 0.3);
opacity: 0.75;
-webkit-animation: scanline 6s linear infinite;
animation: scanline 6s linear infinite; }
.scanlines:after, .navbar-brand:after {
top: 0;
right: 0;
bottom: 0;
right: 0;
width: 0;
background: #212121;
border-left: .5em solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: typing 3s steps(13, end) infinite alternate, blink-caret 1s step-end infinite;
animation: typing 3s steps(13, end) infinite alternate, blink-caret 1s step-end infinite; }
#faux-terminal {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
z-index: 4000;
pointer-events: none; }
#faux-terminal:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
z-index: 4010;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #444), color-stop(50%, #000));
background: linear-gradient(#444 50%, #000 50%);
z-index: 2147483648;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(51%, rgba(0, 0, 0, 0.3)));
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
background-size: 100% 4px;
background-repeat: repeat-y;
opacity: .14;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8);
-webkit-animation: pulse 5s linear infinite;
animation: pulse 5s linear infinite; }
#faux-terminal:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
z-index: 4011;
background-color: #00C853;
background: radial-gradient(ellipse at center, black 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 9, 4, 0.6) 47%, #00C853 100%);
-webkit-box-shadow: inset 0px 0px 4px 4px rgba(100, 100, 100, 0.5);
box-shadow: inset 0px 0px 4px 4px rgba(100, 100, 100, 0.5);
opacity: .1; }
#faux-terminal .layer {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
z-index: 4001;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, 0.1);
box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, 0.1);
background: radial-gradient(ellipse at center, #00c351 0%, rgba(64, 64, 64, 0) 50%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
-webkit-animation: glitch 1s linear infinite;
animation: glitch 1s linear infinite;
opacity: .9; }
#faux-terminal .layer:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
background: -web-kit-radial-gradient(center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
opacity: .1; }
#faux-terminal .overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
z-index: 4100; }
#faux-terminal .overlay:before {
content: '';
position: absolute;
top: 0px;
width: 100%;
height: 5px;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 0, 0, 0)), color-stop(50%, snow), color-stop(51%, rgba(255, 255, 255, 0.98)), to(rgba(255, 0, 0, 0)));
background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, snow 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100%);
opacity: .1;
-webkit-animation: vline 1.25s linear infinite;
animation: vline 1.25s linear infinite; }
#faux-terminal .overlay:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
-webkit-box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2), inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05), inset 0 3px 8px rgba(64, 64, 64, 0.05), inset 0 -5px 10px rgba(25, 25, 25, 0.1);
box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2), inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05), inset 0 3px 8px rgba(64, 64, 64, 0.05), inset 0 -5px 10px rgba(25, 25, 25, 0.1); }
-webkit-animation: scanlines 1s steps(60) infinite;
animation: scanlines 1s steps(60) infinite; }
@-webkit-keyframes vline {
/* ANIMATE UNIQUE SCANLINE */
@-webkit-keyframes scanline {
0% {
top: 0px; }
100% {
top: 100%; } }
@keyframes vline {
-webkit-transform: translate3d(0, 200000%, 0);
transform: translate3d(0, 200000%, 0); } }
@keyframes scanline {
0% {
top: 0px; }
100% {
top: 100%; } }
-webkit-transform: translate3d(0, 200000%, 0);
transform: translate3d(0, 200000%, 0); } }
@-webkit-keyframes pulse {
@-webkit-keyframes scanlines {
0% {
-webkit-transform: scale(1.001);
transform: scale(1.001);
opacity: .14; }
8% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: .13; }
15% {
-webkit-transform: scale(1.004);
transform: scale(1.004);
opacity: .14; }
30% {
-webkit-transform: scale(1.002);
transform: scale(1.002);
opacity: .11; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: .14; } }
background-position: 0 50%; } }
@keyframes pulse {
@keyframes scanlines {
0% {
-webkit-transform: scale(1.001);
transform: scale(1.001);
opacity: .14; }
8% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: .13; }
15% {
-webkit-transform: scale(1.004);
transform: scale(1.004);
opacity: .14; }
30% {
-webkit-transform: scale(1.002);
transform: scale(1.002);
opacity: .11; }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: .14; } }
background-position: 0 50%; } }
@-webkit-keyframes glitch {
0% {
-webkit-transform: scale(1, 1.002);
transform: scale(1, 1.002); }
50% {
-webkit-transform: scale(1, 1.0001);
transform: scale(1, 1.0001); }
100% {
-webkit-transform: scale(1.001, 1);
transform: scale(1.001, 1); } }
.navbar-brand {
-webkit-animation: scanlines 1s steps(60) infinite;
animation: scanlines 1s steps(60) infinite;
-webkit-animation: none;
animation: none; }
@keyframes glitch {
0% {
-webkit-transform: scale(1, 1.002);
transform: scale(1, 1.002); }
50% {
-webkit-transform: scale(1, 1.0001);
transform: scale(1, 1.0001); }
100% {
-webkit-transform: scale(1.001, 1);
transform: scale(1.001, 1); } }
.navbar-toggler {
width: 100%; }
@-webkit-keyframes blink-caret {
from, to {
border-color: transparent; }
50% {
border-color: #00C853; } }
u {
text-decoration: none;
background: -webkit-gradient(linear, left top, left bottom, from(#fffff8), to(#fffff8)), -webkit-gradient(linear, left top, left bottom, from(#fffff8), to(#fffff8)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333));
background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333);
background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
background-position: 0% 93%, 100% 93%, 0% 93%; }
@keyframes blink-caret {
from, to {
border-color: transparent; }
50% {
border-color: #00C853; } }
aside.widget {
margin-top: 1rem; }
@-webkit-keyframes typing {
from {
width: 100%; }
to {
width: 0; } }
#searchform label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0; }
@keyframes typing {
from {
width: 100%; }
to {
width: 0; } }
.entry-meta, .entry-meta span a,
.entry-footer,
.entry-footer span a {
color: #adb5bd;
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
#comments {
margin-top: 1rem; }
/* --- KRIL begin --- */
/* --- (c) Nafanin --- */
.kril-game-header {
overflow: hidden; }
.kril-game-title {
float: left;
width: 450px;
float: left;
width: 480px; }
.kril-game-name {
font-size: 28px; }
.kril-game-author, .kril-game-platform {
font-size: 14px; }
.kril-game-num {
float: right;
font-size: 36px;
width: 80px; }
.kril-game-info {
overflow: hidden;
margin-top: 20px; }
.kril-game-pic {
float: left;
width: 150px;
vertical-align: top;
margin-right: 20px; }
.kril-game-pic img {
width: 150px;
height: 150px; }
.kril-game-descr {
float: left;
vertical-align: top;
width: 420px; }
.kril-game hr, hr.kril {
border: 0;
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0 20px; }
/* --- Results --- */
.kril-result {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.kril-result .kril-result-place {
margin-right: 1rem;
font-size: 36px;
min-width: 100px;
text-align: center; }
.kril-result .kril-result-place span {
font-size: 14px; }
.kril-result .kril-result-place.top-place {
font-size: 48px;
font-weight: bold; }
.kril-result .kril-result-place.top-place span {
font-size: 18px; }
.kril-result .kril-result-place a {
color: #1f2429; }
.kril-result .kril-result-title {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.kril-result-name {
font-size: 28px; }
.kril-result-author, .kril-result-platform {
font-size: 14px; }
.kril-result-info {
margin-top: 20px; }
.kril-result hr, hr.kril {
border: 0;
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0 20px; }
#FAQ STRONG {
font-size: 1.3em;
color: #dde1ba; }

4
css/child-theme.min.css vendored Executable file → Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -78,8 +78,4 @@ $container = get_theme_mod( 'understrap_container_type' );
<?php endif; ?>
</nav><!-- .site-navigation -->
<div id="faux-terminal">
<div class="layer"></div>
<div class="overlay"></div>
</div>
</div><!-- #wrapper-navbar end -->

View file

@ -9,4 +9,3 @@
// Any additional imported files //
@import "theme/child_theme"; // <--------- Add your styles into this file
@import 'theme/terminal';

View file

@ -0,0 +1,150 @@
@import 'scanlines';
//#wrapper-navbar {
.navbar-brand {
@include scan-crt(true);
@include scan-moving(false);
@extend .scanlines;
}
.navbar-toggler {
width: 100%;
}
u {
text-decoration: none;
background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333);
background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
background-position: 0% 93%, 100% 93%, 0% 93%;
}
aside.widget {
margin-top: $font-size-base;
}
#searchform label{
@include sr-only();
}
.entry-meta,
.entry-footer {
&,span a {
color: $gray-500;
margin-top: $font-size-base / 2;
margin-bottom: $font-size-base / 2;
}
}
#comments {
margin-top: $font-size-base;
}
/* --- KRIL begin --- */
/* --- (c) Nafanin --- */
.kril-game {}
.kril-game-header {
overflow: hidden;
}
.kril-game-title {
float: left;
width: 450px;
float: left;
width: 480px;
}
.kril-game-name {
font-size: 28px;
}
.kril-game-author, .kril-game-platform {
font-size: 14px;
}
.kril-game-num {
float: right;
font-size: 36px;
width: 80px;
}
.kril-game-info {
overflow: hidden;
margin-top: 20px;
}
.kril-game-pic {
float: left;
width: 150px;
vertical-align: top;
margin-right: 20px;
img {
width: 150px;
height: 150px;
}
}
.kril-game-descr {
float: left;
vertical-align: top;
width: 420px;
}
.kril-game hr, hr.kril {
border: 0;
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0 20px;
}
/* --- Results --- */
.kril-result {
display: flex;
flex-direction: row;
.kril-result-place {
margin-right: $font-size-base;
font-size: 36px;
min-width: 100px;
text-align: center;
span {
font-size: 14px;
}
&.top-place {
font-size: 48px;
font-weight: bold;
span {
font-size: 18px;
}
}
a {
color: $primary;
}
}
.kril-result-title {
flex-grow: 1;
}
}
.kril-result-name {
font-size: 28px;
}
.kril-result-author, .kril-result-platform {
font-size: 14px;
}
.kril-result-info {
margin-top: 20px;
}
.kril-result hr, hr.kril {
border: 0;
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0 20px;
}
#FAQ STRONG {
font-size: 1.3em;
color: #dde1ba;
}

View file

@ -2,7 +2,7 @@
// Color system
//
$primary: #7C008C;
$primary: #1f2429;
$rudy-primary-color: #212121;
$rudy-primary-color-light: #9E9E9E;
@ -11,3 +11,7 @@ $rudy-primary-color-dark: #616161;
$rudy-accent-color: #00C853;
$rudy-accent-color-fallback-1: #00E676;
$rudy-accent-color-fallback-2: #69F0AE;
$font-size-base: 1rem;
$font-family-base: "PT Sans", "PT Sans Regular", "Segoe UI", Roboto, "Helvetica", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$h1-font-size: $font-size-base * 2.1;

102
sass/theme/_scanlines.scss Normal file
View file

@ -0,0 +1,102 @@
/* REGULAR SCANLINES SETTINGS */
// width of 1 scanline (min.: 1px)
$scan-width: 2px;
// emulates a damage-your-eyes bad pre-2000 CRT screen (true, false)
$scan-crt: true;
// frames-per-second (should be > 1), only applies if $scan-crt: true;
$scan-fps: 60;
// scanline-color (rgba)
$scan-color: rgba(#000, .3);
// set z-index on 8, like in 8-bits , or
// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE);
$scan-z-index: 2147483648;
/* MOVING SCANLINE SETTINGS */
// moving scanline (true, false)
$scan-moving-line: true;
// opacity of the moving scanline
$scan-opacity: .75;
/* MIXINS */
// apply CRT animation: @include scan-crt($scan-crt);
@mixin scan-crt($scan-crt) {
@if $scan-crt == true {
animation: scanlines 1s steps($scan-fps) infinite;
}
@else { animation: none; }
}
// apply CRT animation: @include scan-crt($scan-crt);
@mixin scan-moving($scan-moving-line) {
@if $scan-moving-line == true {
animation: scanline 6s linear infinite;
}
@else { animation: none; }
}
/* CSS .scanlines CLASS */
.scanlines {
position: relative;
overflow: hidden; // only to animate the unique scanline
&:before,
&:after {
display: block;
pointer-events: none;
content: '';
position: absolute;
}
// unique scanline travelling on the screen
&:before {
// position: absolute;
// bottom: 100%;
width: 100%;
height: $scan-width * 1;
z-index: $scan-z-index + 1;
background: $scan-color;
opacity: $scan-opacity;
// animation: scanline 6s linear infinite;
@include scan-moving($scan-moving-line);
}
// the scanlines, so!
&:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $scan-z-index;
background: linear-gradient(
to bottom,
transparent 50%,
$scan-color 51%
);
background-size: 100% $scan-width*2;
@include scan-crt($scan-crt);
}
}
/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
0% {
transform: translate3d(0,200000%,0);
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
}
}
@keyframes scanlines {
0% {
background-position: 0 50%;
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
}
}

View file

@ -1,150 +0,0 @@
@mixin terminal-navbar-size {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 51px;
min-height: 51px;
}
@mixin terminal-navbar-absolute {
content: '';
position: absolute;
@include terminal-navbar-size;
}
@mixin terminal-navbar-fixed {
position: fixed;
@include terminal-navbar-size;
}
.navbar {
font-family: monospace;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.navbar-brand {
a {
color: $rudy-accent-color;
position: relative;
&:hover {
color: $rudy-accent-color;
text-decoration: none;
}
span {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 0;
background: $rudy-primary-color;
border-left: .5em solid;
box-sizing: border-box;
animation: typing 3s steps(13, end) infinite alternate,
blink-caret 1s step-end infinite;
}
}
}
#faux-terminal {
@include terminal-navbar-fixed;
z-index: 4000;
pointer-events: none;
&:before {
@include terminal-navbar-absolute;
z-index: 4010;
background: linear-gradient(#444 50%, #000 50%);
background-size: 100% 4px;
background-repeat: repeat-y;
opacity: .14;
box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
animation: pulse 5s linear infinite;
}
&:after {
@include terminal-navbar-absolute;
z-index : 4011;
background-color : $rudy-accent-color;
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$rudy-accent-color 100%);
box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5);
opacity : .1;
}
.layer {
@include terminal-navbar-absolute;
z-index : 4001;
box-shadow : inset 0px 0px 1px 1px rgba(64, 64, 64, .1);
background: radial-gradient(ellipse at center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%);
transform-origin : 50% 50%;
transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03);
animation: glitch 1s linear infinite;
opacity: .9;
&:after {
@include terminal-navbar-absolute;
background: -web-kit-radial-gradient(center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);
opacity: .1;
}
}
.overlay {
@include terminal-navbar-fixed;
z-index: 4100;
&:before {
content : '';
position : absolute;
top : 0px;
width : 100%;
height : 5px;
background : #fff;
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%);
opacity : .1;
animation: vline 1.25s linear infinite;
}
&:after {
@include terminal-navbar-absolute;
box-shadow: 0 2px 6px rgba(25,25,25,0.2),
inset 0 1px rgba(50,50,50,0.1),
inset 0 3px rgba(50,50,50,0.05),
inset 0 3px 8px rgba(64,64,64,0.05),
inset 0 -5px 10px rgba(25,25,25,0.1);
}
}
}
@keyframes vline {
0% { top: 0px;}
100% { top: 100%;}
}
@keyframes pulse {
0% {transform: scale(1.001); opacity: .14; }
8% {transform: scale(1.000); opacity: .13; }
15% {transform: scale(1.004); opacity: .14; }
30% {transform: scale(1.002); opacity: .11; }
100% {transform: scale(1.000); opacity: .14; }
}
@keyframes glitch {
0% {transform: scale(1, 1.002); }
50% {transform: scale(1, 1.0001); }
100% {transform: scale(1.001, 1); }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: $rudy-accent-color; }
}
@keyframes typing {
from { width: 100%; }
to { width: 0; }
}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -12,7 +12,7 @@
@import "reboot";
@import "type";
@import "images";
@import "code";
//@import "code";
@import "grid";
@import "tables";
@import "forms";
@ -27,16 +27,16 @@
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
//@import "badge";
//@import "jumbotron";
//@import "alert";
//@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
//@import "modal";
//@import "tooltip";
//@import "popover";
//@import "carousel";
@import "utilities";
@import "print";