|
|
| .header {
|
| font-family: cursive;
|
| font-size: 20px;
|
| font-weight: bold;
|
| color: #ff8cee;
|
| margin-bottom: 15px;
|
| user-select: none;
|
| cursor: default;
|
| display: inline-block;
|
| }
|
|
|
| hr {
|
| border-color: grey;
|
| background-color: grey;
|
| opacity: 0.25;
|
| }
|
|
|
| a {
|
| text-decoration: none;
|
| color: inherit;
|
| }
|
|
|
|
|
|
|
|
|
| .container {
|
| position: relative;
|
| background-color: #232323;
|
| width: 1080px;
|
| padding: 10px 15px;
|
| border-radius: 15px;
|
| box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
|
| margin-bottom: 5px;
|
| overflow: hidden;
|
| }
|
|
|
| .container::after {
|
| position: absolute;
|
| top: 5px;
|
| right: 10px;
|
| content: "ANXETY";
|
| font-weight: bold;
|
| font-size: 24px;
|
| color: rgba(0, 0, 0, 0.2);
|
| }
|
|
|
|
|
| .container::before {
|
| content: "";
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| background-image: var(--img_background);
|
| background-size: var(--img_scale);
|
| background-repeat: var(--img_mode);
|
| opacity: var(--img_opacity);
|
| mix-blend-mode: screen;
|
| pointer-events: none;
|
| filter: blur(var(--img_blur));
|
| z-index: -1;
|
| }
|
|
|
| .image_1::before {
|
| background-position: var(--image_x) calc(-120px - var(--image_y));
|
| }
|
| .image_2::before {
|
| background-position: var(--image_x) calc(-290px - var(--image_y));
|
| }
|
| .image_3::before {
|
| background-position: var(--image_x) calc(-430px - var(--image_y));
|
| }
|
| .image_4::before {
|
| background-position: var(--image_x) calc(var(--img_height_dif) - var(--image_y));
|
| }
|
|
|
| .container_custom_downlad {
|
| height: 55px;
|
| transition: all 0.5s;
|
| }
|
|
|
| .container_custom_downlad.expanded {
|
| height: 270px;
|
| }
|
|
|
|
|
|
|
|
|
| .widget-html,
|
| .widget-button,
|
| .widget-text label,
|
| .widget-checkbox label,
|
| .widget-dropdown label,
|
| .widget-dropdown select,
|
| .widget-text input[type="text"] {
|
| font-family: cursive;
|
| font-size: 14px;
|
| color: white !important;
|
| user-select: none;
|
| }
|
|
|
| .widget-text input[type="text"]::placeholder {
|
| color: grey;
|
| }
|
|
|
|
|
|
|
|
|
| .widget-dropdown select,
|
| .widget-text input[type="text"] {
|
| height: 30px;
|
| background-color: var(--bg-field-color);
|
| border: 1px solid #262626;
|
| border-radius: 10px;
|
| box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
|
| transition: all 0.3s ease-in-out;
|
| backdrop-filter: blur(var(--bg-field-blur-level));
|
| }
|
|
|
| .widget-dropdown select:focus,
|
| .widget-text input[type="text"]:focus {
|
| border-color: #006ee5;
|
| }
|
|
|
| .widget-dropdown select:hover,
|
| .widget-text input[type="text"]:hover {
|
| transform: scale(1.003);
|
| background-color: var(--bg-field-color-hover);
|
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
| }
|
|
|
| .widget-dropdown option {
|
| background-color: #1c1c1c;
|
| }
|
|
|
|
|
|
|
|
|
| .widget-checkbox input[type="checkbox"] {
|
| appearance: none;
|
| position: relative;
|
| top: 4px;
|
| width: 40px;
|
| height: 20px;
|
| border: none;
|
| border-radius: 10px;
|
| background-color: #20b2aa;
|
| cursor: pointer;
|
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
|
| transition: background-color 0.3s ease;
|
| }
|
| .widget-checkbox input[type="checkbox"]:checked {
|
| background-color: #2196F3;
|
| }
|
|
|
| .widget-checkbox input[type="checkbox"]:before {
|
| content: '';
|
| position: absolute;
|
| top: 50%;
|
| left: 3px;
|
| width: 16px;
|
| height: 16px;
|
| border-radius: inherit;
|
| background-color: white;
|
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
| transform: translateY(-50%);
|
| transition: left 0.3s ease;
|
| }
|
| .widget-checkbox input[type="checkbox"]:checked:before {
|
| left: 21px;
|
| }
|
|
|
|
|
|
|
|
|
| .button_save {
|
| font-size: 15px;
|
| font-weight: bold;
|
| width: 120px;
|
| height: 35px;
|
| border-radius: 15px;
|
| background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
|
| background-size: 200% 200%;
|
| background-position: left bottom;
|
| transition: background 0.5s ease-in-out, transform 0.3s ease;
|
| }
|
|
|
| .button_save:hover {
|
| cursor: pointer;
|
| background-image: radial-gradient(circle at top left, purple 10%, #93ac47 90%);
|
| background-size: 200% 200%;
|
| background-position: right bottom;
|
| transform: translateY(1px);
|
| }
|
|
|
| .button_ngrok {
|
| font-size: 12px;
|
| height: 30px;
|
| border-radius: 10px;
|
| padding: 1px 12px;
|
| background-image: radial-gradient(circle at top left, purple 10%, violet 90%);
|
| background-size: 200% 200%;
|
| background-position: left bottom;
|
| transition: background 0.5s ease-in-out, transform 0.3s ease;
|
| white-space: nowrap;
|
| }
|
|
|
| .button_ngrok:hover {
|
| cursor: pointer;
|
| background-image: radial-gradient(circle at top left, purple 10%, #1D94BB 90%);
|
| background-size: 200% 200%;
|
| background-position: right bottom;
|
| transform: translateY(1px);
|
| }
|
|
|
| .button_save:active,
|
| .button_ngrok:active {
|
| filter: brightness(0.75) !important;
|
| }
|
|
|
|
|
| .jupyter-widgets.lm-Widget:focus {
|
| outline: none;
|
| }
|
|
|
|
|
|
|
|
|
| .info {
|
| position: absolute;
|
| top: -5px;
|
| right: 95px;
|
| color: grey;
|
| font-family: cursive;
|
| font-size: 14px;
|
| font-weight: normal;
|
| user-select: none;
|
| pointer-events: none;
|
| opacity: 0;
|
| transition: opacity 0.3s ease-in-out;
|
| display: inline-block;
|
| }
|
|
|
| .popup {
|
| position: absolute;
|
| top: 120px;
|
| z-index: 999;
|
| width: auto;
|
| padding: 10px;
|
| text-align: center;
|
| background-color: rgba(255, 255, 255, 0.05);
|
| backdrop-filter: blur(20px);
|
| border: 1px solid rgba(255, 255, 255, 0.45);
|
| border-radius: 8px;
|
| box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
|
| opacity: 0;
|
| color: #fff;
|
| font-size: 16px;
|
| font-family: cursive;
|
| user-select: none;
|
| cursor: default;
|
| pointer-events: none;
|
| transform: rotate(-5deg);
|
| transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
| }
|
|
|
| .sample {
|
| display: inline-block;
|
| margin-top: 25px;
|
| padding: 10px 100px;
|
| background-color: rgba(255, 255, 255, 0.2);
|
| color: #c6e2ff;
|
| border: 2px solid rgba(255, 255, 255, 0.2);
|
| border-radius: 8px;
|
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 25px rgba(255, 255, 255, 0.2);
|
| }
|
|
|
| .info.showed {
|
| opacity: 1;
|
| pointer-events: auto;
|
| }
|
|
|
| .info:hover + .popup {
|
| top: 35px;
|
| opacity: 1;
|
| pointer-events: initial;
|
| transform: rotate(0deg);
|
| }
|
|
|
|
|
|
|
|
|
| .container,
|
| .button_save {
|
| animation-name: showedWidgets;
|
| animation-duration: 1s;
|
| animation-fill-mode: forwards;
|
| }
|
|
|
| .container.hide,
|
| .button_save.hide {
|
| animation-name: hideWidgets;
|
| animation-duration: 0.5s;
|
| animation-fill-mode: forwards;
|
| }
|
|
|
| @keyframes showedWidgets {
|
| 0% {
|
| transform: translate3d(-65%, 15%, 0) scale(0) rotate(15deg);
|
| filter: blur(25px) grayscale(1) brightness(0.3);
|
| opacity: 0;
|
| }
|
| 100% {
|
| transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
|
| filter: blur(0) grayscale(0) brightness(1);
|
| opacity: 1;
|
| }
|
| }
|
|
|
| @keyframes hideWidgets {
|
| 0% {
|
| transform: translate3d(0, 0, 0) scale(1) rotate3d(1, 0, 0, 0deg);
|
| filter: blur(0) grayscale(0) brightness(1);
|
| opacity: 1;
|
| }
|
| 100% {
|
| transform: translate3d(0, 5%, 0) scale(0.9) rotate3d(1, 0, 0, 90deg);
|
| filter: blur(15px) grayscale(1) brightness(0.5);
|
| opacity: 0;
|
| }
|
| } |
